/** Shopify CDN: Minification failed

Line 91:5 Unexpected "}"

**/
/* ==========================================================================
   MOGULS FAMILY — Sistema de diseño
   --------------------------------------------------------------------------
   Estética: "Old Money" / lujo silencioso.
   Blanco de fondo, negro de texto, marfil para franjas suaves,
   vino para ofertas y urgencia, dorado para líneas finas y detalles.

   CÓMO SE EDITA ESTO:
   - Los COLORES y las FORMAS no se tocan aquí: salen de
     Personalizar → Ajustes del tema → "Moguls Family — Marca".
     Ese panel los inyecta como variables (--mf-*) desde snippets/mf-cabeza.liquid.
   - Aquí solo vive lo estructural: maquetación, tamaños base, animaciones
     y los retoques sobre el tema Dawn.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS DE RESPALDO
   Valores por si el panel de marca aún no está configurado. Los de verdad
   llegan desde los ajustes del tema y pisan a estos.
   -------------------------------------------------------------------------- */
:root {
  /* Colores */
  --mf-blanco: #ffffff;
  --mf-negro: #0e0e0e;
  --mf-marfil: #f5f1e9;
  --mf-vino: #6b1f2a;
  --mf-dorado: #b08d57;
  --mf-gris: #6e6a63;

  /* Derivados (se recalculan en mf-cabeza.liquid a partir de los de arriba) */
  --mf-linea: rgba(14, 14, 14, 0.12);
  --mf-linea-oro: rgba(176, 141, 87, 0.45);

  /* Color de FONDO de la sección en la que estamos. Por defecto el blanco de
     la página; cada sección con fondo propio lo reescribe. Sirve para que los
     elementos invertidos (como .mf-btn--claro) siempre contrasten. */
  --mf-fondo-seccion: var(--mf-blanco);

  /* Tipografías */
  --mf-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --mf-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Espaciado entre letras de los textos en MAYÚSCULAS (aire de casa de moda) */
  --mf-track-ui: 0.18em;
  --mf-track-mini: 0.24em;

  /* Formas */
  --mf-radio: 2px;
  --mf-margen: 20px;   /* margen lateral en móvil */
  --mf-ancho: 1280px;  /* ancho máximo del contenido */

  /* Movimiento */
  --mf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mf-rapido: 0.25s;
  --mf-lento: 0.7s;

  /* Sombra discreta: el lujo silencioso no lleva sombras dramáticas */
  --mf-sombra: 0 1px 2px rgba(14, 14, 14, 0.04), 0 12px 32px rgba(14, 14, 14, 0.07);
}

@media screen and (min-width: 750px) {
  :root {
    --mf-margen: 40px;
  }
}

/* --------------------------------------------------------------------------
   2. BASE Y CONTENEDORES
   -------------------------------------------------------------------------- */

/* ⚠️ SECCIONES SOBRE FONDO OSCURO — LEER ANTES DE CREAR UNA
   -----------------------------------------------------------
   `.mf-section` fija el color del texto en --mf-negro. Como esa regla cae
   sobre el elemento interno, GANA al `color` que la sección ponga en su
   envoltorio `#shopify-section-...`. Resultado: texto negro sobre negro.

   Solución (y no pelear por especificidad): la sección REDEFINE las
   variables dentro de su propio envoltorio. Por ejemplo:

     #shopify-section-{{ section.id }} {
       background: <color oscuro>;
       color: <color claro>;
       --mf-negro: <color claro>;
       --mf-gris:  <color claro con algo de transparencia>;
       --mf-fondo-seccion: <color oscuro>;   /* ¡no olvidarlo! */
     }

   Así todo lo de dentro (títulos, textos, botones, filetes) se recalcula
   solo. Ver mf-anuncios.liquid y mf-footer.liquid como ejemplo.

   ⚠️ `--mf-fondo-seccion` es tan obligatorio como los otros: es lo que usan
   los elementos invertidos para saber sobre qué van a escribir. Olvidarlo
   dejó el botón del hero ilegible (marfil sobre blanco, contraste 1.13). */

