/* FRANKLERS · landing propia de cada producto (p/<slug>/). Negro, blanco y un acento rojo. */
:root{
  --k:#030303; --k2:#0d0d0f; --k3:#17181b; --w:#ffffff; --w2:rgba(255,255,255,.66); --w3:rgba(255,255,255,.14);
  --red:#E22334; --r:18px; --g:clamp(16px, 4vw, 56px); --max:1240px;
  --font:'Inter Tight', system-ui, -apple-system, sans-serif;
}
*{ box-sizing:border-box; margin:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ background:var(--k); color:var(--w); font:400 16px/1.5 var(--font); -webkit-font-smoothing:antialiased }
img{ display:block; max-width:100% }
a{ color:inherit }
button{ font:inherit; color:inherit }

/* barra superior */
.top{ position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
      padding:14px var(--g); background:rgba(3,3,3,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid var(--w3) }
.marca{ display:flex; align-items:center; gap:10px; font-weight:500; letter-spacing:.06em; text-decoration:none }
.logo{ width:30px; height:14px; background:var(--w);
       -webkit-mask:url(assets/logo.png) center/contain no-repeat; mask:url(assets/logo.png) center/contain no-repeat }
.volver{ font-size:14px; color:var(--w2); text-decoration:none }
.volver:hover{ color:var(--w) }

main > section{ max-width:var(--max); margin:0 auto; padding:clamp(56px, 9vw, 120px) var(--g) }
.h2{ font-size:clamp(30px, 4.4vw, 56px); font-weight:400; line-height:1.05; letter-spacing:-.01em; margin-bottom:clamp(24px, 3vw, 40px) }
.eyebrow, .kicker{ font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--w2) }
.eyebrow span, .kicker{ color:var(--red) }

/* fotos y espacios pendientes */
figure{ position:relative; border-radius:var(--r); overflow:hidden; background:radial-gradient(ellipse 60% 55% at 50% 50%, #2a2b30, var(--k3) 60%, var(--k2)) }
figure img{ width:100%; height:100%; object-fit:cover }
.ph{ width:100%; height:100%; min-height:280px; display:flex; flex-direction:column; justify-content:center; gap:10px;
     padding:28px; border:1px dashed rgba(226,35,52,.6); border-radius:var(--r); color:var(--w2); font-size:14px }
.ph b{ color:var(--red); font-size:12px; letter-spacing:.14em; font-weight:600 }
.ref{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); padding:6px 14px; border-radius:999px;
      background:rgba(0,0,0,.78); font-size:12px; white-space:nowrap }

/* 1 · hero de compra */
.hero{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px, 4vw, 64px); align-items:start; padding-top:clamp(24px, 4vw, 48px) !important }
.hero-main{ aspect-ratio:4/5 }
.thumbs{ display:flex; gap:8px; margin-top:10px; overflow-x:auto }
.th{ flex:0 0 76px; height:76px; padding:0; border:1px solid var(--w3); border-radius:10px; overflow:hidden; background:var(--k3); cursor:pointer }
.th img{ width:100%; height:100%; object-fit:cover }
.th[aria-current="true"], .th:hover{ border-color:var(--red) }
.hero-copy{ position:sticky; top:84px; display:flex; flex-direction:column; gap:14px }
.nombre{ font-size:clamp(40px, 6vw, 84px); font-weight:500; line-height:.95; letter-spacing:-.02em; overflow-wrap:anywhere }
.desc{ font-size:18px; color:var(--w2) }
.hook{ font-size:clamp(20px, 2.2vw, 26px); line-height:1.3; margin-top:6px }
.destacados{ list-style:none; padding:0; display:grid; gap:8px; margin:6px 0 4px }
.destacados li{ display:flex; gap:10px; align-items:baseline }
.destacados li::before{ content:''; flex:none; width:8px; height:8px; border-radius:2px; background:var(--red); transform:translateY(-1px) }
.buybox{ display:flex; flex-direction:column; gap:14px; padding:20px; border:1px solid var(--w3); border-radius:var(--r); background:var(--k2) }
.precio{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px }
.precio output{ font-size:clamp(36px, 4vw, 48px); line-height:1 }
.precio span{ font-size:14px; color:var(--w2) }
.vars{ display:flex; flex-wrap:wrap; gap:6px }
.vars button{ min-height:44px; padding:0 16px; border:1px solid var(--w3); border-radius:10px; background:transparent; cursor:pointer }
.vars [aria-checked="true"]{ background:var(--w); color:var(--k); border-color:var(--w) }
.vars button:disabled{ opacity:.35; text-decoration:line-through; cursor:not-allowed }
.compra{ display:flex; gap:10px }
.qty{ display:flex; align-items:center; border:1px solid var(--w3); border-radius:12px }
.qty button{ width:44px; height:52px; border:0; background:transparent; font-size:20px; cursor:pointer }
.qty output{ min-width:24px; text-align:center }
.buy{ flex:1; display:flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:12px;
      background:var(--red); color:#fff; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:14px; text-decoration:none }
.buy:hover{ filter:brightness(1.08) }
.confianza{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--w2) }
.confianza li::before{ content:'✓ '; color:var(--red) }

/* 2 · tu ganancia */
.ganancia{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 4vw, 64px); align-items:center }
.gan-media{ aspect-ratio:1 }
.gan-t{ font-size:clamp(30px, 4vw, 52px); line-height:1.08; margin:12px 0 20px }
.intro{ font-size:18px; color:var(--w2); max-width:52ch }

