/* ============================================================================
   EMPLEABILIDAD 360° · Hoja de estilos
   ----------------------------------------------------------------------------
   Arquitectura:
     1. Tokens de diseño (custom properties)
     2. Reset y base
     3. Utilidades (container, section, eyebrow, botones, iconos)
     4. Cabecera y navegación
     5. Hero «Despegue»
     6. Secciones de contenido (deseos, concepto, programa, temario,
        plan de 28 días, kit, promesa, audiencia, inscripción)
     7. Pie de página
     8. Sistema de animaciones de entrada (scroll reveal)
     9. Accesibilidad: foco visible y reducción de movimiento

   Convenciones:
     - Mobile-first: los media queries solo agregan, nunca corrigen.
     - Solo se animan transform/opacity (composición en GPU).
     - Los colores se usan siempre vía tokens; nunca hex sueltos en componentes.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS DE DISEÑO
   Paleta UADEN: blanco, celeste suave, azul marino y turquesa institucional.
   Los acentos de texto tienen variantes para superficies claras y oscuras.
--------------------------------------------------------------------------- */
:root {
  /* Colores base */
  --ink-900: #022B49;            /* azul marino del logo UADEN */
  --ink-800: #113C56;
  --ink-700: #28536A;
  --paper:   #F3F9FC;            /* fondo claro alterno */
  --white:   #FFFFFF;

  --blue-600: #007095;           /* turquesa del logo UADEN */
  --blue-700: #005A78;
  --blue-100: #D5EDF5;
  --blue-50:  #EDF8FC;

  --accent:      #27AAC1;
  --accent-hover:#48BDCF;
  --accent-soft: #DDF3F8;
  --accent-text: #007095;
  --accent-bright:#53D7EC;       /* solo para superficies oscuras */
  --gradient-brand: linear-gradient(155deg, #64CAD8 0%, #229AB7 48%, var(--blue-600) 100%);
  --gradient-text: linear-gradient(145deg, var(--ink-900), var(--blue-600));

  /* Superficie clara (por defecto) */
  --bg: var(--white);
  --fg: var(--ink-900);
  --fg-muted: #486273;
  --card-bg: var(--white);
  --border: #D5E5ED;
  --ring: var(--blue-600);       /* color del anillo de foco */

  /* Tipografías */
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  /* Escala tipográfica fluida */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-h2: clamp(1.9rem, 2.6vw + 0.9rem, 3rem);
  --text-h3: 1.25rem;

  /* Espaciado */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-section: clamp(4.5rem, 9vw, 7.5rem);

  /* Forma y sombra (sombras discretas, estilo suizo) */
  --radius-sm: 0.2rem;
  --radius-md: 0.35rem;
  --radius-pill: 0.25rem;
  --shadow-sm: 0 1px 2px rgba(16, 30, 60, 0.06);
  --shadow-lift: 0 14px 28px -14px rgba(16, 30, 60, 0.28);

  /* Movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-reveal: 700ms;

  /* Altura de la cabecera fija: la usan el scroll-margin y el menú móvil */
  --header-h: 4.5rem;

  color-scheme: light;
}

/* Superficie oscura: las secciones .section--dark y el hero redefinen los
   tokens semánticos; los componentes hijos no necesitan reglas propias. */
.surface-dark {
  --bg: var(--ink-900);
  --fg: #FFFFFF;
  --fg-muted: #B7C7E0;           /* celeste oscurecido, 10.8:1 sobre tinta */
  --card-bg: var(--ink-800);
  --border: rgba(255, 255, 255, 0.14);
  --ring: #8FB0FF;               /* foco visible sobre oscuro */
}

/* ----------------------------------------------------------------------------
   2. RESET Y BASE
--------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Desplazamiento suave solo si el usuario no pidió reducir movimiento */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--fg);
  background-color: var(--bg);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  text-wrap: balance;            /* evita líneas viudas en titulares */
}

