/* ==========================================================================
   FUNDACIÓN IMSS — Sistema de diseño
   Dirección: editorial documental. Fotografía real + tipografía con autoridad.
   Paleta 60/30/10 — el dorado SOLO convierte.
   ========================================================================== */

:root {
  --verde-profundo: #14352A;
  --verde-medio:    #1A4636;
  --verde-primario: #1F5C43;
  --dorado:         #C9A227;
  --dorado-suave:   #E8D9A0;
  --neutro-claro:   #EFF3EE;
  --blanco:         #FDFDFB;
  --tinta:          #10251E;
  --tinta-suave:    #52685D;
  --linea:          #DCE6DD;

  --f-display: "Fraunces", Georgia, serif;
  --f-body: "Outfit", "Avenir Next", sans-serif;

  --t-hero:  clamp(2.7rem, 6.2vw, 5.25rem);
  --t-h2:    clamp(2rem, 4.4vw, 3.5rem);
  --t-h3:    clamp(1.2rem, 1.9vw, 1.6rem);
  --t-body:  clamp(1rem, 1.1vw, 1.09rem);
  --t-eyebrow: 0.76rem;

  --dur: 380ms;
  --ease: cubic-bezier(.22,.85,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --r: 4px;
  --r-lg: 20px;
  --container: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.68;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a  { color: var(--verde-primario); }

/* ── Accesibilidad ── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--dorado); color: var(--tinta);
  padding: .8rem 1.4rem; font-weight: 700;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; }

/* Sólo para lectores de pantalla: la audiodescripción de cada imagen */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* …salvo cuando recibe el foco con teclado: entonces se muestra */
.sr-only-focusable:focus, .sr-only-focusable:focus-within {
  position: static !important; width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
}

/* ── Barra de progreso de scroll (dorada) ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--dorado), var(--dorado-suave));
  z-index: 200; pointer-events: none;
}

/* ── Cursor: 3 estados ── */
@media (hover: hover) and (pointer: fine) {
  .cursor-dot {
    position: fixed; top: 0; left: 0; z-index: 250;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--verde-primario);
    pointer-events: none;
    transition: width .3s var(--ease), height .3s var(--ease),
                background .3s var(--ease), border-color .3s var(--ease), opacity .25s;
    display: grid; place-items: center;
  }
  .cursor-dot.is-cta {
    width: 52px; height: 52px; background: transparent;
    border: 1.5px solid var(--dorado);
    box-shadow: 0 0 30px rgba(201,162,39,.45);
  }
  .cursor-dot.is-card {
    width: 92px; height: 92px; background: var(--dorado);
  }
  .cursor-label {
    display: none; color: var(--verde-profundo);
    font-size: .66rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; text-align: center; line-height: 1.25;
  }
  .cursor-dot.is-card .cursor-label { display: block; }
}
@media (prefers-reduced-motion: reduce) { .cursor-dot, .scroll-progress { display: none !important; } }

/* ── Layout ── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: 1560px; margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--f-display); font-weight: 500; line-height: 1.08; margin: 0;
             letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }
p  { margin: 0 0 1rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--verde-primario); margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--dorado); flex: none;
}
.on-dark .eyebrow { color: var(--dorado-suave); }

.lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); color: var(--tinta-suave); max-width: 50ch; line-height: 1.6; }
.on-dark .lead, .on-dark p { color: #B9CBBF; }

/* ══════════════════ HEADER: un solo menú, sticky ══════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  transition: background var(--dur), backdrop-filter var(--dur), border-color var(--dur);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(16,37,30,.9);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: rgba(232,217,160,.16);
}
.site-header .container-wide {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 82px;
}
.brand { display: flex; align-items: center; gap: .75rem; color: var(--blanco); text-decoration: none; }
.brand-name { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.15; }
.brand-name small {
  display: block; font-family: var(--f-body); font-size: .6rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--dorado-suave); font-weight: 500;
}

.main-nav ul { display: flex; gap: .15rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  display: block; padding: .5rem .85rem; color: #DCE8DF; text-decoration: none;
  font-size: .9rem; font-weight: 500; border-radius: 999px;
  transition: color var(--dur), background var(--dur);
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--blanco); background: rgba(232,217,160,.13); }

.nav-cta {
  background: var(--dorado); color: var(--verde-profundo) !important;
  font-weight: 700 !important; padding: .62rem 1.4rem !important; margin-left: .6rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) !important;
}
.nav-cta:hover { background: var(--dorado) !important; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(201,162,39,.45); }

/* ══════════════════ Controles flotantes (fuera del menú) ══════════════════
   El menú queda limpio: sólo navegación y la acción de donar.
   Sonido abajo a la derecha · Accesibilidad abajo a la izquierda. */
/* Un solo grupo, abajo a la derecha. Dos círculos iguales, sin texto.
   La etiqueta vive en aria-label y aparece como tooltip al pasar el ratón. */
.dock {
  position: fixed; z-index: 160;
  bottom: clamp(1rem, 2.5vh, 1.6rem);
  right: clamp(1rem, 2.5vw, 1.6rem);
  display: flex; gap: .5rem; align-items: flex-end;
}
/* Contenedor del botón de accesibilidad: ancla del panel desplegable */
.a11y-wrap { position: relative; display: flex; }

.sound-toggle, .a11y-btn, .sound-off {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(16,37,30,.78); backdrop-filter: blur(14px);
  border: 1px solid rgba(232,217,160,.26);
  color: #C9D8CD;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.55);
  transition: background var(--dur), border-color var(--dur), color var(--dur), transform var(--dur) var(--ease);
}
.sound-toggle:hover, .a11y-btn:hover, .sound-off:hover {
  border-color: var(--dorado-suave); color: var(--blanco); transform: translateY(-2px);
}
.a11y-btn[aria-expanded="true"] {
  border-color: var(--dorado); color: var(--dorado); background: rgba(16,37,30,.92);
}

/* ── Sinestesia: se enciende como una lámpara ── */
.sound-toggle { position: relative; overflow: visible; }
/* El texto sólo lo leen los lectores de pantalla; en pantalla es un tooltip */
.sound-toggle > span:not(.eq) {
  position: absolute; right: calc(100% + .6rem); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(16,37,30,.94); color: var(--dorado-suave);
  border: 1px solid rgba(232,217,160,.24); border-radius: 999px;
  padding: .4rem .85rem; font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur), transform var(--dur) var(--ease);
}
.sound-toggle:hover > span:not(.eq),
.sound-toggle:focus-visible > span:not(.eq) { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Encendido: halo dorado que crece una vez y se queda respirando */
.sound-toggle::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(201,162,39,.55);
  opacity: 0; transition: opacity .4s;
}
/* Nivel 1 · sólo interacción: dorado suave, sin halo */
.sound-toggle[data-nivel="1"] {
  border-color: var(--dorado-suave); color: var(--dorado-suave);
  background: rgba(28,64,50,.9);
  box-shadow: 0 0 14px -6px rgba(232,217,160,.5), 0 8px 22px -10px rgba(0,0,0,.55);
}
/* Nivel 2 · inmersión: dorado pleno y halo que respira */
.sound-toggle[data-nivel="2"] {
  border-color: var(--dorado); color: var(--dorado);
  background: rgba(40,86,66,.95);
  box-shadow: 0 0 28px -3px rgba(201,162,39,.7), 0 8px 22px -10px rgba(0,0,0,.55);
}
.sound-toggle[data-nivel="2"]::after { opacity: 1; animation: encender 2.6s ease-out infinite; }
@keyframes encender {
  0%   { box-shadow: 0 0 0 0 rgba(201,162,39,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(201,162,39,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
}
/* Apagado: un parpadeo corto, como una luz que se corta */
.sound-toggle.apagando { animation: apagar .5s var(--ease) 1; }
@keyframes apagar {
  0%   { color: var(--dorado); box-shadow: 0 0 22px -4px rgba(201,162,39,.6); }
  35%  { color: #F4E9C4; box-shadow: 0 0 6px -2px rgba(201,162,39,.25); }
  100% { color: #C9D8CD; box-shadow: 0 8px 22px -10px rgba(0,0,0,.55); }
}

.eq { display: flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.eq i {
  display: block; width: 2px; border-radius: 1px;
  background: currentColor; transform-origin: 50% 100%;
  transition: height .45s var(--ease);
}
/* Apagado: un ecualizador quieto, no tres puntos suspensivos */
.eq i:nth-child(1) { height: 5px; }
.eq i:nth-child(2) { height: 11px; }
.eq i:nth-child(3) { height: 7px; }
.eq i:nth-child(4) { height: 13px; }
.sound-toggle[data-nivel="1"] .eq i { animation: eq 1.5s ease-in-out infinite alternate; }
.sound-toggle[data-nivel="2"] .eq i { animation: eq .75s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: .15s; }
.eq i:nth-child(3) { animation-delay: .3s; }
.eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { from { height: 3px; } to { height: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .eq i { animation: none !important; height: 8px; }
  .sound-toggle::after, .sound-toggle.apagando { animation: none !important; }
}
/* ══════════════════ Panel de accesibilidad ══════════════════ */
.a11y-panel {
  position: absolute; bottom: calc(100% + .75rem); right: 0;
  width: min(320px, calc(100vw - 2.5rem));
  background: var(--verde-profundo); color: var(--blanco);
  border: 1px solid rgba(232,217,160,.28); border-radius: 18px;
  padding: 1.4rem; box-shadow: 0 26px 60px -18px rgba(0,0,0,.7);
  max-height: min(70vh, 620px); overflow-y: auto;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 {
  font-family: var(--f-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dorado-suave);
  margin: 0 0 1rem;
}
.a11y-panel h3 {
  font-family: var(--f-body); font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #8FA697;
  margin: 1.4rem 0 .6rem;
}
.a11y-grupo { display: grid; gap: .4rem; }
.a11y-op {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  background: rgba(239,243,238,.06); border: 1px solid transparent;
  color: #D8E5DC; border-radius: 11px; padding: .7rem .85rem;
  font-family: var(--f-body); font-size: .87rem; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.a11y-op:hover { background: rgba(239,243,238,.13); color: var(--blanco); }
.a11y-op svg { flex: none; opacity: .8; }
.a11y-op[aria-pressed="true"] {
  background: rgba(201,162,39,.18); border-color: var(--dorado); color: var(--dorado-suave);
}
.a11y-op[aria-pressed="true"] svg { opacity: 1; }
.a11y-op .estado { margin-left: auto; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; opacity: .65; }
.a11y-atajos { margin: 1rem 0 0; padding: 0; list-style: none; font-size: .76rem; color: #8FA697; }
.a11y-atajos li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.a11y-atajos kbd {
  font-family: ui-monospace, monospace; font-size: .7rem;
  background: rgba(239,243,238,.1); border: 1px solid rgba(232,217,160,.2);
  border-radius: 5px; padding: .12rem .4rem; color: var(--dorado-suave);
}

/* ── Preferencias que aplica el panel ── */
.a11y-texto-115 { font-size: 115%; }
.a11y-texto-130 { font-size: 130%; }

.a11y-enlaces a:not(.btn):not(.brand):not(.nav-cta) {
  text-decoration: underline !important;
  text-underline-offset: 3px; text-decoration-thickness: 2px;
}

.a11y-contraste {
  --tinta-suave: #1B2E26;
  --linea: #6E8378;
}
.a11y-contraste .lead, .a11y-contraste .card p, .a11y-contraste .transp-list li { color: #1B2E26; }
.a11y-contraste .on-dark .lead, .a11y-contraste .on-dark p,
.a11y-contraste .stat-label, .a11y-contraste .site-footer { color: #F0F6F1; }
.a11y-contraste .site-footer a { color: #FFF; }
.a11y-contraste .hero-media::after,
.a11y-contraste .page-hero::after,
.a11y-contraste .cta-final::after { background: rgba(9,22,17,.93) !important; }
.a11y-contraste .prog::after { background: linear-gradient(to top, rgba(9,22,17,.97) 20%, rgba(9,22,17,.7) 100%) !important; }
.a11y-contraste :focus-visible { outline: 4px solid var(--dorado); outline-offset: 4px; }

/* Elemento que se está leyendo en voz alta */
.a11y-leyendo {
  background: rgba(201,162,39,.28) !important;
  outline: 3px solid var(--dorado); outline-offset: 4px; border-radius: 4px;
  scroll-margin-block: 40vh;
}

@media (max-width: 560px) {
  .dock { bottom: .75rem; }
  .a11y-btn { width: 46px; height: 46px; }
}

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 24px; height: 1.5px; background: var(--dorado-suave);
  position: relative; transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: flex; }
  .site-header { background: rgba(16,37,30,.92); backdrop-filter: blur(16px); }
  .main-nav {
    position: fixed; inset: 82px 0 auto 0; background: var(--verde-profundo);
    padding: 1rem var(--gutter) 2rem; display: none;
    border-bottom: 1px solid rgba(232,217,160,.15);
    max-height: calc(100vh - 82px); overflow-y: auto;
  }
  .nav-open .main-nav { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: .2rem; }
  .main-nav a { font-size: 1.08rem; padding: .85rem 1rem; border-radius: 12px; }
  .nav-cta { text-align: center; margin: .7rem 0 0; border-radius: 12px; }
}

/* ══════════════════ HERO — carrusel de 2 diapositivas ══════════════════ */
.hero {
  position: relative; min-height: 100svh;
  background: var(--verde-profundo); color: var(--blanco);
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  /* El padding inferior deja libre la zona de los controles */
  padding-block: clamp(6.5rem, 13vh, 8.5rem) clamp(6.5rem, 11vh, 8.5rem);
  opacity: 0; pointer-events: none;
  transition: opacity .9s var(--ease-out);
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
/* La primera diapositiva define la altura real del carrusel */
.hero-slide:first-of-type { position: relative; }

/* Rosa institucional de la campaña (solo dentro de la diapositiva de la carrera) */
.hero-slide--carrera {
  --rosa: #E5316F;
  --rosa-claro: #F9B6CE;
  background: #2A0E1B;
}
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  will-change: transform;
}
.hero-media img {
  width: 100%; height: 116%; object-fit: cover; object-position: 62% 40%;
  filter: saturate(.72) contrast(1.05);
}
/* Duotone verde: cohesión fotográfica en todo el sitio */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(16,37,30,.97) 0%,
    rgba(16,37,30,.9) 32%,
    rgba(20,53,42,.6) 58%,
    rgba(20,53,42,.35) 100%);
}
.hero-glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: 46vw; height: 46vw; right: -8vw; top: 8vh;
  background: radial-gradient(circle, rgba(201,162,39,.34) 0%, transparent 68%);
  filter: blur(30px);
}
.hero-arc { position: absolute; z-index: 1; right: -6vw; top: 50%; transform: translateY(-50%); pointer-events: none; }
.grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .container-wide { position: relative; z-index: 5; width: 100%; }

/* Duotono rosa para la diapositiva de la carrera */
.hero-slide--carrera .hero-media img { object-position: 72% 30%; filter: saturate(.45) contrast(1.1); }
.hero-slide--carrera .hero-media::after {
  background:
    linear-gradient(102deg,
      rgba(30,8,17,.97) 0%, rgba(38,11,23,.93) 38%,
      rgba(160,27,74,.62) 72%, rgba(229,49,111,.45) 100%),
    linear-gradient(to top, rgba(30,8,17,.75) 0%, transparent 42%);
}
.hero-slide--carrera .hero-glow {
  background: radial-gradient(circle, rgba(229,49,111,.45) 0%, transparent 68%);
}
.hero-slide--carrera .eyebrow { color: var(--rosa-claro); }
.hero-slide--carrera .eyebrow::before { background: var(--rosa); }

/* Marca de la alianza */
.carrera-marcas {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  color: #E7D3DB;
}
.carrera-marcas .sep { width: 1px; height: 22px; background: rgba(249,182,206,.4); }
.carrera-marcas .avon { font-family: var(--f-display); font-size: 1.1rem; letter-spacing: .1em;
  color: var(--rosa-claro); text-transform: none; }

.carrera-title { font-size: var(--t-hero); max-width: 13ch; font-weight: 400; }
.carrera-title .ord { color: var(--rosa-claro); }
.carrera-title .causa { color: var(--rosa); font-style: italic; }

/* Distancias: chips interactivos (antes vivían dentro de una imagen) */
.distancias { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; list-style: none; padding: 0; }
.distancias button {
  font-family: var(--f-display); font-size: 1.35rem; font-weight: 500;
  color: var(--blanco); background: rgba(249,182,206,.1);
  border: 1.5px solid rgba(249,182,206,.42); border-radius: 999px;
  padding: .5rem 1.5rem; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur),
              color var(--dur), transform var(--dur) var(--ease);
}
.distancias button:hover { transform: translateY(-3px); border-color: var(--rosa-claro); }
.distancias button[aria-pressed="true"] {
  background: var(--rosa); border-color: var(--rosa); color: #fff;
  box-shadow: 0 10px 26px rgba(229,49,111,.45);
}
.distancia-detalle { margin-top: 1rem; color: #E7D3DB; font-size: .95rem; min-height: 1.6em; }

/* Fecha y sede */
.carrera-datos {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; align-items: center;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(249,182,206,.28);
}
.carrera-dato { font-size: .82rem; color: #D7BFC9; line-height: 1.5; }
.carrera-dato strong {
  display: block; font-family: var(--f-display); font-weight: 500;
  font-size: 1.35rem; color: var(--blanco); letter-spacing: -.01em;
}
.carrera-lema {
  font-family: var(--f-display); font-style: italic; font-size: 1.2rem;
  color: var(--rosa-claro); margin: 0;
}

/* Listón de la campaña */
.liston { position: absolute; z-index: 2; right: 6vw; top: 50%; transform: translateY(-50%);
  opacity: .3; pointer-events: none; }
@media (max-width: 900px) { .liston { display: none; } }

/* ── Controles del carrusel ── */
.hero-controls {
  position: absolute; left: 0; right: 0; bottom: clamp(1.2rem, 3vh, 2.2rem);
  z-index: 20;
}
.hero-controls .container-wide {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
/* Los controles del carrusel viven a la izquierda; el dock, a la derecha.
   Así nunca compiten por la misma esquina. */
.hero-dots { display: flex; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.hero-dot {
  flex: 0 1 108px; height: 30px; padding: 0; cursor: pointer;
  background: none; border: 0; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem;
}
.hero-dot span {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.42); transition: color var(--dur);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-dot::after {
  content: ""; display: block; height: 2px; width: 100%;
  background: rgba(255,255,255,.24); position: relative; overflow: hidden;
}
.hero-dot[aria-selected="true"] span { color: var(--blanco); }
.hero-dot[aria-selected="true"]::after { background: rgba(255,255,255,.3); }
.hero-dot i {
  display: block; height: 2px; width: 100%; background: var(--dorado);
  transform: scaleX(0); transform-origin: 0 50%; margin-top: -2px; position: relative; z-index: 1;
}
.hero-dot[aria-selected="true"] i { animation: barra var(--slide-dur, 7s) linear forwards; }
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-play {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.6); display: grid; place-items: center;
  transition: color var(--dur), border-color var(--dur);
}
.hero-play:hover { color: var(--blanco); border-color: var(--blanco); }
/* En móvil, sólo las barras de progreso: sin etiquetas */
@media (max-width: 560px) {
  .hero-dot { flex: 0 1 48px; }
  .hero-dot span { display: none; }
}

/* Sin autoplay ni barra si el usuario pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .hero-dot i { animation: none !important; transform: scaleX(1); }
  .hero-slide { transition: none; }
}

.hero-title { font-size: var(--t-hero); max-width: 15ch; font-weight: 400; }
.hero-title em { font-style: italic; color: var(--dorado-suave); }
/* Revelado por líneas — un solo momento orquestado de carga */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; transform: translateY(105%); }
/* La entrada se reproduce cada vez que la diapositiva pasa a estar activa */
.is-active .line-mask > span { animation: lineUp 1.05s var(--ease-out) forwards; }
.is-active .line-mask:nth-of-type(1) > span { animation-delay: .15s; }
.is-active .line-mask:nth-of-type(2) > span { animation-delay: .27s; }
.is-active .line-mask:nth-of-type(3) > span { animation-delay: .39s; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero-sub {
  margin-top: 1.8rem; max-width: 46ch; font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: #B9CBBF; opacity: 0;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.5rem; opacity: 0;
}
.is-active .hero-sub  { animation: fadeUp .9s var(--ease-out) .62s forwards; }
.is-active .hero-ctas { animation: fadeUp .9s var(--ease-out) .76s forwards; }
.hero-foot {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  display: grid; gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(3, minmax(0, 15rem));
  border-top: 1px solid rgba(232,217,160,.18); padding-top: 1.5rem;
  opacity: 0;
}
.is-active .hero-foot { animation: fadeUp .9s var(--ease-out) .9s forwards; }
@media (max-width: 720px) { .hero-foot { grid-template-columns: 1fr; gap: 1.1rem; } }
.hero-foot-item { font-size: .82rem; color: #A9BDB0; line-height: 1.5; margin: 0; }
.hero-foot-item strong { display: block; color: var(--dorado-suave); font-size: 1.05rem; font-weight: 600; font-family: var(--f-display); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .line-mask > span, .hero-sub, .hero-ctas, .hero-foot,
  .carrera-marcas, .distancias, .carrera-datos {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 2rem; border-radius: 999px;
  font-family: var(--f-body); font-weight: 600; font-size: .98rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), background var(--dur), color var(--dur), border-color var(--dur);
}
.btn svg { transition: transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-3px); }
.btn:hover svg { transform: translateX(4px); }
/* Dorado — acción de conversión. Al pasar el ratón se aclara e intensifica;
   nunca pierde el dorado: es el único camino brillante de la página. */
.btn-dona {
  background: var(--dorado); border-color: var(--dorado);
  color: var(--verde-profundo); font-weight: 700;
  box-shadow: 0 6px 20px rgba(201,162,39,.32);
}
.btn-dona:hover {
  background: var(--dorado-suave); border-color: var(--dorado-suave);
  box-shadow: 0 14px 36px rgba(201,162,39,.55);
}
.btn-dona:active { background: #B08D1E; border-color: #B08D1E; }

/* Contorno sobre fondo oscuro → se rellena en dorado claro */
.btn-ghost { border-color: rgba(232,217,160,.42); color: var(--blanco); background: transparent; }
.btn-ghost:hover { background: var(--dorado-suave); border-color: var(--dorado-suave); color: var(--verde-profundo); }
.btn-ghost:active { background: var(--dorado); border-color: var(--dorado); }
/* En la diapositiva de la carrera el relleno es rosa, no dorado */
.hero-slide--carrera .btn-ghost { border-color: rgba(249,182,206,.5); }
.hero-slide--carrera .btn-ghost:hover { background: var(--rosa-claro); border-color: var(--rosa-claro); color: #2A0E1B; }

/* Verde sólido → se oscurece */
.btn-verde { background: var(--verde-primario); border-color: var(--verde-primario); color: var(--blanco); }
.btn-verde:hover { background: var(--verde-profundo); border-color: var(--verde-profundo);
                   box-shadow: 0 12px 30px rgba(20,53,42,.4); }

/* Contorno sobre fondo claro → se rellena en verde */
.btn-linea { border-color: var(--linea); color: var(--verde-profundo); background: transparent; }
.btn-linea:hover { background: var(--verde-primario); border-color: var(--verde-primario); color: var(--blanco);
                   box-shadow: 0 12px 28px rgba(31,92,67,.28); }

.btn-sm { padding: .7rem 1.4rem; font-size: .9rem; }

/* ══════════════════ Marquee de impacto ══════════════════ */
.marquee {
  background: var(--dorado); color: var(--verde-profundo);
  padding: .9rem 0; overflow: hidden; white-space: nowrap;
  border-block: 1px solid rgba(20,53,42,.12);
}
.marquee-track { display: inline-flex; gap: 3rem; animation: slide 38s linear infinite; }
.marquee span { font-family: var(--f-display); font-size: 1.05rem; font-style: italic; }
.marquee span::after { content: "◆"; margin-left: 3rem; font-size: .55rem; vertical-align: middle; font-style: normal; opacity: .5; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ══════════════════ Secciones ══════════════════ */
.section { padding-block: clamp(4.5rem, 10vw, 9rem); }
.section-sm { padding-block: clamp(3.5rem, 7vw, 6rem); }
.bg-neutro { background: var(--neutro-claro); }
.bg-oscuro { background: var(--verde-profundo); color: var(--blanco); }
.bg-verde  { background: var(--verde-primario); color: var(--blanco); }

.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head-split {
  display: grid; gap: 2rem clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0,1fr) minmax(0,.85fr); align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (max-width: 860px) { .section-head-split { grid-template-columns: 1fr; } }

/* ══════════════════ Cifras ══════════════════ */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.stat {
  padding-top: clamp(1.4rem, 2.4vw, 2rem);
  border-top: 1px solid rgba(232,217,160,.28);
}
.stat-num {
  font-family: var(--f-display); font-size: clamp(2.6rem, 5vw, 4.2rem);
  color: var(--dorado-suave); line-height: 1; font-variant-numeric: tabular-nums; font-weight: 400;
}
.stat-label { margin: .8rem 0 0; font-size: .93rem; color: #A9BDB0; max-width: 24ch; }

/* ══════════════════ Menú de imágenes: programas ══════════════════ */
.programas {
  display: grid; gap: clamp(.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(12, 1fr);
}
.prog {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  text-decoration: none; color: var(--blanco); isolation: isolate;
  min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.5rem, 2.4vw, 2.4rem);
  background: var(--verde-profundo);
}
.prog-a { grid-column: span 7; min-height: 460px; }
.prog-b { grid-column: span 5; min-height: 460px; }
.prog-c { grid-column: span 4; }
.prog-d { grid-column: span 4; }
.prog-e { grid-column: span 4; }
@media (max-width: 980px) {
  .prog-a, .prog-b { grid-column: span 12; min-height: 380px; }
  .prog-c, .prog-d, .prog-e { grid-column: span 6; }
}
@media (max-width: 660px) { .prog { grid-column: span 12 !important; min-height: 320px; } }

.prog img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.62) contrast(1.04);
  transition: transform 1.1s var(--ease-out), filter var(--dur);
}
.prog::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(16,37,30,.95) 6%, rgba(16,37,30,.55) 48%, rgba(16,37,30,.18) 100%);
  transition: background var(--dur);
}
.prog:hover img { transform: scale(1.06); filter: saturate(.85) contrast(1.02); }
.prog:hover::after { background: linear-gradient(to top, rgba(16,37,30,.96) 8%, rgba(20,53,42,.62) 55%, rgba(31,92,67,.25) 100%); }
.prog h3 { color: var(--blanco); max-width: 16ch; }
.prog p { color: #C3D2C8; font-size: .95rem; margin: .7rem 0 0; max-width: 40ch;
          max-height: 0; opacity: 0; overflow: hidden;
          transition: max-height .55s var(--ease-out), opacity .45s var(--ease), margin .55s var(--ease-out); }
.prog:hover p, .prog:focus-visible p { max-height: 8rem; opacity: 1; }
.prog-tag {
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dorado-suave); margin-bottom: .8rem;
}

/* ══════════════════ Historia con scroll (sticky) ══════════════════ */
.story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(2rem, 6vw, 6rem); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }
.story-sticky { position: sticky; top: 120px; align-self: start; }
.story-fig { border-radius: var(--r-lg); overflow: hidden; position: relative; aspect-ratio: 4/5; background: var(--verde-medio); }
.story-fig img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.05); }
.story-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem;
  background: linear-gradient(transparent, rgba(16,37,30,.9));
  color: #D6E3DA; font-size: .85rem;
}
.story-steps { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.story-step { border-left: 1px solid rgba(232,217,160,.25); padding-left: clamp(1.4rem, 3vw, 2.4rem); position: relative; }
.story-step::before {
  content: ""; position: absolute; left: -4.5px; top: .55rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--dorado);
}
.story-step h3 { color: var(--blanco); margin-bottom: .7rem; }
.story-num {
  font-family: var(--f-display); font-size: .85rem; color: var(--dorado-suave);
  letter-spacing: .2em; display: block; margin-bottom: .5rem;
}

/* ══════════════════ Agenda: scroll horizontal ══════════════════ */
.agenda-scroll {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--dorado) transparent;
}
.agenda-scroll::-webkit-scrollbar { height: 4px; }
.agenda-scroll::-webkit-scrollbar-thumb { background: var(--dorado); border-radius: 4px; }
.agenda-card {
  flex: 0 0 min(420px, 84vw); scroll-snap-align: start;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--blanco); border: 1px solid var(--linea);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.agenda-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -20px rgba(16,37,30,.3); }
.agenda-card > img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: saturate(.8); }
.agenda-body { padding: 1.7rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.agenda-fecha {
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--verde-primario);
}
.agenda-body h3 { color: var(--verde-profundo); }
.agenda-body p { color: var(--tinta-suave); font-size: .95rem; margin: 0; }
.agenda-body .btn { align-self: flex-start; margin-top: auto; }

/* ══════════════════ Transparencia ══════════════════ */
.transp { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: 1.05fr .95fr; align-items: center; }
@media (max-width: 900px) { .transp { grid-template-columns: 1fr; } }
.transp-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px;
  padding: .5rem 1.15rem .5rem .75rem; font-weight: 600; font-size: .87rem;
  color: var(--verde-profundo); margin-bottom: 1.5rem;
}
.transp-badge svg { color: var(--verde-primario); }
.transp-list { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1rem; }
.transp-list li { display: flex; gap: .8rem; align-items: flex-start; color: var(--tinta-suave); }
.transp-list svg { flex: none; margin-top: .35rem; color: var(--verde-primario); }
.on-dark .transp-list li  { color: #B9CBBF; }
.on-dark .transp-list svg { color: var(--dorado-suave); }
.on-dark .transp-badge { background: rgba(239,243,238,.08); border-color: rgba(232,217,160,.25); color: var(--blanco); }
.on-dark .transp-badge svg { color: var(--dorado-suave); }

.panel-destino {
  background: var(--verde-profundo); color: var(--blanco);
  border-radius: var(--r-lg); padding: clamp(2rem, 3.5vw, 2.8rem);
  position: relative; overflow: hidden;
}
.panel-destino h3 { color: var(--blanco); }
/* El panel es oscuro aunque su sección no lo sea: el eyebrow debe invertirse */
.panel-destino .eyebrow { color: var(--dorado-suave); }
.destino-bar { display: grid; gap: 1.1rem; margin: 1.8rem 0; }
.destino-row { display: grid; gap: .4rem; }
.destino-row-top { display: flex; justify-content: space-between; font-size: .9rem; }
.destino-row-top span:last-child { color: var(--dorado-suave); font-weight: 600; font-variant-numeric: tabular-nums; }
.destino-track { height: 5px; background: rgba(232,217,160,.16); border-radius: 99px; overflow: hidden; }
.destino-fill {
  height: 100%; background: linear-gradient(90deg, var(--dorado), var(--dorado-suave));
  border-radius: 99px; width: 0; transition: width 1.3s var(--ease-out);
}

/* ══════════════════ Aliados ══════════════════ */
.aliados { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; justify-content: center; }
.aliado {
  font-family: var(--f-display); font-size: 1.15rem; color: var(--tinta-suave);
  opacity: .65; transition: opacity var(--dur), color var(--dur);
}
.aliado:hover { opacity: 1; color: var(--verde-primario); }

/* ══════════════════ CTA final ══════════════════ */
/* Fondo sólido de respaldo: el texto sigue legible aunque la foto no cargue */
.cta-final { position: relative; overflow: hidden; text-align: center; background: var(--verde-profundo); }
.cta-final img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.5) contrast(1.05); z-index: 0;
}
.cta-final::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(16,37,30,.93), rgba(20,53,42,.9));
}
.cta-final .container { position: relative; z-index: 2; }
.cta-final h2 { max-width: 22ch; margin-inline: auto; color: var(--blanco); }

