@charset "UTF-8";
/* ==========================================================================
   Fundación Lumen Academic — hoja de estilos única
   --------------------------------------------------------------------------
   Sin framework y sin compilación: este archivo se sube tal cual a cPanel.
   Todo el diseño se resuelve con variables, properties nativas y media
   queries, para que no haya nada que construir antes de publicar.

   Índice
     1.  Variables de marca
     2.  Reinicio y base
     3.  Tipografía
     4.  Utilidades de maquetación
     5.  Botones y enlaces
     6.  Cabecera y navegación
     7.  Portada
      8.  Secciones y componentes
      9.  Preguntas frecuentes
      10. Diplomados y detalle
      11. Formulario
      12. Pie, flotante y 404
      13. Animación al hacer scroll
      14. Impresión, prefers-reduced-motion y sin JavaScript
   ========================================================================== */

@import url("_fuentes.css");

/* ==========================================================================
   1. Variables de marca
   Tokens derivados del logo oficial. Si la guía de marca cambia, se cambia
   aquí y nowhere más.
   ========================================================================== */
:root {
  --navy: #0f1f3d;
  --navy-deep: #0a162d;
  --navy-soft: #243653;

  /* El dorado de marca se reserva para rellenos, bordes y texto sobre navy
     (6.24:1). Sobre fondo claro no llega al mínimo AA, así que el texto
     pequeño usa --gold-ink (4.77:1). */
  --gold: #c49a2a;
  --gold-soft: #d9bc68;
  --gold-pale: #f1e6c7;
  --gold-ink: #8a6a12;

  --white: #ffffff;
  --ivory: #faf8f3;
  --ink: #5f6b7a;
  --line: #e7e9ed;
  --error: #7c2d12;
  --error-bg: #9a3412;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --shell: 82.5rem;
  --alto-cabecera: 4.75rem;

  --transicion: cubic-bezier(0.22, 1, 0.36, 1);
  --seccion: clamp(4.5rem, 10vw, 9rem);
}

@media (min-width: 768px) {
  :root { --alto-cabecera: 5.5rem; }
}

/* ==========================================================================
   2. Reinicio y base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* El desplazamiento suave es nativo: no hace falta ninguna biblioteca. */
  scroll-behavior: smooth;
  /* Los anclajes quedan por debajo de la cabecera fija. */
  scroll-padding-top: calc(var(--alto-cabecera) + 1.25rem);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: rgb(196 154 42 / 0.26); color: var(--navy-deep); }

/* Enlace de salto: oculto hasta recibir el foco. */
.saltar {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--white);
  color: var(--navy);
  font-size: 0.875rem;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.2s;
}
.saltar:focus { transform: none; }

/* ==========================================================================
   3. Tipografía
   Escala editorial: el serifdisplay sostiene los titulares y la sans sostiene
   el texto corrido. Los tamaños son fluidos con clamp().
   ========================================================================== */
