/* =========================================================
   NUTRICLUB 360° — Landing
   Paleta: primario #6300bf · secundarios #a81dfe / #66e5fb
   ========================================================= */
:root{
  --p:#6300bf;            /* primario (domina) */
  --p-mid:#4c0093;
  --p-deep:#2b0055;
  --p-ink:#150029;        /* fondo base */
  --s1:#a81dfe;           /* secundario 1 */
  --s2:#66e5fb;           /* secundario 2 */
  --grad:linear-gradient(115deg,#6300bf 0%,#a81dfe 52%,#66e5fb 100%);
  /* Degradado de acento para títulos: celeste → azul, tomado del propio
     logo (mismos matices que usan las flechas del "360°"). */
  --grad-blue:linear-gradient(115deg,#66e5fb 0%,#3aa1fc 55%,#5b79fd 100%);
  --grad-soft:linear-gradient(115deg,rgba(99,0,191,.65),rgba(168,29,254,.55) 55%,rgba(102,229,251,.45));
  --white:#fff;
  --txt:rgba(255,255,255,.78);
  --txt-dim:rgba(255,255,255,.55);
  --glass:rgba(255,255,255,.055);
  --glass-brd:rgba(255,255,255,.14);
  --radius:clamp(16px,3.6vw,22px);
  --shadow:0 24px 60px rgba(0,0,0,.35);

  /* ---- Escala fluida: todo escala solo entre 320px y 1440px, sin saltos ----
     Se usan clamp(mínimo, preferido en vw, máximo). El breakpoint de 768px
     solo cambia estructura (columnas, menú), nunca tamaños de texto. */
  --fs-h1:clamp(2.3rem,10.5vw,6.6rem);
  --fs-h2:clamp(1.55rem,5.2vw,3rem);
  --fs-h3:clamp(1.02rem,2.9vw,1.3rem);
  --fs-body:clamp(.92rem,2.4vw,1.06rem);
  --fs-small:clamp(.84rem,2.1vw,.95rem);
  --fs-eyebrow:clamp(.65rem,1.7vw,.74rem);
  --fs-btn:clamp(.85rem,2vw,.95rem);

  --sp-section:clamp(2rem,4vw,3rem);
  --sp-card:clamp(1.3rem,4.4vw,2rem);
  --gap:clamp(.9rem,2.4vw,1.6rem);
}

*{margin:0;padding:0;box-sizing:border-box}
/* scroll-padding-top: cuando se navega a un #id, el navegador deja este espacio
   arriba, así la sección no queda oculta bajo el navbar fijo (~64px escritorio, 46 móvil) */
html{scroll-behavior:smooth;scroll-padding-top:clamp(70px,10vw,90px)}
body{
  font-family:'Inter',sans-serif;color:var(--txt);line-height:1.7;font-size:var(--fs-body);
  background:var(--p-ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:'Sora','Inter',sans-serif;color:var(--white);line-height:1.15;font-weight:800}
/* Ninguna palabra larga puede desbordar su caja en pantallas angostas */
h1,h2,h3,h4,p,li,a,span,button{overflow-wrap:break-word}
.container{width:min(1180px,91%);margin:0 auto}
/* Visible solo para lectores de pantalla y buscadores */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:var(--s1);color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0e001c}
::-webkit-scrollbar-thumb{background:linear-gradient(#6300bf,#a81dfe);border-radius:10px}

/* ---------- Texto degradado (títulos H2) ---------- */
.grad-text{
  background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:200% 100%;background-repeat:no-repeat;animation:gradShift 7s ease-in-out infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- Barra de progreso ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:var(--grad);box-shadow:0 0 14px rgba(168,29,254,.8);transition:width .1s linear;
}

/* ---------- Fondo animado ---------- */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-fx::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(1100px 700px at 78% -10%,rgba(99,0,191,.55),transparent 62%),
    radial-gradient(900px 620px at 8% 12%,rgba(168,29,254,.32),transparent 60%),
    radial-gradient(800px 600px at 50% 110%,rgba(102,229,251,.14),transparent 60%),
    linear-gradient(180deg,#150029 0%,#1c0038 45%,#100021 100%);
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;will-change:transform}
.orb--1{width:520px;height:520px;background:#6300bf;top:-120px;left:-100px;animation:float1 20s ease-in-out infinite}
.orb--2{width:440px;height:440px;background:#a81dfe;top:38%;right:-140px;animation:float2 26s ease-in-out infinite}
.orb--3{width:380px;height:380px;background:#66e5fb;bottom:-120px;left:28%;opacity:.22;animation:float3 23s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,70px) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,-90px) scale(1.08)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-60px) scale(1.15)}}
.grid-fx{
  position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 72%);
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 72%);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.8rem clamp(1.1rem,3.4vw,1.7rem);border-radius:50px;font-weight:700;font-size:var(--fs-btn);
  min-height:46px;line-height:1.25;
  cursor:pointer;border:2px solid transparent;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),box-shadow .3s,background .3s,color .3s;
  text-align:center;
}
.btn--sm{padding:.55rem 1.1rem;font-size:clamp(.78rem,1.9vw,.84rem);min-height:40px}
/* Solo lo usa la barra del contador: escala junto con ella */
.btn--xs{padding:.28rem clamp(.9rem,2.6vw,1.2rem);font-size:clamp(.74rem,2.2vw,1.03rem);min-height:clamp(32px,4.3vw,40px);gap:.4rem;border-width:1px}
.btn--lg{padding:.95rem clamp(1.3rem,4vw,2.2rem);font-size:clamp(.9rem,2.2vw,1rem);min-height:54px}
.btn i{transition:transform .3s}
.btn:hover i.fa-arrow-right{transform:translateX(4px)}

/* Los botones tienen border:2px transparente. Por defecto el degradado se
   POSICIONA respecto al padding box pero se PINTA hasta el border box, dejando
   2px sin cubrir: con repeat asomaba 1px de cian (#66e5fb) y con no-repeat las
   puntas quedaban transparentes (cortadas). background-origin:border-box hace
   que ambas cajas coincidan, así el degradado llena el botón entero. */
.btn--primary,.btn--cta{
  background:var(--grad);color:#fff;
  background-size:180% 100%;background-repeat:no-repeat;background-origin:border-box;
}
.btn--primary:hover{background-position:100% 0;transform:translateY(-3px);box-shadow:0 12px 30px rgba(168,29,254,.5)}

.btn--cta{box-shadow:0 10px 30px rgba(99,0,191,.45)}
.btn--cta::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);
  transform:translateX(-120%);transition:transform .7s;
}
.btn--cta:hover::after{transform:translateX(120%)}
.btn--cta:hover{background-position:100% 0;transform:translateY(-3px);box-shadow:0 16px 40px rgba(168,29,254,.6)}

.btn--ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:var(--s2);color:#fff;transform:translateY(-3px)}

.btn--soft{background:rgba(102,229,251,.12);color:var(--s2);border-color:rgba(102,229,251,.35)}
.btn--soft:hover{background:var(--s2);color:#10002a;transform:translateY(-3px);box-shadow:0 12px 28px rgba(102,229,251,.35)}

/* ---------- Header (estilo Nutraline: píldora glass flotante) ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;padding:1.1rem 0;transition:transform .45s ease}
.site-header.nav-hidden{transform:translateY(-160%)}
.navbar{
  position:relative;width:min(1320px,94%);margin:0 auto;border-radius:46px;
  background:rgba(30,0,58,.42);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 34px rgba(0,0,0,.3);transition:background .35s;
}
.site-header.scrolled .navbar{background:rgba(21,0,41,.78);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem .5rem 1.7rem}
.logo{position:relative;color:#fff;display:flex;align-items:center;gap:clamp(.55rem,1.6vw,.85rem)}
.logo__img{height:clamp(30px,4vw,40px);width:auto;display:block;transition:transform .35s}
.logo__img--brand{height:clamp(18px,2.4vw,26px)}   /* el logo Allnutrition es 6:1, va más chico */
.logo:hover .logo__img{transform:scale(1.04)}
.logo__sep{
  display:inline-block;width:1px;height:clamp(20px,2.6vw,28px);
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  flex:0 0 auto;
}
.nav{display:flex;gap:1.7rem;margin-left:auto;margin-right:1.5rem}
.nav a{font-weight:500;color:#fff;position:relative;transition:.3s;font-size:.93rem}
.nav a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--grad);transition:.3s}
.nav a:hover,.nav a.is-active{color:var(--s2)}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.header__cta{padding:.6rem 1.35rem;font-size:.86rem}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;color:#fff;cursor:pointer}
.nav-overlay{display:none}

/* ---------- Contador ---------- */
/* ---------- Contador: barra compacta, más baja que el navbar ---------- */
/* El espacio para el navbar fijo lo aporta ahora .intro, que va encima */
.countdown{position:relative;z-index:2;padding:0}
.countdown__bar{
  /* La píldora se ajusta al contenido y se centra: así los bordes quedan
     pegados al reloj y al botón, en vez de ocupar todo el ancho vacío. */
  width:max-content;max-width:100%;margin:0 auto;
  border-radius:50px;
  padding:clamp(.25rem,.55vw,.33rem) clamp(.3rem,.6vw,.4rem) clamp(.25rem,.55vw,.33rem) clamp(.75rem,2.8vw,1.3rem);
  /* Gris sólido: contrasta con el fondo morado y despega la barra visualmente */
  background:#d7d9de;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.7);
  position:relative;overflow:hidden;
}
/* Una sola fila, sin wrap: la barra nunca crece de alto */
.cd-state{
  display:none;position:relative;z-index:1;
  align-items:center;justify-content:center;gap:clamp(.5rem,2.2vw,1.3rem);
  /* En escritorio la barra crece ~30%; en móvil se frena para seguir siendo
     más baja que el navbar (46px), que es el requisito que ya tenía. */
  flex-wrap:nowrap;min-height:clamp(32px,4.3vw,40px);
}
.cd-state.is-on{display:flex;animation:cdIn .6s cubic-bezier(.22,1,.36,1) both}
@keyframes cdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Todo el texto va oscuro para leer bien sobre el gris */
.cd__label{
  color:#1c0034;font-weight:700;font-size:clamp(.8rem,2.4vw,1.17rem);
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;flex:0 0 auto;
}
.cd__label i{color:var(--p)}
.cd__label strong{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-repeat:no-repeat}
.cd__tail{
  color:#3a2a55;font-size:clamp(.8rem,2.4vw,1.17rem);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.cd__tail strong{color:#1c0034;font-weight:700}

/* Reloj en línea: dígitos + letra de unidad, sin cajas */
.cd__clock{display:inline-flex;align-items:baseline;gap:clamp(.35rem,1.7vw,.91rem);flex:0 0 auto;white-space:nowrap}
.cd__u{
  font-size:clamp(.7rem,2vw,.96rem);font-weight:700;color:#5a4a76;
  display:inline-flex;align-items:baseline;gap:1px;
}
.cd__u b{
  font-family:'Sora',sans-serif;font-weight:800;color:#1c0034;
  font-size:clamp(1.05rem,3.2vw,1.5rem);line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  display:inline-block;transition:transform .25s cubic-bezier(.34,1.5,.64,1);
}
.cd__u b.tick{transform:translateY(-3px)}
/* El botón NO se empuja al borde: el bloque completo va centrado en la barra */
.cd-state .btn{flex:0 0 auto}

.live-dot{width:clamp(9px,1vw,12px);height:clamp(9px,1vw,12px);border-radius:50%;background:#ff3b6b;display:inline-block;position:relative;flex:0 0 auto}
.live-dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,59,107,.6);animation:pulseRing 1.6s ease-out infinite}
@keyframes pulseRing{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* ---------- Bloque superior (contador + hero sobre la imagen de fondo) ---------- */
.top-visual{position:relative;z-index:2;overflow:hidden;isolation:isolate}
/* Capa de parallax. Mide 160% del alto del bloque y arranca desplazada -30%,
   así el JS puede moverla hasta +30% sin descubrir nunca los bordes. */
.hero__bg{
  position:absolute;left:0;right:0;top:-30%;height:160%;z-index:0;
  background:url('../img/hero-bg.webp') center center/cover no-repeat;
  will-change:transform;
}
/* Velo: oscurece lo justo para que el texto blanco tenga contraste */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(21,0,41,.15),rgba(21,0,41,.6) 70%),
    linear-gradient(180deg,rgba(21,0,41,.55) 0%,rgba(21,0,41,.2) 30%,rgba(21,0,41,.9) 100%);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;z-index:2;text-align:center;
  padding:clamp(1.4rem,4vw,2.4rem) 0 clamp(2.4rem,6vw,3.4rem);
}

/* Cifras: ya fuera de la imagen de fondo */
.stats-band{position:relative;z-index:2;padding:clamp(2rem,5vw,3rem) 0}

/* ---------- Franja oscura para separar secciones ----------
   Morado oscuro sólido y parejo, sin degradados en los bordes. */
.band::before{
  content:'';position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;
  background:#15002c;
}
.hero__glow{
  /* Halo que sigue al puntero — desactivado. Para reactivarlo, cambiar
     display:none por display:block. El JS que lo mueve queda vivo pero
     escribe estilos en un elemento invisible, así que no molesta. */
  display:none;
  position:absolute;z-index:1;width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(168,29,254,.28),transparent 62%);
  transform:translate(-50%,-50%);left:50%;top:40%;transition:left .5s ease,top .5s ease;
}
.hero__content{position:relative;z-index:2}
/* Entradilla sobre el contador: es lo primero que se lee, así que pesa más
   que un párrafo normal (tamaño de subtítulo, no de cuerpo). */
