/* ==========================================================================
   0) TIPOGRAFÍA OFICIAL INTL  —  self-hosted, subset latino, woff2
   Fuente: "2 TIPOGRAFIAS INSTALAR ANTES" del Manual de marca (oct 2024).
   INTL Headline: SOLO mayúsculas, ligeramente extendida, para titulares.
     El manual es explícito: "Nunca debe ser usada para textos largos o copy".
     Cuatro pesos y NINGUNO por encima de Bold 700.
   INTL Text: para copy, formularios e interfaz.
   Self-hosted a propósito: mata el render-blocking de fonts.googleapis.com
   y evita mandar la IP de cada asistente a un tercero.
   ========================================================================== */
@font-face{font-family:"INTL Headline";src:url("../fonts/INTLHeadline-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"INTL Headline";src:url("../fonts/INTLHeadline-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"INTL Headline";src:url("../fonts/INTLHeadline-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"INTL Headline";src:url("../fonts/INTLHeadline-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"INTL Text";src:url("../fonts/INTLText-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"INTL Text";src:url("../fonts/INTLText-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"INTL Text";src:url("../fonts/INTLText-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"INTL Text";src:url("../fonts/INTLText-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ==========================================================================
   INTERNATIONAL · COMMERCIAL SUMMIT 2026 — REGISTRO
   assets/css/summit.css   ·   estático puro, sin build

   1) TOKENS      2) RESET/BASE   3) TIPOGRAFÍA   4) LAYOUT
   5) SUPERFICIES 6) SPLIT/MOTION 7) COMPONENTES  8) SECCIONES
   9) BREAKPOINTS 10) REDUCED MOTION  11) IMPRESIÓN

   Contrato duro: el contenido es VISIBLE por defecto. Sólo la clase .js-anim
   (que pone el script bloqueante del <head>) habilita estados iniciales de
   animación, y cualquier fallo los revierte. Nada se esconde de forma
   irreversible.
   ========================================================================== */

/* ==========================================================================
   1) TOKENS
   ========================================================================== */
:root {
  /* ---- Color primitivo (marca) ---- */
  --ink:        #272623;   /* Asphalt Black — negro de marca */
  --graphite:   #41413E;   /* Gray 700 */
  --steel:      #82817D;   /* Gray 500 */
  --steel-2:    #BAB9B5;   /* Gray 300 */
  --mist:       #DAD9D8;   /* Gray 100 */
  --paper:      #F2F1F0;   /* blanco roto, sobre Gray 100 */
  --white:      #FFFFFF;
  --orange:     #FF7144;   /* International Orange */
  --orange-hot: #FF8B63;   /* naranja aclarado, solo hover */
  --orange-deep:#B23F1C;   /* naranja oscurecido para TEXTO (AA) */   /* naranja como TEXTO sobre claro (AA) */

  --ink-a12:   rgba(10,10,10,.12);
  --ink-a24:   rgba(10,10,10,.24);
  --white-a16: rgba(255,255,255,.16);
  --white-a32: rgba(255,255,255,.32);
  --orange-a16: rgba(242,101,34,.16);
  --orange-a32: rgba(242,101,34,.32);
  --orange-a48: rgba(242,101,34,.48);

  /* ---- Semántico (default = superficie clara) ---- */
  --bg:           var(--white);
  --bg-elev:      var(--paper);
  --bg-sunken:    var(--mist);
  --fg:           var(--ink);
  --fg-muted:     #41413E;   /* Gray 700 del manual */
  --fg-subtle:    var(--steel);
  --accent:       var(--orange);
  --accent-hover: var(--orange-hot);
  --accent-fg:    var(--white);
  --accent-text:  var(--orange-deep);
  --line:         var(--ink-a12);
  --line-strong:  var(--ink-a24);
  --focus:        var(--orange-hot);
  --shadow-color: 10,10,10;

  /* ---- Colores secundarios (Manual p.49) ----
     "Tienen un rol funcional en la visualización de datos... Note que los
     colores secundarios no deben ser usados como simple decoración."
     Se declaran para el panel de control; el sitio público no los usa. */
  --field-green:     #E4F5AC;
  --forest-green:    #204A32;
  --canola-yellow:   #FFDC4D;
  --bus-yellow:      #F6AE30;
  --clay-brown:      #C49471;
  --harvester-brown: #84211F;
  --desert-red:      #E9453A;

  /* Gris del titular "fantasma" del mockup. #C9C9C9 es el único valor que
     sobrevive al final del degradado del hero (#E9E9E9); --mist desaparece.
     Es tipografía decorativa: el nombre accesible vive en el <h1 class="sr-only">. */
  --ghost: #82817D;   /* Gray 500 del manual */

  /* Rombo interior del logo: se recorta contra la superficie (ver §7.1) */

  /* ---- Espaciado ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;

  --sp-section: clamp(4.5rem, 10vw, 11rem);
  --sp-block:   clamp(2rem, 5vw, 4.5rem);
  --sp-stack:   clamp(1rem, 2.2vw, 1.75rem);
  --gutter:     clamp(1.25rem, 5vw, 4rem);
  --grid-gap:   clamp(1rem, 2.6vw, 2.5rem);

  /* ---- Radios (editorial industrial: casi nada de radio) ---- */
  --r-xs:2px; --r-sm:3px; --r-pill:999px;
  --r-btn:  var(--r-pill);
  --r-media: var(--r-xs);

  /* ---- Sombras ---- */
  --sh-3: 0 4px 8px rgba(var(--shadow-color),.08), 0 18px 44px rgba(var(--shadow-color),.12);
  --glow-orange:   0 10px 30px -10px var(--orange-a48);
  --glow-orange-h: 0 0 0 5px var(--orange-a16), 0 16px 38px -10px var(--orange-a48);

  /* ---- Easings / duraciones ---- */
  --e-out:      cubic-bezier(.22,1,.36,1);
  --e-in-out:   cubic-bezier(.65,.05,.36,1);
  --e-power:    cubic-bezier(.16,1,.3,1);
  --d-fast:160ms; --d-base:240ms; --d-slow:420ms;

  /* ---- z-index ---- */
  --z-below:-1; --z-media:1; --z-content:2; --z-sticky:50;
  --z-preloader:9999; --z-skip:10000;

  /* ---- Layout ---- */
  --container: 1360px;
  --measure: 60ch;
  --grid-cols: 12;
  --border-w: 1px;
  --rule-w: 2px;

  /* ---- Tipografía ---- */
  --ff-display: "INTL Headline", "Helvetica Neue", Arial, sans-serif;
  --ff-text:    "INTL Text", "Helvetica Neue", Arial, sans-serif;
  --ff-num:     "INTL Headline", "Helvetica Neue", Arial, sans-serif;

  /* INTL Headline llega hasta Bold. NO existe 800/900: pedirlo obliga al
     navegador a sintetizar una negrita falsa y deforma la marca. */
  --fw-regular:400; --fw-medium:500; --fw-semi:500; --fw-bold:700; --fw-black:700;

  /* Fuentes estáticas, sin eje de ancho: se neutraliza el token. */
  --wdth-cond:100; --wdth-xcond:100;

  /* INTL Headline ya viene "un ancho de letra un poco extendida": el tracking
     negativo que usaría una grotesca condensada aquí la estrangula. */
  --tracking-display:.005em;
  --tracking-tight:0em;
  --tracking-wide:.06em;
  --tracking-overline:.18em;

  --lh-display:.84; --lh-tight:.95; --lh-heading:1.06;
  --lh-snug:1.3; --lh-body:1.6; --lh-loose:1.75;

  /* ---- Escala fluida (360 → 1920) ---- */
  --fs-display-xl: clamp(4.5rem, 20.5vw, 16rem);
  --fs-display-l:  clamp(2.6rem, 12.8vw, 10rem);
  --fs-display-m:  clamp(1.6rem, 7.2vw, 5rem);
  --fs-display-s:  clamp(1.15rem, 4.4vw, 3rem);
  --fs-h1:         clamp(2rem, 5.4vw, 4.5rem);
  --fs-h2:         clamp(1.6rem, 3.9vw, 3.25rem);
  --fs-h3:         clamp(1.25rem, 2.3vw, 2rem);
  --fs-h4:         clamp(1.05rem, 1.5vw, 1.375rem);
  --fs-body-lg:    clamp(1.0625rem, 1.35vw, 1.3125rem);
  --fs-body:       clamp(1rem, .9vw, 1.125rem);
  --fs-body-sm:    clamp(.9375rem, .7vw, 1rem);
  --fs-caption:    clamp(.8125rem, .6vw, .875rem);
  --fs-overline:   clamp(.6875rem, .55vw, .8125rem);
  --fs-countdown:  clamp(2.4rem, 10.5vw, 7.5rem);
  --fs-daynum:     clamp(3.5rem, 9vw, 7rem);
  --fs-marquee:    clamp(1.05rem, 3.2vw, 2rem);
}

