/* ============================================================
   LEAD for GOOD® SUMMIT 2026 — Landing
   Paleta tomada del logotipo oficial
   ============================================================ */

:root{
  --ink:        #06000C;
  --ink-2:      #0C0417;
  --ink-3:      #140A22;
  --paper:      #F7F0F8;
  --mint:       #2BF5A6;
  --mint-deep:  #10B87A;
  --violet:     #A06BFF;
  --amber:      #FFC46B;

  --txt:        #F7F0F8;
  --txt-dim:    rgba(247,240,248,.66);
  --txt-faint:  rgba(247,240,248,.40);
  --line:       rgba(247,240,248,.13);

  --display: "Oswald", "Anton", Impact, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif:   "Playfair Display", Georgia, serif;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1280px;
  --r: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);   /* entradas: arranque decidido, llegada larga y suave */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:86px; -webkit-text-size-adjust:100%;
      background:var(--ink); }   /* evita el flash blanco al rebotar el scroll */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--body);
  font-size:clamp(15.5px,.55vw + 14px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
picture > source{ display:none; }   /* si no, cuenta como ítem al usar display:contents */
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--mint); color:var(--ink); }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{
  position:relative; z-index:1; padding-block:clamp(72px,10vw,150px);
  overflow-x:clip;   /* contiene los decorados full-bleed (ej. el hover de agenda) */
}
.section--tight{ padding-block:clamp(56px,7vw,104px); }

.eyebrow{
  font-family:var(--display);
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--mint);
  display:flex; align-items:center; gap:.7em;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--mint); flex:none; opacity:.8;
}
.eyebrow--center{ justify-content:center; }
h2.eyebrow{ line-height:1.4; letter-spacing:.28em; }   /* rótulo que hace de encabezado (orden de títulos) */

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:.94; letter-spacing:-.005em; margin:0; text-transform:uppercase;
  text-wrap:balance; }
h2{ font-size:clamp(2.1rem,6.2vw,4.6rem); }
h3{ font-size:clamp(1.25rem,2.4vw,1.85rem); line-height:1.05; }
.em{ font-family:var(--serif); font-style:italic; font-weight:500; text-transform:none; letter-spacing:-.01em; color:var(--mint); }
/* Encabezados de sección: el ancho lo fija el título (en su propio ch), no el
   contenedor; así entran en dos líneas balanceadas y no en tres o cuatro. */
.sec-head h2{ max-width:19ch; text-wrap:balance; }
.lede{ font-size:clamp(1.02rem,1.25vw,1.22rem); color:var(--txt-dim); max-width:62ch; text-wrap:pretty; }

/* ============================================================
   FONDO POR CAPAS
   base → aurora reactiva al scroll → topografía → grilla →
   viñeta → grano. Todo fijo, sin costo de layout.
   ============================================================ */

/* Paleta ambiental: la cambia el scroll (ver main.js) */
:root{
  --amb-1: #2BF5A6;   /* menta   */
  --amb-2: #A06BFF;   /* violeta */
  --amb-3: #1E8CFF;   /* azul    */
  --amb-4: #FFC46B;   /* ámbar   */
  --amb-i1: .20; --amb-i2: .19; --amb-i3: .12; --amb-i4: .09;
}

.bgfx{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  contain:strict; transform:translateZ(0);
}
/* Las capas con paralaje se extienden fuera del viewport: si no, al desplazarse
   se vería el borde sin pintar. */
.aurora, .bg-topo, .bg-grid{ inset:-110px; }

/* Paralaje: el puntero y el scroll alimentan estas variables desde main.js */
.aurora, .bg-grid, .bg-topo__par{ --mx:0; --my:0; --sy:0; }   /* main.js las escribe en cada capa, no en <html> */
.aurora   { transform:translate3d(calc(var(--mx) *  24px), calc(var(--my) *  20px), 0); }
.bg-grid  { transform:translate3d(calc(var(--mx) *  10px), calc(var(--my) *   8px), 0); }
.bg-topo__par{
  position:absolute; inset:0; display:block;
  transform:translate3d(calc(var(--mx) * -44px),
                        calc(var(--my) * -32px + var(--sy) * -0.045px), 0);
}