/* REGLA DE ORO DEL ESPACIADO:
   el relleno vertical de cada sección vive SOLO en el envoltorio
   #shopify-section-... (controlado desde el editor). El elemento interno
   va siempre a cero, para que "Espacio superior: 0" se note de verdad. */
.mf-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-family: var(--mf-sans);
  color: var(--mf-negro);
  position: relative;
}

.mf-container {
  max-width: var(--mf-ancho);
  margin: 0 auto;
  padding: 0 var(--mf-margen);
  width: 100%;
}

.mf-container--estrecho {
  max-width: 880px;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   -------------------------------------------------------------------------- */

/* Títulos: serif editorial, sin exageraciones de peso */
.mf-h1,
.mf-h2,
.mf-h3 {
  font-family: var(--mf-serif);
  font-weight: 400;
  color: var(--mf-negro);
  margin: 0;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

.mf-h1 {
  font-size: clamp(2.1rem, 6vw, 3.9rem);
}

.mf-h2 {
  font-size: clamp(1.7rem, 4.2vw, 2.8rem);
}

.mf-h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.25;
}

/* Cuerpo de texto */
.mf-body {
  font-family: var(--mf-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--mf-gris);
  margin: 0;
}

/* "Antetítulo": la línea pequeña en mayúsculas sobre un título */
.mf-eyebrow {
  font-family: var(--mf-sans);
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-mini);
  color: var(--mf-dorado);
  margin: 0;
  display: inline-block;
}

/* Precio tachado (precio habitual) */
.mf-precio-antes {
  text-decoration: line-through;
  color: var(--mf-gris);
  opacity: 0.7;
  font-weight: 300;
}

/* Precio de oferta: siempre en vino */
.mf-precio-oferta {
  color: var(--mf-vino);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   4. FILETES DORADOS
   El detalle que da el aire "élite" sin gritar.
   -------------------------------------------------------------------------- */
.mf-filete {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--mf-dorado);
  border: 0;
  margin: 18px 0;
}

.mf-filete--centrado {
  margin-left: auto;
  margin-right: auto;
}

.mf-borde-sup {
  border-top: 1px solid var(--mf-linea-oro);
}

.mf-borde-inf {
  border-bottom: 1px solid var(--mf-linea-oro);
}

/* --------------------------------------------------------------------------
   5. BOTONES
   Rectangulares, mayúsculas espaciadas, transición sobria.
   -------------------------------------------------------------------------- */
.mf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px 34px;
  border: 1px solid var(--mf-negro);
  border-radius: var(--mf-radio);
  background: var(--mf-negro);
  color: var(--mf-blanco);
  font-family: var(--mf-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mf-rapido) var(--mf-ease),
              color var(--mf-rapido) var(--mf-ease),
              border-color var(--mf-rapido) var(--mf-ease);
}

.mf-btn:hover {
  background: var(--mf-blanco);
  color: var(--mf-negro);
}

/* Variante vino: para ofertas y llamadas de urgencia */
.mf-btn--vino {
  background: var(--mf-vino);
  border-color: var(--mf-vino);
  color: var(--mf-blanco);
}

.mf-btn--vino:hover {
  background: transparent;
  color: var(--mf-vino);
}

/* Variante contorno: secundaria, sobre fondos claros */
.mf-btn--linea {
  background: transparent;
  color: var(--mf-negro);
}

.mf-btn--linea:hover {
  background: var(--mf-negro);
  color: var(--mf-blanco);
}

/* Variante clara: el botón "invertido".
   Se pinta con el color de TEXTO de su sección y escribe con el color de
   FONDO de su sección. Así siempre contrasta, esté donde esté: en una franja
   negra sale marfil con letra negra, y en una blanca sale negro con letra
   blanca. No hay forma de que quede ilegible.

   (Antes usaba --mf-negro para la letra. En una sección oscura esa variable
   vale el color CLARO, así que salía marfil sobre blanco: contraste 1.13,
   invisible. Lo cazó el usuario en una captura del móvil.) */
