/* ============================================================
   vana shop — storefront
   Diseño: Figma "vanashop-design" (nodo 49:1553), equipo de diseño de vana.

   El acento es MORADO (#7C5CFC / #5B3FD0 / #5101BC), no el turquesa de
   vana pay: así lo definió el diseño. El turquesa sigue vivo en el logo a
   color, que es el que va sobre fondo claro.

   Sofia Pro se sirve como webfont (subset latino → woff2, ~19 KB por peso)
   para que mobile se vea igual que desktop. Tres pesos:
   400 texto · 700 labels/botones · 900 display, precios y títulos de sección.
   ============================================================ */
@font-face{font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap}
@font-face{font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap}

:root{
  /* acento morado del diseño */
  --pur:#7C5CFC; --pur-120:#5B3FD0; --pur-deep:#5101BC; --pur-10:#F3F2FF;

  /* pasteles de las cards; se rotan por producto */
  --t1:#F3F2FF; --t2:#FCE7C2; --t3:#D7F0E0; --t4:#E8F2FF; --t5:#FBD9D9;

  /* neutrales del vana Design System */
  --n0:#FFFFFF; --n10:#F6F8FB; --n30:#E2E6E9; --n50:#C6CCD3;
  --n60:#9BA6B1; --n70:#708090; --n80:#56636E; --n100:#364049;
  --ink:#101011;
  --wa:#25D366;

  --r-card:36px; --r-band:56px; --r-md:14px; --r-pill:999px;
  --sh-card:0 1px 2px rgba(54,64,73,.08), 0 8px 24px rgba(81,1,188,.06);
  --sh-pur:0 6px 16px rgba(124,92,252,.34);

  --font-sans:"Sofia Pro",-apple-system,"Avenir Next","Helvetica Neue",Arial,sans-serif;
  --maxw:1248px;
  --hdr-h:85px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--n0); color:var(--n100); font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45}
a{color:var(--pur-120); text-decoration:none}
img{display:block; max-width:100%}
button,input,select{font-family:inherit}
h1,h2,h3{color:var(--n100); margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:24px}
.ico{width:1em; height:1em; fill:currentColor; flex:none; display:block}

/* ---------- Header ----------
   Dos variantes. `.hdr.over` va encima del hero, sin fondo, con el logo
   blanco recortado contra la foto — así está en el diseño. En páginas sin
   hero (la PDP) el header es normal y sólido: en absoluto se le montaba
   encima al contenido. */
.hdr{position:relative; z-index:40; height:var(--hdr-h);
  background:var(--n0); border-bottom:1px solid var(--n30)}
.hdr.over{position:absolute; top:0; left:0; right:0;
  background:transparent; border-bottom:0}
.hdr .wrap{display:flex; align-items:center; height:100%; gap:16px; position:relative; z-index:2}
.brand{flex:none; display:block}
.brand img{height:34px; width:auto}
.hdr.over .brand img{filter:drop-shadow(0 2px 12px rgba(16,16,17,.5))}
.hdr-cta{margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:9px;
  height:45px; padding:0 20px; border-radius:var(--r-pill);
  background:var(--n0); border:1px solid var(--n30); color:var(--n100);
  font-size:15px; font-weight:700; transition:transform .15s, box-shadow .15s}
/* Sin hero detrás, la pastilla blanca sobre blanco desaparece. */
.hdr:not(.over) .hdr-cta{background:var(--pur); border-color:var(--pur); color:var(--n0)}
.hdr:not(.over) .hdr-cta:hover{background:var(--pur-120); color:var(--n0)}
.hdr:not(.over) .hdr-cta .ico{color:var(--n0)}
.hdr-cta:hover{color:var(--n100); transform:translateY(-1px); box-shadow:0 6px 16px rgba(54,64,73,.16)}
.hdr-cta .ico{font-size:17px; color:var(--wa)}

