/* ==========================================================================
   TurboSteps · Landing TikTok Ads — sistema de diseño compartido A/B
   Tokens de marca reales heredados de index.html (v2). No inventar colores.
   Este archivo lo usan las DOS versiones: /a (con VSL) y /b (sin VSL).
   ========================================================================== */

:root{
  --green:#20ff78;
  --green-soft:rgba(32,255,120,.12);
  --green-line:rgba(32,255,120,.35);
  --green-dark:#0b7a3e;
  --bg:#050807;
  --bg-2:#090f0b;
  --card:#0c130e;
  --line:rgba(255,255,255,.09);
  --text:#f4f7f3;
  --muted:rgba(244,247,243,.74);
  --faint:rgba(244,247,243,.5);
  --warm:#f7f3ea;
  --warm-text:#121a13;
  --warm-muted:#45523f;
  --font-display:"Montserrat",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-hand:"Caveat","Segoe Script",cursive;
  --radius:18px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --max:1180px;
  --gap:clamp(16px,3vw,28px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6.4vw,3.5rem);font-weight:900}
h2{font-size:clamp(1.55rem,4.2vw,2.5rem);font-weight:800}
h3{font-size:1.125rem;font-weight:700;font-family:var(--font-body)}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.container{width:min(100% - 2.5rem,var(--max));margin-inline:auto}
section{padding:clamp(56px,9vw,104px) 0;position:relative}
.kicker{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin-bottom:14px;
}
.center{text-align:center}
.section-head{max-width:720px;margin:0 auto clamp(28px,5vw,48px);text-align:center}

/* Bloques de contraste cálido (como en la v2) */
.light{background:var(--warm);color:var(--warm-text)}
.light h1,.light h2,.light h3{color:var(--warm-text)}
.light .muted{color:var(--warm-muted)}
.light .kicker{color:var(--green-dark)}

:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.light :focus-visible{outline-color:var(--green-dark)}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--green);
  color:#04120a;padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}

/* ==========================  BOTONES  ================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:700;font-size:1rem;
  padding:1.05em 1.9em;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-align:center;line-height:1.2;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn-primary{
  background:var(--green);color:#04120a;
  box-shadow:0 10px 34px rgba(32,255,120,.28);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 42px rgba(32,255,120,.4)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green-line);background:var(--green-soft)}
.btn-lg{font-size:1.06rem;padding:1.15em 2.2em}
.btn-block{display:flex;width:100%}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transform:none;transition:none}}

/* ==========================  NAV  ====================================== */
.topbar{
  background:var(--green);color:#04120a;font-size:.82rem;font-weight:700;
  text-align:center;padding:.6em 1rem;letter-spacing:.01em;
}
.nav{
  position:sticky;top:0;z-index:60;background:rgba(5,8,7,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.nav-logo img{width:auto;height:30px}
.nav-links{display:none;gap:1.6rem;font-size:.92rem}
.nav-links a{color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:.7rem}
.nav-actions .btn{padding:.72em 1.3em;font-size:.9rem}
@media (min-width:940px){.nav-links{display:flex}}

/* ==========================  FONDO CON AURORA  =========================
   El efecto de fondo pedido, hecho solo con CSS: cero kilobytes de
   JavaScript. Una librería tipo Vanta pesa 60-120 KB y consume batería;
   con el 80% del tráfico en móvil no compensa. Aquí son dos manchas de
   luz verde que se desplazan muy despacio, más un grano fino encima.
   Se apaga sola si el visitante pide menos animación.
   ====================================================================== */
.aurora{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.aurora::before,.aurora::after{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);
}
.aurora::before{
  width:70vw;height:70vw;max-width:900px;max-height:900px;
  top:-30%;left:-15%;background:rgba(32,255,120,.16);
  animation:aurora-a 26s ease-in-out infinite alternate;
}
.aurora::after{
  width:55vw;height:55vw;max-width:700px;max-height:700px;
  top:5%;right:-20%;background:rgba(18,180,85,.14);
  animation:aurora-b 34s ease-in-out infinite alternate;
}
@keyframes aurora-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(12%,8%,0) scale(1.18)}
}
@keyframes aurora-b{
  from{transform:translate3d(0,0,0) scale(1.1)}
  to{transform:translate3d(-14%,10%,0) scale(.92)}
}
/* Grano: quita el aspecto de degradado plano y le da textura de fotografía. */
.aurora::marker{content:""}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){
  .aurora::before,.aurora::after{animation:none}
}
/* El contenido siempre por encima del efecto. */
.hero .container{position:relative;z-index:2}

/* ==========================  HERO  ===================================== */
.hero{padding-top:clamp(34px,6vw,64px);overflow:hidden}
.hero-center{max-width:760px;margin-inline:auto;text-align:center;position:relative}
.hero-badge{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);background:var(--green-soft);
  border:1px solid var(--green-line);padding:.55em 1.1em;border-radius:999px;margin-bottom:1.4rem;
}
.hero h1 .accent{color:var(--green)}
.hero .lead{font-size:clamp(1rem,2.4vw,1.2rem);color:var(--muted);max-width:620px;margin-inline:auto}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin:1.8rem 0 1rem}
.hero-fine{font-size:.86rem;color:var(--faint);max-width:560px;margin-inline:auto}

