/* ============================================================
   META VITAL — Sistema de diseño
   Color protagonista: verde vital.  Secundario: azul del logo.
   Base: azul marino profundo.  Tipografías: Fraunces + Sora.
   ============================================================ */

:root{
  /* --- 3 colores --- */
  --green:#12E4A0;        /* PROTAGONISTA */
  --green-2:#0BB77F;
  --green-glow:rgba(18,228,160,.22);
  --blue:#2E9BFF;         /* secundario (logo) */
  --cyan:#5FE9FF;

  /* base navy */
  --ink:#03101B;
  --ink-1:#061A2B;
  --ink-2:#0A2437;
  --ink-3:#0E3049;
  --line:rgba(140,200,220,.14);
  --line-2:rgba(140,200,220,.28);

  --paper:#EAF6F3;
  --muted:#8CA9B4;
  --muted-2:#61808D;

  /* 3 tamaños tipográficos */
  --fs-xl:clamp(2.6rem,7.2vw,6rem);
  --fs-md:clamp(1.15rem,2.1vw,1.6rem);
  --fs-sm:1rem;

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
figure,figcaption,blockquote,dl,dd{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--green);color:var(--ink)}

/* ---------- capas de fondo ---------- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.5;will-change:transform;
}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-12vw;
  background:radial-gradient(circle,rgba(18,228,160,.34),transparent 68%);animation:drift1 26s var(--ease) infinite alternate}
.aurora i:nth-child(2){width:46vw;height:46vw;right:-12vw;top:22vh;
  background:radial-gradient(circle,rgba(46,155,255,.30),transparent 68%);animation:drift2 32s var(--ease) infinite alternate}
.aurora i:nth-child(3){width:40vw;height:40vw;left:24vw;bottom:-16vw;
  background:radial-gradient(circle,rgba(11,183,127,.24),transparent 70%);animation:drift3 38s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(8vw,6vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-7vw,-8vh,0) scale(1.2)}}
@keyframes drift3{to{transform:translate3d(5vw,-5vh,0) scale(.9)}}

.grain{
  position:fixed;inset:-200%;z-index:1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}
}

/* ---------- cursor personalizado ---------- */
.cur,.cur-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;
  mix-blend-mode:screen;will-change:transform}
.cur{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(18,228,160,.7);
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s}
.cur-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--green)}
body.cur-lg .cur{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgba(18,228,160,.12);border-color:var(--green)}
@media (hover:none),(pointer:coarse){.cur,.cur-dot{display:none}}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:2}
section{position:relative;z-index:2}
.sec{padding-block:clamp(72px,11vw,150px)}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.02;margin:0;
  letter-spacing:-.022em;font-variation-settings:"SOFT" 0,"WONK" 0}
.h-xl{font-size:var(--fs-xl)}
.h-md{font-size:var(--fs-md);line-height:1.25;letter-spacing:-.015em}
p{margin:0 0 1.1em}
.lead{font-size:var(--fs-md);line-height:1.5;color:#CFE4E0;font-weight:300}
.small{font-size:.875rem;color:var(--muted)}
.tiny{font-size:.78rem;color:var(--muted-2);line-height:1.55}
.gr{color:var(--green)}
.italic{font-style:italic;font-variation-settings:"SOFT" 40,"WONK" 1}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--green);margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--green);opacity:.6}

/* ---------- botones ---------- */
.btn{
  --bg:var(--green);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 32px;border:0;border-radius:100px;cursor:pointer;overflow:hidden;isolation:isolate;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:-.01em;
  background:var(--bg);color:#02120C;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  box-shadow:0 10px 34px -10px var(--green-glow),0 0 0 0 rgba(18,228,160,.5);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-110%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);
  transition:transform .75s var(--ease);
}
.btn:hover::after{transform:translateX(110%)}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 48px -12px rgba(18,228,160,.5)}
.btn:active{transform:translateY(-1px)}
.btn-lg{padding:21px 40px;font-size:1.02rem}
.btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--green);color:var(--green)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* pulso en el CTA principal */
.btn-pulse::before{
  content:"";position:absolute;inset:-2px;border-radius:100px;z-index:-2;
  border:1px solid var(--green);animation:pulse 2.8s var(--ease) infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}

/* ---------- reveal al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(34px);filter:blur(7px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}
  .aurora i,.grain{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;transition:all .5s var(--ease)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:20px;transition:padding .5s var(--ease)}
.nav.stuck{background:rgba(3,16,27,.72);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);border-bottom:1px solid var(--line)}
.nav.stuck .wrap{padding-block:12px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:38px;height:38px;filter:drop-shadow(0 0 14px rgba(46,155,255,.55))}
.brand span{font-family:var(--serif);font-size:1.18rem;font-weight:600;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.86rem;color:var(--muted);font-weight:400;position:relative;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--green);transition:right .4s var(--ease)}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after{right:0}
.nav .btn{padding:12px 22px;font-size:.85rem}
@media(max-width:900px){.nav-links{display:none}}
/* "Empezar por 9,50 USD" es más largo que el botón que había antes. En
   pantallas estrechas se aprieta y se le quita la flecha, para que quepa en una
   sola línea sin empujar la marca fuera de la barra. */
