/* =====================================================================
   publico/assets/layout.css
   ---------------------------------------------------------------------
   LAS PIEZAS COMPARTIDAS QUE YA ESTÁN EN EL MANUAL.

   Cabecera, menú móvil, pie y la tarjeta de producto. La tarjeta vive
   acá y no en publico.css ni en portada.css porque la usan las dos: el
   catálogo y la portada. Un solo archivo, una sola tarjeta.

   Todo acá consume tokens semánticos de tema.css — --ink, --bg-elev,
   --accent, --dur-ui — y no declara ni un hex propio. Si ves un
   #RRGGBB en este archivo, está mal.

   POR QUÉ ESTÁ SEPARADO DE publico.css
   ------------------------------------
   publico.css es de la tienda y la ficha, y todavía está en el sistema
   viejo (Space Grotesk, --tinta, --papel). La cabecera y el pie ya
   están en el manual. Dos etapas distintas de la migración en un mismo
   archivo obligan a leer 600 líneas para saber cuál de los dos
   sistemas manda en cada regla.

   Cuando la tienda y la ficha se migren, publico.css se reescribe
   contra estos mismos tokens y este archivo se queda igual.

   ORDEN DE CARGA:  tema.css → layout.css → publico.css
   ===================================================================== */

/* EL FONDO NUNCA ES LISO.
   Papel milimetrado de dos niveles, relación 1:4 — línea menor cada
   24px, mayor cada 96 — y siempre por debajo del 10% de opacidad. Es
   textura: se percibe, no se mira. Si compite con el texto, está
   demasiado fuerte.

   Va en <body> y no en cada sección para que sea continuo: una
   cuadrícula que arranca y se corta con cada banda deja de leerse como
   papel y pasa a leerse como un error de maquetación.

   Va en background-color + background-image y NUNCA en el atajo
   `background`. El atajo borra la imagen, y esa es exactamente la
   forma en que esto se rompió la primera vez. */
body{
  margin:0;
  background-color:var(--bg);
  background-image:
    repeating-linear-gradient(0deg,  var(--grid-major) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  var(--grid-minor) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid-minor) 0 1px, transparent 1px 24px);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
  /* EL BORDE DERECHO SE VEÍA "CORTADO" EN SAMSUNG INTERNET.
     No era overflow (eso ya se probó: scrollWidth = ancho de pantalla).
     Es el navegador reservando el ancho de su propio scroll vertical
     como si fuera de escritorio, en vez de dibujarlo flotando encima
     del contenido como hace Chrome. Con eso, TODO lo que mide 100% —
     cabecera, tarjetas, pie — queda un poco más angosto que la
     pantalla real, y ese sobrante se ve como una franja del color de
     fondo pegada al borde. Pasaba en cualquier página con scroll
     vertical, no solo en la tienda: por eso el pie y el carrito
     también lo tenían.

     El arreglo: el body mide el ancho REAL de la pantalla (100vw, que
     no resta el scroll) y lo que sobre —esa franja— se recorta.

     El recorte NO se declara acá (aunque acá es donde se nota el
     problema): overflow-x:hidden en el body convierte al body mismo
     en un contenedor de scroll propio, y eso es justo lo que rompe
     position:sticky en toda la página — un ancestro con overflow
     distinto de visible corta la cabecera pegajosa en cualquier hijo,
     no solo en la tienda. El recorte real vive en html, dos líneas
     más abajo: html ya gobierna el scroll de toda la página, así que
     ahí el recorte no le quita nada a nadie. */
  width:100vw;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body > footer{ margin-top:auto; }

/* Oswald sí, mayúsculas NO por defecto.
   El manual pide mayúsculas para Oswald display — títulos, navegación,
   botones, etiquetas — pero un <h3> también envuelve DATOS: el nombre
   de un producto, el título de una ficha. "ESUN PLA+ MARRÓN 1KG" se
   lee peor que "Esun PLA+ Marrón 1Kg", y encima contradice la lámina
   20, que prohíbe texto entero en mayúsculas fuera de un titular.

   Las mayúsculas se piden a mano con .display, donde corresponden. */
h1,h2,h3{
  font-family:var(--font-display); font-weight:600;
  letter-spacing:0.01em; line-height:1.06; margin:0;
}
.display{ text-transform:uppercase; letter-spacing:0.06em; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
input,select,button,textarea{ font-family:inherit; }

/* El primer tabulador de la página salta la cabecera entera y va al
   contenido. Sin esto, quien navega con teclado pasa por los veinte
   enlaces de las tres franjas en cada página que abre. */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--bg);
  padding:12px 20px; border-radius:0 0 var(--radius-sm) 0;
  font-family:var(--font-display); font-size:14px; font-weight:600;
}
.saltar:focus{ left:0; }


/* =====================================================================
   CABECERA · FRANJA 1 · CONTACTO
   Microcopy, no titular. Es información de referencia: si compite en
   tamaño con el buscador, le roba atención a lo que la gente vino a
   hacer.
   ===================================================================== */
.cab-contacto{
  background:var(--bg);
  color:var(--ink);
  border-bottom:1px solid var(--panel-border);
  font-size:12.5px;
}

/* LA FRANJA VA EN EL TEMA CONTRARIO.
   En Vitela, azul plano con texto claro; en Plano Azul, blanco tiza con
   texto oscuro. Separa el contacto del resto de la cabecera sin sumar
   un color nuevo al sistema: son los dos temas que ya existen, cada uno
   prestado al otro.

   Se hace redefiniendo los tokens DENTRO de la franja, no pintando
   cada pieza: así el selector de almacén, el desplegable de WhatsApp y
   sus menús heredan el tema contrario solos, y nada queda con un gris
   pensado para el otro fondo. Los íconos de WhatsApp y del mapa no
   cambian: son marcas ajenas y traen su propio color. */