p {
  text-wrap: pretty;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

/* Elimina el retraso de doble tap en táctiles sin bloquear el zoom */
a, button, input {
  touch-action: manipulation;
}

::selection {
  background-color: var(--accent);
  color: var(--ink-900);
}

/* Anclas: dejan espacio para la cabecera fija al navegar por #hash */
[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* ----------------------------------------------------------------------------
   3. UTILIDADES
--------------------------------------------------------------------------- */
.container {
  width: min(95%, 88rem);
  margin-inline: auto;
}

.container--narrow {
  width: min(95%, 68rem);
}

.section {
  padding-block: var(--space-section);
  background-color: var(--bg);
  color: var(--fg);
}

.section--muted {
  --bg: var(--paper);
}

.section--dark {
  /* Hereda los tokens de superficie oscura */
  --bg: var(--ink-900);
  --fg: #FFFFFF;
  --fg-muted: #C9D5E8;
  --card-bg: var(--ink-800);
  --border: rgba(255, 255, 255, 0.14);
  --ring: #8FB0FF;
}

.section__title {
  font-size: var(--text-h2);
  font-weight: 750;
  font-stretch: 105%;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

.section__intro {
  max-width: 58ch;
  margin-top: var(--space-4);
  color: var(--fg-muted);
  font-size: var(--text-lg);
}

/* Etiqueta de sección estilo «registro de misión» */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue-600);
  margin-bottom: var(--space-3);
}

.eyebrow--accent {
  color: var(--accent-bright);
}

/* Enlace de salto (visible solo con foco de teclado) */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background-color: var(--ink-900);
  color: var(--white);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Botones ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;              /* área táctil ≥ 48px */
  padding: 0.75rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 650;
  letter-spacing: 0.015em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) ease-out,
              box-shadow var(--dur-base) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

/* CTA base: acento turquesa con texto oscuro. */
.btn--primary {
  background-color: var(--accent);
  color: var(--ink-900);
}

.btn--primary:hover {
  background-color: var(--accent-hover);
  box-shadow: var(--shadow-lift);
}