/* — Base: no es negro plano, tiene profundidad vertical — */
.bg-base{
  background:
    radial-gradient(120% 80% at 50% -10%, #150A26 0%, transparent 55%),
    radial-gradient(100% 70% at 50% 110%, #0A0718 0%, transparent 60%),
    linear-gradient(180deg, #08020F 0%, var(--ink) 45%, #080311 100%);
}

/* — Aurora: manchas que derivan lento y cambian de color por sección — */
/* Rendimiento: cada mancha es un degradé radial que ya nace difuso, en vez de
   un bloque de color con filter:blur(80px). El blur enorme sobre capas que se
   mueven todo el tiempo era lo que hacía sentir pesada la página (sobre todo
   en celulares y Safari). El color viaja por `color` (currentColor), que sí se
   puede animar, así el cambio de paleta entre secciones sigue siendo suave. */
.aurora i{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(closest-side, currentColor 0%, transparent 100%);
  will-change:transform; backface-visibility:hidden;
  transition:color 1.4s var(--ease), opacity 1.4s var(--ease);
}
.aurora i:nth-child(1){ width:70vw; height:62vw; left:-24vw; top:-20vw;
  color:var(--amb-1); opacity:var(--amb-i1); animation:drift-a 23s ease-in-out infinite; }
.aurora i:nth-child(2){ width:60vw; height:64vw; right:-20vw; top:8vh;
  color:var(--amb-2); opacity:var(--amb-i2); animation:drift-b 29s ease-in-out infinite; }
.aurora i:nth-child(3){ width:56vw; height:50vw; left:16vw; bottom:-22vw;
  color:var(--amb-3); opacity:var(--amb-i3); animation:drift-c 26s ease-in-out infinite; }
.aurora i:nth-child(4){ width:42vw; height:42vw; right:16vw; bottom:0;
  color:var(--amb-4); opacity:var(--amb-i4); animation:drift-d 19s ease-in-out infinite; }

/* Recorridos cerrados de cuatro tramos: la mancha vaga en vez de ir y volver
   en línea recta, que es lo que delata una animación barata. */
@keyframes drift-a{
  0%,100%{ transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
  25%    { transform:translate3d(16vw,9vh,0)       scale(1.20) rotate(26deg); }
  50%    { transform:translate3d(9vw,23vh,0)       scale(.88)  rotate(-18deg); }
  75%    { transform:translate3d(-8vw,12vh,0)      scale(1.12) rotate(14deg); }
}
@keyframes drift-b{
  0%,100%{ transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
  25%    { transform:translate3d(-15vw,14vh,0)     scale(.86)  rotate(-30deg); }
  50%    { transform:translate3d(-6vw,-13vh,0)     scale(1.22) rotate(18deg); }
  75%    { transform:translate3d(-19vw,-4vh,0)     scale(1.02) rotate(-10deg); }
}
@keyframes drift-c{
  0%,100%{ transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
  25%    { transform:translate3d(13vw,-15vh,0)     scale(1.26) rotate(20deg); }
  50%    { transform:translate3d(-10vw,-8vh,0)     scale(.92)  rotate(-24deg); }
  75%    { transform:translate3d(4vw,-20vh,0)      scale(1.14) rotate(8deg); }
}
@keyframes drift-d{
  0%,100%{ transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
  25%    { transform:translate3d(-14vw,10vh,0)     scale(1.18) rotate(-22deg); }
  50%    { transform:translate3d(6vw,18vh,0)       scale(.84)  rotate(16deg); }
  75%    { transform:translate3d(-5vw,4vh,0)       scale(1.3)  rotate(-6deg); }
}

/* — Topografía: curvas de nivel generadas, guiño al parque del MACA — */
.bg-topo{
  -webkit-mask-image:radial-gradient(130% 95% at 50% 38%, #000 18%, transparent 74%);
          mask-image:radial-gradient(130% 95% at 50% 38%, #000 18%, transparent 74%);
}
.bg-topo i{
  position:absolute; inset:-14% -10%; display:block;
  background:linear-gradient(115deg, var(--amb-1), var(--amb-2) 52%, var(--amb-4));
  opacity:.16;
  -webkit-mask:url("../img/topo.svg") center/cover no-repeat;
          mask:url("../img/topo.svg") center/cover no-repeat;
  animation:topo-pan 44s ease-in-out infinite;
  transition:background 1.4s var(--ease);
  will-change:transform;
}
@keyframes topo-pan{
  0%,100%{ transform:translate3d(0,0,0)         scale(1.02) rotate(0deg); }
  33%    { transform:translate3d(-4.5%,2.8%,0)  scale(1.09) rotate(.7deg); }
  66%    { transform:translate3d(2.6%,-3.4%,0)  scale(1.05) rotate(-.5deg); }
}

/* — Grilla arquitectónica: estructura, muy tenue — */
.bg-grid{
  background-image:
    linear-gradient(90deg, rgba(247,240,248,.055) 1px, transparent 1px),
    linear-gradient(       rgba(247,240,248,.055) 1px, transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(100% 70% at 50% 45%, #000 0%, transparent 72%);
          mask-image:radial-gradient(100% 70% at 50% 45%, #000 0%, transparent 72%);
}

/* — Viñeta: empuja la mirada al centro — */
.bg-vignette{
  background:radial-gradient(118% 88% at 50% 44%, transparent 42%, rgba(4,0,9,.55) 88%, rgba(4,0,9,.82) 100%);
}

/* — Grano de película: le saca el plástico a los degradés — */
.grain{
  position:fixed; inset:-120px; z-index:95; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  contain:strict;   /* quieto: animarlo obligaba a recomponer toda la pantalla */
}

@media (prefers-reduced-motion:reduce){
  .aurora i, .bg-topo i, .grain{ animation:none; }
  .light::after, .light::before{ animation:none; }
  .aurora, .bg-grid, .bg-topo__par{ transform:none !important; }
}
/* En pantallas chicas el blur grande es caro: se aliviana */
@media (max-width:760px){
  .bg-grid{ background-size:64px 64px; }
  .grain{ display:none; }
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--mint); --fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; font-size:.92rem;
  padding:1.02em 1.7em; border-radius:100px; border:1px solid transparent;
  background:var(--bg); color:var(--fg);
  background-image:linear-gradient(175deg, rgba(255,255,255,.22), rgba(255,255,255,0) 46%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(6,0,12,.25);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .25s, color .25s, border-color .25s;
  will-change:transform; cursor:pointer; position:relative; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 14px 34px -12px rgba(43,245,166,.65); }
.btn:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
.btn svg{ width:1em; height:1em; }
.btn--ghost{ --bg:transparent; --fg:var(--txt); border-color:var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background-image:none; box-shadow:none; }
.btn--ghost:hover{ border-color:var(--mint); color:var(--mint); box-shadow:none; background:rgba(43,245,166,.07); }
.btn--ink{ --bg:var(--ink); --fg:var(--paper); }
.btn--ink{ background-image:linear-gradient(175deg, rgba(255,255,255,.14), rgba(255,255,255,0) 46%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(6,0,12,.3); }
.btn--ink:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 14px 34px -14px rgba(6,0,12,.7); }
.btn--sm{ padding:.78em 1.25em; font-size:.8rem; }
.btn--lg{ padding:1.18em 2.1em; font-size:1rem; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,0,12,.78);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
}
/* Franja de organizadores sobre el nav.
   El nav ya no tiene lugar para un co-branding sin apretar los enlaces, así
   que va en una franja propia. Se repliega al hacer scroll (y al abrir el
   menú) para que el nav compacto no pierda altura mientras se lee. */
.nav__org{
  height:38px; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:rgba(6,0,12,.55); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  transition:height .45s var(--ease), opacity .35s var(--ease), border-color .35s var(--ease);
}
.nav__org-in{
  height:100%; display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.4vw,16px);
}
.nav__org-lbl{
  font-family:var(--display); font-size:.6rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--txt-faint);
}
.nav__org img{ height:14px; width:auto; opacity:.92; }
.nav__org-x{ color:var(--mint); font-size:.82rem; opacity:.75; line-height:1; }
/* El sello CG es circular: a 14 px (el alto del logotipo de Ascend) sería un
   punto. A 26 px el monograma se lee; el nombre dentro del aro no, por eso
   el nombre sigue al lado como texto. */
.nav__org-cg{ display:inline-flex; align-items:center; gap:8px; }
.nav__org .nav__org-cg img{ height:26px; width:26px; opacity:.95; }
.nav__org-nom{
  font-family:var(--display); font-weight:500; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper); opacity:.92;
}
.nav.is-stuck .nav__org,
.nav.is-open  .nav__org{ height:0; opacity:0; border-bottom-width:0; }
@media (max-width:380px){ .nav__org-lbl{ display:none; } }

.nav__inner{ display:flex; align-items:center; gap:clamp(14px,3vw,40px); height:76px; }
.nav__logo{ display:flex; align-items:center; flex:none; }
.nav__logo img{ height:32px; width:auto; }
.nav__links{ display:flex; gap:clamp(12px,2vw,28px); margin-left:auto; }
.nav__links a{
  font-family:var(--display); font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:400; color:var(--txt-dim); padding:.35em 0; position:relative; transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--mint); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--txt); } .nav__links a:hover::after{ width:100%; }
.nav__cta{ flex:none; }
.nav__burger{ display:none; }

@media (max-width:920px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(6,0,12,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    padding:10px var(--gutter) 28px; border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }
  .nav__links a{ padding:.85em 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav.is-open .nav__links{ opacity:1; transform:none; pointer-events:auto; }
  .nav__burger{
    display:grid; place-items:center; margin-left:auto; order:3;
    width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
    background:transparent; color:var(--txt); cursor:pointer;
  }
  .nav__burger span{ display:block; width:16px; height:1.5px; background:currentColor; position:relative; transition:transform .3s var(--ease), background .2s; }
  .nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:16px; height:1.5px; background:currentColor; transition:transform .3s var(--ease); }
  .nav__burger span::before{ top:-5px; } .nav__burger span::after{ top:5px; }
  .nav.is-open .nav__burger span{ background:transparent; }
  .nav.is-open .nav__burger span::before{ transform:translateY(5px) rotate(45deg); }
  .nav.is-open .nav__burger span::after{ transform:translateY(-5px) rotate(-45deg); }
  .nav__cta{ order:2; }
  .nav__cta .btn{ padding:.7em 1.05em; font-size:.75rem; }
}
@media (max-width:420px){ .nav__logo img{ height:26px; } }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding-top:150px; overflow:hidden; z-index:1; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; transform:scale(1.06); }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,0,12,.88) 0%, rgba(6,0,12,.40) 32%, rgba(6,0,12,.82) 74%, var(--ink) 100%),
    radial-gradient(120% 80% at 18% 92%, rgba(43,245,166,.26), transparent 58%),
    radial-gradient(90% 70% at 92% 8%,  rgba(160,107,255,.24), transparent 60%),
    radial-gradient(70% 50% at 78% 62%, rgba(255,196,107,.16), transparent 62%);
}
/* Virado duotono: sombras a la menta, luces al ámbar. Le da carácter a la foto. */
.hero__grade{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(150deg, rgba(43,245,166,.55), rgba(90,40,160,.45) 52%, rgba(255,176,90,.50));
  mix-blend-mode:soft-light; opacity:.85;
}
/* Curvas de nivel sobre el horizonte del hero */
.hero__topo{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, var(--mint), var(--paper) 70%);
  opacity:.14; mix-blend-mode:screen;
  -webkit-mask:url("../img/topo.svg") center/cover no-repeat;
          mask:url("../img/topo.svg") center/cover no-repeat;
}
/* Luz en movimiento DENTRO del hero.
   El hero ocupa todo el viewport y tapa el fondo fijo, así que al abrir la
   página no se veía nada animado. Estas manchas usan las mismas variables de
   paleta y los mismos recorridos que la aurora del fondo, en modo screen para
   que la luz se sume a la foto en vez de taparla. */
.hero__aurora{
  position:absolute; inset:-12%; z-index:-1; pointer-events:none; overflow:hidden;
}
.hero__aurora i{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(closest-side, currentColor 0%, transparent 100%);
  mix-blend-mode:screen; will-change:transform;
  transition:color 1.4s var(--ease);
}
.hero__aurora i:nth-child(1){ width:62vw; height:54vw; left:-16vw; bottom:-16vw;
  color:var(--amb-1); opacity:.30; animation:drift-a 23s ease-in-out infinite; }
.hero__aurora i:nth-child(2){ width:52vw; height:56vw; right:-17vw; top:-17vw;
  color:var(--amb-2); opacity:.26; animation:drift-b 29s ease-in-out infinite; }
.hero__aurora i:nth-child(3){ width:42vw; height:40vw; left:32vw; top:10vh;
  color:var(--amb-4); opacity:.18; animation:drift-d 19s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .hero__aurora i{ animation:none; } }

/* Degradé de cierre hacia el fondo del sitio */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:22vh; z-index:-1;
  background:linear-gradient(transparent, var(--ink)); pointer-events:none;
}
.hero__inner{ width:100%; padding-bottom:clamp(40px,6vw,72px); position:relative; }

.hero__badge{
  display:inline-flex; align-items:center; gap:.65em;
  border:1px solid rgba(43,245,166,.42); background:rgba(43,245,166,.09);
  border-radius:100px; padding:.55em 1.05em; margin:0;
  font-family:var(--display); font-size:.74rem; letter-spacing:.17em; text-transform:uppercase; color:var(--mint);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hero__badge b{ font-weight:600; color:var(--paper); letter-spacing:.14em; }
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(43,245,166,.8); animation:pulse 2.4s infinite; flex:none; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 12px rgba(43,245,166,0);} 100%{ box-shadow:0 0 0 0 rgba(43,245,166,0);} }