.mf-btn--claro {
  background: var(--mf-negro);
  border-color: var(--mf-negro);
  color: var(--mf-fondo-seccion);
}

.mf-btn--claro:hover {
  background: transparent;
  color: var(--mf-negro);
}

/* Enlace de texto con subrayado fino */
.mf-link {
  font-family: var(--mf-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  color: var(--mf-negro);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--mf-dorado);
  transition: color var(--mf-rapido) var(--mf-ease);
}

.mf-link:hover {
  color: var(--mf-vino);
}

/* --------------------------------------------------------------------------
   6. ETIQUETAS / BADGES
   -------------------------------------------------------------------------- */
.mf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--mf-linea-oro);
  border-radius: var(--mf-radio);
  background: transparent;
  font-family: var(--mf-sans);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  color: var(--mf-negro);
  line-height: 1;
  white-space: nowrap;
}

/* Badge de oferta: vino sólido, es la que debe destacar */
.mf-badge--oferta {
  background: var(--mf-vino);
  border-color: var(--mf-vino);
  color: var(--mf-blanco);
}

.mf-badge--marfil {
  background: var(--mf-marfil);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   7. ANIMACIONES DE ENTRADA
   El JS (mf-scripts.js) añade .mf-visible cuando el elemento entra en pantalla.
   -------------------------------------------------------------------------- */
/* ⚠️ A PRUEBA DE FALLOS — leer antes de tocar
   El contenido está VISIBLE por defecto. Solo se esconde para animarlo
   cuando el JS ha arrancado de verdad y ha puesto la clase .mf-js en la
   página. Si el JS falla, no carga o el navegador lo bloquea, el cliente
   ve la tienda entera igualmente.

   Al revés (esconder por defecto y mostrar con JS) una web entera puede
   quedarse invisible por un solo error de JavaScript. */
.mf-reveal {
  transition: opacity var(--mf-lento) var(--mf-ease),
              transform var(--mf-lento) var(--mf-ease);
  transition-delay: var(--mf-reveal-delay, 0ms);
}

.mf-js .mf-reveal {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.mf-js .mf-reveal.mf-visible {
  opacity: 1;
  transform: none;
}

/* Accesibilidad: si el sistema pide menos movimiento, se desactiva todo */
@media (prefers-reduced-motion: reduce) {
  .mf-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Foco visible para quien navega con teclado */
.mf-btn:focus-visible,
.mf-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--mf-dorado);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   8. RETOQUES SOBRE EL TEMA DAWN
   Para que las partes que trae Dawn (cabecera, menús, buscador) hablen
   el mismo idioma visual que nuestras secciones.
   -------------------------------------------------------------------------- */

/* Franja blanca fantasma bajo la cabecera: Dawn le mete un margen inferior. */
.section-header {
  margin-bottom: 0 !important;
}

/* Cabecera: logo pequeño y centrado, iconos discretos, filete dorado abajo */
.header {
  padding-left: var(--mf-margen);
  padding-right: var(--mf-margen);
  border-bottom: 1px solid var(--mf-linea-oro);
}

.header__heading-logo {
  /* El ancho real se controla en Ajustes del tema → Logo */
  transition: opacity var(--mf-rapido) var(--mf-ease);
}

.header__heading-link:hover .header__heading-logo {
  opacity: 0.75;
}

/* Nombre de la tienda cuando todavía no hay logo cargado */
.header__heading,
.header__heading-link {
  font-family: var(--mf-serif);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* El logo va centrado de verdad: la celda del header ya está centrada,
   pero su contenido se alineaba a la izquierda dentro de ella. */
.header--middle-center .header__heading,
.header__heading {
  text-align: center;
}

/* Logotipo en vector (snippets/mf-logo.liquid).
   Se pinta del color del texto de su contenedor, así vale igual
   sobre la cabecera blanca que sobre el pie negro. */
.mf-logo {
  display: inline-block;
  height: auto;
  max-width: 100%;
  color: currentColor;
  vertical-align: middle;
}

.mf-footer__logo-vector {
  margin-bottom: 16px;
}

.mf-footer__logo-vector .mf-logo {
  display: block;
}

/* Menú y enlaces de cabecera en MAYÚSCULAS espaciadas */
.header__menu-item,
.header__menu-item span,
.list-menu__item--link,
.header__inline-menu .list-menu__item {
  font-family: var(--mf-sans);
  font-size: 0.74rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
}

/* Menú lateral (el que se abre con la hamburguesa) */
.menu-drawer {
  font-family: var(--mf-sans);
  border-right: 0;
}

.menu-drawer__menu-item {
  font-family: var(--mf-sans);
  font-size: 0.86rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  padding: 16px var(--mf-margen);
}

.menu-drawer__menu-item--active,
.menu-drawer__menu-item:focus,
.menu-drawer__menu-item:hover {
  background-color: var(--mf-marfil);
  color: var(--mf-negro);
}

/* Los iconos de la cabecera, más finos y discretos */
.header__icon .icon {
  width: 20px;
  height: 20px;
}

/* NOTA: el icono del carrito nativo se oculta desde
   snippets/mf-cabeza.liquid, según el ajuste "Ocultar el carrito"
   de Ajustes del tema → "Moguls Family — Marca". No se hace aquí
   para que el interruptor del editor mande de verdad. */

/* Botones nativos de Dawn con nuestro lenguaje visual */
.button,
.shopify-challenge__button,
.customer button {
  font-family: var(--mf-sans);
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Títulos nativos de Dawn en serif */
h1,
h2,
h3,
.h0,
.h1,
.h2,
.h3 {
  font-family: var(--mf-serif);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   9. BARRA DE ANUNCIOS (sección mf-anuncios)
   -------------------------------------------------------------------------- */
.mf-anuncios {
  overflow-x: clip;
}

.mf-anuncios__pista {
  position: relative;
  display: grid;
}

/* Todas las frases ocupan la misma celda; solo una es visible a la vez */
.mf-anuncios__item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--mf-ease);
  pointer-events: none;
}

.mf-anuncios__item.mf-activo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Si solo hay una frase, no hace falta ninguna animación */
.mf-anuncios--unica .mf-anuncios__item {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mf-anuncios__texto {
  font-family: var(--mf-sans);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  margin: 0;
}

/* Botón "Comprar" pequeño dentro de la barra */
.mf-anuncios__btn {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 5px 14px;
  border: 1px solid currentColor;
  border-radius: var(--mf-radio);
  background: transparent;
  color: inherit;
  font-family: var(--mf-sans);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--mf-rapido) var(--mf-ease),
              color var(--mf-rapido) var(--mf-ease);
}

/* Los colores del hover se calculan en la propia sección (mf-anuncios.liquid),
   a partir de los colores que el usuario elija para la franja. */

@media screen and (max-width: 480px) {
  .mf-anuncios__texto {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }

  .mf-anuncios__btn {
    font-size: 0.58rem;
    padding: 4px 10px;
  }
}

/* --------------------------------------------------------------------------
   9a. PORTADA — Apertura, franja de marca y destacados
   -------------------------------------------------------------------------- */

/* ---- Apertura (mf-hero) ---- */
.mf-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* La foto de fondo, si la hay */
.mf-hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Capa de legibilidad sobre la foto */
.mf-hero__capa {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mf-hero__contenido {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 64px;
}

.mf-hero__titulo {
  line-height: 1.02;
  margin: 12px 0 0;
}

.mf-hero__subtitulo {
  max-width: 560px;
  margin-top: 18px;
}

.mf-hero__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* La alineación (izquierda o centro) la emite la propia sección desde sus
   ajustes: centra el texto, el subtítulo, el filete y los botones a la vez. */

/* ---- Franja de marca (mf-manifiesto) ---- */
.mf-manifiesto__frase {
  font-family: var(--mf-serif);
  font-weight: 400;
  line-height: 1.2;
  margin: 18px 0 0;
  color: var(--mf-negro);
}

.mf-manifiesto__pie {
  margin-top: 20px;
  display: block;
}

/* ---- Productos destacados (mf-destacados) ---- */
.mf-destacados__cabecera {
  margin-bottom: 36px;
}

.mf-destacados__titulo {
  margin-top: 10px;
}

.mf-destacados__pie {
  margin-top: 44px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   9b. GRID DE COLECCIÓN (sección mf-coleccion) Y TARJETA DE PRODUCTO
   -------------------------------------------------------------------------- */

/* Cabecera de la colección */
.mf-coleccion__cabecera {
  text-align: center;
  margin-bottom: 36px;
}

.mf-coleccion__titulo {
  margin-top: 10px;
}

.mf-coleccion__intro {
  max-width: 620px;
  margin: 0 auto;
}

.mf-coleccion__vacia {
  text-align: center;
  padding: 60px 0;
}

.mf-coleccion__vacia .mf-h3 {
  margin-bottom: 18px;
}

.mf-coleccion__paginacion {
  margin-top: 48px;
}

/* La cuadrícula. El número de columnas y la separación los pone la sección
   desde sus ajustes; aquí solo va lo estructural. */
.mf-grid {
  display: grid;
  list-style: none;
  margin: 0;
  padding-left: var(--mf-margen);
  padding-right: var(--mf-margen);
}

.mf-grid__item {
  min-width: 0; /* evita que una foto ancha desborde su columna */
}

/* ---- Tarjeta ---- */
.mf-card {
  height: 100%;
}

.mf-card__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Marco de la foto */
.mf-card__media {
  position: relative;
  overflow: hidden;
  background: var(--mf-marfil);
  border-radius: var(--mf-radio);
  margin-bottom: 14px;
}

.mf-card__media--vertical {
  aspect-ratio: 4 / 5;
}

.mf-card__media--cuadrada {
  aspect-ratio: 1 / 1;
}

.mf-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--mf-ease), opacity 0.5s var(--mf-ease);
}

/* En "tal cual la subió" la foto manda y no se recorta */
.mf-card__media--natural .mf-card__img {
  height: auto;
  object-fit: contain;
}

/* Zoom muy leve al pasar por encima: lujo silencioso, no feria */
.mf-card__enlace:hover .mf-card__img {
  transform: scale(1.04);
}

/* Segunda foto: encima de la primera, aparece al pasar el ratón */
.mf-card__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.mf-card__enlace:hover .mf-card__img--hover {
  opacity: 1;
}

/* Solo en dispositivos con ratón de verdad: en móvil no hay "hover" y
   dejarlo activo hace que la foto parpadee al tocar. */
@media (hover: none) {
  .mf-card__img--hover {
    display: none;
  }

  .mf-card__enlace:hover .mf-card__img {
    transform: none;
  }
}

.mf-card__sin-foto {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mf-marfil);
}

.mf-card__sin-foto svg {
  width: 100%;
  height: 100%;
  opacity: 0.25;
}

/* Etiquetas sobre la foto */
.mf-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
  max-width: calc(100% - 20px);
}

.mf-card__descuento {
  margin-left: 6px;
  opacity: 0.9;
}

/* Producto agotado: la foto se apaga un poco */
.mf-card--agotado .mf-card__img {
  opacity: 0.5;
}

/* Texto de la tarjeta */
.mf-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mf-card__titulo {
  font-family: var(--mf-serif);
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  color: var(--mf-negro);
}

.mf-card__precios {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mf-sans);
  font-size: 0.95rem;
}