html[data-theme="vitela"] .cab-contacto,
html:not([data-theme]) .cab-contacto{
  color-scheme:dark;
  --bg:var(--p-azul-plano);
  --bg-elev:var(--p-azul-800);
  --bg-elev-2:var(--p-azul-700);
  --ink:var(--p-blanco-tiza);
  --ink-dim:var(--p-linea-plano);
  --ink-faint:var(--p-gris-500);
  --line:var(--p-linea-plano);
  --panel-border:rgba(159,176,194,0.16);
  --shadow:rgba(0,0,0,0.4);
}
html[data-theme="azul"] .cab-contacto{
  color-scheme:light;
  --bg:var(--p-blanco-tiza);
  --bg-elev:var(--p-blanco-100);
  --bg-elev-2:var(--p-blanco-300);
  --ink:var(--p-azul-plano);
  --ink-dim:var(--p-grafito);
  --ink-faint:var(--p-gris-600);
  --line:var(--p-grafito);
  --panel-border:rgba(38,43,51,0.12);
  --shadow:rgba(38,43,51,0.12);
}
.cab-contacto-fila{
  /* Tres piezas en grilla: almacén a la izquierda, WhatsApp y dirección
     a la derecha. En el celular la grilla cambia de orden (ver el
     bloque de 900px) sin tocar el HTML. */
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"sede wa mapa";
  align-items:center; gap:var(--s3); min-height:38px;
}
.cab-sede{ grid-area:sede; justify-self:start; }
.cab-wa{ grid-area:wa; justify-self:end; display:flex; align-items:center; }
.cab-direccion{ grid-area:mapa; justify-self:end; }
.cab-wa-lista{ display:flex; align-items:center; gap:var(--s3); }
.cab-wa-plegado{ display:none; position:relative; }

.cab-canal{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--ink-dim); font-weight:600; white-space:nowrap;
  transition:opacity var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out);
}
/* Los íconos traen su propio color y NO heredan del tema: son marcas
   ajenas y no se recolorean para combinar. Lo único que se controla es
   el tamaño. */
.cab-canal svg{ width:16px; height:16px; flex:none; }
.cab-canal-num{ font-variant-numeric:tabular-nums; color:var(--ink); }
.cab-direccion-corta{ display:none; }

@media (hover:hover) and (pointer:fine){
  /* Baja opacidad y sube un pixel. No cambia el color: tocaría también
     los íconos, que son de otra marca. */
  .cab-canal:hover{ opacity:.75; transform:translateY(-1px); }
}

/* ---------- WhatsApp plegado (celular) ---------- */
.cab-wa-boton{ background:none; border:0; padding:4px 0; cursor:pointer; font:inherit; font-weight:600; }
.cab-wa-flecha{ width:14px !important; height:14px !important; opacity:.6; }
.cab-wa-menu{
  position:absolute; left:0; top:calc(100% + 8px); z-index:76; min-width:210px;
  background:var(--bg-elev); border:1px solid var(--panel-border);
  border-radius:var(--radius-md); box-shadow:0 16px 34px -18px var(--shadow);
  padding:6px;
  opacity:0; visibility:hidden; transform:scale(0.97) translateY(-4px); transform-origin:top left;
  transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility var(--dur-ui);
}
.cab-wa-menu.abierto{ opacity:1; visibility:visible; transform:scale(1) translateY(0); }
.cab-wa-item{
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--radius-sm);
  color:var(--ink); transition:background-color var(--dur-ui) ease;
}
.cab-wa-item svg{ width:18px; height:18px; flex:none; }
.cab-wa-item b{ display:block; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.cab-wa-item small{ display:block; font-size:12px; color:var(--ink-faint); }
@media (hover:hover) and (pointer:fine){ .cab-wa-item:hover{ background:var(--bg-elev-2); } }


/* ---------- Selector de almacén ----------
   Va en la franja 1 y a la izquierda, que es el primer sitio donde cae
   la vista. Condiciona el stock, lo que se puede reservar y el envío:
   no es un dato de contacto más. */
.cab-sede{ position:relative; flex:none; }

.cab-sede-boton{
  display:inline-flex; align-items:center; gap:8px;
  min-height:30px; padding:0 10px 0 8px; margin-left:-8px;
  border:1.5px solid transparent; border-radius:var(--radius-sm);
  background:none; color:var(--ink); font-size:12.5px; font-weight:600;
  cursor:pointer;
  transition:border-color var(--dur-ui) ease, background-color var(--dur-ui) ease;
}
/* Con un solo almacén el botón existe pero no hace nada: se apaga el
   cursor y el borde para que no prometa una acción que no hay. */
.cab-sede-boton[disabled]{ cursor:default; }

.cab-sede-boton > svg{ width:17px; height:17px; flex:none; color:var(--ink-dim); }
.cab-sede-img{
  width:22px; height:16px; flex:none; object-fit:cover;
  border-radius:2px; border:1px solid var(--panel-border);
}
.cab-sede-ciudad{
  color:var(--ink-faint); font-weight:400;
  padding-left:8px; border-left:1px solid var(--panel-border);
}
.cab-sede-flecha{ width:14px !important; height:14px !important; opacity:.6; }

.cab-sede-menu{
  position:absolute; left:0; top:calc(100% + 6px); z-index:75; width:270px;
  background:var(--bg-elev); border:1px solid var(--panel-border);
  border-radius:var(--radius-md); box-shadow:0 16px 34px -18px var(--shadow);
  padding:6px;
  opacity:0; visibility:hidden;
  transform:scale(0.97) translateY(-4px);
  transform-origin:top left;
  transition:opacity var(--dur-ui) var(--ease-out),
             transform var(--dur-ui) var(--ease-out),
             visibility var(--dur-ui);
}
.cab-sede-menu.abierto{ opacity:1; visibility:visible; transform:scale(1) translateY(0); }

.cab-sede-titulo{
  margin:6px 10px 8px;
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint);
}
.cab-sede-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-sm);
  transition:background-color var(--dur-ui) ease;
}
.cab-sede-item img,
.cab-sede-hueco{
  width:26px; height:19px; flex:none; object-fit:cover;
  border-radius:2px; border:1px solid var(--panel-border); background:var(--bg-elev-2);
}
.cab-sede-item b{ display:block; font-size:14px; font-weight:600; color:var(--ink); }
.cab-sede-item small{ display:block; font-size:12px; color:var(--ink-faint); }
/* El almacén activo se marca con el borde de acento, no con relleno:
   es el único acento que se permite la cabecera y solo aparece con el
   desplegable abierto. */
.cab-sede-item.on{ box-shadow:inset 0 0 0 1.5px var(--accent); }

.cab-sede-nota{
  margin:8px 10px 4px; padding-top:8px;
  border-top:1px solid var(--panel-border);
  font-size:12px; color:var(--ink-faint);
}

