/* =============================================================================
   Mérida / Yucatán Tech Week — Sistema visual compartido
   Paleta oficial: verde #84f649 · gris #444444 · rosa mexicano #E4007C · limón #d9f34e,
   más blanco y negro. El naranja queda fuera.
   Paleta 2 (alterna, no activa): el rosa mexicano #E4007C en lugar del naranja.
   Tipografías: Boldonse (títulos) + Sora (cuerpo).
   Dark-first.
   ============================================================================= */

:root {
  /* Marca */
  --lima:   #84f649;
  --lima-2: #B8FB8E;   /* tinte claro de lima (apoyos/gradientes) */
  --limon:     #d9f34e; /* cuarto color de la paleta: apoyos y patrocinadores */
  --limon-2:   #eaf98d; /* tinte claro de limón */
  --limon-ink: #6a7c08; /* limón oscurecido: única versión legible sobre blanco */
  --azul:   var(--limon);   /* alias heredado: todo lo de patrocinadores */
  --azul-2: var(--limon-2);
  --gris:   #444444;
  --gris-bg: #444444;   /* fondo base (brand book) */
  --gris-bg-2: #4e4e4e; /* superficie elevada sobre el gris */
  --negro:  #000000;
  --blanco: #FFFFFF;

  /* Base GRIS (paleta actual: solo gris + verde) */
  --ink-900: #161616;
  --ink-800: #1f1f1f;
  --ink-700: #292929;
  --ink-600: #343434;
  --line:    rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);

  /* Texto */
  --text:      #FFFFFF;
  --text-soft: #B6B6B6;
  --text-dim:  #7A7A7A;

  /* Acento principal / secundario */
  --accent: var(--lima);

  /* Aliases usados por los componentes (repuntados a la marca) */
  --turquesa: var(--lima);
  --menta:    var(--lima-2);
  --coral:    var(--azul);
  --ambar:    var(--blanco);
  --violeta:  var(--azul-2);

  /* Layout */
  --maxw: 1160px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);

  --font-display: "Boldonse", "Arial Black", system-ui, sans-serif;
  --font-body: "Sora", system-ui, sans-serif;

  /* El acento de destino: lo que habla de eventos y de llegar al mapa.
     Se llama por su función y no por su color, porque el color cambia:
     era naranja, luego violeta y ahora rosa mexicano. */
  --destino: #E4007C;
  --naranja: var(--destino);   /* alias: quedan usos con el nombre viejo */
  --lila: var(--destino);      /* alias heredado */

  /* ACENTO CONTEXTUAL
     Regla: el rosa sólo vive sobre fondo gris y sólo donde NO hay verde.
     --acento : el verde de marca, manda en titulares, botones y cifras.
     --detalle: el rosa, reservado para detalles pequeños
                (kickers, viñetas, el "+" de FAQ, el nivel destacado). */
  --acento: var(--lima);
  --detalle: var(--destino);
  --apoyo: var(--limon);          /* líneas, hovers y apoyos pequeños */

  /* Degradado de acento (solo para acentos, no color base) */
  --accent-2: var(--destino);      /* acento sólido */
}

/* Helpers de acento (rosa sólido) */
.accent-text { color: var(--acento); }

/* ---------- Tema claro (fondo blanco) ---------- */
[data-theme="light"] {
  --ink-900: #FFFFFF;
  --ink-800: #F4F4F4;
  --ink-700: #ECECEC;
  --ink-600: #E3E3E3;
  --line:    rgba(0, 0, 0, 0.10);
  --line-strong: rgba(0, 0, 0, 0.20);
  --text:      #000000;
  --text-soft: #3a3a3a;
  --text-dim:  #6b6b6b;
}
[data-theme="light"] .nav { background: rgba(255, 255, 255, 0.82); }
[data-theme="light"] .hero-bg {
  background: var(--ink-900);
}
[data-theme="light"] .btn-primary { box-shadow: 0 14px 30px -14px rgba(132, 246, 73, 0.8); }
[data-theme="light"] .map-hint,
[data-theme="light"] .detail { background: rgba(255, 255, 255, 0.94); }

