/* ===== YCS MÉXICO 2026 — hoja principal ===== */
*,*::before,*::after{box-sizing:border-box}
/* `clip` y no `hidden`: recorta el desborde lateral sin crear un contenedor
   de scroll, así la barra fija y el desplazamiento suave siguen funcionando. */
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-alto) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--neg-900);color:var(--tinta-200);
  font-family:var(--tipo-texto);font-size:var(--t-base);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--rojo-500);color:#fff}

/* barra de desplazamiento */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--neg-800)}
::-webkit-scrollbar-thumb{background:var(--neg-500);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--rojo-500)}

.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.angosto{width:min(100% - 2.5rem,var(--ancho-angosto));margin-inline:auto}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--tipo-display);font-weight:400;line-height:.95;
  letter-spacing:.01em;text-transform:uppercase;margin:0;color:var(--tinta-100)}
p{margin:0 0 var(--e-4)}
.kicker{
  font-family:var(--tipo-texto);font-weight:700;text-transform:uppercase;
  letter-spacing:.32em;font-size:var(--t-xs);color:var(--oro-500);
  display:inline-flex;align-items:center;gap:.7rem
}
.kicker::before{content:'';width:34px;height:2px;background:var(--grad-marca);border-radius:2px}
.titulo-seccion{font-size:clamp(2.1rem,5.4vw,3.9rem);margin:var(--e-3) 0 var(--e-4)}
.texto-seccion{color:var(--tinta-300);font-size:var(--t-md);max-width:62ch}
.resalte{background:var(--grad-marca);-webkit-background-clip:text;background-clip:text;color:transparent}

.seccion{padding:var(--e-9) 0;position:relative}
.seccion--alt{background:var(--neg-800)}
.cabecera-seccion{margin-bottom:var(--e-8)}

/* ---------- botones ---------- */
.btn{
  --fondo:var(--grad-marca);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 2rem;border:0;border-radius:var(--radio-full);
  font-weight:700;font-size:var(--t-sm);letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--fondo);overflow:hidden;isolation:isolate;
  transition:transform var(--vel-2) var(--curva),box-shadow var(--vel-2) var(--curva);
  box-shadow:var(--luz-roja);white-space:nowrap
}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,var(--oro-500),var(--rojo-400));
  opacity:0;transition:opacity var(--vel-2) var(--curva)
}
.btn:hover{transform:translateY(-3px) scale(1.02)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn--fantasma{background:transparent;color:var(--tinta-100);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24)}
.btn--fantasma::after{background:rgba(255,255,255,.10)}
.btn--fantasma:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn--wa{background:linear-gradient(115deg,#128C7E,#25D366);box-shadow:0 0 0 1px rgba(37,211,102,.3),0 18px 46px -16px rgba(37,211,102,.6)}
.btn--wa::after{background:linear-gradient(115deg,#25D366,#5df58e)}
.btn--bloque{width:100%}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- barra de aviso ---------- */
.aviso-barra{
  background:var(--grad-marca);color:#fff;text-align:center;
  padding:.6rem 1rem;font-size:var(--t-sm);font-weight:600;letter-spacing:.02em;position:relative;z-index:60
}
.aviso-barra a{text-decoration:underline;text-underline-offset:3px}

/* ---------- navegación ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-alto);
  display:flex;align-items:center;
  transition:background var(--vel-2) var(--curva-suave),backdrop-filter var(--vel-2),
             box-shadow var(--vel-2),height var(--vel-2) var(--curva-suave)
}
/* El desenfoque vive en un pseudo-elemento a propósito: si `backdrop-filter`
   se aplicara al header, éste se volvería bloque contenedor y el menú móvil
   (position:fixed) quedaría anclado a la barra en lugar de a la pantalla. */
.nav[data-fijo="si"]{
  height:64px;
  box-shadow:0 1px 0 rgba(255,255,255,.07),0 12px 34px -20px rgba(0,0,0,.9)
}
.nav[data-fijo="si"]::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:rgba(6,6,8,.86);backdrop-filter:blur(18px) saturate(1.4)
}
.nav__caja{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--e-5);width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.nav__marca{display:flex;align-items:center;gap:.7rem;font-family:var(--tipo-display);
  font-size:var(--t-lg);color:#fff;letter-spacing:.02em;line-height:1}
.nav__marca span{display:block;font-family:var(--tipo-texto);font-size:9px;font-weight:700;
  letter-spacing:.3em;color:var(--oro-500);text-transform:uppercase}
.nav__sello--img{background:none!important;box-shadow:none!important;object-fit:contain;border-radius:0}
.nav__sello{width:38px;height:38px;border-radius:50%;background:var(--grad-marca);
  display:grid;place-items:center;font-size:13px;font-weight:800;font-family:var(--tipo-texto);
  color:#fff;box-shadow:var(--luz-roja);flex:none}
.nav__menu{display:flex;align-items:center;gap:var(--e-5);list-style:none;margin:0;padding:0}
.nav__menu a{
  position:relative;font-size:var(--t-sm);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-300);padding:.4rem 0;transition:color var(--vel-1)
}
.nav__menu a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--grad-marca);transition:width var(--vel-2) var(--curva);border-radius:2px}
.nav__menu a:hover{color:#fff}
.nav__menu a:hover::after{width:100%}
.nav__acciones{display:flex;align-items:center;gap:var(--e-3)}
.nav__acciones .btn{padding:.72rem 1.4rem;font-size:var(--t-xs)}
.nav__hamburguesa{display:none;width:44px;height:44px;border:0;border-radius:var(--radio-sm);
  background:rgba(255,255,255,.07);color:#fff;place-items:center}
.nav__hamburguesa span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;
  position:relative;transition:transform var(--vel-2) var(--curva),background var(--vel-1)}
.nav__hamburguesa span::before,.nav__hamburguesa span::after{
  content:'';position:absolute;left:0;width:20px;height:2px;background:#fff;border-radius:2px;
  transition:transform var(--vel-2) var(--curva)}
.nav__hamburguesa span::before{top:-6px}
.nav__hamburguesa span::after{top:6px}
body[data-menu="abierto"] .nav__hamburguesa span{background:transparent}
body[data-menu="abierto"] .nav__hamburguesa span::before{transform:translateY(6px) rotate(45deg)}
body[data-menu="abierto"] .nav__hamburguesa span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-alto) + var(--e-7)) 0 var(--e-8);overflow:hidden;isolation:isolate
}
.hero__medios{position:absolute;inset:0;z-index:-3;background:var(--neg-900)}
.hero__diapositiva{
  position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--curva-suave);
  will-change:opacity
}
.hero__diapositiva[data-activa="si"]{opacity:1}
.hero__diapositiva img,.hero__diapositiva video{
  width:100%;height:100%;object-fit:cover;
  animation:kenburns 18s ease-out both
}
@keyframes kenburns{from{transform:scale(1.12) translate3d(0,0,0)}to{transform:scale(1) translate3d(0,-1.5%,0)}}
.hero__velo{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 85% at 50% 0%,rgba(200,16,46,.30) 0%,transparent 58%),
    radial-gradient(90% 70% at 88% 78%,rgba(14,158,90,.20) 0%,transparent 60%),
    linear-gradient(180deg,rgba(5,5,6,.55) 0%,rgba(5,5,6,.70) 42%,var(--neg-900) 100%)}