/* Botón fantasma: hereda el color de la superficie donde vive */
.btn--ghost {
  border-color: currentColor;
  background-color: transparent;
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.btn--sm {
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  font-size: var(--text-sm);
}

.btn--block {
  width: 100%;
}

.btn .icon {
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .icon {
  transform: translateX(3px);
}

/* ----------------------------------------------------------------------------
   4. CABECERA Y NAVEGACIÓN
--------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--white);
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

/* Al hacer scroll gana fondo sólido (clase puesta por JS) */
.site-header.is-scrolled {
  background-color: rgba(10, 20, 40, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.brand__name b {
  color: var(--accent-bright);
}

/* Botón hamburguesa: visible solo en móvil */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background-color: transparent;
  cursor: pointer;
}

/* Alterna iconos abrir/cerrar según el estado del menú */
.nav-toggle__close { display: none; }

.site-header.is-menu-open .nav-toggle__open  { display: none; }
.site-header.is-menu-open .nav-toggle__close { display: block; }

/* Menú móvil: panel desplegable bajo la cabecera */
.nav {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-5);
  background-color: var(--ink-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-header.is-menu-open .nav {
  display: flex;
}

.nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav__link {
  display: block;
  padding: 0.6rem 0.25rem;
  text-decoration: none;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) ease;
}

.nav__link:hover {
  color: var(--white);
}

/* Navegación de escritorio */
@media (min-width: 56rem) {
  .nav-toggle {
    display: none;
  }

  .nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
    padding: 0;
    background-color: transparent;
    border-bottom: 0;
  }

  .nav__list {
    flex-direction: row;
    gap: var(--space-4);
  }

  .nav__link {
    padding: 0.5rem 0.25rem;
  }
}

/* ----------------------------------------------------------------------------
   5. HERO «DESPEGUE»
--------------------------------------------------------------------------- */
.hero {
  /* Superficie oscura con ligera atmósfera radial (glow de turbina) */
  --bg: var(--ink-900);
  --fg: #FFFFFF;
  --fg-muted: #C9D5E8;
  --ring: #8FB0FF;

  background-color: var(--bg);
  background-image:
    radial-gradient(56rem 30rem at 82% 8%, rgba(36, 86, 230, 0.18), transparent 60%),
    radial-gradient(40rem 26rem at 8% 96%, rgba(48, 197, 218, 0.14), transparent 60%);
  color: var(--fg);
  padding-block: calc(var(--header-h) + var(--space-6)) var(--space-6);
  overflow: hidden;              /* la órbita decorativa no genera scroll */
}

.hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.hero__title {
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  line-height: 0.98;
  font-size: clamp(2.1rem, 4.2vw + 0.9rem, 3.6rem);
  letter-spacing: 0.005em;
}

/* «360°» gigante en trazo (outline): la firma tipográfica del hero */
.hero__title-360 {
  position: relative;
  display: inline-block;
  margin-top: 0.1em;
  font-size: clamp(4rem, 8.5vw + 1.5rem, 7.75rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.95;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--white);
  paint-order: stroke;
}

/* Navegadores sin text-stroke: texto sólido */
@supports not (-webkit-text-stroke: 2px white) {
  .hero__title-360 {
    color: var(--white);
  }
}

/* Anillo orbital que cruza el «360°», con punto turquesa girando */
.orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.45em;
  height: 1.45em;
  translate: -50% -50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  pointer-events: none;
  animation: orbit-spin 16s linear infinite;
}

.orbit__dot {
  position: absolute;
  top: -0.09em;
  left: 50%;
  width: 0.17em;
  height: 0.17em;
  translate: -50%;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 12px rgba(48, 197, 218, 0.8);
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

.hero__tagline {
  margin-top: var(--space-4);
  font-size: clamp(1.15rem, 1.4vw + 0.8rem, 1.5rem);
  font-weight: 500;
}

.hero__tagline strong {
  color: var(--accent-bright);
}

.hero__lead {
  margin-top: var(--space-3);
  max-width: 52ch;
  color: var(--fg-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero__vis {
  max-width: 34rem;
  margin-inline: auto;
}

/* Datos de misión: 28 · 20 · 12 · 23 */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 2.5vw + 1rem, 3rem);
  font-weight: 800;
  font-stretch: 110%;
  font-variant-numeric: tabular-nums;   /* dígitos alineados durante el conteo */
  line-height: 1;
  color: var(--white);
  margin: 0;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  margin-bottom: 0.35rem;
}

@media (min-width: 48rem) {
  .hero__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .hero__vis {
    margin-inline: 0;
  }
}

/* ----------------------------------------------------------------------------
   6a. ¿TE SUENA? · Tarjetas de los 4 deseos
--------------------------------------------------------------------------- */
.desires__grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.desire-card {
  padding: var(--space-5);
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.desire-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.desire-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background-color: var(--blue-50);
  color: var(--blue-600);
  margin-bottom: var(--space-3);
}

.desire-card__title {
  font-size: var(--text-h3);
  font-weight: 700;
  font-stretch: 105%;
}

.desire-card__text {
  margin-top: var(--space-2);
  color: var(--fg-muted);
}

@media (min-width: 48rem) {
  .desires__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----------------------------------------------------------------------------
   6b. CONCEPTO · La gran pregunta
--------------------------------------------------------------------------- */
.concept {
  padding-block: var(--space-section);
  background-color: var(--paper);
  /* Línea de trayectoria sutil de fondo, coherente con el hero */
  background-image: linear-gradient(to top right,
      transparent 49.7%, var(--border) 49.7%, var(--border) 50.3%, transparent 50.3%);
}

.concept__inner {
  width: min(100% - 2.5rem, 56rem);
  margin-inline: auto;
  text-align: center;
}

.concept__question {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw + 0.8rem, 2.9rem);
  font-weight: 750;
  font-stretch: 108%;
  line-height: 1.15;
}

.concept__question em {
  font-style: normal;
  color: var(--accent-text);
}

.concept__text {
  max-width: 52ch;
  margin: var(--space-4) auto 0;
  font-size: var(--text-lg);
  color: var(--fg-muted);
}

/* ----------------------------------------------------------------------------
   6c. EL PROGRAMA · Lista de 12 capacidades
--------------------------------------------------------------------------- */
.learn__grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
}

.learn__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}

/* Marca de verificación dibujada con máscara CSS (hereda el color) */
.learn__item::before,
.kit__item::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  background-color: var(--blue-600);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}

@media (min-width: 40rem) {
  .learn__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .learn__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------------------------------------------
   6d. TEMARIO · Acordeón de 12 módulos
--------------------------------------------------------------------------- */
.modules__list {
  margin-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.module {
  border-bottom: 1px solid var(--border);
}

.module__heading {
  margin: 0;
}

.module__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-1);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease;
}