/* Sin ejes variables: no forzamos anchos que el navegador no puede aplicar */
@supports not (font-variation-settings: "wdth" 85) {
  :root { --wdth-cond:100; --wdth-xcond:100; }
}

/* ==========================================================================
   2) RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-8);
  background: var(--ink);   /* evita flash blanco entre bloques oscuros */
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  font-variation-settings: "wght" 400, "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` y no `hidden`: con `hidden` el otro eje pasa a `auto` por
     especificación y el <body> se vuelve su propio contenedor de scroll. Eso
     rompía el formulario —al abrir el calendario nativo de una fecha, Chrome
     reposicionaba el campo dentro del contenedor y la página daba un salto— y
     dejaba window.scrollY siempre en 0. `clip` recorta igual sin crear
     contenedor de scroll. */
  overflow-x: clip;         /* seguro anti scroll horizontal */
  overscroll-behavior-y: none;
}
body.is-locked { overflow: hidden; }

body, main, section, footer { max-width: 100%; }

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
img,picture,video,canvas,svg,iframe { display: block; max-width: 100%; }
img,video { height: auto; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
strong,b { font-weight: var(--fw-bold); font-variation-settings: "wght" 700; }
hr { border: 0; }

::selection { background: var(--orange); color: #fff; }

/* Foco visible único, legible sobre claro y sobre oscuro */
:where(a,button,[role="button"],input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed;
  top: var(--sp-3); left: var(--sp-3);
  z-index: var(--z-skip);
  transform: translateY(-250%);
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink); color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: transform var(--d-fast) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   3) TIPOGRAFÍA
   ========================================================================== */
h1,h2,h3,h4,
.h1,.h2,.h3,.h4,
.display-xl,.display-l,.display-m,.display-s {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-variation-settings: "wght" 700, "wdth" var(--wdth-cond);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  hyphens: none;
}

.display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: .005em;
  font-variation-settings: "wght" 700, "wdth" var(--wdth-xcond);
}
.display-l {
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: .005em;
}
.display-m {
  font-size: var(--fs-display-m);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}
.display-s {
  font-size: var(--fs-display-s);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  font-variation-settings: "wght" 500, "wdth" var(--wdth-cond);
  letter-spacing: .16em;
}

.h1,h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.h2,h2 { font-size: var(--fs-h2); }
.h3,h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); }
.h4,h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  font-variation-settings: "wght" 700, "wdth" var(--wdth-cond);
  line-height: var(--lh-snug);
}

.display--ghost { color: var(--ghost); }
.display--solid { color: var(--fg); }

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}
.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--fg-subtle);
}

.overline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-text);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semi);
  font-variation-settings: "wght" 600, "wdth" 100;
  letter-spacing: var(--tracking-overline);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-subtle);
  align-self: flex-start;
}
.overline::before {
  content: "";
  width: clamp(24px, 5vw, 56px);
  height: var(--rule-w);
  background: var(--accent);
  flex: none;
}

.num, .tabular {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ==========================================================================
   4) LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--sp-section);
  background: var(--bg);
  color: var(--fg);
  isolation: isolate;
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-stack);
  margin-block-end: var(--sp-block);
  max-width: 46ch;
}
.section__head-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-stack);
  min-width: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 767.98px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * { grid-column: auto !important; }
}
@media (min-width: 768px) {
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-12 { grid-column: span 12; }
}
/* Tablet (768–1023): los 4 pilares van 2×2, no a 4 columnas de ~170px */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pilares__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilares__grid > .col-3 { grid-column: auto; }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}

.hr { height: var(--border-w); background: var(--line); width: 100%; }

/* Cualquier bloque más ancho que la pantalla scrollea dentro de sí mismo */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   5) SUPERFICIES — alternancia editorial claro / oscuro
   Ritmo: hero(gradient) → marquee(dark) → countdown(dark) → invitación(light)
          → pilares(cinema) → sede(light) → agenda(dark) → compartir(paper)
          → pie(dark)
   ========================================================================== */
[data-surface="light"] {
  --bg: var(--white); --bg-elev: var(--paper);
  --bg-sunken: var(--mist);
  --fg: var(--ink); --fg-muted: #4E4E4E; --fg-subtle: var(--steel);
  --accent-text: var(--orange-deep); --accent-fg: var(--white);
  --line: var(--ink-a12); --line-strong: var(--ink-a24);
  --ghost: var(--mist);
  --shadow-color: 10,10,10;
  color-scheme: light;
}

[data-surface="paper"] {
  --bg: var(--paper); --bg-elev: var(--white);
  --bg-sunken: var(--mist);
  --fg: var(--ink); --fg-muted: #4E4E4E; --fg-subtle: var(--steel);
  --accent-text: var(--orange-deep); --accent-fg: var(--white);
  --line: var(--ink-a12); --line-strong: var(--ink-a24);
  --ghost: #82817D;   /* Gray 500 del manual */
  --shadow-color: 10,10,10;
  color-scheme: light;
}

[data-surface="gradient"] {
  --bg: var(--white); --bg-elev: var(--white); --bg-sunken: var(--mist);
  --fg: var(--ink); --fg-muted: #4E4E4E; --fg-subtle: var(--steel);
  --accent-text: var(--orange-deep); --accent-fg: var(--white);
  --line: var(--ink-a12); --line-strong: var(--ink-a24);
  --ghost: #82817D;   /* Gray 500 del manual */
  --shadow-color: 10,10,10;
  color-scheme: light;
}

[data-surface="dark"] {
  --bg: var(--ink); --bg-elev: var(--graphite);
  --bg-sunken: #050505;
  --fg: var(--white); --fg-muted: #C7C7C7; --fg-subtle: var(--steel-2);
  --accent-text: var(--orange-hot); --accent-fg: var(--ink);
  --line: var(--white-a16); --line-strong: var(--white-a32);
  --ghost: #3A3A3A;
  --shadow-color: 0,0,0;
  color-scheme: dark;
  background: var(--ink);
}

[data-surface="cinema"] {
  --bg: var(--ink); --bg-elev: rgba(26,26,26,.72);
  --bg-sunken: #000;
  --fg: var(--white); --fg-muted: #C7C7C7; --fg-subtle: var(--steel-2);
  --accent-text: var(--orange-hot); --accent-fg: var(--ink);
  --line: var(--white-a16); --line-strong: var(--white-a32);
  --ghost: #3A3A3A;
  --shadow-color: 0,0,0;
  color-scheme: dark;
  background-color: var(--ink);
  background-image:
    radial-gradient(70% 52% at 80% 14%, var(--orange-a16) 0%, transparent 62%),
    radial-gradient(60% 60% at 6% 94%, rgba(242,101,34,.10) 0%, transparent 60%);
}

/* ==========================================================================
   6) SPLIT / MOTION-BASE
   ========================================================================== */
.split-visual { display: block; }
.split-line   { display: block; }
.wd { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; will-change: transform; }
.mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* aire vertical para que la máscara no corte acentos ni descendentes */
  padding: .12em 0 .16em;
  margin: -.12em 0 -.16em;
}
.mask > .ch, .mask > .wd-in { display: inline-block; will-change: transform; }

/* Estado por defecto: TODO visible */
.reveal { opacity: 1; transform: none; }

/* Sólo con JS y sin reduced-motion ocultamos para poder animar */
.js-anim .reveal { opacity: 0; transform: translate3d(0, 26px, 0); }
.js-anim #preloader { display: grid; }