/* ---------- Hero ----------
   Foto a sangre con las esquinas inferiores redondeadas. Las medidas van en vw
   porque el diseño está hecho a 1920 y así conserva sus proporciones a
   cualquier ancho en vez de romperse fuera del breakpoint. */
.hero{
  /* Geometría de la portada, tomada del Figma:
       --alto-hero  tres topes. 56vw mantiene la proporción del diseño; 900px
                    evita que crezca de más en monitores anchos; 82vh es el que
                    importa (82vh): sin él, en un portátil ocupaba toda la pantalla.
       --alto-foto  alto que tendría la foto completa (1938×1079 → 1.796).
       --recorte    fracción que se recorta de arriba (object-position).
       --y-titular  dónde empieza el titular DENTRO de la foto: 284/1079.

     El titular se ancla a la foto, no al fondo del hero. Anclado abajo se
     corría ~40px hacia abajo respecto del diseño y se topaba con la laptop,
     el bloc y el tenis; en el Figma cae en la franja de cielo limpio. */
  --alto-hero:min(56vw,900px,82vh);
  --alto-foto:55.676vw;
  --recorte:.42;
  --y-titular:.2632;
  --esc:1;          /* escala del hero; baja en pantallas de poco alto */

  position:relative; background:var(--pur-deep);
  border-radius:0 0 var(--r-band) var(--r-band); overflow:hidden;
  min-height:var(--alto-hero); display:flex; align-items:flex-start}
/* Velo suave arriba: el logo blanco cae sobre la parte más cargada de la foto
   (la guitarra borrosa) y se perdía. Solo afecta la franja del header. */
.hero::before{content:""; position:absolute; top:0; left:0; right:0;
  height:calc(var(--hdr-h) + 60px); z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(16,16,17,.34), rgba(16,16,17,.10) 55%, transparent)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center calc(var(--recorte) * 100%)}
.hero-in{position:relative; z-index:2; width:100%; text-align:center;
  /* borde superior de la foto + el 26.32% de su alto */
  padding-top:calc((var(--alto-hero) - var(--alto-foto)) * var(--recorte)
                   + var(--alto-foto) * var(--y-titular));
  padding-bottom:calc(clamp(28px,4.2vw,80px) * var(--esc))}

/* En pantallas de poco alto la composición del Figma no cabe (necesita ~82vh
   y muchos portátiles no llegan). Se reduce la tipografía del hero, lo que
   además le da más aire al titular frente a los objetos que flotan. */
@media (min-width:641px) and (max-height:880px){ .hero{--esc:.88} }
@media (min-width:641px) and (max-height:740px){ .hero{--esc:.80} }

/* Un line-height de .71 (el que sale de las cajas del Figma) hacía que la caja
   mintiera: la tinta de "comprar" se salía ~50px por abajo y quedaba pegada al
   buscador aunque el margen dijera otra cosa. Con line-height 1 la caja es
   honesta y la separación entre líneas la fija el margen negativo.
   El -.19em sale del Figma: líneas base a 172.35px, con la de arriba a
   153.58px y la de abajo a 241.58px. */
.hero h1{font-weight:900; color:var(--n0);
  margin:0 0 calc(clamp(30px,5vw,96px) * var(--esc))}
/* El tracking del Figma (-9.66px) es absoluto, así que en em NO es el mismo para
   las dos líneas: sobre 153.58px son -.063em y sobre 241.58px, -.04em. Va bastante
   más cerrado que eso porque en pantalla se leía suelto.
   El word-spacing es necesario: letter-spacing también encoge el espacio entre
   palabras, y sin compensarlo "Hoy quiero" se leía "Hoyquiero". */
.hero h1 span{display:block; font-size:calc(clamp(38px,8vw,154px) * var(--esc)); line-height:1;
  letter-spacing:-.07em; word-spacing:.07em}
.hero h1 em{display:block; font-style:normal; color:var(--ink);
  font-size:calc(clamp(58px,12.6vw,242px) * var(--esc)); line-height:1; margin-top:-.19em;
  letter-spacing:-.05em}

