/* ============ FUENTES ============ */
@font-face{font-family:'Bricolage';src:url('fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Bricolage';src:url('fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Bricolage';src:url('fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'JB';src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JB';src:url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'JB';src:url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

/* ============ TOKENS ============ */
:root{
  --navy:#0A0F1E;
  --navy-2:#101829;
  --card:#151E33;
  --card-2:#1B2540;
  --bd-d:#212C46;
  --paper:#F2F0E9;
  --paper-2:#E9E6DC;
  --rule:#C6D2E6;
  --ink:#111827;
  --ink-2:#4A5468;
  --ink-3:#7A8496;
  --lime:#C3F53C;
  --lime-d:#9FCF1E;
  --green:#3ECF8E;
  --amber:#F5A623;
  --violet:#7C6BF5;
  --blue:#4C8DFF;
  --tx-d:#E8EDF8;
  --dim-d:#8B96AE;
  --faint-d:#5A6580;
  --tx-d2:#CBD3E1;
  --max:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.mono{font-family:'JB',monospace;font-variant-ligatures:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.narrow{max-width:920px;margin:0 auto;padding:0 28px}

/* ============ TIPOGRAFÍA ============ */
h1,h2,h3,h4{font-family:'Bricolage',sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.035em}
h1{font-size:clamp(2.6rem,6.4vw,5.1rem)}
h2{font-size:clamp(2rem,4.3vw,3.4rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.025em;line-height:1.18}
.lead{font-size:clamp(0.95rem,1.35vw,1.1rem);line-height:1.6;color:var(--ink-2)}
.dark .lead{color:var(--dim-d)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JB',monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.dark .eyebrow{color:var(--faint-d)}
.eyebrow::before{content:'';width:22px;height:1px;background:currentColor;opacity:.5}
.eyebrow.lime{color:var(--lime-d)}
.dark .eyebrow.lime{color:var(--lime)}

/* ============ SECCIONES ============ */
section{position:relative}
.dark{background:var(--navy);color:var(--tx-d)}
.pad{padding:clamp(76px,10vw,132px) 0}
.pad-sm{padding:clamp(52px,6vw,80px) 0}

/* papel rayado de cuaderno */
.ruled::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,transparent 0 37px,var(--rule) 37px 38px);
  opacity:.34;
}
.ruled > *{position:relative}

/* ============ BOTONES ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 26px;border-radius:11px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:0 0 17px}
.btn-lime{background:var(--lime);color:#0A0F1E;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.btn-lime:hover{background:#D2FF52;transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(195,245,60,.55)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(17,24,39,.5)}
.btn-line{border:1.5px solid rgba(255,255,255,.2);color:var(--tx-d)}
.btn-line:hover{border-color:rgba(195,245,60,.55);background:rgba(195,245,60,.06)}
.btn-line-ink{border:1.5px solid rgba(17,24,39,.22);color:var(--ink)}
.btn-line-ink:hover{border-color:var(--ink);background:rgba(17,24,39,.04)}
.btn-sm{height:42px;padding:0 18px;font-size:14px;border-radius:9px}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  transition:background .3s var(--ease),border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(10,15,30,.86);backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.09)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 28px;height:74px;display:flex;align-items:center;gap:36px}
/* Logotipo real: blanco + lima, sobre fondo oscuro */
.logo{display:inline-flex;flex:0 0 auto}
.logo img{height:44px;width:auto}
.foot .logo img{height:52px}
.nav-links{display:flex;gap:30px;font-size:14.5px;font-weight:500;color:rgba(232,237,248,.74);white-space:nowrap}
.nav-links a{transition:color .18s}
.nav-links a:hover{color:var(--lime)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:13px}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;color:var(--tx-d)}
.burger svg{width:23px;height:23px}

/* ============ HERO ============ */
.hero{background:var(--navy);color:var(--tx-d);padding:158px 0 clamp(80px,9vw,120px);overflow:hidden;position:relative}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  height:clamp(150px,26vh,330px);
  background:linear-gradient(to top,var(--navy) 12%,transparent);
  pointer-events:none;z-index:4;
}
.hero-glow{
  position:absolute;top:-320px;left:50%;transform:translateX(-50%);
  width:1180px;height:820px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(195,245,60,.13),rgba(76,141,255,.07) 42%,transparent 68%);
}
.hero-in{position:relative;z-index:2;text-align:center;will-change:transform,opacity}
.hero h1{margin:22px auto 0;max-width:21ch;font-size:clamp(2rem,4.3vw,3.15rem)}
.hero h1 .hl{
  color:var(--lime);position:relative;
}
.hero h1 .hl::after{
  content:'';position:absolute;left:-2%;right:-2%;bottom:.07em;height:.055em;
  background:var(--lime);opacity:.35;border-radius:2px;
}
.hero .lead{margin:26px auto 0;max-width:56ch;color:var(--tx-d2)}
.hero-points{
  list-style:none;max-width:60ch;margin:26px auto 0;
  display:grid;gap:13px;text-align:left;
}
.hero-points li{
  display:flex;gap:11px;align-items:flex-start;
  color:var(--tx-d2);font-size:clamp(.94rem,1.25vw,1.02rem);line-height:1.55;
}
.hero-points svg{flex:0 0 21px;width:21px;height:21px;margin-top:2px;color:var(--lime)}
.hero-points b{color:var(--tx-d);font-weight:600}
.hero-btns{display:flex;gap:13px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.hero-note{margin-top:19px;font-size:13px;color:var(--dim-d)}

/* escenario flotante */
.stage{position:relative;margin:clamp(52px,7vw,84px) auto 0;max-width:1120px;padding:0 28px;transform-origin:50% 0%;will-change:transform}
.stage-main{
  border-radius:15px;
  will-change:transform;
}
.stage-main > img{
  border-radius:15px;border:1px solid var(--bd-d);
  box-shadow:0 44px 100px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04);
}
.float{position:absolute;will-change:transform;z-index:3}
.float img{border-radius:13px;box-shadow:0 26px 62px -18px rgba(0,0,0,.8)}
.f-ticket{width:186px;right:-6px;top:20%}
.f-phone{width:158px;left:-14px;top:36%}
.chip{
  position:absolute;display:flex;align-items:center;gap:11px;
  background:rgba(21,30,51,.93);backdrop-filter:blur(10px);
  border:1px solid var(--bd-d);border-radius:12px;padding:12px 15px;
  box-shadow:0 20px 46px -14px rgba(0,0,0,.75);white-space:nowrap;
}
.chip .dot{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;flex:0 0 31px}
.chip .dot svg{width:15px;height:15px}
.chip .t{font-size:12.5px;font-weight:600;line-height:1.25}
.chip .s{font-size:10.5px;color:var(--faint-d);margin-top:2px}
.c-pago{left:-38px;top:12%}
.c-cfdi{right:-30px;bottom:16%}

/* ============ TIRA DE DATOS ============ */
.strip{border-top:1px solid rgba(255,255,255,.08);background:var(--navy-2)}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07)}
.stat{background:var(--navy-2);padding:34px 26px;text-align:center}
.stat .n{font-family:'Bricolage',sans-serif;font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;letter-spacing:-.04em;color:var(--lime)}
.stat .l{font-size:12.5px;color:var(--dim-d);margin-top:7px;line-height:1.45}

/* ============ MARQUEE ============ */
.marq-wrap{overflow:hidden;padding:16px 0;position:relative}
.marq-wrap::before,.marq-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:130px;z-index:3;pointer-events:none;
}
.marq-wrap::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.marq-wrap::after{right:0;background:linear-gradient(-90deg,var(--paper),transparent)}
.dark .marq-wrap::before{background:linear-gradient(90deg,var(--navy),transparent)}
.dark .marq-wrap::after{background:linear-gradient(-90deg,var(--navy),transparent)}
.marq{display:flex;width:max-content;gap:13px;animation:slide 46s linear infinite}
.marq.rev{animation-direction:reverse;animation-duration:56s}
.marq-wrap:hover .marq{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mi{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  height:50px;padding:0 20px;border-radius:25px;
  border:1.5px solid rgba(17,24,39,.13);background:rgba(255,255,255,.55);
  font-size:14.5px;font-weight:500;white-space:nowrap;
}
.mi svg{width:16px;height:16px;flex:0 0 16px;color:var(--ink-2)}
.mi.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.mi.on svg{color:var(--lime)}

/* ============ PROCESO PINEADO ============ */
.proc{background:var(--navy);color:var(--tx-d)}
.proc-track{position:relative}
.proc-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,7vh,74px) 0 clamp(16px,3vh,30px);overflow:hidden}
.proc-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,86px);align-items:center}
.proc-steps{display:flex;flex-direction:column;gap:2px}
.step{
  position:relative;padding:11px 0 11px 30px;cursor:pointer;
  border-left:2px solid rgba(255,255,255,.11);
  opacity:.4;transition:opacity .5s var(--ease),padding .5s var(--ease);
}
.step.on{opacity:1;padding-top:15px;padding-bottom:15px}
.step:hover{opacity:.72}
.step.on:hover{opacity:1}
/* el detalle solo se despliega en el paso activo */
.step p{max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease),opacity .4s,margin .5s}
.step.on p{max-height:180px;opacity:1}
.step::before{
  content:'';position:absolute;left:-2px;top:0;bottom:0;width:2px;
  background:var(--lime);transform:scaleY(0);transform-origin:top;
  transition:transform .55s var(--ease);
}
.step.on::before{transform:scaleY(1)}
.step .num{
  font-family:'JB',monospace;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--faint-d);transition:color .4s;
}
.step.on .num{color:var(--lime)}
.step h3{margin:9px 0 0}
.step.on h3{margin-bottom:11px}
.step p{font-size:14.6px;color:var(--dim-d);line-height:1.6;max-width:44ch}
.step .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s,margin .5s}
.step.on .tags{max-height:90px;opacity:1;margin-top:14px}
.tg{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:8px;
  background:rgba(195,245,60,.1);color:var(--lime);font-size:11.5px;font-weight:600;
  font-family:'JB',monospace;letter-spacing:.02em;
}
.proc-vis{position:relative;min-height:min(48vh,420px)}
.pv{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(26px);
  /* sin scale: alteraría el ancho medido al escalar las maquetas */
  transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none;
}
.pv.on{opacity:1;transform:none}
.pv img{border-radius:14px;border:1px solid var(--bd-d);box-shadow:0 34px 78px -24px rgba(0,0,0,.85);max-height:min(48vh,420px);width:auto}
.pv.duo{gap:20px}
.pv.duo img{max-height:min(44vh,390px)}
.proc-hint{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:clamp(12px,2.5vh,24px);font-family:'JB',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint-d);transition:opacity .4s;
}
.proc-hint svg{width:14px;height:14px;animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.proc-hint.hide{opacity:0}

/* ============ TABS ============ */
.tabs-head{display:flex;gap:9px;flex-wrap:wrap;margin:38px 0 30px}
.tab{
  position:relative;overflow:hidden;
  height:46px;padding:0 20px;border-radius:10px;
  border:1.5px solid rgba(17,24,39,.14);
  font-size:14.5px;font-weight:600;color:var(--ink-2);
  transition:color .25s,border-color .25s,background .25s;
}
.tab:hover{border-color:rgba(17,24,39,.34)}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tab .prog{position:absolute;left:0;bottom:0;height:2.5px;background:var(--lime);width:0}
/* La barra solo corre en modo automático; al llegar a 100% el JS
   escucha animationend y pasa a la siguiente pestaña. */
.tabs-head.auto .tab.on .prog{animation:fill 9s linear forwards}
.tabs-head.auto.paused .tab.on .prog{animation-play-state:paused}
@keyframes fill{to{width:100%}}
.tab-body{position:relative;min-height:430px}
.tp{
  position:absolute;inset:0;
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4.5vw,64px);align-items:center;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.tp.on{opacity:1;transform:none;pointer-events:auto}
.tp h3{margin-bottom:14px}
.tp .lead{font-size:14.4px}
.tp ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.tp li{display:flex;gap:11px;font-size:14.6px;color:var(--ink-2);line-height:1.5}
.tp li svg{width:17px;height:17px;flex:0 0 17px;color:var(--lime-d);margin-top:3px}
.tp-vis{display:flex;justify-content:center;gap:18px}
.tp-vis img{
  border-radius:13px;border:1px solid rgba(17,24,39,.1);
  box-shadow:0 30px 64px -24px rgba(17,24,39,.42);max-height:430px;width:auto;
}

/* ============ REJILLA DE FUNCIONES ============ */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;margin-top:46px}
.feat{
  background:rgba(255,255,255,.62);border:1px solid rgba(17,24,39,.09);
  border-radius:15px;padding:28px 26px 30px;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.feat:hover{transform:translateY(-4px);border-color:rgba(17,24,39,.2);box-shadow:0 20px 44px -22px rgba(17,24,39,.34)}
.feat .ic{width:42px;height:42px;border-radius:11px;background:var(--ink);display:grid;place-items:center;color:var(--lime);margin-bottom:19px}
.feat .ic svg{width:19px;height:19px}
.feat h3{font-size:1.13rem;margin-bottom:9px}
.feat p{font-size:14.4px;color:var(--ink-2);line-height:1.58}
.feat-sub{font-size:13.2px;font-weight:600;color:var(--ink);margin:13px 0 7px}
.feat-methods{list-style:none;display:grid;gap:5px}
.feat-methods li{position:relative;padding-left:16px;font-size:13.4px;color:var(--ink-2);line-height:1.5}
.feat-methods li::before{content:'';position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:var(--lime)}

/* ============ SEGURIDAD ============ */
.sec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(40px,6vw,80px);align-items:center}
.sec-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.sec-item{
  background:var(--card);border:1px solid var(--bd-d);border-radius:13px;padding:21px 20px;
}
.sec-item .ic{width:34px;height:34px;border-radius:9px;background:rgba(195,245,60,.11);display:grid;place-items:center;color:var(--lime);margin-bottom:14px}
.sec-item .ic svg{width:16px;height:16px}
.sec-item h4{font-family:'Inter',sans-serif;font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.sec-item p{font-size:13px;color:var(--dim-d);line-height:1.52}

/* ============ TICKET (firma visual) ============ */
.ticket{
  background:var(--card);border:1px solid var(--bd-d);border-radius:15px;
  position:relative;overflow:hidden;
}
.ticket .th{padding:26px 28px;border-bottom:1.5px dashed var(--bd-d)}
.ticket .tb{padding:22px 28px 26px}
.ticket .notch{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--navy)}
.ticket .notch.l{left:-11px}
.ticket .notch.r{right:-11px}
.trow{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:13.6px}
.trow + .trow{border-top:1px solid var(--bd-d)}
.trow .k{color:var(--dim-d)}
.trow .v{margin-left:auto;font-family:'JB',monospace;font-weight:500}