.intro{position:relative;z-index:2;padding:clamp(6rem,15vw,7.6rem) 0 clamp(.9rem,2.4vw,1.4rem)}
/* Fila 1 — Logo Allnutrition, grande y centrado.
   Alto reducido un 20% respecto de la versión anterior (50/9vw/90 → 40/7.2vw/72). */
.intro__brand{
  display:block;margin:0 auto clamp(1rem,3vw,1.6rem);
  height:clamp(40px,7.2vw,72px);width:auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* Fila 2 — "Te invita a este [28 de agosto] a [logo Nutriclub 360°]" */
.intro__hero{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(.8rem,2.5vw,1.6rem);margin:0 auto clamp(1rem,2.6vw,1.4rem);
  font-family:'Sora','Inter',sans-serif;font-weight:700;color:#fff;
  font-size:clamp(1.35rem,4vw,2.35rem);text-align:center;line-height:1.15;letter-spacing:-.5px;
}
.intro__hero-text{max-width:100%}
.intro__hero strong{
  font-weight:800;
  background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;background-repeat:no-repeat;
}
/* Logo Nutriclub 360° — alto suficiente para pesar visualmente igual que el texto */
.intro__hero-mark{
  height:clamp(60px,10vw,110px);width:auto;flex:0 0 auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* Bajada más discreta */
.intro__text{
  max-width:640px;margin:0 auto;text-align:center;text-wrap:pretty;
  font-family:'Inter',sans-serif;font-weight:400;
  font-size:clamp(.9rem,2.1vw,1.05rem);line-height:1.55;color:rgba(255,255,255,.75);
}
.intro__text strong{color:#fff;font-weight:600}

/* En móvil el logo Nutriclub 360° cae debajo del texto: el flex-wrap se
   ocupa solo, y al ir en columna evita romper con "IV" pegado al lado.
   El salto que parte "Te invita a este / 28 de agosto a" solo se aplica en
   desktop; en móvil se anula para que el texto vuelva a ser una sola frase. */
@media(max-width:520px){
  .intro__hero{gap:.6rem;flex-direction:column}
  .intro__hero-mark{height:clamp(58px,20vw,80px)}
  .br-desktop{display:none}
}
.hero__stats{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,45%),1fr));
  gap:clamp(1.2rem,3vw,1rem);
}