/* buscador: pastilla blanca con el botón morado adentro */
.askrow{position:relative; margin:0 auto; width:calc(min(47.5vw,912px) * var(--esc));
  min-width:min(100%,340px)}
.askfield{display:flex; align-items:center; gap:clamp(10px,1.2vw,22px);
  background:var(--n0); border-radius:var(--r-pill);
  height:calc(clamp(58px,5.05vw,97px) * var(--esc)); padding-left:clamp(18px,2.7vw,52px);
  padding-right:clamp(70px,10vw,196px); box-shadow:0 10px 30px rgba(16,16,17,.14)}
.askfield .ico{font-size:clamp(20px,1.7vw,32px); color:var(--n60)}
.askfield input{flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-size:clamp(15px,1.34vw,26px); color:var(--n100)}
.askfield input::placeholder{color:var(--n60); font-weight:400; opacity:1}
.askbtn{position:absolute; top:50%; transform:translateY(-50%);
  right:clamp(6px,.7vw,14px); display:inline-flex; align-items:center; justify-content:center;
  gap:9px; height:clamp(46px,3.65vw,70px); padding:0 clamp(16px,1.6vw,30px);
  border:0; border-radius:var(--r-pill); background:var(--pur); color:var(--n0);
  font-size:clamp(15px,1.12vw,22px); font-weight:700; cursor:pointer;
  transition:background .15s}
.askbtn:hover{background:var(--pur-120); color:var(--n0)}
.askbtn .ico{font-size:clamp(18px,1.4vw,27px)}

.hero-sub{margin:calc(clamp(18px,2.4vw,46px) * var(--esc)) auto 0; max-width:34ch;
  font-size:calc(clamp(15px,1.3vw,25px) * var(--esc)); line-height:1.45; color:var(--ink)}
.hero-sub b{font-weight:900}

/* "¿Cómo funciona?" — solo mobile; en desktop el hero tiene aire de sobra.
   Va como pastilla clara y no como texto suelto: cae sobre la parte baja de la
   foto, que es clara y de color variable, y en blanco se perdía. */
.howlink{display:none; cursor:pointer; font-family:inherit;
  align-items:center; gap:7px; height:38px; padding:0 18px;
  border:0; border-radius:var(--r-pill);
  background:rgba(255,255,255,.92); color:var(--n100);
  font-size:14px; font-weight:700; backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(16,16,17,.14)}
.howlink .ico{font-size:16px; color:var(--pur)}

/* ---------- Secciones ---------- */
.section{padding-top:clamp(40px,4.6vw,88px)}
.section-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:clamp(20px,1.9vw,36px)}
.section-head h2{font-size:clamp(24px,2.1vw,40px); font-weight:900; letter-spacing:-.03em}
.hpill{display:inline-flex; align-items:center; height:32px; padding:0 14px;
  border-radius:var(--r-pill); background:var(--pur); color:var(--n0);
  font-size:13px; font-weight:900}
.count{font-size:14px; color:var(--n70)}

/* ---------- Categorías ---------- */
.cats{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.3vw,24px)}
.cat{border:0; background:transparent; padding:0; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:14px; font-family:inherit}
.cat-ico{display:block; position:relative; aspect-ratio:243/190; border-radius:var(--r-card);
  background:var(--tint,var(--t1)); overflow:hidden; transition:transform .18s}
.cat:hover .cat-ico{transform:translateY(-3px)}
.cat-ico img{position:absolute; inset:12%; width:76%; height:76%; object-fit:contain;
  margin:auto; filter:drop-shadow(0 6px 14px rgba(16,16,17,.14))}
.cat-n{font-size:clamp(15px,1vw,19px); font-weight:900; letter-spacing:-.02em; color:var(--n100)}
.cat-c{display:none}
.cat-ask .cat-ico{display:flex; align-items:center; justify-content:center;
  background:var(--pur-10); color:var(--pur-120); font-size:44px}

/* ---------- Cards de producto ---------- */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px);
  padding-bottom:8px}
