/* Gaming Security Store — hoja de estilos única
   Alineada con gaming-security.com:
     · tipografía Lato (cuerpo 300, títulos 900 en mayúsculas)
     · gris pizarra #3A3D47 como color oscuro
     · botones y tarjetas de esquina viva, sin redondeos
     · rojo de marca #DA2E2E tomado del logo */

:root{
  --bg:#FFFFFF;
  --surface:#F3F3F3;
  --surface-2:#FAFAFA;
  --line:#E2E4E7;
  --txt:#3A3D47;
  --txt-2:#6B7079;
  --txt-3:#949AA3;

  --rojo:#DA2E2E;
  --rojo-osc:#B81818;
  --rojo-suave:rgba(218,46,46,.08);

  --pizarra:#3A3D47;
  --pizarra-2:#454955;

  --ok:#1E8A5F;
  --warn:#B37400;
  --bad:#B81818;

  --radius:0px;
  --shadow:0 1px 3px rgba(58,61,71,.08), 0 8px 24px rgba(58,61,71,.08);
  --shadow-alta:0 4px 10px rgba(58,61,71,.10), 0 20px 44px rgba(58,61,71,.14);
  --max:1120px;
  --font:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Franjas oscuras: redefinen las variables y todo lo de adentro se adapta solo. */
.oscuro{
  --bg:var(--pizarra);
  --surface:var(--pizarra-2);
  --surface-2:#4E525F;
  --line:#565A66;
  --txt:#FFFFFF;
  --txt-2:#C6CAD1;
  --txt-3:#9AA0AA;
  --ok:#4FD69B;
  --warn:#F2B441;
  --bad:#FF7A70;
  --shadow:0 8px 30px rgba(0,0,0,.28);
  background:var(--bg);
  color:var(--txt);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);
  font-size:16px;font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Títulos: mayúsculas y negrita 900, como en gaming-security.com */
h1,h2{font-weight:900;text-transform:uppercase;line-height:1.1;margin:0 0 .45em;letter-spacing:-.005em}
h1{font-size:clamp(2rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.55rem,3vw,2.4rem)}
h3{font-size:1.12rem;font-weight:700;line-height:1.3;margin:0 0 .5em;text-transform:none}
p{margin:0 0 1em}
strong,b{font-weight:700}

/* ---------------- barra superior: cotización y envíos ---------------- */
.barra-top{background:var(--pizarra);color:#fff;font-size:.76rem;font-weight:400}
.barra-top-in{display:flex;justify-content:space-between;align-items:center;gap:16px;
  height:34px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.barra-top .dolar{font-weight:700;letter-spacing:.01em}
.barra-top .dolar em{font-style:normal;font-weight:400;opacity:.65;font-size:.72rem}
.barra-top .barra-envio{opacity:.75;overflow:hidden;text-overflow:ellipsis}
/* ---- los dos botones de arriba, en neón ----
 *
 * Antes eran dos bloques macizos, uno rojo y uno verde manzana. Se veían, sí,
 * pero le gritaban más fuerte que los productos y peleaban con el rojo del
 * logo, que ya es el rojo de la casa.
 *
 * Un cartel de neón real no es un bloque de color: es un tubo fino que
 * brilla sobre un fondo oscuro. Eso es lo que hacen estas reglas — contorno
 * de 1,5 px encendido, relleno casi negro, letra del color del tubo y el
 * resplandor volcado hacia afuera con dos sombras, una corta y cerrada y otra
 * larga y difusa. Se nota de lejos y no le roba la vista a nada.
 *
 * El cian y el magenta salen de la paleta clásica del neón y, sobre todo, no
 * existen en ningún otro lado de la tienda: no hay forma de confundirlos con
 * un botón común.
 *
 * Laten, no parpadean. Un parpadeo duro molesta la vista, marea a quien tiene
 * sensibilidad a la luz y vuelve ilegible el texto justo cuando querés que lo
 * lean. Van desfasados 1,2 s para que no pulsen a la vez, que queda a semáforo.
 * Y a quien pidió menos animaciones en su sistema le quedan quietos y prendidos.
 */
.cta-top{display:flex;align-items:center;gap:10px;flex-shrink:0}
.cta{display:inline-flex;align-items:center;font-weight:900;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  padding:6px 14px;border-radius:4px;line-height:1.2;transition:transform .15s,color .2s}
.cta:hover{transform:translateY(-1px)}

.cta-neon{
  background:rgba(8,11,16,.55);
  border:1.5px solid currentColor;
  text-shadow:0 0 7px currentColor;
}
.cta-neon:hover{background:rgba(8,11,16,.2)}

.cta-cian{color:#3FE9E4;animation:neon-cian 2.8s ease-in-out infinite}
@keyframes neon-cian{
  0%,100%{color:#31BFBC;
    box-shadow:0 0 3px rgba(63,233,228,.35), inset 0 0 4px rgba(63,233,228,.10)}
  50%    {color:#6BFFFA;
    box-shadow:0 0 9px rgba(63,233,228,.85), 0 0 22px rgba(63,233,228,.40),
               inset 0 0 7px rgba(63,233,228,.22)}
}

.cta-magenta{color:#FF6FD8;animation:neon-magenta 2.8s ease-in-out infinite;animation-delay:1.4s}
@keyframes neon-magenta{
  0%,100%{color:#D24FAE;
    box-shadow:0 0 3px rgba(255,111,216,.35), inset 0 0 4px rgba(255,111,216,.10)}
  50%    {color:#FF8FE4;
    box-shadow:0 0 9px rgba(255,111,216,.85), 0 0 22px rgba(255,111,216,.40),
               inset 0 0 7px rgba(255,111,216,.22)}
}

@media(prefers-reduced-motion:reduce){
  .cta-cian,.cta-magenta{animation:none}
  .cta-cian{color:#5FF3EE;box-shadow:0 0 8px rgba(63,233,228,.6)}
  .cta-magenta{color:#FF85E0;box-shadow:0 0 8px rgba(255,111,216,.6)}
  .cta:hover{transform:none}
}

@media(max-width:900px){.barra-top .barra-envio{display:none}}
@media(max-width:700px){
  .barra-top-in{height:auto;padding:7px 0;flex-wrap:wrap;gap:8px}
  .barra-top .dolar{font-size:.72rem}
  .cta-top{width:100%;gap:7px}
  .cta{flex:1;justify-content:center;font-size:.63rem;padding:8px 6px;letter-spacing:.02em}
}

/* ---------------- desfile de marcas ---------------- */
.marquesina{overflow:hidden;background:#fff;border-bottom:1px solid var(--line);padding:11px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* Sin "gap" a propósito: la separación la da el padding de .mq. Con gap, el
   ancho de la pista no es exactamente el doble de una copia y el bucle da un
   saltito de medio gap en cada vuelta. La duración real la calcula build.mjs
   según cuántas marcas haya; los 42s de acá son solo un respaldo. */
.marquesina-pista{display:flex;align-items:center;width:max-content;
  animation:desfile 42s linear infinite}
.marquesina:hover .marquesina-pista{animation-play-state:paused}
@keyframes desfile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.marquesina-pista{animation:none}}
/* min-width fijo: los logos tienen anchos muy distintos y, además, el ancho real
   recién se conoce cuando cargan. Con un mínimo, la pista no salta al cargar y
   las marcas quedan repartidas parejo. */
.mq{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:64px;padding:0 24px;
  min-width:240px;border-right:1px solid var(--line)}
/* Los logos van en su color original.
   Si algún día la franja te queda muy ruidosa de colores, agregá a la línea de
   abajo:  filter:grayscale(1);opacity:.72;  y vuelven a verse apagados.
   Para agrandarlos o achicarlos: max-height acá, y el min-width de .mq de arriba
   (el ancho manda tanto como el alto, porque casi todos los logos son apaisados). */
.mq img{max-height:60px;max-width:225px;width:auto;object-fit:contain;transition:transform .2s}
.mq:hover img{transform:scale(1.07)}
.mq-txt{font-weight:900;font-size:.84rem;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);
  transition:.2s}
.mq-txt:hover{color:var(--rojo)}

/* ---------------- buscador ---------------- */
.buscador{display:flex;flex:1;max-width:430px;margin:0 8px;border:1.5px solid var(--line);background:#fff}
.buscador input{flex:1;min-width:0;border:0;padding:11px 14px;font-family:inherit;font-size:.88rem;
  font-weight:400;color:var(--txt);background:transparent}
.buscador input:focus{outline:0}
.buscador:focus-within{border-color:var(--rojo)}
.buscador button{border:0;background:var(--pizarra);color:#fff;padding:0 16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.buscador button:hover{background:var(--rojo)}
/* Entre 940 y 1120 px (notebooks chicas, tablets apaisadas) el buscador, el menú
   y el botón del carrito no entran en un solo renglón y empujaban la página a lo
   ancho. Abajo de 1120 el buscador pasa a su propio renglón. */
@media(max-width:1120px){
  .buscador{order:4;flex-basis:100%;max-width:none;margin:0 0 12px}
  .hdr-in{flex-wrap:wrap;padding-top:12px}
}

/* ---------------- tira de marcas ---------------- */
.marcas{padding:34px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marcas .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.marcas-titulo{font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-3);flex-shrink:0}
.marcas-tira{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.marcas-tira span{background:#fff;border:1px solid var(--line);padding:8px 16px;
  font-weight:900;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-2)}

/* ---------------- header ---------------- */
.hdr{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 10px rgba(58,61,71,.06)}
/* min-height y no height: cuando el buscador baja a su propio renglón (abajo de
   1120 px) el encabezado tiene que crecer. Con height fijo no crecía y el
   buscador se salía por abajo, tapando el banner de marcas. */
.hdr-in{display:flex;align-items:center;gap:26px;min-height:76px}
.logo{flex-shrink:0;display:flex;align-items:center}
.logo img{height:40px;width:auto}
.nav{display:flex;align-items:center;margin-left:auto;font-size:.83rem;color:var(--txt);
  font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.nav a{padding:5px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:not(:last-child)::after{content:'/';margin:0 14px;color:var(--txt-3);border:0;display:inline-block}
.nav a:hover{border-bottom-color:var(--rojo);color:var(--rojo)}
.hdr-cart{position:relative;display:flex;align-items:center;gap:9px;background:var(--rojo);color:#fff;
  padding:12px 20px;font-size:.83rem;font-weight:700;flex-shrink:0;margin-left:26px;text-transform:uppercase;letter-spacing:.03em}
.hdr-cart:hover{background:var(--rojo-osc)}
.hdr-cart .badge{background:#fff;color:var(--rojo);border-radius:20px;min-width:21px;height:21px;
  display:none;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;padding:0 6px}
.hdr-cart.has .badge{display:flex}
.burger{display:none;background:none;border:0;color:var(--txt);font-size:1.5rem;cursor:pointer;line-height:1}
@media(max-width:940px){
  /* min-height, NO height: abajo de 1120 el buscador baja a su propio renglón, y
     con alto fijo el encabezado no crecía. El buscador se salía por abajo y
     tapaba el banner de marcas. */
  .hdr-in{min-height:64px;gap:14px}
  .logo img{height:32px}
  /* El menú se cuelga del borde de abajo del encabezado en vez de a 64 px fijos
     del techo, así acompaña cuando el encabezado tiene dos renglones. */
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;
    padding:20px 24px;gap:16px;border-bottom:1px solid var(--line);display:none;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a:not(:last-child)::after{display:none}
  .burger{display:block;margin-left:auto;order:2}
  .hdr-cart{order:3;padding:10px 15px;margin-left:0}
}

/* ---------------- hero compacto: alto fijo y bajo, para que el catálogo se vea ---------------- */
.hero-compacto{padding:26px 0;position:relative;overflow:hidden}
.hero-compacto::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 200px at 8% 0%,rgba(218,46,46,.22),transparent 68%)}
.hero-compacto-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px}
.hero-texto{max-width:640px}
.hero-compacto h1{font-size:clamp(1.35rem,2.5vw,1.95rem);margin:0 0 6px}
.hero-compacto p{font-size:.92rem;color:var(--txt-2);margin:0;font-weight:300;line-height:1.5}
.hero-datos{display:flex;gap:26px;flex-shrink:0}
.hero-datos div{font-size:.7rem;color:var(--txt-2);font-weight:400;white-space:nowrap;text-align:center}
.hero-datos strong{display:block;color:#FF8A8A;font-size:1.25rem;font-weight:900;letter-spacing:-.02em;line-height:1.2}
@media(max-width:900px){
  .hero-compacto{padding:22px 0}
  .hero-compacto-in{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-datos{gap:20px;flex-wrap:wrap}
}

/* ---------------- hero de las páginas internas ---------------- */
.hero{position:relative;padding:56px 0 50px;overflow:hidden}
/* Encabezado fino de las landings: antes empujaba los productos muy abajo. */
.hero-fino{padding:22px 0 20px}
.hero-fino h1{font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 5px}
.hero-fino p.lead{font-size:.92rem;line-height:1.45;margin:0;max-width:640px}
.hero-fino .trust{margin-top:16px;padding-top:14px;gap:26px}
.hero-fino .trust div{font-size:.72rem}
.hero-fino .trust strong{font-size:1.18rem}
@media(max-width:700px){.hero-fino{padding:20px 0 18px}.hero-fino .trust{gap:18px;margin-top:13px;padding-top:12px}}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(780px 300px at 12% -10%,rgba(218,46,46,.20),transparent 62%)}
.hero-in{position:relative;max-width:800px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rojo);background:var(--rojo-suave);
  border:1px solid rgba(218,46,46,.32);padding:7px 14px;margin-bottom:18px}
.oscuro .eyebrow{color:#FF8A8A;background:rgba(218,46,46,.2);border-color:rgba(218,46,46,.5)}
.hero p.lead{font-size:1.02rem;color:var(--txt-2);max-width:620px;font-weight:300;line-height:1.55}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.trust{display:flex;gap:34px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.trust div{font-size:.8rem;color:var(--txt-2);font-weight:400}
.trust strong{display:block;color:var(--rojo);font-size:1.5rem;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.oscuro .trust strong{color:#FF8A8A}

/* ---------------- botones: esquina viva, como en el sitio ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 26px;
  font-weight:700;font-size:.94rem;border:2px solid transparent;cursor:pointer;transition:.15s;
  font-family:inherit;text-align:center;line-height:1.25}
.btn-1{background:var(--rojo);color:#fff}
.btn-1:hover{background:var(--rojo-osc)}
.btn-2{background:transparent;color:var(--txt);border-color:var(--txt);}
.btn-2:hover{background:var(--txt);color:#fff}
.oscuro .btn-2{border-color:rgba(255,255,255,.5);color:#fff}
.oscuro .btn-2:hover{background:#fff;color:var(--pizarra);border-color:#fff}
.btn-wa{background:#25D366;color:#0B1F13}
.btn-wa:hover{background:#1FBA59}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-full{width:100%}

/* ---------------- secciones ---------------- */
section{padding:40px 0}
.sec-productos{padding-top:26px}
.banda-cats{padding:16px 0 4px}
.sec-destacados{padding:22px 0 8px}
.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.oscuro.alt{border-color:var(--line)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.sec-head p{color:var(--txt-2);margin:0;max-width:590px}
/* Franja roja de cierre, como el bloque de contacto de gaming-security.com */
.roja{background:var(--rojo-osc);color:#fff;--txt:#fff;--txt-2:rgba(255,255,255,.86);--txt-3:rgba(255,255,255,.7);--line:rgba(255,255,255,.28)}
.roja h2{color:#fff}
.roja .btn-2{border-color:#fff;color:#fff}
.roja .btn-2:hover{background:#fff;color:var(--rojo-osc)}
.roja .btn-1{background:#fff;color:var(--rojo-osc)}
.roja .btn-1:hover{background:var(--pizarra);color:#fff}

/* ---------------- grilla de productos ----------------
   Seis por fila en PC. Los cortes están puestos donde la tarjeta se vuelve
   incómoda, no en anchos de dispositivo: 6 → 5 → 4 → 3 → 2. */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media(max-width:1180px){.grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:980px) {.grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:800px) {.grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(max-width:560px) {.grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.card{background:var(--bg);border:1px solid var(--line);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:.18s}
.card:hover{border-color:var(--rojo);box-shadow:var(--shadow-alta);transform:translateY(-2px)}
.oscuro .card{background:var(--surface)}
.card-img{aspect-ratio:1/1;background:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.card-img img{width:100%;height:100%;object-fit:contain;padding:11px}
/* Aviso de "vistazo rápido": aparece sobre la foto al pasar el mouse, para que
   se entienda que la tarjeta se abre. En touch no hay hover, así que no se
   muestra nunca y no molesta. */
.lupa{position:absolute;left:0;right:0;bottom:0;background:rgba(58,61,71,.92);color:#fff;
  font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 4px;text-align:center;transform:translateY(100%);transition:.18s;pointer-events:none}
.card:hover .lupa{transform:translateY(0)}
@media(hover:none){.lupa{display:none}}
.card-body{padding:12px 12px 14px;display:flex;flex-direction:column;flex:1}
/* En la tarjeta el logo va en su propio renglón, a lo ancho: casi todos los
   logos son apaisados, así que el ancho disponible manda más que el alto. El
   código del producto pasa abajo del todo para no robarle lugar. */
.brand{font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
  margin-bottom:8px;display:flex;justify-content:space-between;gap:6px;align-items:center;min-height:38px}
.brand .sku{font-weight:400;letter-spacing:.04em;opacity:.75;font-size:.57rem;align-self:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Alto fijo para que todas las tarjetas queden alineadas, por más que los logos
   vengan con proporciones muy distintas.
   Para agrandarlos o achicarlos, tocá el height y el max-width de esta línea. */
.brand img{height:38px;width:auto;max-width:100%;object-fit:contain;object-position:left center;display:block}
/* El logo propio va en los kits que no son de ninguna marca. Un punto más chico
   y apenas apagado, para que no le grite al nombre del producto que va abajo. */
.brand img.marca-propia{height:32px;opacity:.9}
.prod .brand img.marca-propia{height:52px}
.card .brand{display:block;min-height:38px}
.card .brand .sku{display:none}
.card-sku{font-size:.56rem;font-weight:400;letter-spacing:.05em;color:var(--txt-3);opacity:.8;
  margin-top:8px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod .brand{margin-bottom:14px;min-height:64px;font-size:.68rem;letter-spacing:.13em}
.prod .brand img{height:64px;max-width:320px}
.insignia-inst{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;
  color:var(--txt-3);margin-top:12px;text-transform:none;letter-spacing:0}
.insignia-inst svg{color:var(--rojo);flex-shrink:0}
/* Título a dos líneas exactas: con tarjetas angostas, un nombre largo y uno
   corto descuadrarían toda la fila. */
.card h3{font-size:.8rem;font-weight:700;margin:0 0 8px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card h3 a:hover{color:var(--rojo)}
.price{margin-top:auto}
.price .amt{font-size:1.42rem;font-weight:900;letter-spacing:-.02em;display:block;color:var(--txt)}
.price .cuotas{font-size:.79rem;color:var(--ok);font-weight:700}
/* Cuotas CON interes: es un dato, no una promocion. Va en gris, no en verde. */
.price .cuotas-ci{color:var(--txt-3);font-weight:600}
.vr-precio .cuotas{display:block;font-size:.82rem;color:var(--ok);font-weight:700;margin-top:2px}
.vr-precio .cuotas-ci{color:var(--txt-3);font-weight:600}
.card .price .amt{font-size:1.06rem}
.card .price .cuotas{font-size:.66rem;display:block;line-height:1.3;margin-top:1px}
.stock{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:700;margin-bottom:11px}
.stock::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.card .stock{font-size:.65rem;gap:5px;margin-bottom:8px}
.card .stock::before{width:6px;height:6px}
.s-ok{color:var(--ok)}.s-low{color:var(--warn)}.s-no{color:var(--bad)}
.card .btn{margin-top:10px;padding:9px 8px;font-size:.72rem;letter-spacing:.04em}
.tag{position:absolute;top:0;left:0;background:var(--rojo);color:#fff;font-size:.64rem;font-weight:900;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;z-index:2}
.tag-out{background:var(--pizarra)}

/* ---------------- vistazo rápido ----------------
   Ventana que se abre encima del listado al hacer clic en una tarjeta. El
   listado queda intacto abajo: mismo scroll, misma búsqueda, mismo filtro. */
.vr-fondo{position:fixed;inset:0;z-index:120;background:rgba(24,26,31,.72);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .18s}
.vr-fondo.abierto{opacity:1;visibility:visible}
.vr{background:var(--bg);width:min(940px,100%);max-height:min(88vh,760px);overflow:auto;
  position:relative;box-shadow:var(--shadow-alta);transform:translateY(10px);transition:transform .18s}
.vr-fondo.abierto .vr{transform:none}
.vr-cerrar{position:absolute;top:0;right:0;width:46px;height:46px;border:0;background:transparent;
  color:var(--txt-3);font-size:1.7rem;line-height:1;cursor:pointer;font-family:inherit;z-index:2}
.vr-cerrar:hover{color:var(--rojo)}
.vr-in{display:grid;grid-template-columns:1fr 1fr;gap:0}
.vr-foto{background:#fff;border-right:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;padding:26px;min-height:300px}
.vr-foto img{max-width:100%;max-height:380px;width:auto;height:auto;object-fit:contain}
.vr-datos{padding:30px 30px 28px;min-width:0}
/* La X flota arriba a la derecha: el primer renglón se corre para no quedar debajo. */
.vr-datos .brand{padding-right:44px}
.vr-datos h2{font-size:1.3rem;text-transform:none;letter-spacing:-.01em;margin-bottom:10px}
.vr-desc{color:var(--txt-2);font-size:.9rem;margin:0 0 18px}
.vr-precio{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:18px}
.vr-precio .amt{font-size:1.95rem;font-weight:900;letter-spacing:-.03em;display:block}
.vr-iva{font-size:.78rem;color:var(--txt-3);margin-top:3px}
.vr-acciones{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.vr-acciones .qty{margin:0}
.vr-acciones .btn{flex:1;min-width:170px}
.vr-ficha{display:block;margin-top:16px;font-size:.82rem;font-weight:700;color:var(--rojo);
  text-transform:uppercase;letter-spacing:.04em}
.vr-ficha:hover{text-decoration:underline}
.vr .specs{margin-top:20px}
.vr-cargando{padding:60px 30px;text-align:center;color:var(--txt-3);font-size:.9rem}
@media(max-width:760px){
  .vr-fondo{padding:0;align-items:flex-end}
  .vr{max-height:92vh;width:100%}
  .vr-in{grid-template-columns:1fr}
  .vr-foto{border-right:0;border-bottom:1px solid var(--line);min-height:0;padding:18px}
  .vr-foto img{max-height:240px}
  .vr-datos{padding:22px 20px 26px}
  .vr-acciones .btn{min-width:0}
}
body.vr-abierto{overflow:hidden}

/* ---------------- categorias ---------------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:22px}
.cat{background:var(--bg);border:1px solid var(--line);padding:30px 26px;transition:.18s;display:block}
.oscuro .cat{background:var(--surface)}
.cat:hover{border-color:var(--rojo);box-shadow:var(--shadow);transform:translateY(-2px)}
.cat .ico{width:50px;height:50px;background:var(--rojo-suave);display:flex;
  align-items:center;justify-content:center;margin-bottom:18px;color:var(--rojo)}
.oscuro .cat .ico{background:rgba(218,46,46,.24);color:#FF8A8A}
.cat h3{margin-bottom:8px;font-size:1.06rem}
.cat p{font-size:.88rem;color:var(--txt-2);margin:0}
.cat .more{font-size:.82rem;color:var(--rojo);font-weight:700;margin-top:16px;display:inline-block;text-transform:uppercase;letter-spacing:.04em}

/* ---- tarjeta de categoría con foto de fondo ----
   La foto va MUY atrás: bajada de opacidad y con un velo blanco encima. Tiene
   que dar clima, no pelearle al texto. Al pasar el mouse sube un poco, lo
   justo para que se note que la tarjeta está viva. */
/* Sin el ícono arriba, la tarjeta necesita más aire para que se vea la foto
   antes de que empiece el texto. */
.cat-foto{position:relative;overflow:hidden;isolation:isolate;padding-top:96px}
@media(max-width:560px){.cat-foto{padding-top:74px}}
.cat-foto::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background-image:var(--foto);background-size:cover;background-position:center;
  opacity:.62;transition:opacity .25s, transform .25s;transform:scale(1.02)}
.cat-foto::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(175deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.84) 42%,rgba(255,255,255,.94) 100%)}
.cat-foto:hover::before{opacity:.80;transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.cat-foto::before,.cat-foto:hover::before{transition:none;transform:none}}

/* ---- foto de fondo del encabezado de cada landing ----
   Acá el texto es blanco sobre franja oscura, así que el velo es oscuro. */
.hero-foto{position:relative;overflow:hidden;isolation:isolate}
.hero-foto::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background-image:var(--foto);background-size:cover;background-position:center 42%;
  opacity:.66}
.hero-foto::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(46,49,58,.90) 0%,rgba(46,49,58,.72) 48%,rgba(46,49,58,.34) 100%)}
@media(max-width:760px){
  .hero-foto::after{background:linear-gradient(180deg,rgba(46,49,58,.80) 0%,rgba(46,49,58,.90) 100%)}
}

/* ---------------- ficha de producto ---------------- */
.prod{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;padding:46px 0 60px}
@media(max-width:860px){.prod{grid-template-columns:1fr;gap:28px}}
.prod-img{background:#fff;border:1px solid var(--line);overflow:hidden;aspect-ratio:4/3}
.prod-img img{width:100%;height:100%;object-fit:contain;padding:28px}
.crumbs{font-size:.8rem;color:var(--txt-3);padding:24px 0 0;text-transform:uppercase;letter-spacing:.04em}
.crumbs a:hover{color:var(--rojo)}
.prod h1{font-size:1.8rem;text-transform:none;font-weight:900;letter-spacing:-.01em}
.prod-box{background:var(--surface);border:1px solid var(--line);padding:26px;margin:26px 0}
.prod-box .amt{font-size:2.35rem;font-weight:900;letter-spacing:-.03em;display:block}
.qty{display:flex;align-items:center;border:2px solid var(--line);overflow:hidden;width:fit-content;margin:18px 0;background:var(--bg)}
.qty button{background:transparent;border:0;color:var(--txt);width:44px;height:46px;font-size:1.25rem;cursor:pointer;font-family:inherit;font-weight:700}
.qty button:hover{background:var(--rojo);color:#fff}
.qty input{background:transparent;border:0;color:var(--txt);width:58px;height:46px;text-align:center;font-size:1rem;font-weight:700;font-family:inherit}
.specs{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--line)}
.specs li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.89rem}
.specs li b{color:var(--txt-2);font-weight:700;min-width:122px;text-transform:uppercase;font-size:.76rem;letter-spacing:.05em;padding-top:2px}

/* ---------------- carrito ---------------- */
.cart-row{display:grid;grid-template-columns:94px 1fr auto auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.cart-row img{width:94px;height:72px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:6px}
.cart-row .rm{background:none;border:0;color:var(--txt-3);cursor:pointer;font-size:1.35rem;line-height:1;padding:4px 8px;font-family:inherit}
.cart-row .rm:hover{color:var(--rojo)}
@media(max-width:640px){.cart-row{grid-template-columns:66px 1fr auto}.cart-row img{width:66px;height:54px}}
.totals{background:var(--surface);border:1px solid var(--line);padding:26px;position:sticky;top:98px}
.totals .r{display:flex;justify-content:space-between;padding:9px 0;font-size:.91rem;color:var(--txt-2);font-weight:400}
.totals .r.big{border-top:1px solid var(--line);margin-top:10px;padding-top:17px;font-size:1.3rem;font-weight:900;color:var(--txt)}
.cart-grid{display:grid;grid-template-columns:1fr 350px;gap:46px;align-items:start}
@media(max-width:860px){.cart-grid{grid-template-columns:1fr}.totals{position:static}}
.field{margin-bottom:15px}
.field label{display:block;font-size:.76rem;color:var(--txt-2);margin-bottom:6px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.field select{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--txt);
  padding:12px 14px;font-size:.93rem;font-family:inherit;font-weight:400}
.field select:focus{outline:0;border-color:var(--rojo)}
.ayuda-campo{font-size:.74rem;color:var(--txt-3);margin:6px 0 0;text-transform:none;letter-spacing:0}
.campos-2{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
@media(max-width:480px){.campos-2{grid-template-columns:1fr}}
.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
  padding:12px 14px;font-size:.93rem;font-family:inherit;font-weight:400}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--rojo)}

/* ---------------- faq / beneficios ---------------- */
.faq details{border:1px solid var(--line);background:var(--bg);margin-bottom:10px;padding:18px 22px}
.oscuro .faq details{background:var(--surface)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--rojo);font-size:1.4rem;line-height:1;font-weight:400}
.faq details[open] summary::after{content:'–'}
.faq p{margin:13px 0 0;color:var(--txt-2);font-size:.92rem}
.bene{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:24px}
.bene div{padding:26px;background:var(--bg);border:1px solid var(--line);border-top:4px solid var(--rojo)}
.oscuro .bene div{background:var(--surface)}
.bene h3{font-size:.98rem;margin-bottom:8px}
.bene p{font-size:.86rem;color:var(--txt-2);margin:0}
.empty{text-align:center;padding:76px 20px;color:var(--txt-2)}

/* ---------------- diferencial ---------------- */
.difer{position:relative;overflow:hidden}
.difer::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(740px 320px at 16% 0%,rgba(218,46,46,.18),transparent 64%)}
.difer .wrap{position:relative}
.difer-top{max-width:750px;margin-bottom:44px}
.difer-top p{color:var(--txt-2);font-size:1rem;margin-bottom:26px;line-height:1.65}
.cadena{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;padding-top:16px}
.paso{background:var(--surface);border:1px solid var(--line);padding:28px 22px 24px;position:relative}
.paso .n{position:absolute;top:-15px;left:22px;width:32px;height:32px;background:var(--rojo);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem}
.paso h3{margin:8px 0 8px;font-size:1rem}
.paso h3 em{font-style:normal;font-weight:400;color:var(--txt-3);font-size:.82rem}
.paso p{color:var(--txt-2);font-size:.88rem;margin:0}

/* ---------------- filtros, avisos, flotantes ---------------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.chip{background:var(--bg);border:1px solid var(--line);color:var(--txt-2);padding:9px 18px;
  font-size:.82rem;cursor:pointer;font-family:inherit;font-weight:700;transition:.15s;text-transform:uppercase;letter-spacing:.03em}
.chip:hover{border-color:var(--rojo);color:var(--rojo)}
.chip.on{background:var(--rojo);border-color:var(--rojo);color:#fff}
.note{background:rgba(179,116,0,.07);border:1px solid rgba(179,116,0,.3);color:#8A5800;
  padding:15px 18px;font-size:.87rem;margin:16px 0;font-weight:400}
.oscuro .note{background:rgba(242,180,65,.1);border-color:rgba(242,180,65,.34);color:#F2B441}
.wa-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.26);z-index:60;transition:.15s}
.wa-float:hover{transform:scale(1.07)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);background:var(--pizarra);color:#fff;
  padding:15px 26px;font-weight:700;font-size:.9rem;z-index:100;opacity:0;transition:.28s;
  pointer-events:none;box-shadow:var(--shadow-alta)}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ---------------- aviso de "agregado al carrito" ----------------
   Va arriba a la derecha, debajo del botón del carrito, que es adonde mira el
   cliente después de apretar comprar. */
.agregado{position:fixed;top:90px;right:16px;z-index:130;width:min(330px,calc(100vw - 32px));
  background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--ok);
  box-shadow:var(--shadow-alta);padding:15px 16px 16px;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:.2s}
.agregado.visible{opacity:1;visibility:visible;transform:none}
.agregado-tit{display:flex;align-items:center;gap:8px;font-weight:900;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ok)}
.agregado-x{margin-left:auto;background:none;border:0;color:var(--txt-3);font-size:1.4rem;
  line-height:1;cursor:pointer;padding:0 2px;font-family:inherit}
.agregado-x:hover{color:var(--rojo)}
.agregado-prod{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.85rem;line-height:1.35}
.agregado-prod img{width:46px;height:46px;object-fit:contain;background:#fff;border:1px solid var(--line);
  flex-shrink:0;padding:3px}
.agregado-pie{font-size:.76rem;color:var(--txt-3);margin-top:10px}
.agregado-acc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.agregado-acc .btn{padding:10px 8px;font-size:.74rem;text-align:center;letter-spacing:.03em}
@media(max-width:520px){
  .agregado{top:auto;bottom:12px;right:12px;left:12px;width:auto}
}
.aviso-pago{display:none;margin-top:14px;padding:13px 15px;background:var(--surface);
  border-left:3px solid var(--ok);font-size:.84rem;line-height:1.45;color:var(--txt-2)}
.aviso-pago span{color:var(--txt-3);font-size:.78rem}

/* Latido del botón del carrito al agregar algo. */
@keyframes latido{
  0%{transform:scale(1)} 28%{transform:scale(1.09)} 55%{transform:scale(.98)} 100%{transform:scale(1)}
}
.hdr-cart.late{animation:latido .5s ease-out}
@media(prefers-reduced-motion:reduce){
  .hdr-cart.late{animation:none}
  .agregado{transition:none}
}

/* ---------------- footer ---------------- */
.ftr{padding:60px 0 34px;font-size:.88rem}
.ftr-marca{margin-bottom:18px}
.ftr-marca img{height:46px;width:auto}
.ftr-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;margin-bottom:38px}
@media(max-width:820px){.ftr-grid{grid-template-columns:1fr 1fr;gap:30px}}
.ftr h4{color:var(--txt);font-size:1.25rem;margin:0 0 16px;font-weight:900;text-transform:none;letter-spacing:-.01em}
.ftr p{color:var(--txt-2);font-weight:300}
.ftr a{display:block;padding:4px 0;color:var(--txt-2);font-weight:300}
.ftr a:hover{color:#fff}
.ftr-bot{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:16px;
  flex-wrap:wrap;font-size:.79rem;color:var(--txt-3)}

/* ---------------- barra legal ---------------- */
.legal-bar{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:26px 0;margin-top:8px;border-top:1px solid var(--line)}
.btn-arrep{display:inline-flex;align-items:center;gap:9px;background:transparent;border:2px solid var(--rojo);
  color:var(--txt);padding:12px 20px;font-weight:700;font-size:.84rem;flex-shrink:0}
.btn-arrep:hover{background:var(--rojo);color:#fff}
.legal-bar .vendedor{font-size:.81rem;color:var(--txt-2);line-height:1.6;flex:1;min-width:220px;font-weight:300}
.legal-bar .vendedor strong{color:var(--txt);font-weight:700}
.data-fiscal{flex-shrink:0}
.legal-bar img{background:#fff;flex-shrink:0}
.df-alt{flex-direction:column;align-items:center;gap:5px;background:#fff;padding:8px 8px 6px}
.df-alt em{font-style:normal;font-size:.57rem;font-weight:900;color:#3A3D47;letter-spacing:.06em;text-transform:uppercase}

/* ---------------- páginas legales ---------------- */
.legal{max-width:780px;margin:0 auto;padding:46px 0 20px}
.legal h1{font-size:2.05rem}
.legal .bajada{color:var(--txt-2);font-size:1.03rem;padding-bottom:28px;border-bottom:1px solid var(--line)}
.legal h2{font-size:1.1rem;margin:42px 0 12px;scroll-margin-top:98px;letter-spacing:.02em}
.legal p{color:var(--txt-2);font-size:.94rem;line-height:1.65}
.legal a{color:var(--rojo);text-decoration:underline;text-underline-offset:3px}
.legal .indice{background:var(--surface);border:1px solid var(--line);padding:24px 28px;margin:30px 0 6px}
.legal .indice h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--txt-3);margin-bottom:14px;font-weight:900}
.legal .indice ol{margin:0;padding-left:20px;color:var(--txt-2);font-size:.89rem}
.legal .indice li{padding:3px 0}
.legal .indice a{color:var(--txt-2);text-decoration:none;font-weight:400}
.legal .indice a:hover{color:var(--rojo)}
.legal .actualizado{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:.82rem;color:var(--txt-3)}
.destacado-legal{background:var(--rojo-suave);border-left:4px solid var(--rojo);padding:20px 24px;margin:24px 0}
.destacado-legal p:last-child{margin-bottom:0}

/* ---------------- arrepentimiento ---------------- */
.arrep{max-width:670px;margin:0 auto;padding:46px 0 68px}
.arrep h1{font-size:1.9rem}
.arrep-form{background:var(--surface);border:1px solid var(--line);padding:30px;margin-top:28px}
.arrep-ok{background:rgba(30,138,95,.07);border-left:4px solid var(--ok);padding:36px;text-align:center;margin-top:28px}
.arrep-ok .codigo{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:1.7rem;font-weight:700;color:var(--ok);
  letter-spacing:.06em;display:block;margin:16px 0;padding:16px;background:var(--bg);border:1px dashed rgba(30,138,95,.4)}
.pasos{list-style:none;padding:0;margin:30px 0 0;counter-reset:p}
.pasos li{counter-increment:p;position:relative;padding:0 0 22px 48px;color:var(--txt-2);font-size:.92rem}
.pasos li::before{content:counter(p);position:absolute;left:0;top:-1px;width:32px;height:32px;
  background:var(--rojo);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.84rem}
.pasos li strong{color:var(--txt);display:block;margin-bottom:2px}

/* ---------------- comprobante al volver de Mercado Pago ---------------- */
.comprobante{max-width:460px;margin:40px auto 0;background:var(--surface);border:1px solid var(--line);
  padding:26px 28px;text-align:left}
.comprobante h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--txt-3);
  font-weight:900;margin:0 0 16px}
.comprobante dl{margin:0 0 16px}
.comprobante dl > div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.comprobante dt{color:var(--txt-2);font-size:.83rem;font-weight:400;margin:0}
.comprobante dd{margin:0;font-weight:700;font-size:.9rem;text-align:right;word-break:break-all}
.comprobante p{font-size:.82rem;color:var(--txt-2);margin:0 0 16px}
.comprobante .btn{width:100%;padding:12px 18px;font-size:.86rem}

/* ═══════════ TIRA DEL DISTRIBUIDOR ═══════════
   Versión fina de la barra, para las páginas que no son la suya. El cliente
   tiene que saber siempre con quién compra y poder salirse. */
.dist-tira{background:#2b2e36;color:#fff;border-bottom:2px solid var(--rojo);font-size:.8rem}
.dist-tira-in{display:flex;align-items:center;gap:10px;padding:8px 0;flex-wrap:wrap}
.dist-tira img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid rgba(255,255,255,.5)}
.dist-tira a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.dist-tira b{font-weight:800}
.dist-tira-wa{margin-left:auto;background:#25D366;color:#0A0E13 !important;
  font-weight:800;font-size:.72rem;padding:6px 13px;border-radius:6px;
  white-space:nowrap;text-decoration:none !important;transition:filter .15s}
.dist-tira-wa:hover{filter:brightness(1.08)}
@media(max-width:560px){
  .dist-tira{font-size:.74rem}
  .dist-tira-wa{margin-left:0;width:100%;text-align:center;margin-top:3px;padding:8px}
}

/* ═══════════ EL DISTRIBUIDOR EN EL ENCABEZADO ═══════════
   En su página, el nombre del distribuidor ocupa el lugar del logo: la tienda
   es de él. Nuestro logo va abajo y chico, como respaldo. */
.logo-dist{display:flex;align-items:center;gap:12px;text-decoration:none}
.ld-foto{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--line);background:var(--surface)}
.ld-inicial{display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:900;color:var(--rojo);line-height:1}
.ld-txt{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.15}
.ld-nombre{font-size:1.36rem;font-weight:900;letter-spacing:-.025em;color:var(--txt)}
.ld-resp{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:.6rem;font-weight:700;color:var(--txt-3);
  text-transform:uppercase;letter-spacing:.05em}
.ld-resp img{height:15px;width:auto}
/* La versión corta del rótulo solo aparece en pantallas angostas. Sin esta
   línea se veían las dos juntas: "Distribuidora oficial de Oficial de". */
.ld-corto{display:none}
.logo-dist:hover .ld-nombre{color:var(--rojo)}
@media(max-width:1120px){
  .ld-nombre{font-size:1.2rem}
  .ld-foto{width:46px;height:46px}
}
@media(max-width:560px){
  .logo-dist{gap:9px}
  .ld-foto{width:40px;height:40px}
  .ld-nombre{font-size:1.02rem}
  .ld-resp{font-size:.54rem;gap:4px}
  .ld-resp img{height:12px}
}

/* ═══════════ BANDA DE CATEGORÍAS ═══════════
   Reemplaza a la grilla de tarjetas grandes. Ocupa una fracción del alto
   y deja los productos arriba del pliegue, que es lo que importa. */
.cintas{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.cinta{position:relative;overflow:hidden;isolation:isolate;display:flex;
  flex-direction:column;justify-content:flex-end;gap:2px;
  min-height:86px;padding:10px 12px;border:1px solid var(--line);
  background:var(--surface);transition:.16s}
.cinta:hover{border-color:var(--rojo);transform:translateY(-2px);box-shadow:var(--shadow)}
.cinta-foto::before{content:'';position:absolute;inset:0;z-index:-2;
  background-image:var(--foto);background-size:cover;background-position:center;
  transition:transform .25s}
.cinta-foto::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(15,17,21,.06) 0%,rgba(15,17,21,.30) 46%,rgba(15,17,21,.68) 100%)}
.cinta-foto:hover::before{transform:scale(1.07)}
.cinta-foto .cinta-nom{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.55)}
.cinta-foto .cinta-n{color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.cinta-nom{font-size:.83rem;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.cinta-n{font-size:.66rem;font-weight:600;color:var(--txt-3)}
.cinta-n::after{content:' con stock'}
@media(prefers-reduced-motion:reduce){.cinta-foto::before,.cinta-foto:hover::before{transition:none;transform:none}}
@media(max-width:900px){
  .cintas{grid-template-columns:repeat(3,1fr);gap:8px}
  .cinta{min-height:64px;padding:9px 10px}
}
@media(max-width:520px){
  .cintas{grid-template-columns:repeat(2,1fr)}
  .cinta-nom{font-size:.78rem}
  .cinta-n::after{content:''}
}

/* ═══════════ TÍTULO DE BLOQUE ═══════════
   Más finito que .sec-head, para no comerse la pantalla antes de los productos. */
.tit-bloque{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:0 0 16px;padding-bottom:9px;border-bottom:2px solid var(--line)}
.tit-bloque h2{margin:0;font-size:clamp(1.1rem,2vw,1.4rem)}
.tit-bloque span{font-size:.8rem;color:var(--txt-3);font-weight:400}
.tit-destacados{border-bottom-color:var(--rojo)}
.tit-destacados h2::before{content:'★';color:var(--rojo);margin-right:8px;font-size:.9em}

/* En el celular, el bloque del distribuidor es más ancho que nuestro logo y
   empujaba el CARRITO a un renglón propio. Se achica lo justo para que el
   nombre, el menú y el carrito entren en el mismo renglón. */
@media(max-width:900px){
  .logo-dist{flex:1;min-width:0;gap:9px}
  .ld-txt{min-width:0}
  .ld-nombre{font-size:1.06rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ld-resp{font-size:.55rem;letter-spacing:.03em;gap:4px;flex-wrap:nowrap;white-space:nowrap}
  .ld-resp img{height:12px;flex-shrink:0}
  .ld-largo{display:none}
  .ld-corto{display:inline}
  .ld-foto{width:38px;height:38px}
  .hdr-in:has(.logo-dist) .hdr-cart{padding:9px 13px;font-size:.86rem}
  .hdr-in:has(.logo-dist) .burger{margin-left:8px}
}
@media(max-width:400px){
  .ld-nombre{font-size:.98rem}
  .ld-resp{font-size:.5rem}
  .hdr-in:has(.logo-dist) .hdr-cart .txt-carrito{display:none}
}

/* Zona sin envío por moto: en vez del botón de pagar, uno de WhatsApp. */
.cotizar-envio{margin-top:12px;padding:14px 16px;background:var(--rojo-suave);
  border-left:3px solid var(--rojo)}
.cotizar-envio p{margin:0 0 11px;font-size:.86rem;line-height:1.5}

/* ═══════════ SUMATE COMO DISTRIBUIDOR ═══════════ */
.sumate-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:900px){.sumate-grid{grid-template-columns:1fr;gap:30px}}
.sumate-pasos{margin:0 0 30px;padding-left:20px;line-height:1.7}
.sumate-pasos li{margin-bottom:9px}
.sumate-avisos{display:grid;gap:11px;margin-bottom:24px}
.sumate-avisos div{background:var(--surface);border-left:3px solid var(--rojo);
  padding:12px 15px;font-size:.9rem;line-height:1.55}
.sumate-legal{font-size:.9rem;color:var(--txt-2)}
.sumate-legal a{color:var(--rojo);font-weight:700;text-decoration:underline}
.acepto{display:flex;gap:11px;align-items:flex-start;margin:20px 0;
  font-size:.86rem;line-height:1.5;cursor:pointer}
.acepto input{margin-top:2px;width:17px;height:17px;flex-shrink:0;accent-color:var(--rojo)}
.acepto a{color:var(--rojo);font-weight:700;text-decoration:underline}
.sumate-msg{margin-top:16px;padding:14px 16px;font-size:.9rem;line-height:1.6}
.sumate-msg.bien{background:#f1f8f2;border-left:3px solid var(--ok)}
.sumate-msg.mal{background:var(--rojo-suave);border-left:3px solid var(--rojo);font-weight:700}
.checkout textarea{width:100%;font:inherit;padding:12px 13px;border:1px solid var(--line);
  background:var(--bg);color:var(--txt);resize:vertical}
.checkout input[type=file]{width:100%;font:inherit;font-size:.86rem;padding:10px 12px;
  border:1px dashed var(--line);background:var(--bg);cursor:pointer}

/* El .md de las condiciones, publicado */
.legal-md table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.92rem}
.legal-md th{background:var(--rojo);color:#fff;text-align:left;padding:9px 12px;font-weight:700}
.legal-md td{padding:9px 12px;border-bottom:1px solid var(--line)}
.legal-md blockquote{margin:0 0 22px;padding:15px 18px;background:var(--rojo-suave);
  border-left:3px solid var(--rojo)}
.legal-md blockquote p:last-child{margin-bottom:0}
.legal-md ul,.legal-md ol{margin:0 0 20px;padding-left:22px;line-height:1.7}
.legal-md li{margin-bottom:6px}
.legal-md hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.legal-md code{background:var(--surface);padding:2px 6px;font-size:.9em}
.tabla-scroll{overflow-x:auto;margin-bottom:20px}

/* ═══════════ INVITACIÓN A LA RED DE DISTRIBUIDORES ═══════════ */
.invita{background:var(--pizarra);color:#fff;padding:44px 0;position:relative;overflow:hidden}
.invita::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 280px at 88% 0,rgba(218,46,46,.30),transparent 65%)}
.invita-in{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:44px;flex-wrap:wrap}
.invita-txt{max-width:640px}
.invita-ojo{display:inline-block;font-size:.68rem;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:#FF8A8A;margin-bottom:10px}
.invita h2{color:#fff;margin:0 0 9px;font-size:clamp(1.3rem,2.6vw,1.85rem)}
.invita p{color:rgba(255,255,255,.84);margin:0 0 14px;font-weight:300;line-height:1.55;font-size:.95rem}
.invita-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.invita-lista li{font-size:.87rem;color:rgba(255,255,255,.9);padding-left:22px;position:relative}
/* Tilde: un rectangulo mas ancho que alto, con dos bordes, girado. Si sale
   cuadrado parece una flechita hacia abajo en vez de un tilde. */
.invita-lista li::before{content:'';position:absolute;left:1px;top:.34em;width:11px;height:6px;
  border:2px solid var(--rojo);border-top:0;border-right:0;transform:rotate(-45deg)}
.invita-acc{display:flex;flex-direction:column;gap:12px;align-items:stretch;flex-shrink:0}
.invita-mas{text-align:center;font-size:.82rem;color:rgba(255,255,255,.72);
  text-decoration:underline;text-underline-offset:3px}
.invita-mas:hover{color:#fff}
@media(max-width:800px){
  .invita{padding:34px 0}
  .invita-in{gap:24px}
  .invita-acc{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTÓN QUE ABRE EL CATÁLOGO COMPLETO

   La home muestra solo los destacados. Este botón es la puerta al resto, así
   que tiene que ser imposible no verlo: ancho completo, alto de verdad y una
   flecha que empuja para adelante. No es un enlace de texto perdido abajo.
   ═══════════════════════════════════════════════════════════════════════ */
.abre-catalogo{padding:8px 0 40px}
.abre-catalogo-in{text-align:center}
.btn-catalogo{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  width:100%;padding:24px 28px;
  background:var(--pizarra);color:#fff;border:2px solid var(--pizarra);
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.btn-catalogo:hover{background:var(--rojo);border-color:var(--rojo);
  transform:translateY(-2px);box-shadow:var(--shadow-alta)}
.bc-tit{font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.05rem,2.4vw,1.5rem);line-height:1.15}
.bc-sub{font-size:.82rem;font-weight:400;color:rgba(255,255,255,.72);
  border-left:1px solid rgba(255,255,255,.28);padding-left:16px}
.bc-flecha{width:26px;height:26px;flex-shrink:0;transition:transform .18s}
.btn-catalogo:hover .bc-flecha{transform:translateX(5px)}
.abre-catalogo-nota{margin:12px 0 0;font-size:.82rem;color:var(--txt-2)}
@media(max-width:700px){
  .btn-catalogo{flex-direction:column;gap:8px;padding:20px 18px}
  .bc-sub{border-left:0;padding-left:0}
  .bc-flecha{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   PANEL DE FILTROS DEL CATÁLOGO

   En pantalla ancha va como columna fija a la izquierda y se queda pegada
   mientras el catálogo se desliza al lado. En celular no entra al lado de
   nada, así que se abre encima de todo con un botón.
   ═══════════════════════════════════════════════════════════════════════ */
.sec-catalogo{padding-top:22px}
.cat-cols{display:grid;grid-template-columns:246px 1fr;gap:30px;align-items:start}

.filtros{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;
  border:1px solid var(--line);background:var(--surface-2);padding:18px 16px}
.filtros-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.filtros-cab h2{margin:0;font-size:.95rem;letter-spacing:.05em}
.filtros-limpiar{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:.76rem;font-weight:700;color:var(--rojo);text-decoration:underline;
  text-underline-offset:2px}
.filtros-limpiar[hidden]{display:none}

.fgrupo{margin-bottom:18px}
.fgrupo h3{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  color:var(--txt-3);margin:0 0 8px}

.fcampo{width:100%;font:inherit;font-size:.85rem;font-weight:400;padding:8px 10px;
  border:1px solid var(--line);background:var(--bg);color:var(--txt);border-radius:0}
.fcampo:focus{outline:none;border-color:var(--rojo)}
.fcampo-chico{font-size:.78rem;padding:6px 9px;margin-bottom:7px}

.flista{display:flex;flex-direction:column;gap:1px}
/* Con casi 30 marcas la lista sola ocuparía toda la pantalla. Se corta y se
   desliza; arriba tiene su propio buscador. */
.flista-alta{max-height:224px;overflow-y:auto;padding-right:4px}

.fitem{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 5px;
  font-size:.85rem;font-weight:400;line-height:1.25;transition:background .12s}
.fitem:hover{background:var(--surface)}
.fitem[hidden]{display:none}
.fitem input{width:15px;height:15px;flex-shrink:0;accent-color:var(--rojo);margin:0;cursor:pointer}
.fitem-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fitem-n{font-size:.72rem;color:var(--txt-3);font-variant-numeric:tabular-nums;flex-shrink:0}
.fitem-solo{font-weight:700;padding:8px 5px;border-top:1px solid var(--line)}

.frango{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.frango label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3);font-weight:700}
.fnota{margin:7px 0 0;font-size:.72rem;color:var(--txt-3)}

/* Al lado de la columna de filtros quedan ~840 px. Con las 6 columnas de la
   home las tarjetas caen a 130 px y no se lee ni el nombre del producto.
   Acá van de a 4, que es el ancho que soporta una foto y dos renglones. */
.cat-resultados .grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.cat-resultados .grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px) {.cat-resultados .grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px) {.cat-resultados .grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px) {.cat-resultados .grid{grid-template-columns:repeat(2,1fr)}}

.cat-barra{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.cat-cuenta{font-weight:900;font-size:.9rem;font-variant-numeric:tabular-nums}
.cat-orden{display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3)}
.cat-orden select{font:inherit;font-size:.82rem;font-weight:400;text-transform:none;
  letter-spacing:0;color:var(--txt);padding:7px 9px;border:1px solid var(--line);
  background:var(--bg);border-radius:0;cursor:pointer}
.cat-orden select:focus{outline:none;border-color:var(--rojo)}

/* El catálogo esconde tarjetas con el atributo hidden, no con display:none en
   línea. Pero .card trae display:flex, que le gana a hidden: hay que forzarlo. */
.grid [data-prod][hidden]{display:none !important}

.filtros-abrir,.filtros-cerrar,.filtros-x{display:none}

@media(max-width:900px){
  .cat-cols{grid-template-columns:1fr;gap:0}

  .filtros-abrir{display:inline-flex;align-items:center;gap:9px;
    font:inherit;font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
    background:var(--bg);color:var(--txt);border:1px solid var(--txt);
    padding:11px 18px;cursor:pointer;margin-bottom:18px;border-radius:0}
  .filtros-abrir svg{width:17px;height:17px}
  .filtros-abrir .fa-n:not(:empty){background:var(--rojo);color:#fff;border-radius:20px;
    min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;
    font-size:.68rem}

  .filtros{position:fixed;inset:0;z-index:60;max-height:none;height:100%;
    padding:0 20px 96px;border:0;background:var(--bg);
    display:none;overflow-y:auto}
  .filtros.abierto{display:block}
  .flista-alta{max-height:none}

  /* El encabezado queda pegado arriba: bajando por 40 marcas se pierde de
     vista dónde estabas y cómo se cierra esto. */
  .filtros-cab{position:sticky;top:0;z-index:1;background:var(--bg);
    align-items:center;padding-top:16px;margin-bottom:16px}
  .filtros-cab h2{font-size:1.15rem}
  .filtros-x{display:block;background:none;border:0;cursor:pointer;
    font-size:1.9rem;line-height:1;color:var(--txt-2);padding:0 2px;margin-left:4px}

  /* Barra fija abajo. Va sobre una franja opaca con un degradé arriba, si no
     las casillas se leen por detrás del botón y queda sucio. */
  .filtros-cerrar{display:block;position:fixed;left:0;right:0;bottom:0;
    width:auto;margin:0 20px 18px;text-align:center;z-index:2}
  .filtros.abierto::after{content:'';position:fixed;left:0;right:0;bottom:0;height:86px;
    background:linear-gradient(to bottom,transparent,var(--bg) 34%);pointer-events:none;z-index:1}

  /* Con el panel abierto, el globito de WhatsApp se monta justo encima del
     botón de ver resultados. Mientras filtrás, no va. */
  body.sin-scroll{overflow:hidden}
  body.sin-scroll .wa-float{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   REDES SOCIALES

   En nuestras páginas van las nuestras; en la de un distribuidor, las de él.
   Nunca las dos: sería competirle por el seguidor que él trajo.
   ═══════════════════════════════════════════════════════════════════════ */
.redes{display:inline-flex;align-items:center;gap:6px}
.red{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex-shrink:0;border:1px solid var(--line);color:var(--txt-2);
  transition:color .16s,border-color .16s,background .16s,transform .16s}
.red svg{width:17px;height:17px}
.red:hover{transform:translateY(-1px);color:#fff}
.red-ig:hover{background:#C13584;border-color:#C13584}
.red-fb:hover{background:#1877F2;border-color:#1877F2}

.redes-hdr{margin-left:2px}
@media(max-width:1080px){.redes-hdr{display:none}}

.redes-ftr{margin-top:10px}
.ftr .red{border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.82)}