/* ============ FAQ ============ */
.faq{margin-top:42px;border-top:1px solid rgba(17,24,39,.13)}
.qa{border-bottom:1px solid rgba(17,24,39,.13)}
.qa summary{
  list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:'Bricolage',sans-serif;font-size:clamp(1.02rem,1.6vw,1.24rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.32;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:'';position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--ease);
}
.qa[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.qa .ans{padding:0 60px 26px 0;font-size:15px;color:var(--ink-2);line-height:1.66}
.qa[open] .ans{animation:fade .38s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============ CTA FINAL ============ */
.cta{background:var(--navy);color:var(--tx-d);text-align:center;position:relative;overflow:hidden}
.cta-glow{
  position:absolute;bottom:-380px;left:50%;transform:translateX(-50%);
  width:1000px;height:700px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(195,245,60,.16),transparent 66%);
}
.cta-in{position:relative;z-index:2}
.cta h2{margin-top:18px;max-width:15ch}
.cta .lead{margin-top:20px;max-width:46ch;color:var(--tx-d2)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,505px);
  gap:clamp(38px,5vw,74px);align-items:start;text-align:left}

/* --- columna de texto --- */
.cta-points{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:11px}
.cta-points li{display:flex;gap:11px;font-size:14.6px;color:var(--tx-d);line-height:1.5}
.cta-points li svg{width:17px;height:17px;flex:0 0 17px;color:var(--lime);margin-top:3px}
.cta-alt{margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}
.cta-alt-t{display:block;font-size:12.5px;font-weight:600;color:var(--dim-d);margin-bottom:13px}
.cta-alt-links{display:flex;flex-direction:column;gap:10px}
.cta-alt-links a{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;
  color:var(--tx-d);transition:color .18s;width:fit-content}