/* Texto cursivo decorativo de fondo (efecto pedido en el boceto) */
.script-deco{
  position:absolute;font-family:var(--font-hand);color:rgba(32,255,120,.16);
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;pointer-events:none;
  user-select:none;z-index:0;transform:rotate(-8deg);
}
.script-deco--right{right:-2%;top:18%;text-align:left}
.script-deco--left{left:-2%;top:30%;transform:rotate(6deg)}
@media (max-width:860px){.script-deco{display:none}}

/* VSL (solo versión A) */
.vsl-wrap{
  position:relative;margin:2.2rem auto 0;max-width:820px;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--green-line);box-shadow:var(--shadow);background:#000;
}
.vsl-wrap video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.vsl-play{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:.9rem;
  align-items:center;justify-content:center;background:rgba(5,8,7,.35);
  border:0;cursor:pointer;color:var(--text);font-family:var(--font-body);
  font-weight:700;font-size:1rem;
}
.vsl-play-circle{
  width:74px;height:74px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;box-shadow:0 10px 34px rgba(32,255,120,.45);
  transition:transform .15s ease;
}
.vsl-play-circle svg{width:32px;height:32px;fill:#04120a;margin-left:4px}
.vsl-play:hover .vsl-play-circle{transform:scale(1.06)}
.vsl-caption{text-align:center;font-size:.82rem;color:var(--faint);margin-top:.9rem}
@media (prefers-reduced-motion:reduce){.vsl-play:hover .vsl-play-circle{transform:none}}

/* Imagen de hero (solo versión B) */
.hero-shot{
  margin:2.2rem auto 0;max-width:880px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);position:relative;
}
.hero-shot img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* Micro-beneficios bajo el hero */
.hero-mini{
  display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;
  margin-top:1.8rem;font-size:.88rem;color:var(--muted);
}
.hero-mini span{display:inline-flex;align-items:center;gap:.5em}
.hero-mini svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2}

/* ==========================  AUTORIDAD  ================================ */
.authority{background:var(--warm);color:var(--warm-text);padding:clamp(26px,4vw,40px) 0}
.authority-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.2rem,4vw,3rem);text-align:center;
}
.authority-label{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--warm-muted);width:100%;
}
@media (min-width:760px){.authority-label{width:auto}}
.authority-item{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:1rem}
.authority-item svg{width:22px;height:22px;fill:var(--warm-text)}
.authority-item .count{color:var(--green-dark);font-variant-numeric:tabular-nums}

/* ==========================  PROPUESTA DE VALOR  ======================= */
.value-grid{display:grid;gap:clamp(28px,5vw,56px);align-items:center}
@media (min-width:900px){.value-grid{grid-template-columns:1.05fr 1fr}}
.value-list{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.85rem}
.value-list li{display:flex;gap:.75em;align-items:flex-start;color:var(--muted)}
.value-list svg{width:22px;height:22px;flex:0 0 22px;margin-top:2px;stroke:var(--green);fill:none;stroke-width:2}
.value-media{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}