.hero h1{
  font-size:clamp(3.1rem,12.5vw,10.5rem);
  line-height:.82;
  letter-spacing:-.02em;
  margin:0 0 .28em;
  text-wrap:balance;
}
.hero h1 .em{ display:block; font-size:.42em; line-height:1; margin-top:.14em; letter-spacing:-.02em; }
.hero__sub{ font-size:clamp(1.05rem,1.5vw,1.35rem); color:var(--txt-dim); max-width:54ch; margin:0 0 clamp(26px,3.4vw,38px); }
.hero__sub strong{ color:var(--paper); font-weight:600; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:clamp(34px,5vw,58px); }
.hero__price{ font-size:.86rem; color:var(--txt-faint); letter-spacing:.02em; }
.hero__price b{ color:var(--mint); font-weight:600; }

.hero__facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.fact{ background:rgba(6,0,12,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:clamp(16px,2vw,22px) clamp(12px,1.6vw,20px); }
.fact dt{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-faint); margin-bottom:.5em; font-family:var(--display); }
.fact dd{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(1rem,1.65vw,1.4rem); text-transform:uppercase; line-height:1.05; }
.fact dd small{ display:block; font-family:var(--body); font-weight:400; text-transform:none; font-size:.76rem; color:var(--txt-dim); letter-spacing:0; margin-top:.35em; }
@media (max-width:760px){ .hero__facts{ grid-template-columns:repeat(2,1fr); } }

.scrollhint{
  position:absolute; right:var(--gutter); bottom:clamp(40px,6vw,72px);
  writing-mode:vertical-rl; font-family:var(--display); font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--txt-faint); display:flex; align-items:center; gap:10px;
}
.scrollhint::after{ content:""; width:1px; height:56px; background:linear-gradient(var(--mint),transparent); }
@media (max-width:1100px){ .scrollhint{ display:none; } }

/* ---------- Countdown ---------- */
.countdown{ display:flex; gap:clamp(8px,1.4vw,14px); flex-wrap:wrap; }
.cd{ min-width:72px; text-align:center; border:1px solid var(--line); border-radius:14px; padding:.7em .5em; background:rgba(247,240,248,.035); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.cd b{ display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1; font-variant-numeric:tabular-nums; }
.cd span{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-faint); }

/* ---------- Marquee ---------- */
.marquee{
  border-block:1px solid rgba(6,0,12,.14); color:var(--ink);
  background:linear-gradient(180deg, #46FFBA 0%, var(--mint) 52%, #17D98C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(6,0,12,.16);
  overflow:hidden; padding-block:.85em; position:relative; z-index:2;
}
.marquee__track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(.82rem,1.5vw,1.02rem); padding-inline:1.1em; display:flex; align-items:center; gap:1.1em;
}
.marquee span::after{ content:"◆"; font-size:.46em; opacity:.45; transform:translateY(-.1em); }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ---------- Avales oficiales ---------- */
.avales{
  position:relative; z-index:1;
  padding-block:clamp(34px,4.6vw,64px);
  border-bottom:1px solid var(--line);
}
.avales__grid{
  display:grid; gap:clamp(12px,1.4vw,18px);
  grid-template-columns:1.32fr 1fr 1fr;   /* el aval nacional pesa más */
  margin-top:clamp(18px,2.4vw,30px);
}

.aval{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; gap:clamp(14px,1.6vw,20px);
  border:1px solid var(--line); border-radius:16px; clip-path:inset(0 round 16px);   /* ver .person */
  padding:clamp(20px,2.2vw,28px);
  background:linear-gradient(165deg, rgba(247,240,248,.055), rgba(247,240,248,.012));
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.aval:hover{ transform:translateY(-4px); border-color:rgba(43,245,166,.42); }

/* El aval nacional es el más fuerte: se lo trata como destacado */
.aval--hero{
  border-color:rgba(43,245,166,.36);
  background:
    linear-gradient(165deg, rgba(43,245,166,.14), rgba(160,107,255,.08) 58%, rgba(247,240,248,.01));
}
.aval--hero::after{           /* textura de seguridad, apenas perceptible */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.30;
  background:linear-gradient(130deg, var(--mint), var(--violet));
  -webkit-mask:url("../img/topo.svg") center/180% no-repeat;
          mask:url("../img/topo.svg") center/180% no-repeat;
}
.aval--hero:hover{ border-color:rgba(43,245,166,.6); }

/* Emblema con doble aro, como un sello */
.aval__ic{
  position:relative; flex:none;
  align-self:flex-start;        /* sin esto el flex lo estira y queda óvalo */
  width:clamp(46px,4.2vw,58px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(43,245,166,.20), rgba(43,245,166,.06));
  border:1px solid rgba(43,245,166,.38); color:var(--mint);
}
.aval__ic::after{
  content:""; position:absolute; inset:4px; border-radius:50%;
  border:1px dashed rgba(43,245,166,.30);
}
.aval__ic svg{ width:45%; height:45%; }

.aval__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.aval__kicker{
  margin:0 0 .5em; font-family:var(--display); font-weight:500;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mint);
}
.aval h3{
  font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.12; letter-spacing:.005em;
  margin:0 0 .45em; text-transform:uppercase;
}
.aval p.aval__org{
  margin:0; font-size:.86rem; line-height:1.42; color:var(--txt-dim);
}
.aval__ref{
  margin:.9rem 0 0; margin-top:auto; padding-top:.75rem; border-top:1px solid var(--line);
  font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size:.64rem; letter-spacing:0; color:var(--txt-faint);
  /* Cada parte es indivisible: la línea corta en el separador,
     nunca dentro de un número de resolución o expediente. */
  display:flex; flex-wrap:wrap; gap:.2em .5em;
}
.aval__ref > *{ white-space:nowrap; }
/* Por debajo de 360 px el número no entra entero: mejor que parta a que desborde */
@media (max-width:360px){
  .aval__ref > *{ white-space:normal; overflow-wrap:anywhere; }
}
.aval__ref b{ color:var(--txt-dim); font-weight:500; }

/* — Tablet: el destacado ocupa el ancho y se acuesta — */
@media (max-width:980px){
  .avales__grid{ grid-template-columns:repeat(2,1fr); }
  .aval--hero{ grid-column:1 / -1; align-items:center; }
  .aval--hero .aval__ic{ width:clamp(54px,7vw,64px); align-self:center; }
}
/* — Teléfono: una columna, todo apilado — */
@media (max-width:620px){
  .avales__grid{ grid-template-columns:1fr; }
  .aval--hero .aval__ic{ align-self:flex-start; }
}

/* ---------- Manifesto ---------- */
.manifesto{ position:relative; z-index:1; }
.manifesto__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:start; }
@media (max-width:900px){ .manifesto__grid{ grid-template-columns:1fr; } }
.manifesto h2{ font-size:clamp(2.2rem,5.6vw,4.2rem); text-wrap:balance; }
.manifesto p + p{ margin-top:1.1em; }
.quote{
  border-left:2px solid var(--mint); padding:.3em 0 .3em 1.4em;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2vw,1.55rem);
  line-height:1.4; color:var(--paper);
}

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); }
@media (max-width:860px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.6vw,32px);
  background:linear-gradient(160deg, rgba(247,240,248,.05), rgba(247,240,248,0));
  position:relative; overflow:hidden; clip-path:inset(0 round var(--r));   /* ver .person */
  transition:border-color .35s, transform .35s var(--ease);
}
.stat:hover{ border-color:rgba(43,245,166,.5); transform:translateY(-4px); }
.stat b{
  display:block; font-family:var(--display); font-weight:700; line-height:.9;
  font-size:clamp(2.6rem,6vw,4.2rem);
  background:linear-gradient(140deg,var(--paper) 25%,var(--mint));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat span{ display:block; margin-top:.6em; font-size:.76rem; letter-spacing:.17em; text-transform:uppercase; color:var(--txt-dim); font-family:var(--display); }

/* ---------- Agenda · línea de tiempo ----------
   Un riel vertical recorre el día; cada bloque es un nodo. Los dos momentos
   centrales (keynotes) llevan nodo lleno y una banda tenue, y los cortes de
   mañana y tarde parten el recorrido. --rail fija la posición del riel en un
   solo lugar para que línea y nodos nunca se desalineen. */
.agenda{ position:relative; --rail:136px; }
.agenda::before{
  content:""; position:absolute; top:4px; bottom:4px; left:var(--rail);
  width:2px; margin-left:-1px; pointer-events:none;
  background:linear-gradient(180deg, rgba(43,245,166,0), rgba(43,245,166,.55) 5%,
             rgba(160,107,255,.42) 55%, rgba(43,245,166,.5) 92%, rgba(43,245,166,0));
}
.agenda__item{
  --pt:clamp(20px,2.4vw,28px);
  display:grid; grid-template-columns:104px 1fr auto; column-gap:64px; row-gap:6px;
  align-items:baseline; padding:var(--pt) 0; border-bottom:1px solid var(--line);
  position:relative;
}
.agenda__item::before{
  content:""; position:absolute; left:-100vw; right:-100vw; top:0; bottom:0; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(43,245,166,.07),transparent);
  opacity:0; transition:opacity .4s;
}
.agenda__item:hover::before{ opacity:1; }
/* nodo */
.agenda__item::after{
  content:""; position:absolute; left:var(--rail); top:calc(var(--pt) + 9px);
  width:11px; height:11px; margin-left:-5.5px; border-radius:50%;
  background:var(--ink); border:2px solid rgba(43,245,166,.75);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.agenda__item:hover::after{ transform:scale(1.3); box-shadow:0 0 0 6px rgba(43,245,166,.12); }
/* momentos centrales */
.agenda__item--key::before{ opacity:.55; }
.agenda__item--key::after{
  width:15px; height:15px; margin-left:-7.5px; top:calc(var(--pt) + 7px);
  background:var(--mint); border-color:var(--mint);
  box-shadow:0 0 0 5px rgba(43,245,166,.14), 0 0 18px rgba(43,245,166,.55);
}
.agenda__item--key .agenda__body h3{ color:var(--mint); }

.agenda__time{ font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,2vw,1.5rem); color:var(--mint); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.agenda__body h3{ margin-bottom:.35em; }
.agenda__body p{ margin:0; color:var(--txt-dim); font-size:.95rem; max-width:58ch; }

/* cortes de mañana y tarde: un rombo sobre el riel */
.agenda__corte{ position:relative; padding:clamp(30px,3.6vw,48px) 0 clamp(12px,1.4vw,16px); }
.agenda__corte:first-child{ padding-top:0; }
.agenda__corte span{
  font-family:var(--display); font-weight:500; font-size:.7rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--violet);
}
.agenda__corte::after{
  content:""; position:absolute; left:var(--rail); bottom:clamp(14px,1.6vw,18px);
  width:10px; height:10px; margin-left:-5px; transform:rotate(45deg);
  background:var(--violet); box-shadow:0 0 14px rgba(160,107,255,.8);
}
.agenda__corte + .agenda__item{ border-top:1px solid var(--line); }