.titulo {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.titulo--blanco { color: var(--white); }
.titulo--grande { font-size: clamp(2.25rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -0.015em; }

.sobrelinea {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.sobrelinea--clara { color: var(--gold-soft); }

.parrafo {
  max-width: 38rem;
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  text-wrap: pretty;
}
.parrafo--claro { color: rgb(255 255 255 / 0.72); }

.entradilla {
  max-width: 38rem;
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  text-wrap: pretty;
}
.entrada--clara { color: rgb(255 255 255 / 0.72); }

.nota { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--ink); }

.destacado {
  margin-top: 2.5rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: var(--navy);
}

/* ==========================================================================
   4. Utilidades de maquetación
   ========================================================================== */
.contenedor {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) { .contenedor { padding-inline: 2rem; } }
@media (min-width: 1024px) { .contenedor { padding-inline: 3rem; } }

.seccion { padding-block: var(--seccion); }
.seccion--blanco { background: var(--white); }
.seccion--marfil { background: var(--ivory); }
.seccion--marina {
  background: linear-gradient(135deg, var(--navy) 0%, #16284a 65%, var(--navy-soft) 100%);
  color: var(--white);
}

.encabezado { max-width: 44rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.encabezado--centro { margin-inline: auto; text-align: center; }
.encabezado--centro .sobrelinea { justify-content: center; }
.encabezado--centro .entradilla { margin-inline: auto; }

/* Dos columnas que se apilan en móvil. */
.fila { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .fila--fila1 { grid-template-columns: 1fr 1fr; }
  .fila--fila2 { grid-template-columns: 1fr 1fr; }
  .fila--fila2 .fila__figura { order: -1; }
  .fila--formulario { grid-template-columns: 0.9fr 1.1fr; }
}

.fila__figura { overflow: hidden; }
.fila__figura img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1.2s var(--transicion);
}
.fila__figura:hover img { transform: scale(1.03); }
.fila__figura--retrato img { aspect-ratio: 4 / 5; }

.rejilla { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

.regla { height: 1px; background: var(--line); border: 0; }

/* ==========================================================================
   5. Botones y enlaces
   Cada botón tiene altura explícita: sin ella colapsan al alto de la línea.
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: transform 0.5s var(--transicion), background-color 0.5s var(--transicion),
              border-color 0.5s var(--transicion), color 0.5s var(--transicion),
              box-shadow 0.5s var(--transicion);
}
.boton:disabled { opacity: 0.6; cursor: not-allowed; }
.boton--sm { min-height: 2.75rem; padding: 0.75rem 1.25rem; }
.boton--lg { min-height: 3.5rem; padding: 1.125rem 2.25rem; }
.boton--bloque { width: 100%; }

.boton--oro { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.boton--oro:hover:not(:disabled) { background: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(-2px); }

.boton--navy { background: var(--navy); border-color: var(--navy); color: var(--white); }
.boton--navy:hover:not(:disabled) { background: var(--navy-soft); border-color: var(--navy-soft); transform: translateY(-2px); }

.boton--contorno { border-color: rgb(201 154 42 / 0.7); color: var(--gold); }
.boton--contorno:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }

.boton--fantasma { border-color: rgb(255 255 255 / 0.25); color: var(--white); background: rgb(255 255 255 / 0.04); }
.boton--fantasma:hover { border-color: rgb(201 154 42 / 0.7); background: rgb(255 255 255 / 0.1); transform: translateY(-2px); }

/* Enlace con subrayado que se dibuja al pasar el ratón o al recibir foco. */
.boton--enlace {
  position: relative;
  min-height: 2.75rem;
  padding: 0.875rem 0;
  color: var(--ink);
  font-size: 0.75rem;
}
.boton--enlace::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.5rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--transicion);
}
.boton--enlace:hover { color: var(--navy); }
.boton--enlace:hover::after, .boton--enlace:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-top: 2rem;
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.enlace-flecha::after { content: "\2192"; transition: transform 0.5s var(--transicion); }
.enlace-flecha:hover::after { transform: translateX(0.375rem); }

/* ==========================================================================
   6. Cabecera y navegación
   ========================================================================== */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  padding-block: 1rem;
  transition: background-color 0.5s var(--transicion), padding 0.5s var(--transicion),
              border-color 0.5s var(--transicion), box-shadow 0.5s var(--transicion);
}
/* Al desplazarse, la cabecera gana fondo para que el texto siga legible. */
.cabecera--fija {
  padding-block: 0.5rem;
  background: rgb(15 31 61 / 0.92);
  border-bottom-color: rgb(255 255 255 / 0.1);
  box-shadow: 0 18px 40px -28px rgb(15 31 61 / 0.35);
  backdrop-filter: blur(12px);
}

.cabecera__progreso {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

.cabecera__interior { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.marca { display: flex; align-items: center; margin-block: -0.375rem; padding-block: 0.375rem; }
.marca__logo { width: auto; height: 1.5rem; transition: transform 0.7s var(--transicion); }
.marca:hover .marca__logo { transform: scale(1.02); }
@media (min-width: 640px) { .marca__logo { height: 1.75rem; } }
@media (min-width: 1024px) { .marca__logo { height: 2rem; } }

.nav { display: none; }
@media (min-width: 1024px) { .nav { display: block; } }
.nav__lista { display: flex; align-items: center; gap: 1.75rem; }
@media (min-width: 1280px) { .nav__lista { gap: 2.25rem; } }

.nav__enlace {
  display: inline-block;
  padding-block: 0.375rem;
  color: rgb(255 255 255 / 0.68);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.5s var(--transicion);
}
@media (min-width: 1280px) { .nav__enlace { font-size: 0.8125rem; } }
.nav__enlace:hover, .nav__enlace[aria-current="true"] { color: var(--white); }

.cabecera__cta { display: none; }
@media (min-width: 768px) { .cabecera__cta { display: inline-flex; } }

.menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 2.75rem; height: 2.75rem;
  padding: 0 0.625rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
@media (min-width: 1024px) { .menu-btn { display: none; } }
.menu-btn__linea {
  display: block;
  width: 100%; height: 1px;
  background: var(--white);
  transition: transform 0.5s var(--transicion), opacity 0.3s;
}
.menu-btn[aria-expanded="true"] .menu-btn__linea:nth-child(1) { transform: translateY(0.34375rem) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__linea:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__linea:nth-child(3) { transform: translateY(-0.34375rem) rotate(-45deg); }

.menu-movil {
  padding: 1.5rem 1.25rem 2rem;
  background: rgb(15 31 61 / 0.98);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  backdrop-filter: blur(12px);
}
.menu-movil[hidden] { display: none; }
.menu-movil__lista { display: grid; gap: 0.25rem; margin-bottom: 1.5rem; }
.menu-movil__lista a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.75rem;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.2;
  text-decoration: none;
}
.menu-movil__num { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--gold); }

/* ==========================================================================
   7. Portada
   ========================================================================== */
.portada {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--alto-cabecera) + 3rem);
  padding-bottom: 5rem;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.portada__fondo { position: absolute; inset: -12% 0; z-index: -2; }
.portada__fondo img { width: 100%; height: 100%; object-fit: cover; }
.portada__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 60% at 70% 20%, rgb(196 154 42 / 0.16) 0%, rgb(196 154 42 / 0) 62%),
    linear-gradient(200deg, rgb(15 31 61 / 0.62) 0%, rgb(10 22 45 / 0.82) 58%, rgb(10 22 45 / 0.94) 100%);
}

