/* ============================================================
   BIONIC PEPTIDES · Landing del lead magnet  /guia
   El design system de ebooks v2.0 de la marca, llevado a web.
   Ritmo del sistema: fondo claro por defecto, navy como respiro
   (héroe, revelación del mecanismo, formulario). Proporción 58/22/12/8.
   ============================================================ */

:root{
  /* 02 COLOR — paleta del sistema, sin alterar */
  --blue:#2266E7;  --cyan:#157FC8;  --navy:#1D293B;
  --slate:#475569; --grey:#7A879A;
  --blue-faint:#E7EBF7; --card:#FFF; --card-br:#E8EBF1;
  --rule:#EDEFF4; --rule-strong:#E3E7EF; --panel:#F7F8FB; --row-alt:#FAFBFD;

  --paper-a:linear-gradient(160deg,#F9FAFC 0%,#F3F4F8 55%,#EDEFF6 100%);
  --paper-b:linear-gradient(160deg,#FDFDFE 0%,#F5F6FA 60%,#EEF0F7 100%);
  --navy-radial:radial-gradient(120% 90% at 50% 20%,#1A4C8F 0%,#06214A 46%,#010614 100%);
  --navy-flat:#0A2044;

  --danger:#DC2626; --danger-bg:#FEF2F2; --danger-br:#FBD5D5;
  --ok:#16A34A;     --ok-bg:#F0FDF4;     --ok-br:#BBF7D0;  --ok-dot:#22C55E;
  --info:#157FC8;   --info-bg:#F0F9FF;   --info-br:#D0E5F7;

  --on-navy-eyebrow:#7FB3EA; --on-navy-body:#B4C6DE;
  --on-navy-strong:#E8EEF7;  --on-navy-num:#4A8FE0; --on-navy-dim:#8FA6C4;

  /* 04 RETÍCULA — radios y sombra literales del sistema */
  --r-lg:20px; --r-sm:14px; --r-pill:999px; --r-btn:12px; --r-photo:16px;
  --shadow:0 1px 2px rgba(29,41,59,.04), 0 12px 32px rgba(29,41,59,.05);
  --shadow-up:0 2px 6px rgba(29,41,59,.06), 0 24px 60px rgba(29,41,59,.10);
  --wrap:1120px;
  /* canaleta lateral: única fuente de verdad para secciones y raíles a sangre */
  --gut:22px;
}
@media(min-width:640px){ :root{--gut:28px;} }
@media(min-width:1000px){ :root{--gut:32px;} }

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:#F2F3F6; color:var(--navy);
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* height:auto es obligatorio: los <img> traen width/height para reservar espacio
   y sin esto el alto del atributo gana y deforma la imagen */
img{max-width:100%; height:auto; display:block;}
a{color:var(--blue); text-decoration:none;}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
ul{padding:0; list-style:none;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-ligatures:none;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ── secciones ─────────────────────────────────────────── */
section{padding:clamp(58px,8.5vw,104px) var(--gut); position:relative;}
.wrap{max-width:var(--wrap); margin:0 auto;}
.wrap--narrow{max-width:760px;}
.s-paper{background:var(--paper-a);}
.s-paper-b{background:var(--paper-b);}
.s-panel{background:var(--panel);}
.s-navy{background:var(--navy-radial); color:#fff;}
.s-navy-flat{background:var(--navy-flat); color:#fff;}
.s-navy .lede,.s-navy-flat .lede{color:var(--on-navy-body);}
.s-navy h2,.s-navy h3,.s-navy-flat h2{color:#fff;}
.s-navy strong,.s-navy-flat strong{color:#fff;}

/* ── 03 TIPOGRAFÍA ─────────────────────────────────────── */
.eyebrow{display:inline-flex; align-items:center; gap:11px; color:var(--blue);
  font-size:clamp(11px,1.4vw,12px); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; line-height:1.4;}
.eyebrow::before{content:''; width:24px; height:2px; background:currentColor; flex:0 0 auto;}
.eyebrow--navy{color:var(--on-navy-eyebrow);}
.eyebrow--center{justify-content:center;}

.h1{font-weight:800; font-size:clamp(33px,6.6vw,60px); line-height:1.05;
  letter-spacing:-.032em; text-wrap:balance;}
/* titular corto: puede respirar más grande sin romper la retícula */
.h1--short{font-size:clamp(38px,7.4vw,68px); line-height:1.02; letter-spacing:-.038em;}
.h2{font-weight:800; font-size:clamp(27px,4.4vw,44px); line-height:1.1;
  letter-spacing:-.026em; text-wrap:balance;}
.h3{font-weight:800; font-size:clamp(20px,2.6vw,27px); line-height:1.2;
  letter-spacing:-.02em; text-wrap:pretty;}
.h4{font-weight:700; font-size:clamp(17px,2vw,19px); line-height:1.35; letter-spacing:-.01em;}
.lede{font-size:clamp(16px,2.1vw,20px); line-height:1.6; color:var(--slate); text-wrap:pretty;}
.body{font-size:clamp(15.5px,1.8vw,17px); line-height:1.7; color:var(--slate); text-wrap:pretty;}
.small{font-size:14px; line-height:1.6; color:var(--grey);}
.tiny{font-size:12.5px; line-height:1.6; color:var(--grey);}
.blue{color:var(--blue);} .cyanw{color:var(--cyan);}
.on-navy-accent{color:var(--on-navy-eyebrow);}
strong{font-weight:700; color:var(--navy);}
.rule-blue{width:52px; height:3px; background:var(--blue); border-radius:2px;}
.rule-blue--navy{background:var(--on-navy-num);}
.center{text-align:center;}
.head{display:flex; flex-direction:column; gap:14px; align-items:flex-start;}
.head--center{align-items:center; text-align:center;}
.head + *{margin-top:clamp(28px,4.5vw,48px);}

/* ── 05 COMPONENTES ────────────────────────────────────── */
.chip{display:inline-flex; align-items:center; gap:8px;
  background:var(--blue-faint); color:var(--blue); padding:9px 17px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1;}
.chip::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor;}
.chip--navy{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  color:var(--on-navy-strong);}
.chip--navy::before{background:var(--on-navy-eyebrow);}
.chip--ok{background:var(--card); border:1px solid var(--card-br); color:var(--navy);
  font-weight:600; letter-spacing:0; text-transform:none; font-size:13px;}
.chip--ok::before{background:var(--ok-dot);}

.card{background:var(--card); border:1px solid var(--card-br);
  border-radius:var(--r-lg); padding:24px 22px;}
@media(min-width:720px){ .card{padding:clamp(24px,2.8vw,30px);} }
.card--shadow{box-shadow:var(--shadow);}
.card--navy{background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.14);}

.ico{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto;}
.ico-badge{width:48px; height:48px; border-radius:50%; background:var(--blue-faint);
  color:var(--blue); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.ico-badge .ico{width:23px; height:23px;}
.ico-badge--navy{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  color:var(--on-navy-eyebrow);}
.ico-badge--danger{background:var(--danger-bg); color:var(--danger);}
.ico-badge--ok{background:var(--ok-bg); color:var(--ok);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--blue); color:#fff; border:0; border-radius:var(--r-btn);
  padding:18px 30px; font:inherit; font-size:13.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  box-shadow:0 10px 28px rgba(34,102,231,.30); transition:transform .15s, box-shadow .15s;
  text-align:center; line-height:1.25;}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(34,102,231,.38);}
.btn:active{transform:translateY(0);}
.btn--block{width:100%;}
.btn--lg{padding:20px 34px; font-size:14px;}

.stat{background:var(--card); border:1px solid var(--card-br); border-radius:var(--r-sm);
  padding:20px 14px; text-align:center;}
.stat__v{font-family:'IBM Plex Mono',monospace; font-size:clamp(28px,3.6vw,38px);
  font-weight:500; line-height:1; color:var(--blue);}
.stat__k{font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey); margin-bottom:8px;}
.stat__u{font-size:13px; color:var(--grey); margin-top:6px;}
.stat--navy{background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.14);}
.stat--navy .stat__v{color:var(--on-navy-eyebrow);}
.stat--navy .stat__k,.stat--navy .stat__u{color:var(--on-navy-dim);}

.lockup{display:flex; align-items:center; gap:11px;}
.lockup img{height:30px; width:auto;}
.lockup--sm img{height:23px;}
/* logotipo en texto: Playfair Display reproduce la Didone del original.
   Sustituir por el wordmark definitivo de Bionic Peptides cuando exista. */
.wordmark{font-family:'Playfair Display',Georgia,'Times New Roman',serif; font-weight:500;
  font-size:21px; letter-spacing:.035em; line-height:1; white-space:nowrap;
  text-transform:uppercase; color:inherit;}
.lockup--sm .wordmark{font-size:16px;}

.grid{display:grid; gap:16px;}
@media(min-width:720px){ .grid{gap:18px;} }
@media(min-width:1000px){ .grid{gap:20px;} }
/* en móvil todo va a una columna: dos tarjetas a 375 px quedan ilegibles */
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
@media(min-width:640px){ .grid-4{grid-template-columns:repeat(2,1fr);} }
@media(min-width:720px){ .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1000px){ .grid-4{grid-template-columns:repeat(4,1fr);} }
/* las cifras sí se quedan en fila: son tres números cortos */
.grid-stats{grid-template-columns:repeat(3,1fr)!important; gap:10px;}
@media(min-width:640px){ .grid-stats{gap:16px;} }

/* ── S1 HÉROE ──────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; padding-top:clamp(30px,6vw,64px);
  padding-bottom:clamp(44px,7vw,88px);}
.hero__wm{position:absolute; top:-140px; right:-190px; width:520px; opacity:.06;
  pointer-events:none;}
.hero__bar{display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-bottom:clamp(34px,5vw,60px);}
.hero__grid{display:grid; gap:clamp(34px,5vw,56px); align-items:center;}
@media(min-width:900px){ .hero__grid{grid-template-columns:1.08fr .92fr;} }
.hero__copy{display:flex; flex-direction:column; gap:18px; align-items:flex-start;}
.hero__cta{display:flex; flex-direction:column; gap:11px; width:100%; max-width:400px;}
.hero__micro{display:flex; align-items:flex-start; gap:9px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-navy-eyebrow); line-height:1.5;}
.hero__micro .ico{margin-top:3px;}
.hero__trust{display:flex; gap:10px; align-items:flex-start; font-size:12.5px;
  line-height:1.55; color:var(--on-navy-dim); max-width:400px;}
.hero__trust .ico{width:15px; height:15px; margin-top:2px; color:var(--on-navy-eyebrow);}

/* maqueta del ebook */
.mock{perspective:1400px; display:flex; justify-content:center;}
.mock__inner{position:relative; width:min(68%,268px); transform:rotateY(-15deg) rotateX(4deg) rotate(-1.5deg);
  transform-style:preserve-3d;}
.mock__inner img{border-radius:5px;
  box-shadow:-24px 34px 70px rgba(0,0,0,.55), -6px 8px 18px rgba(0,0,0,.35);}
.mock__spine{position:absolute; top:0; bottom:0; left:-9px; width:9px; border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#04101F,#0E2748); transform:translateZ(-1px);}
.mock__badge{position:absolute; bottom:-16px; right:-14px; background:var(--blue); color:#fff;
  border-radius:var(--r-pill); padding:9px 16px; font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; box-shadow:0 10px 26px rgba(0,0,0,.4);}

/* ── S2 TARJETAS DE RECONOCIMIENTO ─────────────────────── */
.pain{display:flex; flex-direction:column; gap:14px;}
.pain__q{font-weight:800; font-size:clamp(16.5px,2vw,18.5px); line-height:1.35;
  letter-spacing:-.015em; color:var(--navy);}
.pain__a{font-size:14.5px; line-height:1.62; color:var(--slate);}
.closer{margin-top:clamp(30px,4.5vw,52px); text-align:center;
  font-weight:800; font-size:clamp(20px,3.1vw,31px); line-height:1.28;
  letter-spacing:-.022em; color:var(--navy); text-wrap:balance;}
.closer span{color:var(--blue);}

/* ── S4 LAS 4 CONSTANTES ───────────────────────────────── */
.pilar{display:flex; flex-direction:column; gap:15px;}
.pilar__top{display:flex; align-items:center; gap:14px;}
.pilar__n{font-family:'IBM Plex Mono',monospace; font-size:31px; font-weight:500;
  line-height:1; color:var(--blue); opacity:.32;}
.pilar__k{font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey);}
.pilar__t{font-weight:800; font-size:clamp(17px,2.1vw,19px); line-height:1.3;
  letter-spacing:-.015em; color:var(--blue);}
.pilar__cap{display:inline-flex; align-items:center; gap:7px; margin-top:2px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--grey);}

/* ── S5 CARRUSEL DE PREVIEWS ───────────────────────────── */
.rail{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px var(--gut) 24px; margin:0 calc(-1 * var(--gut)); scrollbar-width:thin;}
.rail::-webkit-scrollbar{height:7px;}
.rail::-webkit-scrollbar-track{background:var(--rule); border-radius:99px;}
.rail::-webkit-scrollbar-thumb{background:#C3CEE0; border-radius:99px;}
.prev{flex:0 0 auto; width:min(78vw,268px); scroll-snap-align:center;
  display:flex; flex-direction:column; gap:14px;}
.prev__img{border-radius:var(--r-photo); overflow:hidden; border:1px solid var(--card-br);
  box-shadow:var(--shadow-up); background:#fff;}
.prev__n{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--blue);
  letter-spacing:.08em;}
.prev__t{font-weight:800; font-size:16px; line-height:1.3; letter-spacing:-.015em; margin-top:5px;}
.prev__d{font-size:13.5px; line-height:1.58; color:var(--slate); margin-top:6px;}
.rail__hint{display:flex; align-items:center; gap:8px; margin-top:6px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey);}
@media(min-width:1000px){ .rail__hint{display:none;} }

.incl{display:grid; gap:12px; grid-template-columns:1fr;}
@media(min-width:720px){ .incl{grid-template-columns:repeat(2,1fr);} }
.incl__i{display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start;
  font-size:14.5px; line-height:1.55; color:var(--slate);}
.incl__i .ico{width:17px; height:17px; margin-top:3px; color:var(--ok);}

/* ── S7 PARA QUIÉN ─────────────────────────────────────── */
.fit{display:flex; flex-direction:column; gap:16px;}
.fit__h{display:flex; align-items:center; gap:12px;
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;}
.fit--yes .fit__h{color:var(--ok);}
.fit--no  .fit__h{color:var(--danger);}
.fit__l{display:flex; flex-direction:column; gap:11px;}
.fit__i{display:grid; grid-template-columns:19px 1fr; gap:12px; align-items:start;
  font-size:14.5px; line-height:1.58; color:var(--slate);}
.fit__i .ico{width:16px; height:16px; margin-top:3px;}
.fit--yes .fit__i .ico{color:var(--ok);} .fit--no .fit__i .ico{color:var(--danger);}
.fit--yes{background:var(--ok-bg); border-color:var(--ok-br);}
.fit--no{background:var(--card);}

/* ── S8 FORMULARIO ─────────────────────────────────────── */
.formwrap{position:relative; overflow:hidden;}
.formwrap__wm{position:absolute; bottom:-200px; left:-160px; width:560px; opacity:.055;
  pointer-events:none;}
.formcard{position:relative; background:rgba(255,255,255,.07);
  border:1px solid rgba(127,179,234,.34); border-radius:var(--r-lg);
  padding:26px 22px; backdrop-filter:blur(9px);
  box-shadow:0 24px 70px rgba(0,0,0,.36);}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:17px;}
.field label{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-navy-eyebrow);}
.field label i{font-style:normal; font-weight:600; letter-spacing:.04em; text-transform:none;
  color:var(--on-navy-dim); font-size:12px;}