.hero__rejilla{position:absolute;inset:0;z-index:-1;opacity:.4;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(75% 65% at 50% 40%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(75% 65% at 50% 40%,#000 0%,transparent 78%)}
/* pista de circuito animada */
.hero__circuito{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5}
.hero__circuito path{fill:none;stroke:url(#trazoYcs);stroke-width:1.4;
  stroke-dasharray:8 340;animation:correr 9s linear infinite}
.hero__circuito path:nth-child(2){animation-delay:-2.4s}
.hero__circuito path:nth-child(3){animation-delay:-5.1s}
.hero__circuito path:nth-child(4){animation-delay:-7.3s}
@keyframes correr{to{stroke-dashoffset:-348}}

.hero__caja{position:relative;z-index:2;width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.hero__kicker{margin-bottom:var(--e-5)}
.hero__titulo{
  font-size:var(--t-6xl);line-height:.94;letter-spacing:-.01em;
  text-shadow:0 18px 60px rgba(0,0,0,.6)
}
.hero__titulo em{
  display:block;font-style:normal;margin-top:-.06em;
  background:var(--grad-marca);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 30px rgba(240,32,63,.35))
}
/* Datos del evento: en escritorio fluyen en una línea, en móvil se apilan
   con su icono. Antes era una píldora con puntos separadores que al partirse
   dejaba los puntos colgando al final de cada renglón. */
.hero__datos{
  list-style:none;padding:0;margin:var(--e-5) 0 var(--e-4);
  display:flex;flex-wrap:wrap;gap:.5rem .75rem
}
.hero__datos li{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .95rem;border-radius:var(--radio-full);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  font-weight:600;font-size:var(--t-sm);letter-spacing:.04em;text-transform:uppercase;
  color:var(--tinta-200);line-height:1
}
.hero__dato-ico{display:grid;place-items:center;color:var(--oro-500);flex:none}
.hero__dato-ico svg{width:14px;height:14px}
.hero__sub{font-size:clamp(1rem,1.9vw,1.28rem);color:var(--tinta-300);max-width:60ch;margin-bottom:var(--e-6)}
.hero__acciones{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-bottom:var(--e-7)}
.hero__flecha{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--tinta-400)
}
.hero__flecha b{display:block;width:1px;height:46px;background:linear-gradient(180deg,transparent,var(--oro-500));
  animation:bajar 2.2s var(--curva) infinite}
@keyframes bajar{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);transform-origin:bottom;opacity:0}}
.hero__puntos{position:absolute;right:2rem;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:.6rem}
.hero__punto{width:8px;height:8px;border-radius:50%;border:0;padding:0;
  background:rgba(255,255,255,.28);transition:all var(--vel-2) var(--curva)}
.hero__punto[aria-current="true"]{background:var(--oro-500);height:24px;border-radius:99px}

/* ---------- cuenta regresiva ---------- */
.cuenta{display:flex;flex-wrap:wrap;gap:var(--e-3)}
.cuenta__casilla{
  position:relative;min-width:88px;padding:.9rem 1.1rem .75rem;border-radius:var(--radio);
  background:rgba(12,12,15,.62);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 20px 50px -30px #000;
  text-align:center;overflow:hidden
}
.cuenta__casilla::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-marca)}
.cuenta__num{
  display:block;font-family:var(--tipo-display);font-size:clamp(1.9rem,4.4vw,2.9rem);
  line-height:1;color:#fff;font-variant-numeric:tabular-nums
}
.cuenta__eti{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tinta-400);margin-top:.35rem;font-weight:700}
.cuenta--vivo .cuenta__casilla::before{background:linear-gradient(90deg,var(--verde-500),var(--verde-400))}