@media(max-width:430px){
  .nav .btn{padding:11px 13px;font-size:.76rem;gap:0;white-space:nowrap}
  .nav .btn .ar{display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:110px;padding-bottom:60px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,68px);align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:44px}}

.hero h1{margin-bottom:26px}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block;transform:translateY(105%);
  animation:riseIn 1.15s var(--ease) forwards}
.hero h1 .ln:nth-child(1)>span{animation-delay:.15s}
.hero h1 .ln:nth-child(2)>span{animation-delay:.3s}
@keyframes riseIn{to{transform:none}}
.hero .lead{max-width:34em;margin-bottom:34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:30px}
.hero-note{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.8rem;color:var(--muted-2)}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.hero-note svg{width:13px;height:13px;color:var(--green);flex:none}

/* --- visual protagonista con lente reveladora --- */
.reveal{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9),0 0 0 1px var(--line);
  cursor:none;isolation:isolate;
  --mx:50%;--my:50%;--rad:0px;
  transition:--rad .45s var(--ease);
}
.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reveal .after{
  -webkit-mask-image:radial-gradient(circle var(--rad) at var(--mx) var(--my),#000 62%,transparent 100%);
  mask-image:radial-gradient(circle var(--rad) at var(--mx) var(--my),#000 62%,transparent 100%);
}
.reveal .ring{
  position:absolute;width:calc(var(--rad)*2);height:calc(var(--rad)*2);
  left:var(--mx);top:var(--my);transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(18,228,160,.65);box-shadow:0 0 40px rgba(18,228,160,.28) inset;
  pointer-events:none;opacity:.9;
}
.reveal .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(3,16,27,.94) 4%,rgba(3,16,27,.35) 40%,transparent 66%)}
.reveal .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;pointer-events:none}
.reveal .cap b{display:block;font-family:var(--serif);font-size:clamp(1.15rem,2.3vw,1.65rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.15}
.reveal .cap .st{font-size:.78rem;color:var(--muted);letter-spacing:.02em;margin-top:7px;display:block}
.reveal .hint{
  position:absolute;top:18px;left:18px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:100px;font-size:.72rem;font-weight:500;letter-spacing:.05em;
  background:rgba(3,16,27,.66);backdrop-filter:blur(12px);border:1px solid var(--line-2);color:var(--paper);
  transition:opacity .4s;
}
.reveal.on .hint{opacity:0}
.reveal .lbl{position:absolute;z-index:3;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;padding:6px 12px;border-radius:100px;top:18px;right:18px;
  background:rgba(3,16,27,.66);backdrop-filter:blur(12px);border:1px solid var(--line-2);
  transition:color .4s,border-color .4s}
.reveal.on .lbl{color:var(--green);border-color:rgba(18,228,160,.5)}

@property --rad{syntax:'<length>';inherits:true;initial-value:0px}

/* marco flotante decorativo */
.reveal-shell{position:relative}
.reveal-shell::before{content:"";position:absolute;inset:-14px;border-radius:calc(var(--r-lg) + 12px);
  border:1px solid var(--line);pointer-events:none}
.float-badge{
  position:absolute;z-index:4;background:rgba(6,26,43,.88);backdrop-filter:blur(18px);
  border:1px solid var(--line-2);border-radius:16px;padding:13px 17px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9);animation:float 6s ease-in-out infinite;
}
.float-badge b{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--green)}
.float-badge em{font-style:normal;font-size:.7rem;color:var(--muted);letter-spacing:.05em}
.fb-1{right:-16px;top:14%;animation-delay:-1s}
.fb-2{left:-22px;bottom:16%;animation-delay:-3.4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:640px){
  .reveal-shell{display:flex;flex-direction:column;gap:12px}
  .reveal-shell::before{display:none}
  .float-badge{position:static;width:100%;box-sizing:border-box;animation:none;display:flex;
    align-items:center;gap:10px}
  .float-badge b{font-size:1.25rem}
}