.field input{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-btn); padding:15px 16px; color:#fff;
  font:inherit; font-size:16px; width:100%; transition:border-color .15s, background .15s;}
.field input::placeholder{color:#7E93B4;}
.field input:focus{outline:none; border-color:var(--on-navy-eyebrow);
  background:rgba(255,255,255,.13);}
.field input:user-invalid{border-color:#E4756B;}
.field__err{font-size:12.5px; color:#F0A9A2; display:none;}
.field.is-bad .field__err{display:block;}
.field.is-bad input{border-color:#E4756B;}

.consent{display:grid; grid-template-columns:22px 1fr; gap:13px; align-items:start;
  margin:20px 0 22px; font-size:12.5px; line-height:1.6; color:var(--on-navy-body);}
.consent input{appearance:none; width:20px; height:20px; margin:1px 0 0;
  border:1.5px solid rgba(255,255,255,.4); border-radius:5px;
  background:rgba(255,255,255,.07); cursor:pointer; position:relative; flex:0 0 auto;}
.consent input:checked{background:var(--blue); border-color:var(--blue);}
.consent input:checked::after{content:''; position:absolute; left:6px; top:2.5px;
  width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);}
.consent a{color:var(--on-navy-eyebrow); text-decoration:underline; text-underline-offset:2px;}
.consent.is-bad input{border-color:#E4756B;}
.formcard .btn{box-shadow:0 12px 32px rgba(34,102,231,.42);}
.form__micro{margin-top:13px; text-align:center; font-size:12.5px; color:var(--on-navy-dim);}
.done{display:none; flex-direction:column; align-items:center; gap:16px; text-align:center;
  padding:14px 0;}
.done.on{display:flex;} .formcard.sent form{display:none;}
.done__ico{width:62px; height:62px; border-radius:50%; background:rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.4); color:#4ADE80;
  display:flex; align-items:center; justify-content:center;}
.done__ico .ico{width:29px; height:29px; stroke-width:2.2;}

/* ── S9 FAQ ────────────────────────────────────────────── */
.faq{border-top:1px solid var(--rule-strong);}
.faq details{border-bottom:1px solid var(--rule-strong);}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-weight:800; font-size:clamp(16px,2vw,18px); letter-spacing:-.012em; color:var(--navy);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .ico{width:19px; height:19px; color:var(--blue); transition:transform .2s;}
.faq details[open] summary .ico{transform:rotate(45deg);}
.faq__a{padding:0 0 24px; font-size:15px; line-height:1.68; color:var(--slate); max-width:640px;}

/* ── S10 PIE ───────────────────────────────────────────── */
.foot{padding:clamp(44px,6vw,64px) var(--gut) clamp(34px,4vw,44px);}
.foot__legal{border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm);
  background:rgba(255,255,255,.045); padding:20px 22px;
  font-size:13px; line-height:1.65; color:var(--on-navy-body);}
.foot__bar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:16px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);}
.foot__links{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12.5px;
  color:var(--on-navy-dim);}
