/* ══════════════════════════════════════════════════════════════════════
   mm-home.css — Secciones del HOME (maqueta 2026)
   ══════════════════════════════════════════════════════════════════════
   Cubre, en este orden:
     1. Hero (cinta legal + carrusel del banner de marca)
     2. Propuesta de valor
     3. "Nueva importación"
     4. "La zona roja"
     5. "Todo nuestro catálogo"
     6. "Explora por categoría"
     7. "Nosotros" del home
     8. Carruseles del home

   Carga DESPUÉS de mm-base.css y mm-card.css. Los primitivos
   (.mm-container, .mm-section, .mm-grid, .mm-rail, .mm-rail-wrap,
   .mm-rail-arrow, .mm-btn-*, .mm-title, .mm-title-on-red, .mm-eyebrow,
   .mm-price, .mm-card) NO se redefinen aquí: sólo se consumen.

   Todos los valores salen de tokens.css. Si un valor no está allí, no
   se usa.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   1. HERO
   ══════════════════════════════════════════════════════════════════ */

.mm-hero {
  background: var(--mm-page);
}

/* Letra chica de la campaña vigente. Ya está impresa en el propio banner
   del cliente: la cinta sólo aparece desde 1024px, que es donde el tope
   de 420px recorta el borde superior del arte y se la lleva puesta.
   Por debajo de 1024 el banner entra completo y repetirla sería mostrar
   dos veces el mismo aviso. */
.mm-hero-legal {
  display: none;
  align-items: center;
  justify-content: center;
  height: 28px;
  margin: 0;
  padding: 0 var(--mm-s-4);
  background: var(--mm-band);
  color: var(--mm-red);
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-semi);
  line-height: var(--mm-lh-none);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

/* La cinta "CIERTAS CONDICIONES APLICAN" queda OCULTA siempre: ese aviso ya
   viene impreso en la parte superior del propio arte del banner, y ahora que
   el banner se ve completo mostrarlo aparte lo duplicaba. */

.mm-hero-carousel {
  position: relative;
  background: var(--mm-band);
}

.mm-hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Cada slide ocupa el 100% del track. El banner es 1280×720 (16/9): se
   respeta esa proporción y en desktop se topa la altura a 420px. */
.mm-hero-track .hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 4 / 3;
  background: var(--mm-band);
}

/* El arte es 16/9. Sólo en pantallas muy angostas se pasa a 4/3, donde una
   franja tan baja dejaría el mensaje ilegible; desde 480 ya toma su
   proporción real. */
@media (min-width: 480px) {
  .mm-hero-track .hero-slide { aspect-ratio: 16 / 9; }
}

.mm-hero-track .hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Móvil: el encuadre 4/3 recorta por los lados, así que se desplaza a
     la izquierda para conservar la mascota y el "60% OFF". */
  object-position: 38% center;
}

/* Escritorio: bloque ÚNICO del hero (antes eran tres min-1024 sueltos que
   se pisaban entre sí y ganaba el último por orden de archivo).
   - aspect-ratio/max-height: le ganan al `16/6 + max-height:560px` que
     ecommerce.css (legado) todavía le pone al .hero-slide desde 1024, que
     es lo que recortaba el arte arriba y abajo.
   - object-position: a lo ancho el recorte es vertical, no lateral, así
     que el encuadre vuelve al centro. */
@media (min-width: 1024px) {
  .mm-hero-track .hero-slide {
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: none;
    background: #bcbcbc;
  }

  .mm-hero-track .hero-slide img {
    object-fit: cover;
    object-position: center center;
  }
}

/* .mm-rail-arrow ya trae posición, aspecto y el ocultamiento en táctil.
   Aquí sólo se las mete DENTRO del banner (por defecto van media flecha
   por fuera del riel, que en el hero quedaría cortada). */
.mm-hero-arrow-prev { left: var(--mm-s-5); }
.mm-hero-arrow-next { right: var(--mm-s-5); }