/* ---------- banda de respaldo (bajo el hero) ---------- */
/* Marquesina automática: la cinta corre sola. Arrastrar de lado sería
   fricción, así que aquí no hay scroll manual en ningún tamaño. */
.banda{background:var(--neg-800);border-bottom:1px solid rgba(255,255,255,.07);
  padding:var(--e-4) 0;overflow:hidden}
.banda__caja{display:flex;align-items:center;gap:var(--e-5);
  width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.banda__eti{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tinta-500);max-width:92px;line-height:1.5}
.banda__ventana{
  flex:1;min-width:0;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)
}
.banda__cinta{display:flex;width:max-content;animation:bandaCorre linear infinite}
.banda__grupo{display:flex;align-items:center;gap:var(--e-6);padding-right:var(--e-6)}
.banda:hover .banda__cinta{animation-play-state:paused}
@keyframes bandaCorre{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.banda__marca{flex:none;display:grid;place-items:center;height:40px;
  font-family:var(--tipo-display);font-size:var(--t-sm);letter-spacing:.08em;
  color:var(--tinta-400);white-space:nowrap;transition:color var(--vel-1),filter var(--vel-1)}
.banda__marca img{max-height:34px;width:auto;object-fit:contain;
  filter:grayscale(1) brightness(1.9) opacity(.62);transition:filter var(--vel-1)}
.banda__marca:hover{color:var(--tinta-100)}
.banda__marca:hover img{filter:none}
.banda__mas{flex:none;font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--oro-500);white-space:nowrap;transition:opacity var(--vel-1)}
.banda__mas:hover{opacity:.75}

/* ---------- franja de cifras ---------- */
.cifras{border-block:1px solid rgba(255,255,255,.07);background:var(--neg-800)}
.cifras__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cifra{padding:var(--e-6) var(--e-4);text-align:center;border-right:1px solid rgba(255,255,255,.06)}
.cifra:last-child{border-right:0}
.cifra__valor{font-family:var(--tipo-display);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;
  background:var(--grad-marca);-webkit-background-clip:text;background-clip:text;color:transparent}
.cifra__eti{display:block;margin-top:.5rem;font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-400);font-weight:700}

/* ---------- intro ---------- */
.intro__rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e-8);align-items:center}
.intro__medios{position:relative;border-radius:var(--radio-lg);overflow:hidden;
  box-shadow:0 40px 90px -40px #000,inset 0 0 0 1px rgba(255,255,255,.08);aspect-ratio:4/3;background:var(--neg-700)}
.intro__medios img{width:100%;height:100%;object-fit:cover}
.intro__marco{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 55%,rgba(200,16,46,.35))}
.lista-check{list-style:none;padding:0;margin:var(--e-5) 0 0;display:grid;gap:var(--e-3)}
.lista-check li{display:flex;gap:.85rem;align-items:flex-start;color:var(--tinta-300)}
.lista-check svg{width:22px;height:22px;flex:none;color:var(--verde-400);margin-top:2px}

/* ---------- ponentes ---------- */
.rejilla-ponentes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--e-5)}
.ponente{
  position:relative;border-radius:var(--radio-lg);overflow:hidden;background:var(--neg-700);
  aspect-ratio:4/5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform var(--vel-3) var(--curva),box-shadow var(--vel-3) var(--curva)
}
.ponente:hover{transform:translateY(-8px);box-shadow:var(--luz-roja),0 40px 70px -40px #000}
.ponente img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--vel-4) var(--curva),filter var(--vel-3);filter:grayscale(.35) contrast(1.05)}
.ponente:hover img{transform:scale(1.06);filter:grayscale(0) contrast(1.08)}
.ponente__vacio{position:absolute;inset:0;display:grid;place-items:center;color:var(--tinta-500);
  background:repeating-linear-gradient(45deg,var(--neg-700),var(--neg-700) 12px,var(--neg-600) 12px,var(--neg-600) 24px)}
