/* fosdifilinich.com · sistema «verde vivo» · vista previa 2026-10-13
   La vida de la landing de Su Línea Fit (luz que se mueve, formas amables, botones que brillan,
   un formulario que recibe a todos los botones) vestida con el negro, el blanco y el verde de Fosdi.
   Un solo acento: el verde de la marca en varias intensidades. Nada de azul. */

/* ===================================================================== 0 · tokens */
:root{
  --negro:#110F14; --verde:#187A46; --hondo:#005C26;
  --v50:#EFF5F0; --v100:#DCEBE0; --v300:#8FBEA3; --v900:#0B3B20;
  --luz:#34D27B;                     /* solo luces, degradados y botones sobre oscuro; nunca texto sobre claro */
  --noche:#06110B;
  --papel:#F6F5F0; --linea:#E7E5DC; --txt:#575D53; --blanco:#fff;
  --g-marca:linear-gradient(110deg,#8FBEA3 0%,#34D27B 34%,#187A46 68%,#005C26 100%);
  --g-hondo:linear-gradient(110deg,#187A46 0%,#0F6B3A 50%,#005C26 100%);
  --g-luz:linear-gradient(110deg,#F2FBF5 0%,#DCEBE0 28%,#8FBEA3 62%,#34D27B 100%);
  --g-luz-texto:linear-gradient(110deg,#FFFFFF 0%,#DCEBE0 45%,#8FBEA3 100%);
  --g-banda:linear-gradient(135deg,#0B3B20 0%,#005C26 52%,#187A46 100%);
  --g-noche:linear-gradient(125deg,#06110B 0%,#0B3B20 42%,#005C26 78%,#187A46 100%);
  --f:"Jost","Century Gothic","Futura","Segoe UI",sans-serif;
  --clavar:cubic-bezier(.16,1,.3,1); --suave:cubic-bezier(.22,.61,.36,1); --rebote:cubic-bezier(.34,1.56,.64,1);
  --r-chip:12px; --r-btn:14px; --r-campo:14px; --r-tarjeta:24px; --r-caja:28px; --r-pill:999px;
  --sombra:0 1px 0 rgba(17,15,20,.04),0 26px 50px -30px rgba(17,15,20,.38);
  --sombra-cta:inset 0 1px 0 rgba(255,255,255,.3),0 16px 30px -14px rgba(0,92,38,.7);
  --seccion:clamp(64px,10vw,120px);
}

/* ===================================================================== 1 · base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{font-family:var(--f);font-weight:400;color:var(--negro);background:var(--papel);line-height:1.65;font-size:17px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
::selection{background:var(--hondo);color:#fff}
h1,h2,h3{font-family:var(--f);font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(36px,8.4vw,68px);line-height:1.14;letter-spacing:-.02em}
h2{font-size:clamp(28px,5.2vw,50px);line-height:1.18;margin-bottom:14px;text-wrap:balance}
h3{font-size:21px;line-height:1.34;margin-bottom:6px}
p{max-width:64ch}
strong,b{font-weight:600}
.envoltura{width:min(1120px,100% - 40px);margin-inline:auto}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.6;color:var(--txt);max-width:50ch}
.chico{font-size:14px;line-height:1.6;color:var(--txt)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:12px;letter-spacing:.32em;text-transform:uppercase;margin-bottom:14px;color:var(--verde)}
.kicker::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--g-marca);flex:none}
.oscura .kicker,.hero .kicker,.corte .kicker{color:var(--v300)}
.banda .kicker,#cierre .kicker{color:#fff}
.banda .kicker::before,#cierre .kicker::before{background:#fff}
.degradado{background:var(--g-hondo);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 7s linear infinite}
.oscura .degradado,.hero .degradado,.corte .degradado{background-image:var(--g-luz-texto)}
.banda .degradado,#cierre .degradado{background-image:linear-gradient(110deg,#FFFFFF,#DCEBE0)}
@keyframes brillo{to{background-position:200% center}}
.salto{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--negro);padding:10px 16px;border-radius:12px}
.salto:focus{left:12px}

/* ===================================================================== 2 · botones */
.btn{--fondo:var(--g-hondo);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  font:600 16px/1.25 var(--f);letter-spacing:.005em;color:#fff;text-decoration:none;text-align:center;border:0;cursor:pointer;
  padding:15px 26px;border-radius:var(--r-btn);background:var(--fondo);overflow:hidden;isolation:isolate;
  box-shadow:var(--sombra-cta);transition:transform .25s var(--suave),box-shadow .25s var(--suave),filter .25s}
.btn::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:42%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);z-index:-1;transition:left .65s var(--clavar);pointer-events:none}
.btn:hover{transform:translateY(-2px);filter:saturate(1.12)}
.btn:hover::after{left:120%}
.btn:active{transform:translateY(1px);transition-duration:.06s}
.btn:focus-visible{outline:3px solid var(--luz);outline-offset:3px}
.btn[disabled]{opacity:.75;cursor:progress}
.btn.grande{font-size:18px;padding:18px 32px;border-radius:16px}
.btn.luz{--fondo:var(--g-luz);color:var(--negro);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 18px 34px -14px rgba(52,210,123,.7)}
.btn.blanco{--fondo:#fff;color:var(--hondo);box-shadow:0 20px 40px -18px rgba(0,30,12,.7)}
.btn.fantasma{background:transparent;color:var(--negro);box-shadow:inset 0 0 0 2px rgba(17,15,20,.16)}
.btn.fantasma:hover{box-shadow:inset 0 0 0 2px var(--verde);color:var(--hondo)}
.oscura .btn.fantasma,.banda .btn.fantasma,.hero .btn.fantasma,#cierre .btn.fantasma{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.oscura .btn.fantasma:hover,.banda .btn.fantasma:hover,.hero .btn.fantasma:hover,#cierre .btn.fantasma:hover{box-shadow:inset 0 0 0 2px #fff;color:#fff}
.btn.brilla::after{animation:destello 4.5s var(--clavar) infinite 1.6s}
@keyframes destello{0%,70%{left:-60%}100%{left:120%}}
.acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.acciones.centro{justify-content:center}
.enlace{font-weight:500;text-underline-offset:4px;text-decoration-thickness:1.5px}
.hero .enlace,.oscura .enlace{color:#fff}
.pie-cta{margin-top:12px}

/* ===================================================================== 3 · cabecera */
#avance{position:fixed;inset:0 auto auto 0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--g-marca);z-index:70}
#cab{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .35s var(--suave),box-shadow .35s var(--suave)}
#cab .envoltura{display:flex;align-items:center;gap:14px;min-height:68px}
#cab .logo{display:block;flex:none}
#cab .logo img{height:40px;width:auto}
#cab .logo-keto img{height:48px}
.caminos{display:flex;gap:4px;margin-left:auto;padding:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.caminos a{font:500 14px/1 var(--f);color:#fff;text-decoration:none;padding:9px 14px;border-radius:var(--r-pill);white-space:nowrap;transition:background .25s,color .25s}
.caminos a:hover{background:rgba(255,255,255,.14)}
.caminos a[aria-current="page"]{background:#fff;color:var(--hondo)}
#cab .btn{padding:10px 16px;font-size:14px;border-radius:12px;min-height:40px;flex:none}
#cab.claro{background:rgba(246,245,240,.9);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 10px 30px -18px rgba(17,15,20,.4)}
#cab.claro .caminos{background:rgba(17,15,20,.04);border-color:rgba(17,15,20,.08)}
#cab.claro .caminos a{color:var(--negro)}
#cab.claro .caminos a[aria-current="page"]{background:var(--hondo);color:#fff}

/* ===================================================================== 4 · el hero (las dos formas) */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.hero h1{margin-bottom:22px}
.hero .lead{color:rgba(255,255,255,.9);margin-bottom:30px}
.hero .chico{color:rgba(255,255,255,.78);margin-top:14px}
.hero .chico a{color:#fff}
.pastilla{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:14px;padding:9px 16px 9px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:22px}
.pastilla i{width:10px;height:10px;border-radius:50%;background:var(--luz);animation:latido 2s infinite;flex:none}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(52,210,123,.7)}70%{box-shadow:0 0 0 12px rgba(52,210,123,0)}100%{box-shadow:0 0 0 0 rgba(52,210,123,0)}}
.linea{display:block;overflow:hidden;padding-bottom:.08em}
.linea span{display:inline-block;transition:transform .7s var(--clavar)}
.js .linea span{transform:translateY(110%)}
.linea:nth-child(2) span{transition-delay:.07s}.linea:nth-child(3) span{transition-delay:.14s}
.tarde{transition:opacity .8s var(--clavar) .42s,transform .8s var(--clavar) .42s}
.js .tarde{opacity:0;transform:translateY(18px)}
.listo .linea span{transform:none}
.listo .tarde{opacity:1;transform:none}
.aurora{position:absolute;inset:-20%;pointer-events:none;filter:blur(70px);z-index:-1}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.aurora i:nth-child(1){width:46vmax;height:46vmax;left:-6%;top:-4%;background:#34D27B;opacity:.32;animation:nube1 22s var(--suave) infinite alternate}
.aurora i:nth-child(2){width:40vmax;height:40vmax;right:-8%;top:8%;background:#8FBEA3;opacity:.28;animation:nube2 26s var(--suave) infinite alternate}
.aurora i:nth-child(3){width:34vmax;height:34vmax;left:28%;bottom:-18%;background:#187A46;opacity:.5;animation:nube3 24s var(--suave) infinite alternate}
.aurora i:nth-child(4){width:26vmax;height:26vmax;right:18%;bottom:6%;background:#EFF5F0;opacity:.1;animation:nube1 20s var(--suave) infinite alternate-reverse}
@keyframes nube1{to{transform:translate(8vmax,6vmax) scale(1.12)}}
@keyframes nube2{to{transform:translate(-7vmax,9vmax) scale(.92)}}
@keyframes nube3{to{transform:translate(-9vmax,-6vmax) scale(1.08)}}
.luciernagas{position:absolute;inset:0;pointer-events:none;z-index:-1}
.luciernagas b{position:absolute;width:4px;height:4px;border-radius:50%;background:#EFF5F0;box-shadow:0 0 12px 3px rgba(143,190,163,.75);animation:titila 3.6s ease-in-out infinite}
@keyframes titila{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.ola{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:2}
.ola svg{width:100%;height:clamp(54px,8vw,110px)}

/* A · la ventana viva (home y tienda) */
.hero.ventana-viva{padding:130px 0 140px;background:radial-gradient(closest-side at 72% 50%,rgba(6,17,11,.85) 0 42%,rgba(6,17,11,.4) 64%,transparent 82%),var(--g-noche)}
.hero-rejilla{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.ventana-viva h1{font-size:clamp(34px,4.9vw,58px)}
.visual{position:relative;justify-self:center;width:min(440px,82vw);aspect-ratio:1}
.rayos{position:absolute;inset:-14%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 6%,rgba(52,210,123,.34) 8%,transparent 12% 22%,rgba(143,190,163,.32) 25%,transparent 29% 39%,
  rgba(255,255,255,.16) 42%,transparent 46% 56%,rgba(52,210,123,.28) 59%,transparent 63% 73%,rgba(220,235,224,.26) 76%,transparent 80% 100%);
  -webkit-mask:radial-gradient(circle,#000 34%,transparent 70%);mask:radial-gradient(circle,#000 34%,transparent 70%);animation:gira 28s linear infinite}
@keyframes gira{to{transform:rotate(1turn)}}
.halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(52,210,123,.5),transparent 66%);filter:blur(18px);animation:respira 5s ease-in-out infinite}
@keyframes respira{50%{transform:scale(1.08);opacity:.75}}
.ventana{position:absolute;left:11%;top:11%;width:78%;height:78%;border-radius:50%;overflow:hidden;animation:flota 6s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 80px -20px rgba(52,210,123,.6),0 0 120px -30px rgba(143,190,163,.8)}
.ventana img{width:100%;height:100%;object-fit:cover}
@keyframes flota{50%{transform:translateY(-14px)}}
.orbita{position:absolute;inset:2%;border-radius:50%;border:1px dashed rgba(255,255,255,.2);animation:gira 18s linear infinite}
.orbita i{position:absolute;width:14px;height:14px;border-radius:50%;top:-7px;left:calc(50% - 7px);background:var(--luz);box-shadow:0 0 18px 4px rgba(52,210,123,.8)}
.orbita.dos{inset:-4%;animation-duration:26s;animation-direction:reverse}
.orbita.dos i{background:#EFF5F0;box-shadow:0 0 18px 4px rgba(239,245,240,.8);top:auto;bottom:-7px}
.chip{position:absolute;display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px;color:var(--negro);white-space:nowrap;
  padding:10px 14px;border-radius:var(--r-chip);background:rgba(255,255,255,.95);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);animation:flota 7s ease-in-out infinite}
.chip span{font-size:18px}
.chip.c1{left:-10%;top:16%}.chip.c2{right:-8%;top:46%;animation-delay:-2.3s}.chip.c3{left:2%;bottom:6%;animation-delay:-4.6s}

/* B · la foto a sangre (keto y trabaja conmigo) */
.hero.a-sangre{padding:150px 0 170px;background:var(--noche)}
.hero-foto{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:-2;overflow:hidden}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 24%);filter:contrast(1.06) saturate(.95);animation:zoomHero 2.2s var(--suave) both}
@keyframes zoomHero{from{transform:scale(1.06)}to{transform:none}}
.hero-foto::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,#06110B 0%,rgba(6,17,11,.82) 18%,rgba(6,17,11,.25) 52%,rgba(11,59,32,.08) 100%),
  linear-gradient(0deg,rgba(6,17,11,.85) 0%,transparent 34%)}
.hero.a-sangre .aurora{opacity:.75}
.hero.a-sangre .envoltura{position:relative}
.hero.a-sangre .texto{max-width:620px}
.sellos-hero{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.sellos-hero span{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:14px;padding:9px 14px;border-radius:var(--r-chip);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ===================================================================== 5 · secciones */
section{position:relative}
.sec{padding:var(--seccion) 0}
.clara{background:
  radial-gradient(700px 380px at 6% 8%,rgba(52,210,123,.13),transparent 70%),
  radial-gradient(640px 420px at 96% 30%,rgba(143,190,163,.22),transparent 70%),
  radial-gradient(560px 360px at 50% 100%,rgba(24,122,70,.07),transparent 70%),var(--papel)}
.blanca{background:radial-gradient(700px 380px at 90% 10%,rgba(143,190,163,.16),transparent 70%),radial-gradient(640px 420px at 5% 90%,rgba(52,210,123,.1),transparent 70%),#fff}
.oscura{color:#fff;overflow:hidden;background:radial-gradient(78% 58% at 12% -8%,rgba(24,122,70,.34),transparent 60%),radial-gradient(56% 46% at 104% 108%,rgba(143,190,163,.16),transparent 62%),var(--negro)}
.oscura::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 72%)}
.oscura>*{position:relative;z-index:1}
.banda{color:#fff;overflow:hidden;background:radial-gradient(900px 520px at 12% 18%,rgba(52,210,123,.38),transparent 62%),radial-gradient(900px 600px at 92% 80%,rgba(143,190,163,.3),transparent 62%),var(--g-banda)}
.oscura h2,.banda h2,.oscura h3{color:#fff}
.oscura .lead,.banda .lead,.banda p{color:rgba(255,255,255,.9)}
.oscura p{color:rgba(255,255,255,.84)}
.cabeza{text-align:center;margin-bottom:46px}
.cabeza p{margin-inline:auto}
.centro{text-align:center;margin-top:36px}
.centro .acciones{justify-content:center}

/* ===================================================================== 6 · tarjetas con ícono */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rejilla.dos{grid-template-columns:repeat(2,1fr)}
.tarjeta{position:relative;background:#fff;border-radius:var(--r-tarjeta);padding:30px 26px 28px;box-shadow:var(--sombra);transition:transform .35s var(--suave),box-shadow .35s var(--suave)}
.tarjeta::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;border-radius:var(--r-tarjeta) var(--r-tarjeta) 0 0;background:var(--tono)}
.tarjeta:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 60px -28px var(--sombra-t)}
.tarjeta p{color:var(--txt);font-size:16px}
.icono{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:30px;margin-bottom:18px;background:var(--tono);box-shadow:0 14px 30px -12px var(--sombra-t)}
.t1{--tono:linear-gradient(135deg,#34D27B,#187A46);--sombra-t:rgba(24,122,70,.5)}
.t2{--tono:linear-gradient(135deg,#8FBEA3,#187A46);--sombra-t:rgba(24,122,70,.45)}
.t3{--tono:linear-gradient(135deg,#187A46,#0B3B20);--sombra-t:rgba(11,59,32,.5)}
.t4{--tono:linear-gradient(135deg,#DCEBE0,#8FBEA3);--sombra-t:rgba(143,190,163,.65)}
.t5{--tono:linear-gradient(135deg,#2A2D28,#110F14);--sombra-t:rgba(17,15,20,.45)}
.destacada{grid-column:1/-1;display:flex;gap:22px;align-items:flex-start}
.destacada .icono{flex:0 0 62px;margin-bottom:0}
.oscura .tarjeta{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);box-shadow:none;backdrop-filter:blur(6px)}
.oscura .tarjeta p{color:rgba(255,255,255,.82)}

/* ===================================================================== 7 · los caminos (home) */
.caminos-tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.camino{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-tarjeta);overflow:hidden;box-shadow:var(--sombra);transition:transform .35s var(--suave),box-shadow .35s var(--suave)}
.camino:hover{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(0,92,38,.5)}
.camino .foto{position:relative;aspect-ratio:10/7;overflow:hidden}
.camino .foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--suave)}
.camino:hover .foto img{transform:scale(1.05)}
.camino .etiqueta{position:absolute;left:14px;bottom:14px;font-weight:600;font-size:13px;letter-spacing:.04em;color:#fff;padding:7px 12px;border-radius:var(--r-pill);background:rgba(6,17,11,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.camino .cuerpo{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;flex:1}
.camino .cuerpo p{color:var(--txt);font-size:16px;flex:1}
.camino .btn{align-self:flex-start;margin-top:8px}

/* ===================================================================== 8 · pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.paso{position:relative;padding:26px 24px;border-radius:22px;background:rgba(255,255,255,.8);border:1px solid rgba(17,15,20,.06)}
.paso b{display:block;font:600 52px/1 var(--f);margin-bottom:10px;background:var(--g-hondo);-webkit-background-clip:text;background-clip:text;color:transparent}
.paso h3{font-size:19px}
.paso p{color:var(--txt);font-size:16px}

/* ===================================================================== 9 · quién: retrato, sellos, antes y después */
.quien{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.quien.invertido{grid-template-columns:1.15fr .85fr}
.quien.invertido .marco{order:2}
.marco{position:relative;justify-self:center;width:min(420px,86vw);isolation:isolate}
.marco::before{content:"";position:absolute;inset:-14px;border-radius:34px;background:var(--g-marca);transform:rotate(-4deg);opacity:.9;z-index:-1}
.marco::after{content:"";position:absolute;inset:-14px;border-radius:34px;background:linear-gradient(135deg,#DCEBE0,#34D27B);transform:rotate(5deg);opacity:.5;z-index:-2}
.marco img{border-radius:var(--r-caja);width:100%;aspect-ratio:5/6;object-fit:cover;object-position:50% 20%;box-shadow:0 30px 70px -30px rgba(17,15,20,.7)}
.corazon{position:absolute;right:-18px;top:-22px;font-size:44px;animation:latir 1.6s ease-in-out infinite;z-index:2}
@keyframes latir{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.sellos{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 26px}
.sello{font-weight:500;font-size:13.5px;padding:9px 14px;border-radius:var(--r-chip);background:#fff;box-shadow:0 10px 24px -16px rgba(17,15,20,.5)}
.oscura .sello{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:none;color:#fff}
.quien p{color:var(--txt);margin-bottom:16px}
.oscura .quien p{color:rgba(255,255,255,.84)}
.antes-despues{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 8px;max-width:520px}
.ad{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 20px 40px -24px rgba(17,15,20,.7);background:var(--negro)}
.ad img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%}
.ad span{position:absolute;left:10px;bottom:10px;font:600 13px var(--f);color:#fff;padding:6px 12px;border-radius:var(--r-pill);background:rgba(6,17,11,.72);backdrop-filter:blur(6px)}
.ad.despues span{background:var(--g-hondo)}
.pie-foto{font-size:14px;color:var(--txt);margin-bottom:18px}

/* ===================================================================== 10 · el corte (foto a pantalla completa y una sola frase) */
.corte{position:relative;min-height:clamp(440px,74vh,720px);display:grid;align-items:center;overflow:hidden;color:#fff;isolation:isolate;background:var(--noche)}
.corte .fondo{position:absolute;inset:-6% 0;z-index:-2}
.corte .fondo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 35%);filter:grayscale(.2) contrast(1.1) brightness(.92)}
.corte::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,17,11,.94) 0%,rgba(11,59,32,.78) 40%,rgba(11,59,32,.12) 100%)}
.corte.espejo::before{background:linear-gradient(270deg,rgba(6,17,11,.94) 0%,rgba(11,59,32,.78) 40%,rgba(11,59,32,.12) 100%)}
.corte::after{content:"";position:absolute;inset:0;pointer-events:none;border-top:1px solid rgba(52,210,123,.45);border-bottom:1px solid rgba(52,210,123,.3)}
.corte .envoltura{padding:80px 0}
.corte h2{font-size:clamp(32px,6.4vw,78px);line-height:1.16;max-width:17ch;text-wrap:balance}
.corte p{font-size:clamp(17px,2vw,21px);color:rgba(255,255,255,.9);max-width:44ch}
.corte.espejo .envoltura{text-align:right}
.corte.espejo h2,.corte.espejo p{margin-left:auto}

/* ===================================================================== 11 · la idea: dos combustibles */
.combustibles{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:34px 0 26px}
.combustible{border-radius:var(--r-tarjeta);padding:28px 26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.combustible .icono{--tono:linear-gradient(135deg,#34D27B,#187A46);--sombra-t:rgba(52,210,123,.4)}
.combustible.reserva{background:linear-gradient(160deg,rgba(52,210,123,.18),rgba(255,255,255,.04));border-color:rgba(143,190,163,.45)}
.combustible.reserva .icono{--tono:var(--g-luz)}
.cuentan{list-style:none;display:grid;gap:14px;margin:26px 0 30px;max-width:70ch}
.cuentan li{display:flex;gap:14px;align-items:flex-start;color:rgba(255,255,255,.88)}
.cuentan li span{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(143,190,163,.18);font-size:17px}
.cuentan b{color:#fff}
.idea-pie{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start;margin-top:6px}
.idea-pie p{margin-bottom:16px}
.idea-pie .btn{margin-top:8px}
.cuentan-caja{padding:24px 24px 6px;border-radius:var(--r-tarjeta);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.cuentan-caja h3{font-size:18px;color:var(--v300)}
.cuentan-caja .cuentan{margin:16px 0 20px}
.yo .btn{margin-top:16px}

/* ===================================================================== 12 · testimonios: carrusel */
.carrusel{position:relative}
.pista{display:flex;align-items:flex-start;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 4px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pista::-webkit-scrollbar{display:none}
.pista:focus-visible{outline:3px solid var(--luz);outline-offset:4px;border-radius:12px}
.caso{flex:0 0 min(400px,82%);scroll-snap-align:center;background:#fff;border-radius:var(--r-tarjeta);overflow:hidden;box-shadow:0 26px 50px -30px rgba(17,15,20,.55);border:1px solid rgba(17,15,20,.06)}
.caso img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--negro)}
.caso figcaption{padding:14px 18px 18px;font:600 17px var(--f);display:flex;align-items:center;gap:10px}
.caso figcaption::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--g-hondo)}
.tuyo .tu-marco{aspect-ratio:1/1;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;background:var(--g-banda)}
.tu-foto{border:3px dashed rgba(255,255,255,.8);border-radius:18px;display:grid;place-items:center;text-align:center;color:#fff;font:600 clamp(16px,2.6vw,21px) var(--f);background:rgba(255,255,255,.08)}
.tuyo figcaption{justify-content:space-between;flex-wrap:wrap}
.tuyo figcaption::before{display:none}
.tuyo .btn{padding:10px 18px;font-size:15px;min-height:42px}
.flechas{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:12px}
.flechas button{width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;font:600 22px var(--f);color:#fff;background:var(--g-hondo);box-shadow:0 12px 26px -12px rgba(0,92,38,.8)}
.flechas button:focus-visible{outline:3px solid var(--luz);outline-offset:3px}
.puntos{display:flex;gap:5px;justify-content:center;flex:1;flex-wrap:wrap}
.puntos i{width:7px;height:7px;border-radius:50%;background:rgba(17,15,20,.18);transition:all .3s}
.puntos i.activo{width:20px;border-radius:9px;background:var(--verde)}
.nota-casos{font-size:14px;color:var(--txt);text-align:center;margin:14px auto 0}

/* ===================================================================== 13 · los planes y el grupo VIP */
.planes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.plan{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:var(--r-tarjeta);padding:28px 26px 26px;box-shadow:var(--sombra);border:1px solid rgba(17,15,20,.05);transition:transform .35s var(--suave),box-shadow .35s var(--suave)}
.plan:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(0,92,38,.45)}
.plan .nombre{font:600 22px/1.2 var(--f);letter-spacing:.01em}
.plan .nombre b{color:var(--verde)}
.plan .dura{display:inline-flex;align-self:flex-start;font-weight:500;font-size:13.5px;padding:6px 12px;border-radius:var(--r-pill);background:var(--v50);color:var(--hondo)}
.plan p{color:var(--txt);font-size:16px;flex:1}
.plan .vip{font-size:14px;font-weight:500;color:var(--hondo)}
.plan .btn{align-self:flex-start;margin-top:6px}
.plan.estrella{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--g-marca) border-box}
.plan .insignia{position:absolute;top:-13px;right:22px;font-weight:600;font-size:13px;color:#fff;padding:6px 12px;border-radius:var(--r-pill);background:var(--g-hondo);box-shadow:0 10px 20px -10px rgba(0,92,38,.8)}
.plan.ancho{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px 24px;background:var(--g-banda);color:#fff;border:0}
.plan.ancho p{color:rgba(255,255,255,.9);flex:1 1 320px}
.plan.ancho .nombre{color:#fff;flex:1 1 100%}
.vip-caja{display:flex;gap:18px;align-items:flex-start;margin-top:26px;padding:24px 24px;border-radius:var(--r-tarjeta);background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra)}
.vip-caja .icono{flex:0 0 62px;margin:0;--tono:var(--g-luz);--sombra-t:rgba(52,210,123,.4)}
.vip-caja p{color:var(--txt)}
.vip-caja h3{margin-bottom:4px}
.nota-planes{font-size:14.5px;color:var(--txt);text-align:center;margin:20px auto 0}

/* ===================================================================== 14 · cifras de la evidencia */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:36px 0 26px}
.cifra{display:flex;flex-direction:column;gap:8px;padding:24px 20px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.cifra b{font:600 clamp(34px,4.4vw,50px)/1.12 var(--f);white-space:nowrap;color:var(--v300)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cifra b{background:var(--g-luz-texto);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.cifra span{font-size:15px;line-height:1.5;color:rgba(255,255,255,.86)}
.nota-oscura{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.76);max-width:72ch}

/* ===================================================================== 15 · hablando claro */
.claro-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.aviso{padding:22px 22px 20px;border-radius:20px;background:#fff;border:1px solid var(--linea);border-top:4px solid var(--verde)}
.aviso h3{font-size:18px}
.aviso p{color:var(--txt);font-size:15.5px}
.caja-clara{margin-top:22px;padding:20px 22px;border-radius:18px;background:var(--v50);border-left:4px solid var(--verde);font-weight:500}

/* ===================================================================== 16 · los cuatro videos del negocio */
.videos-rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.vcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--sombra);transition:transform .35s var(--suave),box-shadow .35s var(--suave)}
.vcard:hover{transform:translateY(-5px)}
.vcard.sigue{box-shadow:0 0 0 3px var(--luz),0 30px 60px -28px rgba(0,92,38,.6)}
.vcard.visto .vnum::after{content:" · visto";color:var(--verde)}
.vplay{position:relative;display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;aspect-ratio:16/9}
.vplay img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .3s,transform .6s var(--suave)}
.vcard:hover .vplay img{opacity:1;transform:scale(1.03)}
.vplay:focus-visible{outline:3px solid var(--luz);outline-offset:-3px}
.vicono{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 8px rgba(52,210,123,.35)}
.vicono::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--verde);transform:translateX(2px)}
.vcard video{width:100%;aspect-ratio:16/9;background:#000}
.vtexto{padding:16px 18px 20px;display:flex;flex-direction:column;gap:4px}
.vnum{font:600 13px var(--f);letter-spacing:.16em;color:var(--verde)}
.vtexto h3{font-size:19px;margin:0}
.vtexto p{color:var(--txt);font-size:15px;line-height:1.5}
.vdur{display:inline-flex;align-self:flex-start;margin-top:6px;font-weight:500;font-size:13px;padding:5px 10px;border-radius:var(--r-pill);background:var(--v50);color:var(--hondo)}
.sigue-aviso{display:none;margin-top:8px;font-weight:600;font-size:14px;color:var(--hondo)}
.vcard.sigue .sigue-aviso{display:block}
.fin-videos{display:none;margin-top:30px;padding:26px;border-radius:var(--r-tarjeta);background:var(--g-banda);color:#fff;text-align:center}
.fin-videos.ve{display:block;animation:entra .6s var(--clavar)}
.fin-videos p{margin:0 auto 16px;font-size:19px;font-weight:500}
@keyframes entra{from{opacity:0;transform:translateY(16px)}}

/* ===================================================================== 17 · qué se vende: líneas y patentes */
.lineas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.linea-prod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 14px 20px;border-radius:20px;background:#fff;box-shadow:var(--sombra)}
.linea-prod img{width:100%;max-width:220px;aspect-ratio:800/484;object-fit:contain}
.linea-prod span{font-weight:600;font-size:15.5px;line-height:1.3}
.patentes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px}
.patentes span{font-weight:500;font-size:14px;padding:8px 13px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--linea)}
.nota-pais{font-size:14px;color:var(--txt);max-width:64ch;margin:14px auto 0;text-align:center}

/* ===================================================================== 18 · plan de pago y sistema */
.bonos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.letra-chica{font-size:13px;line-height:1.6;color:var(--txt);max-width:80ch;margin:20px auto 0;text-align:center}
.herramientas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 30px}
.herramienta{padding:18px 18px 16px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13)}
.herramienta h3{font-size:17px;margin-bottom:4px}
.herramienta p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.8)}
.sistema{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.sistema .marco{position:sticky;top:110px}
.yo{margin-top:26px;padding:24px;border-radius:var(--r-tarjeta);background:linear-gradient(160deg,rgba(52,210,123,.2),rgba(255,255,255,.04));border:1px solid rgba(143,190,163,.45)}

/* ===================================================================== 19 · preguntas */
.preguntas{display:grid;gap:12px;max-width:820px;margin:0 auto}
.pregunta{border-radius:18px;background:#fff;border:1px solid var(--linea);box-shadow:0 14px 30px -26px rgba(17,15,20,.5);overflow:hidden}
.pregunta summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:600;font-size:17.5px}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#fff;background:var(--g-hondo);transition:transform .3s var(--suave)}
.pregunta[open] summary::after{transform:rotate(45deg)}
.pregunta summary:focus-visible{outline:3px solid var(--luz);outline-offset:-3px;border-radius:18px}
.pregunta p{padding:0 22px 20px;color:var(--txt)}
.hablando-claro{max-width:820px;margin:26px auto 0;padding:22px 24px;border-radius:18px;background:var(--v50);border-left:4px solid var(--verde)}
.hablando-claro p{color:var(--negro)}

/* ===================================================================== 20 · cómo comprar: video, pestañas, pasos y regalo */
.video{position:relative;margin:0 auto;max-width:900px;border-radius:var(--r-tarjeta);overflow:hidden;background:#000;box-shadow:0 30px 70px -30px rgba(17,15,20,.7),0 0 0 6px rgba(255,255,255,.75)}
.video video{width:100%;aspect-ratio:16/9;background:#000}
.video .reproducir{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 10px rgba(52,210,123,.35)}
.video .reproducir::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:14px 0 14px 23px;border-color:transparent transparent transparent var(--verde);transform:translateX(3px)}
.video .reproducir:focus-visible{outline:3px solid var(--luz);outline-offset:4px}
.video-pie{margin-top:14px;text-align:center}
.pestanas{display:inline-flex;gap:6px;padding:6px;border-radius:var(--r-pill);background:#fff;box-shadow:0 14px 30px -24px rgba(17,15,20,.6);margin-bottom:26px}
.pestanas button{border:0;cursor:pointer;font-weight:600;font-size:15.5px;color:var(--negro);padding:12px 20px;border-radius:var(--r-pill);background:transparent;transition:background .25s,color .25s}
.pestanas button[aria-selected="true"]{background:var(--g-hondo);color:#fff;box-shadow:var(--sombra-cta)}
.pestanas button:focus-visible{outline:3px solid var(--luz);outline-offset:2px}
.lista-pasos{list-style:none;display:grid;gap:14px;max-width:820px;margin:0 auto}
.lista-pasos li{display:grid;grid-template-columns:52px 1fr;gap:4px 16px;align-items:start;padding:20px 22px;border-radius:20px;background:#fff;box-shadow:0 18px 40px -32px rgba(17,15,20,.6);border:1px solid rgba(17,15,20,.05)}
.lista-pasos .num{grid-row:span 2;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font:600 22px var(--f);color:#fff;background:var(--g-hondo);box-shadow:var(--sombra-cta)}
.lista-pasos h3{font-size:18.5px;margin:4px 0 0}
.lista-pasos p{color:var(--txt);font-size:16px}
.lista-pasos .boton-real{font-weight:600;color:var(--hondo);letter-spacing:.01em}
.panel[hidden]{display:none}
.regalo{display:flex;gap:18px;align-items:flex-start;max-width:820px;margin:26px auto 0;padding:22px 24px;border-radius:var(--r-tarjeta);background:var(--g-banda);color:#fff}
.regalo .icono{flex:0 0 62px;margin:0;--tono:var(--g-luz);--sombra-t:rgba(52,210,123,.4)}
.regalo p{color:rgba(255,255,255,.9)}
.regalo h3{color:#fff;margin-bottom:4px}

/* ===================================================================== 21 · el formulario corto */
.form-rejilla{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center}
.avatar{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.avatar img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 14px 30px -12px rgba(0,0,0,.6)}
.avatar span{font-weight:500;font-size:15px;line-height:1.4;color:rgba(255,255,255,.92)}
.avatar span b{display:block;font-size:17px;color:#fff}
.recibes{list-style:none;display:grid;gap:12px;margin-top:8px}
.recibes li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.recibes li span{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.promesa{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);font-weight:500}
.promesa span{font-size:24px}
.tarjeta-form{background:#fff;color:var(--negro);border-radius:var(--r-caja);padding:clamp(24px,4vw,40px);box-shadow:0 40px 90px -40px rgba(0,20,8,.8),0 0 0 6px rgba(255,255,255,.12)}
.tarjeta-form h3{font-size:22px;margin-bottom:16px}
.tarjeta-form p{color:var(--txt)}   /* la tarjeta es blanca aunque viva dentro de una banda verde */
.campo{display:grid;gap:6px;margin-bottom:16px}
.campo label{font-weight:600;font-size:15px}
.campo label i{font-style:normal;font-weight:400;color:var(--txt)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:17px;color:var(--negro);padding:14px 16px;border-radius:var(--r-campo);border:2px solid var(--linea);background:#FBFAF7;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.campo textarea{min-height:92px;resize:vertical}
.campo select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--verde) 50%),linear-gradient(135deg,var(--verde) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:42px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--verde);background-color:#fff;box-shadow:0 0 0 5px rgba(24,122,70,.16)}
.campo small{color:var(--txt);font-size:13px}
.campo.mal input,.campo.mal select{border-color:#B42318}
.fila-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.acepto{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.55;margin:6px 0 18px;cursor:pointer}
.acepto input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--verde);cursor:pointer}
.acepto a{color:var(--hondo);font-weight:600;text-underline-offset:2px;text-decoration-thickness:1.5px}
.tarjeta-form .btn{width:100%}
.nota-form{font-size:13px;line-height:1.55;color:var(--txt);margin-top:12px;text-align:center}
.estado{margin-top:14px;font-weight:600;font-size:15px}
.estado:empty{display:none}
.estado.mal{color:#B42318}
.estado a{color:var(--hondo)}
.exito{display:none;text-align:center;padding:10px 0}
.exito .emoji{font-size:58px;line-height:1;margin-bottom:8px;animation:flota 3s ease-in-out infinite}
.exito h3{font-size:26px;margin-bottom:10px}
.exito p{margin:0 auto 20px;color:var(--txt)}
.enviado .formulario{display:none}.enviado .exito{display:block}
#confeti{position:fixed;inset:0;pointer-events:none;z-index:90}
.sin-js{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--v50);font-size:14.5px}

/* ===================================================================== 22 · el puente a Su Línea Fit */
.puente{display:flex;gap:18px;align-items:center;padding:22px 24px;border-radius:22px;background:#fff;box-shadow:var(--sombra);border:1px solid var(--linea)}
.puente img{width:68px;height:68px;border-radius:50%;flex:none;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.puente p{margin:0;color:var(--txt)}
.puente p strong{display:block;color:var(--negro);font-size:18px}
.puente .btn{margin-left:auto;flex:none}
.puente-sec{padding:0 0 var(--seccion)}

/* ===================================================================== 23 · el cierre */
#cierre{position:relative;padding:clamp(80px,11vw,130px) 0;text-align:center;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(800px 420px at 50% 0%,rgba(52,210,123,.45),transparent 70%),var(--g-banda)}
#cierre h2{color:#fff;font-size:clamp(30px,5.8vw,58px);max-width:22ch;margin-inline:auto}
#cierre p{margin:0 auto 30px;font-size:19px;color:rgba(255,255,255,.92)}
#cierre .chico{margin:16px auto 0;font-size:14.5px;color:rgba(255,255,255,.88)}
#cierre .acciones{justify-content:center}
.sol{position:absolute;width:560px;height:560px;left:50%;top:-280px;translate:-50% 0;border-radius:50%;z-index:-1;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.13) 0 4deg,transparent 4deg 16deg);animation:gira 60s linear infinite;pointer-events:none}

/* ===================================================================== 24 · el pie */
footer{background:var(--negro);color:rgba(255,255,255,.75);padding:56px 0 40px;font-size:14px}
footer .logo-pie{height:46px;width:auto;margin-bottom:18px}
.pie-enlaces{display:flex;flex-wrap:wrap;gap:12px 20px;margin-bottom:18px}
.pie-enlaces a,.pie-enlaces button{color:#fff;font:500 14px var(--f);text-decoration:none;border:0;background:none;cursor:pointer;padding:0;border-bottom:1px solid rgba(255,255,255,.3)}
.pie-enlaces a:hover,.pie-enlaces button:hover{border-color:var(--luz)}
.redes{display:flex;gap:12px;margin:6px 0 20px}
.redes a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.redes svg{width:18px;height:18px;fill:#fff}
.legal{font-size:12.5px;line-height:1.7;color:#A3AAA1;max-width:92ch;margin-bottom:12px}
footer details{margin:10px 0 18px;max-width:92ch}
footer summary{cursor:pointer;color:#fff;font-weight:500}
footer details ol{margin:12px 0 0 18px;display:grid;gap:8px;font-size:12.5px;line-height:1.6;color:#A3AAA1}

/* ===================================================================== 25 · la burbuja y el aviso de cookies */
#burbuja{position:fixed;right:18px;bottom:18px;z-index:80;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--verde);box-shadow:0 16px 36px -10px rgba(0,92,38,.8);transform:scale(0);transition:transform .45s var(--rebote),bottom .3s var(--suave)}
#burbuja.ve{transform:scale(1);animation:pulso 6s ease-in-out infinite 1s}
#burbuja svg{width:32px;height:32px;fill:#fff}
#burbuja:focus-visible{outline:3px solid var(--luz);outline-offset:3px}
@keyframes pulso{0%,90%,100%{box-shadow:0 16px 36px -10px rgba(0,92,38,.8),0 0 0 0 rgba(52,210,123,.5)}95%{box-shadow:0 16px 36px -10px rgba(0,92,38,.8),0 0 0 14px rgba(52,210,123,0)}}
/* el aviso lo pone analitica.js con estilo en línea; la hoja lo viste de la marca sin tocar el script */
[aria-label="Aviso de cookies"]{font-family:var(--f)!important;border-radius:18px!important}
[aria-label="Aviso de cookies"] button:last-child{background:var(--hondo)!important}
@media(max-width:600px){
  [aria-label="Aviso de cookies"]{font-size:13px!important;padding:11px 13px!important;gap:8px!important;left:10px!important;right:10px!important;bottom:10px!important}
  [aria-label="Aviso de cookies"] button{padding:7px 14px!important}
  body:has([aria-label="Aviso de cookies"]) #burbuja{bottom:150px}
}

/* ===================================================================== 26 · el documento encima (privacidad y términos) */
#documento{margin:auto;border:0;border-radius:24px;padding:0;width:min(680px,100% - 28px);max-height:min(84vh,780px);box-shadow:0 40px 90px -30px rgba(0,20,8,.75);color:var(--negro)}
#documento::backdrop{background:rgba(6,17,11,.6);backdrop-filter:blur(3px)}
#documento .cuerpo{padding:30px 26px 22px;overflow:auto;max-height:calc(min(84vh,780px) - 70px)}
#documento h1{font-size:26px;margin-bottom:6px}
#documento h2{font-size:18px;margin:18px 0 6px}
#documento p,#documento li{color:#3B4139;font-size:15.5px;margin-bottom:10px}
#documento ul{padding-left:20px}
#documento .volver,#documento .borrador{display:none}
#documento .pie-doc{display:flex;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--linea)}
#documento .pie-doc button{font:600 15px var(--f);color:#fff;background:var(--g-hondo);border:0;border-radius:12px;padding:11px 20px;cursor:pointer}

/* ===================================================================== 27 · páginas legales */
.legal-pagina{background:radial-gradient(600px 300px at 10% 0%,rgba(52,210,123,.16),transparent 70%),radial-gradient(600px 320px at 100% 10%,rgba(143,190,163,.22),transparent 70%),var(--papel)}
.legal-pagina header{background:var(--g-noche);padding:16px 0}
.legal-pagina header .envoltura{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(820px,100% - 40px)}
.legal-pagina header img{height:38px;width:auto}
.legal-pagina header a{color:#fff;font-weight:500;font-size:15px}
.legal-pagina main{width:min(820px,100% - 40px);margin-inline:auto;padding:44px 0 70px}
.legal-pagina .caja{background:#fff;border-radius:24px;padding:clamp(22px,4vw,38px);box-shadow:0 26px 50px -30px rgba(17,15,20,.4)}
.legal-pagina h1{font-size:clamp(30px,6vw,42px);line-height:1.2;margin-bottom:8px}
.legal-pagina h2{font-size:20px;line-height:1.34;margin:28px 0 8px}
.legal-pagina p,.legal-pagina li{color:#3B4139}
.legal-pagina p{margin-bottom:12px}
.legal-pagina ul{padding-left:22px;margin-bottom:12px}
.legal-pagina a{color:var(--hondo);font-weight:600}
.fecha{color:var(--txt);font-size:14px;margin-bottom:26px}
.borrador{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7A4A00;background:#FFF4D6;border:1px solid #F0D79A;padding:6px 10px;border-radius:10px;margin-bottom:18px}
.pendiente{background:#FFF4D6;border-radius:6px;padding:1px 6px;font-size:.92em;color:#5F3A00}
.volver{display:inline-block;margin-top:26px;text-decoration:none}

/* ===================================================================== 28 · aparición al bajar */
/* sin JavaScript nada se esconde: la clase .js la pone una línea en el <head> */
.reveal{transition:opacity .55s var(--clavar),transform .55s var(--clavar)}
.js .reveal{opacity:0;transform:translateY(34px)}
.reveal.visible{opacity:1;transform:none}
.grupo>*{transition:opacity .5s var(--clavar),transform .5s var(--clavar)}
.js .grupo>*{opacity:0;transform:translateY(26px)}
.grupo.visible>*{opacity:1;transform:none}
.grupo.visible>*:nth-child(2){transition-delay:.08s}.grupo.visible>*:nth-child(3){transition-delay:.16s}
.grupo.visible>*:nth-child(4){transition-delay:.24s}.grupo.visible>*:nth-child(5){transition-delay:.32s}.grupo.visible>*:nth-child(6){transition-delay:.4s}
.quieto,.quieto *{animation-play-state:paused!important}

/* ===================================================================== 29 · teléfono y tableta */
@media(max-width:1000px){
  .videos-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lineas{grid-template-columns:repeat(2,1fr)}
  .cifras{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  html{scroll-padding-top:120px}
  #cab .envoltura{flex-wrap:wrap;gap:8px 10px;padding:8px 0}
  #cab .logo img{height:30px}
  #cab .logo-keto img{height:38px}
  #cab .btn{margin-left:auto}
  .caminos{order:3;flex:1 0 100%;margin:0}
  .caminos a{flex:1 1 auto;text-align:center;padding:9px 6px;font-size:13px}
  .hero-rejilla,.form-rejilla,.quien,.quien.invertido,.sistema{grid-template-columns:1fr}
  .quien.invertido .marco{order:-1}
  .sistema .marco{position:relative;top:0;order:-1;width:min(300px,70vw)}
  .visual{order:-1;width:min(212px,54vw)}
  .chip{font-size:12.5px;padding:8px 11px}.chip span{font-size:15px}
  .chip.c1{left:-14%;top:8%}.chip.c2{right:-16%;top:50%}.chip.c3{left:-6%;bottom:-2%}
  .hero.ventana-viva{padding:118px 0 96px}
  .hero h1,.ventana-viva h1{font-size:clamp(31px,8.4vw,40px)}
  .hero .lead{font-size:16.5px;margin-bottom:22px}
  .hero.a-sangre{min-height:100svh;align-items:end;padding:130px 0 110px}
  .hero-foto{width:100%}
  .hero-foto img{object-position:var(--pos-m,50% 18%)}
  .hero-foto::after{background:linear-gradient(180deg,rgba(6,17,11,.5) 0%,rgba(6,17,11,.18) 26%,rgba(6,17,11,.6) 52%,rgba(6,17,11,.96) 78%)}
  .pastilla{margin-bottom:14px;font-size:13px}
  .rejilla,.rejilla.dos,.pasos,.caminos-tarjetas,.planes,.bonos,.claro-rejilla,.combustibles,.idea-pie{grid-template-columns:1fr}
  .herramientas{grid-template-columns:1fr 1fr}
  .quien .marco{order:-1;width:min(340px,80vw);margin-bottom:10px}
  .cabeza{text-align:left}.cabeza p{margin-inline:0}
  .flechas button{width:42px;height:42px}
  .pasos{gap:12px}
  .paso{display:grid;grid-template-columns:52px 1fr;gap:2px 14px;padding:18px}
  .paso b{grid-row:span 2;font-size:40px;margin:0}
  .corte{min-height:72vh;align-items:end}
  .corte .fondo img{object-position:var(--pos-m,center 22%)}
  .corte::before,.corte.espejo::before{background:linear-gradient(180deg,rgba(6,17,11,.35) 18%,rgba(11,59,32,.7) 52%,rgba(6,17,11,.96) 82%)}
  .corte.espejo .envoltura{text-align:left}
  .corte.espejo h2,.corte.espejo p{margin-left:0}
  .corte .envoltura{padding:60px 0 54px}
  .plan.ancho{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
  .plan.ancho p,.plan.ancho .nombre{flex:none}
}
@media(max-width:600px){
  .destacada,.vip-caja,.regalo{flex-direction:column;gap:0}
  .destacada .icono,.vip-caja .icono,.regalo .icono{margin-bottom:18px}
  .puente{flex-wrap:wrap}.puente .btn{margin-left:0;width:100%}
  .videos-rejilla,.lineas{grid-template-columns:1fr 1fr;gap:12px}
  .videos-rejilla{grid-template-columns:1fr}
  .herramientas,.cifras{grid-template-columns:1fr}
  .fila-campos{grid-template-columns:1fr}
  .pestanas{display:flex;width:100%}
  .pestanas button{flex:1;padding:12px 10px;font-size:15px}
  .lista-pasos li{grid-template-columns:44px 1fr;padding:18px 16px;gap:4px 12px}
  .lista-pasos .num{width:44px;height:44px;font-size:19px;border-radius:14px}
  .linea-prod span{font-size:14px}
  .a-sangre .sellos-hero{display:none}
  .hero.a-sangre{padding-bottom:96px}
  .acciones .btn{width:100%}
  .hero .acciones .btn,.centro .acciones .btn{width:100%}
}
@media(max-width:420px){body{font-size:16px}.btn.grande{width:100%;font-size:17px;padding:17px 20px}}
@media(max-width:900px) and (max-height:780px){.visual{width:min(196px,52vw)}.hero.ventana-viva{padding-top:118px}.hero h1{margin-bottom:16px}.hero .lead{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js .reveal,.js .grupo>*{opacity:1;transform:none}
  .js .linea span{transform:none}
  .js .tarde{opacity:1;transform:none}
  #burbuja{transform:scale(1)}
  html{scroll-behavior:auto}
}