.toprow{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.3vw,16px)}

.card{position:relative; display:flex; flex-direction:column; gap:12px; color:inherit}
.card-img{position:relative; aspect-ratio:1/1; border-radius:var(--r-card);
  background:var(--tint,var(--t1)); overflow:hidden; transition:transform .18s}
.card:hover .card-img{transform:translateY(-3px)}
.card-img img{position:absolute; inset:11%; width:78%; height:78%; object-fit:contain;
  margin:auto; filter:drop-shadow(0 8px 18px rgba(16,16,17,.16))}
/* Las 2 fotos que no tenían fondo blanco no se pudieron recortar: van dentro de
   un recuadro blanco para que no se vea el borde recto sobre el pastel. */
.card-img img.raw{inset:14%; width:72%; height:72%; border-radius:18px;
  object-fit:cover; background:var(--n0); filter:none}
.card-badge{position:absolute; top:14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; height:30px; padding:0 12px;
  border-radius:var(--r-pill); background:var(--pur); color:var(--n0);
  font-size:12px; font-weight:900}
.card-body{display:flex; flex-direction:column; gap:9px; padding-inline:8px}
.card-name{font-size:16px; font-weight:700; line-height:1.25; color:var(--n100)}
.card-name span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
.card-price{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.card-price b{font-size:22px; font-weight:900; letter-spacing:-.02em}
.card-price s{font-size:14px; font-weight:400; color:var(--n60)}
.card-pag{font-size:13px; font-weight:700; color:var(--pur-120)}
.card-store{display:none}

/* ---------- Chips de tienda / categoría ---------- */
.filters{display:flex; align-items:center; gap:10px; margin-left:auto}
.chiprow{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chiprow-l{display:none}
.chip{flex:none; display:inline-flex; align-items:center; gap:7px; height:42px;
  padding:0 18px; border-radius:var(--r-pill); background:var(--n0);
  border:1px solid var(--n30); color:var(--n100); font-size:14px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:border-color .15s, background .15s, color .15s}
.chip:hover{border-color:var(--pur)}
.chip.on{background:var(--pur); border-color:var(--pur); color:var(--n0)}
.chip img{height:15px; width:auto}
.chip-e{font-size:15px; line-height:1}
#catChips{display:none}

/* botón Filtros (mobile) */
.filterbar{display:none; align-items:center; gap:12px; width:100%}
.fbtn{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px;
  border-radius:var(--r-pill); background:var(--n0); border:1px solid var(--n30);
  color:var(--n100); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer}
.fbtn.on{border-color:var(--pur); color:var(--pur-120)}
.fbtn .ico{font-size:17px}
.fbtn-n{min-width:19px; height:19px; padding:0 5px; border-radius:var(--r-pill);
  background:var(--pur); color:var(--n0); font-size:11px; font-weight:900;
  display:inline-flex; align-items:center; justify-content:center}
.fbtn-n[hidden]{display:none}
.fcount{margin-left:auto; font-size:13px; color:var(--n70)}

/* ---------- Paginación ---------- */
.pager{display:flex; justify-content:center; align-items:center; gap:8px;
  padding:clamp(24px,3vw,44px) 0 0}
.pg{min-width:42px; height:44px; padding:0 12px; border-radius:var(--r-pill);
  border:1px solid var(--n30); background:var(--n0); color:var(--n100);
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:all .15s}
.pg:hover{border-color:var(--pur); color:var(--pur-120)}
.pg.on{background:var(--pur); border-color:var(--pur); color:var(--n0)}
.pg[disabled]{opacity:.4; cursor:default}
.pg-gap{color:var(--n60); padding:0 2px}
.pg-nav .ico{font-size:18px}

/* ---------- Banda CTA ---------- */
.ctaband{background:var(--pur); border-radius:var(--r-band); color:var(--n0);
  text-align:center; padding:clamp(40px,5vw,92px) 24px;
  margin-top:clamp(48px,5.5vw,104px)}
.ctaband h2{color:var(--n0); font-size:clamp(28px,3.3vw,64px); font-weight:900;
  letter-spacing:-.03em; line-height:1.02; margin-bottom:clamp(22px,2.2vw,42px)}
.ctabtn{display:inline-flex; align-items:center; gap:12px; height:60px; padding:0 32px;
  border-radius:var(--r-pill); background:var(--n0); color:var(--pur-120);
  font-size:18px; font-weight:700; transition:transform .15s, box-shadow .15s}
.ctabtn:hover{color:var(--pur-120); transform:translateY(-2px); box-shadow:0 10px 24px rgba(16,16,17,.2)}
.ctabtn .ico{font-size:20px; color:var(--wa)}

/* ---------- Footer ---------- */
.footer{margin-top:clamp(40px,4vw,72px); padding-bottom:40px}
.footer .wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--n30); padding-top:24px}
.f-logo{height:22px; width:auto; flex:none}
.legal{font-size:12px; color:var(--n60); flex:1 1 260px}
.footer nav{display:flex; gap:20px; flex-wrap:wrap}
.footer nav a{font-size:13px; font-weight:700; color:var(--pur)}
.footer nav a:hover{color:var(--pur-120)}