.mf-card__precio {
  font-weight: 400;
}

/* ---- Filtros y orden de Dawn, vestidos de Old Money ---- */
.mf-coleccion__filtros {
  margin-bottom: 28px;
}

.mf-coleccion__filtros .facets__summary,
.mf-coleccion__filtros .facets__label,
.mf-coleccion__filtros .facet-filters__label,
.mf-coleccion__filtros .facets__button,
.mf-coleccion__filtros .mobile-facets__open,
.mf-coleccion__filtros select {
  font-family: var(--mf-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
}

.mf-coleccion__filtros .facets__disclosure,
.mf-coleccion__filtros .facets__display {
  border-radius: var(--mf-radio);
}

/* --------------------------------------------------------------------------
   9c. PÁGINA DE PRODUCTO (sección mf-producto)
   -------------------------------------------------------------------------- */

.mf-oculto {
  display: none !important;
}

.mf-pp__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

/* IMPRESCINDIBLE: por defecto un elemento de una cuadrícula no se encoge por
   debajo del ancho de su contenido. Como la galería lleva las 8 fotos en fila,
   sin esto empujaba la columna a 584 px dentro de una pantalla de 375 y
   aparecía scroll horizontal en móvil. */
.mf-pp__galeria,
.mf-pp__info,
.mf-pp__pista {
  min-width: 0;
}

@media screen and (min-width: 990px) {
  .mf-pp__layout {
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
  }

  /* La galería acompaña al cliente mientras lee la ficha */
  .mf-pp__galeria {
    position: sticky;
    top: 24px;
  }
}

/* ---- Galería ---- */
.mf-pp__marco {
  position: relative;
  border-radius: var(--mf-radio);
  overflow: hidden;
  background: var(--mf-marfil);
}

/* Pista deslizable: en móvil se pasa la foto con el dedo, sin JS */
.mf-pp__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mf-pp__pista::-webkit-scrollbar {
  display: none;
}

.mf-pp__foto {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
}

.mf-pp__sin-foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mf-pp__sin-foto svg {
  width: 60%;
  opacity: 0.25;
}

.mf-pp__descuento {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.mf-pp__contador {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--mf-radio);
  background: rgba(14, 14, 14, 0.62);
  color: #fff;
  font-family: var(--mf-sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  backdrop-filter: blur(3px);
}

.mf-pp__miniaturas {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.mf-pp__miniaturas::-webkit-scrollbar {
  display: none;
}

.mf-pp__mini {
  flex: 0 0 66px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--mf-radio);
  background: var(--mf-marfil);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--mf-rapido) var(--mf-ease), opacity var(--mf-rapido) var(--mf-ease);
  opacity: 0.6;
}

.mf-pp__mini img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.mf-pp__mini.mf-activa {
  border-color: var(--mf-dorado);
  opacity: 1;
}

.mf-pp__mini:hover {
  opacity: 1;
}

/* ---- Columna de compra ---- */
.mf-pp__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mf-pp__titulo {
  margin-top: 6px;
  line-height: 1.08;
}

.mf-pp__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Precio */
.mf-pp__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mf-sans);
}