/* Redes de seguridad: sin JS, sin GSAP o con reduced-motion, todo vuelve */
html:not(.js-anim) .reveal,
.no-gsap .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   7) COMPONENTES
   ========================================================================== */

/* ---------- 7.1 Logo oficial ----------
   Lockup vectorial extraído del archivo de marca (Elementos_Nuevo_Branding).
   Un solo archivo para ambas polaridades: todos los paths heredan
   currentColor, así que basta con cambiar `color` en la superficie.       */
.logo { color: var(--fg); }
.logo path { fill: currentColor; }

/* ---------- 7.2 Botones ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--line-strong);
  --btn-sh: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: .9375rem var(--sp-8);
  border: var(--border-w) solid var(--btn-bd);
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-sh);
  font-family: var(--ff-text);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  font-variation-settings: "wght" 700, "wdth" 100;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  max-width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
}
.btn__label { position: relative; z-index: 3; }
.btn__glow {
  position: absolute; inset: -40%;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(closest-side, var(--orange-a32), transparent 70%);
  pointer-events: none;
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: var(--btn-sweep, var(--accent-hover));
  transform: translate3d(0, 101%, 0);
  transition: transform var(--d-slow) var(--e-power);
}
.btn > .icon--inline { position: relative; z-index: 3; }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-fg);
  --btn-bd: var(--accent);
  --btn-sh: var(--glow-orange);
  --btn-sweep: var(--accent-hover);
}
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--fg);
  --btn-sweep: var(--fg);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg-muted);
  --btn-bd: var(--line-strong);
  padding-inline: var(--sp-5);
}
.btn--ghost::before { display: none; }
.btn--sm { min-height: 42px; padding: .625rem var(--sp-5); font-size: var(--fs-caption); }

.btn:hover { --btn-sh: var(--glow-orange-h); }
.btn--ghost:hover { --btn-fg: var(--fg); --btn-bd: var(--fg); }
.btn:active { transform: translateY(1px); }

.btn[disabled], .btn[aria-disabled="true"] {
  --btn-bg: transparent;
  --btn-fg: var(--fg-subtle);
  --btn-bd: var(--line);
  --btn-sh: none;
  cursor: not-allowed;
  opacity: .72;
}
.btn[disabled]::before, .btn[aria-disabled="true"]::before { display: none; }

@media (hover:hover) and (pointer:fine) {
  .btn--primary:hover::before,
  .btn--secondary:hover::before { transform: translate3d(0,0,0); }
  .btn--secondary:hover { --btn-fg: var(--bg); }
}

/* ---------- 7.3 Chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .4375rem var(--sp-3);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-muted);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semi);
  font-variation-settings: "wght" 600;
  letter-spacing: var(--tracking-overline);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip__dot {
  width: 7px; height: 7px; flex: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  animation: chip-pulse 2.4s var(--e-in-out) infinite;
}
.chip--soon { border-color: var(--orange-a48); color: var(--accent-text); }
@keyframes chip-pulse {
  0%   { box-shadow: 0 0 0 0 var(--orange-a48); }
  70%  { box-shadow: 0 0 0 8px rgba(242,101,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,101,34,0); }
}

/* ---------- 7.x Iconografía oficial ----------
   SVG inline del set del manual (10 ICONOGRAFÍA), servidos desde el propio
   dominio y heredando color con currentColor. Antes había un lottie por CDN
   con SVG de respaldo debajo; con los iconos de marca esa doble capa sobra. */
.icon {
  display: inline-grid;
  place-items: center;
  width: clamp(48px, 5.2vw, 60px);
  height: clamp(48px, 5.2vw, 60px);
  color: var(--fg);
  flex: none;
}
.icon__ofi { width: 62%; height: 62%; fill: currentColor; }
.icon--inline { width: 22px; height: 22px; }
.icon--inline .icon__ofi { width: 100%; height: 100%; }
.btn--primary .icon--inline { color: var(--accent-fg); }

/* ---------- 7.5 Badge de sede ---------- */
.badge-venue {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  color: var(--fg);
  max-width: 100%;
  align-self: flex-start;
}
.badge-venue__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
}
.badge-venue__icon svg { width: 18px; height: 18px; }
.badge-venue__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.2; }
.badge-venue__text strong {
  font-family: var(--ff-display);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" var(--wdth-cond);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-venue__text span {
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 7.6 Scroll cue ---------- */
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: var(--fg-subtle);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}
.scroll-cue__rail {
  position: relative;
  width: 1px;
  height: clamp(26px, 4.4vh, 44px);
  background: var(--line-strong);
  overflow: hidden;
}
.cue-dot {
  position: absolute; left: -1px; right: -1px; top: 0;
  height: 40%;
  background: var(--accent);
  animation: cue-run 1.9s var(--e-in-out) infinite;
}
@keyframes cue-run {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(260%); }
}

/* ---------- 7.7 Preloader ---------- */
#preloader {
  position: fixed; inset: 0;
  z-index: var(--z-preloader);
  display: grid; place-items: center;
  background: var(--white);
  color: var(--ink);
}
.pl-inner { display: grid; justify-items: center; gap: var(--sp-5); padding-inline: var(--gutter); }
/* ---------- Espacio seguro del logotipo (Manual, p.8) ----------
   "El espacio seguro está definido por la altura del símbolo... es la unidad
   mínima de espacio y debe respetarse o incrementarse cuando sea posible."
   El lockup mide 689.91 × 70.92, así que su altura es el ancho × 0.10279.
   Se deriva del mismo ancho para que el aire se mantenga solo cuando el
   clamp cambia de valor.                                                   */
.pl-logo { --logo-w: clamp(220px, 62vw, 380px); width: var(--logo-w); height: auto;
           margin-block: calc(var(--logo-w) * .10279); }
.pl-tag {
  font-size: var(--fs-overline);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--steel);
}
.pl-bar-wrap {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--mist); overflow: hidden;
}
.pl-bar {
  display: block; height: 100%; width: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- 7.8 Marquee (banda cinética de marca) ----------
   CSS puro, sólo transform: compositor-only, cero JS, cero coste de layout.
   Dos copias idénticas del item → el bucle a -50% es invisible.             */
.marquee {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(.7rem, 2vw, 1.15rem);
  --marquee-dur: 28s;
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-run var(--marquee-dur) linear infinite;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-display);
  font-size: var(--fs-marquee);
  font-weight: var(--fw-black);
  font-variation-settings: "wght" 700, "wdth" var(--wdth-xcond);
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__dot {
  display: inline-block;
  width: clamp(7px, 1.4vw, 12px);
  height: clamp(7px, 1.4vw, 12px);
  margin-inline: clamp(.6rem, 2vw, 1.4rem);
  background: var(--orange);
  transform: rotate(45deg);
  flex: none;
}
@keyframes marquee-run {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ==========================================================================
   8) SECCIONES
   ========================================================================== */

/* ---------- 8.1 HERO ----------
   Orden de capas (de abajo a arriba):
     0  .hero__bg      degradado blanco → gris
     1  .hero__truck   foto del tractocamión (SIEMPRE por debajo del texto)
     2  .hero__flare   destellos, en mix-blend screen SOBRE la foto oscura
     2  .hero__inner   logo + tipografía + fecha/sede + cue (va después en el
                       DOM, así que gana al flare con el mismo z-index)      */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  padding-block: clamp(1.5rem, 4vh, 3rem) min(30svh, 300px);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: -10% 0 0;
  z-index: var(--z-below);
  background: radial-gradient(120% 82% at 50% 0%, #FFF 0%, #FAFAFA 44%, #E9E9E9 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 2.4vh, 1.75rem);
  flex: 1 1 auto;
}

.hero__logo { color: var(--ink); --logo-w: clamp(180px, 42vw, 260px); width: var(--logo-w);
             margin-block-end: calc(var(--logo-w) * .10279); }
.hero__logo svg { width: 100%; height: auto; }

.hero__display {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-block-start: clamp(.5rem, 2vh, 1.5rem);
}
/* Única línea sobre el filete desde que se retiró "SAVE THE DATE". Crece un
   punto respecto a la vieja segunda línea para que el bloque no quede
   descabezado, pero sin competirle a COMMERCIAL SUMMIT. */
.hero__bienvenida {
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: .04em;
}
.hero__rule {
  width: clamp(48px, 12vw, 140px);
  height: var(--rule-w);
  background: var(--orange);
  margin-block: clamp(.4rem, 1.3vh, .95rem);
}
.hero__com { color: var(--ghost); }
.hero__sum { color: var(--ink); margin-block-start: -.1em; }
/* SUMMIT (Bold) sobre 2026: el manual aprueba Bold/Regular y evita
   Bold/Light. Medium no está en la lista de aprobados, así que va Regular. */
.hero__year {
  font-weight: var(--fw-regular);
  font-variation-settings: "wght" 400;
  color: var(--steel);
  margin-block-start: clamp(.25rem, 1vh, .6rem);
}

.hero__meta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-start: clamp(.75rem, 2.5vh, 1.75rem);
  max-width: 34ch;
}
.hero__kicker {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semi);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--steel);
}
.hero__dates {
  font-family: var(--ff-display);
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" var(--wdth-cond);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__venue {
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
  letter-spacing: .04em;
}

