@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,SOFT,WONK,wght@9..144,0..100,0..1,400..900&family=Karla:wght@400..800&display=swap');

/* ============================================================
   BIBLIA EN STICKERS — sistema de diseño
   Metáfora: una Biblia encuadernada en cuero. Bandas oscuras
   (cubierta) alternando con superficies claras (página).
   Paleta fija por el brief de David — ver docs/superpowers/specs.
   ============================================================ */

:root{
  /* Cuero / cubierta */
  --leather:      #63301F;
  --leather-mid:  #7A3F28;
  --espresso:     #4A3328;
  --espresso-ink: #2A1810;

  /* Acentos */
  --clay:         #B96842;
  --gold:         #D09A3B;
  --gold-lit:     #E3B45C;

  /* Acento de acción CTA — Ocre Dorado Cálido que armoniza con el sitio */
  --cta:          #D09A3B;
  --cta-hover:    #E3B45C;
  --cta-ink:      #2A1810;

  /* Papel */
  --parchment:    #F4EAD6;
  --ivory:        #FFF8ED;

  /* Botánicos */
  --olive:        #747B3C;
  --rose:         #C98982;

  /* Texto */
  --ink:          #2A1810;
  --ink-soft:     #6B5443;
  --on-dark:      #F4EAD6;
  --on-dark-soft: #C8AE93;

  --maxw: 1140px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

  /* Grano de papel — SVG inline, sin peticiones externas */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:'Karla', system-ui, -apple-system, sans-serif;
  font-size:1.02rem;
  line-height:1.68;
  color:var(--ink);
  background:var(--ivory);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
/* height:auto evita que el atributo height del HTML deforme la imagen.
   pointer-events:none y user-drag impiden descargar o arrastrar imágenes. */
img{
  max-width:100%; height:auto; display:block;
  pointer-events:none;
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  -moz-user-drag:none;
  -o-user-drag:none;
  user-drag:none;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; cursor:pointer;}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-variation-settings:'SOFT' 40, 'WONK' 1;
  line-height:1.03;
  letter-spacing:-0.025em;
  color:var(--leather);
  font-weight:700;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem, 6.6vw, 4.6rem); letter-spacing:-0.035em; line-height:0.99;}
h2{font-size:clamp(1.85rem, 4.1vw, 3rem);}
h3{font-size:1.22rem; letter-spacing:-0.015em;}
p{color:var(--ink-soft); text-wrap:pretty;}

.eyebrow{
  display:inline-block;
  font-family:'Karla', sans-serif;
  font-size:.7rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--clay);
}
.lede{font-size:1.12rem; color:var(--ink-soft); max-width:56ch;}

/* ---------- Primitivas de layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 22px;}

/* Un único ritmo vertical. Los modificadores SOLO cambian color. */
.band{padding:92px 0; position:relative;}
.band--page{background:var(--ivory);}
.band--parchment{background:var(--parchment);}
.band--dark{background:var(--leather); color:var(--on-dark);}
.band--dark h1,.band--dark h2,.band--dark h3{color:var(--parchment);}
.band--dark p{color:var(--on-dark-soft);}
.band--dark .eyebrow{color:var(--gold);}
.band--ink{background:var(--espresso-ink); color:var(--on-dark);}
.band--ink h2,.band--ink h3{color:var(--parchment);}
.band--ink p{color:var(--on-dark-soft);}
.band--ink .eyebrow{color:var(--gold);}

.band--grain::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); opacity:.5; mix-blend-mode:multiply;
}
.band--dark.band--grain::before{mix-blend-mode:overlay; opacity:.22;}
.band--ink.band--grain::before{mix-blend-mode:overlay; opacity:.2;}
.band > .wrap, .band > .wrap-narrow{position:relative; z-index:1;}

/* Encabezado de sección: alineado a la izquierda por defecto (editorial),
   centrado sólo donde se pide explícitamente. */
.head{max-width:60ch; margin-bottom:44px;}
.head .eyebrow{margin-bottom:14px;}
.head h2{margin-bottom:14px;}
.head--center{margin-left:auto; margin-right:auto; text-align:center;}