/* ══════════════════ Footer ══════════════════ */
.site-footer { background: var(--verde-profundo); color: #9DB3A5; padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; font-size: .92rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr repeat(3, 1fr); margin-bottom: 3.5rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); } }
.site-footer h4 { font-family: var(--f-body); font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dorado-suave); margin: 0 0 1.2rem; font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { color: #C6D8CC; text-decoration: none; transition: color var(--dur); }
.site-footer a:hover { color: var(--blanco); }
.footer-bottom { border-top: 1px solid rgba(232,217,160,.14); padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.social-row { display: flex; gap: .7rem; }
.social-row a { display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(232,217,160,.25); border-radius: 50%;
  transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease); }
.social-row a:hover { border-color: var(--dorado-suave); background: rgba(232,217,160,.1); transform: translateY(-2px); }

/* ══════════════════ Reveal ══════════════════ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; } .reveal-d4 { transition-delay: .4s; }

/* ══════════════════ Páginas interiores ══════════════════ */
.page-hero { position: relative; background: var(--verde-profundo); color: var(--blanco);
  padding-block: clamp(9rem, 16vh, 12rem) clamp(3.5rem, 8vw, 6rem); overflow: hidden; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.6) contrast(1.05); z-index: 0; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(16,37,30,.96) 20%, rgba(20,53,42,.72) 100%); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); max-width: 17ch; font-weight: 400; }