.ponente__pie{
  position:absolute;inset:auto 0 0 0;padding:var(--e-6) var(--e-4) var(--e-4);
  background:linear-gradient(180deg,transparent,rgba(5,5,6,.94) 62%)
}
.ponente__nombre{font-family:var(--tipo-display);font-size:var(--t-lg);color:#fff;line-height:1.05}
.ponente__cargo{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--oro-500);font-weight:700;margin-top:.3rem}
.ponente__bio{font-size:var(--t-sm);color:var(--tinta-300);margin:.5rem 0 0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height var(--vel-3) var(--curva),opacity var(--vel-2)}
.ponente:hover .ponente__bio{max-height:9rem;opacity:1}
.ponente__redes{display:flex;gap:.5rem;margin-top:.7rem}
.ponente__redes a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;transition:background var(--vel-1),transform var(--vel-1)}
.ponente__redes a:hover{background:var(--rojo-500);transform:translateY(-2px)}
.ponente__redes svg{width:14px;height:14px}
.insignia{position:absolute;top:.85rem;left:.85rem;z-index:2;
  padding:.3rem .7rem;border-radius:var(--radio-full);background:var(--grad-marca);
  font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff}

/* ---------- cronograma ---------- */
.dias{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-6)}
.dia-btn{
  position:relative;padding:.85rem 1.5rem;border:0;border-radius:var(--radio-full);
  background:var(--neg-700);color:var(--tinta-300);font-weight:700;font-size:var(--t-sm);
  letter-spacing:.08em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:all var(--vel-2) var(--curva)
}
.dia-btn small{display:block;font-size:10px;letter-spacing:.12em;color:var(--tinta-500);font-weight:600;margin-top:2px}
.dia-btn[aria-selected="true"]{background:var(--grad-marca);color:#fff;box-shadow:var(--luz-roja)}
.dia-btn[aria-selected="true"] small{color:rgba(255,255,255,.8)}
.dia-btn:hover:not([aria-selected="true"]){color:#fff;transform:translateY(-2px)}

.linea{position:relative;padding-left:var(--e-6);display:grid;gap:var(--e-3)}
.linea[hidden]{display:none}
.linea::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--rojo-500),var(--oro-500),transparent)}
.actividad{
  position:relative;padding:var(--e-5);border-radius:var(--radio);background:var(--neg-700);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform var(--vel-2) var(--curva),box-shadow var(--vel-2) var(--curva)
}
.actividad::before{content:'';position:absolute;left:calc(var(--e-6) * -1 + 4px);top:1.6rem;
  width:12px;height:12px;border-radius:50%;background:var(--neg-900);
  box-shadow:0 0 0 2.5px var(--rojo-500);transition:box-shadow var(--vel-2)}
.actividad:hover{transform:translateX(6px);box-shadow:inset 0 0 0 1px rgba(240,32,63,.35),0 20px 50px -34px #000}
.actividad:hover::before{box-shadow:0 0 0 2.5px var(--oro-500),0 0 18px rgba(242,183,5,.6)}
.actividad__alto{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1rem;margin-bottom:.4rem}
.actividad__hora{font-family:var(--tipo-display);font-size:var(--t-lg);color:var(--oro-500);
  font-variant-numeric:tabular-nums;line-height:1}
.actividad__eti{padding:.22rem .6rem;border-radius:var(--radio-full);font-size:9.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;background:rgba(240,32,63,.15);color:var(--rojo-400);
  box-shadow:inset 0 0 0 1px rgba(240,32,63,.3)}
.actividad__titulo{font-size:var(--t-md);font-family:var(--tipo-display);color:#fff;letter-spacing:.02em}
.actividad__desc{font-size:var(--t-sm);color:var(--tinta-300);margin:.45rem 0 0}
.actividad__meta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.6rem;font-size:var(--t-xs);
  color:var(--tinta-400);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.actividad__meta span{display:inline-flex;align-items:center;gap:.35rem}
.actividad__meta svg{width:13px;height:13px;color:var(--rojo-400)}

/* ---------- galería ---------- */
.rejilla-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  grid-auto-rows:180px;gap:var(--e-3)}
.foto{position:relative;border-radius:var(--radio);overflow:hidden;background:var(--neg-700);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);cursor:zoom-in}
.foto:nth-child(6n+1){grid-row:span 2}
.foto:nth-child(6n+4){grid-column:span 2}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--vel-4) var(--curva),filter var(--vel-3);
  filter:saturate(.85)}
.foto:hover img{transform:scale(1.07);filter:saturate(1.1)}
.foto__pie{position:absolute;inset:auto 0 0 0;padding:2.2rem .9rem .8rem;font-size:var(--t-sm);
  font-weight:600;color:#fff;background:linear-gradient(180deg,transparent,rgba(5,5,6,.9));
  opacity:0;transform:translateY(8px);transition:all var(--vel-2) var(--curva)}
.foto:hover .foto__pie{opacity:1;transform:none}