.hero__cue {
  margin-block-start: auto;
  padding-block-start: clamp(1rem, 3vh, 2rem);
  position: relative;
  z-index: 4;
}

/* La fecha y la sede caen justo donde empieza a aparecer el camión. Un velo
   blanco radial detrás garantiza el contraste del texto oscuro sin importar
   qué haya debajo, y es imperceptible sobre el degradado claro. */
.hero__meta { isolation: isolate; }
.hero__meta::before {
  content: "";
  position: absolute;
  inset: -0.9rem -2.4rem;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255,255,255,.94), rgba(255,255,255,0) 80%);
  pointer-events: none;
}

/* Camión: caja de alto FIJO (cero CLS) + máscara del borde SUPERIOR, para que
   el tractocamión emerja del degradado sin canto duro de foto, como en el
   mockup. El parallax mueve la <img> DENTRO de la caja, nunca la caja.      */
.hero__truck {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: min(46svh, 420px);
  transform: translateX(-50%);
  z-index: var(--z-media);
  pointer-events: none;
  overflow: clip;
  /* El arte oficial trae su propio fondo de planos diagonales grises, así que
     el camión va a SANGRE de borde a borde y sólo se disuelve por arriba
     contra el degradado del hero. Nada de máscara lateral: era justo lo que
     dibujaba una caja borrosa rectangular sobre el blanco. */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 34%, #000 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 34%, #000 100%);
}
.hero__truck img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ancla sobre el encuadre real de truck-master.jpg (980×1080): la cabina
     ocupa la mitad inferior, así que anclamos abajo para que entre completa. */
  object-position: center 78%;
}

/* Destellos: van SOBRE la foto (fondo de estudio oscuro), por eso el screen
   sí produce glow. Sobre el degradado claro se desvanece solo, que es el
   comportamiento físico correcto de un destello.                            */
.hero__flare {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(160vw, 1500px);
  height: min(52svh, 620px);
  transform: translateX(-50%);
  z-index: var(--z-content);
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 66%, rgba(255,214,170,.60), rgba(242,101,34,.30) 44%, rgba(242,101,34,0) 74%),
    radial-gradient(closest-side at 26% 76%, rgba(255,255,255,.50), rgba(255,255,255,0) 68%);
  mix-blend-mode: screen;
}
@supports not (mix-blend-mode: screen) { .hero__flare { opacity: .45; } }

/* ---------- 8.1a HERO EN MÓVIL ----------
   Póster vertical del mockup: tipografía centrada arriba, camión a sangre
   abajo. La escala global de display está pensada para titulares de sección
   de una sola palabra; aquí "COMMERCIAL" son diez caracteres y a 12.8vw se
   sale del viewport. Se acota sólo dentro del hero, para no tocar el resto
   de las secciones, y así el bloque de texto deja libre el tercio inferior
   que ocupa el tractocamión. */
@media (max-width: 1023.98px) {
  /* El tractocamión es el producto: manda él. La banda inferior se lleva ~42svh
     y la tipografía se ajusta a lo que sobra, no al revés.
     El asset móvil es cuadrado (900×900); si la banda queda apaisada, `cover`
     recorta en vertical y decapita la cabina. Manteniéndola cerca de 1:1 el
     tractocamión entra completo. */
  .hero__bienvenida { font-size: clamp(1.15rem, 5.6vw, 2.4rem); }
  .hero__com,
  .hero__sum  { font-size: clamp(1.7rem, 9vw, 4rem); }
  .hero__year { font-size: clamp(.9rem, 3.4vw, 1.5rem); }
  .hero__logo { --logo-w: clamp(150px, 34vw, 210px); }
  .hero__inner { gap: clamp(.4rem, 1.2vh, .9rem); }
  /* El tamaño de la cuenta en móvil se define más abajo, junto al resto de
     .cd--mini: aquí quedaba pisado por la regla sin media query que viene
     después en el archivo (misma especificidad, gana la última). */
  /* Sin esto, "27, 28 Y 29 DE SEPTIEMBRE DE 2026" y la sede se parten en dos
     renglones cada una y suman 4 líneas que empujan al camión fuera. */
  .hero__meta { max-width: 42ch; }

  /* 42svh para la banda: es lo que necesita el asset cuadrado para que el
     tractocamión se vea entero. El texto se acomoda en el resto. */
  .hero { padding-block-end: min(42svh, 400px); }
  .hero__truck { height: min(42svh, 400px); }
  .hero__truck img { object-position: center 58%; }
  .hero__inner .hero__acciones { margin-block-start: clamp(.5rem, 1.6vh, 1rem); }

  /* "DESLIZA" se lleva 92px en un hero que ya no cabe en una pantalla, y en
     táctil no enseña nada: deslizar es el gesto por defecto. Quitarlo devuelve
     esos píxeles al tractocamión, que es el producto. En escritorio se queda:
     ahí sí orienta, porque el ratón no invita a desplazarse igual. */
  .hero__cue { display: none; }
}

/* En pantallas chicas los tres botones ocupan dos filas completas. El .ics es
   el que funciona en iOS y Android por igual: Google y Outlook quedan para
   tablet en adelante, donde sí hay ancho para los tres en una línea. */
@media (max-width: 639.98px) {
  #link-gcal, #link-outlook { display: none; }
}

@media (min-width: 768px) {
  .hero { padding-block-end: min(23svh, 290px); }
  .hero__inner { gap: clamp(1rem, 2vh, 2rem); }
  .hero__meta { max-width: 50ch; }
  /* El camión va a sangre en todo el ancho: el cue se va al margen izquierdo,
     sobre el degradado limpio. Cero problemas de contraste. */
  .hero__cue { align-self: flex-start; }
  /* A partir de tablet el asset se ve completo: anclamos un poco más arriba. */
  .hero__truck img { object-position: center 70%; }
  .hero__truck { height: min(42svh, 380px); }
}
/* ---------- 8.1b HERO EN ESCRITORIO: la composición del MASTER ----------
   A partir de 1024px el hero deja de ser un póster centrado y reproduce el
   arte aprobado: panel blanco con la tipografía alineada a la izquierda, y el
   tractocamión ocupando la mitad derecha a sangre y a toda la altura.

   El asset `truck-master.jpg` es el recorte del MASTER a la derecha de la
   tipografía horneada, así que TRAE SU PROPIO borde diagonal blanco→gris.
   Pegado contra el panel blanco, el corte se continúa solo: por eso aquí se
   anula la máscara (una máscara suave volvería a dibujar la caja borrosa).  */