.foot__links a{color:var(--on-navy-dim);}
.foot__links a:hover{color:var(--on-navy-eyebrow);}

/* ── barra fija de CTA en móvil ─────────────────────────── */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(6,20,42,.94); backdrop-filter:blur(11px);
  border-top:1px solid rgba(127,179,234,.26); padding:11px 16px;
  transform:translateY(110%); transition:transform .28s ease;}
.dock.on{transform:none;}
.dock .btn{width:100%; padding:15px 20px; font-size:12.5px;}
@media(min-width:900px){ .dock{display:none;} }
body{padding-bottom:0;}
@media(max-width:899px){ body.docked{padding-bottom:76px;} }

/* ── móvil estrecho: el logotipo manda, el chip se retira ── */
@media(max-width:559px){
  .hero__bar .chip{display:none;}
  .hero__bar{margin-bottom:clamp(26px,6vw,38px);}
  .lockup img:first-child{height:26px;}
  .lockup img:last-child{height:11px;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important; animation:none!important;}
  .mock__inner{transform:none;}
}

/* ══════════════ GALERÍA VISUAL DE LA GUÍA ══════════════ */
.gal{position:relative; overflow:hidden; padding:0; margin-top:clamp(30px,4vw,44px);}
.gal__track{display:flex; gap:16px; width:max-content; animation:galSlide 70s linear infinite;}
.gal:hover .gal__track{animation-play-state:paused;}
.gal img{width:clamp(150px,20vw,196px); height:auto; flex:0 0 auto;
  border-radius:12px; border:1px solid var(--card-br); box-shadow:var(--shadow-up);
  background:#fff;}
@keyframes galSlide{ from{transform:translateX(0)} to{transform:translateX(calc(-50% - 8px))} }
.gal__mask{position:absolute; inset:0; pointer-events:none; z-index:2; background:
  linear-gradient(90deg,var(--panel) 0%,rgba(247,248,251,0) 6%,
                  rgba(247,248,251,0) 94%,var(--panel) 100%);}
@media(prefers-reduced-motion:reduce){
  .gal{overflow-x:auto;} .gal__track{animation:none; width:auto;}
}

/* ══════════════ TESTIMONIOS · carrusel en todos los tamaños ══════════════ */
.tst{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px var(--gut) 24px; margin:0 calc(-1 * var(--gut));
  scrollbar-width:thin; align-items:stretch;}
.tst::-webkit-scrollbar{height:7px;}
.tst::-webkit-scrollbar-track{background:var(--rule); border-radius:99px;}
.tst::-webkit-scrollbar-thumb{background:#C3CEE0; border-radius:99px;}
.tst > article{flex:0 0 auto; width:min(84vw,336px); scroll-snap-align:center;}
@media(min-width:640px){ .tst > article{width:330px;} }
@media(min-width:1000px){
  /* el rail se centra cuando el contenido no llena el ancho */
  .tst{scroll-padding-left:var(--gut);}
  .tst > article{width:344px; scroll-snap-align:start;}
}
.tst article{background:var(--card); border:1px solid var(--card-br);
  border-radius:var(--r-lg); padding:22px 22px 19px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:15px;}
.tst__mark{font-family:Georgia,'Times New Roman',serif; font-size:44px; line-height:.7;
  color:var(--blue); opacity:.22; height:22px;}
.tst__q{font-size:14.5px; line-height:1.65; color:var(--slate); text-wrap:pretty;}
.tst__who{display:flex; align-items:center; gap:12px; padding-top:15px; margin-top:auto;
  border-top:1px solid var(--rule);}
.tst__ini{width:36px; height:36px; border-radius:50%; background:var(--blue-faint);
  color:var(--blue); font-size:13px; font-weight:800; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.tst__n{font-size:14px; font-weight:700; color:var(--navy); line-height:1.3;}
.tst__c{font-size:12.5px; color:var(--grey); line-height:1.4;}

/* ══════════════ FOTOGRAFÍA EN SECCIÓN ══════════════ */
.shot{border-radius:var(--r-photo); overflow:hidden; border:1px solid var(--card-br);
  box-shadow:var(--shadow-up); background:var(--navy-flat);}
.shot img{width:100%; height:100%; object-fit:cover; display:block;}
.shot__cap{margin-top:10px; font-size:12.5px; line-height:1.55; color:var(--grey);}
.sec-photo{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.sec-photo img{width:100%; height:100%; object-fit:cover; opacity:.16;}
.sec-photo::after{content:''; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 50% 42%, rgba(2,14,34,.42) 0%, rgba(1,8,22,.93) 72%);}
.s-navy > .wrap{position:relative; z-index:1;}


/* ══════════════ BOTONES · animación ══════════════ */
.btn{position:relative; overflow:hidden; isolation:isolate;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),
             box-shadow .18s cubic-bezier(.2,.8,.3,1),
             background-color .18s ease;}
/* barrido de luz al pasar el cursor */
.btn::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%);
  transform:translateX(-120%); transition:transform .62s cubic-bezier(.3,.7,.3,1);}
