/* ============================================================================
   MARCA.CSS · manolito24hs.com — SISTEMA DE PLACAS
   ----------------------------------------------------------------------------
   Esto NO es una landing page y tampoco es un diario. Es el KIT DE MARCA del
   dueño hecho web: las seis placas que él ya usa en redes, con su mismo
   lenguaje — negro con humo rojo, el toro, el sello "ABIERTO 24 HS · SIEMPRE
   CERCA", los titulares gastados, las pastillas con filete neón y glow.

   Por qué placas y no landing: una landing tiene UN hero con UN botón y todo lo
   demás abajo en bandas. Acá cada bloque es una PLACA completa y autónoma, con
   su lockup, su titular y su cierre, como las del carrusel. Se entra por
   cualquiera. No hay una única puerta.

   PALETA sacada pixel por pixel de las placas del dueño:
     negro #000000 · rojo #C81A1C · sangre #8C0209 · oro #EDAE01 · hueso #EDEAE7

   TIPOGRAFÍA: Anton para titulares (con textura gastada aplicada por CSS, ver
   .mz-gastado), Oswald para etiquetas, Inter para cuerpo. Las tres
   self-hosteadas — la CSP bloquea Google Fonts.

   REGLA DE ORO (heredada de MNX): nada puede quedar INVISIBLE si el JS no
   corre. El estado oculto vive detrás de `body.mz-ro`, clase que pone el JS.
   ============================================================================ */

@font-face { font-family:'Anton';  src:url('/fonts/anton.woff2') format('woff2');      font-weight:400;     font-style:normal; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('/fonts/oswald-400.woff2') format('woff2'); font-weight:400;     font-style:normal; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('/fonts/oswald-600.woff2') format('woff2'); font-weight:600;     font-style:normal; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('/fonts/oswald-700.woff2') format('woff2'); font-weight:700;     font-style:normal; font-display:swap; }
@font-face { font-family:'Inter';  src:url('/fonts/inter-var.woff2') format('woff2');  font-weight:100 900; font-style:normal; font-display:swap; }

:root{
  /* ── Del kit del dueño, muestreados de las placas ── */
  --negro:#000000;
  --negro-2:#0B0709;
  --negro-3:#141013;
  --rojo:#C81A1C;
  --rojo-viv:#F62A2E;
  --sangre:#8C0209;
  --sangre-2:#5A0206;
  --oro:#EDAE01;
  --hueso:#EDEAE7;
  --hueso-2:#B9B3B0;
  --gris:#7C7573;

  --verde:#31D07A;
  --wa:#25D366;

  /* ── Neón: el gesto que define el kit ── */
  --neon-borde:rgba(200,26,28,.75);
  --neon-glow:0 0 0 1px rgba(200,26,28,.55), 0 0 14px rgba(200,26,28,.35), inset 0 0 22px rgba(200,26,28,.09);
  --neon-glow-fuerte:0 0 0 1px var(--rojo), 0 0 26px rgba(200,26,28,.6), inset 0 0 30px rgba(200,26,28,.16);
  --linea:rgba(237,234,231,.12);
  --linea-2:rgba(237,234,231,.24);
  --sh:0 18px 50px rgba(0,0,0,.7);

  /* ── Tipos ── */
  --f-tit:'Anton','Arial Narrow',Impact,sans-serif;
  --f-eti:'Oswald','Barlow',system-ui,sans-serif;
  --f-txt:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ── Escala de íconos: TRES pasos, en píxeles, múltiplos de 4 sobre la
        grilla de 24 del viewBox. En `em` el tamaño lo decidía el font-size del
        padre y salían ocho tamaños distintos por accidente. ── */
  --ic-s:16px;   /* adentro de texto: volantas, letra chica, epígrafes */
  --ic-m:20px;   /* acciones: botones, chips, dock */
  --ic-l:30px;   /* pastillas neón y barra de servicios */

  --caja:min(1280px, 100% - 2rem);
  --r:14px;
  --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body.mz{
  margin:0;
  background:var(--negro);
  color:var(--hueso);
  font-family:var(--f-txt);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* El humo rojo y el grano del kit, sin pedir un solo archivo: dos radiales fijos
   + una capa de ruido fractal en SVG. Va en un pseudo-elemento fijo para que no
   se repita por sección ni haga scroll con el contenido. */
body.mz::before{
  content:'';
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60% 42% at 8% 4%,   rgba(140,2,9,.5),  transparent 68%),
    radial-gradient(52% 38% at 96% 22%, rgba(140,2,9,.34), transparent 66%),
    radial-gradient(70% 44% at 50% 104%, rgba(200,26,28,.24), transparent 70%);
}
body.mz::after{
  content:'';
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
/* ⚠️ El :not() NO es decorativo. `body.mz > *` (0,1,1) le GANA en especificidad
   a `.mz-solo-lector` (0,1,0), así que le pisaba el position:absolute al sprite
   de íconos y lo dejaba en flujo como inline: una caja de línea de 25,6 px
   muerta arriba de TODO, en todas las páginas de marca. Con el hero a pantalla
   completa esa franja se ve; antes quedaba escondida detrás de la barra negra.
   Va para los DOS utilitarios fuera de flujo: el sprite y el link "saltar al
   contenido". Con el sprite arreglado el hueco seguía ahí, y era el <a> del
   salto —41 px de caja de línea— con exactamente el mismo problema.
   Un elemento "visualmente oculto" que ocupa lugar no está oculto. */
/* ⚠️ ACÁ NO VA UN SELECTOR UNIVERSAL. Hubo dos versiones y las dos rompieron algo.
   `body.mz > *` le pisaba el position:absolute a los utilitarios ocultos (el
   sprite y el link de "saltar al contenido") y los dejaba en flujo: 26 px de
   franja muerta arriba de todo. Al arreglarlo con
   `body.mz > *:not(.mz-solo-lector):not(.mz-saltar)` la especificidad subió a
   (0,3,1) y entonces le ganó a `.mz-nav{position:sticky}` (0,1,0): LA BARRA DE
   SECCIONES DEJÓ DE PEGARSE. Medido: computada `relative`, y al scrollear
   4000 px la barra quedaba en top=-2036. O sea 18.000 px de página sin índice.

   La cura no es más especificidad, es dejar de barrer con un comodín: se listan
   los bloques que de verdad necesitan subir por encima del humo y el grano del
   body, y cada uno declara SU position. Los utilitarios ocultos no aparecen, así
   que conservan la suya. */
body.mz > .mz-hero,
body.mz > header,
body.mz > main,
body.mz > .mz-pie{ position:relative; z-index:1; }

img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--rojo); color:#fff; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--rojo-viv);
  outline-offset:3px;
}

.mz-caja{ width:var(--caja); margin-inline:auto; }

/* ══════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA
   ══════════════════════════════════════════════════════════════════════════ */

.mz-tit1,.mz-tit2,.mz-tit3,.mz-tit4{
  font-family:var(--f-tit);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.008em;
  /* Nunca menos de 1: con Anton, un renglón con tilde (ALMACÉN, GÓNDOLA) se
     pisa con el de abajo. Pasó y se veía como un bug. */
  line-height:1;
  margin:0;
  text-wrap:balance;
}
.mz-tit1{ font-size:clamp(2.9rem, 9.5vw, 6.4rem); }
.mz-tit2{ font-size:clamp(2rem, 5.4vw, 3.8rem); }
/* Dos titulares seguidos (ADEMÁS, / GANÁS MÁS) se tocaban por las tildes. */
/* .12em − .18em del padding de .mz-gastado. Esta regla (0,2,0) le gana al
   margin-block de .mz-gastado (0,1,0), así que hay que restarlo a mano o se
   vuelve a abrir el hueco entre "ADEMÁS," y "GANÁS MÁS". */
.mz-tit2 + .mz-tit2{ margin-top:-.06em; }
.mz-tit3{ font-size:clamp(1.4rem, 2.8vw, 2.1rem); }
.mz-tit4{ font-size:clamp(1.05rem, 1.7vw, 1.32rem); line-height:1.06; }

/* GASTADO :: la textura salpicada de los titulares del kit. El truco es pintar
   el texto con un fondo de ruido recortado a la forma de las letras. Si el
   navegador no soporta background-clip:text, el `color` de abajo queda y el
   titular se ve liso — nunca invisible. */
.mz-gastado{
  color:var(--hueso);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .mz-gastado{
    background-color:var(--hueso);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.34' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.05'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)'/%3E%3C/svg%3E");
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    /* ⚠️ LAS TILDES. Con `background-clip:text` el glifo se pinta con el fondo,
       y el fondo termina en el padding-box: todo lo que la tinta sobresalga de
       ahí queda SIN PINTAR, o sea invisible. Con `line-height:1` la caja es más
       baja que la tinta de Anton, así que a "GÓNDOLA", "ADEMÁS", "SALÓN" y
       compañía se les borraba el acento — 7 de los 14 titulares de la página.
       No es recorte (overflow:visible no arregla nada): es AUSENCIA de fondo.
       Se agranda la caja de pintura y se compensa con margen negativo, así el
       layout no se mueve ni un píxel. */
    padding-block:.18em;
    margin-block:-.18em;
  }
  .mz-gastado.rojo{ background-color:var(--rojo); }
}
.mz-rojo{ color:var(--rojo); }
.mz-oro{ color:var(--oro); }

/* Banda roja de brochazo detrás de un subtítulo — el recurso del kit. */
.mz-brocha{
  display:inline-block;
  position:relative;
  padding:.16em .7em .22em;
  font-family:var(--f-tit);
  font-size:clamp(1.1rem, 2.6vw, 1.75rem);
  text-transform:uppercase;
  color:var(--hueso);
  line-height:1.1;
}
.mz-brocha::before{
  content:'';
  position:absolute; inset:0;
  z-index:-1;
  background:var(--rojo);
  /* Bordes irregulares: lo que hace que parezca pincelada y no un rectángulo. */
  clip-path:polygon(1% 8%, 99% 0%, 100% 86%, 97% 100%, 3% 96%, 0% 14%);
}

.mz-volanta{
  font-family:var(--f-eti);
  font-size:.7rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  /* --rojo (#C81A1C) sobre negro da 3,62:1 y el mínimo es 4,5:1. Es el PRIMER
     renglón de cada sección y va a 11 px con letter-spacing abierto, o sea el
     peor caso posible. --rojo-viv (#F62A2E) da 5,23:1 y ya es del kit. */
  color:var(--rojo-viv);
  margin:0 0 .7rem;
}
.mz-bajada{
  font-size:clamp(1rem, 1.35vw, 1.14rem);
  line-height:1.62;
  color:var(--hueso-2);
  margin:.9rem 0 0;
  max-width:60ch;
}
.mz-bajada b{ color:var(--hueso); font-weight:650; }
.mz-p{ margin:0 0 1em; color:var(--hueso-2); max-width:66ch; }
.mz-p:last-child{ margin-bottom:0; }
.mz-p b{ color:var(--hueso); font-weight:650; }
.mz-chico{ font-size:.86rem; color:var(--gris); }

/* ══════════════════════════════════════════════════════════════════════════
   EL LOCKUP — [MANOLITO] ALMACENES 24 HS
   ══════════════════════════════════════════════════════════════════════════ */