/* El hero interior es oscuro: el lead debe invertirse para cumplir AA */
.page-hero .lead { margin-top: 1.2rem; color: #B9CBBF; }
.page-hero .eyebrow { color: var(--dorado-suave); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 3rem; margin-bottom: 1rem; }
.prose h3 { margin-top: 2rem; margin-bottom: .6rem; color: var(--verde-profundo); }
.prose ul { padding-left: 1.2rem; color: var(--tinta-suave); }
.prose li { margin-bottom: .5rem; }

/* Grid de tarjetas simples */
.cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  transform-style: preserve-3d;
}
.card:hover { box-shadow: 0 28px 52px -22px rgba(16,37,30,.3); }
.card > img { width: 100%; aspect-ratio: 3/2; object-fit: cover; filter: saturate(.78); }
.card-body { padding: 1.7rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.card h3 { color: var(--verde-profundo); }
.card p { color: var(--tinta-suave); font-size: .95rem; margin: 0; }
.card-link { margin-top: auto; font-weight: 600; color: var(--verde-primario);
  display: inline-flex; align-items: center; gap: .4rem; padding-top: .5rem; }
.card-link svg { transition: transform var(--dur) var(--ease); }
.card:hover .card-link svg { transform: translateX(5px); }

/* Variante para tarjetas sobre secciones oscuras */
.card-oscura {
  background: rgba(239,243,238,.06);
  border-color: rgba(232,217,160,.22);
  color: var(--blanco);
}
.card-oscura:hover { background: rgba(239,243,238,.1); box-shadow: 0 28px 52px -22px rgba(0,0,0,.5); }
.card-oscura h3 { color: var(--blanco); }
.card-oscura p  { color: #B9CBBF; }
.card-oscura .card-link { color: var(--dorado-suave); }

/* ══════════════════ Página puente de inscripción ══════════════════ */
.puente { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.1fr .9fr; align-items: start; }
@media (max-width: 900px) { .puente { grid-template-columns: 1fr; } }

.pasos { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: paso; display: grid; gap: 1.5rem; }
.pasos li {
  counter-increment: paso; position: relative; padding-left: 3.2rem;
  color: var(--tinta-suave);
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -.15rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--neutro-claro); border: 1px solid var(--linea);
  color: var(--verde-profundo); font-family: var(--f-display); font-size: 1rem;
  display: grid; place-items: center;
}
.pasos li.actual::before { background: var(--dorado); border-color: var(--dorado); }
.pasos strong { display: block; color: var(--verde-profundo); font-family: var(--f-display);
  font-size: 1.15rem; font-weight: 500; margin-bottom: .25rem; }

.ficha {
  background: var(--verde-profundo); color: var(--blanco);
  border-radius: var(--r-lg); padding: clamp(1.8rem, 3vw, 2.4rem);
  position: sticky; top: 110px;
}
.ficha h2 { color: var(--blanco); font-size: 1.5rem; }
.ficha dl { margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.ficha dt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #8FA697; }
.ficha dd { margin: .15rem 0 0; font-family: var(--f-display); font-size: 1.15rem; color: var(--blanco); }
.ficha .btn { width: 100%; justify-content: center; margin-top: 1.8rem; }

.aviso-externo {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #FBF6E3; border: 1px solid #E3D08F; border-radius: 14px;
  padding: 1.1rem 1.3rem; margin-top: 1.5rem;
  font-size: .9rem; color: #5C4A12;
}
.aviso-externo svg { flex: none; margin-top: .15rem; color: #A8871C; }

/* Dona: montos */
.montos { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 2rem; }
.monto {
  border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 999px;
  padding: .85rem 1.6rem; font-family: var(--f-body); font-weight: 700; font-size: 1.05rem;
  color: var(--verde-profundo); cursor: pointer;
  transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease), color var(--dur);
}
.monto:hover { transform: translateY(-2px); border-color: var(--verde-primario); }
.monto.activo { border-color: var(--dorado); background: var(--dorado); color: var(--verde-profundo); }
.monto small { display: block; font-weight: 500; font-size: .68rem; opacity: .7; letter-spacing: .04em; }

.dato-bancario { background: var(--neutro-claro); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.8rem 2rem; }
.dato-bancario dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.dato-bancario dd { margin: .2rem 0 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.dato-bancario dd:last-child { margin-bottom: 0; }

/* Reduced motion global */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-media, .card, .prog img { transform: none !important; }
  .prog p { max-height: 8rem; opacity: 1; }
}

/* ══════════════════ Aviso previo a la capa sonora ══════════════════
   El batido binaural y la pulsación lenta no son inocuos para todo el
   mundo. Nadie debería recibirlos sin saber qué son ni poder negarse. */
.aviso-sonoro[hidden] { display: none; }
.aviso-sonoro {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: rgba(9,22,17,.72); backdrop-filter: blur(8px);
  padding: 1.5rem;
}
.aviso-caja {
  background: var(--verde-profundo); color: var(--blanco);
  border: 1px solid rgba(232,217,160,.3); border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 2.6rem);
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
.aviso-caja h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--blanco);
  margin-bottom: .8rem;
}
.aviso-caja > p { color: #B9CBBF; font-size: .97rem; }
.aviso-caja .eyebrow { color: var(--dorado-suave); }

.aviso-lista { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .85rem; }
.aviso-lista li {
  display: flex; gap: .75rem; align-items: flex-start;
  color: #C7D4CB; font-size: .92rem; line-height: 1.55;
}
.aviso-lista svg { flex: none; margin-top: .25rem; color: var(--dorado-suave); }

.aviso-cuidado {
  background: rgba(155,58,58,.16); border: 1px solid rgba(214,120,120,.4);
  border-radius: 14px; padding: 1rem 1.15rem; margin: 1.4rem 0;
  font-size: .9rem; color: #F0D5D5; line-height: 1.55;
}
.aviso-cuidado strong { color: #FFC9C9; display: block; margin-bottom: .3rem; }

.aviso-botones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.aviso-botones .btn { flex: 1 1 auto; justify-content: center; }
.aviso-nota { font-size: .8rem; color: #8FA697; margin: 1rem 0 0; }

/* ══════════════════ Recorrido narrado ══════════════════ */
.recorrido-barra[hidden] { display: none; }
.recorrido-barra {
  position: fixed; left: 50%; bottom: clamp(1rem, 3vh, 1.75rem);
  transform: translateX(-50%); z-index: 190;
  display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.5rem);
  background: rgba(16,37,30,.95); backdrop-filter: blur(16px);
  border: 1px solid rgba(232,217,160,.32); border-radius: 999px;
  padding: .7rem .8rem .7rem 1.4rem;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.75);
  max-width: calc(100vw - 2rem);
}
.recorrido-info { display: grid; gap: .1rem; min-width: 0; }
.recorrido-titulo {
  font-size: .64rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dorado-suave);
}
.recorrido-paso { font-size: .85rem; color: #C9D8CD; white-space: nowrap; }

.recorrido-puntos { display: flex; gap: 5px; }
.recorrido-puntos i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(232,217,160,.28); transition: background .4s, transform .4s;
}
.recorrido-puntos i.ya { background: rgba(232,217,160,.6); }
.recorrido-puntos i.es { background: var(--dorado); transform: scale(1.6); }
@media (max-width: 620px) { .recorrido-puntos { display: none; } }

