/* ══════════════════════════════════════════════════════════════════════
   MEGA MAYORISTA — CUENTA · CARRITO · CONTACTO   (maqueta 2026)
   ══════════════════════════════════════════════════════════════════════
   Piel de todo el embudo de cuenta y compra:

     #loginView        vista /{slug}/autenticacion  (MI CUENTA, p05)
     #perfilView       vista /{slug}/perfil
     #contacto         seccion de contacto real     (reemplazo de p04)
     #cartPreview      panel lateral "Tu pedido"
     #carritoView      vista /{slug}/carrito
     #cartDrawer       drawer legacy (solo fallback)
     #checkoutView     vista /{slug}/checkout
     #misPedidosView   vista /{slug}/pedidos
     #favoritosModal   modal legacy de favoritos
     #sucursalPopup    selector bloqueante de sucursal
     #sucursalesView   vista /{slug}/sucursales
     #nosotrosView     vista /{slug}/nosotros
     #floatingRoot     botones flotantes

   Se carga DESPUES de tokens.css / mm-base.css y de las hojas legacy
   (design-system.css, cards.css, futuristic.css, ecommerce.css), que
   quedan congeladas: aqui solo se sobrescriben.

   ── FRAGMENTOS QUE GENERA app.js (no se pueden editar desde aqui) ──
   Varios trozos de estas vistas los pinta app.js con clases de Tailwind.
   Tailwind CDN inyecta su <style> DESPUES de los <link>, asi que a igual
   especificidad gana Tailwind: se le gana con especificidad de ID. Los
   bloques marcados "via app.js" hacen exactamente eso.
     · #checkoutResumen  → renderCheckoutVista()
     · #pedidosBody      → mostrarMisPedidos() / verPedido()
     · #favoritosBody    → mostrarMisFavoritos()
     · #sucursalPopupGrid→ mostrarPopupSucursal()
     · #sucursalesGrid   → renderSucursales()
     · #perfilForm       → cargarPerfilVista() solo setea .value (no clases)

   NO re-skineable sin tocar app.js (queda anotado para el integrador):
     1. pintarBadgeEstado() concatena la clase de color del badge de estado
        del pedido dentro del string ("bg-amber-100 text-amber-700", ...).
        Aqui se remapean esas 4 parejas a tokens una por una; si se agrega
        un estado nuevo en app.js hay que agregar su pareja abajo.
     2. renderCheckoutVista() y verPedido() escriben estilos INLINE de
        line-clamp (-webkit-box). Son de layout, no de color: se dejan.
     3. mostrarPopupSucursal() y renderSucursales() imponen el tamaño del
        emblema circular con clases de utilidad (w-20 h-20 / w-24 h-24).
        Se respeta el tamaño y solo se cambia color y radio.
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   0 · AJUSTES DE PRIMITIVOS — ACOTADOS a estas vistas
   ══════════════════════════════════════════════════════════════════════
   .mm-btn* / .mm-input / .mm-select / .mm-price son primitivos de T1
   (css/mm-base.css) y NO se redefinen aqui: se usan tal cual. Lo unico
   que se ajusta, siempre DENTRO de estas vistas, son las medidas que la
   maqueta pide distintas (campo de 52px en MI CUENTA, textarea que no
   puede quedar con la altura de un input, select con la flecha propia)
   y el estado disabled del correo del perfil.                          */

/* La maqueta p05 pide campos de 52px en el panel de cuenta. En movil ese
   alto estira demasiado una columna de 6 campos, asi que la base es el
   minimo tactil y los 52 vuelven cuando hay ancho. */
.mmc-auth-body .mm-input,
.mmc-auth-body .mm-select { height: auto; min-height: var(--mm-tap, 44px); font-size: var(--mm-t-base); }

/* .mmc-inline-row .mmc-inline-btn y no .mmc-inline-btn a secas: la regla
   base del boton se declara mas abajo y con igual especificidad le
   ganaria a esta por orden. */
@media (min-width: 768px) {
  .mmc-auth-body .mm-input,
  .mmc-auth-body .mm-select,
  .mmc-auth-body .mmc-tel,
  .mmc-inline-row .mmc-inline-btn { min-height: var(--mm-ctl-h-lg); }
}

/* Un textarea no puede heredar la altura de una linea de input. */
#loginView textarea.mm-input,
#perfilView textarea.mm-input,
#checkoutView textarea.mm-input {
  height: auto;
  min-height: 72px;
  padding-block: var(--mm-s-3);
  line-height: var(--mm-lh-normal);
  resize: none;
}

/* Correo del perfil: solo lectura. */
#perfilView .mm-input:disabled {
  background: var(--mm-disabled-bg);
  color: var(--mm-disabled-text);
  cursor: not-allowed;
}

/* El contenedor de estas secciones es `.mm-container` (primitivo de T1).
   Aqui solo se define lo que no existe en mm-base.css. */
/* Estado "cargando…" de los shells (antes de que app.js pinte). */
.mmc-loading {
  margin: 0;
  padding: var(--mm-s-12) var(--mm-s-4);
  text-align: center;
  font-size: var(--mm-t-sm);
  color: var(--mm-text-soft);
}

.mmc-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   0.b · AREA TACTIL — halo invisible de 44x44
   ══════════════════════════════════════════════════════════════════════
   Los controles chicos de estas vistas (ojo de la contraseña, ✕ de los
   paneles, tacho, enlaces de texto) se quedan en su tamaño VISUAL y
   ganan area de toque con un pseudo-elemento que no pinta nada.

   Va sin @media a proposito: no cambia ni un pixel de lo que se ve, y
   con mouse tampoco molesta. Los controles que si cambian de tamaño real
   en tactil (stepper del carrito, filas) estan en la seccion 11.

   `max(100%, tap)` en el ancho es lo que deja intactos los enlaces de
   texto: ya son mas anchos que 44, solo les falta alto.                */
.mmc-auth-close,
.mmc-pass-eye,
.mmc-link,
.mmc-back,
.mmc-chip-btn,
.cartpage-clear,
.cp2-trash,
#sucursalPopup .mmc-suc-close { position: relative; }

.mmc-auth-close::after,
.mmc-pass-eye::after,
.mmc-link::after,
.mmc-back::after,
.mmc-chip-btn::after,
.cartpage-clear::after,
.cp2-trash::after,
#sucursalPopup .mmc-suc-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--mm-tap, 44px));
  height: max(100%, var(--mm-tap, 44px));
  transform: translate(-50%, -50%);
}

/* Los dos checkbox de item NO estan dentro de un <label> (los de
   "seleccionar todo" si, y esa fila ya mide 44). Un checkbox nativo no
   admite pseudo-elementos, asi que el area crece con padding sobre
   content-box y se le devuelve al layout con el margen negativo: el
   cuadrito sigue midiendo 18px y nada se mueve de sitio.
   13px de desborde por lado < 16px de padding del contenedor en los dos
   casos, asi que no asoma fuera ni puede provocar scroll. */
.cp-item > .mmc-check,
.cp2-check .mmc-check {
  box-sizing: content-box;
  padding: 13px;
  margin: -13px;
}
/* renderCartPreview() le pone style="margin-top:4px" inline y el inline
   le gana al margen negativo de arriba: se compensa desplazandolo, que
   mueve tambien el area de toque y no toca el layout. */
.cp-item > .mmc-check { position: relative; top: -13px; }


/* ══════════════════════════════════════════════════════════════════════
   1 · MI CUENTA — #loginView   (maqueta p05)
   ══════════════════════════════════════════════════════════════════════
   Panel centrado sobre fondo liso. La maqueta lleva un patron de
   ilustraciones lineales de fondo: NO se inventa. Queda --mm-band hasta
   que el cliente entregue el SVG/PNG; el dia que llegue, basta con darle
   un background-image a .mmc-auth.                                      */

.mmc-auth {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mm-section-y) var(--mm-gutter);
  background: var(--mm-band);
  font-family: var(--mm-font);
  color: var(--mm-text);
}

/* Mobile-first: el panel ocupa el ancho disponible y sólo se angosta a
   una fracción de la pantalla cuando hay escritorio (sección 11). */
.mmc-auth-panel {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 560px;
  background: var(--mm-form-grey);
  border-radius: var(--mm-r-md);
  overflow: hidden;
  box-shadow: var(--mm-sh-card);
}

/* ── Cabecera oscura ── */
.mmc-auth-head {
  min-height: clamp(108px, 18vw, 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mm-s-1);
  padding: var(--mm-s-6) clamp(var(--mm-s-10), 8vw, var(--mm-s-14));
  background: var(--mm-panel-dark);
  text-align: center;
}

.mmc-auth-eyebrow {
  margin: 0;
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-medium);
  letter-spacing: var(--mm-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mm-on-red-faint);
}

.mmc-auth-title {
  margin: 0;
  font-size: var(--mm-t-xl);
  font-weight: var(--mm-w-regular);
  letter-spacing: var(--mm-ls-wide);
  line-height: var(--mm-lh-tight);
  text-transform: uppercase;
  color: var(--mm-on-red);
}

.mmc-auth-sub {
  margin: 0;
  font-size: var(--mm-t-xs);
  color: var(--mm-on-red-faint);
}

.mmc-auth-close {
  position: absolute;
  top: var(--mm-s-3);
  right: var(--mm-s-3);
  width: var(--mm-icon-btn);
  height: var(--mm-icon-btn);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--mm-r-sm);
  background: transparent;
  color: var(--mm-on-red-soft);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.mmc-auth-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--mm-on-red); }
.mmc-auth-close svg { width: 20px; height: 20px; }

/* ── Cuerpo gris ──
   El padding vertical es continuo (clamp); el horizontal NO puede serlo:
   el panel se topa con su max-width y despues se angosta al 48%, asi que
   un vw suelto seguiria comiendo ancho de campo justo cuando el panel ya
   dejo de crecer. Por eso los tres escalones. */
.mmc-auth-body { padding: clamp(var(--mm-s-8), 5vw, var(--mm-s-14)) var(--mm-s-5); }

/* Fila: icono a la izquierda + campo.
   El icono se alinea al CAMPO, no al bloque: varios campos llevan debajo
   una checklist o una caja desplegable, y con align-items:center el icono
   se iba al medio de todo eso. De ahi el margin-top calculado
   (alto de la etiqueta + medio input). */
