/* ==========================================================================
   Miamon — Capa de temporada (Halloween / Navidad) · v2
   --------------------------------------------------------------------------
   Se enciende con dos atributos en <html>:
     data-holiday="halloween|navidad"  ·  data-holiday-variant="1|2|3|4"

   Principios de esta version (la v1 se leia como pegatinas):
   - Nada flota: la guirnalda cuelga DEL header (.header-wrapper::after), los
     objetos apoyan en el borde de la ventana, los velos se funden con mask.
   - Tamanos en px con tope (min()), nunca vw sueltos: en un portatil 1366
     un 24vw son 330px y se comen la pantalla.
   - Los adornos son <span>, nunca <div> vacios (Dawn: div:empty {display:none}).
   - Sin Liquid dentro: rutas de imagen como custom properties (portable a WP).
   - rem de Dawn = 10px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Andamio comun
   -------------------------------------------------------------------------- */

.mm-hol {
  display: block;                 /* custom element: inline por defecto */
  position: fixed;
  inset: 0;
  /* 2 y no 4: el header de Dawn es z-index 3. Con 4 la telarana se pintaba
     ENCIMA del logo y del menu, que es lo que mas delataba la pegatina. */
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  /* nada aparece en el frame 0: el decorado entra despues del contenido */
  animation: mm-hol-in 1.1s cubic-bezier(.23, 1, .32, 1) .35s both;
}

@keyframes mm-hol-in { from { opacity: 0; } to { opacity: 1; } }

/* La intensidad vive en <html>, no en .mm-hol: el colgante y la pastilla estan
   fuera del overlay y tienen que heredarla igual. Liquid escribe --mm-hol-set
   con el valor del ajuste; de ahi sale todo lo demas. La intensidad escala
   TAMANO, no solo opacidad: al 40% los adornos son pequenos de verdad. */
[data-holiday] {
  --mm-hol-i: var(--mm-hol-set, 1);
  --mm-hol-scale: calc(.55 + var(--mm-hol-i) * .45);
}

.mm-hol > * { position: absolute; display: none; }

/* Parallax. Los adornos son fixed (viven en las esquinas de la VENTANA), asi
   que sin esto se quedan clavados al cristal mientras la pagina pasa por
   detras — nada real se comporta asi. El JS escribe --mm-par (con tope) y
   cada pieza lleva su factor. --mm-flip guarda los espejados de Navidad para
   que no pisen el transform. */
.mm-hol__c1, .mm-hol__c2, .mm-hol__c3, .mm-hol__c4,
.mm-hol__prop, .mm-hol__mark, .mm-hol__band {
  transform: translate3d(0, calc(var(--mm-par, 0px) * var(--mm-par-f, 1)), 0) var(--mm-flip, );
}
.mm-hol__c1, .mm-hol__c2 { --mm-par-f: -1; }
.mm-hol__c3, .mm-hol__c4, .mm-hol__prop, .mm-hol__band--bottom { --mm-par-f: .55; }

.mm-hol__fx { inset: 0; width: 100%; height: 100%; }
.mm-hol__glow { inset: 0; }

/* velos de esquina: se funden con una mascara radial para que nunca se vea
   el borde del recorte, que era lo que delataba la v1 */