@media (min-width: 1024px) {
  .hero {
    padding-block: clamp(2rem, 5vh, 4rem) clamp(2rem, 5vh, 4rem);
    justify-content: center;
  }

  /* Fotografía real del banco oficial, a sangre en todo el hero. El recorte
     deja el tractocamión al 72% del ancho y el resto de la bahía —tranquilo,
     sin sujeto— del lado izquierdo, que es donde el velo de .hero__bg lo
     blanquea para que la tipografía siempre caiga sobre claro. */
  .hero__truck {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero__truck img { object-position: center 30%; }

  /* El arte es 16:9 y el hero es más ancho y bajo, así que `cover` recorta en
     vertical y sube la franja del camino: medida en navegador, entra a
     rgb(45,45,45) desde y≈580, justo debajo del bloque de texto. Este velo
     prolonga el panel blanco del propio arte con su mismo ángulo, para que la
     tipografía siempre caiga sobre blanco. Va entre la imagen (z-media) y el
     contenido (z-content). */
  .hero__bg {
    display: block;
    inset: 0;
    /* Mismo z que el contenido, pero .hero__bg va ANTES en el DOM: queda por
       encima de la foto (z-media) y por debajo de la tipografía. */
    z-index: var(--z-content);
    background: linear-gradient(101deg,
      #FFF 0 32%,
      rgba(255,255,255,.94) 42%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,0) 60%);
  }

  /* Destello reposicionado sobre la parrilla, que ahora vive a la derecha. */
  .hero__flare {
    left: auto;
    right: 0;
    bottom: 0;
    width: min(60%, 1100px);
    height: 100%;
    transform: none;
    background:
      radial-gradient(closest-side at 34% 62%, rgba(255,214,170,.55), rgba(242,101,34,.26) 46%, rgba(242,101,34,0) 76%);
  }

  /* Columna de tipografía: mitad izquierda, alineada a la izquierda.
     .hero__inner conserva el ancho del contenedor (para no romper el ritmo
     con el resto de las secciones) y son los hijos los que se limitan a la
     mitad libre, la que no ocupa el camión. */
  .hero__inner {
    align-items: flex-start;
    text-align: left;
    justify-content: center;
  }
  .hero__display,
  .hero__meta,
  .hero__logo { max-width: min(44%, 600px); }
  .hero__display { align-items: flex-start; margin-block-start: 0; }
  .hero__meta { align-items: flex-start; }

  /* La marca abre el bloque. En el arte del cliente cierra abajo a la
     izquierda, pero ahí cae la franja oscura del camino: en negro no tendría
     contraste y en blanco dependería de dónde recorte el `cover`. Arriba
     siempre se apoya sobre la zona blanca del arte. */
  /* OJO: en escritorio la columna se ordena con `order`, así que TODO hijo
     nuevo de .hero__inner necesita el suyo. Sin él cae en `order: 0` y se va
     hasta arriba, junto al logo. */
  .hero__logo      { order: 0; --logo-w: clamp(200px, 17vw, 290px); width: var(--logo-w);
                   margin-block-end: calc(var(--logo-w) * .10279); }
  .hero__display   { order: 1; }
  .cd--mini        { order: 2; }
  #cd-sr           { order: 2; }
  .hero__inner noscript { order: 2; }
  .hero__meta      { order: 3; }
  .hero__acciones  { order: 4; }
  .hero__yaestas   { order: 5; text-align: start; }
  .hero__cue       { order: 6; }

  /* La escala del póster centrado desborda una columna de media pantalla.
     Estos tamaños están ajustados para que el bloque completo —marca,
     titulares, cuenta regresiva, fecha/sede y botonera— cierre dentro de
     100svh en una pantalla de 1440×779, que es la más apretada del rango. */
  /* INTL Headline es una cara extendida: con el mismo cuerpo ocupa ~6% más
     de ancho que la grotesca condensada que había antes. Se recorta para
     conservar el aire contra el camión. */
  .hero__bienvenida { font-size: clamp(1.5rem, 3vw, 3.4rem); }
  .hero__com,
  .hero__sum  { font-size: clamp(2.3rem, 5.2vw, 6.4rem); }
  .hero__year { font-size: clamp(1.05rem, 2.2vw, 2.6rem); }
  .hero__rule { margin-inline-start: 0; }

  /* Con la cuenta y la botonera dentro, el hero gana dos bloques: el aire
     entre elementos se aprieta o se desborda la pantalla. */
  .hero__inner { gap: clamp(.5rem, 1.4vh, 1rem); }
  /* No se recorta por debajo del espacio seguro ni para ganar altura. */
  .hero__logo { margin-block-end: calc(var(--logo-w) * .10279); }
  .hero__inner .cd--mini { margin-block-start: clamp(.4rem, 1.2vh, .85rem); }
  .hero__inner .hero__meta { margin-block-start: clamp(.4rem, 1.2vh, .9rem); }
  /* Con el selector simple no basta: `.cd__acciones` (2.5rem, pensado para la
     sección de countdown) está más abajo en el archivo y ganaba por orden. */
  .hero__inner .hero__acciones { margin-block-start: clamp(.5rem, 1.6vh, 1rem); }
}

/* ---------- 8.2 COUNTDOWN ---------- */
.countdown .section__head { align-items: flex-start; }
.cd {
  border-block-start: var(--border-w) solid var(--line);
  padding-block-start: var(--sp-8);
}
.cd__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  align-items: end;
  width: 100%;
}
.cd__unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-5) 0;
  border-inline-end: var(--border-w) solid var(--line);
  min-width: 0;
}
.cd__unit:last-of-type { border-inline-end: 0; }
.cd__digits {
  display: flex;
  gap: .02em;
  font-family: var(--ff-display);
  font-size: var(--fs-countdown);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" var(--wdth-cond);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: .005em;
  line-height: 1;
  min-height: 1em;          /* la fila ya ocupa su alto antes de que pinte JS */
  color: var(--fg);
}
.cd__d {
  position: relative;
  display: block;
  /* Caja fija para no reflowear una vez por segundo. El .62em venía de cuando
     la display era una variable font CONDENSADA; con los woff2 estáticos de
     INTL —una Headline extendida— el dígito pide ~.75em y el overflow:hidden
     de abajo recortaba cada número por ambos costados. `1ch` es por definición
     el avance del "0" de la fuente realmente cargada y, con tabular-nums,
     todos los dígitos miden igual: se autocorrige si la tipografía cambia. */
  width: calc(1ch + .06em);
  height: 1em;
  overflow: hidden;
  text-align: center;
}
.cd__cur {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform;
}
.cd__lbl {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semi);
  font-variation-settings: "wght" 600;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.cd__estado {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" var(--wdth-cond);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--accent-text);
  padding-block: var(--sp-6);
}
.cd__progress {
  position: relative;
  height: var(--rule-w);
  background: var(--line);
  margin-block-start: var(--sp-6);
  overflow: hidden;
}
.cd__progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
html:not(.js-anim) .cd__progress-fill,
.no-gsap .cd__progress-fill { transform: scaleX(.35); }

.cd__nojs, .cd__pie { margin-block-start: var(--sp-5); }

/* ---------- 8.2b COUNTDOWN COMPACTO (dentro del hero) ----------
   Misma estructura y los mismos hooks que la versión de sección, pero como
   remate de la portada: sin filete superior, sin barra de progreso, en fila,
   y a una escala que no le compita a "SUMMIT". Sólo lo usa save-the-date.html. */
.cd--mini {
  border-block-start: 0;
  padding-block-start: 0;
  margin-block-start: clamp(.85rem, 2.2vh, 1.5rem);
  width: 100%;
}
.cd--mini .cd__grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(.65rem, 2.6vw, 1.75rem);
  width: auto;
}
.cd--mini .cd__unit {
  align-items: center;
  gap: var(--sp-1);
  padding: 0;
  border-inline-end: 0;
}
/* Separadores finos entre unidades, en vez de la retícula de la sección. */
.cd--mini .cd__unit + .cd__unit {
  border-inline-start: var(--border-w) solid var(--line);
  padding-inline-start: clamp(.65rem, 2.6vw, 1.75rem);
}
.cd--mini .cd__digits {
  font-size: clamp(1.35rem, 4.4vw, 2.5rem);
  letter-spacing: 0;
  color: var(--fg);
}
.cd--mini .cd__lbl {
  font-size: clamp(.5rem, 1.5vw, .6875rem);
  letter-spacing: .14em;
  color: var(--fg-subtle);
}
.cd--mini .cd__estado {
  font-size: var(--fs-h3);
  padding-block: var(--sp-3);
}