@media (hover:hover) and (pointer:fine){
  .cab-sede-boton:not([disabled]):hover{ border-color:var(--panel-border); background:var(--bg-elev); }
  .cab-sede-item:hover{ background:var(--bg-elev-2); }
}


/* =====================================================================
   CABECERA · FRANJA 2 · IDENTIDAD
   ===================================================================== */
.cab-identidad{ background:var(--bg-elev); border-bottom:1px solid var(--panel-border); }
.cab-identidad-fila{
  display:flex; align-items:center; gap:var(--s3);
  min-height:84px; padding-top:var(--s2); padding-bottom:var(--s2);
}

/* El logotipo es arte fijo. El SVG entra en línea y hereda el color
   del tema con currentColor: una sola tinta, siempre. */
.cab-marca{ flex:none; display:flex; align-items:center; color:var(--ink); }
.cab-marca svg{ height:38px; width:auto; }
/* El logotipo puede llegar como SVG en linea o como <img> desde la
   ranura del panel. Las dos formas miden lo mismo: sin esta regla, un
   PNG entra a tamano casi real y revienta la cabecera. */
.cab-marca img{ height:38px; width:auto; }

/* Provisional, mientras no esté el SVG maestro. Se distingue a
   propósito del logo real para que no se olvide que falta. */
.marca-provisional{ display:flex; flex-direction:column; line-height:1.15; }
.marca-provisional b{
  font-family:var(--font-display); font-weight:700; font-size:22px;
  text-transform:uppercase; letter-spacing:0.06em;
}
.marca-provisional small{
  font-family:var(--font-display); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-faint);
}

/* ---------- Buscador ---------- */
.cab-buscador{ flex:1; min-width:0; position:relative; display:flex; }
/* En la franja 2 el buscador no se estira hasta tocar los botones: con
   tope y margen automático queda centrado entre el logo y
   Acceder/Carrito. A todo el ancho, en un monitor de 1920 era una barra
   de casi 1500px que desequilibraba la franja y alejaba la lupa del
   texto. */
.cab-identidad-fila > .cab-buscador{ max-width:760px; margin:0 auto; }
.cab-buscador input{
  flex:1; min-width:0;
  height:48px; padding:0 52px 0 var(--s2);
  border:1.5px solid var(--panel-border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--ink); font-size:15px;
  transition:border-color var(--dur-ui) ease;
}
.cab-buscador input::placeholder{ color:var(--ink-faint); }
/* El foco se marca con borde de acento, nunca con sombra difusa: una
   sombra de color es lo primero que delata que un sistema técnico se
   maquetó con la plantilla de otro. */
.cab-buscador input:focus{ outline:none; border-color:var(--accent); }
.cab-buscador button{
  position:absolute; right:0; top:0; height:48px; width:48px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; color:var(--ink-dim); cursor:pointer;
  transition:color var(--dur-ui) ease;
}
.cab-buscador button svg{ width:19px; height:19px; }
.cab-buscador button:active{ transform:scale(0.97); }
.cab-buscador-movil{ display:none; }
.cab-catalogo-movil{ display:none; }

@media (hover:hover) and (pointer:fine){
  .cab-buscador button:hover{ color:var(--ink); }
}

/* ---------- Acceder ---------- */
.cab-acceso{ position:relative; flex:none; }
.cab-acceso-boton svg{ width:18px; height:18px; }

.cab-acceso-menu{
  position:absolute; right:0; top:calc(100% + 8px); width:270px; z-index:70;
  background:var(--bg-elev); border:1px solid var(--panel-border);
  border-radius:var(--radius-md); box-shadow:0 16px 34px -18px var(--shadow);
  padding:6px;
  opacity:0; visibility:hidden;
  transform:scale(0.97) translateY(-4px);
  /* Nace en 0.97 y no en 0: nada en el mundo real aparece de la nada.
     El origen es la esquina del botón que lo abrió, no el centro. */
  transform-origin:top right;
  transition:opacity var(--dur-ui) var(--ease-out),
             transform var(--dur-ui) var(--ease-out),
             visibility var(--dur-ui);
}
.cab-acceso-menu.abierto{ opacity:1; visibility:visible; transform:scale(1) translateY(0); }

.cab-acceso-item{
  display:block; padding:10px 12px; border-radius:var(--radius-sm);
  transition:background-color var(--dur-ui) ease;
}
.cab-acceso-item b{ display:block; font-size:14px; font-weight:600; color:var(--ink); }
.cab-acceso-item small{ display:block; font-size:12px; color:var(--ink-faint); margin-top:1px; }
.cab-acceso-linea{ height:1px; background:var(--panel-border); margin:6px 10px; }

@media (hover:hover) and (pointer:fine){
  .cab-acceso-item:hover{ background:var(--bg-elev-2); }
}


/* =====================================================================
   CABECERA · LAS TRES FRANJAS, PEGADAS JUNTAS
   ---------------------------------------------------------------------
   Antes solo se pegaba la navegación (franja 3): la de contacto y la
   del logo+buscador+carrito se iban al bajar, a propósito, para dejarle
   más alto a los productos en el teléfono. A pedido de Omaru (sep 2026)
   ahora se pegan las tres juntas — se pierde ese alto, y hay que
   asumirlo: la cabecera completa pesa bastante más que los 44px de
   --row-h que pesaba solo la navegación.

   POR QUÉ YA NO ES display:contents
   ----------------------------------
   Antes .cab era display:contents (su caja no existía para el dibujo,
   sus tres franjas eran hijas directas del body) porque un elemento
   sticky solo se pega DENTRO de su contenedor, y la franja 3 sola no
   tenía margen para pegarse si el header terminaba donde ella terminaba.
   Ahora es al revés: se necesita que LAS TRES peguen JUNTAS, como un
   solo bloque, así que el propio <header class="cab"> es el que se
   pega — sus tres franjas quedan adentro, en su orden normal, y se
   mueven todas juntas porque son una sola caja.

   El <script> de acá abajo mide cuánto mide esa caja de verdad (cambia
   con el ancho de pantalla y con cuánto ocupe el texto de la franja 1)
   y lo guarda en --cab-alto, que es lo que usa cualquier otra cosa que
   se pegue MÁS ABAJO en la página (filtros, resumen de compra, galería
   de producto, letras de marcas, menú de Mi cuenta) para no quedar
   tapada detrás. Ver la definición de --cab-alto en tema.css.
   ===================================================================== */