.btn:hover::before, .btn:focus-visible::before{transform:translateX(120%);}
.btn:hover{transform:translateY(-2px); background:#1C59D4;
  box-shadow:0 16px 38px rgba(34,102,231,.42);}
/* respuesta al toque: en móvil no hay hover, el :active es toda la señal */
.btn:active{transform:translateY(0) scale(.985);
  box-shadow:0 6px 16px rgba(34,102,231,.34); transition-duration:.07s;}
.btn:focus-visible{outline:2px solid #9BC2F5; outline-offset:3px;}
/* la flecha acompaña */
.btn__arrow{width:15px; height:15px; flex:0 0 auto;
  transition:transform .22s cubic-bezier(.2,.8,.3,1);}
.btn:hover .btn__arrow{transform:translateX(4px);}

/* el CTA principal respira despacio para atraer la mirada, una sola vez cada 6 s */
.btn--pulse{animation:ctaPulse 6s ease-in-out 1.4s infinite;}
@keyframes ctaPulse{
  0%,88%,100%{box-shadow:0 10px 28px rgba(34,102,231,.30);}
  94%{box-shadow:0 10px 28px rgba(34,102,231,.30), 0 0 0 9px rgba(34,102,231,.10);}
}
.btn--pulse:hover{animation:none;}

/* el botón de la barra fija entra deslizándose */
.dock .btn{animation:none;}

@media(prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn__arrow{transition:none!important; animation:none!important;}
  .btn:hover{transform:none;}
}


/* ═══════════════════════════════════════════════════════════════════
   v2 · cambios a partir del análisis competitivo (agosto 2026)
   ═══════════════════════════════════════════════════════════════════ */

/* ── barra superior fija: la marca no desaparece tras el héroe ────── */
.topbar{position:sticky; top:0; z-index:55; background:rgba(6,20,42,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid rgba(127,179,234,.16);
  padding:11px var(--gut); color:#fff;}
.topbar__in{max-width:var(--wrap); margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:16px;}
.topbar .btn{padding:11px 20px; font-size:11.5px; box-shadow:none;}
@media(max-width:719px){ .topbar .btn{display:none;} }

/* ── CTA de bajo peso: enlace con flecha, sin fondo ───────────────── */
.ctal{display:inline-flex; align-items:center; gap:9px; background:none; border:0; padding:0;
  color:var(--blue); font-size:14.5px; font-weight:800; letter-spacing:-.005em;
  line-height:1.4; cursor:pointer; text-align:left;
  border-bottom:2px solid rgba(34,102,231,.24); padding-bottom:3px;
  transition:border-color .18s, gap .18s;}
.ctal .ico{width:15px; height:15px; transition:transform .22s cubic-bezier(.2,.8,.3,1);}
.ctal:hover{border-color:var(--blue);} .ctal:hover .ico{transform:translateX(4px);}
.ctal--navy{color:var(--on-navy-eyebrow); border-color:rgba(127,179,234,.34);}
.ctal--navy:hover{border-color:var(--on-navy-eyebrow);}
.ctal-wrap{display:flex; justify-content:center; margin-top:clamp(26px,3.6vw,38px);}

/* ── contraste del botón sobre navy ───────────────────────────────
   #2266E7 sobre el navy da ~3,2:1 y el H1 blanco ~16:1: el objeto más
   luminoso del héroe era el titular, no el botón. Esta variante lo corrige. */
.s-navy .btn, .btn--on-navy{background:#4B8DF5; color:#04142C;
  box-shadow:0 10px 30px rgba(75,141,245,.34);}
.s-navy .btn:hover, .btn--on-navy:hover{background:#69A2FA;
  box-shadow:0 16px 40px rgba(75,141,245,.44);}
.s-navy .btn::before, .btn--on-navy::before{
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);}
.s-navy .btn--pulse{animation:ctaPulseNavy 6s ease-in-out 1.4s infinite;}
@keyframes ctaPulseNavy{
  0%,88%,100%{box-shadow:0 10px 30px rgba(75,141,245,.34);}
  94%{box-shadow:0 10px 30px rgba(75,141,245,.34), 0 0 0 9px rgba(75,141,245,.14);}
}
.topbar .btn{background:#4B8DF5; color:#04142C;}

/* ── línea de cifras del héroe ─────────────────────────────────────── */
.hero__nums{display:flex; flex-wrap:wrap; gap:6px 16px; font-family:'IBM Plex Mono',monospace;
  font-size:12.5px; letter-spacing:.02em; color:var(--on-navy-eyebrow);}
.hero__nums b{font-weight:500; color:#fff;}
.hero__note{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.55;
  color:var(--on-navy-dim); max-width:400px;}
.hero__note .ico{width:14px; height:14px; margin-top:3px; color:var(--on-navy-eyebrow);}

/* ── franja de credencial: los tres ensayos, citados ──────────────── */
.cred{background:var(--card); border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong); padding:clamp(30px,4vw,44px) var(--gut);}
.cred__in{max-width:var(--wrap); margin:0 auto;}
.cred__lead{display:flex; gap:13px; align-items:flex-start; margin-bottom:20px;}
.cred__lead .ico{width:21px; height:21px; color:var(--blue); margin-top:3px;}
.cred__lead p{font-size:15px; line-height:1.6; color:var(--slate); max-width:660px;}
.cred__lead strong{color:var(--navy);}
.cites{display:grid; gap:10px; grid-template-columns:1fr;}
@media(min-width:840px){ .cites{grid-template-columns:repeat(3,1fr);} }
.cite{display:block; background:var(--panel); border:1px solid var(--card-br);
  border-radius:var(--r-sm); padding:15px 16px; transition:border-color .16s, background .16s;}
.cite:hover{border-color:var(--blue); background:#fff;}
.cite__j{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue); margin-bottom:7px;}
.cite__t{font-size:13.5px; line-height:1.45; font-weight:700; color:var(--navy);
  letter-spacing:-.012em;}
.cite__m{display:flex; align-items:center; gap:8px; margin-top:9px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--grey);}
.cite__m .ico{width:13px; height:13px; color:var(--blue);}
.cred__foot{margin-top:16px; font-size:12.5px; line-height:1.6; color:var(--grey);}
.cred__foot a{border-bottom:1px solid rgba(34,102,231,.3);}

/* ── CALCULADORA DE RECONSTITUCIÓN ────────────────────────────────
   Misma lógica y mismos presets que la calculadora de Bionic Peptides.
   Reconstruida acá para no arrastrar la navegación de la tienda. */
.calc{background:var(--card); border:1px solid var(--card-br); border-radius:var(--r-lg);
  box-shadow:var(--shadow-up); overflow:hidden;}
.calc__grid{display:grid; grid-template-columns:1fr;}
@media(min-width:900px){ .calc__grid{grid-template-columns:1.02fr .98fr;} }
.calc__in{padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:22px;}
.calc__out{background:var(--navy-flat); color:#fff; padding:clamp(22px,3vw,30px);
  display:flex; flex-direction:column; gap:20px;}
.cf__k{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey); margin-bottom:11px;}
.cf__k i{font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:12px;
  letter-spacing:0; text-transform:none; color:var(--blue);}
.pills{display:flex; flex-wrap:wrap; gap:7px;}
.pill{background:var(--panel); border:1px solid var(--card-br); border-radius:9px;
  padding:9px 13px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--slate);
  cursor:pointer; line-height:1; transition:.14s;}