.mmc-field {
  display: grid;
  grid-template-columns: clamp(26px, 3.2vw, 32px) 1fr;
  align-items: start;
  column-gap: clamp(var(--mm-s-3), 1.5vw, var(--mm-s-4));
  margin-bottom: var(--mm-s-5);
}

.mmc-field-ico {
  grid-column: 1;
  margin-top: clamp(30px, 3.2vw, 32px);
  display: grid;
  place-items: center;
  width: clamp(26px, 3.2vw, 32px);
  height: clamp(26px, 3.2vw, 32px);
  color: var(--mm-ink);
}
.mmc-field-ico svg { width: clamp(22px, 2.7vw, 26px); height: clamp(22px, 2.7vw, 26px); }

.mmc-field-body { grid-column: 2; min-width: 0; }

.mmc-label {
  display: block;
  margin-bottom: var(--mm-s-1);
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-copy);
  text-transform: uppercase;
  color: var(--mm-text);
}

.mmc-auth-body textarea.mm-input { min-height: 72px; }

/* Dos campos en la misma fila (Nombres / Apellidos). Se parten solos
   cuando la columna baja de ~200px por campo: el panel no acompaña al
   viewport (tiene max-width y despues pasa al 48%), asi que el criterio
   tiene que ser el ancho REAL del campo, no el del navegador. */
.mmc-field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--mm-s-3);
}

/* Contraseña con el ojo. */
.mmc-pass { position: relative; }
.mmc-pass .mm-input { padding-right: 46px; }
.mmc-pass-eye {
  position: absolute;
  top: 50%;
  right: var(--mm-s-2);
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--mm-r-xs);
  background: transparent;
  color: var(--mm-text-soft);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.mmc-pass-eye:hover { color: var(--mm-ink); background: var(--mm-surface-2); }
.mmc-pass-eye svg { width: 20px; height: 20px; }

/* Codigo de pais + numero (mismo widget que el registro/checkout). */
.mmc-tel {
  display: flex;
  align-items: stretch;
  min-height: var(--mm-tap, 44px);
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-sm);
  overflow: hidden;
  transition: var(--mm-tr-color), box-shadow var(--mm-dur-fast) ease;
}
.mmc-tel:focus-within {
  border-color: var(--mm-red-accent);
  box-shadow: 0 0 0 3px var(--mm-red-tint);
}
.mmc-tel-code {
  display: flex;
  align-items: center;
  gap: var(--mm-s-1);
  padding: 0 var(--mm-s-2) 0 var(--mm-s-3);
  border: 0;
  border-right: 1px solid var(--mm-line-soft);
  background: var(--mm-band);
  color: var(--mm-ink);
  font-family: var(--mm-font);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-semi);
  white-space: nowrap;
  cursor: pointer;
}
.mmc-tel-code:hover { background: var(--mm-band-deep); }
.mmc-tel-code svg { width: 12px; height: 12px; color: var(--mm-text-soft); }
.mmc-tel-num {
  flex: 1;
  min-width: 0;
  padding: 0 var(--mm-s-4);
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--mm-font);
  font-size: var(--mm-t-base);
  color: var(--mm-ink);
}

/* Menu desplegable de codigos de pais (lo puebla poblarCodigosPais). */
#loginView .codigopais-menu,
#perfilView .codigopais-menu,
#checkoutView .codigopais-menu {
  z-index: var(--mm-z-dropdown);
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-sm);
  box-shadow: var(--mm-sh-pop);
  font-size: var(--mm-t-sm);
  color: var(--mm-ink);
  list-style: none;
}
/* Contenido del menu: lo pinta poblarCodigosPais() con clases de Tailwind. */
#loginView .codigopais-menu button,
#perfilView .codigopais-menu button,
#checkoutView .codigopais-menu button {
  font-family: var(--mm-font);
  color: var(--mm-ink);
  border-radius: var(--mm-r-xs);
}
#loginView .codigopais-menu button:hover,
#perfilView .codigopais-menu button:hover,
#checkoutView .codigopais-menu button:hover { background: var(--mm-red-tint); }
#loginView .codigopais-menu .text-slate-500,
#perfilView .codigopais-menu .text-slate-500,
#checkoutView .codigopais-menu .text-slate-500 { color: var(--mm-text-soft); }
#loginView .codigopais-menu .text-slate-400,
#perfilView .codigopais-menu .text-slate-400,
#checkoutView .codigopais-menu .text-slate-400 { color: var(--mm-text-faint); }
#loginView .codigopais-menu .border-slate-100,
#perfilView .codigopais-menu .border-slate-100,
#checkoutView .codigopais-menu .border-slate-100 { border-color: var(--mm-line-soft); }
#loginView .codigopais-menu input,
#perfilView .codigopais-menu input,
#checkoutView .codigopais-menu input {
  border-radius: var(--mm-r-xs);
  border-color: var(--mm-line);
  background: var(--mm-surface-2);
  font-family: var(--mm-font);
  color: var(--mm-ink);
}

/* Checklist de requisitos de contraseña. */
.mmc-reqs {
  margin: var(--mm-s-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--mm-t-xs);
  color: var(--mm-text-soft);
}
.mmc-reqs li {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);
  line-height: 1.7;
}
.mmc-reqs .req-dot { user-select: none; }
/* pintarReqsPassword() togglea estas dos clases de Tailwind en cada <li>. */
.mmc-reqs li.text-green-600 { color: var(--mm-ok-text); font-weight: var(--mm-w-medium); }
.mmc-reqs li.text-slate-400 { color: var(--mm-text-soft); }

.mmc-hint {
  margin: var(--mm-s-1) 0 0;
  font-size: var(--mm-t-xs);
  color: var(--mm-text-soft);
  line-height: var(--mm-lh-normal);
}

/* Fila del CTA. En movil se apila con el boton arriba (column-reverse:
   el orden del DOM deja el enlace primero por accesibilidad); desde 768
   vuelve a ser una fila con el enlace a la izquierda. */
.mmc-auth-actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: var(--mm-s-3);
  margin-top: var(--mm-s-6);
}
.mmc-auth-actions .mmc-link { text-align: center; }

@media (min-width: 768px) {
  .mmc-auth-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--mm-s-4);
  }
  .mmc-auth-actions .mmc-link { text-align: left; }
}

.mmc-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mm-font);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-medium);
  color: var(--mm-red);
  cursor: pointer;
  text-align: left;
  transition: var(--mm-tr-color);
}
.mmc-link:hover { color: var(--mm-red-hover); text-decoration: underline; }

.mmc-link-mute { color: var(--mm-text); }
.mmc-link-mute:hover { color: var(--mm-ink); }

.mmc-auth-submit {
  flex: 0 0 auto;
  min-width: 40%;
  min-height: clamp(52px, 6vw, 60px);
  padding: 0 var(--mm-s-6);
  font-size: var(--mm-t-base);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-wide);
  text-transform: uppercase;
  border-radius: var(--mm-r-sm);
}

/* Cuando no hay enlace a la izquierda el boton ocupa toda la fila. */
.mmc-auth-actions.is-solo .mmc-auth-submit { flex: 1 1 auto; width: 100%; }

.mmc-auth-foot {
  margin: var(--mm-s-5) 0 0;
  text-align: center;
  font-size: var(--mm-t-sm);
  color: var(--mm-text);
}

/* ── Bloque social ── */
.mmc-auth-social {
  padding: 0 var(--mm-s-5) clamp(var(--mm-s-8), 5vw, var(--mm-s-12));
}

/* Segundo escalon del padding lateral del panel (el tercero, 72px, esta
   en la seccion 11: recien con el panel al 48% sobra ese aire). */
@media (min-width: 768px) {
  .mmc-auth-body,
  .mmc-auth-social { padding-inline: var(--mm-s-8); }
}
.mmc-auth-sep {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
  margin-bottom: var(--mm-s-4);
}
.mmc-auth-sep::before,
.mmc-auth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mm-line);
}
.mmc-auth-sep span {
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-wide);
  text-transform: uppercase;
  color: var(--mm-text-soft);
}
.mmc-auth-social-btns {
  display: flex;
  flex-direction: column;
  gap: var(--mm-s-3);
  max-width: 360px;
  margin-inline: auto;
}
/* El boton de Google lo dibuja su propio iframe y no acepta un radio
   exacto: solo "pill" o "rectangular". Recortamos el contenedor al mismo
   radio que .mmc-social-btn para que los dos accesos se vean iguales. */
#googleBtnHidden,
#googleBtnHidden > div,
#googleBtnHidden iframe {
  border-radius: var(--mm-r-sm);
  overflow: hidden;
}

.mmc-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-s-2);
  width: 100%;
  min-height: var(--mm-ctl-h-touch);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-sm);
  background: var(--mm-surface);
  font-family: var(--mm-font);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-medium);
  color: var(--mm-ink);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.mmc-social-btn:hover { background: var(--mm-surface-2); border-color: var(--mm-text-faint); }
.mmc-social-btn svg { width: 20px; height: 20px; }
/* Contenedor del boton OFICIAL de Google (lo renderiza GIS). */
#googleBtnHidden {
  display: flex;
  justify-content: center;
  min-height: var(--mm-tap, 44px);
  align-items: center;
}

/* Codigo OTP de 6 digitos. */
.mmc-otp {
  text-align: center;
  font-size: var(--mm-t-xl);
  font-weight: var(--mm-w-bold);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}


/* ══════════════════════════════════════════════════════════════════════
   2 · MI PERFIL — #perfilView
   ══════════════════════════════════════════════════════════════════════ */

#perfilView { font-family: var(--mm-font); }

/* .mmc-perfil-panel no tiene regla de ancho aqui: en movil hereda la de
   .mmc-auth-panel (100% / 560px) y solo se ensancha al 56% en escritorio
   (seccion 11), despues de la del panel de login para poder ganarle. */