/* La cuenta del hero en móvil. Va aquí, después del bloque .cd--mini, porque
   dentro de la media query de arriba estas reglas quedarían pisadas por las
   anteriores: una @media no suma especificidad, así que decide el orden. */
@media (max-width: 1023.98px) {
  /* Cada unidad se dimensionaba con su propia etiqueta y las columnas salían
     de 27, 45, 56 y 64 px: los números no alineaban entre sí y los separadores
     caían a distancias distintas. Cuatro columnas iguales lo dejan a plomo. */
  .cd--mini .cd__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
  }
  .cd--mini .cd__unit { width: 100%; min-width: 0; }
  /* La separación ya la da la propia columna; el padding sólo la descentraba. */
  .cd--mini .cd__unit + .cd__unit { padding-inline-start: 0; }
  .cd--mini .cd__digits { font-size: clamp(1.15rem, 4vw, 2rem); }
  /* "SEGUNDOS" es la más larga: sin esto parte en dos y descuadra la fila. */
  .cd--mini .cd__lbl { white-space: nowrap; }
}

/* Botonera del hero: sin la separación de sección que traía del countdown. */
.hero__acciones {
  margin-block-start: clamp(1rem, 2.6vh, 1.75rem);
  justify-content: center;
}

/* Entrada para quien ya se inscribió. Deliberadamente enlace y no botón: el
   hero ya no cabe en una pantalla de móvil y una cuarta fila de botones
   empujaría el tractocamión —que es el producto— fuera de cuadro. */
.hero__yaestas {
  margin-block-start: clamp(.6rem, 1.6vh, 1rem);
  margin-block-end: 0;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}
.hero__yaestas a {
  color: var(--orange-deep);
  font-weight: 700;
  text-underline-offset: .18em;
}

@media (min-width: 1024px) {
  /* En escritorio la columna está alineada a la izquierda: la cuenta y la
     botonera siguen ese eje y se limitan al mismo ancho que el resto. */
  .cd--mini { max-width: min(44%, 600px); }
  .cd--mini .cd__grid { justify-content: flex-start; }
  .hero__acciones { justify-content: flex-start; max-width: min(52%, 680px); }
  /* A tamaño de sección los tres botones saltan a dos filas y el bloque ya no
     cabe en 100svh. Compactos entran en una sola, dentro de la zona blanca. */
  .hero__acciones .btn {
    padding-block: .72rem;
    padding-inline: 1.3rem;
    font-size: var(--fs-caption);
  }
}
.cd__acciones { margin-block-start: var(--sp-10); }
.cd__feedback { margin-block-start: var(--sp-3); min-height: 1.2em; color: var(--accent-text); }

/* ---------- 8.3 INVITACIÓN ---------- */
.invitacion__grid { align-items: center; row-gap: var(--sp-12); }
.invitacion__texto { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.invitacion__h { margin-block-start: var(--sp-2); }
.invitacion__sub {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--accent-text);
}
.invitacion__parrafo {
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.62;
  color: var(--fg);
  max-width: 34ch;
  border-inline-start: var(--rule-w) solid var(--accent);
  padding-inline-start: var(--sp-5);
}
.invitacion__firma {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" var(--wdth-cond);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg);
}
.invitacion__img {
  position: relative;
  overflow: clip;
  border-radius: var(--r-media);
  background: var(--bg-sunken);
  aspect-ratio: 4 / 5;
}
/* El <picture> desaparece del layout: si se queda como caja inline, el
   height:100% del <img> se resuelve contra él y no contra el marco 4/5. */
.invitacion__img picture { display: contents; }
.invitacion__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.invitacion__cap {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink);
  color: var(--white);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- 8.4 PILARES ---------- */
.pilares__rule {
  height: var(--rule-w);
  background: var(--accent);
  transform-origin: left center;
  margin-block-end: var(--sp-10);
}
html:not(.js-anim) .pilares__rule, .no-gsap .pilares__rule { transform: scaleX(1); }

.pilares__grid { row-gap: var(--sp-10); }
.pilar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block-start: var(--sp-5);
  border-block-start: var(--border-w) solid var(--line);
}
.pilar__num {
  font-family: var(--ff-display);
  font-size: var(--fs-caption);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" 100;
  letter-spacing: .14em;
  color: var(--accent-text);
}
.pilar__t { font-size: var(--fs-h3); color: var(--fg); }
.pilar__p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: 34ch;
}
.pilares__nota { margin-block-start: var(--sp-12); }

/* ---------- 8.5 SEDE ---------- */
.sede__grid { row-gap: var(--sp-16); align-items: start; }
.sede__data { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.sede__h { margin-block-start: var(--sp-2); }
.sede__sub {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  letter-spacing: .04em;
}
.sede__datos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-block-start: var(--sp-4);
  width: 100%;
}
.sede__dato {
  display: grid;
  gap: var(--sp-1);
  padding-block-end: var(--sp-4);
  border-block-end: var(--border-w) solid var(--line);
}
.sede__dato dt {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.sede__dato dd {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--fg);
}
.sede__media { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.sede__videoh { color: var(--fg); }
.sede__media .video { width: 100%; }

/* Video facade */
.video__facade {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: clip;
  background: var(--graphite);
  border-radius: var(--r-media);
}
.video__poster { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.video__facade::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.10) 0%, rgba(10,10,10,.58) 100%);
  pointer-events: none;
}
.video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play {
  position: absolute;
  inset: 0; margin: auto;
  width: clamp(64px, 12vw, 88px);
  height: clamp(64px, 12vw, 88px);
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
  display: grid; place-items: center;
  box-shadow: 0 8px 40px rgba(242,101,34,.45);
  z-index: 3;
  transition: background-color var(--d-base) var(--e-out);
}
.video__play svg { width: 34px; height: 34px; }
.video__play:hover { background: var(--orange-hot); }
.video__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* "Próximamente": el botón sigue siendo enfocable y anunciable (ARIA APG),
   pero es inerte. No usamos [disabled] para no sacarlo del recorrido. */
.video__play[aria-disabled="true"] {
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.62);
  cursor: not-allowed;
  box-shadow: none;
}
.is-soon .video__poster { filter: grayscale(.5) brightness(.6); }
.video__soon {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(16px, 4vw, 32px);
  z-index: 3;
  text-align: center;
  color: #fff;
  font-weight: var(--fw-semi);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(.72rem, 2.4vw, .85rem);
}
.video__facade.is-playing::after { display: none; }
.video__nota { margin-block-start: var(--sp-2); }

/* ---------- 8.6 AGENDA / DÍAS ----------
   Sin overflow:clip en la sección: rompería el pin de ScrollTrigger.
   El desbordamiento horizontal lo contiene .dias__viewport.                 */
.dias__head { max-width: 46ch; }
.dias__vacio {
  font-size: var(--fs-body-lg);
  color: var(--fg-muted);
  border-inline-start: var(--rule-w) solid var(--accent);
  padding-inline-start: var(--sp-4);
}
.dias__viewport {
  width: 100%;
  overflow: hidden;
  padding-block: var(--sp-4);
}
.dias__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  padding-inline: var(--gutter);
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
}
.dia {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-height: clamp(240px, 34vw, 360px);
  border: var(--border-w) solid var(--line);
  background: var(--bg-elev);
  overflow: hidden;
  isolation: isolate;
}
.dia::before {
  content: "";
  position: absolute; top: 0; left: 0;
  height: 3px;
  width: clamp(40px, 22%, 96px);
  background: var(--accent);
  transition: width var(--d-slow) var(--e-power);
}
/* La trama diagonal comunicaba "bloqueado / sin definir". La agenda general
   ya está confirmada, así que se retira: mantenerla diría lo contrario. */