.module__trigger:hover {
  background-color: var(--blue-50);
}

/* Número de módulo: dato de misión en mono */
.module__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent-text);
  min-width: 2ch;
}

.module__titles {
  flex: 1;
  min-width: 0;                  /* permite truncar/envolver dentro de flex */
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.module__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  font-stretch: 105%;
  line-height: 1.2;
}

.module__tag {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.module__chevron {
  flex-shrink: 0;
  color: var(--fg-muted);
  transition: transform var(--dur-base) var(--ease-in-out);
}

.module.is-open .module__chevron {
  transform: rotate(180deg);
}

/* Panel plegable animado con grid-template-rows (sin medir alturas en JS) */
.module__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-in-out),
              visibility 0s linear var(--dur-base);
}

.module.is-open .module__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--dur-base) var(--ease-in-out);
}

.module__content {
  min-height: 0;                 /* necesario para que 0fr colapse */
  overflow: hidden;
  padding-inline: calc(2ch + var(--space-3) + var(--space-1)) var(--space-1);
}

.module__topics {
  list-style: none;
  padding: 0 0 var(--space-2);
  display: grid;
  gap: 0.4rem;
  color: var(--fg-muted);
}

/* Viñeta propia: guion corto alineado al número del módulo */
.module__topics li {
  display: flex;
  gap: 0.6rem;
}

.module__topics li::before {
  content: "—";
  color: var(--accent-text);
  flex-shrink: 0;
}

.module__materials,
.module__note {
  padding-block: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.module__materials strong,
.module__note strong {
  color: var(--fg);
}

/* ----------------------------------------------------------------------------
   6e. PLAN DE ATAQUE · Calendario de 28 días (elemento firma)
--------------------------------------------------------------------------- */
.plan {
  --bg: var(--paper);
}

.plan__layout {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
  align-items: center;
}

/* Calendario 7×4 generado por JS. Cada fila = una semana/fase. */
.plan__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1vw + 0.35rem, 0.9rem);
  font-weight: 500;
}