/* ---------- Exponentes (carrusel del hero) ---------- */
.speakers{position:relative;z-index:2;margin-top:clamp(1rem,3vw,1.8rem)}
/* Título "EXPONENTES" con líneas a ambos lados, como en la pieza gráfica */
.speakers__label{
  display:flex;align-items:center;gap:clamp(.9rem,3vw,1.6rem);
  width:min(1180px,91%);margin:0 auto clamp(1.2rem,3.5vw,1.8rem);
}
.speakers__label::before,.speakers__label::after{
  content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
.speakers__label span{
  font-size:clamp(.72rem,2vw,.92rem);font-weight:800;letter-spacing:clamp(2px,.6vw,5px);
  text-transform:uppercase;color:#fff;white-space:nowrap;
}

/* El padding inferior debe superar el alcance de la sombra del hover: el
   .marquee tiene overflow:hidden y si no, corta el glow en seco.
   Doble clase a propósito: la regla base .marquee está más abajo en el archivo
   y con una sola clase ganaba ella por orden. */
.marquee.marquee--speakers{padding:clamp(.8rem,2.4vw,1.2rem) 0 clamp(2.4rem,5.5vw,3.2rem)}
.marquee--speakers .marquee__group{gap:clamp(.7rem,2.2vw,1.1rem);padding-right:clamp(.7rem,2.2vw,1.1rem);align-items:stretch}

.sp-card{
  flex:0 0 auto;width:clamp(212px,58vw,272px);
  display:flex;flex-direction:column;text-align:left;overflow:hidden;
  border-radius:clamp(16px,3.6vw,22px);
  /* Glassmorphism: reemplaza el fondo blanco de la pieza original */
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 18px 44px rgba(12,0,28,.4),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s;
}
/* Solo en dispositivos con puntero: en táctil el :hover se queda "pegado"
   tras un tap y además ahí no hace falta reservar espacio para la sombra. */
@media (hover:hover){
  .sp-card:hover{transform:translateY(-8px);border-color:rgba(102,229,251,.6);box-shadow:0 18px 42px rgba(102,229,251,.24),inset 0 1px 0 rgba(255,255,255,.35)}
}

.sp-card__photo{position:relative;height:clamp(226px,60vw,296px);overflow:hidden}
.sp-card__photo img{
  /* 50% 0%: la cabeza arranca al 2-3% del alto en las 6 fotos, así el
     rostro entra completo sin recortar la coronilla. */
  width:100%;height:100%;object-fit:cover;object-position:50% 0%;
  /* Los PNG son recortes con alfa: el glass se ve a través del fondo */
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.sp-card:hover .sp-card__photo img{transform:scale(1.05)}
/* Difuminado inferior: funde la foto con el panel de texto */
.sp-card__photo::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:38%;pointer-events:none;
  background:linear-gradient(180deg,rgba(60,0,117,0),rgba(60,0,117,.45) 55%,rgba(60,0,117,.8));
}
.sp-card__info{
  position:relative;padding:clamp(.7rem,2.4vw,.95rem) clamp(.75rem,2.6vw,1rem) clamp(.85rem,2.8vw,1.1rem);
  background:linear-gradient(180deg,rgba(60,0,117,.8),rgba(43,0,85,.62));
  border-top:1px solid rgba(255,255,255,.14);flex:1;
}
.sp-card__name{display:flex;flex-direction:column;line-height:1.12;margin-bottom:.4rem}
.sp-card__name strong{font-family:'Sora',sans-serif;font-size:clamp(1.05rem,2.9vw,1.2rem);font-weight:800;color:#fff}
.sp-card__name span{font-size:clamp(.88rem,2.4vw,1rem);font-weight:500;color:rgba(255,255,255,.82)}
.sp-card__topic{
  font-size:clamp(.76rem,2vw,.84rem);line-height:1.4;font-weight:600;
  color:rgba(255,255,255,.9);text-wrap:pretty;
}
.stat__num{display:block;font-family:'Sora',sans-serif;font-size:clamp(1.7rem,5vw,2.3rem);font-weight:800;color:#fff}
.stat__cap{font-size:clamp(.68rem,1.8vw,.78rem);letter-spacing:.8px;text-transform:uppercase;color:var(--txt-dim);font-weight:600;line-height:1.35;display:block}

/* ---------- Secciones ---------- */
.section{position:relative;z-index:2;padding:var(--sp-section) 0}
.section--marcas{padding:clamp(1.8rem,3.4vw,2.4rem) 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-eyebrow);font-weight:800;
  letter-spacing:clamp(1.4px,.28vw,2.4px);text-transform:uppercase;color:var(--s2);margin-bottom:.9rem;
}
.section__title{font-size:var(--fs-h2);letter-spacing:-1px;text-wrap:balance}
.section__sub{margin-top:.9rem;max-width:640px;font-size:var(--fs-body);color:var(--txt);text-wrap:pretty}
.section--marcas .section__sub,.section--bloques .section__sub,.section--programa .section__sub,
.section--mapa .section__sub{margin-left:0}

/* ---------- Carrusel de marcas ---------- */
.marquee{
  /* El padding tiene que superar el alcance de la sombra del hover: como hay
     overflow:hidden, cualquier glow que sobresalga se corta en seco. */
  margin-top:clamp(1.2rem,3vw,1.9rem);overflow:hidden;position:relative;
  padding:clamp(1rem,2.6vw,1.4rem) 0 clamp(2.2rem,4.8vw,3.1rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
/* Arrastrable: pan-y deja que el navegador siga haciendo scroll vertical
   mientras nosotros nos quedamos con el gesto horizontal. */
.marquee{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.marquee.is-dragging{cursor:grabbing}
.marquee img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
/* Durante el arrastre se congelan hover y transiciones para que no salte */
.marquee.is-dragging .brand,.marquee.is-dragging .sp-card{transition:none}
.marquee.is-dragging .sp-card:hover,.marquee.is-dragging .brand:hover{transform:none}

.marquee__track{display:flex;width:max-content;animation:scrollX 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee.is-dragging .marquee__track{animation:none}
.marquee__group{display:flex;gap:clamp(.8rem,2.6vw,1.4rem);padding-right:clamp(.8rem,2.6vw,1.4rem)}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brand{
  flex:0 0 auto;width:clamp(150px,42vw,210px);height:clamp(76px,20vw,100px);display:grid;place-items:center;border-radius:clamp(13px,3.2vw,18px);
  background:var(--glass);border:1px solid var(--glass-brd);
  transition:transform .35s cubic-bezier(.34,1.4,.64,1),border-color .35s,box-shadow .35s,background .35s;
}
/* Los logos vienen con proporciones muy distintas (de 42x42 a 178x43).
   Los límites van en unidades ABSOLUTAS a propósito: con porcentajes, el
   max-height se resolvía contra la altura automática de cada imagen y cada
   logo terminaba a una escala distinta (los cuadrados salían del doble de alto).
   Con px todos comparten el mismo alto máximo y quedan ópticamente parejos. */
.brand img{
  max-width:clamp(104px,30vw,152px);
  max-height:clamp(40px,10.5vw,54px);
  width:auto;height:auto;object-fit:contain;opacity:.85;transition:opacity .35s;
}
@media (hover:hover){
  .brand:hover{transform:translateY(-8px) scale(1.04);border-color:rgba(102,229,251,.55);background:rgba(102,229,251,.08);box-shadow:0 16px 36px rgba(102,229,251,.18)}
  .brand:hover img{opacity:1}
}

/* ---------- Bloques ---------- */
/* Aviso: solo se puede postular a UN bloque */
.one-block{
  display:flex;gap:.9rem;align-items:flex-start;
  margin-top:clamp(1.2rem,3vw,1.6rem);padding:clamp(.9rem,2.6vw,1.15rem) clamp(1rem,3vw,1.3rem);
  border-radius:16px;background:rgba(255,159,28,.1);border:1px solid rgba(255,159,28,.45);
  box-shadow:inset 3px 0 0 #ff9f1c;
}
.one-block i{color:#ff9f1c;font-size:1.15rem;margin-top:.15rem;flex:0 0 auto}
.one-block p{font-size:var(--fs-small);line-height:1.55;text-wrap:pretty;margin:0}
.one-block strong{color:#fff}

.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--gap);margin-top:clamp(1.4rem,3.6vw,2.2rem)}
.block-card{
  position:relative;border-radius:var(--radius);padding:var(--sp-card);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s;
}
.block-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);opacity:.9;
}
.block-card:hover{border-color:rgba(168,29,254,.5);box-shadow:0 26px 60px rgba(99,0,191,.35)}
.block-card__tag{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;padding:.35rem .9rem;border-radius:50px;margin-bottom:.9rem;
}
.block-card__tag--am{background:rgba(102,229,251,.16);color:var(--s2);border:1px solid rgba(102,229,251,.35)}
.block-card__tag--pm{background:rgba(168,29,254,.18);color:#dcb3ff;border:1px solid rgba(168,29,254,.42)}
.block-card h3{font-size:clamp(1.5rem,4.6vw,1.9rem)}
.block-card__hours{font-family:'Sora',sans-serif;font-size:clamp(.98rem,2.8vw,1.1rem);font-weight:700;color:#fff;margin-top:.2rem}
.block-card__list{margin:clamp(1.1rem,3vw,1.4rem) 0 clamp(1.2rem,3.4vw,1.6rem);display:grid;gap:.6rem}
.block-card__list li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-small)}
/* Dos botones: se reparten el ancho y se apilan si no caben */
.block-card__actions{display:flex;gap:.7rem;flex-wrap:wrap}
.block-card__actions .btn{flex:1 1 auto;min-width:min(150px,100%)}
.block-card__list i{color:var(--s2);margin-top:.42rem;font-size:.78rem}

/* ---------- Programa (tabs + timeline) ---------- */
.tabs{margin-top:clamp(1.8rem,5vw,2.6rem)}
/* Grilla de 2 columnas iguales: en móvil se apilan y la píldora sigue cuadrando,
   porque el JS la posiciona con left/top/width/height del tab activo. */
.tabs__nav{
  position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem;
  padding:.35rem;border-radius:clamp(20px,6vw,50px);
  background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);
  margin-bottom:clamp(1.5rem,4.5vw,2.2rem);width:max-content;max-width:100%;
}
.tab{
  position:relative;z-index:2;background:none;border:none;cursor:pointer;color:var(--txt);
  font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(.78rem,2.1vw,.9rem);
  padding:.7rem clamp(.7rem,2.6vw,1.5rem);border-radius:50px;min-height:44px;line-height:1.25;
  transition:color .3s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
}
.tab.is-active{color:#fff}
.tabs__pill{
  position:absolute;z-index:1;top:.35rem;left:.35rem;height:0;width:0;border-radius:50px;background:var(--grad);
  box-shadow:0 8px 24px rgba(168,29,254,.45);
  transition:left .45s cubic-bezier(.22,1,.36,1),top .45s cubic-bezier(.22,1,.36,1),
             width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1);
}
.tabs__panel{display:none}
.tabs__panel.is-on{display:block}
.tabs__panel.is-on .tl-item{animation:tlIn .55s cubic-bezier(.22,1,.36,1) both}
.tabs__panel.is-on .tl-item:nth-child(1){animation-delay:.02s}
.tabs__panel.is-on .tl-item:nth-child(2){animation-delay:.09s}
.tabs__panel.is-on .tl-item:nth-child(3){animation-delay:.16s}
.tabs__panel.is-on .tl-item:nth-child(4){animation-delay:.23s}
.tabs__panel.is-on .tl-item:nth-child(5){animation-delay:.3s}
@keyframes tlIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}

/* Riel y puntos alineados sobre el mismo eje.
   --rail-x = centro del riel; --rail-pad = sangría de las tarjetas.
   El -1px descuenta el borde de .tl-item, porque el punto se posiciona
   respecto a su caja de padding y antes quedaba 5px corrido. */
.timeline{--rail-x:7px;--rail-pad:28px;position:relative;display:grid;gap:1rem;padding-left:var(--rail-pad)}
.timeline::before{
  content:'';position:absolute;left:var(--rail-x);top:14px;bottom:14px;width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--s1),var(--s2));opacity:.45;
}
.tl-item{
  position:relative;display:grid;grid-template-columns:clamp(64px,8vw,86px) minmax(0,1fr);
  gap:clamp(.7rem,2.4vw,1.2rem);align-items:center;
  padding:clamp(.9rem,2.8vw,1.1rem) clamp(1rem,3.2vw,1.4rem);border-radius:clamp(14px,3.4vw,18px);
  background:var(--glass);border:1px solid var(--glass-brd);
  transition:transform .35s cubic-bezier(.34,1.3,.64,1),border-color .35s,background .35s,box-shadow .35s;
}
.tl-item::before{
  content:'';position:absolute;left:calc(var(--rail-x) - var(--rail-pad) - 1px);top:50%;
  transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;background:var(--s2);box-shadow:0 0 0 4px rgba(102,229,251,.18);
}
.tl-item:hover{transform:translateX(8px);border-color:rgba(102,229,251,.45);background:rgba(255,255,255,.09);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.tl-item--plain{opacity:.85}
.tl-item--plain::before{background:rgba(255,255,255,.4);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.tl-item--coffee::before{background:var(--s1);box-shadow:0 0 0 4px rgba(168,29,254,.2)}
.tl-time{
  font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(1rem,2.9vw,1.15rem);
  color:var(--s2);   /* celeste sólido: más legible que el degradado morado */
}
.tl-body{display:flex;align-items:center;gap:clamp(.7rem,2.4vw,1rem);min-width:0}
.tl-body>div{min-width:0}
.tl-body h4{font-size:var(--fs-h3);margin-bottom:.15rem}
.tl-body h4 i{color:var(--s1);margin-right:.35rem}
.tl-body p{font-size:var(--fs-small);color:var(--txt);line-height:1.5;text-wrap:pretty}
.tl-photo{
  width:clamp(48px,13vw,62px);height:clamp(48px,13vw,62px);border-radius:clamp(12px,3.2vw,16px);
  object-fit:cover;object-position:50% 0%;   /* rostro completo, sin cortar la cabeza */
  background:rgba(255,255,255,.08);flex:0 0 auto;
  border:2px solid rgba(255,255,255,.18);transition:transform .35s,border-color .35s;
}
.tl-item:hover .tl-photo{transform:scale(1.07) rotate(-2deg);border-color:var(--s2)}

/* ---------- ¿Qué encontrarás? ---------- */
.find-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:var(--gap);margin-top:clamp(1.8rem,5vw,2.8rem);
}
.find-card{
  position:relative;padding:var(--sp-card);border-radius:var(--radius);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-brd);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s,background .4s;
}
.find-card::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px 200px at var(--mx,50%) var(--my,0%),rgba(168,29,254,.22),transparent 70%);
}
.find-card:hover{transform:translateY(-10px);border-color:rgba(168,29,254,.5);box-shadow:0 28px 60px rgba(99,0,191,.32)}
.find-card:hover::after{opacity:1}
.find-card__icon{
  position:relative;z-index:1;width:clamp(46px,12vw,56px);height:clamp(46px,12vw,56px);
  border-radius:clamp(13px,3.4vw,16px);display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:clamp(1.05rem,3.2vw,1.3rem);margin-bottom:clamp(.85rem,2.6vw,1.1rem);
  box-shadow:0 12px 28px rgba(99,0,191,.45);transition:transform .4s cubic-bezier(.34,1.5,.64,1);
}
/* Iconos oficiales del evento: SVG de línea en blanco */
.find-card__icon img{width:58%;height:58%;object-fit:contain}