.pill:hover{border-color:#BFD1EE; color:var(--navy);}
.pill[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff;}
.pill--free{padding:0; background:none; border:0;}
.pill--free input{width:88px; background:var(--panel); border:1px solid var(--card-br);
  border-radius:9px; padding:9px 11px; font-family:'IBM Plex Mono',monospace; font-size:13px;
  color:var(--navy); line-height:1;}
.pill--free input:focus{outline:none; border-color:var(--blue); background:#fff;}
.calc__res{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.res{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-sm); padding:15px 14px;}
.res--hero{grid-column:1 / -1; background:rgba(75,141,245,.14);
  border-color:rgba(127,179,234,.42);}
.res__k{font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-navy-dim); margin-bottom:7px;}
.res__v{font-family:'IBM Plex Mono',monospace; font-weight:500; line-height:1;
  font-size:clamp(26px,3.4vw,34px); color:var(--on-navy-eyebrow);}
.res--hero .res__v{font-size:clamp(34px,5vw,46px); color:#fff;}
.res__u{font-size:12px; color:var(--on-navy-dim); margin-top:6px;}
.syr{margin-top:2px;}
.syr__cap{margin-top:9px; font-size:12px; line-height:1.5; color:var(--on-navy-dim);
  text-align:center;}
.calc__form{border-top:1px solid var(--rule); padding:16px clamp(22px,3vw,30px);
  background:var(--row-alt); display:flex; flex-wrap:wrap; gap:6px 22px;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--grey);}
.calc__form b{font-weight:500; color:var(--blue);}
.calc__warn{display:flex; gap:11px; align-items:flex-start; margin-top:16px;
  background:var(--info-bg); border:1px solid var(--info-br); border-radius:var(--r-sm);
  padding:14px 16px; font-size:13px; line-height:1.6; color:var(--slate);}
.calc__warn .ico{width:17px; height:17px; color:var(--info); margin-top:2px;}
.calc__warn strong{color:var(--navy);}

/* ── lo que cambia cuando entendés ────────────────────────────────── */
.chg{display:flex; flex-direction:column; gap:12px;}
.chg__n{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--blue);
  letter-spacing:.08em;}