@media (max-width:760px){
  .agenda{ --rail:8px; }
  .agenda__item{ grid-template-columns:1fr; column-gap:0; row-gap:.45rem; padding-left:34px; }
  .agenda__item .tag{ justify-self:start; }
  .agenda__corte{ padding-left:34px; }
}

.tag{
  font-family:var(--display); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:100px; padding:.42em .9em; color:var(--txt-faint); white-space:nowrap;
}
.tag--mint{ color:var(--mint); border-color:rgba(43,245,166,.4); background:rgba(43,245,166,.07); }


/* ---------- Speakers ---------- */
.people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:clamp(12px,1.6vw,20px); }
/* Columnas explícitas: con retratos, auto-fill se pasa de columnas en desktop
   y las tarjetas quedan demasiado angostas para el nombre. */
@media (max-width:1100px){ .people{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px) { .people{ grid-template-columns:repeat(2,1fr); } }

/* El retrato manda: ocupa toda la tarjeta y el texto se apoya sobre él.
   Mismo patrón de apilado que .story (foto 0 · degradado 1 · tinte 2 · texto 3):
   con z-index negativo la foto quedaría detrás del fondo de la propia tarjeta. */
.person{
  /* Safari pasa la foto a su propia capa al hacer zoom/cambiar el filtro y esa
     capa ignora overflow:hidden + border-radius: la foto quedaba como un
     rectángulo de esquinas rectas. clip-path redondeado sí la recorta. */
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid var(--line); border-radius:16px; clip-path:inset(0 round 16px);
  aspect-ratio:4/5; background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(15px,1.7vw,21px);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.person > picture{ display:contents; }
.person__ph{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%;
  filter:grayscale(1) contrast(1.07);
  transition:filter .6s var(--ease), transform 1.1s var(--ease);
}
.person::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(6,0,12,.34) 0%, rgba(6,0,12,.02) 26%,
    rgba(6,0,12,.66) 60%, rgba(6,0,12,.95) 100%);
}
.person::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(0deg, rgba(43,245,166,.85) 0%, transparent 44%);
  mix-blend-mode:soft-light; opacity:.42; transition:opacity .5s var(--ease);
}
.person > :not(picture){ position:relative; z-index:3; }
.person:hover{ transform:translateY(-6px); border-color:rgba(43,245,166,.48); }
.person:hover .person__ph{ filter:none; transform:scale(1.05); }
.person:hover::after{ opacity:.22; }

.person__rol{
  margin-bottom:auto;
  font-family:var(--display); font-size:.62rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--mint); text-shadow:0 1px 12px rgba(6,0,12,.9);
}
.person h3{
  font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.1; text-transform:none;
  letter-spacing:0; font-weight:600; margin-bottom:.3rem;
  text-shadow:0 2px 16px rgba(6,0,12,.8);
}
.person p{
  margin:0; font-size:.85rem; line-height:1.4;
  color:rgba(247,240,248,.82); text-shadow:0 1px 12px rgba(6,0,12,.7);
}

/* Sin retrato: el monograma ocupa el lugar de la foto, con el mismo encuadre */
.person--mono{ background:linear-gradient(170deg, rgba(43,245,166,.16), rgba(160,107,255,.10) 55%, var(--ink-2)); }
.person .person__mono{   /* especificidad: .person > :not(picture) impone relative */
  position:absolute; left:0; right:0; top:32%; transform:translateY(-50%);
  z-index:1; text-align:center;
  font-family:var(--display); font-weight:700; font-size:2.6rem;
  letter-spacing:.06em; color:var(--mint); opacity:.5;
  transition:opacity .5s var(--ease);
}
.person--mono:hover .person__mono{ opacity:.75; }
.person--tbc{ border-style:dashed; }
.person--tbc .person__mono{ color:var(--txt-faint); }

@media (max-width:520px){
  .person{ padding:12px; }
  .person h3{ font-size:.92rem; }
  .person p{ font-size:.76rem; }
  .person__rol{ font-size:.55rem; letter-spacing:.16em; }
  .person .person__mono{ font-size:1.9rem; }
}

/* ---------- Stories ---------- */
.stories{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
/* A una sola columna la tarjeta 4:5 queda desproporcionada: dos columnas en la franja media */
@media (max-width:900px){ .stories{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stories{ grid-template-columns:1fr; } }
.story{
  position:relative; isolation:isolate; overflow:hidden;   /* clip-path: ver .person */
  border:1px solid var(--line); border-radius:var(--r); clip-path:inset(0 round var(--r));
  aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(20px,2.4vw,30px); background:var(--ink-2);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s var(--ease);
}
.story > picture{ display:contents; }
.story__ph{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  filter:saturate(.94) contrast(1.05);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
/* Degradado de lectura: la foto arriba, el texto legible abajo */
.story::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(6,0,12,.30) 0%, rgba(6,0,12,.02) 26%,
    rgba(6,0,12,.62) 62%, rgba(6,0,12,.94) 100%);
}
/* Tinte de marca por tarjeta: grada la foto, no la tapa */
.story::after{
  content:""; position:absolute; inset:0; z-index:2;
  mix-blend-mode:soft-light; opacity:.42; transition:opacity .5s;
  background:linear-gradient(0deg, rgba(160,107,255,.9) 0%, transparent 46%);
}
.story:nth-child(2)::after{ background:linear-gradient(0deg, rgba(43,245,166,.9) 0%, transparent 46%); }
.story:nth-child(3)::after{ background:linear-gradient(0deg, rgba(255,196,107,.85) 0%, transparent 46%); }
.story:hover{ transform:translateY(-6px); border-color:rgba(43,245,166,.45); }
.story:hover .story__ph{ transform:scale(1.055); filter:saturate(1.04) contrast(1.02); }
.story:hover::after{ opacity:.24; }
.story > :not(picture){ position:relative; z-index:3; }
.story__n{
  font-family:var(--display); font-size:.7rem; letter-spacing:.24em;
  color:var(--paper); margin-bottom:auto; opacity:.85;
  text-shadow:0 1px 14px rgba(6,0,12,.9);
}
.story h3{ font-size:clamp(1.3rem,2.3vw,1.7rem); margin-bottom:.45rem; text-shadow:0 2px 18px rgba(6,0,12,.7); }
.story__rol{
  font-family:var(--display); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mint); margin:0 0 .5rem;
}
.story p{ margin:0; color:rgba(247,240,248,.82); font-size:.9rem; line-height:1.5; }

/* ---------- Sponsors y apoyos · tabla de respaldo ----------
   Una fila por nivel (main sponsor, sponsors, apoyan) con el nombre del nivel
   a la izquierda y los logos en celdas separadas por filetes, como los
   créditos de un programa. Las celdas crecen con la jerarquía.
   Filetes: cada celda dibuja su borde derecho e inferior con box-shadow y la
   lista recorta los del borde exterior (overflow:hidden), así la grilla queda
   cerrada con cualquier cantidad de columnas. --h es el alto óptico del logo. */