/* ---------- Estado vacío ---------- */
.empty{grid-column:1/-1; text-align:center; padding:56px 20px;
  background:var(--pur-10); border-radius:var(--r-card)}
.empty-ico{font-size:40px; color:var(--pur); margin-bottom:12px}
.empty h3{font-size:21px; font-weight:900; margin-bottom:8px}
.empty p{margin:0 0 20px; color:var(--n70)}
.wabtn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 26px; border-radius:var(--r-pill); background:var(--pur);
  color:var(--n0); font-size:16px; font-weight:700; transition:background .15s}
.wabtn:hover{background:var(--pur-120); color:var(--n0)}
.wabtn .ico{font-size:19px}

/* ---------- Popup "cómo funciona" ---------- */
.modal{position:fixed; inset:0; z-index:70; background:rgba(16,16,17,.5);
  display:flex; align-items:center; justify-content:center; padding:20px}
.modal[hidden]{display:none}
.modal-card{width:100%; max-width:430px; background:var(--n0); border-radius:32px;
  padding:28px; display:flex; flex-direction:column; gap:24px;
  box-shadow:0 20px 50px rgba(16,16,17,.3)}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.modal-head h3{font-size:22px; font-weight:900; letter-spacing:-.02em}
.sheet-x{width:36px; height:36px; border:0; border-radius:var(--r-pill);
  background:var(--n10); color:var(--n80); cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.sheet-x .ico{font-size:19px}
.howsteps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.howsteps li{display:flex; align-items:flex-start; gap:13px}
.howsteps b{width:27px; height:27px; flex:none; border-radius:var(--r-pill);
  background:var(--pur-10); color:var(--pur-120); display:inline-flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:900}
.howsteps strong{display:block; font-size:15px; font-weight:700}
.howsteps span{display:block; font-size:14px; line-height:1.45; color:var(--n70)}

/* ============================================================
   Página de producto
   ============================================================ */
.pdp-wrap{max-width:var(--maxw); margin:0 auto; padding:28px 24px 72px}
.back{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700;
  color:var(--n70); margin-bottom:28px}
.back:hover{color:var(--pur-120)}
.back .ico{font-size:18px}
.pdp{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,3.4vw,64px);
  align-items:start}
.pdp-gal{display:flex; flex-direction:column; gap:14px}
.pdp-main{position:relative; aspect-ratio:1/1; border-radius:var(--r-card);
  background:var(--tint,var(--t1)); overflow:hidden}
.pdp-main img{position:absolute; inset:10%; width:80%; height:80%; object-fit:contain;
  margin:auto; filter:drop-shadow(0 12px 26px rgba(16,16,17,.18))}