.chg__t{font-weight:800; font-size:clamp(16.5px,2vw,18.5px); line-height:1.3;
  letter-spacing:-.015em; color:var(--navy);}

/* ── lo que cuesta no entenderlo (en tiempo, no en dinero) ────────── */
.cost{display:grid; gap:12px; grid-template-columns:1fr;}
@media(min-width:720px){ .cost{grid-template-columns:repeat(2,1fr);} }
.cost__i{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  background:var(--card); border:1px solid var(--card-br); border-radius:var(--r-sm);
  padding:18px 18px;}
.cost__v{font-family:'IBM Plex Mono',monospace; font-size:clamp(19px,2.4vw,23px);
  font-weight:500; line-height:1.1; color:var(--danger); white-space:nowrap;}
.cost__d{font-size:14px; line-height:1.6; color:var(--slate);}
.cost__d b{color:var(--navy); font-weight:700;}

/* ── autoría y declaración de agenda ─────────────────────────────── */
.decl{background:var(--navy-flat); color:#fff; border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,34px); box-shadow:var(--shadow-up);}
.decl__k{display:inline-flex; align-items:center; gap:9px; font-size:10.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-navy-eyebrow);
  margin-bottom:14px;}
.decl__k .ico{width:15px; height:15px;}
.decl p{font-size:clamp(16px,2.1vw,19px); line-height:1.6; color:var(--on-navy-strong);
  text-wrap:pretty;}
