/* ============================================================
   Ferrenmej - estilos.css
   Hoja de estilos completamente nueva, basada en el diseño de
   Google Stitch (DESIGN.md). Sin Tailwind ni frameworks: CSS
   propio, con variables de marca como sistema de tokens.
   ============================================================ */
:root {
  /* Naranja de marca con contraste suficiente: blanco sobre él da 5,1:1 (el #F15A24 original daba 3,4:1, por debajo del 4,5:1 que
     pide la accesibilidad para texto pequeño) y como texto sobre blanco y sobre los grises claros del sitio también cumple. El logo conserva su naranja original. */
  --color-primario: #C5400C;
  --color-primario-hover: #A93509;
  --color-secundario: #213d77;
  --color-terciario: #8E5B6A;

  --color-fondo: #f8f9fc;
  --superficie-mas-baja: #ffffff;
  --superficie-baja: #f4f3f8;
  --superficie: #efedf3;
  --superficie-alta: #e9e7ed;

  --texto-principal: #1a1b1f;
  --texto-secundario: #5a4139;
  --borde: #e6e8ec;
  --fm-banda-fondo: #edf1fa;
  --borde-suave: #e2bfb4;

  --fuente-display: 'Plus Jakarta Sans', sans-serif;
  --fuente-cuerpo: 'Inter', sans-serif;

  --radio-pill: 9999px;
  --radio-lg: 1.5rem;
  --radio-xl: 2rem;
  --radio-3xl: 2.5rem;

  --sombra-reposo: 0 4px 16px -2px rgba(30, 58, 110, 0.05);
  --sombra-hover: 0 12px 28px -4px rgba(30, 58, 110, 0.10);
  --sombra-flotante: 0 20px 40px -8px rgba(28, 29, 33, 0.16);

  --gutter: 1.25rem;
  --gutter-m: 0.75rem;
  --margen: 2rem;
  --margen-m: 1rem;
  --espacio-xs: 0.25rem;
  --espacio-sm: 0.5rem;
  --espacio-md: 1rem;
  --espacio-lg: 1.5rem;
  --espacio-xl: 2.5rem;

  /* Fluido: 1280px en pantallas normales y crece con el monitor (92% del ancho) hasta 2200px, para no dejar franjas vacías a los lados. */
  --contenedor-max: clamp(1280px, 92vw, 2200px);

  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  padding: 0;
  /* Red de seguridad contra desbordamiento horizontal en móvil: en
     conexiones lentas, el nombre crudo de los íconos (ej. "shopping_cart")
     se ve un instante como texto normal mientras carga la fuente Material
     Symbols, y puede ser más ancho que la pantalla. Eso hace que el
     navegador fije un viewport más ancho de lo real y deja toda la página
     corrida hacia la izquierda con un espacio vacío a la derecha, aunque el
     texto luego se vea bien. overflow-x:hidden evita que ese desborde
     momentáneo afecte el ancho de la página. */
  overflow-x: hidden;
}
/* Reserva siempre el lugar de la barra de desplazamiento (en computador): sin esto, una página corta (carrito vacío, "Mis pedidos" con pocos
   pedidos…) no tiene barra y su contenido se ensancha unos 15px, así que el encabezado y el pie "saltan" al pasar de una página larga a una corta. */
html { scrollbar-gutter: stable; }
/* Colores de marca en lo que el navegador dibuja solo (2026-10-28): la barra de la página en azul grisáceo sobre un riel casi blanco (el ANCHO no cambia: un scrollbar-width más
   fino cambiaría el espacio reservado de arriba y movería todo el diseño) y el texto seleccionado con un naranja suave. `scrollbar-color` se hereda: los demás elementos con scroll
   (carruseles, filas deslizables, listas) lo reponen a `auto` para seguir con su barra oculta (::-webkit-scrollbar) o la de siempre, y no mostrar una barra de color donde no la había. */
html { scrollbar-color: #7f90bb #eef1f8; }
body, body * { scrollbar-color: auto; }
::selection { background: rgba(197, 64, 12, 0.24); }
/* un <small> nunca baja de 12px (el tamaño por defecto, 83% del texto de al lado, daba 10-11px dentro de textos de 13px) */
small { font-size: max(0.75rem, 83%); }
@media (max-width: 640px) {
  html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
  }
}
/* Misma causa que el overflow-x:hidden de arriba: mientras la fuente
   Material Symbols no ha cargado, el navegador muestra el nombre del ícono
   como texto plano (ej. "shopping_cart"), que es mucho más ancho que el
   ícono real. Fijar la caja a 1em x 1em y recortar lo que sobre evita que
   ese texto de respaldo empuje el layout, sin esperar a que la fuente cargue. */
.material-symbols-outlined {
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
  /* El nombre del icono debe leerse en minúsculas: dentro de un botón con text-transform: uppercase el nombre pasaba a mayúsculas
     y la fuente reducida (solo los iconos usados) ya no lo reconocía como dibujo. */
  text-transform: none !important; /* !important: reglas como `.caja span { text-transform: uppercase }` también alcanzan al icono */
  letter-spacing: normal;
  white-space: nowrap;
}
body {
  background: var(--color-fondo);
  color: var(--texto-principal);
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  color: var(--color-secundario);
  margin: 0;
  letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
.fm-contenedor {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 0 var(--margen-m);
}
@media (min-width: 1200px) {
  .fm-contenedor { padding: 0 var(--margen); }
}
/* ---------- botones ---------- */
.fm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: var(--radio-pill);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--fuente-cuerpo);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.fm-btn--primario {
  background: var(--color-primario);
  color: #fff;
  box-shadow: 0 8px 20px -4px rgba(241, 90, 36, 0.35);
}
.fm-btn--primario:hover { background: var(--color-primario-hover); transform: scale(1.02); }
.fm-btn--secundario {
  background: var(--color-secundario);
  color: #fff;
}
.fm-btn--secundario:hover { background: #1a3160; transform: scale(1.02); }
.fm-btn--outline {
  background: transparent;
  border: 1.5px solid var(--borde);
  color: var(--color-secundario);
}
.fm-btn--outline:hover { background: var(--superficie-baja); }
.fm-btn:disabled {
  background: var(--superficie);
  color: var(--texto-secundario);
  box-shadow: none;
  cursor: not-allowed;
}
.fm-btn:disabled:hover { transform: none; }
/* ---------- header ---------- */
.fm-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--superficie-alta);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
  transition: box-shadow 0.2s ease;
}
/* Con la página bajada (solo PC, el encabezado de celular no es fijo): sombra suave debajo, sitio.js (marcarSombraEncabezado) pone la clase */
.fm-header--sombra { box-shadow: 0 8px 20px -10px rgba(30, 58, 110, 0.28); }
@media (prefers-reduced-motion: reduce) { .fm-header { transition: none; } }
/* El header pasa a estar fuera del flujo (position: fixed) para que ocultar
   el buscador/categorías nunca reacomode el resto de la página — eso era lo
   que causaba el parpadeo al hacer scroll lento. sitio.js mide la altura
   completa del header y la guarda en --fm-header-alto; ese valor no cambia
   aunque el header se vuelva compacto, así el contenido de abajo nunca se
   mueve, solo queda al descubierto el espacio que el header deja libre. */
main { padding-top: var(--fm-header-alto, 10.5rem); }
/* Celular (<=767px): el header NO se queda fijo. Es parte de la página: sale con el scroll igual que todo lo demás y vuelve a
   verse solo al regresar arriba del todo. Sigue "absolute" (fuera del flujo) para que main conserve su padding-top y la página
   no se reacomode; tampoco entra en modo compacto (ver inicializarHeaderScroll en sitio.js). */
@media (max-width: 767px) {
  .fm-header { position: absolute; }
}
.fm-header-fila {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 0.85rem var(--margen-m);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
@media (min-width: 1200px) {
  .fm-header-fila {
    padding: 0.85rem var(--margen);
    display: grid;
    grid-template-columns: 1fr 32rem 1fr;
  }
  .fm-marca { justify-self: start; }
  .fm-buscador-wrap { justify-self: stretch; width: 100%; }
  .fm-acciones { justify-self: end; margin-left: 0; }
}
@media (min-width: 1600px) {
  .fm-header-fila { grid-template-columns: 1fr 40rem 1fr; }
}
.fm-marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.fm-logo-icono { width: 32px; height: 32px; object-fit: contain; }
.fm-logo-texto { height: 24px; object-fit: contain; }
.fm-buscador-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
  order: 3;
  max-height: 3rem;
  /* Sin overflow:hidden: el desplegable de resultados es hijo absoluto de este contenedor y se cortaba (nunca se veía). */
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.fm-header--compacto .fm-buscador-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 900px) {
  .fm-buscador-wrap { order: 0; max-width: 32rem; }
/* En escritorio el buscador se queda siempre visible; solo se oculta
     en móvil al bajar el scroll. */
  .fm-header--compacto .fm-buscador-wrap {
    max-height: 3rem;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
  }
}
/* La lupa de adentro del campo se quitó (2026-10-28, a pedido del dueño): el botón naranja "Buscar" ya dice para qué sirve el campo.
   El <span> sigue en el HTML de las ~5,000 páginas (no se regeneran), por eso se oculta con CSS. */
.fm-buscador-icono { display: none; }
.fm-buscador-input {
  width: 100%;
  height: 2.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  background: var(--superficie-baja);
  padding: 0 6.5rem 0 1.25rem;
  font-size: 0.9rem;
  font-family: var(--fuente-cuerpo);
  outline: none;
}
.fm-buscador-input:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.15);
}
.fm-buscador-btn {
  position: absolute;
  right: 0.3rem;
  top: 0.3rem;
  bottom: 0.3rem;
  border: none;
  border-radius: var(--radio-pill);
  background: var(--color-primario);
  color: #fff;
  padding: 0 1.1rem;
  font-weight: 600;
  font-size: 0.85rem;
}
.fm-buscador-btn:hover { background: var(--color-primario-hover); }
.fm-buscador-resultados {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-flotante);
  overflow: hidden;
  z-index: 60;
  /* Sin barra deslizadora (2026-10-20, pedido del dueño): los 8 resultados caben enteros. Solo queda un tope por si la pantalla es muy baja; si hiciera falta
     deslizar, se puede (rueda o dedo) pero sin barra a la vista. */
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fm-buscador-resultados::-webkit-scrollbar { display: none; }
/* Cada resultado es solo el nombre del producto (sin ícono ni precio), hasta en dos líneas para que se lea completo. */
.fm-buscador-item {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--superficie);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--texto-principal);
}
.fm-buscador-item:last-child { border-bottom: none; }
.fm-buscador-item:hover { background: var(--superficie-baja); }
/* Desplegable del buscador sin texto o sin resultados: búsquedas recientes, sugerencias y categorías en forma de chips. */
.fm-buscador-sinresultados { margin: 0; padding: 0.85rem 1rem 0.2rem; font-size: 0.85rem; color: var(--texto-principal); font-weight: 600; }
.fm-buscador-grupo { padding: 0.7rem 1rem 0.8rem; }
.fm-buscador-grupo + .fm-buscador-grupo { border-top: 1px solid var(--superficie); }
.fm-buscador-grupo-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--texto-secundario);
}
.fm-buscador-borrar {
  border: none; background: none; padding: 0.2rem 0.4rem; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--color-primario-hover); text-decoration: underline;
}
.fm-buscador-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fm-buscador-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; padding: 0.25rem 0.75rem;
  border: 1px solid var(--borde); border-radius: var(--radio-pill); background: var(--superficie-baja);
  font-size: 0.85rem; color: var(--texto-principal);
}
.fm-buscador-chip:hover { border-color: var(--color-primario); background: var(--superficie); }
.fm-buscador-chip-n { font-size: 0.75rem; color: var(--texto-secundario); }
.fm-catalogo-vacio-sugerencias { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 36rem; }
.fm-catalogo-vacio-sugerencias[hidden] { display: none; }
.fm-catalogo-vacio-sugerencias .fm-buscador-chips { justify-content: center; }
.fm-catalogo-vacio-titulo { margin: 0.4rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--texto-principal); }
@media (max-width: 767px) {
  .fm-buscador-chip { min-height: 2.5rem; padding: 0.4rem 0.9rem; }
  .fm-buscador-borrar { min-height: 2.5rem; padding: 0.4rem 0.6rem; }
}
.fm-acciones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  margin-left: auto;
}
.fm-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: var(--radio-pill);
  background: var(--color-primario);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fm-carrito-btn,
.fm-cuenta-btn {
  position: relative;
  height: 2.75rem;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}
