/* ══════════════════════════════════════════════════════════════
   ALTA RUTA 4x4 STORE — sistema de diseño
   Paleta canon: 01 Tienda/WEB-PROMPT-CLAUDE-DESIGN.md
   ══════════════════════════════════════════════════════════════ */
:root{
  --ambar:#F39C12; --ambar-claro:#F5A623; --amarillo:#FFD23F; --rojo:#C0392B;
  --carbon:#0E0E10; --carbon-2:#1A1A1D; --carbon-3:#232327; --carbon-4:#2E2E34;
  --hueso:#F5F3EF; --gris:#9A9AA2; --gris-2:#6B6B73; --verde:#4E7C3A;
  --grad:linear-gradient(100deg,var(--amarillo),var(--ambar) 45%,var(--rojo));
  --linea:#33333A; --r:3px; --max:1400px;
  --tit:"Oswald","Archivo Black",system-ui,sans-serif;
  --cuerpo:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--carbon);color:var(--hueso);font-family:var(--cuerpo);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--ambar);color:#0E0E10}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--tit);font-weight:700;letter-spacing:-.01em;line-height:1.05;text-transform:uppercase}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ambar);font-weight:600}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;font-family:var(--tit);font-size:14px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r);
  transition:.18s;white-space:nowrap;border:1px solid transparent}
.btn-1{background:var(--ambar);color:#000}
.btn-1:hover{background:var(--amarillo);transform:translateY(-1px)}
.btn-2{border-color:var(--linea);color:var(--hueso);background:rgba(255,255,255,.03)}
.btn-2:hover{border-color:var(--ambar);color:var(--ambar)}
.btn-3{background:var(--carbon-3);color:var(--hueso)}
.btn-3:hover{background:var(--carbon-4)}
.btn-wa{background:#25D366;color:#000}
.btn-wa:hover{background:#4ae585}
.btn-sm{padding:9px 16px;font-size:12px}
.btn-full{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Barra de anuncio ── */
.anuncio{background:var(--grad);color:#000;text-align:center;padding:7px 16px;
  font-size:12px;font-weight:600;letter-spacing:.04em}

/* ── Header ── */
header{position:sticky;top:0;z-index:100;background:rgba(14,14,16,.97);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.hdr1{display:flex;align-items:center;gap:28px;padding:14px 24px;max-width:var(--max);margin:0 auto}
.logo{height:38px;flex-shrink:0}
.buscador{flex:1;position:relative;max-width:560px}
.buscador input{width:100%;background:var(--carbon-2);border:1px solid var(--linea);
  border-radius:var(--r);padding:11px 40px 11px 15px;color:var(--hueso);font-size:14px;font-family:inherit}
.buscador input:focus{outline:none;border-color:var(--ambar)}
.buscador svg{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--gris);pointer-events:none}
.hdr-iconos{display:flex;gap:6px;margin-left:auto}
.ic{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 11px;
  border-radius:var(--r);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris);transition:.15s;position:relative}
.ic:hover{color:var(--ambar);background:var(--carbon-2)}
.ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.badge{position:absolute;top:2px;right:5px;background:var(--ambar);color:#000;
  font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;
  display:grid;place-items:center;padding:0 4px}
.badge[hidden]{display:none}

/* ── Nav ── */
.nav{background:#000;border-top:1px solid var(--linea)}
.nav-in{display:flex;align-items:stretch;max-width:var(--max);margin:0 auto;padding:0 24px;gap:2px}
.nav-item{display:flex;align-items:center;gap:7px;padding:13px 17px;font-family:var(--tit);
  font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--hueso);transition:.15s;border-bottom:2px solid transparent}
.nav-item:hover{color:var(--ambar);border-bottom-color:var(--ambar);background:var(--carbon-2)}
.nav-build{margin-left:auto;background:var(--carbon-3);color:var(--ambar);border-left:1px solid var(--linea)}
.nav-build:hover{background:var(--ambar);color:#000;border-bottom-color:transparent}

/* ── Mega menú ── */
.mega{position:absolute;left:0;right:0;background:var(--carbon-2);
  border-top:2px solid var(--ambar);border-bottom:1px solid var(--linea);
  box-shadow:0 24px 60px rgba(0,0,0,.7);z-index:99;display:none;max-height:74vh;overflow-y:auto}
.mega.on{display:block}
.mega-in{max-width:var(--max);margin:0 auto;padding:30px 24px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:22px 28px}
.mega-col h4{font-size:13px;letter-spacing:.09em;color:var(--ambar);
  margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--linea);display:flex;gap:7px}
.mega-col a{display:block;padding:4px 0;font-size:13px;color:var(--gris);transition:.13s}
.mega-col a:hover{color:var(--hueso);padding-left:5px}
.mega-col .n{color:var(--gris-2);font-size:11px}

/* ── Hero ── */
.hero{position:relative;min-height:520px;display:grid;align-items:center;
  background:radial-gradient(ellipse 900px 500px at 72% 45%,rgba(243,156,18,.16),transparent 68%),
  linear-gradient(165deg,#141417,#0a0a0c 65%);border-bottom:1px solid var(--linea);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent,transparent 42px,rgba(255,255,255,.014) 42px,rgba(255,255,255,.014) 84px)}
.hero-in{max-width:var(--max);margin:0 auto;padding:70px 24px;position:relative;z-index:1;max-width:820px}
.hero h1{font-size:clamp(40px,6.4vw,78px);margin:14px 0 18px;line-height:.96}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero p{font-size:18px;color:var(--gris);max-width:520px;margin-bottom:30px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.hero-dot{width:30px;height:3px;background:var(--carbon-4);border-radius:2px;transition:.25s}
.hero-dot.on{background:var(--ambar);width:46px}

/* ── Secciones ── */
section{padding:64px 0}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sec-hd h2{font-size:clamp(26px,3.4vw,40px)}
.sec-hd p{color:var(--gris);margin-top:7px;font-size:15px}

/* ── Selector de vehículo ── */
.selector{background:linear-gradient(135deg,var(--carbon-2),var(--carbon));
  border:1px solid var(--linea);border-radius:var(--r);padding:34px}
.selector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-top:20px}
select,input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;background:var(--carbon-3);border:1px solid var(--linea);color:var(--hueso);
  padding:12px 13px;border-radius:var(--r);font-size:14px;font-family:inherit}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--ambar)}
label{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);margin-bottom:6px;font-weight:600}

/* ── Grid de categorías ── */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.cat-card{background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);
  padding:26px 20px;transition:.2s;position:relative;overflow:hidden}
