/* Tienda de Tracción Llanera: verde bosque + dorado + crema, tipografía condensada industrial. */
:root{
  --ink:#282B29;--text:#282B29;--ink-2:#454a46;--muted:#666b66;
  --bg:#F4F0E6;--surface:#fff;--surface-2:#ebe5d6;--line:#e2dbc9;--line-strong:#cbc2ab;
  --accent:#C89A3C;--accent-h:#b3872e;--accent-d:#7a5a14;--on-accent:#1b1d1b;
  --forest:#234B35;--forest-d:#1a3a29;--oliva:#234B35;--energia:#F05A28;--ok:#2f7d3b;--warn:#9a6200;--bad:#b3261e;
  --acc:var(--accent);--bg-input:#fff;
  --font-title:"Bebas Neue","Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:10px;--maxw:1240px;--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
body.con-cinta{min-height:calc(100vh - 28px)}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
img,svg{max-width:100%}
.ns{padding:24px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3,.t{font-family:var(--font-title);font-weight:400;letter-spacing:.005em;line-height:1.05;text-transform:uppercase}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#app{flex:1;display:flex;flex-direction:column}
main{flex:1}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:8px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-weight:600;font-size:.92rem;text-decoration:none;transition:transform .15s var(--ease),background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn--p{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--p:hover{background:var(--accent-h);border-color:var(--accent-h)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}
.btn--wa{background:#1f9d57;border-color:#1f9d57;color:#fff}
.btn--sm{padding:8px 14px;font-size:.84rem}
.btn--block{width:100%}
.btn[disabled],.btn.is-off{opacity:.45;pointer-events:none}
.link{background:none;border:none;color:var(--accent-d);text-decoration:underline;font:inherit;font-weight:600;padding:0}

/* anuncio + header */
.ann{background:var(--forest-d);color:#fff;font-size:.82rem;text-align:center;padding:8px 16px;font-weight:500}
.ann button{background:none;border:none;color:#e7b94d;text-decoration:underline;font:inherit;font-weight:700;padding:0 0 0 6px}
.hd-in{display:flex;align-items:center;gap:22px;padding:14px 20px;max-width:var(--maxw);margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-mark{width:44px;height:44px;border-radius:10px;flex-shrink:0;display:block;object-fit:cover}
.logo b{font-family:var(--font-title);font-size:1.8rem;line-height:.88;text-transform:uppercase;letter-spacing:.01em;display:block;color:var(--forest);font-weight:400}
.logo small{display:flex;align-items:center;gap:7px;font-family:var(--font-title);font-size:1.05rem;line-height:1;text-transform:uppercase;letter-spacing:.3em;color:var(--ink);font-weight:400;margin-top:3px}
.logo small::before,.logo small::after{content:"";flex:1;height:2px;background:var(--accent)}
.search{position:relative;flex:1;min-width:0}
.search input{width:100%;padding:11px 14px 11px 42px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--bg-input);font:inherit;font-size:.92rem}
.search .icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.14);overflow:hidden;z-index:60}
.sugg a{display:flex;gap:12px;align-items:center;padding:9px 12px;text-decoration:none;border-bottom:1px solid var(--line);font-size:.88rem}
.sugg a:last-child{border-bottom:none}
.sugg a:hover,.sugg a.on{background:var(--surface-2)}
.sugg .ph{width:38px;height:38px;flex-shrink:0;border-radius:6px}
.sugg small{display:block;color:var(--muted);font-size:.74rem}

/* placeholder de ilustración (sin fotos reales todavía) */
.ph{position:relative;background-color:#efebe1;background-image:linear-gradient(rgba(21,23,26,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(21,23,26,.06) 1px,transparent 1px);background-size:14px 14px;border-radius:8px;color:var(--ink-2);padding:12%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;--acc:var(--accent)}

/* hero */
.finder{background:var(--surface);color:var(--ink);border-radius:14px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.4);position:relative}
.finder h2{font-size:1.5rem;margin-bottom:4px}
.finder p.sm{color:var(--muted);font-size:.84rem;margin-bottom:14px}
.tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:9px;padding:4px;margin-bottom:14px}
.tabs button{flex:1;padding:8px 6px;border:none;background:none;border-radius:6px;font-weight:600;font-size:.8rem;color:var(--ink-2)}
.tabs button.on{background:var(--ink);color:#fff}
.finder select,.fsel{width:100%;padding:11px 12px;border:1.5px solid var(--line-strong);border-radius:8px;background:#fff;font:inherit;font-size:.92rem;margin-bottom:10px;color:var(--ink)}
.finder select:disabled{opacity:.5}
.finder .or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.78rem;margin:6px 0 10px}
.finder .or::before,.finder .or::after{content:"";flex:1;height:1px;background:var(--line)}
.finder .pn{display:flex;gap:8px}
.finder .pn input{flex:1;padding:11px 12px;border:1.5px solid var(--line-strong);border-radius:8px;font:inherit;font-size:.92rem;min-width:0}

/* secciones */
.sec{padding:52px 0}
.sec--alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* productos */
.grid-p{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.pcard:hover{border-color:var(--ink);box-shadow:0 14px 30px rgba(0,0,0,.09);transform:translateY(-2px)}
.pcard a.pl{text-decoration:none;display:block}
.pcard .nm{font-weight:600;font-size:.9rem;line-height:1.3;margin:12px 0 4px;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .sku{font-size:.72rem;color:var(--muted);letter-spacing:.03em}
.price{font-family:var(--font-title);font-weight:400;font-size:1.7rem;line-height:1;margin-top:10px}
.price small{display:block;font-family:var(--font);font-weight:400;font-size:.72rem;color:var(--muted);margin-top:4px}
.stk{font-size:.76rem;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:6px}
.stk::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.stk.low{color:var(--warn)}.stk.low::before{background:#d99a1a}
.stk.out{color:var(--bad)}.stk.out::before{background:var(--bad)}
.pcard .btn{margin-top:12px}

/* banda de oferta */

/* pasos */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.step{position:relative;padding:0 22px 0 0}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-title);font-weight:400;font-size:2.6rem;color:var(--accent);display:block;line-height:1}
.step b{display:block;margin-top:8px;font-size:.98rem}
.step span{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}

/* pie */
.foot{background:var(--ink);color:rgba(255,255,255,.76);padding:44px 0 26px;margin-top:40px;font-size:.88rem}
.foot-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px}
.foot h4{font-family:var(--font-title);text-transform:uppercase;color:#fff;font-size:1.1rem;letter-spacing:.04em;margin-bottom:12px}
.foot a{display:block;text-decoration:none;padding:3px 0;color:rgba(255,255,255,.76)}
.foot a:hover{color:#fff}
.foot .logo b{color:#fff}.foot .logo small{color:#fff}
.foot-aviso{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;font-size:.76rem;color:rgba(255,255,255,.55)}

/* catálogo */
.crumbs{font-size:.8rem;color:var(--muted);padding:18px 0 4px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.cat-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 18px}
.cat-top h1{font-size:clamp(2rem,4vw,3rem)}
.cat-lay{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;padding-bottom:20px}
.filtros{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;position:sticky;top:90px}
.filtros h3{font-size:1.05rem;margin-bottom:10px;letter-spacing:.04em}
.filtros ul{list-style:none;margin-bottom:18px}
.filtros li a{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:6px;text-decoration:none;font-size:.88rem;color:var(--ink-2)}
.filtros li a:hover{background:var(--surface-2)}
.filtros li a.on{background:var(--ink);color:#fff}
.filtros li a small{opacity:.65}
.chk{display:flex;gap:8px;align-items:center;font-size:.88rem;margin-bottom:14px}
.mi-eq{background:#fbf5e4;border:1px solid #e8d49c;border-radius:10px;padding:10px 12px;font-size:.84rem;margin-bottom:14px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.mi-eq b{display:block;font-size:.9rem}
.sort{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted)}
.sort select{padding:8px 10px;border:1.5px solid var(--line-strong);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.vacio{background:var(--surface);border:1px dashed var(--line-strong);border-radius:14px;padding:44px 24px;text-align:center;color:var(--ink-2)}
.vacio h3{font-size:1.5rem;margin-bottom:8px}
.vacio p{max-width:44ch;margin:0 auto 16px;color:var(--muted)}
.filtros-btn{display:none}

/* ficha */
.ficha{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;padding:14px 0 30px}
.ficha .ph{aspect-ratio:1/1;border-radius:14px;padding:14%}
.ficha .nota{font-size:.74rem;color:var(--muted);margin-top:8px}
.ficha h1{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.05}
.ficha .meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:.82rem;margin:10px 0 16px}
.ficha .price{font-size:2.7rem}
.buy{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:18px 0 10px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:8px;background:#fff;overflow:hidden}
.qty button{width:38px;height:100%;min-height:42px;border:none;background:none;font-size:1.1rem;color:var(--ink)}
.qty button:hover{background:var(--surface-2)}
.qty input{width:48px;text-align:center;border:none;font:inherit;font-weight:600;background:none;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.chec{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin:18px 0}
.chec h3{font-size:1.05rem;margin-bottom:8px;letter-spacing:.04em}
.chec .res{margin-top:10px;font-size:.88rem;font-weight:600;display:flex;gap:8px;align-items:center}
.chec .res.ok{color:var(--ok)}.chec .res.no{color:var(--bad)}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);font-weight:600}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.compat-l{display:grid;gap:8px;font-size:.88rem}
.compat-l div b{display:inline-block;min-width:150px}
.det-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;padding-bottom:20px}
.sec-s{margin-top:26px}
.sec-s h3{font-size:1.25rem;margin-bottom:10px}

/* carrito */
.cart-lay{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;padding:14px 0 24px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.line{display:grid;grid-template-columns:78px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.line:last-child{border-bottom:none}
.line .ph{width:78px;padding:10%}
.line .nm{font-weight:600;font-size:.92rem;line-height:1.3;text-decoration:none}
.line .sub{font-size:.76rem;color:var(--muted)}
.line .ctl{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.line .tot{font-family:var(--font-title);font-weight:400;font-size:1.4rem;text-align:right}
.line .aviso{font-size:.76rem;color:var(--bad);margin-top:4px}
.sum{position:sticky;top:90px}
.sum h3{font-size:1.2rem;margin-bottom:12px;letter-spacing:.04em}
.sum .r{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:.92rem}
.sum .r.t{border-top:1.5px solid var(--ink);margin-top:8px;padding-top:12px;font-weight:700;font-size:1.1rem}
.sum .r.t span:last-child{font-family:var(--font-title);font-size:1.9rem;line-height:1}
.sum small{display:block;color:var(--muted);font-size:.76rem}
.cupon{display:flex;gap:8px;margin:12px 0}
.cupon input{flex:1;min-width:0;padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:8px;font:inherit;text-transform:uppercase;font-size:.88rem}
.msg-c{font-size:.8rem;margin-bottom:8px}.msg-c.ok{color:var(--ok)}.msg-c.no{color:var(--bad)}

/* checkout */
.co-lay{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;padding:14px 0 24px}
.co-s{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}
.co-s h2{font-size:1.35rem;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.co-s h2 i{font-style:normal;background:var(--ink);color:#fff;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-family:var(--font)}
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.f label{font-size:.78rem;font-weight:600;color:var(--ink-2)}
.f input,.f select,.f textarea{padding:11px 12px;border:1.5px solid var(--line-strong);border-radius:8px;font:inherit;font-size:.92rem;background:#fff;color:var(--ink);width:100%}
.f textarea{min-height:70px;resize:vertical}
.f .err{color:var(--bad);font-size:.76rem;min-height:0}
.f.bad input,.f.bad select{border-color:var(--bad)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.tel{display:grid;grid-template-columns:110px 1fr;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line-strong);border-radius:10px;padding:12px 14px;margin-bottom:10px;cursor:pointer;background:#fff}
.opt:has(input:checked){border-color:var(--ink);background:#faf8f3;box-shadow:inset 0 0 0 1px var(--ink)}
.opt input{margin-top:3px;accent-color:var(--ink)}
.opt b{display:block;font-size:.92rem}
.opt span{font-size:.8rem;color:var(--muted)}
.pago-d{background:var(--bg);border:1px dashed var(--line-strong);border-radius:10px;padding:14px;font-size:.86rem;margin:4px 0 14px}
.pago-d dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
.pago-d dt{color:var(--muted)}.pago-d dd{font-weight:600;word-break:break-all}
.file{border:1.5px dashed var(--line-strong);border-radius:10px;padding:16px;text-align:center;background:#fff;cursor:pointer;display:block;font-size:.88rem;color:var(--ink-2)}
.file:hover{border-color:var(--ink)}
.file input{display:none}
.file b{display:block;color:var(--ink)}
.co-resumen .it{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;padding:6px 0;border-bottom:1px solid var(--line)}
.co-resumen .it:last-of-type{border-bottom:none}

/* pedido realizado + seguimiento */
.ok-box{max-width:720px;margin:30px auto;text-align:center}
.ok-box .tick{width:76px;height:76px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;animation:pop .5s var(--ease)}
.ok-box h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.ok-box p{color:var(--ink-2);margin:10px auto;max-width:52ch}
.ok-box .num{display:inline-block;font-family:var(--font-title);font-size:2rem;font-weight:400;background:var(--ink);color:#fff;border-radius:10px;padding:6px 22px;margin:12px 0}
.next{text-align:left;margin:24px auto;max-width:560px;display:grid;gap:12px}
.next div{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:.88rem}
.next i{font-style:normal;font-family:var(--font-title);font-weight:400;font-size:1.4rem;color:var(--accent);line-height:1}
.tl{list-style:none;position:relative;margin:10px 0 0;padding-left:34px}
.tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line-strong)}
.tl li{position:relative;padding:0 0 22px;font-size:.92rem}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-34px;top:0;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--line-strong)}
.tl li.hecho::before{background:var(--ok);border-color:var(--ok);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}
.tl li.ahora::before{border-color:var(--accent);box-shadow:0 0 0 4px #f1dfb4}
.tl li b{display:block}
.tl li small{color:var(--muted);font-size:.78rem;display:block}
.tl li.pend{color:var(--muted)}
.rastreo{max-width:880px;margin:20px auto 30px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}

/* presupuesto */
.doc{max-width:860px;margin:24px auto 30px;background:#fff;border:1px solid var(--line-strong);border-radius:6px;padding:40px;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.doc-h{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:3px solid var(--ink);padding-bottom:18px;margin-bottom:22px}
.doc h1{font-size:2.4rem}
.doc .tbl th{background:var(--surface-2)}
.doc .tot{margin-left:auto;max-width:280px;margin-top:14px}
.doc-acc{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px}

/* drawer carrito */
.scrim{position:fixed;inset:0;background:rgba(8,9,11,.5);z-index:800;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--surface);z-index:810;transform:translateX(102%);transition:transform .3s var(--ease);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.25)}
.drawer.on{transform:none}
.drawer-h{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-h h3{font-size:1.4rem}
.drawer-b{flex:1;overflow-y:auto;padding:6px 18px}
.drawer-f{padding:16px 18px;border-top:1px solid var(--line);background:var(--bg)}
.drawer .line{grid-template-columns:60px 1fr auto}
.drawer .line .ph{width:60px}
.xbtn{background:none;border:none;padding:6px;border-radius:8px;color:var(--muted)}
.xbtn:hover{background:var(--surface-2);color:var(--ink)}

/* flotantes */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:700;width:56px;height:56px;border-radius:50%;background:#1f9d57;color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .2s var(--ease)}
.wa-fab:hover{transform:scale(1.07)}
.capt{position:fixed;left:18px;bottom:18px;z-index:700;width:min(340px,calc(100vw - 100px));background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.22);animation:pop .4s var(--ease)}
.capt h4{font-family:var(--font-title);font-size:1.3rem;text-transform:uppercase;line-height:1.05;padding-right:22px}
.capt p{font-size:.82rem;color:var(--muted);margin:6px 0 10px}
.capt input{width:100%;padding:9px 11px;border:1.5px solid var(--line-strong);border-radius:8px;font:inherit;font-size:.88rem;margin-bottom:8px}
.capt .xbtn{position:absolute;top:8px;right:8px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}

/* responsive */
@media (max-width:1020px){
  .grid-p{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(4,1fr)}
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero .plano{opacity:.5;width:90%}
  .foot-g{grid-template-columns:1fr 1fr}
  .band{grid-template-columns:1fr}.band-i{padding:0 24px 24px}.band-i .ph{margin:0 auto}
}
@media (max-width:1100px){
  .hd-in{flex-wrap:wrap;gap:12px}
  .search{order:3;flex-basis:100%}
  .hd-nav{display:none}
  .hd-nav.open{display:flex;order:4;flex-basis:100%;flex-direction:column;align-items:stretch}
  .menu-btn{display:inline-flex;margin-left:auto}
}
@media (max-width:860px){
  .search{order:3;flex-basis:100%}
  .hd-nav{display:none}
  .hd-nav.open{display:flex;order:4;flex-basis:100%;flex-direction:column;align-items:stretch}
  .menu-btn{display:inline-flex;margin-left:auto}
  .cart-btn{margin-left:0}
  .cat-lay{grid-template-columns:1fr}
  .filtros{position:static;display:none}.filtros.open{display:block}
  .filtros-btn{display:inline-flex}
  .ficha,.cart-lay,.co-lay,.rastreo,.det-grid{grid-template-columns:minmax(0,1fr)}
  .sum{position:static}
  .steps{grid-template-columns:1fr 1fr;gap:22px 10px}
}
@media (max-width:640px){
  .grid-p{grid-template-columns:repeat(2,1fr);gap:10px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .pcard{padding:9px}
  .price{font-size:1.45rem}
  .hero-in{padding:36px 20px 40px}
  .hechos{margin-top:-14px}
  .g2,.tel{grid-template-columns:1fr}
  .foot-g{grid-template-columns:1fr}
  .doc{padding:20px}
  .line{grid-template-columns:64px 1fr}.line .ph{width:64px}.line .tot{grid-column:2;text-align:left}
  .band-t{padding:26px 22px}
  .marcas a{font-size:1.3rem}
  .capt{bottom:84px}
}
@media print{
  body{background:#fff}.ann,.hd,.foot,.wa-fab,.capt,.demo-cinta,.doc-acc,.drawer,.scrim{display:none!important}
  .doc{border:none;box-shadow:none;margin:0;max-width:none;padding:0}
}
@media (max-width:640px){body.con-cinta .hd{top:0}}
.doc .tbl td:nth-child(n+2){white-space:nowrap}

.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sec-h h2{font-size:clamp(1.8rem,3.6vw,2.5rem)}
.sec-h p{color:var(--muted);font-size:.9rem;margin-top:4px;text-transform:none;font-family:var(--font);font-weight:400}

/* ===== estructura de referencia: verde bosque + dorado ===== */
.top-wrap{position:sticky;top:0;z-index:60}
body.con-cinta .top-wrap{top:28px}
.hd{background:var(--surface);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:24px;padding:14px 20px;max-width:var(--maxw);margin:0 auto}
.search input{padding:13px 16px 13px 46px;border-radius:12px;background:#f6f3ec;border:1px solid var(--line-strong)}
.acct{position:relative;flex-shrink:0}
.acct-btn{display:flex;align-items:center;gap:8px;background:none;border:none;font:600 .92rem var(--font);color:var(--ink);padding:9px 10px;border-radius:8px}
.acct-btn:hover{background:var(--surface-2)}
.acct-pop{position:absolute;right:0;top:calc(100% + 8px);width:270px;background:#fff;border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.18);padding:10px;z-index:70}
.acct-pop a{display:block;padding:9px 10px;border-radius:8px;text-decoration:none;font-size:.9rem}
.acct-pop a:hover{background:var(--surface-2)}
.acct-t{font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 10px}
.acct-n{font-size:.76rem;color:var(--muted);padding:8px 10px 4px;border-top:1px solid var(--line);margin-top:6px}
.cart-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;background:var(--accent);color:var(--on-accent);border:none;font-weight:700;font-size:.92rem;flex-shrink:0;transition:background .15s}
.cart-btn:hover{background:var(--accent-h)}
.cart-btn .n{display:inline}
.navbar{background:var(--forest);color:#fff}
.navbar-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;padding:0 20px}
.navbar-in::-webkit-scrollbar{display:none}
.navbar a,.nav-todas{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.92);padding:14px 10px;text-decoration:none;font-weight:500;font-size:.9rem;white-space:nowrap;background:none;border:none;border-bottom:3px solid transparent;font-family:var(--font);cursor:pointer}
.navbar a:hover,.nav-todas:hover{background:rgba(255,255,255,.08);color:#fff}
.navbar a.on{border-bottom-color:var(--accent);color:#fff;font-weight:700}
.nav-todas{font-weight:700;margin-right:6px;padding-right:20px}
.mega{position:absolute;left:0;right:0;background:#fff;border-bottom:1px solid var(--line-strong);box-shadow:0 30px 60px rgba(0,0,0,.18);z-index:65;max-height:70vh;overflow-y:auto}
.mega-g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;padding:24px 20px}
.mega-c h4{font-size:1.05rem;margin-bottom:10px;letter-spacing:.03em}
.mega-c a{display:block;padding:4px 0;text-decoration:none;font-size:.9rem;color:var(--ink-2)}
.mega-c a:hover{color:var(--accent-d);text-decoration:underline}
.mega-c h4 a{color:var(--ink);display:inline;font-size:inherit}
.hero2{position:relative;overflow:hidden;background:var(--forest);color:#fff;min-height:300px;display:flex}
.hero2-foto{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;object-position:center right;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.hero2-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,45,32,.8),transparent 46%)}
.hero2-in{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:36px;padding-bottom:28px;width:100%;max-width:var(--maxw);margin:0 auto}
.hero2-t{align-self:center}
.hero2-k{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:10px;color:rgba(255,255,255,.88)}
.hero2 h1{font-size:clamp(2.3rem,4.6vw,3.7rem);max-width:none;line-height:1.02}
.hero2 h1 em{font-style:normal;color:var(--accent)}
.hero2-t p{margin:12px 0 22px;font-size:1.1rem;color:rgba(255,255,255,.92)}
.hero2-sellos{list-style:none;display:flex;gap:30px;align-self:flex-end}
.hero2-sellos li{display:flex;align-items:center;gap:10px;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;line-height:1.25;color:#fff}
.hero2-sellos .icon{color:var(--accent)}
.btn--lg{padding:15px 28px;font-size:1rem}
.tiles-w{margin-top:18px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:flex;justify-content:space-between;align-items:stretch;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px;text-decoration:none;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);border-color:var(--forest);box-shadow:0 14px 28px rgba(0,0,0,.09)}
.tile-t{display:flex;flex-direction:column;min-width:0;flex:1}
.tile h3{font-size:1.5rem;line-height:1.05;margin-bottom:6px}
.tile p{font-size:.82rem;color:var(--muted);max-width:20ch}
.tile-go{margin-top:auto;padding-top:12px}
.tile-go .icon{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.tile-i{width:50%;flex-shrink:0;display:flex;align-items:center;color:var(--ink-2);--acc:var(--accent)}
.tile-i svg{width:100%;height:auto;max-height:124px}
.cat-lay{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;align-items:start;padding:22px 0 10px}
.filtros{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:sticky;top:150px}
.f-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.f-h b{font-size:1.05rem}
.f-h a{font-size:.82rem;color:var(--accent-d);text-decoration:underline}
.fsec{border-bottom:1px solid var(--line);padding:12px 0}
.fsec:last-child{border-bottom:none}
.fsec summary{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.95rem;cursor:pointer;list-style:none}
.fsec summary::-webkit-details-marker{display:none}
.fsec summary .icon{transition:transform .2s}
.fsec:not([open]) summary .icon{transform:rotate(180deg)}
.fl{list-style:none;margin-top:10px;display:grid;gap:7px}
.chk{display:flex;align-items:center;gap:9px;font-size:.9rem;cursor:pointer;color:var(--ink-2)}
.chk input{width:16px;height:16px;accent-color:var(--forest);flex-shrink:0}
.chk small{color:var(--muted);font-size:.82rem}
.res-h{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.res-h h1,.res-h h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.res-n{color:var(--muted);font-size:.86rem;margin-top:4px}
.res-t{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ver-todos{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem;text-decoration:underline}
.pcard .para{font-size:.82rem;color:var(--muted);margin-top:2px}
.pcard .sku{margin-top:2px}
.pcard .stk{margin-top:6px}
.price .was{font-family:var(--font);font-weight:400;font-size:.82rem;color:var(--muted);margin-left:8px}
.price .dto{font-family:var(--font);font-style:normal;font-weight:700;font-size:.78rem;color:var(--ok);margin-left:6px}
@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .mega-g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero2-sellos{gap:18px}
}
@media (max-width:900px){
  .hd-in{flex-wrap:wrap;gap:12px}
  .search{order:3;flex-basis:100%}
  .acct-tx{display:none}
  .cart-btn{margin-left:auto}
  .hero2{min-height:380px}
  .hero2-foto{width:100%;opacity:.5;-webkit-mask-image:none;mask-image:none}
  .hero2-in{flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding-top:28px}
  .hero2-sellos{flex-wrap:wrap;gap:14px 20px}
  .cat-lay{grid-template-columns:minmax(0,1fr)}
  .filtros{position:static;display:none}
  .filtros.open{display:block}
  .filtros-btn{display:inline-flex}
  .mega-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .tiles{grid-template-columns:1fr}
  .tile h3{font-size:1.35rem}
  body.con-cinta .top-wrap{top:0}
}

@media (max-width:640px){
  .hd-in{gap:10px}
  .logo b,.logo small{font-size:1.3rem}
  .cart-btn{margin-left:0;padding:11px 14px}
  .cart-btn .cw{display:none}
  .acct{margin-left:auto}
}

/* fotos reales */
.ph--foto{background:#fff;background-image:none;padding:6%}
.ph--foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.ficha .ph--foto{border:1px solid var(--line)}
.tile-i--foto{align-items:center;justify-content:center}
.tile-i--foto img{width:100%;height:auto;max-height:124px;object-fit:contain;mix-blend-mode:multiply;display:block}
.band2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--forest);color:#fff;border-radius:14px;overflow:hidden;align-items:stretch}
.band2 img{width:100%;height:100%;object-fit:cover;display:block;min-height:240px}
.band2-t{padding:34px 40px;display:flex;flex-direction:column;justify-content:center;gap:12px;align-items:flex-start}
.band2 h2{font-size:clamp(2.1rem,3.6vw,3rem);line-height:1}
.band2 p{color:rgba(255,255,255,.86);max-width:46ch}
.info-foto{width:100%;height:auto;border-radius:12px;margin:6px 0 14px;display:block}
.foot-marcas{margin-top:22px;font-size:.84rem;color:rgba(255,255,255,.7)}
.price .dto{color:#b8380d}
@media (max-width:860px){.band2{grid-template-columns:minmax(0,1fr)}.band2-t{padding:24px}.band2 img{min-height:0;max-height:260px}}