.scroll-cue{display:flex;align-items:center;gap:12px;margin-top:52px;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.scroll-cue i{display:block;width:44px;height:1px;background:linear-gradient(90deg,var(--green),transparent);
  animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}
  51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* ============================================================
   BANDA DE CIFRAS
   ============================================================ */
.stats{border-block:1px solid var(--line);background:rgba(6,26,43,.4)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding-inline:0;max-width:100%}
.stat{padding:clamp(30px,4.4vw,52px) clamp(16px,3vw,34px);text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:600;
  line-height:1;letter-spacing:-.03em;
  background:linear-gradient(140deg,#fff 8%,var(--green) 58%,var(--blue) 108%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat em{display:block;font-style:normal;font-size:.76rem;color:var(--muted);margin-top:11px;
  letter-spacing:.05em;line-height:1.45}
@media(max-width:760px){
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3)::before,.stat:nth-child(2n+1)::before{display:none}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ============================================================
   BLOQUES DE CONTENIDO
   ============================================================ */
.sec-head{max-width:56ch;margin-bottom:clamp(40px,5.5vw,72px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head p{margin-top:20px}

/* --- tarjetas de dolor --- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
@media(max-width:900px){.pain-grid{grid-template-columns:1fr}}
.card{
  position:relative;padding:clamp(26px,3vw,38px);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(165deg,rgba(10,36,55,.72),rgba(6,26,43,.5));
  border:1px solid var(--line);transition:transform .5s var(--ease),border-color .5s,background .5s;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(460px circle at var(--px,50%) var(--py,50%),rgba(18,228,160,.13),transparent 62%);
}
.card:hover{transform:translateY(-6px);border-color:var(--line-2)}
.card:hover::before{opacity:1}
.card .num{font-family:var(--serif);font-size:.95rem;color:var(--green);letter-spacing:.06em;
  display:block;margin-bottom:18px}
.card h3{font-size:1.35rem;margin-bottom:13px;line-height:1.15}
.card p{color:var(--muted);font-size:.94rem;margin:0}
.card .quote{font-family:var(--serif);font-style:italic;color:#BFD9D4;font-size:1.02rem;
  border-left:2px solid rgba(18,228,160,.4);padding-left:16px;margin-top:18px}

/* --- comparativa interactiva --- */
.vs{display:grid;grid-template-columns:300px 1fr;gap:clamp(20px,3vw,46px);align-items:start}
@media(max-width:900px){.vs{grid-template-columns:1fr}}
.vs-tabs{display:flex;flex-direction:column;gap:5px;position:sticky;top:104px}
@media(max-width:900px){.vs-tabs{position:static;flex-direction:row;overflow-x:auto;
  padding-bottom:6px;scrollbar-width:none}.vs-tabs::-webkit-scrollbar{display:none}}
.vs-tab{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;white-space:nowrap;
  padding:15px 18px;border:0;border-radius:14px;cursor:pointer;color:var(--muted);
  background:transparent;font-size:.92rem;font-weight:400;transition:all .35s var(--ease);
}
.vs-tab i{width:5px;height:5px;border-radius:50%;background:var(--muted-2);flex:none;transition:all .35s}
.vs-tab:hover{color:var(--paper);background:rgba(255,255,255,.03)}
.vs-tab.on{background:rgba(18,228,160,.09);color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(18,228,160,.28);font-weight:500}
.vs-tab.on i{background:var(--green);box-shadow:0 0 12px var(--green)}
.vs-panel{
  border-radius:var(--r-lg);border:1px solid var(--line);padding:clamp(26px,3.4vw,44px);
  background:linear-gradient(165deg,rgba(10,36,55,.7),rgba(6,26,43,.45));min-height:330px;
}
.vs-panel h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:8px}
.vs-panel .cost{font-size:.8rem;color:var(--green);letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;margin-bottom:26px;display:block}
.vs-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
@media(max-width:560px){.vs-row{grid-template-columns:1fr}}
.vs-box{padding:20px;border-radius:var(--r-md);background:rgba(3,16,27,.5);border:1px solid var(--line)}
.vs-box.win{border-color:rgba(18,228,160,.32);background:rgba(18,228,160,.055)}
.vs-box strong{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:11px;font-weight:600}
.vs-box.win strong{color:var(--green)}
.vs-box p{margin:0;font-size:.92rem;color:#C6DCD8}
.vs-verdict{font-size:.95rem;color:var(--muted);border-top:1px solid var(--line);padding-top:22px;margin:0}
.vs-verdict b{color:var(--paper);font-weight:500}
.fade-swap{animation:fadeSwap .5s var(--ease)}
@keyframes fadeSwap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* --- cómo funciona (pasos con imagen fija) --- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
@media(max-width:960px){.steps{grid-template-columns:1fr}}
.steps-media{position:sticky;top:120px;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1;
  border:1px solid var(--line);box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
@media(max-width:960px){.steps-media{display:none}}
.steps-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.steps-media img.on{opacity:1;transform:none}
.steps-media .tint{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(3,16,27,.8),transparent 55%);pointer-events:none}
.steps-media .phase{position:absolute;left:24px;bottom:22px;font-family:var(--serif);
  font-size:1.7rem;font-weight:600;letter-spacing:-.02em}
.steps-media .phase em{display:block;font-style:normal;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:6px;font-weight:600}

.step{padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid var(--line);position:relative}
.step:last-child{border-bottom:1px solid var(--line)}
.step-top{display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
.step-top .k{font-family:var(--serif);font-size:.9rem;color:var(--green);flex:none}
.step h3{font-size:clamp(1.5rem,2.7vw,2rem)}
.step .when{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:16px;display:block}
.step p{color:var(--muted);font-size:.95rem;margin-bottom:16px}
.step ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.step li{display:flex;gap:11px;font-size:.9rem;color:#BDD4D0}
.step li svg{width:15px;height:15px;color:var(--green);flex:none;margin-top:4px}
.step .mob-img{display:none;border-radius:var(--r-md);margin-bottom:20px;aspect-ratio:16/10;object-fit:cover}
@media(max-width:960px){.step .mob-img{display:block}}

/* --- marquesina de las 21 señales --- */
.marq{overflow:hidden;border-block:1px solid var(--line);padding-block:26px;
  background:rgba(6,26,43,.35);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-track{display:flex;gap:14px;width:max-content;animation:marq 46s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.chip{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:100px;
  border:1px solid var(--line);background:rgba(10,36,55,.6);font-size:.86rem;color:#C6DCD8;white-space:nowrap}
.chip b{color:var(--green);font-family:var(--serif);font-size:.8rem;font-weight:600}

/* ============================================================
   BANDA DE QUIZ
   ============================================================ */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.tryband{position:relative;overflow:hidden;border-radius:clamp(24px,4vw,42px);
  border:1px solid rgba(18,228,160,.24);padding:clamp(40px,6vw,86px) clamp(24px,5vw,72px);
  background:radial-gradient(120% 160% at 12% 0%,rgba(18,228,160,.16),transparent 56%),
             radial-gradient(110% 150% at 92% 100%,rgba(46,155,255,.16),transparent 58%),
             rgba(6,26,43,.72);text-align:center}
.tryband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(from var(--a,0deg) at 50% 50%,transparent 0deg,rgba(18,228,160,.11) 60deg,transparent 130deg);
  animation:spin 14s linear infinite}
@keyframes spin{to{--a:360deg}}
.tryband>*{position:relative;z-index:2}
.tryband h2{font-size:clamp(2rem,4.6vw,3.5rem);margin-bottom:18px}
.tryband .lead{max-width:44ch;margin:0 auto 32px}
.tryband .meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;
  font-size:.78rem;color:var(--muted-2);margin-top:24px}
.tryband .meta span{display:inline-flex;align-items:center;gap:7px}
.tryband .meta svg{width:13px;height:13px;color:var(--green)}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
@media(max-width:1000px){.tst-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.tst-grid{grid-template-columns:1fr}}
.tst{padding:clamp(24px,2.6vw,32px);border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(10,36,55,.66),rgba(6,26,43,.42));
  display:flex;flex-direction:column;gap:18px;transition:transform .5s var(--ease),border-color .5s}
.tst:hover{transform:translateY(-6px);border-color:var(--line-2)}
.tst .stars{display:flex;gap:3px;color:var(--green)}
.tst .stars svg{width:14px;height:14px}
.tst blockquote{margin:0;font-family:var(--serif);font-size:1.06rem;line-height:1.45;
  letter-spacing:-.012em;color:#DCEDE9}
.tst .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.tst .who img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line-2)}
.tst .who b{display:block;font-size:.88rem;font-weight:500}
.tst .who em{font-style:normal;font-size:.76rem;color:var(--muted-2)}
.disclaimer-note{margin-top:26px;font-size:.76rem;color:var(--muted-2);text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-md);padding:14px 18px;max-width:62ch;
  margin-inline:auto}

/* ============================================================
   PRECIO
   ============================================================ */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-items:center}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.anchor-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:2px}
.anchor-list li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:.93rem;color:var(--muted)}
.anchor-list li b{color:#CFE4E0;font-weight:400;font-variant-numeric:tabular-nums}
.anchor-list li.total{border-bottom:0;padding-top:20px;font-size:1rem;color:var(--paper)}
.anchor-list li.total b{font-family:var(--serif);font-size:1.5rem;color:#fff}
.strike{position:relative;color:var(--muted-2)}
.strike::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;height:1.5px;
  background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .3s}
.rv.in .strike::after{transform:scaleX(1)}

.price-card{position:relative;border-radius:clamp(22px,3vw,34px);padding:clamp(30px,4vw,52px);
  background:linear-gradient(165deg,rgba(10,36,55,.9),rgba(6,26,43,.72));
  border:1px solid rgba(18,228,160,.3);
  box-shadow:0 50px 110px -46px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
.price-card .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#02120C;font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;padding:7px 18px;border-radius:100px;white-space:nowrap}
.price-now{display:flex;align-items:flex-end;gap:12px;justify-content:center;margin-bottom:6px}
.price-now .amt{font-family:var(--serif);font-size:clamp(3.4rem,8vw,5rem);line-height:.9;
  font-weight:600;letter-spacing:-.04em}
.price-now .cur{font-size:1.4rem;color:var(--muted);padding-bottom:10px}
.price-was{text-align:center;color:var(--muted-2);font-size:.88rem;margin-bottom:28px}
.incl{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.incl li{display:flex;gap:12px;font-size:.92rem;color:#C6DCD8}
.incl li svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:4px}
.guarantee{display:flex;gap:16px;align-items:flex-start;margin-top:26px;padding-top:24px;
  border-top:1px solid var(--line)}
.guarantee svg{width:34px;height:34px;color:var(--green);flex:none}
.guarantee b{display:block;font-size:.92rem;margin-bottom:4px}
.guarantee p{margin:0;font-size:.82rem;color:var(--muted)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:840px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--paper);
  font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.32rem);font-weight:600;letter-spacing:-.018em;
  line-height:1.3;transition:color .3s}
.faq-q:hover{color:var(--green)}
.faq-q .ic{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);
  flex:none;display:grid;place-items:center;transition:all .45s var(--ease)}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--green);
  transition:transform .45s var(--ease)}