/* ---------- Botón de tema ---------- */
.theme-toggle {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.theme-toggle:hover { border-color: var(--lima); color: var(--lima); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: #ffffff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Fondos por sección: gris #444444 ↔ blanco ---------- */
.sec-gris  { background: var(--gris-bg); color: #ffffff; }
.sec-white { background: #ffffff; color: #161616; --acento: var(--lima);
  /* redefinir tokens para que hasta los estilos en línea se adapten */
  --text: #161616; --text-soft: #555555; --text-dim: #777777;
  --line: rgba(0,0,0,0.10); --line-strong: rgba(0,0,0,0.18);
}

/* Sección BLANCA: invertir textos, tarjetas y bordes */
.sec-white .section-head h2,
.sec-white h1, .sec-white h2, .sec-white h3, .sec-white h4 { color: #161616; }
.sec-white .section-head p,.sec-white .sh-p,.sec-white .hero-sub,.sec-white .faq .a{ color: #555555; }
.sec-white .tier h4{ color: var(--lima); }
.sec-white .card,
.sec-white .faq details,
.sec-white .stat,
.sec-white .tier-logo { background: #ffffff; border-color: #e6e6e6; color: #161616; box-shadow: 0 10px 30px -18px rgba(0,0,0,0.25); }
.sec-white .tier-logo { color: #777777; }
.sec-white .faq summary { color: #161616; }
/* Sobre blanco ni el limón ni el verde leen a este tamaño (1.24:1 y 1.75:1
   contra blanco): el signo toma el gris oficial, que es paleta y da 9.4:1. */
.sec-white .faq summary::after { color: var(--acento); }
.sec-white .btn-ghost { border-color: rgba(0,0,0,0.22); color: #161616; }
.sec-white .btn-ghost:hover, .sec-white .btn-ghost:focus-visible {
  background: var(--lima); color: var(--negro); border-color: var(--lima);
  box-shadow: 0 0 0 3px rgba(132,246,73,.26), 0 16px 46px -10px rgba(132,246,73,.7);
}
.sec-white .btn-ghost:active { background: transparent; color: var(--lima); }

/* Sección GRIS: tarjetas ligeramente elevadas sobre el #444 */
.sec-gris .card,
.sec-gris .faq details,
.sec-gris .stat,
.sec-gris .tier-logo { background: #4e4e4e; border-color: rgba(255,255,255,0.14); }
.sec-gris .section-head p,.sec-gris .sh-p,.sec-gris .hero-sub{ color: #d6d6d6; }

/* Boldonse solo en títulos grandes; el resto en Sora.
   Boldonse tiene una caja tipográfica alta: necesita más interlineado. */
h1, h2 { font-family: var(--font-display); line-height: 1.22; margin: 0; font-weight: 400; letter-spacing: 0; }
h3, h4 { font-family: var(--font-body); line-height: 1.15; margin: 0; font-weight: 700; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 700;
  /* El rosa mexicano está reservado al mapa y a los eventos: un antetítulo de
     sección no es ni una cosa ni la otra. Sobre oscuro va en limón y sobre
     claro en el verde de marca. */
  color: var(--limon);
}
.sec-white .eyebrow, [data-theme="light"] .sec-white .eyebrow { color: var(--acento); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.92rem;
  padding: 13px 24px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary {
  background: var(--lima);
  color: var(--negro);
  border-color: var(--lima);
  box-shadow: 0 14px 34px -12px rgba(132, 246, 73, 0.55);
}
/* al pasar el cursor se invierte: el relleno se vacía, la letra toma el color
   y el resplandor crece. Al hacer clic se hunde y el glow se aprieta. */
.btn-primary:hover, .btn-primary:focus-visible {
  background: transparent; color: var(--lima); border-color: var(--lima);
  box-shadow: 0 0 0 3px rgba(132,246,73,.22), 0 16px 46px -10px rgba(132,246,73,.85);
}
.btn-primary:active {
  background: var(--lima); color: var(--negro);
  box-shadow: 0 0 0 5px rgba(132,246,73,.3), 0 6px 22px -6px rgba(132,246,73,.95);
}
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--apoyo); color: var(--negro); border-color: var(--apoyo);
  box-shadow: 0 0 0 3px rgba(217,243,78,.22), 0 16px 46px -10px rgba(217,243,78,.75);
}
.btn-ghost:active { background: transparent; color: var(--apoyo);
  box-shadow: 0 0 0 5px rgba(217,243,78,.3); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;      /* siempre embona con la sección de atrás */
  border-bottom: none;
}
/* velo del color de la banda que hay detrás: lo que sale por arriba pasa
   por debajo del header y no se encima con el logo ni con el contador */
.nav::before {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: calc(100% + 18px);
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--nav-fondo, transparent) 0 74%, transparent);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
/* Logo y contador, sin grecas alrededor */
.nav-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-link {
  font-size: 0.88rem; font-weight: 600; color: #ffffff; white-space: nowrap;
  padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color .15s, color .15s;
}
.nav.on-white .nav-link { color: #161616; }
.nav-link:hover { border-bottom-color: var(--detalle); color: var(--detalle); }
@media (max-width: 720px) { .nav-link { display: none; } }
.brand-lockup { display: inline-flex; flex-direction: column; gap: 5px; width: max-content; }
/* La greca de volumen ya no acompaña al logo del header: ahora vive
   en el borde del menú lateral. En el footer sí se conserva. */
.nav .brand-greca3d { display: none; }
.brand-greca3d {
  display: block; width: 100%; height: 15px; overflow: hidden;
  /* La misma greca de volumen que corre en "Aliados y patrocinadores", con
     su misma animación: la línea de horizonte deja de ser una tira quieta y
     se mueve como el resto de la marca. */
  background: url("../img/greca-volumen-marca.svg") repeat-x left center / auto 100%;
  /* Velocidad empatada con la del logotipo 3D. Sus paneles recorren 230% de
     sus 560 px cada 3.2 s y la pieza va a escala 0.126 en el pie: unos
     51 px/s en pantalla. Esta tira avanza 586 px por vuelta, así que a
     11.5 s por vuelta va al mismo paso. */
  animation: flancoCorre 11.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .brand-greca3d { animation: none; }
}

/* ---------- Remate del pie: logotipo · horizonte · greca ----------
   Tres piezas en columna. La greca de volumen es la línea de horizonte: por
   encima el logotipo y por debajo la greca animada, las dos con el mismo eje
   —el sitio donde se cruzan sus paneles— que cuadra pie-greca.js.
   El iframe va ancho y se reduce con transform porque por debajo de ~440 px
   la pieza calcula mal su escala y se sale de cuadro. */
/* Sin holgura entre las tres: la greca de volumen es literalmente la base
   del logotipo y el techo de la greca animada, una sola línea de horizonte
   que parte el conjunto por la mitad. */
.brand-remate { position: relative; gap: 0; }
.brand-greca-anim {
  display: block; position: relative; width: 100%;
  /* mismo alto que el logotipo: las dos piezas pesan igual */
  height: 63px; overflow: hidden; line-height: 0;
}
/* El iframe va fuera del flujo: si contara para el ancho, sus 560 px
   inflarían el lockup entero (que se mide por su contenido). Y se recorta a
   la tinta real de la greca —que con estos ángulos vive entre y=56 y y=275
   dentro del marco— para que la caja no tenga aire muerto arriba ni corte
   el vértice abajo. */
.brand-greca-anim iframe {
  position: absolute; left: 50%; top: -16.11px;
  width: 560px; height: 342px; border: 0; background: transparent;
  transform: translateX(-50%) scale(0.28767); transform-origin: 50% 0;
}
.nav .brand-greca-anim { display: none; }   /* solo en el pie */
@media (max-width: 900px) {
  /* en el teléfono el logotipo va a escala 0.106 (≈43 px/s), y la tira
     recorre los mismos 586 px: le toca una vuelta más larga */
  .brand-greca3d { animation-duration: 13.7s; }
  .brand-greca-anim { height: 53px; }   /* el logotipo del pie mide 53 aquí */
  .brand-greca-anim iframe { top: -13.55px; transform: translateX(-50%) scale(0.24201); }
}
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 400; font-size: 0.92rem; letter-spacing: 0; }
/* Logo lockup tipográfico (YUCATÁN + 2026 / TECHWEEK) */
/* ---------- LOGO TIPOGRÁFICO (texto real, animable letra a letra) ----------
   El logo es solo tipografía, así que se compone con texto en vez de PNG:
   cada letra es un <i> independiente -> se puede animar por separado.
   Colores por variable: --ytw-ink (tinta) y --ytw-accent (verde de marca). */
.ytw-logo {
  margin: 0;                       /* también se usa como <h1>: sin margen propio */
  --ytw-ink: #161616;              /* YUCATÁN y WEEK: negro por defecto */
  --ytw-accent: var(--lima);       /* TECH y 2026: siempre el verde de marca */
  display: inline-flex; flex-direction: column; width: max-content;
  font-family: "Anton", var(--font-display), sans-serif;
  font-weight: 400; font-style: normal;
  text-transform: uppercase; line-height: 0.78; letter-spacing: 0;
  white-space: nowrap; -webkit-user-select: none; user-select: none;
  font-size: 1rem;              /* todo lo demás va en em: escala con esto */
}
.ytw-logo i { font-style: normal; display: inline-block; will-change: transform, opacity; }
.ytw-l1, .ytw-l2 { display: flex; width: 100%; align-items: flex-start; }
/* YUCATÁN a la izquierda y 2026 al canto derecho: la primera línea cierra
   donde cierra la K de WEEK, así el lockup es un rectángulo justificado. */
.ytw-l1 { justify-content: space-between; align-items: center; }
.ytw-l2 { justify-content: space-between; }
.ytw-l2 { margin-top: 0.085em; }
.ytw-city { color: var(--ytw-ink); letter-spacing: -0.030em; }
/* Las dos cifras apiladas ocupan de alto lo que mide YUCATÁN y de ancho lo
   que sobra hasta el canto derecho: el interlineado va muy apretado justo
   para que las dos filas juntas quepan en esa altura. */
.ytw-year {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  color: var(--ytw-accent); font-size: 0.582em; line-height: 0.675;
  letter-spacing: 0.005em; margin-left: 0.09em;
}
.ytw-tech { color: var(--ytw-accent); letter-spacing: -0.012em; }
.ytw-week { color: var(--ytw-ink); letter-spacing: -0.012em; }

/* ---------- El cubo de cada letra (estructura, siempre activa) ---------- */
.ytw-cubo { display: block; position: relative; transform-style: preserve-3d; --cz: 0.39em; }
.ytw-cubo b { display: block; font-weight: inherit; backface-visibility: hidden; transform: translateZ(var(--cz)); }
/* WEEK gira sobre X: la cara nueva viene de arriba */
.ytw-week .ytw-cubo b + b {
  position: absolute; left: 0; top: 0; width: 100%;
  transform: rotateX(90deg) translateZ(var(--cz));
}
/* TECH y 2026 giran sobre Y como palabra entera: la cara nueva
   viene del costado y las dos giran a la vez, sin desfase. */
.ytw-tech .ytw-cubo { --cz: 1.06em; }
.ytw-year .ytw-cubo { --cz: 0.56em; }
.ytw-cubo--palabra > b { white-space: nowrap; }
.ytw-year .ytw-cubo b { display: flex; flex-direction: column; align-items: flex-start; }
.ytw-tech .ytw-cubo b + b,
.ytw-year .ytw-cubo b + b {
  position: absolute; left: 0; top: 0; width: 100%;
  transform: rotateY(90deg) translateZ(var(--cz));
}

/* ---------- Movimiento del logo ----------
   YUCATÁN y WEEK se deslizan una sola vez desde la línea que parte los
   renglones y ahí se quedan quietos. El único movimiento que continúa
   es el de TECH y 2026: giran juntos sobre el eje Y cada 5 s. */

.ytw-logo--anim .ytw-city {
  display: inline-block; overflow: hidden;
  padding-top: 0.32em; margin-top: -0.32em;          /* aire para el acento de la Á */
}
.ytw-week-clip { display: inline-block; overflow: hidden;
  padding-top: 0.11em; margin-top: -0.11em; }   /* la caja de línea es más baja que la mayúscula */

/* ---- Deslizamiento de entrada: una sola vez, sin prisa ---- */
.ytw-logo--anim .ytw-city i,
.ytw-logo--anim .ytw-week i,
.ytw-logo--anim .ytw-week .ytw-cubo {
  animation-duration: 1.15s;
  animation-delay: 0.15s;
  animation-timing-function: cubic-bezier(0.19, 0.85, 0.22, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.ytw-logo--anim .ytw-city i { animation-name: ytwSube; }
.ytw-logo--anim .ytw-week i { animation-name: ytwBaja; }
@keyframes ytwSube { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes ytwBaja { from { transform: translateY(-108%); } to { transform: translateY(0); } }

/* WEEK entra girando sobre X, en el mismo compás, y se detiene ahí */
.ytw-logo--anim .ytw-week i { perspective: 34em; }
.ytw-logo--anim .ytw-week .ytw-cubo { animation-name: ytwEntraX; }
@keyframes ytwEntraX { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }

/* ---- TECH y 2026: el único movimiento que permanece ----
   Entran girando sobre Y con el resto y a partir de ahí dan media
   vuelta cada 5 s, los dos sincronizados. */
.ytw-logo--anim .ytw-tech { perspective: 92.4em; }   /* misma escala aparente que WEEK */
.ytw-logo--anim .ytw-year { perspective: 48.8em; }   /* misma escala aparente que WEEK */
.ytw-logo--anim .ytw-tech .ytw-cubo,
.ytw-logo--anim .ytw-year .ytw-cubo {
  animation:
    ytwEntraY 1.05s cubic-bezier(0.19, 0.85, 0.22, 1) 0.4s 1 both,
    ytwGiroY 5s cubic-bezier(0.72, 0, 0.22, 1) 3.4s infinite;
}
@keyframes ytwEntraY { from { transform: rotateY(-90deg); } to { transform: rotateY(0deg); } }
@keyframes ytwGiroY {
  0%, 84%   { transform: rotateY(0deg); }
  95%, 100% { transform: rotateY(-90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ytw-logo--anim .ytw-city i, .ytw-logo--anim .ytw-week i,
  .ytw-logo--anim .ytw-cubo { animation: none; transform: none; }
  .ytw-cubo b + b { display: none; }
}

/* Escalas de uso */
.brand .ytw-logo { font-size: 1.34rem; }
footer .brand .ytw-logo { font-size: 1.7rem; }
.ytw-logo--hero { font-size: clamp(3rem, 10.4vw, 7.4rem); margin: 0 0 0.46em; }

/* ---------- El lockup del héroe en el teléfono ----------
   En pantalla ancha el logotipo respira solo. En el móvil se apretaba: la
   primera línea caía casi encima de TECH WEEK y el 2026 quedaba pequeño y
   a media agua, así que el bloque no leía como un rectángulo.

   Aquí se ajustan tres cosas y solo en el héroe (el logotipo del header y
   el del pie se quedan como estaban):
     · un respiro real entre los dos renglones;
     · la primera línea se justifica, para que el 2026 cierre en el mismo
       canto derecho que WEEK;
     · el 2026 crece hasta llenar ese hueco, con el interlineado apretado
       para que las dos cifras juntas midan lo que mide YUCATÁN. */
@media (max-width: 900px) {
  .ytw-logo--hero .ytw-l2 { margin-top: 0.20em; }
  /* WEEK no debe pasarse del renglón: si el ancho aprieta, encoge en vez
     de desbordar. */
  .ytw-logo--hero { max-width: 100%; }
  .ytw-logo--hero .ytw-week-clip { min-width: 0; }
}

/* Tinta según el fondo que tiene detrás el header */
/* ---------- Tinta del logo: una sola regla para todo el sitio ----------
   YUCATÁN y WEEK son blancos sobre fondo oscuro y negros sobre fondo
   claro. TECH y 2026 se quedan siempre en verde. */
.sec-white .ytw-logo,
.nav.on-white .ytw-logo,
[data-theme="light"] .nav .ytw-logo { --ytw-ink: #161616; }

.nav .ytw-logo,.sec-gris .ytw-logo,footer .ytw-logo,.sp-page .ytw-logo,.map-page .ytw-logo,[data-theme="dark"] .nav .ytw-logo{ --ytw-ink: #ffffff; }

/* los contextos claros mandan sobre los oscuros cuando conviven */
.sec-white .ytw-logo,.nav.on-white .ytw-logo,[data-theme="light"] .nav .ytw-logo{ --ytw-ink: #161616; }
.brand small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.62rem; color: var(--text-dim); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--text-soft); font-size: 0.9rem; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--text); }

/* ---------- Secciones ---------- */
section { position: relative; }
.section-pad { padding: 96px 0; }
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); margin: 16px 0 14px; text-transform: uppercase; }
.section-head p, .sh-p { color: var(--text-soft); font-size: 1.05rem; margin: 0; }
/* el párrafo de "El evento" vive fuera del .section-head porque en el
   teléfono se mete dentro de la silueta del mapa */
.sh-p { max-width: 820px; margin: 0 auto 26px; text-align: center; }
/* El bloque que va sobre el mapa se cuenta en dos tiempos: la frase que
   define el evento, en grande, y debajo la que invita a entrar. */
.v-lead { margin: 0 0 12px; }
.v-cuerpo { margin: 0; }

/* ---------- Hero (greca gigante al fondo · logo/media/texto, parallax 3D) ---------- */
.hero { position: relative; background: transparent; padding: 60px 0 72px; overflow: hidden; }
.parallax { will-change: transform; }

.hero-sub { font-size: clamp(1.05rem, 2.4vw, 1.28rem); color: var(--text-soft); max-width: 40ch; margin: 0 0 clamp(26px, 3vw, 38px); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Botón con degradado (mismo diseño que los demás) ---------- */
/* Cada destino tiene su color: patrocinadores = azul · mapa = naranja */
.btn-grad {
  background: var(--gris);
  color: var(--limon);
  border-color: var(--gris);
  box-shadow: 0 14px 34px -14px rgba(68, 68, 68, 0.55);
}
.btn-grad:hover, .btn-grad:focus-visible {
  background: var(--limon); color: var(--gris); border-color: var(--limon);
  box-shadow: 0 0 0 3px rgba(217,243,78,.26), 0 16px 46px -10px rgba(217,243,78,.8);
}
.btn-grad:active {
  background: var(--gris); color: var(--limon);
  box-shadow: 0 0 0 5px rgba(217,243,78,.34), 0 6px 22px -6px rgba(217,243,78,.9);
}
.btn-mapa {
  background: var(--destino);
  color: #ffffff;
  border-color: var(--destino);
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--destino) 50%, transparent);
}
.btn-mapa:hover, .btn-mapa:focus-visible {
  background: transparent; color: var(--destino); border-color: var(--destino);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destino) 22%, transparent),
              0 16px 46px -10px color-mix(in srgb, var(--destino) 85%, transparent);
}
.btn-mapa:active {
  background: var(--destino); color: #ffffff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--destino) 30%, transparent),
              0 6px 22px -6px color-mix(in srgb, var(--destino) 95%, transparent);
}


/* ---------- Cuenta regresiva (header) — enmarcada en verde de marca ---------- */
.countdown {
  --cd-fill: #ffffff;
  display: inline-flex; align-items: center; gap: 10px; color: #161616;
  padding: 7px 16px; border: 2px solid transparent; border-radius: 10px;
  background: linear-gradient(var(--cd-fill), var(--cd-fill)) padding-box,
              var(--lima) border-box;
}
.nav:not(.on-white) .countdown { --cd-fill: #444444; color: #ffffff; }
.cd-unit { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; min-width: 26px; }
.cd-unit b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cd-unit i { font-style: normal; font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.7; margin-top: 4px; }
.cd-sep { opacity: 0.3; font-weight: 700; }
/* Tablet: sin segundero */
@media (max-width: 1024px) { .cd-s { display: none; } }
/* Móvil: solo días */
@media (max-width: 720px) {
  .cd-hm, .cd-sep, .cd-s { display: none; }
  .countdown { padding: 6px 12px; gap: 6px; }
  .cd-unit b { font-size: 0.98rem; }
}

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat {
  background: var(--ink-800);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px;
}
.stat .num { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 400; }
.stat:nth-child(1) .num { color: var(--acento); }
.stat:nth-child(2) .num { color: var(--azul-2); }
.stat:nth-child(3) .num { color: var(--text); }
.stat:nth-child(4) .num { color: var(--acento); }
.stat .lbl { color: var(--text-soft); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 6px; }

/* ---------- Cards genéricas ---------- */
.card {
  background: var(--ink-800);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }

/* ---------- La greca asomando por la esquina ----------
   Al pasar el cursor entra un trozo de la greca 3D por la esquina inferior
   derecha. Se ve muy ampliada —un par de módulos, no el patrón entero— y
   girada, así que lee como un recorte de la marca y no como un adorno.

   Las dos capas van enmascaradas con la misma silueta: la de atrás en gris
   hace de sombra y la de enfrente lleva el color. Se enmascara en vez de
   usar la imagen a color porque así cada bloque puede pedir su tono.

   La capa ocupa toda la tarjeta y es la MÁSCARA la que se coloca fuera de
   cuadro: así se controla el encuadre sin pelear con anchos y proporciones. */
.con-greca {
  --greca-tono: var(--acento);
  --greca-sombra: rgba(0,0,0,.55);
  /* Un remate, no un fondo: de la greca solo asoma un trozo por la esquina,
     girado, sin llegar nunca al texto. */
  --greca-zoom: 120%;              /* a más zoom, menos módulos se ven */
  --greca-caja: 130px;             /* el recorte: se ajusta al tamaño del bloque */
  --greca-caja-alto: 95px;
  --greca-giro: -24deg;
  --greca-prof: 6px;
  position: relative; overflow: hidden; isolation: isolate;
}
.con-greca::before,
.con-greca::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -30px; bottom: -30px;
  width: var(--greca-caja); height: var(--greca-caja-alto);
  /* La máscara se pinta más alta que su caja y anclada abajo a la derecha:
     de la greca entera solo entra el trozo del canto, que es el recorte que
     se busca. */
  -webkit-mask: url("../img/greca-silueta.svg") right bottom / auto var(--greca-zoom) no-repeat;
  mask: url("../img/greca-silueta.svg") right bottom / auto var(--greca-zoom) no-repeat;
  transform-origin: 100% 100%;
  transform: rotate(var(--greca-giro)) translate(16%, 22%);
  opacity: 0;
  transition: opacity .32s ease, transform .5s cubic-bezier(.2,.9,.25,1);
}
.con-greca::before { background: var(--greca-sombra); }
/* el recorte es un remate de esquina, no un fondo: se queda por debajo del
   texto y con algo de transparencia para no competir con él */
.con-greca::after  { background: var(--greca-tono); translate: calc(var(--greca-prof) * -1) 0; }

.con-greca:hover::before, .con-greca:hover::after,
.con-greca:focus-within::before, .con-greca:focus-within::after {
  opacity: .92;
  transform: rotate(var(--greca-giro)) translate(0, 0);
}
.con-greca:hover::before, .con-greca:focus-within::before { transition-delay: .05s; }

/* Las cifras son bloques bajos: con el mismo recorte que las tarjetas la
   greca se los comía enteros, así que ahí entra más pequeña. */
.stat.con-greca { --greca-caja: 104px; --greca-caja-alto: 76px; --greca-zoom: 112%; }

/* el recorte toma el acento que ya lleva cada cifra */
.con-greca.es-evento { --greca-tono: var(--destino); }
.con-greca.es-sede   { --greca-tono: var(--lima); }

@media (prefers-reduced-motion: reduce) {
  .con-greca::before, .con-greca::after {
    transition: opacity .2s ease; transform: rotate(var(--greca-giro));
  }
}

/* Tracks */
.tracks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }

/* Aliados */
.allies { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- FAQ (acordeón) ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--ink-800); overflow: hidden; }
.faq summary { cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
/* el signo de abrir/cerrar es un detalle de interfaz, no un destino */
/* El signo que abre y cierra es un acento, no texto: va en el verde de
   marca y con cuerpo suficiente para leerse como marca gráfica. */
.faq summary::after {
  content: "+"; font-family: var(--font-display); color: var(--acento);
  font-size: 1.35rem; line-height: 1; flex: none;
  transition: color .2s ease, transform .2s ease;
}
.faq details[open] summary::after { color: var(--limon); }
.faq details:hover summary::after { transform: scale(1.12); }
.faq details[open] summary::after { content: "\2013"; }
.faq .a { padding: 0 22px 20px; color: var(--text-soft); font-size: 0.95rem; }
.tier { margin-bottom: 26px; }
.tier h4 { text-align: center; font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-dim); margin-bottom: 14px; }
.tier-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.tier-logo { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-800); color: var(--text-dim); font-weight: 600; font-size: 0.85rem; padding: 18px 26px; min-width: 150px; }

/* ---------- Footer ---------- */
/* El pie se apoya siempre en el gris oficial #444444. Sobre ese fondo el
   gris apagado de la interfaz (--text-dim) se queda en 2.3:1 y el texto
   chico desaparece, que es lo que pasaba en la página del mapa. Aquí el pie
   se sale de esas variables y usa tonos medidos contra su propio fondo. */
footer {
  border-top: 1px solid var(--line); padding: 48px 0 40px; margin-top: 0;
  --pie-texto: #d6d6d6;   /* 6.7:1 sobre el gris oficial */
  --pie-tenue: #bdbdbd;   /* 5.2:1 — para la letra chica */
}
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; }
/* En el header el logotipo manda a la izquierda; en el pie cierra por la
   derecha, que reparte mejor el peso de la banda. `row-reverse` lleva el
   primer hijo —el bloque de marca— al extremo opuesto sin tocar el HTML. */
footer .footer-inner { flex-direction: row-reverse; align-items: center; }
/* el pie de la portada alinea sus columnas por arriba */
footer .pie-arriba { align-items: flex-start; }
/* El lema va AL LADO del remate, no debajo: los dos forman una sola fila
   que cierra el pie por la derecha. */
.pie-marca-bloque {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px);
  max-width: 560px;
}
.pie-lema { color: var(--pie-texto); font-size: .88rem; margin: 0; max-width: 30ch; text-align: right; }
/* La columna de la izquierda: el lema arriba y debajo los dos grupos de
   enlaces. El remate de marca se queda solo a la derecha. */
.pie-izquierda { display: flex; flex-direction: column; gap: 22px; max-width: 480px; }
.pie-columnas { display: flex; gap: 48px; flex-wrap: wrap; }
.pie-titulo { font-size: .95rem; margin-bottom: 12px; }
.pie-lista { display: flex; flex-direction: column; gap: 8px; font-size: .88rem; }
.pie-lista a, .footer-note a { color: var(--pie-texto); transition: color .15s ease; }
.pie-lista a:hover, .footer-note a:hover { color: var(--acento); }

/* ---------- La ficha del héroe ----------
   Tres datos entre la frase y los botones, sin caja: se apoyan directamente
   sobre el blanco del héroe.

   El color de marca va donde puede ir: en los filetes que separan cada dato
   —dos píxeles de lima y limón puros, que sobre blanco funcionan como grafismo—
   y no en el texto, porque el lima a este cuerpo sobre blanco se queda en
   1.4:1 de contraste y deja de leerse. Las cifras van en tinta. */
.hero-ficha {
  --tono: var(--lima);
  list-style: none; margin: 0 0 clamp(30px, 4vw, 52px); padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 0; max-width: 540px;
}
.hero-ficha li {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 0 clamp(14px, 1.6vw, 20px);
  border-left: 2px solid var(--tono);
}
.hero-ficha li:first-child { padding-left: 0; border-left: 0; }
.hero-ficha li.es-verde { --tono: var(--lima); }
.hero-ficha li.es-limon { --tono: var(--limon); }
.hero-ficha b {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(.82rem, 1.35vw, .96rem); line-height: 1.2;
  color: var(--text); white-space: nowrap;
}
.hero-ficha span {
  font-size: clamp(.62rem, .95vw, .68rem); line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
}
/* sobre el blanco del héroe, la tinta del manual */
.sec-white .hero-ficha b { color: #161616; }
.sec-white .hero-ficha span { color: #6b6b6b; }/* y el remate se pega al borde derecho de su bloque, no se queda a media agua */
/* `.brand` es un contenedor flex de ancho automático: sin fijarle el ancho
   al contenido, `margin-left:auto` no tiene contra qué empujar. */
footer .brand { width: max-content; margin-left: auto; }
footer .footer-inner > *:has(.brand-remate) { text-align: right; }
@media (max-width: 900px) {
  /* Apilado, solo el remate se va a la derecha: los enlaces siguen alineados
     a la izquierda, que es como se leen. */
  footer .footer-inner, footer .pie-arriba { flex-direction: column; align-items: stretch; }
  /* El bloque de marca sigue siendo una FILA —lema a la izquierda, remate a
     la derecha— también apilado. Antes lo forzaba a columna y por eso el
     texto volvía a caer debajo del logotipo. */
  footer .footer-inner > *:has(.brand-remate) { width: 100%; max-width: none;
    display: flex; flex-direction: row; align-items: center; }
  /* el lema y los enlaces, a la izquierda */
  .pie-izquierda { max-width: none; text-align: left; gap: 18px; }
  .pie-columnas { gap: 32px; }
  /* el lema ocupa el ancho que le deja el remate */
  .pie-marca-bloque { max-width: none; gap: 14px; align-items: center; }
  .pie-lema { flex: 1 1 auto; min-width: 0; font-size: .78rem; max-width: none; }

  /* ---- el remate cierra por la derecha en el pie de todas las páginas ----
     El contenedor que lleva el logotipo cambia de página en página, así que
     hay una regla por caso. En las tres, los enlaces se quedan a la
     izquierda: solo el logotipo se va al canto derecho.

     · Patrocinadores: el enlace de marca cuelga directo del pie y la regla
       de arriba ya lo estiró al 100 %, así que basta con empujar su
       contenido al final.
     · Portada: el lema es elástico y ocupa el hueco, de modo que el remate
       ya quedaba a la derecha; se deja explícito para que no dependa de eso.
     · Registro: marca y enlaces comparten fila; el margen automático manda
       la marca al otro extremo. */
}
.footer-inner p { color: var(--pie-tenue); font-size: 0.85rem; margin: 0; }
.footer-note { color: var(--pie-tenue); font-size: 0.78rem; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-strong); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-links { position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--ink-800); border-bottom: 1px solid var(--line); padding: 8px 0;
    transform: translateY(-120%); transition: transform .25s ease; }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 14px 24px; width: 100%; }
  .nav-links .btn { margin: 10px 24px; }
  .stats { grid-template-columns: repeat(2, 1fr) !important; }
  .section-pad { padding: 68px 0; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
}
.gl-note {
  width: 100%; text-align: center; margin: 16px 0 0;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #b4b4b4;
}

/* ---------- Correcciones: textos que se salían de sus recuadros ---------- */
/* Las cifras no caben en tiles angostos: se ajustan al ancho disponible */
.stat { min-width: 0; overflow-wrap: anywhere; }
.stat .num { font-size: clamp(1.2rem, 2.2vw, 2.1rem); overflow-wrap: anywhere; }
.stat .lbl { font-size: 0.78rem; overflow-wrap: anywhere; }
/* Ningún bloque de texto debe rebasar su tarjeta */
.card,.faq details,.tier-logo{ min-width: 0; overflow-wrap: break-word; }
.card h3, .card p, .section-head h2, .section-head p { overflow-wrap: break-word; }

/* =====================================================================
   ESTRUCTURA POR SECCIONES (8) — cada una ocupa su propia pantalla
   ===================================================================== */
.sec-full { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.sec-over { position: relative; z-index: 2; width: 100%; }

/* 1 · HERO: texto + mapa de línea fina */
.hero { min-height: 100vh; display: flex; align-items: center; }
.hero-map { position: relative; }
.yuc-map { width: 100%; height: auto; display: block; color: currentColor; }
/* ---------- Hero: mapa de Yucatán a la derecha ---------- */
.hero { position: relative; overflow: hidden; }
.hero-map { transform: scale(1.22); transform-origin: center; }
.hero-map .yuc-map { color: var(--text); overflow: visible; }
/* la silueta va tenue; los pines, a todo color */
.hero-map .yuc-line { opacity: .42; }

/* la silueta va en puntos finos: presente pero delicada */
.hero-map .yuc-line { opacity: .55; }
.evo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin: 40px 0 30px; }
.evo-card {
  flex: 1 1 260px; min-width: 0; padding: 26px 24px; border-radius: var(--radius);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px);
}
.evo-card.is-now { border-color: color-mix(in srgb, var(--detalle) 55%, transparent); }
.evo-name { display: block; font-family: var(--font-display); font-size: 1rem; text-transform: uppercase; color: #cfcfcf; }
.evo-year { display: block; font-family: var(--font-display); font-size: 2.4rem; color: var(--acento); line-height: 1.05; }
/* La edición pasada no es ni mapa ni evento: va en limón. El rosa se
   reserva a esos dos destinos. */
.evo-2025 { color: var(--limon); }
.evo-card p { color: #d6d6d6; font-size: .9rem; margin: 6px 0 0; }
.evo-arrow { font-family: var(--font-display); font-size: 2rem; color: var(--acento); }
/* Las cifras viven dentro de la ficha de cada edición: puestas en fila
   comparan 2025 con 2026 de un vistazo, y de paso desaparece la tira de
   píldoras que ocupaba una banda entera para decir lo mismo. */
/* En lista, no en columnas: dentro de una ficha de 170 px tres columnas se
   pisan las etiquetas. Cifra y concepto en la misma línea leen mejor y
   ocupan menos. */
.evo-datos {
  list-style: none; display: flex; flex-direction: column;
  gap: 4px; margin: 12px 0 0; padding: 12px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
/* etiqueta a la izquierda y cifra a la derecha: los dos años quedan
   alineados renglón a renglón y la comparación se lee sola */
.evo-datos li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.evo-datos b { font-family: var(--font-display); font-size: 1rem; line-height: 1.1; color: inherit; }
.evo-datos span { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
/* las dos fichas miden lo mismo: misma columna y misma altura */
.evo-row { align-items: stretch; }
.evo-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.evo-card p { flex: 1 1 auto; }
@keyframes beamSweep {
  from { -webkit-mask-position: 0 0, -80% -80%; mask-position: 0 0, -80% -80%; }
  to   { -webkit-mask-position: 0 0, 180% 180%; mask-position: 0 0, 180% 180%; }
}

/* 5 · Niveles de patrocinio (solo texto) */
/* Los niveles se cuentan por lo que incluyen, no por lo que cuestan: los
   importes viven en la página de patrocinadores, donde hay sitio para
   explicarlos. Aquí el nombre, los cupos y las tres cosas que definen el
   escalón. */
.lvl-list { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; }
.lvl-list > li {
  /* Tres columnas, cada cosa donde se lee mejor: el nivel y sus cupos a la
     izquierda, lo que incluye pegado a continuación —no flotando en medio—
     y el importe cerrando por la derecha, que es donde se busca. */
  display: grid; grid-template-columns: minmax(190px, 15rem) 1fr auto;
  gap: 4px 30px; align-items: start;
  padding: 22px 0; border-top: 1px solid rgba(0,0,0,.12);
}
/* La cifra es el gancho: verde oficial, a tamaño de titular y limpia. */
.lvl-precio {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1;
  color: var(--acento); white-space: nowrap; text-align: right;
}
.lvl-precio small {
  display: block; margin-top: 6px;
  font-family: var(--font-body); font-weight: 600; font-size: .58rem;
  letter-spacing: .16em; color: var(--text-dim);
}
.sec-white .lvl-precio { color: var(--lima); }
.sec-white .lvl-precio small { color: #6b6b6b; }

.lvl-list > li:last-child { border-bottom: 1px solid rgba(0,0,0,.12); }
.lvl-name { font-family: var(--font-display); font-size: 1.1rem; }
.lvl-cupo {
  grid-column: 1; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-dim);
}
/* lo que incluye el nivel: viñetas de greca en el verde de marca */
.lvl-incluye {
  grid-column: 2; grid-row: 1 / span 2;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.lvl-incluye li {
  position: relative; padding-left: 20px;
  color: var(--text-soft); font-size: .92rem; line-height: 1.4;
}
.lvl-incluye li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--acento);
}
/* el importe y su moneda no se parten en dos renglones */
.tier-price { white-space: nowrap; }
.tier-price small { margin-left: .3em; }

/* 6 · Agenda: mapa de fondo + bloque de cristal */
.sec-agenda {
  background: var(--gris-bg); color: #fff; position: relative; overflow: hidden;
  /* Mismo arco que la escena de inicio, pero recorrido corto y en el otro
     sentido: aquí las piezas BAJAN desde arriba hasta su sitio, para que ya
     se vean en cuanto la sección asoma. Si entraran subiendo desde abajo,
     quedarían fuera de cuadro hasta el final. */
  --radio-ag: 230vh; --arco-ag: 10deg;
}
/* El mapa vuelve en la agenda, marcando siluetas de sede */
/* El mapa vuelve en la agenda, al costado derecho como en la sección 1 */
.sec-agenda--lado .wrap { position: relative; z-index: 1; }
.agenda-map {
  position: absolute; top: 50%; right: 2vw; left: auto; z-index: 0;
  width: min(46vw, 640px);
  transform: translateY(-50%);
  color: #ffffff;
  opacity: calc((0.15 + var(--ag, 1) * 0.85) * (1 - var(--ag-out, 0)));
  pointer-events: none;
}
/* el mapa entra desde abajo por el arco de la derecha y por ahí se va */
.agenda-map .yuc-map {
  width: 100%; height: auto; display: block;
  transform-origin: calc(50% + var(--radio-ag)) 50%;
  /* entra desde arriba y por arriba se va: el signo es el mismo en los dos */
  transform: rotate(calc((var(--ag-in, 0) + var(--ag-out, 0)) * var(--arco-ag)));
}
.agenda-map .yuc-line { opacity: .75; }
.sede-sil {
  opacity: 0; transform-box: fill-box; transform-origin: 50% 100%;
  animation: sedeLate 4.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes sedeLate {
  0%, 100% { opacity: 0; transform: scale(.7); }
  18%      { opacity: .95; transform: scale(1); }
  56%      { opacity: .5;  transform: scale(1); }
  76%      { opacity: 0;   transform: scale(1.06); }
}
/* la info hace el mismo recorrido, pero por el arco de la izquierda */
.sec-agenda .sec-over {
  transform-origin: calc(50% - var(--radio-ag)) 50%;
  transform: rotate(calc((var(--ag-in, 0) + var(--ag-out, 0)) * var(--arco-ag) * -1));
  opacity: calc((0.15 + var(--ag, 1) * 0.85) * (1 - var(--ag-out, 0)));
}
@media (prefers-reduced-motion: reduce) {
  .sede-sil { animation: none; opacity: .8; }
  .sec-agenda .sec-over, .agenda-map .yuc-map { transform: none; opacity: 1; }
}

/* 7 · FAQ a todo lo ancho */
.faq-wide { max-width: 900px; margin: 0 auto; }

@media (max-width: 900px) {
  .hero-map { max-width: 420px; margin: 0 auto; }
  .lvl-list > li { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .lvl-incluye { grid-column: 1 / -1; grid-row: auto; }
  .lvl-precio { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-size: 1.35rem; }
}


/* ============================================================
   LABORATORIO DE GRECAS
   Tres secciones de prueba, una por greca oficial, cada una con
   su propio efecto. Todo vive aislado del resto del sitio.
   ============================================================ */
/* la zona de patrocinadores va en gris con amarillo */
.sec-lab { position: relative; overflow: hidden; min-height: 72vh; display: flex; align-items: center;
  padding-bottom: 34px; --acento: var(--limon); }
.sec-lab .sec-over { position: relative; z-index: 1; }
.sec-lab code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em; padding: 2px 7px; border-radius: 5px;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* ---- L1 · Greca oficial: caleidoscopio ----
   Ocho gajos de 45°; los impares van espejeados, así cada arista
   refleja a su vecina. El conjunto gira muy despacio. */
.lab-caleido { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cal-rot { position: absolute; inset: 0; animation: calGira 72s linear infinite; }
.cal-seg {
  position: absolute; left: 50%; top: 50%;
  width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  clip-path: polygon(50% 50%, 100% 29.29%, 100% 70.71%);
  transform: rotate(calc(var(--k) * 45deg)) scaleX(var(--m, 1));
  background: var(--limon); opacity: 0.14;   /* sobre gris, en amarillo oficial */
  /* La celosía del caleidoscopio, en silueta: el color lo pone el fondo. */
  -webkit-mask: url("../img/greca-caleidoscopio.svg") center center / 20% auto repeat;
  mask: url("../img/greca-caleidoscopio.svg") center center / 20% auto repeat;
  animation: calDeriva 26s ease-in-out infinite alternate;
}
.cal-seg:nth-child(even) { --m: -1; }
@keyframes calGira { to { transform: rotate(360deg); } }
@keyframes calDeriva {
  from { -webkit-mask-position: 0% 50%;  mask-position: 0% 50%; }
  to   { -webkit-mask-position: 100% 50%; mask-position: 100% 50%; }
}

@media (max-width: 720px) { .sec-lab { min-height: 64vh; } }
/* En el teléfono la zona de patrocinadores enlaza directo con el pie: sin
   una franja de relleno en medio. */
@media (max-width: 900px) {
  .sec-lab { padding-top: 56px; padding-bottom: 0; min-height: 0; }
  .sec-lab .tira-aliados { margin-bottom: 0; }
  .sec-lab .gl-note { margin-bottom: 0; padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-rot, .cal-seg { animation: none; }
}


/* ============================================================
   MENÚ LATERAL PIRAMIDAL
   Siempre oculto. Se despliega al tocar el icono de greca que vive
   en la esquina derecha del header. El panel es un trapecio (más
   angosto arriba que abajo) y su borde inclinado va vestido con la
   greca de volumen.
   ============================================================ */
:root { --sm-arriba: 178px; --sm-abajo: 232px; }

/* el disparador: un módulo de la greca oficial */
.greca-menu {
  width: 52px; height: 30px; flex: none; padding: 0; cursor: pointer;
  border: none; background: url("../img/greca-menu-3d.svg") center / contain no-repeat;
  transition: transform .2s ease, filter .2s ease;
}
.greca-menu:hover { transform: scale(1.14); filter: brightness(1.1) saturate(1.15); }
body.side-abierto .greca-menu { transform: scaleX(-1); filter: brightness(1.1); }

.side-velo {
  position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.42);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
body.side-abierto .side-velo { opacity: 1; visibility: visible; }

.sidemenu {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
  width: var(--sm-abajo);
  background: #3a3a3a;
  /* estrecho arriba, amplio abajo: la diagonal cae por el costado derecho */
  clip-path: polygon(0 0, var(--sm-arriba) 0, 100% 100%, 0 100%);
  display: flex; align-items: center;
  transform: translateX(-102%);
  box-shadow: 0 0 44px rgba(0,0,0,.45);
  transition: transform .36s cubic-bezier(.3, .9, .3, 1);
}
body.side-abierto .sidemenu { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .sidemenu { transition: none; transform: translateX(-102%); }
  .side-inner > * { transition: none; opacity: 1; transform: none; }
}

/* el borde inclinado, vestido con la greca de volumen */
.side-edge {
  --se: 18px;                                   /* grosor de la greca del borde */
  position: absolute; top: -4%; height: 108%; width: var(--se);
  left: calc(var(--sm-arriba) - var(--se));
  transform-origin: 100% 0; transform: rotate(-3deg);
  background: url("../img/greca-volumen-modulo-v.svg") repeat-y center top / 100% auto;
  pointer-events: none;
}
.side-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 86px 0 22px; width: 100%;
}
.side-kicker {
  font-family: var(--font-body); font-size: .62rem; font-weight: 700;
  /* rótulo del menú: ni mapa ni evento, así que no lleva el rosa */
  text-transform: uppercase; letter-spacing: .22em; color: var(--limon);
  margin: 0 0 14px;
}
/* Cerrar desde dentro: el panel cubre el header, así que el icono del
   header ya no está a la vista mientras el menú está abierto. */
.side-cerrar {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; padding: 0; margin: 0 0 22px;
  cursor: pointer; align-self: flex-start;
  font-family: var(--font-body); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: #9a9a9a;
  transition: color .15s;
}
.side-cerrar::before {
  content: ""; width: 31px; height: 18px; flex: none;
  /* la greca del menú es marca, no destino: limón, no rosa */
  background: var(--limon);
  -webkit-mask: url("../img/greca-simple.svg") center / contain no-repeat;
  mask: url("../img/greca-simple.svg") center / contain no-repeat;
  transition: background .15s, transform .18s;
}
.side-cerrar:hover { color: #ffffff; }
.side-cerrar:hover::before { background: var(--lima); transform: scaleX(-1); }
.sidemenu a {
  font-family: var(--font-body); font-weight: 600; font-size: .79rem;
  color: #e6e6e6; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .15s, padding-left .15s;
}
.sidemenu a:hover { color: var(--lima); padding-left: 6px; }
.sidemenu a:last-of-type { border-bottom: none; }
.sidemenu .side-cta {
  margin-top: 14px; text-align: center; border: none;
  background: var(--lima); color: #161616; border-radius: 999px;
  padding: 9px 10px; font-size: .78rem;
}
.sidemenu .side-cta:hover { padding-left: 0; background: var(--lima-2); }
@media (max-width: 720px) {
  :root { --sm-arriba: 190px; --sm-abajo: 244px; }
}

/* ---------- Marcas aliadas: una sola barra de cristal ----------
   Antes cada logo llevaba su propia placa y la fila se leía como seis cosas
   sueltas. Ahora la placa es una: una barra de cristal verde de lado a lado
   por la que los logos van pasando. El caleidoscopio del fondo se sigue
   viendo por detrás, difuminado.

   El truco del bucle: la pista lleva los logos dos veces y se desplaza
   exactamente la mitad de su ancho. Al terminar, el fotograma final es
   idéntico al inicial, así que la vuelta no tiene costura. */
.tira-aliados {
  position: relative; z-index: 1;
  width: 100%; max-width: calc(var(--maxw) * 1.1); margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  padding: clamp(14px, 1.8vw, 20px) 0;
  /* verde de marca en cristal: se lee como una sola pieza verde, pero deja
     pasar el caleidoscopio del fondo lo justo para que respire */
  background:
    linear-gradient(180deg, rgba(132,246,73,.26), rgba(132,246,73,.13) 55%, rgba(132,246,73,.20));
  -webkit-backdrop-filter: blur(14px) saturate(1.45);
  backdrop-filter: blur(14px) saturate(1.45);
  /* Sin filete: la banda se define por su propio cristal verde y el halo
     que proyecta, no por una línea alrededor. */
  border: 0;
  box-shadow: 0 0 40px -6px rgba(132,246,73,.55),
              0 18px 36px -26px rgba(0,0,0,.75);
  /* los logos se desvanecen contra los cantos en vez de cortarse en seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tira-pista {
  display: flex; align-items: center; width: max-content;
  gap: clamp(38px, 5.5vw, 84px);
  margin: 0; padding: 0 clamp(19px, 2.75vw, 42px); list-style: none;
  animation: tiraAliados 29.5s linear infinite;
  will-change: transform;
}
.tira-aliados:hover .tira-pista { animation-play-state: paused; }
.tira-marca { flex: none; display: flex; align-items: center; }
.tira-marca img {
  /* altura óptica común: cada logo se recortó a su caja real, así que
     igualando el alto quedan todos del mismo peso visual */
  height: clamp(26px, 3.1vw, 42px); width: auto; display: block;
  opacity: .95; transition: opacity .2s ease, transform .2s ease;
}
.tira-marca:hover img { opacity: 1; transform: scale(1.04); }

@keyframes tiraAliados {
  from { transform: translate3d(0, 0, 0); }
  /* la mitad justa: el segundo juego queda donde empezaba el primero */
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 720px) {
  .tira-aliados { border-radius: 14px; }
  .tira-pista { animation-duration: 22.5s; }
  .tira-marca img { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  /* sin movimiento la tira no tiene sentido: los logos se acomodan quietos
     y la copia sobra */
  .tira-pista { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .tira-marca[aria-hidden="true"] { display: none; }
  .tira-aliados { -webkit-mask-image: none; mask-image: none; }
}

.gl-note { color: var(--text-dim); }
/* el botón de registro del header solo existe en vertical */
.solo-movil { display: none; }
/* piezas que solo existen en la maqueta vertical del teléfono */
.solo-vertical { display: none; }
@media (max-width: 900px) { .solo-vertical { display: block; } }

/* ---------- Vistas ----------
   La maqueta del teléfono se arma con vistas de una pantalla. En pantalla
   ancha esos envoltorios no deben existir: `display: contents` los saca del
   layout y el contenido vuelve a colgar del .wrap, como siempre. */
/* La vista sigue siendo un bloque —el .wrap de algunas secciones es flex y
   necesita un solo hijo— pero sus tres bandas desaparecen: el contenido
   vuelve a apilarse en el orden de siempre. */
.vista { display: block; }
.v-top, .v-mapa, .v-pie { display: contents; }
.section-head.eco, .ag-cabeza.eco { display: none; }   /* titular repetido */

/* ---------- El logo en 3D, en el header y el pie ----------
   La pieza trae su propia escena, así que va en iframe. En el header ocupa
   toda la altura de la barra; en el pie puede ir algo más grande. */
.logo-pieza { display: block; line-height: 0; }
.logo-pieza iframe {
  display: block; width: 112px; height: 68px;
  border: 0; background: transparent; pointer-events: none;
}
footer .logo-pieza iframe { width: 104px; height: 63px; }
@media (max-width: 900px) {
  .logo-pieza iframe { width: 96px; height: 58px; }
  footer .logo-pieza iframe { width: 87px; height: 53px; }
}

/* La variante en blanco NO se hace con filtros: un filtro desteñiría también
   el verde oficial. La pieza repinta sus propios PNG (ver logo-3d.html) y se
   pide con ?tinta=blanco o por postMessage. Aquí no hay nada que declarar. */

/* ---------- Cifras por tema ----------
   Si la cifra habla de EVENTOS toma el acento de destino (hoy rosa mexicano;
   cambia con solo tocar --destino). Si habla de SEDES va en
   verde, igual que los pines del mapa. */
.stat.es-evento .num { color: var(--destino); }
.stat.es-sede .num { color: var(--lima); }
/* en patrocinadores la greca vive detrás del bloque de entrada */
/* remate de esquina: el logo manda arriba a la izquierda y la greca cierra
   abajo a la derecha, de modo que las dos piezas enmarcan la página */
.seccion-formularios { position: relative; overflow: hidden; }
.seccion-formularios > .wrap { position: relative; z-index: 1; }

.sp-hero { position: relative; overflow: hidden; }
.sp-hero-greca { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; }
.sp-hero-greca iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.sp-hero > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .sp-hero-greca { opacity: .38; }
}

/* ---------- Firma de autoría ---------- */
.firma-fresco {
  margin: 14px 0 0; font-size: .78rem; letter-spacing: .01em;
  color: var(--pie-tenue);
}
.firma-fresco a {
  color: var(--acento); font-weight: 700;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.firma-fresco a:hover { border-bottom-color: var(--acento); }
/* la firma del pie lleva el logotipo, alineado con la línea de texto */
.firma-logo { display: inline-block; border-bottom: 0 !important; vertical-align: -0.34em; }
.firma-logo img { height: 1.55em; width: auto; display: block; opacity: .85; transition: opacity .2s ease; }
.firma-logo:hover img { opacity: 1; }

/* En pantallas chicas el CTA del header estorba: vive en el menú lateral */
@media (max-width: 900px) {
  /* en vertical el registro vive en el header, no en el hero */
  /* en el header solo el registro; el CTA propio de cada página se guarda */
  .nav-right .btn-primary { display: none; }
  .nav-right .btn-primary.solo-movil { display: inline-flex; padding: 9px 14px; font-size: .78rem; }
  .map-page .nav-right .btn-primary { display: inline-flex; padding: 9px 14px; font-size: .78rem; }
  .nav-right { gap: 10px; }
  .hero-cta .solo-ancho { display: none; }
  /* el contador estorba al botón en una barra de 390 px: se retira */
  .nav .countdown { display: none; }
}


/* ============================================================
   COLOR POR DESTINO
   Todo lo que lleva a patrocinadores va en limón #d9f34e
   (sobre blanco, su versión oscurecida: el puro no se lee).
   Todo lo que lleva al mapa va en el acento de destino.
   ============================================================ */
.es-patrocinio { --acento: var(--limon); color: var(--limon); }
.es-mapa       { --acento: var(--destino); color: var(--destino); }
.nav .nav-link.es-mapa, .nav.on-white .nav-link.es-mapa { color: var(--destino); }
.nav .nav-link.es-mapa:hover { border-bottom-color: var(--destino); }
.nav .nav-link.es-patrocinio { color: var(--limon); }
.nav.on-white .nav-link.es-patrocinio,
.sec-white .es-patrocinio { color: var(--lima); }
.nav .nav-link.es-patrocinio:hover { border-bottom-color: currentColor; }
.sidemenu a.es-mapa:hover { color: var(--destino); }
.sidemenu a.es-patrocinio:hover { color: var(--limon); }

/* Página de patrocinadores: el acento es el limón */
.sp-page { --acento: var(--limon); --detalle: var(--lima); }
/* Página del mapa: el acento es el rosa mexicano */
.map-page { --acento: var(--destino); --detalle: var(--lima); }


/* ============================================================
   ESCENA · del hero a "Nuestra historia" en un solo recorrido
   Cuatro tiempos sobre un lienzo fijo; el mapa vive en el plano
   más al fondo y nunca sale: los demás planos entran y salen
   girando sobre una rueda, cada uno hacia su lado.
   ============================================================ */
/* al final de "Nuestra historia" no hay giro: la escena simplemente se
   suelta y el bloque se va con el scroll, como cualquier sección */
#participa { position: relative; z-index: 3; }

.escena {
  position: relative; height: 420vh;
  --e1: 0; --e2: 0; --e3: 0; --e4: 0; --e5: 0;
  --linea: #84f649; --tinta-logo: #161616;
  --fondo: #ffffff; --tinta: #161616;
  /* EL ARCO. El centro del círculo no está debajo del cuadro sino MUY a un
     lado, a la altura del eje horizontal. Por eso el eje central de cada
     sección arranca subiendo casi en vertical y se va curvando hacia su
     lado conforme sube: a 30° recorre 115vh hacia arriba y 31vh de lado,
     igual que el trazo del boceto. De la circunferencia solo vemos ese
     tramo. --arco es cuánto gira; el signo decide el lado. */
  --radio: 230vh;
  --arco: 30deg;
}
.escena .ancla { display: block; height: 0; }
.escena .ancla-evento { position: absolute; top: 34%; }
.escena .ancla-historia { position: absolute; top: 72%; }

.escena-fija {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
  background: var(--fondo); color: var(--tinta);
}
.plano {
  grid-area: 1 / 1; width: 100%; height: 100%;
  align-self: stretch; justify-self: stretch;
  display: grid; place-items: center; align-content: center;
  /* pivote a la izquierda por defecto; los planos que viajan por la derecha
     lo reflejan. Nunca hay translate: girar es todo el desplazamiento */
  transform-origin: calc(50% - var(--radio)) 50%;
}
.plano > * { width: 100%; }
.plano-texto.sec-white, .plano-evento.sec-gris, .plano-historia.sec-white { background: transparent; }

/* --- 1 · el bloque del hero sale girando hacia la izquierda --- */
.plano-texto {
  pointer-events: auto;
  transform: rotate(calc(var(--e1) * var(--arco) * -1));   /* sube por el arco y sale arriba a la izquierda */
  opacity: calc(1 - var(--e1) * var(--e1) * var(--e1) * 1.25);
  will-change: transform, opacity;
}
.escena .hero-text { max-width: 620px; }
.escena .ytw-logo { --ytw-ink: var(--tinta-logo, var(--tinta)); }
.escena .plano-texto .wrap { display: flex; }

/* --- el mapa: plano de fondo, nunca sale --- */
.plano-mapa {
  z-index: 0; color: var(--tinta); pointer-events: none;
  /* el mapa ya no sale girando: se va con el scroll */
  will-change: transform;
}
.escena .hero-map {
  width: min(76vw, 960px); position: relative; margin: 0 auto;
  /* La colocación y el tamaño los calcula el guion de la escena midiendo el
     sitio que deja la columna de texto (ver `reparteAncho` en index.html).
     No puede ir en CSS puro porque hace falta dividir dos longitudes —el
     ancho libre entre el ancho del mapa— y `calc()` no divide longitudes.
     Los valores de reserva son los del recorrido de entrada. */
  transform:
    translateX(var(--mapa-x, calc((1 - var(--e1)) * 23vw)))
    scale(var(--mapa-s, calc(0.66 + var(--e1) * 0.34)));
  will-change: transform;
}
.escena .hero-map .yuc-map { position: relative; width: 100%; height: auto; display: block; }
/* sin relleno: el mapa es solo contorno */
.escena .yuc-relleno { display: none; }
/* el contorno: línea fina gris, constante en todo el recorrido */
.escena .hero-map .yuc-line {
  stroke: var(--linea); opacity: 1;
  stroke-width: 3; stroke-dasharray: none;      /* solo el contorno, línea fina */
}

/* pines de sede: verdes y discretos, se retiran cuando llegan las fotos */
.yuc-pines { opacity: calc((1 - var(--e2, 0)) * (1 - var(--e4, 0))); }
.yuc-pin-cuerpo { fill: var(--lima); }
.yuc-pin-ojo { fill: #ffffff; }
.yuc-pin-halo {
  fill: var(--lima); opacity: .3;
  transform-box: fill-box; transform-origin: center;
  animation: pinLate 3.4s ease-out infinite;
  animation-delay: var(--retardo, 0s);
}
@keyframes pinLate {
  0%   { transform: scale(.6); opacity: .34; }
  60%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .yuc-pin-halo { animation: none; opacity: .22; }
}
/* En el teléfono son 34 halos latiendo a la vez sobre un mapa que además se
   mueve con el scroll: se apagan y el recorrido va suelto. */
@media (max-width: 900px) {
  .yuc-pin-halo { animation: none; opacity: .26; }
}

/* las piezas viven dentro de la caja del mapa */
.medios { position: absolute; inset: 0; pointer-events: none; }
.pieza {
  position: absolute; margin: 0;
  width: calc(clamp(88px, 11.5%, 158px) * (1 + var(--e4) * 0.24)); aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%) rotate(var(--giro, 0deg)) scale(.55);
  opacity: 0; border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.45);
  transition: opacity .22s linear, transform .28s cubic-bezier(.2, 1.1, .3, 1);
}
.pieza.puesta { opacity: 1; transform: translate(-50%, -50%) rotate(var(--giro, 0deg)) scale(1); }
.pieza img, .pieza video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieza::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--destino); border-radius: 2px;
}

/* --- 2 y 3 · "El evento" entra y sale girando hacia el otro lado --- */
.plano-evento {
  z-index: 2;
  /* la salida viaja por el arco de la derecha */
  transform-origin: calc(50% + var(--radio)) 50%;
  transform: rotate(calc(var(--e3) * var(--arco)));
  opacity: calc(var(--e2) * (1 - var(--e3) * var(--e3) * var(--e3) * 1.25));
  pointer-events: none;
  will-change: transform, opacity;
}
/* la entrada sube por el arco de la izquierda, desde abajo del cuadro */
.plano-evento > .wrap {
  transform-origin: calc(50% - var(--radio)) 50%;
  transform: rotate(calc((1 - var(--e2)) * var(--arco)));
}
.plano-evento .wrap { max-width: 900px; }
.plano-evento .section-head { margin-bottom: 26px; }
.plano-evento .tracks-grid { margin: 26px 0 !important; }

/* --- 4 · "Nuestra historia" entra por la derecha, también en ruleta --- */
.plano-historia {
  z-index: 2;
  /* sube desde abajo por el arco de la derecha; al salir no gira: se va
     con el scroll, como una sección cualquiera */
  transform-origin: calc(50% + var(--radio)) 50%;
  transform: rotate(calc((1 - var(--e4)) * var(--arco) * -1));
  opacity: var(--e4);
  pointer-events: none;
  will-change: transform, opacity;
}
.escena.viva .plano-historia { pointer-events: auto; }
/* El plano de "El evento" se declara transparente al ratón para que los que
   están detrás sigan alcanzables mientras entra y sale. Cuando ya es el que
   manda, su contenido vuelve a ser interactivo. */
.escena.evento-manda .plano-evento { pointer-events: auto; }
/* La columna se estrecha con la ventana en vez de exigir siempre 620 px:
   así al mapa siempre le queda sitio y el reparto no se rompe. */
.plano-historia .wrap { max-width: clamp(320px, 42vw, 620px); margin-right: 4vw; margin-left: auto; }
.plano-historia .section-head { margin-bottom: 22px; }
.plano-historia .evo-row { grid-template-columns: 1fr; gap: 14px; }
.plano-historia .evo-card {
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.1);
  backdrop-filter: blur(9px); color: #161616; padding: 20px 22px;
}
.plano-historia .evo-card.is-now { transform: none; }
.plano-historia .evo-arrow { display: none; }
.plano-historia .evo-name { color: #5a5a5a; }
.plano-historia .evo-card p, .plano-historia .section-head p { color: #555555; }
.plano-historia h2 { color: #161616; }

/* Cuando no hay sitio de sobra, el titular cae encima de las fotos. No se
   añade tarjeta ni fondo: solo se desenfoca lo que queda detrás del texto,
   lo justo para que se lea. El bloque sigue viéndose al aire. */
@media (min-width: 901px) {
  .plano-historia .section-head { position: relative; }
  /* La capa va DETRÁS del texto y solo desenfoca lo que tenga debajo. Donde
     no hay fotos el fondo es blanco liso y desenfocarlo no cambia nada, así
     que la capa se nota únicamente cuando de verdad estorba una foto. Los
     bordes se desvanecen para que no aparezca un recuadro. */
  .plano-historia .section-head::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: -22px -34px -16px -34px;
    backdrop-filter: blur(12px) saturate(.9);
    -webkit-backdrop-filter: blur(12px) saturate(.9);
    -webkit-mask-image: radial-gradient(120% 130% at 50% 50%, #000 72%, transparent 100%);
    mask-image: radial-gradient(120% 130% at 50% 50%, #000 72%, transparent 100%);
  }
  .plano-historia .section-head > * { position: relative; }
}

@media (max-width: 900px) {
  /* ===========================================================
     MAQUETA VERTICAL POR VISTAS
     Antes había dos planos independientes: el mapa pegado y el
     contenido corriendo por su cuenta, que se desincronizaban. Ahora
     manda el contenido: cada vista reserva el hueco donde va el mapa
     (.v-mapa) y el mapa se coloca donde esté ese hueco, medido en vivo.
     Es imposible que se separen, porque uno se calcula a partir del otro.
     =========================================================== */
  .escena, .escena.viva { height: auto; margin-top: -68px; margin-bottom: 0; }
  .escena-fija { position: static; height: auto; overflow: visible;
    display: flex; flex-direction: column; background: none; }
  .plano { transform-origin: 50% 50%; transform: none; opacity: 1; }
  .plano-texto, .plano-evento, .plano-historia {
    position: relative; z-index: 1; background: none; padding: 0;
  }
  .plano-texto > .wrap, .plano-evento > .wrap, .plano-historia > .wrap {
    display: block; max-width: none; margin: 0 auto; transform: none;
  }

  /* ---- la vista: tres bandas de altura de pantalla ----
     Se mide en `svh`, no en `dvh`: la barra del navegador aparece y
     desaparece, y con `dvh` la vista se dimensiona con la barra escondida y
     luego el contenido de abajo —el botón, las cifras— queda fuera de
     cuadro. `svh` es la altura con la barra puesta, o sea el mínimo
     garantizado: así nunca se corta nada. */
  /* Columna, no rejilla. Con `1fr` el hueco del mapa se quedaba con TODO el
     aire sobrante y empujaba el contenido de abajo contra el borde de la
     pantalla, donde lo recorta la barra de gestos. Ahora el mapa crece solo
     hasta su tope: lo que sobre se queda debajo del contenido, no encima.
     Y el relleno inferior reserva el área segura del teléfono. */
  .vista {
    display: flex; flex-direction: column;
    /* El aire que sobra se reparte arriba y abajo en vez de amontonarse en
       un lado: el bloque queda centrado en el cuadro y con el mismo respiro
       por los dos extremos. */
    justify-content: center;
    min-height: 100vh; min-height: 100svh;
    padding: 72px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .v-top, .v-pie { flex: 0 0 auto; }
  /* El tope evita que el mapa se quede con todo el aire; subirlo un punto
     hace que el hueco sobrante sea pequeño y el conjunto no baile. */
  .v-mapa { flex: 1 1 auto; min-height: 0; max-height: 50svh; }
  /* El mapa cede un poco de alto: ahora debajo van la ficha del evento y el
     botón, y el conjunto tiene que caber en una pantalla sin apretarse. */
  .plano-texto .v-mapa   { max-height: 38svh; }
  /* Con el mapa más chico los pines se perdían: crecen para que se sigan
     leyendo como marcas de sede y no como puntitos. */
  /* El aumento va en un grupo interior, nunca en el pin: el pin lleva su
     `transform="translate(...)"` y cualquier escala puesta encima se aplica
     DESPUÉS de esa traslación, o sea que multiplica la coordenada y los
     saca del mapa. El grupo de dentro dibuja con la punta en el origen, así
     que ahí la escala solo agranda, no mueve. */
  .escena .hero-map .yuc-pin-fig {
    scale: 1.28; transform-box: fill-box; transform-origin: 50% 100%;
  }
  .plano-evento .v-mapa  { max-height: 56svh; }
  /* En la segunda vista de "El evento" el mapa es solo textura de fondo: no
     se le reserva hueco. El aire que sobre no queda como un vacío entre el
     titular y las tarjetas, sino que lo absorben las propias tarjetas, que
     se estiran para repartirse la altura. Así la pantalla se llena de
     información en vez de espacio muerto, sea cual sea el alto del móvil. */
  .plano-evento .vista:last-child .v-mapa { max-height: 0; }
  .plano-evento .vista:last-child .v-pie {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 9px; padding-top: 1.5dvh;
  }
  .plano-evento .vista:last-child .tracks-grid {
    flex: 1 1 auto; min-height: 0;
    grid-template-rows: repeat(3, minmax(0, 1fr)); margin: 0 !important;
  }
  .plano-evento .vista:last-child .card {
    display: flex; flex-direction: column; justify-content: center;
  }
  .plano-historia .v-mapa { max-height: 40svh; }
  .sec-agenda .v-mapa    { max-height: 42svh; }
  .solo-ancho-vista { display: none; }
  .v-top, .v-pie { display: block; position: relative; z-index: 2; }
  .v-mapa { display: block; position: relative; z-index: 1; }
  /* el relevo entre vistas: la que no manda se retira sin desaparecer */
  .v-top, .v-pie { opacity: calc(.62 + .38 * var(--peso, 1)); }
  /* Donde el texto se monta sobre el mapa —o sobre las fotos— se desenfoca
     solo esa porción del fondo, lo justo para que el texto siga limpio. No
     hay recuadro: los bordes se desvanecen y, sobre un fondo liso,
     desenfocar no cambia nada, así que no se nota cuando no hace falta. */
  .v-top::before, .v-pie::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset: -14px -7vw;
    backdrop-filter: blur(11px) saturate(.9);
    -webkit-backdrop-filter: blur(11px) saturate(.9);
    -webkit-mask-image: radial-gradient(112% 122% at 50% 50%, #000 60%, transparent 100%);
    mask-image: radial-gradient(112% 122% at 50% 50%, #000 60%, transparent 100%);
  }
  .v-top > *, .v-pie > * { position: relative; z-index: 1; }
  .section-head.eco, .ag-cabeza.eco { display: block; }
  /* el titular repetido no vuelve a anunciar la sección */
  .section-head.eco .eyebrow, .ag-cabeza.eco .eyebrow { opacity: .55; }

  /* Sin imán: el scroll manda. El enganche por vistas frenaba el dedo y
     reacomodaba el cuadro solo, que es justo lo que se sentía atorado. */

  /* ---- la capa del mapa, común a las tres secciones ---- */
  .plano-mapa {
    order: -1; position: sticky; top: 0; height: 100vh; height: 100svh;
    margin-bottom: -100vh; margin-bottom: -100svh;
    z-index: 0; display: grid; place-items: center; padding: 0;
    background: var(--fondo); color: var(--tinta);
    overflow: hidden;
  }
  /* el mapa no navega solo: --mapa-y lo lleva al hueco de la vista que
     manda y --zoom lo acerca o lo aleja en los relevos */
  .escena .hero-map {
    width: min(84vw, 400px); position: relative; top: 0;
    transform: translateY(var(--mapa-y, 0px)) scale(var(--zoom, 1));
    transform-origin: 50% 50%;
    will-change: transform;
  }

  /* ---- 1 · logotipo, datos, mapa y botón ---- */
  /* el bloque baja del borde superior: el logotipo se sentía pegado arriba
     y al botón no le llegaba el aire de abajo */
  /* En el teléfono el bloque va centrado también en horizontal: el logotipo
     es un inline-flex, así que basta con centrar la caja de texto; su
     composición interna (YUCATÁN al ras, TECH·WEEK repartido) no se toca. */
  .plano-texto .vista { padding-top: 116px; padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px)); }
  .plano-texto .v-top { text-align: center; }
  .plano-texto .hero-sub { margin-left: auto; margin-right: auto; max-width: 30ch; }
  .plano-texto .hero-text { display: block; max-width: none; }
  .plano-texto .hero-sub { margin: 14px 0 12px; font-size: 1rem; }
  /* En el teléfono los tres datos se reparten el ancho en columnas iguales,
     centrados, y el filete de color queda como separador entre ellos. */
  .plano-texto .hero-ficha {
    margin: 0 auto clamp(26px, 5vw, 38px); max-width: 340px;
    display: grid; grid-template-columns: repeat(3, 1fr);
    justify-items: center; text-align: center;
  }
  .plano-texto .hero-ficha li { align-items: center; padding: 0 7px; width: 100%; }
  .plano-texto .hero-ficha b { font-size: .8rem; }
  .plano-texto .hero-ficha span { font-size: .62rem; letter-spacing: .06em; }
  .escena .ytw-logo--hero { font-size: clamp(2.75rem, 16.5vw, 4.4rem); }
  /* sin hover en un teléfono: el botón va ya en su estado fuerte */
  .hero-cta .btn-grad {
    background: var(--limon); color: var(--gris); border-color: var(--limon);
    box-shadow: 0 0 0 3px rgba(217,243,78,.26), 0 16px 40px -12px rgba(217,243,78,.9);
  }
  .hero-cta .btn-grad:active {
    background: var(--gris); color: var(--limon);
    box-shadow: 0 0 0 5px rgba(217,243,78,.34), 0 6px 20px -6px rgba(217,243,78,.9);
  }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* ---- 2 · "El evento" ---- */
  .plano-evento .section-head { margin: 3dvh 0 0; text-align: center; }
  .plano-evento .section-head h2 { font-size: clamp(1.45rem, 7vw, 1.95rem); }
  /* el párrafo vive dentro de la silueta, centrado en el hueco del mapa */
  /* El párrafo va sobre el territorio: el mapa se agranda hasta desbordar
     el cuadro —da igual no verlo entero— y el texto se apoya encima. */
  /* El texto ocupa el área del mapa en vez de flotar centrado en ella: se
     apoya en el canto izquierdo, con un filete de marca como entradilla, y
     se cuenta en dos tamaños. Centrado y a un solo cuerpo se leía plano y
     dejaba los renglones sueltos sobre el dibujo. */
  .v-dentro {
    position: absolute; inset: 0; margin: 0;
    display: flex; flex-direction: column; justify-content: center;
    /* Un punto más abajo: así el bloque cae sobre el cuerpo del territorio
       y no sobre el borde norte del dibujo. */
    padding: 5dvh 7vw 0 7vw; text-align: left;
  }
  .v-dentro::before {
    content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
    margin: 0 0 16px; background: var(--lima);
  }
  .v-lead {
    font-family: var(--font-body); font-weight: 600;
    font-size: clamp(1.02rem, 4.6vw, 1.24rem); line-height: 1.32;
    letter-spacing: -.012em; color: #ffffff;
    margin: 0 0 12px; text-wrap: balance;
  }
  .v-cuerpo {
    font-size: clamp(.8rem, 3.4vw, .9rem); line-height: 1.55;
    color: #c3c3c3; margin: 0; max-width: 34ch;
  }
  .ev-ficha {
    list-style: none; margin: 2dvh 0 0; padding: 12px 0 0;
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255,255,255,.16); text-align: center;
  }
  .ev-ficha li { display: flex; flex-direction: column; gap: 2px; }
  .ev-ficha li + li { border-left: 1px solid rgba(255,255,255,.16); }
  .ev-ficha b { font-family: var(--font-display); font-size: .98rem; color: #ffffff; }
  .ev-ficha span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #b6b6b6; }
  .plano-evento .tracks-grid {
    display: grid; grid-template-columns: 1fr; gap: 9px; margin: 0 0 9px !important;
  }
  .plano-evento .card { padding: 12px 15px; }
  .plano-evento .card h3 { font-size: 1rem; margin-bottom: 5px; }
  .plano-evento .card p { font-size: .85rem; margin: 0; line-height: 1.45; }
  .plano-evento .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 9px; }
  .plano-evento .stat { padding: 11px 9px; }
  .plano-evento .stat .num { font-size: 1.35rem; }
  .plano-evento .stat .lbl { font-size: .64rem; }

  /* ---- 3 · "Nuestra historia": titular, texto y debajo el mapa ---- */
  .plano-historia .section-head { margin: 0; position: relative; }
  .plano-historia .section-head h2 { font-size: clamp(1.45rem, 7vw, 1.95rem); }
  .plano-historia .section-head p {
    margin: 8px 0 0; max-width: 36ch; font-size: .84rem; line-height: 1.45;
  }
  /* el mapa sube y deja sitio debajo para 2025 y 2026 */
  .plano-historia .v-mapa { margin-top: -2dvh; }
  .plano-historia .evo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0;
    align-items: stretch; }
  .plano-historia .evo-card { background: rgba(255,255,255,.94); padding: 11px 12px; }
  .plano-historia .evo-datos { gap: 2px; margin-top: 8px; padding-top: 8px; }
  .plano-historia .evo-datos li { gap: 5px; }
  .plano-historia .evo-datos b { font-size: .74rem; }
  .plano-historia .evo-datos span { font-size: .53rem; letter-spacing: .03em; }
  /* el año también baja un punto: así el nombre de cada edición cabe en una
     línea y la ficha no crece de más */
  .plano-historia .evo-year { font-size: 1.3rem; }
  .plano-historia .evo-name { font-size: .62rem; letter-spacing: .01em; }
  .plano-historia .evo-datos { border-top-color: rgba(0,0,0,.12); }
.plano-historia .evo-datos span { color: #6d6d6d; }
  .plano-historia .evo-name { font-size: .68rem; }
  .plano-historia .evo-year { font-size: 1.45rem; line-height: 1.05; }
  .plano-historia .evo-card p { font-size: .74rem; margin-top: 3px; line-height: 1.38; }

  /* ---- Programa: el mapa vuelve, con los pines, y la info sale del recuadro ---- */
  .sec-agenda { display: flex; flex-direction: column; overflow: visible;
    padding-top: 0; padding-bottom: 0; }
  .agenda-map {
    order: -1; position: sticky; top: 0; left: auto; right: auto;
    height: 100vh; height: 100svh; margin: 0 0 -100vh; margin-bottom: -100svh;
    width: auto; display: grid; place-items: center; z-index: 0; opacity: 1;
    transform: none; overflow: hidden;
  }
  .agenda-map .yuc-map {
    /* baja un punto respecto al hueco para quedar centrado de verdad */
    width: min(80vw, 344px); position: relative; top: 4dvh;
    transform: translateY(var(--mapa-y, 0px)) scale(var(--zoom, 1));
    transform-origin: 50% 50%;
  }
  .sec-agenda .sec-over { transform: none; opacity: 1; }
  .sec-agenda--lado .wrap { z-index: 1; }
  .sec-agenda .agenda-cuerpo { padding: 0; display: block; opacity: 1; transform: none; }
  .sec-agenda .ag-cabeza { margin: 0; }
  .sec-agenda .ag-cabeza h2 { font-size: clamp(1.45rem, 7vw, 1.95rem); }
  .sec-agenda .ag-cabeza p { margin: 10px 0 0; max-width: 32ch; font-size: .86rem; }
  /* sin recuadro: el aviso y los botones van al aire */
  .sec-agenda .ag-panel {
    margin: 0 0 3dvh; padding: 0; background: none; border: 0; box-shadow: none;
    backdrop-filter: none;
  }
  .sec-agenda .ag-panel h3 { margin: 0; font-size: 1rem; }
  .sec-agenda .ag-panel > p { margin: 8px 0 0; font-size: .86rem; }
  .sec-agenda .ag-panel .hero-cta { flex-direction: column; gap: 10px; }
  .sec-agenda .ag-panel .hero-cta .btn { width: 100%; justify-content: center; }
  .sec-agenda--lado .stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; margin: 0 !important; }
  .sec-agenda--lado .stat { padding: 14px 6px; }
  .sec-agenda--lado .stat .num { font-size: 1.3rem; }
  .sec-agenda--lado .stat .lbl { font-size: .62rem; }

  .pieza { width: clamp(52px, 12%, 84px); }

  /* Teléfonos bajos: la vista de las tarjetas es la más cargada y ahí sí
     hace falta apretar, o se sale del cuadro. */
  @media (max-height: 700px) {
    .plano-evento .card { padding: 10px 13px; }
    .plano-evento .card h3 { font-size: .92rem; margin-bottom: 2px; }
    .plano-evento .card p { font-size: .78rem; line-height: 1.34; }
    .plano-evento .stat { padding: 8px 8px; }
    .plano-evento .stat .num { font-size: 1.15rem; }
    .plano-evento .tracks-grid { gap: 7px; margin-bottom: 7px !important; }
    .plano-evento .stats { gap: 7px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .escena { height: auto; margin-bottom: 0; }
  .escena-fija { position: relative; height: auto; display: block; overflow: visible; background: none; }
  .plano { grid-area: auto; height: auto; display: block; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
  .escena .hero-map, .plano-evento > .wrap, .plano-historia > .wrap { transform: none !important; }
}

/* ---------- Firma de autoría ---------- */

/* En pantallas chicas el CTA del header estorba: vive en el menú lateral */


/* ---------- FAQs: la esquina se levanta y asoma la greca ----------
   Cada pregunta es una hoja: al pasar el cursor se despega la esquina
   superior derecha y debajo aparece la greca oficial. */
.faq details {
  position: relative; overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.9,.25,1), box-shadow .28s ease;
}
.faq details::before {                      /* la greca que vive debajo */
  content: ""; position: absolute; top: 0; right: 0;
  width: 132px; height: 132px; pointer-events: none;
  background: var(--acento);
  -webkit-mask: url("../img/greca-oficial-shape.svg") right top / 300px auto no-repeat;
  mask: url("../img/greca-oficial-shape.svg") right top / 300px auto no-repeat;
  opacity: 0; transition: opacity .3s ease;
}
.faq details::after {                       /* la esquina de papel que se despega */
  content: ""; position: absolute; top: -2px; right: -2px;
  width: 0; height: 0; pointer-events: none;
  border-style: solid; border-width: 0 0 0 0;
  border-color: transparent transparent transparent transparent;
  transition: border-width .32s cubic-bezier(.2,.9,.25,1), filter .32s ease;
}
.faq details:hover, .faq details:focus-within { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.35); }
.faq details:hover::before, .faq details:focus-within::before { opacity: .8; }
.faq details:hover::after, .faq details:focus-within::after {
  border-width: 0 74px 74px 0;
  border-color: transparent var(--fondo-hoja, #ffffff) transparent transparent;
  filter: drop-shadow(-4px 5px 7px rgba(0,0,0,.22));
}
.sec-gris .faq details::after { --fondo-hoja: #4e4e4e; }
@media (prefers-reduced-motion: reduce) {
  .faq details, .faq details::before, .faq details::after { transition: none; }
}


/* ---------- Cabecera flanqueada por greca de volumen ----------
   Dos recuadros, uno a cada lado del titular, con la greca de volumen
   corriendo en bucle hacia el centro. */
.cabeza-flanqueada {
  display: grid; grid-template-columns: 1.5fr auto 1.5fr;
  align-items: center; gap: clamp(14px, 2vw, 28px);
  margin: 0 auto 44px; max-width: min(96vw, 1560px);
}
.cabeza-flanqueada .section-head { max-width: 520px !important; min-width: 0; }
.cabeza-flanqueada .section-head { margin-bottom: 0; }
.flanco {
  display: block; height: 58px; border-radius: 8px; overflow: hidden;
  background: url("../img/greca-volumen-marca.svg") repeat-x left center / auto 100%;
  opacity: .92;
}
/* asimetría: distinto tramo, distinta velocidad y sentido en cada lado */
.flanco-izq { animation: flancoCorre 5.6s linear infinite; }
.flanco-der { animation: flancoCorre2 7.8s linear infinite reverse; animation-delay: -2.4s; }
@keyframes flancoCorre  { from { background-position-x: 0; }     to { background-position-x: -586px; } }
@keyframes flancoCorre2 { from { background-position-x: -140px; } to { background-position-x: -866px; } }
@media (max-width: 820px) {
  .cabeza-flanqueada { grid-template-columns: 1fr; }
  .flanco { height: 26px; }
  .flanco-der { display: block; }
}
@media (prefers-reduced-motion: reduce) { .flanco { animation: none; } }


/* la greca del cierre avanza en bucle detrás de los logos */
@keyframes grecaCierre {
  from { -webkit-mask-position: center top; mask-position: center top; }
  to   { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); }
}

/* ---------- Móvil: repaso de las piezas nuevas ---------- */
@media (max-width: 720px) {
  /* la esquina de las FAQs no depende del cursor: se abre con la pregunta */
  .faq details[open]::before { opacity: .8; }
  .faq details[open]::after {
    border-width: 0 56px 56px 0;
    border-color: transparent var(--fondo-hoja, #ffffff) transparent transparent;
    filter: drop-shadow(-3px 4px 6px rgba(0,0,0,.2));
  }
  .faq details:hover { transform: none; box-shadow: none; }
  .cabeza-flanqueada { gap: 14px; margin-bottom: 30px; }
  .flanco { height: 22px; border-radius: 6px; }
}


/* la greca del cierre avanza en bucle detrás de los logos */
@keyframes grecaCierre {
  from { -webkit-mask-position: center top; mask-position: center top; }
  to   { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); }
}

/* ---------- Móvil: repaso de las piezas nuevas ---------- */
@media (max-width: 720px) {
  /* la esquina de las FAQs no depende del cursor: se abre con la pregunta */
  .faq details[open]::before { opacity: .8; }
  .faq details[open]::after {
    border-width: 0 56px 56px 0;
    border-color: transparent var(--fondo-hoja, #ffffff) transparent transparent;
    filter: drop-shadow(-3px 4px 6px rgba(0,0,0,.2));
  }
  .faq details:hover { transform: none; box-shadow: none; }
  .cabeza-flanqueada { gap: 14px; margin-bottom: 30px; }
  .flanco { height: 22px; border-radius: 6px; }
}


/* ============================================================
   SÚMATE · visor 3D + las seis formas como botones grandes
   ============================================================ */
/* --- Visor con profundidad: se mira hacia adentro ---
   La caja tiene paredes y las piezas flotan a distintas distancias, así que
   al mover la mirada se desplazan unas respecto de otras. */
.vr {
  position: relative; margin: 0 auto 46px;
  width: min(100%, 980px); height: clamp(260px, 34vw, 430px);
  perspective: 780px; perspective-origin: 50% 50%;
  border-radius: 20px; overflow: hidden;
  background: #232323; cursor: crosshair;
  box-shadow: inset 0 0 90px rgba(0,0,0,.75);
}
@media (max-width: 720px) {
  .vr { height: 260px; perspective: 560px; }
}

/* ============================================================
   SÚMATE · la caja que cambia de forma
   No es un cubo rígido: es una caja que gira y, al girar, adopta la
   proporción y el tamaño de lo que va a mostrar. Puede pasar de un retrato
   a un apaisado, y crecer o encogerse según lo que traiga dentro.
   El movimiento es discreto: descansa en una cara con un vaivén muy leve en
   los dos ejes y, cada tanto, da un cuarto de vuelta decidido. No gira sin
   parar.
   Todas las medidas y ángulos los escribe el guion en variables; aquí solo
   se declara cómo se usan.
   ============================================================ */
/* La caja cambia de alto en cada vuelta. Si el contenedor la siguiera, todo
   lo de abajo daría un salto en cada giro: se le reserva la banda del estado
   más alto y la caja se centra dentro. */
.cubo-zona {
  --u: clamp(190px, 23vw, 268px);
  margin: 0 auto;
  min-height: calc(1.42 * var(--u));
  display: flex; flex-direction: column; justify-content: center;
}
.cubo-escena {
  width: calc(var(--ancho, 1.4) * var(--u));
  height: calc(var(--alto, 1) * var(--u));
  margin: 0 auto;
  perspective: 1500px;
  cursor: grab;
  /* el arrastre horizontal gira la caja; el vertical sigue siendo scroll */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  transition: width .5s cubic-bezier(.3,.7,.2,1), height .5s cubic-bezier(.3,.7,.2,1);
}
.cubo-escena.agarrando { cursor: grabbing; transition: none; }
.cubo {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--incl, 0deg)) rotateY(var(--giro, 0deg));
}
.cara {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 20px;
  background: var(--gris-bg-2);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.95);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(16px, 2.6vw, 28px);
  backface-visibility: hidden;
}
/* Las cuatro caras del anillo. El desplazamiento en Z lo escribe el guion:
   como la caja cambia de ancho, el radio también tiene que cambiar o las
   caras se despegarían de los cantos. */
.cara[data-cara="0"] { transform: rotateY(0deg)   translateZ(var(--z, 140px)); }
.cara[data-cara="1"] { transform: rotateY(90deg)  translateZ(var(--z, 140px)); }
.cara[data-cara="2"] { transform: rotateY(180deg) translateZ(var(--z, 140px)); }
.cara[data-cara="3"] { transform: rotateY(270deg) translateZ(var(--z, 140px)); }

/* --- cara de foto --- */
.cara.es-foto { padding: 0; }
.cara.es-foto img, .cara.es-foto video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cara-etiqueta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px clamp(16px, 2.6vw, 28px);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #e6e6e6;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
}

.cubo-pista {
  text-align: center; margin: 20px 0 0;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
  transition: opacity .3s ease;
}
.cubo-zona.tocado .cubo-pista { opacity: 0; }

/* ============================================================
   SÚMATE · lado a lado
   A la izquierda el argumento (titular, texto y el cubo de fotos como
   prueba); a la derecha las puertas de entrada. En pantalla estrecha se
   apilan y las barras quedan arriba del todo lo que no sea decorativo.
   ============================================================ */
.sumate-lado-a-lado {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.sumate-discurso .section-head { max-width: 460px; margin: 0 0 clamp(24px, 3vw, 36px); text-align: left; }
.sumate-discurso .cubo-zona { margin-left: 0; }


/* ---------- la barra que se desliza ----------
   Tres capas: el fondo apagado, el brillo que entra por la izquierda y el
   contenido encima. El brillo se mueve con --avance (0 a 1): el hover lo
   pone en 1 con transición, y el arrastre lo escribe cuadro a cuadro.  */
.barras { display: flex; flex-direction: column; gap: 10px; }

.barra {
  --tono: var(--lima);
  --greca-img: url("../img/greca-3d-sombra-limon.svg");
  --avance: 0;
  position: relative; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 18px);
  padding: clamp(15px, 1.9vw, 21px) clamp(16px, 2vw, 24px);
  border: 1px solid var(--line-strong); border-radius: 16px;
  background: rgba(255,255,255,.035);
  overflow: hidden; isolation: isolate;
  cursor: grab; text-decoration: none;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .28s ease, transform .28s cubic-bezier(.2,.9,.25,1);
}
/* El verde manda en las seis barras. La sombra es limón, como la greca de
   referencia; solo la de sede cambia a rosa. */
.barra.es-patrocinio { --tono: var(--limon);   --greca-img: url("../img/greca-3d-sombra-limon.svg"); }
.barra.es-sede       { --tono: var(--destino); --greca-img: url("../img/greca-3d-sombra-rosa.svg"); }
.barra.arrastrando { cursor: grabbing; transform: none; }

/* al pasar el cursor la greca entra entera */
.barra:hover { --avance: 1; }
.barra:focus-visible { --avance: 1; outline: 2px solid var(--tono); outline-offset: 3px; }

/* ---------- la greca que entra por detrás ----------
   El archivo entero, una sola vez, sin repetir: repetido se cortaba a media
   pieza y arrancaba otro, que es lo que rompía el dibujo. `contain` lo mete
   completo y pegado al canto derecho. Cada acento tiene su copia del SVG
   porque un fondo CSS no hereda las variables de la página. */
.barra-brillo {
  position: absolute; inset: 0; z-index: -1;
  background: var(--greca-img) right center / contain no-repeat;
  transform: translate3d(calc((var(--avance) - 1) * 100%), 0, 0);
  transition: transform .42s cubic-bezier(.22,.9,.25,1);
}

.barra-ic {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
  background: color-mix(in srgb, var(--tono) 20%, transparent);
  color: var(--tono);
  transition: background .28s ease, color .28s ease;
}
.barra-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.barra-titulo {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(.92rem, 1.5vw, 1.06rem); line-height: 1.2;
  text-transform: uppercase; color: var(--text);
  transition: color .28s ease;
}
.barra-detalle {
  font-size: clamp(.78rem, 1.2vw, .86rem); line-height: 1.4;
  color: var(--text-soft);
  transition: color .28s ease;
}
.barra-tirador {
  margin-left: auto; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--text-soft);
  transition: transform .34s cubic-bezier(.2,.9,.25,1), color .28s ease, border-color .28s ease, background .28s ease;
}
.barra-tirador svg { width: 17px; height: 17px; }

/* con el brillo dentro, todo lo de encima se vuelve tinta oscura */
.barra:hover { transform: translateX(3px); }
/* con el relleno dentro, el icono y el tirador toman el tono de la greca */
.barra:hover .barra-ic, .barra:focus-visible .barra-ic,
.barra.arrastrando .barra-ic, .barra.completa .barra-ic {
  background: rgba(255,255,255,.14); color: var(--tono);
}
.barra:hover .barra-tirador, .barra:focus-visible .barra-tirador,
.barra.arrastrando .barra-tirador, .barra.completa .barra-tirador {
  color: #ffffff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1);
  transform: translateX(5px);
}
.barra:hover .barra-detalle, .barra:focus-visible .barra-detalle,
.barra.arrastrando .barra-detalle, .barra.completa .barra-detalle { color: rgba(255,255,255,.9); }

/* deslizada del todo: se queda encendida y late una vez */
.barra.completa { --avance: 1; cursor: default; }
.barra.completa .barra-brillo { transition: transform .3s ease; }
.barra.completa .barra-tirador { transform: translateX(11px) scale(1.06); }

.cubo-nota { color: var(--text-dim); font-size: .8rem; margin: 18px 0 0; }

@media (hover: none) {
  /* sin cursor no hay hover que valga: la barra se muestra ya insinuada */
  .barra { --avance: .04; }
  .barra:hover { --avance: .04; transform: none; }
  .barra:hover .barra-titulo { color: var(--text); }
  .barra:hover .barra-detalle { color: var(--text-soft); }
  .barra:hover .barra-ic { background: color-mix(in srgb, var(--tono) 20%, transparent); color: var(--tono); }
  .barra:hover .barra-tirador { color: var(--text-soft); border-color: var(--line-strong); background: none; transform: none; }
  .barra.arrastrando .barra-titulo { color: #0d0d0d; }
  .barra.arrastrando .barra-detalle { color: rgba(0,0,0,.68); }
}

@media (max-width: 980px) {
  .sumate-lado-a-lado { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  .sumate-discurso .section-head { max-width: none; margin-inline: auto; text-align: center; }
  .sumate-discurso .cubo-zona { margin-inline: auto; }
}
@media (max-width: 900px) {
  .cubo-zona { --u: min(46vw, 200px); }
  .cara { border-radius: 16px; }
  .barra { border-radius: 14px; gap: 12px; }
  .barra-ic { width: 34px; height: 34px; border-radius: 10px; }
  .barra-tirador { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .barra, .barra-brillo, .barra-ic, .barra-titulo, .barra-detalle, .barra-tirador { transition: none; }
  .barra:hover, .barra:hover .barra-tirador { transform: none; }
}

/* ---------- el confeti ----------
   Un lienzo por encima de todo que no atrapa el ratón. */
.confeti-lienzo {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
}

/* ---------- FAQs: la tarjeta se ensancha y asoma la greca ----------
   Al pasar el cursor la pregunta crece como una tarjetita y su contenido
   se recorre, dejando ver por debajo una franja de greca oficial que ocupa
   una cuarta parte de la tarjeta. */
.faq details {
  --greca-w: 25%;
  position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.9,.25,1), box-shadow .3s ease, margin .3s ease;
}
/* La franja que asoma al abrir la pregunta ya no es la greca plana: es la
   greca 3D, que trae su propio volumen. Va como imagen y no como máscara
   porque necesita sus dos colores —la cara y la sombra— y una máscara solo
   puede teñirse de uno. */
.faq details::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: var(--greca-w); pointer-events: none;
  background: url("../img/greca-3d.svg") left center / auto 105% repeat-x;
  -webkit-mask: none; mask: none;
  opacity: 0; transform: translateX(18%);
  transition: opacity .3s ease, transform .34s cubic-bezier(.2,.9,.25,1);
}
.faq details > summary, .faq details > .a {
  position: relative; z-index: 1;
  transition: padding-right .32s cubic-bezier(.2,.9,.25,1);
}
.faq details:hover, .faq details:focus-within {
  margin-left: -1.6%; margin-right: -1.6%;
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -22px rgba(0,0,0,.4);
}
.faq details:hover::before, .faq details:focus-within::before { opacity: .85; transform: none; }
.faq details:hover > summary, .faq details:focus-within > summary,
.faq details:hover > .a, .faq details:focus-within > .a {
  padding-right: calc(var(--greca-w) + 22px);
}
.faq details::after { content: none; }
@media (max-width: 720px) {
  .faq details { --greca-w: 30%; }
  .faq details[open]::before { opacity: .85; transform: none; }
  .faq details[open] > summary, .faq details[open] > .a { padding-right: calc(var(--greca-w) + 14px); }
  .faq details:hover { margin: 0; transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq details, .faq details::before, .faq details > summary, .faq details > .a { transition: none; }
}

/* las cifras de la agenda respiran dentro del bloque de cristal */
.sec-agenda--lado .stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
/* entre 900 y 1024 el mapa todavía no es capa de fondo: baja al pie del texto */
@media (min-width: 901px) and (max-width: 1024px) {
  .agenda-map { position: relative; top: auto; right: auto; width: min(88vw, 520px); margin: 30px auto 0; transform: none; }
  .agenda-map .yuc-map, .sec-agenda .sec-over { transform: none; opacity: 1; }
}

@media (max-width: 560px) {
  .sec-agenda--lado .stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .sec-agenda--lado .stat { padding: 18px 12px; }
  .sec-agenda--lado .stat .lbl { font-size: .72rem; letter-spacing: .06em; word-break: keep-all; }
}
@keyframes cuboGrecas {
  from { transform: translate(-50%, -50%) translateZ(var(--cz, -150px)) rotateX(-18deg) rotateY(0deg); }
  to   { transform: translate(-50%, -50%) translateZ(var(--cz, -150px)) rotateX(-18deg) rotateY(360deg); }
}


/* La agenda respira sin recuadro: el texto va directo sobre el fondo */
.agenda-cuerpo {
  max-width: 640px; margin: 0; text-align: left;
  padding: 0; background: none; border: none; backdrop-filter: none; box-shadow: none;
}
.agenda-cuerpo .section-head { margin-bottom: 22px; }
.ag-panel { margin-top: 24px; }
.ag-panel h3 { margin: 0; }
.ag-panel > p { margin: 6px 0 0; }
.agenda-cuerpo .stats { margin-top: 26px; }
.agenda-cuerpo .stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.agenda-cuerpo .hero-cta, .agenda-cuerpo .btn { justify-content: flex-start; }
@media (max-width: 1024px) { .agenda-cuerpo { margin: 0 auto; text-align: center; } }

/* ---------- solo para lectores de pantalla y buscadores ----------
   Texto que tiene que existir en el documento pero no en la pantalla: el
   titular real del home, por ejemplo, donde el logotipo es una pieza
   animada que duplica sus letras. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}