.respaldo{ --linea:rgba(247,240,248,.13); border-bottom:1px solid var(--linea); }
.respaldo__fila{
  display:grid; grid-template-columns:clamp(150px,15vw,200px) 1fr; position:relative;
}
.respaldo__fila::before{             /* filete superior de la fila */
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--linea); transform-origin:0 50%;
}
.respaldo__fila--main::before{ background:linear-gradient(90deg, var(--mint), var(--violet) 55%, var(--linea)); }
.respaldo__nivel{
  display:flex; flex-direction:column; gap:.55em; padding:clamp(20px,2.2vw,28px) 1rem 0 0;
  font-family:var(--display); text-transform:uppercase;
}
.respaldo__nivel span{ font-weight:500; font-size:.72rem; letter-spacing:.28em; color:var(--txt-dim); }
.respaldo__fila--main .respaldo__nivel span,
.respaldo__fila--sp .respaldo__nivel span{ color:var(--mint); }
.respaldo__nivel small{ font-size:.72rem; letter-spacing:.12em; color:var(--txt-faint); font-variant-numeric:tabular-nums; }
.respaldo__celdas{
  list-style:none; margin:0; padding:0; display:grid; overflow:hidden;
  border-left:1px solid var(--linea);
}
.respaldo__fila--main .respaldo__celdas{ grid-template-columns:1fr; }
.respaldo__fila--sp   .respaldo__celdas{ grid-template-columns:repeat(4,1fr); }
.respaldo__fila--ap   .respaldo__celdas{ grid-template-columns:repeat(5,1fr); }
.logo-celda{
  position:relative; display:grid; place-items:center; overflow:hidden;
  padding:1rem clamp(14px,1.8vw,26px);
  box-shadow:1px 0 0 var(--linea), 0 1px 0 var(--linea);
  transition:background-color .45s var(--ease);
}
.respaldo__fila--main .logo-celda{ min-height:clamp(128px,12vw,176px); }
.respaldo__fila--sp   .logo-celda{ min-height:clamp(112px,10vw,150px); }
.respaldo__fila--ap   .logo-celda{ min-height:clamp(94px,8vw,124px); }
.logo-celda img{
  max-width:100%; width:auto; height:auto; object-fit:contain;
  max-height:calc(var(--h,40px) * 1.25); opacity:.7;
  transition:opacity .45s var(--ease), transform .6s var(--ease-out);
}
.respaldo__fila--sp .logo-celda img{ max-height:calc(var(--h,40px) * 1.5); opacity:.86; }
.logo-celda--main img{ height:clamp(36px,4.8vw,62px); max-height:none; opacity:.96; }
.logo-celda:hover{ background-color:rgba(247,240,248,.035); }
.logo-celda:hover img{ opacity:1; transform:scale(1.05); }

@media (max-width:900px){
  .respaldo__fila--sp .respaldo__celdas{ grid-template-columns:repeat(2,1fr); }
  .respaldo__fila--ap .respaldo__celdas{ grid-template-columns:repeat(3,1fr); }
}
/* En el teléfono el nombre del nivel pasa arriba de sus logos */
@media (max-width:760px){
  .respaldo__fila{ grid-template-columns:1fr; }
  .respaldo__nivel{ flex-direction:row; align-items:baseline; justify-content:space-between; padding:16px 0 12px; }
  .respaldo__celdas{ border-left:0; border-top:1px solid var(--linea); }
  .respaldo__fila--ap .logo-celda{ min-height:84px; padding:.8rem .7rem; }
  .respaldo__fila--sp .logo-celda{ min-height:96px; }
  .respaldo__fila--sp .logo-celda img{ max-height:calc(var(--h,40px) * 1.15); }
  .respaldo__fila--ap .logo-celda img{ max-height:calc(var(--h,40px) * .95); }
}

/* Entrada (main.js marca .in en cada fila al verla): el filete se dibuja de
   izquierda a derecha, aparece el nombre del nivel y los logos suben en
   cascada detrás de la celda, el mismo gesto que el título de la portada.
   Se usa animation con relleno «backwards» para no pisar el hover. */
html.anim .respaldo__fila::before{ transform:scaleX(0); transition:transform 1.2s var(--ease-out); }
html.anim .respaldo__fila.in::before{ transform:none; }
html.anim .respaldo__nivel{ opacity:0; transform:translateY(8px); transition:opacity .8s var(--ease-out) .15s, transform .8s var(--ease-out) .15s; }
html.anim .respaldo__fila.in .respaldo__nivel{ opacity:1; transform:none; }
html.anim .respaldo__fila:not(.in) .logo-celda img{ opacity:0; }
html.anim .respaldo__fila.in .logo-celda img{
  animation:logo-sube 1s var(--ease-out) backwards;
  animation-delay:calc(.25s + var(--i,0) * 60ms);
}
@keyframes logo-sube{ from{ opacity:0; transform:translateY(115%); } }

/* ---------- Casos de éxito · muro de logos ---------- */
.casos{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(10px,1.2vw,16px);
  list-style:none; margin:0; padding:0;    /* sirve para <div> y para <ul> */
}
/* Ocho logos entran en una fila si se achica la base */
.casos--compacto .caso{ flex:1 1 122px; max-width:210px; min-height:clamp(78px,6.4vw,94px); }
.caso{
  /* flex-grow evita huecos en la última fila cuando no cierra la grilla */
  flex:1 1 150px; max-width:250px;
  display:grid; place-items:center;
  min-height:clamp(86px,7.4vw,108px);
  padding:1rem clamp(14px,1.6vw,22px);
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(165deg, rgba(247,240,248,.05), rgba(247,240,248,.012));
  transition:transform .38s var(--ease), border-color .38s var(--ease), background .38s;
}
.caso:hover{
  transform:translateY(-5px); border-color:rgba(43,245,166,.4);
  background:rgba(43,245,166,.06);
}
.caso img{
  /* --h ajusta cada logo ópticamente: los muy anchos necesitan menos alto */
  max-width:100%; max-height:var(--h,40px);
  width:auto; height:auto; object-fit:contain;
  opacity:.72; transition:opacity .38s var(--ease);
}
.caso:hover img{ opacity:1; }
/* Casos de éxito: seis marcas con más aire y logos más presentes, en grilla de 3 × 2 (2 × 3 en pantallas muy angostas), siempre filas completas */
[data-amb="casos"] .casos{ display:grid; grid-template-columns:repeat(3,1fr); }
@media (max-width:360px){ [data-amb="casos"] .casos{ grid-template-columns:repeat(2,1fr); } }
[data-amb="casos"] .caso{ max-width:none; min-height:clamp(112px,10vw,156px); border-radius:18px; }
[data-amb="casos"] .caso img{ max-height:calc(var(--h,40px) * 1.3); opacity:.8; }
[data-amb="casos"] .caso:hover img{ opacity:1; }
/* Placa tipográfica: para los apoyos de los que todavía no hay logo */
.caso__texto{
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  letter-spacing:.13em; font-size:clamp(.74rem,1vw,.86rem); line-height:1.3;
  color:var(--paper); opacity:.72; text-align:center;
  transition:opacity .38s var(--ease);
}
.caso:hover .caso__texto{ opacity:1; }

@media (max-width:520px){
  .caso{ flex:1 1 128px; min-height:78px; padding:.85rem 1rem; }
  .caso img{ max-height:calc(var(--h,40px) * .84); }
  .casos--compacto .caso{ flex:1 1 104px; min-height:70px; padding:.7rem .8rem; }
}
/* Avales y Apoyan son un mismo bloque de respaldo: sin doble margen entre ambos */
#apoyan{ padding-top:clamp(16px,2.4vw,40px); }

/* ---------- Certificación (bloque claro) ---------- */
.light{
  background:var(--paper); color:var(--ink); position:relative; z-index:1; isolation:isolate;
  overflow:hidden;
}
/* Mesh de color muy suave sobre el papel */
.light::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(70% 55% at 12% 8%,  rgba(43,245,166,.22), transparent 62%),
    radial-gradient(60% 50% at 92% 22%, rgba(160,107,255,.16), transparent 60%),
    radial-gradient(80% 60% at 50% 112%, rgba(255,196,107,.16), transparent 62%);
}
/* Las mismas curvas de nivel, ahora en tinta sobre papel */
.light::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(120deg, var(--mint-deep), #6B3FD4 60%, #C98A2E);
  opacity:.13;
  -webkit-mask:url("../img/topo.svg") center/cover no-repeat;
          mask:url("../img/topo.svg") center/cover no-repeat;
  animation:topo-claro 58s ease-in-out infinite;
}
@keyframes topo-claro{
  0%,100%{ transform:scale(1.05) translate3d(0,0,0); }
  50%    { transform:scale(1.11) translate3d(-2.4%,1.7%,0); }
}
/* El mesh de color respira, para que el bloque claro no quede plano */
.light::before{ animation:mesh-claro 34s ease-in-out infinite; }
@keyframes mesh-claro{
  0%,100%{ opacity:1;   transform:scale(1); }
  50%    { opacity:.72; transform:scale(1.06); }
}
.light .eyebrow{ color:var(--mint-deep); } .light .eyebrow::before{ background:var(--mint-deep); }
.light .lede{ color:rgba(6,0,12,.7); }
.light .em{ color:var(--mint-deep); }
.light .tag{ border-color:rgba(6,0,12,.18); color:rgba(6,0,12,.6); }