.cta-alt-links a:hover{color:var(--lime)}
.cta-alt-links svg{width:16px;height:16px;flex:0 0 16px;color:var(--lime)}
.cta-alt-h{font-size:12.5px;color:var(--dim-d);margin-top:13px}

/* --- selector "Soy distribuidor" / "Quiero ser distribuidor" --- */
.dseg{display:flex;gap:8px;margin-bottom:16px}
.dseg-btn{flex:1;height:46px;border-radius:11px;border:1.5px solid rgba(255,255,255,.16);
  color:var(--dim-d);font-size:13.8px;font-weight:600;transition:border-color .18s,color .18s,background .18s}
.dseg-btn:hover{border-color:rgba(195,245,60,.4);color:var(--tx-d)}
.dseg-btn.on{background:var(--lime);border-color:var(--lime);color:#0A0F1E}
.dseg-p{display:none}
.dseg-p.on{display:block}

/* --- tarjeta del formulario --- */
.cta-form{background:var(--card);border:1px solid var(--bd-d);border-radius:16px;
  padding:clamp(24px,2.6vw,32px);box-shadow:0 34px 78px -30px rgba(0,0,0,.75)}
.cf-head{margin-bottom:22px}
.cf-head h3{font-size:1.32rem}
.cf-head p{font-size:13.5px;color:var(--dim-d);margin-top:7px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 14px}

.f-field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px;color:var(--tx-d)}
.req{color:var(--lime)}
.f-field input,.f-field select{
  width:100%;height:46px;padding:0 14px;
  background:var(--navy);border:1.5px solid #2A3654;border-radius:10px;
  color:var(--tx-d);font-family:inherit;font-size:14.5px;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.f-field input::placeholder{color:#4E5871}
.f-field input:hover,.f-field select:hover{border-color:#39456494}
.f-field input:focus,.f-field select:focus{
  outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(195,245,60,.14);background:#0C1424;
}
/* el número no necesita las flechitas del navegador */
.f-field input[type=number]{-moz-appearance:textfield;appearance:textfield}
.f-field input[type=number]::-webkit-outer-spin-button,
.f-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* select con flecha propia: la nativa se ve fuera de lugar en oscuro */
.f-select{position:relative}
.f-select select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer}
.f-select select:invalid{color:#4E5871}
.f-select option{background:var(--card);color:var(--tx-d)}
.f-chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--dim-d);pointer-events:none;transition:color .18s}
.f-select select:focus ~ .f-chev{color:var(--lime)}

/* casilla de privacidad */
.f-check-wrap{margin-top:18px}
.f-check-wrap .f-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin:0}
.f-check input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.f-box{width:20px;height:20px;flex:0 0 20px;border:1.5px solid #2A3654;border-radius:6px;
  display:grid;place-items:center;margin-top:1px;transition:background .16s,border-color .16s}