.mm-hero-dots {
  position: absolute;
  bottom: var(--mm-s-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--mm-z-rail);
  display: flex;
  gap: var(--mm-s-2);
  padding: var(--mm-s-2) var(--mm-s-3);
  border-radius: var(--mm-r-full);
  background: var(--mm-overlay);
}

/* Con un solo banner, carousel.js pone [hidden] y display:flex tapa el
   display:none del UA. */
.mm-hero-dots[hidden] { display: none; }

.mm-hero-dots .hero-dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--mm-r-full);
  background: var(--mm-on-red-faint);
  cursor: pointer;
  /* Sólo el color se transiciona. El ancho (8px → 22px del punto activo)
     cambia de golpe A PROPÓSITO: el carrusel avanza solo, así que animar
     `width` acá era la única transición del sitio que forzaba un reflow
     del contenedor sin que nadie hubiera tocado nada, y para siempre.
     Los 14px de diferencia se leen igual instantáneos, y el fundido del
     fondo (140ms) alcanza para que el cambio no parezca un parpadeo. */
  transition: background-color var(--mm-dur-fast) var(--mm-ease);
}

/* Área táctil del punto sin agrandar el punto: alto de dedo completo y,
   a lo ancho, sólo hasta la mitad del gap — más ancho le robaría el toque
   al punto vecino, que es peor que un blanco chico. */
.mm-hero-dots .hero-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + var(--mm-s-2));
  height: var(--mm-tap, 44px);
  transform: translate(-50%, -50%);
}

.mm-hero-dots .hero-dot[aria-selected="true"] {
  width: 22px;
  background: var(--mm-surface);
}

.mm-hero-dots .hero-dot:focus-visible {
  outline: var(--mm-focus-ring);
  outline-offset: var(--mm-focus-offset);
}

/* ══════════════════════════════════════════════════════════════════
   2. PROPUESTA DE VALOR
   ══════════════════════════════════════════════════════════════════ */

.mm-valor {
  position: relative;
  padding: var(--mm-section-y) 0;
  background: var(--mm-band);
}

.mm-valor-inner {
  position: relative;
  z-index: var(--mm-z-base);
}

.mm-valor-grid {
  display: grid;
  /* Se acomoda sola: una columna en teléfono y dos desde tablet. El mínimo
     de 320px es lo que hace que NO entre una tercera antes de 1024, donde
     el conteo pasa a ser explícito. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  justify-content: center;
  gap: var(--mm-grid-gap);
}

@media (min-width: 1024px) {
  /* Conteo explícito: con auto-fit y sólo tres tarjetas, cada track se
     estiraba a ~520px y quedaban chatas y anchas. La maqueta las dibuja
     angostas y altas, así que se topan y se centran. */
  .mm-valor-grid { grid-template-columns: repeat(3, minmax(0, 380px)); }
}

.mm-valor-card {
  display: flex;
  flex-direction: column;
  padding: var(--mm-s-8) var(--mm-s-6);
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
  box-shadow: var(--mm-sh-card);
}

.mm-valor-title {
  margin: 0;
  color: var(--mm-text);
  font-size: var(--mm-t-lg);
  font-weight: var(--mm-w-regular);
  line-height: var(--mm-lh-snug);
}

.mm-valor-icon {
  display: grid;
  place-items: center;
  /* El disco tiene aspect-ratio 1: estirarlo lo volvería un óvalo, así
     que nunca crece. */
  flex: 0 0 auto;
  margin: var(--mm-s-6) 0;
  color: var(--mm-text-soft);
}

.mm-valor-icon svg {
  width: clamp(88px, 12vw, 120px);
  height: auto;
}

.mm-valor-copy {
  flex: 0 0 auto;
  margin: 0 0 var(--mm-s-6);
  color: var(--mm-text);
  font-size: var(--mm-t-sm);
  line-height: var(--mm-lh-normal);
  text-align: center;
}

.mm-valor-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--mm-ctl-h-touch);
  margin-top: auto;
  text-align: center;
  text-decoration: none;
}