.faq-q .ic::before{width:11px;height:1.5px}
.faq-q .ic::after{width:1.5px;height:11px}
.faq-item.open .faq-q .ic{background:rgba(18,228,160,.14);border-color:var(--green);transform:rotate(135deg)}
.faq-item.open .faq-q .ic::after{transform:scaleY(0)}
.faq-a{overflow:hidden;height:0;transition:height .5s var(--ease)}
.faq-a>div{padding-bottom:26px;color:var(--muted);font-size:.95rem;max-width:70ch}

/* ============================================================
   CTA FINAL + PIE
   ============================================================ */
.final{text-align:center}
.final h2{font-size:clamp(2.2rem,6vw,4.6rem);max-width:16ch;margin-inline:auto;margin-bottom:24px}
.final .lead{max-width:46ch;margin-inline:auto;margin-bottom:36px}

.foot{border-top:1px solid var(--line);padding-block:56px 40px;background:rgba(3,16,27,.6)}
.foot-top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start;
  padding-bottom:34px;border-bottom:1px solid var(--line)}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 30px;font-size:.85rem;color:var(--muted)}
.foot-links a:hover{color:var(--green)}
.legal{margin-top:28px;display:grid;gap:14px}
.legal p{margin:0}
.crisis{border:1px solid rgba(46,155,255,.28);background:rgba(46,155,255,.06);
  border-radius:var(--r-md);padding:16px 20px;font-size:.8rem;color:#B9D3E4;line-height:1.6}
.crisis b{color:var(--paper)}

/* ============================================================
   ASISTENTE IA
   ============================================================ */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:880;width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(18,228,160,.4);background:rgba(6,26,43,.9);backdrop-filter:blur(18px);
  display:grid;place-items:center;cursor:pointer;color:var(--green);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.9);transition:transform .4s var(--ease)}