.mf-pp__precio-actual {
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
}

.mf-pp__precio-antes {
  font-size: 1.1rem;
}

.mf-pp__precio-nota {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  color: var(--mf-gris);
}

/* Beneficios con check */
.mf-pp__beneficios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mf-pp__beneficio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--mf-sans);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.45;
}

.mf-pp__check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: #1f7a45; /* verde del check, como pediste */
}

/* Selector de color y talla */
.mf-pp__opciones {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mf-pp__opcion-cabecera {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
  font-family: var(--mf-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
}

.mf-pp__opcion-nombre {
  font-weight: 500;
}

.mf-pp__opcion-elegida {
  color: var(--mf-gris);
  letter-spacing: 0.06em;
}

.mf-pp__pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mf-pp__pastilla {
  min-width: 48px;
  min-height: 44px; /* zona de toque cómoda en móvil */
  padding: 10px 16px;
  border: 1px solid var(--mf-linea);
  border-radius: var(--mf-radio);
  background: transparent;
  color: var(--mf-negro);
  font-family: var(--mf-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color var(--mf-rapido) var(--mf-ease),
              background var(--mf-rapido) var(--mf-ease),
              color var(--mf-rapido) var(--mf-ease);
}

.mf-pp__pastilla:hover {
  border-color: var(--mf-negro);
}

.mf-pp__pastilla.mf-activa {
  background: var(--mf-negro);
  border-color: var(--mf-negro);
  color: var(--mf-blanco);
}

.mf-pp__guia {
  align-self: flex-start;
}

/* Botón principal de WhatsApp */
.mf-pp__btn-wa {
  width: 100%;
  min-height: 62px;
  gap: 12px;
  background: var(--mf-vino);
  border-color: var(--mf-vino);
  color: var(--mf-blanco);
}

.mf-pp__btn-wa:hover {
  background: var(--mf-negro);
  border-color: var(--mf-negro);
  color: var(--mf-blanco);
}

.mf-pp__btn-wa svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: 0 0 22px;
}

.mf-pp__btn-textos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
}

.mf-pp__btn-secundario {
  font-size: 0.62rem;
  font-weight: 300;
  opacity: 0.85;
  letter-spacing: 0.1em;
}

.mf-btn--agotado {
  opacity: 0.45;
  pointer-events: none;
}

.mf-pp__aviso {
  padding: 14px 16px;
  border: 1px dashed var(--mf-vino);
  border-radius: var(--mf-radio);
  font-family: var(--mf-sans);
  font-size: 0.85rem;
  color: var(--mf-vino);
  margin: 0;
}

/* Aviso de pocas existencias */
.mf-pp__urgencia {
  padding: 12px 16px;
  border-radius: var(--mf-radio);
  background: var(--mf-marfil);
  border-left: 3px solid var(--mf-vino);
  font-family: var(--mf-sans);
  font-size: 0.85rem;
  font-weight: 400;
}

/* Estimación de entrega */
.mf-pp__entrega {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mf-sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--mf-gris);
}