.cat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--ambar);transform:scaleY(0);transform-origin:bottom;transition:.24s}
.cat-card:hover{background:var(--carbon-3);transform:translateY(-3px);border-color:var(--carbon-4)}
.cat-card:hover::before{transform:scaleY(1)}
.cat-card .emo{font-size:30px;margin-bottom:12px;display:block}
.cat-card h3{font-size:16px;margin-bottom:5px}
.cat-card .n{font-size:12px;color:var(--gris-2)}

/* ── Tarjeta de producto ── */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.pcard{background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;transition:.2s;display:flex;flex-direction:column;position:relative}
.pcard:hover{border-color:var(--carbon-4);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.pimg{aspect-ratio:4/3;background:linear-gradient(150deg,var(--carbon-3),var(--carbon-2));
  display:grid;place-items:center;position:relative;border-bottom:1px solid var(--linea)}
.pimg .emo{font-size:48px;opacity:.24;filter:grayscale(.4)}
/* Fotos reales servidas por el backend (localhost:5001/media/...) */
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb.foto{padding:0;overflow:hidden;cursor:pointer;opacity:.6;transition:.15s}
.gal-thumb.foto:hover,.gal-thumb.foto.on{opacity:1;outline:1px solid var(--ambar);outline-offset:-1px}
.gal-thumb.foto img{width:100%;height:100%;object-fit:cover;display:block}
.pimg .marca{position:absolute;bottom:9px;left:10px;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris-2);font-weight:700}
.pbadges{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.bdg{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px}
.bdg-stock{background:var(--verde);color:#fff}
.bdg-inst{background:var(--carbon-4);color:var(--ambar);border:1px solid var(--ambar)}
.bdg-nuevo{background:var(--ambar);color:#000}
.bdg-sin{background:var(--carbon-4);color:var(--gris)}
.pbody{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;gap:12px}
.pbody h3{font-size:13.5px;line-height:1.28;font-family:var(--cuerpo);font-weight:600;
  text-transform:none;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.psku{font-size:10.5px;color:var(--gris-2);font-family:ui-monospace,monospace}
/* Precio ARRIBA de la tarjeta y tipo de cambio DEBAJO (decisión de Francesco, 07-sep) */
.pprecio{padding-bottom:13px;margin-bottom:2px;border-bottom:1px solid var(--linea)}
.pprecio .val{font-family:var(--tit);font-size:25px;color:var(--hueso);display:block;line-height:1.05}
.pprecio .tc{display:block;font-size:11px;color:var(--gris-2);margin-top:4px;letter-spacing:.03em}
.pprecio .usd{font-size:11px;color:var(--gris-2);margin-left:5px}
.pprecio .ref{font-size:10px;color:var(--ambar);display:block;margin-top:3px;letter-spacing:.05em}
.pprecio .cotiza{font-family:var(--tit);font-size:17px;color:var(--ambar);letter-spacing:.06em;display:block}
.pacc{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.pacc .btn{flex:1;padding:13px 10px;font-size:11.5px}
.fav{width:38px;flex:0 0 38px !important;background:var(--carbon-3);display:grid;place-items:center}
.fav svg{width:15px;height:15px;stroke:currentColor;fill:none}
.fav.on{color:var(--rojo)}.fav.on svg{fill:currentColor}

/* ── Layout de categoría ── */
.cat-layout{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.filtros{background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);
  padding:20px;position:sticky;top:130px;max-height:calc(100vh - 160px);overflow-y:auto}
.fgrupo{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--linea)}
.fgrupo:last-child{border:none;margin:0;padding:0}
.fgrupo h4{font-size:12px;letter-spacing:.13em;margin-bottom:11px;color:var(--ambar)}
.fopt{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;
  color:var(--gris);cursor:pointer;transition:.13s}
.fopt:hover{color:var(--hueso)}
.fopt input{width:14px;height:14px;accent-color:var(--ambar);cursor:pointer;flex-shrink:0}
.fopt .n{margin-left:auto;font-size:11px;color:var(--gris-2)}
.barra-res{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.barra-res .cuenta{font-size:13px;color:var(--gris)}
.barra-res .cuenta b{color:var(--hueso);font-family:var(--tit);font-size:17px}
.orden{display:flex;align-items:center;gap:9px}
.orden select{width:auto;padding:8px 11px;font-size:13px}

/* ── Breadcrumb ── */
.bc{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--gris-2);
  padding:18px 0;flex-wrap:wrap}
.bc a:hover{color:var(--ambar)}
.bc span{opacity:.5}

/* ── Ficha de producto ── */
.ficha{display:grid;grid-template-columns:1fr 400px;gap:38px;align-items:start}
.galeria{background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.gal-main{aspect-ratio:4/3;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--carbon-3),var(--carbon-2));position:relative}
.gal-main .emo{font-size:110px;opacity:.2}
.gal-nota{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.75);
  padding:9px 14px;font-size:11px;color:var(--gris);text-align:center;letter-spacing:.04em}
.gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--linea)}
.gal-thumb{aspect-ratio:1;background:var(--carbon-3);display:grid;place-items:center;
  font-size:9px;color:var(--gris-2);text-align:center;padding:5px;line-height:1.25}