.ai-fab:hover{transform:scale(1.08)}
.ai-fab svg{width:24px;height:24px}
.ai-fab .dot{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;
  background:var(--green);animation:pulse 2.6s infinite}
.ai-panel{position:fixed;right:22px;bottom:92px;z-index:881;width:min(380px,calc(100vw - 44px));
  height:min(520px,calc(100svh - 140px));border-radius:22px;overflow:hidden;display:none;
  flex-direction:column;background:rgba(6,26,43,.96);backdrop-filter:blur(24px);
  border:1px solid var(--line-2);box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}
.ai-panel.on{display:flex;animation:fadeSwap .4s var(--ease)}
.ai-head{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ai-head img{width:28px;height:28px}
.ai-head b{font-family:var(--serif);font-size:.98rem;font-weight:600}
.ai-head em{font-style:normal;display:block;font-size:.68rem;color:var(--green);letter-spacing:.06em}
.ai-head button{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:1.3rem;line-height:1}
.ai-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;font-size:.88rem}
.ai-msg{max-width:88%;padding:11px 14px;border-radius:15px;line-height:1.55;white-space:pre-wrap}
.ai-msg.bot{background:rgba(255,255,255,.05);border:1px solid var(--line);align-self:flex-start;
  border-bottom-left-radius:5px;color:#D5E7E3}
.ai-msg.me{background:rgba(18,228,160,.13);border:1px solid rgba(18,228,160,.28);align-self:flex-end;
  border-bottom-right-radius:5px}
.ai-sug{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px}
.ai-sug button{font-size:.75rem;padding:7px 12px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--muted);transition:all .3s}
.ai-sug button:hover{color:var(--green);border-color:var(--green)}
.ai-foot{display:flex;gap:9px;padding:14px 16px;border-top:1px solid var(--line)}
.ai-foot input{flex:1;background:rgba(3,16,27,.7);border:1px solid var(--line);border-radius:100px;
  padding:11px 16px;color:var(--paper);font-family:inherit;font-size:.86rem;outline:none;
  transition:border-color .3s}
