/* ============================================================
   COMPONENTE: MODAL (diálogo de contenido narrativo)
   Construido sobre <dialog> nativo: el focus trap, la tecla Esc,
   la inertización del fondo y la devolución del foco al disparador
   los aporta el navegador.
   Usado por "Mi Trayectoria"; reutilizable para otros bloques.
   Mobile first.
   ============================================================ */

.modal {
  /* Tonos propios del diseño de modales (degradado de cabecera y
     bordes de tarjetas): variantes muy claras de la paleta, se
     mantienen locales para no cargar :root con matices de un solo uso */
  --modal-gradient-start: #E9F2EE;
  --modal-gradient-mid: #F4F8F2;
  --modal-gradient-end: #FBF9F3;
  --modal-divider: #E8F1ED;
  --modal-card-border-teal: #DDEFEF;
  --modal-card-border-sand: #EDE4D2;
  --modal-card-border-coral: #F8DFD8;
  --modal-surface-peach: #FCEAE4;

  width: min(100% - 24px, 900px);
  max-height: min(90vh, 1000px);
  padding: 0;
  border: none;
  border-radius: 20px;
  overflow: hidden;

  background: var(--color-surface-cream);
  color: var(--color-ink);
  box-shadow: 0 24px 60px rgba(16, 33, 51, 0.28);
}

/* El layout interno solo se aplica al diálogo abierto: un `display` en
   .modal anularía el `display: none` con que el navegador oculta los
   <dialog> cerrados y el contenido aparecería incrustado en la página */
.modal[open] {
  display: flex;
  flex-direction: column;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

/* Entrada suave (solo al abrir; el navegador no anima el cierre) */
.modal[open] {
  animation: modal-in 0.25s ease-out;
}

.modal[open]::backdrop {
  animation: modal-backdrop-in 0.25s ease-out;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@keyframes modal-backdrop-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal[open],
  .modal[open]::backdrop {
    animation: none;
  }
}

/* Bloqueo del scroll de fondo mientras hay un modal abierto */
body.has-modal-open {
  overflow: hidden;
}

/* =====================
   CABECERA
===================== */
.modal__header {
  position: relative;
  flex-shrink: 0;
  padding: 24px 20px 20px;
  background: linear-gradient(
    105deg,
    var(--modal-gradient-start) 0%,
    var(--modal-gradient-mid) 48%,
    var(--modal-gradient-end) 100%
  );
  border-bottom: 1px solid var(--modal-divider);
}

.modal__eyebrow {
  font-family: var(--font-family-pangolin);
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-teal-bright);
  margin-bottom: 6px;
}

.modal__title {
  font-family: var(--font-family-simonetta);
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.modal__subtitle {
  font-family: var(--font-family-figtree);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
}

/* Botón de cierre */
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid rgba(31, 185, 180, 0.45);
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.modal__close:hover {
  background: rgba(31, 185, 180, 0.12);
  border-color: var(--color-teal-bright);
}

.modal__close svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* =====================
   CUERPO
===================== */
.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal__text {
  font-family: var(--font-family-figtree);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink);
}

.modal__text strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.modal__legal {
  font-family: var(--font-family-figtree);
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: var(--color-ink);
}

/* =====================
   TARJETAS DE DATOS
===================== */
.modal__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tarjeta de datos. El color de acento (icono y borde) se cambia con los
   modificadores --gold y --coral; por defecto es el turquesa */
.info-panel {
  --panel-accent: var(--color-teal-bright);
  --panel-border: var(--modal-card-border-teal);

  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 16px 18px;
}

.info-panel--gold {
  --panel-accent: var(--color-gold-bright);
  --panel-border: var(--modal-card-border-sand);
}

.info-panel--coral {
  --panel-accent: var(--color-coral);
  --panel-border: var(--modal-card-border-coral);
}

/* Variante centrada: icono, título y un texto breve (sin lista) */
.info-panel--center {
  text-align: center;
}

.info-panel--center .info-panel__icon {
  margin-inline: auto;
}

.info-panel__icon {
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  color: var(--panel-accent);
}

.info-panel__text {
  font-family: var(--font-family-figtree);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink);
}

.info-panel__title {
  font-family: var(--font-family-figtree);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.info-panel__list {
  list-style: none;
  font-family: var(--font-family-figtree);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-ink);
}

.info-panel__list li {
  position: relative;
  padding-left: 14px;
}

.info-panel__list li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* =====================
   BLOQUE DESTACADO
===================== */
.highlight-note {
  --note-surface: var(--color-surface-mint);
  --note-accent: var(--color-teal-bright);

  background: var(--note-surface);
  border-left: 5px solid var(--note-accent);
  border-radius: 16px;
  padding: 16px 18px;
}

/* Variante coral (bloque "El símbolo") */
.highlight-note--coral {
  --note-surface: var(--modal-surface-peach);
  --note-accent: var(--color-coral);
}

.highlight-note__icon {
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: 12px;
  color: var(--color-coral);
}

.highlight-note__title {
  font-family: var(--font-family-pangolin);
  font-size: 17px;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.highlight-note__text {
  font-family: var(--font-family-figtree);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
}

.highlight-note__text strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

/* =====================
   TABLET
===================== */
@media (min-width: 768px) {
  .modal {
    width: min(100% - 48px, 900px);
    border-radius: 24px;
  }

  .modal__header {
    padding: 32px 32px 24px;
  }

  .modal__eyebrow {
    font-size: 20px;
  }

  .modal__title {
    font-size: 32px;
  }

  .modal__subtitle {
    font-size: 18px;
  }

  .modal__close {
    top: 18px;
    right: 18px;
  }

  .modal__body {
    padding: 28px 32px;
    gap: 24px;
  }

  .modal__cards {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .modal__cards--three {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .modal__text {
    font-size: 19px;
  }
}

/* =====================
   ESCRITORIO
===================== */
@media (min-width: 1030px) {
  .modal__header {
    padding: 40px 40px 28px;
  }

  .modal__close {
    top: 22px;
    right: 22px;
  }

  .modal__body {
    padding: 32px 40px 36px;
    gap: 28px;
  }

  .modal__text {
    font-size: 20px;
    line-height: 1.55;
  }

  .info-panel {
    padding: 18px 20px;
  }

  .info-panel__list {
    font-size: 17px;
  }

  .highlight-note {
    padding: 20px 24px;
  }

  .highlight-note__text {
    font-size: 17px;
  }

  .modal__legal {
    font-size: 16px;
  }
}