/* === SSP Good Practices: ventana modal === */
html.ssp-modal-open { overflow: hidden; }
.ssp-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
  color: #333;
}
.ssp-modal::backdrop { background: rgba(20, 20, 30, .6); }
.ssp-modal[open] { display: flex; flex-direction: column; }
.ssp-modal__bar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.ssp-modal__bar button {
  width: 36px; height: 36px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  color: #B4163F;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ssp-modal__bar button:hover:not(:disabled) { background: #B4163F; color: #fff; border-color: #B4163F; }
.ssp-modal__bar button:disabled { opacity: .3; cursor: default; }
.ssp-modal__close { margin-left: 8px; }
.ssp-modal__body { overflow-y: auto; padding: 28px 32px 36px; }
.ssp-modal__loading { text-align: center; color: #999; padding: 60px 0; }
.ssp-modal__head { display: flex; gap: 20px; align-items: center; margin-bottom: 18px; }
.ssp-modal__icon { flex: none; width: 88px; height: 88px; }
.ssp-modal__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.ssp-modal__head h2 { margin: 0; padding: 0; font-size: 24px; line-height: 1.2; color: #222; }
.ssp-modal__place { margin: 6px 0 0; padding: 0; color: #777; font-size: 15px; }
.ssp-modal__content { font-size: 16px; line-height: 1.6; }
.ssp-modal__content p { padding-bottom: 1em; }
.ssp-modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 8px 0 26px; }
.ssp-modal__btn {
  display: inline-block;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #fff !important;
  background: #B4163F;
  border: 2px solid #B4163F;
  border-radius: 3px;
  box-shadow: 6px 6px 18px rgba(0, 0, 0, .2);
  transition: all 300ms;
}
.ssp-modal__btn:hover { background: #fff; color: #B4163F !important; }
.ssp-modal__link { font-size: 14px; color: #B4163F; text-decoration: underline; }
.ssp-modal__sec { border-top: 1px solid #eee; padding-top: 18px; margin-top: 18px; }
.ssp-modal__sec h3 { font-size: 17px; margin: 0 0 10px; padding: 0; color: #B4163F; text-transform: uppercase; letter-spacing: .03em; }
.ssp-modal__sec h4 { font-size: 15px; margin: 10px 0 4px; padding: 0; }
.ssp-modal__sec p { font-size: 15px; line-height: 1.5; padding-bottom: .6em; }
.ssp-modal__sdgs .container_sdg { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 15px; }
.ssp-modal__sdgs .ods { flex: none; width: 48px; height: 48px; }
.ssp-modal__sdgs .ods img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 600px) {
  .ssp-modal { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .ssp-modal__body { padding: 20px; }
  .ssp-modal__head { gap: 14px; }
  .ssp-modal__icon { width: 64px; height: 64px; }
  .ssp-modal__head h2 { font-size: 20px; }
}