.panel{background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);
  padding:26px;position:sticky;top:130px}
.panel h1{font-size:24px;line-height:1.15;text-transform:none;font-family:var(--cuerpo);
  font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.panel-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--gris-2);
  margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--linea)}
.panel-precio{margin:4px 0 16px}
.panel-precio .val{font-family:var(--tit);font-size:38px;line-height:1}
.panel-precio .tc-linea{font-size:13.5px;color:var(--hueso);opacity:.72;margin-top:6px;letter-spacing:.03em}
.panel-precio .sub{font-size:12px;color:var(--gris);margin-top:5px}
.stock-line{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:18px}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-si{background:var(--verde);box-shadow:0 0 9px var(--verde)}
.dot-no{background:var(--gris-2)}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--linea);
  border-radius:var(--r);width:fit-content;margin-bottom:14px;overflow:hidden}
.qty button{width:38px;height:40px;background:var(--carbon-3);font-size:17px}
.qty button:hover{background:var(--carbon-4);color:var(--ambar)}
.qty input{width:52px;text-align:center;background:var(--carbon-2);border:none;
  color:var(--hueso);height:40px;font-family:var(--tit);font-size:16px}
.panel-bloque{margin-top:20px;padding-top:18px;border-top:1px solid var(--linea)}
.panel-bloque h4{font-size:11px;letter-spacing:.14em;color:var(--gris);margin-bottom:10px}
.check{display:flex;align-items:flex-start;gap:9px;padding:11px;background:var(--carbon-3);
  border:1px solid var(--linea);border-radius:var(--r);cursor:pointer;transition:.15s;font-size:13px}