.f-box svg{width:13px;height:13px;stroke-width:3;color:#0A0F1E;opacity:0;transform:scale(.6);
  transition:opacity .16s,transform .16s}
.f-check input:checked + .f-box{background:var(--lime);border-color:var(--lime)}
.f-check input:checked + .f-box svg{opacity:1;transform:none}
.f-check input:focus-visible + .f-box{outline:2.5px solid var(--lime);outline-offset:3px}
.f-check-t{font-size:13.2px;color:var(--dim-d);line-height:1.5;font-weight:400}
.f-check-t a{color:var(--lime);text-decoration:underline;text-underline-offset:2px}

/* errores */
.f-err{font-size:11.8px;color:var(--red);margin-top:6px;display:none}
.f-field.err .f-err{display:block}
.f-field.err input,.f-field.err select{border-color:var(--red)}
.f-field.err .f-box{border-color:var(--red)}

.cf-send{width:100%;margin-top:22px;height:54px;font-size:15.5px}
.cf-send[aria-busy=true]{opacity:.75;pointer-events:none}
.cf-note{font-size:11.8px;color:var(--faint-d);margin-top:14px;line-height:1.5}
.cf-fail{font-size:13px;color:var(--red);margin-top:14px;line-height:1.5}

/* estado de éxito */
.cf-ok{background:var(--card);border:1px solid rgba(62,207,142,.3);border-radius:16px;
  padding:clamp(30px,3vw,40px);text-align:center;box-shadow:0 34px 78px -30px rgba(0,0,0,.75)}