.cert__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,76px); align-items:center; }
@media (max-width:900px){ .cert__grid{ grid-template-columns:1fr; } }

/* ---------- Sello de certificación ---------- */
.sello{
  display:block; width:100%; max-width:340px; margin-inline:auto;
  filter:drop-shadow(0 26px 52px rgba(6,0,12,.42)) drop-shadow(0 4px 10px rgba(6,0,12,.28));
}
/* Los anillos giran en sentidos opuestos: da sensación de mecanismo, no de adorno */
.sello__aro, .sello__punteado{ transform-box:view-box; transform-origin:120px 120px; }
.sello__aro      { animation:sello-gira 64s linear infinite; }
.sello__punteado { animation:sello-gira 48s linear infinite reverse; }
@keyframes sello-gira{ to{ transform:rotate(360deg); } }

.sello text{ font-family:var(--display); text-anchor:middle; }
.sello__leyenda{
  /* El navegador ignora textLength en textPath, así que el anillo se cierra con
     interletrado. Este valor es la aproximación; main.js lo ajusta al píxel
     una vez cargada la tipografía. */
  font-size:10.4px; font-weight:500; letter-spacing:.06em;
  fill:#F7F0F8; fill-opacity:.62; text-anchor:start;
}
.sello__estrellas{ font-size:9px; fill:var(--mint); letter-spacing:.42em; }
.sello__kicker{
  font-size:7.6px; font-weight:500; letter-spacing:.34em;
  fill:var(--mint); fill-opacity:.92;
}
.sello__titulo{
  font-size:25px; font-weight:700; letter-spacing:-.005em;
  fill:#F7F0F8;
}
.sello__norma{
  font-size:8.6px; font-weight:600; letter-spacing:.14em;
  fill:#F7F0F8; fill-opacity:.88;
}
.sello__pie{
  font-size:6.6px; font-weight:400; letter-spacing:.24em;
  fill:#F7F0F8; fill-opacity:.45;
}
@media (prefers-reduced-motion:reduce){
  .sello__aro, .sello__punteado{ animation:none; }
}

.pillars{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:0; }
.pillars li{
  display:flex; gap:1rem; align-items:flex-start; padding:1.05rem 0;
  border-top:1px solid rgba(6,0,12,.12); font-size:.98rem;
}
.pillars li:last-child{ border-bottom:1px solid rgba(6,0,12,.12); }
.pillars svg{ flex:none; width:20px; height:20px; margin-top:.15rem; color:var(--mint-deep); }
.pillars b{ font-weight:600; }

/* ---------- Impacto / Fundación ---------- */
.impact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
@media (max-width:900px){ .impact__grid{ grid-template-columns:1fr; } }
.bigpct{
  font-family:var(--display); font-weight:700; line-height:.82; letter-spacing:-.03em;
  font-size:clamp(5rem,18vw,13rem);
  background:linear-gradient(150deg,var(--mint),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.figure{ border-radius:var(--r); overflow:hidden; clip-path:inset(0 round var(--r)); border:1px solid var(--line); position:relative; }
.figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform 1s var(--ease); }
.figure:hover img{ transform:scale(1.045); }
.figure figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.1rem 1.2rem .95rem;
  background:linear-gradient(transparent,rgba(6,0,12,.88));
  font-size:.76rem; letter-spacing:.06em; color:var(--txt-dim);
}

/* ---------- Organizadores ---------- */
.hosts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px); }
@media (max-width:820px){ .hosts{ grid-template-columns:1fr; } }
.host{
  display:grid; grid-template-columns:clamp(124px,16vw,190px) 1fr;
  gap:clamp(16px,2vw,28px); align-items:start;
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.6vw,32px);
  background:linear-gradient(165deg,rgba(247,240,248,.05),transparent);
  transition:border-color .4s, transform .4s var(--ease);
}
.host > picture{ display:block; }
.host__ph{
  /* height:auto es necesario: el atributo height del <img> pisa el aspect-ratio */
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center 20%;
  border-radius:12px; border:1px solid var(--line);
  clip-path:inset(0 round 12px);   /* Safari pierde el border-radius de una imagen mientras anima su filtro */
  filter:grayscale(1) contrast(1.06);
  transition:filter .55s var(--ease), border-color .4s var(--ease);
}
.host:hover{ border-color:rgba(43,245,166,.4); transform:translateY(-4px); }
.host:hover .host__ph{ filter:none; border-color:rgba(43,245,166,.4); }
@media (max-width:480px){
  .host{ grid-template-columns:100px 1fr; gap:14px; padding:18px; }
}
.host__role{ font-family:var(--display); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mint); margin-bottom:1rem; }
.host h3{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.55rem; }
.host p{ color:var(--txt-dim); margin:0; font-size:.95rem; }
.orgbar{ display:flex; align-items:center; gap:clamp(20px,4vw,48px); flex-wrap:wrap; margin-top:clamp(30px,4vw,48px); padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--line); }
.orgbar img{ height:26px; width:auto; opacity:.85; transition:opacity .3s; }
.orgbar img:hover{ opacity:1; }
/* Especificidad: .orgbar span (etiqueta «Organizan») le ganaba a este bloque */
.orgbar .orgbar__cg,
.orgbar .orgbar__cg span{ display:inline-flex; align-items:center; gap:12px;
  color:var(--txt-dim); font-family:var(--display); font-size:1rem; letter-spacing:.1em; }
.orgbar .orgbar__cg img{ height:40px; width:40px; }
.orgbar span{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-faint); font-family:var(--display); }

/* ---------- Partners ---------- */
.tiers{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px); align-items:stretch; }
@media (max-width:860px){ .tiers{ grid-template-columns:1fr; } }
.tier{
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3.2vw,40px);
  display:flex; flex-direction:column; background:rgba(247,240,248,.03); position:relative; overflow:hidden;
  clip-path:inset(0 round var(--r));   /* ver .person */
}
.tier--hero{ border-color:rgba(43,245,166,.45); background:linear-gradient(170deg,rgba(43,245,166,.09),rgba(160,107,255,.06)); }
.tier--hero::after{
  content:"Recomendado"; position:absolute; top:22px; right:-38px; transform:rotate(38deg);
  background:var(--mint); color:var(--ink); font-family:var(--display); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; padding:.4em 3.2em;
}
.tier h3{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.4rem; }
/* Sin uso: los formatos de sponsoreo no muestran importes. Se conserva por si
   se decide volver a mostrarlos; alcanza con reponer el <div class="tier__price">. */
.tier__price{ font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:600; color:var(--mint); margin:.2rem 0 1.4rem; }
.tier__price small{ display:block; font-family:var(--body); font-size:.72rem; font-weight:400; letter-spacing:.04em; color:var(--txt-faint); text-transform:none; margin-top:.35rem; }
.tier ul{ list-style:none; margin:1.5rem 0 1.8rem; padding:0; display:grid; gap:.85rem; }
.tier li{ display:flex; gap:.75rem; font-size:.93rem; color:var(--txt-dim); align-items:flex-start; }
.tier li::before{ content:"■"; color:var(--mint); font-size:.55em; line-height:1.9; flex:none; }
.tier .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- Venue ---------- */
.venue{ position:relative; overflow:hidden; }
.venue__media{ position:absolute; inset:0; z-index:-1; }
.venue__media img{ width:100%; height:100%; object-fit:cover; }
.venue__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--ink) 8%,rgba(6,0,12,.72) 48%,rgba(6,0,12,.35)); }
.venue__card{ max-width:560px; }
.venue__meta{ display:grid; gap:.9rem; margin:1.8rem 0; }
.venue__meta div{ display:flex; gap:.85rem; align-items:flex-start; font-size:.95rem; color:var(--txt-dim); }
.venue__meta svg{ width:18px; height:18px; color:var(--mint); flex:none; margin-top:.2rem; }
.venue__meta b{ color:var(--paper); font-weight:600; display:block; }

