:root{
  --rojo:#CB0000; --rojo-oscuro:#9A0000;
  --tinta:#2A2A2A; --tinta-suave:#5A5A5A; --tinta-tenue:#8A8A8A;
  --blanco:#FFFFFF; --papel:#FAFAFA; --papel-calido:#F2F1EE; --linea:#E4E2DD;
  --ok:#1E8E3E; --warn:#F2B705; --bad:#CB0000;
  /* Del manual de marca: escala de acero y el amarillo de precaucion. */
  --acero-900:#0A0A0A; --amarillo:#F2B705;
  --display:"Montserrat","Archivo Black",Impact,system-ui,sans-serif;
  --texto:"Inter","Helvetica Neue",system-ui,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --ancho:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:15px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 20px}

/* Volanta mono: la usa el manual para etiquetar sin gritar */
.volanta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-tenue)}
.sku{font-family:var(--mono);font-size:12px;color:var(--tinta-suave)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

h1,h2,h3{font-family:var(--display);font-weight:900;line-height:1.08;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(1.9rem,4.5vw,3.4rem)}
h2{font-size:clamp(1.3rem,2.5vw,1.75rem)}

/* ── Cabecera ── */
/* ── Cabecera ──────────────────────────────────────────────────────────────────────────
   El manual de marca manda: "Rojo Telmo 55% - el rojo manda, los neutros estructuran. Si el
   rojo no aparece, no es Telmo". La cabecera blanca de antes tenia el rojo como acento, o sea
   al reves de la marca. Estructura tomada de Toolstation (el referente que eligio Telmo):
   tira fina arriba, banda de color con el buscador de protagonista, nav debajo, y una franja
   con las condiciones. Lo unico que NO se copia es la barra de CATEGORIAS: este catalogo tiene
   categoria en el 3,2% de los productos (medido) - la navegacion real es por MARCA. */
.cab{background:var(--rojo);position:sticky;top:0;z-index:50}
.cab-tira{background:var(--acero-900);color:#B5B6B8;font-size:11.5px;font-family:var(--mono);letter-spacing:.04em}
.cab-tira-in{max-width:var(--ancho);margin:0 auto;padding:7px 20px;display:flex;justify-content:space-between;gap:16px}
.cab-tira-fin{display:flex;gap:16px;align-items:center}
.cab-tira-fin b{color:#fff}
.cab-in{max-width:var(--ancho);margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* El buscador es el protagonista: en un catalogo de miles de codigos, buscar ES la navegacion. */
.buscar{flex:1;min-width:240px;display:flex;background:var(--blanco);border-radius:6px;position:relative}
.buscar input{flex:1;min-width:0;border:0;padding:14px 16px;font:inherit;font-size:15px;background:none;border-radius:6px 0 0 6px}
.buscar button{border-radius:0 6px 6px 0}
/* Sugerencias al tipear (las arma pedido.js): cuelgan del form, por encima del contenido. */
.sugerencias{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--blanco);border-radius:8px;
  box-shadow:0 14px 36px rgba(0,0,0,.25);z-index:60;max-height:70vh;overflow-y:auto;text-align:left}
.sug{display:flex;gap:12px;align-items:center;padding:8px 12px;text-decoration:none;color:var(--tinta);border-bottom:1px solid var(--linea)}
.sug[aria-selected=true],.sug:hover{background:var(--papel-calido)}
.sug img{width:44px;height:44px;object-fit:contain;flex:none;background:var(--blanco)}
.sug-tit{flex:1;font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sug-precio{font-weight:600;white-space:nowrap;font-size:14px}
.sug-precio small{color:var(--tinta-tenue);font-weight:400;margin-left:3px}
.sug-todos{justify-content:center;font-weight:600;color:var(--rojo);border-bottom:0;padding:11px 12px}
.buscar input:focus{outline:2px solid var(--amarillo);outline-offset:-2px}
.buscar button{border:0;background:var(--amarillo);color:var(--acero-900);padding:0 20px;cursor:pointer;display:grid;place-items:center}
.buscar button:hover{background:#FFC826}

/* "MI PEDIDO $881.200": el importe a la vista, no sólo el contador. Un mayorista arma el pedido
   en varias vueltas y lo que mira es cuánto lleva. */
.carrito-btn{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--tinta);
             background:var(--blanco);border-radius:6px;padding:9px 15px;white-space:nowrap}
.carrito-btn:hover{background:#F4F4F4}
.carrito-ico{position:relative;display:grid;place-items:center;color:var(--rojo)}
.carrito-txt{display:grid;line-height:1.15}
.carrito-txt small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--tinta-tenue)}
.carrito-txt b{font-family:var(--mono);font-size:14px}

.cab-nav{background:var(--rojo-oscuro)}
.cab-nav-in{max-width:var(--ancho);margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cab-nav-links{display:flex;gap:4px;overflow-x:auto}
.cab-nav-dato{font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.72);white-space:nowrap}
.cab-nav a{color:#fff;text-decoration:none;padding:12px 16px;font-size:14px;font-weight:500;white-space:nowrap;border-bottom:3px solid transparent}
.cab-nav a:hover{background:rgba(0,0,0,.18)}
.cab-nav a[aria-current]{border-bottom-color:var(--amarillo)}

/* ── Menú del celular (no existe en escritorio) ── */
.cab-menu-btn{display:none;border:0;background:none;color:#fff;padding:6px;cursor:pointer;align-items:center}
.menu-lateral{display:none;position:fixed;inset:0;z-index:90;background:var(--blanco);flex-direction:column}
.menu-lateral[data-abierto]{display:flex}
.menu-cab{display:flex;align-items:center;justify-content:space-between;background:var(--rojo);padding:14px 18px}
.menu-cab img{height:26px;width:auto;aspect-ratio:1071/216}
.menu-cab .btn-cerrar{color:#fff}
.menu-links{display:flex;flex-direction:column;padding:6px 0;overflow-y:auto;flex:1}
.menu-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;
              text-decoration:none;font-size:16px;border-bottom:1px solid var(--linea)}
.menu-dato{font-family:var(--mono);font-size:12px;color:var(--tinta-tenue)}
.menu-pie{padding:18px 20px;border-top:1px solid var(--linea);background:var(--papel)}
.menu-pie p{margin:0 0 12px;font-family:var(--mono);font-size:12px;color:var(--tinta-suave)}
.menu-wa{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;color:var(--tinta)}
.menu-wa svg{color:var(--rojo)}
.cab-benef i{font-style:normal}
.min-cel{display:none;font-style:normal}
.benef-ver{display:none;border:0;background:none;color:var(--rojo);font:inherit;font-size:12px;cursor:pointer;padding:0;margin-left:auto}

/* Las condiciones, arriba de todo y en todas las paginas: es lo que un mayorista pregunta
   antes de mirar un precio (Toolstation las pone igual, con envio y retiro). */
.cab-benef{background:var(--papel-calido);border-bottom:1px solid var(--linea);font-size:12.5px;color:var(--tinta-suave)}
.cab-benef-in{max-width:var(--ancho);margin:0 auto;padding:9px 20px;display:flex;gap:22px;flex-wrap:wrap}
.cab-benef span{display:inline-flex;align-items:center;gap:7px}
.cab-benef svg{color:var(--rojo);flex:none}
/* El logo es el oficial (Disenador/assets/logo, sacado del .ai). Antes se dibujaba con
   tipografia: no era el logo de Telmo, era una imitacion. "MAYORISTA" va debajo como bajada,
   no forma parte del logo. */
/* Todo en UNA linea: hamburguesa - TELMO - MAYORISTA - carrito (Telmo, 2026-09-06). Antes
   MAYORISTA iba debajo del logo.
   (!) flex:none no es decorativo: sin eso el flex de .cab-in ACHICABA la imagen. Medido en
   375 px, el logo declaraba 29 px de alto pero terminaba renderizando 84x28 en vez de 144x29,
   o sea el SVG entraba escalado adentro de una caja apretada. Por eso se veia chico. */
.logo{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;line-height:1}
/* Version LETRAS BLANCAS sobre la cabecera roja (decision de Telmo, 2026-09-06: "el logo del
   topbar deberia ser el Telmo blanco sin fondo, ya que tiene el fondo rojo"). Antes iba el
   BLOQUE rojo del manual apoyado en un rectangulo blanco: una caja blanca en el medio de la
   banda roja. El archivo sale del kit (logo-telmo-letras-blancas.svg), no se redibuja. */
/* (!) El aspect-ratio explicito NO es de mas. El SVG del kit trae viewBox pero NO trae los
   atributos width/height, asi que el navegador le inventa un tamanio intrinseco: medido en
   produccion, naturalWidth/Height daba 300x100 (3:1) contra el 1071x216 (4,96:1) real. Con
   height + width:auto el img quedaba en 90x30 y las letras se dibujaban a 18 px adentro de una
   caja de 30, o sea el logo se veia mas chico de lo que decia el CSS. */
.logo img{display:block;height:38px;width:auto;aspect-ratio:1071/216;flex:none}
/* "MAYORISTA" va AL LADO del logo, en la misma linea (Telmo, 2026-09-06). Estuvo un rato
   debajo y centrado; el pedido final fue todo alineado horizontalmente. */
.logo span{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:#fff;opacity:.92;
           white-space:nowrap;padding-top:2px}


.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:6px;border:1px solid transparent;
     font:inherit;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-rojo:hover{background:var(--rojo-oscuro)}
/* WhatsApp va en su verde, con el logo (boceto 2e, 2026-09-21): reemplaza al rojo del 06/09. */
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1FB855}
.btn-linea{background:var(--blanco);border-color:var(--linea);color:var(--tinta)}
.btn-linea:hover{border-color:var(--tinta-tenue)}
.compartir{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13.5px;color:var(--tinta-suave);text-decoration:none}
.compartir:hover{color:var(--rojo);text-decoration:underline}
.btn-sm{padding:6px 12px;font-size:13px}

/* Carrito: contador que sólo aparece cuando hay algo */
.carrito-btn{position:relative}
/* El contador va en amarillo: sobre la cabecera roja, un badge rojo no se ve. */
/* Amarillo, no rojo: regla del diseño aprobado - dentro de la banda roja no puede haber rojo
   semántico, si no el rojo del semáforo ("sin stock") deja de leerse como alarma. */
.carrito-n{position:absolute;top:-8px;right:-10px;background:var(--amarillo);color:var(--acero-900);
           font-family:var(--mono);font-weight:600;font-size:10.5px;min-width:18px;height:18px;border-radius:9px;
           display:none;align-items:center;justify-content:center;padding:0 5px}
.carrito-n[data-hay]{display:flex}

/* ── Semáforo de disponibilidad (el dato es del proveedor; su NOMBRE no se publica) ── */
.sem{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tinta-suave);white-space:nowrap}
.sem::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tinta-tenue);flex:none}
.sem[data-n="hay"]::before{background:var(--ok)}
.sem[data-n="poco"]::before{background:var(--warn)}
.sem[data-n="no"]::before{background:var(--bad)}
.sem[data-n="nd"]::before{background:#C8C6C1}

/* ── Tarjeta de producto ─ el listado ES la pantalla de carga, pero tiene que LEERSE tienda ──
   Variante 1b del boceto aprobado en Claude Design (2026-09-06, proyecto "Flujo de compra
   mayorista online", archivo "Tarjeta de Producto Celular"): foto cuadrada de 120 px a la
   izquierda, tarjeta de ~192 px, 3,5 productos en la primera pantalla de un 375x812.
   Antes era una fila de 64 px (52 en el celular) y Telmo la leia como planilla, no como tienda.
   (!) Lo que se MIDIO antes de elegir, para no repetir la discusion: la referencia que trajo
   Telmo (el B2B de Lusqtoff) muestra sus fotos a 50 px, MAS CHICAS que las nuestras de 64.
   El problema nunca fue el tamano: era la caja blanca cuadrada que las contiene y la jerarquia
   de adentro. Por eso la foto va sobre BLANCO y no sobre papel: el 87% de las fotos de catalogo
   ya son cuadradas de origen (1200x1200), y las verticales (las de anuncio, 1125x1500, unica
   foto de 300 productos publicados) quedan con franjas blancas al costado en vez de deformarse. */
.filas{display:grid;gap:12px}
.fila{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start;
      border:1px solid var(--linea);border-radius:10px;background:var(--blanco);padding:12px}
.fila[data-cargado]{border-color:var(--rojo);background:#FDF6F6}
.fila-foto{width:120px;height:120px;object-fit:contain;background:var(--blanco);
           border:1px solid var(--linea);border-radius:8px;padding:6px}
.fila-datos{min-width:0}
.fila-tit{font-weight:500;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:3px 0 5px}
.fila-tit:hover{color:var(--rojo)}
.fila-precio{margin-top:0}
.fila-precio b{font-family:var(--mono);font-size:21px;font-weight:600}
.fila-precio small{color:var(--tinta-tenue);font-size:11px;margin-left:5px}
/* El precio y el control de carga van en la MISMA linea (2026-09-06). Antes habia una fila
   aparte al pie, con la leyenda "POR UNIDAD" a la izquierda y el stepper a la derecha: eran
   ~55 px por tarjeta que, multiplicados por 2.362 productos, se sienten como scroll y no
   informan nada (hoy TODO se vende por unidad, min_wholesale_qty esta en 1 en los 2.362).
   Medido: la columna derecha tiene 177 px en un 375, y precio (120) + stepper completo (140)
   no entran juntos. Por eso el control arranca COLAPSADO en un solo boton de "+": mientras la
   cantidad es 0, el "-" y el numero no tienen nada que mostrar. Al cargar el primero aparece
   el stepper entero y esa tarjeta -solo esa- crece. */
.fila-compra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
.fila-compra .stepper{margin-left:auto}
.fila:not([data-cargado]) .stepper [data-menos],
.fila:not([data-cargado]) .stepper [data-cant]{display:none}
/* Badge del que mas vendemos. El dato es real (product_sales_rank, nivel 1 = 10+ ventas en
   365 dias): 39 de los 2.362 publicados. Si lo llevara cualquiera dejaria de significar algo.
   Va en negro y no en rojo: el rojo del semaforo es alarma ("sin stock") y no puede competir. */
.fila-top{display:inline-block;background:var(--acero-900);color:#fff;font-family:var(--mono);
          font-size:9.5px;letter-spacing:.14em;padding:3px 7px;border-radius:3px;margin-bottom:6px}

/* Stepper: cargar cantidad SIN entrar a la ficha. Es lo más importante del listado —
   un mayorista carga 20 códigos y obligarlo a entrar y volver por cada uno mata el pedido. */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:6px;background:var(--blanco)}
.stepper button{width:32px;height:34px;border:0;background:none;font-size:16px;cursor:pointer;color:var(--tinta-suave);font-family:var(--mono)}
.stepper button:hover{background:var(--papel-calido);color:var(--tinta)}
.stepper input{width:46px;height:34px;border:0;border-left:1px solid var(--linea);border-right:1px solid var(--linea);
               text-align:center;font-family:var(--mono);font-size:14px;background:none;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── Grillas ── */
/* (!) flex y NO grid a propósito: con grid, una última fila incompleta (7 marcas en filas de 5)
   deja el hueco a la derecha. En flex las tarjetas de esa fila crecen y llenan el ancho. La base
   del 25% las ordena de a 4 por fila mientras entren; el min-width corta en pantallas chicas. */
.grilla-marcas{display:flex;flex-wrap:wrap;gap:12px}
.grilla-marcas > .marca-card{flex:1 1 calc(25% - 9px);min-width:180px}
.marca-card{display:block;text-decoration:none;background:var(--blanco);border:1px solid var(--linea);border-radius:8px;padding:16px}
.marca-card:hover{border-color:var(--rojo)}
.marca-card b{display:block;font-size:15px}
.marca-card span{font-family:var(--mono);font-size:11px;color:var(--tinta-tenue)}

/* ── Layout de listado con filtros ── */
.con-filtros{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start}
.filtros{position:sticky;top:76px}
.filtro-grupo{margin-bottom:22px}
.filtro-grupo h3{font-family:var(--texto);font-size:11px;font-weight:600;letter-spacing:.12em;
                 text-transform:uppercase;color:var(--tinta-tenue);margin:0 0 8px}
.filtro-lista{max-height:260px;overflow-y:auto;padding-right:4px}
.filtro-op{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px;cursor:pointer}
.filtro-op input{margin:0;accent-color:var(--rojo)}
.filtro-op .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tinta-tenue)}
.filtro-buscar{width:100%;padding:6px 10px;border:1px solid var(--linea);border-radius:5px;font:inherit;font-size:12px;margin-bottom:6px}
.listado-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.ej-busca{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;
          font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--tinta-tenue)}