.cf-ok-c{width:58px;height:58px;border-radius:50%;background:rgba(62,207,142,.13);
  border:1.5px solid rgba(62,207,142,.4);display:grid;place-items:center;margin:0 auto 20px;color:var(--green)}
.cf-ok-c svg{width:27px;height:27px;stroke-width:2.3}
.cf-ok h3{font-size:1.42rem}
.cf-ok p{font-size:14.5px;color:var(--dim-d);margin:12px auto 24px;max-width:34ch;line-height:1.6}
.cf-ok b{color:var(--tx-d);font-weight:600}

/* ============ FOOTER ============ */
.foot{background:var(--navy);color:var(--dim-d);border-top:1px solid rgba(255,255,255,.09);padding:56px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}
.foot h5{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-d);margin-bottom:16px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot a:hover{color:var(--lime)}
.foot .about{font-size:14px;line-height:1.65;max-width:34ch;margin-top:17px}
.foot-bot{
  margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--faint-d);
}
.foot-bot .sp{margin-left:auto}

/* ============ REVELADOS ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .72s var(--ease),transform .72s var(--ease)}
.rv.in{opacity:1;transform: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}.rv-d6{transition-delay:.54s}

/* ============ FOCO ACCESIBLE ============ */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--lime);outline-offset:3px;border-radius:6px;
}