.mmc-perfil-head {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--mm-s-4);
  min-height: clamp(96px, 16vw, 120px);
  padding: clamp(var(--mm-s-5), 3vw, var(--mm-s-6)) clamp(var(--mm-s-5), 4vw, var(--mm-s-8));
  text-align: left;
}
.mmc-perfil-avatar {
  display: grid;
  place-items: center;
  width: clamp(44px, 6vw, 56px);
  height: clamp(44px, 6vw, 56px);
  flex-shrink: 0;
  border-radius: var(--mm-r-full);
  background: var(--mm-red);
  color: var(--mm-on-red);
}
.mmc-perfil-avatar svg { width: clamp(22px, 3vw, 28px); height: clamp(22px, 3vw, 28px); }
.mmc-perfil-head-text { min-width: 0; }

/* Correo (bloqueado) + boton Cambiar. */
.mmc-inline-row {
  display: flex;
  align-items: stretch;
  gap: var(--mm-s-2);
}
.mmc-inline-row .mm-input { flex: 1; min-width: 0; }
.mmc-inline-btn {
  flex-shrink: 0;
  min-height: var(--mm-tap, 44px);
  padding: 0 var(--mm-s-4);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-sm);
  background: var(--mm-surface);
  font-family: var(--mm-font);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-semi);
  color: var(--mm-ink);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.mmc-inline-btn:hover { background: var(--mm-surface-2); border-color: var(--mm-text-faint); }

/* Caja del cambio de correo. */
.mmc-subbox {
  margin-top: var(--mm-s-3);
  padding: var(--mm-s-4);
  background: var(--mm-surface);
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-r-sm);
}
.mmc-subbox > * + * { margin-top: var(--mm-s-3); }
.mmc-subbox .mm-input { background: var(--mm-surface-2); }


/* ══════════════════════════════════════════════════════════════════════
   3 · CONTACTO — #contacto   (reemplaza el banner de stock de p04)
   ══════════════════════════════════════════════════════════════════════
   Datos reales unicamente: WhatsApp 0999809260, Zenon Villacis 1-22
   (Ibarra) con enlace a Google Maps y el horario de atencion. Sin
   formulario: no hay endpoint de contacto ni de newsletter.            */

/* La seccion va sobre fondo claro y el rojo queda en una TARJETA: el
   footer del sitio tambien es rojo, y una banda roja pegada al footer se
   leia como un unico bloque sin fin. Mismo patron que las bandas CTA de
   /sucursales y /nosotros.

   Especificidad de ID a proposito: futuristic.css (hoja legacy congelada)
   define un `#contacto` con fondo casi negro y una linea ::before — era el
   glow del footer viejo. Este id ahora es esta seccion: hay que ganarle y
   apagar el pseudo-elemento. */
#contacto.mmc-contacto {
  position: relative;
  padding-block: var(--mm-section-y);
  background: var(--mm-page);
  font-family: var(--mm-font);
}
#contacto.mmc-contacto::before { content: none; }

.mmc-contacto-card {
  padding: clamp(var(--mm-s-8), 4vw, var(--mm-s-12));
  border-radius: var(--mm-r-md);
  background: var(--mm-red);
  color: var(--mm-on-red);
}

.mmc-contacto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--mm-s-8), 5vw, var(--mm-s-20));
  align-items: center;
}

.mmc-contacto-eyebrow {
  margin: 0 0 var(--mm-s-3);
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mm-on-red-faint);
}

.mmc-contacto-title {
  margin: 0 0 var(--mm-s-4);
  font-size: var(--mm-t-3xl);
  font-weight: var(--mm-w-bold);
  line-height: var(--mm-lh-tight);
  letter-spacing: var(--mm-ls-tight);
  color: var(--mm-on-red);
}

.mmc-contacto-lede {
  margin: 0 0 var(--mm-s-8);
  max-width: 46ch;
  font-size: var(--mm-t-base);
  line-height: var(--mm-lh-body);
  color: var(--mm-on-red-soft);
}

.mmc-contacto-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-s-3);
  min-height: var(--mm-ctl-h-lg);
  padding: 0 var(--mm-s-7);
  border-radius: var(--mm-r-sm);
  background: var(--mm-surface);
  color: var(--mm-red);
  font-size: var(--mm-t-base);
  font-weight: var(--mm-w-semi);
  text-decoration: none;
  transition: var(--mm-tr-color), var(--mm-tr-motion);
}
.mmc-contacto-cta:hover { background: var(--mm-red-tint); transform: translateY(-1px); }
.mmc-contacto-cta svg { width: 22px; height: 22px; }

/* Tarjetas de dato real. */
.mmc-contacto-list {
  display: grid;
  gap: var(--mm-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mmc-contacto-item {
  display: flex;
  align-items: flex-start;
  gap: var(--mm-s-4);
  padding: var(--mm-s-5);
  border: 1px solid var(--mm-on-red-line);
  border-radius: var(--mm-r-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--mm-on-red);
  text-decoration: none;
  transition: var(--mm-tr-color);
}
a.mmc-contacto-item:hover { background: rgba(255, 255, 255, 0.14); }

.mmc-contacto-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--mm-r-xs);
  background: rgba(255, 255, 255, 0.12);
  color: var(--mm-on-red);
}
.mmc-contacto-ico svg { width: 20px; height: 20px; }
.mmc-contacto-ico-wa { background: var(--mm-wa); }

.mmc-contacto-item > span:last-child { min-width: 0; }

.mmc-contacto-k {
  display: block;
  margin-bottom: 2px;
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-wide);
  text-transform: uppercase;
  color: var(--mm-on-red-faint);
}
.mmc-contacto-v {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--mm-t-base);
  font-weight: var(--mm-w-medium);
  line-height: var(--mm-lh-snug);
  color: var(--mm-on-red);
}
.mmc-contacto-more {
  display: block;
  margin-top: 2px;
  font-size: var(--mm-t-xs);
  line-height: var(--mm-lh-normal);
  color: var(--mm-on-red-faint);
}


/* ══════════════════════════════════════════════════════════════════════
   4 · CARRITO — panel "Tu pedido" (#cartPreview) y pagina (#carritoView)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 4.a Panel lateral ── */
/* El velo se enciende con display:block (ver el bloque de 767.98px), y una
   transition no corre sobre un display. Con animation si: al aparecer la
   caja, la animacion arranca sola. Solo opacidad — el backdrop-filter en un
   velo a pantalla completa repinta todo el fondo en cada cuadro. */
@keyframes mmc-velo-in { from { opacity: 0; } }

#cartPreviewOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--mm-overlay);
  z-index: 115;
}

.cart-preview {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: var(--mm-cart-panel-w);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  background: var(--mm-surface);
  border-left: 1px solid var(--mm-line-soft);
  box-shadow: -10px 0 30px rgba(26, 26, 26, 0.12);
  z-index: 116;
  font-family: var(--mm-font);
  color: var(--mm-text);
  transform: translateX(105%);
  /* Estado base = panel cerrado, asi que esta es la transicion de CIERRE:
     mas corta y con ease-in (arranca lento y se va acelerando; al final no
     hay nada que mirar, no hace falta frenar). El ancho lo manda
     --mm-cart-panel-w y nunca se anima: solo viaja el transform. */
  transition: transform var(--mm-dur-base) var(--mm-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
/* Apertura: mas larga y con ease-out — el panel recorre 400px y tiene que
   leerse llegando y asentandose, no apareciendo de golpe. */
.cart-preview.is-open {
  transform: translateX(0);
  transition: transform var(--mm-dur-slow) var(--mm-ease-out);
}

.cart-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-s-2);
  padding: var(--mm-s-3) var(--mm-s-4);
  border-bottom: 1px solid var(--mm-line-soft);
}
.mmc-cart-title {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);
  min-width: 0;
  font-size: var(--mm-t-base);
  font-weight: var(--mm-w-semi);
  color: var(--mm-ink);
}
.mmc-cart-title > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--mm-red); }
.mmc-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--mm-r-full);
  background: var(--mm-red);
  color: var(--mm-on-red);
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-bold);
  line-height: 1;
}
.mmc-iconbtn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--mm-r-xs);
  background: transparent;
  color: var(--mm-text-soft);
  cursor: pointer;
  transition: var(--mm-tr-color), transform var(--mm-dur-fast) var(--mm-ease);
}
.mmc-iconbtn:hover { background: var(--mm-band); color: var(--mm-ink); }
/* Iconos de 36px (cerrar panel, vaciar carrito): sin acuse tactil el dedo
   tapa el boton y no se sabe si registro. */
.mmc-iconbtn:active { transform: scale(var(--mm-press, 0.97)); }
.mmc-iconbtn-danger:hover { background: var(--mm-red-tint); color: var(--mm-red); }
.mmc-iconbtn svg { width: 20px; height: 20px; }

/* Toda la fila es <label>: con min-height alcanza el minimo tactil sin
   tocar el cuadrito del checkbox. */
.cart-preview-selall,
.mmc-selall {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
  min-height: var(--mm-tap, 44px);
  padding: var(--mm-s-3) var(--mm-s-4);
  border-bottom: 1px solid var(--mm-line-soft);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-medium);
  color: var(--mm-ink);
  cursor: pointer;
  user-select: none;
}

.mmc-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--mm-red);
  cursor: pointer;
}

.cart-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--mm-s-3) var(--mm-s-4);
  display: flex;
  flex-direction: column;
  gap: var(--mm-s-3);
}

.cart-preview-foot {
  padding: var(--mm-s-4) var(--mm-s-4) calc(var(--mm-s-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mm-line-soft);
  background: var(--mm-surface);
}
.mmc-sumrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-s-3);
  font-size: var(--mm-t-sm);
  color: var(--mm-text);
}
.mmc-sumrow-desc { margin-top: var(--mm-s-1); color: var(--mm-ok-text); font-weight: var(--mm-w-semi); }
.mmc-sumrow-total {
  margin-top: var(--mm-s-2);
  padding-top: var(--mm-s-2);
  border-top: 1px solid var(--mm-line-soft);
  font-size: var(--mm-t-base);
  font-weight: var(--mm-w-semi);
  color: var(--mm-ink);
}
.mmc-total-value {
  font-size: var(--mm-t-xl);
  font-weight: var(--mm-w-bold);
  color: var(--mm-red-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cart-preview-foot .mm-btn-primary {
  width: 100%;
  margin-top: var(--mm-s-3);
  min-height: 48px;
  font-size: var(--mm-t-base);
}

/* ── 4.b Item del panel (lo pinta renderCartPreview) ── */
.cp-item {
  display: flex;
  gap: var(--mm-s-3);
  align-items: flex-start;
}
.cp-item-img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-r-sm);
  background: var(--mm-surface-2);
}
.cp-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cp-item-main { flex: 1; min-width: 0; }
.cp-item-name {
  margin: 0;
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-medium);
  line-height: var(--mm-lh-snug);
  color: var(--mm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-item-noimg { font-size: var(--mm-t-eyebrow); color: var(--mm-text-faint); }
.cp-item-sub {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);
  flex-wrap: wrap;
  margin: var(--mm-s-1) 0 0;
}
/* Envuelve porque en tactil el stepper sube a 44px por boton y en una
   pantalla de 375 ya no entra en la misma linea que el total del item:
   antes de desbordar, el total baja. */