.portada__contenido { width: 100%; }
.portada__sobrelinea { color: var(--gold-soft); margin-bottom: 1.75rem; }

.portada__titulo {
  max-width: 20ch;
  font-family: var(--display);
  font-size: clamp(2.75rem, 7.2vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Cada línea se revela con un retardo: el titular se escribe solo. */
.portada__titulo .linea { display: block; overflow: hidden; }
.portada__titulo .linea > span {
  display: block;
  transform: translateY(105%);
  animation: subir 1.1s var(--transicion) forwards;
}
.portada__titulo .linea:nth-child(1) > span { animation-delay: 0.15s; }
.portada__titulo .linea:nth-child(2) > span { animation-delay: 0.28s; }
.portada__titulo .linea:nth-child(3) > span { animation-delay: 0.41s; }

@keyframes subir { to { transform: none; } }

.portada__bajada {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.75);
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

.portada__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3.5rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
}
.cifra__valor { font-family: var(--display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1; color: var(--gold-soft); }
.cifra__etiqueta { max-width: 16ch; margin-top: 0.5rem; font-size: 0.6875rem; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); }

.portada__pista {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
}
@media (min-width: 1024px) { .portada__pista { display: flex; } }
.portada__pista-linea { width: 1px; height: 2.5rem; background: rgb(255 255 255 / 0.35); transform-origin: top; animation: pista 2.6s ease-in-out infinite; }
@keyframes pista {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  65% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ==========================================================================
   8. Secciones y componentes
   ========================================================================== */

/* Tarjetas con icono ------------------------------------------------------ */
.tarjeta { padding: 2.5rem; background: var(--white); transition: transform 0.7s var(--transicion), box-shadow 0.7s var(--transicion); }
.tarjeta:hover { transform: translateY(-0.25rem); box-shadow: 0 24px 60px -32px rgb(15 31 61 / 0.42); }
.tarjeta__icono, .diferencial__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  margin-bottom: 1.75rem;
  border: 1px solid rgb(196 154 42 / 0.3);
  border-radius: 999px;
  color: var(--gold-ink);
}
.tarjeta__icono svg, .diferencial__icono svg { width: 1.25rem; height: 1.25rem; }
.tarjeta__titulo, .diferencial__titulo { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
.tarjeta__texto, .diferencial__texto { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.7; color: var(--ink); }

/* Etapas ------------------------------------------------------------------ */
.etapas { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 800px) { .etapas { grid-template-columns: repeat(3, 1fr); } }
.etapa { padding: clamp(2rem, 4vw, 3rem); background: var(--white); }
.etapa__numero { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--gold-ink); }
.etapa__titulo { margin-top: 1rem; font-family: var(--display); font-size: 1.875rem; line-height: 1.15; }
.etapa__texto { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.7; color: var(--ink); }
.propuesta__destacado {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  text-align: center;
  color: var(--navy);
}

/* Pasos de la metodología -------------------------------------------------- */
.pasos { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.paso {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--line);
}
.paso__etiqueta { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.paso__detalle { font-size: 0.9375rem; color: var(--ink); }

/* Puntuaciones ------------------------------------------------------------- */
.puntuacion { padding: clamp(2rem, 4vw, 3rem); background: var(--white); text-align: center; }
.puntuacion__valor { font-family: var(--display); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; color: var(--navy); }
.puntuacion__signo { color: var(--gold-ink); }
.puntuacion__titulo { margin-top: 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.puntuacion__texto { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.7; color: var(--ink); }

/* Diferenciales sobre fondo marino ---------------------------------------- */
.diferenciales .rejilla { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.12); }
.diferencial { padding: clamp(2rem, 4vw, 2.75rem); background: transparent; }
.diferencial__icono { border-color: rgb(196 154 42 / 0.35); color: var(--gold-soft); }
.diferencial__titulo { color: var(--white); }
.diferencial__texto { color: rgb(255 255 255 / 0.68); }

/* Cinta de palabras -------------------------------------------------------- */
.cinta { margin-top: clamp(3rem, 6vw, 5rem); overflow: hidden; padding-block: 1.5rem; border-block: 1px solid rgb(255 255 255 / 0.12); }
.cinta__pista { display: flex; width: max-content; animation: correr 38s linear infinite; }
.cinta__grupo { display: flex; align-items: center; gap: 2rem; padding-inline: 2rem; }
.cinta__palabra { font-family: var(--display); font-size: 2.25rem; line-height: 1; color: rgb(255 255 255 / 0.36); white-space: nowrap; }
.cinta__punto { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--gold); }
@keyframes correr { to { transform: translate3d(-50%, 0, 0); } }

/* Fundador ----------------------------------------------------------------- */
.fundador__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
@media (min-width: 900px) { .fundador__grid { grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr); } }
.fundador__perfil { max-width: 42rem; }
.fundador__nombre { margin-top: 2rem; font-family: var(--display); font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.12; color: var(--navy); }
.fundador__cargo { margin-top: 0.5rem; margin-bottom: 1.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.fundador__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 4vw, 3.25rem); border: 1px solid var(--line); border-top: 3px solid var(--gold); background: linear-gradient(145deg, var(--ivory), var(--white)); }
.cita { margin: 0; padding-left: 1.5rem; border-left: 2px solid var(--gold); }
.cita p { font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.4; font-style: italic; color: var(--navy); }
.areas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.areas li { padding: 0.375rem 0.875rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; color: var(--ink); }