/* Intensidad creciente por semana: del azul claro al azul eléctrico */
.day--p1 { background-color: var(--blue-100);  color: #27427A; }
.day--p2 { background-color: #B9D0F7;          color: #1D3567; }
.day--p3 { background-color: var(--accent-soft); color: #092448; }
.day--p4 { background-color: #0061EB;          color: #FFFFFF; }

/* Día 28: la meta */
.day--final {
  background-color: var(--accent);
  color: #092448;
  font-weight: 700;
}

/* Animación de llenado en onda: cada celda entra con un pequeño retraso
   proporcional a su día (--i la define el JS al crearla). */
html.js .plan__grid .day {
  opacity: 0;
  transform: scale(0.7);
}

html.js .plan__grid.is-visible .day {
  opacity: 1;
  transform: scale(1);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  transition-delay: calc(var(--i) * 26ms);
}

/* Las 4 fases: lista con borde de color que replica la semana del calendario */
.plan__phases {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.phase {
  padding-left: var(--space-4);
  border-left: 3px solid var(--border);
}

.phase--1 { border-color: var(--blue-100); }
.phase--2 { border-color: #B9D0F7; }
.phase--3 { border-color: var(--accent-soft); }
.phase--4 { border-color: var(--accent); }

.phase__days {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
}

.phase__title {
  margin-top: 0.25rem;
  font-size: var(--text-h3);
  font-weight: 700;
  font-stretch: 108%;
}

.phase__text {
  margin-top: 0.25rem;
  color: var(--fg-muted);
}

.plan__outcome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.plan__outcome .icon {
  flex-shrink: 0;
  color: var(--accent-text);
}

@media (min-width: 64rem) {
  .plan__layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------------------------------------------------------
   6f. EL KIT · 23 herramientas sobre fondo oscuro
--------------------------------------------------------------------------- */
.kit__grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0 var(--space-5);
  margin-top: var(--space-6);
}

.kit__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
}

.kit__item::before {
  background-color: var(--accent-bright);  /* check turquesa sobre oscuro */
}

@media (min-width: 40rem) {
  .kit__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .kit__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------------------------------------------
   6g. LA PROMESA · Compromiso responsable
--------------------------------------------------------------------------- */
.promise__inner {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.promise__main .section__title {
  max-width: 30ch;
  font-size: clamp(1.5rem, 2vw + 0.8rem, 2.25rem);
}

.promise__note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  background-color: var(--paper);
  color: var(--fg-muted);
}

.promise__shield {
  flex-shrink: 0;
  color: var(--accent-text);
}

.promise__note strong {
  color: var(--fg);
}

@media (min-width: 64rem) {
  .promise__inner {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-6);
  }
}

/* ----------------------------------------------------------------------------
   6h. PARA QUIÉN · Chips de audiencia
--------------------------------------------------------------------------- */
.audience__grid {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.chip {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--card-bg);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   6i. INSCRIPCIÓN · CTA final con formulario
--------------------------------------------------------------------------- */
.enroll {
  background-image:
    radial-gradient(46rem 26rem at 90% 100%, rgba(48, 197, 218, 0.16), transparent 60%),
    radial-gradient(50rem 28rem at 0% 0%, rgba(36, 86, 230, 0.16), transparent 60%);
}

.enroll__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.enroll__lead {
  margin-top: var(--space-4);
  max-width: 52ch;
  color: var(--fg-muted);
  font-size: var(--text-lg);
}

.enroll__meta {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-bright);
}

/* Tarjeta del formulario */
.enroll__form {
  padding: var(--space-5);
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.enroll__form-title {
  font-size: 1.4rem;
  font-weight: 750;
  font-stretch: 108%;
  margin-bottom: var(--space-4);
}

.form-field {
  margin-bottom: var(--space-3);
}

.form-field__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.form-field__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  font: inherit;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.form-field__input::placeholder {
  color: rgba(201, 213, 232, 0.55);
}

.form-field__input:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

/* Campo con error: borde y mensaje asociados vía aria-describedby (JS) */
.form-field.has-error .form-field__input {
  border-color: #FF7A6B;
}

.form-field__error {
  margin-top: 0.4rem;
  font-size: var(--text-sm);
  color: #FFB4AA;                /* legible sobre tinta (7:1) */
}

.enroll__status {
  min-height: 1.5rem;            /* reserva espacio: sin saltos de layout */
  margin-top: var(--space-3);
  font-weight: 600;
  color: var(--accent-bright);
}

.enroll__privacy {
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--fg-muted);
}

@media (min-width: 64rem) {
  .enroll__inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* ----------------------------------------------------------------------------
   7. PIE DE PÁGINA
--------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--ink-900);
  color: #C9D5E8;
  padding-block: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-5);
}

.brand--footer {
  color: var(--white);
}

.site-footer__tagline {
  margin-top: var(--space-3);
  max-width: 40ch;
  font-size: var(--text-sm);
}

.site-footer__nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

.site-footer__nav a {
  color: inherit;
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--dur-fast) ease;
}

.site-footer__nav a:hover {
  color: var(--white);
}

.site-footer__legal {
  font-size: 0.8rem;
  color: rgba(201, 213, 232, 0.7);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .site-footer__legal {
    grid-column: 1 / -1;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ============================================================================
   ESTILOS COMPLEMENTARIOS: IMÁGENES CONTEXTUALES, LOGOS, REDES & WHATSAPP
============================================================================ */

/* Logo UADEN en cabecera y pie */
.brand__logo-img {
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}

.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  background: rgba(36, 86, 230, 0.25);
  color: #8FB0FF;
  border: 1px solid rgba(143, 176, 255, 0.35);
  margin-left: 0.25rem;
}

.brand__logo-img--footer {
  width: auto;
  max-width: 170px;
  height: auto;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-2);
}

/* Hero image wrapper */
.hero__image-wrapper {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: var(--ink-800);
}

.hero__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hero__image-wrapper:hover .hero__image {
  transform: scale(1.02);
}

.hero__image-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: rgba(10, 20, 40, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  color: #FFFFFF;
}

.hero__image-badge-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background-color: #22C55E;
  box-shadow: 0 0 8px #22C55E;
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Sección Concepto: Grilla y Media Editorial */
.concept__grid-layout {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 60rem) {
  .concept__grid-layout {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-6);
  }
}

.concept__features {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.concept__feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--fg);
}