.cp-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mm-s-2);
  margin-top: var(--mm-s-2);
}
.cp-item-line {
  margin-left: auto;
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-semi);
  color: var(--mm-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cp-badge {
  display: inline-block;
  margin-top: var(--mm-s-1);
  padding: 1px 6px;
  border: 1px solid var(--mm-warn-border);
  border-radius: var(--mm-r-xs);
  background: var(--mm-warn-bg);
  color: var(--mm-warn-text);
  /* Estaba en 9px: es un aviso de stock, texto que hay que poder leer en
     un telefono, no un contador. Sube al escalon minimo de la escala. */
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-bold);
  letter-spacing: var(--mm-ls-copy);
  text-transform: uppercase;
}

/* Aviso REAL de mayoreo ("Agrega N mas para ahorrar $X"). */
.cp-tier-msg {
  display: inline-block;
  margin-top: var(--mm-s-2);
  padding: 3px 8px;
  border: 1px solid var(--mm-warn-border);
  border-radius: var(--mm-r-xs);
  background: var(--mm-warn-bg);
  color: var(--mm-warn-text);
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-semi);
  line-height: 1.3;
}

/* Precio + tachado + badge de %. El precio usa el primitivo .mm-price de
   T1 (mismo contrato que la tarjeta y el detalle); aqui solo se baja la
   escala, porque en una fila de carrito no cabe el tamaño de la tarjeta.
   El porcentaje NUNCA va suelto: siempre junto al precio unidad tachado,
   que es el numero que el cliente efectivamente deja de pagar. */
.cp-price  { font-size: var(--mm-t-base); }
.cp2-price { font-size: var(--mm-t-lg); }

.cp-price-old,
.cp2-price-old {
  font-size: var(--mm-t-xs);
  color: var(--mm-text-soft);
  text-decoration: line-through;
}
.cp-price-off,
.cp2-disc {
  padding: 1px 6px;
  border-radius: var(--mm-r-xs);
  background: var(--mm-red-tint);
  color: var(--mm-red);
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-bold);
}

/* Stepper − N + : mismo control que la tarjeta de producto. */
.cp-qty,
.cp2-qty {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-sm);
  background: var(--mm-surface);
}
.cp-qty button,
.cp2-qty button {
  width: 34px;
  border: 0;
  background: var(--mm-surface);
  color: var(--mm-text);
  font-family: var(--mm-font);
  font-size: var(--mm-t-base);
  font-weight: var(--mm-w-semi);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.cp-qty button:hover,
.cp2-qty button:hover { background: var(--mm-band); color: var(--mm-ink); }
.cp-qty input,
.cp2-qty input {
  width: 42px;
  border: 0;
  border-left: 1px solid var(--mm-line-soft);
  border-right: 1px solid var(--mm-line-soft);
  outline: none;
  text-align: center;
  background: var(--mm-surface);
  color: var(--mm-red-accent);
  font-family: var(--mm-font);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-bold);
  -moz-appearance: textfield;
}
.cp-qty { height: 34px; }
.cp2-qty { height: var(--mm-ctl-h-touch); }
.cp2-qty button { width: var(--mm-ctl-h-touch); }
.cp2-qty input { width: 48px; }

.cp-empty,
.cartpage-empty {
  padding: var(--mm-s-12) var(--mm-s-4);
  text-align: center;
  color: var(--mm-text-soft);
}
.cp-empty p,
.cartpage-empty p { margin: var(--mm-s-1) 0 0; font-size: var(--mm-t-sm); }
.cp-empty strong,
.cartpage-empty h3 {
  display: block;
  margin-top: var(--mm-s-2);
  font-size: var(--mm-t-lg);
  font-weight: var(--mm-w-semi);
  color: var(--mm-ink);
}
.cartpage-empty .mm-btn { margin-top: var(--mm-s-5); }

/* Empujar la vista cuando el panel esta abierto (contrato CSS↔JS:
   body.cart-preview-push lo pone/quita cart-preview.js).

   AUDITORIA: el empuje es INSTANTANEO. Antes se transicionaba el
   padding-right del <body> y el right del top-strip, y eran las unicas
   propiedades animadas de todo el sitio que fuerzan layout: animar el
   padding del body relaquetea la pagina ENTERA (header, filtros y las 24+
   tarjetas de la grilla, con su reflow de texto) en cada uno de los ~22
   cuadros que duraba la apertura. Es, de lejos, lo mas caro que habia.

   Hacerlo instantaneo cuesta UN reflow en vez de 22, y no se percibe como
   un salto porque el ojo esta siguiendo el panel que entra: la pagina ya
   hizo sitio cuando el panel empieza a deslizarse. Lo que se mueve sigue
   siendo el panel (transform, compuesto por GPU) — ver .cart-preview.

   Si en la verificacion visual se prefiere el empuje animado, es volver a
   poner `transition: padding-right ...` aca; funciona igual, solo cuesta
   caro. */
@media (min-width: 768px) {
  body.cart-preview-push { padding-right: var(--mm-cart-panel-w); }
  body.cart-preview-push .top-strip,
  body.cart-preview-push .site-header { right: var(--mm-cart-panel-w); }
}
/* max-width porque apaga una prestacion de escritorio (el empuje de la
   pagina) y la cambia por el patron tactil: panel a pantalla completa
   sobre un velo. El par 768 / 767.98 cierra el pixel 768 sin solape. */
@media (max-width: 767.98px) {
  #cartPreviewOverlay.is-open {
    display: block;
    animation: mmc-velo-in var(--mm-dur-base) var(--mm-ease-out) both;
  }
  .cart-preview { width: 100%; max-width: 100%; }
  body.cart-preview-push { padding-right: 0; }
}

/* ── 4.c Barra lateral de miniaturas (la crea app.js) ── */
.cart-bar {
  position: fixed;
  top: 112px;
  right: 0;
  bottom: 0;
  z-index: 95;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mm-s-3);
  padding: var(--mm-s-3) var(--mm-s-2) var(--mm-s-5);
  overflow-y: auto;
  background: var(--mm-surface);
  border-left: 1px solid var(--mm-line-soft);
  box-shadow: -6px 0 18px rgba(26, 26, 26, 0.06);
}
@media (min-width: 768px) {
  body.cart-bar-abierta { padding-right: 72px; }
}
.cart-bar-bag {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--mm-r-md);
  background: var(--mm-red);
  color: var(--mm-on-red);
  cursor: pointer;
  box-shadow: var(--mm-sh-hover);
  transition: var(--mm-tr-color), var(--mm-tr-motion);
}
.cart-bar-bag:hover { background: var(--mm-red-hover); transform: translateY(-1px); }
.cart-bar-bag svg { width: 24px; height: 24px; }
.cart-bar-bag-badge,
.cart-bar-thumb-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid var(--mm-surface);
  border-radius: var(--mm-r-full);
  background: var(--mm-red-accent);
  color: var(--mm-on-red);
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-bold);
  line-height: 1;
}
.cart-bar-items { display: flex; flex-direction: column; align-items: center; gap: var(--mm-s-2); }
.cart-bar-thumb {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-r-full);
  background: var(--mm-surface);
  cursor: pointer;
  box-shadow: var(--mm-sh-card);
}
.cart-bar-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cart-bar-noimg { font-size: var(--mm-t-lg); }
.cart-bar-more {
  width: 48px;
  height: 48px;
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-r-full);
  background: var(--mm-band);
  color: var(--mm-text);
  font-family: var(--mm-font);
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-semi);
  cursor: pointer;
}
.cart-bar-more:hover { background: var(--mm-band-deep); }
/* max-width: apaga el riel de altura completa pegado al borde (que solo
   tiene sentido con espacio de escritorio) y lo cambia por una pastilla
   flotante. Miniaturas a 44 para no bajar del minimo tactil. */
@media (max-width: 767.98px) {
  .cart-bar {
    top: auto;
    bottom: 80px;
    right: 8px;
    width: 58px;
    max-height: 55vh;
    border: 1px solid var(--mm-line-soft);
    border-radius: var(--mm-r-lg);
    padding: var(--mm-s-2) 6px;
  }
  .cart-bar-bag { width: 46px; height: 46px; }
  .cart-bar-bag svg { width: 22px; height: 22px; }
  .cart-bar-thumb, .cart-bar-more { width: var(--mm-tap, 44px); height: var(--mm-tap, 44px); }
}

/* FAB legacy del carrito (lo sigue creando app.js en algunos flujos). */
.cart-fab {
  position: fixed;
  top: 118px;
  left: 16px;
  z-index: 90;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--mm-r-full);
  background: var(--mm-red);
  color: var(--mm-on-red);
  cursor: pointer;
  box-shadow: var(--mm-sh-hover);
  transition: var(--mm-tr-color), var(--mm-tr-motion);
}
.cart-fab:hover { background: var(--mm-red-hover); transform: scale(1.05); }
.cart-fab svg { width: 24px; height: 24px; }
.cart-fab.is-hidden { display: none; }
.cart-fab-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid var(--mm-red);
  border-radius: var(--mm-r-full);
  background: var(--mm-surface);
  color: var(--mm-red);
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-bold);
  line-height: 1;
}
/* AUDITORIA: aca vivia `.cart-fab.pop` + @keyframes cartFabPop. Se quitaron:
   son un efecto que no puede dispararse nunca. actualizarBarraCarrito()
   (app.js) hace `document.getElementById("cartFab").remove()` en CADA
   actualizacion del carrito, y ningun archivo pone la clase `pop`. Las
   reglas de posicion de .cart-fab que quedan abajo son maquetado muerto del
   legacy, no movimiento, y se dejan como estaban. */
