/* =========================================================
   El Gato Vapeador · Estilos de la tienda
   Base negra, acento naranja fuego, sin esquinas redondas.
   ========================================================= */
:root{color-scheme:dark;
  --bg:#000000;--bg-2:#26242b;--bg-3:#322f38;--ink:#111014;--ink-2:#1d1b21;--text:#f3f2f5;--mute:#9a96a1;--line:#3d3a44;
  --fire:#ffad00;--fire-d:#f29a00;--fire-ink:#ffbf3d;--ok:#14a05a;--wa:#25d366;--err:#c62828;
  --text-2:#c9c6cf;--card:var(--bg-2);--card-img:var(--bg-3);--hover-line:#5a5662;--star-off:#4a4652;
  --frame:var(--bg);--panel:var(--bg-2);--panel-2:var(--bg-3);--btn-dark:var(--bg-3);--btn-dark-h:#45414c;
  --inv-bg:#fff;--inv-text:var(--ink);--ok-bg:#0f2a1c;--ok-text:#b7f0cf;--err-bg:#2d1214;--err-text:#ffb4b4;
  --f-display:"Anybody","Arial Black",system-ui,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* tema claro (el visitante lo elige con el botón del encabezado) */
:root[data-theme="light"]{color-scheme:light;
  --bg:#ffffff;--bg-2:#f4f3f1;--bg-3:#ebe9e6;--text:#111014;--text-2:#3a3740;--mute:#6d6a72;--line:#e3e1dd;--fire-ink:#9a5f00;
  --card:#ffffff;--card-img:var(--bg-2);--hover-line:#cfcbc5;--star-off:#d9d6d1;
  --frame:var(--ink);--panel:var(--ink);--panel-2:var(--ink);--btn-dark:var(--ink);--btn-dark-h:#000;
  --inv-bg:var(--ink);--inv-text:#fff;--ok-bg:#e9f7ef;--ok-text:#0f5132;--err-bg:#fdecec;--err-text:#8a1c1c;
}
*,*::before,*::after{box-sizing:border-box;border-radius:0!important}
[hidden]{display:none!important}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fire);outline-offset:2px}
.wrap{max-width:1320px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;line-height:.95}
p{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;padding:12px 20px;font-weight:800;font-size:.88rem;letter-spacing:.02em;cursor:pointer;background:var(--fire);color:var(--ink);text-transform:uppercase;transition:background .2s}
.btn:hover{background:var(--fire-d)}
.btn.dark{background:var(--btn-dark);color:#fff}.btn.dark:hover{background:var(--btn-dark-h)}
.btn.light{background:#fff;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--text);border:1.5px solid var(--text)}
.btn[disabled]{background:var(--bg-3);color:var(--mute);cursor:not-allowed}
.lbl{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* top bar */
.topbar{background:var(--frame);color:#d6d4da;font-size:.78rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:8px;flex-wrap:wrap}
.topbar b{color:#fff}.topbar .r{display:flex;gap:20px}
.topbar a:hover{color:#fff}

/* header */
header.h{background:var(--bg);border-bottom:1px solid var(--line)}
header.h .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"tg logo icons" "search search search";gap:0 28px;align-items:center;padding-block:12px}
header.h .logo-img{grid-area:logo}header.h .hicons{grid-area:icons;justify-self:end}
header.h .search{grid-area:search;display:none;height:50px}
/* buscador que se estira al hacer clic */
.hsx{grid-area:tg;justify-self:start;display:flex;align-items:center;height:54px;width:54px;max-width:100%;border:2px solid var(--line);background:var(--card);overflow:hidden;transition:width .45s cubic-bezier(.22,.9,.3,1),border-color .25s}
.hsx:hover{border-color:var(--hover-line)}
.hsx.open{width:480px;border-color:var(--fire)}
.hsx-tg{flex:none;display:flex;align-items:center;justify-content:center;width:50px;height:100%;padding:0;background:none;border:0;color:inherit;cursor:pointer;font:inherit;font-size:.8rem;text-align:left}
.hsx-tg .t{display:none}
.hsx-tg small{color:var(--mute);font-size:.7rem}.hsx-tg b{font-size:.88rem;color:var(--text)}
.hsx input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;font-size:.95rem;padding:0 10px;opacity:0;transition:opacity .25s}
.hsx.open input{opacity:1;transition-delay:.15s}
.hsx-go{flex:none;width:0;height:100%;border:0;padding:0;background:var(--fire);color:var(--ink);display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:width .35s}
.hsx.open .hsx-go{width:50px}
.logo{font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 150;font-size:1.7rem;letter-spacing:-.01em;line-height:.9;display:block;text-transform:uppercase}
.logo span{color:var(--fire)}
.logo-img{display:block;line-height:0}.logo-img img{height:120px;width:auto}
footer .logo-img img{height:120px}
.gate-box .gl{width:150px;height:auto;justify-self:center}
.logo small{display:block;font-family:var(--f-body);font-size:.6rem;font-weight:700;letter-spacing:.3em;color:var(--mute);margin-top:4px;text-transform:uppercase}
.search{display:flex;border:2px solid var(--line);overflow:hidden;max-width:640px;width:100%;justify-self:center}
.search input{flex:1;min-width:0;border:0;padding:12px 16px;font-size:.92rem;outline:none;background:var(--bg-2)}
.search button{border:0;background:var(--fire);color:var(--ink);padding:0 18px;cursor:pointer;display:grid;place-items:center}
.hicons{display:flex;gap:10px;align-items:center}
.hicon{display:flex;justify-content:center;align-items:center;width:54px;height:54px;padding:0;border:2px solid var(--line);background:var(--card);transition:border-color .2s}
.hicon:hover{border-color:var(--fire)}
.hicon .t{display:none}
.hicon small{display:block;color:var(--mute);font-size:.7rem}
.hicon b{font-size:.88rem;color:var(--text)}
.cart-ic{position:relative;display:block;line-height:0}
.cart-ic .n{position:absolute;top:-9px;right:-11px;line-height:1;background:var(--fire);color:var(--ink);font-size:.66rem;font-weight:800;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px}

/* menú */
nav.menu{background:var(--frame);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
nav.menu .wrap{display:flex;overflow-x:auto;scrollbar-width:none}
nav.menu .wrap::-webkit-scrollbar{display:none}
nav.menu a{color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:15px 16px;white-space:nowrap;display:block}
nav.menu a:hover,nav.menu a.on{background:var(--fire);color:var(--ink)}
nav.menu a.hot{color:var(--fire)}nav.menu a.hot:hover{color:var(--ink)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bg-2);border-bottom:3px solid var(--fire);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.mega .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.4fr);gap:28px;padding-block:28px}
.mega h4{margin:0 0 10px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.mega li a{font-weight:600;font-size:.92rem}.mega li a:hover{color:var(--fire-ink)}
.mega .promo{background:var(--panel-2);color:#fff;padding:22px;display:grid;gap:10px;align-content:end;min-height:170px}
.mega .promo h3{font-size:1.5rem;font-variation-settings:"wdth" 140;font-weight:900}

/* hero */
.hero{padding-block:20px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:16px}
.slider{position:relative;overflow:hidden;background:var(--ink);min-height:440px}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;padding:clamp(24px,5vw,56px);gap:16px;opacity:0;transition:opacity .6s;pointer-events:none;background:var(--ink)}
.slide.on{opacity:1;pointer-events:auto}
.slide .tag{display:inline-block;background:var(--fire);color:var(--ink);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px}
.slide h1,.slide h2{color:#fff;font-size:clamp(2.6rem,6.5vw,5.6rem);font-weight:900;font-variation-settings:"wdth" 150;letter-spacing:-.02em;line-height:.86;margin-top:14px}
.slide em{font-style:normal;color:var(--fire)}
.slide p{color:#c9c6cf;margin-top:14px;max-width:36ch;font-size:1rem}
.slide .cta{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.slide .vis{display:flex;justify-content:center;align-items:end;gap:6px}
.slide .vis img{max-height:340px;object-fit:contain}
.slide .vis svg{filter:drop-shadow(0 30px 30px rgba(0,0,0,.5))}
.slide.naranja{background:var(--fire)}.slide.naranja em{color:var(--ink)}.slide.naranja p{color:var(--ink)}.slide.naranja h1,.slide.naranja h2{color:var(--ink)}.slide.naranja em{color:#fff;-webkit-text-stroke:0}.slide.naranja .tag{background:var(--ink)}
.slide.naranja .btn{background:var(--ink)}
.slide.gris{background:#2a2730}
.dots{position:absolute;left:clamp(24px,5vw,56px);bottom:20px;display:flex;gap:8px;z-index:2}
.dots button{width:28px;height:4px;border:0;background:rgba(255,255,255,.35);cursor:pointer;padding:0}
.dots button[aria-current="true"]{background:#fff;width:48px}
.arrows{position:absolute;right:20px;bottom:16px;display:flex;gap:8px;z-index:2}
.arrows button{width:40px;height:40px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.25);color:#fff;cursor:pointer;font-size:1rem}
.side{display:grid;gap:16px}
.ban{padding:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;overflow:hidden;min-height:212px}
.ban h3{font-size:1.7rem;font-variation-settings:"wdth" 140;font-weight:900}
.ban h3 em{color:var(--fire);font-style:normal}
.ban p{font-size:.86rem;margin-top:6px}
.ban .lnk{display:inline-block;margin-top:12px;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid currentColor}
.ban.a{background:var(--bg-2)}.ban.a h3 em,.ban.d h3 em{color:var(--fire-ink)}.ban.b{background:var(--panel-2);color:#fff}
.ban.c{background:var(--fire);color:var(--ink)}.ban.c h3{font-size:2.2rem}.ban.d{background:var(--bg-2)}.ban.d h3{font-size:2.2rem}

/* beneficios */
.perks .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-block:6px 10px}
.perk{display:flex;gap:12px;align-items:center;background:var(--bg-2);padding:14px 16px}
.perk .i{width:40px;height:40px;background:var(--fire);color:var(--ink);display:grid;place-items:center;flex:none}
.perk b{display:block;font-size:.88rem}.perk span{font-size:.78rem;color:var(--mute)}

/* secciones */
section{padding-block:clamp(36px,5vw,56px)}
.shead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.shead h1,.shead h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:900;font-variation-settings:"wdth" 140;letter-spacing:-.01em;text-transform:uppercase}
.shead em{font-style:normal;background:var(--fire);color:var(--ink);padding:0 .12em}
.shead .nav{display:flex;gap:8px;align-items:center}
.shead .nav a{font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--fire);margin-right:8px}
.rb{width:40px;height:40px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-size:1rem}
.rb:hover{background:var(--fire);border-color:var(--fire);color:var(--ink)}
.crumbs{font-size:.78rem;color:var(--mute);padding-block:16px 0;display:flex;gap:6px;flex-wrap:wrap}
.crumbs a:hover{color:var(--fire-ink)}

/* categorías */
.cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cat{background:var(--bg-2);padding:18px 12px 16px;display:grid;justify-items:center;gap:10px;transition:background .2s,transform .2s;text-align:center}
.cat:hover{background:var(--bg-3);transform:translateY(-3px)}
.cat .ic{height:96px;display:flex;align-items:end}
.cat b{font-family:var(--f-display);font-variation-settings:"wdth" 125;font-weight:800;font-size:.95rem;text-transform:uppercase}
.cat span{font-size:.72rem;color:var(--mute)}

/* filas y grillas de productos */
.row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*14px)/5);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.row::-webkit-scrollbar{display:none}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.card{scroll-snap-align:start;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s,border-color .2s;min-width:0}
.card:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.8);border-color:var(--hover-line)}
.card .img{position:relative;aspect-ratio:1/1;max-width:100%;width:100%;background:var(--card-img);display:grid;place-items:center;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .bdg{position:absolute;top:10px;left:10px;display:grid;gap:5px;justify-items:start;z-index:1}
.card .bdg span,.bdg-i{font-size:.66rem;font-weight:800;letter-spacing:.04em;padding:4px 7px;text-transform:uppercase}
.b-off{background:var(--fire);color:var(--ink)}.b-new{background:var(--inv-bg);color:var(--inv-text)}.b-free{background:var(--ok);color:#fff}.b-may{background:#5b2bd6;color:#fff}
.card .body{padding:14px;display:grid;gap:6px;flex:1;align-content:start}
.brand{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fire-ink)}
.card .name{font-weight:700;line-height:1.25;font-size:.92rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.card .name:hover{color:var(--fire-ink)}
.sel,.inp,select.inp,textarea.inp{width:100%;border:1px solid var(--line);padding:9px 11px;font-size:.88rem;background:var(--bg)}
.sel{padding:7px 9px;font-size:.8rem}
.inp:focus,.sel:focus{outline:2px solid var(--fire);outline-offset:-1px}
.price{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.price b{font-family:var(--f-display);font-variation-settings:"wdth" 120;font-weight:900;font-size:1.3rem;font-variant-numeric:tabular-nums}
.price s{color:var(--mute);font-size:.8rem}
.eta{font-size:.74rem;color:var(--ok);font-weight:700}.eta.no{color:var(--mute)}
.card form{display:grid;gap:6px;margin-top:auto}
.card .btn{width:100%;margin-top:4px;padding:11px;font-size:.78rem}
.empty{padding:40px;text-align:center;color:var(--mute);border:1px dashed var(--line);grid-column:1/-1}

/* listado de categoría */
.listing{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
.filters{display:grid;gap:22px;position:sticky;top:70px}
.filters h4{margin:0 0 10px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.filters ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-weight:600;font-size:.9rem}
.filters a.on{color:var(--fire-ink);text-decoration:underline;text-decoration-color:var(--fire);text-decoration-thickness:3px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:.85rem;color:var(--mute)}
.toolbar select{width:auto}
.pager{display:flex;gap:6px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;border:1.5px solid var(--line);font-weight:800;padding:0 10px}
.pager span{background:var(--fire);border-color:var(--fire);color:var(--ink)}

/* producto */
.pdp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;padding-block:24px 56px}
.gallery{display:grid;gap:10px;align-self:start;align-content:start}
.gallery .main{aspect-ratio:1/1;max-width:100%;background:var(--bg-2);display:grid;place-items:center;overflow:hidden;position:relative}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs button{width:76px;height:76px;border:2px solid transparent;padding:0;background:var(--bg-2);cursor:pointer;overflow:hidden}
.thumbs button[aria-current="true"]{border-color:var(--fire)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pinfo{display:grid;gap:16px;align-content:start}
.pinfo h1{font-size:clamp(1.9rem,3.6vw,2.8rem);font-variation-settings:"wdth" 120;font-weight:900;line-height:1}
.pinfo .price b{font-size:2.2rem;background:var(--fire);color:var(--ink);padding:2px 10px}
.opts{display:flex;gap:6px;flex-wrap:wrap}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:block;border:1.5px solid var(--line);padding:9px 14px;font-size:.85rem;font-weight:600;cursor:pointer;background:var(--card)}
.opts input:checked+span{border-color:var(--fire);background:var(--fire);color:var(--ink)}
.opts input:disabled+span{color:var(--mute);text-decoration:line-through;cursor:not-allowed;background:var(--bg)}
.opts input:focus-visible+span{outline:2px solid var(--fire)}
.qtyrow{display:flex;gap:10px;flex-wrap:wrap}
.qtyrow input{width:90px}
.qtyrow .btn{flex:1;min-width:200px;padding:15px}
.pfacts{border-top:1px solid var(--line)}
.pfacts div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.pfacts span:first-child{color:var(--mute)}
.desc{font-size:.95rem;line-height:1.7;color:var(--text-2);max-width:65ch}
.wa-btn{background:var(--wa);color:#fff}.wa-btn:hover{background:#1eb257}

/* reseñas */
.stars{position:relative;display:inline-block;line-height:1;letter-spacing:2px;color:var(--star-off);white-space:nowrap;vertical-align:-1px}
.stars::before,.stars i::before{content:"★★★★★"}
.stars i{position:absolute;inset:0 auto 0 0;overflow:hidden;color:var(--fire)}
.reviews{padding-block:32px 56px}
.rv-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:-8px 0 18px}
.rv-top b{font-family:var(--f-display);font-variation-settings:"wdth" 130;font-weight:900;font-size:2rem;line-height:1}
.rv-top .stars{font-size:1.2rem}.rv-top span{font-size:.85rem;color:var(--mute);font-weight:600}
.rv-top .btn{margin-left:auto}
.rv-row{grid-auto-columns:calc((100% - 3*14px)/4)}
.rv-card{scroll-snap-align:start;border:1px solid var(--line);background:var(--card);padding:20px;display:grid;grid-template-rows:auto 1fr auto auto;gap:10px;min-width:0}
.rv-card p{font-size:.92rem;line-height:1.6;color:var(--text-2)}
.rv-card time{font-size:.78rem;color:var(--mute)}
.whole.alt{border:2px solid var(--fire)}
#opinar{scroll-margin-top:16px}
.rv-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:start}
.rv-list{display:grid;gap:0}
.rv-sum{display:flex;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.rv-sum b{font-family:var(--f-display);font-variation-settings:"wdth" 130;font-weight:900;font-size:3.4rem;line-height:1}
.rv-sum div{display:grid;gap:6px}.rv-sum .stars{font-size:1.3rem}.rv-sum span{font-size:.85rem;color:var(--mute);font-weight:600}
.rv{padding:18px 0;border-bottom:1px solid var(--line);display:grid;gap:8px}
.rv-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.rv-h time{margin-left:auto;font-size:.8rem;color:var(--mute)}
.rv p{font-size:.95rem;line-height:1.6;color:var(--text-2)}
.rv-empty{color:var(--mute);font-size:.95rem;line-height:1.6}
.rv-form h2{font-family:var(--f-display);font-variation-settings:"wdth" 130;font-weight:900;font-size:1.4rem;text-transform:uppercase}
.rate{border:0;padding:0;margin:0;display:grid;gap:4px}
.rate-in{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end}
.rate-in input{position:absolute;opacity:0;pointer-events:none}
.form .rate-in label{display:block;font-size:2.2rem;line-height:1;font-weight:400;color:var(--star-off);cursor:pointer;padding:0 3px;transition:color .15s}
.rate-in label:hover,.rate-in label:hover~label,.rate-in input:checked~label{color:var(--fire)}
.rate-in input:focus-visible+label{outline:2px solid var(--text);outline-offset:2px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* carrito y checkout */
.cart-page{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:start;padding-bottom:56px}
.ctable{width:100%;border-collapse:collapse}
.ctable th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:10px 8px;border-bottom:2px solid var(--text)}
.ctable td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.ctable .th{width:72px;height:72px;background:var(--bg-2);display:grid;place-items:center;overflow:hidden}
.ctable .th img{width:100%;height:100%;object-fit:cover}
.ctable input{width:70px}
.ctable .x{background:none;border:0;color:var(--mute);cursor:pointer;font-size:.8rem;text-decoration:underline}
.box{background:var(--bg-2);padding:24px;display:grid;gap:14px}
.box .ln{display:flex;justify-content:space-between;font-size:.92rem}
.box .tot{font-family:var(--f-display);font-variation-settings:"wdth" 130;font-weight:900;font-size:1.5rem;border-top:2px solid var(--text);padding-top:12px}
.bar{height:6px;background:var(--bg-3);overflow:hidden}.bar i{display:block;height:100%;background:var(--fire)}
.form{display:grid;gap:14px}
.form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form label{display:grid;gap:6px;font-size:.82rem;font-weight:700}
.radio{display:grid;gap:8px}
.radio label{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);padding:12px 14px;font-weight:600;cursor:pointer;background:var(--card)}
.radio label:has(input:checked){border-color:var(--fire)}
.radio small{margin-left:auto;color:var(--mute);font-weight:600}
.alert{padding:12px 16px;font-size:.9rem;font-weight:600;border-left:4px solid var(--ok);background:var(--ok-bg);color:var(--ok-text)}
.alert.err{border-color:var(--err);background:var(--err-bg);color:var(--err-text)}
.narrow{max-width:560px;margin:0 auto;padding-block:40px 64px}
.okbox{text-align:center;display:grid;gap:14px;justify-items:center;padding-block:56px}
.okbox .big{font-family:var(--f-display);font-variation-settings:"wdth" 150;font-weight:900;font-size:clamp(2.4rem,7vw,4.6rem);line-height:.9}
.code{font-family:ui-monospace,Menlo,monospace;background:var(--panel-2);color:#fff;padding:6px 12px;font-size:1rem}

/* mayoristas */
.whole{background:var(--panel);color:#fff;padding:clamp(28px,5vw,52px);display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:24px;align-items:center}
.whole h2{font-size:clamp(2rem,5vw,3.6rem);font-weight:900;font-variation-settings:"wdth" 150;text-transform:uppercase}
.whole h2 em{font-style:normal;color:var(--fire)}
.whole p{color:#c9c6cf;margin-top:12px;max-width:52ch}

/* newsletter y footer */
.news{background:var(--fire);color:var(--ink)}
.news .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding-block:36px}
.news h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:900;font-variation-settings:"wdth" 140;text-transform:uppercase}
.news form{display:flex;gap:8px;flex-wrap:wrap}
.news input{flex:1;min-width:0;border:0;padding:14px 16px;background:#fff;color:var(--ink)}
footer.f{background:var(--frame);border-top:1px solid var(--line);color:#c9c6cf;padding-block:52px 28px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
.fgrid h4{color:#fff;margin:0 0 14px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9rem}
.fgrid a:hover{color:#fff}
.fgrid .logo{color:#fff}
.pays{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.pays span{background:#2a2730;color:#fff;font-size:.7rem;font-weight:800;padding:6px 10px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:20px;border-top:1px solid #2a2730;font-size:.78rem;align-items:center}
.regret{border:1.5px solid var(--fire);color:var(--fire);padding:7px 14px;font-size:.75rem;font-weight:800;text-transform:uppercase}
.wa{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:58px;height:58px;background:var(--wa);display:grid;place-items:center;box-shadow:0 14px 34px -8px rgba(37,211,102,.6);z-index:45}

/* +18 y avisos */
.gate{position:fixed;inset:0;z-index:90;background:rgba(17,16,20,.94);display:grid;place-items:center;padding:16px}
.gate-box{background:var(--card);border:1px solid var(--line);padding:36px 28px;max-width:420px;text-align:center;display:grid;gap:14px}
.gate-box .big{font-family:var(--f-display);font-weight:900;font-variation-settings:"wdth" 150;font-size:4.6rem;line-height:1;color:var(--ink);background:var(--fire);justify-self:center;padding:4px 18px}
.gate-box p{color:var(--mute);font-size:.92rem}
.gate-box .r{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160px);background:var(--ink);color:#fff;padding:12px 20px;font-weight:700;font-size:.88rem;z-index:80;transition:transform .3s;max-width:calc(100% - 32px);display:flex;gap:14px;align-items:center}
.toast a{color:var(--fire);text-decoration:underline}
.toast{visibility:hidden}
.toast.show{transform:translate(-50%,0);visibility:visible}

@media (max-width:1100px){.row{grid-auto-columns:calc((100% - 3*14px)/4)}.cats{grid-template-columns:repeat(3,minmax(0,1fr))}.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .hero .wrap,.pdp,.cart-page,.listing,.rv-grid{grid-template-columns:minmax(0,1fr)}
  .side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .perks .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row{grid-auto-columns:calc((100% - 2*14px)/3)}
  .filters{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mega{display:none}
}
@media (max-width:720px){
  header.h .wrap{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo icons" "search search";gap:14px}
  header.h .logo-img img{height:76px}
  header.h .search{max-width:none;justify-self:stretch;display:flex;margin-top:0}
  .hsx{display:none}
  .topbar .r{display:none}
  .slider{min-height:520px}
  .slide{grid-template-columns:minmax(0,1fr);align-content:start}
  .slide .vis{order:-1;height:150px}
  .slide .vis img,.slide .vis svg{max-height:150px;width:auto}
  .side,.whole,.news .wrap,.form .two{grid-template-columns:minmax(0,1fr)}
  .row{grid-auto-columns:calc((100% - 14px)/2)}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctable thead{display:none}
  .ctable tr{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .ctable td{border:0;padding:0}
  .ctable td:first-child{grid-row:span 4}
}
@media (max-width:440px){
  header.h .logo-img img{height:64px}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .perks .wrap{grid-template-columns:minmax(0,1fr)}
  .row{grid-auto-columns:78%}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .logo{font-size:1.35rem}
  .card .body{padding:10px}.price b{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* botón de tema claro/oscuro */
.theme-tg{cursor:pointer;color:inherit;font:inherit}
.theme-tg .sun{display:none}
:root[data-theme="light"] .theme-tg .sun{display:block}:root[data-theme="light"] .theme-tg .moon{display:none}

/* popups en las esquinas de abajo (se cargan en Panel → Popups) */
.pop{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;width:min(340px,calc(100% - 32px));background:var(--card);border:1px solid var(--line);border-top:3px solid var(--fire);box-shadow:0 24px 50px -16px rgba(0,0,0,.6);opacity:0;transform:translateY(24px);transition:opacity .35s,transform .45s cubic-bezier(.22,.9,.3,1)}
.pop.show{opacity:1;transform:none}
.pop-izquierda{left:calc(20px + env(safe-area-inset-left,0px))}
.pop-derecha{right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.pop-x{position:absolute;top:8px;right:8px;z-index:1;width:32px;height:32px;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;font-size:.85rem}
.pop-x:hover{background:var(--fire);color:var(--ink)}
.pop-img{display:block;background:var(--card-img)}.pop-img img{width:100%;max-height:200px;object-fit:cover}
.pop-b{padding:18px 20px 20px;display:grid;gap:10px}
.pop-b h3{font-size:1.25rem;font-weight:900;font-variation-settings:"wdth" 130;text-transform:uppercase;padding-right:28px}
.pop-b p{font-size:.9rem;line-height:1.5;color:var(--text-2)}
.pop-b .btn{justify-self:start}
@media (max-width:440px){.pop{width:calc(100% - 32px);left:16px;right:auto}.pop-derecha{bottom:calc(88px + env(safe-area-inset-bottom,0px))}}

/* ---------- Celular ---------- */
.buybar{display:none}
@media (max-width:720px){
  /* barra superior en una sola línea */
  .topbar .wrap{padding-block:7px}
  .topbar .tb-extra{display:none}
  /* el menú avisa que se puede deslizar */
  nav.menu .wrap{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  nav.menu a{padding:14px 13px}
  /* 16px en los campos: el iPhone no hace zoom al tocarlos */
  .inp,.sel,select,textarea,.search input,.hsx input,.news input,.qtyrow input{font-size:16px}
  /* categorías del listado como botones deslizables */
  .filters{position:static;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
  .filters h4{display:none}
  .filters ul{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .filters ul::-webkit-scrollbar{display:none}
  .filters li{flex:none}
  .filters li a{display:block;border:1.5px solid var(--line);padding:8px 13px;font-size:.84rem;white-space:nowrap}
  .filters a.on{border-color:var(--fire);background:var(--fire);color:var(--ink);text-decoration:none}
  .listing{gap:18px}
  .toolbar{margin-bottom:12px}
  /* tarjetas de producto más compactas */
  .card .btn{font-size:.7rem;letter-spacing:0;padding:11px 6px}
  .card .name{font-size:.86rem}
  section{padding-block:30px}
  .shead h1,.shead h2{font-size:1.65rem}
  /* ficha: barra fija para comprar sin volver arriba */
  .buybar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:44;
    background:var(--card);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px -12px rgba(0,0,0,.5)}
  .buybar div{display:grid;line-height:1.1}
  .buybar b{font-family:var(--f-display);font-variation-settings:"wdth" 120;font-weight:900;font-size:1.25rem}
  .buybar s{font-size:.75rem;color:var(--mute)}
  .buybar .btn{flex:1;max-width:230px;padding:14px 10px}
  body:has(.buybar) .wa{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body:has(.buybar) footer.f{padding-bottom:100px}
  body:has(.buybar) .pop-derecha,body:has(.buybar) .pop-izquierda{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  /* botón de WhatsApp un poco más chico para no tapar contenido */
  .wa{width:52px;height:52px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  /* checkout y carrito */
  .radio label{padding:12px}
  .box{padding:18px}
}
/* texto solo para buscadores y lectores de pantalla */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Menú lateral y grillas en el celular ---------- */
.menu-tg,.menu-head,.menu-extra,.menu-bg{display:none}
@media (max-width:720px){
  /* botones del encabezado un poco más chicos para que entren los 4 */
  .hicons{gap:8px}
  .hicon{width:46px;height:46px}
  .menu-tg{display:flex}
  /* el menú pasa a ser un panel que entra desde la derecha */
  nav.menu{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(320px,86vw);z-index:70;border:0;border-left:1px solid var(--line);
    background:var(--card);transform:translateX(100%);transition:transform .35s cubic-bezier(.22,.9,.3,1);overflow-y:auto;box-shadow:-20px 0 50px -20px rgba(0,0,0,.7)}
  nav.menu.open{transform:none}
  nav.menu .wrap{display:block;padding:0;-webkit-mask-image:none;mask-image:none;overflow:visible}
  nav.menu a{color:var(--text);padding:15px 20px;border-bottom:1px solid var(--line);font-size:.9rem}
  nav.menu a.hot{color:var(--fire)}
  .menu-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 14px 20px;border-bottom:2px solid var(--fire)}
  .menu-head b{font-family:var(--f-display);font-variation-settings:"wdth" 130;font-weight:900;font-size:1.3rem;text-transform:uppercase}
  .menu-x{width:42px;height:42px;border:2px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-size:1rem}
  .menu-extra{display:block;padding-top:14px}
  .menu-extra a{font-weight:600;text-transform:none;letter-spacing:0;color:var(--mute);border:0;padding:11px 20px}
  .menu-bg{display:block;position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.6)}
  .menu-bg[hidden]{display:none!important}

  /* filas de productos: grilla de 2 columnas completas (1 producto = ancho completo) */
  .cats{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
  .row,.pgrid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));overflow:visible;gap:12px}
  .row > :nth-child(n+7){display:none}
  .shead .nav .rb{display:none}
  .rv-row{grid-template-columns:minmax(0,1fr)}
  .rv-row > :nth-child(n+4){display:none}

  /* títulos grandes: que no se corten ni toquen los bordes */
  .ban{grid-template-columns:minmax(0,1fr) auto;min-height:0;padding:20px}
  .ban h3,.ban.c h3,.ban.d h3{font-size:1.5rem;font-variation-settings:"wdth" 115;overflow-wrap:anywhere}
  .ban > div:last-child svg{width:auto;max-height:110px}
  .whole{padding:24px 20px}
  .whole h2{font-size:1.75rem;font-variation-settings:"wdth" 115;overflow-wrap:anywhere}
  .shead h1,.shead h2{font-size:1.55rem;font-variation-settings:"wdth" 125}

  /* filtros del listado: todo en una sola fila deslizable */
  .filters{display:flex;overflow-x:auto;gap:8px;scrollbar-width:none;padding-bottom:2px}
  .filters::-webkit-scrollbar{display:none}
  .filters > div,.filters ul{display:contents}
}