.cab{ position:sticky; top:0; z-index:60; }

.cab-nav{
  background:var(--bg-elev); border-bottom:1.5px solid var(--panel-border);
}
.cab-nav-fila{ display:flex; align-items:center; gap:var(--s2); min-height:var(--row-h); }

.cab-nav-catalogo{
  flex:none; display:inline-flex; align-items:center; min-height:var(--row-h);
  padding:0 var(--s2); margin-right:var(--s1);
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink); border-right:1px solid var(--panel-border);
}

.cab-nav-lista{ display:flex; align-items:center; flex:1; min-width:0; flex-wrap:wrap; }
.cab-nav-item{ position:relative; }
.cab-nav-item > a{
  display:inline-flex; align-items:center; gap:5px;
  min-height:var(--row-h); padding:0 12px;
  font-family:var(--font-display); font-size:13px; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-dim);
  border-bottom:2px solid transparent;
  transition:color var(--dur-ui) ease, border-color var(--dur-ui) ease;
}
.cab-nav-item > a.on{ color:var(--ink); border-bottom-color:var(--ink); }
.cab-nav-flecha{ width:13px; height:13px; opacity:.6; }

/* ---------- Desplegable ----------
   :hover para mouse, :focus-within para teclado, .abierto para táctil
   (lo pone el JS). Los tres caminos llevan al mismo estado. */
.cab-desplegable{
  position:absolute; top:100%; left:0; z-index:65; min-width:220px;
  background:var(--bg-elev); border:1px solid var(--panel-border);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  box-shadow:0 16px 34px -18px var(--shadow);
  padding:6px;
  opacity:0; visibility:hidden;
  transform:scale(0.98) translateY(-4px);
  transform-origin:top left;            /* nace donde está el disparador */
  transition:opacity var(--dur-ui) var(--ease-out),
             transform var(--dur-ui) var(--ease-out),
             visibility var(--dur-ui);
}
.cab-nav-item.con-subs:hover > .cab-desplegable,
.cab-nav-item.con-subs:focus-within > .cab-desplegable,
.cab-nav-item.abierto > .cab-desplegable{
  opacity:1; visibility:visible; transform:scale(1) translateY(0);
}

.cab-desplegable a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:9px 12px; border-radius:var(--radius-sm);
  font-size:14px; color:var(--ink-dim);
  transition:background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.cab-desplegable-cuenta{
  font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}

@media (hover:hover) and (pointer:fine){
  .cab-nav-item > a:hover{ color:var(--ink); }
  .cab-desplegable a:hover{ background:var(--bg-elev-2); color:var(--ink); }
}

.cab-tema{ margin-left:auto; }


/* =====================================================================
   BARRA DE ABAJO (celular)
   ---------------------------------------------------------------------
   Reemplaza a la hamburguesa. Existe en el HTML siempre y el CSS solo
   la muestra en 900px o menos, el mismo corte en que la cabecera se
   pliega.

   Tinta y línea, sin acento: el amarillo queda para el contador del
   carrito, que es lo único de la barra que cambia por algo que hizo el
   cliente. La pestaña activa se marca con una raya de tinta ARRIBA —
   la misma raya que marca la categoría activa en la franja 3, puesta
   del lado que da a la página.
   ===================================================================== */
:root{ --atajos-alto:60px; }

.atajos{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:66;
  grid-template-columns:repeat(4, minmax(0,1fr));
  height:calc(var(--atajos-alto) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background-color:var(--bg-elev);
  border-top:1.5px solid var(--panel-border);
  transition:transform var(--dur-ui) var(--ease-out);
}
/* Con el teclado abierto se esconde (ver _menu.php). */
body.escribiendo .atajos{ transform:translateY(100%); }

.atajos-item{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-width:0; height:var(--atajos-alto); padding:0 4px;
  border:0; background:none; cursor:pointer;
  color:var(--ink-dim);
  font-family:var(--font-display); font-size:11.5px; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dur-ui) ease;
}
/* line-height propio: con 1 y overflow:hidden se cortaba la tilde de MENÚ. */
.atajos-item > span:last-child{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3; }
.atajos-item svg{ width:23px; height:23px; flex:none; transition:transform var(--dur-press) var(--ease-out); }
.atajos-item:active svg{ transform:scale(0.9); }

.atajos-item.on{ color:var(--ink); font-weight:600; }
.atajos-item.on::before{
  content:''; position:absolute; top:-1.5px; left:22%; right:22%; height:2px;
  background:var(--ink);
}
.atajos-item:focus-visible{ outline:2px solid var(--ink); outline-offset:-4px; border-radius:var(--radius-sm); }

.atajos-icono{ position:relative; display:block; line-height:0; }
.atajos-cuenta{
  position:absolute; top:-6px; left:calc(100% - 9px);
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background-color:var(--accent); color:var(--accent-ink);
  box-shadow:0 0 0 2px var(--bg-elev);
  font-family:var(--font-body); font-size:11px; font-weight:700; line-height:1;
  letter-spacing:0; font-variant-numeric:tabular-nums;
}
.atajos-cuenta[hidden]{ display:none; }
.atajos-cuenta.pulso{ animation:carrito-pulso 420ms var(--ease-out); }


/* =====================================================================
   PANEL "MENÚ" (celular)
   Sube desde abajo, desde el borde donde está su botón, y tapa la barra
   mientras está abierto: se cierra con la X, tocando el fondo o con
   Escape.
   ===================================================================== */
.menu-fondo{
  position:fixed; inset:0; z-index:90;
  background:rgba(38,43,51,.5); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-panel) var(--ease-out), visibility var(--dur-panel);
}
.menu-fondo.visible{ opacity:1; visibility:visible; }

.menu-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  max-height:86vh; max-height:86dvh;
  background:var(--bg-elev);
  border-top:1.5px solid var(--panel-border);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  box-shadow:0 -18px 40px -24px var(--shadow);
  display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  /* En porcentaje: baja exactamente su propio alto, sea cual sea. */
  transform:translateY(100%);
  visibility:hidden;
  transition:transform var(--dur-panel) var(--ease-out), visibility 0s linear var(--dur-panel);
}
.menu-movil.abierto{
  transform:translateY(0); visibility:visible;
  transition:transform var(--dur-panel) var(--ease-out), visibility 0s;
}