/* Tarjeta destacada Nutri Prime */
.find-card--prime{
  background:linear-gradient(140deg,rgba(168,29,254,.22),rgba(102,229,251,.08) 65%,rgba(99,0,191,.1));
  border-color:rgba(168,29,254,.55);
  box-shadow:0 22px 50px rgba(99,0,191,.25);
}
.find-card--prime .find-card__icon{background:linear-gradient(120deg,#a81dfe,#66e5fb)}
.find-card__badge{
  position:absolute;top:1rem;right:1rem;
  padding:.3rem .75rem;border-radius:50px;font-size:.66rem;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;color:#fff;
  background:var(--grad);background-repeat:no-repeat;background-size:180% 100%;background-origin:border-box;
  box-shadow:0 6px 16px rgba(168,29,254,.4);
}
.find-card--prime h3{color:#fff}
.find-card--prime strong{color:var(--s2)}
.find-card:hover .find-card__icon{transform:translateY(-4px) rotate(-6deg) scale(1.06)}
.find-card h3{position:relative;z-index:1;font-size:var(--fs-h3);margin-bottom:.45rem;text-wrap:balance}
.find-card p{position:relative;z-index:1;font-size:var(--fs-small);line-height:1.55;text-wrap:pretty}

/* ---------- Por qué asistir ---------- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(1.6rem,4vw,3rem);align-items:center}
.why__left .btn{margin-top:1.6rem}
/* Doble CTA: cupo del evento + invitación a Nutriclub */
.why__ctas{display:flex;flex-direction:column;gap:1rem;margin-top:1.6rem;align-items:flex-start}
.why__ctas .btn{margin-top:0}
.why__club{
  padding:1rem 1.2rem;border-radius:16px;
  background:rgba(102,229,251,.08);border:1px solid rgba(102,229,251,.32);
  display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;
}
.why__club p{font-size:var(--fs-small);line-height:1.5;margin:0;text-wrap:pretty}
.why__club strong{color:var(--s2)}
.why__list{display:grid;gap:.85rem}
.why__list li{
  display:flex;gap:.85rem;align-items:flex-start;padding:clamp(.85rem,2.6vw,1rem) clamp(.95rem,3vw,1.2rem);
  border-radius:clamp(13px,3.2vw,16px);
  background:var(--glass);border:1px solid var(--glass-brd);font-size:var(--fs-small);text-wrap:pretty;
  transition:transform .35s cubic-bezier(.34,1.3,.64,1),border-color .35s,background .35s;
}
.why__list li:hover{transform:translateX(8px);border-color:rgba(102,229,251,.45);background:rgba(102,229,251,.07)}
.why__list i{color:var(--s2);margin-top:.3rem}

/* ---------- Cómo llegar ---------- */
.llegar-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--gap);margin-top:clamp(1.8rem,5vw,2.8rem);
}
.llegar-card{
  position:relative;padding:var(--sp-card);border-radius:var(--radius);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-brd);
  display:flex;flex-direction:column;gap:.45rem;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s;
}
@media (hover:hover){
  .llegar-card:hover{transform:translateY(-8px);border-color:rgba(102,229,251,.5);box-shadow:0 24px 52px rgba(102,229,251,.16)}
}
.llegar-card__icon{
  width:clamp(46px,12vw,56px);height:clamp(46px,12vw,56px);border-radius:clamp(13px,3.4vw,16px);
  display:grid;place-items:center;background:var(--grad);color:#fff;
  font-size:clamp(1.05rem,3.2vw,1.3rem);margin-bottom:.6rem;
  box-shadow:0 12px 28px rgba(99,0,191,.45);
}
.llegar-card h3{font-size:var(--fs-h3)}
.llegar-card p{font-size:var(--fs-small);line-height:1.55;text-wrap:pretty}
.llegar-card__lead strong{color:#fff}
.llegar-card__hint{color:var(--txt-dim)}
.llegar-card__hint i{color:var(--s1);margin-right:.3rem}
.llegar-card__note{font-size:clamp(.74rem,1.9vw,.8rem);color:var(--txt-dim);margin-top:.2rem}
.llegar-card__note a{color:var(--s2);text-decoration:underline}
/* el botón no se estira a lo ancho de la tarjeta */
.llegar-card .btn{align-self:flex-start;margin-top:auto}
.llegar-card .buses{margin:.4rem 0 0}
/* Píldora "gratuitos" al lado del título */
.llegar-card__pill{
  display:inline-block;margin-left:.4rem;padding:.15rem .55rem;border-radius:50px;
  font-size:.62em;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:#0a0018;background:linear-gradient(120deg,#8affd8,#66e5fb);
  vertical-align:middle;
}

/* Mapa embebido dentro de la tarjeta "Dirección" */
.llegar-card__map{
  display:block;position:relative;margin-top:auto;
  border-radius:16px;overflow:hidden;border:1px solid var(--glass-brd);
  transition:transform .35s,box-shadow .35s;
}
.llegar-card__map:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.llegar-card__map iframe{width:100%;height:clamp(170px,32vw,220px);border:0;display:block;filter:grayscale(.25) contrast(1.05)}
.llegar-card__map-cta{
  position:absolute;left:0;right:0;bottom:0;padding:.55rem .9rem;font-size:.82rem;font-weight:700;color:#fff;
  background:linear-gradient(0deg,rgba(21,0,41,.92),rgba(21,0,41,0));
  display:flex;align-items:center;gap:.4rem;
}
.llegar-card__map-cta i{color:var(--s2)}

/* Buses: cada <li> se convierte en toda la superficie clickeable */
.buses li{padding:0;overflow:hidden}
.buses__link{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.7rem .9rem;color:#fff;text-decoration:none;position:relative;
  transition:background .25s,transform .25s,color .25s;
}
.buses__link:hover{background:rgba(102,229,251,.1);color:var(--s2)}
.buses__link:hover .buses__from{color:var(--s2)}
.buses__ext{
  position:absolute;top:.7rem;right:.75rem;
  font-size:.72em;color:var(--txt-dim);transition:color .25s,transform .25s;
}
.buses__link:hover .buses__ext{color:var(--s2);transform:translate(2px,-2px)}
.buses__item--plain{padding:.7rem .9rem}

/* ---------- Mapa del evento ---------- */
.mapa{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(1.6rem,4vw,2.4rem);align-items:center;margin-top:clamp(1.8rem,5vw,2.8rem);
}
.mapa__plano{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--glass-brd);background:var(--glass);
  padding:clamp(.7rem,2.4vw,1rem);transition:transform .4s,box-shadow .4s;
}
.mapa__plano:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(0,0,0,.4)}
.mapa__plano img{border-radius:16px;margin:0 auto;max-height:min(560px,72vh);width:auto;max-width:100%}
/* Enlace al PDF, anclado en la esquina inferior derecha del cuadro del mapa */
.mapa__btn{
  position:absolute;right:clamp(.8rem,2.6vw,1.2rem);bottom:clamp(.8rem,2.6vw,1.2rem);
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  padding:.5rem 1rem;border-radius:50px;font-size:clamp(.74rem,1.9vw,.82rem);font-weight:700;color:#fff;
  background:rgba(21,0,41,.78);border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(0,0,0,.4);transition:all .3s;
}
.mapa__btn:hover{background:var(--grad);border-color:transparent;transform:translateY(-3px);box-shadow:0 14px 32px rgba(168,29,254,.5)}
.mapa__btn i{color:var(--s2)}
.mapa__btn:hover i{color:#fff}
.mapa__btn-ext{font-size:.72em;opacity:.85}

/* Enlace al itinerario, junto a las pestañas de bloques */
.tabs__bar{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(.7rem,2.4vw,1.2rem);
  flex-wrap:wrap;margin-bottom:clamp(1.5rem,4.5vw,2.2rem);
}
.tabs__bar .tabs__nav{margin-bottom:0}
.pdf-link{
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  padding:.6rem 1.15rem;border-radius:50px;font-size:clamp(.76rem,2vw,.85rem);font-weight:700;
  color:var(--s2);background:rgba(102,229,251,.1);border:1px solid rgba(102,229,251,.38);
  transition:all .3s;
}
.pdf-link:hover{background:var(--s2);color:#10002a;transform:translateY(-3px);box-shadow:0 12px 28px rgba(102,229,251,.32)}
.pdf-link__ext{font-size:.72em;opacity:.85}
.mapa__legend{display:grid;gap:.7rem}
.mapa__legend li{
  display:flex;align-items:center;gap:.8rem;padding:clamp(.75rem,2.4vw,.9rem) clamp(.95rem,3vw,1.2rem);
  border-radius:clamp(11px,2.8vw,14px);
  background:var(--glass);border:1px solid var(--glass-brd);font-size:var(--fs-small);
  transition:transform .35s,border-color .35s,background .35s;
}
.mapa__legend li:hover{transform:translateX(8px);border-color:rgba(168,29,254,.45);background:rgba(168,29,254,.08)}
.mapa__legend strong{color:#fff}
.dot{width:14px;height:14px;border-radius:5px;flex:0 0 auto}
.dot--z1{background:#ff9f1c}.dot--z2{background:#2f6bff}.dot--z3{background:#a81dfe}
.dot--zp{background:rgba(255,255,255,.55)}.dot--cf{background:#66e5fb}.dot--ac{background:#7a5cff}

/* ---------- CTA Inscríbete ---------- */
.cta-card{
  position:relative;text-align:center;padding:clamp(2.2rem,6vw,3.4rem) clamp(1.2rem,4.4vw,2rem);
  border-radius:clamp(20px,5vw,30px);overflow:hidden;
  background:linear-gradient(140deg,rgba(99,0,191,.55),rgba(168,29,254,.28) 55%,rgba(102,229,251,.14));
  border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow);
}
.cta-card__glow{
  position:absolute;width:600px;height:600px;border-radius:50%;top:-60%;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(102,229,251,.28),transparent 62%);animation:ctaPulse 6s ease-in-out infinite;
}
@keyframes ctaPulse{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.12)}}
.cta-card>*{position:relative;z-index:1}
.cta-card h2{font-size:clamp(1.55rem,4.6vw,2.7rem);letter-spacing:-1px;text-wrap:balance}
.cta-card__sub{margin-top:.9rem;color:rgba(255,255,255,.82);font-size:var(--fs-body)}
.chips{
  display:flex;gap:clamp(.7rem,2vw,1rem);justify-content:center;flex-wrap:wrap;
  align-items:flex-start;margin:clamp(1.4rem,4vw,1.8rem) 0 clamp(1.2rem,3.6vw,1.6rem);
}
/* Cada bloque es una columna: el chip arriba y su minuta desplegable debajo */
.chip-col{display:flex;flex-direction:column;gap:.5rem;flex:0 1 320px;max-width:100%}
.chip-col .chip{width:100%}

/* ---- Minuta desplegable ---- */
.minuta{
  border-radius:14px;overflow:hidden;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
}
.minuta__toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.6rem .9rem;background:none;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:clamp(.76rem,2vw,.84rem);font-weight:700;color:#fff;
  transition:background .25s;
}
.minuta__toggle:hover{background:rgba(255,255,255,.07)}
.minuta__toggle i:first-child{color:var(--s2);margin-right:.35rem}
.minuta__arrow{font-size:.7em;transition:transform .35s cubic-bezier(.22,1,.36,1);opacity:.75}
.minuta__toggle[aria-expanded="true"] .minuta__arrow{transform:rotate(180deg)}

