/* ============================================================
   BIONIC PHARMA · Landing del lead magnet  /guia
   Design system "Bionic Pharma - Sistema de Ebooks" v2.0 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;}
}