.visor{position:fixed;inset:0;z-index:90;background:rgba(4,4,6,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:var(--e-5);opacity:0;pointer-events:none;transition:opacity var(--vel-2)}
.visor[data-abierto="si"]{opacity:1;pointer-events:auto}
.visor img{max-width:min(94vw,1200px);max-height:88vh;border-radius:var(--radio);object-fit:contain;
  box-shadow:0 40px 100px -30px #000}
.visor__cerrar,.visor__ant,.visor__sig{position:absolute;width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;transition:background var(--vel-1)}
.visor__cerrar:hover,.visor__ant:hover,.visor__sig:hover{background:var(--rojo-500)}
.visor__cerrar{top:1.2rem;right:1.2rem}
.visor__ant{left:1.2rem;top:50%;transform:translateY(-50%)}
.visor__sig{right:1.2rem;top:50%;transform:translateY(-50%)}

/* ---------- patrocinadores ---------- */
/* Cada marca tiene su marco con espacio reservado para el logo. El marco
   se ve igual de bien vacío (con el nombre) que con la imagen puesta,
   porque la altura no depende del contenido. */
.patro-destacados{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--e-4);margin-bottom:var(--e-5)
}
.patro-rejilla{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--e-3)
}
.patro{
  display:grid;place-items:center;padding:var(--e-4);min-height:112px;
  border-radius:var(--radio);background:var(--neg-700);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform var(--vel-2) var(--curva),box-shadow var(--vel-2) var(--curva),background var(--vel-2)
}
.patro:hover{transform:translateY(-4px);background:var(--neg-600);box-shadow:var(--luz-oro)}
.patro img{max-height:62px;max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1) brightness(1.9) opacity(.72);transition:filter var(--vel-2)}
.patro:hover img{filter:none}

/* los tres principales: mismo lenguaje, un escalón más de presencia */
.patro--destacado{
  min-height:168px;padding:var(--e-5);
  background:linear-gradient(160deg,var(--neg-600),var(--neg-700));
  box-shadow:inset 0 0 0 1px rgba(242,183,5,.22),0 24px 60px -44px #000
}
.patro--destacado img{max-height:104px;filter:grayscale(.15) opacity(.95)}
.patro--destacado:hover img{filter:none}

.patro__nombre{
  font-family:var(--tipo-display);font-size:var(--t-base);letter-spacing:.07em;
  color:var(--tinta-400);text-align:center;line-height:1.25;transition:color var(--vel-2)
}
.patro:hover .patro__nombre{color:var(--tinta-100)}
.patro--destacado .patro__nombre{font-size:var(--t-lg);color:var(--tinta-200)}
.patro--hueco{border:1.5px dashed rgba(255,255,255,.14);background:transparent;box-shadow:none}
.patro--hueco .patro__nombre{color:var(--tinta-500);font-family:var(--tipo-texto);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700}

.marquesina{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);padding:var(--e-4) 0}
.marquesina__pista{display:flex;gap:var(--e-7);width:max-content;animation:desfilar 34s linear infinite}
.marquesina:hover .marquesina__pista{animation-play-state:paused}
.marquesina__pista img{height:44px;width:auto;object-fit:contain;filter:grayscale(1) brightness(1.9) opacity(.6);
  transition:filter var(--vel-2)}
.marquesina__pista img:hover{filter:none}
@keyframes desfilar{to{transform:translateX(-50%)}}

/* ---------- sede ---------- */
/* El protagonista es la dirección y el botón; el mapa es apoyo.
   Por eso van dentro de una sola tarjeta de alto acotado. */
.sede__tarjeta{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  border-radius:var(--radio-lg);overflow:hidden;background:var(--neg-700);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 36px 80px -50px #000
}
.sede__datos{
  padding:var(--e-6);display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(150deg,var(--neg-600),var(--neg-700))
}
.sede__insignia{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;margin-bottom:var(--e-4);
  padding:.3rem .75rem;border-radius:var(--radio-full);background:rgba(240,32,63,.14);
  color:var(--rojo-400);font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(240,32,63,.3)
}
.sede__insignia svg{width:12px;height:12px}
.sede__nombre{font-size:clamp(1.4rem,2.5vw,1.95rem);line-height:1.04;margin-bottom:.25rem}
.sede__alias{font-size:var(--t-sm);color:var(--oro-500);font-weight:700;margin-bottom:.8rem}
.sede__dir{color:var(--tinta-200);font-size:var(--t-base);margin-bottom:.3rem;line-height:1.5}
.sede__ref{color:var(--tinta-400);font-size:var(--t-sm);margin-bottom:var(--e-5)}
.sede__btn{align-self:flex-start}

.sede__mapa{position:relative;min-height:360px;background:var(--neg-800)}
.sede__mapa iframe,.sede__mapa img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
/* el mapa de Google trae mucho ruido: se apaga para que no compita */
.sede__mapa iframe{filter:grayscale(1) invert(.92) contrast(.82) brightness(.82)}

/* las formas de llegar van en fila: aplanan la sección en vez de alargarla */
.sede__comos{list-style:none;padding:0;margin:var(--e-3) 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e-3)}
.sede__como{display:flex;gap:.85rem;align-items:flex-start;padding:var(--e-4);
  border-radius:var(--radio);background:var(--neg-700);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font-size:var(--t-sm);color:var(--tinta-300)}
.sede__como b{display:block;color:var(--tinta-100);margin-bottom:.15rem;letter-spacing:.02em}
.sede__ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.06);color:var(--oro-500);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sede__ico svg{width:17px;height:17px}