/* En /carrito no se muestran accesos al carrito (contrato CSS↔JS:
   body.ruta-carrito lo pone app.js). */
body.ruta-carrito .cart-fab,
body.ruta-carrito #btnAbrirCarrito,
body.ruta-carrito #btnFloatingCart { display: none !important; }
/* max-width: reubica el FAB legacy cuando no hay header de escritorio. */
@media (max-width: 767.98px) {
  .cart-fab { top: 96px; width: 48px; height: 48px; }
  .cart-fab svg { width: 22px; height: 22px; }
}

/* ── 4.d Pagina completa del carrito ── */
.cartpage {
  min-height: 70vh;
  padding-block: var(--mm-section-y-sm) var(--mm-section-y);
  background: var(--mm-page);
  font-family: var(--mm-font);
  color: var(--mm-text);
}
.cartpage-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mm-s-5);
  align-items: start;
}
.cartpage-main { min-width: 0; }

.cartpage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-s-4);
  padding-bottom: var(--mm-s-4);
  border-bottom: 1px solid var(--mm-line-soft);
}
.cartpage-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-s-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mm-font);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-medium);
  color: var(--mm-red);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.cartpage-clear:hover { color: var(--mm-red-hover); }
.cartpage-clear svg { width: 16px; height: 16px; }

.cartpage-items { display: flex; flex-direction: column; }

/* Movil: foto y datos arriba, y la columna de acciones (tacho + stepper)
   pasa a ser una fila debajo. Desde 768 vuelve a las cuatro columnas. */
.cp2-item {
  display: grid;
  grid-template-columns: auto 72px minmax(0, 1fr);
  gap: var(--mm-s-3);
  align-items: start;
  padding: var(--mm-s-5) 0;
  border-bottom: 1px solid var(--mm-line-soft);
}
.cp2-check { padding-top: var(--mm-s-6); }
.cp2-img {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-r-sm);
  background: var(--mm-surface-2);
}
.cp2-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cp2-info { min-width: 0; }
.cp2-name {
  margin: 0;
  font-size: var(--mm-t-base);
  font-weight: var(--mm-w-semi);
  line-height: var(--mm-lh-snug);
  color: var(--mm-ink);
}
.cp2-cod {
  margin: var(--mm-s-1) 0 0;
  font-size: var(--mm-t-xs);
  color: var(--mm-text-soft);
}
.cp2-badge {
  color: var(--mm-warn-text);
  font-weight: var(--mm-w-semi);
}
.cp2-save {
  display: inline-block;
  margin-top: var(--mm-s-2);
  padding: 4px 10px;
  border: 1px solid var(--mm-warn-border);
  border-radius: var(--mm-r-xs);
  background: var(--mm-warn-bg);
  color: var(--mm-warn-text);
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-semi);
}
.cp2-prices {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);
  flex-wrap: wrap;
  margin-top: var(--mm-s-3);
}
.cp2-right {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-s-3);
}

@media (min-width: 768px) {
  .cp2-item { grid-template-columns: auto 96px minmax(0, 1fr) auto; gap: var(--mm-s-4); }
  .cp2-check { padding-top: var(--mm-s-8); }
  .cp2-img { width: 96px; height: 96px; }
  .cp2-right {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
  }
}
.cp2-trash {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--mm-r-xs);
  background: transparent;
  color: var(--mm-text-soft);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.cp2-trash:hover { color: var(--mm-red); background: var(--mm-red-tint); }
.cp2-trash svg { width: 20px; height: 20px; }

/* Se pega al scroll solo cuando es columna lateral (seccion 11). */
.cartpage-summary {
  padding: var(--mm-s-6);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
}
.cartpage-summary-title {
  margin: 0 0 var(--mm-s-5);
  font-size: var(--mm-t-lg);
  font-weight: var(--mm-w-semi);
  color: var(--mm-ink);
}
.cartpage-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-s-3);
  font-size: var(--mm-t-sm);
  color: var(--mm-text);
}
.cartpage-summary-desc { margin-top: var(--mm-s-2); color: var(--mm-ok-text); font-weight: var(--mm-w-semi); }
.cartpage-summary-sep { height: 1px; margin: var(--mm-s-4) 0; background: var(--mm-line-soft); }
.cartpage-summary-total { font-size: var(--mm-t-base); font-weight: var(--mm-w-semi); color: var(--mm-ink); }
.cartpage-summary-total .mmc-total-value { font-size: var(--mm-t-2xl); }
.cartpage-cta {
  width: 100%;
  margin-top: var(--mm-s-6);
  min-height: var(--mm-ctl-h-lg);
  font-size: var(--mm-t-base);
}

/* ── 4.e Drawer legacy (solo fallback: coherencia de color, nada mas) ── */
#cartOverlay { background: var(--mm-overlay); }
/* Se enciende quitando .hidden (display:none), asi que va con animation. */
#cartOverlay:not(.hidden) { animation: mmc-velo-in var(--mm-dur-base) var(--mm-ease-out) both; }

#cartDrawer {
  background: var(--mm-surface);
  font-family: var(--mm-font);
  color: var(--mm-text);
  /* El markup trae .transition-transform.duration-300 de Tailwind: se le gana
     por especificidad de ID para que abra y cierre con el mismo ritmo que el
     panel "Tu pedido". El transform (.translate-x-full) sigue siendo de
     Tailwind — aqui solo se toca el tiempo. Base = cerrado = cierre. */
  transition: transform var(--mm-dur-base) var(--mm-ease-in, cubic-bezier(0.4, 0, 1, 1));
}
#cartDrawer:not(.translate-x-full) {
  transition: transform var(--mm-dur-slow) var(--mm-ease-out);
}
#cartDrawer .mmc-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mm-s-4);
  padding: var(--mm-s-5);
  border-bottom: 1px solid var(--mm-line-soft);
}
#cartDrawer .mmc-drawer-title { margin: 0; font-size: var(--mm-t-xl); font-weight: var(--mm-w-semi); color: var(--mm-ink); }
#cartDrawer .mmc-drawer-sub { margin: 2px 0 0; font-size: var(--mm-t-sm); color: var(--mm-text-soft); }
#cartDrawer .mmc-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--mm-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--mm-s-4);
}
#cartDrawer .mmc-drawer-foot {
  padding: var(--mm-s-3) var(--mm-s-4) calc(var(--mm-s-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mm-line-soft);
  background: var(--mm-surface);
}
#cartDrawer .mmc-wa-btn {
  flex: 1;
  min-height: var(--mm-ctl-h-touch);
  border: 1px solid var(--mm-wa);
  border-radius: var(--mm-r-sm);
  background: var(--mm-surface);
  color: var(--mm-wa-deep);
  font-family: var(--mm-font);
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-semi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-s-2);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
#cartDrawer .mmc-wa-btn:hover { background: var(--mm-ok-bg); }
#cartDrawer .mmc-wa-btn svg { width: 16px; height: 16px; }


/* ══════════════════════════════════════════════════════════════════════
   5 · CHECKOUT — #checkoutView
   ══════════════════════════════════════════════════════════════════════ */

.mmc-view {
  min-height: 70vh;
  padding-block: var(--mm-section-y-sm) var(--mm-section-y);
  background: var(--mm-surface-2);
  font-family: var(--mm-font);
  color: var(--mm-text);
}

.mmc-view-head {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
  margin-bottom: var(--mm-s-6);
}
/* Sin esto un titulo largo ensancha el flex y desborda el contenedor. */
.mmc-view-head > div { min-width: 0; }
.mmc-back {
  display: grid;
  place-items: center;
  width: var(--mm-icon-btn);
  height: var(--mm-icon-btn);
  flex-shrink: 0;
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-full);
  background: var(--mm-surface);
  color: var(--mm-text);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.mmc-back:hover { background: var(--mm-band); color: var(--mm-ink); }
.mmc-back svg { width: 18px; height: 18px; }
.mmc-view-title {
  margin: 0;
  font-size: var(--mm-t-2xl);
  font-weight: var(--mm-w-bold);
  letter-spacing: var(--mm-ls-tight);
  color: var(--mm-ink);
}
.mmc-view-sub { margin: 2px 0 0; font-size: var(--mm-t-sm); color: var(--mm-text-soft); }

.mmc-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mm-s-6);
  align-items: start;
}

.mmc-card {
  padding: var(--mm-s-6);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
}
.mmc-card + .mmc-card { margin-top: var(--mm-s-4); }

.mmc-card-title {
  display: flex;
  align-items: center;
  gap: var(--mm-s-2);
  min-width: 0;
  margin: 0 0 var(--mm-s-4);
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-wide);
  text-transform: uppercase;
  color: var(--mm-text-soft);
}
.mmc-card-title svg { width: 16px; height: 16px; color: var(--mm-red-accent); }
.mmc-card-title-aside {
  margin-left: auto;
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--mm-text-faint);
}

.mmc-total-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-s-3);
  margin-top: var(--mm-s-5);
  padding-top: var(--mm-s-4);
  border-top: 1px solid var(--mm-line-soft);
  font-size: var(--mm-t-base);
  font-weight: var(--mm-w-semi);
  color: var(--mm-ink);
}
.mmc-total-line .mmc-total-value { font-size: var(--mm-t-2xl); }

/* Bloque de confianza (3 iconos). */
/* Los tres sellos van siempre en fila: es un bloque de confianza, apilado
   pierde la lectura de conjunto. minmax(0,1fr) para que la etiqueta larga
   no ensanche su columna. */
.mmc-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--mm-s-1), 1vw, var(--mm-s-2));
  text-align: center;
}
.mmc-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mm-s-2);
}
.mmc-trust-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mm-r-full);
  background: var(--mm-red-tint);
  color: var(--mm-red);
}
.mmc-trust-ico svg { width: 18px; height: 18px; }
.mmc-trust-item span:last-child {
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-medium);
  line-height: var(--mm-lh-snug);
  color: var(--mm-text);
}
.mmc-trust-note {
  margin: var(--mm-s-4) 0 0;
  padding-top: var(--mm-s-4);
  border-top: 1px solid var(--mm-line-soft);
  font-size: var(--mm-t-xs);
  line-height: var(--mm-lh-normal);
  text-align: center;
  color: var(--mm-text-soft);
}

