/* ══════════════════════════════════════════════════════════════
   TODOPACK · el chollo de la semana
   Sistema visual: cartón kraft + tinta de sello + amarillo etiqueta.
   Nada que ver con FILO (hueso/lima editorial): aquí manda el mercadillo
   bien hecho — etiquetas troqueladas, precinto, ticket de caja.
   Móvil primero: todo se compone a 390 px y luego se abre.
   ══════════════════════════════════════════════════════════════ */

/* ── Tipografías self-hosted ─────────────────────────────── */
@font-face{font-family:'Anton';src:url('fonts/anton-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';src:url('fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Courier Prime';src:url('fonts/courier-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Courier Prime';src:url('fonts/courier-bold-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --kraft:#e8ddc8;        /* cartón claro: fondo general */
  --kraft-deep:#d8c9ad;   /* cartón sombreado */
  --paper:#fffaf0;        /* papel de ticket */
  --ink:#14110d;          /* tinta negra cálida */
  --ink-soft:#5c5344;
  --yellow:#ffd400;       /* etiqueta de precio */
  --red:#d92b1c;          /* rebaja */
  --blue:#1f3a8a;         /* sello de tinta */
  --box:#c98a3f;          /* marrón caja */

  --dsp:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Courier Prime',ui-monospace,'Courier New',monospace;

  --line:2px solid var(--ink);
  --hard:4px 4px 0 var(--ink);
  --hard-sm:3px 3px 0 var(--ink);
  --wrap:1120px;
  --nav-h:58px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--kraft);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  overflow-x:hidden;
  /* Grano de cartón: dos tramas de puntos muy tenues, sin imágenes */
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 72%, rgba(20,17,13,.05) 0 1px, transparent 1.8px);
  background-size:19px 19px, 27px 27px;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--dsp);font-weight:400;letter-spacing:.01em;line-height:.94;text-transform:uppercase}
p{margin:0}
a{color:inherit}
s{color:var(--ink-soft)}
::selection{background:var(--yellow);color:var(--ink)}

.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}