.check:hover{border-color:var(--ambar)}
.check input{margin-top:2px;accent-color:var(--ambar);flex-shrink:0}
.check .sub{font-size:11px;color:var(--gris-2);display:block;margin-top:2px}

/* ── Tabs de info ── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin:44px 0 0;overflow-x:auto}
.tab{padding:13px 22px;font-family:var(--tit);font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris);border-bottom:2px solid transparent;
  transition:.15s;white-space:nowrap}
.tab:hover{color:var(--hueso)}
.tab.on{color:var(--ambar);border-bottom-color:var(--ambar)}
.tab-panel{padding:28px 0;display:none;max-width:840px}
.tab-panel.on{display:block}
.tab-panel p{color:var(--gris);margin-bottom:14px}
.tab-panel h4{font-size:15px;margin:22px 0 10px;color:var(--hueso)}
table.specs{width:100%;border-collapse:collapse;margin-top:12px}
table.specs td{padding:10px 13px;border-bottom:1px solid var(--linea);font-size:13.5px}
table.specs td:first-child{color:var(--gris);width:44%}
table.specs tr:hover td{background:var(--carbon-2)}

/* ── Avisos ── */
.aviso{background:rgba(243,156,18,.07);border:1px solid rgba(243,156,18,.3);
  border-left:3px solid var(--ambar);border-radius:var(--r);padding:14px 17px;
  font-size:13px;color:#e8d5b5;margin:16px 0}
.aviso b{color:var(--ambar)}
.aviso-rojo{background:rgba(192,57,43,.09);border-color:rgba(192,57,43,.35);
  border-left-color:var(--rojo);color:#f0c4bf}
.aviso-rojo b{color:#e8776a}

/* ── Barra de confianza ── */
.confianza{background:var(--carbon-2);border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);padding:44px 0}
.conf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.conf-item{display:flex;gap:15px;align-items:flex-start}
.conf-item .emo{font-size:26px;flex-shrink:0}
.conf-item h4{font-size:15px;margin-bottom:5px}
.conf-item p{font-size:13px;color:var(--gris);line-height:1.5}

/* ── Doble bloque ── */
.doble{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.doble-c{background:linear-gradient(150deg,var(--carbon-2),var(--carbon));
  border:1px solid var(--linea);border-radius:var(--r);padding:38px;transition:.2s}
.doble-c:hover{border-color:var(--ambar)}
.doble-c h3{font-size:23px;margin:12px 0 10px}
.doble-c p{color:var(--gris);font-size:14px;margin-bottom:20px}

/* ── Footer ── */
/* 15-sep: sin margin-top. Con el cuerpo en papel, esos 70 px eran una franja
   blanca huérfana entre la barra de confianza y el pie negro. */
footer{background:#000;border-top:1px solid var(--linea);padding:52px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px;padding-bottom:40px}
.foot-col h4{font-size:12px;letter-spacing:.15em;color:var(--ambar);margin-bottom:14px}
.foot-col a,.foot-col p{display:block;font-size:13px;color:var(--gris);
  padding:4px 0;transition:.13s}
.foot-col a:hover{color:var(--ambar)}
.foot-logo{height:42px;margin-bottom:16px}
.foot-legal{border-top:1px solid var(--linea);padding:20px 0;font-size:12px;
  color:var(--gris-2);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ── WhatsApp flotante ── */
.wa-float{position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 6px 26px rgba(37,211,102,.42);
  z-index:90;transition:.2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:29px;height:29px;fill:#000}

/* ── Panel CRM (debug) ── */
.foot-acceso{display:inline-flex;align-items:center;gap:7px;position:relative;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2);
  padding:6px 12px;border:1px solid var(--linea);border-radius:var(--r);transition:.18s}
.foot-acceso:hover{color:var(--ambar);border-color:var(--ambar)}
.foot-acceso svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.foot-acceso .badge{position:static;background:var(--rojo);color:#fff}
/* Se deja visible también en público: el acceso real lo gobierna el guardia
   INTERNO de app.js (solo localhost), así que el enlace no abre nada desde
   internet. Un enlace de administración en el pie es práctica normal. */

.crm-toggle{position:fixed;bottom:22px;left:22px;z-index:90;background:var(--carbon-3);
  border:1px solid var(--ambar);color:var(--ambar);padding:10px 15px;border-radius:var(--r);
  font-family:var(--tit);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  display:flex;gap:8px;align-items:center;transition:.2s}
.crm-toggle:hover{background:var(--ambar);color:#000}
.crm-toggle .badge{position:static;background:var(--rojo);color:#fff}
.crm-panel{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);background:var(--carbon-2);
  border-left:2px solid var(--ambar);z-index:200;transform:translateX(100%);
  transition:.28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
  box-shadow:-20px 0 60px rgba(0,0,0,.6)}
.crm-panel.on{transform:none}
.crm-hd{padding:18px 22px;border-bottom:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--carbon-3)}
.crm-hd h3{font-size:16px}
.crm-estado{font-size:11px;padding:4px 9px;border-radius:2px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700}
.crm-off{background:rgba(192,57,43,.2);color:#e8776a;border:1px solid rgba(192,57,43,.45)}
.crm-body{flex:1;overflow-y:auto;padding:20px 22px}
.crm-evt{background:var(--carbon);border:1px solid var(--linea);border-radius:var(--r);
  margin-bottom:12px;overflow:hidden}
.crm-evt-hd{padding:11px 14px;display:flex;align-items:center;gap:10px;
  background:var(--carbon-3);cursor:pointer;font-size:12.5px}
.crm-evt-hd:hover{background:var(--carbon-4)}
.crm-evt-hd .tipo{font-family:var(--tit);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ambar);font-size:12px}
.crm-evt-hd .hora{margin-left:auto;font-size:10.5px;color:var(--gris-2);font-family:ui-monospace,monospace}
.crm-evt pre{padding:14px;font-size:11px;line-height:1.6;overflow-x:auto;
  color:#b9d4a8;font-family:ui-monospace,"SF Mono",monospace;display:none;
  border-top:1px solid var(--linea);white-space:pre-wrap;word-break:break-word}
.crm-evt.open pre{display:block}
.crm-ft{padding:16px 22px;border-top:1px solid var(--linea);display:flex;gap:9px;background:var(--carbon-3)}
.crm-vacio{text-align:center;padding:50px 20px;color:var(--gris-2);font-size:13px}
.crm-vacio .emo{font-size:40px;display:block;margin-bottom:14px;opacity:.4}

/* ── Panel lateral genérico (cotización) ── */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(470px,94vw);background:var(--carbon-2);
  border-left:1px solid var(--linea);z-index:150;transform:translateX(100%);
  transition:.28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dw-hd{padding:20px 22px;border-bottom:1px solid var(--linea);display:flex;
  align-items:center;justify-content:space-between}
.dw-body{flex:1;overflow-y:auto;padding:20px 22px}
.dw-ft{padding:18px 22px;border-top:1px solid var(--linea);background:var(--carbon-3)}
.dw-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--linea)}
.dw-item .mini{width:52px;height:52px;background:var(--carbon-3);border-radius:var(--r);
  display:grid;place-items:center;font-size:22px;flex-shrink:0}
.dw-item h5{font-size:13px;font-weight:600;line-height:1.3;margin-bottom:3px}
.dw-item .meta{font-size:11px;color:var(--gris-2)}
.dw-item .quitar{margin-left:auto;color:var(--gris-2);font-size:17px;align-self:flex-start}
.dw-item .quitar:hover{color:var(--rojo)}
.dw-total{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px;font-size:14px}
.dw-total b{font-family:var(--tit);font-size:26px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:140;
  opacity:0;pointer-events:none;transition:.25s}
.overlay.on{opacity:1;pointer-events:auto}

/* ── Formulario ── */
.campo{margin-bottom:14px}
.form-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── Toast ── */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px);
  background:var(--carbon-3);border:1px solid var(--ambar);border-left:3px solid var(--ambar);
  padding:14px 22px;border-radius:var(--r);z-index:300;font-size:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);transition:.3s;max-width:90vw}
.toast.on{transform:translateX(-50%)}

/* ── Vacío / paginación ── */
.vacio{text-align:center;padding:70px 20px;color:var(--gris)}
.vacio .emo{font-size:52px;display:block;margin-bottom:16px;opacity:.35}
.paginacion{display:flex;gap:7px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.pg{padding:9px 14px;background:var(--carbon-2);border:1px solid var(--linea);
  border-radius:var(--r);font-size:13px;transition:.15s;min-width:40px;text-align:center}
.pg:hover{border-color:var(--ambar);color:var(--ambar)}
.pg.on{background:var(--ambar);color:#000;border-color:var(--ambar);font-weight:700}

.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--carbon-3);
  border:1px solid var(--linea);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--gris)}