.recorrido-botones { display: flex; align-items: center; gap: .35rem; }
.recorrido-botones button {
  border: 1px solid rgba(232,217,160,.3); background: none;
  color: #C9D8CD; border-radius: 999px; cursor: pointer;
  width: 36px; height: 36px; display: grid; place-items: center;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.recorrido-botones button:hover { color: var(--blanco); border-color: var(--dorado-suave); }
.recorrido-salir {
  width: auto !important; padding: 0 1.1rem;
  font-family: var(--f-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em;
}

/* ── La sección de la que se está hablando ──
   No basta con marcarla: tiene que ENTRAR. Cada vez que el guion la
   menciona, la clase se retira y se vuelve a poner, así que la animación
   se reproduce de nuevo sin trucos de JavaScript. */
.recorrido-aqui {
  position: relative;
  border-radius: 10px;
  scroll-margin-top: 110px;
  z-index: 1;
  animation: zonaEntra 1.1s var(--ease-out) both;
}
@keyframes zonaEntra {
  0%   { transform: scale(.985); box-shadow: inset 0 0 0 0 rgba(201,162,39,0), 0 0 0 0 rgba(201,162,39,0); }
  55%  { transform: scale(1.004); box-shadow: inset 0 0 0 2px var(--dorado), 0 0 90px -18px rgba(201,162,39,.85); }
  100% { transform: scale(1);     box-shadow: inset 0 0 0 2px var(--dorado), 0 0 60px -20px rgba(201,162,39,.6); }
}

/* Un barrido de luz cruza la sección una sola vez, al entrar */
.recorrido-aqui::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none; border-radius: inherit; overflow: hidden;
  background: linear-gradient(105deg,
    transparent 35%, rgba(232,217,160,.16) 48%, rgba(232,217,160,.28) 52%, transparent 65%);
  background-size: 260% 100%;
  animation: zonaBarrido 1.5s var(--ease-out) both;
}
@keyframes zonaBarrido {
  0%   { background-position: 160% 0; opacity: 0; }
  20%  { opacity: 1; }
  100% { background-position: -60% 0; opacity: 0; }
}

/* El contenido de dentro entra escalonado: tarjetas, pasos, cifras */
.recorrido-aqui .card,
.recorrido-aqui .prog,
.recorrido-aqui .stat,
.recorrido-aqui .story-step,
.recorrido-aqui .destino-row,
.recorrido-aqui .agenda-card,
.recorrido-aqui .pasos li {
  animation: zonaHijo .7s var(--ease-out) both;
}
@keyframes zonaHijo {
  from { opacity: .25; transform: translateY(12px); }
  to   { opacity: 1;   transform: none; }
}
.recorrido-aqui > * > *:nth-child(1),
.recorrido-aqui .card:nth-child(1)  { animation-delay: .18s; }
.recorrido-aqui .card:nth-child(2),
.recorrido-aqui .stat:nth-child(2),
.recorrido-aqui .story-step:nth-child(2),
.recorrido-aqui .agenda-card:nth-child(2) { animation-delay: .28s; }
.recorrido-aqui .card:nth-child(3),
.recorrido-aqui .stat:nth-child(3),
.recorrido-aqui .story-step:nth-child(3),
.recorrido-aqui .agenda-card:nth-child(3) { animation-delay: .38s; }
.recorrido-aqui .card:nth-child(4),
.recorrido-aqui .stat:nth-child(4),
.recorrido-aqui .story-step:nth-child(4),
.recorrido-aqui .agenda-card:nth-child(4) { animation-delay: .48s; }
.recorrido-aqui .card:nth-child(n+5) { animation-delay: .58s; }

/* Lo demás se apaga para que la atención vaya donde va la voz */
/* Sólo opacidad: un filter sobre secciones completas obliga al navegador
   a recomponer capas enormes en cada cuadro, y eso se siente como tirón. */
body.recorrido-activo main section:not(.recorrido-aqui) {
  opacity: .38;
  transition: opacity .9s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  body.recorrido-activo main section:not(.recorrido-aqui) { opacity: 1; filter: none; }
  .recorrido-aqui { animation: none; box-shadow: inset 0 0 0 2px var(--dorado); }
  .recorrido-aqui::after { display: none; }
  .recorrido-aqui .card, .recorrido-aqui .prog, .recorrido-aqui .stat,
  .recorrido-aqui .story-step, .recorrido-aqui .destino-row,
  .recorrido-aqui .agenda-card, .recorrido-aqui .pasos li { animation: none; }
}

/* ── Apagado inmediato ──
   El botón de sinestesia cicla entre tres niveles, así que para llegar al
   silencio desde inmersión hay que pasar por interacción. Cuando alguien
   quiere callar la página, quiere callarla ya. Este botón sólo aparece
   cuando hay sonido, y lo apaga de una. */
.sound-off[hidden] { display: none; }
.sound-off {
  color: #C9A6A6;
  border-color: rgba(214,150,150,.32) !important;
  animation: apareceApagado .35s var(--ease) both;
}
.sound-off:hover {
  color: #FFD5D5 !important;
  border-color: rgba(214,150,150,.75) !important;
  background: rgba(120,40,40,.28);
}
@keyframes apareceApagado {
  from { opacity: 0; transform: scale(.8) translateX(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sound-off { animation: none; } }

/* ── Cuenta atrás del recorrido ──
   Antes era una línea de texto en la barra: nadie la veía, y el punto de
   una cuenta atrás es justamente que se vea y dé tiempo a arrepentirse. */
.recorrido-cuenta[hidden] { display: none; }
.recorrido-cuenta {
  position: fixed; inset: 0; z-index: 380;
  display: grid; place-items: center;
  background: rgba(9,22,17,.82); backdrop-filter: blur(10px);
  text-align: center; padding: 2rem;
}
.recorrido-cuenta p {
  font-size: clamp(.8rem, 2vw, 1rem); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--dorado-suave); margin: 0 0 .5rem;
}
.recorrido-numero {
  font-family: var(--f-display);
  font-size: clamp(9rem, 34vw, 22rem);
  line-height: .85; color: var(--blanco);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 90px rgba(201,162,39,.55);
}
.recorrido-numero.late { animation: latido 1s var(--ease-out); }
@keyframes latido {
  0%   { transform: scale(1.35); opacity: 0; filter: blur(14px); }
  35%  { transform: scale(1);    opacity: 1; filter: blur(0); }
  100% { transform: scale(.96);  opacity: .82; }
}
.recorrido-cuenta small {
  display: block; font-family: var(--f-body); font-size: clamp(.85rem, 1.6vw, 1rem);
  color: #B9CBBF; margin-top: 1.5rem; max-width: 34ch; margin-inline: auto; line-height: 1.5;
}
.recorrido-cuenta .btn { margin-top: 2rem; }

/* Un anillo que se vacía: el tiempo también se ve, no sólo se cuenta */
.recorrido-aro { position: absolute; pointer-events: none; opacity: .5; }
.recorrido-aro circle { fill: none; stroke: var(--dorado); stroke-width: 1.5;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s linear; }

@media (prefers-reduced-motion: reduce) {
  .recorrido-numero.late { animation: none; }
  .recorrido-aro circle { transition: none; }
}

/* ══════════════════ Nube que señala los controles ══════════════════
   Un botón flotante sin explicación es un icono mudo: nadie adivina que
   detrás hay una guía por voz. La nube lo dice una vez, señala con su pico
   al botón, y deja claro que hay que dar clic — no se activa sola. */
.nube[hidden] { display: none; }
.nube {
  position: fixed; z-index: 175;
  bottom: calc(clamp(1rem, 2.5vh, 1.6rem) + 60px);
  right: clamp(1rem, 2.5vw, 1.6rem);
  width: min(280px, calc(100vw - 2.5rem));
  background: var(--verde-profundo); color: var(--blanco);
  border: 1px solid rgba(232,217,160,.35); border-radius: 16px;
  padding: 1rem 1.1rem .9rem;
  box-shadow: 0 24px 55px -22px rgba(0,0,0,.8);
  animation: nubeEntra .55s var(--ease-out) both;
}
@keyframes nubeEntra {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* El pico apunta al botón que hay debajo */
.nube::after {
  content: ""; position: absolute; bottom: -9px; right: 22px;
  width: 16px; height: 16px; transform: rotate(45deg);
  background: var(--verde-profundo);
  border-right: 1px solid rgba(232,217,160,.35);
  border-bottom: 1px solid rgba(232,217,160,.35);
}
.nube--izq::after { right: auto; left: 22px; }
.nube--izq { right: auto; left: clamp(1rem, 2.5vw, 1.6rem); }

.nube p { margin: 0; font-size: .87rem; line-height: 1.5; color: #C9D8CD; }
.nube strong {
  display: block; font-family: var(--f-display); font-size: 1rem;
  color: var(--blanco); margin-bottom: .3rem; font-weight: 500;
}
.nube em {
  display: block; margin-top: .5rem; font-style: normal;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dorado-suave); font-weight: 600;
}
.nube-cerrar {
  position: absolute; top: .5rem; right: .5rem;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: none; border: 0; color: #8FA697; display: grid; place-items: center;
  transition: color var(--dur), background var(--dur);
}
.nube-cerrar:hover { color: var(--blanco); background: rgba(255,255,255,.1); }

/* El botón señalado late suavemente mientras la nube está visible */
.a11y-btn.señalado {
  animation: seniala 2.4s var(--ease-out) infinite;
}
@keyframes seniala {
  0%, 100% { box-shadow: 0 12px 30px -10px rgba(0,0,0,.55), 0 0 0 0 rgba(201,162,39,.55); }
  50%      { box-shadow: 0 12px 30px -10px rgba(0,0,0,.55), 0 0 0 12px rgba(201,162,39,0); }
}

@media (prefers-reduced-motion: reduce) {
  .nube { animation: none; }
  .a11y-btn.señalado { animation: none; border-color: var(--dorado); }
}
@media (max-width: 520px) { .nube { width: calc(100vw - 2rem); } }