.pdp-badge{position:absolute; top:18px; left:18px; display:inline-flex; align-items:center;
  height:34px; padding:0 15px; border-radius:var(--r-pill); background:var(--pur);
  color:var(--n0); font-size:13px; font-weight:900}
.thumbs{display:flex; gap:10px}
.thumbs img{width:76px; height:76px; object-fit:contain; padding:8px; cursor:pointer;
  border-radius:18px; background:var(--n10); border:2px solid transparent}
.thumbs img.on{border-color:var(--pur)}
.pdp-info{display:flex; flex-direction:column; gap:16px}
.pdp-eyebrow{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700;
  color:var(--n70); text-transform:uppercase; letter-spacing:.04em}
.pdp-eyebrow img{height:16px; width:auto}
.pdp h1{font-size:clamp(24px,2.3vw,36px); font-weight:900; letter-spacing:-.03em; line-height:1.1}
.pdp-disc{font-size:14px; font-weight:900; color:var(--pur-120)}
.pdp-cuota{display:flex; align-items:baseline; gap:7px}
.pdp-cuota b{font-size:clamp(34px,3.2vw,46px); font-weight:900; letter-spacing:-.03em}
.pdp-cuota span{font-size:16px; font-weight:700; color:var(--n70)}
.pdp-tot{font-size:14px; color:var(--n70); margin-top:2px}
.pdp-tot s{margin-right:7px; color:var(--n60)}
.paybox{display:flex; gap:12px; padding:18px; border-radius:22px;
  background:var(--pur-10); color:var(--pur-120)}
.paybox .ico{font-size:22px; flex:none; margin-top:2px}
.paybox p{margin:0; font-size:14px; line-height:1.5; color:var(--n80)}
.paybox b{color:var(--pur-120); font-weight:900}
.buy{display:inline-flex; align-items:center; justify-content:center; gap:11px;
  height:60px; border-radius:var(--r-pill); background:var(--pur); color:var(--n0);
  font-size:18px; font-weight:700; box-shadow:var(--sh-pur); transition:background .15s}
.buy:hover{background:var(--pur-120); color:var(--n0)}
.buy .ico{font-size:21px}
.link-btn{display:block; font-size:15px; font-weight:700; color:var(--pur-120)}
.fineprint{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--n60)}
.fineprint .ico{font-size:16px}
.related{margin-top:clamp(48px,5vw,88px)}
.related h2{font-size:clamp(22px,2.1vw,32px); font-weight:900; letter-spacing:-.03em;
  margin-bottom:24px}

/* ============================================================
   MOBILE — 95% del tráfico.
   Mismo diseño, no una versión recortada: se conservan la foto del hero, el
   titular gigante, los pasteles y el morado. Lo que cambia es la densidad, y
   se mantiene el UX que ya habíamos validado: buscador protagonista, pasos
   dentro del popup, categorías y tiendas dentro de Filtros, paginación.

   Escala vertical: 8 · 12 · 16 · 24 · 32 · 40 · 48
   ============================================================ */
@media (max-width:860px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .toprow{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:1fr; gap:28px}
}