.chip button{color:var(--gris-2);font-size:14px;line-height:1}
.chip button:hover{color:var(--rojo)}

/* ── Responsive ── */
@media(max-width:1080px){
  .ficha{grid-template-columns:1fr}
  .panel{position:static}
  .cat-layout{grid-template-columns:1fr}
  .filtros{position:static;max-height:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .hdr1{flex-wrap:wrap;gap:12px;padding:12px 16px}
  .buscador{order:3;flex-basis:100%;max-width:none}
  .nav-in{overflow-x:auto;padding:0 16px}
  .nav-build{margin-left:0}
  .doble{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  section{padding:44px 0}
  .form-fila{grid-template-columns:1fr}
  .mega-in{grid-template-columns:1fr 1fr}
  .crm-toggle{bottom:88px}
}

/* Línea chica en soles debajo del total en dólares del carrito/cotización (08-sep) */
.dw-total-tc{display:block;text-align:right;font-size:12px;color:var(--gris-2);
  letter-spacing:.03em;margin:-6px 0 12px}

/* ══════════════════════════════════════════════════════════════
   MARCAS (08-sep-2026)
   Los logos de fábrica vienen en tinta oscura sobre transparente, así que
   siempre se montan sobre una "placa" hueso. Fuera del hover van en gris
   para no pelearle a la paleta ámbar/carbón.
   ══════════════════════════════════════════════════════════════ */
.mlogo{display:inline-flex;align-items:center;justify-content:center;
  background:#F5F3EF;border-radius:var(--r);padding:8px 12px;
  width:130px;height:52px;overflow:hidden;transition:.18s}
.mlogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:none;opacity:1;transition:.18s}
.mlogo-txt{font-family:var(--tit);font-size:13px;letter-spacing:.08em;color:#0E0E10;
  text-transform:uppercase;text-align:center;line-height:1.1}
.mlogo-xs{width:56px;height:26px;padding:3px 5px;flex:0 0 auto}
.mlogo-sm{width:74px;height:32px;padding:4px 7px}
.mlogo-md{width:104px;height:44px;padding:6px 10px;flex:0 0 auto}
.mlogo-lg{width:180px;height:76px;padding:12px 18px}

/* Tira de logos de la home */
.marcas-tira{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.marca-tile{background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);
  padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:11px;transition:.18s}
.marca-tile:hover{border-color:var(--ambar);transform:translateY(-3px);background:var(--carbon-3)}
.marca-tile:hover .mlogo img{filter:none;opacity:1}
.marca-tile .mlogo{width:100%;max-width:150px}
.marca-tile-n{font-size:11px;color:var(--gris-2);letter-spacing:.06em;text-transform:uppercase}

/* Directorio de marcas */
.marcas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.marca-card{background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;gap:10px;transition:.18s}
.marca-card:hover{border-color:var(--ambar);transform:translateY(-3px);background:var(--carbon-3)}
.marca-card:hover .mlogo img{filter:none;opacity:1}
.marca-card .mlogo{width:100%;max-width:100%;height:84px}
.marca-card h3{font-size:17px;margin-top:4px}
.marca-card-pais{font-size:11px;color:var(--gris-2);letter-spacing:.08em;margin-top:-6px}
.marca-card p{font-size:12.5px;color:var(--gris);line-height:1.5;flex:1}
.marca-card-n{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ambar)}
.marcas-grid-sec .marca-card{opacity:.72}
.marcas-grid-sec .mlogo img{filter:grayscale(1);opacity:.85}
.marcas-grid-sec .marca-card:hover .mlogo img{filter:none;opacity:1}
.marcas-grid-sec .marca-card:hover{opacity:1}