.decl p + p{margin-top:13px; font-size:15px; color:var(--on-navy-body);}
.decl strong{color:#fff;}

/* ── sello de trato, dentro del formulario ───────────────────────── */
.deal{background:rgba(255,255,255,.055); border:1px solid rgba(127,179,234,.26);
  border-radius:var(--r-sm); padding:15px 16px; margin:2px 0 20px;}
.deal__k{display:flex; align-items:center; gap:9px; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-eyebrow);
  margin-bottom:11px;}
.deal__k .ico{width:14px; height:14px;}
.deal__l{display:flex; flex-direction:column; gap:8px;}
.deal__i{display:grid; grid-template-columns:16px 1fr; gap:11px; align-items:start;
  font-size:13px; line-height:1.5; color:var(--on-navy-body);}
.deal__i .ico{width:14px; height:14px; margin-top:3px; color:#4ADE80;}
.deal__i b{color:#fff; font-weight:700;}

/* ── formulario intermedio compacto ──────────────────────────────── */
.mini{background:var(--navy-flat); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-up); color:#fff;}
.mini__grid{display:grid; grid-template-columns:1fr; gap:0;}
@media(min-width:860px){ .mini__grid{grid-template-columns:1fr 1fr; align-items:center;} }
.mini__copy{padding:clamp(24px,3.4vw,34px); display:flex; flex-direction:column; gap:13px;
  align-items:flex-start;}
.mini__f{padding:clamp(24px,3.4vw,34px); background:rgba(255,255,255,.04);
  border-top:1px solid rgba(127,179,234,.18);}
@media(min-width:860px){ .mini__f{border-top:0; border-left:1px solid rgba(127,179,234,.18);} }
.mini .field{margin-bottom:13px;}
.mini .consent{margin:15px 0 17px; font-size:12px;}

/* ── lightbox de páginas de la guía ──────────────────────────────── */
.prev__img{position:relative; cursor:zoom-in;}
.prev__img::after{content:''; position:absolute; inset:0; background:rgba(6,20,42,0);
  transition:background .18s;}
.prev__img:hover::after{background:rgba(6,20,42,.10);}
.prev__zoom{position:absolute; right:9px; bottom:9px; z-index:2; width:31px; height:31px;
  border-radius:50%; background:rgba(255,255,255,.94); border:1px solid var(--card-br);
  color:var(--blue); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(29,41,59,.18); transition:transform .16s;}
.prev__img:hover .prev__zoom{transform:scale(1.08);}
.prev__zoom .ico{width:15px; height:15px;}
.lb{position:fixed; inset:0; z-index:120; border:0; padding:0; max-width:100%; max-height:100%;
  width:100%; height:100%; background:rgba(3,10,24,.94); color:#fff;}
.lb::backdrop{background:rgba(3,10,24,.9);}
.lb__in{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:16px;}
.lb img{max-width:min(94vw,470px); max-height:74vh; width:auto; border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.6); background:#fff;}
.lb__cap{font-size:13.5px; color:#C3D3E8; text-align:center; max-width:440px; line-height:1.5;}
.lb__n{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#7FB3EA;}
.lb__nav{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px;
  border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .16s;}
.lb__nav:hover{background:rgba(255,255,255,.2);}
.lb__nav .ico{width:19px; height:19px;}
.lb__prev{left:12px;} .lb__prev .ico{transform:rotate(180deg);}
.lb__next{right:12px;}
.lb__x{position:absolute; top:12px; right:12px; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;}
@media(max-width:559px){ .lb__nav{width:40px; height:40px;} .lb__prev{left:4px;} .lb__next{right:4px;} }

/* ── página de gracias ───────────────────────────────────────────── */
.gr{min-height:100vh; display:flex; flex-direction:column;}
.gr__main{flex:1; display:flex; align-items:center; padding:clamp(34px,6vw,72px) var(--gut);}
.dl{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;}
.dl__ico{width:66px; height:66px; border-radius:50%; background:rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.4); color:#4ADE80;
  display:flex; align-items:center; justify-content:center;}
.dl__ico .ico{width:31px; height:31px; stroke-width:2.2;}
.seg{display:grid; gap:10px; grid-template-columns:1fr; margin-top:6px; width:100%;}
@media(min-width:720px){ .seg{grid-template-columns:repeat(3,1fr);} }
.seg__b{background:rgba(255,255,255,.06); border:1px solid rgba(127,179,234,.28);
  border-radius:var(--r-sm); padding:17px 16px; color:#fff; cursor:pointer; text-align:left;
  font:inherit; transition:.16s; display:flex; flex-direction:column; gap:6px;}
.seg__b:hover{background:rgba(255,255,255,.11); border-color:var(--on-navy-eyebrow);}
.seg__b[aria-pressed="true"]{background:rgba(75,141,245,.2); border-color:#4B8DF5;}
.seg__t{font-size:14.5px; font-weight:800; letter-spacing:-.01em;}
.seg__d{font-size:12.5px; line-height:1.5; color:var(--on-navy-dim);}

/* ── páginas legales ─────────────────────────────────────────────── */
.doc{max-width:760px; margin:0 auto; padding:clamp(34px,5vw,64px) var(--gut) clamp(50px,7vw,90px);}
.doc h2{margin-top:clamp(30px,4vw,44px); font-weight:800;
  font-size:clamp(19px,2.4vw,23px); line-height:1.25; letter-spacing:-.02em;}
.doc h2:first-of-type{margin-top:clamp(24px,3vw,32px);}
.doc p, .doc li{font-size:15.5px; line-height:1.72; color:var(--slate); margin-top:12px;}
.doc ul{margin-top:6px;}
.doc li{padding-left:20px; position:relative;}
.doc li::before{content:''; position:absolute; left:4px; top:11px; width:5px; height:5px;
  border-radius:50%; background:var(--blue);}
.doc strong{color:var(--navy);}
.doc__meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--grey);
  margin-top:10px;}
.doc__back{display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  font-size:13px; font-weight:700; color:var(--blue);}
.doc__back .ico{width:15px; height:15px; transform:rotate(180deg);}

@media(prefers-reduced-motion:reduce){
  .ctal,.ctal .ico,.pill,.cite,.prev__zoom{transition:none!important;}
}

/* el header fijo tapaba el inicio de la sección al saltar por ancla */
[id]{scroll-margin-top:74px;}
.topbar + section, .topbar + .cred{scroll-margin-top:0;}

/* ═══════════════════════════════════════════════════════════════════
   v3 · captación con doble opt-in contra BAD MAIL
   ═══════════════════════════════════════════════════════════════════ */

/* Trampa antibots. Fuera de pantalla, NO con display:none — algunos bots
   detectan eso y dejan el campo vacío a propósito. overflow:hidden evita
   que empuje el ancho del documento. */
.trampa{position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden; pointer-events:none;}

/* Aviso general del formulario: lo que no es error de un campo concreto
   (correo ya suscrito, límite de envíos, sin conexión). El texto lo
   redacta el servidor. */
.form__aviso{display:none; margin-top:14px; border-radius:var(--r-sm);
  padding:13px 15px; font-size:13.5px; line-height:1.6;
  background:rgba(220,38,38,.14); border:1px solid rgba(240,169,162,.45);
  color:#F5C2BC;}
.form__aviso.on{display:block;}
.s-paper .form__aviso, .s-paper-b .form__aviso, .s-panel .form__aviso{
  background:var(--danger-bg); border-color:var(--danger-br); color:#B91C1C;}

/* El botón cambia a «Enviando…» mientras espera: sin esto la gente
   con conexión lenta lo pulsa dos veces. */
.leadform button[disabled]{opacity:.6; cursor:default; transform:none;}
.leadform button[disabled]:hover{transform:none; box-shadow:0 10px 28px rgba(34,102,231,.30);}

/* Nota del doble opt-in: es la única línea del formulario que la gente
   tiene que leer sí o sí, así que no va en gris de 12 px. */
.form__micro{color:var(--on-navy-body); font-size:13px; line-height:1.6;}

/* ── pasos del doble opt-in en la página de gracias ───────────────── */
.pasos{display:flex; flex-direction:column; gap:12px; width:100%;
  margin-top:clamp(20px,3vw,28px); text-align:left;}
.paso{display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start;
  background:rgba(255,255,255,.055); border:1px solid rgba(127,179,234,.22);
  border-radius:var(--r-sm); padding:15px 16px;}
.paso__n{width:30px; height:30px; border-radius:50%; background:rgba(75,141,245,.22);
  border:1px solid rgba(127,179,234,.45); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  display:flex; align-items:center; justify-content:center;}
.paso__t{font-size:15px; font-weight:700; color:#fff; line-height:1.35;}
.paso__d{font-size:13px; line-height:1.6; color:var(--on-navy-body); margin-top:5px;}
.paso__d .mono{font-size:12.5px; color:var(--on-navy-eyebrow); word-break:break-all;}

/* ── banner de consentimiento ──────────────────────────────────────────
   Nada de medición carga antes de que la persona decida. El botón de
   rechazar tiene el mismo peso visual que el de aceptar: un rechazo
   escondido invalida el consentimiento y con él toda la política. */
.consent-bar{position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:rgba(6,20,42,.97); backdrop-filter:blur(12px);
  border-top:1px solid rgba(127,179,234,.3); padding:16px var(--gut);
  transform:translateY(110%); transition:transform .3s ease;}
.consent-bar.on{transform:none;}
.consent-bar__in{max-width:var(--wrap); margin:0 auto; display:flex;
  flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 22px;}
.consent-bar__t{font-size:13px; line-height:1.6; color:var(--on-navy-body);
  max-width:640px; flex:1 1 300px;}
.consent-bar__t a{color:var(--on-navy-eyebrow); text-decoration:underline;
  text-underline-offset:2px;}
.consent-bar__b{display:flex; gap:10px; flex:0 0 auto;}
.consent-bar .btn{padding:13px 22px; font-size:12px; box-shadow:none;}
.btn--ghost{background:transparent; color:var(--on-navy-strong);
  border:1px solid rgba(127,179,234,.42); box-shadow:none;}
.btn--ghost:hover{background:rgba(255,255,255,.08); color:#fff; box-shadow:none;
  transform:translateY(-1px);}
@media(max-width:559px){
  .consent-bar__b{width:100%;}
  .consent-bar .btn{flex:1;}
  /* no puede tapar la barra fija de CTA */
  body.docked .dock{bottom:auto;}
}