/* ==========================  CARRUSELES  =============================== */
/* Automáticos, en direcciones opuestas por sección, con difuminado lateral. */
.rail{
  position:relative;
  overflow:hidden;   /* sin esto la pista se sale por el lado y la página
                        entera se puede arrastrar en horizontal */
  --fade:clamp(28px,7vw,90px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
}
.rail-track{
  display:flex;gap:var(--gap);width:max-content;
  animation:rail-scroll var(--speed,52s) linear infinite;
  will-change:transform;
}
.rail[data-dir="right"] .rail-track{animation-direction:reverse}
.rail:hover .rail-track,
.rail:focus-within .rail-track{animation-play-state:paused}
@keyframes rail-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .rail-track{animation:none}
  .rail{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rail-track{width:auto}
}

.rail-card{
  flex:0 0 clamp(210px,58vw,300px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.rail-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rail-card--tall img{aspect-ratio:9/16}
.rail-card--phone img{aspect-ratio:9/19.5;object-fit:cover}
.rail-card figcaption{padding:.95rem 1.05rem 1.2rem}
.rail-card h3{margin:0 0 .25em;font-size:1rem}
.rail-card p{margin:0;font-size:.88rem;color:var(--faint)}
.light .rail-card{background:#fff;border-color:rgba(18,26,19,.1)}
.light .rail-card p{color:var(--warm-muted)}

/* ==========================  DIRECTOS (servicio estrella)  ============= */
.live{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
/* La foto del directo encabeza la sección: es el servicio estrella y la
   prueba visual de que la clase existe y hay gente dentro. */
.live-shot{
  margin:0 0 clamp(24px,4vw,40px);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--green-line);box-shadow:var(--shadow);position:relative;
}
.live-shot img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.live-shot figcaption{
  padding:.85rem 1.2rem;font-size:.85rem;color:var(--faint);
  background:var(--card);border-top:1px solid var(--line);
}
.live-grid{display:grid;gap:clamp(24px,4vw,40px)}
@media (min-width:900px){.live-grid{grid-template-columns:1fr 1fr}}
.live-card{
  background:var(--card);border:1px solid var(--green-line);border-radius:var(--radius);
  padding:clamp(22px,3.5vw,34px);position:relative;overflow:hidden;
}
.live-card::after{
  content:"";position:absolute;inset:auto -30% -50% auto;width:70%;height:120%;
  background:radial-gradient(circle,rgba(32,255,120,.1),transparent 70%);pointer-events:none;
}
.live-dot{
  display:inline-flex;align-items:center;gap:.5em;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:1rem;
}
.live-dot i{width:9px;height:9px;border-radius:50%;background:var(--green);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.live-dot i{animation:none}}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin-top:1.4rem}
.week div{
  text-align:center;font-size:.7rem;font-weight:700;padding:.7em .2em;border-radius:10px;
  background:rgba(255,255,255,.04);color:var(--faint);border:1px solid var(--line);
}
.week div.on{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}

/* ==========================  PASOS  ==================================== */
.steps{display:grid;gap:var(--gap);counter-reset:step}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3vw,28px);position:relative;
}
.light .step{background:#fff;border-color:rgba(18,26,19,.1)}
.step-n{
  width:34px;height:34px;border-radius:50%;background:var(--green);color:#04120a;
  display:grid;place-items:center;font-weight:800;margin-bottom:1rem;
}

/* ==========================  FAUSTO  =================================== */
.fausto-grid{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:900px){.fausto-grid{grid-template-columns:.85fr 1.15fr}}
.fausto-photo{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative}
.fausto-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.quote{
  border-left:3px solid var(--green);padding:.2rem 0 .2rem 1.2rem;margin:1.6rem 0 0;
  font-size:1.06rem;font-style:italic;color:var(--text);
}
.quote cite{display:block;margin-top:.6rem;font-style:normal;font-size:.85rem;color:var(--faint)}

/* ==========================  PLANES  =================================== */
.plans-grid{display:grid;gap:var(--gap);max-width:900px;margin-inline:auto}
@media (min-width:800px){.plans-grid{grid-template-columns:1fr 1fr;align-items:start}}
.plan{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3.5vw,34px);display:flex;flex-direction:column;position:relative;
}
.plan--best{border-color:var(--green);box-shadow:0 0 0 1px var(--green-line),0 20px 60px rgba(32,255,120,.14)}
.plan-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#04120a;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:.45em 1em;border-radius:999px;white-space:nowrap;
}
.plan-name{font-size:.95rem;color:var(--muted);margin-bottom:.3rem}
.plan-price{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,3.1rem);font-weight:900;line-height:1}
.plan-price small{font-size:.8rem;font-weight:600;color:var(--faint);letter-spacing:.02em;margin-left:.4em;font-family:var(--font-body)}
.plan-note{font-size:.85rem;color:var(--faint);margin:.5rem 0 1.4rem}
.plan ul{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.7rem;font-size:.94rem}
.plan li{display:flex;gap:.6em;align-items:flex-start;color:var(--muted)}
.plan li svg{width:19px;height:19px;flex:0 0 19px;margin-top:3px;stroke:var(--green);fill:none;stroke-width:2.4}
.plan .btn{margin-top:auto}
/* --- Cabecera de cada plan --------------------------------------------- */
.plan-kind{
  display:inline-block;align-self:flex-start;font-size:.66rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);border-radius:999px;padding:.45em 1em;margin-bottom:1.1rem;
}
.plan-kind--best{background:var(--green);color:#04120a;border-color:var(--green)}
.plan-title{
  font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,1.9rem);
  font-weight:900;letter-spacing:-.01em;margin:0 0 .35rem;
}
.plan-sub{font-size:.92rem;color:var(--faint);margin-bottom:1.6rem}
.plan-cycle{font-size:.85rem;color:var(--faint);margin:.2rem 0 .8rem}

/* La cinta diagonal de la esquina, como en el boceto. */
.plan-ribbon{
  position:absolute;top:0;right:0;width:150px;padding:.4em 0;
  background:var(--green);color:#04120a;font-size:.66rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
  transform:rotate(45deg) translate(31px,-14px);transform-origin:center;
}
.plan--best{overflow:hidden}

.plan-equiv{
  display:inline-block;background:var(--green-soft);border:1px solid var(--green-line);
  border-radius:12px;padding:.7em 1.2em;font-size:.9rem;margin-bottom:.9rem;
}
.plan-equiv b{color:var(--green);font-size:1.05rem}

/* --- Bonus dentro de la tarjeta de precio ------------------------------ */
.plan-gift{
  border:1px dashed var(--line);border-radius:14px;
  padding:1rem 1.1rem 1.1rem;margin:0 0 1.6rem;display:grid;gap:.75rem;
}
.plan-gift--best{border-color:var(--green-line);background:rgba(32,255,120,.045)}
.plan-gift-h{
  font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);
}
.gift-item{display:flex;align-items:center;gap:.85rem}
.gift-item img{
  width:46px;height:46px;flex:0 0 46px;border-radius:9px;object-fit:cover;
  background:var(--bg-2);
}
.gift-item div{display:flex;flex-direction:column;min-width:0}
.gift-item b{font-size:.9rem;font-weight:700;line-height:1.25}
.gift-item span{font-size:.78rem;color:var(--faint)}
.plan-trust{
  display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;
  margin-top:2.2rem;font-size:.85rem;color:var(--faint);
}
.plan-trust span{display:inline-flex;align-items:center;gap:.5em}
.plan-trust svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2}