/* ---------- registro ---------- */
.registro__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-8);align-items:start}
.tarjeta{padding:var(--e-6);border-radius:var(--radio-lg);background:var(--neg-700);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -50px #000}
.campo{margin-bottom:var(--e-4)}
.campo label{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--tinta-400);margin-bottom:.45rem}
.campo input,.campo textarea,.campo select{
  width:100%;padding:.9rem 1rem;border:0;border-radius:var(--radio-sm);background:var(--neg-800);
  color:#fff;font:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:box-shadow var(--vel-1),background var(--vel-1)
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;background:var(--neg-900);box-shadow:inset 0 0 0 1.5px var(--rojo-400),0 0 0 4px rgba(240,32,63,.12)}
.campo textarea{min-height:110px;resize:vertical}
.campo--trampa{position:absolute;left:-9999px;opacity:0}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4)}
.aviso-form{padding:.9rem 1.1rem;border-radius:var(--radio-sm);font-size:var(--t-sm);font-weight:600;display:none}
.aviso-form[data-tipo="ok"]{display:block;background:rgba(34,201,122,.14);color:var(--verde-400);
  box-shadow:inset 0 0 0 1px rgba(34,201,122,.3)}
.aviso-form[data-tipo="error"]{display:block;background:rgba(240,32,63,.14);color:var(--rojo-400);
  box-shadow:inset 0 0 0 1px rgba(240,32,63,.3)}
.dato{display:flex;gap:var(--e-4);padding:var(--e-4) 0;border-bottom:1px solid rgba(255,255,255,.07)}
.dato:last-child{border-bottom:0}
.dato__icono{width:44px;height:44px;border-radius:var(--radio-sm);display:grid;place-items:center;
  background:rgba(240,32,63,.12);color:var(--rojo-400);flex:none}
.dato__icono svg{width:20px;height:20px}
.dato__eti{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-400);font-weight:700}
.dato__valor{color:#fff;font-weight:600}
.mapa{margin-top:var(--e-5);border-radius:var(--radio);overflow:hidden;aspect-ratio:16/10;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mapa iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.85)}