/* 3 · lo que ganas */
.beneficios{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px, 4vw, 64px); align-items:center; border-top:1px solid var(--w3) }
.ben-media{ aspect-ratio:4/5 }
.ben-list{ display:grid; gap:10px }
.ben{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:18px 20px; border:1px solid var(--w3); border-radius:var(--r); background:var(--k2) }
.ben-i{ font-size:24px; line-height:1.2 }
.ben h3{ font-size:17px; font-weight:500; margin-bottom:4px }
.ben p{ color:var(--w2); font-size:15px }

/* 4 · momentos */
.momentos{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 4vw, 64px); align-items:center }
.mom-list{ list-style:none; padding:0; counter-reset:m; border-left:1px solid var(--w3) }
.mom-list li{ position:relative; padding:0 0 26px 26px; counter-increment:m }
.mom-list li::before{ content:''; position:absolute; left:-5px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--red) }
.mom-list b{ display:block; font-weight:500; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:4px }
.mom-list p{ font-size:17px }
.mom-media{ aspect-ratio:4/5 }

/* 5 · comparación */
.compara table{ width:100%; border-collapse:collapse; font-size:16px }
.compara th, .compara td{ padding:16px 12px; border-bottom:1px solid var(--w3); text-align:center }
.compara tbody th{ text-align:left; font-weight:400 }
.compara thead th{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--w2); font-weight:500 }
.compara thead .nos{ color:var(--w) }
.compara .si{ color:var(--red); font-size:20px }
.compara .no{ color:rgba(255,255,255,.3) }

/* 6 · protocolo */
.protocolo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 4vw, 64px); align-items:center }
.pro-media{ aspect-ratio:1 }
.pasos{ list-style:none; padding:0; display:grid; gap:18px }
.pasos li{ display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start }
.pasos span{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1px solid var(--red); color:var(--red); font-size:18px }
.pasos p{ font-size:17px; padding-top:10px }

/* 7 · ficha técnica (sección clara) */
.ficha-tec{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(24px, 4vw, 64px); background:var(--w); color:var(--k);
            border-radius:var(--r); max-width:calc(var(--max) - 2 * var(--g)) !important; margin:0 var(--g) !important }
@media (min-width:1352px){ .ficha-tec{ margin:0 auto !important } }
.specs div{ display:grid; grid-template-columns:150px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid rgba(0,0,0,.1) }
.specs dt{ font-weight:500 } .specs dd{ color:#444 }
.incluye{ list-style:none; padding:0; display:grid; gap:10px }
.incluye li::before{ content:'✓  '; color:var(--red) }

/* 8 · preguntas */
.faq details{ border-bottom:1px solid var(--w3) }
.faq summary{ list-style:none; cursor:pointer; padding:20px 36px 20px 0; position:relative; font-size:18px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; position:absolute; right:4px; top:16px; font-size:24px; color:var(--red) }
.faq details[open] summary::after{ content:'−' }
.faq details p{ padding:0 0 20px; color:var(--w2); max-width:70ch }
.nota{ max-width:var(--max); margin:0 auto; padding:0 var(--g) 40px; font-size:13px; color:rgba(255,255,255,.45) }

/* 9 · relacionados */
.rel-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px }
.rel-c{ display:flex; flex-direction:column; gap:6px; padding:22px; border:1px solid var(--w3); border-radius:var(--r); text-decoration:none; background:var(--k2) }
.rel-c b{ font-weight:500; letter-spacing:.04em } .rel-c span{ font-size:14px; color:var(--w2) }
.rel-c:hover{ border-color:var(--red) }

/* barra de compra fija */
.sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px;
         padding:10px 10px 10px 18px; border:1px solid var(--w3); border-radius:16px; background:rgba(13,13,15,.92);
         backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transform:translateY(140%); transition:transform .35s ease }
.sticky.on{ transform:none }
.sticky div{ display:flex; flex-direction:column; line-height:1.2 } .sticky b{ font-weight:500; font-size:14px } .sticky-p{ font-size:14px; color:var(--w2) }
.sticky .buy{ flex:none; min-height:46px }
.pie{ padding:40px var(--g) 110px; text-align:center; font-size:13px; color:rgba(255,255,255,.45) }

@media (max-width:860px){
  .hero, .ganancia, .beneficios, .momentos, .protocolo, .ficha-tec{ grid-template-columns:1fr }
  .ben-media{ aspect-ratio:1 }
  .hero-copy{ position:static }
  .mom-media{ order:-1; aspect-ratio:1 }
  .specs div{ grid-template-columns:120px 1fr }
  .ficha-tec{ padding:40px 22px !important }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } .sticky{ transition:none } }

/* promo por pack */
.packs{ display:grid; gap:8px }
.pack{ position:relative; display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:baseline; text-align:left;
       padding:16px 18px; border:1px solid var(--w3); border-radius:14px; background:transparent; cursor:pointer }
.pack[aria-checked="true"]{ border-color:var(--red); background:rgba(226,35,52,.08) }
.pk-t{ font-size:16px; font-weight:500 } .pk-p{ font-size:18px; font-weight:600 }
.pk-s, .pk-g{ grid-column:1 / -1; font-size:13px; color:var(--w2) }
.pk-g{ color:var(--w) } .pk-g::before{ content:'🎁 ' }
.pk-badge{ position:absolute; top:-10px; right:14px; padding:2px 10px; border-radius:99px; background:var(--red); color:#fff;
           font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase }

/* guía de regalo */
.regalo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 4vw, 64px); align-items:center; border-top:1px solid var(--w3) }
.reg-media{ aspect-ratio:1; background:var(--k2) }
.reg-list{ list-style:none; padding:0; display:grid; gap:10px; margin-top:18px }
.reg-list li{ display:flex; gap:10px } .reg-list li::before{ content:'✓'; color:var(--red) }
.reg-o{ margin-top:18px; color:var(--w2); font-size:15px }
@media (max-width:860px){ .regalo{ grid-template-columns:1fr } }