/* Filete editorial que acompaña al eyebrow */
.rule{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.rule::after{content:""; height:1px; flex:1; background:currentColor; opacity:.22;}
.rule .eyebrow{margin-bottom:0;}

/* ---------- Iconos ---------- */
.ic{width:22px; height:22px; flex:none; stroke:currentColor; fill:none;
    stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.ic--lg{width:30px; height:30px; stroke-width:1.45;}
.ic--sm{width:17px; height:17px;}
.sprite{position:absolute; width:0; height:0; overflow:hidden;}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Karla',sans-serif; font-weight:800; font-size:1.02rem;
  letter-spacing:-.01em; padding:17px 34px; border:none; border-radius:999px;
  background:linear-gradient(135deg, #D09A3B 0%, #E3B45C 100%); color:var(--cta-ink);
  box-shadow:0 12px 28px -10px rgba(208,154,59,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, background .25s ease;
  position:relative; overflow:hidden;
}
.btn:hover{background:linear-gradient(135deg, #E3B45C 0%, #D09A3B 100%); transform:translateY(-2px); box-shadow:0 18px 36px -10px rgba(208,154,59,.75), inset 0 1px 0 rgba(255,255,255,.5);}
.btn:active{transform:translateY(0);}
.btn--ghost{background:transparent; color:var(--leather); border:1.5px solid rgba(208,154,59,.6); box-shadow:none;}
.btn--ghost:hover{background:rgba(208,154,59,.12); border-color:var(--cta);}
.band--dark .btn--ghost, .band--ink .btn--ghost{color:var(--parchment); border-color:rgba(244,234,214,.32);}
.band--dark .btn--ghost:hover, .band--ink .btn--ghost:hover{background:rgba(244,234,214,.08);}
.btn--block{width:100%;}
.btn--shimmer::after{
  content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg); animation:shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer{0%{left:-70%}55%{left:135%}100%{left:135%}}

.cta-note{display:block; font-size:.82rem; color:var(--ink-soft); margin-top:12px;}
.band--dark .cta-note, .band--ink .cta-note{color:var(--on-dark-soft);}

/* Fila de confianza bajo los CTA */
.trust-row{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin-top:20px;}
.trust-row span{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:var(--on-dark-soft);}
.trust-row .ic{color:var(--gold);}
.band--page .trust-row span, .band--parchment .trust-row span{color:var(--ink-soft);}
.band--page .trust-row .ic, .band--parchment .trust-row .ic{color:var(--clay);}

/* ============================================================
   1. MARQUEE
   ============================================================ */
.marquee{background:var(--espresso-ink); color:var(--parchment); overflow:hidden; padding:11px 0;}
.marquee-track{display:flex; width:max-content; animation:marquee 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:0 26px; font-size:.79rem; font-weight:600; letter-spacing:.02em;
  border-right:1px solid rgba(244,234,214,.16);
}
.marquee-item .ic{width:15px; height:15px; color:var(--gold);}
.marquee-item b{color:var(--gold); font-weight:800;}

/* ============================================================
   2. HERO — cubierta de cuero (fondo #63301F por brief)
   ============================================================ */
.hero{
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(208,154,59,.20), transparent 62%),
    radial-gradient(620px 420px at 4% 106%, rgba(201,137,130,.16), transparent 64%),
    linear-gradient(168deg, var(--leather) 0%, var(--leather-mid) 52%, var(--espresso) 100%);
  color:var(--on-dark);
  padding:56px 0 76px;
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); opacity:.24; mix-blend-mode:overlay;
}
.hero .wrap{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center;}
.hero h1{color:var(--parchment); margin:16px 0 20px;}
.hero h1 em{
  font-style:normal; color:var(--gold);
  font-variation-settings:'SOFT' 60, 'WONK' 1;
}
.hero .lede{color:var(--on-dark-soft); font-size:1.14rem; margin-bottom:30px;}
.hero .lede b{color:var(--parchment); font-weight:700;}
.hero .eyebrow{color:var(--gold);}

.hero-price{display:flex; align-items:baseline; gap:10px; margin-top:20px; flex-wrap:wrap;}
.hero-price .now{font-family:'Fraunces',serif; font-size:2.1rem; font-weight:800; color:var(--parchment); letter-spacing:-.03em;}
.hero-price .was{font-size:1rem; color:var(--on-dark-soft); text-decoration:line-through;}
.hero-price .tag{font-size:.78rem; font-weight:700; color:var(--espresso-ink); background:var(--gold); padding:4px 11px; border-radius:999px;}

/* Foto del hero con pestañas de Biblia al borde */
.hero-figure{position:relative;}
.hero-figure img{
  border-radius:var(--r-lg);
  box-shadow:0 40px 80px -28px rgba(0,0,0,.65), 0 0 0 1px rgba(244,234,214,.1);
}
.hero-tabs{
  position:absolute; top:26px; right:-13px; display:grid; gap:7px; z-index:2;
}
.hero-tabs span{
  font-family:'Karla',sans-serif; font-size:.6rem; font-weight:800; letter-spacing:.09em;
  background:var(--parchment); color:var(--leather);
  padding:5px 11px 5px 9px; border-radius:0 6px 6px 0;
  box-shadow:0 5px 14px -5px rgba(0,0,0,.55);
}
/* Dorado = los libros que casi nadie ilustra. El color dice el argumento. */
.hero-tabs span.rare{background:var(--gold); color:var(--espresso-ink);}
.hero-note{
  position:absolute; left:-20px; bottom:22px; z-index:2;
  background:var(--ivory); color:var(--leather); border-radius:12px;
  padding:11px 15px; box-shadow:0 14px 32px -12px rgba(0,0,0,.6);
  font-size:.79rem; font-weight:700; display:flex; align-items:center; gap:9px;
}
.hero-note .ic{color:var(--olive);}

/* ============================================================
   3. EL ÍNDICE DE LOS 66 — elemento firma
   ============================================================ */
.index-testament + .index-testament{margin-top:38px;}
.testament-head{
  display:flex; align-items:baseline; gap:14px; margin-bottom:18px;
  padding-bottom:11px; border-bottom:1px solid rgba(244,234,214,.18);
}
.testament-head h3{
  font-size:1.05rem; color:var(--parchment); letter-spacing:.02em;
  font-variation-settings:'SOFT' 30, 'WONK' 0;
}
.testament-head .count{
  font-family:'Karla',sans-serif; font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.testament-head .count::before{content:"— ";}

.book-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); gap:7px;}
.book{
  display:flex; align-items:center; gap:9px; min-width:0;
  padding:9px 12px; border-radius:7px;
  background:rgba(244,234,214,.055);
  border:1px solid rgba(244,234,214,.11);
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.book:hover{background:rgba(208,154,59,.16); border-color:rgba(208,154,59,.5); transform:translateY(-2px);}
.book .abbr{
  font-family:'Karla',sans-serif; font-size:.62rem; font-weight:800;
  letter-spacing:.06em; color:var(--gold);
  background:rgba(208,154,59,.14); border-radius:4px;
  padding:3px 6px; min-width:31px; text-align:center; flex:none;
}
/* Los nombres largos (1 Tesalonicenses) se encogen en vez de recortarse */
.book .name{
  font-size:.83rem; font-weight:600; color:var(--parchment); letter-spacing:-.015em;
  min-width:0; overflow-wrap:anywhere; line-height:1.25;
}
.book .name[data-long]{font-size:.75rem;}
/* Los libros que nadie ilustra — el argumento hecho diseño */
.book--rare{background:rgba(208,154,59,.1); border-color:rgba(208,154,59,.34);}
.book--rare .name{color:var(--gold-lit);}

.index-foot{
  margin-top:34px; padding-top:26px; border-top:1px solid rgba(244,234,214,.18);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.index-foot p{margin:0; max-width:46ch;}
.index-foot p b{color:var(--gold-lit); font-weight:700;}

/* ============================================================
   Carruseles de producto
   ============================================================ */
.rail{display:flex; gap:16px; overflow-x:auto; padding:4px 2px 18px; scroll-snap-type:x mandatory;}
.rail::-webkit-scrollbar{height:5px;}
.rail::-webkit-scrollbar-track{background:rgba(99,48,31,.08); border-radius:99px;}
.rail::-webkit-scrollbar-thumb{background:var(--clay); border-radius:99px;}
.rail > *{flex:0 0 auto; scroll-snap-align:start;}
.rail img{width:290px; height:218px; object-fit:cover; border-radius:var(--r);
  box-shadow:0 16px 34px -18px rgba(42,24,16,.5);}

.plate{
  width:290px; height:218px; border-radius:var(--r);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(150deg, rgba(99,48,31,.055), rgba(201,137,130,.11));
  border:1px dashed rgba(99,48,31,.3); color:var(--ink-soft);
  font-size:.79rem; font-weight:700; text-align:center; padding:16px;
}
.plate .ic{color:var(--clay);}
.band--dark .plate, .band--ink .plate{
  background:linear-gradient(150deg, rgba(244,234,214,.05), rgba(208,154,59,.09));
  border-color:rgba(244,234,214,.24); color:var(--on-dark-soft);
}
.band--dark .plate .ic, .band--ink .plate .ic{color:var(--gold);}

/* Foto de uso real (sección "en la vida real") */
.context-figure{position:relative;}
.context-figure img{
  border-radius:var(--r-lg); width:100%; aspect-ratio:4/3; object-fit:cover;
  box-shadow:0 34px 70px -30px rgba(42,24,16,.6), 0 0 0 1px rgba(99,48,31,.09);
}

/* ============================================================
   Tarjetas de uso
   ============================================================ */
.use-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.use{
  background:var(--ivory); border-radius:var(--r); padding:26px 22px;
  border:1px solid rgba(99,48,31,.1);
  box-shadow:0 3px 10px -6px rgba(42,24,16,.16);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.use:hover{transform:translateY(-5px); box-shadow:0 22px 42px -22px rgba(42,24,16,.4); border-color:rgba(185,104,66,.4);}
.use .badge-ic{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:rgba(185,104,66,.11); color:var(--clay); margin-bottom:15px;
}
.use:nth-child(2) .badge-ic{background:rgba(116,123,60,.13); color:var(--olive);}
.use:nth-child(3) .badge-ic{background:rgba(208,154,59,.16); color:#A8762A;}
.use:nth-child(4) .badge-ic{background:rgba(201,137,130,.18); color:#A9615A;}
.use h3{font-size:1.02rem; margin-bottom:7px;}
.use p{font-size:.88rem;}

/* ============================================================
   Pasos (secuencia real → numeración legítima)
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.step{position:relative; padding-top:8px;}
.step .n{
  font-family:'Fraunces',serif; font-size:3.2rem; font-weight:800;
  color:var(--clay); opacity:.34; line-height:.8; letter-spacing:-.05em;
  display:block; margin-bottom:12px;
}
.step h3{margin-bottom:8px;}
.step p{font-size:.92rem;}
.step::after{
  content:""; position:absolute; top:20px; right:-14px; width:1px; height:76%;
  background:linear-gradient(180deg, transparent, rgba(99,48,31,.18), transparent);
}
.steps .step:last-child::after{display:none;}

/* ============================================================
   Agitación (PAS)
   ============================================================ */
.pain-list{display:grid; gap:2px; margin-top:6px;}
.pain{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 4px; border-bottom:1px solid rgba(244,234,214,.13);
}
.pain:first-child{border-top:1px solid rgba(244,234,214,.13);}
.pain .ic{color:var(--rose); margin-top:3px;}
.pain p{color:var(--on-dark-soft); font-size:1.01rem; margin:0;}
.pain p b{color:var(--parchment); font-weight:700;}
.pain-close{
  margin-top:34px; font-family:'Fraunces',serif; font-size:clamp(1.3rem,2.6vw,1.75rem);
  font-weight:600; color:var(--parchment); letter-spacing:-.02em; line-height:1.28;
  max-width:34ch;
}
.pain-close b{color:var(--gold-lit); font-weight:700;}

/* ============================================================
   Loop banner
   ============================================================ */
.loop{background:var(--clay); color:#fff; padding:22px 0; text-align:center;}
.loop p{color:rgba(255,255,255,.94); font-weight:600; margin:0;
  display:inline-flex; align-items:center; gap:11px; flex-wrap:wrap; justify-content:center;}
.loop .ic{color:rgba(255,255,255,.85);}

/* ============================================================
   Beneficios
   ============================================================ */
.benefit-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px 44px;}
.benefit{display:flex; gap:16px; align-items:flex-start; padding:22px 0; border-bottom:1px solid rgba(99,48,31,.11);}
.benefit .ic{color:var(--clay); margin-top:3px;}
.benefit h3{font-size:1rem; margin-bottom:4px; letter-spacing:-.01em;}
.benefit p{font-size:.89rem; margin:0;}

/* ============================================================
   Testimonios
   ============================================================ */
.testi-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start;}
.chat{
  background:#E6F3DC; border-radius:var(--r); padding:22px;
  border:1px solid rgba(116,123,60,.22);
}
.chat-head{display:flex; align-items:center; gap:9px; margin-bottom:15px; color:var(--olive); font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
.bubble{
  background:#fff; border-radius:13px 13px 13px 4px; padding:13px 15px; margin-bottom:9px;
  font-size:.93rem; color:var(--ink); box-shadow:0 2px 5px rgba(42,24,16,.07); max-width:92%;
}
.bubble:last-child{margin-bottom:0;}
.bubble time{display:block; font-size:.68rem; color:var(--ink-soft); margin-top:5px; opacity:.7;}
.ugc{background:var(--ivory); border-radius:var(--r); overflow:hidden; border:1px solid rgba(99,48,31,.1); box-shadow:0 18px 40px -24px rgba(42,24,16,.42);}
.ugc img{width:100%; height:290px; object-fit:cover;}
.ugc-body{padding:20px 22px 22px;}
.stars{display:flex; gap:2px; color:var(--gold); margin-bottom:10px;}
.stars .ic{width:15px; height:15px; fill:currentColor; stroke:none;}
.ugc-body p{font-size:.95rem; color:var(--ink); margin-bottom:12px;}
.who{font-size:.83rem; font-weight:700; color:var(--leather);}
.who span{display:block; font-weight:500; color:var(--ink-soft); font-size:.78rem;}
.disclaimer{font-size:.79rem; color:var(--ink-soft); opacity:.85; margin-top:22px;}
.band--dark .disclaimer, .band--ink .disclaimer{color:var(--on-dark-soft);}

/* ============================================================
   Bonos
   ============================================================ */
.bonus-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.bonus{
  position:relative; background:var(--ivory); border-radius:var(--r);
  padding:28px 24px 26px; border:1px solid rgba(208,154,59,.4);
  display:flex; flex-direction:column;
}
.bonus .kicker{
  font-family:'Karla',sans-serif; font-size:.66rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--clay); margin-bottom:11px; display:block;
}
.bonus h3{font-size:1.14rem; margin-bottom:8px;}
.bonus p{font-size:.88rem; flex:1;}
.bonus .worth{
  margin-top:16px; padding-top:14px; border-top:1px dashed rgba(99,48,31,.22);
  font-size:.85rem; font-weight:700; color:var(--leather);
}
.bonus .worth s{color:var(--ink-soft); font-weight:500; opacity:.75;}
.bonus .worth em{font-style:normal; color:var(--olive); font-weight:800;}
.bonus .ic{color:var(--gold); margin-bottom:14px;}
.bonus-total{
  margin-top:26px; text-align:center; font-size:.98rem; color:var(--ink-soft);
}
.bonus-total b{font-family:'Fraunces',serif; font-size:1.3rem; color:var(--leather); font-weight:700;}

/* ============================================================
   Calculadora
   ============================================================ */
.calc{
  background:var(--ivory); border-radius:var(--r-lg); padding:34px;
  border:1px solid rgba(99,48,31,.12); max-width:660px; margin:0 auto;
  box-shadow:0 20px 50px -30px rgba(42,24,16,.4);
}
.calc-label{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;}
.calc-label span:first-child{font-weight:700; font-size:.92rem; color:var(--leather);}
.calc-label output{font-family:'Fraunces',serif; font-size:1.7rem; font-weight:800; color:var(--clay); letter-spacing:-.03em;}
input[type=range]{
  width:100%; height:5px; border-radius:99px; -webkit-appearance:none; appearance:none;
  background:linear-gradient(90deg, var(--clay) 0%, var(--clay) var(--pct,30%), rgba(99,48,31,.15) var(--pct,30%), rgba(99,48,31,.15) 100%);
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--gold); border:3px solid var(--ivory);
  box-shadow:0 3px 10px rgba(42,24,16,.35); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--gold);
  border:3px solid var(--ivory); box-shadow:0 3px 10px rgba(42,24,16,.35); cursor:pointer;
}
.calc-out{
  margin-top:26px; display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center;
}
.calc-cell{text-align:center; padding:18px 14px; border-radius:var(--r); background:rgba(99,48,31,.05);}
.calc-cell.win{background:rgba(116,123,60,.11); border:1px solid rgba(116,123,60,.3);}
.calc-cell .k{font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:7px;}
.calc-cell .v{font-family:'Fraunces',serif; font-size:1.95rem; font-weight:800; color:var(--leather); letter-spacing:-.03em; display:block;}
.calc-cell.win .v{color:var(--olive);}
.calc-cell small{display:block; font-size:.74rem; color:var(--ink-soft); margin-top:5px;}
.calc-vs{font-family:'Fraunces',serif; font-size:.9rem; font-weight:700; color:var(--clay); opacity:.65;}
.calc-note{text-align:center; font-size:.8rem; color:var(--ink-soft); margin-top:18px; opacity:.85;}

/* ============================================================
   Oferta
   ============================================================ */
.offer{
  position:relative; max-width:470px; margin:0 auto;
  background:linear-gradient(165deg, var(--leather-mid) 0%, var(--leather) 55%, var(--espresso) 100%);
  border-radius:var(--r-lg); padding:44px 36px 36px; color:var(--on-dark);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.75), 0 0 0 1px rgba(208,154,59,.3);
  overflow:hidden;
}
.offer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(300px 200px at 88% -6%, rgba(208,154,59,.3), transparent 68%),
    radial-gradient(260px 200px at 4% 104%, rgba(201,137,130,.22), transparent 70%);
}
.offer > *{position:relative; z-index:1;}
.offer-flag{
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
  background:var(--gold); color:var(--espresso-ink);
  font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 20px; border-radius:0 0 10px 10px; white-space:nowrap;
}
/* Portada diseñada en vez de mockup fotográfico: dice lo que se compra
   (66 / 150+ / +90) y no depende de una foto que aún no existe. */
.offer-plate{
  width:230px; margin:4px auto 22px; padding:26px 20px 22px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px;
  background:linear-gradient(168deg, rgba(244,234,214,.1), rgba(42,24,16,.28));
  border:1px solid rgba(208,154,59,.55); border-radius:6px;
  box-shadow:inset 0 0 0 3px rgba(208,154,59,.16), 0 20px 44px -18px rgba(0,0,0,.7);
}
.op-kicker{
  font-size:.58rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:9px;
}
.op-title{
  font-family:'Fraunces',serif; font-size:1.6rem; font-weight:700; line-height:1.06;
  letter-spacing:-.03em; color:var(--parchment);
  font-variation-settings:'SOFT' 50, 'WONK' 1;
}
.op-orn{width:56px; height:9px; color:var(--gold); margin:12px 0 11px; opacity:.85;}
.op-stat{font-size:.73rem; color:var(--on-dark-soft); letter-spacing:.01em;}
.op-stat b{color:var(--gold-lit); font-weight:800;}
.offer h3{font-size:1.32rem; color:var(--parchment); text-align:center; margin-bottom:4px;}
.offer .sub{text-align:center; font-size:.86rem; color:var(--on-dark-soft); margin-bottom:20px;}
.price{text-align:center; margin-bottom:6px;}
.price .was{font-size:1.02rem; color:var(--on-dark-soft); text-decoration:line-through; display:block; margin-bottom:2px;}
.price .now{font-family:'Fraunces',serif; font-size:4rem; font-weight:800; color:var(--parchment); letter-spacing:-.045em; line-height:1;}
.price .cur{font-size:1.5rem; vertical-align:super; font-weight:700;}
.price .terms{font-size:.82rem; color:var(--on-dark-soft); margin-top:8px;}
.offer-list{margin:24px 0 26px; display:grid; gap:10px;}
.offer-list li{display:flex; gap:11px; align-items:flex-start; font-size:.91rem; color:var(--parchment);}
.offer-list .ic{color:var(--gold); margin-top:3px;}
.offer-list li.is-bonus .ic{color:var(--rose);}
.offer-list li.is-bonus{color:var(--on-dark-soft);}
.pay-row{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:18px;}
.pay-row span{font-size:.71rem; font-weight:700; color:var(--on-dark-soft);
  background:rgba(244,234,214,.09); border:1px solid rgba(244,234,214,.16);
  padding:5px 11px; border-radius:7px;}

.warranty{
  max-width:640px; margin:34px auto 0; display:grid; grid-template-columns:auto 1fr; gap:24px;
  align-items:center; padding:26px 30px; border-radius:var(--r);
  background:var(--ivory); border:1px solid rgba(116,123,60,.3);
}
.seal{
  width:82px; height:82px; border-radius:50%; flex:none; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  border:2px dashed var(--olive); color:var(--olive);
}
.seal b{font-family:'Fraunces',serif; font-size:1.65rem; font-weight:800; line-height:1;}
.seal span{font-size:.54rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-top:3px;}
.warranty h3{font-size:1.08rem; margin-bottom:5px;}
.warranty p{font-size:.9rem; margin:0;}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{display:grid; gap:0;}
.faq-item{border-bottom:1px solid rgba(99,48,31,.14);}
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  width:100%; text-align:left; background:none; border:none; padding:22px 2px;
  font-family:'Fraunces',serif; font-size:1.06rem; font-weight:600; color:var(--leather);
  letter-spacing:-.015em;
}
.faq-q .ic{color:var(--clay); transition:transform .3s cubic-bezier(.2,.8,.3,1);}
.faq-item.open .faq-q .ic{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .34s cubic-bezier(.2,.8,.3,1);}
.faq-a p{font-size:.94rem; padding:0 2px 22px; max-width:64ch; margin:0;}
.faq-item.open .faq-a{max-height:340px;}

/* ============================================================
   Origen / método
   ============================================================ */
.origin p + p{margin-top:16px;}
.origin p{font-size:1.03rem;}
.origin .pull{
  font-family:'Fraunces',serif; font-size:clamp(1.25rem,2.4vw,1.6rem); font-weight:600;
  color:var(--leather); letter-spacing:-.02em; line-height:1.32;
  padding-left:22px; border-left:3px solid var(--gold); margin:26px 0;
}

/* ============================================================
   Dos caminos
   ============================================================ */
.paths{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.path{border-radius:var(--r); padding:30px 28px;}
.path h3{font-size:1.1rem; margin-bottom:18px; display:flex; align-items:center; gap:10px;}
.path li{display:flex; gap:11px; align-items:flex-start; font-size:.93rem; padding:7px 0;}
.path .ic{margin-top:3px; flex:none;}
.path--no{background:rgba(99,48,31,.05); border:1px solid rgba(99,48,31,.14);}
.path--no h3{color:var(--ink-soft);}
.path--no li{color:var(--ink-soft);}
.path--no .ic{color:var(--rose);}
.path--yes{background:var(--ivory); border:1.5px solid var(--olive); box-shadow:0 20px 44px -26px rgba(116,123,60,.6);}
.path--yes li{color:var(--ink);}
.path--yes .ic{color:var(--olive);}
.path--yes h3{color:var(--leather);}

/* ============================================================
   Soporte + Footer
   ============================================================ */
.support{text-align:center;}
.support .ic{color:var(--olive); margin:0 auto 16px;}
.support p{margin:0 auto 22px; max-width:46ch;}
.site-footer{background:var(--espresso-ink); color:var(--on-dark-soft); padding:52px 0 96px; text-align:center;}
.site-footer .mark{font-family:'Fraunces',serif; font-size:1.35rem; font-weight:700; color:var(--parchment); letter-spacing:-.02em; margin-bottom:10px;}
.site-footer p{color:var(--on-dark-soft); font-size:.83rem; max-width:56ch; margin:0 auto 8px;}
.site-footer a{color:var(--gold);}
.site-footer .legal{margin-top:22px; padding-top:20px; border-top:1px solid rgba(244,234,214,.12); font-size:.74rem; opacity:.75;}

/* ============================================================
   Overlays: toast, barra móvil
   ============================================================ */

/* Notificación de prueba social — dos variantes con lenguaje visual propio:
   compra (verde, tranquila) y escasez (ocre, urgente). */
#social-toast{
  position:fixed; bottom:76px; left:14px; right:auto; z-index:70;
  width:fit-content; max-width:270px;
  background:var(--ivory); border-radius:13px;
  border:1px solid rgba(99,48,31,.15);
  box-shadow:0 14px 30px -12px rgba(42,24,16,.5), 0 2px 5px rgba(42,24,16,.06);
  padding:8px 12px; display:flex; gap:9px; align-items:center;
  opacity:0; transform:translateY(16px) scale(.97);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
#social-toast.show{opacity:1; transform:translateY(0) scale(1);}
@media(min-width:768px){#social-toast{bottom:22px; left:22px; right:auto; max-width:280px;}}

.toast-ic{
  width:30px; height:30px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.toast-ic::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  animation:toastPing 2.6s ease-out infinite;
}
.is-compra .toast-ic{background:rgba(185,104,66,.14); color:var(--clay);}
.is-compra .toast-ic::after{box-shadow:0 0 0 0 rgba(185,104,66,.45);}
.is-escasez .toast-ic{background:rgba(208,154,59,.18); color:#9C6F1F;}
.is-escasez .toast-ic::after{box-shadow:0 0 0 0 rgba(208,154,59,.5);}
@keyframes toastPing{
  0%{box-shadow:0 0 0 0 currentColor; opacity:.4}
  70%{box-shadow:0 0 0 10px transparent; opacity:0}
  100%{box-shadow:0 0 0 0 transparent; opacity:0}
}

.toast-body{min-width:0; display:flex; flex-direction:column; gap:0;}
.toast-title{
  font-size:.77rem; font-weight:800; color:var(--ink); line-height:1.25;
  letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.toast-sub{font-size:.69rem; color:var(--ink-soft); line-height:1.25;}
.toast-time{
  font-style:normal; display:inline-block; margin-left:5px; padding-left:5px;
  border-left:1px solid rgba(99,48,31,.2); opacity:.75; font-size:.66rem;
}
/* La escasez se distingue también por el borde, no solo por el icono */
#social-toast.is-escasez{border-color:rgba(208,154,59,.5); background:#FFFBF2;}
#social-toast.is-escasez .toast-title{color:#7A4E12;}

#mobile-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:80;
  background:var(--ivory); border-top:1px solid rgba(99,48,31,.16);
  box-shadow:0 -8px 26px -10px rgba(42,24,16,.3);
  padding:11px 15px calc(11px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  transform:translateY(105%); transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
#mobile-bar.show{transform:translateY(0);}
@media(min-width:768px){#mobile-bar{display:none;}}
#mobile-bar .mb-price{line-height:1.2;}
#mobile-bar .mb-price b{font-family:'Fraunces',serif; font-size:1.28rem; font-weight:800; color:var(--leather); letter-spacing:-.03em;}
#mobile-bar .mb-price s{font-size:.79rem; color:var(--ink-soft); margin-left:5px;}
#mobile-bar .mb-price span{display:block; font-size:.63rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--olive);}
#mobile-bar .btn{padding:12px 22px; font-size:.9rem; white-space:nowrap;}
.pulse{animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(208,154,59,.6)}50%{box-shadow:0 0 0 12px rgba(208,154,59,0)}}

/* ============================================================
   Accesibilidad
   ============================================================ */
:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px; border-radius:4px;}
.band--dark :focus-visible, .band--ink :focus-visible, .hero :focus-visible{outline-color:var(--gold-lit);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .marquee-track{animation:none; transform:none;}
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:980px){
  .use-grid{grid-template-columns:repeat(2,1fr);}
  .benefit-grid{grid-template-columns:1fr; gap:0;}
  .bonus-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr; gap:22px;}
  .step::after{display:none;}
  .step{padding-left:0;}
}
@media(max-width:900px){
  .band{padding:66px 0;}
  .hero{padding:38px 0 56px;}
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-figure{max-width:440px; margin:0 auto; width:100%;}
  .hero-tabs{top:16px; right:-9px;}
  .hero-note{left:-8px; bottom:14px;}
  .testi-grid{grid-template-columns:1fr;}
  .paths{grid-template-columns:1fr;}
  .book-grid{grid-template-columns:repeat(auto-fill, minmax(132px,1fr)); gap:6px;}
  .warranty{grid-template-columns:1fr; text-align:center; justify-items:center; gap:16px;}
  .index-foot{flex-direction:column; align-items:flex-start;}
}
@media(max-width:640px){
  body{font-size:1rem;}
  .band{padding:56px 0;}
  .head{margin-bottom:32px;}
  .rail img,.plate{width:242px; height:186px;}
  .use-grid{gap:12px;}
  .use{padding:22px 18px;}
  .offer{padding:40px 24px 30px;}
  .price .now{font-size:3.4rem;}
  .calc{padding:26px 20px;}
  .calc-out{grid-template-columns:1fr; gap:12px;}
  .calc-vs{display:none;}
  /* Más denso en móvil: se parece a un índice real y acorta el scroll */
  .book-grid{grid-template-columns:repeat(auto-fill, minmax(116px,1fr)); gap:5px;}
  .book{padding:6px 8px; gap:6px;}
  .book .abbr{font-size:.56rem; min-width:26px; padding:2px 4px;}
  .book .name{font-size:.75rem;}
  .book .name[data-long]{font-size:.68rem;}
  .btn{width:100%;}
  #mobile-bar .btn{width:auto;}
  .hero-price .now{font-size:1.9rem;}
}