.concept__feature-item i {
  font-size: 1.25rem;
  color: var(--blue-600);
}

.editorial-card {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
}

.editorial-card__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.editorial-card__caption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  background: var(--card-bg);
  border-top: 1px solid var(--border);
}

.editorial-card__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  margin-bottom: 0.2rem;
  font-weight: 600;
}

/* Módulos de Temario con Media */
.module__content--with-media {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 48rem) {
  .module__content--with-media {
    grid-template-columns: 1fr 280px;
  }
}

.module__media-col {
  margin-top: var(--space-2);
}

.module__thumb {
  width: 100%;
  max-width: 280px;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: block;
}

/* Sección Kit: Encabezado con Tarjeta Visual */
.kit__header-layout {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-5);
}

@media (min-width: 54rem) {
  .kit__header-layout {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.kit__image-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.5);
}

.kit__image-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.kit__badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  background: rgba(10, 20, 40, 0.9);
  backdrop-filter: blur(6px);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-bright);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Sección Promesa con Imagen */
.promise__media {
  margin-top: var(--space-4);
}

.promise__image-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.promise__image-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.promise__image-overlay {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 0.65rem 1rem;
  background: linear-gradient(to top, rgba(10, 20, 40, 0.92) 0%, rgba(10, 20, 40, 0.4) 70%, transparent 100%);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Sección Audiencia / Reinventarse */
.audience__layout {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 56rem) {
  .audience__layout {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-6);
  }
}

.audience__desc {
  margin-top: var(--space-3);
  color: var(--fg-muted);
  max-width: 50ch;
  font-size: var(--text-base);
}

.audience__image-wrapper {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  background: var(--card-bg);
}

.audience__image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.audience__image-caption {
  padding: var(--space-3) var(--space-4);
  font-size: 0.84rem;
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}

.audience__image-caption strong {
  color: var(--fg);
}

/* Redes Sociales Oficiales */
.social-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-4);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1.25rem;
  transition: all var(--dur-fast) ease;
}

.social-link:hover {
  transform: translateY(-3px);
}

.social-link--linkedin:hover {
  background-color: #0A66C2;
  border-color: #0A66C2;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(10, 102, 194, 0.45);
}

.social-link--facebook:hover {
  background-color: #1877F2;
  border-color: #1877F2;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.45);
}

.social-link--instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(214, 36, 159, 0.45);
}

.social-link--whatsapp:hover {
  background-color: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45);
}

.site-footer__heading {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-bright);
  margin-bottom: var(--space-3);
}

/* Botón Flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 99;
}

.whatsapp-float__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.25rem;
  background-color: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.6), 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.whatsapp-float__btn i {
  font-size: 1.35rem;
  line-height: 1;
}

.whatsapp-float__btn:hover {
  background-color: #20BA5A;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 28px -4px rgba(37, 211, 102, 0.7);
  color: #FFFFFF;
}

@media (max-width: 36rem) {
  .whatsapp-float__text {
    display: none;
  }

  .whatsapp-float__btn {
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .whatsapp-float__btn i {
    font-size: 1.6rem;
  }
}

/* ----------------------------------------------------------------------------
   8. ANIMACIONES DE ENTRADA (scroll reveal)
   El texto es visible desde el primer render, incluso si JavaScript falla.
   --reveal-delay (ms) escalona elementos hermanos desde el HTML.
--------------------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 1;
  transform: none;
}

html.js .is-revealed[data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .is-revealed[data-reveal] {
    animation: content-enter 550ms var(--ease-out) both;
    animation-delay: calc(var(--reveal-delay, 0) * 1ms);
  }
}

@keyframes content-enter {
  from { transform: translateY(12px); }
  to { transform: none; }
}

/* ----------------------------------------------------------------------------
   9. ACCESIBILIDAD
--------------------------------------------------------------------------- */
/* Foco visible en todos los elementos interactivos */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Reducción de movimiento: estados finales sin transiciones ni órbitas */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js .plan__grid .day {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .orbit {
    animation: none;
  }

  .btn,
  .btn .icon,
  .desire-card,
  .module__chevron,
  .module__panel {
    transition: none;
  }

  .btn:hover .icon,
  .desire-card:hover {
    transform: none;
  }
}