.mm-hol__c1, .mm-hol__c2, .mm-hol__c3, .mm-hol__c4 {
  background-repeat: no-repeat;
  background-size: cover;
}
.mm-hol__c1 { top: 0; left: 0;
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 30%, transparent 72%);
          mask-image: radial-gradient(circle at 0 0, #000 30%, transparent 72%); }
.mm-hol__c2 { top: 0; right: 0;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 30%, transparent 72%);
          mask-image: radial-gradient(circle at 100% 0, #000 30%, transparent 72%); }
.mm-hol__c3 { bottom: 0; left: 0;
  -webkit-mask-image: radial-gradient(circle at 0 100%, #000 30%, transparent 72%);
          mask-image: radial-gradient(circle at 0 100%, #000 30%, transparent 72%); }
.mm-hol__c4 { bottom: 0; right: 0;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 30%, transparent 72%);
          mask-image: radial-gradient(circle at 100% 100%, #000 30%, transparent 72%); }

/* objeto apoyado en el suelo (frascos, calabaza): sin mascara, con sombra */
.mm-hol__prop {
  bottom: 0;
  left: 18px;
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
}

.mm-hol__band { left: 0; right: 0; background-repeat: repeat-x; }
.mm-hol__band--bottom { bottom: 0; background-position: center bottom; }

.mm-hol__mark { background-repeat: no-repeat; background-size: contain; }

/* Colgante: hilo (::before) + objeto (::after). Va FUERA del overlay y por
   encima del header, porque el hilo tiene que arrancar en el borde superior
   de la pantalla; si se queda en el overlay (z-index 2) el header opaco se lo
   come y parece que empieza a media altura. */
.mm-hol__drop {
  display: none;
  position: fixed;
  z-index: 5;
  top: 0; width: 0;
  pointer-events: none;
}
.mm-hol__drop::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 1px; height: var(--mm-drop-len, 110px); transform: translateX(-50%);
  /* visible ya en el pixel 0 y ganando cuerpo en los primeros 40px: antes
     arrancaba en transparent puro y el hilo parecia empezar mas abajo */
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--mm-drop-thread, #d4a24c) 45%, transparent) 0,
    var(--mm-drop-thread, #d4a24c) 40px);
  opacity: .7;
}
.mm-hol__drop::after {
  content: '';
  position: absolute; left: 50%;
  /* el objeto SOLAPA el final del hilo (--mm-drop-lap): el hilo tiene que
     morir bajo el cuerpo, no tocarle el borde de la caja */
  top: calc(var(--mm-drop-len, 110px) - var(--mm-drop-lap, 0px));
  width: var(--mm-drop-size, 40px);
  height: var(--mm-drop-h, var(--mm-drop-size, 40px));
  transform: translateX(-50%);
  background: var(--mm-drop-img) top center / contain no-repeat;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
}

/* --------------------------------------------------------------------------
   Murcielagos. No son un adorno fijo: son un SUCESO. Cruzan cada tanto y se
   van, y entre travesia y travesia no queda nada corriendo.

   El aleteo es un sprite de dos fotogramas dentro de un solo SVG: la mascara
   mide el doble de ancho que el elemento y se desplaza con steps(2). Asi la
   animacion vive en el CSS de la pagina y no dentro del SVG — animar un SVG
   usado como mask-image no es fiable en todos los motores.

   Va fuera del overlay (z-index 5) por lo mismo que el colgante: a z-index 2
   el header opaco se lo comeria a media travesia.
   -------------------------------------------------------------------------- */
.mm-hol__bat {
  display: none;
  position: fixed;
  z-index: 5;
  left: 0;
  top: var(--mm-bat-top, 26%);
  width: var(--mm-bat-w, 40px);
  height: calc(var(--mm-bat-w, 40px) * var(--mm-bat-ratio, .583));
  pointer-events: none;
  opacity: 0;
  /* dorado con cuerpo: una silueta llena necesita mas peso que un dibujo de
     linea o se pierde sobre los fondos claros de Dawn */
  background: color-mix(in srgb, var(--mm-acc, #d4a24c) 76%, #241703);
  -webkit-mask: var(--mm-bat-img, var(--mm-img-bats)) 0% 50% / var(--mm-bat-sprite, 200% 100%) no-repeat;
          mask: var(--mm-bat-img, var(--mm-img-bats)) 0% 50% / var(--mm-bat-sprite, 200% 100%) no-repeat;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .35));
}
[data-holiday='halloween'] .mm-hol__bat,
[data-holiday='navidad'] .mm-hol__bat { display: block; }

@keyframes mm-hol-bat-flap {
  from { -webkit-mask-position: 0% 50%; mask-position: 0% 50%; }
  to { -webkit-mask-position: 100% 50%; mask-position: 100% 50%; }
}

/* La travesia: dos recorridos espejados en vez de un calc con signo, que se
   lee peor y interpola peor. El vaiven vertical evita la linea recta, que es
   lo que delata a un sprite cruzando una pantalla. */
@keyframes mm-hol-bat-ltr {
  0% { opacity: 0; transform: translate(-16vw, 0) scaleX(1); }
  12% { opacity: calc(var(--mm-hol-i, 1) * .9); }
  30% { transform: translate(20vw, -30px) scaleX(1); }
  55% { transform: translate(52vw, 18px) scaleX(1); }
  78% { transform: translate(82vw, -24px) scaleX(1); }
  88% { opacity: calc(var(--mm-hol-i, 1) * .9); }
  100% { opacity: 0; transform: translate(114vw, 4px) scaleX(1); }
}
@keyframes mm-hol-bat-rtl {
  0% { opacity: 0; transform: translate(114vw, 0) scaleX(-1); }
  12% { opacity: calc(var(--mm-hol-i, 1) * .9); }
  30% { transform: translate(78vw, -30px) scaleX(-1); }
  55% { transform: translate(46vw, 18px) scaleX(-1); }
  78% { transform: translate(16vw, -24px) scaleX(-1); }
  88% { opacity: calc(var(--mm-hol-i, 1) * .9); }
  100% { opacity: 0; transform: translate(-16vw, 4px) scaleX(-1); }
}

.mm-hol__bat--cross.is-ltr,
.mm-hol__bat--cross.is-rtl { animation: mm-hol-bat-flap .34s steps(2, jump-none) infinite, mm-hol-bat-ltr var(--mm-bat-dur, 8s) linear both; }
.mm-hol__bat--cross.is-rtl { animation-name: mm-hol-bat-flap, mm-hol-bat-rtl; }

/* Grupo de la esquina superior derecha. Aqui no hay JS: es un bucle de CSS,
   porque tienen que salir a menudo y para eso no hace falta azar.

   Dos detalles que si importan:
   - Cada uno tiene un ciclo de duracion distinta (8,1s / 9,2s / 10,3s), asi
     que el conjunto tarda minutos en repetirse aunque cada pieza sea regular.
   - El desfase va atado a la duracion PROPIA de cada uno (un tercio, dos
     tercios), no a un numero fijo de segundos. Con un desfase fijo y ciclos
     distintos acaban coincidiendo y dejan huecos largos de nada.
   Vuelan la mitad del ciclo; la otra mitad esperan invisibles. */
.mm-hol__bat--corner {
  left: auto;
  right: calc(4% + var(--mm-bat-i, 1) * 4.5%);
  top: calc(12% + var(--mm-bat-i, 1) * 5%);
  --mm-bat-w: calc(30px - var(--mm-bat-i, 1) * 3px);
  --mm-bat-cycle: calc(7s + var(--mm-bat-i, 1) * 1.1s);
  animation:
    mm-hol-bat-flap .34s steps(2, jump-none) infinite,
    mm-hol-bat-corner var(--mm-bat-cycle) linear infinite;
  animation-delay: 0s, calc(-0.33 * var(--mm-bat-i, 1) * var(--mm-bat-cycle));
}

@keyframes mm-hol-bat-corner {
  0% { opacity: 0; transform: translate(54px, -46px) scale(.86); }
  5% { opacity: calc(var(--mm-hol-i, 1) * .85); }
  18% { transform: translate(18px, -6px) scale(1); }
  30% { transform: translate(-26px, 16px) scale(.96); }
  40% { transform: translate(-8px, -18px) scale(.9); }
  45% { opacity: calc(var(--mm-hol-i, 1) * .85); }
  50% { opacity: 0; transform: translate(40px, -52px) scale(.84); }
  100% { opacity: 0; transform: translate(54px, -46px) scale(.86); }
}

/* --------------------------------------------------------------------------
   Guirnalda / tubo colgado del header real. El header de Miamon es fixed y
   cambia de alto al hacer scroll: al ir en ::after se mueve con el sin JS.
   -------------------------------------------------------------------------- */
[data-holiday] .header-wrapper { position: relative; }
[data-holiday] .header-wrapper::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 0;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 100%;
  opacity: var(--mm-hol-i, 1);
}

/* --------------------------------------------------------------------------
   Pastilla fija que reabre el modal. El dock social de Miamon vive en la
   esquina inferior derecha (right 2.4rem, ancho 4.8rem): nos apartamos.
   -------------------------------------------------------------------------- */
.mm-hol__badge {
  display: none;
  /* fuera del overlay: el decorado va bajo el header, pero la pastilla es un
     control y tiene que estar por encima de todo */
  position: fixed;
  z-index: 6;
  right: 92px;
  bottom: 22px;
  pointer-events: auto;
  animation: mm-hol-in 1.1s cubic-bezier(.23, 1, .32, 1) .9s both;
  border: 0; padding: 0; background: none; cursor: pointer;
  font-family: inherit; color: inherit; line-height: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease;
}
.mm-hol__badge:hover { transform: translateY(-2px); }
.mm-hol__badge:focus-visible { outline: 2px solid var(--mm-acc, #ff7900); outline-offset: 4px; }
.mm-hol__badge-txt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px 11px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  background: rgba(20, 20, 20, .82);
  color: var(--mm-acc, #ff7900);
  border: 1px solid color-mix(in srgb, var(--mm-acc, #ff7900) 55%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
}
.mm-hol__badge-txt::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mm-acc, #ff7900); box-shadow: 0 0 10px var(--mm-acc, #ff7900);
}

[data-holiday] .mm-hol__fx,
[data-holiday] .mm-hol__glow,
[data-holiday] .mm-hol__badge { display: block; }

/* --------------------------------------------------------------------------
   2. Modal de oferta — base "botica"
   Una sola columna, simetrica, dentro de un marco de doble filete con rombos
   en las esquinas: la etiqueta de un frasco de farmacia antigua. Sustituye a
   la version de dos columnas, que era un dialogo de e-commerce cualquiera con
   una foto al lado.

   Tipografia: las familias del tema (Poppins), nunca una serif de sistema —
   una segunda tipografia que la web no usa se nota enseguida.
   -------------------------------------------------------------------------- */

.mm-holmodal {
  border: 0; padding: 0; background: transparent; color: #f5f5f5;
  max-width: min(740px, 92vw); max-height: 94vh; overflow: visible;
}
.mm-holmodal::backdrop {
  background: rgba(5, 4, 4, .78); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .4s ease;
}
.mm-holmodal[open]::backdrop { opacity: 1; }

.mm-holmodal__inner {
  position: relative;
  padding: 20px;
  border-radius: 8px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, .045), transparent 70%),
    radial-gradient(80% 80% at 50% 120%, rgba(255, 255, 255, .03), transparent 70%),
    var(--mm-m-bg, #100c0a);
  box-shadow: 0 50px 110px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05);
  opacity: 0; transform: translateY(22px) scale(.97);
  transition: opacity .5s cubic-bezier(.23, 1, .32, 1), transform .5s cubic-bezier(.23, 1, .32, 1);
}
.mm-holmodal.is-open .mm-holmodal__inner { opacity: 1; transform: none; }

/* el marco: filete exterior, filete interior (::before) y hueco para el
   ornamento de temporada (::after: guirnalda de Navidad, neon de H4) */
.mm-holmodal__frame {
  position: relative;
  padding: 52px 56px 44px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--mm-acc, #d4a24c) 50%, transparent);
}
.mm-holmodal__frame::before {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--mm-acc, #d4a24c) 22%, transparent);
}
.mm-holmodal__frame::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0;
  pointer-events: none; background-repeat: repeat-x;
  background-position: center top; background-size: auto 100%;
}

/* rombos en las cuatro esquinas del marco */
.mm-holmodal__corner {
  position: absolute; z-index: 2; width: 14px; height: 14px;
  border: 1px solid color-mix(in srgb, var(--mm-acc, #d4a24c) 60%, transparent);
  background: var(--mm-m-bg, #100c0a);
  transform: rotate(45deg);
}
.mm-holmodal__corner--tl { top: -7px; left: -7px; }
.mm-holmodal__corner--tr { top: -7px; right: -7px; }
.mm-holmodal__corner--bl { bottom: -7px; left: -7px; }
.mm-holmodal__corner--br { bottom: -7px; right: -7px; }

/* telaranas en diagonal (solo Halloween): la esquina superior izquierda la
   ocupa el sello */
.mm-holmodal__web {
  display: none;
  position: absolute; z-index: 1; width: 124px; height: 124px;
  background: radial-gradient(circle at 0 0,
    color-mix(in srgb, var(--mm-acc, #d4a24c) 55%, #fff),
    var(--mm-acc, #d4a24c) 45%, transparent 88%);
  -webkit-mask: var(--mm-img-web) top left / contain no-repeat;
          mask: var(--mm-img-web) top left / contain no-repeat;
  opacity: .42;
}
.mm-holmodal__web--tr { top: 0; right: 0; transform: scaleX(-1); }
.mm-holmodal__web--bl { bottom: 0; left: 0; transform: scaleY(-1); }
[data-holiday='halloween'] .mm-holmodal__web { display: block; }

.mm-holmodal__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 16px;
  font-family: var(--font-body-family);
  font-size: 10.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--mm-acc, #d4a24c);
}
.mm-holmodal__eyebrow::before, .mm-holmodal__eyebrow::after {
  content: ''; width: 52px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mm-acc, #d4a24c) 75%, transparent));
}
.mm-holmodal__eyebrow::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--mm-acc, #d4a24c) 75%, transparent), transparent);
}

.mm-holmodal__title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: clamp(28px, 4.4vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
  color: #f4ead6; text-wrap: balance;
}
/* la ultima palabra del titulo, en el color de la temporada */
.mm-holmodal__title em { font-style: normal; color: color-mix(in srgb, var(--mm-acc, #d4a24c) 60%, #fff); }

/* El reflejo viene en la propia foto de producto y es lo que abria un hueco
   enorme bajo el bote: se difumina con una mascara y se recupera ese alto con
   el margen negativo. */
.mm-holmodal__art { position: relative; width: min(292px, 62%); margin: 8px auto -34px; }
.mm-holmodal__art img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .75));
  -webkit-mask: linear-gradient(to bottom, #000 70%, transparent 93%);
          mask: linear-gradient(to bottom, #000 70%, transparent 93%);
}

.mm-holmodal__text {
  margin: 2px auto 0; max-width: 46ch;
  font-family: var(--font-body-family);
  font-size: 14.5px; line-height: 1.65; color: #a89f93;
}

/* mismas medidas que el boton de la web: pildora, 45px de alto, 15px, 30px
   de padding (buttons_radius 40 en settings_data.json) */
.mm-holmodal__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 120px; min-height: 45px; padding: 0 30px; margin-top: 20px;
  border-radius: 40px;
  background: var(--mm-cta-bg, #d4a24c); color: var(--mm-cta-fg, #17120d);
  font-family: var(--font-body-family);
  font-size: 15px; font-weight: 600; text-decoration: none;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--mm-cta-bg, #d4a24c) 28%, transparent);
  transition: transform .2s ease, filter .2s ease;
}
.mm-holmodal__cta:hover { transform: translateY(-2px); filter: brightness(1.06); }

.mm-holmodal__dismiss {
  display: block; margin: 14px auto 0;
  border: 0; padding: 4px; background: none; cursor: pointer;
  font-family: var(--font-body-family);
  color: #6f675d; font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.mm-holmodal__dismiss:hover { color: #b5aea6; }

/* El sello: lacre en la esquina superior izquierda, pisando el marco. El borde
   organico (border-radius de ocho valores) es lo que lo separa de un circulo
   y lo hace leer como cera. */
.mm-holmodal__seal {
  position: absolute; z-index: 6;
  top: -10px; left: -6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 112px; height: 112px;
  border-radius: 47% 53% 44% 56% / 52% 44% 56% 48%;
  background: radial-gradient(circle at 36% 30%,
    color-mix(in srgb, var(--mm-acc, #d4a24c) 85%, #fff) 0%,
    color-mix(in srgb, var(--mm-acc, #d4a24c) 72%, #000) 60%,
    color-mix(in srgb, var(--mm-acc, #d4a24c) 48%, #000) 100%);
  color: #f7e9cd;
  font-family: var(--font-heading-family);
  font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  transform: rotate(-11deg);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .6),
              inset 0 2px 6px rgba(255, 255, 255, .28),
              inset 0 -4px 10px rgba(0, 0, 0, .45);
}
.mm-holmodal__seal::before {
  content: ''; position: absolute; inset: 11px;
  border: 1px dashed rgba(247, 233, 205, .35); border-radius: inherit;
}
.mm-holmodal__seal::after {
  content: var(--mm-seal-label, 'de descuento');
  font-family: var(--font-body-family);
  font-size: 8px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1;
  color: rgba(247, 233, 205, .82);
}

.mm-holmodal__close {
  position: absolute; z-index: 20; top: 6px; right: 6px;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: rgba(12, 10, 8, .72); color: #e2d8c8; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.mm-holmodal__close:hover { background: rgba(12, 10, 8, .95); color: #fff; transform: rotate(90deg); }
.mm-holmodal__close svg { width: 14px; height: 14px; }
.mm-holmodal :focus-visible { outline: 2px solid var(--mm-acc, #ff7900); outline-offset: 3px; }
.mm-holmodal__inner:focus, .mm-holmodal__inner:focus-visible { outline: none; }

@media screen and (max-width: 749px) {
  .mm-holmodal { max-width: 94vw; max-height: 94vh; overflow: auto; }
  .mm-holmodal__inner { padding: 12px; }
  .mm-holmodal__frame { padding: 44px 24px 30px; }
  .mm-holmodal__title { font-size: 26px; }
  .mm-holmodal__art { width: 62%; margin-bottom: -26px; }
  .mm-holmodal__text { font-size: 14px; }
  /* en movil el dialog pasa a overflow:auto para poder desplazarse, y eso
     recorta: el sello no puede sobresalir mas que el padding del panel */
  .mm-holmodal__seal { width: 84px; height: 84px; font-size: 23px; top: -8px; left: -4px; }
  .mm-holmodal__eyebrow { gap: 8px; font-size: 9.5px; letter-spacing: .2em; }
  .mm-holmodal__eyebrow::before, .mm-holmodal__eyebrow::after { width: 22px; }
  .mm-holmodal__seal::after { font-size: 7px; }
  .mm-holmodal__web { width: 92px; height: 92px; }
  [data-holiday='navidad'] .mm-holmodal__gar { left: 6px; right: 6px; top: 6px; height: 26px; --mm-gar-s: 26px; }
  [data-holiday='navidad'] .mm-holmodal__seal { top: 120px; width: 84px; height: 60px; font-size: 22px; }
  [data-holiday='navidad'] .mm-holmodal__seal::before { top: -107px; height: 107px; }
}

/* ==========================================================================
   HALLOWEEN
   ========================================================================== */

/* Telarana de Oro — concepto unico de Halloween ------------------------------
   Fue una de cuatro propuestas y es la que se quedo; las otras tres se
   retiraron el 2026-09-06. Por eso estas reglas ya NO llevan
   data-holiday-variant: en Halloween el ajuste «Concepto» no pinta nada y solo
   sigue mandando en Navidad. */
[data-holiday='halloween'] {
  --mm-acc: #d4a24c; --mm-m-bg: #0c0b0a; --mm-cta-bg: #d4a24c; --mm-cta-fg: #14100a;
}
[data-holiday='halloween'] .mm-hol__glow { display: none; }
[data-holiday='halloween'] .mm-hol__c1 {
  /* El ancla de la telarana se VE, en la esquina, y la tela se abre hacia
     dentro: asi se lee como telarana de rincon al primer vistazo. Antes el
     centro caia fuera de pantalla y solo quedaban arcos sueltos. */
  --w: calc(min(230px, 17vw) * var(--mm-hol-scale, 1));
  display: block; width: var(--w); height: var(--w);
  top: calc(var(--w) * -0.10); left: calc(var(--w) * -0.10);
  /* tinta de marca + mascara SVG. El color sale del token --mm-acc, no de un
     filter sepia() sobre un PNG que venia de otro color (eso siempre queda
     plano y con halo). El radial desde la esquina desvanece el borde del
     recorte por igual en todas las direcciones. */
  background: radial-gradient(circle at 0 0,
    color-mix(in srgb, var(--mm-acc) 55%, #fff) 0%,
    var(--mm-acc) 40%,
    color-mix(in srgb, var(--mm-acc) 45%, transparent) 68%,
    transparent 92%);
  -webkit-mask: var(--mm-img-web) top left / contain no-repeat;
          mask: var(--mm-img-web) top left / contain no-repeat;
  filter: none;
  opacity: calc(var(--mm-hol-i) * .62);
}
/* Presupuesto: un ancla + un detalle vivo + una llamada. La segunda telarana
   sobraba — dos anclas del mismo peso se anulan entre si. */
[data-holiday='halloween'] .mm-hol__c4 { display: none; }
/* la arana cuelga del borde superior de la pantalla con un hilo corto; el
   scroll lo va alargando */
[data-holiday='halloween'] .mm-hol__drop {
  display: block; right: 11%; left: auto;
  --mm-drop-img: var(--mm-img-h3-spider); --mm-drop-size: 40px; --mm-drop-len: 10px;
  --mm-drop-lap: 15px; --mm-drop-thread: #d4a24c;
  opacity: var(--mm-hol-i);
}
[data-holiday='halloween'] .mm-hol__drop::before { background: #d4a24c; opacity: .8; }
/* la arana en la misma tinta que la tela: una foto recortada al lado de un
   dibujo de linea canta, aunque sea de 40px */
[data-holiday='halloween'] .mm-hol__drop::after {
  background: var(--mm-acc);
  -webkit-mask: var(--mm-img-h3-spider) top center / contain no-repeat;
          mask: var(--mm-img-h3-spider) top center / contain no-repeat;
  filter: none;
}
/* pastilla = calabaza + etiqueta, en una sola pieza */
/* La pastilla se perdia entre los adornos y el fondo (feedback de la
   clienta): mas grande, fondo solido con filo naranja y tres efectos suaves
   con el mismo ciclo de 3,2 s — halo que late, calabaza que se balancea y un
   brillo que recorre la pastilla. Cinco ciclos y se calma; con el raton
   encima, tambien. */
[data-holiday='halloween'] .mm-hol__badge { left: 52px; right: auto; bottom: 40px; }
[data-holiday='halloween'] .mm-hol__badge-txt {
  /* fondo bajo y sin padding a la izquierda: la calabaza desborda por arriba,
     por abajo y por el lado, y se come ese extremo de la pastilla */
  position: relative;
  gap: 0; padding: 13px 26px 13px 0;
  font-size: 14px; letter-spacing: .14em;
  color: #fbe3ad;
  border: 1.5px solid #ff7a1a;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 196, 120, .38) 50%, transparent 62%) -160% 0 / 60% 100% no-repeat,
    #120c08;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 122, 26, .28);
  animation: mm-hol-shine 3.2s ease-in-out 2.4s 5;
}
[data-holiday='halloween'] .mm-hol__badge-txt::before {
  width: 124px; height: 124px; border-radius: 0;
  /* los margenes negativos cancelan el alto de la calabaza para que no infle
     la pastilla: manda el texto, no el adorno */
  margin: -46px 0 -46px -44px;
  background: var(--mm-img-h2-pumpkin) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 121, 0, .6));
  transform-origin: 50% 85%;
  animation: mm-hol-sway 3.2s ease-in-out 2s 5;
}
/* «See deals»: en escritorio completa la etiqueta; en movil se queda solo
   «Halloween Sale» */
.mm-hol__badge-sub { display: none; }
[data-holiday='halloween'] .mm-hol__badge-sub {
  display: inline; margin-left: .7em; padding-left: .7em;
  border-left: 1px solid rgba(255, 122, 26, .55); color: #ff9a4d;
}
/* halo: un anillo naranja que sale de la pastilla y se desvanece. Cuelga de
   la propia pastilla (no del boton, cuya caja no coincide con ella: el halo
   nacia desplazado hacia abajo) y cubre tambien su filo de 1,5px */
[data-holiday='halloween'] .mm-hol__badge-txt::after {
  content: ''; position: absolute; z-index: -1;
  inset: -1.5px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 122, 26, .55);
  animation: mm-hol-halo 3.2s ease-out 2s 5;
}
[data-holiday='halloween'] .mm-hol__badge:hover .mm-hol__badge-txt::after,
[data-holiday='halloween'] .mm-hol__badge:hover .mm-hol__badge-txt,
[data-holiday='halloween'] .mm-hol__badge:hover .mm-hol__badge-txt::before { animation: none; }
[data-holiday='halloween'] .mm-hol__badge:hover .mm-hol__badge-txt { background-color: #1b120b; border-color: #ff9a4d; }

@keyframes mm-hol-halo {
  0%   { box-shadow: 0 0 0 0 rgba(255, 122, 26, .55); }
  55%  { box-shadow: 0 0 0 16px rgba(255, 122, 26, 0); }
  100% { box-shadow: 0 0 0 16px rgba(255, 122, 26, 0); }
}
@keyframes mm-hol-sway {
  0%, 60%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-9deg); }
  30% { transform: rotate(7deg); }
  45% { transform: rotate(-3deg); }
}
@keyframes mm-hol-shine {
  0%, 35% { background-position: -160% 0, 0 0; }
  75%, 100% { background-position: 260% 0, 0 0; }
}

[data-holiday='halloween'] .mm-holmodal__cta { box-shadow: none; }
[data-holiday='halloween'] .mm-holmodal__seal { --mm-acc: #e2c07a; }

/* ==========================================================================
   NAVIDAD — Salon en Navidad (concepto unico)
   Sustituye a las cuatro variantes anteriores, retiradas el 2026-09-06.
   La pieza central es una GUIRNALDA que cuelga de dos puntos: al colgar no
   necesita repisa donde apoyarse, que es lo que hundio el intento de poner
   nieve sobre el borde del modal. Es ademas la misma gramatica que la arana
   de Halloween — algo que pende y sostiene la oferta.
   ========================================================================== */

[data-holiday='navidad'] {
  --mm-acc: #d9b45c; --mm-m-bg: #102a20; --mm-cta-bg: #d9b45c; --mm-cta-fg: #1a1408;
}
[data-holiday='navidad'] .mm-hol__glow {
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(217, 180, 92, .10), transparent 70%),
    radial-gradient(600px 300px at 88% 6%, rgba(139, 26, 34, .12), transparent 70%);
  opacity: var(--mm-hol-i);
}

/* --------------------------------------------------------------------------
   Guirnalda. Sin una sola imagen: el cable es un arco de CSS puro
   (border-bottom + border-radius eliptico) y cada bombilla se coloca sobre la
   parabola con calc(). 4t(1-t) vale 1 en el centro y 0 en los extremos, asi
   que basta con que Liquid escriba --t en cada bombilla.
   -------------------------------------------------------------------------- */
.mm-hol__gar { display: none; position: absolute; pointer-events: none; }
.mm-hol__gar-cable {
  position: absolute; inset: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--mm-acc) 50%, transparent);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.mm-hol__gar i {
  position: absolute;
  width: 11px; height: 15px; margin-left: -5.5px;
  border-radius: 48% 48% 54% 54% / 38% 38% 62% 62%;
  left: calc(var(--t) * 100%);
  top: calc(var(--mm-gar-s) * (4 * var(--t) * (1 - var(--t))));
  /* el nucleo se queda calido en las tres: un filamento encendido tira a
     blanco sea del color que sea el cristal */
  background: radial-gradient(circle at 38% 30%, #fff3d0, var(--luz) 55%, #8a5a12);
  box-shadow: 0 0 9px 2px var(--halo), 0 0 22px 6px var(--halo2);
  animation: mm-hol-parpadeo 3.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.29s);
}
.mm-hol__gar i::before {
  content: ''; position: absolute; left: 50%; top: -5px;
  width: 6px; height: 6px; margin-left: -3px;
  border-radius: 2px 2px 0 0; background: #6b5320;
}
/* ambar, rojo y verde. Tonos profundos a proposito: el rojo primario junto al
   verde bandera se va a hortera en un segundo */
.mm-hol__gar i { --luz: #ffb347; --halo: rgba(255, 179, 71, .5); --halo2: rgba(255, 150, 50, .2); }
.mm-hol__gar i:nth-child(3n+3) { --luz: #d8443c; --halo: rgba(216, 68, 60, .55); --halo2: rgba(200, 50, 45, .26); }
.mm-hol__gar i:nth-child(3n+4) { --luz: #63b268; --halo: rgba(99, 178, 104, .5); --halo2: rgba(80, 160, 90, .22); }

@keyframes mm-hol-parpadeo {
  from { opacity: .62; filter: brightness(.85); }
  to { opacity: 1; filter: brightness(1.15); }
}

/* --------------------------------------------------------------------------
   La pagina: el mismo esquema que Halloween, pieza por pieza.
   telarana -> guirnalda   ·   arana -> Santa   ·   murcielagos -> renos
   calabaza -> regalo      ·   brasas -> nieve
   -------------------------------------------------------------------------- */

/* guirnalda en la esquina superior IZQUIERDA. La imagen ya cae de arriba a la
   izquierda hacia abajo a la derecha, asi que no hay que espejarla. */
[data-holiday='navidad'] .mm-hol__c1 {
  --w: calc(min(158px, 12vw) * var(--mm-hol-scale, 1));
  display: block; width: var(--w); height: var(--w);
  /* Muerde la esquina. El asset llega a sus bordes superior e izquierdo con un
     canto recto, pero ahi ese canto coincide con el borde de la ventana y se
     lee como que la guirnalda sigue fuera de plano — que es justo lo que se
     quiere. Colgarla del header la dejaba flotando a media altura, y ahi si
     cantaba. El header de esta web es transparente, asi que no la tapa. */
  top: 0; left: 0;
  background: var(--mm-img-guirnalda) top left / contain no-repeat;
  /* se disuelve hacia dentro en vez de cortarse contra el contenido: asi puede
     ser generosa en la esquina sin pisar el titular de la pagina */
  -webkit-mask-image: linear-gradient(152deg, #000 46%, transparent 88%);
          mask-image: linear-gradient(152deg, #000 46%, transparent 88%);
  /* y se mueve menos con el scroll que el resto: si sube 90px se vuelve a
     meter entera debajo del header */
  --mm-par-f: -0.3;
  /* el logo de la web cae justo sobre la guirnalda: oscurecerla deja que el
     logotipo blanco se lea por encima, y sobre el hero oscuro la guirnalda
     sigue viendose. Bajarle la opacidad en vez de oscurecerla la ensuciaba. */
  filter: brightness(.62) saturate(1.1) drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
  opacity: calc(var(--mm-hol-i) * .92);
}

/* Santa baja por la cuerda igual que la arana: hilo corto que el scroll alarga.
   Se tine con --mm-acc, asi la cuerda que trae la propia silueta se funde con
   el hilo de CSS en vez de cantar en blanco. */
[data-holiday='navidad'] .mm-hol__drop {
  display: block; right: 13%; left: auto;
  --mm-drop-img: var(--mm-img-santa);
  /* Dos arreglos sobre el asset, no sobre el CSS:
     1. traia su propia cuerda dibujada (el 30% superior) y donde moria el hilo
        empezaba esa cuerda, mas ancha: se veia el escalon. Fuera.
     2. el puno no estaba centrado en la imagen — caia a 97px de una caja de
        300 — asi que el hilo, que va centrado, pasaba 9px al lado y dejaba
        hueco. El asset se recentro sobre el puno con relleno transparente,
        de modo que el translateX(-50%) generico ya acierta. */
  --mm-drop-size: 78px; --mm-drop-h: 123px;
  /* --mm-drop-len0 es el largo de cuerda en reposo, que el JS lee y va
     alargando con el scroll. La arana de Halloween mide 40px y puede colgar
     sobre el header sin molestar; Santa mide 123 y se comia el menu, asi que
     arranca ya por debajo. */
  --mm-drop-len0: 104px; --mm-drop-len: 104px; --mm-drop-lap: 10px;
  --mm-drop-thread: var(--mm-acc);
  opacity: var(--mm-hol-i);
}
[data-holiday='navidad'] .mm-hol__drop::before { width: 2px; background: var(--mm-acc); opacity: .8; }
[data-holiday='navidad'] .mm-hol__drop::after {
  background: var(--mm-acc);
  -webkit-mask: var(--mm-img-santa) top center / contain no-repeat;
          mask: var(--mm-img-santa) top center / contain no-repeat;
  filter: none;
}

/* renos: una silueta, no un sprite — no hay nada que aletear */
[data-holiday='navidad'] .mm-hol__bat {
  --mm-bat-img: var(--mm-img-reno);
  --mm-bat-sprite: 100% 100%;
  --mm-bat-ratio: .645;
  background: color-mix(in srgb, var(--mm-acc) 82%, #241703);
}
[data-holiday='navidad'] .mm-hol__bat--cross.is-ltr,
[data-holiday='navidad'] .mm-hol__bat--cross.is-rtl,
[data-holiday='navidad'] .mm-hol__bat--corner { animation-name: none, mm-hol-bat-ltr; }
[data-holiday='navidad'] .mm-hol__bat--cross.is-rtl { animation-name: none, mm-hol-bat-rtl; }
[data-holiday='navidad'] .mm-hol__bat--corner {
  animation-name: none, mm-hol-bat-corner;
  --mm-bat-w: calc(46px - var(--mm-bat-i, 1) * 5px);
}

/* la pastilla, con el regalo donde Halloween pone la calabaza */
[data-holiday='navidad'] .mm-hol__badge { left: 46px; right: auto; bottom: 36px; }
[data-holiday='navidad'] .mm-hol__badge-txt {
  gap: 0; padding: 7px 20px 7px 6px;
  background: rgba(11, 26, 20, .88); color: #f0d795;
  border-color: rgba(217, 180, 92, .5);
}
[data-holiday='navidad'] .mm-hol__badge-txt::before {
  /* mas pequeno y con menos solape que la calabaza: el regalo es cuadrado y
     ancho, y a 92px se comia la palabra */
  width: 80px; height: 80px; border-radius: 0;
  margin: -28px 0 -28px -24px;
  background: var(--mm-img-regalo) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)) drop-shadow(0 0 16px rgba(217, 180, 92, .35));
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
/* Anclada DENTRO del panel, a sus esquinas. Antes sobresalia 26px por cada
   lado; recortarla con overflow:hidden habria cortado el cable a plomo en el
   borde — el mismo error que hundio la nieve. Si cabe dentro, no hay que
   recortar nada. */
[data-holiday='navidad'] .mm-holmodal__gar {
  display: block; position: absolute; z-index: 12;
  left: 10px; right: 10px; top: 8px;
  height: 36px; --mm-gar-s: 36px;
}
/* El sello deja de ser lacre y pasa a ser etiqueta de regalo colgando del
   cable al 79%: ahi la parabola esta a ~27px, de modo que la cinta nace del
   cable y la etiqueta cae al costado del producto. Colgada del centro partia
   el titular por la mitad. */
[data-holiday='navidad'] .mm-holmodal__seal {
  top: 153px; left: 79%; right: auto; bottom: auto;
  width: 100px; height: 70px; border-radius: 8px;
  transform: translateX(-50%) rotate(-6deg);
  background: linear-gradient(155deg, #fbf1dc, #e6d3a8);
  color: #1a1408; font-size: 26px;
  box-shadow: 0 16px 28px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
[data-holiday='navidad'] .mm-holmodal__seal::before {
  /* cinta roja hasta el cable, y el agujero por donde pasa */
  content: ''; position: absolute; inset: auto; left: 50%; top: -141px;
  width: 3px; height: 141px; margin-left: -1.5px;
  border: 0; border-radius: 2px;
  background: linear-gradient(to bottom, rgba(155, 32, 40, .45), #9b2028);
}
[data-holiday='navidad'] .mm-holmodal__seal::after {
  color: rgba(26, 20, 8, .6);
}
[data-holiday='navidad'] .mm-holmodal__frame { padding-top: 58px; }
[data-holiday='navidad'] .mm-holmodal__inner {
  background:
    radial-gradient(90% 70% at 82% 4%, rgba(139, 26, 34, .34), transparent 62%),
    radial-gradient(110% 80% at 50% 0%, #16342a, transparent 65%),
    var(--mm-m-bg);
}
/* Damasco de fondo. Va en un pseudo-elemento y no como capa de background
   porque las capas de background no tienen opacidad propia, y esto tiene que
   quedarse en un susurro: al 8% se lee como tejido, al 20% seria un mantel.
   Mascara + color del token, asi que si cambia --mm-acc cambia la textura. */
[data-holiday='navidad'] .mm-holmodal__inner::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; border-radius: inherit;
  background: var(--mm-acc);
  -webkit-mask: var(--mm-img-damasco) center / 158px auto repeat;
          mask: var(--mm-img-damasco) center / 158px auto repeat;
  opacity: .055;
}
/* el marco tiene que quedar por encima del damasco */
[data-holiday='navidad'] .mm-holmodal__frame { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   La caja de regalo
   El modal entra cerrado: dos hojas verdes con la cinta en cruz y el lazo en el
   centro. A los 0,25s el lazo se afloja, las hojas se abren como puertas
   (rotateY sobre sus bordes exteriores) y el contenido aparece detras.

   Todo va colgado de .is-open, la clase que el JS ya pone al abrir, asi que no
   hace falta ni una linea de JS nueva. Y como los @keyframes llevan `both`, al
   cerrar y reabrir el modal la secuencia se repite entera.
   -------------------------------------------------------------------------- */
.mm-holmodal__caja { display: none; }

[data-holiday='navidad'] .mm-holmodal__caja {
  display: block;
  position: absolute; inset: 0; z-index: 15;
  pointer-events: none;
  perspective: 1750px;
}

/* cada hoja lleva su mitad del panel, con el mismo damasco que el fondo */
[data-holiday='navidad'] .mm-holmodal__caja-h {
  position: absolute; top: 0; bottom: 0; width: 50.2%;
  background:
    linear-gradient(160deg, #1b4433, #0f2a1f 60%, #0b2018),
    var(--mm-m-bg);
  box-shadow: inset 0 0 0 1px rgba(217, 180, 92, .16);
  backface-visibility: hidden;
}
/* el damasco, tambien en la tapa */
[data-holiday='navidad'] .mm-holmodal__caja-h::before {
  content: ''; position: absolute; inset: 0;
  background: var(--mm-acc);
  -webkit-mask: var(--mm-img-damasco) center / 158px auto repeat;
          mask: var(--mm-img-damasco) center / 158px auto repeat;
  opacity: .07;
}
/* La cinta. Un raso no es una banda de color plano: tiene un brillo especular
   estrecho fuera del centro y los cantos en sombra. Ocho paradas de degradado
   dan eso; con dos, que es lo que habia antes, parecia cinta aislante. */
[data-holiday='navidad'] .mm-holmodal__caja-h::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 23px;
  /* Tres capas, de arriba abajo:
     1. los extremos en sombra — la cinta envuelve la caja y se va
     2. estrias del tejido a lo largo de la tira (el raso teje en el sentido
        de la cinta, por eso aqui son verticales)
     3. el raso. Mide 46px — el ancho de la cinta ENTERA — y cada hoja ensena
        su mitad; asi el brillo cruza la junta sin costura. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0, transparent 7%, transparent 93%, rgba(0, 0, 0, .55) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px),
    linear-gradient(90deg,
      #2a0104 0%, #45010a 8%, #6b0c14 22%, #99161f 36%,
      #c93a38 46%, #e85b56 50%, #c93a38 54%, #99161f 66%,
      #6b0c14 80%, #45010a 93%, #2a0104 100%);
  background-size: auto, auto, 46px 100%;
}
[data-holiday='navidad'] .mm-holmodal__caja-h--l { left: 0; transform-origin: left center; border-radius: 8px 0 0 8px; }
[data-holiday='navidad'] .mm-holmodal__caja-h--r { right: 0; transform-origin: right center; border-radius: 0 8px 8px 0; }
/* La luz del lazo entra por arriba a la izquierda, asi que el canto izquierdo
   lleva un filo claro, el derecho uno oscuro, y la sombra sobre el papel cae
   hacia la derecha. Con sombra simetrica la cinta se ve pegada, no posada. */
[data-holiday='navidad'] .mm-holmodal__caja-h--l::after {
  right: 0; background-position: center, center, left center;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16), -3px 0 9px rgba(0, 0, 0, .38);
}
[data-holiday='navidad'] .mm-holmodal__caja-h--r::after {
  left: 0; background-position: center, center, right center;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .55), 4px 0 12px rgba(0, 0, 0, .5);
}

/* cinta horizontal, una sola pieza por encima de las dos hojas */
[data-holiday='navidad'] .mm-holmodal__caja-cinta {
  position: absolute; left: 0; right: 0; top: 50%; height: 46px;
  margin-top: -23px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55) 0, transparent 5%, transparent 95%, rgba(0, 0, 0, .55) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg,
      #2a0104 0%, #45010a 8%, #6b0c14 22%, #99161f 36%,
      #c93a38 46%, #e85b56 50%, #c93a38 54%, #99161f 66%,
      #6b0c14 80%, #45010a 93%, #2a0104 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .55),
              0 5px 14px rgba(0, 0, 0, .5);
}

/* El lazo. Los dos lobulos de CSS parecian huevos; esto es raso de verdad,
   recortado con alfa. La caja cerrada pretende ser un objeto fisico, asi que
   aqui una foto SI pega — al reves que la nieve sobre un panel plano. */
[data-holiday='navidad'] .mm-holmodal__lazo {
  position: absolute; left: 50%; top: 50%;
  width: 232px; height: 195px;
  margin: -104px 0 0 -116px;
  background: var(--mm-img-lazo) center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
  transform-origin: 50% 34%;
}

/* ---- la secuencia ---- */
@keyframes mm-caja-izq {
  0%, 26% { transform: rotateY(0); opacity: 1; filter: brightness(1); }
  100% { transform: rotateY(-88deg); opacity: 0; filter: brightness(.4); }
}
@keyframes mm-caja-der {
  0%, 26% { transform: rotateY(0); opacity: 1; filter: brightness(1); }
  100% { transform: rotateY(88deg); opacity: 0; filter: brightness(.4); }
}
@keyframes mm-caja-cinta {
  0%, 20% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(.2); }
}
@keyframes mm-caja-lazo {
  0% { opacity: 1; transform: scale(1) rotate(0); }
  18% { opacity: 1; transform: scale(1.12) rotate(-3deg); }
  100% { opacity: 0; transform: scale(.5) rotate(10deg); }
}
@keyframes mm-caja-abre {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}
/* Para lo que YA lleva un transform propio. `mm-caja-abre` acaba en
   `transform: none` y con relleno `both` se lo comia para siempre: la etiqueta
   perdia su translateX(-50%) y su giro en cuanto terminaba la entrada. */
@keyframes mm-caja-abre-op {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-holiday='navidad'] .mm-holmodal.is-open .mm-holmodal__caja-h--l {
  animation: mm-caja-izq 1s cubic-bezier(.5, 0, .18, 1) .28s both;
}
[data-holiday='navidad'] .mm-holmodal.is-open .mm-holmodal__caja-h--r {
  animation: mm-caja-der 1s cubic-bezier(.5, 0, .18, 1) .28s both;
}
[data-holiday='navidad'] .mm-holmodal.is-open .mm-holmodal__caja-cinta {
  animation: mm-caja-cinta .5s ease-in .2s both;
}
[data-holiday='navidad'] .mm-holmodal.is-open .mm-holmodal__lazo {
  animation: mm-caja-lazo .55s cubic-bezier(.34, 1.4, .5, 1) .12s both;
}
/* el contenido y la guirnalda entran cuando las hojas ya se han abierto */
[data-holiday='navidad'] .mm-holmodal.is-open .mm-holmodal__frame {
  animation: mm-caja-abre .6s ease .62s both;
}
[data-holiday='navidad'] .mm-holmodal.is-open .mm-holmodal__gar,
[data-holiday='navidad'] .mm-holmodal.is-open .mm-holmodal__seal {
  animation: mm-caja-abre-op .6s ease .62s both;
}
/* El panel no hace su entrada habitual: la entrada ES la caja. Y sin quitarle
   la transicion de opacidad, el panel se estaba fundiendo medio segundo
   mientras la caja ya se abria — se veia la caja translucida y luego abriendose
   a la vez que aparecia. Ese era el otro tiron. */
[data-holiday='navidad'] .mm-holmodal__inner { transform: none; transition: none; }
[data-holiday='navidad'] .mm-holmodal.is-open .mm-holmodal__inner { opacity: 1; }

[data-holiday='navidad'] .mm-holmodal__title { color: #f4ead6; }
[data-holiday='navidad'] .mm-holmodal__text { color: #93a598; }

/* --------------------------------------------------------------------------
   3. Pantallas medianas y movil: menos es mas
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
  .mm-hol__drop, .mm-hol__prop { display: none !important; }
  .mm-hol__c1, .mm-hol__c2, .mm-hol__c3, .mm-hol__c4 { opacity: .35 !important; }
  /* un dibujo de linea al .35 desaparece; un PNG con relleno aguanta */
  [data-holiday='halloween'] .mm-hol__c1 { opacity: .5 !important; }
}
@media screen and (max-width: 749px) {
  [data-holiday] { --mm-hol-i: calc(var(--mm-hol-set, 1) * .7); }
  .mm-hol__c2, .mm-hol__c4, .mm-hol__mark { display: none !important; }
  .mm-hol__badge { right: 74px; bottom: 14px; }
  [data-holiday='halloween'] .mm-hol__badge { left: 40px; right: auto; bottom: 30px; }
  [data-holiday='navidad'] .mm-hol__badge { left: 32px; right: auto; bottom: 28px; }
  [data-holiday='navidad'] .mm-hol__badge-txt { padding: 6px 15px 6px 0; }
  [data-holiday='navidad'] .mm-hol__badge-txt::before { width: 70px; height: 70px; margin: -26px 0 -26px -24px; }
  [data-holiday='halloween'] .mm-hol__badge-txt { padding: 10px 18px 10px 0; font-size: 12px; letter-spacing: .12em; }
  [data-holiday='halloween'] .mm-hol__badge-txt::before { width: 92px; height: 92px; margin: -34px 0 -34px -32px; }
  [data-holiday='halloween'] .mm-hol__badge-sub { display: none; }
  .mm-hol__badge-txt { font-size: 10px; padding: 9px 12px 9px 11px; }
  .mm-hol__bat--corner { --mm-bat-w: calc(22px - var(--mm-bat-i, 1) * 2px); }
  [data-holiday] .header-wrapper::after { height: 0 !important; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   4. Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mm-hol, .mm-hol *, .mm-hol__badge, .mm-holmodal__inner { animation: none !important; transition: none !important; }
  .mm-hol__badge-txt, .mm-hol__badge-txt::before, .mm-hol__badge-txt::after { animation: none !important; }
  .mm-hol__bat { display: none !important; }
  .mm-hol__gar i { opacity: 1 !important; }
  /* la caja ES la animacion: sin movimiento no se enseña, o se quedaria
     cerrada para siempre tapando el contenido */
  .mm-holmodal__caja { display: none !important; }
  .mm-hol { --mm-par: 0px !important; }
  .mm-holmodal__inner { opacity: 1; transform: none; }
  .mm-hol__fx { display: none !important; }
}

/* --------------------------------------------------------------------------
   5. Popup de campaña (Halloween 2026)
   Sin scroll interno: tres ofertas en rejilla, tarjetas enteras clicables,
   y el boton grande lleva a la coleccion con las nueve.
   -------------------------------------------------------------------------- */
.mm-holmodal:has(.mm-holpick) { max-width: min(860px, 94vw); }
.mm-holmodal:has(.mm-holpick) .mm-holmodal__frame { padding: 44px 44px 30px; }
.mm-holmodal:has(.mm-holpick) .mm-holmodal__text { margin-top: 8px; }

.mm-holpick {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: 22px 0 0; text-align: left;
}
.mm-holpick__card {
  display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; color: inherit; text-decoration: none;
  background: rgba(255, 255, 255, .035);
  border: 1px solid color-mix(in srgb, var(--mm-acc, #d4a24c) 22%, transparent);
  transition: border-color .2s ease, transform .2s ease;
}
.mm-holpick__card:hover { border-color: color-mix(in srgb, var(--mm-acc, #d4a24c) 65%, transparent); transform: translateY(-2px); }
.mm-holpick__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1411; }
.mm-holpick__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-holpick__name {
  margin: 10px 12px 0; font-family: var(--font-heading-family);
  font-size: 14px; font-weight: 700; line-height: 1.15; color: #f4ead6;
}
.mm-holpick__gift {
  margin: 4px 12px 0; font-family: var(--font-body-family); font-size: 11.5px; font-weight: 500; line-height: 1.45;
  color: color-mix(in srgb, var(--mm-acc, #d4a24c) 70%, #fff);
}
.mm-holpick__gift::before { content: 'FREE \00a0'; letter-spacing: .08em; }
.mm-holpick__price {
  display: block; margin: auto 0 0; padding: 10px 12px 12px; font-family: var(--font-heading-family);
  font-size: 18px; font-weight: 700; line-height: 1; color: #fff;
}

/* el boton grande: a la coleccion con las nueve */
.mm-holmodal:has(.mm-holpick) .mm-holmodal__cta {
  display: flex; width: 100%; min-height: 54px; margin-top: 24px; font-size: 16px; letter-spacing: .01em;
}

@media screen and (max-width: 749px) {
  /* cabe entero (unos 530px): sin barra de scroll dentro del popup */
  .mm-holmodal:has(.mm-holpick) { overflow: visible; }
  .mm-holmodal:has(.mm-holpick) .mm-holmodal__frame { padding: 70px 16px 18px; }
  .mm-holmodal:has(.mm-holpick) .mm-holmodal__title { font-size: 28px; }
  .mm-holmodal:has(.mm-holpick) .mm-holmodal__text { font-size: 13px; line-height: 1.5; }
  .mm-holmodal:has(.mm-holpick) .mm-holmodal__seal { width: 76px; height: 76px; font-size: 20px; top: -10px; left: -6px; }
  .mm-holpick { margin-top: 16px; gap: 8px; }
  .mm-holpick__name { margin: 8px 8px 0; font-size: 11.5px; }
  .mm-holpick__gift { display: none; }
  .mm-holpick__price { padding: 6px 8px 8px; font-size: 14px; }
  .mm-holmodal:has(.mm-holpick) .mm-holmodal__cta { min-height: 50px; margin-top: 18px; font-size: 15px; }
  .mm-holmodal:has(.mm-holpick) .mm-holmodal__dismiss { margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   6. Seccion «Halloween Sale» bajo el hero (carrusel infinito)
   Patron 4.2 del playbook: clones + transform, n visibles por variable.
   Solo existe con la temporada encendida: sin [data-holiday] no se pinta.
   -------------------------------------------------------------------------- */
.mm-hwsale { display: none; }
[data-holiday] .mm-hwsale { display: block; }
.mm-hwsale {
  position: relative; overflow: hidden;
  padding: 72px 0 64px;
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(255, 121, 0, .16), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(255, 121, 0, .08), transparent 70%),
    #121010;
  color: #f5f5f5;
  --mm-hw-n: 4; --mm-hw-gap: 20px;
}
.mm-hwsale::before {
  content: ''; position: absolute; top: 0; right: 0; width: 220px; height: 220px; pointer-events: none;
  background: linear-gradient(135deg, #d4a24c, #ff7900);
  -webkit-mask: var(--mm-img-web) top left / contain no-repeat;
          mask: var(--mm-img-web) top left / contain no-repeat;
  transform: scaleX(-1); opacity: .28;
}
.mm-hwsale__wrap { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.mm-hwsale__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.mm-hwsale__eyebrow {
  display: block; margin-bottom: 14px; font-family: var(--font-body-family);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ff7a1a;
}
.mm-hwsale__title {
  margin: 0; font-family: var(--font-heading-family);
  font-size: clamp(30px, 5vw, 54px); font-weight: 700; line-height: .96; letter-spacing: -.035em; color: #fff;
}
.mm-hwsale__title em { display: block; font-style: normal; font-size: .5em; font-weight: 600; letter-spacing: -.01em; color: #ff7a1a; margin-top: 8px; }
.mm-hwsale__all {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 11px 24px; border-radius: 999px; border: 1px solid #ff7a1a; color: #ff7a1a;
  font-family: var(--font-body-family); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.mm-hwsale__all:hover { background: #ff7a1a; color: #111; }
.mm-hwsale__all::after { content: '\2192'; }

.mm-hwsale__viewport { position: relative; overflow: hidden; }
.mm-hwsale__track { display: flex; gap: var(--mm-hw-gap); margin: 0; padding: 0; list-style: none; will-change: transform; }
.mm-hwsale__track.is-animating { transition: transform .6s cubic-bezier(.23, 1, .32, 1); }
.mm-hwsale__item { flex: 0 0 calc((100% - var(--mm-hw-gap) * (var(--mm-hw-n) - 1)) / var(--mm-hw-n)); min-width: 0; }

.mm-hwsale__card {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 10px; overflow: hidden; background: #1a1614;
  border: 1px solid rgba(255, 122, 26, .18);
  transition: border-color .2s ease, transform .2s ease;
}
.mm-hwsale__card:hover { border-color: rgba(255, 122, 26, .6); transform: translateY(-3px); }
.mm-hwsale__img { display: block; aspect-ratio: 4 / 5; background: #221b17; }
.mm-hwsale__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-hwsale__body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.mm-hwsale__name { margin: 0; font-family: var(--font-heading-family); font-size: 16px; font-weight: 700; line-height: 1.25; color: #fff; }
.mm-hwsale__name a { color: inherit; text-decoration: none; }
.mm-hwsale__inc { margin: 6px 0 0; font-family: var(--font-body-family); font-size: 12.5px; line-height: 1.45; color: #a1a1a1; }
.mm-hwsale__gift { margin: 8px 0 0; font-family: var(--font-body-family); font-size: 12.5px; font-weight: 600; line-height: 1.4; color: #ff9a4d; }
.mm-hwsale__gift::before { content: 'FREE \00a0'; letter-spacing: .06em; }
.mm-hwsale__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.mm-hwsale__price { font-family: var(--font-heading-family); font-size: 22px; font-weight: 700; color: #fff; }
.mm-hwsale__btn {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
  background: #ff7a1a; color: #111; font-family: var(--font-body-family); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: filter .2s ease;
}
.mm-hwsale__btn:hover { filter: brightness(1.08); }

.mm-hwsale__ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.mm-hwsale__arrow {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 122, 26, .5); background: transparent; color: #fff; cursor: pointer;
  transition: background-color .2s ease;
}
.mm-hwsale__arrow:hover { background: rgba(255, 122, 26, .18); }
.mm-hwsale__arrow svg { width: 16px; height: 16px; }
.mm-hwsale__dots { display: flex; gap: 8px; }
.mm-hwsale__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .25); transition: width .3s ease, background-color .3s ease;
}
.mm-hwsale__dot[aria-current='true'] { width: 26px; background: #ff7a1a; }
.mm-hwsale :focus-visible { outline: 2px solid #ff7a1a; outline-offset: 3px; }

@media screen and (max-width: 1099px) { .mm-hwsale { --mm-hw-n: 3; } }
@media screen and (max-width: 749px) {
  .mm-hwsale { --mm-hw-n: 1.6; --mm-hw-gap: 12px; padding: 48px 0 44px; }
  .mm-hwsale::before { width: 130px; height: 130px; }
  .mm-hwsale__wrap { padding: 0 16px; }
  .mm-hwsale__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
  .mm-hwsale__body { padding: 12px 12px 14px; }
  .mm-hwsale__name { font-size: 14px; }
  .mm-hwsale__inc { display: none; }
  .mm-hwsale__gift { font-size: 11.5px; }
  .mm-hwsale__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mm-hwsale__price { font-size: 18px; }
  .mm-hwsale__btn { padding: 7px 14px; font-size: 12px; }
  .mm-hwsale__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-hwsale__track.is-animating { transition: none; }
}