@media (max-width:640px){
  :root{--hdr-h:64px; --r-card:26px; --r-band:34px}
  .wrap{padding-inline:18px}

  /* ---- Header ---- */
  .brand img{height:26px}
  .hdr-cta{height:40px; padding:0 15px; font-size:0; gap:0}
  .hdr-cta .ico{font-size:20px}

  /* ---- Hero ----
     El titular crece en proporción al ancho (a 12.6vw quedaría chico en un
     teléfono) y la foto se recorta más alta para que se vean los productos
     cayendo, que es lo que hace que la portada funcione. */
  /* En mobile el alto lo pone el contenido, así que la foto se recorta por
     ancho y el anclaje proporcional no aplica: vuelve al flujo normal. */
  .hero{min-height:auto; border-radius:0 0 var(--r-band) var(--r-band);
    align-items:flex-end}
  .hero-bg{object-position:center 38%}
  /* El header flota encima (position:absolute), así que el contenido tiene que
     arrancar por debajo de él o el titular se le mete al logo. */
  .hero-in{padding-top:calc(var(--hdr-h) + 26px); padding-bottom:32px}
  .hero h1{margin-bottom:30px}
  .hero h1 span{font-size:12.4vw}
  .hero h1 em{font-size:19.4vw}   /* 21vw tocaba los bordes con "comprar" */

  .askrow{width:100%}
  .askfield{height:58px; padding-left:18px; padding-right:62px; gap:10px}
  .askfield .ico{font-size:20px}
  .askfield input{font-size:16px}   /* 16px evita el zoom automático de iOS */
  .askbtn{right:6px; width:46px; height:46px; padding:0; gap:0}
  .askbtn span{display:none}
  .askbtn .ico{font-size:20px}

  .hero-sub{margin-top:20px; font-size:15px; max-width:30ch}
  .howlink{display:inline-flex; margin-top:18px}

  /* ---- Secciones ---- */
  .section{padding-top:40px}
  .section-head{margin-bottom:16px; gap:10px}
  .section-head h2{font-size:23px}

  /* Categorías y top ofertas: filas scrolleables. El sangrado va SOLO a la
     derecha —ahí comunica que hay más contenido—; a la izquierda arrancan
     alineadas con el título de la sección. */
  .cats, .toprow{display:flex; overflow-x:auto; gap:12px; scrollbar-width:none;
    margin-right:-18px; padding-right:18px; scroll-snap-type:x proximity}
  .cats::-webkit-scrollbar, .toprow::-webkit-scrollbar{display:none}
  .cats > *{flex:0 0 42%; scroll-snap-align:start}
  .toprow > *{flex:0 0 62%; scroll-snap-align:start}
  .cat{gap:10px}
  .cat-n{font-size:14px}

  /* ---- Explora todo ---- */
  /* "Explora todo" en una línea y Filtros pegado a la derecha. `display:contents`
     disuelve .filters para que .filterbar y #chiprows sean hijos directos de la
     fila: así el botón se va al extremo derecho y los chips, al abrirse, bajan a
     su propia línea a todo el ancho. */
  #catalogo .section-head{flex-wrap:wrap; row-gap:14px; gap:12px}
  #catalogo .section-head h2{white-space:nowrap}
  #catalogo .count{display:none}
  .filters{display:contents}
  .filterbar{display:flex; width:auto; margin-left:auto}
  .fcount{display:none}           /* el contador no aporta y apretaba la fila */
  #chiprows{display:none; width:100%; flex-direction:column; gap:10px}
  .filters.open #chiprows{display:flex}
  #catChips{display:flex}
  .chiprow{margin-right:-18px; padding-right:18px}

  .grid{grid-template-columns:repeat(2,1fr); gap:14px}
  .card{gap:10px}
  .card-body{gap:6px; padding-inline:4px}
  .card-name{font-size:14px}
  .card-price b{font-size:19px}
  .card-price s{font-size:13px}
  .card-pag{font-size:12px}
  .card-badge{top:10px; left:10px; height:26px; padding:0 10px; font-size:11px}
    
  .pager{padding-top:28px; gap:6px}
  .pg{min-width:38px; height:40px; padding:0 9px; font-size:14px}

  /* ---- Banda CTA y footer ---- */
  .ctaband{margin-top:48px; padding:36px 22px; border-radius:var(--r-band)}
  .ctabtn{height:54px; padding:0 24px; font-size:16px}
  .footer .wrap{gap:16px}
  .footer nav{gap:16px; width:100%}

  /* ---- Popup ---- */
  .modal{padding:16px}
  .modal-card{padding:24px; gap:20px; border-radius:26px}

  /* ---- PDP ---- */
  .pdp-wrap{padding:20px 18px 56px}
  .back{margin-bottom:20px}
  .thumbs img{width:62px; height:62px}
  .related{margin-top:44px}
  .related .grid{grid-template-columns:repeat(2,1fr)}
}