.ai-foot input:focus{border-color:var(--green)}
.ai-foot button{width:40px;height:40px;border-radius:50%;border:0;background:var(--green);color:#02120C;
  cursor:pointer;display:grid;place-items:center;flex:none;transition:transform .3s}
.ai-foot button:hover{transform:scale(1.08)}
.ai-foot svg{width:17px;height:17px}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.4;
  animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media(max-width:520px){.ai-fab{right:16px;bottom:16px}.ai-panel{right:16px;bottom:84px}}

/* ============================================================
   QUIZ — capa a pantalla completa
   ============================================================ */
.qz{position:fixed;inset:0;z-index:2000;background:var(--ink);overflow-y:auto;overscroll-behavior:contain;
  display:none;cursor:auto}
.qz.on{display:block;animation:qzIn .5s var(--ease)}
@keyframes qzIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
body.qz-open{overflow:hidden}
.qz-bg{position:fixed;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(70% 60% at 20% 0%,rgba(18,228,160,.16),transparent 60%),
             radial-gradient(60% 60% at 88% 100%,rgba(46,155,255,.14),transparent 62%)}

.qz-bar{position:sticky;top:0;z-index:5;background:rgba(3,16,27,.86);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.qz-bar-in{max-width:820px;margin-inline:auto;padding:15px clamp(18px,4vw,28px);
  display:flex;align-items:center;gap:16px}
.qz-bar .brand span{font-size:1rem}
.qz-bar .brand img{width:28px;height:28px}
.qz-close{margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--muted);
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1.15rem;line-height:1;
  display:grid;place-items:center;transition:all .3s;flex:none}
.qz-close:hover{color:var(--green);border-color:var(--green)}
.qz-prog{height:3px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.qz-prog i{position:absolute;inset:0 auto 0 0;width:0;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--blue),var(--green));transition:width .45s var(--ease);
  box-shadow:0 0 14px rgba(18,228,160,.6)}

.qz-in{max-width:820px;margin-inline:auto;padding:clamp(28px,6vw,64px) clamp(18px,4vw,28px) 90px;
  position:relative;z-index:2}
.qz-screen{display:none}
.qz-screen.on{display:block;animation:fadeSwap .5s var(--ease)}

/* --- intro --- */
.qz-intro h2{font-size:clamp(2rem,5.4vw,3.4rem);margin-bottom:20px;max-width:16ch}
.qz-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:34px 0}
@media(max-width:600px){.qz-facts{grid-template-columns:1fr}}
.qz-fact{padding:20px;border-radius:var(--r-md);border:1px solid var(--line);
  background:rgba(10,36,55,.5)}
.qz-fact b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--green);
  line-height:1;margin-bottom:8px}
.qz-fact span{font-size:.8rem;color:var(--muted)}

/* --- preguntas --- */
.qz-cat{font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;color:var(--green);
  font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.qz-cat i{width:22px;height:1px;background:var(--green);opacity:.5;display:block}
.qz-q{font-family:var(--serif);font-size:clamp(1.4rem,3.6vw,2.15rem);font-weight:600;
  line-height:1.2;letter-spacing:-.022em;margin-bottom:34px;max-width:24ch}
.qz-opts{display:grid;gap:9px;margin-bottom:34px}
.qz-opt{display:flex;align-items:center;gap:15px;width:100%;text-align:left;cursor:pointer;
  padding:17px 20px;border-radius:15px;border:1px solid var(--line);background:rgba(10,36,55,.42);
  color:#C6DCD8;font-family:inherit;font-size:.97rem;transition:all .3s var(--ease)}
.qz-opt .bx{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;
  display:grid;place-items:center;transition:all .3s}
.qz-opt .bx::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);
  transform:scale(0);transition:transform .3s var(--ease)}
.qz-opt:hover{border-color:var(--line-2);background:rgba(10,36,55,.75);transform:translateX(4px)}
.qz-opt.sel{border-color:var(--green);background:rgba(18,228,160,.1);color:var(--paper)}
.qz-opt.sel .bx{border-color:var(--green)}
.qz-opt.sel .bx::after{transform:scale(1)}
.qz-nav{display:flex;align-items:center;gap:14px}
.qz-back{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.88rem;
  display:inline-flex;align-items:center;gap:7px;transition:color .3s;padding:8px 0}
.qz-back:hover{color:var(--green)}
.qz-count{margin-left:auto;font-size:.8rem;color:var(--muted-2);font-variant-numeric:tabular-nums}