/* pantallas de poca altura */
@media (min-width:1081px) and (max-height:790px){
  .proc h2{font-size:2.05rem}
  .step p{font-size:13.8px}
  .step h3{font-size:1.2rem}
  .proc-vis{min-height:min(42vh,330px)}
  .pv img{max-height:min(42vh,330px)}
  .pv.duo img{max-height:min(40vh,310px)}
}

/* ============ RESPONSIVO ============ */
@media (max-width:1080px){
  /* ===== Proceso: MISMO efecto pineado en móvil, en una sola columna =====
     (el pin lo re-habilita app.js; aquí sólo cambia el layout a 1 col) */
  .proc-grid{grid-template-columns:1fr;gap:clamp(14px,2.4vh,22px)}
  .proc-sticky{padding:clamp(74px,10vh,94px) 0 clamp(14px,2.6vh,24px);justify-content:flex-start}
  .proc-sticky h2{font-size:1.4rem;margin-top:9px !important;line-height:1.2}
  /* pasos: sólo el activo, con fundido cruzado sobre los demás */
  .proc-steps{position:relative;min-height:min(28vh,214px)}
  .step{position:absolute;inset:0;opacity:0;pointer-events:none;padding:0;border-left:0;transition:opacity .22s var(--ease)}
  .step.on{position:relative;opacity:1;pointer-events:auto;padding:0}
  .step::before{display:none}
  .step h3{margin-top:4px}
  .step p{max-height:none;opacity:1;font-size:14px}
  .step .tags,.step.on .tags{max-height:none;overflow:visible;opacity:1;margin-top:10px}
  /* visual: una pantalla a la vez (se conserva el crossfade absoluto de base) */
  .proc-vis{min-height:min(34vh,270px)}
  .pv img{max-height:none}
  .pv.duo{gap:12px}
  .proc-hint{display:flex;margin-top:12px}
  .tp{grid-template-columns:1fr;gap:30px}
  .tab-body{min-height:0}
  .tp{position:static;display:none}
  .tp.on{display:grid}
  .sec-grid{grid-template-columns:1fr;gap:40px}
  .feats{grid-template-columns:1fr 1fr}
  .cta-grid{grid-template-columns:minmax(0,1fr);gap:38px}
  .cta h2,.cta .lead{max-width:26ch}
}
@media (max-width:860px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .nav.menu-abierto{background:rgba(10,15,30,.97);backdrop-filter:blur(16px)}
  .strip-in{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .float,.chip{display:none}
  .hero{padding-top:128px}
}
@media (max-width:640px){
  .wrap,.narrow{padding:0 20px}
  .feats{grid-template-columns:1fr}
  .sec-list{grid-template-columns:1fr}
  .cf-grid{grid-template-columns:1fr}
  .cta-form{padding:22px 19px}
  .hero-btns .btn{width:100%}
  .tp-vis img{max-height:340px}
  .foot-grid{grid-template-columns:1fr}
  .marq-wrap::before,.marq-wrap::after{width:56px}
}

/* ============ MOVIMIENTO REDUCIDO ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .marq{animation:none}
  .tab .prog{animation:none !important;width:0 !important}
  /* proceso: sin pin, todo apilado y visible */
  .proc-track{height:auto !important}
  .proc-sticky{position:static;height:auto;display:block;padding:0}
  .proc-steps{min-height:0}
  .step{position:relative;inset:auto;opacity:1;padding:11px 0 11px 30px;border-left:2px solid rgba(255,255,255,.11)}
  .proc-vis{min-height:auto;display:flex;flex-direction:column;gap:22px;margin-top:22px}
  .pv{position:static;opacity:1;transform:none}
  .proc-hint{display:none}
}