/* Cierre ------------------------------------------------------------------- */
.cierre__interior { max-width: 48rem; text-align: center; }
.cierre__interior .sobrelinea { justify-content: center; }
.cierre__interior .entradilla { margin-inline: auto; }
.cierre__interior .boton { margin-top: 2.5rem; }

/* ==========================================================================
   9. Preguntas frecuentes
   --------------------------------------------------------------------------
   Se usan <details> nativos: funcionan sin JavaScript, son accesibles con el
   teclado y el texto sigue en el HTML aunque estén plegados, que es lo que
   necesitan tanto el buscador como los motores que citan fuentes.
   ========================================================================== */
.preguntas { max-width: 56rem; margin-inline: auto; background: var(--white); border: 1px solid var(--line); }

.pregunta { border-bottom: 1px solid var(--line); }
.pregunta:last-child { border-bottom: 0; }

.pregunta__titulo {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  transition: background 0.3s var(--transicion);
}
.pregunta__titulo::-webkit-details-marker { display: none; }
.pregunta__titulo:hover { background: rgb(250 248 243 / 0.9); }
.pregunta__titulo:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pregunta__titulo h3 { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }

.pregunta__titulo::after {
  content: "";
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.4rem;
  margin-left: auto;
  background: var(--gold-ink);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: transform 0.35s var(--transicion);
}
.pregunta[open] > .pregunta__titulo::after { transform: rotate(45deg); }
.pregunta[open] > .pregunta__titulo { color: var(--navy); }