/* max-height animada por JS con la misma curva del resto del sitio */
.minuta__panel{
  max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.22,1,.36,1);
}
.minuta__list{display:grid;gap:.15rem;padding:.2rem .9rem .8rem;margin:0}
.minuta__list li{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:.7rem;align-items:baseline;
  padding:.42rem 0;border-top:1px solid rgba(255,255,255,.09);
}
.minuta__list li:first-child{border-top:0}
.minuta__time{
  font-family:'Sora',sans-serif;font-weight:800;font-size:.78rem;color:var(--s2);
  font-variant-numeric:tabular-nums;
}
.minuta__what{font-size:.78rem;line-height:1.4;color:var(--txt);text-wrap:pretty}
.minuta__what strong{display:block;color:#fff;font-weight:700;font-size:.83rem;margin-bottom:.1rem}
.chip{
  font-family:'Inter',sans-serif;cursor:pointer;font-weight:700;font-size:clamp(.78rem,2.1vw,.88rem);
  padding:.7rem clamp(1rem,3.2vw,1.4rem);border-radius:50px;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;line-height:1.25;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);transition:all .3s;
}
.chip:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.chip.is-active{background:#fff;color:#37006b;border-color:#fff;box-shadow:0 10px 26px rgba(255,255,255,.25)}
.chip.is-active i{color:#6300bf}
.cta-card__note{margin-top:1.2rem;font-size:clamp(.76rem,2vw,.84rem);color:rgba(255,255,255,.7);text-wrap:pretty}
.cta-card__note i{color:var(--s2)}

/* ---------- Leyenda Allnutrition (antes del footer) ---------- */
.section--anthem{padding:clamp(3rem,7vw,4.5rem) 0}
.anthem{max-width:820px;margin:0 auto;text-align:center}
.anthem__logo{
  height:clamp(38px,6vw,58px);width:auto;margin:0 auto clamp(1.1rem,3vw,1.8rem);
  filter:drop-shadow(0 8px 20px rgba(102,229,251,.18));
}
.anthem__title{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.5px;
  font-size:clamp(1.5rem,4.5vw,2.4rem);line-height:1.2;color:#fff;text-wrap:balance;
  margin-bottom:clamp(1rem,2.6vw,1.4rem);
}
.anthem__text{
  font-size:clamp(.95rem,2.2vw,1.08rem);line-height:1.7;color:var(--txt);text-wrap:pretty;
  margin:0 auto;max-width:660px;
}
.anthem__text strong{color:#fff;font-weight:700}
.anthem__ctas{
  display:flex;gap:clamp(.7rem,2vw,1rem);justify-content:center;flex-wrap:wrap;
  margin-top:clamp(1.6rem,4vw,2.2rem);
}

/* ---------- Footer ---------- */
.footer{position:relative;z-index:2;padding:clamp(2.4rem,5vw,3.2rem) 0 1.6rem;border-top:1px solid rgba(255,255,255,.1);background:rgba(10,0,22,.55)}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:clamp(1.8rem,4vw,2.2rem)}
.footer__grid--slim{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
/* Enlaces del footer con estilo consistente sea <a> o <button> */
.footer__link{
  display:inline-flex;align-items:center;gap:.55rem;
  background:none;border:0;padding:.4rem 0;cursor:pointer;
  color:var(--txt);font:inherit;font-size:var(--fs-small);
  transition:color .25s;text-align:left;
}
.footer__link:hover{color:var(--s2)}
.footer__link i{color:var(--s2);width:1.1em}

/* Redes sociales (footer) */
.socials{display:flex;gap:.6rem;flex-wrap:wrap}
.social{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  color:#fff;font-size:1.15rem;text-decoration:none;
  background:var(--glass);border:1px solid var(--glass-brd);
  transition:transform .3s,background .3s,border-color .3s;
}
.social:hover{transform:translateY(-4px);border-color:transparent}
.social--ig:hover{background:linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af)}
.social--yt:hover{background:#ff0033}
.social--tt:hover{background:#000}
.social--in:hover{background:#0a66c2}
.social--web:hover{background:var(--grad);background-repeat:no-repeat}
.footer__col h3{font-size:clamp(.95rem,2.5vw,1.02rem);margin-bottom:1rem;display:flex;align-items:center;gap:.55rem}
.footer__col h3 i{color:var(--s2);flex:0 0 auto}
.footer__col p{font-size:var(--fs-small);margin-bottom:.6rem;text-wrap:pretty}
.footer__place strong{color:#fff}
.footer__hint{font-size:var(--fs-small);color:var(--txt-dim)}
.footer__hint i{color:var(--s1)}
.footer__note{font-size:clamp(.74rem,1.9vw,.8rem);color:var(--txt-dim);margin-top:.8rem}
.footer__note a{color:var(--s2);text-decoration:underline}
.footer__map{display:block;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--glass-brd);transition:transform .35s,box-shadow .35s}
.footer__map:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.footer__map iframe{width:100%;height:clamp(170px,42vw,220px);border:0;display:block;filter:grayscale(.25) contrast(1.05)}
.footer__map-cta{
  position:absolute;left:0;right:0;bottom:0;padding:.6rem .9rem;font-size:.82rem;font-weight:700;color:#fff;
  background:linear-gradient(0deg,rgba(21,0,41,.92),rgba(21,0,41,0));display:flex;align-items:center;gap:.45rem;
}
.buses{display:grid;gap:.6rem;margin-top:.4rem}
.buses li{
  display:flex;flex-direction:column;gap:.15rem;padding:.7rem .9rem;border-radius:12px;
  background:var(--glass);border:1px solid var(--glass-brd);transition:border-color .3s,transform .3s,background .3s;
}
.buses li:hover{border-color:rgba(102,229,251,.45);transform:translateX(5px);background:rgba(102,229,251,.06)}
.buses__from{font-size:clamp(.8rem,2.1vw,.86rem);font-weight:700;color:#fff;display:flex;align-items:center;gap:.45rem}
.buses__from i{color:var(--s2);font-size:.75rem;flex:0 0 auto}
.buses__times{font-size:clamp(.78rem,2vw,.84rem);color:var(--txt-dim);letter-spacing:.4px}
.orgs{display:grid;gap:.9rem}
.org{
  border-radius:14px;padding:1rem;min-height:74px;background:var(--glass);border:1px solid var(--glass-brd);
  display:grid;place-items:center;transition:transform .35s,border-color .35s;
}
.org img{max-width:78%;max-height:52px;width:auto;height:auto;object-fit:contain}
.org:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.35)}
.footer__bottom{
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--txt-dim);
}
.footer__date i{color:var(--s2);margin-right:.35rem}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:70;width:46px;height:46px;border-radius:50%;border:none;
  cursor:pointer;background:var(--grad);color:#fff;font-size:1rem;box-shadow:0 12px 30px rgba(99,0,191,.5);
  opacity:0;visibility:hidden;transform:translateY(14px);
  /* Transitamos SOLO las propiedades del show/hide; si se anima 'bottom'
     Chrome queda atascado en el valor inicial cuando el JS lo pisa inline. */
  transition:opacity .35s,visibility .35s,transform .35s,box-shadow .35s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-4px) scale(1.06)}

/* ---------- Reveal on scroll ----------
   Solo se ocultan si el JS está vivo (html.js). Sin JS, todo se ve normal. */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.js [data-reveal].is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* =================== RESPONSIVE =================== */
/* Las grillas ya se reacomodan solas con auto-fit + minmax, y todos los tamaños
   escalan con clamp(). Aquí abajo solo van cambios ESTRUCTURALES de móvil. */
@media(max-width:768px){
  /* Hamburguesa (3 barras → X) */
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:26px;height:20px;padding:0}
  .nav-toggle__bar{display:block;width:100%;height:2px;border-radius:2px;background:#fff;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .2s ease}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(2){opacity:0;transform:scaleX(0)}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Panel desplegable glass bajo la píldora */
  .nav{
    position:absolute;top:calc(100% + 14px);left:0;right:0;width:auto;flex-direction:column;gap:0;margin:0;
    padding:1rem 1.5rem 1.3rem;background:rgba(43,0,85,.9);
    -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
    border:1px solid rgba(255,255,255,.15);border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.4);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateX(38px);
    transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .4s ease,visibility 0s linear .45s;z-index:65;
  }
  .nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .4s ease,visibility 0s linear}
  .nav a{color:#fff;padding:.8rem .2rem;border-bottom:1px solid rgba(255,255,255,.14)}
  .nav a:last-child{border-bottom:none}
  .nav a::after{display:none}

  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(12,0,25,0);z-index:59;opacity:0;visibility:hidden;pointer-events:none;transition:background .35s ease,opacity .35s ease,visibility 0s linear .35s}
  .nav-overlay.show{background:rgba(12,0,25,.6);opacity:1;visibility:visible;pointer-events:auto;transition:background .35s ease,opacity .35s ease,visibility 0s linear}

  .header__cta{display:none}
  .logo__img{height:clamp(26px,7vw,32px)}
  .logo__img--brand{height:clamp(15px,4.4vw,20px)}
  .logo{gap:.5rem}
  .logo__sep{height:clamp(18px,4.6vw,22px)}

  /* El fondo es un degradado abstracto sin sujeto ni texto, así que el mismo
     encuadre funciona en vertical: solo se sirve una versión más liviana. */
  .hero__bg{background-image:url('../img/hero-bg-mobile.webp')}
  /* backdrop-filter en 12 tarjetas en movimiento cuesta caro en móvil:
     se cambia por un fondo sólido equivalente. */
  .sp-card{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(86,20,150,.55);
  }


  /* Contador: se esconde la frase larga para que quepa TODO en una sola línea */
  .cd__tail{display:none}
  .cd-state{gap:.5rem}
}
/* Bajo 380px ni "Faltan" cabe: queda solo el ícono y las etiquetas cortas */
.cd__word-short{display:none}
@media(max-width:380px){
  .cd__word{display:none}
  .cd__word-short{display:inline}
  .cd-state{gap:.4rem}
  .btn--xs{padding:.28rem .7rem}

  /* Tabs a ancho completo, una debajo de otra */
  .tabs__nav{width:100%;grid-template-columns:minmax(0,1fr)}

  /* Timeline: hora arriba, contenido abajo */
  .tl-item{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .tl-body{gap:.8rem}

  /* En móvil las tarjetas de "¿Qué encontrarás?" van de a 2 en horizontal.
     En escritorio queda como estaba (auto-fit de 270px) */
  .find-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .find-card{padding:clamp(1rem,3.6vw,1.4rem)}
  /* Solo se cambia la sangría vía la variable: así el punto se recalcula solo
     y sigue cayendo sobre el eje del riel. Antes se pisaba padding-left y left
     por separado y los círculos quedaban ~7px a la izquierda de la línea. */
  .timeline{--rail-pad:22px}
  .tl-item::before{top:22px}
  .footer__bottom{flex-direction:column;text-align:center}
}

/* =================================================================
   PANEL LATERAL DE REDES (tirador flotante + drawer + overlay)
   ================================================================= */
/* Aleta lateral: pegada al borde derecho, en el medio vertical. Se desliza
   ligeramente hacia adentro al hover para "invitar" al click. */
.dock-toggle{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:75;
  width:42px;height:58px;
  border-radius:14px 0 0 14px;border:none;border-right:0;cursor:pointer;
  background:var(--grad);background-size:180% 100%;background-repeat:no-repeat;background-origin:border-box;
  color:#fff;font-size:1.05rem;
  box-shadow:-6px 8px 24px rgba(99,0,191,.5),inset 1px 0 0 rgba(255,255,255,.2);
  display:grid;place-items:center;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s,background-position .35s;
}
.dock-toggle:hover{transform:translate(-4px,-50%);background-position:100% 0;box-shadow:-10px 10px 30px rgba(168,29,254,.6)}
.dock-toggle.is-open{transform:translate(-320px,-50%)}   /* se retira detrás del panel */
.dock-toggle.is-open:hover{transform:translate(-324px,-50%)}

/* Panel sutil: barra fina pegada al borde, con solo los íconos de las redes.
   No lleva overlay: complementa, no busca opacar el resto del sitio. */
.dock-panel{
  position:fixed;top:50%;right:0;z-index:90;
  transform:translate(105%,-50%);transform-origin:right center;
  padding:.65rem .55rem;
  display:flex;flex-direction:column;gap:.5rem;align-items:center;
  background:rgba(21,0,44,.65);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--glass-brd);border-right:0;
  border-radius:18px 0 0 18px;
  box-shadow:-10px 14px 34px rgba(0,0,0,.42);
  /* Smooth in/out con la misma curva que usa el resto del sitio */
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease;
  opacity:0;
}
.dock-panel[hidden]{display:flex !important;visibility:hidden;pointer-events:none}
.dock-panel.is-open{transform:translate(0,-50%);opacity:1;visibility:visible;pointer-events:auto}