/* La tarjeta mide su contenido en todos los anchos. El alto de 600px de la
   maqueta se repartiía con `flex: 1` entre ícono y copy, y como el texto se
   apoya arriba de su caja el reparto se veía como ~170px de hueco muerto
   justo encima del botón. Las tres siguen iguales de alto porque la grilla
   las estira a la más alta, y esa diferencia ya es sólo el renglón de más
   del título largo. */

/* ══════════════════════════════════════════════════════════════════
   3. "NUEVA IMPORTACIÓN"
   ══════════════════════════════════════════════════════════════════ */

.mm-nuevos-panel {
  position: relative;
  overflow: hidden;
  padding: var(--mm-s-6) var(--mm-s-5) var(--mm-s-8);
  border-radius: var(--mm-r-lg);
  background: var(--mm-peach);
}

@media (min-width: 768px) {
  .mm-nuevos-panel { padding: var(--mm-s-7) var(--mm-s-8) var(--mm-s-10); }
}

/* Retícula decorativa de la maqueta. Decoración pura: no es un dato. */
.mm-nuevos-panel::before {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 220px;
  height: 180px;
  background-image:
    repeating-linear-gradient(90deg, var(--mm-peach-deep) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg,  var(--mm-peach-deep) 0 1px, transparent 1px 34px);
  pointer-events: none;
}

.mm-nuevos-head {
  position: relative;
  z-index: var(--mm-z-base);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mm-s-4);
  margin-bottom: var(--mm-s-5);
}

.mm-nuevos-title {
  /* Hijo de flex: sin esto no baja de su min-content y empuja el adorno
     fuera del panel. */
  min-width: 0;
  margin: 0;
  color: var(--mm-ink);
  font-size: var(--mm-t-2xl);
  font-weight: var(--mm-w-bold);
  line-height: var(--mm-lh-tight);
}

.mm-nuevos-deco {
  display: none;
  flex: 0 1 auto;
  width: 118px;
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .mm-nuevos-deco { display: block; }
}

.mm-nuevos .mm-rail-wrap {
  position: relative;
  z-index: var(--mm-z-base);
}

/* ══════════════════════════════════════════════════════════════════
   4. "LA ZONA ROJA"
   ══════════════════════════════════════════════════════════════════ */

.mm-zona {
  padding: var(--mm-s-8) 0 var(--mm-s-10);
  background: var(--mm-red);
}

.mm-zona-title {
  margin: 0 0 var(--mm-s-5);
  color: var(--mm-on-red);
  font-size: var(--mm-t-2xl);
  font-weight: var(--mm-w-black);
  line-height: var(--mm-lh-tight);
}

/* El COMPRAR negro de la variante lo define mm-card.css
   (.mm-card--zona-roja). La clase se la pone js/ui/home.js a cada
   tarjeta después de pintarla. */

.mm-zona-imgwrap { position: relative; }

.mm-zona-flame {
  position: absolute;
  right: var(--mm-s-2);
  bottom: var(--mm-s-2);
  z-index: 2;
  font-size: 22px;
  line-height: var(--mm-lh-none);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   5. "TODO NUESTRO CATÁLOGO"
   ══════════════════════════════════════════════════════════════════ */

.mm-catalogo-home .mm-grid { margin-top: var(--mm-s-6); }

.mm-catalogo-home-more {
  display: flex;
  justify-content: center;
  margin-top: var(--mm-s-8);
}

/* ══════════════════════════════════════════════════════════════════
   6. "EXPLORÁ POR CATEGORÍA"
   ══════════════════════════════════════════════════════════════════ */

/* El id gana a la regla heredada de ecommerce.css (#categoryStrip). */
#categoryStrip.mm-catstrip {
  padding: var(--mm-section-y) 0;
}

.mm-cat-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mm-grid-gap);
  margin-top: var(--mm-s-6);
}

/* En telefono las dos columnas dejaban la baldosa tan estrecha que los
   nombres largos se partian a mitad de palabra ("FERRETER / IA"). Pasa a
   ser UNA SOLA FILA que se arrastra de lado: la baldosa gana ancho, el
   nombre entra entero, y es el mismo gesto que los carruseles del home y
   que la rejilla del listado de productos.

   `auto-flow: column` mas `grid-auto-columns` fija el ancho; sin lo
   segundo las baldosas se aplastarian para caber todas en la pantalla. */