/* .mmc-form-card se pega al scroll solo cuando es columna lateral: la
   regla vive en la seccion 11. */
.mmc-form > * + * { margin-top: var(--mm-s-4); }
/* Provincia/Ciudad: el minimo es 150px porque la tarjeta del formulario
   mide 380-440px y con el minimo "de libro" (220) nunca entrarian dos
   columnas ni en escritorio. */
.mmc-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--mm-s-3);
}
.mmc-form-label {
  display: block;
  margin-bottom: var(--mm-s-1);
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-copy);
  text-transform: uppercase;
  color: var(--mm-text-soft);
}
.mmc-form .mm-input { min-height: var(--mm-ctl-h-touch); }
.mmc-form textarea.mm-input { min-height: 72px; }
.mmc-form .mmc-tel { min-height: var(--mm-ctl-h-touch); }

.mmc-chip-btn {
  display: none;
  align-items: center;
  gap: var(--mm-s-2);
  padding: 6px var(--mm-s-3);
  border: 0;
  border-radius: var(--mm-r-xs);
  background: var(--mm-red-tint);
  color: var(--mm-red);
  font-family: var(--mm-font);
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-semi);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.mmc-chip-btn.inline-flex { display: inline-flex; }
.mmc-chip-btn:hover { background: var(--mm-red-border); }
.mmc-chip-btn svg { width: 14px; height: 14px; }

.mmc-alert {
  margin-bottom: var(--mm-s-3);
  padding: var(--mm-s-2) var(--mm-s-3);
  border: 1px solid var(--mm-warn-border);
  border-radius: var(--mm-r-xs);
  background: var(--mm-warn-bg);
  color: var(--mm-warn-text);
  font-size: var(--mm-t-xs);
  line-height: var(--mm-lh-normal);
}

.mmc-submit {
  width: 100%;
  min-height: var(--mm-ctl-h-lg);
  margin-top: var(--mm-s-2);
  font-size: var(--mm-t-base);
}
.mmc-wa-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-s-2);
  width: 100%;
  min-height: var(--mm-ctl-h-touch);
  margin-top: var(--mm-s-3);
  border: 1px solid var(--mm-wa);
  border-radius: var(--mm-r-sm);
  background: var(--mm-ok-bg);
  color: var(--mm-wa-deep);
  font-family: var(--mm-font);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-semi);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.mmc-wa-outline:hover { background: var(--mm-ok-border); }
.mmc-wa-outline svg { width: 16px; height: 16px; }
.mmc-secondary-btn {
  width: 100%;
  min-height: var(--mm-ctl-h-touch);
  margin-top: var(--mm-s-2);
}

/* ── 5.a Resumen interior (via app.js → renderCheckoutVista) ── */
#checkoutResumen { font-family: var(--mm-font); }
/* Separador entre líneas del resumen (antes lo daba `divide-y` de Tailwind). */
#checkoutResumen > * + * { border-top: 1px solid var(--mm-line-soft); }
#checkoutResumen [class*="rounded-"] { border-radius: var(--mm-r-sm); }
#checkoutResumen .bg-white { background: var(--mm-surface-2); }
#checkoutResumen .border-slate-200 { border-color: var(--mm-line-soft); }
#checkoutResumen .text-slate-800,
#checkoutResumen .text-slate-900 { color: var(--mm-ink); }
#checkoutResumen .text-slate-400 { color: var(--mm-text-soft); }
#checkoutResumen .font-semibold { font-weight: var(--mm-w-medium); }
#checkoutResumen .font-black { font-weight: var(--mm-w-semi); }
#checkoutResumen .text-red-600 { color: var(--mm-red); }


/* ══════════════════════════════════════════════════════════════════════
   6 · MIS PEDIDOS — #misPedidosView
   ══════════════════════════════════════════════════════════════════════ */

.mmc-view-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--mm-r-sm);
  background: var(--mm-panel-dark);
  color: var(--mm-on-red);
}
.mmc-view-badge svg { width: 22px; height: 22px; }

/* ── Tarjetas de pedido (via app.js → mostrarMisPedidos / verPedido) ── */
#pedidosBody { font-family: var(--mm-font); }
#pedidosBody [class*="rounded-"] { border-radius: var(--mm-r-md); }
#pedidosBody .rounded-full { border-radius: var(--mm-r-full); }
#pedidosBody .bg-white { background: var(--mm-surface); }
#pedidosBody .border-slate-200 { border-color: var(--mm-line); }
#pedidosBody .border-slate-100 { border-color: var(--mm-line-soft); }
#pedidosBody .divide-slate-100 > * + * { border-top-color: var(--mm-line-soft); }
#pedidosBody .text-slate-900 { color: var(--mm-ink); }
#pedidosBody .text-slate-800,
#pedidosBody .text-slate-700 { color: var(--mm-ink); }
#pedidosBody .text-slate-600,
#pedidosBody .text-slate-500 { color: var(--mm-text); }
#pedidosBody .text-slate-400 { color: var(--mm-text-soft); }
#pedidosBody .text-slate-300 { color: var(--mm-line); }
#pedidosBody .text-red-600 { color: var(--mm-red-accent); }
#pedidosBody .text-red-400 { color: var(--mm-red-accent); }
#pedidosBody .font-black { font-weight: var(--mm-w-semi); }
#pedidosBody .bg-slate-50 { background: var(--mm-surface-2); }
#pedidosBody button:hover.border-red-300,
#pedidosBody .hover\:border-red-300:hover { border-color: var(--mm-red-border); }
#pedidosBody .hover\:bg-slate-50:hover { background: var(--mm-band); }

/* Badges de estado — pintarBadgeEstado() concatena la pareja de clases
   dentro del string, asi que se remapean una por una. Estado nuevo en
   app.js = pareja nueva aqui. */
#pedidosBody .bg-amber-100  { background: var(--mm-warn-bg); }
#pedidosBody .text-amber-700 { color: var(--mm-warn-text); }
#pedidosBody .bg-blue-100   { background: #E7EEF6; }
#pedidosBody .text-blue-700 { color: #1F4E79; }
#pedidosBody .bg-emerald-100 { background: var(--mm-ok-bg); }
#pedidosBody .text-emerald-700 { color: var(--mm-ok-text); }
#pedidosBody .bg-red-100    { background: var(--mm-red-tint); }
#pedidosBody .text-red-700  { color: var(--mm-red); }
#pedidosBody .bg-slate-100  { background: var(--mm-band); }
#pedidosBody .text-slate-700.bg-slate-100 { color: var(--mm-text); }


/* ══════════════════════════════════════════════════════════════════════
   6.b · ENTRADA DE LOS MODALES — velo + tarjeta
   ══════════════════════════════════════════════════════════════════════
   app.js los enciende cambiando `hidden` por `flex`: es un display, no un
   estado animable, asi que la entrada va con `animation` (arranca sola al
   generarse la caja) y no con `transition`.

   Un solo gesto = una sola aparicion: el velo funde y la tarjeta entra
   apenas escalada. Sin desplazamientos largos y sin rebote — la escala de
   0.97 a 1 basta para que el ojo entienda que la tarjeta llego encima de
   la pagina. El cierre es instantaneo (display:none) a proposito: no hay
   nada que mirar al irse y esperar una salida retrasa el siguiente clic. */

#favoritosModal:not(.hidden),
#sucursalPopup:not(.hidden) {
  animation: mmc-velo-in var(--mm-dur-base) var(--mm-ease-out) both;
}

.mmc-modal-card {
  animation: mm-in-scale var(--mm-dur-base) var(--mm-ease-out) both;
}


/* ══════════════════════════════════════════════════════════════════════
   7 · FAVORITOS — #favoritosModal (legacy: coherencia de color)
   ══════════════════════════════════════════════════════════════════════ */

#favoritosModal { background: var(--mm-overlay); font-family: var(--mm-font); }
#favoritosModal .mmc-modal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow: hidden;
  border-radius: var(--mm-r-lg);
  background: var(--mm-surface);
  box-shadow: var(--mm-sh-modal);
}
#favoritosModal .mmc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-s-4);
  padding: var(--mm-s-6);
  border-bottom: 1px solid var(--mm-line-soft);
}
#favoritosModal .mmc-modal-title { margin: 0; font-size: var(--mm-t-xl); font-weight: var(--mm-w-semi); color: var(--mm-ink); }
#favoritosModal .mmc-modal-sub { margin: 2px 0 0; font-size: var(--mm-t-sm); color: var(--mm-text-soft); }
#favoritosModal .mmc-modal-emblem {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--mm-r-sm);
  background: var(--mm-red);
  color: var(--mm-on-red);
  font-size: var(--mm-t-lg);
}
#favoritosBody {
  flex: 1;
  overflow-y: auto;
  padding: var(--mm-s-6);
  display: flex;
  flex-direction: column;
  gap: var(--mm-s-3);
}
#favoritosBody [class*="rounded-"] { border-radius: var(--mm-r-md); }
#favoritosBody .bg-white { background: var(--mm-surface); }
#favoritosBody .border-slate-200 { border-color: var(--mm-line); }
#favoritosBody .text-slate-900 { color: var(--mm-ink); }
#favoritosBody .text-slate-500 { color: var(--mm-text); }
#favoritosBody .text-slate-400 { color: var(--mm-text-soft); }
#favoritosBody .text-red-600 { color: var(--mm-red-accent); }
#favoritosBody .text-amber-600 { color: var(--mm-warn-text); }
#favoritosBody .font-black { font-weight: var(--mm-w-semi); }


/* ══════════════════════════════════════════════════════════════════════
   8 · SUCURSAL — popup bloqueante (#sucursalPopup) y vista
   ══════════════════════════════════════════════════════════════════════
   Hoy hay UNA sola sucursal publicada (Ibarra): el popup se diseña para
   que con un solo item se vea como una tarjeta grande centrada, no como
   una grilla con huecos. La grilla crece sola si se publican mas.      */