.pregunta__respuesta { padding: 0 1.75rem 1.75rem; color: var(--ink); }
.pregunta__respuesta p { max-width: 62ch; }
.pregunta__respuesta p + p,
.pregunta__respuesta p + ul { margin-top: 0.875rem; }
.pregunta__respuesta ul { max-width: 62ch; padding-left: 1.25rem; }
.pregunta__respuesta li + li { margin-top: 0.5rem; }
.pregunta__respuesta strong { color: var(--navy); font-weight: 600; }
.pregunta__respuesta a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 0.2em; }
/* Un enlace dentro de una frase mide lo que la línea, unos 20px. El relleno
   vertical amplía el área pulsable hasta 28px sin alterar el interlineado ni
   romper el corte de línea, y de paso lo deja por encima del mínimo de 24px. */
.pregunta__respuesta a { padding: 0.25rem 0; border-radius: 2px; }
.pregunta__respuesta a:hover { text-decoration-color: var(--navy); }

/* ==========================================================================
   10. Diplomados y detalle
   ========================================================================== */
.programa { background: var(--white); transition: transform 0.7s var(--transicion), box-shadow 0.7s var(--transicion); }
.programa:hover { transform: translateY(-0.375rem); box-shadow: 0 24px 60px -32px rgb(15 31 61 / 0.42); }
.programa__interior { display: flex; flex-direction: column; height: 100%; }
.programa__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.programa__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--transicion); }
.programa:hover .programa__foto img { transform: scale(1.06); }
.programa__velo { position: absolute; inset: 0; background: linear-gradient(200deg, rgb(15 31 61 / 0.35) 0%, rgb(15 31 61 / 0.72) 58%, rgb(10 22 45 / 0.9) 100%); }
.programa__velo--luminoso { background: linear-gradient(195deg, rgb(255 255 255 / 0.14) 0%, rgb(15 31 61 / 0.6) 52%, rgb(10 22 45 / 0.92) 100%); }
.programa__velo--claro { background: linear-gradient(205deg, rgb(36 54 83 / 0.55) 0%, rgb(15 31 61 / 0.82) 55%, rgb(10 22 45 / 0.94) 100%); }

.programa__indice {
  position: absolute; left: 0; top: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-block: 1px solid rgb(255 255 255 / 0.2);
  border-right: 1px solid rgb(255 255 255 / 0.2);
  background: rgb(10 22 45 / 0.4);
  color: var(--gold-soft);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}
.programa__cabecera { position: absolute; inset: auto 0 0; padding: 1.5rem; }
@media (min-width: 640px) { .programa__cabecera { padding: 1.75rem; } }
.programa__horas { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); }
.programa__titulo { margin-top: 0.625rem; font-family: var(--display); font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.2; color: var(--white); }

.programa__cuerpo { display: flex; flex: 1; flex-direction: column; padding: 1.75rem; }
@media (min-width: 640px) { .programa__cuerpo { padding: 2rem; } }
.programa__claim { font-family: var(--display); font-size: 1.375rem; line-height: 1.3; color: var(--navy); }
.programa__texto { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.7; color: var(--ink); }
.programa__modulos { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: 0.625rem; }
.programa__modulos li { position: relative; padding-left: 1.25rem; font-size: 0.875rem; line-height: 1.5; color: rgb(15 31 61 / 0.8); }
.programa__modulos li::before { content: ""; position: absolute; left: 0; top: 0.625rem; width: 0.75rem; height: 1px; background: rgb(196 154 42 / 0.7); }
.programa__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: auto; padding-top: 2rem; }

/* Certificación ------------------------------------------------------------ */
.certificacion {
  display: flex; flex-direction: column;
  gap: 1.75rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: 2.25rem;
  border: 1px solid var(--line);
  background: var(--ivory);
}
@media (min-width: 900px) { .certificacion { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; } }
.certificacion__texto { max-width: 34rem; }
.certificacion__logo { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 14rem; padding: 1rem; background: var(--white); }