/* =====================================================
   WHATSAPP FLOTANTE
   El panel vive dentro del sitio. Solo al enviar se abre
   WhatsApp, ya con el mensaje redactado.
   ===================================================== */
.wa-fab{
  position:fixed;right:22px;bottom:22px;z-index:300;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 32px -8px rgba(37,211,102,.55),0 4px 14px rgba(0,0,0,.28);
  transition:transform .22s var(--ease),background .22s;
}
.wa-fab:hover{transform:translateY(-3px) scale(1.04)}
.wa-fab:active{transform:translateY(-1px) scale(.99)}
.wa-fab svg{width:29px;height:29px;position:relative;z-index:2}
.wa-fab .ic-down{display:none;width:26px;height:26px}
.wa-fab.open{background:var(--ink)}
.wa-fab.open .ic-wa{display:none}
.wa-fab.open .ic-down{display:block}

/* aro que late para que el botón se note al llegar */
.wa-ring{
  position:absolute;inset:0;border-radius:50%;background:#25D366;
  animation:waPulse 2.6s ease-out infinite;z-index:1;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.55);opacity:0}
  100%{opacity:0}
}
.wa-fab.open .wa-ring,.wa-fab:hover .wa-ring{animation:none;opacity:0}

.wa-panel{
  position:fixed;right:22px;bottom:92px;z-index:299;
  width:min(372px, calc(100vw - 32px));
  max-height:min(560px, calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--bd-d);border-radius:17px;
  box-shadow:0 34px 74px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03);
  opacity:0;transform:translateY(14px) scale(.97);transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.wa-panel.open{opacity:1;transform:none;pointer-events:auto}

.wa-head{display:flex;align-items:center;gap:12px;padding:15px 16px;
  background:var(--navy-2);border-bottom:1px solid var(--bd-d)}
.wa-face{position:relative;flex:0 0 40px;width:40px;height:40px}
.wa-face img{width:40px;height:40px;border-radius:11px;display:block}
.wa-on{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
  background:#25D366;border:2.5px solid var(--navy-2)}
.wa-who{min-width:0}
.wa-who b{display:block;font-size:14.5px;font-weight:600;color:var(--tx-d);letter-spacing:-.01em}
.wa-who span{display:block;font-size:11.5px;color:var(--dim-d);margin-top:2px}
.wa-x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  color:var(--dim-d);flex:0 0 32px;transition:background .16s,color .16s}
.wa-x:hover{background:rgba(255,255,255,.07);color:var(--tx-d)}
.wa-x svg{width:17px;height:17px}