.ej-busca a{color:var(--tinta-suave);text-decoration:none;border:1px solid var(--linea);
            border-radius:999px;padding:5px 12px;background:var(--blanco)}
.ej-busca a:hover{border-color:var(--rojo);color:var(--rojo)}
.listado-tit{margin:10px 0 6px}
.listado-sub{margin:0 0 22px}
.orden{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tinta-tenue);white-space:nowrap}
.orden-sel{padding:5px 8px;border:1px solid var(--linea);border-radius:5px;background:var(--blanco);
           font:inherit;font-size:12px;color:var(--tinta);cursor:pointer}
.orden-nota{color:var(--tinta-tenue)}

/* ── Ficha v2 (boceto 2e aprobado por Telmo el 2026-09-21, Claude Design "Celular - Rediseño") ──
   Cada valor sale del HTML exportado del boceto (360 px de ancho), no de ojo. Colores del boceto:
   #0A0A0A tinta · #3A3C40 texto · #6E7176 gris · #B5B6B8 línea fuerte · #E8E8E8 línea/separador ·
   #25D366 WhatsApp. Es UNA columna, pensada para el celular; en escritorio se centra con techo de
   480 px (la foto real 3:4 a más ancho sería más alta que la pantalla). */
.f2{max-width:480px;margin:0 auto;background:#FFFFFF;color:#0A0A0A}
.f2-galeria{position:relative;background:#FFFFFF;border-bottom:1px solid #E8E8E8;overflow:hidden}
/* La galería mide lo que mide la foto a la vista: 480 con la real (3:4), 360 con la cuadrada. Al
   deslizar de una a otra el alto cambia en 220 ms y todo lo de abajo sube (2e-2). El alto lo pone
   pedido.js; sin JS queda el de la foto más alta y las demás se ven con franjas blancas. */
.f2-riel{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;transition:height .22s ease}
.f2-riel::-webkit-scrollbar{display:none}
.f2-foto{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.f2-foto img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#FFFFFF}
.f2-foto-real img{aspect-ratio:3/4}
.f2-cont{position:absolute;right:10px;bottom:10px;background:#0A0A0A;color:#FFFFFF;font-family:var(--mono);font-size:10px;
  font-weight:700;padding:3px 7px}
.f2-datos{background:#FFFFFF;padding:8px 14px 14px}
.f2-id{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
.f2-id > *{flex:none}
/* Sin línea abajo ni chevrón (Telmo, 21/09, mirando la ficha publicada): logo y pastilla del código
   alineados al centro, a la misma altura visual. */
.f2-marca{display:inline-flex;align-items:center;text-decoration:none;color:#6E7176}
.f2-marca img{display:block;height:calc(26px * var(--e,1));max-height:44px;width:auto;max-width:150px;object-fit:contain}
.f2-marca-txt{font-family:var(--display);font-weight:900;font-size:19px;line-height:30px;letter-spacing:-.01em;color:#0A0A0A}
.f2-sku{font-family:var(--mono);font-size:11px;font-weight:700;color:#0A0A0A;background:#E8E8E8;padding:4px 8px}
/* El semáforo del proveedor, a la derecha de la fila marca + código (Telmo, 21/09). */
.f2-sem{margin-left:auto;padding-left:4px}
/* Una sola línea: si algún día no entra, se recorta el código (no se baja el stock a otra fila). */
.f2-id > .f2-sku{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f2-precio{margin-top:9px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.f2-precio b{font-family:var(--display);font-weight:900;font-size:26px;line-height:1;letter-spacing:-.02em}
.f2-precio span{font-family:var(--mono);font-size:12px;color:#6E7176}
h1.f2-tit{margin:9px 0 0;font-family:var(--display);font-weight:700;font-size:17px;line-height:22px;letter-spacing:-.01em}
.f2-agregar,.f2-catalogo{margin-top:12px;width:100%;height:46px;border:1px solid #0A0A0A;background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:13.5px;font-weight:700;
  color:#0A0A0A;text-decoration:none;cursor:pointer}
.f2-agregar[data-ok]{background:#0A0A0A;color:#FFFFFF}
.f2-bloque{background:#FFFFFF;border-top:8px solid #E8E8E8;padding:14px}
.f2-bloque h2{margin:0 0 11px;font-family:var(--display);font-weight:900;font-size:14px;line-height:1.2;letter-spacing:0}
.f2-paso{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid #E8E8E8}
.f2-paso > span{width:26px;height:26px;background:#0A0A0A;color:#FFFFFF;font-family:var(--mono);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.f2-paso > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.f2-paso b{font-size:12.5px;font-weight:700;line-height:1.3}
.f2-paso small{font-size:11.5px;line-height:1.45;color:#3A3C40}
.f2-minimo{margin-top:12px;border:2px solid #0A0A0A;padding:11px 12px;display:flex;flex-direction:column;gap:4px}
.f2-minimo span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#6E7176}
.f2-minimo b{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.01em;line-height:1.1}
.f2-minimo i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:400;color:#6E7176}
.f2-ficha h2{margin-bottom:10px}
.f2-grupo{margin-bottom:12px}
.f2-grupo:last-child{margin-bottom:0}
.f2-grupo-tit{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#CB0000;margin-bottom:5px}
.f2-fila{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #E8E8E8;font-size:11.5px;line-height:1.4}
.f2-fila span{color:#6E7176}
.f2-fila b{font-family:var(--mono);font-weight:700;text-align:right}
.f2-fila-sola span{color:#3A3C40}
.f2-ficha-cruda{font-size:12.5px;color:#3A3C40}
.f2-ficha-cruda ul{padding-left:18px;margin:0 0 10px}
.f2-sumar{display:flex;flex-direction:column;gap:8px}
.f2-item{display:flex;gap:10px;align-items:center;border:1px solid #E8E8E8;padding:8px}
.f2-item[data-cargado]{border-color:#0A0A0A}
.f2-item-foto{flex:0 0 auto}
.f2-item-foto img{width:56px;height:56px;border:1px solid #E8E8E8;background:#FFFFFF;object-fit:contain}
.f2-item-datos{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:#0A0A0A}
.f2-item-sku{font-family:var(--mono);font-size:9px;color:#6E7176}
.f2-item-tit{font-size:11.5px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.f2-item-datos b{font-family:var(--display);font-weight:900;font-size:14px}
.f2-item-datos i{font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:400;color:#6E7176}
.f2-item-mas{width:40px;height:40px;border:1px solid #0A0A0A;background:#FFFFFF;color:#0A0A0A;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;cursor:pointer;padding:0;font-family:var(--display);font-weight:900;font-size:15px}
/* Ya cargado: el "+" pasa a mostrar cuántos van (cada toque suma uno). */
.f2-item-mas span:empty{display:none}
.f2-item[data-cargado] .f2-item-mas{background:#0A0A0A;color:#FFFFFF}
.f2-item[data-cargado] .f2-item-mas svg{display:none}
/* "Trabajamos con" dentro de la ficha (2e): volanta arriba, logos de 26 px en color. */
.marcas-tira-ficha{border-top:8px solid #E8E8E8;border-bottom:0;padding:14px 0 16px}
.marcas-tira-ficha .marcas-tira-in{display:block;padding:0;max-width:none}
.marcas-tira-ficha .marcas-tira-in > .volanta{display:block;padding:0 14px 10px;font-size:9.5px;color:#6E7176}
.marcas-tira-ficha .marcas-pista{gap:30px;padding-left:14px}
.marcas-tira-ficha .marca-logo{height:40px}
.marcas-tira-ficha .marca-logo img{height:calc(22px * var(--e,1));filter:none;opacity:1;max-width:110px}
/* La barra fija de la ficha (113 px): dueña de la cantidad, el total y el botón verde. */
.f2-barra{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#FFFFFF;border-top:1px solid #B5B6B8;
  padding:6px 12px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(10,10,10,.08)}
.f2-barra-in{max-width:456px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.f2-barra-fila{height:44px;display:flex;align-items:center;gap:12px}
.f2-cant{display:flex;align-items:center;border:1px solid #0A0A0A;background:#FFFFFF;flex:0 0 auto}
.f2-cant button{width:44px;height:44px;border:0;background:none;font-size:21px;font-weight:700;color:#0A0A0A;cursor:pointer;padding:0;font-family:var(--texto)}
.f2-cant button[data-tope]{color:#6E7176}
.f2-cant input{width:46px;height:44px;border:0;border-left:1px solid #E8E8E8;border-right:1px solid #E8E8E8;text-align:center;
  font-family:var(--display);font-weight:900;font-size:19px;color:#0A0A0A;background:none;padding:0;-moz-appearance:textfield;border-radius:0}
.f2-cant input::-webkit-outer-spin-button,.f2-cant input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.f2-total{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.f2-total b{font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:-.02em;white-space:nowrap}
.f2-total > span{font-family:var(--mono);font-size:9.5px;color:#6E7176;margin-top:4px}
.f2-wa{height:48px;background:#25D366;display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}
.f2-wa span{font-size:14.5px;font-weight:700;color:#FFFFFF}
.f2-wa:hover{background:#1FB855}
/* La barra no tapa el pie; y en la ficha la barra del pedido del resto del sitio no aparece: la
   de la ficha ya manda el pedido entero. */
body[data-pagina="ficha"]{padding-bottom:calc(121px + env(safe-area-inset-bottom))}
body[data-pagina="ficha"] .barra-pedido{display:none !important}
body[data-pagina="ficha"] .pie{margin-top:0}
@media (min-width:481px){.f2{border-left:1px solid #E8E8E8;border-right:1px solid #E8E8E8}}

/* ── Pie ── */
.pie{background:var(--blanco);border-top:1px solid var(--linea);margin-top:56px;padding:32px 0;font-size:13px;color:var(--tinta-suave)}
.pie-in{max-width:var(--ancho);margin:0 auto;padding:0 20px;display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between}
.pie a{color:var(--tinta-suave)}

/* ── Barra del pedido: aparece sola cuando hay algo cargado ── */
.barra-pedido{position:fixed;left:0;right:0;bottom:0;background:#0A0A0A;color:#fff;height:56px;padding:0 10px;
              display:none;align-items:center;gap:20px;z-index:60}
.barra-pedido[data-hay]{display:flex}
.barra-pedido .in{max-width:var(--ancho);margin:0 auto;display:flex;align-items:center;gap:10px;width:100%}
.barra-res{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.barra-res small{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#B5B6B8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-res b{font-family:var(--display);font-weight:900;font-size:15px;color:#FFFFFF}
.barra-res i{font-style:normal;font-family:var(--mono);font-size:9px;color:#B5B6B8}
.barra-ver,.barra-wa{height:40px;padding:0 12px;display:flex;align-items:center;gap:7px;flex:0 0 auto;
  font-size:12px;font-weight:700;text-decoration:none}
.barra-ver{background:#FFFFFF;color:#0A0A0A}
.barra-wa{background:#25D366;color:#FFFFFF}
.barra-wa:hover{background:#1FB855}
body:has(.barra-pedido[data-hay]){padding-bottom:64px}

/* ── Hoja "Mi pedido": el pedido se revisa ENCIMA del catálogo ───────────────────────────────
   Decisión de Telmo (2026-09-06), sobre el boceto "Hoja Mi Pedido" de Claude Design: de las tres
   opciones (hoja lateral / página propia /pedido/ / sección al final del listado) gana la hoja.
   El motivo es concreto: en un catálogo de 2.362 códigos, mandar al cliente a otra página le hace
   perder el lugar donde venía comprando, y volver a encontrarlo cuesta más que revisar el pedido.
   (!) NO tapa el 100% del ancho a propósito: la franja de catálogo que queda a la izquierda es la
   señal de "estás encima, no navegaste", y tocarla cierra. */
.hoja-fondo{position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:95;border:0;padding:0;cursor:pointer}
.hoja{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);background:var(--papel);z-index:96;
      display:flex;flex-direction:column;box-shadow:-14px 0 44px rgba(0,0,0,.28)}
.hoja[hidden],.hoja-fondo[hidden]{display:none}
/* Cabecera y pie FIJOS: el total no se va nunca de pantalla, aunque el pedido tenga 30 líneas. */
.hoja-cab{display:flex;align-items:center;gap:12px;background:var(--tinta);color:#fff;padding:13px 16px;flex:none}
.hoja-cab b{display:block;font-family:var(--mono);font-size:13.5px;letter-spacing:.16em}
.hoja-cab small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
                color:rgba(255,255,255,.62);margin-top:5px}
.hoja-x{margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;padding:8px;display:grid;
        place-items:center;flex:none}
.hoja-tira{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--blanco);flex:none;
           border-bottom:1px solid var(--linea);font-family:var(--mono);font-size:10px;letter-spacing:.1em;
           color:var(--tinta-tenue)}
/* (!) Sin esto, [hidden] NO oculta la tira: el display:flex de arriba le gana al display:none
   que trae el navegador para [hidden]. El atributo queda puesto y el elemento se ve igual --
   medido con la hoja vacia, donde seguia apareciendo "PRECIOS SIN IVA ... Vaciar". Vale para
   cualquier elemento de la hoja al que se le declare display. */
.hoja-tira[hidden],.hoja-cab[hidden],.hoja-total[hidden]{display:none}
.hoja-vaciar{margin-left:auto;background:none;border:0;font:inherit;color:var(--tinta-suave);
             text-decoration:underline;cursor:pointer;padding:0;white-space:nowrap}
.hoja-cuerpo{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.hoja-linea{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:11px 16px;align-items:start;
            background:var(--blanco);border-bottom:1px solid var(--linea)}
.hoja-linea img{width:56px;height:56px;object-fit:contain;background:var(--blanco);border:1px solid var(--linea);
                border-radius:6px;padding:3px}
.hoja-vol{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
          color:var(--tinta-tenue)}
.hoja-tit{margin:3px 0 0;font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
          -webkit-box-orient:vertical;overflow:hidden}
.hoja-sacar{margin-left:auto;background:none;border:0;color:var(--tinta-tenue);cursor:pointer;padding:2px;
            display:grid;place-items:center;flex:none}
.hoja-sacar:hover{color:var(--rojo)}
.hoja-compra{display:flex;align-items:flex-end;gap:10px;margin-top:7px}
.hoja-monto{margin-left:auto;text-align:right;line-height:1.2}
.hoja-monto b{font-family:var(--mono);font-size:15px}
.hoja-monto span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--tinta-tenue);margin-top:2px}
/* Borrar NO pide confirmación: se deshace. Confirmar 30 veces es peor que deshacer una. */
.hoja-deshacer{display:flex;align-items:center;gap:12px;background:var(--amarillo);color:var(--acero-900);
               padding:10px 16px;font-size:12.5px;flex:none}
.hoja-deshacer[hidden]{display:none}
.hoja-deshacer button{margin-left:auto;background:none;border:0;font:inherit;font-weight:600;
                      color:var(--acero-900);text-decoration:underline;cursor:pointer;padding:0}
.hoja-pie{flex:none;background:var(--blanco);border-top:1px solid var(--linea);padding:12px 16px}
.hoja-total{display:flex;align-items:flex-end;gap:12px;margin-bottom:10px}
.hoja-total small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--tinta-tenue)}
.hoja-total b{margin-left:auto;font-family:var(--mono);font-size:22px}
.hoja-total i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--tinta-tenue);padding-bottom:3px}
.hoja-pie .btn{width:100%;justify-content:center}
.hoja-nota{margin:9px 0 0;font-size:11.5px;line-height:1.4;color:var(--tinta-tenue)}
.hoja-vacia{padding:48px 26px;text-align:center}
.hoja-vacia[hidden]{display:none}
.hoja-vacia h3{margin:14px 0 8px;font-size:17px}
.hoja-vacia p{margin:0;font-size:13px;line-height:1.5;color:var(--tinta-suave)}
.hoja-vacia .btn{margin-top:16px}

.vacio{text-align:center;padding:56px 20px;color:var(--tinta-tenue)}
.aprox{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--amarillo);background:#FFF8E1;color:var(--tinta);font-size:14px;border-radius:0 6px 6px 0}

/* ── Carrusel de logos "Trabajamos con" (Telmo, 06/09) ─────────────────────────────────────
   Fondo claro a proposito: de los 38 logos del banco, 5 solo sirven sobre claro (medido).
   La pista se duplica y se anima por JS SOLO si desborda; si entran todos, quedan quietos. */
.marcas-tira{background:var(--blanco);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.marcas-tira-in{display:flex;align-items:center;gap:22px;padding:14px 20px}
.marcas-tira-in > .volanta{flex:none}
.marcas-riel{flex:1;min-width:0;overflow:hidden}
.marcas-pista{display:flex;align-items:center;gap:44px;width:max-content}
.marcas-riel[data-anda] .marcas-pista{animation:marcas-desliza var(--marcas-seg,30s) linear infinite}
.marcas-riel[data-anda]:hover .marcas-pista{animation-play-state:paused}
@keyframes marcas-desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Altura = base 28 px × escala óptica del banco (--e, de 0,55 a 1,8): la caja mide lo del más alto
   (28 × 1,8 ≈ 50) para que la tira no salte, y el logo va centrado adentro. */
.marca-logo{display:flex;align-items:center;flex:none;height:50px}
.marca-logo img{height:calc(28px * var(--e,1));width:auto;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.marca-logo:hover img{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.marcas-riel[data-anda] .marcas-pista{animation:none}}

/* Landing de marca: logo arriba del titulo y el texto con los tipos de producto */
.landing-logo img{height:calc(40px * var(--e,1));max-height:64px;width:auto;max-width:220px;object-fit:contain;margin:6px 0 2px}
.landing-texto{max-width:72ch;color:var(--tinta-suave);margin:0 0 24px}
.landing-texto p{margin:0 0 10px}
.landing-tipos a,.landing-top a{color:var(--tinta);text-decoration:none;border:1px solid var(--linea);border-radius:999px;
                                padding:4px 11px;background:var(--blanco);font-size:13px;display:inline-block;margin:4px 4px 0 0}
.landing-tipos a:hover,.landing-top a:hover{border-color:var(--rojo);color:var(--rojo)}
.landing-tipos a i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--tinta-tenue);margin-left:4px}
.landing-tipos .volanta,.landing-top .volanta{display:block;margin-bottom:2px}
.landing-top a{border:0;padding:2px 0;background:none;text-decoration:underline;color:var(--tinta-suave);display:block;margin:0}
@media (max-width:900px){
  /* En el celular la volanta "Trabajamos con" se comia 150 de los 375 px y el riel quedaba en
     199: apilada arriba, el riel toma el ancho entero. */
  .marcas-tira-in{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 20px}
  .marcas-riel{width:100%}
}

/* "Como comprar" (contacto): tres pasos numerados grandes */
.pasos{list-style:none;counter-reset:paso;margin:0;padding:0;display:grid;gap:12px;max-width:70ch}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;color:var(--tinta-suave)}
.pasos li::before{content:counter(paso);font-family:var(--display);font-weight:900;font-size:22px;line-height:1;color:var(--rojo);padding-top:1px}
.pasos li b{color:var(--tinta)}

/* Indice de marcas: la tarjeta con logo */
.marca-card{display:flex;flex-direction:column;justify-content:flex-end}
.marca-card.con-logo img{height:calc(28px * var(--e,1));width:auto;max-width:140px;object-fit:contain;margin-bottom:12px;align-self:flex-start}
/* Sin logo en el banco, el nombre en tipografía de display ocupa el lugar del logo: si no, esa
   tarjeta mide 34 px menos y la fila queda despareja (hoy le pasa a 5 de las 12 marcas). */
.marca-card .marca-sinlogo{font-family:var(--display);font-weight:900;font-size:22px;line-height:34px;color:var(--tinta);
  margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* Piezas que SOLO existen en el celular (el panel de filtros como hoja). */
.solo-movil{display:none}
.filtros-cab{align-items:center;justify-content:space-between;padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--linea)}
.filtros-cab b{font-size:17px}
.btn-cerrar{border:0;background:none;font-size:30px;line-height:1;padding:0 6px;cursor:pointer;color:var(--tinta-suave)}
.filtros-pie{position:sticky;bottom:0;background:var(--blanco);padding:14px 0 4px;margin-top:18px;border-top:1px solid var(--linea)}

/* ── Celular ──────────────────────────────────────────────────────────────────────────────
   El listado tiene que abrir MOSTRANDO PRODUCTOS. Con los filtros apilados arriba, el primer
   producto caia en el pixel 992 de una pantalla de 812: habia que scrollear una pantalla y
   pico para ver el primero. Ahora los filtros son una hoja que se abre a pedido.
   Y todo lo que se toca mide 44px: el stepper (que es LO que se usa para armar el pedido)
   media 32x34 y se erraba el dedo. */
@media (max-width:900px){
  .solo-movil{display:flex}
  .con-filtros{grid-template-columns:1fr}
  /* ── La cabecera en el celular (diseño aprobado, 2026-08-28) ─────────────────────────────
     Medido antes: 252 px de una pantalla de 812 (31%) y el primer producto en el pixel 527.
     Ahora 136 px (17%). Qué se cae, qué se agrupa y qué se esconde, según el diseño:
       - SE CAE la tira de utilidades entera (-95 px): en un celular el teléfono no se lee, se
         toca. Horarios y número pasan al menú y al botón de WhatsApp.
       - SE AGRUPA la banda roja en dos filas: menú + logo + importe arriba, buscador de ancho
         completo abajo. Es lo no negociable y se queda entero.
       - SE ESCONDE la navegación y las marcas detrás del menú. En la franja queda UNA línea con
         las dos condiciones que venden; se toca "Ver todo" y aparecen las cuatro.
       - SE MUDA el conteo del catálogo: sale de la cabecera y vive junto a los resultados. */
  .cab-tira{display:none}
  .cab-nav{display:none}
  .cab-menu-btn{display:inline-flex}
  .cab-in{padding:9px 14px;gap:10px;align-items:center}
  /* Cuentas de la fila en 393 px (medidas, no estimadas): 365 utiles = menu 34 + logo 149 +
     MAYORISTA 53 + carrito ~40 + 3 huecos de 7 = ~297. Sobran ~68 px de aire.
     (!) La cuenta se hace SIEMPRE con el carrito en su estado mas ANCHO. La primera version
     de esta fila se midio con el carrito vacio ($0, 65 px) y "entraba"; con el pedido real
     cargado no entraba. Un estado que solo aparece cuando el cliente empezo a comprar es el
     que hay que medir, no el de la pantalla recien abierta. */
  .logo{gap:7px}
  .logo img{height:30px}
  .logo span{font-size:8px;letter-spacing:.14em}
  .buscar{order:1;width:100%;flex-basis:100%}
  /* 16px no es capricho: por debajo, iOS hace zoom solo al tocar el campo y descuadra todo. */
  .buscar input{font-size:16px;padding:11px 14px}
  .carrito-btn{margin-left:auto;padding:7px 9px;gap:0}
  /* (!) En el celular el carrito es SOLO el icono con su contador: el importe se saca.
     Con el pedido cargado el boton pasaba de 65 a 115 px (medido con $276.600) y la fila
     dejaba de entrar -> el carrito se caia a una segunda linea y la cabecera crecia de 143
     a 186 px. Justo lo que Telmo marco el 06/09. El importe NO se pierde: cuando hay algo
     cargado esta permanente en la barra fija de abajo (que es donde se cierra el pedido),
     y cuando no hay nada el importe es "$0", que no informa nada. En la captura del
     problema el mismo numero aparecia DOS veces en la misma pantalla. */
  .carrito-txt{display:none}
  .cab-benef-in{gap:12px;padding:8px 14px;font-size:12px;flex-wrap:nowrap;align-items:center}
  /* min-width:0 no es opcional: sin eso los items de un flex nowrap NO se encogen, la franja
     mide más que la pantalla y el "Ver todo" queda fuera (pasó: quedaba en x=823 de 375). */
  .cab-benef-in span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
  /* Las palabras que se caen en el celular para que las dos condiciones entren en una línea. */
  .mas{display:none}
  /* "Mínimo $400.000" en el celular: "Pedido mínimo $400.000 + IVA" empujaba el "Ver todo" fuera
     de la pantalla (medido a 360: quedaba en x=393). En escritorio va la frase entera. */
  .min-cel{display:inline}
  /* Y el "Ver todo" queda pegado al borde derecho aunque la franja desborde (se desliza): con el
     mínimo, a 360 px las dos condiciones ya no dejan lugar para el botón. */
  .benef-ver{position:sticky;right:0;background:var(--papel-calido);padding-left:10px;box-shadow:-8px 0 8px var(--papel-calido)}
  /* (!) .cab-benef span (0,1,1) le GANA a .benef-resto (0,1,0) y las condiciones extra no se
     ocultaban: la franja seguia midiendo mas que la pantalla y el "Ver todo" quedaba en x=724.
     Por eso van calificadas con el contenedor. */
  .cab-benef .benef-resto{display:none}
  .cab-benef[data-abierto] .benef-resto{display:inline-flex}
  .benef-ver{display:inline-block;flex:none;margin-left:auto}
  .cab-benef[data-abierto] .cab-benef-in{flex-wrap:wrap;white-space:normal}
  .cab-benef[data-abierto] .benef-resto{display:inline-flex}
  .cab-benef[data-abierto] .cab-benef-in span{white-space:normal;overflow:visible}

  /* Al scrollear se colapsa a una fila de 56 px, fija arriba: el logo se cae y el buscador sube
     a la fila del menú. Lo que queda es lo que se usa scrolleando. */
  .cab[data-compacta] .logo,
  .cab[data-compacta] .cab-benef{display:none}
  /* Una sola fila: sin nowrap el buscador ocupa el ancho, el carrito se va abajo y la cabecera
     compacta termina midiendo 195 px en vez de 56. */
  .cab[data-compacta] .cab-in{padding:7px 12px;flex-wrap:nowrap;gap:8px}
  .cab[data-compacta] .buscar{order:0;flex:1 1 auto;width:auto;flex-basis:auto;min-width:0}
  .cab[data-compacta] .buscar input{padding:8px 12px}
  .cab[data-compacta] .buscar button{padding:0 14px}
  .cab[data-compacta] .carrito-txt{display:none}
  .cab[data-compacta] .carrito-btn{flex:none;padding:7px 10px}

  /* En la FICHA no van ni navegación ni condiciones: es la entrada real desde un anuncio y lo
     único que importa es el producto (104 px en el diseño). */
  body[data-pagina="ficha"] .cab-benef{display:none}
  /* Las condiciones, en UNA linea que se desliza. Apiladas ocupaban 160px y empujaban la
     cabecera de 119 a 294px en una pantalla de 812 - justo lo que se habia arreglado. */
  .cab-benef-in{flex-wrap:nowrap;overflow-x:auto;gap:18px;padding:8px 16px;font-size:12px;
                scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cab-benef-in::-webkit-scrollbar{display:none}
  .cab-benef-in span{white-space:nowrap;flex:none}

  /* El panel de filtros, como hoja a pantalla completa */
  .filtros{display:none;position:fixed;inset:0;z-index:80;background:var(--blanco);
           overflow-y:auto;padding:18px 20px 24px;-webkit-overflow-scrolling:touch}
  .filtros[data-abierto]{display:block}
  .filtro-lista{max-height:none}
  .filtro-op{padding:11px 0;font-size:15px}
  .filtro-op input[type=checkbox]{width:20px;height:20px}
  .filtro-buscar{padding:11px 12px;font-size:16px}

  /* ── El celular, medido en el sitio EN VIVO el 2026-09-06 (375x812) ──────────────────────
     La cabecera ya estaba en 148 px (el rediseno del 28/08 la habia bajado de 252), pero el
     PRIMER PRODUCTO caia en el pixel 480 de 812: el 59% de la pantalla se iba antes de ver
     algo que se pueda comprar. El problema no era la cabecera: era lo que venia despues.
     Lo que habia entre las dos, medido: miga de pan (17) + titulo (33) + una linea de conteo
     (17) + boton Filtrar de ancho completo (47) + un SEGUNDO buscador (43) + una barra de
     "N a la vista / Ordenar" que ademas envolvia en dos lineas (74). Habia dos buscadores y
     dos contadores en la misma pantalla.
     Lo que se hace: la miga y el buscador duplicado se caen (el buscador de la cabecera esta
     a un toque), y Filtrar entra en la MISMA fila que el conteo y el orden. */
  .miga{display:none}
  .listado-tit{margin:4px 0 4px;font-size:24px}
  .listado-sub{margin:0 0 12px}
  .buscar-listado{display:none}
  .listado-cab{flex-wrap:nowrap;gap:8px}
  .listado-cab [data-abrir-filtros]{flex:none}
  /* El conteo se cae de la barra: ya vive arriba, bajo el titulo, y ahi se actualiza igual.
     Medido en el sitio publicado: con los tres adentro, "2.362 a la vista" envolvia en TRES
     lineas contra el boton y empujaba el select fuera de la pantalla. */
  .listado-cuenta{display:none}
  .orden{flex:1;min-width:0;gap:6px}
  .orden-sel{flex:1;min-width:0}
  /* El selector de orden vive junto a los resultados y NO adentro de la hoja de filtros: es lo
     que mas se cambia y no vale abrir un panel para tocarlo. 44px de alto, como todo lo demas. */
  .orden-sel{padding:11px 12px;font-size:15px;min-height:44px}

  /* Areas de toque: 44px es el minimo con el que no se erra el dedo. */
  .btn{padding:12px 18px}
  .btn-sm{padding:10px 14px}
  .stepper button{width:44px;height:44px;font-size:20px}
  .stepper input{width:52px;height:44px;font-size:16px}

  /* La tarjeta no cambia de forma en el celular: 1b se diseno SOBRE 375x812, asi que aca solo
     se recorta el aire. La foto se queda en 120 px: bajarla es volver al problema que Telmo
     senalo mirando el sitio en su telefono ("los productos no se destacan"). */
  .fila{grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px}
  .fila-precio b{font-size:19px}

  /* La hoja tapa 353 de 393: los 40 px de catálogo que asoman son la señal de "estás encima". */
  .hoja{width:calc(100% - 40px)}

  .pie a{display:inline-block;padding:6px 0}
}

/* El boton "Filtrar" no existe en escritorio: ahi el panel esta siempre a la vista. */
/* Pantallas muy angostas (320-359 px). Con el carrito ya reducido al icono la fila entra
   hasta 360; abajo de eso lo primero que se cae es "MAYORISTA", que es la palabra menos
   necesaria de la fila (el dominio ya dice mayorista). Se cae UNA cosa elegida a mano en vez
   de dejar que se rompa la fila entera. */
@media (max-width:359px){
  .logo span{display:none}
  .logo img{height:27px}
}

@media (min-width:901px){
  [data-abrir-filtros]{display:none}
  /* En escritorio la tarjeta va en 2 columnas: a ancho completo la foto queda pegada a la
     izquierda y el precio contra el borde derecho, con el medio vacio (es la regla de layout
     del panel: un bloque de contenido tiene techo de ancho). La referencia tambien va en 2. */
  .filas{grid-template-columns:1fr 1fr}
}