/* Cabecera de una marca */
.marca-hero{display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);padding:26px}
.marca-hero-logo .mlogo{width:200px;height:92px}
.marca-hero-logo .mlogo img{filter:none;opacity:1}
.marca-hero h2{font-size:30px;margin:6px 0 8px}
.marca-hero p{color:var(--gris);max-width:640px;font-size:14px}
.marca-hero-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* Logo en la tarjeta de producto */
.pimg .marca-logo{position:absolute;bottom:9px;left:10px;line-height:0}
.pimg .marca-logo .mlogo{background:rgba(245,243,239,.94);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.pcard:hover .marca-logo .mlogo img{filter:none;opacity:1}

/* Filtro de marca con logo */
.fopt-marca{display:flex;align-items:center;gap:9px}
.fopt-marca .fopt-nom{flex:1;font-size:12.5px}
.fopt-marca .mlogo img{opacity:.9}
.fopt-todas{display:block;margin-top:10px;font-size:11.5px;color:var(--ambar);
  letter-spacing:.08em;text-transform:uppercase;font-weight:700}

/* Bloque de marca en la ficha */
.panel-marca{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.panel-marca .mlogo img{filter:none;opacity:1}
.panel-marca b{font-family:var(--tit);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.panel-marca-cta{font-size:11px;color:var(--ambar);letter-spacing:.08em;text-transform:uppercase}
.chip-link{cursor:pointer}
.chip-link:hover{border-color:var(--ambar);color:var(--ambar)}

/* 15-sep-2026 · el atajo "Puente CRM" salió del pie (index.html). Antes solo se ocultaba
   en modo público; ahora no se pinta nunca, porque es herramienta interna. La regla se
   deja como red de seguridad por si algún parche vuelve a inyectar el botón. */
.foot-acceso-crm{display:none !important}

/* El botón de WhatsApp del pie heredaba `color:var(--gris)` de `.foot-col a` y
   quedaba gris verdoso sobre verde: ilegible. El botón manda sobre la columna.
   (Venía de antes del 15-sep.) */
.foot-col a.btn-wa,.foot-col a.btn-wa:hover{color:#05300F}