.wa-body{padding:18px 16px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:9px}
.wa-msg{
  background:var(--card-2);border:1px solid var(--bd-d);
  border-radius:14px 14px 14px 5px;padding:11px 14px;
  font-size:14px;line-height:1.5;color:var(--tx-d);max-width:88%;width:fit-content;
}
.wa-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.wa-chip{
  border:1.5px solid rgba(195,245,60,.35);background:rgba(195,245,60,.07);
  color:var(--lime);border-radius:20px;padding:8px 13px;
  font-size:12.5px;font-weight:500;text-align:left;
  transition:background .16s,border-color .16s;
}
.wa-chip:hover{background:rgba(195,245,60,.15);border-color:var(--lime)}

.wa-foot{padding:12px 14px 13px;border-top:1px solid var(--bd-d);background:var(--navy-2)}
.wa-input{display:flex;align-items:flex-end;gap:8px;
  background:var(--navy);border:1.5px solid #2A3654;border-radius:22px;padding:5px 5px 5px 15px;
  transition:border-color .18s,box-shadow .18s}
.wa-input:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px rgba(195,245,60,.13)}
.wa-input textarea{
  flex:1;border:0;background:none;resize:none;outline:none;
  color:var(--tx-d);font-family:inherit;font-size:14px;line-height:1.45;
  padding:9px 0;max-height:96px;
}
.wa-input textarea::placeholder{color:#4E5871}
.wa-send{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;transition:transform .16s,opacity .16s}
.wa-send:hover{transform:scale(1.07)}
.wa-send:disabled{opacity:.4;pointer-events:none}
.wa-send svg{width:17px;height:17px}
.wa-note{font-size:11px;color:var(--faint-d);margin-top:9px;text-align:center;line-height:1.45}

@media (max-width:640px){
  .wa-fab{right:16px;bottom:16px;width:54px;height:54px}
  .wa-fab svg{width:27px;height:27px}
  .wa-panel{right:12px;left:12px;bottom:80px;width:auto;max-height:calc(100vh - 108px)}
}
@media (prefers-reduced-motion:reduce){
  .wa-ring{animation:none;opacity:0}
}

/* variante lima con contorno: botón de distribuidores */
.btn-line-lime{border:1.5px solid rgba(195,245,60,.5);color:var(--lime);background:transparent}
.btn-line-lime:hover{background:rgba(195,245,60,.1);border-color:var(--lime)}

/* --- botón terciario del header --- */
.btn-plain{background:transparent;color:rgba(232,237,248,.78);padding:0 12px}
.btn-plain:hover{color:var(--lime);background:rgba(195,245,60,.07)}
.btn-plain svg{width:15px;height:15px;flex:0 0 15px}
.nav-cta{gap:8px}

/* --- menú móvil --- */
.burger svg:last-child{display:none}
.burger[aria-expanded=true] svg:first-child{display:none}
.burger[aria-expanded=true] svg:last-child{display:block}
.nav-menu{
  display:none;
  border-top:1px solid rgba(255,255,255,.09);
  background:rgba(10,15,30,.97);backdrop-filter:blur(16px);
  padding:16px 28px 26px;
  max-height:calc(100vh - 74px);overflow-y:auto;
}
.nav-menu.open{display:block}
.nav-menu nav{display:flex;flex-direction:column}
.nav-menu nav a{
  padding:14px 0;font-size:16px;font-weight:500;color:var(--tx-d);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav-menu nav a:active{color:var(--lime)}
.nav-menu-cta{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.nav-menu-cta .btn{width:100%}
body.menu-open{overflow:hidden}

/* Entre 861 y 1120 px el header se aprieta: se recorta lo terciario
   antes de que los botones se encimen con los enlaces. */
@media (max-width:1180px){
  .nav-links{gap:22px;font-size:14px}
  .nav-dist{display:none}
}
@media (max-width:1080px){
  .nav-dist{display:none}
}
@media (max-width:960px){
  .nav-login{display:none}
}