/* ==========================  FAQ  ====================================== */
.faq{max-width:780px;margin-inline:auto;display:grid;gap:.7rem}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq-item summary{
  cursor:pointer;list-style:none;padding:1.15em 1.3em;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--green);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 1.3em 1.3em;color:var(--muted);font-size:.96rem}

/* ==========================  CIERRE + FOOTER  ========================== */
.closing{text-align:center;background:linear-gradient(180deg,var(--bg),rgba(32,255,120,.06))}
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(40px,6vw,64px) 0 2rem;font-size:.9rem}
.foot-grid{display:grid;gap:2rem}
@media (min-width:800px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
footer h3{font-family:var(--font-display);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
footer a{color:var(--muted)}
footer a:hover{color:var(--green)}
.foot-legal{border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1.4rem;color:var(--faint);font-size:.82rem}

/* CTA flotante en móvil */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(5,8,7,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .25s ease;visibility:hidden;
}
.mobile-cta.show{transform:translateY(0);visibility:visible}
@media (min-width:900px){.mobile-cta{display:none}}

/* Animación de aparición */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* --- Foto del equipo de entrenadores ---------------------------------- */
.equipo-shot{
  margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.equipo-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* La foto de Fausto con la app trae su propio texto incrustado, así que
   se muestra entera en vez de recortada a 4:5 como las demás. */
.fausto-photo img{aspect-ratio:auto;object-fit:contain;background:var(--bg-2)}

/* ==========================  QUÉ INCLUYE (rejilla) =====================
   Antes era un carrusel, pero con 4 tarjetas se veía medio vacío y dejaba
   mucho aire a los lados. En rejilla las tarjetas ocupan todo el ancho
   útil y la sección respira sin desperdiciar espacio.
   ====================================================================== */
#incluye{padding-bottom:clamp(40px,6vw,64px)}
#incluye .section-head{margin-bottom:clamp(22px,3.5vw,34px)}
.incluye-grid{display:grid;gap:clamp(12px,2vw,20px)}
@media (min-width:560px){.incluye-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.incluye-grid{grid-template-columns:repeat(4,1fr)}}

.incluye-card{
  margin:0;background:#fff;border:1px solid rgba(18,26,19,.1);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
}
.incluye-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.incluye-card figcaption{padding:.95rem 1.05rem 1.15rem}
.incluye-card h3{margin:0 0 .3em;font-size:1rem;color:var(--warm-text)}
.incluye-card p{margin:0;font-size:.87rem;color:var(--warm-muted);line-height:1.45}

/* --- Horario de los directos ------------------------------------------- */
.live-hora{
  display:flex;align-items:center;gap:.6em;margin:1.3rem 0 .4rem;
  font-size:1.02rem;color:var(--text);
}
.live-hora b{color:var(--green)}
.live-bandera{font-size:1.3rem;line-height:1}
.live-proximamente{font-size:.84rem;color:var(--faint);margin:0}

/* --- FAQ: 5 visibles y el resto tras un desplegable --------------------- */
.faq-mas{display:grid;gap:.7rem;margin-top:.7rem}
.faq-toggle{
  justify-self:center;margin-top:1.6rem;
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--green-soft);border:1.5px solid var(--green-line);
  color:var(--green);font-family:var(--font-body);font-weight:700;font-size:.92rem;
  padding:.85em 1.8em;border-radius:999px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.faq-toggle:hover{background:rgba(32,255,120,.16);border-color:var(--green);transform:translateY(-2px)}
.faq-toggle-icono{font-size:1.25rem;line-height:1;transition:transform .25s ease}
.faq-toggle[aria-expanded="true"] .faq-toggle-icono{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.faq-toggle:hover{transform:none}}

/* ==========================  SECCIÓN DE FAUSTO  ========================
   La foto que va aquí (Fausto mostrando la app) lleva su propio rótulo
   incrustado y es horizontal. Forzarla a 4:5 dejaba una franja negra
   debajo en móvil: por eso el contenedor se adapta a la imagen en vez
   de al revés.
   ====================================================================== */
.fausto-photo{border:0;border-radius:var(--radius);overflow:hidden;line-height:0}
.fausto-photo img{
  width:100%;height:auto;aspect-ratio:auto;object-fit:contain;
  background:transparent;display:block;
}
@media (min-width:900px){
  /* En escritorio la foto y el texto se alinean por arriba, no por el
     centro: si no, el texto "flota" respecto a la imagen. */
  .fausto-grid{align-items:start}
  .fausto-photo{position:sticky;top:96px}
}

/* Tarjetas de redes: la autoridad de Fausto, verificable de un vistazo */
.fausto-redes{
  display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.6rem 0 0;
}
@media (min-width:640px){.fausto-redes{grid-template-columns:repeat(4,1fr)}}
.red-card{
  display:flex;align-items:center;gap:.7rem;padding:.75rem .8rem;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:13px;text-decoration:none;color:var(--text);
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.light .red-card{background:#fff;border-color:rgba(18,26,19,.1);color:var(--warm-text)}
.red-card:hover{
  border-color:var(--green-line);background:var(--green-soft);transform:translateY(-3px);
}
.red-icono{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.red-icono svg{width:19px;height:19px;fill:#fff}
.red-meta{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.red-meta b{font-family:var(--font-display);font-weight:900;font-size:1rem;letter-spacing:-.01em}
.red-meta i{font-style:normal;font-size:.65rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);margin-top:3px}
.light .red-meta i{color:var(--warm-muted)}
@media (prefers-reduced-motion:reduce){.red-card:hover{transform:none}}

/* Menos aire muerto al final de la sección en móvil */
@media (max-width:899px){
  #fausto{padding-bottom:clamp(36px,7vw,56px)}
  .fausto-grid{gap:clamp(20px,4vw,28px)}
}

/* ==========================  FAUSTO · FONDO OSCURO  ======================
   La sección era cálida (crema) y la foto es oscura: la imagen quedaba como
   un recorte pegado encima. En oscuro el fondo continúa la foto.
   Como la sección de al lado también es oscura, esta usa --bg-2 y dos
   filetes finos para que se siga leyendo como un bloque aparte.
   ======================================================================== */
#fausto{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* La cita usaba color de texto claro; sobre crema era casi invisible.
   Se corrige para cualquier bloque cálido que la use. */
.light .quote{color:var(--warm-text);border-left-color:var(--green-dark)}
.light .quote cite{color:var(--warm-muted)}

/* ----------  Botones de tienda (rellenan el hueco bajo la cita)  --------
   OJO: NO llevan a la tienda. La app pide cuenta activa, así que mandar a
   alguien a descargarla antes de tener plan es una descarga que acaba en
   un muro. Estos botones bajan a los planes; el texto lo dice claro. */
.fausto-app{margin-top:1.8rem}
.fausto-app-nota{font-size:.9rem;color:var(--faint);margin:0 0 .8rem}
.fausto-app-botones{display:flex;flex-wrap:wrap;gap:.7rem}
.store-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.62rem 1.05rem;border-radius:12px;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  transition:border-color .18s ease,transform .18s ease;
}
.store-btn:hover{border-color:var(--green-line);transform:translateY(-2px)}
.store-icono svg{width:22px;height:22px;fill:currentColor;display:block}
.store-texto{display:flex;flex-direction:column;line-height:1.15}
.store-texto i{font-style:normal;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.store-texto b{font-size:.98rem;font-weight:700}
@media (max-width:420px){.store-btn{flex:1 1 100%;justify-content:center}}

/* ==========================  HERO · COLOCACIÓN DEL CURSIVO  =============
   Antes iba dentro de la columna de texto y caía justo detrás del titular.
   Ahora se ancla a la sección entera y solo aparece cuando SOBRA sitio a
   los lados (a partir de 1200 px). Por debajo, no se dibuja.
   ====================================================================== */
.hero{position:relative}
.script-deco{display:none}
@media (min-width:1200px){
  .script-deco{
    display:block;
    right:auto;left:auto;top:auto;
    width:190px;font-size:1.85rem;text-align:left;
  }
  .script-deco--right{right:max(1.25rem,calc(50% - 592px));top:44%}
  .script-deco--left{left:max(1.25rem,calc(50% - 592px));top:52%;text-align:right}
}

/* ----------  Elementos flotantes de gimnasio  --------------------------
   Decoración, no contenido: van tras todo (z-index 0), no se pueden
   pulsar y se ocultan en móvil, donde no hay márgenes que llenar. */
.gym-float{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.gym-float-item{position:absolute;color:var(--green);opacity:.13}
.gym-float-item svg{
  width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.gym-1{width:74px;height:74px;left:4%;top:16%;animation:flotar 11s ease-in-out infinite}
.gym-2{width:58px;height:58px;left:8%;top:62%;animation:flotar 14s ease-in-out infinite .8s}
.gym-3{width:52px;height:52px;right:6%;top:24%;animation:flotar 13s ease-in-out infinite .4s}
.gym-4{width:46px;height:46px;right:9%;top:70%;animation:flotar 12s ease-in-out infinite 1.2s}
.gym-5{width:62px;height:62px;left:46%;top:6%;opacity:.08;animation:flotar 16s ease-in-out infinite .6s}
@keyframes flotar{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-16px) rotate(6deg)}
}
@media (max-width:900px){.gym-float{display:none}}
@media (prefers-reduced-motion:reduce){.gym-float-item{animation:none}}

/* ----------  Hero B a dos columnas en escritorio  ----------------------
   Adan lo pidió así: texto a la izquierda, foto al lado del subtítulo.
   En móvil (el 80% del tráfico) NO se toca: sigue siendo texto y debajo
   la foto, que es lo que mejor se lee en vertical. */
@media (min-width:1000px){
  .hero-split{
    max-width:var(--max);
    display:grid;grid-template-columns:1.02fr .98fr;
    gap:clamp(28px,4vw,52px);align-items:center;text-align:left;
  }
  .hero-split .hero-col-texto{grid-column:1;grid-row:1}
  .hero-split .hero-col-media{grid-column:2;grid-row:1}
  .hero-split .hero-shot{margin:0;max-width:none}
  .hero-split .hero-shot img{aspect-ratio:4/3}
  .hero-split .hero-mini{grid-column:1 / -1;grid-row:2;justify-content:flex-start;margin-top:.4rem}
  .hero-split .lead,
  .hero-split .hero-fine{margin-inline:0}
  .hero-split .hero-ctas{justify-content:flex-start}
}

/* ==========================  VSL · PIEZAS NUEVAS  ======================
   El botón se esconde con una clase, NO con display en el HTML: así el
   guion puede volver a mostrarlo cuando el vídeo se pausa.
   ====================================================================== */
.vsl-play.oculto{opacity:0;pointer-events:none}
.vsl-play{transition:opacity .25s ease}

.vsl-cargando{
  position:absolute;inset:0;z-index:9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  background:rgba(5,8,7,.62);pointer-events:none;
}
.vsl-cargando[hidden]{display:none}
.vsl-spinner{
  width:46px;height:46px;border-radius:50%;
  border:3px solid var(--green-soft);border-top-color:var(--green);
  animation:vslGirar .8s linear infinite;
}
@keyframes vslGirar{to{transform:rotate(360deg)}}
.vsl-cargando-texto{font-size:.86rem;font-weight:600;color:var(--text)}
@media (prefers-reduced-motion:reduce){.vsl-spinner{animation-duration:2s}}

.vsl-barra{
  position:absolute;left:0;right:0;bottom:0;height:4px;z-index:11;
  background:rgba(0,0,0,.55);pointer-events:none;overflow:hidden;
}
.vsl-barra span{
  display:block;width:0;height:100%;
  background:linear-gradient(90deg,var(--green),#0be36a);
  box-shadow:0 0 8px rgba(32,255,120,.7);
  transition:width .35s linear;
}

/* ----------  Botones de tienda bajo la imagen del hero  ---------------- */
.hero-tiendas{margin-top:1rem;text-align:center}
.hero-tiendas-botones{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.hero-tiendas-nota{
  margin:.7rem 0 0;font-size:.8rem;color:var(--faint);
}
@media (min-width:1000px){
  .hero-split .hero-tiendas{text-align:left}
  .hero-split .hero-tiendas-botones{justify-content:flex-start}
}

/* ==========================  PUENTES DE CTA  ===========================
   Entre el hero y la sección de Fausto había siete bloques seguidos sin
   un solo botón: quien se convencía a mitad de página no tenía dónde
   pulsar. Estos tres puentes cortan esa travesía. Son tres, no siete:
   un botón detrás de cada bloque se lee como insistencia, y la venta
   agresiva es justo lo que revisa TikTok.
   ====================================================================== */
.puente-cta{
  padding:clamp(30px,5vw,46px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2);text-align:center;
}
.puente-cta .container{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.puente-texto{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.1rem,2.6vw,1.45rem);max-width:34ch;text-wrap:balance;
}
.puente-fine{margin:0;font-size:.82rem;color:var(--faint)}
/* Si el puente cae justo después de un bloque cálido, el filete sobra */
.light + .puente-cta{border-top:0}

/* ==========================  IMÁGENES FUNDIDAS AL FONDO  ===============
   Antes cada foto grande era un rectángulo con borde: fondo → borde →
   imagen → borde → fondo. Se leía como una pila de bloques.
   Ahora las fotos grandes de las secciones OSCURAS se desvanecen por
   arriba y por abajo con una máscara, así que nacen y mueren dentro del
   fondo y el scroll se siente continuo.

   Se aplica SOLO en zonas oscuras. En los bloques crema no: ahí el
   contraste de la tarjeta es justo lo que hace de respiración visual.
   ====================================================================== */
.hero-shot,
.value-media,
.live-shot,
.equipo-shot,
.fausto-photo{
  border:0;
  box-shadow:none;
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0%, #000 9%, #000 88%, transparent 100%);
  mask-image:linear-gradient(180deg,
    transparent 0%, #000 9%, #000 88%, transparent 100%);
}

/* El hero es lo primero que se ve: ahí el desvanecido va solo abajo,
   para que la foto entre limpia y se funda al bajar. */
.hero-shot{
  -webkit-mask-image:linear-gradient(180deg,#000 0%, #000 84%, transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%, #000 84%, transparent 100%);
}

/* La foto de Fausto va en columna junto al texto: se difumina por abajo
   y muy poco por arriba, para no comerle la cara. */
@media (min-width:900px){
  .fausto-photo{
    -webkit-mask-image:linear-gradient(180deg,#000 0%, #000 86%, transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%, #000 86%, transparent 100%);
  }
}

/* Safari antiguo ignora mask-image: sin borde y sin máscara la foto se
   ve entera, que es un resultado aceptable, no roto. */

/* ==========================  CIERRE CON FOTO DE FONDO  =================
   La última pantalla era negra y vacía. Ahora lleva detrás una mujer
   entrenando en casa, con un velo oscuro encima para que el texto y el
   botón se sigan leyendo: la legibilidad en móvil sin ampliar es un
   requisito de revisión de TikTok, no una preferencia estética.
   La foto se funde por arriba y por abajo, como el resto.
   ====================================================================== */
.closing{position:relative;overflow:hidden;isolation:isolate}
.closing-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.closing-fondo img{
  width:100%;height:100%;object-fit:cover;object-position:center 35%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
}
/* El velo: dos capas. Una vertical que ancla el texto y otra radial que
   apaga el centro justo donde caen el titular y el botón. */
.closing-fondo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%,rgba(5,8,7,.9) 0%,rgba(5,8,7,.66) 55%,transparent 100%),
    linear-gradient(180deg,var(--bg) 0%,rgba(5,8,7,.72) 28%,rgba(5,8,7,.72) 72%,var(--bg) 100%);
}
.closing .container{position:relative;z-index:1}
.closing h2,.closing .muted{text-shadow:0 2px 14px rgba(0,0,0,.75)}
@media (max-width:640px){
  /* En vertical la foto se recorta mucho: se aprieta el velo para no
     perder contraste en el botón. */
  .closing-fondo::after{
    background:
      radial-gradient(ellipse 95% 55% at 50% 58%,rgba(5,8,7,.92) 0%,rgba(5,8,7,.74) 60%,transparent 100%),
      linear-gradient(180deg,var(--bg) 0%,rgba(5,8,7,.78) 24%,rgba(5,8,7,.78) 76%,var(--bg) 100%);
  }
}

/* ==========================  VSL · UN 25% MÁS GRANDE  ==================
   El vídeo se veía pequeño y era por una razón concreta: aunque .vsl-wrap
   declaraba 820 px, vive dentro de .hero-center, que mide 760 px. Ese
   límite del padre mandaba, así que el vídeo nunca pasaba de 760.

   Para agrandarlo hay que SALIRSE de esa columna, no solo subir el número.
   950 px = 760 × 1,25 exacto. El desbordamiento es simétrico (95 px por
   lado) para que siga centrado, y cabe de sobra en el contenedor de
   1.180 px, así que no genera barra horizontal.

   Solo a partir de 1.000 px: en móvil el vídeo ya ocupa todo el ancho y
   ahí no hay nada que agrandar.
   ====================================================================== */
@media (min-width:1000px){
  .vsl-wrap{
    max-width:none;
    width:calc(100% + 190px);
    margin-left:-95px;
    margin-right:-95px;
  }
  /* El pie del vídeo se queda con el ancho del texto: una línea de 950 px
     se lee peor que una de 760. */
  .vsl-caption{max-width:760px;margin-inline:auto}
}

/* ==========================  VSL · PÍLDORA DE SONIDO  ==================
   Sustituye al botón grande que tapaba el vídeo. Es la solución de
   Wistia y compañía: una píldora pequeña y semitransparente en una
   esquina que avisa de que el vídeo va sin sonido, sin esconder lo que
   se está viendo. La primera pantalla es lo que decide si alguien se
   queda: tapar el vídeo con un botón enorme juega en contra.
   ====================================================================== */
.vsl-pill{
  position:absolute;top:14px;left:14px;z-index:10;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border-radius:999px;
  background:rgba(5,8,7,.72);
  border:1px solid rgba(255,255,255,.2);
  color:var(--text);
  font-family:var(--font-body);font-size:.82rem;font-weight:700;
  letter-spacing:.01em;line-height:1;white-space:nowrap;cursor:pointer;
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  backdrop-filter:blur(10px) saturate(150%);
  box-shadow:0 4px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .2s ease,border-color .2s ease,transform .2s ease,opacity .25s ease;
  animation:vslLatido 2.6s ease-in-out infinite;
}
.vsl-pill:hover{
  background:var(--green);color:#04120a;border-color:var(--green);
  transform:scale(1.04);animation:none;
}
.vsl-pill:hover svg{fill:#04120a;stroke:#04120a}
.vsl-pill.oculto{opacity:0;pointer-events:none}

.vsl-pill-icono{display:inline-flex;width:17px;height:17px;flex:0 0 17px}
.vsl-pill-icono svg{width:100%;height:100%;display:block;fill:currentColor}
.vsl-pill-icono .tacha{stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
/* Se ve el icono de mudo o el de reproducir, nunca los dos. */
.vsl-pill .ico-play{display:none}
.vsl-pill.es-play .ico-mudo{display:none}
.vsl-pill.es-play .ico-play{display:block}

/* Latido muy suave: llama la atención sin parecer un anuncio parpadeante. */
@keyframes vslLatido{
  0%,100%{box-shadow:0 4px 18px rgba(0,0,0,.45),0 0 0 0 rgba(32,255,120,.45),inset 0 1px 0 rgba(255,255,255,.08)}
  50%    {box-shadow:0 4px 18px rgba(0,0,0,.45),0 0 0 7px rgba(32,255,120,0),inset 0 1px 0 rgba(255,255,255,.08)}
}
@media (prefers-reduced-motion:reduce){.vsl-pill{animation:none}}
@media (max-width:640px){
  .vsl-pill{top:10px;left:10px;padding:.5rem .8rem;font-size:.72rem;gap:.4rem}
  .vsl-pill-icono{width:15px;height:15px;flex-basis:15px}
}

/* El vídeo entero es pulsable: pausa y reanuda. */
.vsl-wrap video{cursor:pointer}

/* ==========================  VENTANA DE LA RULETA  =====================
   Aspecto calcado del pop-up que ya usan (referencia de Adan): caja negra
   con filo verde, ruleta a la izquierda, texto en mayúsculas grandes a la
   derecha y un botón verde que brilla.
   Lo que NO es estética sino de que funcione: se cierra de tres maneras
   (aspa, fuera, Escape), la página de detrás se bloquea mientras está
   abierta, y en móvil la caja hace scroll interno para que el botón nunca
   quede fuera de pantalla.
   ====================================================================== */
.ruleta-fondo{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s ease;overscroll-behavior:contain;
}
.ruleta-fondo[hidden]{display:none}
.ruleta-fondo.abierta{opacity:1}

.ruleta-caja{
  position:relative;width:min(100%,1000px);max-height:92vh;overflow:auto;
  background:#070a08;
  border:1px solid rgba(32,255,120,.45);
  border-radius:22px;
  box-shadow:0 0 0 1px rgba(0,0,0,.9),0 0 60px rgba(32,255,120,.18),0 30px 90px rgba(0,0,0,.85);
  transform:scale(.96) translateY(12px);transition:transform .35s cubic-bezier(.2,1,.3,1);
}
.ruleta-fondo.abierta .ruleta-caja{transform:scale(1) translateY(0)}

.ruleta-cerrar{
  position:absolute;top:14px;right:16px;z-index:5;
  width:44px;height:44px;border-radius:50%;   /* 44 px: el mínimo para el dedo */
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.72);font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,transform .25s ease,color .25s ease;
}
.ruleta-cerrar:hover{background:rgba(255,255,255,.12);color:#fff;transform:rotate(90deg)}

.ruleta-grid{display:grid;grid-template-columns:1fr}
@media (min-width:820px){.ruleta-grid{grid-template-columns:.92fr 1.08fr;align-items:center}}

.ruleta-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,40px) 1.2rem;
  background:radial-gradient(circle at 50% 50%,#0d140f,#050807 72%);
}
.ruleta-halo{
  position:absolute;width:280px;height:280px;border-radius:50%;
  background:var(--green);filter:blur(120px);opacity:.18;
}
.ruleta-img{
  position:relative;width:min(100%,400px);height:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.85));
  animation:ruletaGira 22s linear infinite;
}
@keyframes ruletaGira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ruleta-img{animation:none}}

.ruleta-cuerpo{padding:clamp(26px,4vw,48px) clamp(24px,4vw,48px) clamp(28px,4vw,44px);background:#111413;border-radius:0 0 21px 21px}
@media (min-width:820px){.ruleta-cuerpo{border-radius:0 21px 21px 0;min-height:560px;display:flex;flex-direction:column;justify-content:center}}
.ruleta-paso{display:none}
.ruleta-paso.activo{display:block;animation:ruletaEntra .35s ease}
@keyframes ruletaEntra{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* Etiqueta: rosa en el paso 1 (aviso), verde en el paso 2 (avance) */
.ruleta-tag{
  display:inline-flex;align-items:center;gap:.55em;
  background:#ff0055;border:0;color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:.55em 1em;border-radius:6px;margin-bottom:1.25rem;
  box-shadow:0 0 24px rgba(255,45,120,.45);
}
.ruleta-tag::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 7px;
}
.ruleta-tag--ok{
  background:rgba(32,255,120,.14);color:var(--green);
  border:1px solid var(--green-line);box-shadow:0 0 24px rgba(32,255,120,.2);
}
.ruleta-tag--ok::before{background:var(--green)}

.ruleta-titulo{
  font-family:"Bebas Neue",var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(3.2rem,6vw,5rem);line-height:.9;letter-spacing:.02em;
  margin:0 0 .85rem;text-wrap:balance;
}
.ruleta-titulo--sm{font-size:clamp(2.5rem,4vw,3.5rem)}
.ts-neon{color:var(--green);display:block;text-shadow:0 0 34px rgba(32,255,120,.45)}
.ruleta-texto{color:var(--muted);margin:0 0 1.6rem;max-width:44ch;font-size:1rem}
.ruleta-texto strong{color:var(--text);font-weight:700}
.ruleta-fine{
  font-size:.68rem;color:var(--faint);margin:1rem 0 0;text-align:center;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.btn-block{width:100%;justify-content:center}

/* El botón de la ruleta brilla; es el único de la ventana */
#ruleta-ir{
  text-transform:uppercase;letter-spacing:.04em;font-weight:800;
  font-size:1.02rem;padding-block:1.15em;border-radius:12px;
  box-shadow:0 0 34px rgba(32,255,120,.4);
}
#ruleta-ir:hover{box-shadow:0 0 46px rgba(32,255,120,.55)}

/* El formulario de GHL vive dentro de este marco */
.ruleta-form{border-radius:14px;overflow:hidden;background:transparent}
.ruleta-form iframe{display:block;width:100%;min-height:470px;border:0;background:transparent}
@media (max-width:640px){.ruleta-form iframe{min-height:440px}}

/* Mientras la ventana está abierta, la página de detrás no se mueve */
body.ruleta-abierta{overflow:hidden}