/* --- formulario --- */
.qz-gate{max-width:520px}
.qz-gate h2{font-size:clamp(1.9rem,4.6vw,2.9rem);margin-bottom:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:9px;font-weight:600}
.field input{width:100%;background:rgba(10,36,55,.55);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;color:var(--paper);font-family:inherit;font-size:1rem;
  outline:none;transition:all .3s}
.field input:focus{border-color:var(--green);background:rgba(10,36,55,.85);
  box-shadow:0 0 0 4px rgba(18,228,160,.09)}
.field input::placeholder{color:var(--muted-2)}
.field.err input{border-color:#FF6B6B}
.field .msg{font-size:.78rem;color:#FF8A8A;margin-top:7px;display:none}
.field.err .msg{display:block}
.consent{display:flex;gap:11px;align-items:flex-start;margin:20px 0 24px;
  font-size:.79rem;color:var(--muted);line-height:1.55}
.consent input{margin-top:3px;accent-color:var(--green);width:16px;height:16px;flex:none}
.qz-gate .btn{width:100%}
.qz-sending{opacity:.6;pointer-events:none}

/* --- resultados --- */
.verdict{display:inline-flex;align-items:center;gap:9px;padding:8px 17px;border-radius:100px;
  font-size:.71rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:22px}
.verdict i{width:6px;height:6px;border-radius:50%;background:currentColor}
.res-head{font-size:clamp(1.7rem,4.4vw,2.9rem);margin-bottom:20px;max-width:22ch}
.res-body{color:var(--muted);font-size:1rem;max-width:60ch}
.res-body strong{color:var(--paper);font-weight:500}

/* El resultado del diagnóstico: una fila por área, ordenadas de más a menos.
   Sustituye a la telaraña — el radar no dejaba ordenarlas, y sin orden no se ve
   de un vistazo cuál pesa más. La escala va al revés (100 a la izquierda) para
   que estar mejor sea estar más a la derecha. */
.res-chart{margin:38px 0;padding:clamp(22px,3.4vw,36px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:linear-gradient(165deg,rgba(10,36,55,.7),rgba(6,26,43,.45))}

.area-plot{display:grid;gap:2px}
.area-row{padding:11px 0;border-top:1px solid var(--line)}
.area-row:first-child{border-top:0;padding-top:0}
.area-head{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:9px;font-size:.87rem;gap:14px}
.area-head .nm{color:#C6DCD8}
.area-head .vl{font-variant-numeric:tabular-nums;font-weight:600;font-size:.8rem;white-space:nowrap}
.area-track{position:relative;height:14px}
.area-track::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;
  background:rgba(255,255,255,.1)}
.area-dot{position:absolute;top:0;left:4%;width:14px;height:14px;margin-left:-7px;
  border-radius:50%;box-shadow:0 0 0 2px rgba(6,26,43,.9);
  transition:left 1.1s var(--ease)}
.area-axis{display:flex;justify-content:space-between;margin-top:14px;
  font-size:.72rem;letter-spacing:.04em;color:var(--muted-2)}

.chart-note{font-size:.76rem;color:var(--muted-2);margin-top:16px;grid-column:1/-1;
  border-top:1px solid var(--line);padding-top:14px}

.callout{border-left:2px solid var(--green);background:rgba(18,228,160,.06);
  padding:22px 24px;border-radius:0 var(--r-md) var(--r-md) 0;margin:30px 0;font-size:.97rem;
  color:#CFE4E0;line-height:1.65}
.callout strong{color:var(--green);font-weight:600}

.points{display:grid;gap:12px;margin:26px 0 34px}
.point{display:flex;gap:18px;padding:22px 24px;border-radius:var(--r-md);border:1px solid var(--line);
  background:rgba(10,36,55,.45)}
.point .rk{font-family:var(--serif);font-size:1.5rem;color:var(--green);line-height:1;flex:none;
  width:34px;opacity:.85}
.point h4{font-family:var(--serif);font-size:1.1rem;font-weight:600;margin:0 0 7px;letter-spacing:-.015em}
.point p{margin:0 0 10px;font-size:.9rem;color:var(--muted)}
.point .do{font-size:.85rem;color:#BDD4D0;display:flex;gap:9px;align-items:flex-start}
.point .do svg{width:14px;height:14px;color:var(--green);flex:none;margin-top:4px}

.ai-block{border-radius:var(--r-lg);border:1px solid rgba(46,155,255,.26);
  background:linear-gradient(165deg,rgba(46,155,255,.08),rgba(6,26,43,.5));
  padding:clamp(22px,3vw,32px);margin:30px 0}
.ai-block h4{font-family:var(--serif);font-size:1.15rem;margin:0 0 4px;display:flex;
  align-items:center;gap:10px}
.ai-block h4 svg{width:17px;height:17px;color:var(--blue)}
.ai-block .by{font-size:.72rem;color:var(--muted-2);letter-spacing:.08em;margin-bottom:16px}
.ai-block .txt{font-size:.95rem;color:#CFE4E0;line-height:1.7;white-space:pre-wrap}

.warn{display:flex;gap:14px;border:1px solid rgba(250,178,25,.3);background:rgba(250,178,25,.06);
  border-radius:var(--r-md);padding:18px 20px;margin:30px 0;font-size:.83rem;color:#E7D8B4;line-height:1.6}
.warn svg{width:19px;height:19px;color:#FAB219;flex:none;margin-top:2px}
.warn b{color:#FFDE9B}

.res-cta{text-align:center;padding:clamp(30px,4.6vw,52px);border-radius:var(--r-lg);
  border:1px solid rgba(18,228,160,.28);margin-top:36px;
  background:radial-gradient(120% 150% at 50% 0%,rgba(18,228,160,.13),transparent 62%),rgba(6,26,43,.66)}
.res-cta h3{font-size:clamp(1.4rem,3.2vw,2.1rem);margin-bottom:14px;max-width:22ch;margin-inline:auto}
.res-cta p{color:var(--muted);font-size:.93rem;max-width:48ch;margin-inline:auto;margin-bottom:26px}
.retake{background:none;border:0;color:var(--muted-2);text-decoration:underline;cursor:pointer;
  font-size:.82rem;font-family:inherit;margin-top:22px}
.retake:hover{color:var(--green)}

/* --- animaciones de entrada del resultado ---------------------
   El estado final es el estilo normal del elemento: la animación
   solo lo recorre desde cero. Si no llega a ejecutarse (pestaña
   en segundo plano o motion reducido), el dato sigue siendo
   correcto y visible.                                            */
@media (prefers-reduced-motion:reduce){
  .area-dot{transition:none}
}

/* ============================================================
   AÑADIDOS v2
   ============================================================ */
.sec-tight{padding-top:0}

/* rejilla del problema: 4 tarjetas */
.pain-grid{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.sec-close{margin:clamp(30px,4vw,48px) auto 0;max-width:60ch;text-align:center;
  font-family:var(--serif);font-size:clamp(1.1rem,2.1vw,1.42rem);line-height:1.45;
  letter-spacing:-.015em;color:#C6DCD8}
.sec-close strong{color:var(--paper);font-weight:600}

/* Llamada a la compra repetida a lo largo de la página.
   La campaña traía gente que leía y se iba sin llegar nunca al checkout: el
   único camino de pago estaba en la sección de precio, al final. Estos bloques
   ponen la puerta al final de cada argumento, en el momento en que la persona
   acaba de darle la razón al texto. */
.cta-inline{margin:clamp(28px,3.6vw,44px) auto 0;max-width:60ch;text-align:center}
.cta-inline .tiny{margin-top:14px}

/* Pago y diagnóstico juntos: el de pago manda, el gratuito queda como salida
   para quien todavía no sabe qué le pasa. */
.cta-duo{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:stretch}
/* El de pago lleva flecha y el otro no, y eso los deja de distinta altura.
   Se igualan a mano para que la pareja no quede descuadrada. */
.cta-duo .btn{min-height:69px}

.tag-min{font-size:.5em;color:var(--green);font-family:var(--sans);
  letter-spacing:.11em;text-transform:uppercase;font-weight:600;white-space:nowrap}

/* cabecera de las 21 señales */
.signals-head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,60px);
  align-items:center}
@media(max-width:860px){.signals-head{grid-template-columns:1fr}}
.signals-title{font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.14;max-width:20ch}
.signals-img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1;
  border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.signals-img img{width:100%;height:100%;object-fit:cover}
.signals-img .tint{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(3,16,27,.6),transparent 55%)}
@media(max-width:860px){.signals-img{max-width:340px;margin-top:8px}}

/* valoración de testimonios */
.stars{position:relative;display:inline-flex;gap:3px;line-height:0;
  color:rgba(234,246,243,.15)}
.stars svg{width:15px;height:15px;flex:none}
.stars .fill{position:absolute;left:0;top:0;display:inline-flex;gap:3px;
  overflow:hidden;color:var(--green);white-space:nowrap;pointer-events:none}
.rate{display:flex;align-items:center;gap:10px}
.rate b{font-size:.86rem;font-weight:600;color:var(--green);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.agg{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;
  font-size:.86rem;color:var(--muted)}
.agg .rate b{font-size:1rem}

/* la regla antigua .tst .stars pintaba las 5 estrellas de verde y
   anulaba la nota parcial: la sobreescribimos con igual especificidad */
.tst .stars{color:rgba(234,246,243,.15)}
.tst .stars .fill{color:var(--green)}
.tst .stars svg{width:15px;height:15px}

/* nota de suscripción bajo la tarjeta de precio */
.sub-note{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--muted);line-height:1.6}