/* ---------- pie ---------- */
.pie{padding:var(--e-8) 0 var(--e-6);background:var(--neg-800);border-top:1px solid rgba(255,255,255,.07)}
.pie__rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--e-7);margin-bottom:var(--e-7)}
.pie h4{font-size:var(--t-sm);letter-spacing:.2em;color:var(--tinta-300);margin-bottom:var(--e-4)}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.pie a{color:var(--tinta-400);font-size:var(--t-sm);transition:color var(--vel-1)}
.pie a:hover{color:var(--oro-500)}
.pie__redes{display:flex;gap:.6rem;margin-top:var(--e-4)}
.pie__redes a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:var(--tinta-300);transition:all var(--vel-1)}
.pie__redes a:hover{background:var(--grad-marca);color:#fff;transform:translateY(-3px)}
.pie__redes svg{width:17px;height:17px}
.pie__abajo{display:flex;flex-wrap:wrap;gap:var(--e-4);justify-content:space-between;
  padding-top:var(--e-5);border-top:1px solid rgba(255,255,255,.07);
  font-size:var(--t-xs);color:var(--tinta-500)}
.pie__bandera{height:3px;border-radius:3px;background:var(--grad-bandera);margin-bottom:var(--e-6)}

/* ---------- WhatsApp flotante ---------- */
.wa-flota{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:70;display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1.3rem .85rem .9rem;border-radius:var(--radio-full);
  background:linear-gradient(115deg,#128C7E,#25D366);color:#fff;font-weight:700;font-size:var(--t-sm);
  box-shadow:0 18px 44px -14px rgba(37,211,102,.7);
  transition:transform var(--vel-2) var(--curva),box-shadow var(--vel-2)
}
.wa-flota:hover{transform:translateY(-4px) scale(1.03)}
.wa-flota svg{width:26px;height:26px;flex:none}
.wa-flota__txt{display:inline-block;max-width:220px;overflow:hidden}
.wa-flota::before{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:pulso 2.6s var(--curva) infinite}
@keyframes pulso{to{box-shadow:0 0 0 22px rgba(37,211,102,0)}}

/* ---------- ventana emergente ---------- */
.emergente{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:var(--e-5);
  background:rgba(4,4,6,.86);backdrop-filter:blur(8px);opacity:0;pointer-events:none;
  transition:opacity var(--vel-3) var(--curva)}
.emergente[data-abierto="si"]{opacity:1;pointer-events:auto}
.emergente__caja{
  position:relative;width:min(100%,540px);max-height:88vh;overflow:auto;border-radius:var(--radio-lg);
  background:var(--neg-700);box-shadow:0 50px 110px -40px #000,inset 0 0 0 1px rgba(255,255,255,.1);
  transform:translateY(28px) scale(.96);transition:transform var(--vel-3) var(--curva)}
.emergente[data-abierto="si"] .emergente__caja{transform:none}
.emergente__caja img,.emergente__caja video{width:100%;display:block}
.emergente__cuerpo{padding:var(--e-6)}
.emergente__cerrar{position:absolute;top:.8rem;right:.8rem;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);z-index:2}
.emergente__cerrar:hover{background:var(--rojo-500)}
.emergente h3{font-size:var(--t-xl);margin-bottom:.6rem}
.video-caja{position:relative;aspect-ratio:16/9;background:#000}
.video-caja iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- animaciones al desplazar ---------- */
[data-anima]{opacity:0;transform:translateY(34px);
  transition:opacity .85s var(--curva),transform .85s var(--curva)}
[data-anima="izq"]{transform:translateX(-40px)}
[data-anima="der"]{transform:translateX(40px)}
[data-anima="escala"]{transform:scale(.94)}
[data-anima].visible{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .intro__rejilla,.registro__rejilla{grid-template-columns:1fr;gap:var(--e-5)}
  .pie__rejilla{grid-template-columns:1fr 1fr}
  .hero__puntos{display:none}
}
@media (max-width:900px){
  .sede__tarjeta{grid-template-columns:1fr}
  .sede__mapa{min-height:280px;order:-1}
}
@media (max-width:860px){
  :root{--nav-alto:64px}
  .nav__menu,.nav__acciones .btn--nav{display:none}
  .nav__hamburguesa{display:grid}
  body[data-menu="abierto"]{overflow:hidden}
  .nav__menu{
    position:fixed;inset:var(--nav-alto) 0 0 0;flex-direction:column;justify-content:center;
    gap:var(--e-5);background:rgba(5,5,6,.97);backdrop-filter:blur(20px);
    transform:translateX(100%);transition:transform var(--vel-3) var(--curva)
  }
  body[data-menu="abierto"] .nav__menu{display:flex;transform:none}
  .nav__menu a{font-size:var(--t-lg);font-family:var(--tipo-display)}
  .seccion{padding:var(--e-8) 0}
  .cifra{border-right:0;border-bottom:1px solid rgba(255,255,255,.06);padding:var(--e-5) var(--e-3)}
  .cifras__rejilla{grid-template-columns:1fr 1fr}
  .fila-2{grid-template-columns:1fr}
  .rejilla-galeria{grid-auto-rows:150px}
  .foto:nth-child(6n+4){grid-column:span 1}
  .pie__rejilla{grid-template-columns:1fr}
  .wa-flota__txt{display:none}
  .wa-flota{padding:1rem;border-radius:50%}
  /* ---- hero en móvil ---- */
  .hero{min-height:auto;padding:calc(var(--nav-alto) + var(--e-6)) 0 var(--e-7)}
  .hero__flecha{display:none}
  .btn--solo-escritorio{display:none}
  .hero__titulo{font-size:clamp(2.9rem,15vw,4.6rem);line-height:.96}
  .hero__kicker{margin-bottom:var(--e-3);font-size:10px;letter-spacing:.22em}
  .hero__kicker::before{width:22px}
  .hero__datos{margin:var(--e-4) 0 var(--e-4);gap:.45rem}
  .hero__datos li{width:100%;font-size:.76rem;letter-spacing:.06em;padding:.6rem .9rem}
  .hero__sub{font-size:.96rem;line-height:1.5;margin-bottom:var(--e-5);max-width:38ch}
  .hero__acciones{gap:.6rem;margin-bottom:var(--e-5)}
  .hero__acciones .btn{flex:1 1 100%;padding:1rem 1.2rem}
  .cuenta{gap:.45rem}
  .cuenta__casilla{flex:1;min-width:0;padding:.6rem .3rem .5rem}
  .cuenta__num{font-size:1.7rem}
  .cuenta__eti{font-size:8px;letter-spacing:.14em}
  /* el botón flotante de WhatsApp vive abajo a la derecha: hay que dejarle sitio */
  .hero__caja{padding-bottom:var(--e-6)}
  .cuenta__casilla{min-width:72px;padding:.7rem .8rem .6rem}
  .rejilla-ponentes{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .ponente__bio{display:none}
}
@media (max-width:760px){
  .banda__caja{flex-wrap:wrap;gap:.6rem var(--e-4)}
  .banda__eti{max-width:none}
  .banda__ventana{order:3;width:100%;flex-basis:100%}
  .banda__mas{margin-left:auto}
}
@media (max-width:640px){
  /* en pantalla angosta: destacados a lo ancho y marcas de dos en dos,
     si no la sección se vuelve una tira larguísima */
  .patro-destacados{grid-template-columns:1fr;gap:var(--e-3)}
  .patro--destacado{min-height:132px}
  .patro-rejilla{grid-template-columns:1fr 1fr;gap:var(--e-2)}
  .patro{min-height:94px;padding:var(--e-3)}
  .patro__nombre{font-size:var(--t-sm)}
  .patro--destacado .patro__nombre{font-size:var(--t-md)}
  .patro img{max-height:48px}
  .patro--destacado img{max-height:82px}
}
/* pantallas cortas (iPhone SE y similares): el contador se cortaba */
@media (max-width:860px) and (max-height:700px){
  .hero{padding:calc(var(--nav-alto) + var(--e-4)) 0 var(--e-5)}
  .hero__titulo{font-size:clamp(2.4rem,12.5vw,3.4rem)}
  .hero__datos{margin:var(--e-3) 0}
  .hero__datos li{padding:.45rem .8rem;font-size:.72rem}
  .hero__sub{font-size:.9rem;margin-bottom:var(--e-4)}
  .hero__acciones{margin-bottom:var(--e-4)}
  .hero__acciones .btn{padding:.85rem 1.1rem}
  .cuenta__casilla{padding:.5rem .25rem .4rem}
  .cuenta__num{font-size:1.45rem}
}
@media (max-width:520px){
  .contenedor,.angosto{width:calc(100% - 2rem)}
  .cuenta{gap:.5rem}
  .btn{padding:.9rem 1.4rem;font-size:var(--t-xs)}
  .hero__acciones .btn{flex:1 1 100%}
  .rejilla-galeria{grid-template-columns:1fr 1fr;grid-auto-rows:120px}
  .foto:nth-child(6n+1){grid-row:span 1}
}

/* ═══════════════════════════════════════════════════════════════
   MÓVIL — ajustes de fondo
   Tres problemas reales que se corrigen aquí:
   1) la barra fija translúcida dejaba leer el texto por debajo;
   2) el botón flotante de WhatsApp tapaba botones y títulos;
   3) el ritmo vertical de escritorio dejaba todo amontonado.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  /* 1 · la barra deja de ser transparente: nada se lee por debajo */
  .nav{height:58px}
  .nav[data-fijo="si"]{height:58px}
  .nav[data-fijo="si"]::before{background:rgba(6,6,8,.985);backdrop-filter:blur(20px)}
  .nav__sello{width:42px;height:42px}
  .nav__marca b{font-size:1.05rem}
  .nav__marca span{font-size:8px;letter-spacing:.22em}

  /* 2 · el flotante se achica y se aparta cuando estorba */
  .wa-flota{right:.9rem;bottom:.9rem;padding:.85rem;
    box-shadow:0 10px 26px -8px rgba(37,211,102,.6)}
  .wa-flota svg{width:24px;height:24px}
  .wa-flota::before{animation:none}
  .wa-flota[data-oculto="si"]{transform:translateY(140%) scale(.8);opacity:0;pointer-events:none}

  /* 3 · ritmo vertical propio de móvil */
  .seccion{padding:var(--e-7) 0}
  .cabecera-seccion{margin-bottom:var(--e-5)}
  .titulo-seccion{font-size:clamp(1.85rem,7.5vw,2.6rem);margin:.6rem 0 .7rem}
  .texto-seccion{font-size:.96rem;line-height:1.55}
  .kicker{font-size:10px;letter-spacing:.2em}
  .kicker::before{width:22px}
  body{font-size:.96rem;line-height:1.55}
  .lista-check{gap:var(--e-4)}
  .lista-check li{font-size:.94rem;line-height:1.5}

  /* tarjetas de ponente: menos altas y sin texto repetido */
  .ponente{aspect-ratio:3/4}
  .ponente__pie{padding:var(--e-5) var(--e-3) var(--e-3)}
  .ponente__nombre{font-size:var(--t-base)}
  .ponente__cargo{font-size:9px;letter-spacing:.1em}
  .ponente__vacio{font-size:.72rem;padding:0 .5rem;text-align:center}

  /* banda: el rótulo y el enlace no compiten con los logos */
  .banda{padding:var(--e-3) 0}
  .banda__eti{font-size:8.5px;letter-spacing:.18em;order:1}
  .banda__mas{font-size:9.5px;letter-spacing:.1em;order:2}
  .banda__marca{height:32px;font-size:.8rem}
  .banda__marca img{max-height:26px}

  /* cifras: dos columnas con aire propio */
  .cifra__valor{font-size:2.1rem}
  .cifra__eti{font-size:9.5px;letter-spacing:.14em}

  /* cronograma y actividades */
  .linea{padding-left:var(--e-5)}
  .linea::before{left:5px}
  .actividad::before{left:calc(var(--e-5) * -1 + 3px);width:10px;height:10px}
  .actividad{padding:var(--e-4)}
  .actividad__titulo{font-size:1rem}
  .actividad__desc{font-size:.9rem}
  .dia-btn{padding:.7rem 1.1rem;font-size:.8rem}

  /* sede */
  .sede__datos{padding:var(--e-5)}
  .sede__como{padding:var(--e-3);font-size:.88rem}
  .sede__comos{gap:var(--e-2)}

  /* formulario */
  .tarjeta{padding:var(--e-5)}
  .campo input,.campo textarea{font-size:16px}  /* evita el zoom automático de iOS */
  .dato{padding:var(--e-3) 0;gap:var(--e-3)}
  .dato__icono{width:38px;height:38px}
  .dato__valor{font-size:.95rem}

  /* pie */
  .pie{padding:var(--e-7) 0 var(--e-5)}
  .pie__rejilla{gap:var(--e-5)}
}