.fm-carrito-btn { padding-left: 1rem; padding-right: 1rem; }
.fm-cuenta-btn { padding-left: 1.1rem; padding-right: 1.1rem; }
.fm-badge--claro {
  position: static;
  background: rgba(255, 255, 255, 0.25);
  margin-left: 0.15rem;
}
@media (max-width: 640px) {
  #fm-cuenta-texto { display: none; }
  .fm-cuenta-btn {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .fm-carrito-btn { padding-left: 0.7rem; padding-right: 0.7rem; }
}
@media (max-width: 480px) {
  .fm-header-fila { gap: 0.6rem; padding-top: 0.65rem; padding-bottom: 0.65rem; }
  .fm-logo-icono { width: 24px; height: 24px; }
  .fm-logo-texto { height: 16px; }
  .fm-carrito-btn, .fm-cuenta-btn { height: 2.35rem; }
  .fm-cuenta-btn { width: 2.35rem; }
  .fm-carrito-btn { padding-left: 0.6rem; padding-right: 0.6rem; }
}
.fm-pill-nav {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  /* 0.4rem de aire arriba (compensados con el margen negativo, la altura del encabezado no cambia): la fila hace overflow-x:auto, que también
     recorta por arriba, y al pasar el cursor el botón sube 1px y su borde quedaba cortado */
  padding: 0.4rem var(--margen-m) 0.75rem;
  margin-top: -0.4rem;
  display: flex;
  justify-content: space-between; /* la primera y la última quedan en los bordes del encabezado */
  gap: 0.6rem;
  overflow-x: auto;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-height: 3.5rem;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin 0.25s ease;
}
.fm-header--compacto .fm-pill-nav {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}
.fm-pill-nav::-webkit-scrollbar { display: none; }
/* La fila de botones de categoría del encabezado NO se muestra en ninguna página (2026-10-28, a pedido del dueño: primero la quitó de la portada porque la
   cuadrícula "Categorías principales" repite 6 de los 8 y luego de todas las demás). El <nav id="fm-pill-nav"> sigue en el HTML de las ~5,000 páginas y
   sitio.js lo sigue rellenando (no se regeneran páginas), por eso se oculta con CSS; los estilos de los botones de más abajo quedan dormidos.
   Para devolver la fila basta borrar esta regla. */
.fm-header .fm-pill-nav { display: none; }
@media (min-width: 1200px) {
  .fm-pill-nav { padding: 0.4rem var(--margen) 0.75rem; }
}
/* Botones de categorías del encabezado (rediseño 2026-10-16): pastilla blanca con borde azul suave, el ícono de la categoría en un círculo
   naranja claro, texto azul en negrita. Al pasar el cursor se tiñe de naranja y sube un poco; la categoría que estás viendo (aria-current,
   la marca sitio.js: marcarCategoriaActivaEncabezado) va rellena de azul con letra blanca. Entre 768 y 1249px los íconos se ocultan para que
   las 8 quepan sin deslizar (de 768 a 1249px; por debajo de ~1075px ni así caben y se deslizan). Los íconos salen de ICONOS_POR_CATEGORIA, que ya están en la fuente reducida. */
.fm-pill-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: var(--color-secundario);
  border: 1.5px solid rgba(33, 61, 119, 0.16);
  padding: 0.26rem 0.8rem 0.26rem 0.25rem;
  border-radius: var(--radio-pill);
  font-weight: 700;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.fm-pill-icono {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fdf1ec;
  color: var(--color-primario);
  font-size: 17px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.fm-pill-nav a:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
@media (hover: hover) {
  .fm-pill-nav a:hover { background: #fdf1ec; border-color: var(--color-primario); transform: translateY(-1px); box-shadow: 0 5px 12px -6px rgba(197, 64, 12, 0.55); }
  .fm-pill-nav a:hover .fm-pill-icono { background: var(--color-primario); color: #fff; }
}
.fm-pill-nav a[aria-current="page"] { background: var(--color-secundario); border-color: var(--color-secundario); color: #fff; }
.fm-pill-nav a[aria-current="page"] .fm-pill-icono { background: #F15A24; color: #fff; }
@media (min-width: 768px) and (max-width: 1249px) {
  .fm-pill-nav .fm-pill-icono { display: none; }
  .fm-pill-nav a { padding: 0.4rem 0.9rem; }
}
@media (min-width: 1250px) and (max-width: 1299px) {
  /* con ícono los 8 necesitan ~1250px: de 1250 a 1299px se aprieta un poco el espacio para que sobren ~20px incluso con letra algo más ancha
     (una ventana de 1280px con barra de desplazamiento deja ~1265px útiles, que es lo que usa el dueño) */
  .fm-pill-nav { gap: 0.5rem; }
  .fm-pill-nav a { gap: 0.35rem; padding-right: 0.7rem; }
}
@media (min-width: 768px) and (max-width: 1074px) {
  /* ni sin íconos caben los 8: se deslizan, y el degradado de la derecha lo insinúa (igual que en celular) */
  .fm-pill-nav {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fm-pill-nav a, .fm-pill-icono { transition: none; }
  .fm-pill-nav a:hover { transform: none; }
}
/* ---------- header en celular (<=767px): más limpio y bajo ----------
   Logo un poco más grande; cuenta y carrito como dos círculos iguales (el carrito, naranja = acción principal; su contador
   es un puntito en la esquina y desaparece con el carrito vacío); el buscador deja de llevar un botón naranja con texto y
   usa una lupa pequeña azul (así el naranja queda solo en el carrito); categorías más bajas con un degradado a la derecha
   que insinúa que se deslizan. Escritorio no cambia. */
@media (max-width: 767px) {
  .fm-header-fila { gap: 0.55rem 0.6rem; padding-top: 0.6rem; padding-bottom: 0.5rem; }
  .fm-logo-icono { width: 30px; height: 30px; }
  .fm-logo-texto { height: 19px; }
  .fm-acciones { gap: 0.5rem; }
  #fm-cuenta-texto { display: none; }
  .fm-cuenta-btn, .fm-carrito-btn {
    width: 2.6rem; height: 2.6rem; padding: 0; justify-content: center; gap: 0; border-radius: 50%;
  }
  .fm-carrito-btn { box-shadow: 0 3px 10px rgba(241, 90, 36, 0.3); }
  .fm-carrito-btn .fm-badge--claro {
    position: absolute; top: -0.2rem; right: -0.2rem; margin: 0;
    min-width: 1.3rem; height: 1.3rem; padding: 0 0.28rem;
    background: #fff; color: var(--color-primario); border: 1.5px solid var(--color-primario);
    font-size: 0.75rem; line-height: 1;
  }
  .fm-carrito-btn .fm-badge--vacio { display: none; }
  .fm-buscador-input { height: 2.5rem; padding: 0 3rem 0 1.05rem; font-size: 0.9rem; }
  .fm-buscador-btn {
    right: 0.25rem; top: 0.25rem; bottom: 0.25rem; width: 2rem; padding: 0; font-size: 0;
    display: flex; align-items: center; justify-content: center; background: var(--color-secundario);
  }
  .fm-buscador-btn:hover { background: #1a3160; }
  .fm-buscador-btn::after { content: ''; position: absolute; inset: -0.4rem; }   /* la lupa se ve de 32px pero se toca en ~45px (el área táctil mínima es 40px): un margen invisible a su alrededor, como en los botones de categoría */
  .fm-buscador-btn::before {
    content: 'search'; font-family: 'Material Symbols Outlined'; font-size: 20px; line-height: 1; color: #fff;
    font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  }
  .fm-pill-nav {
    gap: 0.5rem; padding-bottom: 0.6rem; font-size: 0.78rem;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .fm-pill-nav a { padding: 0.2rem 0.8rem 0.2rem 0.25rem; gap: 0.4rem; }
  .fm-pill-icono { width: 1.45rem; height: 1.45rem; font-size: 16px; }
/* Área táctil de 40px de alto (los chips se ven de 28px): un margen invisible alrededor de cada uno. El padding-top del contenedor lo
     compensa un margen negativo para que la altura del encabezado no cambie y el recorte del scroll no corte la zona táctil. */
  .fm-pill-nav { padding-top: 0.4rem; margin-top: -0.4rem; }
  .fm-pill-nav a { position: relative; }
  .fm-pill-nav a::after { content: ''; position: absolute; inset: -6px -3px; }
}
/* pantallas muy angostas (320-359px): logo y botones un poco más chicos para que quepan en una sola línea */
@media (max-width: 359px) {
  .fm-logo-icono { width: 26px; height: 26px; }
  .fm-logo-texto { height: 16px; }
  .fm-acciones { gap: 0.4rem; }
  .fm-cuenta-btn, .fm-carrito-btn { width: 2.4rem; height: 2.4rem; }
}
/* ---------- hero (portada) ----------
   Dos diseños del dueño, cada uno con su propio <h1> y su propia foto: el de CELULAR (hasta 767px, .fm-hero-mov) y el de ESCRITORIO
   (desde 768px, .fm-hero-esc: en tablet apila el texto sobre la foto; desde 1024px va en dos columnas). El que no se ve se oculta con
   display:none y su foto NO se descarga (cada <picture> trae un <source media> con un GIF de 1px para los otros anchos, mira index.html).
   Colores y tipografía salen de los tokens (--fuente-display = Plus Jakarta Sans); los degradados claros (#fdf1ec, #4a5878, #dcdfea…) son del diseño. */
.fm-hero-mov, .fm-hero-esc { position: relative; overflow: hidden; background: #fff; color: var(--color-secundario); font-family: var(--fuente-display); }
.fm-hero-esc { display: none; }
.fm-hero-puntos { position: absolute; inset: 0; background-image: radial-gradient(#dcdfea 1.2px, transparent 1.2px); background-size: 22px 22px; pointer-events: none; }
.fm-hero-mov picture, .fm-hero-esc picture { display: block; width: 100%; height: 100%; }
.fm-hero-mov img, .fm-hero-esc img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- celular (hasta 767px) --- */
.fm-hero-mov-grid {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem var(--margen-m) 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.fm-hero-mov-etiqueta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  border-radius: var(--radio-pill);
  background: #fdf1ec;
  color: #9a3209;
  font-size: 0.75rem;
  font-weight: 700;
}
.fm-hero-mov-etiqueta span {
  background: var(--color-primario);
  color: #fff;
  border-radius: var(--radio-pill);
  padding: 0.1875rem 0.5625rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fm-hero-mov-titulo {
  margin: 0;
  font-size: clamp(2.25rem, 11.8vw, 2.875rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--color-secundario);
}
.fm-hero-acento { position: relative; display: inline-block; color: var(--color-primario); }
.fm-hero-acento svg { position: absolute; left: 0; right: 0; bottom: -8px; width: 100%; height: 12px; }
.fm-hero-punto { color: var(--color-primario); }
.fm-hero-mov-copy { margin: 0; font-size: 1rem; line-height: 1.6; color: #4a5878; text-wrap: pretty; }
.fm-hero-mov-visual { position: relative; height: clamp(224px, 50vw, 330px); margin-top: 0.4rem; }   /* 340-460px antes: la portada en celular medía 893px, más que la pantalla */
.fm-hero-mov-panel { position: absolute; top: 22px; right: 0; width: 82%; height: 84%; background: var(--color-secundario); border-radius: 26px; transform: rotate(4deg); }
.fm-hero-mov-cuadro { position: absolute; top: -10px; left: 0; width: 72px; height: 72px; border-radius: 18px; background: var(--color-primario); transform: rotate(-8deg); }
.fm-hero-mov-regla {
  position: absolute;
  left: 2%;
  bottom: 6px;
  width: 62%;
  height: 22px;
  background-color: var(--color-primario);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 2px, transparent 2px 10px), repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 50px);
  background-size: 100% 7px, 100% 12px;
  background-repeat: no-repeat;
  border-radius: 4px;
  transform: rotate(-3deg);
  box-shadow: 0 10px 20px rgba(33, 61, 119, 0.25);
  z-index: 3;
}
.fm-hero-mov-marco {
  position: absolute;
  top: 0;
  left: 6%;
  right: 3%;
  bottom: 32px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(33, 61, 119, 0.3);
  border: 5px solid #fff;
  z-index: 2;
}
.fm-hero-mov-dato {
  position: absolute;
  left: 0;
  bottom: 58px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--color-secundario);
  color: #fff;
  border-radius: 14px;
  padding: 0.625rem 0.875rem 0.625rem 0.625rem;
  box-shadow: 0 16px 36px rgba(33, 61, 119, 0.35);
}
.fm-hero-mov-dato > span { flex: none; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); display: grid; place-items: center; }
.fm-hero-mov-dato > div { display: flex; flex-direction: column; gap: 1px; }
.fm-hero-mov-dato strong { font-size: 0.8125rem; font-weight: 800; display: flex; align-items: center; gap: 0.375rem; }
.fm-hero-mov-dato strong i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.fm-hero-mov-dato > div > span { font-size: 0.75rem; color: #d3dbee; }
.fm-hero-sellos {
  list-style: none;
  margin: 0;
  padding: 1.125rem 0 0;
  border-top: 1px solid #ecebf1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fm-hero-sellos li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; font-weight: 700; }
.fm-hero-sellos li > span[aria-hidden="true"] { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #fdf1ec; display: grid; place-items: center; }
/* celular: los tres sellos son UNA fila de píldoras que se desliza (de 150px de alto a ~46px); se pegan a los bordes de la pantalla y la siguiente asoma como pista */
.fm-hero-mov .fm-hero-sellos {
  flex-direction: row; align-items: center; gap: 0.5rem;
  margin: 0 calc(-1 * var(--margen-m)); padding: 0.75rem var(--margen-m) 0.125rem;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--margen-m); scrollbar-width: none; -webkit-overflow-scrolling: touch;   /* scroll-padding: sin él el primer sello se pegaba al borde izquierdo de la pantalla al alinearse con el scroll */
}
.fm-hero-mov .fm-hero-sellos::-webkit-scrollbar { display: none; }
.fm-hero-mov .fm-hero-sellos li { flex: none; scroll-snap-align: start; gap: 0.5rem; padding: 0.3rem 0.8rem 0.3rem 0.3rem; border: 1px solid #ecebf1; border-radius: var(--radio-pill); background: #fff; font-size: 0.8125rem; white-space: nowrap; }
.fm-hero-mov .fm-hero-sellos li > span[aria-hidden="true"] { width: 28px; height: 28px; border-radius: 50%; }

/* --- escritorio y tablet (desde 768px) --- */
@media (min-width: 768px) {
  .fm-hero-mov { display: none; }
  .fm-hero-esc { display: block; }
  .fm-hero-puntos { background-size: 26px 26px; }
}
.fm-hero-esc-grid {
  position: relative;
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 3.5rem var(--margen-m) 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* tablet: el texto arriba y la foto debajo (como el diseño, que se apila cuando no caben dos columnas) */
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  /* El relleno y la altura de la foto dependen de la altura de la ventana: en una laptop de ~900px el hero ya no se come toda la primera pantalla y se asoma la sección de categorías. */
  .fm-hero-esc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 4.4vw, 4rem); padding-top: clamp(2.25rem, 5vh, 4.5rem); padding-bottom: clamp(2.75rem, 6vh, 5.5rem); }
}
@media (min-width: 1200px) {
  .fm-hero-esc-grid { padding-left: var(--margen); padding-right: var(--margen); }
}
.fm-hero-esc-texto { display: flex; flex-direction: column; gap: 1.625rem; min-width: 0; }
.fm-hero-esc-etiqueta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0.4375rem 0.875rem 0.4375rem 0.5rem;
  border-radius: var(--radio-pill);
  background: #fdf1ec;
  color: #9a3209;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.fm-hero-esc-etiqueta span {
  background: var(--color-primario);
  color: #fff;
  border-radius: var(--radio-pill);
  padding: 0.1875rem 0.625rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fm-hero-esc-titulo {
  margin: 0;
  font-size: clamp(2.875rem, 5.8vw, 5.375rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--color-secundario);
}
.fm-hero-esc .fm-hero-acento svg { bottom: -10px; height: 16px; }
.fm-hero-esc-copy { margin: 0; max-width: 32.5rem; font-size: 1.1875rem; line-height: 1.6; color: #4a5878; text-wrap: pretty; }
.fm-hero-esc .fm-hero-sellos { flex-direction: row; flex-wrap: wrap; margin-top: 0.375rem; padding-top: 1.375rem; gap: 0.875rem 1.875rem; }
.fm-hero-esc-visual { position: relative; min-height: clamp(440px, 54vh, 580px); }
.fm-hero-esc-panel { position: absolute; top: 30px; right: 0; width: 80%; height: 86%; background: var(--color-secundario); border-radius: 36px; transform: rotate(4deg); }
.fm-hero-esc-cuadro { position: absolute; top: -14px; left: 0; width: 120px; height: 120px; border-radius: 28px; background: var(--color-primario); transform: rotate(-8deg); }
.fm-hero-esc-regla {
  position: absolute;
  left: 2%;
  bottom: 8px;
  width: 64%;
  height: 30px;
  background-color: var(--color-primario);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 2px, transparent 2px 12px), repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 60px);
  background-size: 100% 9px, 100% 16px;
  background-repeat: no-repeat;
  border-radius: 5px;
  transform: rotate(-3deg);
  box-shadow: 0 12px 26px rgba(33, 61, 119, 0.25);
  z-index: 3;
}
.fm-hero-esc-marco {
  position: absolute;
  top: 0;
  left: 7%;
  right: 4%;
  bottom: 44px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(33, 61, 119, 0.3);
  border: 6px solid #fff;
  z-index: 2;
}
.fm-hero-esc-dato {
  position: absolute;
  left: 0;
  bottom: 96px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-secundario);
  color: #fff;
  border-radius: 18px;
  padding: 0.875rem 1.25rem 0.875rem 1rem;
  box-shadow: 0 20px 50px rgba(33, 61, 119, 0.35);
}
.fm-hero-esc-dato > span { flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); display: grid; place-items: center; }
.fm-hero-esc-dato > div { display: flex; flex-direction: column; gap: 2px; }
.fm-hero-esc-dato strong { font-size: 0.9375rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.fm-hero-esc-dato strong i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.fm-hero-esc-dato > div > span { font-size: 0.8125rem; color: #d3dbee; }
/* --- animación del hero ---
   Entrada escalonada (el texto sube, las formas de color entran y se acomodan, el subrayado se dibuja) y un poco de vida después: el cuadro naranja
   flota, la foto se acerca despacio y el punto verde de "Datos reales" late. Solo si la persona NO pidió "reducir movimiento"; sin eso queda la imagen
   final, sin nada moviéndose. Solo transform/opacity (no mueve nada de sitio) y el texto y la foto NO se desvanecen: sólo se deslizan, para no atrasar
   lo que el navegador cuenta como "ya se ve la página". Las animaciones que no terminan (flotar, acercar, latir) usan solo transform/opacity de elementos chicos. */
@media (prefers-reduced-motion: no-preference) {
  .fm-hero-mov-etiqueta, .fm-hero-esc-etiqueta { animation: fm-hero-sube 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) 0.05s backwards; }
  .fm-hero-mov-titulo, .fm-hero-esc-titulo { animation: fm-hero-sube 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.15s backwards; }
  .fm-hero-mov-copy, .fm-hero-esc-copy { animation: fm-hero-sube 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.3s backwards; }
  .fm-hero-sellos { animation: fm-hero-sube 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.45s backwards; }
  .fm-hero-mov-marco, .fm-hero-esc-marco { animation: fm-hero-foto 0.85s cubic-bezier(0.22, 0.8, 0.3, 1) 0.2s backwards; }
  .fm-hero-mov-panel, .fm-hero-esc-panel { animation: fm-hero-panel 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) 0.1s backwards; }
  .fm-hero-mov-cuadro, .fm-hero-esc-cuadro {
    animation: fm-hero-cuadro 0.75s cubic-bezier(0.3, 1.4, 0.5, 1) 0.45s backwards, fm-hero-flota 6s ease-in-out 1.4s infinite alternate;
  }
  .fm-hero-mov-regla, .fm-hero-esc-regla { animation: fm-hero-regla 0.8s cubic-bezier(0.22, 0.8, 0.3, 1) 0.6s backwards; }
  .fm-hero-mov-dato, .fm-hero-esc-dato { animation: fm-hero-dato 0.6s cubic-bezier(0.3, 1.3, 0.5, 1) 0.9s backwards; }
  .fm-hero-acento path { stroke-dasharray: 1; animation: fm-hero-dibuja 0.9s ease-out 0.8s backwards; }
  .fm-hero-mov-marco img, .fm-hero-esc-marco img { animation: fm-hero-zoom 14s ease-in-out 1.2s infinite alternate; }
  .fm-hero-mov-dato strong i, .fm-hero-esc-dato strong i { position: relative; }
  .fm-hero-mov-dato strong i::after, .fm-hero-esc-dato strong i::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #4ade80;
    animation: fm-hero-pulso 2s ease-out 1.6s infinite;
  }
}
@keyframes fm-hero-sube { from { transform: translateY(20px); } }
@keyframes fm-hero-foto { from { transform: translateY(26px) scale(0.95); } }
@keyframes fm-hero-panel { from { transform: translateX(40px) rotate(0deg); opacity: 0; } }
@keyframes fm-hero-cuadro { from { transform: translateY(-26px) rotate(-28deg) scale(0.55); opacity: 0; } }
@keyframes fm-hero-flota { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(-4deg) translateY(-7px); } }
@keyframes fm-hero-regla { from { transform: translateX(-70px) rotate(-3deg); opacity: 0; } }
@keyframes fm-hero-dato { from { transform: translateY(18px) scale(0.9); opacity: 0; } }
@keyframes fm-hero-dibuja { from { stroke-dashoffset: 1; } }
@keyframes fm-hero-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes fm-hero-pulso { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2.8); opacity: 0; } }

/* ---------- ofertas reales ---------- */
.producto-oferta-etiqueta {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radio-pill);
  background: var(--color-primario);
  color: #fff;
  font-family: var(--fuente-display);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 4px 10px rgba(197, 64, 12, 0.3);
}
.fm-producto-precio-original { font-size: 1.05rem; font-weight: 600; color: var(--texto-secundario); text-decoration: line-through; }
.fm-producto-oferta-nota { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; font-size: 0.85rem; color: #9a3209; }
.fm-producto-oferta-nota strong { padding: 0.1rem 0.55rem; border-radius: var(--radio-pill); background: #fdf1ec; font-family: var(--fuente-display); font-weight: 800; }
@media (max-width: 767px) {
  .fm-producto-precio-original { font-size: 0.9rem; }
  .fm-producto-oferta-nota { font-size: 0.8rem; }
}

/* ---------- títulos de sección ---------- */
.fm-seccion-titulo {
  margin-top: 4.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .fm-seccion-titulo { margin-top: 3rem; margin-bottom: 1rem; }
}
/* ---------- franjas de la portada ----------
   Las secciones de la portada se alternan entre el fondo de la página y una franja azul muy suave que ocupa TODO el ancho de la ventana
   (así la página no se siente uniforme de arriba a abajo). La franja se dibuja con una sombra enorme recortada solo hacia los lados:
   no cambia el marcado ni provoca scroll horizontal (las sombras no cuentan como contenido). El relleno de arriba y de abajo reemplaza el
   margen que tenía el título, así que el espacio entre secciones es el mismo de antes. Quién lleva la franja lo reparte sitio.js
   (alternarBandasPortada) entre las secciones que se ven: ofertas, más vendidos y "visto recientemente" aparecen y desaparecen solas. */
.fm-banda { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.fm-banda .fm-seccion-titulo { margin-top: 0; }
.fm-banda--suave {
  background: var(--fm-banda-fondo);
  box-shadow: 0 0 0 100vmax var(--fm-banda-fondo);
  clip-path: inset(0 -100vmax);
}
@media (max-width: 640px) {
  .fm-banda { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}
.fm-eyebrow {
  display: block;
  color: var(--color-primario);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}
/* Rediseño 2026-10-16 (portada): barra vertical naranja de marca a la izquierda del bloque (la misma barrita de las tarjetas de categoría), etiqueta naranja en
   mayúsculas, título grande en azul (peso 800) y "Ver todas" como botón de contorno que se llena de azul al pasar el cursor. Solo la portada usa .fm-seccion-titulo. */
.fm-seccion-titulo > div:first-child { position: relative; padding-left: 1.05rem; }
.fm-seccion-titulo > div:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.12rem;
  bottom: 0.12rem;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #F15A24, var(--color-primario));
}
.fm-seccion-titulo .fm-eyebrow { font-weight: 800; font-size: 0.75rem; letter-spacing: 0.12em; margin-bottom: 0.3rem; }
.fm-seccion-titulo h2 {
  font-size: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.fm-enlace-ver-todas {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem 0.45rem 1rem;
  border: 1.5px solid rgba(33, 61, 119, 0.28);
  border-radius: var(--radio-pill);
  background: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-secundario);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fm-enlace-ver-todas .material-symbols-outlined { font-size: 18px; transition: transform 0.2s ease; }
.fm-enlace-ver-todas:focus-visible { background: var(--color-secundario); border-color: var(--color-secundario); color: #fff; }
@media (hover: hover) {
  .fm-enlace-ver-todas:hover { background: var(--color-secundario); border-color: var(--color-secundario); color: #fff; }
  .fm-enlace-ver-todas:hover .material-symbols-outlined { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .fm-enlace-ver-todas, .fm-enlace-ver-todas .material-symbols-outlined { transition: none; }
  .fm-enlace-ver-todas:hover .material-symbols-outlined { transform: none; }
}
.fm-seccion-nota { font-size: 0.8rem; color: var(--texto-secundario); }
/* ---------- categorías ----------
   Tarjetas de "Categorías principales" (portada). El título de cada una lleva: una barrita naranja de marca que se alarga al pasar el cursor,
   el nombre grande, cuántos productos hay y una flecha naranja que aparece al pasar/enfocar (en pantallas táctiles siempre visible).
   Con foto: degradado azul de marca para que el texto se lea siempre; sin foto: ícono grande en una cajita + el mismo ícono enorme y tenue de fondo. */
.fm-categorias-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .fm-categorias-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .fm-categorias-grid { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
}
@media (min-width: 1800px) {
  .fm-categorias-grid { grid-template-columns: repeat(8, 1fr); }
}
.fm-categoria-tile {
  aspect-ratio: 3 / 4;
  border-radius: 1.35rem;
  padding: 1.1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(160deg, var(--color-secundario), #1a3160);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 18px -8px rgba(21, 38, 82, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fm-categoria-tile:nth-child(3n+2) { background: linear-gradient(160deg, var(--color-primario), #b6431a); }
.fm-categoria-tile:nth-child(3n+3) { background: linear-gradient(160deg, var(--color-terciario), #5c3540); }
.fm-categoria-tile:hover, .fm-categoria-tile:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 32px -10px rgba(21, 38, 82, 0.55), 0 0 0 2px var(--color-primario);
}
.fm-categoria-tile:focus-visible { outline: 3px solid #fff; outline-offset: -7px; }
.fm-categoria-tile--foto { background: #12172b; }
.fm-categoria-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.5s ease;
}
.fm-categoria-tile--foto:hover .fm-categoria-tile-img, .fm-categoria-tile--foto:focus-visible .fm-categoria-tile-img { transform: scale(1.08); }
.fm-categoria-tile-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(12, 22, 48, 0.94) 0%, rgba(12, 22, 48, 0.62) 34%, rgba(12, 22, 48, 0.08) 68%, transparent 100%);
}
/* sin foto: ícono en cajita arriba a la izquierda y el mismo ícono enorme y tenue de fondo */
.fm-categoria-icono-caja {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
  flex-shrink: 0;
}
.fm-categoria-icono { font-size: 26px; }
.fm-categoria-icono-fondo {
  position: absolute;
  right: -0.9rem;
  bottom: 3rem;
  font-size: 8.5rem;
  opacity: 0.1;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: -1;
}
/* el título: barrita de marca + nombre grande + cuántos productos */
.fm-categoria-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 0.42rem; min-width: 0; }
.fm-categoria-texto::before {
  content: '';
  width: 2.2rem;
  height: 0.28rem;
  border-radius: var(--radio-pill);
  background: #F15A24;
  transition: width 0.3s ease;
}
.fm-categoria-tile:hover .fm-categoria-texto::before, .fm-categoria-tile:focus-visible .fm-categoria-texto::before { width: 3.6rem; }
.fm-categoria-nombre {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(1rem, 0.35vw + 0.88rem, 1.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  overflow-wrap: anywhere;
}
.fm-categoria-cuenta {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* la flecha: aparece al pasar o enfocar; en pantallas táctiles (sin cursor) siempre se ve */
.fm-categoria-flecha {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-primario);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(6px, -6px) scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.45);
}
.fm-categoria-flecha .material-symbols-outlined { font-size: 20px; }
.fm-categoria-tile:hover .fm-categoria-flecha, .fm-categoria-tile:focus-visible .fm-categoria-flecha { opacity: 1; transform: none; }
@media (hover: none) {
  .fm-categoria-flecha { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  /* celular: dos columnas de tarjetas bajitas (la portada se ve mucho más corta que con una franja por categoría) */
  .fm-categorias-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .fm-categoria-tile {
    aspect-ratio: auto;
    min-height: 7.6rem;
    padding: 0.8rem 0.75rem 0.75rem;
    border-radius: 1.1rem;
  }
  .fm-categoria-icono-caja { width: 2.3rem; height: 2.3rem; border-radius: 0.75rem; }
  .fm-categoria-icono { font-size: 22px; }
  .fm-categoria-icono-fondo { font-size: 5.5rem; right: -0.6rem; bottom: 1.4rem; }
  .fm-categoria-texto { gap: 0.32rem; }
  .fm-categoria-texto::before { width: 1.7rem; height: 0.22rem; }
  .fm-categoria-nombre { font-size: 1rem; }
  .fm-categoria-flecha { top: 0.6rem; right: 0.6rem; width: 2rem; height: 2rem; opacity: 1; transform: none; box-shadow: none; }
  .fm-categoria-flecha .material-symbols-outlined { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-categoria-tile, .fm-categoria-tile-img, .fm-categoria-flecha, .fm-categoria-texto::before { transition: none; }
  .fm-categoria-tile:hover, .fm-categoria-tile:focus-visible { transform: none; }
}
/* ---------- filas de productos y filtros ---------- */
.fila-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.fila-productos[hidden] { display: none; }
@media (min-width: 768px) {
  .fila-productos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .fila-productos { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
}
@media (min-width: 1600px) {
  .fila-productos { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 2100px) {
  .fila-productos { grid-template-columns: repeat(7, 1fr); }
}
.fm-catalogo-aviso-busqueda {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radio-lg);
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.9rem;
}
.fm-catalogo-aviso-busqueda[hidden] { display: none; }
/* ---------- accesibilidad ---------- */
/* Texto solo para lectores de pantalla (por ejemplo, el título de una página que visualmente no lo muestra). */
.fm-solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* En celular los enlaces y botones chicos se agrandan para poder tocarlos sin errar. */
@media (max-width: 767px) {
  .producto-add { min-height: 40px; }
  .fm-marca { min-height: 44px; }
  .fm-footer-col a { display: inline-block; padding: 0.4rem 0; }
  .fm-enlace-ver-todas { min-height: 40px; }
  .fm-catalogo-pagina-btn { min-width: 40px; min-height: 40px; }
  .fm-producto-volver { min-height: 40px; display: inline-flex; align-items: center; }
  .fm-producto-rating a { display: inline-flex; align-items: center; min-height: 36px; }
  .fm-cuenta-olvide-btn { min-height: 40px; }
  .fm-catalogo-filtro-fila { min-height: 40px; }
  .fm-catalogo-checkbox-fila { min-height: 40px; }
}
/* ---------- compartir (ficha de producto) ---------- */
.fm-producto-extras { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fm-producto-compartir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.4rem 1rem;
  border-radius: var(--radio-pill);
  border: 1px solid var(--borde);
  background: var(--superficie-mas-baja);
  color: var(--color-secundario);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.fm-producto-compartir:hover { background: var(--superficie-baja); border-color: var(--color-primario); color: var(--color-primario); }
.fm-producto-compartir .material-symbols-outlined { font-size: 20px; }
/* ---------- consultar por WhatsApp (ficha de producto) ---------- */
.fm-producto-consulta {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 46px; padding: 0.55rem 1rem; margin: 0.15rem 0 0.35rem;
  border-radius: var(--radio-pill); border: 1.5px solid #0f6b3f; background: #ffffff; color: #0f6b3f;
  font-weight: 700; font-size: 0.92rem; text-decoration: none; text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.fm-producto-consulta:hover, .fm-producto-consulta:focus-visible { background: #0f6b3f; color: #ffffff; }
.fm-producto-consulta-icono { display: inline-flex; line-height: 0; }
/* Ficha de un producto AGOTADO: sin selector de cantidad ni "Comprar Ahora"; el botón gris ocupa todo el ancho (y no lleva botón de WhatsApp: no se sabe si vuelve). */
.fm-producto-compra-caja--agotado .fm-producto-agregar-btn { width: 100%; justify-content: center; }
/* ---------- página 404 ---------- */
/* página 404 (2026-10-17, "estética 12"): centrada en la pantalla y dentro de una tarjeta; el ícono va en un círculo suave y abajo hay 4 categorías
   (las mismas del pie de página; la página no carga JavaScript, por eso van escritas) */
.fm-404 { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; text-align: center; }
.fm-404-tarjeta {
  width: 100%; max-width: 34rem; padding: 2.2rem 1.6rem 1.8rem;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-3xl); box-shadow: var(--sombra-reposo);
}
.fm-404 img { display: block; height: 36px; width: auto; margin: 0 auto 1.6rem; }
.fm-404-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #fff0ea; color: var(--color-primario);
  box-shadow: 0 0 0 0.55rem rgba(241, 90, 36, 0.08), 0 0 0 1.1rem rgba(241, 90, 36, 0.04); margin: 0.7rem 0 1.6rem;
}
.fm-404-icono .material-symbols-outlined { font-size: 2.3rem; color: inherit; }
.fm-404 h1 { font-family: var(--fuente-display); font-size: 1.6rem; margin: 0 0 0.5rem; }
.fm-404 p { color: var(--texto-secundario); margin-bottom: 1.5rem; }
.fm-404-buscar { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.fm-404-buscar input { flex: 1; min-width: 0; padding: 0.7rem 1rem; border-radius: var(--radio-pill); border: 1px solid var(--borde); font: inherit; }
.fm-404-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.fm-404-categorias { margin-top: 1.7rem; padding-top: 1.3rem; border-top: 1px solid var(--borde); }
.fm-404-categorias p { margin: 0 0 0.8rem; font-size: 0.85rem; font-weight: 700; color: var(--color-secundario); }
.fm-404-categorias div { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.fm-404-categorias a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.35rem 0.9rem;
  border: 1px solid var(--borde); border-radius: var(--radio-pill); background: var(--superficie-mas-baja);
  color: var(--color-secundario); font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.fm-404-categorias a:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 1px; }
@media (hover: hover) { .fm-404-categorias a:hover { border-color: var(--color-primario); color: var(--color-primario); } }
@media (max-width: 479px) { .fm-404-tarjeta { padding: 1.8rem 1.1rem 1.4rem; } .fm-404-buscar { flex-direction: column; } }
/* Contenido que generar_paginas_seo.py deja dentro de producto/<sku>.html para buscadores y para quien no
   ejecuta JavaScript; producto.js lo reemplaza por la ficha completa al cargar. */
.fm-seo-prerender { max-width: 720px; padding: 1.5rem 0; }
.fm-seo-prerender h1 { font-family: var(--fuente-display); font-size: 1.5rem; margin-bottom: 0.75rem; }
.fm-seo-prerender p { margin-bottom: 0.5rem; color: var(--texto-secundario); }
.fm-seo-prerender img { max-width: 320px; width: 100%; height: auto; margin-top: 0.75rem; border-radius: var(--radio-lg); }
.fm-seo-prerender table { margin-top: 0.75rem; border-collapse: collapse; }
.fm-seo-prerender th, .fm-seo-prerender td { padding: 0.3rem 0.75rem; border-bottom: 1px solid var(--borde); text-align: left; }
/* ---------- fila de productos en carrusel (relacionados, "más de la marca") ----------
   Una sola fila que se desliza en horizontal: con el dedo en celular y con las flechas en PC.
   sitio.js (activarCarruselProductos) envuelve la fila en .fm-carrusel y pone las flechas;
   las flechas solo aparecen si hay más tarjetas de las que caben. */
.fm-carrusel { position: relative; }
.fila-productos.fila-productos--carrusel {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Aire arriba y a los lados para que no se recorte la sombra ni el "levantar" de la tarjeta. */
  padding: 0.5rem 0.25rem 0.9rem;
  margin: -0.5rem -0.25rem -0.9rem;
}
.fila-productos.fila-productos--carrusel::-webkit-scrollbar { display: none; }
.fila-productos--carrusel > .producto {
  flex: 0 0 calc((100% - 0.75rem) / 2.3);
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .fila-productos--carrusel > .producto { flex-basis: calc((100% - 1.5rem) / 3); }
}
@media (min-width: 1200px) {
  .fila-productos.fila-productos--carrusel { gap: 1rem; }
  .fila-productos--carrusel > .producto { flex-basis: calc((100% - 4rem) / 5); }
}
@media (min-width: 1600px) {
  .fila-productos--carrusel > .producto { flex-basis: calc((100% - 5rem) / 6); }
}
@media (min-width: 2100px) {
  .fila-productos--carrusel > .producto { flex-basis: calc((100% - 6rem) / 7); }
}
/* Celular: la tarjeta del carrusel mide lo mismo que la de la cuadrícula de la portada (2 columnas) y hereda sus
   mismos estilos (relleno, nombre a 2 líneas, etiqueta, precio y botón: bloque "tarjeta más compacta en celular"). */
@media (max-width: 539px) {
  .fila-productos--carrusel > .producto { flex-basis: calc((100% - 0.75rem) / 2); }
}
/* Celulares grandes y tabletas chicas: en vez de 2 tarjetas enormes se ven ~3. */
@media (min-width: 540px) and (max-width: 767px) {
  .fila-productos--carrusel > .producto { flex-basis: calc((100% - 1.5rem) / 3.2); }
}
/* ---------- portada en celular: las filas de productos se deslizan de lado ----------
   Hasta 767px las filas de la portada (ofertas, más vendidos, para ti, herramientas) son UNA línea que se desliza con el dedo,
   igual que los relacionados de la ficha, en vez de apilarse de a dos (la portada medía ~7.400 px). Se ve un pedazo de la tarjeta siguiente
   para que se note que hay más. Desde 768px siguen siendo la cuadrícula de siempre. Solo estilos: sin flechas ni envoltorio. */
@media (max-width: 767px) {
  .fila-productos--portada {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 0.5rem 0.25rem 0.9rem;
    margin: -0.5rem -0.25rem -0.9rem;
  }
  .fila-productos--portada::-webkit-scrollbar { display: none; }
  .fila-productos--portada > .producto { flex: 0 0 calc((100% - 0.75rem) / 2.25); scroll-snap-align: start; }
}
@media (min-width: 540px) and (max-width: 767px) {
  .fila-productos--portada > .producto { flex-basis: calc((100% - 1.5rem) / 3.25); }
}
/* ---------- opiniones de clientes en la portada (sitio.js: pintarOpinionesPortada) ----------
   Desde 768px, 3 tarjetas por fila (3 o 6 en total: nunca una fila coja); en celular, UNA línea que se desliza como las demás filas de la portada. */
.fm-opiniones-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fm-opinion { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; padding: 1.1rem 1.25rem 1.15rem; background: var(--superficie-mas-baja); border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-reposo); }
.fm-opinion-estrellas { font-size: 1.05rem; letter-spacing: 0.08em; line-height: 1; color: #d97706; }
.fm-opinion-estrella-vacia { color: var(--borde); }
.fm-opinion-texto { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--texto-principal); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fm-opinion-pie { display: flex; flex-direction: column; gap: 0.15rem; margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--superficie-alta); }
.fm-opinion-nombre { font-size: 0.9rem; color: var(--color-secundario); }
.fm-opinion-meta { font-size: 0.78rem; color: var(--texto-secundario); }
.fm-opinion-producto { font-size: 0.82rem; font-weight: 600; color: var(--color-primario); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fm-opinion-producto:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .fm-opiniones-fila { display: flex; gap: 0.75rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 0.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 0.5rem 0.25rem 0.9rem; margin: -0.5rem -0.25rem -0.9rem; }
  .fm-opiniones-fila::-webkit-scrollbar { display: none; }
  .fm-opinion { flex: 0 0 min(82%, 20rem); scroll-snap-align: start; }
}
.fm-carrusel-btn {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--color-primario);
  color: #fff;
  box-shadow: 0 6px 16px rgba(241, 90, 36, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.fm-carrusel-btn .material-symbols-outlined { font-size: 30px; font-variation-settings: 'wght' 600; }
.fm-carrusel-btn:hover:not(:disabled) {
  background: var(--color-primario-hover);
  box-shadow: 0 8px 20px rgba(241, 90, 36, 0.55), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.fm-carrusel-btn:focus-visible { outline: 3px solid var(--color-secundario); outline-offset: 2px; }
.fm-carrusel-btn:disabled { opacity: 0; pointer-events: none; }
.fm-carrusel-btn--prev { left: -1.3rem; --rebote: -1; }
.fm-carrusel-btn--sig { right: -1.3rem; --rebote: 1; }
/* Con el margen lateral de 16px de la página, en pantallas medias el botón se pega más al contenido para no salirse. */
@media (max-width: 1279px) {
  .fm-carrusel-btn--prev { left: -0.5rem; }
  .fm-carrusel-btn--sig { right: -0.5rem; }
}
/* Rebote: un par de saltitos hacia el lado en que se desliza y una pausa, para llamar la atención
   sin ser molesto. Se detiene al pasar el mouse y no se anima si el usuario pidió menos movimiento. */
@keyframes fm-carrusel-rebote {
  0%, 38%, 100% { transform: translateY(-50%) translateX(0); }
  10% { transform: translateY(-50%) translateX(calc(var(--rebote) * 6px)); }
  20% { transform: translateY(-50%) translateX(0); }
  28% { transform: translateY(-50%) translateX(calc(var(--rebote) * 3px)); }
}
.fm-carrusel-btn:not(:disabled) { animation: fm-carrusel-rebote 2.2s ease-in-out infinite; }
.fm-carrusel-btn:hover:not(:disabled),
.fm-carrusel-btn:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fm-carrusel-btn:not(:disabled) { animation: none; }
}
/* Flechas solo con mouse y pantalla ancha, y solo si de verdad hay para deslizar. */
@media (hover: hover) and (min-width: 768px) {
  .fm-carrusel--desborda .fm-carrusel-btn { display: inline-flex; }
}
/* En el grid de 2 columnas de móvil el botón "Agregar al Carrito" (con
   white-space:nowrap) no entra en el ancho real de la columna y hacía que
   todo el grid se saliera de la pantalla. Con menos de 768px (todavía en 2
   columnas) se acorta a solo "Agregar"; en catálogo (tarjeta horizontal,
   mucho más ancha) y desde 768px en adelante se sigue viendo completo. */
@media (max-width: 767px) {
  .fila-productos .producto-add-extra { display: none; }
}
/* ---------- tarjeta de producto (contrato de productos-data.js) ---------- */
.producto {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 0.85rem;
  box-shadow: var(--sombra-reposo);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Por defecto, un elemento de grid no se encoge más allá del ancho de su
     contenido (el botón "Agregar al Carrito" con white-space:nowrap). Eso
     hacía que cada columna del grid de 2 columnas creciera más de lo que
     había disponible y toda la fila se saliera de la pantalla en móvil.
     min-width:0 permite que la tarjeta sí se encoja al ancho real de la
     columna; .producto-precio-fila ya tiene flex-wrap para bajar el botón
     de línea si no cabe junto al precio. */
  min-width: 0;
}
.producto:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); }
.producto-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-lg);
  background: var(--superficie-baja);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.producto-foto { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease; }
/* Fundido de entrada de las fotos (animación 2 de 5, 2026-10-20): nacen transparentes y sitio.js (mostrarFotoCargada) les quita la clase al cargar; la transición de arriba hace el fundido.
   El @keyframes es solo un seguro: si ninguna señal llegara, a los 3 s la foto se muestra sola. Con "reducir movimiento" no hay fundido: la foto se ve como siempre. */
.fm-foto-entrando { opacity: 0; animation: fm-foto-seguro 0.01s linear 3s forwards; }
@keyframes fm-foto-seguro { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fm-foto-entrando { opacity: 1; animation: none; }
  .producto-foto { transition: none; }
}
.producto-emoji-fallback { font-size: 2.6rem; align-items: center; justify-content: center; width: 100%; height: 100%; }
.producto-info { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.producto-sku { display: none; }
.producto-nombre-click {
  font-family: var(--fuente-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-secundario);
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}
.producto-rating { font-size: 0.78rem; color: #d97706; display: flex; align-items: center; gap: 0.3rem; }
.producto-rating-numero { color: var(--texto-principal); font-weight: 700; flex-shrink: 0; }
.num-resenas { color: var(--texto-secundario); font-weight: 500; }
/* Mismo problema que el botón "Agregar al Carrito": "(0 opiniones de
   clientes)" es demasiado texto para el ancho real de una columna en
   .fila-productos (la tarjeta vertical, usada en el home y en
   "relacionados"), sea de 2, 3 o 5 columnas — se partía en varias líneas y
   dejaba la tarjeta con aspecto roto/colapsado. Se acorta a solo "(0)" en
   TODOS los anchos de ese grid (no solo móvil: a 5 columnas en escritorio
   también le falta espacio). En el catálogo (tarjeta horizontal, mucho más
   ancha) se sigue viendo el texto completo. */
.fila-productos .producto-resenas-extra { display: none; }
.stock-badge {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radio-pill);
}
.stock-badge.stock-disponible { background: #d1fae5; color: #047857; }
.stock-badge.stock-bajo { background: #fef3c7; color: #b45309; }
.stock-badge.stock-agotado { background: #fee2e2; color: #b91c1c; }
.producto-precio-fila {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--superficie);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.producto-precio-bloque { display: flex; flex-direction: column; gap: 0.1rem; }
.producto-precio-numeros { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.producto-precio { font-family: var(--fuente-display); font-weight: 800; font-size: 1.05rem; color: var(--color-primario); }
.producto-precio-original { font-size: 0.8rem; font-weight: 600; color: var(--texto-secundario); text-decoration: line-through; }
.producto-precio-bs { font-size: 0.75rem; font-weight: 600; color: var(--texto-secundario); }
.producto-add {
  border: none;
  background: var(--color-primario);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radio-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  box-shadow: 0 6px 16px -4px rgba(241, 90, 36, 0.35);
}
.producto-add .material-symbols-outlined { font-size: 16px; }
.producto-add:hover:not(:disabled) { background: var(--color-primario-hover); }
.producto-add:disabled { background: var(--superficie); color: var(--texto-secundario); box-shadow: none; cursor: not-allowed; }
/* Sin opiniones no se muestra la fila de estrellas ("☆☆☆☆☆ 0.0 (0)" restaba confianza): en TODAS las tarjetas (portada, catálogo, carruseles y
   carrito). sitio.js le pone .producto-rating--vacio y se la quita sola cuando el producto recibe su primera reseña real (repintarCalificacionTarjetas). */
.producto-rating--vacio { display: none; }
/* Tarjeta más compacta en celular (la foto no se toca): etiqueta de stock más baja y menos aire entre bloques. El texto no baja de 0.75rem
   (accesibilidad) y el botón conserva sus 40px de alto para poder tocarlo. */
@media (max-width: 767px) {
  .fila-productos .producto-info { gap: 0.25rem; }
  .fila-productos .stock-badge { padding: 0.1rem 0.5rem; line-height: 1.3; }
  .fila-productos .producto-precio-fila { padding-top: 0.4rem; gap: 0.4rem; }
  .fila-productos .producto-precio-bloque { gap: 0; }
  .fila-productos .producto-precio { font-size: 1rem; line-height: 1.2; }
  .fila-productos .producto-precio-numeros { gap: 0.3rem; }
  .fila-productos .producto-precio-original { font-size: 0.75rem; line-height: 1.25; }
/* La referencia en Bs. no va en la tarjeta del celular; se ve en la ficha, el carrito y el checkout. */
  .fila-productos .producto-precio-bs { display: none; }
/* Botón a todo el ancho de la tarjeta y centrado, debajo del precio. */
  .fila-productos .producto-precio-fila { flex-direction: column; align-items: stretch; }
  .fila-productos .producto-add { width: 100%; justify-content: center; }
  .fila-productos .producto { gap: 0.45rem; padding: 0.75rem; }
}
/* Existencias en las filas de tarjetas (portada, relacionados, carrito, vistos; 2026-10-19): la etiqueta de color ya no ocupa una fila propia ni va sobre la foto.
   Solo cuando quedan pocas (1 a 3) sale un texto pequeño y plano, "● Quedan 2", a la derecha del precio (avisoStockTarjetaHTML en productos-nucleo.js); "En stock"
   no lleva aviso y en un agotado la foto se atenúa (el botón gris ya dice "Agotado"). La tarjeta baja ~31px en PC y ~22px en celular. El catálogo (.fm-catalogo-lista)
   no se toca: conserva su .stock-badge y no muestra .producto-aviso-stock. El texto no baja de 0.75rem (accesibilidad). */
.producto-aviso-stock { display: none; }
.fila-productos .stock-badge { display: none; }
.fila-productos .producto-precio-fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.4rem;
}
.fila-productos .producto-aviso-stock {
  position: relative;   /* contiene el texto oculto para lectores de pantalla (absolute): sin esto se escapaba del recorte de la fila que se desliza y ensanchaba la página en celular */
  display: block;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #b45309;
}
.fila-productos .producto-aviso-stock::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: #f59e0b;
  vertical-align: 0.05em;
}
.fila-productos .producto-precio-fila .producto-add { grid-column: 1 / -1; grid-row: 2; justify-content: center; }   /* el botón ocupa todo el ancho de la tarjeta: su contenido va centrado (en PC quedaba pegado a la izquierda) */
.fila-productos .producto--agotado .producto-img img { opacity: 0.4; filter: grayscale(0.7); }
/* En celular el aviso no cabe junto al precio de tres cifras ("Quedan 2" mide ~57px y la tarjeta tiene ~115-128px de ancho): ahí se ve la versión corta, "Solo 2", sin el punto;
   la frase completa sigue en el HTML solo para lectores de pantalla. Por debajo de 360px (ni así cabe) baja a una segunda línea, debajo del precio. */
.producto-aviso-stock .pas-corto { display: none; }
@media (max-width: 767px) {
  .fila-productos .producto-precio-fila { column-gap: 0.35rem; }
  .fila-productos .producto-aviso-stock::before { display: none; }
  .fila-productos .producto-aviso-stock .pas-largo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .fila-productos .producto-aviso-stock .pas-corto { display: inline; }
}
@media (max-width: 359px) {
  .fila-productos .producto-precio-fila { grid-template-rows: auto 1.1rem auto; }   /* la fila del aviso se reserva en TODAS las tarjetas para que los precios queden a la misma altura */
  .fila-productos .producto-aviso-stock { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .fila-productos .producto-precio-fila .producto-add { grid-row: 3; }
}
/* ---------- marcas ---------- */
.fm-marcas-fila {
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
/* Celulares (desde 360px): 3 columnas con cajas más bajas, así las 12 marcas ocupan 4 filas en vez de 6 (la sección bajó ~200px). */
@media (min-width: 360px) {
  .fm-marcas-fila { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
}
@media (min-width: 640px) {
  .fm-marcas-fila { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
}
@media (min-width: 1024px) {
  .fm-marcas-fila { grid-template-columns: repeat(6, 1fr); }
}
/* 12 marcas destacadas: 6 columnas (2 filas) o 12 (1 fila) para no dejar huecos. */
@media (min-width: 2100px) {
  .fm-marcas-fila { grid-template-columns: repeat(12, 1fr); }
}
.fm-marca-pill {
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;   /* 2026-10-28 (dueño): el logo va completo y más grande, sin tarjeta alrededor */
  border: 0;
  border-radius: var(--radio-lg);   /* solo para que el contorno del teclado salga redondeado */
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-secundario);
  letter-spacing: 0.02em;
}
.fm-marca-pill:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.fm-marca-pill { height: 4.5rem; padding: 0.25rem 1.1rem; }
/* Todos los logos caben en la misma caja (ya recortados sin márgenes), así que se ven del mismo tamaño aunque sus proporciones sean
   distintas; object-fit: contain los deja COMPLETOS, sin recortar. Sin tarjeta alrededor: el logo se apoya directo sobre la franja. */
.fm-marca-logo { width: 100%; max-width: 11rem; height: 3.6rem; object-fit: contain; }
.fm-marca-nombre { text-align: center; }
/* Cajas más bajas en celular: va DESPUÉS de las reglas base para ganarles por orden (misma especificidad). */
@media (min-width: 360px) and (max-width: 639px) {
  .fm-marca-pill { height: 3.6rem; padding: 0.25rem 0.6rem; }
  .fm-marca-logo { width: 100%; height: 2.7rem; }
  .fm-marca-nombre { font-size: 0.8125rem; }
}
/* Al pasar el cursor el logo toma una sombra suave que sigue su forma y, con movimiento normal, crece un poquito (la fila de marcas corre sola y se
   detiene bajo el cursor; ver "Fila infinita de marcas" más abajo). En pantallas táctiles no hay "pasar el cursor" y con "reducir movimiento" no
   se anima nada: solo aparece la sombra. */
@media (hover: hover) {
  .fm-marca-pill:hover .fm-marca-logo { filter: drop-shadow(0 3px 6px rgba(33, 61, 119, 0.28)); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fm-marca-logo, .fm-marca-nombre { transition: transform 0.18s ease, filter 0.18s ease; }
  .fm-marca-pill:hover .fm-marca-logo, .fm-marca-pill:hover .fm-marca-nombre { transform: scale(1.07); }
}
/* Fila infinita de marcas (2026-10-28): sitio.js (renderMarcas) arma una pista con dos grupos iguales que se desplaza -50% en
   (40 s x repeticiones) y la deja a velocidad constante. Solo con movimiento normal; con "reducir movimiento" sitio.js dibuja la
   cuadrícula de arriba y nada de esto se usa. Las cajas tienen ANCHO FIJO (así se mide la vuelta sin esperar a que carguen los logos). */
@media (prefers-reduced-motion: no-preference) {
  .fm-marcas-fila--carrusel {
    display: block;
    overflow: hidden;
    overflow: clip;
    /* Aire SIMÉTRICO sobre y bajo los logos (a pedido del dueño): la distancia del título a los logos es igual a la de los logos al final de la sección.
       Arriba cuenta el margen de 1.5rem del título; abajo, el relleno de la franja (2.25rem, 1.5rem hasta 640px), así que abajo el relleno propio de la fila es
       menor en PC. Con los -0.4rem de margen: arriba = 1.5rem - 0.4rem + 1.7rem y abajo = 0.95rem - 0.4rem + 2.25rem (3.25rem en las dos; en celular ver más abajo).
       Los 0.4rem de margen negativo cubren el crecimiento y la sombra del logo bajo el cursor. */
    padding: 1.7rem 0 0.95rem;
    margin: -0.4rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  }
  .fm-marcas-pista {
    display: flex;
    width: max-content;
    animation: fm-marcas-correr var(--fm-marcas-duracion, 40s) linear infinite;
  }
  .fm-marcas-grupo { display: flex; flex: 0 0 auto; }   /* sin separación: el aire entre logos lo da el relleno de cada caja, así el grupo mide justo lo que sus cajas */
  .fm-marcas-fila--carrusel .fm-marca-pill { flex: 0 0 auto; width: 14rem; padding: 0.25rem 1.75rem; }   /* el logo ocupa 10.5rem de ancho y quedan 3.5rem de aire entre dos logos anchos */
  @keyframes fm-marcas-correr {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  /* quieta: con el cursor encima (solo ratón), con un dedo apoyado y al llegar con el teclado, que además deja recorrerla a mano */
  .fm-marcas-fila--carrusel.fm-marcas--pausada .fm-marcas-pista { animation-play-state: paused; }
  .fm-marcas-fila--carrusel.fm-marcas--foco { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .fm-marcas-fila--carrusel.fm-marcas--foco::-webkit-scrollbar { display: none; }
  .fm-marcas-fila--carrusel.fm-marcas--foco .fm-marcas-pista { animation: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .fm-marcas-fila--carrusel { padding: 1.7rem 0 1.2rem; }   /* hasta 640px la franja baja su relleno a 1.5rem Y el título su margen a 1rem: arriba = 1rem - 0.4rem + 1.7rem y abajo = 1.2rem - 0.4rem + 1.5rem (2.75rem las dos) */
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  .fm-marcas-fila--carrusel .fm-marca-pill { width: 10.5rem; padding: 0.25rem 1.5rem; }   /* logo de 7.5rem de ancho y 3rem de aire entre dos logos anchos */
  .fm-marcas-fila--carrusel .fm-marca-logo { height: 2.7rem; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .fm-marcas-fila--carrusel:hover .fm-marcas-pista { animation-play-state: paused; }
}
/* ---------- páginas de contenido: sobre-nosotros y faq ---------- */
.fm-acerca, .fm-faq { padding-top: var(--espacio-lg); padding-bottom: var(--espacio-xl); max-width: 760px; }
.fm-acerca-encabezado { margin-bottom: var(--espacio-xl); }
.fm-acerca-encabezado h1 { font-size: 1.7rem; margin-top: 0.3rem; }
@media (min-width: 1024px) {
  .fm-acerca-encabezado h1 { font-size: 2.2rem; }
}
.fm-acerca-intro { color: var(--texto-secundario); font-size: 1rem; margin-top: 0.75rem; }
.fm-acerca-historia { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: var(--espacio-xl); }
.fm-acerca-bloque {
  display: flex; flex-direction: column; gap: 0.9rem;
  background: var(--superficie-mas-baja);
  border: 1px solid var(--superficie-alta);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-reposo);
  padding: 1.25rem 1.4rem;
}
@media (min-width: 640px) {
  .fm-acerca-bloque { flex-direction: row; align-items: flex-start; gap: 1.1rem; }
}
.fm-acerca-bloque > .material-symbols-outlined {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radio-lg); background: #fff0ea; color: var(--color-primario);
}
.fm-acerca-bloque h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.fm-acerca-bloque p { color: var(--texto-secundario); margin: 0; line-height: 1.6; }
/* Sobre Ferrenmej: la historia como línea de tiempo (2026-10-17). */
/* etiqueta de época (Hace más de 70 años / Durante décadas / 1986 / Hoy) */
.fm-acerca-epoca {
  display: inline-block; align-self: flex-start;
  padding: 0.2rem 0.65rem; margin-bottom: 0.45rem;
  border-radius: var(--radio-pill);
  background: #fff0ea; color: var(--color-primario);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3;
}
.fm-acerca-hoy .fm-acerca-epoca { margin-bottom: 0; }
/* la historia: línea vertical con un nodo (el ícono de cada bloque) por época */
.fm-acerca-historia { position: relative; padding-left: 3.4rem; gap: 1.5rem; }
.fm-acerca-historia::before {
  content: ''; position: absolute; left: 1.2rem; top: 1.4rem; bottom: 1.4rem; width: 3px; border-radius: 3px;
  background: linear-gradient(to bottom, #F15A24, var(--color-secundario));
}
.fm-acerca-bloque { position: relative; }
.fm-acerca-bloque > .material-symbols-outlined {
  position: absolute; left: -3.4rem; top: 0.85rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--color-primario); color: #fff;
  box-shadow: 0 0 0 5px var(--color-fondo);
  font-size: 22px;
}
.fm-acerca-bloque:nth-child(2) > .material-symbols-outlined { background: #b6431a; }
.fm-acerca-bloque:nth-child(3) > .material-symbols-outlined { background: var(--color-secundario); }
@media (max-width: 639px) {
  .fm-acerca-historia { padding-left: 2.9rem; gap: 1.2rem; }
  .fm-acerca-historia::before { left: 0.95rem; }
  .fm-acerca-bloque > .material-symbols-outlined { left: -2.9rem; width: 2.1rem; height: 2.1rem; font-size: 19px; box-shadow: 0 0 0 4px var(--color-fondo); }
}
.fm-acerca-hoy {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--superficie-alta);
  border-radius: var(--radio-3xl);
  box-shadow: var(--sombra-reposo);
  padding: 1.75rem;
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.fm-acerca-hoy p { color: var(--texto-secundario); line-height: 1.6; margin: 0; }
.fm-acerca-hoy strong { color: var(--color-secundario); font-family: var(--fuente-display); }
/* visítanos o escríbenos (la escribe generar_paginas_seo.py desde sitio-config.json) */
.fm-acerca-contacto {
  margin-top: var(--espacio-xl);
  background: var(--superficie-mas-baja);
  border: 1px solid var(--superficie-alta);
  border-radius: var(--radio-3xl);
  box-shadow: var(--sombra-reposo);
  padding: 1.75rem;
  display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start;
  scroll-margin-top: 8rem;
}
.fm-acerca-contacto h2 { font-size: 1.15rem; margin: 0; }
.fm-acerca-contacto-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; }
@media (min-width: 768px) {
  .fm-acerca-contacto-lista { grid-template-columns: repeat(2, 1fr); }
}
.fm-acerca-contacto-lista li { display: flex; align-items: flex-start; gap: 0.85rem; min-width: 0; }
.fm-acerca-contacto-lista .material-symbols-outlined {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radio-lg); background: #fff0ea; color: var(--color-primario);
}
.fm-acerca-contacto-lista li > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.fm-acerca-contacto-lista strong { font-family: var(--fuente-display); color: var(--color-secundario); font-size: 0.9rem; }
.fm-acerca-contacto-lista span, .fm-acerca-contacto-lista a { color: var(--texto-secundario); font-size: 0.92rem; }
.fm-acerca-contacto-lista a:hover { color: var(--color-primario); }
.fm-acerca-contacto-lista .material-symbols-outlined { font-size: 22px; }
.fm-legal-aviso {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: #fef3c7; color: #92400e;
  border-radius: var(--radio-lg);
  padding: 1rem 1.25rem;
  margin-bottom: var(--espacio-xl);
  font-size: 0.85rem; line-height: 1.5;
}
.fm-legal-aviso p { margin: 0; }
.fm-legal-aviso .material-symbols-outlined { color: #b45309; flex-shrink: 0; }
/* páginas legales (2026-10-17, "estética 10"): índice con enlaces a cada sección y cada sección en su tarjeta; el texto no cambia */
.fm-legal-indice {
  margin: 0 0 var(--espacio-lg); padding: 1rem 1.1rem 0.8rem;
  background: #fff; border: 1px solid var(--superficie-alta); border-radius: var(--radio-lg);
}
.fm-legal-indice-titulo { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-primario); }
.fm-legal-indice ol { list-style: none; counter-reset: legal; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
@media (min-width: 640px) { .fm-legal-indice ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fm-legal-indice li { counter-increment: legal; }
.fm-legal-indice a {
  display: flex; align-items: center; gap: 0.65rem; min-height: 2.6rem; padding: 0.25rem 0.4rem; border-radius: 0.6rem;
  color: var(--color-secundario); font-size: 0.9rem; font-weight: 600; line-height: 1.25; text-decoration: none;
}
.fm-legal-indice a::before {
  content: counter(legal); flex: none; display: flex; align-items: center; justify-content: center;
  width: 1.65rem; height: 1.65rem; border-radius: 50%; background: #fff0ea; color: var(--color-primario); font-size: 0.75rem; font-weight: 800;
}
.fm-legal-indice a:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 1px; }
@media (hover: hover) { .fm-legal-indice a:hover { background: #f3f5fb; } }
.fm-legal-seccion {
  background: var(--superficie-mas-baja); border: 1px solid var(--superficie-alta); border-radius: var(--radio-lg); box-shadow: var(--sombra-reposo);
  padding: 1.15rem 1.35rem 1.25rem; margin-bottom: 1rem;
}
@media (min-width: 768px) { .fm-legal-seccion { scroll-margin-top: calc(var(--fm-header-alto, 7.5rem) + 1rem); } }
.fm-legal-seccion h2 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; margin-bottom: 0.55rem; }
.fm-legal-seccion h2::before { content: ''; flex: none; width: 0.28rem; height: 1.15rem; border-radius: var(--radio-pill); background: #F15A24; }
@media (max-width: 639px) { .fm-legal-seccion { padding: 1rem 1.05rem 1.1rem; } }
.fm-legal-seccion p { color: var(--texto-secundario); line-height: 1.6; margin: 0; }
.fm-legal-seccion ul { margin: 0; padding-left: 1.2rem; color: var(--texto-secundario); line-height: 1.7; }
.fm-legal-seccion a { color: var(--color-primario); font-weight: 600; }
/* preguntas frecuentes (2026-10-17, "estética 11"): cada tema es UNA tarjeta (el ícono del tema en un círculo suave) y las preguntas se separan
   con una línea fina; el marcado (div.fm-faq-grupo > h2 + details.fm-faq-item) no cambia, así que el bloque que genera generar_paginas_seo.py y el
   JSON-LD siguen igual */
.fm-faq-grupo {
  margin-bottom: 1.25rem; padding: 1rem 1.25rem 0.35rem;
  background: var(--superficie-mas-baja); border: 1px solid var(--superficie-alta); border-radius: var(--radio-lg); box-shadow: var(--sombra-reposo);
}
.fm-faq-grupo h2 {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 1.05rem; margin-bottom: 0.7rem;
}
.fm-faq-grupo h2 .material-symbols-outlined {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #fff0ea; color: var(--color-primario); font-size: 20px;
}
.fm-faq-item { border-top: 1px solid var(--superficie-alta); padding: 0.2rem 0; }
.fm-faq-item summary {
  cursor: pointer; font-weight: 700; color: var(--color-secundario);
  font-family: var(--fuente-display); font-size: 0.92rem;
  list-style: none; min-height: 2.9rem; padding: 0.35rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.fm-faq-item[open] summary { color: var(--color-primario); }
@media (max-width: 639px) { .fm-faq-grupo { padding: 0.9rem 1rem 0.3rem; } }
.fm-faq-item summary::-webkit-details-marker { display: none; }
/* La flecha es el icono "expand_more" (el único que trae la fuente reducida de iconos); al abrir se gira en vez de usar "expand_less",
   que no está en esa fuente y se veía como texto ("EXPAND_LESS"). */
.fm-faq-item summary::after {
  content: 'expand_more'; font-family: 'Material Symbols Outlined';
  flex: none; font-size: 24px; line-height: 1; text-transform: none; letter-spacing: normal; white-space: nowrap;
  color: var(--texto-secundario); transition: transform 0.15s ease;
}
.fm-faq-item[open] summary::after { transform: rotate(180deg); }
.fm-faq-item p { color: var(--texto-secundario); margin: 0.15rem 0 0.8rem; line-height: 1.6; }
.fm-faq-item a { color: var(--color-primario); font-weight: 600; }
/* ---------- footer ---------- */
.fm-footer {
  margin-top: var(--espacio-lg);
  background: var(--superficie-mas-baja);
  border-top: 1px solid var(--superficie-alta);
  padding: 1.75rem 0 1.1rem;
}
.fm-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.1rem;
}
/* La columna "Catálogo" (4 enlaces a categorías) ya no se muestra: la página entera es el catálogo y esas mismas categorías están en los botones del encabezado (pedido del dueño,
   2026-10-19: "esto en el pie de página está de más"). Se oculta SOLO con CSS: su marcado sigue en las ~5.000 páginas a propósito, para no volver a subirlas todas al hosting; al
   regenerarlas por otro motivo se puede borrar también del marcado (sitio y plantillas). Sin esa columna quedan la marca, Atención y Contáctanos: 3 columnas desde 768px y,
   en celular, la marca arriba y Atención y Contáctanos lado a lado. */
.fm-footer-col:has(a[href^="catalogo.html?categoria="]) { display: none; }
@media (min-width: 768px) {
  .fm-footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
/* Celular: la marca arriba y Atención y Contáctanos lado a lado, en vez de una lista de 13 enlaces apilados (el pie medía ~810 px). Cada enlace mide 40 px de alto para tocarlo sin
   errar (antes 32 px). Solo estilos: las ~5.000 páginas no cambian. */
@media (max-width: 767px) {
  .fm-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
  .fm-footer-grid > div:first-child { grid-column: 1 / -1; }
  .fm-footer-col ul { gap: 0; }
  .fm-footer-col h4 { margin-bottom: 0.2rem; }
  .fm-footer-col a { display: flex; align-items: center; min-height: 40px; padding: 0; }
}
.fm-footer-marca { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.fm-footer-marca img { width: 26px; height: 26px; object-fit: contain; }
.fm-footer-marca .fm-footer-logo-texto { width: auto; height: 19px; }
.fm-footer-tagline { font-size: 0.82rem; color: var(--texto-secundario); margin: 0; }
.fm-footer-col h4 { font-size: 0.85rem; margin-bottom: 0.75rem; }
.fm-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fm-footer-col a, .fm-footer-col li { font-size: 0.82rem; color: var(--texto-secundario); }
.fm-footer-col a:hover { color: var(--color-primario); }
.fm-footer-bottom {
  position: relative;
  padding-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding-left: var(--margen-m);
  padding-right: var(--margen-m);
}
@media (min-width: 1200px) {
  .fm-footer-bottom { padding-left: var(--margen); padding-right: var(--margen); }
}
/* La línea divisoria se dibuja aparte (no como borde) para que termine donde terminan las columnas y no sobresalga por el relleno lateral. */
.fm-footer-bottom::before {
  content: '';
  position: absolute; top: 0; left: var(--margen-m); right: var(--margen-m);
  height: 1px; background: var(--superficie-alta);
}
@media (min-width: 1200px) {
  .fm-footer-bottom::before { left: var(--margen); right: var(--margen); }
}
/* Páginas cortas (Mis pedidos vacío, carrito vacío...): el footer baja hasta el final de la ventana en vez de flotar con una franja vacía debajo. */
body:has(> .fm-footer) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:has(> .fm-footer) > main { flex: 1 0 auto; }
.fm-footer-bottom p { margin: 0; font-size: 0.78rem; color: var(--texto-secundario); }
/* Aviso de imágenes ilustrativas en el pie de TODAS las páginas sin tocar su HTML (las ~5.000 páginas no se regeneran ni se vuelven a subir): lo dibuja el CSS.
   En PC queda a la derecha de "© 2026 Ferrenmej."; en celular baja a su propia línea. Si algún día se regeneran las páginas, puede pasar a ser un <p> del propio pie. */
.fm-footer-bottom::after { content: 'Las imágenes de los productos son ilustrativas y pueden diferir de su descripción.'; font-size: 0.78rem; line-height: 1.4; color: var(--texto-secundario); }
@media (min-width: 768px) { .fm-footer-bottom::after { text-align: right; } }
/* Pie de página en PC y tablet (desde 768px, 2026-10-19): más presencia con SOLO estilos (las ~2.800 páginas no cambian): línea de acento arriba (naranja → azul de marca),
   más aire, logo y textos un poco mayores, una barrita naranja en cada título, un círculo suave con su ícono delante de cada dato de "Contáctanos" (WhatsApp, correo,
   dirección y horario; los cuatro íconos ya están en la fuente reducida) y un pequeño corrimiento de los enlaces al pasar el cursor. El celular conserva su pie compacto. */
@media (min-width: 768px) {
  .fm-footer { border-top: 3px solid; border-image: linear-gradient(90deg, #F15A24, var(--color-secundario)) 1; padding: 2.75rem 0 1.25rem; }
  .fm-footer-grid { gap: 2rem; margin-bottom: 1.75rem; }
  .fm-footer-marca { gap: 0.75rem; margin-bottom: 0.85rem; }
  .fm-footer-marca img { width: 34px; height: 34px; }
  .fm-footer-marca .fm-footer-logo-texto { height: 24px; }
  .fm-footer-tagline { max-width: 18rem; font-size: 0.9rem; line-height: 1.55; }
  .fm-footer-col h4 { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; font-size: 0.95rem; }
  .fm-footer-col h4::before { content: ''; flex: none; width: 4px; height: 1.05em; border-radius: 2px; background: #F15A24; }
  .fm-footer-col ul { gap: 0.15rem; }
  .fm-footer-col a, .fm-footer-col li { font-size: 0.9rem; }
  .fm-footer-col a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 36px; padding: 0; }
  .fm-footer-col a:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; border-radius: 4px; }
  .fm-footer-col:has(a[href^="mailto:"]) a::before {
    flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center;
    background: #fdf1ec; color: var(--color-primario);
    font-family: 'Material Symbols Outlined'; font-size: 18px; font-weight: 400; font-style: normal;
    line-height: 1; text-transform: none; letter-spacing: normal; white-space: nowrap;
  }
  .fm-footer-col:has(a[href^="mailto:"]) li:nth-child(1) a::before { content: 'chat'; }
  .fm-footer-col:has(a[href^="mailto:"]) li:nth-child(2) a::before { content: 'mail'; }
  .fm-footer-col:has(a[href^="mailto:"]) li:nth-child(3) a::before { content: 'location_on'; }
  .fm-footer-col:has(a[href^="mailto:"]) li:nth-child(4) a::before { content: 'schedule'; }
}
@media (min-width: 768px) and (hover: hover) {
  .fm-footer-col:has(a[href^="mailto:"]) a:hover::before { background: var(--color-primario); color: #fff; }
}
@media (min-width: 768px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fm-footer-col a { transition: color 0.15s ease, transform 0.15s ease; }
  .fm-footer-col a:hover { transform: translateX(3px); }
  .fm-footer-col:has(a[href^="mailto:"]) a::before { transition: background-color 0.15s ease, color 0.15s ease; }
}
/* El pie vuelve a mostrar SOLO los nombres de contacto (2026-10-28, a pedido del dueño): WhatsApp, Correo electrónico, Dirección y Horario de atención; el dato se ve al tocar
   cada enlace (abre WhatsApp, el correo o "Sobre Ferrenmej" → contacto). Desde el 21 de octubre generar_paginas_seo.py escribe el dato real dentro de cada enlace
   (<span class="fm-pie-dato"><span class="fm-pie-titulo">…</span><span class="fm-pie-valor">…</span></span>) en las ~5,079 páginas; para no volver a subirlas todas, el dato
   sigue en el HTML pero no se muestra y el enlace se ve igual que antes (el span del nombre hereda letra y color). Para mostrar los datos otra vez: borrar estas dos reglas
   y devolver los estilos `.fm-pie-*` (están en el commit 3abb8a4b). */
.fm-footer-col .fm-pie-dato { display: contents; }
.fm-footer-col .fm-pie-valor { display: none; }
.fm-pagos { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fm-pago-pill {
  background: var(--superficie-baja);
  color: var(--texto-secundario);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radio-pill);
}
/* ---------- aviso flotante ---------- */
.fm-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1.5rem) scale(0.85);
  background: var(--color-secundario);
  color: #fff;
  padding: 0.8rem 1.5rem 0.8rem 1.1rem;
  border-radius: var(--radio-pill);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: var(--sombra-flotante);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  white-space: nowrap;
}
.fm-toast--visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.fm-toast-icono { color: #34d399; font-size: 20px; flex-shrink: 0; }
/* Mensaje dentro de la página (sitio.js: avisoEnLinea): lo que la tienda muestra en lugar del aviso azul flotante, que solo conserva el panel de administración. En una fila de botones
   (flex) ocupa toda la línea de abajo. Rojo para errores, verde para confirmaciones; textos de 13,6 px y colores con contraste de 5:1 o más. */
.fm-aviso-linea {
  flex: 1 0 100%;
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radio-lg);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}
.fm-aviso-linea--error { background: #fee2e2; color: #b91c1c; }
.fm-aviso-linea--ok { background: #dcfce7; color: #166534; }
.fm-aviso-linea--aviso { background: #fef3c7; color: #92400e; }
/* En el carrito el aviso ocupa toda la línea de la fila: debajo de todo en PC (flex) y en una fila propia del celular (grid) */
.fm-carrito-item > .fm-aviso-linea { flex: 1 0 100%; grid-column: 1 / -1; margin: 0; }
/* Botón de copiar que acaba de copiar (checkout.js: marcarCopiado): el icono pasa a un check verde un momento. */
.fm-copiado, .fm-copiado:hover { color: #047857 !important; }
/* ---------- animación de "agregar al carrito" ---------- */
.fm-vuelo-carrito {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  font-size: 1.7rem;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: fm-vuelo 0.75s cubic-bezier(0.3, 0, 0.4, 1) forwards;
  filter: drop-shadow(0 6px 10px rgba(26, 27, 31, 0.3));
}
/* La foto del producto en vuelo: cuadrito blanco redondeado con la miniatura (el emoji queda como respaldo cuando no hay foto visible). */
.fm-vuelo-carrito--foto {
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  padding: 4px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--borde);
  font-size: 0;
  animation-duration: 0.8s;
}
.fm-vuelo-carrito--foto img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
@media (max-width: 767px) { .fm-vuelo-carrito--foto { width: 56px; height: 56px; } }
@keyframes fm-vuelo {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  55% {
    transform: translate(
      calc(-50% + var(--vuelo-dx) * 0.55),
      calc(-50% + var(--vuelo-dy) * 0.55 + var(--vuelo-arco))
    ) scale(1.25) rotate(12deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--vuelo-dx)), calc(-50% + var(--vuelo-dy))) scale(0.25) rotate(20deg);
    opacity: 0;
  }
}
/* Botón "Agregar" en confirmación (sitio.js: confirmarAgregadoEnBoton): verde con un check durante 1,5 s. Mismo selector doble que el botón para ganarle a sus :hover. */
.producto-add, .fm-producto-agregar-btn { transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.producto-add.fm-btn-agregado, .producto-add.fm-btn-agregado:hover:not(:disabled),
.fm-btn.fm-btn-agregado, .fm-btn.fm-btn-agregado:hover:not(:disabled) {
  background: #047857;
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(4, 120, 87, 0.4);
}
@media (prefers-reduced-motion: no-preference) {
  .fm-btn-agregado .material-symbols-outlined { animation: fm-agregado-check 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@keyframes fm-agregado-check {
  from { transform: scale(0) rotate(-40deg); }
  to { transform: scale(1) rotate(0); }
}
.fm-carrito-btn--rebote { animation: fm-carrito-rebote 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fm-carrito-rebote {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.22) rotate(-10deg); }
  55% { transform: scale(0.94) rotate(6deg); }
  75% { transform: scale(1.08) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.fm-badge--pulso { animation: fm-badge-pulso 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* carrito vacío: sin "0" naranja en el encabezado (en PC y en celular; vuelve solo con el primer producto) */
.fm-carrito-btn .fm-badge--vacio { display: none; }
@keyframes fm-badge-pulso {
  0% { transform: scale(1); }
  40% { transform: scale(1.6); background: #fff; color: var(--color-primario); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fm-vuelo-carrito { display: none; }
  .fm-carrito-btn--rebote, .fm-badge--pulso { animation: none; }
  .fm-toast { transition: opacity 0.2s ease; }
}
/* ---------- catálogo ---------- */
.fm-catalogo-main { padding-bottom: var(--espacio-xl); }
.fm-catalogo-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--espacio-lg);
  margin-bottom: var(--espacio-lg);
}
.fm-catalogo-titulo-fila { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fm-catalogo-titulo-fila h1 { font-size: 1.5rem; }
.fm-catalogo-banner-texto { min-width: 0; }
.fm-catalogo-banner-cuenta { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--texto-secundario); font-weight: 600; }
.fm-catalogo-desplegable-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--superficie);
  color: var(--color-secundario);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  padding: 0.5rem 0.9rem;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: 0.82rem;
}
.fm-catalogo-desplegable-toggle .material-symbols-outlined {
  font-size: 20px;
  color: var(--texto-secundario);
  transition: transform 0.15s ease;
}
.fm-catalogo-desplegable-toggle[aria-expanded="true"] .material-symbols-outlined {
  transform: rotate(180deg);
}
.fm-catalogo-desplegable-opciones {
  margin-top: 0.4rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 0.9rem;
  padding: 0.35rem;
}
.fm-catalogo-desplegable-opciones[hidden] { display: none; }
.fm-catalogo-filtros-btn { display: none; margin-bottom: 1rem; width: 100%; justify-content: center; }
.fm-catalogo-layout { display: flex; align-items: flex-start; gap: 1.5rem; }
.fm-catalogo-sidebar {
  width: 17rem;
  flex-shrink: 0;
  background: var(--superficie-mas-baja);
  border-radius: var(--radio-3xl);
  padding: 1.25rem;
  box-shadow: var(--sombra-reposo);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.fm-catalogo-sidebar-header { display: flex; align-items: center; justify-content: space-between; }
.fm-catalogo-sidebar-header h2 { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; color: var(--color-secundario); }
.fm-catalogo-sidebar-header button { background: none; border: none; color: var(--color-primario); font-weight: 700; font-size: 0.8rem; padding: 0; }
.fm-catalogo-filtro-grupo {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--superficie-alta);
}
.fm-catalogo-filtro-grupo:last-child { border-bottom: none; padding-bottom: 0; }
.fm-catalogo-filtro-grupo h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--texto-principal);
  margin-bottom: 0.7rem;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
}
.fm-catalogo-filtro-grupo h3 .material-symbols-outlined { font-size: 18px; color: var(--color-primario); }
.fm-catalogo-filtro-fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.35rem 0.4rem;
  border-radius: 0.6rem;
  font-size: 0.82rem;
  color: var(--texto-secundario);
  text-align: left;
}
.fm-catalogo-filtro-fila:hover { background: var(--superficie-baja); }
.fm-catalogo-filtro-punto { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex-shrink: 0; }
.fm-catalogo-filtro-fila.activo { color: var(--color-secundario); font-weight: 700; }
.fm-catalogo-filtro-fila.activo .fm-catalogo-filtro-punto { background: var(--color-primario); }
.fm-catalogo-filtro-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fm-catalogo-filtro-cantidad { margin-left: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--texto-secundario); flex-shrink: 0; }
.fm-catalogo-filtro-fila.activo .fm-catalogo-filtro-cantidad { color: var(--color-primario); }
#fm-catalogo-marcas { max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; }
.fm-catalogo-atributos-titulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radio-lg);
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.82rem;
  font-weight: 700;
}
.fm-catalogo-atributos-titulo .material-symbols-outlined { font-size: 18px; color: var(--color-primario); }
.fm-catalogo-nota-atributos { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--texto-secundario); }
.fm-catalogo-atributo-lista { max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; }
#fm-catalogo-atributos[hidden] { display: none; }
.fm-catalogo-ver-mas {
  margin-top: 0.4rem;
  padding: 0.5rem 0;
  min-height: 36px;
  border: none;
  background: none;
  color: var(--color-primario);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.fm-catalogo-ver-mas:hover { text-decoration: underline; }
.fm-catalogo-ver-mas[hidden], .fm-catalogo-filtro-grupo[hidden], .fm-catalogo-checkbox-fila[hidden] { display: none; }
.fm-catalogo-slider {
  position: relative;
  height: 1.25rem;
  margin: 0.5rem 0.1rem 0.75rem;
}
.fm-catalogo-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--superficie-alta);
  border-radius: var(--radio-pill);
  transform: translateY(-50%);
}
.fm-catalogo-slider-rango {
  position: absolute;
  top: 50%;
  height: 4px;
  background: var(--color-primario);
  border-radius: var(--radio-pill);
  transform: translateY(-50%);
}
.fm-catalogo-slider-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.25rem;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.fm-catalogo-slider-input::-webkit-slider-runnable-track { background: none; }
.fm-catalogo-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primario);
  box-shadow: var(--sombra-reposo);
  cursor: pointer;
  margin-top: 0;
}
.fm-catalogo-slider-input::-moz-range-track { background: none; }
.fm-catalogo-slider-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primario);
  box-shadow: var(--sombra-reposo);
  cursor: pointer;
}
.fm-catalogo-precio-fila { display: flex; align-items: center; gap: 0.5rem; }
.fm-catalogo-precio-fila input {
  width: 100%;
  min-width: 0;
  background: var(--superficie-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  padding: 0.4rem 0.7rem;
  font-size: 0.82rem;
  font-family: var(--fuente-cuerpo);
  outline: none;
}
.fm-catalogo-precio-fila input:focus { border-color: var(--color-primario); }
.fm-catalogo-precio-fila span { color: var(--texto-secundario); font-weight: 700; }
.fm-catalogo-precio-fila button {
  background: var(--color-primario);
  color: #fff;
  border: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fm-catalogo-precio-fila button .material-symbols-outlined { font-size: 16px; }
.fm-catalogo-checkbox-fila { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--texto-secundario); }
.fm-catalogo-resultados { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
/* ---------- catálogo: lista de tarjetas horizontales alargadas ----------
   Una tarjeta por fila a todo el ancho de los resultados, en columnas para que no quede un hueco en el medio:
   foto | nombre + marca/categoría/SKU | calificación + stock | precio y botón.
   .producto-info pasa a display:contents para que sus hijos se acomoden directo en la cuadrícula de la tarjeta.
   La línea de marca/categoría (.producto-meta) la agrega catalogo.js. En celular (<=700px) se usa la versión compacta de abajo. */
.fm-catalogo-lista { display: flex; flex-direction: column; gap: 0.75rem; }
.fm-catalogo-lista[hidden] { display: none; }
.fm-catalogo-lista .producto-meta { display: none; }
@media (min-width: 701px) {
  .fm-catalogo-lista .producto {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) 12rem;
    /* filas "resorte" arriba y abajo: el contenido queda junto y centrado aunque la columna del precio sea más alta */
    grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);   /* minmax(0, …) y no 1fr: con 1fr (mínimo auto) la foto y la columna del precio, que abarcan todas las filas, inflaban las dos filas "resorte" y la tarjeta medía ~22px más de lo que pide su contenido */
    column-gap: 1.25rem;
    row-gap: 0.2rem;
    align-items: center;
    padding: 0.7rem 1.1rem 0.7rem 0.8rem;
    min-height: 8.9rem;   /* lista compacta (2026-10-19): la tarjeta mide ~142px (antes ~184px) y en una pantalla caben 5 productos en vez de 4; crece sola si trae oferta, "Ref. Bs." o un nombre muy largo */
  }
  .fm-catalogo-lista .producto-info { display: contents; }
  .fm-catalogo-lista .producto-img { grid-column: 1; grid-row: 1 / -1; width: 6rem; height: 6rem; aspect-ratio: auto; }
  .fm-catalogo-lista .producto-nombre-click { grid-column: 2; grid-row: 2; font-size: 0.98rem; line-height: 1.35; min-height: 0; }
  .fm-catalogo-lista .producto-meta { display: block; grid-column: 2; grid-row: 3; font-size: 0.78rem; color: var(--texto-secundario); overflow-wrap: anywhere; }
  .fm-catalogo-lista .producto-rating { grid-column: 2; grid-row: 4; }
  .fm-catalogo-lista .stock-badge { grid-column: 2; grid-row: 5; justify-self: start; }
  .fm-catalogo-lista .producto-precio-fila {
    grid-column: 3; grid-row: 1 / -1;
    align-self: stretch;
    margin: 0;
    padding: 0 0 0 1.25rem;
    border-top: none;
    border-left: 1px solid var(--superficie-alta);
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.45rem;
  }
  .fm-catalogo-lista .producto-precio { font-size: 1.25rem; }
  .fm-catalogo-lista .producto-resenas-extra { display: inline; }
}
/* Monitores anchos (la tarjeta mide más de ~1100px): calificación y stock pasan a su propia columna, entre el nombre y el precio. */
@media (min-width: 1500px) {
  .fm-catalogo-lista .producto {
    grid-template-columns: 6.5rem minmax(0, 1fr) 17rem 14rem;
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: 2rem;
    min-height: 8.9rem;
  }
  .fm-catalogo-lista .producto-img { width: 6.5rem; height: 6.5rem; }
  .fm-catalogo-lista .producto-nombre-click { grid-column: 2; grid-row: 2; }
  .fm-catalogo-lista .producto-meta { grid-column: 2; grid-row: 3; }
  .fm-catalogo-lista .producto-rating { grid-column: 3; grid-row: 2; white-space: nowrap; }
  .fm-catalogo-lista .stock-badge { grid-column: 3; grid-row: 3; }
  .fm-catalogo-lista .producto-precio-fila { grid-column: 4; }
}
/* Celular (<=700px): tarjeta compacta (2026-10-20: ~140px en vez de 188, la lista de 24 productos medía 4.700px). La foto (5rem) a la izquierda y, a su derecha,
   el nombre (3 líneas máx.), el estado de stock y, en la última línea, el precio y el botón Agregar; sin la línea divisoria ni la fila de precio de ancho completo.
   Sin calificación ni "Ref. Bs." (el precio en bolívares se ve en la ficha, el carrito y el checkout). Las páginas de categoría y marca (.fm-listado-grid) usan esta misma tarjeta. Por debajo de 360px no cabe el precio junto al botón en la
   columna angosta: ahí se conserva el diseño anterior (precio y botón en una fila bajo la foto, con divisoria). */
@media (max-width: 700px) {
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) { gap: 0.6rem; }
  .fila-productos.fm-listado-grid { display: flex; flex-direction: column; }   /* páginas de categoría y marca (generar_paginas_listados.py): la misma lista de tarjetas compactas que el catálogo, en vez de 2 columnas de tarjetas verticales de ~300px (la página medía 7,5 pantallas) */
  .fila-productos.fm-listado-grid .producto-aviso-stock { display: none; }   /* aquí el estado de stock es la etiqueta (.stock-badge), no el aviso de la portada */
  .fila-productos.fm-listado-grid .stock-badge { display: block; }
  .fila-productos.fm-listado-grid .producto-add { width: auto; }   /* .fila-productos le da ancho completo al botón (portada y relacionados) */
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    align-items: center;
    gap: 0.25rem 0.8rem;
    padding: 0.7rem;
  }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-info { display: contents; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-img { grid-column: 1; grid-row: 1 / span 3; width: 5rem; height: 5rem; aspect-ratio: auto; align-self: center; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-nombre-click {
    grid-column: 2; grid-row: 1; align-self: end; min-height: 0; margin: 0;
    font-size: 0.88rem; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-meta { display: none; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-rating { display: none; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .stock-badge { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; font-size: 0.75rem; padding: 0.15rem 0.55rem; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-precio-fila {
    grid-column: 2; grid-row: 3;
    margin: 0.1rem 0 0; padding: 0; border-top: none; border-left: none;
    display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem;
  }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-precio-bs { display: none; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-precio { font-size: 1.2rem; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-precio-original { font-size: 0.75rem; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-add { flex-shrink: 0; min-height: 2.5rem; padding: 0.5rem 0.95rem; font-size: 0.82rem; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-add .material-symbols-outlined { font-size: 17px; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-add-extra { display: none; }
}
@media (max-width: 359px) {
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto { gap: 0.35rem 0.85rem; padding: 0.8rem; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-img { grid-row: 1 / span 2; width: 5.5rem; height: 5.5rem; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-precio-fila { grid-column: 1 / -1; margin: 0.2rem 0 0; padding: 0.65rem 0 0; border-top: 1px solid var(--superficie-alta); gap: 0.75rem; }
  :is(.fm-catalogo-lista, .fila-productos.fm-listado-grid) .producto-add { padding: 0.5rem 1.1rem; }
}
.fm-catalogo-vacio {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--texto-secundario);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.fm-catalogo-vacio[hidden] { display: none; }
.fm-catalogo-paginacion { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
.fm-catalogo-pagina-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: var(--superficie-mas-baja);
  box-shadow: var(--sombra-reposo);
  color: var(--color-secundario);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fm-catalogo-pagina-btn:hover:not(:disabled) { background: var(--superficie-baja); }
.fm-catalogo-pagina-btn.activo { background: var(--color-primario); color: #fff; }
.fm-catalogo-pagina-btn:disabled { opacity: 0.4; }
.fm-catalogo-pagina-puntos { color: var(--texto-secundario); font-weight: 700; padding: 0 0.25rem; }
@media (max-width: 1023px) {
  .fm-catalogo-filtros-btn { display: inline-flex; }
  .fm-catalogo-layout { flex-direction: column; }
  .fm-catalogo-sidebar { width: 100%; display: none; }
  .fm-catalogo-sidebar.fm-catalogo-sidebar--abierto { display: flex; }
}
/* ---------- ficha de producto ---------- */
.fm-producto-main { padding-bottom: var(--espacio-xl); }
.fm-producto-no-encontrado {
  text-align: center;
  padding: 4rem 1rem;
  margin-top: var(--espacio-lg);
}
.fm-producto-no-encontrado h1 { font-family: var(--fuente-display); margin-bottom: 0.5rem; }
.fm-producto-no-encontrado p { color: var(--texto-secundario); margin-bottom: 1.5rem; }
.fm-producto-ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: var(--espacio-lg);
}
/* Dos columnas desde 768px: en tableta vertical (768–899px) con una sola columna la foto cuadrada ocupaba toda la pantalla
   y el botón de compra quedaba más de una pantalla abajo. */
@media (min-width: 768px) {
  .fm-producto-ficha { grid-template-columns: 1fr 1fr; align-items: start; }
}
.fm-producto-imagen-card {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3xl);
  box-shadow: var(--sombra-reposo);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fm-producto-badges { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
/* "Imagen ilustrativa" bajo la foto de la ficha: letra pequeña (12px, el mínimo de la tienda) y gris, para que avise sin competir con la foto. */
.fm-producto-aviso-imagen { margin: 0; font-size: 0.75rem; line-height: 1.35; color: var(--texto-secundario); text-align: center; }
.fm-producto-aviso-imagen-celular { display: none; }   /* solo celular, ver el bloque "nombre del producto en celular" */
.fm-producto-imagen-zoom {
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-lg);
  background: var(--superficie-baja);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* En monitores grandes la foto cuadrada no debe ser más alta que la pantalla. */
@media (min-width: 900px) {
  .fm-producto-imagen-zoom { width: min(100%, 72vh); margin: 0 auto; }
}
/* Pantallas anchas (desde 1200px): con la foto cuadrada la tarjeta de la izquierda terminaba ~150-200px más abajo que los datos de la derecha
   y quedaba un hueco vacío bajo "Consultar por WhatsApp". El marco pasa a 4:3 (como en celular) y ambos lados terminan casi a la par;
   el ancho se calcula para que el alto no pase del 72% de la ventana, igual que antes. Entre 900 y 1199px ya estaban parejos: no cambia. */
@media (min-width: 1200px) {
  .fm-producto-imagen-zoom { aspect-ratio: 4 / 3; width: min(100%, 96vh); background: #fff; }   /* blanco, como en celular: las fotos de fondo blanco no dejan franjas grises a los lados */
}
/* Solo monitores anchos (desde 1600px): la foto era enorme (~780px). Tope de 34rem (~540px) de ancho y nunca más del 65% del alto de la
   ventana; la columna de la foto también se limita para que la tarjeta no quede con franjas vacías a los lados.
   Por debajo de 1600px todo queda como antes. */
@media (min-width: 1600px) {
  .fm-producto-ficha { grid-template-columns: minmax(0, min(40rem, 45%)) minmax(0, 1fr); }
  .fm-producto-imagen-zoom { width: min(100%, 34rem, 86vh); }
}
.fm-producto-imagen-zoom img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; }
.fm-producto-imagen-zoom:hover img { transform: scale(1.08); }
.fm-producto-imagen-zoom .producto-emoji-fallback { font-size: 5rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.fm-producto-info { display: flex; flex-direction: column; gap: 0.75rem; }
.fm-producto-sku { font-size: 0.8rem; color: var(--texto-secundario); margin: 0.75rem 0 0.5rem; }
.fm-producto-codigo { display: none; }   /* solo celular, ver el bloque "nombre del producto en celular" */
.fm-producto-info h1 {
  font-family: var(--fuente-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--texto-principal);
  line-height: 1.25;
}
.fm-producto-rating { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: #d97706; }
.fm-producto-rating a { color: var(--color-secundario); font-weight: 600; text-decoration: none; }
.fm-producto-rating a:hover { text-decoration: underline; }
.fm-producto-rating:empty { display: none; }
.fm-producto-precio-caja {
  background: var(--superficie-baja);
  border-radius: var(--radio-xl);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fm-producto-precio-fila { display: flex; align-items: baseline; gap: 0.5rem; }
.fm-producto-precio { font-family: var(--fuente-display); font-weight: 800; font-size: 2rem; color: var(--texto-principal); }
.fm-producto-precio-moneda { font-size: 1rem; color: var(--texto-secundario); font-weight: 600; }
.fm-producto-precio-bs { font-size: 1rem; font-weight: 700; color: var(--color-primario); display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.fm-producto-precio-bs-nota { font-size: 0.75rem; font-weight: 500; color: var(--texto-secundario); }
/* "IVA incluido · factura fiscal" bajo el precio (política real de la tienda) y en el resumen del carrito. */
.fm-producto-iva, .fm-carrito-resumen-iva { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; color: var(--texto-secundario); }
.fm-producto-iva .material-symbols-outlined, .fm-carrito-resumen-iva .material-symbols-outlined { font-size: 16px; color: var(--color-primario); }
/* Producto de «solo retiro» (cemento, bloques…): lo dice la ficha, la fila del carrito y la entrega del carrito y del pago (sitio.js: esSoloRetiro). Azul suave: es información, no un error. */
.fm-producto-solo-retiro { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 700; color: var(--color-secundario); background: #eef3fb; border-radius: var(--radio-lg); padding: 0.45rem 0.7rem; }
.fm-producto-solo-retiro .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.fm-carrito-item-solo-retiro { display: inline-flex; align-items: center; gap: 0.3rem; align-self: flex-start; font-size: 0.75rem; font-weight: 700; color: var(--color-secundario); background: #eef3fb; border-radius: var(--radio-pill); padding: 0.15rem 0.55rem 0.15rem 0.4rem; }
.fm-carrito-item-solo-retiro .material-symbols-outlined { font-size: 14px; }
.fm-carrito-entrega-solo-retiro, .fm-checkout-entrega-solo-retiro { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-secundario); background: #eef3fb; border-radius: var(--radio-lg); padding: 0.7rem 0.85rem; }
.fm-carrito-entrega-solo-retiro .material-symbols-outlined, .fm-checkout-entrega-solo-retiro .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.fm-carrito-entrega-opcion--desactivada { opacity: 0.55; cursor: not-allowed; }
.fm-carrito-entrega-opcion--desactivada * { cursor: not-allowed; }
.fm-checkout-entrega-tab:disabled { opacity: 0.5; cursor: not-allowed; }
.fm-checkout-entrega-solo-retiro { margin: -0.4rem 0 0.9rem; }
.fm-carrito-resumen-iva { margin: 0.6rem 0 0; line-height: 1.35; }
.fm-producto-compra-caja {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: var(--sombra-reposo);
}
.fm-producto-stepper-fila { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fm-producto-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--superficie);
  border-radius: var(--radio-pill);
  padding: 0.3rem;
}
.fm-producto-stepper button {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: var(--superficie-mas-baja);
  box-shadow: var(--sombra-reposo);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-principal);
}
.fm-producto-stepper button:hover { color: var(--color-primario); }
.fm-producto-stepper input {
  width: 2.75rem;
  text-align: center;
  background: transparent;
  border: none;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--texto-principal);
}
.fm-producto-agregar-btn { flex: 1; min-width: 12rem; justify-content: center; }
.fm-producto-comprar-btn { width: 100%; justify-content: center; }
.fm-producto-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-secundario);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
.fm-producto-volver:hover { text-decoration: underline; }
/* --- tabs --- */
.fm-producto-tabs {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3xl);
  box-shadow: var(--sombra-reposo);
  padding: 1.5rem;
  margin-top: 2.5rem;
}
.fm-producto-tabs-nav { display: flex; gap: 0.6rem; margin-bottom: 1.25rem; overflow-x: auto; }
.fm-producto-tab-btn {
  border: none;
  background: var(--superficie-baja);
  color: var(--texto-secundario);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 1.3rem;
  border-radius: var(--radio-pill);
  white-space: nowrap;
}
.fm-producto-tab-btn--activo { background: var(--color-secundario); color: #fff; }
.fm-producto-descripcion { color: var(--texto-secundario); line-height: 1.6; margin-bottom: 1.25rem; }
/* Tarjeta con un solo contenido (solo descripción o solo ficha técnica): sin pestañas, con su título. */
.fm-producto-tab-titulo { margin: 0 0 0.9rem; font-family: var(--fuente-display); font-size: 1.1rem; color: var(--texto-principal); }
.fm-producto-tabs--unica .fm-producto-descripcion { margin-bottom: 0; }
.fm-producto-specs-tabla { width: 100%; border-collapse: collapse; }
.fm-producto-specs-tabla tr:nth-child(odd) { background: var(--superficie-baja); }
.fm-producto-specs-tabla td { padding: 0.7rem 1rem; font-size: 0.85rem; }
.fm-producto-specs-tabla td:first-child { color: var(--texto-secundario); font-weight: 600; width: 40%; }
.fm-producto-specs-tabla td:last-child { color: var(--texto-principal); }
/* --- reseñas --- */
.fm-producto-opiniones {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3xl);
  box-shadow: var(--sombra-reposo);
  padding: 1.5rem;
  margin-top: 2.5rem;
}
.fm-producto-opiniones-tag { color: var(--color-primario); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fm-producto-opiniones-header h2 { font-family: var(--fuente-display); font-size: 1.3rem; margin-top: 0.25rem; }
.fm-producto-opiniones-resumen {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 0;
  margin: 1.25rem 0;
  border-top: 1px solid var(--superficie-alta);
  border-bottom: 1px solid var(--superficie-alta);
}
@media (min-width: 700px) {
  .fm-producto-opiniones-resumen { flex-direction: row; align-items: center; }
}
.fm-producto-opiniones-score { display: flex; align-items: baseline; gap: 0.4rem; }
.fm-producto-opiniones-numero { font-family: var(--fuente-display); font-size: 2.5rem; font-weight: 800; }
.fm-producto-opiniones-sobre { color: var(--texto-secundario); }
.fm-producto-opiniones-barras { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.fm-producto-barra-desglose { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; font-weight: 600; }
.fm-producto-barra-desglose span:first-child { display: flex; align-items: center; gap: 0.2rem; width: 2.2rem; color: var(--texto-secundario); }
.fm-producto-barra-desglose .material-symbols-outlined { font-size: 14px; color: var(--color-primario); }
.fm-producto-barra-track { flex: 1; height: 0.5rem; border-radius: var(--radio-pill); background: var(--superficie); overflow: hidden; }
.fm-producto-barra-fill { height: 100%; background: var(--color-primario); border-radius: var(--radio-pill); }
.fm-producto-barra-pct { width: 2.5rem; text-align: right; color: var(--texto-secundario); }
.fm-producto-opiniones-lista { display: flex; flex-direction: column; }
.fm-producto-resena { padding: 1.25rem 0; border-bottom: 1px solid var(--superficie-alta); }
.fm-producto-resena:last-child { border-bottom: none; }
.fm-producto-resena-cabecera { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.fm-producto-resena-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-secundario);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fm-producto-resena-nombre { font-weight: 700; font-size: 0.9rem; }
.fm-producto-resena-nombre span { font-weight: 500; color: var(--texto-secundario); font-size: 0.78rem; }
.fm-producto-resena-fecha { font-size: 0.75rem; color: var(--texto-secundario); }
.fm-producto-resena-estrellas { margin-left: auto; color: #d97706; font-size: 0.85rem; }
.fm-producto-resena p { color: var(--texto-secundario); font-size: 0.88rem; line-height: 1.55; }
/* --- relacionados --- */
.fm-producto-relacionados { margin-top: 2.5rem; }
.fm-producto-relacionados h2 { font-family: var(--fuente-display); font-size: 1.2rem; margin-bottom: 1rem; }
/* "Parecidos que sí tenemos" bajo la ficha de un agotado (producto.js: alternativasHTML): la nota va pegada al título y avisa de que pueden variar en medida o modelo. */
.fm-producto-alternativas h2 { margin-bottom: 0.35rem; }
.fm-producto-alternativas-nota { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.4; color: var(--texto-secundario); }
/* Celular: la ficha usaba medidas de escritorio (título de 25px, foto cuadrada, cajas con mucho relleno) y el botón de
   compra quedaba más de una pantalla abajo. Aquí todo se compacta sin bajar de 40px en lo que se toca ni de 12px en el texto. */
@media (max-width: 899px) {
/* Columna de información (también en tableta vertical, donde mide ~340px): mismas medidas compactas que en celular. */
  .fm-producto-info { gap: 0.45rem; }
  .fm-producto-rating { font-size: 0.78rem; gap: 0.4rem; }
  .fm-producto-precio-caja { padding: 0.6rem 0.9rem; gap: 0.1rem; border-radius: var(--radio-lg); }
  .fm-producto-precio { font-size: 1.55rem; line-height: 1.15; }
  .fm-producto-precio-moneda { font-size: 0.85rem; }
  .fm-producto-precio-bs { font-size: 0.85rem; gap: 0.1rem 0.4rem; }
  .fm-producto-precio-bs-nota { font-size: 0.75rem; }
  .fm-producto-compra-caja { padding: 0.65rem; gap: 0.5rem; border-radius: var(--radio-lg); }
  .fm-producto-stepper-fila { gap: 0.5rem; flex-wrap: nowrap; }
  .fm-producto-stepper { padding: 0.2rem; flex-shrink: 0; }
  .fm-producto-stepper button { width: 2.5rem; height: 2.5rem; }
  .fm-producto-stepper input { width: 2rem; font-size: 0.95rem; }
  .fm-producto-agregar-btn { min-width: 0; padding: 0.7rem 0.75rem; font-size: 0.9rem; white-space: nowrap; }
  .fm-producto-comprar-btn { padding: 0.65rem 1rem; font-size: 0.9rem; }
  .fm-producto-extras { gap: 0.5rem; }
  .fm-producto-imagen-card { padding: 0.75rem; gap: 0.5rem; border-radius: var(--radio-xl); }
}
/* Tableta vertical: dos columnas de unos 340px. */
@media (min-width: 768px) and (max-width: 899px) {
  .fm-producto-ficha { gap: 1.25rem; }
  .fm-producto-info h1 { font-size: 1.3rem; line-height: 1.3; }
}
/* Solo celular: ficha en una columna con foto apaisada y bloques de abajo compactos. */
@media (max-width: 767px) {
  .fm-producto-ficha { gap: 0.75rem; margin-top: 0.35rem; }
  .fm-producto-imagen-card { padding: 0.6rem; gap: 0.4rem; }
  .fm-producto-imagen-zoom { aspect-ratio: 4 / 3; border-radius: var(--radio-md, 0.75rem); background: #fff; }
  .fm-producto-sku { font-size: 0.75rem; margin: 0.55rem 0 0.35rem; }
  .fm-producto-info h1 { font-size: 1.1rem; line-height: 1.3; }
  .fm-producto-tabs, .fm-producto-opiniones { padding: 0.9rem; margin-top: 1.1rem; border-radius: var(--radio-xl); }
  .fm-producto-tabs-nav { margin-bottom: 0.75rem; gap: 0.5rem; }
  .fm-producto-tab-titulo { margin-bottom: 0.6rem; font-size: 1rem; }
  .fm-producto-tab-btn { padding: 0.55rem 1rem; min-height: 40px; }
  .fm-producto-descripcion { margin-bottom: 0.8rem; font-size: 0.9rem; line-height: 1.5; }
  .fm-producto-specs-tabla td { padding: 0.5rem 0.7rem; font-size: 0.8rem; }
  .fm-producto-opiniones-header h2 { font-size: 1.1rem; }
  .fm-producto-opiniones-resumen { padding: 0.8rem 0; margin: 0.8rem 0; gap: 0.8rem; }
  .fm-producto-opiniones-numero { font-size: 2rem; }
  .fm-producto-resena { padding: 0.8rem 0; }
  .fm-producto-relacionados { margin-top: 1.1rem; }
  .fm-producto-relacionados h2 { font-size: 1.05rem; margin-bottom: 0.6rem; }
  .fm-producto-alternativas h2 { margin-bottom: 0.25rem; }
  .fm-producto-alternativas-nota { font-size: 0.8rem; margin-bottom: 0.6rem; }
}
/* Nombre del producto en celular (2026-10-24, opción B elegida por el dueño de unas maquetas): el nombre lleva la barra naranja de los títulos de la marca y el CÓDIGO va
   justo encima de él (pequeño, en mayúsculas separadas); el "SKU …" suelto sobre la foto se oculta en celular para que no se repita. Desde 768px nada cambia: el código
   sigue sobre la foto y el de encima del nombre no se dibuja. */
@media (max-width: 767px) {
  .fm-producto-sku { display: none; }
  .fm-producto-ficha { margin-top: 0.9rem; }
  .fm-producto-info { gap: 0.7rem; }
  .fm-producto-codigo { display: block; margin-bottom: -0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; color: var(--texto-secundario); overflow-wrap: anywhere; }
  .fm-producto-codigo-et { text-transform: uppercase; }
  .fm-producto-info h1 { border-left: 4px solid var(--color-primario); padding-left: 0.8rem; font-size: 1.08rem; font-weight: 800; line-height: 1.3; letter-spacing: 0.005em; }
  /* "Imagen ilustrativa…" en celular: sale de la tarjeta de la foto (quedaba justo antes del nombre) y va debajo de los botones de compra; desde 768px sigue bajo la foto. */
  .fm-producto-aviso-imagen { display: none; }
  .fm-producto-aviso-imagen-celular { display: block; margin: 0.1rem 0 0; font-size: 0.75rem; line-height: 1.35; color: var(--texto-secundario); text-align: center; }
}
/* ---------- carrito ---------- */
.fm-carrito-main { padding-bottom: var(--espacio-xl); }
.fm-carrito-vacio {
  text-align: center;
  padding: 3.5rem 1.25rem 3rem;
  margin-top: var(--espacio-lg);
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3xl);
}
/* carrito vacío (2026-10-17, "estética 8"): el carrito dentro de un círculo suave con dos anillos, y debajo las categorías con más productos */
.fm-carrito-vacio-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  background: #fff0ea; color: var(--color-primario);
  box-shadow: 0 0 0 0.7rem rgba(241, 90, 36, 0.08), 0 0 0 1.4rem rgba(241, 90, 36, 0.04);
  margin-bottom: 1.9rem;
}
.fm-carrito-vacio-icono .material-symbols-outlined { font-size: 2.7rem; color: inherit; }
.fm-carrito-vacio h1 { font-family: var(--fuente-display); margin: 0 0 0.5rem; }
.fm-carrito-vacio p { color: var(--texto-secundario); margin-bottom: 1.5rem; }
.fm-carrito-vacio-categorias { max-width: 54rem; margin: 2.4rem auto 0; padding-top: 1.7rem; border-top: 1px solid var(--borde); }
.fm-carrito-vacio-categorias h2 { font-family: var(--fuente-display); font-size: 1rem; color: var(--color-secundario); margin: 0 0 1rem; }
.fm-carrito-vacio-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
@media (min-width: 640px) { .fm-carrito-vacio-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fm-carrito-vacio-lista a {
  display: flex; align-items: center; gap: 0.65rem; min-height: 3.6rem;
  padding: 0.6rem 0.75rem; text-align: left;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-lg);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.fm-carrito-vacio-cat-icono {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: #fff0ea; color: var(--color-primario); font-size: 1.2rem;
}
.fm-carrito-vacio-cat-texto { display: flex; flex-direction: column; min-width: 0; }
.fm-carrito-vacio-cat-nombre { font-size: 0.86rem; font-weight: 700; line-height: 1.2; color: var(--color-secundario); overflow-wrap: anywhere; }
.fm-carrito-vacio-cat-cuenta { font-size: 0.75rem; color: var(--texto-secundario); margin-top: 0.1rem; }
.fm-carrito-vacio-lista a:focus-visible { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(197, 64, 12, 0.18); outline: none; }
@media (hover: hover) {
  .fm-carrito-vacio-lista a:hover { border-color: var(--color-primario); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(21, 38, 82, 0.35); }
}
@media (prefers-reduced-motion: reduce) { .fm-carrito-vacio-lista a { transition: none; } .fm-carrito-vacio-lista a:hover { transform: none; } }
@media (max-width: 639px) {
  .fm-carrito-vacio { padding: 2.6rem 0.9rem 2rem; }
  .fm-carrito-vacio-icono { width: 4.5rem; height: 4.5rem; box-shadow: 0 0 0 0.55rem rgba(241, 90, 36, 0.08), 0 0 0 1.1rem rgba(241, 90, 36, 0.04); margin-bottom: 1.6rem; }
  .fm-carrito-vacio-icono .material-symbols-outlined { font-size: 2.2rem; }
  .fm-carrito-vacio-categorias { margin-top: 1.8rem; padding-top: 1.3rem; }
  .fm-carrito-vacio-lista a { padding: 0.5rem 0.6rem; gap: 0.5rem; }
}
.fm-carrito-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--espacio-lg);
  margin-bottom: var(--espacio-lg);
}
.fm-carrito-titulo-fila { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fm-carrito-titulo-fila h1 { font-family: var(--fuente-display); font-size: 1.6rem; }
.fm-carrito-contador {
  background: #fff0ea;
  color: var(--color-primario);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radio-pill);
}
.fm-carrito-vaciar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  background: transparent;
  color: var(--texto-secundario);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radio-pill);
}
.fm-carrito-vaciar-btn:hover { background: #fee2e2; color: #b91c1c; }
.fm-carrito-acciones-cabecera { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.fm-carrito-compartir { gap: 0.4rem; white-space: nowrap; }
.fm-carrito-compartir .material-symbols-outlined { font-size: 20px; }
.fm-carrito-compartir-corto { display: none; }
.fm-carrito-titulo-corto { display: none; }
.fm-carrito-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 960px) {
  .fm-carrito-layout { grid-template-columns: 2fr 1fr; }
}
.fm-carrito-columna-izquierda { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.fm-carrito-columna-derecha { position: sticky; top: calc(var(--fm-header-alto, 10.5rem) + 1rem); }
.fm-carrito-lista { display: flex; flex-direction: column; gap: 1rem; }
.fm-carrito-item {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-reposo);
  padding: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}
.fm-carrito-item-img {
  width: 6rem;
  height: 6rem;
  border-radius: var(--radio-lg);
  background: var(--superficie-baja);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.fm-carrito-item-img img { width: 100%; height: 100%; object-fit: contain; }
/* Tabletas y PC: la foto del carrito pasa de 96 a 120px (los productos se veían chicos, con filas de 133px y mucho aire). Excepciones medidas: en celular queda en 96px
   (ahí el nombre necesita el ancho: con foto más grande se bajaba de renglón en pantallas de ~375px) y entre 960 y 1119px (carrito en dos columnas con la columna
   izquierda angosta) también, porque con 120px los controles bajaban de renglón desde 1119px en vez de 1079px (filas de 218px en vez de 133px). */
@media (min-width: 640px) {
  .fm-carrito-item-img { width: 7.5rem; height: 7.5rem; }
}
@media (min-width: 960px) and (max-width: 1119px) {
  .fm-carrito-item-img { width: 6rem; height: 6rem; }
}
.fm-carrito-item-img .producto-emoji-fallback { font-size: 2.2rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.fm-carrito-item-info { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.fm-carrito-item-marca {
  align-self: flex-start;
  background: var(--superficie-baja);
  color: var(--color-secundario);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radio-pill);
}
.fm-carrito-item-nombre { font-family: var(--fuente-display); font-size: 0.95rem; font-weight: 700; color: var(--texto-principal); }
.fm-carrito-item-precio-movil { display: flex; align-items: baseline; gap: 0.4rem; font-weight: 700; }
.fm-carrito-item-precio-movil span { font-size: 0.75rem; font-weight: 500; color: var(--texto-secundario); }
.fm-carrito-guardar-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: transparent;
  color: var(--texto-secundario);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0;
  margin-top: 0.3rem;
}
.fm-carrito-guardar-btn:hover { color: var(--color-primario); }
.fm-carrito-guardar-btn .material-symbols-outlined { font-size: 16px; }
.fm-carrito-item-controles { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.fm-carrito-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--superficie);
  border-radius: var(--radio-pill);
  padding: 0.3rem 0.6rem;
}
.fm-carrito-stepper button {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: none;
  background: var(--superficie-mas-baja);
  box-shadow: var(--sombra-reposo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fm-carrito-stepper button .material-symbols-outlined { font-size: 14px; }
.fm-carrito-stepper-cantidad { font-family: var(--fuente-display); font-weight: 800; font-size: 0.85rem; min-width: 1rem; text-align: center; }
.fm-carrito-item-precio { display: none; flex-direction: column; align-items: flex-end; min-width: 7rem; }
.fm-carrito-item-precio-num { font-family: var(--fuente-display); font-weight: 800; font-size: 1.1rem; color: var(--texto-principal); }
.fm-carrito-item-precio-bs { font-size: 0.75rem; color: var(--texto-secundario); margin-top: 0.1rem; }
.fm-carrito-item-precio-nota { font-size: 0.75rem; color: var(--color-primario); font-weight: 700; margin-top: 0.1rem; }
@media (min-width: 640px) {
  .fm-carrito-item-precio { display: flex; }
  .fm-carrito-item-precio-movil { display: none; }
}
.fm-carrito-eliminar-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--superficie-baja);
  color: var(--texto-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fm-carrito-eliminar-btn:hover { background: #fee2e2; color: #b91c1c; }
/* Salida de una fila del carrito (animación 3 de 5, carrito.js: salidaFilaCarrito): se desliza a la derecha, se desvanece y se encoge a alto 0; el margen negativo de abajo
   quita el hueco (gap) de la lista a la vez, así las filas de abajo suben sin saltos. El alto inline (en px) lo pone el JS justo antes de añadir la clase. El borde de 1 px se quita
   pronto (0,15 s): el navegador dibuja como 1 px cualquier borde mayor que 0, así que si se quitara al final la fila se quedaría en 2 px hasta el último cuadro y daría un salto de 2 px. */
.fm-carrito-item--sale {
  height: 0 !important;
  overflow: hidden;
  opacity: 0;
  transform: translateX(2.5rem);
  margin-bottom: -1rem;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
  transition: height 0.4s ease, margin-bottom 0.4s ease, padding 0.4s ease, border-width 0.15s ease, opacity 0.25s ease, transform 0.3s ease;
}
/* --- guardado para después --- */
.fm-carrito-guardados {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.fm-carrito-guardados h2 { font-family: var(--fuente-display); font-size: 1.05rem; }
.fm-carrito-guardados-contador { color: var(--texto-secundario); font-weight: 500; }
.fm-carrito-guardado { display: flex; align-items: center; gap: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--superficie-alta); }
.fm-carrito-guardado:first-of-type { padding-top: 0; border-top: none; }
.fm-carrito-guardado-img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radio-lg);
  background: var(--superficie-baja);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.fm-carrito-guardado-img img { width: 100%; height: 100%; object-fit: contain; }
.fm-carrito-guardado-img .producto-emoji-fallback { font-size: 1.4rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.fm-carrito-guardado-info { flex: 1; min-width: 0; }
.fm-carrito-guardado-info h4 { font-size: 0.85rem; font-weight: 700; color: var(--texto-principal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-carrito-guardado-precio { font-family: var(--fuente-display); font-weight: 800; color: var(--color-primario); font-size: 0.85rem; }
.fm-carrito-guardado-acciones { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.fm-carrito-guardado-acciones .fm-btn { padding: 0.45rem 0.9rem; font-size: 0.75rem; }
.fm-carrito-guardado-quitar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: var(--superficie-baja);
  color: var(--texto-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fm-carrito-guardado-quitar:hover { background: #fee2e2; color: #b91c1c; }
.fm-carrito-guardado-quitar .material-symbols-outlined { font-size: 16px; }
/* --- método de entrega --- */
.fm-carrito-entrega {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.25rem;
}
.fm-carrito-entrega-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.fm-carrito-entrega-cabecera h2 { font-family: var(--fuente-display); font-size: 1.05rem; }
.fm-carrito-entrega-cabecera p { font-size: 0.78rem; color: var(--texto-secundario); margin-top: 0.2rem; }
.fm-carrito-entrega-cabecera > .material-symbols-outlined {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff0ea;
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fm-carrito-entrega-opciones { display: flex; flex-direction: column; gap: 0.75rem; }
.fm-carrito-entrega-opcion {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid var(--borde);
  background: transparent;
  border-radius: var(--radio-lg);
  cursor: pointer;
  min-width: 0;
}
.fm-carrito-entrega-opcion--activa { border-color: var(--color-primario); background: #fff8f5; }
.fm-carrito-entrega-opcion input { flex-shrink: 0; }
.fm-carrito-entrega-opcion-icono {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radio-lg);
  background: #fff0ea;
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fm-carrito-entrega-opcion-info { flex: 1; min-width: 0; }
.fm-carrito-entrega-opcion-info h3 { font-family: var(--fuente-display); font-size: 0.9rem; }
.fm-carrito-entrega-opcion-info p { font-size: 0.78rem; color: var(--texto-secundario); margin-top: 0.2rem; }
.fm-carrito-entrega-opcion-costo { font-family: var(--fuente-display); font-weight: 800; color: var(--color-primario); font-size: 0.9rem; flex-shrink: 0; }
/* En pantallas angostas la columna de info queda apretada entre el ícono y
   el costo, y la descripción se envuelve en una franja muy angosta (se ve
   "colapsada"). Se reordena en grid: radio/ícono/título/costo arriba y la
   descripción abajo, a todo el ancho. display:contents en el wrapper de
   info permite mover el <h3> y el <p> por separado sin tocar el HTML. */
/* Las opciones de entrega no llevan "Gratis" / "A coordinar" a ningún ancho (el dueño lo pidió primero para celular, 2026-10-28, y luego para PC):
   la descripción de cada opción ya dice "Sin costo adicional…" / "El costo se paga directo en la agencia". "No disponible" sí se queda: explica por qué no se puede elegir. */
.fm-carrito-entrega-opcion:not(.fm-carrito-entrega-opcion--desactivada) .fm-carrito-entrega-opcion-costo { display: none; }
@media (max-width: 640px) {
  .fm-carrito-entrega-opcion {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.4rem;
  }
  .fm-carrito-entrega-opcion-info { display: contents; }
  .fm-carrito-entrega-opcion-info h3 { grid-column: 3; grid-row: 1; }
  .fm-carrito-entrega-opcion-info p { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
}
/* El cupón ya no se aplica en el carrito (se pide en el paso 1 del pago, ver .fm-checkout-cupon*): solo queda la línea que avisa dónde. */
.fm-carrito-cupon-nota { display: flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0; font-size: 0.8rem; line-height: 1.35; color: var(--texto-secundario); }
.fm-carrito-cupon-nota .material-symbols-outlined { font-size: 18px; color: var(--color-primario); flex-shrink: 0; }
/* --- resumen de orden --- */
.fm-carrito-resumen {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-reposo);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.fm-carrito-resumen h2 { font-family: var(--fuente-display); font-size: 1.15rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--superficie-alta); }
.fm-carrito-resumen-fila { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--texto-secundario); }
.fm-carrito-resumen-fila small { color: var(--texto-secundario); opacity: 0.8; }
.fm-carrito-resumen-fila span:last-child { font-weight: 700; color: var(--texto-principal); }
.fm-carrito-resumen-gratis { color: #059669 !important; }
.fm-carrito-resumen-total {
  background: var(--superficie-baja);
  border-radius: var(--radio-lg);
  padding: 1rem;
  margin-top: 0.4rem;
}
.fm-carrito-resumen-total-fila { display: flex; align-items: baseline; justify-content: space-between; }
.fm-carrito-resumen-total-fila span:first-child { font-family: var(--fuente-display); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-secundario); }
.fm-carrito-resumen-total-num { font-family: var(--fuente-display); font-weight: 800; font-size: 1.7rem; color: var(--color-primario); }
.fm-carrito-resumen-total-bs { display: flex; align-items: baseline; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--superficie-alta); font-size: 0.8rem; }
.fm-carrito-resumen-total-bs span:last-child { font-family: var(--fuente-display); font-weight: 700; color: var(--color-secundario); }
.fm-carrito-resumen-nota { font-size: 0.75rem; color: var(--texto-secundario); text-align: right; margin-top: 0.3rem; }
.fm-carrito-resumen-botones { display: flex; flex-direction: column; gap: 0.6rem; }
.fm-carrito-resumen-botones .fm-btn { justify-content: center; width: 100%; }
/* "Compartir mi carrito": el campo con el enlace solo sale si el navegador no deja copiarlo solo (carrito.js: compartirCarrito) */
.fm-carrito-compartir-url { width: 100%; margin: -0.5rem 0 1rem; padding: 0.55rem 0.75rem; border: 1px solid var(--superficie-alta); border-radius: var(--radio-lg); font-size: 0.8rem; color: var(--texto-secundario); background: #fff; }
/* ---------- carrito en celular, más corto (<=639px) ----------
   Con 3 productos la página medía 3.052 px (3,6 pantallas) y el botón de pago quedaba a ~1.900 px del inicio. Cambios, solo en celular (de 640px en adelante no cambia nada):
   (1) cada producto ocupa ~115 px en vez de 196: foto de 72 px, nombre, precio y, en la última línea, la cantidad con "guardar para después" (solo el ícono) y la papelera;
   (2) el método de entrega son dos opciones lado a lado con la descripción de la elegida en una línea; (3) el resumen con "Hacer mi pedido" sube justo debajo de la entrega
   y "Guardado para después" pasa a ir debajo del resumen; (4) la cabecera es UNA línea: título "Carrito", contador, "Compartir" y "Vaciar carrito" (solo el ícono por debajo de 520px);
   (5) "Seguir comprando" ya no existe en el carrito (ni en celular ni en PC: el encabezado lleva el buscador y las categorías); (6) el cupón ya no está en el carrito (se aplica en el pago, paso 1: checkout.js), solo queda la nota .fm-carrito-cupon-nota. */
.fm-carrito-entrega-nota { display: none; }
@media (max-width: 639px) {
  .fm-carrito-encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin: 1rem 0; }
  .fm-carrito-titulo-fila { flex-wrap: nowrap; gap: 0.5rem; }
  .fm-carrito-titulo-fila h1 { font-size: 1.4rem; }
  .fm-carrito-titulo-largo { display: none; }
  .fm-carrito-titulo-corto { display: inline; }
  .fm-carrito-acciones-cabecera { gap: 0.4rem; }
  .fm-carrito-compartir { min-height: 2.5rem; padding: 0.4rem 0.9rem; font-size: 0.85rem; }
  .fm-carrito-compartir-largo { display: none; }
  .fm-carrito-compartir-corto { display: inline; }
  .fm-carrito-vaciar-btn { min-height: 2.5rem; padding: 0.4rem 0.6rem; }
  .fm-carrito-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }   /* minmax(0, …): sin él el contenido más ancho (un guardado con nombre largo) ensancha la columna entera */
  .fm-carrito-columna-izquierda { display: contents; }
  .fm-carrito-lista { order: 1; gap: 0.6rem; }
  .fm-carrito-entrega { order: 2; }
  .fm-carrito-columna-derecha { order: 4; position: static; }
  .fm-carrito-guardados { order: 5; }
  .fm-carrito-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto auto; column-gap: 0.75rem; row-gap: 0; padding: 0.75rem; align-items: center; }
  .fm-carrito-item-img { grid-column: 1; grid-row: 1 / span 4; width: 4.5rem; height: 4.5rem; align-self: start; }
  .fm-carrito-item-info, .fm-carrito-item-controles { display: contents; }
  .fm-carrito-item-marca { grid-column: 2 / -1; grid-row: 1; justify-self: start; margin-bottom: 0.2rem; }
  .fm-carrito-item-nombre { grid-column: 2 / -1; grid-row: 2; font-size: 0.9rem; line-height: 1.25; }
  .fm-carrito-item-precio-movil { grid-column: 2 / -1; grid-row: 3; margin: 0.15rem 0 0.4rem; }
  .fm-carrito-stepper { grid-column: 2; grid-row: 4; justify-self: start; }
  .fm-carrito-guardar-btn { grid-column: 3; grid-row: 4; align-self: center; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; justify-content: center; border: 1px solid var(--borde); border-radius: 50%; background: var(--superficie-baja); font-size: 0; }
  .fm-carrito-guardar-btn .material-symbols-outlined { font-size: 20px; }
  .fm-carrito-eliminar-btn { grid-column: 4; grid-row: 4; }
  /* fila con el aviso «Solo retiro en tienda»: una fila más (la 3) para el aviso; el precio, la cantidad y los botones bajan una */
  .fm-carrito-item--solo-retiro .fm-carrito-item-img { grid-row: 1 / span 5; }
  .fm-carrito-item--solo-retiro .fm-carrito-item-solo-retiro { grid-column: 2 / -1; grid-row: 3; margin-top: 0.15rem; }
  .fm-carrito-item--solo-retiro .fm-carrito-item-precio-movil { grid-row: 4; }
  .fm-carrito-item--solo-retiro .fm-carrito-stepper, .fm-carrito-item--solo-retiro .fm-carrito-guardar-btn, .fm-carrito-item--solo-retiro .fm-carrito-eliminar-btn { grid-row: 5; }
  .fm-carrito-item.fm-carrito-item--sale { padding-top: 0; padding-bottom: 0; margin-bottom: -0.6rem; }   /* la salida animada: sin relleno y compensando el hueco de 0.6rem de la lista (en PC es 1rem) */
  .fm-carrito-entrega { padding: 0.9rem; }
  .fm-carrito-entrega-cabecera { margin-bottom: 0.7rem; }
  .fm-carrito-entrega-cabecera p, .fm-carrito-entrega-cabecera > .material-symbols-outlined { display: none; }
  .fm-carrito-entrega-opciones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
  .fm-carrito-entrega-opcion { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.55rem; row-gap: 0.1rem; padding: 0.7rem 0.75rem; }
  .fm-carrito-entrega-opcion input { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .fm-carrito-entrega-opcion-icono { display: none; }
  .fm-carrito-entrega-opcion-info p { display: none; }
  .fm-carrito-entrega-opcion-info h3 { grid-column: 2; grid-row: 1; font-size: 0.85rem; line-height: 1.2; }
  .fm-carrito-entrega-opcion-costo { grid-column: 2; grid-row: 2; font-size: 0.8rem; }
  /* en celular las opciones llevan solo el título (la línea de abajo describe la elegida); el costo ya está oculto a todos los anchos, ver arriba */
  .fm-carrito-entrega-nota { display: block; margin: 0.7rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--texto-secundario); }
}
/* por debajo de 360px (hasta 320) la línea "cantidad · guardar · papelera" no cabía (el selector de cantidad se montaba sobre "guardar" por ~20px): relleno y huecos más chicos, los botones de 40px se quedan igual */
@media (max-width: 359px) {
  .fm-carrito-item { padding: 0.6rem; column-gap: 0.5rem; }
  .fm-carrito-stepper { gap: 0.25rem; padding: 0.3rem 0.4rem; }
  .fm-carrito-stepper button { width: 1.5rem; height: 1.5rem; }
  .fm-carrito-stepper-cantidad { min-width: 0.9rem; }
}
/* Por debajo de 520px "Compartir" y "Vaciar carrito" quedan solo con su ícono (con nombre accesible: aria-label y title) para que título, contador y los dos botones
   quepan SIEMPRE en una línea. Medido (2026-10-21, desde una captura del dueño en un celular de 360px): con el texto "Compartir" (124px) la cabecera se partía en dos líneas
   hasta 375px incluso con 1 producto, y a 390px con 12 productos; solo con íconos sobran >= 60px a 360px con 12 productos y >= 20px a 320px. A "¡Enlace copiado!" le queda el
   ícono que pasa a check verde (.fm-copiado) durante 1,6 s. Desde 520px los botones llevan texto y sobran >= 50px. */
@media (max-width: 519px) {
  .fm-carrito-vaciar-btn { font-size: 0; width: 2.5rem; padding: 0; justify-content: center; border: 1px solid var(--borde); border-radius: 50%; background: var(--superficie-baja); }
  .fm-carrito-vaciar-btn .material-symbols-outlined { font-size: 20px; }
  .fm-carrito-compartir { font-size: 0; width: 2.5rem; min-width: 2.5rem; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
}
/* ---------- lista compartida (carrito.js: carrito.html?item=2x<código>…): tarjeta encima del carrito con los productos que te mandaron ---------- */
.fm-carrito-compartido { margin: var(--espacio-lg) 0 1.5rem; padding: 1.1rem 1.25rem 1.25rem; background: #ffffff; border: 1px solid var(--superficie-alta); border-left: 4px solid var(--color-primario); border-radius: var(--radio-lg); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); }
.fm-carrito-compartido-titulo { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--fuente-display); font-weight: 800; font-size: 1.1rem; color: var(--color-secundario); }
.fm-carrito-compartido-titulo .material-symbols-outlined { color: var(--color-primario); font-size: 22px; }
.fm-carrito-compartido-texto { margin: 0.35rem 0 0.9rem; font-size: 0.88rem; line-height: 1.45; color: var(--texto-secundario); }
.fm-carrito-compartido-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--superficie-alta); }
.fm-carrito-compartido-item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--superficie-alta); }
.fm-carrito-compartido-img { width: 3.5rem; height: 3.5rem; border-radius: 0.6rem; background: var(--superficie-baja); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fm-carrito-compartido-img img { width: 100%; height: 100%; object-fit: contain; }
.fm-carrito-compartido-img .producto-emoji-fallback { font-size: 1.5rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.fm-carrito-compartido-info { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.fm-carrito-compartido-nombre { font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: var(--color-secundario); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-carrito-compartido-meta { font-size: 0.82rem; color: var(--texto-secundario); }
.fm-carrito-compartido-aviso { color: #92400e; font-weight: 600; }
.fm-carrito-compartido-precio { font-family: var(--fuente-display); font-weight: 700; font-size: 0.95rem; color: var(--color-secundario); white-space: nowrap; }
.fm-carrito-compartido-item--no .fm-carrito-compartido-img { opacity: 0.45; filter: grayscale(1); }
.fm-carrito-compartido-item--no .fm-carrito-compartido-nombre { color: var(--texto-secundario); }
.fm-carrito-compartido-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 0.9rem; }
.fm-carrito-compartido-resumen { font-size: 0.9rem; font-weight: 700; color: var(--color-secundario); }
.fm-carrito-compartido-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 639px) {
  .fm-carrito-compartido { padding: 1rem 0.9rem 1.1rem; }
  .fm-carrito-compartido-item { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.6rem; }
  .fm-carrito-compartido-img { width: 3rem; height: 3rem; }
  .fm-carrito-compartido-botones { width: 100%; flex-direction: column; }
  .fm-carrito-compartido-botones .fm-btn { width: 100%; justify-content: center; min-height: 2.75rem; }
}
.fm-carrito-resumen-pagos { padding-top: 0.9rem; border-top: 1px solid var(--superficie-alta); text-align: center; }
.fm-carrito-resumen-pagos > span { font-size: 0.75rem; font-weight: 700; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 0.04em; }
.fm-carrito-resumen-pagos > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; }
/* --- relacionados --- */
.fm-carrito-relacionados { margin-top: 2.5rem; }
.fm-carrito-relacionados h2 { font-family: var(--fuente-display); font-size: 1.2rem; margin-bottom: 1rem; }
/* ---------- mi cuenta ---------- */
.fm-cuenta-main { padding-bottom: var(--espacio-xl); }
/* --- login / registro --- */
.fm-cuenta-auth {
  max-width: 28rem;
  margin: var(--espacio-lg) auto 0;
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3xl);
  box-shadow: var(--sombra-reposo);
  padding: 2rem;
}
/* --- login / registro: panel de beneficios (solo pantallas anchas) ---
   Desde 900px la tarjeta de acceso y un panel azul con lo que da tener cuenta forman una sola tarjeta partida en dos; debajo de 900px el panel se
   esconde y la tarjeta queda sola, como siempre. El panel va después de la tarjeta en el marcado y aquí se coloca a la izquierda. */
.fm-cuenta-beneficios { display: none; }
@media (min-width: 900px) {
  .fm-cuenta-auth-envoltura {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28rem;
    max-width: 60rem;
    margin: var(--espacio-lg) auto 0;
    background: var(--superficie-mas-baja);
    border: 1px solid var(--borde);
    border-radius: var(--radio-3xl);
    box-shadow: var(--sombra-reposo);
    overflow: hidden;
  }
  .fm-cuenta-auth-envoltura > .fm-cuenta-auth { grid-column: 2; grid-row: 1; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .fm-cuenta-auth-envoltura > .fm-cuenta-beneficios {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; gap: 1.5rem;
    padding: 2.5rem 2.25rem;
    background: linear-gradient(160deg, var(--color-secundario), #1a3160);
    color: #fff;
  }
  .fm-cuenta-beneficios-titulo {
    margin: 0;
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .fm-cuenta-beneficios-titulo::before { content: ''; display: block; width: 2.2rem; height: 0.28rem; margin-bottom: 0.9rem; border-radius: var(--radio-pill); background: #F15A24; }
  .fm-cuenta-beneficios ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
  .fm-cuenta-beneficios li { display: flex; align-items: flex-start; gap: 0.85rem; }
  .fm-cuenta-beneficios-icono {
    width: 2.5rem; height: 2.5rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
    font-size: 22px;
  }
  .fm-cuenta-beneficios li div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
  .fm-cuenta-beneficios li strong { font-size: 0.98rem; font-weight: 700; }
  .fm-cuenta-beneficios li div > span { font-size: 0.85rem; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }
  .fm-cuenta-beneficios-pie { margin: auto 0 0; font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
}
.fm-cuenta-aviso {
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: var(--radio-lg);
  margin-bottom: 1.25rem;
}
/* Cuando el aviso es lo primero de la página (bajo el header) necesita aire arriba: sin él se pegaba al header y parecía cortado. */
#fm-cuenta-contenedor > .fm-cuenta-aviso { margin-top: 1rem; margin-bottom: 0; }
/* --- accesos directos (Google/Facebook) ---
   ⚠️ Decorativos: ningún proveedor está conectado de verdad (sin backend ni
   OAuth). Al hacer clic solo avisan "próximamente" (ver cuenta.js). */
.fm-cuenta-social { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
.fm-cuenta-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid var(--borde);
  background: var(--superficie-mas-baja);
  color: var(--texto-principal);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem;
  border-radius: var(--radio-pill);
}
.fm-cuenta-social-btn:hover { background: var(--superficie-baja); }
.fm-cuenta-social-icono {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}
.fm-cuenta-social-icono--google { background: #fce8e6; color: #c5221f; }
.fm-cuenta-social-icono--facebook { background: #1877f2; color: #fff; }
.fm-cuenta-social--iconos { flex-direction: row; justify-content: center; gap: 0.9rem; }
.fm-cuenta-social-btn--icono {
  width: 3rem;
  height: 3rem;
  padding: 0;
  flex: none;
  border-radius: 50%;
}
.fm-cuenta-social-btn--icono .fm-cuenta-social-icono { width: 1.5rem; height: 1.5rem; font-size: 0.85rem; }
.fm-cuenta-divisor { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.75rem; margin-bottom: 1.25rem; font-size: 0.75rem; color: var(--texto-secundario); font-weight: 600; }
.fm-cuenta-divisor::before, .fm-cuenta-divisor::after { content: ''; flex: 1; height: 1px; background: var(--superficie-alta); }
.fm-cuenta-auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; background: var(--superficie-baja); border-radius: var(--radio-pill); padding: 0.3rem; }
.fm-cuenta-auth-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--texto-secundario);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.55rem;
  border-radius: var(--radio-pill);
}
.fm-cuenta-auth-tab--activo { background: var(--superficie-mas-baja) !important; color: var(--color-secundario) !important; box-shadow: var(--sombra-reposo); }
.fm-cuenta-form { display: flex; flex-direction: column; gap: 1rem; }
.fm-cuenta-form[hidden] { display: none; }
.fm-cuenta-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--texto-secundario); }
/* aviso amable bajo cédula / teléfono (cuenta.js): no bloquea nada, solo orienta; vacío = oculto */
.fm-cuenta-form .fm-cuenta-campo-aviso { display: block; font-size: 0.8125rem; font-weight: 500; line-height: 1.35; color: #92400e; }
.fm-cuenta-form .fm-cuenta-campo-aviso:empty { display: none; }
.fm-cuenta-form input, .fm-cuenta-form select, .fm-cuenta-form textarea {
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  font-family: var(--fuente-cuerpo);
  color: var(--texto-principal);
  outline: none;
  background: #fff;
}
.fm-cuenta-form textarea { resize: vertical; }
.fm-cuenta-olvide-btn {
  align-self: flex-end;
  margin-top: -0.5rem;
  background: none; border: none; padding: 0;
  color: var(--color-primario); font-weight: 700; font-size: 0.78rem;
}
.fm-cuenta-olvide-btn:hover { text-decoration: underline; }
.fm-cuenta-form input:focus, .fm-cuenta-form select:focus, .fm-cuenta-form textarea:focus { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.15); }
.fm-cuenta-form input:disabled { background: var(--superficie-baja); color: var(--texto-secundario); }
/* contraseña con botón de ojo (sitio.js, "MOSTRAR / OCULTAR CONTRASEÑA") */
.fm-clave { position: relative; display: block; }
.fm-clave > input { width: 100%; box-sizing: border-box; padding-right: 3rem; }
.fm-clave-ojo {
  position: absolute; top: 50%; right: 0.3rem; transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--texto-secundario); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fm-clave-ojo .material-symbols-outlined { font-size: 22px; }
.fm-clave-ojo:hover { color: var(--color-primario); background: rgba(241, 90, 36, 0.08); }
.fm-clave-ojo:focus-visible { outline: 2px solid var(--color-primario); outline-offset: -2px; }
.fm-cuenta-form-fila { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.fm-cuenta-form-fila label { min-width: 0; }
@media (min-width: 480px) {
  .fm-cuenta-form-fila { grid-template-columns: 1fr 1fr; }
}
.fm-cuenta-form .fm-btn { justify-content: center; margin-top: 0.25rem; }
.fm-cuenta-mensaje { font-size: 0.8rem; font-weight: 600; padding: 0.65rem 0.9rem; border-radius: var(--radio-lg); margin-bottom: 0.25rem; }
.fm-cuenta-mensaje--error { background: #fee2e2; color: #b91c1c; }
.fm-cuenta-mensaje--info { background: #fff7ed; color: #9a3412; }
.fm-cuenta-mensaje--ok { background: #dcfce7; color: #166534; }
.fm-cuenta-aviso-simulado { font-size: 0.75rem; color: var(--texto-secundario); text-align: center; margin-top: 1.5rem; line-height: 1.5; }
/* --- perfil --- */
.fm-cuenta-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: var(--espacio-lg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* mismo azul y misma barra naranja que los banners de categoría y marca (títulos de categoría): la cabecera de la cuenta ya no es una tarjeta gris clara */
  background: radial-gradient(circle at 92% -20%, rgba(255, 255, 255, 0.1), transparent 55%), linear-gradient(120deg, #172c59 0%, var(--color-secundario) 58%, #2c4d92 100%);
  color: #fff;
  border-radius: var(--radio-lg);
  box-shadow: 0 14px 30px -14px rgba(21, 38, 82, 0.6);
  padding: 1.5rem 2rem 1.5rem 2.4rem;
}
.fm-cuenta-cabecera::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  background: linear-gradient(#F15A24, var(--color-primario));
}
.fm-cuenta-cabecera-info { flex: 1; min-width: 0; }
.fm-cuenta-cabecera-info h1 { font-family: var(--fuente-display); font-size: 1.4rem; overflow-wrap: anywhere; color: #fff; }
/* "Miembro desde …" (fecha larga) y el correo del cliente no caben en una línea en celular. */
.fm-cuenta-cabecera-desde { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.78); }
@media (max-width: 479px) {
  .fm-cuenta-cabecera { padding: 1rem 1.15rem 1rem 1.5rem; gap: 0.75rem; }
  .fm-cuenta-cabecera-info { flex: 1 1 0; }
  .fm-cuenta-cabecera-info h1 { font-size: 1.15rem; line-height: 1.25; }
  .fm-cuenta-cabecera-desde { display: block; }
  /* Pedidos y "En curso" quedan al lado del nombre (la cabecera mide ~100px menos y los pedidos se ven sin bajar); */
  .fm-cuenta-stats { gap: 1rem; }
  .fm-cuenta-stats span { font-size: 1.25rem; }
}
@media (max-width: 359px) {
  /* ...y en pantallas muy angostas pasan a su propia fila para que el nombre o el correo tengan todo el ancho. */
  .fm-cuenta-stats { flex: 1 0 100%; justify-content: center; gap: 2.5rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.2); }
}
.fm-cuenta-stats { display: flex; gap: 1.5rem; }
.fm-cuenta-stats div { text-align: center; }
.fm-cuenta-stats span { display: block; font-family: var(--fuente-display); font-weight: 800; font-size: 1.4rem; color: #fff; }
.fm-cuenta-stats div { font-size: 0.75rem; color: rgba(255, 255, 255, 0.78); font-weight: 600; }
.fm-cuenta-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; align-items: start; }
@media (min-width: 800px) {
  .fm-cuenta-layout { grid-template-columns: 16rem 1fr; }
}
.fm-cuenta-menu {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 0.75rem;
}
.fm-cuenta-menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
  background: transparent;
  color: var(--texto-secundario);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radio-lg);
  text-align: left;
}
.fm-cuenta-menu button:hover { background: var(--superficie-baja); }
.fm-cuenta-menu-btn--activo { background: var(--color-secundario) !important; color: #fff !important; }
.fm-cuenta-menu #fm-cuenta-cerrar-sesion { color: #b91c1c; margin-top: 0.4rem; border-top: 1px solid var(--superficie-alta); padding-top: 0.9rem; border-radius: 0; }
/* Celular y tableta angosta (<800px, donde el menú ya no es una columna): las 4 secciones son 4 botones sueltos en una cuadrícula de 2x2, con el ícono al lado del texto en
   una sola línea (la fila de 4 con el ícono arriba se veía apretada y partía "Mis Direcciones" en dos líneas). "Cerrar sesión" no va aquí: sale de este bloque y queda
   al final de la página (#fm-cuenta-cerrar-sesion-movil). */
@media (max-width: 799px) {
  .fm-cuenta-layout { gap: 1rem; margin-top: 1rem; }
  .fm-cuenta-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; padding: 0; background: transparent; border: 0; border-radius: 0; }
  .fm-cuenta-menu [data-tab] {
    min-width: 0; min-height: 3.25rem; gap: 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.85rem; line-height: 1.2; text-align: left;
    background: var(--superficie-mas-baja); border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-reposo);
  }
  .fm-cuenta-menu [data-tab] .material-symbols-outlined { flex: none; font-size: 22px; color: var(--color-primario); }
  .fm-cuenta-menu .fm-cuenta-menu-btn--activo { border-color: var(--color-secundario); }
  .fm-cuenta-menu .fm-cuenta-menu-btn--activo .material-symbols-outlined { color: #fff; }
  .fm-cuenta-menu #fm-cuenta-cerrar-sesion { display: none; }
  .fm-cuenta-salir-movil {
    justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.5rem 1.4rem;
    border: 1.5px solid #f1c4c4; border-radius: var(--radio-pill); background: #fff; color: #b91c1c; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  }
  .fm-cuenta-salir-movil .material-symbols-outlined { font-size: 20px; }
}
@media (min-width: 800px) {
  .fm-cuenta-salir-movil { display: none; }
}
@media (max-width: 399px) {
  .fm-cuenta-menu [data-tab] { gap: 0.35rem; padding: 0.6rem 0.6rem; }   /* a 360px "Mis Direcciones" todavía cabe en una línea */
  .fm-cuenta-menu [data-tab] .material-symbols-outlined { font-size: 20px; }
  .fm-cuenta-menu-n { min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; font-size: 0.75rem; }   /* con número, "Mis Pedidos" y "Mis Reseñas" siguen en una línea a 360px */
}
@media (max-width: 359px) {
  .fm-cuenta-menu [data-tab] { gap: 0.35rem; padding: 0.5rem 0.55rem; font-size: 0.8rem; }
  .fm-cuenta-menu [data-tab] .material-symbols-outlined { font-size: 20px; }
}
/* Franja verde mientras algún pedido está listo: qué hacer y un botón que abre ese pedido. */
.fm-cuenta-listo {
  display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1rem; padding: 0.85rem 1rem; border: 1px solid #a7f3d0; border-radius: var(--radio-lg);
  background: #ecfdf5; color: #065f46;
}
.fm-cuenta-listo-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.85rem; }
.fm-cuenta-listo-fila > .material-symbols-outlined { flex: none; font-size: 26px; color: #047857; }
.fm-cuenta-listo-texto { flex: 1 1 16rem; min-width: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.4; }
.fm-cuenta-listo-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1rem; }
.fm-cuenta-listo-acciones .fm-btn { min-height: 2.5rem; padding: 0.4rem 1.1rem; font-size: 0.82rem; }
.fm-cuenta-listo-enlace { color: #047857; font-size: 0.82rem; font-weight: 700; text-decoration: underline; }
.fm-cuenta-listo-mas { margin: 0; font-size: 0.8rem; font-weight: 600; }
/* línea "Último pedido" de la cabecera: solo en PC (en celular la cabecera ya va justa y los pedidos están a un toque) */
.fm-cuenta-cabecera-ultimo { display: none; }
@media (min-width: 800px) {
  .fm-cuenta-cabecera-ultimo {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-top: 0.7rem; padding: 0.35rem 0.8rem; border-radius: var(--radio-pill);
    background: var(--superficie-baja); color: var(--texto-principal); font-size: 0.82rem; text-decoration: none;
  }
  .fm-cuenta-cabecera-ultimo strong { font-family: var(--fuente-display); }
  .fm-cuenta-cabecera-ultimo-etiqueta, .fm-cuenta-cabecera-ultimo-fecha { color: var(--texto-secundario); font-weight: 600; }
  .fm-cuenta-cabecera-ultimo:hover { background: var(--superficie-alta); }
  .fm-cuenta-cabecera-ultimo:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
}
/* número en el botón de una pestaña (pedidos en curso, productos por reseñar); position: relative contiene el texto solo-lector, que es absoluto */
.fm-cuenta-menu-n {
  position: relative; flex: none; margin-left: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 0.4rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radio-pill); background: var(--color-primario); color: #fff; font-size: 0.75rem; font-weight: 800; line-height: 1;
}
.fm-cuenta-menu .fm-cuenta-menu-btn--activo .fm-cuenta-menu-n { background: #fff; color: var(--color-secundario); }
/* Aviso de perfil incompleto (nombre, cédula o teléfono sin llenar): una franja con el texto y el botón que lleva a "Mi Información". */
.fm-cuenta-aviso--perfil { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.fm-cuenta-aviso--perfil[hidden] { display: none; }
.fm-cuenta-aviso--perfil .material-symbols-outlined { font-size: 20px; flex: none; }
.fm-cuenta-aviso--perfil .fm-cuenta-aviso-texto { flex: 1 1 14rem; min-width: 0; }
.fm-cuenta-aviso--perfil .fm-btn { min-height: 2.5rem; padding: 0.4rem 1.1rem; font-size: 0.82rem; }
.fm-cuenta-panel {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-reposo);
  padding: 1.5rem;
  min-width: 0;
}
/* pantallas vacías de Mi cuenta (2026-10-17, "estética 14"): mismo estilo que el carrito vacío (círculo suave con anillos, título y texto) */
.fm-cuenta-vacio { text-align: center; padding: 2.8rem 1.25rem 2.4rem; background: var(--superficie-mas-baja); border: 1px solid var(--borde); border-radius: var(--radio-3xl); }
.fm-cuenta-vacio > .material-symbols-outlined {
  display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: #fff0ea; color: var(--color-primario); font-size: 2.2rem;
  box-shadow: 0 0 0 0.55rem rgba(241, 90, 36, 0.08), 0 0 0 1.1rem rgba(241, 90, 36, 0.04); margin-bottom: 1.5rem;
}
.fm-cuenta-vacio p { color: var(--texto-secundario); max-width: 30rem; margin: 0 auto 1.3rem; line-height: 1.5; }
.fm-cuenta-vacio p:last-child { margin-bottom: 0; }
.fm-cuenta-vacio .fm-cuenta-vacio-titulo { font-family: var(--fuente-display); font-size: 1.15rem; font-weight: 700; color: var(--color-secundario); margin-bottom: 0.4rem; }
.fm-cuenta-pedidos-lista { display: flex; flex-direction: column; gap: 1rem; }
.fm-cuenta-pedido { border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 1rem 1.25rem; }
.fm-cuenta-pedido-cabecera {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  cursor: pointer; list-style: none;
}
.fm-cuenta-pedido-cabecera::-webkit-details-marker { display: none; }
.fm-cuenta-pedido-flecha { color: var(--texto-secundario); transition: transform 0.15s ease; }
.fm-cuenta-pedido[open] .fm-cuenta-pedido-flecha { transform: rotate(180deg); }
.fm-cuenta-pedido-cabecera > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; min-width: 0; }
.fm-cuenta-pedido-numero { font-family: var(--fuente-display); font-weight: 800; font-size: 0.9rem; }
.fm-cuenta-pedido-estado { font-size: 0.75rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: var(--radio-pill); text-transform: uppercase; white-space: nowrap; }
.fm-cuenta-pedido-estado--verificando { background: #fef3c7; color: #b45309; }
.fm-cuenta-pedido-estado--verificando.fm-cuenta-pedido-estado--pago-rechazado { background: #fee2e2; color: #b91c1c; }
.fm-cuenta-pedido-estado--preparando { background: #dbeafe; color: #1d4ed8; }
.fm-cuenta-pedido-estado--listo { background: #dcfce7; color: #15803d; }
.fm-cuenta-pedido-estado--completado { background: #e5e7eb; color: #374151; }
.fm-cuenta-pedido-estado--cancelado { background: #fee2e2; color: #b91c1c; }
.fm-cuenta-pedido-fecha { font-size: 0.75rem; color: var(--texto-secundario); }
/* barrita de avance del pedido cerrado (estética 15): 4 tramos, los hechos en naranja; al abrir el pedido sale la línea de pasos y esta se oculta */
.fm-cuenta-pedido-mini { flex: 0 0 100%; display: flex; gap: 4px; margin-top: 0.15rem; }
.fm-cuenta-pedido-mini i { flex: 1; height: 4px; border-radius: 4px; background: var(--superficie-alta); }
.fm-cuenta-pedido-mini .fm-cuenta-pedido-mini--hecho { background: var(--color-primario); }
.fm-cuenta-pedido[open] .fm-cuenta-pedido-mini { display: none; }
/* resumen del pedido cerrado: cuánto fue, cuántos productos y "Pagar" si aún espera pago; al abrirlo el pie ya lo trae todo y esta línea se oculta */
.fm-cuenta-pedido-resumen {
  flex: 0 0 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mini texto pagar"; align-items: center; column-gap: 0.75rem; row-gap: 0.45rem; min-width: 0;
}
.fm-cuenta-pedido-resumen--plazo { grid-template-areas: "mini texto pagar" "plazo plazo plazo"; }
.fm-cuenta-pedido-resumen-texto { grid-area: texto; font-size: 0.82rem; color: var(--texto-secundario); min-width: 0; overflow-wrap: anywhere; }
.fm-cuenta-pedido-resumen-texto strong { font-family: var(--fuente-display); font-size: 0.95rem; color: var(--color-primario); }
.fm-cuenta-pedido-pagar-mini { grid-area: pagar; min-height: 2.5rem; padding: 0.3rem 1.1rem; font-size: 0.82rem; }
/* celular: el texto ocupa todo el ancho junto a las miniaturas y "Pagar" baja a la derecha, a la altura de la ficha del plazo */
@media (max-width: 599px) {
  .fm-cuenta-pedido-resumen { grid-template-areas: "mini texto texto"; }
  .fm-cuenta-pedido-resumen--pagable { grid-template-areas: "mini texto texto" ". . pagar"; }
  .fm-cuenta-pedido-resumen--plazo { grid-template-areas: "mini texto texto" "plazo plazo pagar"; }
}
.fm-cuenta-pedido[open] .fm-cuenta-pedido-resumen { display: none; }
.fm-cuenta-pedido { scroll-margin-top: calc(var(--fm-header-alto, 0px) + 1rem); }   /* "Ver pedido" lo desplaza a la vista sin que lo tape el encabezado fijo */
/* Mi cuenta al día en vivo: el pedido que acaba de cambiar (vigilarPedidosCliente) destella un instante con un halo azul suave para que se note cuál fue. Solo box-shadow; con "reducir
   animaciones" no hay destello (el cambio se ve igual en la etiqueta de estado). */
@media (prefers-reduced-motion: no-preference) {
  .fm-cuenta-pedido--actualizado { animation: fm-cuenta-pedido-destello 2.4s ease-out; }
}
@keyframes fm-cuenta-pedido-destello {
  0% { box-shadow: 0 0 0 4px rgba(33, 61, 119, 0.28); border-color: var(--color-secundario); }
  100% { box-shadow: 0 0 0 0 rgba(33, 61, 119, 0); }
}
/* miniaturas de los primeros productos del pedido cerrado (se montan un poco, como un grupo de avatares); "+N" si hay más */
.fm-cuenta-pedido-miniaturas { grid-area: mini; display: flex; align-items: center; }
.fm-cuenta-pedido-miniatura {
  position: relative; flex: none; width: 2.4rem; height: 2.4rem; margin-left: -0.55rem; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 2px solid var(--superficie-mas-baja); border-radius: 0.7rem; background: var(--superficie-baja);
}
.fm-cuenta-pedido-miniatura:first-child { margin-left: 0; }
.fm-cuenta-pedido-miniatura img { width: 100%; height: 100%; object-fit: contain; }
.fm-cuenta-pedido-miniatura .producto-emoji-fallback { font-size: 1.1rem; }
.fm-cuenta-pedido-miniatura--mas { background: var(--color-secundario); color: #fff; font-size: 0.75rem; font-weight: 800; }
/* plazo para pagar (por defecto el mismo día): ficha ámbar bajo el resumen del pedido cerrado, y el aviso completo dentro del pedido abierto */
.fm-cuenta-pedido-plazo {
  grid-area: plazo; display: inline-flex; align-items: center; gap: 0.3rem; justify-self: start; padding: 0.2rem 0.7rem 0.2rem 0.45rem; border-radius: var(--radio-pill);
  background: #fef3c7; color: #92400e; font-size: 0.78rem; font-weight: 700; line-height: 1.3;
}
.fm-cuenta-pedido-plazo .material-symbols-outlined { font-size: 16px; }
.fm-cuenta-pedido-plazo--vencido { background: #fee2e2; color: #b91c1c; }
.fm-cuenta-pedido-plazo-aviso {
  display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.7rem 0.9rem; border: 1px solid #fde68a; border-radius: var(--radio-lg);
  background: #fffbeb; color: #78350f; font-size: 0.84rem; font-weight: 600; line-height: 1.45;
}
.fm-cuenta-pedido-plazo-aviso .material-symbols-outlined { flex: none; font-size: 20px; }
.fm-cuenta-pedido-plazo-aviso--vencido { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.fm-cuenta-pedido-cuerpo { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--superficie-alta); display: flex; flex-direction: column; gap: 0.7rem; }
.fm-cuenta-pedido-timeline { display: flex; align-items: flex-start; }
.fm-cuenta-pedido-timeline-paso {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  position: relative; text-align: center;
}
.fm-cuenta-pedido-timeline-paso::before {
  content: ''; position: absolute; top: 0.7rem; left: -50%; width: 100%; height: 2px;
  background: var(--superficie-alta); z-index: 0;
}
.fm-cuenta-pedido-timeline-paso:first-child::before { display: none; }
.fm-cuenta-pedido-timeline-paso--hecho::before { background: var(--color-primario); }
.fm-cuenta-pedido-timeline-punto {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--superficie-alta); color: transparent;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; flex-shrink: 0;
}
.fm-cuenta-pedido-timeline-punto .material-symbols-outlined { font-size: 14px; color: #fff; }
.fm-cuenta-pedido-timeline-paso--hecho .fm-cuenta-pedido-timeline-punto { background: var(--color-primario); }
.fm-cuenta-pedido-timeline-texto { font-size: 0.75rem; color: var(--texto-secundario); line-height: 1.2; }
.fm-cuenta-pedido-timeline-paso--activo .fm-cuenta-pedido-timeline-texto { color: var(--color-secundario); font-weight: 700; }
.fm-cuenta-pedido-cancelado { display: flex; align-items: center; gap: 0.4rem; color: #b91c1c; font-size: 0.85rem; font-weight: 700; }
.fm-cuenta-pedido-productos-detalle { display: flex; flex-direction: column; }
.fm-cuenta-pedido-producto-fila { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; padding: 0.45rem 0; border-bottom: 1px solid var(--superficie-baja); }
.fm-cuenta-pedido-producto-fila:last-child { border-bottom: none; }
.fm-cuenta-pedido-producto-emoji { font-size: 1.2rem; flex-shrink: 0; }
.fm-cuenta-pedido-producto-nombre { flex: 1; min-width: 0; color: var(--texto-principal); }
.fm-cuenta-pedido-producto-cantidad { color: var(--texto-secundario); white-space: nowrap; }
.fm-cuenta-pedido-producto-subtotal { font-weight: 700; color: var(--color-secundario); white-space: nowrap; min-width: 3.5rem; text-align: right; }
.fm-cuenta-pedido-entrega { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--texto-secundario); }
.fm-cuenta-pedido-entrega .material-symbols-outlined { font-size: 16px; color: var(--color-primario); }
.fm-cuenta-pedido-pago { display: flex; align-items: center; gap: 0.6rem; gap: 0.6rem; font-size: 0.78rem; color: var(--texto-secundario); flex-wrap: wrap; }
.fm-cuenta-link { background: none; border: none; padding: 0; color: var(--color-primario); font-weight: 700; font-size: 0.78rem; }
.fm-cuenta-link:hover { text-decoration: underline; }
.fm-cuenta-pedido-total { font-size: 0.95rem; }
.fm-cuenta-pedido-total strong { color: var(--color-primario); font-family: var(--fuente-display); }
.fm-cuenta-pedido-acciones { display: flex; }
.fm-cuenta-clave-seccion { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--superficie-alta); }
.fm-cuenta-clave-seccion h3 { font-size: 1rem; margin-bottom: 1rem; }
/* Mi Información: la contraseña va plegada (cambiarla es raro y sus tres campos alargaban la página). Los campos ocupan TODO el ancho del recuadro, como las otras secciones
   (el dueño, 2026-10-19: "ocupen todo el recuadro, tiene un espacio en blanco a la derecha"; una primera versión los limitaba a 38rem). */
.fm-cuenta-clave-detalle { padding-top: 0.4rem; }
.fm-cuenta-clave-detalle > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.75rem; cursor: pointer; list-style: none; }
.fm-cuenta-clave-detalle > summary::-webkit-details-marker { display: none; }
.fm-cuenta-clave-detalle > summary h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.fm-cuenta-clave-detalle > summary h3 .material-symbols-outlined { font-size: 20px; color: var(--color-primario); }
.fm-cuenta-clave-flecha { color: var(--texto-secundario); transition: transform 0.15s ease; }
.fm-cuenta-clave-detalle[open] .fm-cuenta-clave-flecha { transform: rotate(180deg); }
.fm-cuenta-clave-detalle > .fm-cuenta-form { margin-top: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .fm-cuenta-clave-flecha { transition: none; } }
/* ---------- mis direcciones ---------- */
.fm-cuenta-direcciones-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.fm-cuenta-direcciones-cabecera h2 { font-family: var(--fuente-display); font-size: 1.1rem; }
.fm-cuenta-direcciones-cabecera p { font-size: 0.8rem; color: var(--texto-secundario); margin-top: 0.3rem; max-width: 32rem; }
.fm-cuenta-direcciones-cabecera .fm-btn { flex-shrink: 0; }
.fm-cuenta-direcciones-lista { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) {
  .fm-cuenta-direcciones-lista { grid-template-columns: 1fr 1fr; }
}
.fm-cuenta-direccion { border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 1rem 1.25rem; min-width: 0; }
.fm-cuenta-direccion--principal { border-color: var(--color-primario); box-shadow: 0 0 0 1px var(--color-primario); }
.fm-cuenta-direccion-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.fm-cuenta-direccion-etiqueta { font-family: var(--fuente-display); font-weight: 800; font-size: 0.85rem; }
.fm-cuenta-direccion-principal-tag { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: #fff; background: var(--color-primario); padding: 0.2rem 0.55rem; border-radius: var(--radio-pill); }
.fm-cuenta-direccion-nombre { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.2rem; }
.fm-cuenta-direccion-linea { font-size: 0.8rem; color: var(--texto-secundario); line-height: 1.4; }
.fm-cuenta-direccion-referencia { font-style: italic; }
.fm-cuenta-direccion-acciones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--superficie-alta); }
.fm-cuenta-direccion-acciones button {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: none; border: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 700; color: var(--texto-secundario); padding: 0;
}
.fm-cuenta-direccion-acciones button:hover { color: var(--color-primario); }
.fm-cuenta-direccion-acciones button .material-symbols-outlined { font-size: 16px; }
.fm-cuenta-direccion-acciones button[data-accion="eliminar"]:hover { color: #b91c1c; }
#fm-direccion-form-wrap { margin-top: 1.25rem; }
#fm-direccion-form-wrap[hidden] { display: none; }
#fm-direccion-form-wrap .fm-cuenta-form { border-top: 1px solid var(--superficie-alta); padding-top: 1.25rem; }
.fm-cuenta-checkbox { flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; }
.fm-cuenta-checkbox input { width: auto !important; padding: 0 !important; border: none !important; }
.fm-cuenta-checkbox--nota { align-items: flex-start !important; line-height: 1.35; }
.fm-cuenta-checkbox--nota input { margin-top: 0.2rem; flex-shrink: 0; }
.fm-cuenta-checkbox--nota small { display: block; margin-top: 0.15rem; color: var(--texto-secundario); font-size: 0.8rem; font-weight: 400; }
.fm-cuenta-direccion-form-botones { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.fm-cuenta-direccion-form-botones .fm-btn { margin-top: 0; }
/* ---------- checkout ---------- */
.fm-checkout-main { padding-bottom: var(--espacio-xl); }
.fm-checkout-titulo { margin-top: var(--espacio-lg); margin-bottom: var(--espacio-lg); }
.fm-checkout-titulo h1 { font-family: var(--fuente-display); font-size: 1.6rem; }
/* indicador de pasos del pedido (2026-10-17, "estética 13"): 1 Tus datos y entrega → 2 Pago; solo existe con el pago en línea encendido */
.fm-checkout-pasos { list-style: none; display: flex; align-items: center; max-width: 34rem; margin: -0.5rem 0 var(--espacio-lg); padding: 0; }
.fm-checkout-pasos-item { display: flex; align-items: center; gap: 0.6rem; min-width: 0; font-size: 0.88rem; font-weight: 700; line-height: 1.2; color: var(--texto-secundario); }
.fm-checkout-pasos-item + .fm-checkout-pasos-item { flex: 1 1 0; }
.fm-checkout-pasos-item + .fm-checkout-pasos-item::before { content: ''; flex: 1 1 1.5rem; min-width: 0.75rem; height: 3px; border-radius: 3px; margin: 0 0.75rem; background: var(--superficie-alta); }
.fm-checkout-pasos-item--hecho + .fm-checkout-pasos-item::before { background: var(--color-primario); }
.fm-checkout-pasos-item--hecho, .fm-checkout-pasos-item--actual { color: var(--color-secundario); }
.fm-checkout-pasos-num {
  flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--borde); color: var(--texto-secundario); font-size: 0.85rem; font-weight: 800;
}
.fm-checkout-pasos-num .material-symbols-outlined { font-size: 18px; }
.fm-checkout-pasos-item--hecho .fm-checkout-pasos-num, .fm-checkout-pasos-item--actual .fm-checkout-pasos-num { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.fm-checkout-pasos-item--actual .fm-checkout-pasos-num { box-shadow: 0 0 0 4px rgba(197, 64, 12, 0.16); }
@media (max-width: 479px) {
  .fm-checkout-pasos-item { gap: 0.45rem; font-size: 0.8rem; }
  .fm-checkout-pasos-item + .fm-checkout-pasos-item::before { margin-left: 0.5rem; margin-right: 0.5rem; }
  .fm-checkout-pasos-num { width: 1.8rem; height: 1.8rem; }
}
.fm-checkout-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 960px) {
  .fm-checkout-layout { grid-template-columns: 1.6fr 1fr; }
}
.fm-checkout-columna-izquierda { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; overflow: hidden; }
.fm-checkout-columna-derecha { position: sticky; top: calc(var(--fm-header-alto, 10.5rem) + 1rem); min-width: 0; }
/* --- datos del cliente --- */
.fm-checkout-datos {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3xl);
  box-shadow: var(--sombra-reposo);
  padding: 1.5rem;
}
.fm-checkout-datos-cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.fm-checkout-datos-cabecera h2 { font-family: var(--fuente-display); font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.fm-checkout-datos-cabecera h2 .material-symbols-outlined { flex-shrink: 0; }
.fm-checkout-datos-cabecera a { font-size: 0.8rem; font-weight: 700; color: var(--color-secundario); display: flex; align-items: center; gap: 0.3rem; }
.fm-checkout-datos-cabecera a .material-symbols-outlined { font-size: 16px; }
.fm-checkout-dato-caja { background: var(--superficie-baja); border-radius: var(--radio-lg); padding: 0.9rem 1rem; margin-bottom: 0.9rem; min-width: 0; }
.fm-checkout-dato-caja > span { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-secundario); }
.fm-checkout-dato-caja p { font-family: var(--fuente-display); font-weight: 800; font-size: 0.95rem; margin: 0.3rem 0 0.2rem; display: flex; align-items: center; gap: 0.35rem; }
.fm-checkout-dato-caja p .material-symbols-outlined { font-size: 18px; color: var(--color-primario); }
.fm-checkout-dato-linea { font-size: 0.78rem; color: var(--texto-secundario); }
.fm-checkout-dato-caja-fila { display: flex; align-items: center; justify-content: space-between; }
.fm-checkout-gratis-pill { background: #dcfce7; color: #15803d; font-size: 0.75rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: var(--radio-pill); }
/* --- modalidad de despacho: retiro vs. envío nacional --- */
.fm-checkout-entrega-label { display: block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-secundario); margin-bottom: 0.5rem; }
.fm-checkout-entrega-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; background: var(--superficie-baja); border-radius: var(--radio-lg); padding: 0.4rem; margin-bottom: 0.9rem; }
.fm-checkout-entrega-tab {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: none; background: transparent; color: var(--texto-secundario);
  font-weight: 700; font-size: 0.8rem; padding: 0.65rem 0.5rem; border-radius: var(--radio-lg);
  min-width: 0; text-align: center; white-space: nowrap;
}
@media (max-width: 400px) {
  .fm-checkout-entrega-tab { font-size: 0.75rem; gap: 0.3rem; padding: 0.65rem 0.35rem; }
}
.fm-checkout-entrega-tab .material-symbols-outlined { font-size: 18px; }
.fm-checkout-entrega-tab--activo { background: var(--color-primario) !important; color: #fff !important; box-shadow: var(--sombra-reposo); }
.fm-checkout-entrega-vacio { text-align: center; padding: 1.25rem 1rem; background: var(--superficie-baja); border-radius: var(--radio-lg); }
.fm-checkout-entrega-vacio p { font-size: 0.85rem; color: var(--texto-secundario); margin-bottom: 0.85rem; }
.fm-checkout-direcciones-lista { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.9rem; }
.fm-checkout-direccion-opcion { display: flex; gap: 0.6rem; align-items: flex-start; border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 0.75rem 0.9rem; cursor: pointer; }
.fm-checkout-direccion-opcion input { margin-top: 0.25rem; flex-shrink: 0; }
.fm-checkout-direccion-opcion div { min-width: 0; }
.fm-checkout-direccion-opcion--activa { border-color: var(--color-primario); box-shadow: 0 0 0 1px var(--color-primario); }
.fm-checkout-direccion-etiqueta { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--texto-secundario); }
.fm-checkout-direccion-opcion p { font-family: var(--fuente-display); font-weight: 700; font-size: 0.85rem; margin: 0.2rem 0; }
.fm-checkout-agencias-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 0.5rem 0 0.9rem; }
@media (min-width: 420px) {
  .fm-checkout-agencias-grid { grid-template-columns: repeat(4, 1fr); }
}
.fm-checkout-agencia-card {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--borde); border-radius: var(--radio-lg);
  padding: 1.1rem 0.6rem; cursor: pointer; text-align: center; min-width: 0;
  background: #fff;
}
.fm-checkout-agencia-card input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.fm-checkout-agencia-card--activa { border-color: var(--color-primario); background: #fff8f5; }
/* --- insignia/logo de agencia de envío, reutilizable (checkout, confirmación) --- */
.fm-agencia-logo { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fm-agencia-logo--grande { width: 4.25rem; height: 4.25rem; }
.fm-agencia-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radio-lg); }
.fm-agencia-logo-fallback {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--fuente-display); font-weight: 800; font-size: 0.95rem;
}
.fm-agencia-logo-fallback--mrw { background: #ef4444; }
.fm-agencia-logo-fallback--zoom { background: #2563eb; }
.fm-agencia-logo-fallback--domesa { background: #059669; }
.fm-agencia-logo-fallback--tealca { background: #7c3aed; }
.fm-agencia-logo--grande .fm-agencia-logo-fallback { font-size: 1.25rem; }
.fm-checkout-entrega-nota { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.75rem; color: var(--texto-secundario); background: #fff7ed; padding: 0.7rem 0.85rem; border-radius: var(--radio-lg); }
.fm-checkout-entrega-nota .material-symbols-outlined { font-size: 16px; color: #9a3412; flex-shrink: 0; }
/* --- método de pago --- */
.fm-checkout-metodo {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3xl);
  box-shadow: var(--sombra-reposo);
  padding: 1.5rem;
}
.fm-checkout-paso { color: var(--color-primario); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fm-checkout-metodo h2 { font-family: var(--fuente-display); font-size: 1.25rem; margin: 0.25rem 0 1.25rem; }
.fm-checkout-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; background: var(--superficie-baja); border-radius: var(--radio-lg); padding: 0.4rem; margin-bottom: 1.5rem; }
/* el ancho se reparte entre los métodos que hay (checkout.js pone --n1..--n4): en celular 3 caben en una fila y 4 van de a 2 */
.fm-checkout-tabs--n1 { grid-template-columns: 1fr; }
.fm-checkout-tabs--n3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 600px) {
  .fm-checkout-tabs { grid-template-columns: repeat(4, 1fr); }
  .fm-checkout-tabs--n1 { grid-template-columns: 1fr; }
  .fm-checkout-tabs--n2 { grid-template-columns: repeat(2, 1fr); }
  .fm-checkout-tabs--n3 { grid-template-columns: repeat(3, 1fr); }
}
.fm-checkout-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: transparent;
  color: var(--texto-secundario);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.7rem 0.4rem;
  border-radius: var(--radio-lg);
}
.fm-checkout-tab--activo { background: var(--color-primario) !important; color: #fff !important; box-shadow: var(--sombra-reposo); }
.fm-checkout-panel-pago { display: flex; flex-direction: column; gap: 1.25rem; }
.fm-checkout-monto-caja {
  background: var(--superficie-baja);
  border-radius: var(--radio-lg);
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.fm-checkout-monto-caja span { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--texto-secundario); margin-bottom: 0.2rem; }
.fm-checkout-monto-caja strong { font-family: var(--fuente-display); font-size: 1.4rem; color: var(--color-primario); }
.fm-checkout-datos-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 700px) {
  .fm-checkout-datos-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* minmax(0, 1fr) + min-width:0: una wallet USDT o un hash largo (sin espacios) ya no ensancha la columna ni saca la caja de la tarjeta (2026-10-16).
   El dato se PARTE dentro de la caja en vez de cortarse con "…": el cliente necesita ver la wallet completa y el botón de copiar siempre queda a la vista. */
.fm-checkout-caja-dato { background: var(--superficie-baja); border-radius: var(--radio-lg); padding: 0.75rem 0.9rem; min-width: 0; }
.fm-checkout-caja-dato > span { font-size: 0.75rem; color: var(--texto-secundario); font-weight: 700; }
.fm-checkout-caja-dato div { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.3rem; min-width: 0; }
.fm-checkout-caja-dato strong { font-family: var(--fuente-display); font-size: 0.92rem; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; }
.fm-checkout-copiar, .fm-checkout-cuenta button {
  border: none;
  background: var(--superficie-mas-baja);
  color: var(--texto-secundario);
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fm-checkout-copiar:hover, .fm-checkout-cuenta button:hover { color: var(--color-primario); }
.fm-checkout-copiar .material-symbols-outlined, .fm-checkout-cuenta button .material-symbols-outlined { font-size: 16px; }
.fm-checkout-cuentas-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.fm-checkout-cuenta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--superficie-baja); border-radius: var(--radio-lg); padding: 0.75rem 0.9rem; }
.fm-checkout-cuenta span { display: block; font-size: 0.75rem; color: var(--texto-secundario); font-weight: 700; }
.fm-checkout-cuenta > div { min-width: 0; }
.fm-checkout-cuenta strong { font-family: var(--fuente-cuerpo); font-size: 0.85rem; overflow-wrap: anywhere; }
.fm-checkout-comprobante h3 { font-family: var(--fuente-display); font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; }
.fm-checkout-comprobante h3 .material-symbols-outlined { color: var(--color-secundario); font-size: 18px; }
.fm-checkout-comprobante-fila { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 600px) {
  .fm-checkout-comprobante-fila { grid-template-columns: 1fr 1fr; }
}
.fm-checkout-comprobante-fila label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--texto-secundario); }
.fm-checkout-comprobante-fila input, .fm-checkout-comprobante-fila select {
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  font-family: var(--fuente-cuerpo);
  color: var(--texto-principal);
  background: var(--superficie-mas-baja);
  outline: none;
}
.fm-checkout-comprobante-fila input:focus, .fm-checkout-comprobante-fila select:focus { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.15); }
.fm-checkout-adjuntar-cabecera { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.6rem; }
.fm-checkout-adjuntar-cabecera .material-symbols-outlined { color: var(--color-primario); font-size: 18px; }
.fm-checkout-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  border: 2px dashed var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.5rem 1rem;
  cursor: pointer;
  background: var(--superficie-baja);
}
.fm-checkout-dropzone:hover { border-color: var(--color-primario); background: #fff8f5; }
.fm-checkout-dropzone .material-symbols-outlined { font-size: 26px; color: var(--color-primario); }
.fm-checkout-dropzone p { font-size: 0.82rem; margin: 0; }
.fm-checkout-dropzone p span { color: var(--color-primario); text-decoration: underline; font-weight: 700; }
.fm-checkout-adjuntar-formatos { font-size: 0.75rem; color: var(--texto-secundario); }
.fm-checkout-adjuntar-nombre {
  font-size: 0.75rem;
  color: var(--texto-secundario);
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pill);
  padding: 0.3rem 0.8rem;
  margin-top: 0.3rem;
}
.fm-checkout-whatsapp {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--superficie-alta);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.fm-checkout-whatsapp .material-symbols-outlined { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #ecfdf5; color: #059669; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fm-checkout-whatsapp h4 { font-family: var(--fuente-display); font-size: 0.85rem; }
.fm-checkout-whatsapp p { font-size: 0.78rem; color: var(--texto-secundario); margin: 0.2rem 0 0; }
/* con el WhatsApp de la tienda todo el bloque es un enlace (abre la conversación con el pedido ya escrito) */
a.fm-checkout-whatsapp--enlace { color: inherit; text-decoration: none; border-radius: 12px; }
.fm-checkout-whatsapp-accion { display: block; margin-top: 0.25rem; color: var(--color-primario); text-decoration: underline; text-underline-offset: 2px; }
a.fm-checkout-whatsapp--enlace:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 3px; }
@media (hover: hover) { a.fm-checkout-whatsapp--enlace:hover h4 { color: var(--color-primario); } }
/* --- resumen de pedido --- */
.fm-checkout-resumen {
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-reposo);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fm-checkout-resumen-cabecera { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.9rem; border-bottom: 1px solid var(--superficie-alta); }
.fm-checkout-resumen-cabecera h2 { font-family: var(--fuente-display); font-size: 1.05rem; display: flex; align-items: center; gap: 0.4rem; }
.fm-checkout-resumen-cabecera span { font-size: 0.75rem; color: var(--texto-secundario); font-weight: 600; }
/* paso 2: la lista de productos es plegable (<details>); la cabecera hace de <summary>, con una flecha que gira al abrir */
.fm-checkout-resumen-detalle > summary { list-style: none; cursor: pointer; min-height: 2.75rem; }   /* 44px: se puede tocar en celular */
.fm-checkout-resumen-detalle > summary::-webkit-details-marker { display: none; }
.fm-checkout-resumen-detalle > summary:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; border-radius: 0.5rem; }
.fm-checkout-resumen-detalle > summary > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.fm-checkout-resumen-cabecera .fm-checkout-resumen-flecha { font-size: 22px; transition: transform 0.2s ease; }
.fm-checkout-resumen-detalle[open] .fm-checkout-resumen-cabecera .fm-checkout-resumen-flecha { transform: rotate(180deg); }
.fm-checkout-resumen-detalle:not([open]) > summary { border-bottom: none; padding-bottom: 0; }
.fm-checkout-resumen-detalle[open] > .fm-checkout-resumen-lista { margin-top: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .fm-checkout-resumen-cabecera .fm-checkout-resumen-flecha { transition: none; } }
.fm-checkout-resumen-lista { display: flex; flex-direction: column; gap: 0.9rem; max-height: 18rem; overflow-y: auto; }
.fm-checkout-resumen-item { display: flex; align-items: center; gap: 0.7rem; }
.fm-checkout-resumen-item-img { width: 3rem; height: 3rem; border-radius: var(--radio-lg); background: var(--superficie-baja); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.fm-checkout-resumen-item-img img { width: 100%; height: 100%; object-fit: contain; }
.fm-checkout-resumen-item-img .producto-emoji-fallback { font-size: 1.3rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.fm-checkout-resumen-item-info { flex: 1; min-width: 0; }
.fm-checkout-resumen-item-info p { font-size: 0.82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-checkout-resumen-item-info span { font-size: 0.75rem; color: var(--texto-secundario); }
.fm-checkout-resumen-item-precio { font-family: var(--fuente-display); font-weight: 800; font-size: 0.85rem; flex-shrink: 0; }
.fm-checkout-resumen-totales { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--superficie-alta); font-size: 0.85rem; }
.fm-checkout-resumen-fila { display: flex; align-items: center; justify-content: space-between; color: var(--texto-secundario); }
.fm-checkout-resumen-fila span:last-child { font-weight: 700; color: var(--texto-principal); }
.fm-checkout-resumen-gratis { color: #059669 !important; }
.fm-checkout-resumen-total { background: var(--superficie-baja); border-radius: var(--radio-lg); padding: 1rem; }
.fm-checkout-resumen-total-fila { display: flex; align-items: baseline; justify-content: space-between; }
.fm-checkout-resumen-total-fila span:first-child { font-family: var(--fuente-display); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; color: var(--texto-secundario); }
.fm-checkout-resumen-total-num { font-family: var(--fuente-display); font-weight: 800; font-size: 1.6rem; color: var(--color-primario); }
.fm-checkout-resumen-total-bs { font-size: 0.78rem; color: var(--color-secundario); font-weight: 700; margin-top: 0.4rem; }
.fm-checkout-resumen-total-bs small { font-size: 0.75rem; color: var(--texto-secundario); font-weight: 500; }
.fm-checkout-confirmar-btn { width: 100%; justify-content: center; padding: 0.9rem; font-size: 0.95rem; }
.fm-checkout-resumen-nota { display: flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 0.78rem; line-height: 1.45; color: var(--texto-secundario); text-align: center; }
.fm-checkout-resumen-nota .material-symbols-outlined { font-size: 14px; flex-shrink: 0; }
.fm-checkout-resumen-nota a { color: var(--color-primario); text-decoration: underline; text-underline-offset: 2px; }
/* "Al confirmar tu pedido aceptas los Términos…" (12,5 px: no baja del mínimo de lectura del sitio) */
.fm-checkout-aceptacion { margin: 0.5rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--texto-secundario); text-align: center; }
.fm-checkout-aceptacion a, .fm-cuenta-aceptacion a { color: var(--color-primario); text-decoration: underline; text-underline-offset: 2px; }
/* --- confirmación --- */
.fm-checkout-exito {
  text-align: center;
  max-width: 30rem;
  margin: var(--espacio-xl) auto;
  background: var(--superficie-mas-baja);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3xl);
  box-shadow: var(--sombra-reposo);
  padding: 3rem 2rem;
}
.fm-checkout-exito .material-symbols-outlined { font-size: 3.5rem; color: #059669; }
/* Check animado de "¡Pedido recibido!" y "¡Pago enviado!" (iconoExitoAnimadoHTML, checkout.js): mismo tamaño y color que el ícono de fuente que reemplaza (3,5 rem, verde). Por
   defecto se ve YA dibujado; solo con movimiento permitido el círculo se traza (0,55 s), la palomita se traza justo después y todo da un pequeño "pop". Solo
   transform / stroke-dashoffset / opacity. */
.fm-exito-icono { display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto; fill: none; stroke: #059669; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fm-exito-icono-circulo, .fm-exito-icono-check { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.fm-exito-icono-circulo { transform: rotate(-90deg); transform-origin: 28px 28px; }   /* el trazo parte de arriba, no de las 3 en punto */
@media (prefers-reduced-motion: no-preference) {
  .fm-exito-icono { animation: fm-exito-pop 0.45s ease-out 0.55s both; }
  .fm-exito-icono-circulo { animation: fm-exito-trazo 0.55s cubic-bezier(0.65, 0, 0.35, 1) both; }
  .fm-exito-icono-check { animation: fm-exito-trazo 0.35s ease-out 0.45s both; }
}
/* se parte de 1,12 y no de 1: con exactamente 1 la punta redondeada del trazo de largo cero dejaba un puntito en el primer cuadro */
@keyframes fm-exito-trazo { from { stroke-dashoffset: 1.12; } to { stroke-dashoffset: 0; } }
@keyframes fm-exito-pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
.fm-checkout-exito h1 { font-family: var(--fuente-display); font-size: 1.5rem; margin: 1rem 0 0.75rem; }
.fm-checkout-exito h1:focus { outline: none; }   /* la pantalla que reemplaza a la de espera lleva el foco al título (lector de pantalla), sin recuadro: no es un control */
.fm-checkout-exito p { color: var(--texto-secundario); font-size: 0.9rem; line-height: 1.6; }
.fm-checkout-exito-botones { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }
.fm-checkout-exito-agencia { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-top: 1.25rem; }
.fm-checkout-exito-agencia span { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-secundario); }
.fm-checkout-exito-agencia .fm-agencia-logo { border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 0.6rem; }
.fm-checkout-exito--aviso .material-symbols-outlined { color: var(--color-secundario); }
/* Resumen del pago enviado dentro de la pantalla de confirmación / "Estamos verificando tu pago": filas de etiqueta y valor en una caja suave, y el bloque de dudas con su
   ícono de tamaño normal (la regla de arriba agranda TODOS los íconos de la pantalla). */
.fm-checkout-resumen-pago { margin: 1.25rem 0 0; padding: 0.35rem 1rem; text-align: left; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-lg); }
.fm-checkout-resumen-pago div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; }
.fm-checkout-resumen-pago div + div { border-top: 1px solid var(--superficie-alta); }
.fm-checkout-resumen-pago dt { font-size: 0.78rem; font-weight: 700; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 0.04em; flex: none; }
.fm-checkout-resumen-pago dd { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--color-secundario); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.fm-checkout-exito .fm-checkout-whatsapp { margin-top: 1rem; padding: 0.9rem 1rem; text-align: left; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-lg); }
.fm-checkout-exito .fm-checkout-whatsapp p { font-size: 0.85rem; line-height: 1.5; }
.fm-checkout-exito .fm-checkout-whatsapp .material-symbols-outlined { font-size: 1.4rem; }
.fm-checkout-nota {
  width: 100%; resize: vertical; min-height: 4.5rem; padding: 0.65rem 0.85rem; border: 1px solid var(--borde); border-radius: var(--radio-lg);
  font-family: var(--fuente-cuerpo); font-size: 0.9rem; color: var(--texto-principal); background: #fff; outline: none;
}
.fm-checkout-nota:focus { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.15); }
.fm-checkout-datos-cabecera h2 small { font-family: var(--fuente-cuerpo); font-size: 0.75rem; font-weight: 600; color: var(--texto-secundario); }
/* paso 1: la nota para la tienda es un <details> (plegado en celular, ver notaPedidoHTML en checkout.js); su cabecera hace de <summary> con una flecha que gira al abrir */
.fm-checkout-nota-detalle > summary { list-style: none; cursor: pointer; flex-wrap: nowrap; min-height: 2.75rem; margin-bottom: 0; }
.fm-checkout-nota-detalle > summary::-webkit-details-marker { display: none; }
.fm-checkout-nota-detalle > summary:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; border-radius: 0.5rem; }
.fm-checkout-nota-detalle[open] > summary { margin-bottom: 0.6rem; }
.fm-checkout-nota-flecha { flex-shrink: 0; font-size: 22px; color: var(--texto-secundario); transition: transform 0.2s ease; }
.fm-checkout-nota-detalle[open] .fm-checkout-nota-flecha { transform: rotate(180deg); }
.fm-checkout-datos:has(> .fm-checkout-nota-detalle:not([open])) { padding-top: 0.5rem; padding-bottom: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .fm-checkout-nota-flecha { transition: none; } }
/* celular: filas del resumen más bajas (el <p> traía 1em de margen arriba y abajo: cada producto medía 68px con una foto de 48) */
@media (max-width: 767px) {
  .fm-checkout-resumen-lista { gap: 0.6rem; }
  .fm-checkout-resumen-item-info p { margin: 0 0 0.1rem; line-height: 1.3; }
  .fm-checkout-resumen-item-info span { display: block; line-height: 1.3; }
  .fm-checkout-resumen-item-img { width: 2.75rem; height: 2.75rem; }
}
.fm-checkout-error {
  margin: 0.25rem 0 0.75rem; padding: 0.7rem 0.85rem; border: 1px solid #fecaca; border-radius: var(--radio-lg);
  background: #fef2f2; color: #991b1b; font-size: 0.85rem; font-weight: 600; line-height: 1.4;
}
.fm-checkout-error[hidden] { display: none; }
.fm-checkout-aviso-rechazo {
  display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1rem; padding: 0.85rem 1rem; border: 1px solid #fecaca;
  border-radius: var(--radio-lg); background: #fef2f2; color: #991b1b;
}
.fm-checkout-aviso-rechazo p { margin: 0; font-size: 0.88rem; line-height: 1.45; }
.fm-checkout-aviso-rechazo .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
/* Plazo para pagar (por defecto el mismo día): ámbar, arriba de los métodos de pago */
.fm-checkout-plazo {
  display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1rem; padding: 0.85rem 1rem; border: 1px solid #fde68a;
  border-radius: var(--radio-lg); background: #fffbeb; color: #78350f;
}
.fm-checkout-plazo p { margin: 0; font-size: 0.88rem; font-weight: 600; line-height: 1.45; }
.fm-checkout-plazo .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
/* ============================================================
   Visor de comprobantes (lightbox), usado por admin.js y disponible
   para cualquier otra página que necesite mostrar un comprobanteBase64.
   ============================================================ */
.fm-comprobante-overlay {
  position: fixed; inset: 0; background: rgba(17, 17, 20, 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.fm-comprobante-overlay--abierto { opacity: 1; pointer-events: auto; }
.fm-comprobante-caja { position: relative; max-width: min(32rem, 92vw); max-height: 88vh; }
.fm-comprobante-caja img { max-width: 100%; max-height: 88vh; border-radius: var(--radio-lg); display: block; box-shadow: var(--sombra-flotante); }
.fm-comprobante-cerrar {
  position: absolute; top: -1rem; right: -1rem; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; border: none; background: #fff; color: var(--texto-principal);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--sombra-flotante);
}
@keyframes fm-servidor-pulso { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.8); opacity: 0; } }
/* barra de la vista de cliente (sitio publico) */
.fm-vista-cliente { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.55rem 1rem; background: #1e3a8a; color: #fff; font-size: 0.82rem; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18); }
.fm-vista-cliente .material-symbols-outlined { font-size: 18px; }
.fm-vista-cliente-salir { border: 1px solid rgba(255, 255, 255, 0.6); background: transparent; color: #fff; font: inherit; font-size: 0.8rem; font-weight: 700; padding: 0.3rem 0.8rem; border-radius: 999px; cursor: pointer; }
.fm-vista-cliente-salir:hover { background: rgba(255, 255, 255, 0.15); }
.fm-vista-cliente-corto { display: none; }
body.fm-con-vista-cliente { padding-bottom: 3.2rem; }
@media (max-width: 640px) {
  .fm-vista-cliente { flex-wrap: nowrap; gap: 0.5rem; padding: 0.45rem 0.75rem; font-size: 0.78rem; }
  .fm-vista-cliente-largo { display: none; }
  .fm-vista-cliente-corto { display: inline; }
  body.fm-con-vista-cliente { padding-bottom: 2.8rem; }
}
/* ---------- selectores propios (reemplazan al <select> nativo; ver sitio.js, "SELECTORES PROPIOS") ---------- */
.fm-select { position: relative; display: block; min-width: 0; max-width: 100%; }
.fm-select-nativo { display: none !important; }
.fm-select-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio-lg);
  padding: 0.7rem 0.9rem;
  font-family: var(--fuente-cuerpo); font-size: 0.9rem; font-weight: 400; color: var(--texto-principal);
  background: #fff; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fm-select-toggle:hover { border-color: var(--borde-suave); }
.fm-select-toggle:focus-visible, .fm-select.abierto .fm-select-toggle {
  border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.15);
}
.fm-select-toggle:disabled { background: var(--superficie-baja); color: var(--texto-secundario); cursor: not-allowed; }
/* el texto largo reserva el ancho para que el botón no cambie de tamaño al elegir otra opción */
.fm-select-valor { display: grid; flex: 1; min-width: 0; }
.fm-select-texto, .fm-select-medida { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fm-select-medida { visibility: hidden; height: 0; }
.fm-select-flecha { font-size: 20px; color: var(--texto-secundario); flex-shrink: 0; transition: transform 0.15s ease; }
.fm-select.abierto .fm-select-flecha { transform: rotate(180deg); }
.fm-select-lista {
  position: fixed; z-index: 1500;
  width: max-content; max-width: min(26rem, calc(100vw - 16px));
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--borde); border-radius: 1rem;
  padding: 0.35rem; box-shadow: var(--sombra-flotante);
}
.fm-select-lista[hidden] { display: none; }
.fm-select-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.7rem; border-radius: 0.6rem; cursor: pointer;
  font-family: var(--fuente-cuerpo); font-size: 0.85rem; font-weight: 400; color: var(--texto-principal);
}
.fm-select-opcion-texto { min-width: 0; overflow-wrap: anywhere; }
.fm-select-opcion.activa, .fm-select-opcion:hover { background: var(--superficie-baja); }
.fm-select-opcion.seleccionada { color: var(--color-secundario); font-weight: 700; }
.fm-select-check { display: none; font-size: 18px; color: var(--color-primario); flex-shrink: 0; }
.fm-select-opcion.seleccionada .fm-select-check { display: block; }
/* variantes según dónde vive el selector */
.fm-select--pastilla .fm-select-toggle { border-radius: var(--radio-pill); padding: 0.55rem 1rem; font-size: 0.85rem; }
.fm-select--mini { display: inline-block; }
.fm-select--mini .fm-select-toggle { border-radius: 0.6rem; padding: 0.35rem 0.5rem 0.35rem 0.7rem; font-size: 0.85rem; }
.fm-checkout-comprobante-fila .fm-select-toggle { font-size: 0.88rem; }
@media (max-width: 767px) {
  .fm-select-toggle { min-height: 40px; }
  .fm-select-opcion { min-height: 40px; font-size: 0.9rem; }
}
/* ---------- panel de compartir producto (producto.js, abrirPanelCompartir) ---------- */
.fm-compartir { position: fixed; inset: 0; z-index: 1600; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.fm-compartir-fondo { position: absolute; inset: 0; background: rgba(26, 27, 31, 0); transition: background 0.2s ease; pointer-events: auto; }
.fm-compartir--visible .fm-compartir-fondo { background: rgba(26, 27, 31, 0.28); }
.fm-compartir-panel {
  position: relative; width: 24rem; max-width: calc(100vw - 24px);
  background: var(--superficie-mas-baja); border: 1px solid var(--borde); border-radius: var(--radio-xl);
  box-shadow: var(--sombra-flotante); padding: 1.1rem 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: center;
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
}
.fm-compartir--visible .fm-compartir-panel { opacity: 1; transform: none; }
.fm-compartir-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fm-compartir-cabecera h2 {
  display: flex; align-items: center; gap: 0.45rem; margin: 0;
  font-family: var(--fuente-display); font-size: 1rem; font-weight: 800; color: var(--color-secundario);
}
.fm-compartir-cabecera h2 .material-symbols-outlined { font-size: 20px; color: var(--color-primario); }
.fm-compartir-cerrar {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0;
  border: none; border-radius: 50%; background: var(--superficie-baja); color: var(--texto-secundario);
}
.fm-compartir-cerrar:hover { background: var(--superficie-alta); color: var(--texto-principal); }
.fm-compartir-cerrar .material-symbols-outlined { font-size: 18px; }
.fm-compartir-producto {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem;
  background: var(--superficie-baja); border-radius: var(--radio-lg);
}
.fm-compartir-foto {
  width: 3.6rem; height: 3.6rem; flex-shrink: 0; border-radius: 0.8rem; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.fm-compartir-foto img { width: 100%; height: 100%; object-fit: contain; }
.fm-compartir-foto .producto-emoji-fallback { font-size: 1.6rem; align-items: center; justify-content: center; }
.fm-compartir-datos { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.fm-compartir-datos strong {
  font-size: 0.85rem; line-height: 1.3; color: var(--texto-principal);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fm-compartir-datos span { font-size: 0.82rem; font-weight: 700; color: var(--color-primario); }
.fm-compartir-enlace {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.3rem 0.3rem 0.9rem;
  border: 1px solid var(--borde); border-radius: var(--radio-pill); background: #fff;
}
.fm-compartir-enlace:focus-within { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.15); }
.fm-compartir-enlace input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--fuente-cuerpo); font-size: 0.8rem; color: var(--texto-secundario); text-overflow: ellipsis;
}
.fm-compartir-copiar {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
  border: none; border-radius: var(--radio-pill); padding: 0.55rem 0.95rem;
  background: var(--color-primario); color: #fff; font-size: 0.82rem; font-weight: 700;
  transition: background 0.15s ease;
}
.fm-compartir-copiar:hover { background: var(--color-primario-hover); }
.fm-compartir-copiar.copiado { background: #16a34a; }
.fm-compartir-copiar .material-symbols-outlined { font-size: 18px; }
.fm-compartir-redes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.fm-compartir-red {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.4rem 0.2rem;
  border-radius: var(--radio-lg); color: var(--texto-principal); font-size: 0.75rem; font-weight: 600;
}
.fm-compartir-red:hover { background: var(--superficie-baja); }
.fm-compartir-red-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  color: #fff; transition: transform 0.15s ease;
}
.fm-compartir-red:hover .fm-compartir-red-icono { transform: translateY(-2px); }
.fm-compartir-red-icono .material-symbols-outlined { font-size: 22px; }
.fm-compartir-red--whatsapp .fm-compartir-red-icono { background: #25d366; }
.fm-compartir-red--facebook .fm-compartir-red-icono { background: #1877f2; }
.fm-compartir-red--telegram .fm-compartir-red-icono { background: #229ed9; }
.fm-compartir-red--correo .fm-compartir-red-icono { background: var(--color-secundario); }
.fm-compartir-red:focus-visible, .fm-compartir-cerrar:focus-visible, .fm-compartir-copiar:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
/* PC: panel más ancho, con la tarjeta del producto más grande y los atajos como botones en una sola fila */
@media (min-width: 640px) {
  .fm-compartir-panel { width: 36rem; padding: 1.35rem 1.5rem 1.5rem; gap: 1.15rem; }
  .fm-compartir-cabecera h2 { font-size: 1.1rem; }
  .fm-compartir-producto { gap: 1rem; padding: 0.8rem; }
  .fm-compartir-foto { width: 4.6rem; height: 4.6rem; }
  .fm-compartir-datos strong { font-size: 0.95rem; }
  .fm-compartir-datos span { font-size: 0.9rem; }
  .fm-compartir-enlace { padding: 0.35rem 0.35rem 0.35rem 1.1rem; }
  .fm-compartir-enlace input { font-size: 0.85rem; }
  .fm-compartir-copiar { padding: 0.65rem 1.2rem; font-size: 0.88rem; }
  .fm-compartir-redes { gap: 0.6rem; }
  .fm-compartir-red {
    flex-direction: row; justify-content: center; gap: 0.55rem; padding: 0.45rem 0.6rem 0.45rem 0.45rem;
    border: 1px solid var(--borde); border-radius: var(--radio-pill); font-size: 0.82rem;
  }
  .fm-compartir-red:hover { border-color: var(--borde-suave); }
  .fm-compartir-red-icono { width: 2.2rem; height: 2.2rem; }
  .fm-compartir-red-icono svg { width: 18px; height: 18px; }
  .fm-compartir-red-icono .material-symbols-outlined { font-size: 19px; }
}
/* Celular: hoja que sube desde abajo, a todo el ancho */
@media (max-width: 639px) {
  .fm-compartir-fondo { background: rgba(26, 27, 31, 0); }
  .fm-compartir--visible .fm-compartir-fondo { background: rgba(26, 27, 31, 0.45); }
  .fm-compartir-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 92vh; overflow-y: auto; max-width: none;
    border-radius: var(--radio-xl) var(--radio-xl) 0 0; border-bottom: none;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transform-origin: bottom center; opacity: 1;
    transition: transform 0.28s ease;
  }
  .fm-compartir-cerrar { width: 2.5rem; height: 2.5rem; }
  .fm-compartir-copiar { min-height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-compartir-panel, .fm-compartir-fondo { transition: opacity 0.15s ease; }
}
/* ---------- reseñas reales: formulario, estados y moderación (producto.js / cuenta.js / admin.js) ---------- */
.fm-producto-resena p { white-space: pre-line; overflow-wrap: anywhere; }
.fm-producto-resena-verificada { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: 0.35rem; color: #15803d; font-weight: 700; font-size: 0.75rem; }
.fm-producto-resena-verificada .material-symbols-outlined { font-size: 14px; }
.fm-producto-opiniones-vacio { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.5rem 0 0.5rem; color: var(--texto-secundario); text-align: center; }
.fm-producto-opiniones-vacio .material-symbols-outlined { font-size: 36px; color: var(--borde-suave); }
.fm-producto-opiniones-vacio p { margin: 0; font-size: 0.9rem; }
.fm-resena-formulario-zona { margin-top: 1rem; }
/* Sin opiniones y sin formulario: una tarjeta baja (título + una línea + el aviso de iniciar sesión) en vez de ~260px con un ícono grande. */
.fm-producto-opiniones--vacia { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.25rem; }
.fm-producto-opiniones--vacia .fm-producto-opiniones-tag { display: none; }
.fm-producto-opiniones--vacia .fm-producto-opiniones-header h2 { margin-top: 0; }
.fm-producto-opiniones--vacia #fm-producto-opiniones-resumen { display: none; }
.fm-producto-opiniones--vacia .fm-producto-opiniones-lista { order: 1; }
.fm-producto-opiniones--vacia .fm-resena-formulario-zona { order: 2; margin-top: 0; }
.fm-producto-opiniones--vacia .fm-producto-opiniones-vacio { flex-direction: row; justify-content: flex-start; gap: 0.5rem; padding: 0; text-align: left; }
.fm-producto-opiniones--vacia .fm-producto-opiniones-vacio .material-symbols-outlined { font-size: 20px; color: var(--texto-secundario); flex-shrink: 0; }
.fm-producto-opiniones--vacia .fm-resena-aviso { padding: 0; background: none; font-size: 0.9rem; }
/* El enlace "Sin opiniones todavía" y #fm-producto-opiniones dejaban el título de la tarjeta debajo del encabezado fijo (>=768px). */
@media (min-width: 768px) { .fm-producto-opiniones { scroll-margin-top: calc(var(--fm-header-alto, 7.5rem) + 1rem); } }
/* Ficha en pantalla ancha (>=1100px): Descripción / Especificaciones a la izquierda y Opiniones a la derecha, cada tarjeta con su alto (sin estirarse).
   Solo existe el contenedor cuando el producto tiene tarjeta de detalle (producto.js, detalleYOpinionesHTML); con menos ancho las dos tarjetas se apilan como siempre. */
@media (min-width: 1100px) {
  .fm-producto-detalle-opiniones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 2.5rem; }
  .fm-producto-detalle-opiniones > .fm-producto-tabs,
  .fm-producto-detalle-opiniones > .fm-producto-opiniones { margin-top: 0; }
}
.fm-resena-aviso {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: var(--radio-lg);
  background: var(--superficie-baja); color: var(--texto-secundario); font-size: 0.88rem;
}
.fm-resena-aviso .material-symbols-outlined { font-size: 20px; color: var(--color-primario); flex-shrink: 0; }
.fm-resena-aviso a { color: var(--color-primario); font-weight: 700; }
.fm-resena-form, .fm-resena-propia {
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.1rem;
  border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--superficie-baja);
}
.fm-resena-form > strong, .fm-resena-propia-cabecera strong { font-family: var(--fuente-display); font-size: 0.95rem; color: var(--color-secundario); }
.fm-resena-propia-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fm-resena-propia p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--texto-secundario); white-space: pre-line; overflow-wrap: anywhere; }
.fm-resena-selector { display: flex; align-items: center; gap: 0.1rem; }
.fm-resena-estrella {
  background: none; border: none; padding: 0 0.1rem; font-size: 1.9rem; line-height: 1; color: #d6b98a; cursor: pointer;
  transition: transform 0.12s ease, color 0.12s ease;
}
.fm-resena-estrella:hover { transform: scale(1.12); }
.fm-resena-estrella--activa { color: #d97706; }
.fm-resena-estrella:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; border-radius: 0.4rem; }
.fm-resena-selector-texto { margin-left: 0.6rem; font-size: 0.82rem; font-weight: 700; color: var(--texto-secundario); }
.fm-resena-form textarea {
  width: 100%; resize: vertical; min-height: 6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--borde); border-radius: var(--radio-lg);
  font-family: var(--fuente-cuerpo); font-size: 0.9rem; color: var(--texto-principal); background: #fff; outline: none;
}
.fm-resena-form textarea:focus { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.15); }
.fm-resena-form-pie { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 1.1rem; }
.fm-resena-contador { font-size: 0.75rem; color: var(--texto-secundario); }
.fm-resena-error { font-size: 0.8rem; font-weight: 700; color: #b91c1c; text-align: right; }
.fm-resena-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.fm-resena-acciones .fm-btn .material-symbols-outlined { font-size: 18px; }
.fm-resena-btn-peligro { color: #b91c1c; }
.fm-resena-btn-peligro-fondo { background: #b91c1c; border-color: #b91c1c; }
.fm-resena-confirmar-texto { font-size: 0.85rem; font-weight: 700; color: var(--texto-principal); }
@media (max-width: 767px) {
  .fm-resena-form, .fm-resena-propia { padding: 0.8rem; }
  .fm-resena-estrella { font-size: 2.1rem; padding: 0 0.2rem; }
  .fm-resena-acciones .fm-btn { flex: 1 1 auto; justify-content: center; }
}
/* Mi cuenta: tarjeta de pedido compacta (productos con su botón de reseñar + pie en una sola fila) */
.fm-cuenta-pedido-timeline { margin-bottom: -0.1rem; }
.fm-cuenta-pedido-pie {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.7rem 1.5rem;
  padding-top: 0.75rem; border-top: 1px solid var(--superficie-alta);
}
.fm-cuenta-pedido-pie-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.fm-cuenta-pedido-pie-total { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.fm-cuenta-pedido-pie-total .fm-btn { padding: 0.5rem 1rem; font-size: 0.82rem; }
.fm-cuenta-pedido-pie-total .fm-btn .material-symbols-outlined { font-size: 18px; }
.fm-cuenta-pedido-total small { font-weight: 600; color: var(--texto-secundario); }
.fm-cuenta-pedido-cupon { font-size: 0.88rem; color: #166534; font-weight: 600; }
.fm-cuenta-pedido-cupon small { font-weight: 500; color: var(--texto-secundario); }
.fm-cuenta-pedido-cancelar { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.fm-cuenta-pedido-cancelar[hidden], .fm-cuenta-pedido-cancelar-conf[hidden], .fm-cuenta-pedido-cancelar > [hidden] { display: none; }
.fm-cuenta-pedido-cancelar-conf { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; color: #b91c1c; }
.fm-cuenta-resenar {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; flex-shrink: 0; white-space: nowrap;
  padding: 0.4rem 0.9rem; border-radius: var(--radio-pill); background: var(--color-primario); color: #fff;
  font-size: 0.8rem; font-weight: 800; box-shadow: 0 4px 12px -4px rgba(241, 90, 36, 0.55);
  transition: background 0.15s ease, transform 0.15s ease;
}
.fm-cuenta-resenar:hover { background: var(--color-primario-hover); transform: translateY(-1px); }
.fm-cuenta-resenar .material-symbols-outlined { font-size: 17px; }
.fm-cuenta-resenar--hecha { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; box-shadow: none; }
.fm-cuenta-resenar--hecha:hover { background: #dcfce7; }
@media (max-width: 639px) {
  .fm-cuenta-pedido-producto-fila { flex-wrap: wrap; row-gap: 0.4rem; }
  .fm-cuenta-pedido-producto-nombre { flex: 1 1 calc(100% - 7rem); }
  .fm-cuenta-pedido-producto-cantidad { margin-left: 1.8rem; }
  .fm-cuenta-pedido-producto-fila .fm-cuenta-resenar { margin-left: auto; min-height: 40px; padding: 0.5rem 1.1rem; }
  .fm-cuenta-pedido-pie { flex-direction: column; align-items: stretch; }
  .fm-cuenta-pedido-pie-total { justify-content: space-between; }
}
/* Mi cuenta: pestaña Mis Reseñas */
.fm-cuenta-resenas { display: flex; flex-direction: column; gap: 1.75rem; }
.fm-cuenta-resenas-bloque h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.3rem; font-family: var(--fuente-display); font-size: 1.05rem; color: var(--color-secundario); }
.fm-cuenta-resenas-n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.45rem; border-radius: var(--radio-pill); background: var(--superficie-baja); color: var(--texto-secundario); font-size: 0.75rem; font-weight: 800; }
.fm-cuenta-resenas-ayuda { margin: 0 0 0.9rem; font-size: 0.82rem; color: var(--texto-secundario); }
.fm-cuenta-por-resenar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.fm-cuenta-por-resenar {
  display: grid; grid-template-columns: 3.4rem 1fr; grid-template-areas: "foto nombre" "foto boton"; column-gap: 0.75rem; row-gap: 0.4rem; align-items: center;
  padding: 0.65rem; border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--superficie-mas-baja);
}
.fm-cuenta-por-resenar[hidden] { display: none; }
.fm-cuenta-por-resenar:hover { border-color: var(--color-primario); }
.fm-cuenta-por-resenar .fm-cuenta-resena-foto { grid-area: foto; }
.fm-cuenta-por-resenar-nombre { grid-area: nombre; font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--texto-principal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-cuenta-por-resenar .fm-cuenta-resenar { grid-area: boton; justify-self: start; }
.fm-cuenta-resenas-mas { margin-top: 0.8rem; }
.fm-cuenta-resena-foto { width: 3.4rem; height: 3.4rem; flex-shrink: 0; border-radius: 0.8rem; background: var(--superficie-baja); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fm-cuenta-resena-foto img { width: 100%; height: 100%; object-fit: contain; }
.fm-cuenta-resena-foto .producto-emoji-fallback { font-size: 1.5rem; align-items: center; justify-content: center; }
.fm-cuenta-resenas-lista { display: flex; flex-direction: column; gap: 0.75rem; }
.fm-cuenta-resena { display: flex; gap: 0.9rem; padding: 0.9rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--superficie-mas-baja); }
.fm-cuenta-resena-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.fm-cuenta-resena-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.fm-cuenta-resena-producto { font-weight: 700; font-size: 0.88rem; color: var(--color-secundario); min-width: 0; overflow-wrap: anywhere; }
.fm-cuenta-resena-producto:hover { text-decoration: underline; }
.fm-cuenta-resena-cabecera .fm-producto-resena-estrellas { margin-left: 0; white-space: nowrap; }
.fm-cuenta-resena-fecha { font-size: 0.75rem; color: var(--texto-secundario); }
.fm-cuenta-resena-contenido p { margin: 0.35rem 0 0.6rem; font-size: 0.88rem; line-height: 1.5; color: var(--texto-secundario); white-space: pre-line; overflow-wrap: anywhere; }
.fm-cuenta-resena-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.fm-cuenta-resena-acciones .fm-btn { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.fm-cuenta-resena-acciones .fm-btn .material-symbols-outlined { font-size: 16px; }
.fm-cuenta-resena-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.fm-cuenta-resena-form textarea {
  width: 100%; resize: vertical; min-height: 5rem; padding: 0.65rem 0.85rem; border: 1px solid var(--borde); border-radius: var(--radio-lg);
  font-family: var(--fuente-cuerpo); font-size: 0.88rem; color: var(--texto-principal); background: #fff; outline: none;
}
.fm-cuenta-resena-form textarea:focus { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.15); }
@media (max-width: 639px) {
  .fm-cuenta-resena { padding: 0.75rem; gap: 0.7rem; }
  .fm-cuenta-resena-foto { width: 2.8rem; height: 2.8rem; }
  .fm-cuenta-resena-cabecera { flex-direction: column; gap: 0.15rem; }
  .fm-cuenta-resena-acciones .fm-btn { min-height: 40px; }
}

/* Checkout sin pago en línea: pedido por WhatsApp (checkout.js, pintarPedidoPorWhatsApp) */
.fm-checkout-wa {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
  background: var(--superficie-mas-baja); border: 1px solid var(--borde); border-radius: var(--radio-xl);
  box-shadow: var(--sombra-reposo); padding: 1.5rem;
}
.fm-checkout-wa-icono { font-size: 2rem; color: #fff; background: #25d366; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.fm-checkout-wa h2 { margin: 0; font-family: var(--fuente-display); font-size: 1.25rem; color: var(--color-secundario); }
.fm-checkout-wa p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--texto-secundario); }
.fm-checkout-wa-boton { background: #25d366; border-color: #25d366; color: #fff; font-size: 1rem; padding: 0.85rem 1.6rem; }
.fm-checkout-wa-boton:hover { background: #1fb457; border-color: #1fb457; }
.fm-checkout-wa-boton .material-symbols-outlined { font-size: 20px; }
.fm-checkout-wa .fm-checkout-wa-nota { font-size: 0.8rem; }
.fm-checkout-wa-pasos { margin: 0; padding: 0.9rem 1rem 0.9rem 2rem; width: 100%; background: var(--superficie-baja); border-radius: var(--radio-lg); font-size: 0.88rem; color: var(--texto-secundario); display: flex; flex-direction: column; gap: 0.35rem; }
.fm-checkout-wa-pasos strong { color: var(--texto-principal); }
@media (max-width: 767px) {
  .fm-checkout-wa { padding: 1.1rem; }
  .fm-checkout-wa-boton { width: 100%; justify-content: center; min-height: 44px; }
}

/* ---------- esqueletos de carga ----------
   Siluetas grises que se ven mientras la pagina todavia esta armando sus tarjetas y fichas (el JS reemplaza el contenido del
   contenedor, asi que desaparecen solas). Van en el HTML de index, catalogo, producto y carrito; la pagina estatica de
   producto (SEO) no las lleva. Son decorativas: aria-hidden y un aviso "Cargando" solo para lectores de pantalla. */
.fm-esq-img, .fm-esq-linea, .fm-esq-btn, .fm-esq-foto, .fm-esq-caja {
  background: linear-gradient(90deg, var(--superficie-baja) 25%, var(--superficie-alta) 37%, var(--superficie-baja) 63%);
  background-size: 400% 100%;
  animation: fm-esq-brillo 1.4s ease infinite;
  border-radius: var(--radio-md, 0.75rem);
}
@keyframes fm-esq-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .fm-esq-img, .fm-esq-linea, .fm-esq-btn, .fm-esq-foto, .fm-esq-caja { animation: none; }
}
.fm-esq-linea { height: 0.8rem; width: 100%; }
.fm-esq-linea--corta { width: 60%; }
.fm-esq-linea--titulo { height: 1.5rem; width: 85%; }
.fm-esq-btn { height: 2.5rem; border-radius: 999px; }
.fm-esq-btn--ancho { height: 3rem; width: 100%; }
.fm-esq-caja { height: 7rem; width: 100%; }
/* tarjeta de las filas de la portada (misma caja que .producto) */
.producto.fm-esq { display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; box-shadow: none; }
.producto.fm-esq .fm-esq-img { aspect-ratio: 1 / 1; width: 100%; }
.producto.fm-esq .fm-esq-btn { margin-top: 0.4rem; }
/* la portada pide 5 tarjetas por fila (6 desde 1600px, 7 desde 2100px; la fila de "Herramientas" el doble): se sobran, se ocultan */
@media (max-width: 1599px) {
  .fm-esq-fila-uno > .fm-esq:nth-child(n+6) { display: none; }
  .fm-esq-fila-dos > .fm-esq:nth-child(n+11) { display: none; }
}
@media (min-width: 1600px) and (max-width: 2099px) {
  .fm-esq-fila-uno > .fm-esq:nth-child(n+7) { display: none; }
  .fm-esq-fila-dos > .fm-esq:nth-child(n+13) { display: none; }
}
/* tarjeta alargada del catalogo y del carrito */
.fm-esq-lista { display: flex; align-items: center; gap: 1.25rem; padding: 1rem; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-3xl, 1.5rem); min-height: 11.5rem; }
.fm-esq-lista .fm-esq-img { width: 8rem; height: 8rem; flex-shrink: 0; }
.fm-esq-lista .fm-esq-cuerpo { flex: 1 1 8rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.fm-esq-lista .fm-esq-btn { width: 9rem; flex-shrink: 0; }
/* en celular los resultados miden lo que mide su contenido: con las siluetas (sin texto) se encogian; asi ocupan todo el ancho */
.fm-catalogo-resultados:has(.fm-esq-lista) { width: 100%; }
@media (max-width: 700px) {
  .fm-esq-lista { min-height: 11rem; flex-wrap: wrap; gap: 0.6rem 0.85rem; padding: 0.8rem; }
  .fm-esq-lista .fm-esq-img { width: 5.5rem; height: 5.5rem; }
  .fm-esq-lista .fm-esq-btn { width: 100%; }
}
/* ficha de producto */
.fm-esq-ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1rem; }
.fm-esq-foto { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radio-3xl, 1.5rem); }
.fm-esq-info { display: flex; flex-direction: column; gap: 0.9rem; }
@media (min-width: 768px) {
  .fm-esq-ficha { grid-template-columns: 1fr 1fr; }
  .fm-esq-foto { aspect-ratio: 1 / 1; }
}
/* carrito */
.fm-esq-carrito { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.fm-esq-carrito > .fm-esq-cuerpo { display: flex; flex-direction: column; gap: 1rem; }
.fm-esq-carrito .fm-esq-caja { height: 12rem; }
@media (min-width: 900px) {
  .fm-esq-carrito { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
/* ---------- aviso emergente (sitio.js, "AVISO EMERGENTE") ---------- */
.fm-banner {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(15, 23, 42, 0.62);
  opacity: 0; transition: opacity 0.2s ease;
}
.fm-banner--visible { opacity: 1; }
.fm-banner-caja {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  max-width: min(100%, 640px); max-height: 100%;
  transform: translateY(8px); transition: transform 0.2s ease;
}
.fm-banner--visible .fm-banner-caja { transform: none; }
.fm-banner-enlace { display: block; line-height: 0; border-radius: var(--radio-lg); overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.fm-banner-enlace img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); object-fit: contain; }
.fm-banner-cerrar {
  position: absolute; top: -0.6rem; right: -0.6rem; z-index: 1;
  width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--texto-principal); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.fm-banner-cerrar:hover { background: var(--color-primario); color: #fff; }
.fm-banner-cerrar:focus-visible, .fm-banner-enlace:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; }
.fm-banner-nota { margin: 0; font-size: 0.8rem; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
body.fm-banner-abierto { overflow: hidden; }
/* Varias imágenes en la misma ventana (sitio.js, abrirBannerEmergente): pista con desplazamiento horizontal y "snap" (se desliza con el dedo),
   debajo: flecha anterior, puntos, flecha siguiente (la que no aplica queda tenue) y "Aviso 1 de 2"; NUNCA encima de la imagen para no tapar texto del documento. La ventana mide lo que la imagen más ancha (lo fija el JS). */
.fm-banner-visor { position: relative; width: 100%; }
.fm-banner-pista {
  display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  border-radius: var(--radio-lg); background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.fm-banner-pista::-webkit-scrollbar { display: none; }
.fm-banner-lamina { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
.fm-banner-pista .fm-banner-enlace { box-shadow: none; border-radius: 0; }
.fm-banner-pista .fm-banner-enlace img { max-height: calc(100vh - 9.5rem); max-height: calc(100dvh - 9.5rem); }
.fm-banner-flecha {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.94); color: var(--color-secundario); cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.fm-banner-flecha--ant .material-symbols-outlined { transform: scaleX(-1); }
.fm-banner-flecha:disabled { opacity: 0.35; cursor: default; }
.fm-banner-flecha:hover:not(:disabled) { background: var(--color-primario); color: #fff; }
.fm-banner-flecha:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; }
.fm-banner-controles { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.fm-banner-pie { display: flex; flex-direction: column; align-items: center; }
.fm-banner-puntos { display: flex; }
.fm-banner-punto { position: relative; width: 2rem; height: 2.5rem; padding: 0; border: 0; background: none; cursor: pointer; }
.fm-banner-punto::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 0.6rem; height: 0.6rem; margin: -0.3rem 0 0 -0.3rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); transition: background-color 0.15s ease, transform 0.15s ease;
}
.fm-banner-punto--activo::before { background: #fff; transform: scale(1.4); }
.fm-banner-punto:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 0.4rem; }
.fm-banner-contador { margin: 0; font-size: 0.8rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
body.fm-banner-abierto { overflow: hidden; }
@media (max-width: 480px) {
  .fm-banner { padding: 0.75rem; }
  .fm-banner-cerrar { top: -0.5rem; right: -0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-banner, .fm-banner-caja, .fm-banner-flecha, .fm-banner-punto::before { transition: none; }
}
/* ---------- páginas por categoría y por marca (generar_paginas_listados.py) ---------- */
.fm-listado { padding-top: var(--espacio-lg, 1.5rem); padding-bottom: var(--espacio-xl, 3rem); }
.fm-listado .fm-acerca-encabezado { margin-bottom: 1.25rem; }
.fm-listado-grid { margin-top: 0.5rem; }
.fm-listado-mas { display: flex; justify-content: center; margin: 1.75rem 0 2rem; }
.fm-listado-otras { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--superficie-alta); }
.fm-listado-otras h2 { font-family: var(--fuente-display); font-size: 1.05rem; margin: 0 0 0.9rem; color: var(--color-secundario); }
.fm-listado-otras ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fm-listado-otras a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.35rem 0.95rem; border-radius: var(--radio-pill); background: var(--superficie-baja);
  color: var(--texto-secundario); font-size: 0.82rem; font-weight: 600; text-decoration: none;
}
.fm-listado-otras a:hover { background: var(--superficie); color: var(--texto-principal); }
/* tarjetas estáticas (antes de que el JavaScript ponga las de siempre) */
.fm-listado-grid .producto-img-click { display: block; }
.fm-listado-grid .producto-nombre-click a { color: inherit; text-decoration: none; }

/* Cuentas reales (cuenta.js): textos de ayuda, pantalla de "revisa tu correo" y carga */
.fm-cuenta-nota { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--texto-secundario); }
.fm-cuenta-auth--centrado { text-align: center; align-items: center; }
.fm-cuenta-auth--centrado .fm-btn { align-self: center; }
.fm-cuenta-auth-icono { font-size: 2.6rem; color: var(--color-primario); background: #fff7ed; border-radius: 50%; width: 4.6rem; height: 4.6rem; display: inline-flex; align-items: center; justify-content: center; }
.fm-cuenta-auth .fm-cuenta-link { align-self: center; margin-top: 0.4rem; font-size: 0.85rem; }
/* Entrar con un código por correo (cuenta.js: botonCodigoAccesoHTML / pintarCodigoAcceso) */
.fm-cuenta-codigo-opcion { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.fm-cuenta-codigo-opcion .fm-cuenta-divisor { margin: 0.4rem 0 0.1rem; }
.fm-cuenta-codigo-opcion .fm-btn { margin-top: 0; min-height: 2.75rem; }
.fm-cuenta-codigo-opcion .fm-btn .material-symbols-outlined { font-size: 1.25rem; }
/* "Iniciar sesión" con el código primero (2026-10-28): botón grande, frase corta y la contraseña en un desplegable que se lee como enlace */
.fm-cuenta-form .fm-cuenta-codigo-principal { min-height: 3rem; margin-top: 0; font-size: 1rem; width: 100%; }
.fm-cuenta-form .fm-cuenta-codigo-principal .material-symbols-outlined { font-size: 1.3rem; }
.fm-cuenta-codigo-nota { margin: -0.35rem 0 0; text-align: center; }
.fm-login-clave-detalle { margin-top: 0.15rem; border-top: 1px solid var(--superficie-alta); padding-top: 0.35rem; }
.fm-login-clave-detalle > summary { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; cursor: pointer; list-style: none; font-weight: 700; font-size: 0.92rem; color: var(--color-secundario); text-decoration: underline; text-underline-offset: 3px; }
.fm-login-clave-detalle > summary::-webkit-details-marker { display: none; }
.fm-login-clave-detalle[open] > summary { text-decoration: none; color: var(--texto-secundario); }
.fm-login-clave-detalle > summary:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; border-radius: 0.5rem; }
.fm-login-clave-cuerpo { display: flex; flex-direction: column; gap: 1rem; padding-top: 0.4rem; }
.fm-cuenta-codigo { gap: 0.9rem; }
.fm-cuenta-codigo .fm-cuenta-form { width: 100%; max-width: 20rem; }
.fm-cuenta-codigo .fm-cuenta-form .fm-btn { align-self: stretch; }
.fm-cuenta-form input.fm-cuenta-codigo-input { text-align: center; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.5rem; font-variant-numeric: tabular-nums; padding-left: 1.2rem; min-height: 3.4rem; }
.fm-cuenta-form input.fm-cuenta-codigo-input::placeholder { color: var(--superficie-alta); font-weight: 700; }

/* ---------- cupón en el resumen del checkout ---------- */
#fm-checkout-totales { display: contents; }
.fm-checkout-resumen-fila--cupon span:last-child { color: #059669; }
.fm-checkout-resumen-fila--cupon small { color: var(--texto-secundario); font-weight: 500; }
/* Cupón en el paso 1 (checkout.js: cuponCheckoutHTML): plegado como "¿Tienes un cupón?", campo + "Aplicar", o aplicado con "Quitar" */
.fm-checkout-cupon { margin: 0.4rem 0 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--superficie-alta); }
.fm-checkout-cupon-abrir { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0; border: none; background: transparent; color: var(--color-secundario); font-size: 0.9rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fm-checkout-cupon-abrir .material-symbols-outlined { font-size: 20px; color: var(--color-primario); }
.fm-checkout-cupon-form { display: flex; gap: 0.5rem; }
.fm-checkout-cupon-form input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0.6rem 0.9rem; border: 1px solid var(--borde); border-radius: var(--radio-lg); background: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fm-checkout-cupon-form input:disabled { opacity: 0.6; }
.fm-checkout-cupon-form button { min-height: 2.75rem; padding: 0 1.2rem; border: none; border-radius: var(--radio-pill); background: var(--color-secundario); color: #fff; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.fm-checkout-cupon-form button:hover { background: #1a3160; }
.fm-checkout-cupon-form button:disabled { opacity: 0.6; cursor: default; }
.fm-checkout-cupon-mensaje { margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.4; font-weight: 600; color: var(--color-secundario); }
.fm-checkout-cupon-mensaje--error { color: #b91c1c; }
.fm-checkout-cupon-aplicado { display: flex; align-items: center; gap: 0.75rem; }
.fm-checkout-cupon-aplicado > .material-symbols-outlined { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #dcfce7; color: #166534; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fm-checkout-cupon-aplicado > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.fm-checkout-cupon-aplicado strong { font-family: var(--fuente-display); font-size: 0.9rem; color: #166534; overflow-wrap: anywhere; }
.fm-checkout-cupon-aplicado span { font-size: 0.8rem; color: var(--texto-secundario); }
.fm-checkout-cupon-quitar { min-height: 2.5rem; border: 1px solid var(--borde); background: transparent; color: var(--color-secundario); font-size: 0.8rem; font-weight: 700; padding: 0 0.9rem; border-radius: var(--radio-pill); cursor: pointer; flex-shrink: 0; }
.fm-checkout-cupon-quitar:hover { background: var(--superficie-baja); }

.fm-catalogo-filtro-fila[hidden] { display: none; }

/* ---------- títulos de categoría y marca (banner) ----------
   Mismo lenguaje en tres lugares: el título del catálogo cuando eliges una categoría o una marca (catalogo.js: actualizarTituloCatalogo) y el
   encabezado de las páginas categoria/*.html y marca/*.html (generar_paginas_listados.py, solo CSS: se escribe .fm-listado para no tocar
   Sobre Ferrenmej ni las páginas legales, que también usan .fm-acerca-encabezado). Panel azul de marca con franja naranja a la izquierda, etiqueta
   naranja, nombre grande en blanco y, en el catálogo, la foto de la categoría desvanecida a la derecha. */
.fm-catalogo-banner--destacado, .fm-listado .fm-acerca-encabezado {
  flex: 1 1 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radio-lg);
  padding: 1.1rem 1.3rem 1.1rem 1.65rem;
  background: linear-gradient(120deg, #172c59 0%, var(--color-secundario) 58%, #2c4d92 100%);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(21, 38, 82, 0.6);
}
.fm-catalogo-banner--destacado::after, .fm-listado .fm-acerca-encabezado::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  background: linear-gradient(#F15A24, var(--color-primario));
}
.fm-catalogo-banner--destacado::before {
  content: '';
  position: absolute;
  inset: 0 0 0 42%;
  z-index: -1;
  background: var(--fm-banner-foto, none) center / cover no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 60%);
  mask-image: linear-gradient(to right, transparent, #000 60%);
}
.fm-listado .fm-acerca-encabezado::before {
  content: '';
  position: absolute;
  right: -2rem;
  top: -2rem;
  width: 11rem;
  height: 11rem;
  z-index: -1;
  border-radius: 2rem;
  transform: rotate(18deg);
  background: rgba(241, 90, 36, 0.18);
}
.fm-catalogo-banner--destacado .fm-eyebrow, .fm-listado .fm-acerca-encabezado .fm-eyebrow {
  display: inline-block;
  padding: 0.22rem 0.75rem;
  border-radius: var(--radio-pill);
  background: var(--color-primario);
  color: #fff;
  letter-spacing: 0.08em;
}
.fm-catalogo-banner--destacado h1, .fm-listado .fm-acerca-encabezado h1 {
  color: #fff;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 1rem + 0.9vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: 0.4rem;
}
.fm-catalogo-banner--destacado .fm-catalogo-banner-cuenta { color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; margin-top: 0.45rem; }
.fm-listado .fm-acerca-intro { color: rgba(255, 255, 255, 0.88); max-width: 60rem; font-size: 0.95rem; margin-top: 0.4rem; }
/* Datos del encabezado como pastillas (2026-10-20, "estética A3"): antes eran 3-4 líneas de párrafo dentro del banner azul (rango de precios, marcas o categorías y una frase sobre
   formas de pago). Ahora una frase corta + una fila de pastillas: el rango de precios en blanco, y hasta 4 marcas/categorías con "+N más" si hay más. La descripción completa
   sigue en la meta description y en los datos estructurados (generar_paginas_listados.py). Solo estas páginas (.fm-listado). */
.fm-listado-datos { list-style: none; margin: 0.55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.45rem; }
.fm-listado-dato {
  padding: 0.18rem 0.75rem;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
}
.fm-listado-dato--precio { background: #fff; border-color: #fff; color: var(--color-secundario); font-weight: 700; }
.fm-listado-dato--mas { background: transparent; border-style: dashed; font-weight: 500; }
.fm-listado-etiqueta { color: rgba(255, 255, 255, 0.82); font-size: 0.82rem; font-weight: 700; margin: 0 0.1rem 0 0.35rem; }
/* Celular y tableta (<=1023px): las pastillas no caben en una línea y, al bajar de renglón, el banner salía MÁS alto que con el párrafo (320px: 319 -> 371px). Van en UNA
   sola fila que se desliza con el dedo, como las filas de productos de la portada; el relleno de la derecha deja la última pastilla libre del desvanecido del borde. */
@media (max-width: 1023px) {
  .fm-listado-datos {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-right: 2rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }
  .fm-listado-datos::-webkit-scrollbar { display: none; }
  .fm-listado-dato, .fm-listado-etiqueta { flex: none; white-space: nowrap; }
}
@media (max-width: 640px) {
  .fm-catalogo-banner--destacado, .fm-listado .fm-acerca-encabezado { padding: 1.1rem 1rem 1.1rem 1.4rem; border-radius: 1.1rem; }
  .fm-catalogo-banner--destacado::before { inset: 0 0 0 30%; opacity: 0.3; }
}

/* Portada: los bloques de cada sección aparecen al bajar (animación 4 de 5; sitio.js: activarRevelarPortada). Solo opacidad y transform, una vez, 0,5 s. */
/* Ocultar es inmediato (sin transición: con ella los bloques se "desvanecían" durante 0,5 s al cargar la página); la transición vive en el estado final, el de .fm-revela--visto. */
.fm-revela { opacity: 0; transform: translateY(1.1rem); }
.fm-revela.fm-revela--visto { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.fm-revela.fm-revela--visto:not(:first-child) { transition-delay: 0.08s; }
@media print, (prefers-reduced-motion: reduce) { .fm-revela { opacity: 1; transform: none; transition: none; } }

/* ---------- animación de carga con el logo (cargandoLogoHTML en sitio.js) ---------- */
/* Página completa: el conjunto queda fijo en el centro de la pantalla (por debajo del encabezado) y no tapa clics; el bloque de afuera solo reserva el alto. */
.fm-cargando { --alto: 22px; position: relative; display: flex; justify-content: center; min-height: min(60vh, 520px); }
.fm-cargando-caja { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 40; pointer-events: none; display: flex; align-items: center; justify-content: center; max-width: calc(100vw - 2rem); }
/* Pequeña: dentro de una sección, en su lugar y centrada en ella. */
.fm-cargando--pequeno { --alto: 16px; min-height: 0; padding: 1.2rem 1rem; }
.fm-cargando--pequeno .fm-cargando-caja { position: static; transform: none; z-index: auto; max-width: 100%; }
.fm-cargando-logo { display: flex; align-items: center; justify-content: center; gap: calc(var(--alto) * 0.36); max-width: 100%; }
.fm-cargando-diamante { position: relative; flex: none; width: calc(var(--alto) * 0.966); height: var(--alto); animation: fm-cargando-late 1.6s ease-in-out infinite; }
.fm-cargando-mitad { position: absolute; inset: 0; width: 100%; height: 100%; }
.fm-cargando-mitad--izq { clip-path: inset(0 50% 0 0); animation: fm-cargando-izq 1.6s ease-in-out infinite; }
.fm-cargando-mitad--der { clip-path: inset(0 0 0 50%); animation: fm-cargando-der 1.6s ease-in-out infinite; }
.fm-cargando-nombre { display: block; flex: none; height: var(--alto); width: auto; animation: fm-cargando-nombre 1.6s ease-in-out infinite; }
/* La frase ("Cargando tu cuenta…") no se ve: solo la leen los lectores de pantalla. */
.fm-cargando-texto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes fm-cargando-izq { 0%, 62%, 100% { transform: none; } 36% { transform: translateX(-14%); } }
@keyframes fm-cargando-der { 0%, 62%, 100% { transform: none; } 36% { transform: translateX(14%); } }
@keyframes fm-cargando-late { 0%, 58%, 100% { transform: scale(1); } 74% { transform: scale(1.08); } }
@keyframes fm-cargando-nombre { 0%, 70%, 100% { opacity: 1; } 36% { opacity: 0.5; } }
@media (max-width: 480px) { .fm-cargando { --alto: min(22px, 6vw); } .fm-cargando--pequeno { --alto: min(16px, 5vw); } }
@media (prefers-reduced-motion: reduce) {
  .fm-cargando-diamante, .fm-cargando-mitad, .fm-cargando-nombre { animation: none; }
}

/* ---------- transición suave entre páginas (animación 5 de 5, 2026-10-20) ----------
   Al pasar de una página del sitio a otra, la pantalla se desvanece de la anterior a la nueva en 0,2 s en vez de cortarse en seco. Es la "transición entre documentos" del navegador
   (Chrome, Edge y Brave 126+; Safari 18.2+; Firefox no la conoce y la ignora sin efectos): basta con que las dos páginas tengan esta regla y todas cargan estilos.css. Solo se pide cuando
   el sistema NO pide "reducir movimiento". La transición espera a que la página nueva pinte (el navegador la corta sola a los 4 s si tardara más). Para quitarla: borrar este bloque. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; animation-timing-function: ease; }
}

/* ---------- respuesta al tocar en pantallas táctiles (2026-10-21; idea 6 de la ronda de "ideas nuevas") ----------
   En el celular nada respondía al dedo: el botón no cambiaba al presionarlo y el único efecto era un :hover que se queda "pegado" después del toque. Ahora, solo con pantallas que
   no tienen cursor (`hover: none`) y solo en la tienda (no en el panel, `body.fm-ad`), lo que se toca reacciona mientras el dedo está encima y vuelve suave al soltar:
   - CONTROLES (botones, píldoras de categoría, marcas, "Ver todas", chips…): se hunden un poco (`scale` .96) y se oscurecen (`filter: brightness`). Se usa la propiedad `scale` y no
     `transform` para sumarse a cualquier transform o animación que ya tenga el elemento (el rebote del carrito, el zoom del hover…); en el botón de siempre (`.fm-btn`) el :hover pegado
     escalaba 1,02 y le quitaba todo el efecto al hundimiento, por eso mientras está presionado se anula ese transform.
   - FILAS (filtros del catálogo, listas desplegables, preguntas frecuentes, resultados del buscador): un tinte azul suave por dentro (`box-shadow: inset`), que funciona sobre
     cualquier fondo sin tocar el que ya tienen.
   - TARJETAS DE PRODUCTO: la foto se hunde y se oscurece y el nombre se pone naranja SOLO si se toca la foto o el nombre (el botón "Agregar" ya se hunde por su cuenta).
   - Categorías de la portada: se hunden un poco menos (.975) porque son grandes.
   Con "reducir animaciones" solo cambia el color (sin hundimiento ni transiciones). La vuelta suave necesita una `transition` de `scale` / `filter`: se da con `:where()` (especificidad 0, no pisa
   ninguna transición que el elemento ya tuviera) a lo que no tenía ninguna, y se repite la lista de las que sí tenían (.fm-btn, píldoras, "Ver todas", marcas, pie, foto) sumándole la nueva. */
@media (hover: none) {
  body:not(.fm-ad) :is(
    button:not(.fm-catalogo-filtro-fila, .fm-select-toggle),
    a.fm-btn, [role="button"], .fm-pill-nav a, .fm-enlace-ver-todas, .fm-marca-pill, .fm-compartir-red, .fm-producto-consulta, .fm-checkout-wa-boton,
    .fm-buscador-chip, .fm-404-categorias a, .fm-carrito-vacio-lista a, .fm-listado-otras a
  ):active:not(:disabled, [aria-disabled="true"], .fm-btn-agregado) { filter: brightness(0.92); }
  body:not(.fm-ad) :is(.fm-catalogo-filtro-fila, .fm-select-toggle, .fm-select-opcion, .fm-buscador-item, summary):active { box-shadow: inset 0 0 0 100vmax rgba(21, 38, 82, 0.07); }
  body:not(.fm-ad) .producto-img-click:active { filter: brightness(0.93); }
  body:not(.fm-ad) .producto-nombre-click:active { color: var(--color-primario); }
  body:not(.fm-ad) .fm-footer-col a:active { opacity: 0.6; }
  body:not(.fm-ad) .fm-categoria-tile:active { filter: brightness(0.9); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  body:not(.fm-ad) :is(
    button:not(.fm-catalogo-filtro-fila, .fm-select-toggle),
    a.fm-btn, [role="button"], .fm-pill-nav a, .fm-enlace-ver-todas, .fm-marca-pill, .fm-compartir-red, .fm-producto-consulta, .fm-checkout-wa-boton,
    .fm-buscador-chip, .fm-404-categorias a, .fm-carrito-vacio-lista a, .fm-listado-otras a
  ):active:not(:disabled, [aria-disabled="true"], .fm-btn-agregado) { scale: 0.96; }
  body:not(.fm-ad) .fm-btn:active:not(:disabled, .fm-btn-agregado) { transform: none; }                    /* anula el scale(1.02) del :hover pegado */
  body:not(.fm-ad) .fm-categoria-tile:active { scale: 0.975; transform: none; }                            /* y el translateY(-5px) del :hover pegado */
  body:not(.fm-ad) .producto-img-click:active .producto-foto { scale: 0.965; }
  /* la vuelta suave al soltar: lo que no tenía ninguna transición (especificidad 0) ... */
  :where(button, [role="button"], .fm-compartir-red, .fm-buscador-chip, .fm-404-categorias a, .fm-carrito-vacio-lista a, .fm-listado-otras a) { transition: scale 0.15s ease-out, filter 0.15s ease-out; }
  :where(.fm-catalogo-filtro-fila, .fm-select-opcion, .fm-buscador-item, summary) { transition: box-shadow 0.15s ease-out; }
  :where(.producto-img-click) { transition: filter 0.15s ease-out; }
  :where(.producto-nombre-click) { transition: color 0.15s ease-out; }
  /* ... y las que ya tenían una lista propia, repetida con lo nuevo al final */
  .fm-btn { transition: transform 0.15s ease, background-color 0.15s ease, scale 0.15s ease-out, filter 0.15s ease-out; }
  .producto-add, .fm-producto-agregar-btn { transition: background-color 0.2s ease, box-shadow 0.2s ease, scale 0.15s ease-out, filter 0.15s ease-out; }
  .fm-pill-nav a { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, scale 0.15s ease-out, filter 0.15s ease-out; }
  .fm-enlace-ver-todas { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, scale 0.15s ease-out, filter 0.15s ease-out; }
  .fm-marca-pill { transition: scale 0.15s ease-out, filter 0.15s ease-out; }
  .fm-producto-consulta { transition: background 0.2s ease, color 0.2s ease, scale 0.15s ease-out, filter 0.15s ease-out; }
  .fm-footer-col a { transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease-out; }
  .producto-foto { transition: opacity 0.35s ease, scale 0.15s ease-out; }
  .fm-categoria-tile { transition: transform 0.25s ease, box-shadow 0.25s ease, scale 0.15s ease-out, filter 0.15s ease-out; }
}