/* ---------- CTA final ---------- */
.final{ text-align:center; position:relative; overflow:hidden; }
.final::before{
  content:""; position:absolute; inset:-20% -10% auto; height:120%;
  background:radial-gradient(60% 55% at 50% 30%, rgba(43,245,166,.20), transparent 68%);
  pointer-events:none;
}
.final > *{ position:relative; }
.final h2{ font-size:clamp(2.6rem,10vw,7.5rem); line-height:.86; margin-bottom:.3em; }
.final .lede{ margin-inline:auto; }
.final__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; }
.final__note{ margin-top:1.4rem; font-size:.8rem; color:var(--txt-faint); }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding-block:clamp(46px,6vw,72px) 34px; position:relative; z-index:1; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(26px,4vw,52px); }
@media (max-width:820px){ .footer__top{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }
.footer__brand img{ height:56px; width:auto; margin-bottom:1.1rem; }
.footer__brand p{ color:var(--txt-dim); font-size:.9rem; max-width:34ch; margin:0; }
/* Títulos de columna: h2 por orden de encabezados, con aspecto de rótulo. Color
   más claro que --txt-faint para llegar al contraste mínimo (4,5:1). */
.footer__h{ font-size:.72rem; letter-spacing:.2em; line-height:1.4; color:rgba(247,240,248,.6); margin-bottom:1.1rem; font-weight:500; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.footer li a, .footer li span{ font-size:.92rem; color:var(--txt-dim); transition:color .25s; }
.footer li a:hover{ color:var(--mint); }
.footer__bottom{
  margin-top:clamp(34px,5vw,58px); padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.76rem; color:rgba(247,240,248,.6);   /* contraste mínimo 4,5:1 */
}

/* ---------- Sticky mobile CTA ---------- */
.stickycta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:70; display:none;
  background:rgba(12,4,23,.93); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line);
  border-radius:100px; padding:8px 8px 8px 20px; align-items:center; gap:12px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.9);
  transform:translateY(140%); transition:transform .45s var(--ease);
}
.stickycta.is-on{ transform:none; }
.stickycta p{ margin:0; font-size:.78rem; line-height:1.25; color:var(--txt-dim); }
.stickycta b{ display:block; color:var(--paper); font-family:var(--display); letter-spacing:.06em; text-transform:uppercase; font-size:.85rem; }
.stickycta .btn{ margin-left:auto; flex:none; }
@media (max-width:760px){ .stickycta{ display:flex; } }

/* ---------- Reveal ---------- */
/* El estado oculto depende de html.anim: sin JS o con «reducir movimiento»
   todo queda visible. */
/* La transición de aparición rige solo hasta que main.js marca .rv-hecho;
   después cada componente recupera sus propias transiciones de hover. El
   escalonado lo calcula main.js según lo que entra junto en pantalla (las
   clases rv-d1…d4 del HTML quedan solo como marca de orden). */
html.anim .rv:not(.rv-hecho){ transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
html.anim .rv:not(.in){ opacity:0; transform:translateY(22px); }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* Espacio para la barra CTA fija en mobile */
@media (max-width:760px){
  .footer{ padding-bottom:104px; }
  .footer__bottom{ flex-direction:column; gap:8px; }
}

/* ============================================================
   RESPONSIVE — destinos táctiles y ajustes de ancho chico
   Auditado a 320 / 360 / 390 / 430 / 768 / 834 / 1024 / 1280 / 1600 px
   ============================================================ */

/* Apple y Google piden ~44 px de alto mínimo para tocar con el pulgar */
@media (hover:none), (max-width:920px){
  .nav__cta .btn{ min-height:44px; }
  .nav__logo{ display:flex; align-items:center; min-height:44px; padding-block:6px; }
  .footer li a, .footer li span{ display:inline-flex; align-items:center; min-height:44px; }
  .footer ul{ gap:.1rem; }
  .stickycta .btn{ min-height:42px; }
}

/* Teléfonos angostos: menos aire lateral, tipografía y cajas más ajustadas */
@media (max-width:400px){
  :root{ --gutter:18px; }
  .nav__inner{ gap:10px; }
  .nav__cta .btn{ padding-inline:.85em; font-size:.7rem; letter-spacing:.06em; }
  .hero__badge{ font-size:.66rem; letter-spacing:.12em; padding:.5em .85em; }
  .hero__actions .btn{ width:100%; }
  .hero__price{ width:100%; }
  .countdown{ gap:6px; }
  .cd{ min-width:0; flex:1 1 0; padding:.6em .25em; }
  .stickycta{ padding-left:14px; gap:8px; }
  .stickycta p{ font-size:.72rem; }
  .marquee span{ padding-inline:.8em; }
  /* El CTA de cierre no entra en una sola línea a 320 px */
  .final__actions{ flex-direction:column; }
  .final__actions .btn{ width:100%; white-space:normal; }
  .btn--lg{ font-size:.92rem; padding-inline:1.4em; }
}


/* Tablet en horizontal: el hero no necesita ocupar toda la altura */
@media (min-width:760px) and (max-width:1100px) and (orientation:landscape){
  .hero{ min-height:auto; padding-top:130px; }
  .hero__inner{ padding-bottom:clamp(32px,5vw,56px); }
}

/* El velo del lugar tiene que tapar bien detrás del texto en pantallas angostas */
@media (max-width:900px){
  .venue__media::after{
    background:linear-gradient(180deg, rgba(6,0,12,.92) 0%, rgba(6,0,12,.78) 55%, rgba(6,0,12,.88) 100%);
  }
}

/* Pantallas muy angostas (ej. Galaxy Fold cerrado, 280 px) */
@media (max-width:360px){
  .footer__top{ grid-template-columns:1fr; }
  .btn{ white-space:normal; }          /* antes que desbordar, que parta la línea */
  .tier .btn{ align-self:stretch; text-align:center; }
  .hero__facts{ grid-template-columns:1fr; }
}

/* ============================================================
   ACABADO — foco visible, barra de scroll y detalles finos
   ============================================================ */

/* Un solo anillo de foco para todo lo interactivo: antes solo lo tenían los
   botones, y navegar con teclado dejaba de verse en enlaces y tarjetas. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
  border-radius:6px;
}
.light a:focus-visible,
.light button:focus-visible{ outline-color:var(--mint-deep); }

/* Barra de scroll acorde al fondo oscuro */
@supports (scrollbar-color: auto){
  html{ scrollbar-color:rgba(247,240,248,.22) transparent; scrollbar-width:thin; }
}
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{
    background:rgba(247,240,248,.18); border-radius:100px;
    border:3px solid transparent; background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(43,245,166,.45); background-clip:content-box; }
}

/* Números tabulares donde se comparan cifras de un vistazo */
.agenda__time, .cd b, .stat b{ font-variant-numeric:tabular-nums; }

/* Comillas tipográficas colgadas: el borde del blockquote queda alineado */
.quote{ hanging-punctuation:first allow-end; }

/* Imágenes decorativas fuera del árbol de accesibilidad */
.person__ph, .story__ph{ user-select:none; -webkit-user-drag:none; }

/* En pantallas anchas el texto no debe estirarse sin límite */
@media (min-width:1600px){
  .manifesto p, .agenda__body p{ max-width:62ch; }
}


/* ==========================================================================
   INTRO EN VIDEO
   Pantalla completa al entrar (una vez por sesión) y desde «Ver el video».
   html.intro-on lo pone el script del <head> antes del primer pintado;
   .is-open lo sostiene durante el fundido de salida (.is-out).
   El fondo replica el morado casi negro del propio video, así las bandas
   que deja object-fit:contain no se notan.
   ========================================================================== */
html.intro-on{ overflow:hidden; }
.intro{
  position:fixed; inset:0; z-index:1000; display:none; place-items:center;
  background:radial-gradient(120% 90% at 50% 40%, #12061c 0%, #07000b 70%);
  transition:opacity .9s var(--ease), visibility .9s;
}
.intro-on .intro, .intro.is-open{ display:grid; }
.intro.is-out{ opacity:0; visibility:hidden; }
.intro__video{ width:100%; height:100%; object-fit:contain; display:block; }
.intro__saltar{
  position:absolute; right:clamp(16px,3vw,40px); bottom:clamp(22px,4vw,48px);
  display:inline-flex; align-items:center; gap:.6em; min-height:44px;
  padding:.75em 1.25em; border-radius:100px; cursor:pointer;
  font-family:var(--display); font-weight:500; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); background:rgba(6,0,12,.45); border:1px solid rgba(247,240,248,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s;
}
.intro__saltar svg{ width:16px; height:16px; }
.intro__saltar:hover, .intro__saltar:focus-visible{
  color:var(--ink); background:var(--mint); border-color:var(--mint); outline:none;
}
.intro__barra{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(247,240,248,.08); }
.intro__barra span{
  display:block; height:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--mint), var(--violet));
  box-shadow:0 0 12px rgba(43,245,166,.6);
}

/* «Ver el video» en la portada */
.hero__play{
  display:inline-flex; align-items:center; gap:.8em; margin-top:clamp(18px,2.4vw,26px);
  padding:0; border:0; background:none; cursor:pointer; color:var(--txt);
  font-family:var(--display); font-weight:500; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; min-height:44px;
}
.hero__play small{ font-size:.92em; color:var(--txt-faint); letter-spacing:.1em; }
.hero__play-ic{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(43,245,166,.55); color:var(--mint);
  background:rgba(43,245,166,.08); position:relative;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.hero__play-ic::after{          /* anillo que late, como el punto del badge */
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(43,245,166,.55); animation:play-ring 2.6s var(--ease) infinite;
}
.hero__play-ic svg{ width:16px; height:16px; margin-left:2px; }
.hero__play:hover .hero__play-ic, .hero__play:focus-visible .hero__play-ic{
  background:var(--mint); color:var(--ink); transform:scale(1.06);
}
.hero__play:hover, .hero__play:focus-visible{ color:var(--mint); outline:none; }
@keyframes play-ring{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.7); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .hero__play-ic::after{ animation:none; } }