/* Diálogo de detalle ------------------------------------------------------- */
.detalle {
  width: min(56rem, calc(100vw - 2rem));
  max-height: 88vh;
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--navy);
}
.detalle::backdrop { background: rgb(10 22 45 / 0.72); backdrop-filter: blur(4px); }
.detalle[open] { animation: entrar 0.5s var(--transicion); }
@keyframes entrar { from { opacity: 0; transform: translateY(1.5rem); } }
.detalle__cabecera { position: relative; padding: clamp(1.75rem, 4vw, 2.5rem); background: linear-gradient(135deg, var(--navy) 0%, #16284a 65%, var(--navy-soft) 100%); color: var(--white); }
.detalle__titulo { margin-top: 0.75rem; padding-right: 3rem; font-family: var(--display); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.12; color: var(--white); }
.detalle__cerrar { position: absolute; right: 1rem; top: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 999px; background: none; color: var(--white); cursor: pointer; transition: border-color 0.5s, color 0.5s; }
.detalle__cerrar:hover { border-color: var(--gold); color: var(--gold); }
.detalle__cerrar svg { width: 1.125rem; height: 1.125rem; }
.detalle__cuerpo { padding: clamp(1.75rem, 4vw, 2.5rem); overflow-y: auto; max-height: 52vh; }
.detalle__cuerpo p { max-width: 40rem; font-size: 1rem; line-height: 1.75; color: var(--ink); }
.detalle__cuerpo p + p { margin-top: 1rem; }
.detalle__modulo { padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.detalle__modulo:first-of-type { border-top: 1px solid var(--line); }
.detalle__modulo h3 { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
.detalle__cuerpo .detalle__modulo-meta { margin-top: 0.5rem; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.detalle__unidades { margin-top: 0.875rem; display: grid; gap: 0.5rem; }
.detalle__unidades li { position: relative; padding-left: 1.25rem; font-size: 0.875rem; line-height: 1.55; color: rgb(15 31 61 / 0.8); }
.detalle__unidades li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 0.75rem; height: 1px; background: rgb(196 154 42 / 0.7); }
.detalle__entregable { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid rgb(196 154 42 / 0.3); background: var(--white); }
.detalle__entregable h3 { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.detalle__entregable p { margin-top: 0.75rem; font-size: 0.9375rem; }
.detalle__pie { padding: 0 clamp(1.75rem, 4vw, 2.5rem) clamp(1.75rem, 4vw, 2.5rem); }

/* ==========================================================================
   11. Formulario
   ========================================================================== */
.formulario { padding: 1.5rem; border: 1px solid var(--line); background: var(--ivory); }
@media (min-width: 640px) { .formulario { padding: 2.25rem; } }
.formulario__rejilla { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .formulario__rejilla { grid-template-columns: 1fr 1fr; } }

.campo { display: block; margin-top: 1.25rem; }
.formulario__rejilla .campo { margin-top: 0; }
.campo label { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.9375rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: rgb(15 31 61 / 0.3); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px rgb(196 154 42 / 0.4); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: rgb(154 52 18 / 0.6); }
.campo__error { display: block; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--error); }

.campo__select { position: relative; display: block; }
.campo__select::after {
  content: "";
  position: absolute; right: 1rem; top: 50%;
  width: 0.5rem; height: 0.5rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.campo__select select { appearance: none; padding-right: 2.75rem; }

.campo--consentimiento { display: flex; align-items: flex-start; gap: 0.875rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.campo--consentimiento input {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  margin-top: 0.125rem;
  appearance: none;
  border: 1px solid rgb(15 31 61 / 0.3);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
}
.campo--consentimiento input:checked { border-color: var(--gold); background: var(--gold); }
.campo--consentimiento label { margin: 0; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--ink); }
.campo--consentimiento label a { color: var(--navy); }

/* Campo trampa para bots. */
.trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.alerta, .exito { margin-top: 1.75rem; padding: 1rem; font-size: 0.875rem; line-height: 1.6; }
.alerta { border: 1px solid rgb(154 52 18 / 0.25); background: rgb(154 52 18 / 0.06); color: var(--error); }
.exito { border: 1px solid rgb(196 154 42 / 0.4); background: var(--gold-pale); color: var(--navy); }

.formulario__pie { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; margin-top: 2rem; }
@media (min-width: 640px) { .formulario__pie { flex-direction: row; align-items: center; justify-content: space-between; } }
.formulario__nota { font-size: 0.8125rem; color: var(--ink); }

/* ==========================================================================
   12. Pie, flotante y 404
   ========================================================================== */
.pie { padding-top: clamp(3.5rem, 7vw, 6rem); background: var(--navy-deep); color: var(--white); }
.pie__rejilla { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 700px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pie__logo { width: auto; height: 1.75rem; }
.pie__lema { margin-top: 1.25rem; max-width: 24ch; font-family: var(--display); font-size: 1.25rem; line-height: 1.35; color: rgb(255 255 255 / 0.7); }
.pie__lugar { margin-top: 1rem; font-size: 0.8125rem; color: rgb(255 255 255 / 0.5); }
.pie__campus { margin-top: 2rem; }
.pie__titulo { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.pie__lista { display: grid; gap: 0.625rem; margin-top: 1.5rem; }
.pie__lista a { display: flex; align-items: center; min-height: 1.75rem; padding-block: 0.25rem; font-size: 0.9375rem; color: rgb(255 255 255 / 0.68); text-decoration: none; transition: color 0.5s; }
.pie__lista a:hover { color: var(--white); }
.pie__texto { font-size: 0.9375rem; color: rgb(255 255 255 / 0.5); }

.pie__barra { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.8125rem; color: rgb(255 255 255 / 0.5); }
@media (min-width: 800px) { .pie__barra { flex-direction: row; align-items: center; justify-content: space-between; } }
.pie__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
/* Enlaces legales: en línea, su caja mide solo la altura de la fuente (~16px).
   Se vuelven flex para alcanzar los 24px de área táctil sin alterar el diseño. */
.pie__legal a { display: inline-flex; align-items: center; min-height: 1.75rem; padding-block: 0.25rem; color: rgb(255 255 255 / 0.5); text-decoration: none; }
.pie__legal a:hover { color: var(--white); }

/* Botón flotante de contacto */
.flotante {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  background: rgb(15 31 61 / 0.94);
  color: var(--white);
  font-size: 0.8125rem;
  text-decoration: none;
  box-shadow: 0 18px 40px -20px rgb(10 22 45 / 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
  transition: opacity 0.5s var(--transicion), transform 0.5s var(--transicion);
}
.flotante--visible { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 480px) { .flotante__texto { display: none; } }
.flotante__punto { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--gold); }
.flotante__punto::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px; background: var(--gold);
  animation: pulso 3.4s var(--transicion) infinite;
}
@keyframes pulso {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* 404 ----------------------------------------------------------------------
   El numeral va en el dorado legible, no en el dorado pálido: sobre marfil el
   tono pálido apenas llegaba a 1.17:1 y el número desaparecía. */
.error-404 { display: grid; place-items: center; min-height: 100svh; padding: 2rem 1.25rem; text-align: center; background: var(--ivory); }
.error-404__codigo { font-family: var(--display); font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--gold-ink); }

/* ==========================================================================
   13. Animación al hacer scroll
   IntersectionObserver añade .visible. Sin JS, el CSS de la sección 13 deja
   todo visible, así que el contenido nunca depende de la animación.
   ========================================================================== */
[data-revelar] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.9s var(--transicion), transform 0.9s var(--transicion);
}
[data-revelar].visible { opacity: 1; transform: none; }

/* Escalonado de los grupos: cada hijo se retrasa un poco más. */
[data-revelar-grupo] > * { transition-delay: 0s; }
[data-revelar-grupo] > *:nth-child(2) { transition-delay: 0.08s; }
[data-revelar-grupo] > *:nth-child(3) { transition-delay: 0.16s; }
[data-revelar-grupo] > *:nth-child(4) { transition-delay: 0.24s; }
[data-revelar-grupo] > *:nth-child(5) { transition-delay: 0.32s; }
[data-revelar-grupo] > *:nth-child(6) { transition-delay: 0.4s; }

/* ==========================================================================
   14. Impresión, reduced-motion y sin JavaScript
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
  .portada__titulo .linea > span { transform: none; }
  .cinta__pista, .portada__pista-linea, .flotante__punto::after { animation: none; }
}

@media print {
  @page { margin: 16mm 14mm; }
  html, body { background: #fff; color: #000; font-size: 11pt; }
  .cabecera, .pie, .flotante, .cinta, .portada__pista, dialog, .boton { display: none !important; }
  .seccion { padding-block: 8mm !important; break-inside: avoid; }
  [data-revelar] { opacity: 1 !important; transform: none !important; }
  h1, h2, h3 { color: #000 !important; break-after: avoid; }
  p, li { color: #1a1a1a !important; orphans: 3; widows: 3; }
  img { max-width: 100% !important; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}

/* Si el JS no carga, nada queda invisible ni inaccesible. */
.sin-js [data-revelar] { opacity: 1; transform: none; }
.sin-js .portada__titulo .linea > span { transform: none; }
.sin-js .flotante { opacity: 1; transform: none; pointer-events: auto; }