.menu-movil-cabecera{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:10px 10px 10px var(--s3);
  border-bottom:1px solid var(--panel-border);
}
.menu-movil-titulo{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  letter-spacing:0.08em; text-transform:uppercase;
}
.menu-movil-acciones{ display:flex; align-items:center; gap:var(--s1); }
.menu-cerrar{
  width:44px; height:44px; flex:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; color:var(--ink-dim); cursor:pointer;
  border-radius:var(--radius-sm);
  transition:color var(--dur-ui) ease;
}
.menu-cerrar svg{ width:20px; height:20px; }
.menu-cerrar:active{ transform:scale(0.97); }

.menu-movil-cuerpo{
  padding:var(--s1) var(--s2) var(--s2); overflow-y:auto; flex:1;
  overscroll-behavior:contain;
}

.menu-item{
  display:flex; align-items:center; min-height:var(--row-h); padding:10px 12px;
  border-radius:var(--radius-sm); font-size:15px; color:var(--ink-dim);
  transition:background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.menu-item.on{ color:var(--ink); font-weight:600; }
.menu-item-fuerte{
  font-family:var(--font-display); font-weight:600; font-size:14px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink);
}

/* Categorías con subcategorías: se despliegan en el lugar. Con todas
   abiertas a la vez, el panel era una lista de cuarenta renglones. */
.menu-grupo > summary{ list-style:none; cursor:pointer; justify-content:space-between; }
.menu-grupo > summary::-webkit-details-marker{ display:none; }
.menu-grupo > summary::after{
  content:''; width:7px; height:7px; flex:none; margin-right:4px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-ui) var(--ease-out);
}
.menu-grupo[open] > summary{ color:var(--ink); }
.menu-grupo[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }

.menu-subs{ margin:0 0 var(--s1) 12px; padding-left:12px; border-left:1px solid var(--panel-border); }
.menu-subs a{
  display:block; padding:9px 12px; font-size:14px; color:var(--ink-faint);
  border-radius:var(--radius-sm);
  transition:color var(--dur-ui) ease;
}
.menu-subs a.menu-subs-todo{ color:var(--ink-dim); font-weight:600; }
.menu-separador{ height:1px; background:var(--panel-border); margin:var(--s1) 12px; }
.menu-wa{ width:100%; margin-top:var(--s2); }

@media (hover:hover) and (pointer:fine){
  .menu-item:hover{ background:var(--bg-elev-2); color:var(--ink); }
  .menu-subs a:hover{ color:var(--ink); }
  .menu-cerrar:hover{ color:var(--ink); }
}

/* En computadora ni la barra ni su panel existen. Si alguien abre el
   panel en el teléfono y gira a una tablet ancha, tampoco queda
   colgado a media pantalla. */
@media (min-width:901px){
  .menu-movil, .menu-fondo{ display:none; }
}


/* =====================================================================
   PIE · FRANJA 1 · CONTENIDO
   ===================================================================== */
.pie{ border-top:1.5px solid var(--panel-border); }

.pie-contenido{ background:var(--bg-elev); padding:var(--s8) 0 var(--s6); }
.pie-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr;
  gap:var(--s6) var(--s4); align-items:start;
}
/* Los elementos de una fila arrancan en la misma línea, no en su
   centro. En cuanto una columna crece un renglón, el centrado deja la
   fila entera torcida sin que se sepa por qué. */

.pie-col-marca{ max-width:320px; }
.pie-logo{ color:var(--ink); margin-bottom:var(--s2); }
.pie-logo svg,
/* Misma regla que en la cabecera, y por el mismo motivo. Faltaba: sin
   ella el <img> del pie salia a tamano casi real, gigante al lado de
   columnas de texto de 34px. */
.pie-logo img{ height:34px; width:auto; }


/* ---------------------------------------------------------------------
   ENTRADA DESTACADA DEL MENU
   ---------------------------------------------------------------------
   Fondo lleno, como el boton de Marcas de la referencia. Se marca desde
   /sistema/web/ y esta pensada para UNA entrada, dos como mucho: si
   todo resalta, nada resalta.

   Usa --ink y no --accent como fondo a proposito. El amarillo del
   sistema es el acento de accion — comprar, confirmar — y gastarlo en
   una entrada de navegacion le quita fuerza justo donde hace falta, en
   el boton de la ficha de producto. La regla del acento unico del
   manual dice exactamente esto.
   --------------------------------------------------------------------- */
.cab-nav-item > a.destacado{
  /* Un botón dentro de la franja, no la franja entera: 32px de alto y
     centrado. Con el alto completo de la fila se veía más grande que
     todo lo demás. Radio bajo y no píldora: la única píldora del
     sistema es el interruptor de tema. */
  background:var(--ink);
  color:var(--bg);
  min-height:32px; align-self:center;
  border-radius:var(--radius-sm);
  padding-left:14px;
  padding-right:14px;
}
.cab-nav-item > a.destacado:hover{ background:var(--accent); color:var(--accent-ink); }
.pie-lema{ margin:0 0 var(--s2); font-size:14px; color:var(--ink-dim); }
.pie-stock{ margin:0; font-size:13px; color:var(--ink-faint); line-height:1.5; }

.pie-titulo{
  font-family:var(--font-display); font-size:12px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink);
  margin-bottom:var(--s2);
}
.pie-col li{ margin-bottom:9px; font-size:14px; }
.pie-col a{ color:var(--ink-dim); transition:color var(--dur-ui) ease; }
/* Las páginas que todavía no existen se muestran apagadas en vez de
   ocultarse: así se ve qué falta y el visitante entiende que la página
   existirá, no que se la escondimos. */
.pie-pendiente{ color:var(--ink-faint); cursor:default; }