#sucursalPopup { background: var(--mm-overlay); font-family: var(--mm-font); }
#sucursalPopup .mmc-modal-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  overflow: hidden;
  border-radius: var(--mm-r-lg);
  background: var(--mm-surface);
  box-shadow: var(--mm-sh-modal);
}
#sucursalPopup .mmc-suc-head {
  padding: clamp(var(--mm-s-6), 4vw, var(--mm-s-8)) clamp(var(--mm-s-5), 4vw, var(--mm-s-8)) clamp(var(--mm-s-5), 3vw, var(--mm-s-6));
  text-align: center;
  border-bottom: 1px solid var(--mm-line-soft);
}
#sucursalPopup .mmc-suc-pin {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--mm-s-4);
  border-radius: var(--mm-r-full);
  background: var(--mm-red-tint);
  color: var(--mm-red);
}
#sucursalPopup .mmc-suc-pin svg { width: 32px; height: 32px; }
#sucursalPopup .mmc-suc-title {
  margin: 0;
  font-size: var(--mm-t-2xl);
  font-weight: var(--mm-w-bold);
  line-height: var(--mm-lh-tight);
  letter-spacing: var(--mm-ls-tight);
  color: var(--mm-ink);
}
#sucursalPopup .mmc-suc-lede {
  margin: var(--mm-s-3) auto 0;
  max-width: 44ch;
  font-size: var(--mm-t-sm);
  line-height: var(--mm-lh-body);
  color: var(--mm-text);
}
#sucursalPopup .mmc-suc-close {
  position: absolute;
  top: var(--mm-s-4);
  right: var(--mm-s-4);
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--mm-r-full);
  background: var(--mm-band);
  color: var(--mm-text);
  cursor: pointer;
  transition: var(--mm-tr-color);
}
#sucursalPopup .mmc-suc-close:hover { background: var(--mm-band-deep); color: var(--mm-ink); }
#sucursalPopup .mmc-suc-close svg { width: 18px; height: 18px; }

/* Grilla: auto-fit para que UNA sucursal ocupe el centro sin huecos. */
#sucursalPopupGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--mm-s-3);
  justify-content: center;
  max-height: 58vh;
  overflow-y: auto;
  padding: clamp(var(--mm-s-4), 3vw, var(--mm-s-6));
}
#sucursalPopupGrid:has(> button:only-child) { grid-template-columns: minmax(0, 320px); }
#sucursalPopupGrid > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mm-s-3);
  padding: var(--mm-s-6) var(--mm-s-4);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
  cursor: pointer;
  transition: var(--mm-tr-color), var(--mm-tr-motion);
}
#sucursalPopupGrid > button:hover {
  border-color: var(--mm-red-border);
  background: var(--mm-red-tint);
  box-shadow: var(--mm-sh-hover);
}
/* Elegir sucursal recarga el catalogo entero: el acuse del toque tiene que
   salir en el mismo cuadro del clic, antes de que empiece la carga. */
#sucursalPopupGrid > button:active { transform: scale(var(--mm-press, 0.97)); }
/* El emblema circular lo dimensiona app.js con utilidades; aqui solo
   se reemplaza el degradado por el rojo plano de marca. */
#sucursalPopupGrid .bg-gradient-to-br {
  background-image: none;
  background-color: var(--mm-red);
  box-shadow: none;
}
#sucursalPopupGrid .text-slate-900 { color: var(--mm-ink); }
#sucursalPopupGrid .text-slate-400 { color: var(--mm-text-soft); }
#sucursalPopupGrid .font-black { font-weight: var(--mm-w-semi); }
/* Estados a ancho completo dentro de la grilla: el "cargando…" del shell y
   el "No hay sucursales disponibles" que emite mostrarPopupSucursal(). */
#sucursalPopupGrid .mmc-loading,
#sucursalPopupGrid .col-span-full { grid-column: 1 / -1; color: var(--mm-text-soft); }

/* ── Vista /sucursales ── */
#sucursalesView { font-family: var(--mm-font); color: var(--mm-text); background: var(--mm-page); }
#sucursalesView .mmc-hero {
  padding-block: var(--mm-section-y);
  background: var(--mm-band);
  border-bottom: 1px solid var(--mm-line-soft);
}
#sucursalesView .mmc-eyebrow,
#nosotrosView .mmc-eyebrow {
  margin: 0 0 var(--mm-s-2);
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mm-red);
}
#sucursalesView .mmc-hero-title,
#nosotrosView .mmc-hero-title {
  margin: 0;
  font-size: var(--mm-t-3xl);
  font-weight: var(--mm-w-bold);
  line-height: var(--mm-lh-tight);
  letter-spacing: var(--mm-ls-tighter);
  color: var(--mm-ink);
}
#sucursalesView .mmc-hero-lede,
#nosotrosView .mmc-hero-lede {
  margin: var(--mm-s-4) 0 0;
  max-width: 62ch;
  font-size: var(--mm-t-base);
  line-height: var(--mm-lh-body);
  color: var(--mm-text);
}
#sucursalesView .mmc-section { padding-block: var(--mm-section-y); }
#sucursalesView .mmc-section-alt { background: var(--mm-surface-2); }
#sucursalesView .mmc-section-title,
#nosotrosView .mmc-section-title {
  margin: 0;
  font-size: var(--mm-t-2xl);
  font-weight: var(--mm-w-bold);
  line-height: var(--mm-lh-tight);
  letter-spacing: var(--mm-ls-tight);
  color: var(--mm-ink);
}
#sucursalesView .mmc-section-sub {
  margin: var(--mm-s-3) 0 0;
  font-size: var(--mm-t-base);
  color: var(--mm-text);
}
#sucursalesView .mmc-section-head { margin-bottom: var(--mm-s-8); }

/* Grilla real: con UNA sucursal, una tarjeta ancha centrada. */
#sucursalesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--mm-s-6);
  max-width: 920px;
  margin-inline: auto;
}
#sucursalesGrid:has(> .sucursal-card:only-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }
#sucursalesView .sucursal-card {
  overflow: hidden;
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
  box-shadow: var(--mm-sh-card);
}
#sucursalesView .sucursal-card.is-active { border-color: var(--mm-red-border); }
#sucursalesView .sucursal-card-badge {
  background: var(--mm-red);
  color: var(--mm-on-red);
  border-radius: var(--mm-r-xs);
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-wide);
  text-transform: uppercase;
}
#sucursalesView .sucursal-card-photo-wrap { background: var(--mm-band); }
#sucursalesView .sucursal-card-emblem-large {
  background: var(--mm-red);
  color: var(--mm-on-red);
  font-weight: var(--mm-w-bold);
}
#sucursalesView .sucursal-card-city {
  font-size: var(--mm-t-xl);
  font-weight: var(--mm-w-bold);
  color: var(--mm-ink);
}
#sucursalesView .sucursal-card-row { color: var(--mm-text); font-size: var(--mm-t-sm); }
#sucursalesView .sucursal-card-row svg { color: var(--mm-red-accent); }
#sucursalesView .sucursal-card-hor-time { color: var(--mm-ink); font-weight: var(--mm-w-semi); }
#sucursalesView .sucursal-card-btn { border-radius: var(--mm-r-sm); font-family: var(--mm-font); }
#sucursalesView .ds-btn-red { background: var(--mm-red); border-color: var(--mm-red); color: var(--mm-on-red); }
#sucursalesView .ds-btn-red:hover { background: var(--mm-red-hover); border-color: var(--mm-red-hover); }
#sucursalesView .ds-btn-secondary {
  background: var(--mm-surface);
  border-color: var(--mm-line);
  color: var(--mm-ink);
}
#sucursalesView .ds-btn-secondary:hover { background: var(--mm-band); border-color: var(--mm-text-faint); }

/* Tarjetas informativas de la vista (perks / pasos). */
#sucursalesView .mmc-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--mm-s-5);
}
#sucursalesView .mmc-tile,
#nosotrosView .mmc-tile {
  padding: var(--mm-s-6);
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
}
#sucursalesView .mmc-tile h3,
#nosotrosView .mmc-tile h3 {
  margin: var(--mm-s-4) 0 var(--mm-s-2);
  font-size: var(--mm-t-lg);
  font-weight: var(--mm-w-semi);
  color: var(--mm-ink);
}
#sucursalesView .mmc-tile p,
#nosotrosView .mmc-tile p {
  margin: 0;
  font-size: var(--mm-t-sm);
  line-height: var(--mm-lh-body);
  color: var(--mm-text);
}
#sucursalesView .mmc-tile-ico,
#nosotrosView .mmc-tile-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--mm-r-xs);
  background: var(--mm-red-tint);
  color: var(--mm-red);
}
#sucursalesView .mmc-tile-ico svg,
#nosotrosView .mmc-tile-ico svg { width: 22px; height: 22px; }
#sucursalesView .mmc-step-num {
  display: block;
  font-size: var(--mm-t-2xl);
  font-weight: var(--mm-w-bold);
  color: var(--mm-red-tint);
  line-height: 1;
}

/* Banda CTA final. */
#sucursalesView .mmc-cta,
#nosotrosView .mmc-cta {
  padding: var(--mm-s-10) var(--mm-s-8);
  border-radius: var(--mm-r-md);
  background: var(--mm-red);
  color: var(--mm-on-red);
}
#sucursalesView .mmc-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mm-s-6);
  align-items: center;
}
#sucursalesView .mmc-cta .mmc-eyebrow,
#nosotrosView .mmc-cta .mmc-eyebrow { color: var(--mm-on-red-faint); }
#sucursalesView .mmc-cta h2,
#nosotrosView .mmc-cta h2 {
  margin: 0;
  font-size: var(--mm-t-2xl);
  font-weight: var(--mm-w-bold);
  line-height: var(--mm-lh-tight);
  color: var(--mm-on-red);
}
#sucursalesView .mmc-cta p,
#nosotrosView .mmc-cta p {
  margin: var(--mm-s-3) 0 0;
  max-width: 56ch;
  font-size: var(--mm-t-base);
  line-height: var(--mm-lh-body);
  color: var(--mm-on-red-soft);
}
#sucursalesView .mmc-cta-actions,
#nosotrosView .mmc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-s-3);
  margin-top: var(--mm-s-6);
}
.mmc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-s-2);
  min-height: var(--mm-ctl-h-lg);
  padding: 0 var(--mm-s-6);
  border: 1px solid var(--mm-surface);
  border-radius: var(--mm-r-sm);
  background: var(--mm-surface);
  color: var(--mm-red);
  font-family: var(--mm-font);
  font-size: var(--mm-t-base);
  font-weight: var(--mm-w-semi);
  text-decoration: none;
  cursor: pointer;
  transition: var(--mm-tr-color);
}
.mmc-cta-btn:hover { background: var(--mm-red-tint); }
.mmc-cta-btn-ghost {
  background: transparent;
  border-color: var(--mm-on-red-line);
  color: var(--mm-on-red);
}
.mmc-cta-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.mmc-cta-btn svg { width: 18px; height: 18px; }