.dia__label {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.dia__num {
  font-family: var(--ff-display);
  font-size: var(--fs-daynum);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" var(--wdth-cond);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-display);
  line-height: .86;
  color: var(--fg);
}
.dia__fecha {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.dia__rol { font-size: var(--fs-body-sm); color: var(--fg-muted); }
.dia__estado { font-size: var(--fs-caption); color: var(--fg-muted); }
.dia__badge { margin-block-start: auto; align-self: flex-start; }

/* ---- Agenda confirmada ---- */
.dia__dow {
  font-size: var(--fs-overline); font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-overline); text-transform: uppercase;
  color: var(--accent);
}
.dia__t {
  font-family: var(--ff-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-h4); letter-spacing: .03em; line-height: 1.15; color: var(--fg);
}
.dia__rango {
  font-size: var(--fs-caption); font-weight: var(--fw-semi);
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted);
}
.dia__lista { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.dia__it {
  display: flex; flex-direction: column; gap: 2px;
  padding-block-start: var(--sp-3); border-top: var(--border-w) solid var(--line);
}
.dia__h {
  font-family: var(--ff-num); font-size: var(--fs-caption); font-weight: var(--fw-semi);
  letter-spacing: .04em; color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.dia__q { font-size: var(--fs-body-sm); color: var(--fg); }

/* ---- Botonera del hero en el home ---- */
.hero__acciones { margin-block-start: clamp(1rem, 2.6vh, 1.75rem); justify-content: center; }
@media (min-width: 1024px) { .hero__acciones { justify-content: flex-start; } }
.dias__nota { margin-block-start: var(--sp-10); }

/* ScrollTrigger congela el ancho del elemento pineado en el momento del pin,
   que es ANTES de que aparezca la barra de scroll. El .pin-spacer se queda
   con ese ancho de más (medido: 1307 contra 1292 de viewport) y provoca
   scroll horizontal en toda la página. El tope lo corrige sin tocar el pin.
   Va con !important porque ScrollTrigger escribe el ancho en estilo inline. */
/* Ambos con !important: ScrollTrigger escribe width Y max-width en estilo
   inline sobre el elemento pineado, así que una regla normal no le gana. */
.pin-spacer { max-width: 100% !important; }
.dias__viewport { max-width: 100% !important; }

@media (min-width: 1024px) {
  .dias__track {
    display: flex;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--gutter);
    will-change: transform;
  }
  .dia { flex: 0 0 clamp(340px, 42vw, 580px); }
}
@media (hover:hover) and (pointer:fine) {
  .dia:hover::before { width: 100%; }
}

/* ---------- 8.7 COMPARTIR / QR ---------- */
.compartir__grid { align-items: center; row-gap: var(--sp-12); }
.compartir__texto { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.compartir__body { color: var(--fg-muted); max-width: 46ch; }
.compartir__url {
  font-size: clamp(1rem, 2.2vw, 1.375rem);
  font-weight: var(--fw-semi);
  font-variation-settings: "wght" 600, "wdth" 100;
  letter-spacing: .02em;
  color: var(--fg);
  word-break: break-word;
  border-block-end: var(--rule-w) solid var(--accent);
  padding-block-end: var(--sp-2);
  align-self: flex-start;
  max-width: 100%;
}
.compartir__acciones { margin-block-start: var(--sp-2); }
.compartir__feedback { min-height: 1.4em; color: var(--accent-text); }

.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--white);   /* el QR SIEMPRE sobre blanco puro */
  box-shadow: var(--sh-3);
  border-radius: var(--r-sm);
  max-width: 420px;
  margin-inline: auto;
  color: var(--ink);
}
.qr__title {
  font-family: var(--ff-display);
  font-size: var(--fs-overline);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" 100;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--steel);
}
.qr__img {
  width: clamp(170px, 40vw, 240px);
  height: auto;
  background: #fff;
}
.qr__caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--steel);
  text-align: center;
}
.qr .btn--ghost { --btn-fg: var(--ink); --btn-bd: var(--ink-a24); }

/* ---------- 8.8 FOOTER ---------- */
.pie {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--sp-16) var(--sp-12);
  padding-bottom: calc(var(--sp-12) + env(safe-area-inset-bottom, 0px));
}
.pie__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-block-end: var(--sp-10);
}
.pie__logo { color: var(--white); --logo-w: clamp(200px, 46vw, 300px); width: var(--logo-w);
            margin-block-end: calc(var(--logo-w) * .10279); }
.pie__logo svg { width: 100%; height: auto; }
.pie__evento { display: flex; flex-direction: column; gap: var(--sp-2); }
.pie__nombre {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" var(--wdth-cond);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pie__datos { font-size: var(--fs-body-sm); color: #C7C7C7; }
.pie__legal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-start: var(--sp-10);
  font-size: var(--fs-caption);
  color: var(--steel-2);
  max-width: 70ch;
}
.pie__copy, .pie__marca { color: #8A8A8A; }

/* ---------- 8.9 BARRA STICKY (móvil) ---------- */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(10,10,10,.94);
  color: var(--white);
  border-block-start: var(--border-w) solid var(--white-a16);
  transform: translateY(110%);
  transition: transform var(--d-slow) var(--e-out);
  --fg: #fff; --fg-muted: #C7C7C7; --line-strong: var(--white-a32);
  --accent-fg: var(--ink); --bg: var(--ink);
}
.barra.is-visible { transform: translateY(0); }
/* `min-width:0` sin `flex-grow` dejaba que la botonera rígida aplastara este
   bloque hasta 0 px de ancho; la fecha se apilaba letra por letra y estiraba
   la barra a 142 px de alto. Ahora reclama el espacio sobrante y, si no
   alcanza, recorta con puntos suspensivos en vez de crecer hacia arriba. */
.barra__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.barra__l1 {
  font-family: var(--ff-display);
  /* Caption y no body-sm: en la barra la fecha es contexto, no titular, y a
     tamaño body pedía 154px de los 390 del viewport. */
  font-size: var(--fs-caption);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" var(--wdth-cond);
  letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La sede sale de la barra: en 390px competía con la fecha por los mismos
   píxeles y obligaba a recortar las dos. Sigue en el hero, en #sede y en el
   marquee que corre por toda la página. Una sola línea deja la barra en ~48px
   en vez de 70 y devuelve pantalla al contenido. */
.barra__l2 { display: none; }
.barra__btns { display: flex; gap: var(--sp-1); flex: 0 0 auto; }
.barra .btn { padding-inline: var(--sp-3); min-height: 44px; }
/* Calendario y Compartir van en icono: la barra sólo existe por debajo de
   1024px y ahí no caben tres etiquetas junto a la fecha. Ambas acciones
   siguen escritas en el hero (#btn-ics) y en la sección Comparte.
   Selector con .barra delante para ganarle a `.barra .btn` de arriba. */
.barra .barra__ico { padding-inline: var(--sp-1); flex: 0 0 auto; }
.barra__ico svg { width: 1.25rem; height: 1.25rem; }
/* Por debajo de 390px (Android de 360, iPhone SE) los tres botones ya se comen
   el ancho y la fecha saldría como "27–29 SEP…", que informa menos que no
   estar. Ahí la barra se queda en lo que realmente es: una botonera. */
@media (max-width: 389.98px) {
  .barra__info { display: none; }
  .barra { justify-content: center; }
}
@media (min-width: 1024px) { .barra { display: none; } }

/* ==========================================================================
   9) BREAKPOINTS — 360 / 390 / 768 / 1024 / 1440 / 1920
   ========================================================================== */

/* <= 389px (iPhone SE / Android chico) */
@media (max-width: 389.98px) {
  :root {
    --gutter: 1.125rem;
    --wdth-cond: 80;
    --wdth-xcond: 72;
    --sp-section: 3.75rem;
  }
  .cd__acciones .btn { width: 100%; }
  .hero__bienvenida { letter-spacing: .02em; }
}

/* Countdown a 2 columnas mientras "SEGUNDOS" no quepa */
@media (max-width: 599.98px) {
  .cd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
  .cd__unit:nth-child(2) { border-inline-end: 0; }
}

/* < 768px */
@media (max-width: 767.98px) {
  .cd__unit { padding-inline-end: var(--sp-1); }
  .badge-venue { width: 100%; }
  .invitacion__img { aspect-ratio: 4 / 3; }
  .pilares__grid { row-gap: var(--sp-8); }
}

/* >= 768px */
@media (min-width: 768px) {
  .invitacion__parrafo { max-width: 30ch; }
  .cd__unit { padding-inline-end: var(--sp-4); }

  /* El bloque display no debe empujar fecha, sede y camión fuera del primer
     pantallazo: topamos la escala también contra la ALTURA del viewport.
     Esto es lo que hace que 1024/1440/1920 lean la portada completa. */
  :root {
    --fs-display-xl: min(clamp(4.5rem, 20.5vw, 16rem), 13vh);
    --fs-display-l:  min(clamp(2.6rem, 12.8vw, 10rem), 8.4vh);
    --fs-display-m:  min(clamp(1.6rem,  7.2vw,  5rem),  4.5vh);
    --fs-display-s:  min(clamp(1.15rem, 4.4vw,  3rem),  2.6vh);
  }
}

/* >= 1024px */
@media (min-width: 1024px) {
  :root { --sp-section: clamp(6rem, 9vw, 10rem); }

  /* Cabeceras de sección a dos columnas alineadas al baseline inferior:
     rompe el centrado y da lectura editorial sin inventar contenido. */
  .section__head--split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--grid-gap);
    align-items: end;
    max-width: none;
  }
  .section__head--split .lead { margin-block-start: 0; padding-block-end: .35rem; }
  .dias__head { max-width: none; }
}