.pie-col-contacto p{ margin:0 0 var(--s1); font-size:14px; color:var(--ink-dim); }
.pie-enlace{ color:var(--ink); font-weight:600; }
.pie-wa-linea{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pie-wa-quien{ font-size:12px; color:var(--ink-faint); }

@media (hover:hover) and (pointer:fine){
  .pie-col a:hover{ color:var(--ink); }
  .pie-enlace:hover{ color:var(--accent-text); }
}


/* =====================================================================
   PIE · FRANJA 2 · LEGAL
   Otra superficie, no otro color inventado: es la misma escala de
   elevación del tema, un escalón más abajo.
   ===================================================================== */
.pie-legal{
  background:var(--bg-elev-2);
  border-top:1px solid var(--panel-border);
  padding:var(--s6) 0 var(--s3);
}
.pie-legal-grid{
  display:grid; grid-template-columns:1fr 1.4fr auto;
  gap:var(--s4); align-items:start;
}
.pie-legal-bloque .pie-titulo{ margin-bottom:12px; }

.pie-pagos{ display:flex; flex-wrap:wrap; gap:8px; }
.pie-pagos li{
  font-size:12px; font-weight:600; color:var(--ink-dim);
  padding:5px 10px; border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); background:var(--bg-elev);
}

.pie-empresas li{ font-size:13px; color:var(--ink-dim); margin-bottom:7px; }
.pie-ruc{
  display:block; font-size:12px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

.pie-legal-reclamos{ justify-self:end; }
.pie-reclamos{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; min-height:var(--row-h);
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; line-height:1.3;
  color:var(--ink);
  transition:border-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.pie-reclamos svg{ width:24px; height:24px; flex:none; }
.pie-reclamos:active{ transform:scale(0.97); }

.pie-firma{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s2); flex-wrap:wrap;
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1px solid var(--panel-border);
  font-size:12.5px; color:var(--ink-faint);
}
.pie-colaborador{ color:var(--ink-faint); transition:color var(--dur-ui) ease; }

@media (hover:hover) and (pointer:fine){
  .pie-reclamos:hover{ border-color:var(--accent); color:var(--accent-text); }
  .pie-colaborador:hover{ color:var(--ink-dim); }
}


/* =====================================================================
   REJILLA Y TARJETA DE PRODUCTO
   La pieza más repetida del sitio. La usan el catálogo y la portada.
   ===================================================================== */
/* CUATRO POR FILA, FIJO.
   No auto-fill: con auto-fill el número de columnas lo decide el ancho
   sobrante, y bastaba que la suma diera 896px contra 894 disponibles
   para que cayera a tres sin que nada lo explicara.

   Cuatro es la cuenta en escritorio. Abajo baja a tres y después a
   dos, porque cuatro columnas en un teléfono de 380px son tarjetas de
   85px: ahí no se ve el color del filamento, que es lo único que
   importa en esta rejilla. */
.rejilla{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s2);
}

.producto{
  background:var(--bg-elev);
  border:1px solid var(--panel-border);
  /* Radio medio y no bajo: la tarjeta es la pieza que más se repite
     del sitio, y con 4px la rejilla se leía como una planilla. Es el
     mismo radio de la columna de filtros, la barra y la grilla, así
     todo lo que flota sobre la cuadrícula tiene la misma esquina. */
  border-radius:var(--radius-md);
  overflow:hidden;
  /* Solo border-color y transform: los dos corren en la GPU. Animar
     box-shadow en 24 tarjetas a la vez repinta media pantalla. */
  transition:border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out);
}
.producto-enlace{ display:flex; flex-direction:column; height:100%; }

.producto-foto{
  position:relative; aspect-ratio:1;
  background:var(--bg); overflow:hidden;
  border-bottom:1px solid var(--panel-border);
}
.producto-foto img{ width:100%; height:100%; object-fit:cover; }

/* El hueco sin foto lleva las líneas de la cuadrícula del sistema: se
   lee como "falta la foto", no como un error de carga. */
.sin-foto{
  display:block; width:100%; height:100%;
  background:
    repeating-linear-gradient(0deg,  var(--grid-major) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 24px),
    var(--bg-elev-2);
}

/* Radio bajo, no píldora: la única píldora del sistema es el
   interruptor de tema. */
.sello{
  position:absolute; top:8px; padding:4px 9px;
  border-radius:var(--radius-sm);
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
}
.sello-preventa{ right:8px; background:var(--ink); color:var(--bg); }
/* .sello-oferta existe si algún día vuelve el sello de porcentaje.
   Hoy la oferta se comunica con el precio tachado, sin color — ver el
   comentario en tienda/_tarjeta.php. */
.sello-oferta{ left:8px; background:var(--accent); color:var(--accent-ink); }

/* Este sí se usa — es privado (solo lo ve quien está logueado como
   distribuidor), así que tapar la esquina de la foto para decir
   cuánto se ahorra es la prioridad correcta, a diferencia de la
   oferta pública. Mismo tono neutro que Preventa, no el de acento:
   sigue sin ser un color nuevo compitiendo por atención. */
.sello-distribuidor{ left:8px; background:var(--ink); color:var(--bg); }

.producto-datos{
  padding:14px; display:flex; flex-direction:column; flex:1; gap:6px;
}

/* El nombre es DATO, no titular: Work Sans, caja normal. "ESUN PLA+
   MARRÓN 1KG" se lee peor que "Esun PLA+ Marrón 1Kg", y la lámina 20
   prohíbe texto entero en mayúsculas fuera de un titular. */