@media (max-width: 767px) {
  .mm-cat-tiles {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--mm-s-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mm-cat-tiles::-webkit-scrollbar { display: none; }
  .mm-cat-tiles > .mm-cat-tile { scroll-snap-align: start; }
}

@media (min-width: 768px) {
  .mm-cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .mm-cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mm-cat-tile {
  display: flex;
  align-items: center;
  gap: var(--mm-s-3);
  min-height: 96px;
  padding: var(--mm-s-4) var(--mm-s-5);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
  text-align: left;
  cursor: pointer;
  transition: var(--mm-tr-color), var(--mm-tr-motion);
}

/* Detrás de la media query: en táctil el :hover se queda pegado después
   del tap y el tile se ve "elegido" hasta que tocás otro. */
@media (hover: hover) and (pointer: fine) {
  .mm-cat-tile:hover {
    transform: translateY(var(--mm-lift, -2px));
    border-color: var(--mm-red);
    box-shadow: var(--mm-sh-hover);
  }
}

/* El press SÍ va también en táctil: es el único acuse de recibo que tiene
   el dedo mientras la vista de categoría todavía no cambió. */
.mm-cat-tile:active { transform: scale(var(--mm-press, 0.97)); }

.mm-cat-tile:focus-visible {
  outline: var(--mm-focus-ring);
  outline-offset: var(--mm-focus-offset);
}

.mm-cat-tile-mono {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--mm-r-sm);
  background: var(--mm-band);
  color: var(--mm-text-soft);
  font-size: var(--mm-t-lg);
  font-weight: var(--mm-w-bold);
  line-height: var(--mm-lh-none);
}

.mm-cat-tile-name {
  /* min-width:0 para que el flex item pueda bajar de su min-content y no
     desborde la tarjeta.

     `break-word` y no `anywhere`: los dos dejan partir una palabra que no
     cabe, pero `anywhere` ademas la tiene en cuenta al calcular el ancho
     minimo, y por eso partia "FERRETERIA" aunque hubiera sitio. Con la
     baldosa ya ancha en movil, ninguna categoria real necesita romperse. */
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--mm-ink);
  font-size: var(--mm-t-lg);
  font-weight: var(--mm-w-semi);
  line-height: var(--mm-lh-snug);
}

/* ══════════════════════════════════════════════════════════════════
   7. "NOSOTROS" DEL HOME
   ══════════════════════════════════════════════════════════════════ */

.mm-nosotros {
  padding: var(--mm-section-y) 0;
  background: var(--mm-surface-2);
}

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

/* La columna de 280px para la mascota sólo se abre en escritorio: en tablet
   vertical le come el ancho al texto y el bloque deja de respirar. */
@media (min-width: 1024px) {
  .mm-nosotros-inner {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--mm-s-10);
  }
}

.mm-nosotros-acento { color: var(--mm-red); }

.mm-nosotros-copy {
  max-width: 62ch;
  margin: var(--mm-s-4) 0 0;
  color: var(--mm-text);
  font-size: var(--mm-t-base);
  line-height: var(--mm-lh-body);
}

/* Son cuatro cifras: 2×2 en teléfono y una sola fila desde tablet. Conteo
   explícito y no auto-fit, que a anchos intermedios dejaba 3 + 1 huérfana. */
.mm-nosotros-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mm-s-3);
  margin-top: var(--mm-s-7);
}

@media (min-width: 768px) {
  .mm-nosotros-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mm-s-4);
  }
}

.mm-nosotros-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mm-s-1);
  padding: var(--mm-s-5) var(--mm-s-3);
  border: 1px solid var(--mm-line-soft);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface);
  text-align: center;
  box-shadow: var(--mm-sh-card);
}