.mf-pp__entrega svg {
  width: 22px;
  height: 22px;
  fill: var(--mf-dorado);
  flex: 0 0 22px;
}

.mf-pp__entrega strong {
  font-weight: 500;
  color: var(--mf-negro);
}

/* Descripción y textos libres */
.mf-pp__descripcion,
.mf-pp__texto {
  padding-top: 4px;
}

.mf-pp__texto-titulo {
  font-family: var(--mf-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  margin: 0 0 8px;
}

/* Desplegables */
.mf-pp__acordeon {
  border-top: 1px solid var(--mf-linea);
}

.mf-pp__acordeon:last-of-type {
  border-bottom: 1px solid var(--mf-linea);
}

.mf-pp__acordeon-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--mf-sans);
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
}

.mf-pp__acordeon-titulo::-webkit-details-marker {
  display: none;
}

.mf-pp__acordeon-titulo svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform var(--mf-rapido) var(--mf-ease);
}

.mf-pp__acordeon[open] .mf-pp__acordeon-titulo svg {
  transform: rotate(180deg);
}

.mf-pp__acordeon-cuerpo {
  padding-bottom: 18px;
}

/* ---- Barra fija de compra ---- */
.mf-pp__barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px var(--mf-margen);
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--mf-linea-oro);
  backdrop-filter: blur(8px);
  /* Respeta la zona del gesto de inicio en los móviles sin botón */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.mf-pp__barra-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mf-pp__barra-titulo {
  font-family: var(--mf-serif);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mf-pp__barra-precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mf-sans);
  font-size: 0.85rem;
  font-weight: 500;
}