.mz-lockup{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--linea-2);
  font-family:var(--f-eti);
  font-size:clamp(.66rem, 1.5vw, .84rem);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
}
.mz-lockup b{ background:var(--rojo); color:#fff; padding:.5em .8em; font-weight:600; }
.mz-lockup span{ color:var(--hueso); padding:.5em .8em; }

.mz-toro{ width:clamp(58px, 11vw, 104px); height:auto; margin-inline:auto; }

/* El sello, arriba a la derecha, girando muy lento. */
/* El logo REAL de la marca, que ya viene en círculo. Antes acá había un sello
   dibujado a mano que giraba sin parar: un logo que gira es ruido, no marca —
   y encima no era el logo de verdad. Queda quieto, con el glow del kit. */
.mz-sello{
  width:clamp(62px, 11vw, 104px); height:auto;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(200,26,28,.35), 0 0 22px rgba(200,26,28,.28);
}

/* ══════════════════════════════════════════════════════════════════════════
   PLACAS
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ Sin esto, cada anclaje aterriza DEBAJO de la barra pegajosa y el visitante
   ve el bloque decapitado: el titular queda tapado. Se notaba poco mientras la
   nav estaba rota y no se pegaba; ahora que vuelve a pegarse es obligatorio.
   El valor sale de la altura real de la barra más un respiro. */
:where(section[id], header[id]){ scroll-margin-top:calc(var(--nav-h, 58px) + 12px); }

.mz-placa{
  position:relative;
  padding:clamp(2.6rem, 6vw, 5rem) 0;
  border-top:1px solid var(--linea);
}
.mz-placa:first-of-type{ border-top:none; }

/* Encabezado de placa: toro/lockup a la izquierda, sello a la derecha. */
/* ⚠️ `flex-wrap:wrap` no es cosmético: sin él, la cabecera más larga
   ("03 · Listo para llevar", 180 px) más el lockup no entran en un celular
   angosto, no envuelven, y EMPUJAN EL DOCUMENTO ENTERO a 383 px. Medido: 63 px
   de desborde horizontal a 320 y 23 px a 360 — o sea la página se movía de
   costado en cualquier teléfono chico. La pastilla del número es el elemento
   que puede ceder, así que es la que envuelve. */
.mz-placa-cab{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem 1rem;
  margin-bottom:clamp(1.4rem, 3vw, 2.2rem);
}
.mz-placa-num{
  font-family:var(--f-eti);
  font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris);
  border:1px solid var(--linea-2);
  border-radius:var(--r-pill);
  padding:.28rem .8rem;
  white-space:nowrap;
}