/* ==========================================================================
   ANIMACIONES · segunda pasada
   Todo cuelga de html.anim, que el <head> pone solo si no hay «reducir
   movimiento». Sin esa clase (o si main.js no carga) la página se ve completa
   y quieta.
   ========================================================================== */

/* ---- Portada: coreografía de entrada ----
   html.hero-go la dispara main.js: al cargar, o al cerrarse el intro.
   El título sube línea por línea detrás de una máscara (.ln); el recorte
   inferior baja .14em porque con line-height:.82 la base de las mayúsculas
   queda apenas por debajo de la caja de línea. */
.hero h1 .ln{ display:block; clip-path:inset(-.4em -.2em -.14em -.2em); }
.hero h1 .ln > span{ display:block; }
html.anim .hero__media{
  opacity:0; transform:scale(1.12);
  transition:opacity 1.4s ease, transform 2.8s cubic-bezier(.16,1,.3,1);
}
html.anim .hero h1 .ln > span{
  transform:translateY(125%);
  transition:transform 1.15s cubic-bezier(.16,1,.3,1) var(--d,0s);
}
html.anim .hero__sellos, html.anim .hero h1 .em, html.anim .hero__sub,
html.anim .hero__actions, html.anim .hero__play, html.anim .hero__facts{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease) var(--d,0s), transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s);
}
.hero__sellos{ --d:.15s; }
.hero h1 .ln:nth-child(1) > span{ --d:.25s; }
.hero h1 .ln:nth-child(2) > span{ --d:.37s; }
.hero h1 .em{ --d:.62s; }
.hero__sub{ --d:.76s; }
.hero__actions{ --d:.88s; }
.hero__play{ --d:1s; }
.hero__facts{ --d:1.1s; }
html.anim.hero-go .hero__media{ opacity:1; transform:none; }
html.anim.hero-go .hero h1 .ln > span,
html.anim.hero-go .hero__sellos, html.anim.hero-go .hero h1 .em, html.anim.hero-go .hero__sub,
html.anim.hero-go .hero__actions, html.anim.hero-go .hero__play, html.anim.hero-go .hero__facts{
  opacity:1; transform:none;
}

/* ---- Títulos de sección: barrido de arriba hacia abajo ----
   Los recortes negativos dejan respirar la itálica de Playfair, que se sale
   de la caja por los costados. */
html.anim .rv h2{
  clip-path:inset(-.3em -.5em 100% -.5em);
  transition:clip-path 1.25s cubic-bezier(.16,1,.3,1) .12s;
}
html.anim .rv.in h2{ clip-path:inset(-.3em -.5em -.45em -.5em); }

/* ---- Fotos de personas e historias: entran con un leve zoom hacia atrás ----
   Solo el estado previo (:not(.in)), así el zoom del hover sigue intacto. */
html.anim .person.rv:not(.in) .person__ph,
html.anim .story.rv:not(.in) .story__ph{ transform:scale(1.16); }

/* ---- Muros de logos: aparecen en cascada ----
   main.js les pone .stg y numera a los hijos (--i). Se usa animation con
   relleno «backwards» (no transition) para no pisar el hover de cada tarjeta. */
html.anim .stg > *{ opacity:0; }
html.anim .stg.in > *{
  opacity:1;
  animation:stg-in .8s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 45ms);
}
@keyframes stg-in{ from{ opacity:0; transform:translateY(18px) scale(.95); } }

/* ---- Luz que sigue al cursor en tarjetas (solo con mouse) ---- */
.luz{ position:relative; isolation:isolate; }
.luz::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  pointer-events:none; opacity:0; transition:opacity .45s var(--ease);
  background:radial-gradient(260px circle at var(--lx,50%) var(--ly,50%), rgba(43,245,166,.17), transparent 70%);
}
.luz:hover::before{ opacity:1; }

/* ---- Agenda: el riel se dibuja con el scroll y enciende los nodos ---- */
.agenda::after{
  content:""; position:absolute; top:4px; bottom:4px; left:var(--rail);
  width:2px; margin-left:-1px; pointer-events:none; z-index:0; display:none;
  background:linear-gradient(180deg, var(--mint), var(--violet) 55%, var(--mint));
  box-shadow:0 0 12px rgba(43,245,166,.55);
  transform-origin:50% 0; transform:scaleY(var(--prog,0));
}
html.anim .agenda::after{ display:block; }
html.anim .agenda::before{ opacity:.4; }
.agenda__item::after, .agenda__corte::after{ z-index:1; }
.agenda__item::after{ transition:transform .35s var(--ease), box-shadow .45s var(--ease), background .45s, border-color .45s; }
html.anim .agenda__item.is-past::after{
  background:var(--mint); border-color:var(--mint);
  box-shadow:0 0 0 4px rgba(43,245,166,.12), 0 0 14px rgba(43,245,166,.6);
}
html.anim .agenda__item:not(.is-past) .agenda__time{ opacity:.55; }
.agenda__time{ transition:opacity .5s var(--ease); }

/* ---- Barra de progreso de lectura ---- */
.progreso{ position:fixed; left:0; right:0; top:0; height:2px; z-index:90; pointer-events:none; }
.progreso span{
  display:block; height:100%; transform-origin:0 50%; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg, var(--mint), var(--violet));
  box-shadow:0 0 10px rgba(43,245,166,.55);
}

/* ---- Botones: destello al pasar el mouse y respuesta al apretar ---- */
.btn:not(.btn--ghost)::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  background-size:300% 100%; background-position:100% 0; opacity:0;
}
.btn:not(.btn--ghost):hover::after{ animation:brillo .9s var(--ease); }
@keyframes brillo{ from{ background-position:100% 0; opacity:1; } to{ background-position:0 0; opacity:1; } }


/* ==========================================================================
   INTERÉS NACIONAL
   Resuelto solo con tipografía, como una mención institucional: sin íconos,
   brillos ni degradés. Se destaca por el texto en blanco y el peso, al lado
   de la insignia ISO (menta).
   ========================================================================== */
.hero__sellos{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  margin-bottom:clamp(20px,3vw,30px);
}
.nac{
  display:inline-flex; align-items:center; gap:.9em;
  padding:.62em 1.2em; border-radius:100px;
  border:1px solid rgba(247,240,248,.42); background:rgba(6,0,12,.42);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--display); text-transform:uppercase; text-decoration:none;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nac b{ font-weight:600; font-size:.8rem; letter-spacing:.14em; color:var(--paper); }
.nac span{
  font-size:.66rem; letter-spacing:.16em; color:var(--txt-dim);
  padding-left:.9em; border-left:1px solid rgba(247,240,248,.28);
}
.nac:hover, .nac:focus-visible{ border-color:var(--paper); background:rgba(6,0,12,.6); outline:none; }
@media (max-width:520px){
  /* con dos insignias apiladas, la de ISO va corta para no partirse en dos líneas */
  .hero__badge-pre{ display:none; }
  .nac{ flex-direction:column; align-items:flex-start; gap:.3em; border-radius:14px; padding:.6em 1em; }
  .nac b{ font-size:.76rem; letter-spacing:.1em; }
  .nac span{ padding-left:0; border-left:0; font-size:.58rem; letter-spacing:.12em; }
}

/* Recordatorio en el cierre */
.nac-chip{
  width:fit-content; margin:0 auto 1.4rem; padding:.5em 1.1em; border-radius:100px;
  border:1px solid rgba(247,240,248,.32);
  font-family:var(--display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); text-align:center;
}


/* ==========================================================================
   ANIMACIONES · tercera pasada
   ========================================================================== */

/* Botones: se hunden apenas al apretar (respuesta táctil) */
.btn:active{ transform:translateY(0) scale(.975); transition-duration:.08s; }

/* Menú: la sección en la que se está queda marcada */
.nav__links a.is-active{ color:var(--paper); }
.nav__links a.is-active::after{ width:100%; }

/* Lugar: la foto del MACA entra con un zoom lento hacia atrás */
.venue__media img{ transition:transform 2.6s var(--ease-out); }
html.anim .rv-media:not(.in) img{ transform:scale(1.14); }

/* Fuera de pantalla, las animaciones decorativas quedan en pausa (main.js
   marca .is-off): menos trabajo para el procesador, sobre todo en celulares. */
.hero.is-off .hero__aurora i,
.hero.is-off .hero__topo,
.marquee.is-off .marquee__track,
.light.is-off::before, .light.is-off::after,
.light.is-off .sello__aro, .light.is-off .sello__punteado,
.hero.is-off .pulse{ animation-play-state:paused; }