/* Vapemania · estilo de las páginas de colección/producto (SEO). Mismo lenguaje que la tienda:
   papel + tinta, un acento rojo, cómic en los detalles. Autocontenido (no depende de estilos.css). */
:root{
  --f-titulo:'Bangers','Impact','Arial Black',sans-serif;
  --f-texto:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  --rojo:#E64C50;--rojo-osc:#B8262E;--rojo-hover:#A11F27;--amarillo:#FAC400;--amarillo-suave:#FFF1BF;
  --papel:#FFF8EC;--papel-2:#FBEFDC;--tinta:#16110F;--gris:#5B524D;--gris-2:#8A817B;--crema:#E9E0D4;
  --blanco:#FFFFFF;--verde:#1F8A4C;--wa:#0F7A6E;
  --borde:3px solid var(--tinta);--borde-2:2px solid var(--tinta);
  --s1:3px 3px 0 var(--tinta);--s2:6px 6px 0 var(--tinta);
  --r:8px;--r2:14px;--rfull:999px;--gutter:clamp(16px,5vw,48px);--max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-texto);font-size:1.0625rem;line-height:1.6;color:var(--tinta);background:var(--papel);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titulo);font-weight:400;line-height:1.05;margin:0;letter-spacing:.02em}
:focus-visible{outline:3px solid var(--rojo-osc);outline-offset:3px;border-radius:4px}
.env{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}

.tira{background:var(--amarillo);color:var(--tinta);font-size:.75rem;text-align:center;padding:4px 12px;border-bottom:2px solid var(--tinta)}
.cab{position:sticky;top:0;z-index:20;background:rgba(255,248,236,.95);backdrop-filter:saturate(1.4) blur(8px);border-bottom:var(--borde)}
.cab .in{display:flex;align-items:center;gap:16px;min-height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.marca img{width:36px;height:auto}
.marca b{font-family:var(--f-titulo);font-weight:400;font-size:1.9rem;letter-spacing:.03em;color:var(--rojo);-webkit-text-stroke:1.1px var(--tinta);text-shadow:2px 2px 0 var(--tinta)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 22px;border:var(--borde);border-radius:var(--r);font-family:var(--f-titulo);font-size:1.3rem;letter-spacing:.04em;line-height:1;text-decoration:none;cursor:pointer;box-shadow:var(--s1);background:var(--rojo-osc);color:var(--blanco);transition:transform .15s,box-shadow .15s,background-color .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--tinta);background:var(--rojo-hover)}
.btn.b2{background:var(--wa)}
.btn.b2:hover{background:#0B645A}
.btn.b3{background:var(--blanco);color:var(--tinta)}
.btn.b3:hover{background:var(--amarillo-suave)}
.cab .btn{min-height:44px;font-size:1.1rem;padding:8px 16px}

.pg{padding:clamp(24px,4vw,44px) 0 clamp(48px,7vw,80px)}
.miga{font-size:.8125rem;color:var(--gris);margin-bottom:14px}
.miga a{color:var(--rojo-osc);text-decoration:none;font-weight:600}
.miga a:hover{text-decoration:underline}
.pg h1{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:6px}
.ceja{display:inline-block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--rojo-osc);margin-bottom:6px}
.pg-desc{max-width:70ch;color:var(--gris);margin:14px 0 8px;font-size:1.06rem}
.pg-desc p{margin:0 0 12px}
.pg h2{font-size:clamp(1.5rem,3vw,2rem);margin:32px 0 16px}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media(min-width:980px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;background:var(--blanco);border:var(--borde);border-radius:var(--r2);box-shadow:var(--s1);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translate(-3px,-3px);box-shadow:var(--s2)}
.card .ph{aspect-ratio:1;background:#fff;border-bottom:var(--borde-2);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:contain;padding:8%}
.card .bd{padding:12px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .mk{font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--gris)}
.card h3{font-size:1.05rem;line-height:1.15}
.card .pr{font-family:var(--f-titulo);font-size:1.4rem;margin-top:auto;letter-spacing:.02em}
.card .pr s{font-family:var(--f-texto);font-size:.8rem;font-weight:500;color:var(--gris-2);margin-left:4px}
.vacia{background:var(--amarillo-suave);border:var(--borde-2);border-radius:var(--r2);padding:20px;max-width:70ch}

.prod{display:grid;gap:26px}
@media(min-width:820px){.prod{grid-template-columns:minmax(0,440px) 1fr;align-items:start;gap:40px}}
.prod .hero{background:#fff;border:var(--borde);border-radius:var(--r2);box-shadow:var(--s2);overflow:hidden;aspect-ratio:1}
.prod .hero img{width:100%;height:100%;object-fit:contain;padding:6%}
.prod .pr{font-family:var(--f-titulo);font-size:2.4rem;letter-spacing:.02em;margin:6px 0}
.prod .pr s{font-family:var(--f-texto);font-size:1rem;font-weight:500;color:var(--gris-2);margin-left:8px}
.prod .pr .off{display:inline-block;margin-left:8px;background:var(--amarillo);border:2px solid var(--tinta);border-radius:6px;font-size:.8rem;font-weight:800;padding:1px 7px;vertical-align:middle}
.prod .cuerpo{margin:14px 0;max-width:66ch;color:var(--gris)}
.prod .cuerpo h2,.prod .cuerpo h3{font-family:var(--f-texto);font-weight:800;color:var(--tinta);font-size:1.1rem;margin:16px 0 6px}
.prod .cuerpo img{border-radius:8px;margin:10px 0}
.sabores{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.sabor{border:var(--borde-2);border-radius:var(--rfull);padding:5px 13px;font-size:.85rem;font-weight:600;background:#fff}
.sabor.no{opacity:.45;text-decoration:line-through}
.acc{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.nota{margin-top:14px;font-size:.9rem;color:var(--gris)}

.pie{background:var(--tinta);color:var(--crema);padding:40px 0 28px;font-size:.9rem;margin-top:40px}
.pie .cols{display:grid;gap:26px}
@media(min-width:760px){.pie .cols{grid-template-columns:2fr 1fr 1fr}}
.pie b.t{display:block;font-family:var(--f-titulo);font-weight:400;font-size:1.4rem;color:var(--amarillo);letter-spacing:.03em;margin-bottom:8px}
.pie a{color:var(--crema);text-decoration:none}
.pie a:hover{color:var(--amarillo)}
.pie .cats{display:flex;flex-wrap:wrap;gap:6px 14px}
.pie .tit{font-weight:800;text-transform:uppercase;font-size:.72rem;letter-spacing:.12em;color:#fff;margin-bottom:8px}
.pie .base{margin-top:24px;padding-top:14px;border-top:1px solid #3A2F2A;font-size:.8rem;color:#CFC6BB;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
.pie .base a{color:var(--amarillo)}