/* Las líneas de velocidad del kit: sutiles, entrando por un costado. */
.mz-placa.velocidad::before{
  content:'';
  position:absolute; left:0; top:38%;
  width:min(42%, 420px); height:110px;
  pointer-events:none;
  opacity:.5;
  background:repeating-linear-gradient(96deg,
    transparent 0 7px, rgba(200,26,28,.5) 7px 8px, transparent 8px 22px);
  -webkit-mask-image:linear-gradient(90deg, #000, transparent);
          mask-image:linear-gradient(90deg, #000, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   PASTILLA NEÓN — el componente que define el kit
   ══════════════════════════════════════════════════════════════════════════ */

.mz-neon{
  position:relative;
  display:flex; align-items:center; gap:clamp(.7rem, 1.6vw, 1.1rem);
  padding:clamp(.85rem, 1.9vw, 1.15rem) clamp(1rem, 2.2vw, 1.4rem);
  background:linear-gradient(180deg, rgba(20,16,19,.9), rgba(0,0,0,.9));
  border:1.5px solid var(--neon-borde);
  border-radius:var(--r);
  box-shadow:var(--neon-glow);
  text-decoration:none;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
a.mz-neon:hover, button.mz-neon:hover{
  box-shadow:var(--neon-glow-fuerte);
  border-color:var(--rojo);
  transform:translateY(-2px);
}
.mz-neon.redonda{ border-radius:var(--r-pill); }
/* ⚠️ Acotado a los envoltorios que APILAN. Suelto, este margen se le aplicaba
   también a las pastillas que van una al lado de la otra dentro de una grilla,
   así que la segunda de cada fila arrancaba .7rem más abajo que la primera. */
:not(.mz-g2):not(.mz-g2-ancho):not(.mz-g3) > .mz-neon + .mz-neon{ margin-top:.7rem; }

/* El ícono, en su propio recuadro neón (como en la placa 3). */
.mz-neon-ic{
  flex:none;
  width:clamp(44px, 9vw, 62px); height:clamp(44px, 9vw, 62px);
  display:grid; place-items:center;
  border:1.5px solid var(--neon-borde);
  border-radius:var(--r);
  box-shadow:0 0 12px rgba(200,26,28,.28), inset 0 0 14px rgba(200,26,28,.1);
  font-size:clamp(1.2rem, 2.6vw, 1.6rem);
  line-height:1;
}
.mz-neon-cuerpo{ min-width:0; }

/* ── ESCALA DE ÍCONOS · TRES PASOS, EN PÍXELES ────────────────────────────
   ⚠️ LA CAUSA RAÍZ DE "LOS ÍCONOS NO ESTÁN BUENOS" ERA MEDIRLOS EN `em`.
   Antes esto decía `width:1.15em` más cuatro overrides (1.6em, 1.05em, 1em,
   1.5em). Como cada padre tiene su propio clamp() de font-size, el tamaño final
   del ícono era un ACCIDENTE del contexto y cada componente nuevo fabricaba un
   tamaño nuevo gratis. Medido: OCHO tamaños renderizados distintos a lo largo
   de los viewports (11,19 · 15,08 · 16,80 · 20,48 · 30,72 · 31,19 · 31,94 ·
   40,95 px), con cinco simultáneos en la misma pantalla, dos pares
   indistinguibles que son ruido puro, y una INVERSIÓN de jerarquía: a 360px el
   ícono de la barra de servicios era el más grande de la página y a 1440 era
   24% más chico que el de las pastillas.

   Ahora hay TRES pasos y el que elige es el PADRE, no el ícono. Un componente
   nuevo tiene que elegir un paso de la escala en vez de inventarse uno. */
.mz-ic{
  inline-size:var(--ic, var(--ic-m));
  block-size:var(--ic, var(--ic-m));
  display:inline-block; vertical-align:-.2em;
  flex:none;
  color:var(--rojo-viv);
  filter:drop-shadow(0 0 var(--ic-glow, 5px) rgba(200,26,28,.55));
}
/* El paso lo declara el CONTENEDOR. Nunca el ícono. */
.mz-volanta, .mz-letrachica .ic, .mz-epi{ --ic:var(--ic-s); }
.mz-btn, .mz-cat, .mz-local-acc, .mz-dock-b{ --ic:var(--ic-m); }
.mz-neon-ic, .mz-servicio .ic{ --ic:var(--ic-l); }
.mz-btn .mz-ic{ color:currentColor; --ic-glow:0; }
.mz-volanta .mz-ic{ vertical-align:-.16em; }
.mz-neon-tit{
  font-family:var(--f-tit);
  font-size:clamp(1.05rem, 2.3vw, 1.5rem);
  text-transform:uppercase;
  line-height:1.02;
  margin:0;
  color:var(--hueso);
}
.mz-neon-tit em{ font-style:normal; color:var(--rojo-viv); }
.mz-neon-txt{ margin:.16rem 0 0; font-size:.9rem; line-height:1.45; color:var(--hueso-2); }

/* El porcentaje gigante a la izquierda (placa 2). */
/* 4ch y alineado a la derecha: con min-width:2.6ch un "5%" y un "15%" dejaban
   el borde izquierdo de las etiquetas desparejo en celular. */
.mz-neon-pct{
  flex:none; min-width:4ch; text-align:right;
  font-family:var(--f-tit);
  font-size:clamp(2.1rem, 6vw, 3.4rem);
  line-height:.9;
  color:var(--hueso);
  min-width:2.6ch;
}
.mz-neon-sep{ flex:none; width:1px; align-self:stretch; background:var(--linea-2); }

/* Etiqueta roja chiquita, tipo la de "EFECTIVO" / "MP · TRANSFERENCIA". */
.mz-eti{
  display:inline-block;
  background:var(--rojo);
  color:#fff;
  font-family:var(--f-eti);
  font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.22em .6em;
  line-height:1.2;
}

/* Número en círculo rojo (placa 5). */
.mz-paso-n{
  flex:none;
  width:clamp(38px, 7.5vw, 52px); height:clamp(38px, 7.5vw, 52px);
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--rojo);
  color:#fff;
  font-family:var(--f-tit);
  font-size:clamp(1.1rem, 2.6vw, 1.5rem);
  box-shadow:0 0 18px rgba(200,26,28,.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   GRILLAS
   ══════════════════════════════════════════════════════════════════════════ */

.mz-g2{ display:grid; gap:clamp(.8rem, 2vw, 1.2rem); }
@media (min-width: 700px){ .mz-g2{ grid-template-columns:1fr 1fr; } }
.mz-g2-ancho{ display:grid; gap:clamp(1.4rem, 3.4vw, 2.6rem); align-items:start; }
@media (min-width: 980px){
  .mz-g2-ancho{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
  /* La columna de pasos es más corta que el formulario y dejaba un hueco negro
     grande. Se estira y reparte. */
  #asociate .mz-g2-ancho{ align-items:stretch; }
  #asociate .mz-g2-ancho > :first-child{ display:flex; flex-direction:column; justify-content:space-between; }
}
.mz-g3{ display:grid; gap:clamp(.8rem, 2vw, 1.2rem); }
@media (min-width: 640px){ .mz-g3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1000px){ .mz-g3{ grid-template-columns:repeat(3,1fr); } }
.mz-acciones{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════════════════════ */

.mz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--f-tit);
  font-size:clamp(1rem, 2vw, 1.22rem);
  letter-spacing:.02em; text-transform:uppercase;
  text-decoration:none;
  padding:.85rem 1.6rem;
  border:1.5px solid transparent;
  border-radius:var(--r-pill);
  cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s, color .22s, border-color .22s;
}
.mz-btn:hover{ transform:translateY(-2px); }
.mz-btn:active{ transform:none; }

/* El CTA del kit: borde neón sobre negro, texto gastado. */
.mz-btn-neon{
  background:rgba(0,0,0,.6);
  color:var(--hueso);
  border-color:var(--neon-borde);
  box-shadow:var(--neon-glow);
}
.mz-btn-neon:hover{ box-shadow:var(--neon-glow-fuerte); border-color:var(--rojo); }
.mz-btn-rojo{ background:var(--rojo); color:#fff; box-shadow:0 0 22px rgba(200,26,28,.45); }
.mz-btn-rojo:hover{ background:var(--rojo-viv); box-shadow:0 0 34px rgba(200,26,28,.62); }
.mz-btn-oro{ background:var(--oro); color:#1a1200; }
.mz-btn-oro:hover{ background:#FFC21A; }
.mz-btn-linea{ background:transparent; color:var(--hueso); border-color:var(--linea-2); }
.mz-btn-linea:hover{ border-color:var(--hueso); background:rgba(237,234,231,.06); }
.mz-btn-full{ width:100%; }
.mz-btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }
.mz-btn::after{
  content:'';
  position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transition:left .55s var(--ease-out);
  pointer-events:none;
}
.mz-btn:hover::after{ left:130%; }
@media (prefers-reduced-motion: reduce){
  .mz-btn::after{ display:none; }
  .mz-btn:hover{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ESTADO EN VIVO
   ══════════════════════════════════════════════════════════════════════════ */

.mz-vivo{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-eti);
  font-size:.76rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--verde);
  border:1px solid rgba(49,208,122,.4);
  border-radius:var(--r-pill);
  padding:.3rem .8rem;
  background:rgba(49,208,122,.08);
}
.mz-vivo .p{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--verde);
  animation:mz-latido 2.6s ease-out infinite;
}
@keyframes mz-latido{
  0%{ box-shadow:0 0 0 0 rgba(49,208,122,.55); }
  70%{ box-shadow:0 0 0 9px rgba(49,208,122,0); }
  100%{ box-shadow:0 0 0 0 rgba(49,208,122,0); }
}
/* Cerrado va en gris, nunca en el verde de festejo. */
.mz-vivo.cerrado{ color:var(--gris); border-color:var(--linea-2); background:transparent; }
.mz-vivo.cerrado .p{ background:var(--gris); animation:none; }
@media (prefers-reduced-motion: reduce){ .mz-vivo .p{ animation:none; } }

/* ══════════════════════════════════════════════════════════════════════════
   BARRA DE SECCIONES (pegajosa arriba)
   ══════════════════════════════════════════════════════════════════════════ */

.mz-nav{
  position:sticky; top:0;
  /* Era 50, debajo del dock (60). El panel del menú vive ADENTRO de esta barra,
     así que su z-index se resuelve dentro de ESTE contexto de apilado: con la
     barra en 50 el cajón lateral quedaba por debajo del dock y las últimas
     entradas del menú aparecían tapadas por los cuatro botones. Arriba y abajo
     no se pisan nunca, así que subirla no cuesta nada. */
  z-index:70;
  background:rgba(0,0,0,.96);
  /* ⚠️ SIN backdrop-filter, A PROPÓSITO. Un elemento con filter/backdrop-filter
     es CONTAINING BLOCK de sus descendientes position:fixed — el panel del menú
     se posicionaba contra la barra (58 px de alto) en lugar de contra la
     pantalla. El fondo va del 92% al 96% para compensar el desenfoque perdido,
     que a esa opacidad no se veía. */
  border-bottom:1px solid var(--linea);
  box-shadow:0 1px 0 rgba(200,26,28,.5);
}
/* La barra es UNA fila: el botón del menú fijo a la izquierda y el índice
   scrolleando al lado. El índice es lo único que se mueve de costado. */
.mz-nav-fila{ display:flex; align-items:stretch; min-width:0; }
.mz-nav-fila > ol{ flex:1 1 auto; min-width:0; }
.mz-nav-env{ position:relative; }
.mz-nav-env::after{
  content:'';
  position:absolute; top:0; right:0; bottom:0; width:40px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, #000);
}
/* Antes esto lo apagaba en escritorio, justo donde la barra igual esconde
   entre 343 y 1.140 px de links. El degradé es la única pista de que se puede
   scrollear: se queda en todos los tamaños. */
.mz-nav ol{
  display:flex; margin:0; padding:0; list-style:none;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.mz-nav ol::-webkit-scrollbar{ display:none; }
/* ⚠️ SCOPEADO A `ol a`, NO a cualquier <a> de la barra.
   Desde que el menú lateral vive adentro de <nav class="mz-nav">, un selector
   `.mz-nav a` alcanzaba también a los 16 links del cajón: les metía
   text-transform:uppercase, white-space:nowrap y letter-spacing de etiqueta.
   Medido: "1.461 productos con precio de hoy" se renderizaba en MAYÚSCULAS, sin
   poder cortar, y desbordaba 67 px fuera del panel. Estas reglas son del
   ÍNDICE, así que se nombran por el índice. */
.mz-nav ol a{
  display:flex; align-items:center; min-height:44px; gap:.4rem;
  white-space:nowrap;
  padding:.7rem .8rem;
  text-decoration:none;
  font-family:var(--f-eti);
  font-size:.73rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--hueso-2);
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.mz-nav ol a:hover{ color:var(--hueso); }
.mz-nav ol a[aria-current="true"]{ color:var(--hueso); border-bottom-color:var(--rojo); }
/* ⚠️ `safe center`, NO `center` a secas. Con `center` en un contenedor que
   DESBORDA, el sobrante se reparte a los dos lados y el inicio queda en
   negativo: el primer link terminaba en -137px, fuera de la caja, y no había
   forma de scrollear hasta él — se veía "OMPRÁ ONLINE" cortado. `safe` le dice
   al navegador que cuando no entra alinee al inicio en vez de centrar.
   Si el navegador no lo soporta la declaración entera se descarta y queda el
   flex-start de fábrica: sin centrar, pero completo y alcanzable. */
@media (min-width: 900px){
  .mz-nav ol{ justify-content:safe center; }
  .mz-nav ol a{ padding:.75rem 1.05rem; font-size:.77rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL MENÚ LATERAL · el mapa completo del sitio

   La barra de arriba es el RECORRIDO (siete paradas en orden, para el que va
   bajando). Esto es el MAPA: todo lo que la página hace, agrupado por para qué
   sirve, para el que ya sabe a qué vino.

   Es un <details> nativo: abre, cierra y anda con teclado sin JavaScript. El JS
   sólo le agrega lo que el HTML no puede (cerrar tocando afuera, Escape, trabar
   el scroll del fondo, devolver el foco). Si no carga, sigue siendo un menú.
   ══════════════════════════════════════════════════════════════════════════ */

.mz-menu{ flex:none; display:flex; align-items:stretch; }
.mz-menu-b{
  display:flex; align-items:center; gap:.5rem;
  min-height:44px; padding:.7rem .95rem;
  cursor:pointer; list-style:none;
  border-right:1px solid var(--linea);
  font-family:var(--f-eti);
  font-size:.73rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--hueso);
  transition:color .2s;
}
.mz-menu-b::-webkit-details-marker{ display:none; }
.mz-menu-b:hover{ color:var(--rojo-viv); }
.mz-menu-ham{ display:grid; gap:4px; inline-size:18px; flex:none; }
.mz-menu-ham i{
  display:block; block-size:2px; background:currentColor; border-radius:2px;
  transition:transform .25s var(--ease-out), opacity .2s;
}
/* Las tres rayas se vuelven una X: el mismo botón abre y cierra, y se ve cuál
   de las dos cosas va a hacer. */
.mz-menu[open] .mz-menu-ham i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.mz-menu[open] .mz-menu-ham i:nth-child(2){ opacity:0; }
.mz-menu[open] .mz-menu-ham i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ .mz-menu-ham i{ transition:none; } }
/* La palabra "Menú" se queda hasta lo más chico que se puede: un hamburguesa
   pelado se entiende, pero no TAN rápido, y la barra scrollea igual. Recién
   abajo de 360 px (donde cada píxel es de alguien) queda solo el ícono. */
@media (max-width: 359px){ .mz-menu-bt{ display:none; } .mz-menu-b{ padding-right:.7rem; } }

.mz-menu-cap{
  position:fixed; inset:0; z-index:190;
  background:rgba(0,0,0,.72);
  animation:mz-fundido .2s var(--ease-out);
}
.mz-menu-panel{
  position:fixed; z-index:190;
  inset-block:0; inset-inline-start:0;
  inline-size:min(88vw, 360px);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  /* El cajón va de borde a borde de la pantalla: el notch y la barra de gestos
     entran en su cálculo o el lockup queda debajo de la muesca. */
  padding:calc(1rem + env(safe-area-inset-top, 0px)) 1rem
          calc(1.4rem + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, #0B0709, #000);
  border-inline-end:1px solid var(--linea);
  box-shadow:22px 0 60px rgba(0,0,0,.7);
  animation:mz-entra-izq .26s var(--ease-out);
}
@keyframes mz-entra-izq{ from{ transform:translateX(-100%); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){
  .mz-menu-panel, .mz-menu-cap{ animation:none; }
}

.mz-menu-cab{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding-bottom:.85rem; margin-bottom:.5rem;
  border-bottom:1px solid var(--linea);
}
/* El lockup es una unidad de marca: "ALMACENES 24 HS" partido en dos renglones
   deja de leerse como el sello y pasa a leerse como texto suelto. Si no entra,
   se achica antes que cortarse.
   El tracking de .24em es lo que lo hacía no entrar: son 23 caracteres y a esa
   separación no hay ancho de teléfono que alcance. Acá va más junto y más
   chico — sigue siendo el sello, en la medida de un cajón de 300 px. */
.mz-menu-cab .mz-lockup{
  min-width:0;
  font-size:clamp(.5rem, 1.7vw, .68rem);
  letter-spacing:.1em;
}
.mz-menu-cab .mz-lockup > b,
.mz-menu-cab .mz-lockup > span{ white-space:nowrap; padding:.55em .6em; }
.mz-menu-x{
  flex:none;
  inline-size:40px; block-size:40px;
  display:grid; place-items:center;
  background:none; border:1px solid var(--linea-2); border-radius:50%;
  color:var(--hueso-2); font-size:.95rem; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.mz-menu-x:hover{ border-color:var(--rojo); color:var(--hueso); }

/* El estado de AHORA, arriba de todo: es por lo que se abre la página de un
   almacén 24 horas. */
.mz-menu-vivo{
  display:flex; align-items:center; gap:.55rem;
  text-transform:none; white-space:normal; letter-spacing:normal;
  min-height:48px; padding:.55rem .75rem;
  margin:.35rem 0 .9rem;
  text-decoration:none;
  border:1px solid var(--linea-2); border-radius:var(--r-pill);
  font-family:var(--f-eti); font-size:.78rem; font-weight:600;
  color:var(--gris);
}
.mz-menu-vivo.on{ color:var(--verde); border-color:rgba(49,208,122,.42); }
.mz-menu-vivo i{ margin-inline-start:auto; font-style:normal; color:var(--hueso-2); }
.mz-menu .pt{ inline-size:8px; block-size:8px; border-radius:50%; background:currentColor; flex:0 0 auto; }
@media (prefers-reduced-motion: no-preference){
  .mz-menu-vivo.on .pt, .mz-menu-suc a.on .pt{ animation:mz-late 2.4s ease-out infinite; }
}

.mz-menu-h{
  margin:1.05rem 0 .35rem;
  font-family:var(--f-eti);
  font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris);
}
/* UNA superficie con hairlines adentro, no seis tarjetas flotando: es lo que
   hace que un menú de 16 destinos se lea como una lista y no como un tablero. */
.mz-menu-l{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--linea); border-radius:var(--r);
  background:rgba(20,16,19,.5);
  overflow:hidden;
}
.mz-menu-l > li + li{ border-top:1px solid var(--linea); }
.mz-menu-l a{
  display:flex; align-items:center; gap:.7rem;
  min-height:52px; padding:.6rem .8rem;
  text-decoration:none; color:var(--hueso-2);
  transition:background .2s, color .2s;
  /* Defensa: el cajón vive adentro de <nav class="mz-nav">, así que hereda lo
     que se le agregue a la barra. Estas tres son las que ya lo rompieron una
     vez (mayúsculas, nowrap y tracking de etiqueta partiendo el panel). Acá el
     texto es PROSA: se lee, se corta y va en su caja. */
  text-transform:none; white-space:normal; letter-spacing:normal;
  overflow-wrap:anywhere;
}
.mz-menu-l a:hover{ background:rgba(200,26,28,.1); color:var(--hueso); }
.mz-menu-l a > span{ display:flex; flex-direction:column; min-width:0; flex:1; }
.mz-menu-l b{
  font-family:var(--f-eti); font-size:.86rem; font-weight:600;
  color:var(--hueso); line-height:1.25;
}
.mz-menu-l em{
  font-style:normal; font-size:.74rem; color:var(--gris);
  line-height:1.3; margin-top:.1rem;
}
.mz-menu-l{ --ic:var(--ic-m); }
.mz-menu-l .mz-ic{ flex:none; color:var(--rojo-viv); }
.mz-menu-l a.pri b{ color:var(--oro); }
.mz-menu-l a.wa .mz-ic{ color:var(--wa); }
.mz-menu-suc a.on .pt{ color:var(--verde); }
.mz-menu-suc a.off .pt{ color:var(--gris); }
.mz-menu-suc a.on em{ color:var(--verde); }
.mz-menu-suc a .mz-ic{ margin-inline-start:auto; color:var(--hueso-2); }

.mz-menu-pie{
  margin:1.1rem 0 0; padding-top:.8rem;
  border-top:1px solid var(--linea);
  font-size:.72rem; line-height:1.5; color:var(--gris);
}
.mz-menu-pie b{ color:var(--hueso-2); }

.mz-progreso{ height:2px; background:transparent; }
.mz-progreso i{
  display:block; height:100%;
  width:var(--leido, 0%);
  background:linear-gradient(90deg, var(--rojo), var(--oro));
  transition:width .12s linear;
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTADA
   ══════════════════════════════════════════════════════════════════════════ */

.mz-portada{ text-align:center; padding:clamp(1.6rem,4vw,3rem) 0 clamp(2rem,4vw,3rem); }
.mz-portada-alto{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:clamp(1rem,2.4vw,1.6rem);
}
.mz-portada .mz-tit1{ margin:.9rem 0 .5rem; }
.mz-portada .mz-bajada{ margin-inline:auto; text-align:center; }
.mz-portada .mz-acciones{ justify-content:center; margin-top:1.5rem; }

/* Las tres barras de servicio del kit: 24 HS · ATENCIÓN RÁPIDA · SIEMPRE CERCA */
.mz-servicios{
  display:grid; gap:.6rem;
  margin-top:clamp(1.6rem, 3.4vw, 2.4rem);
  border:1.5px solid var(--neon-borde);
  border-radius:var(--r);
  box-shadow:var(--neon-glow);
  padding:.9rem 1rem;
  background:rgba(0,0,0,.55);
}
@media (min-width: 700px){ .mz-servicios{ grid-template-columns:repeat(3,1fr); gap:0; } }
.mz-servicio{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.35rem .6rem;
  text-align:left;
}
@media (min-width: 700px){ .mz-servicio + .mz-servicio{ border-left:1px solid var(--linea-2); } }
.mz-servicio .ic{ font-size:1.3rem; flex:none; }
.mz-servicio b{
  display:block;
  font-family:var(--f-eti);
  font-size:.76rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--hueso-2);
  line-height:1.2;
}
.mz-servicio span{
  display:block;
  font-family:var(--f-tit);
  font-size:.98rem;
  text-transform:uppercase;
  color:var(--rojo-viv);
  line-height:1.1;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRECIOS Y PRODUCTOS
   ══════════════════════════════════════════════════════════════════════════ */

/* Columnas FIJAS por breakpoint y no auto-fill: con auto-fill el último producto
   quedaba solo en una fila nueva según el ancho, y una card huérfana al lado de
   un hueco enorme se ve como un error de maquetado. Con 2/3/4 los 8 productos
   siempre cierran filas parejas. */
.mz-prods{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(.6rem, 1.4vw, 1rem);
}
@media (min-width: 620px){ .mz-prods{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width: 960px){ .mz-prods{ grid-template-columns:repeat(4, 1fr); } }
.mz-prod{
  display:flex; flex-direction:column;
  border:1px solid var(--linea);
  border-radius:var(--r);
  overflow:hidden;
  background:rgba(20,16,19,.7);
  text-decoration:none;
  transition:border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.mz-prod:hover{ border-color:var(--neon-borde); transform:translateY(-3px); box-shadow:var(--neon-glow); }
/* Era background:#fff. Si la foto no carga queda un rectángulo BLANCO sólido
   sobre la página negra — más ruidoso que no tener foto. El packshot ya trae su
   propio fondo claro, así que el tile puede ser oscuro. */
.mz-prod-foto{ aspect-ratio:1/1; background:var(--negro-3); overflow:hidden; }
.mz-prod-foto img.rota, .mz-colgado .foto img.rota, .mz-dupla .foto img.rota{ display:none; }
.mz-prod-foto img{ width:100%; height:100%; object-fit:contain; transition:transform .6s var(--ease-out); }
.mz-prod:hover .mz-prod-foto img{ transform:scale(1.06); }
.mz-prod-cuerpo{ padding:.6rem .7rem .75rem; display:flex; flex-direction:column; gap:.2rem; flex:1; }
.mz-prod-nom{ font-size:.82rem; line-height:1.3; color:var(--hueso); }
.mz-prod-pop{
  font-family:var(--f-eti);
  font-size:.66rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--oro);
}
.mz-prod-precio{
  margin-top:auto; padding-top:.3rem;
  font-family:var(--f-tit);
  font-size:1.18rem;
  color:var(--hueso);
}

/* Combos / ofertas */
.mz-combo{
  display:flex; flex-direction:column; gap:.3rem;
  padding:clamp(.85rem,1.9vw,1.15rem);
  border:1.5px solid var(--neon-borde);
  border-radius:var(--r);
  box-shadow:var(--neon-glow);
  background:linear-gradient(180deg, rgba(20,16,19,.9), rgba(0,0,0,.9));
  text-decoration:none;
  transition:box-shadow .3s, transform .3s var(--ease);
}
.mz-combo:hover{ box-shadow:var(--neon-glow-fuerte); transform:translateY(-3px); }
.mz-combo .ic{ font-size:1.5rem; }
.mz-combo b{ font-size:.92rem; line-height:1.3; color:var(--hueso); font-weight:600; }
.mz-combo .items{ font-size:.78rem; color:var(--gris); line-height:1.4; }
.mz-combo .plata{
  margin-top:auto; padding-top:.45rem;
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  font-family:var(--f-tit);
  font-size:1.6rem;
  color:var(--hueso);
}
.mz-combo .plata s{ font-family:var(--f-txt); font-size:.8rem; color:var(--gris); font-weight:400; }
.mz-combo .ahorro{
  font-family:var(--f-eti); font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--oro);
}

/* Categorías con su conteo real */
.mz-cats{ display:flex; flex-wrap:wrap; gap:.5rem; }
/* 44 px es el mínimo de área táctil. Los chips medían 38,1 y son de lo más
   tocado de la página. `transition:all` además animaba el ancho del outline de
   foco desde 0, así que el chip tardaba 280 ms en mostrar que estaba enfocado:
   la lista de propiedades ahora es explícita. */
.mz-cat{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px;
  padding:.45rem .95rem;
  border:1px solid var(--linea-2);
  border-radius:var(--r-pill);
  text-decoration:none;
  font-size:.85rem;
  color:var(--hueso-2);
  transition:border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.mz-cat:hover{ border-color:var(--rojo); color:var(--hueso); box-shadow:0 0 14px rgba(200,26,28,.28); }
.mz-cat .n{ font-family:var(--f-eti); font-weight:700; color:var(--rojo-viv); font-size:.8rem; }

/* ══════════════════════════════════════════════════════════════════════════
   LOCALES
   ══════════════════════════════════════════════════════════════════════════ */

.mz-locales{ display:grid; gap:clamp(.8rem,2vw,1.2rem); }
@media (min-width: 760px){ .mz-locales{ grid-template-columns:1fr 1fr; } }
.mz-local{
  display:grid;
  grid-template-columns:clamp(84px,20vw,120px) 1fr;
  gap:clamp(.8rem,1.8vw,1.1rem);
  padding:clamp(.8rem,1.8vw,1.1rem);
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:rgba(20,16,19,.6);
  transition:border-color .25s, box-shadow .25s;
}
.mz-local:hover{ border-color:var(--neon-borde); box-shadow:var(--neon-glow); }
.mz-local-foto{ position:relative; overflow:hidden; border-radius:calc(var(--r) - 6px); background:var(--negro-3); align-self:start; }
.mz-local-foto img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; object-position:var(--enc,50% 50%); transition:transform .6s var(--ease-out); }
.mz-local:hover .mz-local-foto img{ transform:scale(1.06); }

/* JERARQUÍA INVERTIDA. Lo que se lee primero es el estado de AHORA, no la chapa
   "24 HS" —que era igual en las cuatro fichas y por lo tanto no ayudaba a elegir
   ninguna— ni el horario de la semana entera. El texto va en columna para que el
   orden visual sea el mismo que el orden del DOM. */
.mz-local-txt{ display:flex; flex-direction:column; min-width:0; }
.mz-local-est{
  order:-1;
  margin:0 0 .3rem;
  display:flex; align-items:center; gap:.4em;
  font-family:var(--f-eti);
  font-size:.8rem; font-weight:600;
  letter-spacing:.03em;
  line-height:1.25;
  color:var(--gris);
}
.mz-local.on .mz-local-est{ color:var(--verde); }
.mz-local-est .pt{
  inline-size:8px; block-size:8px; border-radius:50%;
  background:currentColor; flex:0 0 auto;
}
/* El punto late SOLO cuando está abierto: un indicador que se mueve igual en los
   dos estados no informa nada. Y sólo si el visitante no pidió menos movimiento. */
@media (prefers-reduced-motion: no-preference){
  .mz-local.on .mz-local-est .pt{ animation:mz-late 2.4s ease-out infinite; }
}
/* Color solo nunca alcanza (misma regla que la app): el estado se entiende
   leyendo la frase —"Abierto · cierra a las 24:00"— sin depender del verde. */
.mz-local h3{
  font-family:var(--f-tit);
  font-size:clamp(1rem,2vw,1.28rem);
  text-transform:uppercase;
  margin:0 0 .18rem; line-height:1;
  color:var(--hueso);
}
.mz-local-dir{ margin:0; font-size:.84rem; color:var(--hueso-2); }
.mz-local-acc{ margin-top:.6rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.mz-local-acc a{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-height:44px;
  font-family:var(--f-eti);
  font-size:.72rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none;
  padding:.3rem .8rem;
  border:1px solid var(--linea-2);
  border-radius:var(--r-pill);
  color:var(--hueso-2);
  transition:all .2s;
}
/* "Cómo llegar" es la primaria: al almacén se entra caminando, y el que mira
   esta ficha a las 3 AM quiere la vereda, no un chat. */
.mz-local-acc a.pri{ background:var(--rojo); border-color:var(--rojo); color:#fff; }
.mz-local-acc a.pri:hover{ background:var(--rojo-viv); border-color:var(--rojo-viv); }
.mz-local-acc a:hover{ border-color:var(--rojo); color:var(--hueso); }
.mz-local-acc a.wa:hover{ border-color:var(--wa); color:var(--wa); }

/* EL HORARIO DE LA SEMANA, PLEGADO. Es dato de consulta: quien mira a las 3 AM
   decide con el renglón de arriba. <details> nativo — sin JS, con teclado, y el
   navegador lo abre solo cuando el usuario busca texto adentro. */
.mz-semana{ margin-top:.55rem; }
.mz-semana > summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:.35em;
  min-height:32px;
  font-family:var(--f-eti);
  font-size:.68rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--gris);
  transition:color .2s;
}
.mz-semana > summary::-webkit-details-marker{ display:none; }
.mz-semana > summary::after{
  content:""; inline-size:6px; block-size:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s;
}
.mz-semana[open] > summary::after{ transform:translateY(1px) rotate(-135deg); }
.mz-semana > summary:hover{ color:var(--hueso-2); }
.mz-semana table{ border-collapse:collapse; margin-top:.4rem; inline-size:100%; max-inline-size:22rem; }
.mz-semana th, .mz-semana td{
  padding:.22rem .1rem;
  font-size:.78rem; font-weight:400;
  text-align:left; color:var(--hueso-2);
  border-bottom:1px solid var(--linea);
}
.mz-semana td{ text-align:right; font-variant-numeric:tabular-nums; }
.mz-semana tr.hoy th, .mz-semana tr.hoy td{ color:var(--oro); font-weight:600; }
.mz-semana tr:last-child th, .mz-semana tr:last-child td{ border-bottom:0; }

/* ══════════════════════════════════════════════════════════════════════════
   FOTOS
   ══════════════════════════════════════════════════════════════════════════ */

.mz-fotos{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(130px, 21vw, 210px), 1fr));
  gap:clamp(.5rem, 1.2vw, .9rem);
}
.mz-fotos > *{ display:flex; flex-direction:column; }
.mz-foto{
  position:relative;
  display:block; width:100%; padding:0; margin:0;
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:var(--negro-3);
  overflow:hidden;
  cursor:zoom-in;
  text-align:left; font:inherit; color:inherit;
  transition:border-color .25s, transform .3s var(--ease-out), box-shadow .3s;
}
.mz-foto img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform .7s var(--ease-out), filter .4s;
  filter:saturate(.9) contrast(1.04);
}
.mz-foto:hover{ border-color:var(--neon-borde); transform:translateY(-3px); box-shadow:var(--neon-glow); z-index:2; }
.mz-foto:hover img{ transform:scale(1.06); filter:saturate(1.05); }
.mz-foto .num{
  position:absolute; top:0; left:0; z-index:2;
  font-family:var(--f-tit); font-size:.64rem;
  color:#fff; background:var(--rojo);
  padding:.16em .45em .1em;
}

/* ══════════════════════════════════════════════════════════════════════════
   VISOR
   ══════════════════════════════════════════════════════════════════════════ */

.mz-visor{
  position:fixed; inset:0; z-index:200;
  display:none; place-items:center;
  /* Reset del <dialog>: el agente de usuario le pone borde, padding, fondo
     claro y un max-width chico. Sin esto sale una cajita en el medio. */
  width:100%; height:100%; max-width:100%; max-height:100%;
  border:none;
  padding:clamp(.8rem,3vw,2.2rem);
  background:rgba(0,0,0,.97);
  color:var(--hueso);
}
.mz-visor[open], .mz-visor.abierto{ display:grid; }
.mz-visor::backdrop{ background:rgba(0,0,0,.94); }
.mz-visor img{
  max-width:100%; max-height:80svh; width:auto;
  border-radius:var(--r);
  box-shadow:0 0 60px rgba(200,26,28,.28);
  animation:mz-zoom .28s var(--ease-out);
}
@keyframes mz-zoom{ from{ opacity:0; transform:scale(.95); } to{ opacity:1; transform:none; } }
.mz-visor figcaption{
  display:block; margin-top:.9rem; text-align:center;
  font-family:var(--f-eti); font-size:.84rem; color:var(--hueso-2); max-width:60ch;
}
.mz-visor-x, .mz-visor-nav{
  position:absolute;
  width:46px; height:46px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.7);
  border:1.5px solid var(--neon-borde);
  color:var(--hueso);
  border-radius:50%;
  font-size:1.35rem; line-height:1;
  cursor:pointer;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.mz-visor-x:hover, .mz-visor-nav:hover{ background:var(--rojo); border-color:var(--rojo); box-shadow:0 0 20px rgba(200,26,28,.5); }
.mz-visor-x{ top:1rem; right:1rem; }
.mz-visor-nav.ant{ left:1rem; top:50%; margin-top:-23px; }
.mz-visor-nav.sig{ right:1rem; top:50%; margin-top:-23px; }
/* En celular quedaban los dos juntos abajo, en el centro, tapando la foto y
   con el pulgar cubriendo justo lo que se quiere mirar. Van a los costados, a
   media altura, que es donde la mano los espera. */
@media (max-width: 640px){
  .mz-visor-nav{ top:50%; bottom:auto; margin-top:0; transform:translateY(-50%);
                 width:48px; height:48px; background:rgba(0,0,0,.78); }
  .mz-visor-nav.ant{ left:8px; right:auto; }
  .mz-visor-nav.sig{ right:8px; left:auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTAS
   ⚠️ NO usar display:grid en un <li> que mezcla <b> con texto suelto: genera
   TRES ítems de grilla (::before, <b> y el texto anónimo), el texto cae en la
   columna angosta y sale UNA PALABRA POR RENGLÓN. Pasó en producción.
   ══════════════════════════════════════════════════════════════════════════ */

.mz-lista{ list-style:none; margin:1.1rem 0 0; padding:0; }
.mz-lista li{
  position:relative;
  padding:0 0 .7rem 1.5rem;
  margin:0 0 .7rem;
  border-bottom:1px solid var(--linea);
  font-size:.93rem; line-height:1.58;
  color:var(--hueso-2);
}
.mz-lista li:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.mz-lista li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:7px; height:7px; background:var(--rojo);
  transform:rotate(45deg);
  box-shadow:0 0 8px rgba(200,26,28,.7);
}
.mz-lista li b{ color:var(--hueso); font-weight:650; }

/* Letra chica honesta: lo que hay que decir aunque no venda. */
.mz-letrachica{
  display:flex; gap:.6rem; align-items:flex-start;
  margin-top:1.2rem; padding:.8rem 1rem;
  border:1px solid var(--linea-2);
  border-radius:var(--r);
  font-size:.82rem; line-height:1.55;
  color:var(--gris);
}
.mz-letrachica b{ color:var(--hueso-2); }
.mz-letrachica .ic{ flex:none; color:var(--oro); }

/* ══════════════════════════════════════════════════════════════════════════
   PREGUNTAS
   ══════════════════════════════════════════════════════════════════════════ */

.mz-qa{ border-top:1px solid var(--linea); }
.mz-qa details{ border-bottom:1px solid var(--linea); }
.mz-qa summary{
  list-style:none; cursor:pointer;
  padding:.95rem 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:var(--f-tit);
  font-size:clamp(.98rem,1.8vw,1.16rem);
  text-transform:uppercase; line-height:1.14;
  color:var(--hueso);
  transition:color .2s;
}
.mz-qa summary::-webkit-details-marker{ display:none; }
.mz-qa summary:hover{ color:var(--rojo-viv); }
.mz-qa summary .ch{ flex:none; color:var(--rojo); font-size:1.3rem; line-height:1; transition:transform .28s var(--ease); }
.mz-qa details[open] summary .ch{ transform:rotate(45deg); }
.mz-qa details p{ margin:0; padding:0 0 1.05rem; font-size:.92rem; line-height:1.65; color:var(--hueso-2); max-width:72ch; }

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIOS
   ══════════════════════════════════════════════════════════════════════════ */

.mz-form{ display:grid; gap:.85rem; }
.mz-f2{ display:grid; gap:.85rem; }
@media (min-width: 560px){ .mz-f2{ grid-template-columns:1fr 1fr; } }
.mz-f3{ display:grid; gap:.85rem; }
@media (min-width: 760px){ .mz-f3{ grid-template-columns:repeat(3,1fr); } }

.mz-campo{ display:grid; gap:.26rem; }
.mz-campo > span, .mz-lbl{
  font-family:var(--f-eti);
  font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris);
}
.mz-campo input, .mz-campo select, .mz-campo textarea{
  width:100%;
  /* 16px exactos: menos que eso y iOS hace zoom al enfocar. */
  font-size:16px;
  font-family:var(--f-txt);
  color:var(--hueso);
  background:rgba(237,234,231,.05);
  border:1px solid var(--linea-2);
  border-radius:10px;
  padding:.7rem .85rem;
  min-height:46px;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.mz-campo textarea{ min-height:104px; resize:vertical; line-height:1.55; }
.mz-campo input::placeholder, .mz-campo textarea::placeholder{ color:var(--gris); }
.mz-campo input:focus, .mz-campo select:focus, .mz-campo textarea:focus{
  outline:none;
  border-color:var(--rojo-viv);
  background:rgba(237,234,231,.08);
  /* Doble anillo: negro primero y rojo vivo después, así se ve sobre el fondo
     del campo Y sobre el de la página. El de antes era rojo al 20%: 1,4:1. */
  box-shadow:0 0 0 2px var(--negro), 0 0 0 4px var(--rojo-viv);
}
.mz-campo select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:2.2rem;
}
.mz-campo select option{ background:var(--negro-3); color:var(--hueso); }

.mz-ayuda{ font-size:.78rem; color:var(--gris); margin:.1rem 0 0; line-height:1.5; }
.mz-req{ color:var(--rojo-viv); }

/* accent-color pinta el relleno pero deja el widget del sistema: un cuadrado
   blanco de 20 px sobre una página negra, y por debajo del área táctil mínima.
   Se dibuja entero, con el tilde en clip-path. */
.mz-check{
  display:flex; align-items:center; gap:.6rem; min-height:44px;
  font-size:.85rem; line-height:1.5; color:var(--hueso-2); cursor:pointer;
}
.mz-check input{
  appearance:none; -webkit-appearance:none;
  flex:none; width:24px; height:24px; margin:0;
  border:1.5px solid var(--linea-2); border-radius:6px;
  background:var(--negro-3); cursor:pointer;
  display:grid; place-content:center;
}
.mz-check input::before{
  content:''; width:13px; height:13px; transform:scale(0);
  transition:transform .12s var(--ease-out);
  background:var(--rojo-viv);
  clip-path:polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 2%, 38% 68%);
}
.mz-check input:checked{ border-color:var(--rojo-viv); background:rgba(200,26,28,.12); }
.mz-check input:checked::before{ transform:scale(1); }
.mz-check input:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }

.mz-pastillas{ display:flex; flex-wrap:wrap; gap:.45rem; }
.mz-pastilla{ position:relative; }
.mz-pastilla input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.mz-pastilla span{
  display:block;
  padding:.48rem .9rem;
  border:1px solid var(--linea-2);
  border-radius:var(--r-pill);
  font-family:var(--f-eti);
  font-size:.82rem; font-weight:600;
  color:var(--hueso-2);
  user-select:none;
  transition:all .18s var(--ease);
}
.mz-pastilla input:checked + span{ background:var(--rojo); border-color:var(--rojo); color:#fff; box-shadow:0 0 16px rgba(200,26,28,.4); }
.mz-pastilla input:focus-visible + span{ outline:2px solid var(--rojo-viv); outline-offset:2px; }
.mz-pastilla:hover span{ border-color:var(--hueso-2); }

.mz-archivo{
  position:relative;
  display:grid; gap:.3rem; place-items:center; text-align:center;
  padding:1.3rem 1rem;
  border:1.5px dashed var(--linea-2);
  border-radius:var(--r);
  background:rgba(237,234,231,.03);
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.mz-archivo:hover{ border-color:var(--rojo); background:rgba(200,26,28,.06); }
.mz-archivo input[type=file]{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.mz-archivo .ic{ font-size:1.5rem; }
.mz-archivo b{ font-family:var(--f-tit); font-size:.96rem; text-transform:uppercase; color:var(--hueso); }
.mz-archivo small{ font-size:.75rem; color:var(--gris); }
.mz-archivo.tiene{ border-color:var(--verde); border-style:solid; background:rgba(49,208,122,.07); }

.mz-msg{ margin:0; font-size:.88rem; min-height:1.2em; color:var(--hueso-2); }
.mz-msg.ok{ color:var(--verde); font-weight:600; }
.mz-msg.err{ color:var(--rojo-viv); font-weight:600; }

.mz-aviso{
  display:flex; gap:.6rem; align-items:flex-start;
  padding:.8rem 1rem;
  border:1px solid; border-radius:var(--r);
  font-size:.88rem; line-height:1.5;
  margin:0 0 1.2rem;
}
.mz-aviso.err{ border-color:var(--rojo); background:rgba(200,26,28,.12); color:#FFB3AE; }
.mz-aviso.ok{ border-color:var(--verde); background:rgba(49,208,122,.1); color:#8CEDB6; }

/* Pasos del formulario de proveedores. Se ven TODOS por defecto: el paso a paso
   lo agrega el JS con .pasos-js. */
.mz-paso{
  border:none; border-top:1px solid var(--linea);
  margin:0; padding:clamp(1.4rem,3vw,2.1rem) 0;
  display:grid; gap:.85rem;
}
.mz-paso:first-of-type{ border-top:none; padding-top:0; }
.mz-paso-tit{
  font-family:var(--f-tit);
  font-size:clamp(1.25rem,2.7vw,1.8rem);
  text-transform:uppercase; line-height:1;
  padding:0; margin:0 0 .3rem;
  display:flex; align-items:baseline; gap:.6rem;
  color:var(--hueso);
}
.mz-paso-tit .n{ font-size:.72em; color:var(--rojo); }
.mz-form.pasos-js .mz-paso{ display:none; border-top:none; padding-top:0; }
.mz-form.pasos-js .mz-paso.activo{ display:grid; animation:mz-paso-entra .32s var(--ease-out); }
@keyframes mz-paso-entra{ from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .mz-form.pasos-js .mz-paso.activo{ animation:none; } }

.mz-pasos-barra{ display:flex; gap:.3rem; margin:0 0 1.3rem; list-style:none; padding:0; }
.mz-pasos-barra li{ height:3px; flex:1; background:var(--linea); transition:background .3s; }
.mz-pasos-barra li.hecho{ background:var(--sangre); }
.mz-pasos-barra li.on{ background:var(--rojo); box-shadow:0 0 10px rgba(200,26,28,.7); }

.mz-nav-pasos{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin-top:1.3rem; padding-top:1.1rem;
  border-top:1px solid var(--linea);
}
.mz-nav-pasos .cuenta{
  flex:1; text-align:center;
  font-family:var(--f-eti);
  font-size:.7rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--gris);
}
.mz-nav-pasos .mz-btn{ padding:.6rem 1rem; font-size:.86rem; }
.mz-nav-pasos .mz-btn[hidden]{ display:none; }

/* ══════════════════════════════════════════════════════════════════════════
   PIE
   ══════════════════════════════════════════════════════════════════════════ */

.mz-pie{ border-top:1px solid var(--linea); padding:clamp(2.2rem,4.5vw,3.4rem) 0 clamp(1.8rem,3.5vw,2.6rem); }
.mz-pie-caja{ width:var(--caja); margin-inline:auto; display:grid; gap:1.1rem; justify-items:center; text-align:center; }
.mz-pie-toro{ width:52px; height:auto; }
.mz-pie-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.2rem; margin:0; }
.mz-pie-links a{
  font-family:var(--f-eti); font-size:.8rem; font-weight:600; letter-spacing:.06em;
  text-decoration:none; color:var(--hueso-2); transition:color .2s;
}
.mz-pie-links a:hover{ color:var(--rojo-viv); }
.mz-pie-legal{ margin:0; font-size:.74rem; color:var(--gris); line-height:1.7; }
.mz-pie-legal a{ color:var(--hueso-2); }

/* ══════════════════════════════════════════════════════════════════════════
   ENTRADA AL SCROLL
   FAIL-SAFE: el estado oculto SOLO existe bajo `body.mz-ro`, y esa clase la
   pone el JS. Si el JS no corre, no hay nada invisible.
   ══════════════════════════════════════════════════════════════════════════ */

body.mz-ro .mz-anim{ opacity:0; transform:translateY(16px); }
body.mz-ro .mz-anim.visto{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  body.mz-ro .mz-anim, body.mz-ro .mz-anim.visto{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* La foto arranca VISIBLE: si arrancara en opacity:0 y el JS no llegara a
   marcarla, quedaría invisible para siempre. `.cargada` solo agrega el fundido. */
.mz-lazy{ background-size:cover; background-position:center; }
.mz-lazy img.cargada{ animation:mz-fundido .45s var(--ease) backwards; }
@keyframes mz-fundido{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .mz-lazy img.cargada{ animation:none; } }

/* ══════════════════════════════════════════════════════════════════════════
   UTILIDADES
   ══════════════════════════════════════════════════════════════════════════ */

.mz-solo-lector{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.mz-saltar{
  position:absolute; left:-9999px; z-index:300;
  background:var(--oro); color:#1a1200;
  padding:.65rem 1rem; font-weight:600; text-decoration:none;
}
.mz-saltar:focus{ left:0; top:0; }
hr.mz-filete{ border:none; border-top:1px solid var(--linea); margin:clamp(1.6rem,3vw,2.4rem) 0; }

/* ══════════════════════════════════════════════════════════════════════════
   EL RECORRIDO · las fotos dejan de ser una galería al final
   ══════════════════════════════════════════════════════════════════════════
   Hasta acá las 16 fotos reales vivían en UN solo lugar: una grilla de
   miniaturas al final de la placa de locales. Ahora cada placa es una PARADA
   del local (la vidriera, la fiambrería, la cocina, el salón frío, la barra) y
   de la foto de esa parada cuelgan los productos de esa parada.

   Nada de esto necesita JavaScript: las fotos, los productos colgados, el
   velo, el reflejo y los epígrafes son CSS puro. Si el JS no corre se ve todo
   igual, quieto. Es la misma regla de oro del resto del sistema.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LA VIDRIERA · foto + percha de productos ─────────────────────────────
   En celular la foto va ARRIBA y los productos ABAJO: nada encima de nada, que
   es donde el texto sobre foto siempre termina mal. Recién en escritorio la
   foto cruza a lo ancho y la percha se apoya sobre su tercio — ahí aparece el
   efecto vidriera. El lado alterna placa por placa para que el recorrido
   zigzaguee en vez de repetirse. */
.mz-vidriera{ display:grid; gap:clamp(.9rem,2vw,1.3rem); }

.mz-vidriera-foto{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--negro-3);
  box-shadow:var(--sh);
}
.mz-vidriera-foto > img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--enc, 50% 50%);
}
.mz-vidriera-foto.apaisada{ aspect-ratio:16/9; }

/* El "vidrio": un reflejo diagonal FIJO, sin animación. Es lo que convierte
   una foto pegada en un objeto detrás de un cristal. */
.mz-vidriera-foto::before{
  content:'';
  position:absolute; inset:-20%;
  background:linear-gradient(105deg, transparent 42%, rgba(237,234,231,.07) 47%, transparent 53%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
}
/* Velo DIRECCIONAL, no un oscurecido global: la foto tiene que seguir siendo
   una foto. Solo se oscurece el lado donde se apoya la percha. */
.mz-vidriera-foto::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(0deg, rgba(0,0,0,.82), transparent 44%);
}
/* ⚠️ El hijo directo de la grilla es el <figure>, NO la foto: la foto vive
   adentro junto con su <figcaption>. Apuntarle a `> .mz-vidriera-foto` no
   matchea nada y la banda nunca cruza — la foto se queda en media columna y el
   efecto vidriera no aparece. */
@media (min-width: 900px){
  .mz-vidriera{ grid-template-columns:minmax(0,1fr) minmax(300px,.72fr); align-items:center; }
  .mz-vidriera > figure{ grid-column:1 / -1; grid-row:1; }
  .mz-vidriera > figure .mz-vidriera-foto{ aspect-ratio:2.45/1; }
  .mz-vidriera > .mz-percha{
    grid-column:2; grid-row:1; z-index:2;
    max-width:min(420px, 100%); justify-self:end;
    padding-right:clamp(1rem,2.4vw,2rem);
  }
  .mz-vidriera.izq > .mz-percha{
    grid-column:1; justify-self:start;
    padding-right:0; padding-left:clamp(1rem,2.4vw,2rem);
  }
  .mz-vidriera > figure .mz-vidriera-foto::after{
    background:linear-gradient(90deg, transparent 26%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.93) 100%);
  }
  .mz-vidriera.izq > figure .mz-vidriera-foto::after{ transform:scaleX(-1); }
  /* El epígrafe se alinea del lado libre, no debajo de la percha. */
  .mz-vidriera > figure .mz-epi{ padding-right:38%; }
  .mz-vidriera.izq > figure .mz-epi{ padding-right:0; padding-left:38%; }
}

/* Las paredes de los locales son naranja fuerte y esas tomas vienen muy
   saturadas; al lado del salón frío (la única fría del set) se peleaban. Se
   baja apenas y se les tira el humo rojo del kit por arriba. A las fachadas
   NUNCA: son el documento de que la marca existe en la calle. */
.mz-vidriera-foto.calida > img{ filter:contrast(1.06) saturate(.94); }
.mz-vidriera-foto.calida > .tinte{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 20% 10%, rgba(140,2,9,.22), transparent 70%);
  mix-blend-mode:multiply;
}

/* ── EL EPÍGRAFE · cuesta cero bytes y es lo que documenta la foto ────────
   El alt del manifest ya existe y hasta ahora solo lo leían los lectores de
   pantalla. Puesto abajo de la foto, con el lugar en Oswald, una toma de
   celular deja de leerse como descuido y pasa a leerse como registro. */
.mz-epi{
  display:flex; gap:.55rem; align-items:baseline;
  margin:.6rem 0 0;
  font-size:.78rem; line-height:1.4;
}
.mz-epi::before{
  content:''; flex:0 0 auto;
  width:8px; height:8px;
  background:var(--rojo-viv);
  transform:translateY(-1px);
}
.mz-epi b{
  font-family:var(--f-eti); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--hueso-2);
}
.mz-epi span{ color:var(--gris); }

/* ── LOS PRODUCTOS COLGADOS ───────────────────────────────────────────────
   Como cuelgan las etiquetas de precio de una vidriera de verdad: de un hilo.
   El hilo y el gancho son CSS, no imágenes. La inclinación alterna para que no
   parezcan una lista. */
.mz-percha{ display:grid; gap:.75rem; align-content:center; }
.mz-percha-tit{
  font-family:var(--f-eti); font-weight:700;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--oro); margin:0 0 .2rem;
}

.mz-colgado{
  position:relative;
  display:flex; align-items:center; gap:.7rem;
  margin-top:26px;
  padding:.6rem .85rem .6rem .6rem;
  background:rgba(11,7,9,.9);
  border:1px solid var(--neon-borde);
  border-radius:var(--r);
  box-shadow:var(--neon-glow);
  text-decoration:none; color:inherit;
  transform:rotate(-.7deg); transform-origin:top center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.mz-colgado:nth-child(even){ transform:rotate(.6deg); }
.mz-colgado::before{
  content:''; position:absolute; top:-24px; left:28px;
  width:1px; height:24px;
  background:linear-gradient(var(--oro), rgba(237,174,1,.15));
}
.mz-colgado::after{
  content:''; position:absolute; top:-27px; left:25px;
  width:7px; height:7px;
  border:1.5px solid var(--oro); border-radius:999px;
}
@media (prefers-reduced-motion: no-preference){
  .mz-colgado{ transition:transform .35s var(--ease), box-shadow .3s; }
  .mz-colgado:hover, .mz-colgado:focus-within{ transform:rotate(0) translateY(-2px); box-shadow:var(--neon-glow-fuerte); }
}

/* El packshot va sobre un tile HUESO: las fotos de producto vienen con fondo
   blanco y sobre el negro quedaban como un agujero recortado. */
.mz-colgado .foto{
  flex:none; width:54px; height:54px;
  display:grid; place-items:center;
  background:var(--hueso); border-radius:calc(var(--r) - 6px);
  overflow:hidden;
}
/* Un producto sin packshot no puede dejar un cuadrado BLANCO vacío colgando
   sobre el negro: se apaga el tile y queda un hueco discreto. */
.mz-colgado .foto:empty, .mz-dupla .foto:empty{
  background:var(--negro-3);
  box-shadow:inset 0 0 0 1px var(--linea);
}
.mz-colgado .foto img{ width:100%; height:100%; object-fit:contain; }
.mz-colgado .cuerpo{ min-width:0; display:grid; gap:.1rem; }
.mz-colgado .nom{
  font-size:.86rem; line-height:1.25; color:var(--hueso);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mz-colgado .precio{
  font-family:var(--f-tit); font-size:1.12rem; line-height:1;
  color:var(--hueso); letter-spacing:.01em;
}
/* La unidad de un pesable ("/kg"): más chica que el número pero legible. Un solo
   selector para los dos lugares donde sale un precio de producto. */
.mz-x-un{ font-style:normal; font-size:.62em; font-weight:400; color:var(--hueso-2); }
.mz-colgado .socio{ font-size:.72rem; color:var(--oro); }

/* ── EL MOSAICO · la placa donde las fotos SE MIRAN ───────────────────────
   Tres fotos, tres ratios reales, tres tamaños distintos. Sin velo de lectura
   encima: acá no se lee nada sobre la foto, se mira. */
.mz-mosaico{ display:grid; gap:.7rem; grid-template-columns:1fr 1fr; }
.mz-mosaico .m{
  position:relative; overflow:hidden;
  border-radius:var(--r); background:var(--negro-3);
  box-shadow:var(--sh);
}
.mz-mosaico .m img{ width:100%; height:100%; object-fit:cover; object-position:var(--enc,50% 50%); display:block; }
.mz-mosaico .m::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.55);
}
.mz-mosaico .grande{ grid-column:1; grid-row:1 / span 2; aspect-ratio:3/4; }
.mz-mosaico .m2{ grid-column:2; aspect-ratio:16/9; }
.mz-mosaico .m3{ grid-column:2; aspect-ratio:4/3; }
@media (max-width: 560px){
  .mz-mosaico{ grid-template-columns:1fr; }
  .mz-mosaico .grande{ grid-column:1; grid-row:auto; aspect-ratio:4/5; }
  .mz-mosaico .m2, .mz-mosaico .m3{ grid-column:1; aspect-ratio:16/9; }
}

/* ── LAS DUPLAS · lo que el barrio se lleva junto (campo Fbt del DTO) ──────
   Dato real de co-ocurrencia, agregado y anónimo. El "+" en Anton hace de
   ícono: un número o un signo de la marca comunica más que un pictograma. */
.mz-duplas{ display:grid; gap:.7rem; }
.mz-dupla{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem;
  padding:.7rem .8rem;
  border:1px solid var(--linea); border-radius:var(--r);
  background:var(--negro-2);
  text-decoration:none; color:inherit;
}
.mz-dupla:hover{ border-color:var(--neon-borde); box-shadow:var(--neon-glow); }
.mz-dupla .lado{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.mz-dupla .lado:last-of-type{ flex-direction:row-reverse; text-align:right; }
.mz-dupla .foto{
  flex:none; width:44px; height:44px;
  display:grid; place-items:center; overflow:hidden;
  background:var(--hueso); border-radius:8px;
}
.mz-dupla .foto img{ width:100%; height:100%; object-fit:contain; }
.mz-dupla .nom{
  font-size:.82rem; line-height:1.2; color:var(--hueso-2); min-width:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mz-dupla .mas{
  font-family:var(--f-tit); font-size:1.4rem; line-height:1;
  color:var(--rojo-viv);
}

/* ── LA HOJA DE CONTACTOS · el cierre fotográfico ─────────────────────────
   Contact sheet de fotógrafo en vez de galería suelta: el gap de 1px DIBUJA la
   retícula y cada toma lleva su número. Es el marco que le da lugar honesto
   incluso a las tomas más flojas — en una hoja de contactos conviven. */
/* 16 fotos en 3 o 5 columnas dejan la última fila incompleta, y como la
   retícula la dibuja el `gap` sobre un fondo gris, el hueco queda como una losa
   gris vacía. 2 y 4 dividen 16 exacto. */
.mz-hoja{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:1px; background:var(--linea);
  border:1px solid var(--linea); border-radius:var(--r); overflow:hidden;
}
@media (min-width: 760px){ .mz-hoja{ grid-template-columns:repeat(4, 1fr); } }
.mz-hoja button{
  position:relative; display:block; padding:0;
  border:none; background:var(--negro-2); cursor:zoom-in;
  aspect-ratio:1/1; overflow:hidden;
}
.mz-hoja img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--enc,50% 50%);
  filter:saturate(.92);
  transition:transform .5s var(--ease-out), filter .3s;
}
.mz-hoja button:hover img, .mz-hoja button:focus-visible img{ transform:scale(1.06); filter:saturate(1.05); }
.mz-hoja .num{
  position:absolute; left:0; bottom:0; z-index:2;
  font-family:var(--f-eti); font-weight:700; font-size:.62rem; letter-spacing:.1em;
  color:var(--hueso); background:rgba(0,0,0,.72);
  padding:.16em .5em;
}

/* ── EL MARCO · la foto de tapa, colgada como un cuadro ───────────────────
   No es un hero: es un OBJETO adentro de la placa. No ocupa la pantalla, no
   tiene el titular encima y no tiene botón arriba. */
.mz-marco{
  position:relative;
  width:min(420px, 78vw);
  margin-inline:auto;
  padding:10px;
  background:var(--negro);
  border:2px solid var(--oro);
  border-radius:4px;
  box-shadow:var(--sh), 0 0 30px rgba(237,174,1,.14);
  transform:rotate(-1.2deg);
}
.mz-marco img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover; object-position:var(--enc,50% 34%);
}
@media (prefers-reduced-motion: no-preference){
  .mz-marco{ transition:transform .5s var(--ease-out); }
  .mz-marco:hover{ transform:rotate(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL HERO · la puerta
   ══════════════════════════════════════════════════════════════════════════
   Pedido explícito del dueño: "que el hero inicial cuando entras sea con foto
   bien HD súper impactante, sensación premium best in class". Antes acá había
   una regla que prohibía el hero, y venía de que él mismo rechazó dos versiones
   por landing. La regla nueva es más precisa: el hero es la PUERTA, no la
   página. Abajo sigue el sistema de placas y el recorrido — un hero con placas
   detrás es una revista con tapa; un hero con secciones de marketing detrás es
   una landing.

   POR QUÉ SE VE HD: la foto no se estira. El <picture> sirve la fachada
   VERTICAL (1122×1402) en celular y la vitrina APAISADA nativa (1600×900) en
   escritorio. Cada una en su formato, a resolución nativa.
   ══════════════════════════════════════════════════════════════════════════ */

.mz-hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(1rem,3vh,2rem) 0;
}
/* Fallback para navegadores sin svh (iOS viejo): dvh no, vh sí. */
@supports not (height: 100svh){ .mz-hero{ min-height:100vh; } }

.mz-hero-foto{
  position:absolute; inset:0; z-index:-2;
  display:block;
}
.mz-hero-foto img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 34%;
}
@media (min-width: 900px){ .mz-hero-foto img{ object-position:52% 30%; } }

/* El respiro cinematográfico. Muy lento y muy poco: un zoom que se nota es
   una animación; uno que no se nota es producción. Se apaga con
   prefers-reduced-motion, como todo lo que se mueve en este sistema. */
@media (prefers-reduced-motion: no-preference){
  .mz-hero-foto img{ animation:mz-respirar 26s ease-in-out infinite alternate; }
}
@keyframes mz-respirar{ from{ transform:scale(1); } to{ transform:scale(1.07); } }

/* El velo. Va en DOS capas: una vertical fuerte abajo (donde vive el texto) y
   una general suave, para que la foto siga siendo una foto y no un fondo gris.
   Sin esto el titular blanco sobre la vitrina no se lee, y "no se lee" no es
   un problema de gusto. */
.mz-hero::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(0deg, #000 1%, rgba(0,0,0,.94) 26%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.6) 100%),
    radial-gradient(130% 85% at 10% 95%, rgba(140,2,9,.6), transparent 60%);
}
/* En escritorio el texto vive abajo a la IZQUIERDA, así que además del velo
   vertical va uno lateral: sin esto el titular pelea con la parte iluminada de
   la foto y gana la foto. "No se lee" no es una cuestión de gusto. */
@media (min-width: 900px){
  .mz-hero::before{
    background:
      linear-gradient(0deg, #000 1%, rgba(0,0,0,.92) 22%, rgba(0,0,0,.55) 58%, rgba(0,0,0,.5) 100%),
      linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 34%, transparent 62%),
      radial-gradient(120% 90% at 8% 92%, rgba(140,2,9,.55), transparent 58%);
  }
}

.mz-hero-alto{
  grid-row:1;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  width:var(--caja); margin-inline:auto;
}

.mz-hero-cuerpo{
  grid-row:2;
  align-self:end;
  width:var(--caja); margin-inline:auto;
  padding-bottom:clamp(1.2rem,3vh,2rem);
  display:grid; justify-items:start; gap:.55rem;
  max-width:min(var(--caja), 100%);
}
.mz-hero-cuerpo .mz-tit1{
  margin:.25rem 0 0;
  text-shadow:0 4px 40px rgba(0,0,0,.75);
}
.mz-hero-baj{
  margin:.7rem 0 .3rem;
  max-width:46ch;
  color:var(--hueso-2);
  font-size:clamp(.95rem,1.5vw,1.06rem); line-height:1.6;
  text-shadow:0 2px 18px rgba(0,0,0,.9);
}
.mz-hero-baj b{ color:var(--hueso); font-weight:650; }
.mz-hero-cuerpo .mz-acciones{ margin-top:.7rem; }

/* La invitación a bajar. Es un ancla de verdad al catálogo: sin JS funciona
   igual, y dice QUÉ hay abajo en vez de una flechita muda. */
.mz-hero-baja{
  grid-row:3;
  justify-self:center;
  display:inline-grid; justify-items:center; gap:.45rem;
  padding:0 0 clamp(1rem,3vh,1.8rem);
  text-decoration:none;
  font-family:var(--f-eti); font-weight:600;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hueso-2);
}
.mz-hero-baja:hover{ color:var(--hueso); }
.mz-hero-baja i{
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--neon-borde);
  display:grid; place-items:center;
  position:relative;
}
.mz-hero-baja i::after{
  content:''; width:7px; height:7px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
@media (prefers-reduced-motion: no-preference){
  .mz-hero-baja i{ animation:mz-latir 2.4s var(--ease) infinite; }
}
@keyframes mz-latir{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* En celular el titular manda: la bajada se acorta para que el botón entre en
   pantalla sin scrollear. Un hero cuyo botón hay que ir a buscar no sirve. */
@media (max-width: 560px){
  .mz-hero-baj{ font-size:.92rem; }
  .mz-hero-cuerpo .mz-acciones{ width:100%; }
  .mz-hero-cuerpo .mz-btn{ flex:1 1 auto; justify-content:center; }
}

/* La barra de servicios queda como pie de la puerta, sin el borde de placa. */
.mz-hero + main > .mz-portada{ border-top:none; padding-top:clamp(1.2rem,3vw,2rem); }

/* ── AVISO +18 ─────────────────────────────────────────────────────────────
   Desde que la home muestra rubros regulados (decisión del dueño, 27/07/2026)
   este aviso es la contrapartida mínima. Va con filete oro y peso de etiqueta,
   NO en letra chica: si la placa muestra alcohol o tabaco, esto tiene que
   verse igual de fuerte que el producto. Es el mismo criterio que ya usa
   /catalogo en sus secciones reguladas. */
.mz-mayor18{
  display:flex; align-items:center; gap:.5rem;
  margin:1rem 0 0;
  padding:.6rem .85rem;
  border:1px solid rgba(237,174,1,.5);
  border-left:3px solid var(--oro);
  border-radius:calc(var(--r) - 6px);
  background:rgba(237,174,1,.07);
  font-family:var(--f-eti); font-weight:600;
  font-size:.78rem; letter-spacing:.03em; line-height:1.45;
  color:var(--hueso-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   LA CINTA "ABIERTO AHORA"
   ══════════════════════════════════════════════════════════════════════════
   Cuatro fichas con scroll-snap. En celular se pasan de a una con el pulgar; en
   escritorio entran las cuatro y la cinta deja de scrollear sola. */
.mz-ahora{ padding-top:clamp(1.4rem,3vw,2.2rem); }
.mz-cinta{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(232px, 1fr);
  gap:.7rem; list-style:none; margin:0; padding:0 0 .5rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  /* El sangrado deja ver media ficha siguiente: es la pista de que hay más. */
  scroll-padding-inline:2px;
}
@media (min-width: 900px){
  .mz-cinta{ grid-auto-flow:row; grid-template-columns:repeat(auto-fit, minmax(232px,1fr)); overflow:visible; }
}
/* Flex en columna con las acciones empujadas abajo: las fichas igualan altura
   (es una cinta), así que sin esto la más corta queda con un hueco suelto en
   vez de con los botones alineados con los de al lado. */
.mz-suc{
  scroll-snap-align:start;
  display:flex; flex-direction:column; gap:.3rem;
  padding:.85rem .95rem;
  border:1px solid var(--linea); border-radius:var(--r);
  background:var(--negro-2);
}
.mz-suc.on{ border-color:rgba(49,208,122,.42); background:rgba(49,208,122,.05); }
.mz-suc .est{
  display:flex; align-items:center; gap:.45rem; margin:0;
  font-family:var(--f-eti); font-weight:700;
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gris);
}
.mz-suc.on .est{ color:var(--verde); }
.mz-suc .est .p{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.mz-suc h3{
  margin:.15rem 0 0; font-family:var(--f-tit); font-weight:400;
  font-size:1.3rem; line-height:1.05; letter-spacing:.01em;
  text-transform:uppercase; color:var(--hueso);
}
.mz-suc .dir{ margin:0; font-size:.86rem; line-height:1.4; color:var(--hueso-2); }
.mz-suc .acc{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:auto; padding-top:.55rem; }
.mz-suc .acc a{
  display:inline-flex; align-items:center; gap:.35rem; min-height:44px;
  padding:.3rem .75rem;
  border:1px solid var(--linea-2); border-radius:var(--r-pill);
  text-decoration:none;
  font-family:var(--f-eti); font-weight:600; font-size:.74rem;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--hueso-2);
  --ic:var(--ic-s);
}
.mz-suc .acc a:hover{ border-color:var(--hueso); color:var(--hueso); }
.mz-suc .acc a.wa{ border-color:rgba(37,211,102,.45); color:var(--hueso); }
.mz-suc .acc a.wa .mz-ic{ color:var(--wa); --ic-glow:0; }
.mz-suc .acc a:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }

/* La pastilla del hero ahora es un enlace de verdad al tablero. */
a.mz-vivo{ text-decoration:none; }
a.mz-vivo:hover{ border-color:var(--verde); }

/* ══════════════════════════════════════════════════════════════════════════
   EL MOSTRADOR · el dock de cuatro puertas
   ══════════════════════════════════════════════════════════════════════════ */

/* La altura se DERIVA de sus partes, no se adivina con un clamp. Con un número
   a ojo daba 58 px contra un dock que mide 63: cinco píxeles de contenido
   comidos en todas las pantallas, en silencio y para siempre. El mismo cálculo
   reserva el espacio abajo del body. */
:root{
  --dock-alto-b:48px;
  --dock-pad:7px;
  --dock-h:calc(var(--dock-alto-b) + var(--dock-pad)*2 + 1px + env(safe-area-inset-bottom, 0px));
}
body.mz{ padding-bottom:var(--dock-h); }
html{ scroll-padding-bottom:calc(var(--dock-h) + 12px); }

/* Oculto de VERDAD: sin caja y sin lugar. El !important en position es la
   lección literal del comodín de body.mz — a un "visualmente oculto" al que le
   pisan el position le queda una caja de línea y deja de estar oculto. */
.mz-vh{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ⚠️ NADA de 100dvh ni 100svh acá. Un dvh se recalcula en cada transición de la
   barra de direcciones y el dock TIEMBLA mientras scrolleás; un svh reservaría
   el hueco chico para siempre. Para una barra de alto fijo pegada abajo la
   primitiva correcta es fixed + bottom:0 + env(safe-area-inset-bottom), que es
   lo que cubre el indicador de home del iPhone. El <meta viewport> ya trae
   viewport-fit=cover, que es lo que hace que env() devuelva algo != 0. */
.mz-dock{
  position:fixed; left:0; right:0; bottom:0;
  z-index:60;                        /* la nav es 50; el visor es <dialog> y va al top layer */
  height:var(--dock-h);
  padding:var(--dock-pad) 10px calc(var(--dock-pad) + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(11,7,9,.90), rgba(0,0,0,.98));
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-top:1px solid var(--linea);
  box-shadow:0 -1px 0 rgba(200,26,28,.42), 0 -14px 34px rgba(0,0,0,.62);
}

/* Las pistas se MIDEN SOLAS. Con anchos mágicos ("Vender son unos 52 px") el
   ancho real es 66 y la palabra sale cortada de 320 a 430 px, o sea en todos
   los celulares. Peor: font-display:swap pinta el primer frame con la fuente de
   sistema, más ancha que Oswald, así que se ve cortado aunque después entre la
   buena. Con `auto` cada celda vale exactamente su etiqueta y nadie la puede
   apretar por debajo de su min-content. El primario es la única pista elástica. */
.mz-dock-l{
  display:grid;
  grid-template-columns:auto auto auto minmax(86px, 1fr);
  gap:5px; align-items:stretch;
  list-style:none; margin:0 auto; padding:0; max-width:560px;
}
@media (min-width:360px){ .mz-dock-l{ grid-template-columns:auto auto auto minmax(126px,1fr); } }
@media (min-width:400px){ .mz-dock-l{ gap:7px; } }
@media (max-width:359px){ .mz-dock{ padding-left:6px; padding-right:6px; } .mz-dock-l{ gap:4px; } }
.mz-dock-l > li{ display:flex; }
.mz-dock-l > li:last-child{ min-width:0; }     /* SOLO el primario puede achicarse */

.mz-dock-b{
  flex:1; min-height:48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:5px 6px; border-radius:12px;
  text-decoration:none; border:1px solid transparent;
  color:var(--hueso-2);
  font-family:var(--f-eti); font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform .09s ease, background-color .18s, color .18s, border-color .18s;
}
/* line-height 1.28 y no 1.05: con 1,05 la caja de línea le corta la tilde a las
   mayúsculas acentuadas y el palito de la Ñ. Es el mismo bug que el viewBox —
   no está mal dibujado, está mal recortado. El piso de 9 px hace que la
   etiqueta se escale pero nunca desaparezca. */
.mz-dock-t{
  font-size:clamp(9px, 2.75vw, 11px); line-height:1.28; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.mz-dock-b .mz-ic{ --ic:var(--ic-s); color:currentColor; --ic-glow:0; }
.mz-dock-b:active{ transform:scale(.955); }
@media (hover:hover){ .mz-dock-b.ter:hover{ color:var(--hueso); background:rgba(237,234,231,.06); } }

/* El foco global es rojo, o sea invisible justo sobre el botón primario ROJO y
   para el usuario que más lo necesita. Acá se pisa con oro: 10:1 contra negro,
   muy por encima del 3:1 que pide la norma, y es color del kit. */
.mz-dock-b:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }

.mz-dock-b.sec{
  position:relative; color:var(--hueso);
  border-color:rgba(37,211,102,.42); background:rgba(37,211,102,.10);
}
.mz-dock-b.sec .mz-ic{ --ic:var(--ic-m); color:var(--wa); }
.mz-dock-b.sec.sinwa{ border-color:rgba(237,174,1,.38); background:rgba(237,174,1,.08); }
.mz-dock-b.sec.sinwa .mz-ic{ color:var(--oro); }

.mz-dock-b.pri{
  color:#fff; background:var(--rojo); border-color:var(--rojo);
  box-shadow:0 0 18px rgba(200,26,28,.42);
}
.mz-dock-b.pri .mz-ic{ --ic:var(--ic-m); color:#fff; }
.mz-dock-b.pri .mz-dock-t{ font-size:clamp(10px, 3vw, 12px); font-weight:700; letter-spacing:.05em; }
@media (hover:hover){ .mz-dock-b.pri:hover{ background:var(--rojo-viv); box-shadow:0 0 26px rgba(200,26,28,.6); } }

/* ⚠️ LA ÚNICA ANIMACIÓN EN LOOP DE TODA LA PÁGINA.
   Cuatro botones latiendo abajo son una tragamonedas, y el dock está SIEMPRE en
   pantalla: un loop acá se come el presupuesto de la página entera. Éste se lo
   ganó porque LLEVA INFORMACIÓN — dice "hay un local abierto ahora", que es
   "te salvamos 24/7" reducido a siete píxeles. Sin ninguno abierto queda gris y
   quieto, así que la animación es el dato. */
.mz-dock-pulso{
  position:absolute; top:5px; right:6px;
  width:7px; height:7px; border-radius:50%;
  background:var(--gris);
}
.mz-dock-pulso.on{ background:var(--verde); }
@media (prefers-reduced-motion: no-preference){
  .mz-dock-pulso.on{ animation:mz-late 2.2s ease-in-out infinite; }
}
@keyframes mz-late{
  0%,100%{ box-shadow:0 0 0 0 rgba(49,208,122,.55); }
  70%    { box-shadow:0 0 0 6px rgba(49,208,122,0); }
}

/* En escritorio el dock deja de ser una barra de pulgar y se corre a la derecha,
   sin taparle el ancho a la página. */
@media (min-width: 900px){
  .mz-dock{ left:auto; right:18px; bottom:18px; width:auto; height:auto;
            padding:8px; border-radius:16px; border:1px solid var(--linea); }
  .mz-dock-l{ grid-template-columns:repeat(4, auto); max-width:none; }
  .mz-dock-l > li:last-child .mz-dock-b{ padding-inline:14px; }
  body.mz{ padding-bottom:0; }
  html{ scroll-padding-bottom:12px; }
}