/* Botón de cerrar arriba del panel, pequeño y contenido */
.dock-panel__close{
  background:rgba(255,255,255,.08);border:1px solid var(--glass-brd);color:#fff;
  width:28px;height:28px;border-radius:8px;cursor:pointer;display:grid;place-items:center;
  font-size:.7rem;margin-bottom:.15rem;
  transition:background .25s;
}
.dock-panel__close:hover{background:rgba(255,255,255,.16)}

/* Ícono redondo por red, sin texto ni hover animado (queda "quieto") */
.dock-item{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:1rem;text-decoration:none;
  background:var(--glass);border:1px solid var(--glass-brd);
}
.dock-item--ig{background:linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af);border-color:transparent}
.dock-item--yt{background:#ff0033;border-color:transparent}
.dock-item--tt{background:#000;border-color:transparent;position:relative;overflow:hidden}
.dock-item--tt::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(37,244,238,.35),transparent 40%,rgba(254,44,85,.35))}
.dock-item--tt i{position:relative}
.dock-item--in{background:#0a66c2;border-color:transparent}
.dock-item--web{background:var(--grad);background-repeat:no-repeat;border-color:transparent}

/* =================================================================
   MODAL (FAQ)
   ================================================================= */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal.is-open{display:flex}
.modal__backdrop{position:absolute;inset:0;background:rgba(9,0,20,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal__card{
  position:relative;width:min(560px,100%);max-height:min(80vh,720px);
  background:linear-gradient(160deg,#22004a,#160030);
  border:1px solid rgba(255,255,255,.16);border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  display:flex;flex-direction:column;overflow:hidden;
  animation:modalIn .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:1.15rem 1.3rem;border-bottom:1px solid rgba(255,255,255,.12);
}
.modal__head h3{font-family:'Sora',sans-serif;font-weight:800;font-size:1.15rem;margin:0;color:#fff;display:flex;align-items:center;gap:.55rem}
.modal__head i{color:var(--s2)}
.modal__close{
  background:rgba(255,255,255,.08);border:1px solid var(--glass-brd);color:#fff;
  width:36px;height:36px;border-radius:11px;cursor:pointer;display:grid;place-items:center;
  transition:background .25s,transform .25s;
}
.modal__close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}
.modal__body{padding:1.4rem;overflow-y:auto;color:var(--txt);line-height:1.65}
.modal__empty{text-align:center;padding:1.5rem .5rem;font-size:var(--fs-body);text-wrap:pretty}

/* =================================================================
   MINI REPRODUCTOR "EN VIVO"
   ================================================================= */
.live-player{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:95;
  width:clamp(260px,26vw,340px);
  border-radius:16px;overflow:hidden;
  background:rgba(15,0,32,.92);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 22px 50px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform-origin:bottom right;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s;
}
.live-player[hidden]{display:none}
/* Minimizado: se colapsa a solo la cabecera con el chip "EN VIVO" */
.live-player.is-min{width:auto}
.live-player.is-min .live-player__frame{display:none}

.live-player__head{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.45rem .55rem .45rem .7rem;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  border-bottom:1px solid rgba(255,255,255,.1);
}
.live-player.is-min .live-player__head{border-bottom:0}
.live-player__tag{
  display:inline-flex;align-items:center;gap:.5rem;
  color:#fff;font-family:'Sora',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:1.6px;
}
/* El puntito rojo del reproductor pulsa un poco más marcado que el del
   contador — es un elemento pequeño y necesita llamar la atención. */
.live-player__tag .live-dot{width:10px;height:10px}
.live-player__tag .live-dot::after{border-color:rgba(255,59,107,.75)}
.live-player__actions{display:flex;gap:.3rem}
.live-player__btn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
  width:26px;height:26px;border-radius:8px;cursor:pointer;display:grid;place-items:center;
  font-size:.75rem;transition:background .25s,transform .25s;
}
.live-player__btn:hover{background:rgba(255,255,255,.18)}
#liveClose:hover{background:#ff3b6b;border-color:#ff3b6b;transform:rotate(90deg)}

/* Marco 16:9 */
.live-player__frame{position:relative;padding-top:56.25%}
.live-player__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}

/* Botón para restaurar el reproductor cuando fue cerrado */
.live-open{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:95;
  width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#ff3b6b,#a81dfe);
  box-shadow:0 14px 32px rgba(255,59,107,.5);
  display:grid;place-items:center;gap:0;font-size:1rem;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s;
}
/* El display:grid de arriba sobrescribe el display:none que le da 'hidden',
   así que el atributo dejaba de esconder el botón. Se fuerza explícito. */
.live-open[hidden]{display:none !important}
.live-open:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 18px 40px rgba(255,59,107,.65)}
/* El punto rojo asoma FUERA del círculo del play: así el halo pulsante se
   ve completo y no lo tapa el gradiente del botón. */
.live-open{overflow:visible}
.live-open .live-dot{position:absolute;top:-4px;left:-4px;width:12px;height:12px;box-shadow:0 0 0 3px rgba(21,0,44,.65)}

/* El JS pinta el bump directamente inline: la variable CSS quedaba atrapada
   en algunas cascadas en Chrome. Se deja el hook por si algún estilo custom
   lo quiere usar. */

@media(max-width:768px){
  .live-player{
    right:.8rem;bottom:.8rem;
    width:min(260px,60vw);border-radius:14px;
  }
  .live-open{right:.8rem;bottom:.8rem;width:46px;height:46px}
  /* Que la flecha comparta right/bottom con el resto de la esquina, así
     quedan centrados en el mismo eje vertical cuando están apilados. */
  .to-top{right:.8rem;bottom:.8rem}
}