.mm-nosotros-stat-num {
  color: var(--mm-red);
  font-size: var(--mm-t-2xl);
  font-weight: var(--mm-w-black);
  line-height: var(--mm-lh-none);
}

.mm-nosotros-stat-label {
  color: var(--mm-text-soft);
  font-size: var(--mm-t-xs);
  font-weight: var(--mm-w-semi);
  letter-spacing: var(--mm-ls-copy);
  text-transform: uppercase;
}

.mm-nosotros-cta { margin-top: var(--mm-s-7); }

.mm-nosotros-mascota {
  justify-self: center;
  width: 100%;
  max-width: 200px;
  height: auto;
}

@media (min-width: 1024px) {
  .mm-nosotros-mascota { max-width: 260px; }
}

/* ══════════════════════════════════════════════════════════════════
   8. CARRUSELES DEL HOME
   ══════════════════════════════════════════════════════════════════
   .mm-rail-wrap, .mm-rail, .mm-rail-arrow y el ancho de las tarjetas
   del riel los define mm-base.css — incluidos el posicionamiento, el
   estado [hidden]/[disabled] y el ocultamiento en táctil. Aquí sólo se
   corrige el caso del panel durazno. */

/* El panel de "Nueva importación" recorta (overflow:hidden) para
   contener la retícula decorativa, así que sus flechas no pueden salir
   media flecha por fuera: van pegadas al borde interno del riel. */
.mm-nuevos .mm-rail-arrow-prev { left: 0; }
.mm-nuevos .mm-rail-arrow-next { right: 0; }

/* ──────────────────────────────────────────────────────────────────
   Tarjetas de valor: acabado.
   Van DEBAJO del banner, opacas, en su franja gris de siempre.
   Va al final del archivo para ganarle por orden a las reglas base.
   ────────────────────────────────────────────────────────────────── */
.mm-valor-card {
  position: relative;
  border-radius: var(--mm-r-lg);
  border-color: var(--mm-line-soft);
  overflow: hidden;
  transition: var(--mm-tr-color), var(--mm-tr-motion);
}

/* Filete rojo superior: aparece al pasar el mouse y ata la tarjeta a la
   identidad de marca sin ensuciarla en reposo. scaleX y no `width`: el
   ancho relayoutea la tarjeta entera en cada cuadro. */
.mm-valor-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--mm-red);
  transform: scaleX(0);
  transition: transform var(--mm-dur-base) var(--mm-ease-out);
}

/* El icono deja de ser gris suelto y pasa a vivir en un disco con el
   tinte de marca: da peso visual al centro de la tarjeta. */
.mm-valor-icon {
  width: clamp(140px, 15vw, 176px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--mm-r-full);
  background: var(--mm-red-tint);
  color: var(--mm-red);
  transition: var(--mm-tr-color);
}

/* Un solo gesto, una sola respuesta: la tarjeta se eleva, el filete entra
   y el disco se tiñe — las tres cosas al mismo tiempo y sobre el elemento
   que el mouse está tocando. NO hay `:active` en la tarjeta: el clic real
   ocurre en el CTA de adentro, que tiene su propio press; hundir además
   una caja de 600px sería confirmar dos veces el mismo gesto. */