.mf-pp__barra-btn {
  flex: 0 0 auto;
  background: var(--mf-vino);
  border-color: var(--mf-vino);
  min-height: 46px;
  padding: 12px 22px;
}

.mf-pp__barra-btn:hover {
  background: var(--mf-negro);
  border-color: var(--mf-negro);
  color: var(--mf-blanco);
}

/* Hueco al final de la página para que la barra no tape el contenido */
body:has(.mf-pp__barra) {
  padding-bottom: 78px;
}

@media screen and (max-width: 480px) {
  .mf-pp__barra-titulo {
    max-width: 42vw;
  }

  .mf-pp__barra-btn {
    padding: 12px 16px;
    font-size: 0.68rem;
  }
}

/* --------------------------------------------------------------------------
   9d. BOTÓN FLOTANTE DE WHATSAPP (snippets/mf-whatsapp.liquid)
   -------------------------------------------------------------------------- */
.mf-wa {
  position: fixed;
  z-index: 40;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 999px;
  background: var(--mf-wa-fondo);
  color: var(--mf-wa-icono);
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(14, 14, 14, 0.22);
  transition: transform var(--mf-rapido) var(--mf-ease),
              box-shadow var(--mf-rapido) var(--mf-ease);
}

.mf-wa--derecha {
  right: 18px;
}