/* ══════════════════════════════════════════════════════════════════════
   9 · NOSOTROS — #nosotrosView
   ══════════════════════════════════════════════════════════════════════ */

#nosotrosView { font-family: var(--mm-font); color: var(--mm-text); background: var(--mm-page); }
#nosotrosView .mmc-hero {
  padding-block: var(--mm-section-y);
  background: var(--mm-band);
  border-bottom: 1px solid var(--mm-line-soft);
}
#nosotrosView .mmc-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--mm-s-8), 5vw, var(--mm-s-16));
  align-items: center;
}
/* Debajo del hero las cifras se reparten en fila; de columna lateral
   (escritorio) vuelven a apilarse. */
#nosotrosView .mmc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--mm-s-3);
}
#nosotrosView .mmc-stat {
  padding: var(--mm-s-5);
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
}
#nosotrosView .mmc-stat-num {
  display: block;
  font-size: var(--mm-t-3xl);
  font-weight: var(--mm-w-bold);
  line-height: 1;
  color: var(--mm-red);
}
#nosotrosView .mmc-stat-num sub,
#nosotrosView .mmc-stat-num sup {
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-medium);
  margin-left: 2px;
}
#nosotrosView .mmc-stat-label {
  display: block;
  margin-top: var(--mm-s-2);
  font-size: var(--mm-t-xs);
  letter-spacing: var(--mm-ls-copy);
  text-transform: uppercase;
  color: var(--mm-text-soft);
}
#nosotrosView .mmc-section { padding-block: var(--mm-section-y); }
#nosotrosView .mmc-section-alt { background: var(--mm-surface-2); }
#nosotrosView .mmc-section-head { margin-bottom: var(--mm-s-8); }
#nosotrosView .mmc-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--mm-s-5);
}
#nosotrosView .mmc-tile-tag {
  margin: var(--mm-s-4) 0 0;
  font-size: var(--mm-t-eyebrow);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mm-red);
}
#nosotrosView .mmc-tile-tag + h3 { margin-top: var(--mm-s-2); }

#nosotrosView .mmc-video-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-r-md);
  background: var(--mm-panel-dark);
}
#nosotrosView .mmc-video-player { display: block; width: 100%; height: auto; }
#nosotrosView .mmc-video-sound {
  position: absolute;
  left: clamp(var(--mm-s-3), 2vw, var(--mm-s-4));
  bottom: clamp(var(--mm-s-3), 2vw, var(--mm-s-4));
  display: inline-flex;
  align-items: center;
  gap: var(--mm-s-2);
  min-height: var(--mm-tap, 44px);
  padding: 0 var(--mm-s-4);
  border: 0;
  border-radius: var(--mm-r-full);
  background: var(--mm-red);
  color: var(--mm-on-red);
  font-family: var(--mm-font);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-semi);
  cursor: pointer;
  box-shadow: var(--mm-sh-arrow);
  transition: var(--mm-tr-color);
}
#nosotrosView .mmc-video-sound:hover { background: var(--mm-red-hover); }

#nosotrosView .mmc-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--mm-s-8), 5vw, var(--mm-s-16));
  align-items: start;
}
#nosotrosView .mmc-story-text p {
  margin: var(--mm-s-4) 0 0;
  font-size: var(--mm-t-base);
  line-height: var(--mm-lh-body);
  color: var(--mm-text);
}
#nosotrosView .mmc-story-text strong { color: var(--mm-ink); font-weight: var(--mm-w-semi); }
#nosotrosView .mmc-timeline {
  display: grid;
  gap: var(--mm-s-4);
  padding-left: var(--mm-s-5);
  border-left: 2px solid var(--mm-line-soft);
}
#nosotrosView .mmc-timeline-item { position: relative; }
#nosotrosView .mmc-timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--mm-s-5) - 6px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: var(--mm-r-full);
  background: var(--mm-red);
}
#nosotrosView .mmc-timeline-year {
  font-size: var(--mm-t-base);
  font-weight: var(--mm-w-bold);
  color: var(--mm-ink);
}
#nosotrosView .mmc-timeline-item p {
  margin: 2px 0 0;
  font-size: var(--mm-t-sm);
  line-height: var(--mm-lh-normal);
  color: var(--mm-text);
}


/* ══════════════════════════════════════════════════════════════════════
   10 · BOTONES FLOTANTES — #floatingRoot
   ══════════════════════════════════════════════════════════════════════ */

#floatingRoot .floating-btn,
#floatingRoot .floating-toggle {
  border-radius: var(--mm-r-full);
  box-shadow: var(--mm-sh-hover);
  transition: var(--mm-tr-color), var(--mm-tr-motion);
}
#floatingRoot .floating-btn-wa { background: var(--mm-wa); }
#floatingRoot .floating-btn-wa:hover { background: var(--mm-wa-deep); }
#floatingRoot .floating-btn-cart { background: var(--mm-panel-dark); }
#floatingRoot .floating-btn-cart:hover { background: var(--mm-red); }
#floatingRoot .floating-btn-video { background: var(--mm-red); }
#floatingRoot .floating-btn-video:hover { background: var(--mm-red-hover); }
#floatingRoot .floating-toggle { background: var(--mm-panel-dark); }
#floatingRoot .floating-toggle:hover { background: var(--mm-red); }
#floatingRoot .floating-count {
  background: var(--mm-red-accent);
  color: var(--mm-on-red);
  border-color: var(--mm-surface);
  font-weight: var(--mm-w-bold);
}


/* ══════════════════════════════════════════════════════════════════════
   11 · RESPONSIVE
   ══════════════════════════════════════════════════════════════════════
   Cortes del sistema: 480 / 768 / 1024 / 1280 (max-width siempre .98).
   Todo lo de arriba es el estado MOVIL; aqui solo se agrega.
   Los saltos de 768 que son propios de un componente (fila del CTA de
   cuenta, item del carrito, alto de los campos) viven junto a el.       */

/* ── Area tactil: lo que si cambia de tamaño real ──────────────────────
   max-width porque en escritorio (mouse) el tamaño de la maqueta es el
   correcto: escrito al reves habria que repetir cada regla con su valor
   de escritorio. El halo invisible, que no cambia nada de lo que se ve,
   esta en la seccion 0.b y aplica en todos los anchos.                  */
@media (max-width: 1023.98px) {
  /* Stepper del panel lateral: 34px es un objetivo de mouse. En tactil
     sube al minimo, que es lo que ya usa el de la pagina del carrito. */
  .cp-qty { height: var(--mm-tap, 44px); }
  .cp-qty button,
  .cp-qty input { width: var(--mm-tap, 44px); }

  /* Tamaño real y no halo: en la cabecera del panel los dos botones
     estan a 2px uno del otro (gap inline del markup) y un halo le
     robaria el toque al vecino. */
  .mmc-iconbtn { width: var(--mm-tap, 44px); height: var(--mm-tap, 44px); }

  /* Tarjeta de pedido y "volver al listado": los pinta app.js con
     utilidades (px-3 py-2), no hay donde tocarles el alto salvo aqui. */
  #pedidosBody button { min-height: var(--mm-tap, 44px); }

  /* "Como llegar" / "Hacer mi sucursal": el alto sale de .ds-btn +
     .sucursal-card-btn (ecommerce.css, legado) y da ~38px. Se sube la caja
     sin tocar la tipografia ni el padding lateral de la maqueta. */
  #sucursalesView .sucursal-card-btn { min-height: var(--mm-tap, 44px); }
}

/* ── 1024 — aparece la columna lateral ─────────────────────────────── */
@media (min-width: 1024px) {
  .mmc-checkout-grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .mmc-form-card {
    position: sticky;
    top: calc(var(--mm-header-h) + var(--mm-s-4));
  }

  .cartpage-container { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--mm-s-8); }
  .cartpage-summary {
    position: sticky;
    top: calc(var(--mm-header-h) + var(--mm-s-4));
  }

  .mmc-contacto-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  #sucursalesView .mmc-cta-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--mm-s-8); }
  #nosotrosView .mmc-hero-inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  #nosotrosView .mmc-story { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  /* De columna lateral del hero: las cifras se apilan. */
  #nosotrosView .mmc-stats { grid-template-columns: minmax(0, 1fr); }

  .mmc-auth-panel { width: 48%; max-width: 640px; }
  .mmc-auth-body { padding-inline: 72px; }
  .mmc-auth-social { padding-inline: 72px; }
  .mmc-perfil-panel { width: 56%; max-width: 720px; }
}

/* ── 1280 — el resumen del checkout puede ensancharse ──────────────── */
@media (min-width: 1280px) {
  .mmc-checkout-grid { grid-template-columns: minmax(0, 1fr) 440px; }
}

/* ══════════════════════════════════════════════════════════════════════
   11 · MOVIMIENTO REDUCIDO
   ══════════════════════════════════════════════════════════════════════
   Los tokens de duracion ya valen 0ms aca, pero eso no alcanza para lo que
   no pasa por tokens: hay que apagar tambien las animaciones por nombre.
   Regla que no se negocia: los paneles y modales SIGUEN APARECIENDO — se
   quita el recorrido, nunca el contenido.                                */
@media (prefers-reduced-motion: reduce) {
  .cart-preview,
  .cart-preview.is-open,
  #cartDrawer,
  #cartDrawer:not(.translate-x-full),
  .mmc-iconbtn,
  #sucursalPopupGrid > button { transition: none; }

  #cartPreviewOverlay.is-open,
  #cartOverlay:not(.hidden),
  #favoritosModal:not(.hidden),
  #sucursalPopup:not(.hidden),
  .mmc-modal-card { animation: none; }

  .mmc-iconbtn:active,
  #sucursalPopupGrid > button:active { transform: none; }
}