.producto-nombre{
  font-family:var(--font-body); font-weight:600; font-size:14px;
  letter-spacing:0; line-height:1.35; margin:0; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.producto-ruta{
  margin:0; font-family:var(--font-display); font-size:11px; font-weight:500;
  color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Los elementos de la fila arrancan en la misma línea de base, no
   centrados: el precio tachado y el vigente tienen alturas distintas y
   centrarlos deja los dos números a distinta altura. */
.producto-precio{
  margin-top:auto; padding-top:var(--s1);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
/* En su propia línea, arriba de los dos precios — order:-1 la saca del
   orden natural del flex sin necesitar un wrapper aparte. */
.distribuidor-etiqueta{
  flex-basis:100%; order:-1;
  font-family:var(--font-display); font-size:10.5px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-dim);
}
.producto-precio .antes{
  font-size:12px; color:var(--ink-faint); text-decoration:line-through;
  font-variant-numeric:tabular-nums;
}
.producto-precio .ahora{
  font-family:var(--font-display); font-weight:600; font-size:18px;
  letter-spacing:0.01em; color:var(--ink); font-variant-numeric:tabular-nums;
}

/* LOS ESTADOS SE DISTINGUEN POR FORMA, NO SOLO POR COLOR.

   Antes los cuatro eran el mismo recuadro con borde, cambiando solo el
   tono. Verde, azul y gris en letra de 11px, con borde de 1px, se
   parecen demasiado: en una rejilla de cincuenta había que leer cada
   etiqueta para saber qué había.

   Ahora cada estado tiene un peso visual distinto, de más a menos:

     Disponible        LLENO, verde. Lo que se puede llevar hoy.
     Últimas unidades  tintado, ámbar.
     Bajo pedido       tintado, azul.
     Preventa          solo contorno PUNTEADO: todavía no está.

   Y el punto de la izquierda repite el estado en la forma más chica
   posible. Cada etiqueta sigue llevando su palabra escrita: el color
   nunca es el único portador del estado. */
.disponibilidad{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; line-height:1.3;
  padding:4px 10px 4px 8px; border-radius:var(--radius-sm);
  border:1px solid transparent; white-space:nowrap;
}
.disponibilidad::before{
  content:''; width:7px; height:7px; flex:none; border-radius:50%;
  background-color:currentColor;
}
.disponibilidad.hay{
  /* --bg como texto: casi blanco sobre el verde oscuro de Vitela, y
     azul plano sobre el verde claro de Plano Azul. Contraste alto en
     los dos temas sin elegir un color a mano. */
  background-color:var(--ok); color:var(--bg);
}
.disponibilidad.pocas{
  background-color:color-mix(in srgb, var(--accent) 22%, transparent);
  color:var(--accent-text);
}
.disponibilidad.pedido{
  background-color:color-mix(in srgb, var(--info) 14%, transparent);
  color:var(--info);
}
.disponibilidad.no{
  background-color:transparent;
  border:1px dashed var(--ink-faint);
  color:var(--ink-dim);
}
.disponibilidad.no::before{ background-color:transparent; box-shadow:inset 0 0 0 1.5px currentColor; }
.disponibilidad.grande{ font-size:13.5px; padding:7px 14px 7px 12px; gap:8px; margin:0 0 var(--s3); }
.disponibilidad.grande::before{ width:8px; height:8px; }

@media (hover:hover) and (pointer:fine){
  .producto:hover{ border-color:var(--line); transform:translateY(-2px); }
}


/* =====================================================================
   PESTAÑAS FLOTANTES
   Pegadas al borde derecho y redondeadas solo del lado visible: la
   pieza se corta contra el borde en vez de flotar con sombra
   alrededor. Es la misma lógica de la lámina que se sale del margen.
   ===================================================================== */
.flotantes{
  position:fixed; right:0; bottom:24px; z-index:80;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}

.flotante{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; padding:0; flex:none;   /* área táctil holgada */
  border:0; border-radius:var(--radius-md) 0 0 var(--radius-md);
  cursor:pointer;
  box-shadow:-6px 6px 18px -8px var(--shadow);
  transition:transform var(--dur-press) var(--ease-out),
             opacity var(--dur-ui) var(--ease-out),
             visibility var(--dur-ui);
}
.flotante svg{ width:26px; height:26px; }
.flotante:active{ transform:scale(0.94); }

/* El verde es de WhatsApp, no nuestro: no gasta el acento del sistema
   y la gente lo lee como "WhatsApp" antes que como un color. */
.flotante-wa{ background:#25D366; color:#FFFFFF; }

/* Tinta plana: no señala nada porque no tiene nada que señalar. */
.flotante-subir{
  background:var(--ink); color:var(--bg);
  opacity:0; visibility:hidden;
  transform:translateX(8px);
}
.flotante-subir.visible{ opacity:1; visibility:visible; transform:translateX(0); }

@media (hover:hover) and (pointer:fine){
  .flotante:hover{ transform:translateX(-3px); }
  .flotante-subir.visible:hover{ transform:translateX(-3px); }
}


/* =====================================================================
   RESPONSIVE
   El orden de sacrificio, del primero al último: los nombres de las
   empresas junto a cada WhatsApp, la franja 2 entera, la lista de
   categorías. El buscador nunca se pierde — se muda.
   ===================================================================== */

@media (max-width:1080px){
  .pie-grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .pie-col-contacto{ grid-column:1 / -1; }
}

@media (max-width:1080px){
  .rejilla{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:900px){
  /* FRANJA 1 EN EL CELULAR: WhatsApp plegado a la izquierda, el
     almacén al centro y "Ubícanos" a la derecha. Una sola línea: la
     dirección completa partía la franja en dos renglones. */
  .cab-contacto-fila{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"wa sede mapa"; gap:10px; min-height:44px;
  }
  .cab-wa{ justify-self:start; }
  .cab-sede{ justify-self:center; }
  .cab-sede-boton{ margin-left:0; }
  .cab-wa-lista{ display:none; }
  .cab-wa-plegado{ display:block; }
  .cab-direccion-larga{ display:none; }
  .cab-direccion-corta{ display:inline; }
  /* Los desplegables se anclan a la franja y no a su botón: con el
     almacén al centro, un menú de 270px anclado a él se sale de la
     pantalla por la derecha en un teléfono de 360px. */
  .cab-sede{ position:static; }
  .cab-sede-menu{ left:12px; right:12px; width:auto; }

  /* El interruptor de tema ya está dentro del panel Menú: acá
     le cede su lugar al botón Catálogo. */
  .cab-nav-fila > .cab-tema{ display:none; }
  .cab-catalogo-movil{
    display:inline-flex; flex:none; min-height:44px; padding:0 18px;
    background:var(--ink); color:var(--bg); border-color:var(--ink);
  }

  /* La franja 3 pierde su lista y se queda con buscador y tema: con
     siete categorías, dos filas de navegación empujan el primer
     producto fuera de la pantalla. */
  .cab-nav-lista,
  .cab-nav-catalogo{ display:none; }
  .cab-buscador-movil{ display:flex; flex:1; }
  .cab-nav-fila{ padding-top:10px; padding-bottom:10px; gap:12px; }
  .cab-buscador-movil input{ height:44px; font-size:14px; }
  .cab-buscador-movil button{ height:44px; width:44px; }

  /* La franja 2 se reduce al logotipo, centrado. El buscador ya está
     abajo, y Acceder y Carrito se mudaron a la barra de abajo: dejarlos
     también acá eran dos puertas iguales a 600px de distancia. */
  .cab-identidad-fila > .cab-buscador,
  .cab-acceso,
  .cab-carrito{ display:none; }
  .cab-identidad-fila{ min-height:56px; justify-content:center; padding-top:10px; padding-bottom:10px; }
  .cab-marca svg,
  .cab-marca img{ height:30px; }

  /* LA BARRA DE ABAJO. El body le reserva su alto para que el final del
     pie no quede escondido detrás. */
  .atajos{ display:grid; }
  body{ padding-bottom:calc(var(--atajos-alto) + env(safe-area-inset-bottom, 0px)); }
  body.escribiendo{ padding-bottom:0; }

  /* WhatsApp y "subir" flotan ENCIMA de la barra, no detrás. */
  .flotantes{ bottom:calc(var(--atajos-alto) + 14px + env(safe-area-inset-bottom, 0px)); }

  .pie-legal-grid{ grid-template-columns:1fr 1fr; }
  .pie-legal-reclamos{ grid-column:1 / -1; justify-self:start; }
}

@media (max-width:640px){
  .cab-sede-ciudad{ display:none; }
  .cab-contacto{ font-size:13px; }
  .rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .flotantes{ gap:8px; }
  .flotante{ width:46px; height:46px; }
  .flotante svg{ width:23px; height:23px; }
  .producto-datos{ padding:11px 12px 13px; }

  /* El pie pasa a dos columnas. */
  .pie-grid{ grid-template-columns:1fr 1fr; }
  .pie-col-marca{ grid-column:1 / -1; max-width:none; }
  .pie-legal-grid{ grid-template-columns:1fr; }
  .pie-contenido{ padding:var(--s6) 0 var(--s4); }
}


/* =====================================================================
   MOVIMIENTO REDUCIDO
   No es movimiento cero: se conservan opacidad y color, que ayudan a
   entender QUÉ cambió. Se elimina desplazamiento y escalado.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .cab-sede-menu{ transform:none; transition:opacity var(--dur-ui) ease, visibility var(--dur-ui); }
  .cab-sede-menu.abierto{ transform:none; }
  .cab-acceso-menu,
  .cab-desplegable{ transform:none; transition:opacity var(--dur-ui) ease, visibility var(--dur-ui); }
  .cab-acceso-menu.abierto,
  .cab-nav-item.con-subs:hover > .cab-desplegable,
  .cab-nav-item.con-subs:focus-within > .cab-desplegable,
  .cab-nav-item.abierto > .cab-desplegable{ transform:none; }
  .menu-movil,
  .menu-movil.abierto{ transition:visibility 0s; }
  .atajos{ transition:none; }
  .atajos-item:active svg{ transform:none; }
  .atajos-cuenta.pulso{ animation:none; }
  .menu-grupo > summary::after{ transition:none; }
  .producto:hover{ transform:none; }
  .flotante:hover,
  .flotante:active{ transform:none; }
  .flotante-subir{ transform:none; }
  .flotante-subir.visible{ transform:none; }
  .menu-cerrar:active,
  .pie-reclamos:active,
  .cab-buscador button:active{ transform:none; }
}

/* =====================================================================
   CATÁLOGO: EL BOTÓN JUNTO AL LOGO Y SU PANEL
   ---------------------------------------------------------------------
   El panel cuelga de la franja 2 entera (position:relative en
   .cab-identidad), no del botón: ocupa todo el ancho, como un cajón
   que se abre debajo de la cabecera.
   ===================================================================== */
.cab-identidad{ position:relative; }
.cab-catalogo{ flex:none; }
.cab-catalogo-boton{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 16px;
  background:var(--ink); color:var(--bg);
  border:0; border-radius:var(--radius-sm); cursor:pointer;
  font-family:var(--font-display); font-size:14px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  transition:background-color var(--dur-ui) ease, transform var(--dur-press, 140ms) var(--ease-out);
}
.cab-catalogo-boton svg{ width:18px; height:18px; }
.cab-catalogo-flecha{ width:14px !important; height:14px !important; transition:transform var(--dur-ui) var(--ease-out); }
.cab-catalogo-boton[aria-expanded="true"] .cab-catalogo-flecha{ transform:rotate(180deg); }
.cab-catalogo-boton:active{ transform:scale(0.97); }
@media (hover:hover) and (pointer:fine){ .cab-catalogo-boton:hover{ background:var(--ink-dim); } }

.cab-catalogo-panel{
  position:absolute; left:0; right:0; top:100%; z-index:70;
  background:var(--bg-elev); border-bottom:1px solid var(--panel-border);
  box-shadow:0 24px 40px -24px var(--shadow);
  max-height:calc(100vh - 160px); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility var(--dur-ui);
}
.cab-catalogo-panel.abierto{ opacity:1; visibility:visible; transform:translateY(0); }
.cab-catalogo-cuerpo{ padding-top:20px; padding-bottom:24px; }
.cab-catalogo-atajos{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--panel-border); }
.cab-catalogo-grupos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px 28px; }
.cab-catalogo-cat{
  display:inline-flex; align-items:baseline; gap:8px; margin-bottom:10px;
  font-family:var(--font-display); font-size:16px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--ink);
}
.cab-catalogo-cat span{ font-family:var(--font-body, inherit); font-size:12px; font-weight:400; letter-spacing:0; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
@media (hover:hover) and (pointer:fine){ .cab-catalogo-cat:hover{ text-decoration:underline; } }
.cab-catalogo-subs{ display:flex; flex-wrap:wrap; gap:6px; }

/* Las píldoras del panel: radio bajo como todo el sistema. */
.cab-chip{
  display:inline-flex; align-items:center; min-height:34px; padding:0 14px;
  border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--ink); font-size:13.5px; font-weight:500;
  transition:border-color var(--dur-ui) ease, background-color var(--dur-ui) ease;
}
.cab-chip.fuerte{ background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:600; }
@media (hover:hover) and (pointer:fine){
  .cab-chip:hover{ border-color:var(--ink); }
  .cab-chip.fuerte:hover{ background:var(--ink-dim); border-color:var(--ink-dim); }
}

@media (max-width:900px){
  .cab-catalogo{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cab-catalogo-panel{ transform:none; transition:opacity var(--dur-ui) ease, visibility var(--dur-ui); }
  .cab-catalogo-flecha{ transition:none; }
}