.mf-wa--izquierda {
  left: 18px;
}

.mf-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 14, 14, 0.3);
}

.mf-wa svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  display: block;
}

.mf-wa__texto {
  font-family: var(--mf-sans);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  padding-right: 8px;
}

/* En móvil solo el círculo: el texto ocuparía media pantalla */
@media screen and (max-width: 749px) {
  .mf-wa__texto {
    display: none;
  }
}

/* En las fichas de producto hay barra fija de compra abajo:
   el botón sube para no taparla. */
body:has(.mf-pp__barra) .mf-wa {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .mf-wa:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   10. PIE DE PÁGINA (sección mf-footer)
   -------------------------------------------------------------------------- */
/* Flexbox en vez de grid: el número de columnas de enlaces lo decide el
   usuario desde el editor, así que la maqueta tiene que adaptarse sola.
   (Con grid habría que saber cuántas son de antemano.) */
.mf-footer__grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media screen and (min-width: 750px) {
  .mf-footer__grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 48px 40px;
  }

  .mf-footer__marca {
    flex: 1 1 320px;
  }

  .mf-footer__columna {
    flex: 0 1 170px;
    min-width: 140px;
  }
}

.mf-footer__marca {
  max-width: 420px;
}

.mf-footer__logo {
  display: block;
  height: auto;
  margin-bottom: 18px;
}

.mf-footer__nombre {
  font-family: var(--mf-serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

.mf-footer__slogan {
  font-family: var(--mf-sans);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-mini);
  color: var(--mf-dorado);
  margin: 0 0 16px;
}

.mf-footer__titulo {
  font-family: var(--mf-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mf-track-ui);
  margin: 0 0 18px;
}

.mf-footer__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.mf-footer__lista a {
  font-family: var(--mf-sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: inherit;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity var(--mf-rapido) var(--mf-ease);
}

.mf-footer__lista a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--mf-dorado);
}

/* Redes sociales */
.mf-footer__redes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.mf-footer__red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--mf-linea-oro);
  border-radius: var(--mf-radio);
  color: inherit;
  transition: background var(--mf-rapido) var(--mf-ease),
              color var(--mf-rapido) var(--mf-ease);
}

.mf-footer__red:hover {
  background: var(--mf-dorado);
  color: var(--mf-blanco);
}

.mf-footer__red svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* Línea inferior de créditos */
.mf-footer__base {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--mf-linea-oro);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.mf-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mf-footer__legal a,
.mf-footer__copy {
  font-family: var(--mf-sans);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: inherit;
  opacity: 0.65;
  text-decoration: none;
  margin: 0;
}

.mf-footer__legal a:hover {
  opacity: 1;
}

@media screen and (max-width: 749px) {
  .mf-footer__base {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 36px;
  }
}