/* >= 1440px */
@media (min-width: 1440px) { :root { --gutter: 4rem; } }

/* >= 1920px: se congela la escala, crece el aire */
@media (min-width: 1920px) {
  :root { --container: 1520px; --gutter: 5rem; --sp-section: 11rem; }
}

/* Landscape muy bajo: el hero no se debe cortar */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --fs-display-xl: clamp(3rem, 15vh, 6rem); --sp-section: 3.5rem; }
  .hero { min-height: auto; padding-block: var(--sp-10) var(--sp-10); }
  .hero__truck {
    position: relative;
    left: auto; bottom: auto;
    transform: none;
    width: 100%;
    height: min(46svh, 260px);
    margin-block-start: var(--sp-8);
  }
  .hero__flare { display: none; }
}

/* ---------- 8.10 MENÚ DE SECCIONES ----------
   Lo pidió International: entrar a cualquier parte de la página sin tener que
   recorrerla entera. El botón vive FIJO arriba a la derecha, así que también
   sirve a media página, no sólo en la portada.

   Va por encima de la barra sticky y por debajo del preloader: mientras carga
   el sitio no debe asomarse, y una vez cargado nada lo tapa.               */
.menu-btn {
  position: fixed;
  top: max(var(--sp-4), env(safe-area-inset-top, 0px));
  right: var(--sp-4);
  z-index: 80;                  /* encima del panel: abierto hace de cerrar */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-w) solid rgba(39,38,35,.16);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.menu-btn:hover { background: var(--white); border-color: var(--orange); box-shadow: var(--glow-orange); }
.menu-btn:focus-visible { outline: var(--rule-w) solid var(--orange); outline-offset: 3px; }
/* Con el panel abierto el botón queda sobre fondo oscuro: se invierte para
   seguir siendo legible y para que se lea como "cerrar". */
.menu-btn[aria-expanded="true"] {
  background: transparent; color: var(--white);
  border-color: rgba(255,255,255,.28); box-shadow: none;
}
.menu-btn[aria-expanded="true"]:hover { background: rgba(255,255,255,.10); border-color: var(--orange); }
.no-js .menu-btn { display: none; }        /* sin JS no abre nada: no se enseña */

/* Las tres barras se vuelven una X cuando el panel está abierto. */
.menu-btn__barras { display: grid; gap: 3px; width: 16px; }
.menu-btn__barras i {
  display: block; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform var(--d-base) var(--e-out), opacity var(--d-fast) linear;
}
.menu-btn[aria-expanded="true"] .menu-btn__barras i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__barras i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__barras i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 419.98px) {
  .menu-btn__txt { display: none; }
  .menu-btn { padding: var(--sp-3); }
  .menu-btn__barras { width: 18px; }
}

/* ---- Panel ---- */
/* Cerrado se apaga con VISIBILITY, no con display. Con display:none el panel
   no tiene estilo previo del que partir y el navegador se salta la transición:
   el menú aparecía de golpe o no aparecía. El atributo hidden es sólo el estado
   inicial sin JS; initMenu() lo quita al arrancar y ya no vuelve. */
.menu {
  position: fixed; inset: 0; z-index: 70;
  visibility: hidden;
  transition: visibility 0s linear var(--d-slow);
}
.menu.is-open { visibility: visible; transition-delay: 0s; }
.menu[hidden] { display: none; }
.menu__fondo {
  position: absolute; inset: 0;
  background: rgba(10,10,10,.55);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(24rem, 88vw);
  display: flex; flex-direction: column;
  gap: var(--sp-5);
  padding: calc(var(--sp-8) + env(safe-area-inset-top, 0px)) var(--sp-6)
           calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  background: var(--ink);
  color: var(--white);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--d-slow) var(--e-power);
}
.menu.is-open .menu__fondo { opacity: 1; }
.menu.is-open .menu__panel { transform: translateX(0); }

.menu__titulo {
  margin: 0;
  padding-inline-end: 4rem;    /* el botón flota sobre esta esquina */
  font-family: var(--ff-display); font-weight: 700;
  font-size: var(--fs-caption); letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
}
.menu__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.menu__lista li + li { border-top: var(--border-w) solid rgba(255,255,255,.12); }
.menu__lista a {
  display: block;
  padding: var(--sp-3) 0;
  color: var(--white);
  text-decoration: none;
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1rem, 3.2vw, 1.2rem);
  letter-spacing: .02em; text-transform: uppercase;
  transition: color var(--d-fast) linear, padding-inline-start var(--d-base) var(--e-out);
}
.menu__lista a:hover, .menu__lista a:focus-visible { color: var(--orange); padding-inline-start: var(--sp-3); }
.menu__lista a:focus-visible { outline: var(--rule-w) solid var(--orange); outline-offset: 2px; }
.menu__lista .menu__sub {
  display: block; margin-block-start: 2px;
  font-family: var(--ff-text); font-weight: 400; text-transform: none;
  font-size: var(--fs-caption); letter-spacing: 0; color: #A8A7A4;
}

/* Lo que NO es una sección de esta página se separa: son otras pantallas. */
.menu__pie {
  margin-block-start: auto;
  display: grid; gap: var(--sp-3);
  padding-block-start: var(--sp-5);
  border-top: var(--rule-w) solid var(--orange);
}
.menu__pie .btn { justify-content: center; }
.menu__enlace {
  color: #DAD9D8; font-size: var(--fs-body-sm); text-align: center;
  text-decoration: underline; text-underline-offset: 3px;
}
.menu__enlace:hover { color: var(--orange); }

/* ==========================================================================
   10) REDUCED MOTION — apaga TODO
   (GSAP se apaga en JS antes de crear un solo ScrollTrigger; esto es la red
   de seguridad del lado CSS.)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }
  #preloader { display: none !important; }
  .cue-dot { animation: none; transform: none; }
  .chip__dot { animation: none; }
  .marquee__track { animation: none; transform: none; }
  .hero__truck img, .invitacion__img img, .video__poster { transform: none !important; }
  .cd__progress-fill { transform: scaleX(.35); }
  .pilares__rule { transform: scaleX(1); }
  .barra { transition: none; }
}

/* ==========================================================================
   11) IMPRESIÓN — la página se imprime para llevar el QR del registro
   ========================================================================== */
@media print {
  #preloader, .scroll-cue, .video, .barra, .btn, .cd__progress, .marquee { display: none !important; }
  :root { --bg: #fff; --fg: #000; }
  html, body { background: #fff !important; color: #000 !important; }
  [data-surface="dark"], [data-surface="cinema"], .pie {
    background: #fff !important; color: #000 !important;
    --fg: #000; --fg-muted: #333; --fg-subtle: #555; --line: #ccc;
  }
  .hero { min-height: auto; padding-block-end: 2rem; }
  .hero__flare { display: none; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
  .qr { box-shadow: none; border: 1px solid #ccc; }
  .display--ghost { color: #999 !important; }
}