@media (hover: hover) and (pointer: fine) {
  .mm-valor-card:hover {
    transform: translateY(var(--mm-lift, -2px));
    border-color: var(--mm-red-border);
    box-shadow: var(--mm-sh-hover);
  }

  .mm-valor-card:hover::before { transform: scaleX(1); }

  .mm-valor-card:hover .mm-valor-icon { background: #F7DCDD; }
}

.mm-valor-icon svg { width: clamp(64px, 7vw, 84px); }

.mm-valor-title {
  font-weight: var(--mm-w-semi);
  text-align: center;
}

.mm-valor-copy { text-align: center; }

/* ──────────────────────────────────────────────────────────────────
   ENTRADAS EN SCROLL — sólo ajustes locales
   Las primitivas `.reveal` / `.reveal-group` (recorrido, curva, escalonado,
   failsafe de 3s y movimiento reducido) las define tokens.css y NO se
   redeclaran acá. El markup del home sólo las consume, y siempre sobre
   nodos ESTÁTICOS: el observer de js/ui/animations.js consulta el DOM una
   única vez, así que nada de lo que pinta home.js (#nuevosHomeGrid,
   #destacadosHomeGrid, #catalogoHomeGrid, los tiles de categoría) puede
   llevar `.reveal` sin quedarse en opacity 0 para siempre.
   Ninguna sección necesitó reasignar tokens en scope local: con
   --mm-move-3 en el título/bloque y --mm-move-2 + 60ms de paso en los
   grupos, las siete entradas del home quedan parejas entre sí.
   ────────────────────────────────────────────────────────────────── */

/* Movimiento reducido: redundante con el interruptor por tokens de
   tokens.css, pero cubre el caso de que esta hoja se cargue sin él. */
@media (prefers-reduced-motion: reduce) {
  .mm-valor-card,
  .mm-valor-card::before,
  .mm-valor-icon,
  .mm-cat-tile { transition: none; }

  .mm-valor-card:hover,
  .mm-cat-tile:hover,
  .mm-cat-tile:active { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════
   "VER TODO" — salida al listado completo desde los carruseles del home
   ══════════════════════════════════════════════════════════════════
   El carrusel enseña un puñado de productos; sin esta salida el resto
   solo se alcanza empujando flechas. Se apoya en el mismo alto tactil
   que el resto de controles para que en telefono se pueda pulsar. */
.mm-ver-todo {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-s-2);
  min-height: var(--mm-ctl-h-touch);
  padding: 0 var(--mm-s-3);
  border-radius: var(--mm-r-sm);
  color: var(--mm-red);
  font-size: var(--mm-t-sm);
  font-weight: var(--mm-w-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--mm-tr-color);
}

/* Sobre el rojo de "La zona roja" el color de marca no se lee. */
.mm-ver-todo-claro { color: var(--mm-on-red); }

.mm-ver-todo-flecha { transition: transform var(--mm-dur-fast) var(--mm-ease-out); }

@media (hover: hover) and (pointer: fine) {
  .mm-ver-todo:hover { background: var(--mm-red-tint); }
  .mm-ver-todo-claro:hover { background: rgb(255 255 255 / 0.14); }
  .mm-ver-todo:hover .mm-ver-todo-flecha { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-ver-todo-flecha { transition: none; }
}

/* Cabecera de "La zona roja": titulo a la izquierda, salida a la
   derecha. En telefono se apilan — forzar la fila dejaria el titulo
   partido en tres lineas junto a un boton diminuto. */
.mm-zona-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mm-s-2) var(--mm-s-4);
}

/* Lo mismo en "Nueva importacion", que ya tenia su cabecera propia. */
.mm-nuevos-head {
  flex-wrap: wrap;
  gap: var(--mm-s-2) var(--mm-s-4);
}

/* Esa cabecera es `justify-content: space-between` y tenia DOS hijos: el
   titulo a la izquierda y el grafismo "NEW NEW NEW" pegado a la derecha.
   Al entrar "Ver todo" como tercero, el reparto dejaba el grafismo
   flotando en mitad de la fila. El margen automatico se come el hueco
   libre antes que space-between: el titulo y su adorno quedan juntos a la
   izquierda y la salida se va al borde derecho, que es su sitio. */
.mm-nuevos-head .mm-ver-todo { margin-left: auto; }


/* El disco de la tarjeta lleva un glifo de color. Va más grande que el
   monograma porque un emoji ocupa menos alto real que una letra dentro
   de su caja, y a 18px se veía perdido en un disco de 44px. La categoría
   sin glifo conserva su inicial: la misma caja sirve para las dos cosas,
   así la fila no se descuadra si aparece una nueva. */
.mm-cat-tile-mono {
  /* --mm-font sí detrás: la categoría sin glifo cae a su inicial y esa
     tiene que salir en la tipografía de marca, no en la de emoji. */
  font-family: var(--mm-font-emoji), var(--mm-font);
  font-size: 1.5rem;
}