/* ── Botones ─────────────────────────────────────────────── */
.btn{
  font-family:var(--dsp);font-size:1.02rem;letter-spacing:.03em;text-transform:uppercase;
  background:var(--red);color:#fff;border:var(--line);border-radius:2px;
  padding:.72rem 1.1rem;cursor:pointer;box-shadow:var(--hard-sm);
  transition:transform .12s ease,box-shadow .12s ease,background .2s ease;
  position:relative;overflow:hidden;
}
.btn:hover{background:#c22415}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn--sm{font-size:.85rem;padding:.5rem .8rem;box-shadow:2px 2px 0 var(--ink)}
.btn--xl{font-size:1.35rem;padding:1rem 1.4rem;width:100%;box-shadow:var(--hard)}
.btn--block{width:100%}
/* Destello que barre el botón cada pocos segundos */
.btn--xl::after{
  content:'';position:absolute;inset:0 auto 0 -60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:sweep 5.5s ease-in-out infinite;
}
@keyframes sweep{0%,72%{left:-60%}88%,100%{left:130%}}

/* ── Cinta de precinto (marquesina superior) ─────────────── */
.tape{
  background:var(--yellow);border-bottom:var(--line);
  overflow:hidden;position:relative;
}
.tape::before,.tape::after{
  content:'';position:absolute;inset:0;pointer-events:none;
}
.tape::before{background:repeating-linear-gradient(90deg,rgba(20,17,13,.07) 0 2px,transparent 2px 7px)}
.tape__track{
  display:flex;align-items:center;gap:.65rem;width:max-content;
  padding:.34rem 0;font-family:var(--dsp);font-size:.72rem;letter-spacing:.14em;
  animation:slide 34s linear infinite;
}
.tape__track span{white-space:nowrap}
.tape__track i{font-style:normal;opacity:.55;font-size:.62rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── Nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(232,221,200,.93);
  backdrop-filter:saturate(1.3) blur(9px);border-bottom:2px solid transparent;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.nav.stuck{border-bottom-color:var(--ink);box-shadow:0 6px 18px rgba(20,17,13,.09)}
.nav__inner{
  width:min(100% - 24px,var(--wrap));margin-inline:auto;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.brand__mark{width:30px;height:26px;flex:none}
.brand__name{font-family:var(--dsp);font-size:1.28rem;letter-spacing:.02em}
.brand__name em{font-style:normal;background:var(--yellow);padding:0 .16em;box-shadow:2px 2px 0 var(--ink)}
.nav__right{display:flex;align-items:center;gap:.55rem}
.nav__price{font-family:var(--mono);font-size:.74rem;line-height:1.1;text-align:right}
.nav__price s{display:block;opacity:.6}
.nav__price b{font-size:.95rem}
.nav__progress{position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--red)}

/* ── Hero ────────────────────────────────────────────────── */
.hero{position:relative;padding:1.4rem 0 0;overflow:hidden}
.hero__grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(var(--kraft-deep) 1px,transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg,var(--kraft-deep) 1px,transparent 1px) 0 0/32px 100%;
  mask-image:linear-gradient(#000,transparent 78%);
}
.hero__inner{position:relative;z-index:1;width:min(100% - 32px,var(--wrap));margin-inline:auto}

.kicker{
  display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;margin-bottom:.7rem;
}
.kicker__n{background:var(--ink);color:var(--yellow);padding:.2rem .45rem;font-weight:700}
.kicker__t{color:var(--ink-soft)}

.hero h1{font-size:clamp(2.3rem,11vw,4.2rem)}
.hero h1 em{font-style:normal}
.h1__hit{
  display:inline-block;background:var(--red);color:#fff;
  padding:.02em .18em .08em;box-shadow:var(--hard);transform:rotate(-1.4deg);margin-top:.14em;
}
.hero__sub{margin-top:1rem;font-size:1.02rem;max-width:36ch;color:#2c2720}
.hero__cta{margin-top:1.15rem}
.hero__micro{margin-top:.55rem;font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);text-align:center}

/* Entrada sin IntersectionObserver: en el fold un observer que no dispara
   deja el titular invisible (lección de FILO). */
.rise{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.rise--2{animation-delay:.1s}
.rise--3{animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* En móvil la foto va ARRIBA: a 390x844 el producto tiene que verse sin
   scroll, no sólo el titular (lección de FILO). En tablet vuelve al lateral. */
.hero__inner{display:flex;flex-direction:column}
.hero__copy{order:2}
.hero__shot{order:1}

/* Foto del hero + etiqueta colgante */
.hero__shot{position:relative;margin:.2rem -16px 1.1rem}
.hero__shot img{
  width:100%;height:clamp(230px,44vw,300px);object-fit:cover;object-position:58% 56%;
  border-top:var(--line);border-bottom:var(--line);
}
.hero__shot::after{ /* funde la foto con el cartón por abajo */
  content:'';position:absolute;left:0;right:0;bottom:2px;height:38%;
  background:linear-gradient(transparent,rgba(232,221,200,.85));pointer-events:none;
}

.pricetag{position:absolute;top:-6px;right:10px;z-index:3;transform-origin:50% -6px;animation:swing 5.2s ease-in-out infinite}
.pricetag__string{width:2px;height:26px;margin:0 auto;background:var(--ink)}
.pricetag__body{
  position:relative;background:var(--yellow);border:var(--line);box-shadow:var(--hard);
  padding:.75rem .85rem .6rem;text-align:center;min-width:118px;
  /* esquinas superiores achaflanadas: la silueta clásica de etiqueta */
  clip-path:polygon(50% 0,100% 16%,100% 100%,0 100%,0 16%);
}
.pricetag__hole{position:absolute;top:9px;left:50%;translate:-50% 0;width:9px;height:9px;border:2px solid var(--ink);border-radius:50%;background:var(--kraft)}
.pricetag__was{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.68rem;font-weight:700;text-decoration:line-through;opacity:.85}
.pricetag__now{display:block;font-family:var(--dsp);font-size:2.3rem;line-height:1}
.pricetag__now sup{font-size:.95rem;top:-.75em;position:relative}
.pricetag__now small{font-size:1.1rem;margin-left:.06em}
.pricetag__ref{display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.04em;opacity:.65;margin-top:.15rem}
@keyframes swing{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}

.stamp{
  position:absolute;left:16px;bottom:14px;z-index:3;
  width:92px;height:92px;border:3px solid var(--red);border-radius:50%;
  color:var(--red);display:grid;place-content:center;text-align:center;
  transform:rotate(-13deg);opacity:.92;
  box-shadow:inset 0 0 0 2px rgba(217,43,28,.35);
  background:rgba(255,250,240,.28);
  animation:hit .5s cubic-bezier(.2,1.5,.4,1) .6s both;
}
.stamp span{display:block;font-family:var(--dsp);font-size:1.55rem;line-height:1}
.stamp small{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;font-weight:700}
@keyframes hit{from{opacity:0;transform:rotate(-13deg) scale(2.1)}to{opacity:.92;transform:rotate(-13deg) scale(1)}}

.hero__strip{
  list-style:none;margin:0;padding:.7rem 16px;display:flex;gap:1.1rem;
  overflow-x:auto;scrollbar-width:none;
  border-top:var(--line);border-bottom:var(--line);background:var(--ink);color:var(--kraft);
  font-family:var(--mono);font-size:.74rem;white-space:nowrap;
}
.hero__strip::-webkit-scrollbar{display:none}
.hero__strip b{color:var(--yellow)}

/* ── Títulos de sección ──────────────────────────────────── */
.sec-title{font-size:clamp(1.9rem,7.6vw,2.9rem);margin-bottom:.5rem}
.sec-title--light{color:var(--kraft)}
.sec-sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.2rem}

/* ── Qué es TODOPACK ─────────────────────────────────────── */
.what{padding:2.4rem 0 2.2rem}
.what__lead{font-size:1.12rem;line-height:1.5;max-width:44ch}
.what__lead b{background:var(--yellow);box-shadow:2px 2px 0 var(--ink);padding:0 .12em}
.what__steps{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.85rem}
.what__steps li{
  position:relative;background:var(--paper);border:var(--line);box-shadow:var(--hard-sm);
  padding:1rem 1rem .9rem 3.1rem;
}
.what__steps span{
  position:absolute;left:-11px;top:14px;width:34px;height:34px;display:grid;place-content:center;
  background:var(--ink);color:var(--yellow);font-family:var(--dsp);font-size:1.15rem;
  border:2px solid var(--ink);
}
.what__steps b{display:block;font-family:var(--dsp);font-size:1.15rem;text-transform:uppercase}
.what__steps p{font-size:.92rem;color:#3a342b;margin-top:.2rem}

/* ── Ticket de caja ──────────────────────────────────────── */
.receipt-sec{padding:2rem 0 2.6rem;border-top:var(--line);background:var(--kraft-deep)}
.receipt-sec__head{margin-bottom:1.3rem}
.receipt-sec__cols{display:grid;gap:1.4rem}
.boxshot{margin:0;background:var(--paper);border:var(--line);box-shadow:var(--hard);padding:.7rem}
.boxshot img{width:100%;height:auto}

.receipt{position:relative;filter:drop-shadow(4px 6px 0 rgba(20,17,13,.22))}
.receipt__paper{
  background:var(--paper);padding:1.5rem 1.1rem 1.7rem;
  font-family:var(--mono);font-size:.8rem;line-height:1.5;
  /* Bordes dentados arriba y abajo, como un ticket cortado */
  --tooth:12px;
  mask-image:
    radial-gradient(var(--tooth) at 50% 0, transparent 98%, #000 100%),
    radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000 100%);
  mask-size:calc(var(--tooth)*2) 100%,calc(var(--tooth)*2) 100%;
  mask-repeat:repeat-x;mask-position:0 0,0 100%;mask-composite:intersect;
  -webkit-mask-image:
    radial-gradient(var(--tooth) at 50% 0, transparent 98%, #000 100%),
    radial-gradient(var(--tooth) at 50% 100%, transparent 98%, #000 100%);
  -webkit-mask-size:calc(var(--tooth)*2) 100%,calc(var(--tooth)*2) 100%;
  -webkit-mask-repeat:repeat-x;-webkit-mask-position:0 0,0 100%;-webkit-mask-composite:source-in;
}
.receipt__logo{font-family:var(--dsp);font-size:1.5rem;text-align:center;letter-spacing:.08em}
.receipt__meta{text-align:center;font-size:.66rem;letter-spacing:.03em;opacity:.75;margin-top:.25rem}
.receipt__rule{border-top:1px dashed rgba(20,17,13,.45);margin:.8rem 0}
.receipt__rule--fat{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);height:3px;margin:.7rem 0}
.receipt__lines{list-style:none;margin:0;padding:0}
.receipt__lines li{display:flex;justify-content:space-between;gap:.6rem;padding:.12rem 0}
.receipt__lines span{flex:1}
.receipt__lines b{font-weight:700;white-space:nowrap}
.receipt__extra{color:var(--blue)}
.receipt__row{display:flex;justify-content:space-between;gap:.6rem}
.receipt__row--save{color:var(--red);font-weight:700}
.receipt__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  font-family:var(--dsp);font-size:1.45rem;letter-spacing:.02em;margin-top:.15rem;
}
.receipt__total b{background:var(--yellow);padding:0 .2em;box-shadow:2px 2px 0 var(--ink)}
.receipt__foot{text-align:center;font-size:.66rem;letter-spacing:.05em;margin-top:1rem;opacity:.75}
.receipt__barcode{
  height:44px;margin-top:.7rem;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px);
  opacity:.85;
}
.receipt-sec__cta{margin-top:1.6rem}

/* ── Por qué tan barato ──────────────────────────────────── */
.why{background:var(--ink);color:var(--kraft);padding:2.4rem 0;border-top:var(--line);border-bottom:var(--line)}
.why__cards{display:grid;gap:.9rem;margin-top:1.2rem}
.why__card{border:2px solid rgba(243,234,217,.35);padding:1rem;background:rgba(243,234,217,.04)}
.why__card h3{font-size:1.2rem;color:var(--yellow);margin-bottom:.3rem}
.why__card p{font-size:.93rem;color:#e4dbc9}
.why__note{margin-top:1.2rem;font-family:var(--mono);font-size:.8rem;color:#cfc5b0}
.why__note b{color:var(--yellow)}

/* ── Specs ───────────────────────────────────────────────── */
.specs{padding:2.4rem 0}
.specs__grid{display:grid;gap:.9rem;margin-top:1.2rem}
.spec{background:var(--paper);border:var(--line);box-shadow:var(--hard-sm);overflow:hidden}
.spec__media{background:#fff;border-bottom:var(--line)}
.spec__media img{width:100%;height:190px;object-fit:cover;object-position:center}
.spec--wide .spec__media img{height:230px;object-fit:contain;background:#fff;padding:.6rem}
.spec--object .spec__media img{object-fit:contain;background:#fff;padding:.5rem}
.spec__txt{padding:.9rem 1rem 1.05rem}
.spec__txt h3{font-size:1.25rem;margin-bottom:.25rem}
.spec__txt p{font-size:.92rem;color:#3a342b}

/* ── Carriles (en uso / opiniones) ───────────────────────── */
.usos{padding:1.6rem 0 2.2rem}
.rail{
  display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:1rem 16px .4rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:center;flex:0 0 76%;max-width:330px;margin:0}
.rail figure{position:relative;border:var(--line);box-shadow:var(--hard-sm);background:var(--paper);overflow:hidden}
.rail figure img{width:100%;height:330px;object-fit:cover}
.rail figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:.5rem .7rem;
  background:var(--yellow);border-top:var(--line);
  font-family:var(--dsp);font-size:.95rem;text-transform:uppercase;
}
.rail__dots{display:flex;gap:.35rem;justify-content:center;margin-top:.6rem}
.rail__dots i{width:7px;height:7px;border:2px solid var(--ink);border-radius:50%}
.rail__dots i.on{background:var(--ink)}

.rail--ops>*{background:var(--paper);border:var(--line);box-shadow:var(--hard-sm);padding:1rem}
.rail--ops p{font-size:.95rem}
.rail--ops footer{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;font-family:var(--mono);font-size:.75rem}
.rail--ops em{font-style:normal;color:var(--red);letter-spacing:.05em}

/* ── Comparativa ─────────────────────────────────────────── */
.vs{padding:1.4rem 0 2.4rem}
.vs__inner{display:grid;gap:.9rem}
.vs__card{border:var(--line);padding:1rem 1.1rem 1.15rem;background:var(--paper)}
.vs__card ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.42rem;font-size:.94rem}
.vs__card li{padding-left:1.5rem;position:relative}
.vs__card--them{opacity:.78}
.vs__card--them li::before{content:'✕';position:absolute;left:0;color:var(--ink-soft);font-weight:700}
.vs__card--us{background:var(--yellow);box-shadow:var(--hard)}
.vs__card--us li::before{content:'✓';position:absolute;left:0;font-weight:800}
.vs__tag{
  display:inline-block;font-family:var(--dsp);font-size:.85rem;letter-spacing:.06em;
  background:var(--ink);color:var(--kraft);padding:.2rem .5rem;
}
.vs__tag--us{background:var(--red);color:#fff}

/* ── Opiniones ───────────────────────────────────────────── */
.ops{padding:1.4rem 0 2rem}

/* ── Oferta final ────────────────────────────────────────── */
.offer{padding:2.4rem 0;background:var(--kraft-deep);border-top:var(--line);border-bottom:var(--line)}
.offer__box{position:relative;background:var(--paper);border:var(--line);box-shadow:var(--hard);padding:1.5rem 1.1rem 1.4rem}
.offer__seal{
  position:absolute;right:-10px;top:-16px;width:66px;height:66px;border-radius:50%;
  background:var(--red);color:#fff;border:2px solid var(--ink);
  display:grid;place-content:center;text-align:center;
  font-family:var(--dsp);font-size:.78rem;line-height:1.05;transform:rotate(11deg);
  box-shadow:3px 3px 0 var(--ink);
}
.offer__eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.offer__box h2{font-size:clamp(1.6rem,6.6vw,2.2rem);margin:.35rem 0 .8rem;max-width:14ch}
.offer__prices{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.offer__prices s{font-family:var(--mono);font-size:1rem}
.offer__prices b{font-family:var(--dsp);font-size:2.9rem;line-height:1}
.offer__prices i{font-style:normal;font-family:var(--dsp);font-size:.9rem;background:var(--red);color:#fff;padding:.15rem .4rem;box-shadow:2px 2px 0 var(--ink)}
.offer__stockbar{height:12px;border:var(--line);background:var(--kraft);margin:1rem 0 .5rem;overflow:hidden}
.offer__stockbar span{display:block;height:100%;width:64%;background:repeating-linear-gradient(45deg,var(--red) 0 6px,#b82315 6px 12px);transition:width .8s ease}
.offer__stock{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);margin-bottom:1rem}
.offer__stock b{color:var(--red);font-size:.9rem}
#countdown{font-weight:700;color:var(--ink)}
.offer__perks{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.35rem;font-size:.88rem}
.offer__perks li{padding-left:1.4rem;position:relative}
.offer__perks li::before{content:'✓';position:absolute;left:0;color:var(--red);font-weight:800}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{padding:2.4rem 0 2.8rem}
.faq details{border-bottom:var(--line);padding:.9rem 0}
.faq details:first-of-type{border-top:var(--line)}
.faq summary{
  cursor:pointer;list-style:none;font-family:var(--dsp);font-size:1.1rem;
  text-transform:uppercase;display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.5rem;line-height:1;color:var(--red)}
.faq details[open] summary::after{content:'–'}
.faq details p{margin-top:.6rem;font-size:.94rem;color:#3a342b;max-width:62ch}

/* ── Footer ──────────────────────────────────────────────── */
.footer{background:var(--ink);color:#e4dbc9;padding:2rem 0 5.6rem;border-top:var(--line)}
.footer__brand{display:flex;align-items:center;gap:.5rem;color:#f3ead9}
.footer__brand .brand__name em{background:var(--yellow);color:var(--ink);box-shadow:none}
.footer__links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:1rem 0 1.2rem;font-family:var(--mono);font-size:.82rem}
.footer__links a{text-decoration:none;border-bottom:1px solid rgba(228,219,201,.35)}
.footer__legal{font-size:.74rem;color:#a99e8a;max-width:70ch;margin-top:.6rem;line-height:1.5}

/* ── Barra de compra sticky ──────────────────────────────── */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.6rem 14px calc(.6rem + env(safe-area-inset-bottom));
  background:var(--yellow);border-top:var(--line);
  transform:translateY(115%);transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.buybar.show{transform:none}
.buybar__info{display:flex;flex-direction:column;line-height:1.15}
.buybar__name{font-family:var(--dsp);font-size:.95rem;text-transform:uppercase}
.buybar__price{font-family:var(--mono);font-size:.78rem}
.buybar__price s{opacity:.6;margin-right:.2rem}
.buybar__price b{font-size:.92rem}
.btn--buybar{font-size:.95rem;padding:.6rem 1rem}

/* ── Revelado al entrar en pantalla ──────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.rise{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .tape__track,.pricetag,.stamp,.btn--xl::after{animation:none!important}
}

/* ══════════════ TABLET ══════════════ */
@media (min-width:720px){
  .hero{padding-top:2.2rem}
  .hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
  .hero__copy{order:0}
  .hero__shot{order:0;margin:0}
  .hero__shot img{height:min(62vh,520px);object-position:52% 32%;border:var(--line);box-shadow:var(--hard)}
  .hero__shot::after{display:none}
  .hero__strip{margin-top:2rem;justify-content:center;gap:2.2rem}
  .pricetag{right:-14px;top:-18px}
  .what__steps{grid-template-columns:repeat(3,1fr)}
  .receipt-sec__cols{grid-template-columns:1.05fr .95fr;align-items:start}
  .receipt-sec__cta{max-width:420px}
  .why__cards{grid-template-columns:repeat(3,1fr)}
  .specs__grid{grid-template-columns:repeat(2,1fr)}
  .spec--wide{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .spec--wide .spec__media{border-bottom:0;border-right:var(--line)}
  .spec--wide .spec__media img{height:100%;min-height:260px}
  .vs__inner{grid-template-columns:1fr 1fr;align-items:start}
  .rail>*{flex-basis:44%}
  .offer__inner{display:flex;justify-content:center}
  .offer__box{max-width:560px;width:100%;padding:2rem 1.8rem 1.8rem}
  .btn--xl{width:auto;min-width:300px}
  .btn--block{width:100%}
  .buybar{padding-inline:24px}
}

/* ══════════════ ESCRITORIO ══════════════ */
@media (min-width:1040px){
  body{font-size:17px}
  .hero h1{font-size:4.6rem}
  .rail{padding-inline:calc((100vw - var(--wrap))/2)}
  .rail>*{flex-basis:31%}
  .specs__grid{grid-template-columns:repeat(3,1fr)}
  .spec--wide{grid-column:span 3}
  .buybar{display:none}   /* en escritorio el nav ya lleva su botón */
}

/* ══════════════ HERO CON EL PRODUCTO (2026-09-08) ══════════════
   Antes arriba iba una foto de estilo de vida (un tío afeitándose) y el
   producto no aparecía hasta media página. Ahora lo primero que se ve es el
   pack entero. La foto es de catálogo con fondo blanco, así que en vez de
   recortarla (el recorte deja parches en los huecos de los peines y del cable)
   se monta sobre un PANEL DE PAPEL BLANCO con el trazo y la sombra dura de la
   marca: el fondo de la foto y el del panel son el mismo blanco, no se ve
   ninguna costura. */
.hero__shot--pack{
  background:#fff;border:var(--line);box-shadow:var(--hard);
  margin:.2rem 0 1.3rem;overflow:visible;
}
.hero__shot--pack img{
  /* contain, no cover: el chollo es el LOTE, no vale recortar los accesorios */
  width:100%;height:clamp(268px,74vw,340px);object-fit:contain;object-position:center;
  border:0;padding:10px 8px;display:block;
}
.hero__shot--pack::after{display:none}          /* sin degradado: el panel es blanco */

/* Sellito de contenido, para que se lea qué es lo que se ve */
.hero__shot--pack figcaption{
  position:absolute;left:-2px;bottom:-14px;z-index:2;
  background:var(--ink);color:var(--kraft);
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.06em;
  padding:.3rem .55rem;text-transform:uppercase;
}
.hero__shot--pack .stamp{left:auto;right:8px;bottom:-6px;background:var(--kraft);border-radius:50%}

@media (min-width:720px){
  .hero__shot--pack{margin:0}
  .hero__shot--pack img{height:min(58vh,470px);padding:18px 14px;border:0;box-shadow:none}
  .hero__shot--pack figcaption{font-size:.68rem;bottom:-16px}
}

/* La etiqueta y el sello, colgados del BORDE del panel: dentro tapaban justo
   los accesorios (hoja, peines) y el estuche, que es lo que hay que ver. */
.hero__shot--pack .pricetag{top:-40px;right:-4px;scale:.86;transform-origin:50% -6px}
/* El sello arriba a la izquierda: ahí la caja es cartón liso, no tapa nada que
   se necesite ver, y deja libre el rótulo del pie. */
.hero__shot--pack .stamp{left:-16px;right:auto;top:-16px;bottom:auto;width:80px;height:80px;background:var(--kraft);border-radius:50%}
@media (min-width:720px){
  .hero__shot--pack .pricetag{top:-52px;right:-18px;scale:1}
  .hero__shot--pack .stamp{left:-24px;top:-22px;width:94px;height:94px}
}

/* ══════════════ OFERTA DE CANTIDAD · 2 POR 25 € (2026-09-08) ══════════════
   Va debajo del botón de comprar una, no compitiendo con él: quien ya ha
   decidido comprar es quien sube el ticket. Papel de ticket + trazo, para que
   se lea como un cupón grapado a la oferta y no como otro banner. */
.duo{
  margin-top:1.1rem;background:var(--paper);border:var(--line);box-shadow:var(--hard-sm);
  padding:.95rem .9rem 1rem;text-align:left;position:relative;
}
.duo__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.55rem}
.duo__badge{
  background:var(--ink);color:var(--yellow);font-family:var(--mono);font-weight:700;
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;padding:.25rem .5rem;
}
.duo__save{
  background:var(--red);color:#fff;font-family:var(--mono);font-weight:700;
  font-size:.66rem;letter-spacing:.05em;padding:.25rem .5rem;transform:rotate(-1.5deg);
}
.duo__line{margin:0;font-size:1.12rem;color:var(--ink)}
.duo__price{font-family:var(--dsp);font-size:1.7rem;line-height:1;letter-spacing:.01em;margin:0 .12em}
.duo__line s{color:var(--ink-soft);font-size:.92rem;margin-left:.25rem}
.duo__sub{margin:.3rem 0 .8rem;font-size:.86rem;color:var(--ink-soft)}
/* Botón secundario: amarillo etiqueta en vez del rojo de la compra principal,
   para que se lea como "y además" y no como dos botones peleándose. */
.btn--duo{background:var(--yellow);color:var(--ink);border:var(--line);box-shadow:var(--hard-sm)}
.btn--duo:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

/* Gancho de texto junto al ticket */
.receipt-sec__duo{margin:.75rem 0 0;font-size:.92rem;color:var(--ink-soft);text-align:center}
.linkbtn{
  background:none;border:0;padding:0;font:inherit;color:var(--ink);font-weight:800;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer;
}