/* ═══════════════════════════════════════════════════════════════════
   TEMA HALLOWEEN — TEMPORAL
   ═══════════════════════════════════════════════════════════════════

   COMO SE QUITA (deja el sitio exactamente como estaba):

     1. En web/index.html, borrar las DOS lineas marcadas
        "TEMA HALLOWEEN (TEMPORAL)".
     2. Borrar este archivo.
     3. Borrar web/assets/marca/hw-hero.webp

     No hay nada mas. Ningun componente, ningun JS y ninguna otra hoja
     fueron tocados, asi que no hay nada que "devolver a su sitio".

   POR QUE ESTA TODO EN UN SOLO ARCHIVO

   El sitio se gobierna por tokens: hay 2.477 usos de var(--mm-*) contra
   apenas 188 colores escritos a mano, y ninguno de esos 188 esta en las
   hojas mm-* (las que mandan). Eso permite cambiar el aspecto entero
   redefiniendo variables, sin tocar una sola regla de las existentes.

   Lo que NO se toca, a proposito: tipografias de cuerpo, escalas de
   tamaño, espaciados, radios, z-index, duraciones y curvas. Son los
   tokens que definen la MAQUETA, no el color. Tocarlos moveria cosas de
   sitio, y el encargo es que nada se mueva.

   La paleta sale de la referencia "Noche Roja", que conserva los rojos
   de la marca identicos (#A81E22 y #EE2E33) y les pone una noche
   detras. No es otra marca: es la misma, de noche.
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   1. LA NOCHE — se redefinen SOLO los tokens de color
   ─────────────────────────────────────────────────────────────────── */
:root {
  /* Le dice al navegador que pinte de oscuro lo suyo: barras de scroll,
     autocompletado, controles nativos. Sin esto quedan islas blancas
     que ninguna regla nuestra alcanza. */
  color-scheme: dark;

  /* Los rojos de la marca NO cambian. Son los mismos que ya tenias. */
  --mm-red:            #A81E22;
  --mm-red-hover:      #8E1A1D;
  --mm-red-active:     #781417;
  --mm-red-accent:     #EE2E33;
  --mm-red-accent-hv:  #D42026;

  /* El tinte rojo si: #FBE9EA era un rosa palido pensado para vivir
     sobre blanco. Sobre la noche seria un manchon. */
  --mm-red-tint:       rgba(238, 46, 51, 0.14);
  --mm-red-border:     rgba(238, 46, 51, 0.38);

  /* Superficies: de claro a noche.

     Se subio todo un escalon respecto de la referencia. Aquella es una
     landing de una sola pantalla, donde un negro casi puro luce; un
     catalogo con cientos de fichas a esa profundidad cansa la vista y
     las tarjetas dejan de despegarse del fondo. Estos tonos siguen
     siendo noche, pero con algo de rojo dentro para que no sea un
     agujero. */
   --mm-page:           #261719;
   --mm-surface:        #302023;
   --mm-surface-2:      #39272A;
   --mm-band:           #2B191B;
   --mm-band-deep:      #211315;
   --mm-panel-dark:     #211315;
   --mm-form-grey:      #39272A;

  /* Texto: se invierte. Hueso sobre noche, con neutros de sesgo calido
     — un gris frio sobre rojo oscuro se ve sucio. */
  --mm-ink:            #FFF2F2;
  --mm-text:           #C9A8AA;
  --mm-text-soft:      #A08486;
  --mm-text-faint:     #8E7274;

  /* Lineas: sobre oscuro no se dibujan con gris, se dibujan con luz. */
  --mm-line:           rgba(255, 242, 242, 0.14);
  --mm-line-soft:      rgba(255, 242, 242, 0.08);

  /* El durazno NO es un acento: es el fondo de un panel entero del home
     (mm-home.css:286) con una reticula fina encima. Puesto en calabaza
     viva quedaba una pared naranja de 626px. Va en noche calida, y la
     reticula pasa a ser un resplandor de calabaza en vez de una linea
     solida. El naranja vivo vive aparte, en --hw-calabaza, y solo toca
     texto y detalles. */
  --mm-peach:          #2E1810;
  --mm-peach-deep:     rgba(255, 122, 24, 0.16);

  --mm-overlay:        rgba(18, 9, 10, 0.76);

  /* Estados: el COLOR se respeta —verde es correcto, rojo es error en
     cualquier tema— pero sus fondos claros se vuelven veladuras. Un
     #ECFDF5 sobre la noche es un cartel blanco. */
  --mm-ok-bg:          rgba(34, 197, 94, 0.14);
  --mm-ok-border:      rgba(34, 197, 94, 0.38);
  --mm-ok-text:        #4ADE80;
  --mm-warn-bg:        rgba(255, 122, 24, 0.14);
  --mm-warn-border:    rgba(255, 122, 24, 0.40);
  --mm-warn-text:      #FFA352;
  --mm-danger-bg:      rgba(239, 68, 68, 0.14);
  --mm-danger-text:    #FF8A8A;

   --mm-disabled-bg:    #443033;
   --mm-disabled-text:  #92787A;

  /* Sombras: sobre claro una sombra es gris; sobre la noche tiene que
     ser negra de verdad o no se ve nada. */
  --mm-sh-card:        0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.40);
  --mm-sh-hover:       0 10px 28px rgba(0, 0, 0, 0.62), 0 2px 8px rgba(0, 0, 0, 0.45);
  --mm-sh-pop:         0 14px 38px rgba(0, 0, 0, 0.68);
  --mm-sh-arrow:       0 2px 12px rgba(0, 0, 0, 0.60);
  --mm-sh-modal:       0 28px 72px rgba(0, 0, 0, 0.78);
  --mm-sh-header:      0 1px 0 rgba(255, 242, 242, 0.10);

  /* Tipografias del tema. --mm-font-display no lo usa ninguna regla del
     sitio (se comprobo: 0 usos), asi que se declara aca y se aplica
     abajo, a mano, solo donde es seguro. */
  /* Oswald y no Anton.
     Anton tiene UN solo peso (400) y el sitio les pide 700 y hasta 900
     a sus titulos. Cuando la fuente no trae ese peso, el navegador lo
     inventa engordando los trazos, y en una condensada eso emborrona
     las letras hasta volverlas ilegibles: era el "no se entiende".
     Oswald es igual de condensada y con caracter, pero trae pesos de
     verdad del 200 al 700, asi que cada titulo pide el suyo y sale
     limpio. */
  --hw-display:        'Oswald', 'Poppins', Impact, sans-serif;
  --hw-calabaza:       #FF7A18;
   --hw-whatsapp:       #25D366;
}


/* ───────────────────────────────────────────────────────────────────
   2. FUGAS CONOCIDAS
   ───────────────────────────────────────────────────────────────────
   Trece fondos claros escritos a mano viven en las cuatro hojas
   antiguas (ecommerce, futuristic, cards, design-system). Cargan ANTES
   que los tokens, asi que donde la capa mm-* pisa la propiedad ya no
   se ven; estos son los que quedan sueltos y se verian como bloques
   blancos flotando en la noche.

   Se listan uno por uno, con su archivo, para que quitar el tema no
   deje dudas de que aca no se corrigio nada permanente: son parches de
   este tema, no arreglos del sitio. */

/* futuristic.css pinta el body con dos degradados y un #fafafa quemado
   al final. La capa mm-* lo tapa por orden de carga, pero es un empate
   de especificidad que se resuelve por quien va ultimo: demasiado
   fragil para el fondo de la pagina entera. Aca se fija y se acabo. */
body {
  background:
    radial-gradient(circle at 0% 0%, rgba(168, 30, 34, 0.10) 0%, transparent 42%),
    radial-gradient(circle at 100% 40%, rgba(255, 122, 24, 0.06) 0%, transparent 38%),
    var(--mm-page);
  background-attachment: fixed;
}

/* ecommerce.css */
#destacadosHome,
.why-choose,
.categories-section,
.category-card,
.feature-icon,
.cat-icon,
.hero-carousel-root,
.buscador-hist-flecha {
  background: var(--mm-surface);
}

/* Las tarjetas de categoria y los iconos necesitan ademas su borde:
   sobre claro se separaban por sombra, y una sombra negra sobre negro
   no separa nada. */
.category-card,
.feature-icon,
.cat-icon {
  border: 1px solid var(--mm-line-soft);
}

/* cards.css — el esqueleto de carga. Un rectangulo blanco parpadeando
   sobre la noche es mas llamativo que el contenido que espera. */
.skeleton-card {
  background: var(--mm-surface-2);
}


/* ───────────────────────────────────────────────────────────────────
   2b. TAILWIND
   ───────────────────────────────────────────────────────────────────
   El sitio carga Tailwind por CDN y hay ~200 utilidades de color
   escritas directo en el HTML de los componentes y en app.js. Esas NO
   pasan por los tokens: son colores puestos a mano en el marcado, asi
   que redefinir variables no las alcanza. Sin esto quedan paneles
   blancos y texto oscuro sobre oscuro — el carrito vacio, las fichas
   de cuenta, los bordes de media pagina.

   Van con !important, y es la unica parte del tema que lo usa. No es
   pereza: Tailwind CDN genera sus reglas en un <style> que inyecta al
   vuelo, y ese bloque queda DESPUES de esta hoja en el documento. Por
   orden de cascada gana el, aunque empatemos en especificidad. La
   alternativa seria editar los componentes uno por uno, que es
   justamente lo que este tema no hace.

   Solo se tocan los NEUTROS claros. Los oscuros (slate-800/900/950,
   black) ya sirven tal cual, y los de color —rojos, verdes— son
   semanticos y se respetan. */

.bg-white         { background-color: var(--mm-surface)   !important; }
.bg-slate-50      { background-color: var(--mm-surface-2) !important; }
.bg-slate-100     { background-color: var(--mm-surface-2) !important; }
.bg-slate-200     { background-color: #372022            !important; }

.text-slate-900,
.text-slate-800   { color: var(--mm-ink)       !important; }
.text-slate-700,
.text-slate-600   { color: var(--mm-text)      !important; }
.text-slate-500   { color: var(--mm-text-soft) !important; }
.text-slate-400,
.text-slate-300   { color: var(--mm-text-faint) !important; }

.border-slate-200 { border-color: var(--mm-line)      !important; }
.border-slate-100 { border-color: var(--mm-line-soft) !important; }
.divide-slate-100 > * + * { border-color: var(--mm-line-soft) !important; }

/* Los degradados de futuristic.css pintan TEXTO, no fondos: van de
   blanco a rosa y se recortan sobre las letras. Sobre la noche siguen
   funcionando, asi que se dejan como estan. */


/* ───────────────────────────────────────────────────────────────────
   3. LA CARA DE HALLOWEEN
   ───────────────────────────────────────────────────────────────────
   Hasta aca el sitio solo estaba oscuro. Esto es lo que lo vuelve
   Halloween, y se aplica con cuentagotas: Anton es condensada, asi que
   los titulos quedan MAS angostos que con Poppins — estrecha, nunca
   desborda. Creepster no se usa en nada que haya que leer. */

/* Se nombran las clases de titulo del sitio, y NO "h1, h2" en general.
   Un h1 generico se lleva por delante los encabezados de las vistas
   internas —el panel del vendedor, por ejemplo— que son otra interfaz
   con sus propias reglas de Tailwind y piden pesos 800 y 900 que
   Oswald no tiene. Lo ancho parecia mas comodo y salia mas caro. */
.mmc-hero-title,
.mmc-section-title,
.mmc-view-title,
.mmc-suc-title,
.mmc-card-title,
.mmc-auth-title,
.mm-title,
.mm-valor-title,
.mm-zona-title,
.mm-footer-title {
  font-family: var(--hw-display);
  letter-spacing: 0.01em;    /* Compensa lo apretado de la condensada. */
}

/* Oswald llega hasta 700. Este titulo pide 800, y pedirle a una fuente
   un peso que no trae es justo lo que emborronaba antes. */
.mm-zona-title {
  font-weight: 700;
}

/* El eyebrow es el rotulo chiquito de arriba de cada seccion. Es el
   lugar perfecto para la calabaza: cambia el clima de la pagina sin
   tocar nada que importe leer bien. */
.mmc-eyebrow,
.promo-card-eyebrow,
.mmc-auth-eyebrow {
  color: var(--hw-calabaza);
}

/* Un resplandor tenue detras del titulo del hero, como una luna baja.
   Sin sombras duras: tiene que sugerir, no gritar. */
.mmc-hero-title {
  text-shadow: 0 0 28px rgba(255, 122, 24, 0.22);
}


/* ── El boton de la seccion de contacto ────────────────────────────
   Esa seccion es roja de marca, no noche: es de las pocas que
   conserva su fondo. El boton salia oscuro con letra roja sobre rojo
   —se perdia entero— porque su fondo sale de --mm-surface, que ahora
   es noche. Ahi adentro "lo que resalta" no es lo oscuro sino lo
   claro, asi que se invierte solo para este caso. */
.mmc-contacto-cta {
  background: var(--mm-ink);
  color: var(--mm-red);
  border-color: var(--mm-ink);
}

.mmc-contacto-cta:hover {
   background: var(--hw-whatsapp);
   border-color: var(--hw-whatsapp);
   color: #173222;
}


/* El componente delega los clics al CTA real; este cursor comunica que
    también responde el espacio libre de la tarjeta. */
.mm-valor-card { cursor: pointer; }

/* Que se note que la tarjeta entera responde. */
.mm-valor-card {
  transition: border-color var(--mm-dur-base) var(--mm-ease),
              transform var(--mm-dur-base) var(--mm-ease);
}

.mm-valor-card:hover {
  border-color: rgba(255, 122, 24, 0.45);
  transform: translateY(-2px);
}


/* ── Telaranas ─────────────────────────────────────────────────────
   Una en la esquina del logo y otra en cada esquina del banner. Van
   como SVG dentro del propio CSS —no son archivos— asi que quitar
   este archivo se las lleva sin dejar imagenes sueltas por ahi.

   Todas con pointer-events:none: decoran, nunca se interponen entre
   el dedo y lo que hay debajo. */
.mm-logo {
  position: relative;
}

.mm-logo::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -26px;
  width: 54px;
  height: 54px;
  pointer-events: none;
  opacity: 0.55;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23FFF2F2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M100 0 L100 100 M100 0 L0 0 M100 0 L20 80'/%3E%3Cpath d='M100 22 Q74 26 78 0'/%3E%3Cpath d='M100 42 Q58 48 62 0'/%3E%3Cpath d='M100 62 Q42 70 46 0'/%3E%3Cpath d='M100 82 Q26 90 30 0'/%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 1024px) {
   .mm-hd-logo { transform: translateX(-10px); }
}

/* El banner sigue siendo la foto de la promo —es un diseno, no CSS—
   pero se le baja la luz para que no sea el unico bloque claro de la
   pagina, y se le cuelgan telaranas de las dos esquinas de arriba. */
.hero-carousel-root {
  position: relative;
}

.hero-carousel-root::before,
.hero-carousel-root::after {
  content: "";
  position: absolute;
  top: 0;
  width: 132px;
  height: 132px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.4;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23FFF2F2' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 0 L0 100 M0 0 L100 0 M0 0 L80 80'/%3E%3Cpath d='M0 20 Q24 24 20 0'/%3E%3Cpath d='M0 40 Q44 46 40 0'/%3E%3Cpath d='M0 60 Q62 68 58 0'/%3E%3Cpath d='M0 80 Q78 88 74 0'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-carousel-root::before { display: none; }

@keyframes hw-web-left-sway {
   0%, 100% { transform: rotate(0deg); }
   50% { transform: rotate(1.5deg); }
}

@keyframes hw-web-right-sway {
   0%, 100% { transform: scaleX(-1) rotate(0deg); }
   50% { transform: scaleX(-1) rotate(-1.5deg); }
}

.hero-carousel-root::before {
   transform-origin: top left;
   animation: hw-web-left-sway 6s ease-in-out infinite;
}

.hero-carousel-root::after {
  right: 0;
   transform-origin: top right;
   animation: hw-web-right-sway 6.5s ease-in-out infinite;
}

@keyframes hw-halloween-flight {
   0% { background-position: -12% 18%; }
   50% { background-position: 48% 12%; }
   100% { background-position: 112% 22%; }
}

.hero-slide-image::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 3;
   pointer-events: none;
   opacity: 0.72;
   background-repeat: no-repeat;
   background-size: clamp(76px, 11vw, 150px) auto;
   background-position: -12% 18%;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 72'%3E%3Cg fill='%23171315'%3E%3Cpath d='M80 33C68 20 57 16 49 15c4 7 1 12-5 13-8-9-17-11-27-9 5 8 4 14-4 16 10 15 22 19 35 12 11-7 21-8 29 1l3 6 3-6c8-9 18-8 29-1 13 7 25 3 35-12-8-2-9-8-4-16-10-2-19 0-27 9-6-1-9-6-5-13-8 1-19 5-31 18z'/%3E%3Cpath d='M13 35l-9-6 3 12zM147 35l9-6-3 12z'/%3E%3C/g%3E%3Cg fill='%23FF7A18'%3E%3Ccircle cx='66' cy='34' r='1.8'/%3E%3Ccircle cx='94' cy='34' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
   animation: hw-halloween-flight 16s ease-in-out infinite;
}

/* Un velo minimo al pie, solo para que el banner se funda con la
   pagina en vez de cortarse en seco.

   Era mucho mas oscuro cuando arriba seguia la foto clara de la promo:
   entonces hacia falta apagarla. Con el banner ya de noche, ese mismo
   velo solo ensuciaba. */
.hero-slide-image::after {
  content: "";
  position: absolute;
  inset: 0;
   z-index: 0;
  pointer-events: none;
   background: linear-gradient(180deg, rgba(28, 14, 15, 0.18), rgba(28, 14, 15, 0.48));
   backdrop-filter: blur(22px);
}

#heroCarousel .hero-slide-image {
  position: relative;
   isolation: isolate;
   background-color: var(--mm-band);
   background-image: url("/assets/marca/hw-hero.webp");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

.mm-hero-track .hero-slide {
   aspect-ratio: 16 / 9;
}

.mm-hero-track .hero-slide img {
   position: relative;
   z-index: 1;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   background: var(--mm-band);
}

#heroCarousel .hw-hero-effects {
   --hw-cursor-x: 50%;
   --hw-cursor-y: 50%;
   position: absolute;
   inset: 0;
   z-index: 4;
   overflow: hidden;
   pointer-events: none;
}

#heroCarousel .hw-hero-effects::before,
#heroCarousel .hw-hero-effects::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   mix-blend-mode: screen;
}

#heroCarousel .hw-hero-effects::before {
   z-index: 5;
   opacity: 0;
   background: radial-gradient(
      ellipse 22% 34% at var(--hw-cursor-x) var(--hw-cursor-y),
      rgba(255, 248, 225, 0.48) 0%,
      rgba(255, 169, 67, 0.29) 27%,
      rgba(255, 99, 27, 0.1) 52%,
      transparent 74%
   );
   transition: opacity 220ms ease;
}

#heroCarousel .hw-hero-effects.hw-cursor-active::before {
   opacity: 1;
}

#heroCarousel .hw-hero-effects::after {
   z-index: 1;
   opacity: 0.96;
   background:
      radial-gradient(ellipse 31% 27% at 66% 40%, rgba(255, 169, 56, 0.38) 0%, rgba(255, 83, 24, 0.18) 48%, transparent 77%),
      radial-gradient(ellipse 36% 31% at 75% 62%, rgba(255, 226, 168, 0.31) 0%, rgba(255, 105, 38, 0.2) 43%, transparent 76%),
      radial-gradient(ellipse 43% 48% at 70% 51%, rgba(255, 46, 22, 0.14) 0%, transparent 75%);
   animation: hw-promo-light 2.2s ease-in-out infinite alternate;
}

#heroCarousel .hw-hero-effect {
   position: absolute;
   display: block;
   z-index: 3;
   opacity: 0;
   border-radius: 50%;
   mix-blend-mode: screen;
   transform: scale(0.78);
   transition: opacity 180ms ease-out, transform 280ms ease-out;
}

#heroCarousel .hw-hero-effect-pumpkin {
   background: none;
}

#heroCarousel .hw-hero-effect-spider {
   background: radial-gradient(ellipse, rgba(255, 122, 24, 0.56), rgba(255, 122, 24, 0.18) 38%, transparent 72%);
}

#heroCarousel .hw-hero-effect svg {
   display: block;
   width: 100%;
   height: 100%;
   overflow: visible;
}

#heroCarousel .hw-effect-spark,
#heroCarousel .hw-effect-web-line,
#heroCarousel .hw-effect-vine,
#heroCarousel .hw-effect-pumpkin-spark {
   fill: none;
   stroke: #ffd08a;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

#heroCarousel .hw-effect-ember {
   fill: #ffdb7d;
   filter: drop-shadow(0 0 4px #ff7a18);
}

#heroCarousel .hw-effect-spider {
   fill: #241013;
   stroke: #ff9b2f;
   stroke-width: 1.6;
   stroke-linecap: round;
   stroke-linejoin: round;
   transform-box: fill-box;
   transform-origin: 50% 0;
}

#heroCarousel .hw-effect-spider-eye {
   fill: #ffd08a;
   stroke: none;
}

#heroCarousel .hw-hero-effect-spider.is-ambient {
   opacity: 0.55;
   transform: scale(0.96);
   animation: hw-component-glow 2.8s ease-in-out infinite alternate;
   will-change: opacity, transform;
}

#heroCarousel .hw-hero-effect-spider.is-ambient .hw-effect-spider {
   animation: hw-spider-swing 2.4s ease-in-out infinite alternate;
}

#heroCarousel .hw-hero-effect-pumpkin.is-ambient {
   opacity: 0.9;
   transform: scale(1);
   background: radial-gradient(ellipse at 50% 62%, rgba(255, 208, 92, 0.62), rgba(255, 122, 24, 0.26) 38%, transparent 72%);
   animation: hw-pumpkin-light 1.7s ease-in-out infinite alternate;
}

#heroCarousel .hw-hero-effect-pumpkin.is-ambient .hw-effect-ember {
   animation: hw-floating-ember 3.4s ease-out infinite;
}

#heroCarousel .hw-hero-effect-pumpkin[data-hero-effect="pumpkin-2"].is-ambient {
   animation-delay: -0.9s;
}

#heroCarousel .hw-hero-effect-pumpkin[data-hero-effect="pumpkin-4"].is-ambient {
   animation-delay: -1.7s;
}

#heroCarousel .hw-hero-effect-pumpkin[data-hero-effect="pumpkin-6"].is-ambient {
   animation-delay: -0.5s;
}

#heroCarousel .hw-hero-effect-spider.is-ambient .hw-effect-web-line {
   stroke-dasharray: 3 2;
   animation: hw-web-shimmer 1.8s linear infinite;
}

#heroCarousel .hw-hero-effect-spider {
   left: 1%;
   top: 8%;
   width: 14%;
   height: 22%;
}

#heroCarousel .hw-hero-effect-pumpkin {
   top: 83%;
   width: 9%;
   height: 15%;
}

#heroCarousel .hw-hero-effect-pumpkin[data-hero-effect="pumpkin-1"] { left: -1.5%; }
#heroCarousel .hw-hero-effect-pumpkin[data-hero-effect="pumpkin-2"] { left: 8.5%; }
#heroCarousel .hw-hero-effect-pumpkin[data-hero-effect="pumpkin-3"] { left: 27.5%; }
#heroCarousel .hw-hero-effect-pumpkin[data-hero-effect="pumpkin-4"] { left: 41.5%; }
#heroCarousel .hw-hero-effect-pumpkin[data-hero-effect="pumpkin-5"] { left: 60.5%; }
#heroCarousel .hw-hero-effect-pumpkin[data-hero-effect="pumpkin-6"] { left: 79.5%; }
#heroCarousel .hw-hero-effect-pumpkin[data-hero-effect="pumpkin-7"] { left: 96.5%; }

@keyframes hw-component-glow {
   from { filter: brightness(0.9); }
   to { filter: brightness(1.3); }
}

@keyframes hw-promo-light {
   from { opacity: 0.68; filter: brightness(1.08); }
   to { opacity: 1; filter: brightness(1.55); }
}

.mmc-cta-btn-ghost {
   background: var(--hw-whatsapp);
   border-color: var(--hw-whatsapp);
   color: #12351f;
}

.mmc-cta-btn-ghost:hover {
   background: #1fb957;
   border-color: #1fb957;
   color: #102b1a;
   box-shadow: 0 0 16px rgba(37, 211, 102, 0.42);
}

.mm-valor .mm-valor-card {
   border-color: rgba(255, 122, 24, 0.58);
   box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5),
               0 0 0 1px rgba(255, 122, 24, 0.16),
               0 0 20px rgba(255, 91, 25, 0.1);
}

.mm-valor .mm-valor-card::before {
   transform: scaleX(1);
   background: linear-gradient(90deg, var(--hw-calabaza), var(--mm-red-accent));
}

.mm-valor .mm-valor-icon {
   background: #F7DCDD;
   color: var(--mm-red);
   box-shadow: 0 0 22px rgba(255, 122, 24, 0.14);
}

.mm-valor .mm-valor-title {
   color: var(--mm-ink);
}

.mm-valor .mm-valor-copy {
   color: var(--mm-text);
}

/* Las flechas de carrusel mantienen contraste visible sin esperar al hover. */
.mm-rail-arrow {
   border: 1px solid rgba(255, 255, 255, 0.82);
   background: #FFFFFF;
   color: #A81E22;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.42),
               0 0 12px rgba(255, 255, 255, 0.18);
}

@media (hover: hover) and (pointer: fine) {
   .mm-rail-arrow:hover {
      border-color: #FFFFFF;
      background: #F3F3F3;
      color: #781417;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.38);
   }
}

#sucursalesView .mmc-cta-btn:not(.mmc-cta-btn-ghost),
#nosotrosView .mmc-cta-btn:not(.mmc-cta-btn-ghost) {
   background: var(--hw-whatsapp);
   border-color: var(--hw-whatsapp);
   color: #12351f;
}

#sucursalesView .mmc-cta-btn:not(.mmc-cta-btn-ghost):hover,
#nosotrosView .mmc-cta-btn:not(.mmc-cta-btn-ghost):hover {
   background: #1fb957;
   border-color: #1fb957;
   color: #102b1a;
   box-shadow: 0 0 16px rgba(37, 211, 102, 0.42);
}

@keyframes hw-spider-swing {
   from { transform: rotate(-12deg); }
   to { transform: rotate(12deg); }
}

@keyframes hw-floating-ember {
   from { opacity: 0; transform: translateY(4px) scale(0.7); }
   30% { opacity: 1; }
   to { opacity: 0; transform: translateY(-9px) scale(1.15); }
}

@keyframes hw-pumpkin-light {
   from { filter: brightness(0.92); }
   to { filter: brightness(1.18); }
}

@keyframes hw-web-shimmer {
   to { stroke-dashoffset: -10; }
}

@media (prefers-reduced-motion: reduce) {
   #heroCarousel .hw-hero-effects::after {
      animation: none;
      opacity: 0.82;
   }

   #heroCarousel .hw-hero-effects::before {
      transition: none;
   }

   #heroCarousel .hw-hero-effect.is-ambient {
      transition: none;
      animation: none;
   }

   #heroCarousel .hw-hero-effect.is-ambient[data-hero-effect] svg * {
      animation: none;
   }

}

@media (min-width: 1024px) {
   .mm-hero-track .hero-slide {
      height: auto;
      min-height: 0;
      aspect-ratio: 16 / 9;
      background: var(--mm-band);
   }

   .mm-hero-track .hero-slide img {
      object-fit: contain;
      object-position: center;
      background: var(--mm-band);
   }
}

.hw-event-countdown {
   position: absolute;
   top: 82%;
   left: 69%;
   z-index: 6;
   width: min(360px, 30vw);
   padding: 8px 12px 9px;
   transform: translate(-50%, -50%);
   border: 1px solid rgba(255, 122, 24, 0.72);
   border-radius: 999px;
   background: rgba(23, 11, 12, 0.90);
   box-shadow: 0 0 20px rgba(255, 122, 24, 0.30), inset 0 0 14px rgba(255, 122, 24, 0.08);
   color: var(--mm-ink);
   text-align: center;
   pointer-events: none;
   backdrop-filter: blur(5px);
}

.hw-event-countdown::before,
.hw-event-countdown::after {
   content: "";
   position: absolute;
   top: 50%;
   width: clamp(17px, 2vw, 28px);
   aspect-ratio: 1;
   transform: translateY(-50%);
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234c801e' d='M23 11c0-7 5-10 11-9-1 5-4 9-11 10'/%3E%3Cpath fill='%23ff7a18' d='M23 11c-4-5-12-5-17 0-7 8-5 24 4 31 5 4 11 4 14 0 3 4 9 4 14 0 9-7 11-23 4-31-5-5-13-5-17 0l-1 2z'/%3E%3Cpath fill='none' stroke='%23b94b10' stroke-width='2' d='M24 13c-4 7-4 17 0 25m0-25c4 7 4 17 0 25'/%3E%3C/svg%3E") center / contain no-repeat;
   filter: drop-shadow(0 0 7px rgba(255, 122, 24, 0.6));
   pointer-events: none;
}

.hw-event-countdown::before { left: calc(clamp(17px, 2vw, 28px) * -1.35); }
.hw-event-countdown::after { right: calc(clamp(17px, 2vw, 28px) * -1.35); }

.hw-shipping-link {
   position: absolute;
   top: 57%;
   left: 50%;
   z-index: 5;
   width: 38%;
   height: max(30%, 60px);
   border-radius: 999px;
   cursor: pointer;
}

.hw-shipping-link:focus-visible {
   outline: 2px solid var(--hw-calabaza);
   outline-offset: 2px;
}

.hw-event-countdown-label {
   display: block;
   margin-bottom: 3px;
   color: var(--hw-calabaza);
   font-family: var(--hw-display);
   font-size: 10px;
   font-weight: 600;
   line-height: 1.1;
   letter-spacing: 0.12em;
}

.hw-event-countdown-clock {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: clamp(5px, 0.8vw, 10px);
   font-family: var(--hw-display);
   line-height: 1;
}

.hw-event-countdown-unit {
   display: grid;
   justify-items: center;
   gap: 2px;
   min-width: 34px;
}

.hw-event-countdown-unit strong {
   color: var(--mm-ink);
   font-size: clamp(15px, 1.4vw, 21px);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
}

.hw-event-countdown-unit small {
   color: var(--mm-text);
   font-family: var(--mm-font);
   font-size: 8px;
   font-weight: 600;
   text-transform: uppercase;
}

.hw-event-countdown-separator {
   align-self: start;
   padding-top: 2px;
   color: var(--hw-calabaza);
   font-size: 16px;
}

@media (max-width: 1023px) {
   .hw-event-countdown {
      top: 82%;
      left: 69%;
      width: min(210px, 25vw);
      padding: 4px 5px 5px;
   }

   .hw-shipping-link {
      top: 62%;
      left: 42%;
      width: 56%;
      height: 38%;
   }

   .hw-event-countdown-label { font-size: 6px; }
   .hw-event-countdown-clock { gap: 1px; }
   .hw-event-countdown-unit { min-width: 17px; gap: 1px; }
   .hw-event-countdown-unit strong { font-size: clamp(8px, 1.7vw, 12px); }
   .hw-event-countdown-unit small { font-size: 5px; }
   .hw-event-countdown-separator { padding-top: 1px; font-size: 9px; }
}

@media (max-width: 479px) {
   .hw-event-countdown {
      top: 82%;
      left: 70%;
      width: min(150px, 34vw);
      padding: 2px 3px 3px;
   }

   .hw-shipping-link {
      top: 62%;
      left: 42%;
      width: 56%;
      height: 38%;
   }

   .hw-event-countdown-label {
      margin-bottom: 0;
      font-size: 4px;
      letter-spacing: 0.06em;
   }

   .hw-event-countdown-clock { gap: 1px; }
   .hw-event-countdown-unit { min-width: 14px; gap: 0; }
   .hw-event-countdown-unit strong { font-size: clamp(7px, 2vw, 8px); }
   .hw-event-countdown-unit small { font-size: 4px; }
   .hw-event-countdown-separator { padding-top: 1px; font-size: 7px; }

   .hw-event-countdown::before,
   .hw-event-countdown::after {
      width: 14px;
   }
}

@media (min-width: 480px) and (max-width: 767px) {
   .hw-event-countdown {
      top: 82%;
   }

   .hw-shipping-link {
      top: 62%;
      left: 42%;
      width: 56%;
      height: 38%;
   }
}

/* La barra conserva el rojo de marca y suma telaranas suaves en sus
   extremos. Como queda fija, la tematica acompana tambien las vistas
   internas al navegar, no solo el home.

   Va con el ID a proposito. El sitio la pinta con #siteHeader.mm-header
   y eso pesa mas que cualquier combinacion de clases: una regla mia de
   dos clases pierde aunque este en la ultima hoja. Cargar al final no
   gana especificidad, solo desempata. */
#siteHeader.mm-header {
  border-bottom: 1px solid rgba(255, 122, 24, 0.28);
   background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23FFF2F2' stroke-opacity='.46' stroke-width='1.5'%3E%3Cpath d='M0 0v100M0 0h100M0 0l76 76'/%3E%3Cpath d='M0 22q25 0 22-22M0 44q48 0 44-44M0 66q70 0 66-66M0 88q92 0 88-88'/%3E%3C/g%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23FFF2F2' stroke-opacity='.46' stroke-width='1.5'%3E%3Cpath d='M0 0v100M0 0h100M0 0l76 76'/%3E%3Cpath d='M0 22q25 0 22-22M0 44q48 0 44-44M0 66q70 0 66-66M0 88q92 0 88-88'/%3E%3C/g%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: left bottom, right top;
   background-size: 76px 76px;
}

.mm-footer {
   position: relative;
   isolation: isolate;
}

.mm-footer::before,
.mm-footer::after {
   content: "";
   position: absolute;
   top: 0;
   z-index: -1;
   width: clamp(76px, 9vw, 132px);
   aspect-ratio: 1;
   pointer-events: none;
   opacity: 0.24;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23FFF2F2' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M0 0v100M0 0h100M0 0l78 78'/%3E%3Cpath d='M0 20q25 0 20-20M0 40q48 0 40-40M0 60q70 0 60-60M0 80q92 0 80-80'/%3E%3C/g%3E%3C/svg%3E") no-repeat left top / contain;
}

.mm-footer::before { left: 0; }
.mm-footer::after { right: 0; transform: scaleX(-1); }

/* El enlace de "saltar al contenido" es blanco y solo aparece al
   tabular. Invisible para casi todos, pero quien navega con teclado lo
   ve primero de todo — y en blanco sobre la noche deslumbra. */
.skip-to-content {
  background: var(--mm-surface-2);
  color: var(--mm-ink);
  border: 1px solid var(--hw-calabaza);
}


/* ── Los que eran "lo oscuro" ──────────────────────────────────────
   Cinco reglas del sitio usan --mm-ink como FONDO, no como texto: son
   el boton negro, el hover de vista rapida, el boton de zona roja y
   los iconos del footer. Sobre una pagina blanca, --mm-ink (#1A1A1A)
   era "lo oscuro que resalta".

   Al invertir el token para el texto, esos cinco se volvieron manchas
   claras: el papel se les dio vuelta. No se arregla devolviendo el
   token —lo usan 91 reglas mas, ahi como texto y esta bien— sino
   devolviendoles a ELLOS su papel: sobre la noche, "lo oscuro que
   resalta" es un negro mas hondo que el fondo, con un filo de luz
   para que no se pierda del todo. */
.mm-btn-dark,
.mm-card-quick:hover,
.mm-card--zona-roja .mm-card-action .mm-btn,
.mm-footer-social a {
  background: var(--mm-band-deep);
  color: var(--mm-ink);
  border-color: var(--mm-line);
}

.mm-btn-dark:hover,
.mm-card--zona-roja .mm-card-action .mm-btn:hover,
.mm-footer-social a:hover {
   background: var(--hw-whatsapp);
   border-color: var(--hw-whatsapp);
   color: #173222;
}

.mm-footer-social #pieRedTiktok:hover {
   background: #25F4EE;
   border-color: #25F4EE;
   color: #171315;
   box-shadow: 0 0 18px rgba(37, 244, 238, 0.52), 3px 0 14px rgba(254, 44, 85, 0.36);
}

.mm-footer-social #pieRedFacebook:hover {
   background: #1877F2;
   border-color: #1877F2;
   color: #FFFFFF;
   box-shadow: 0 0 18px rgba(24, 119, 242, 0.58);
}

.mm-footer-social #pieRedInstagram:hover {
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
   border-color: #E1306C;
   color: #FFFFFF;
   box-shadow: 0 0 18px rgba(225, 48, 108, 0.56);
}

.mmc-contacto-item[href*="whatsapp"]:hover {
   border-color: var(--hw-whatsapp);
   background: rgba(37, 211, 102, 0.12);
}

/* Las tarjetas de producto se encienden al pasar por encima. El mismo
   gesto que ya tenian; solo cambia de que color es la luz. */
.mmc-card:hover,
.mm-card:hover,
.category-card:hover {
  border-color: rgba(255, 122, 24, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.62),
              0 0 0 1px rgba(255, 122, 24, 0.18);
}

/* El foco del teclado pasa a calabaza: sobre la noche el rojo de marca
   se confunde con el fondo, y quien navega con teclado deja de saber
   donde esta parado. Accesibilidad, no decoracion. */
:root {
  --mm-focus-color: var(--hw-calabaza);
}


/* ───────────────────────────────────────────────────────────────────
   4. LAS IMAGENES DE LA MARCA
   ───────────────────────────────────────────────────────────────────
   Se cambian desde CSS, con content: url(). Los componentes siguen
   apuntando a las imagenes de siempre —no se edito ninguno— y los
   archivos originales siguen en su sitio, intactos. Quitar este
   archivo devuelve las de siempre sin mover un dedo. */

/* La mascota y el logo se quedan como estan, a proposito.

   Se probaron los del paquete y no aportan: la mascota es IDENTICA
   pixel a pixel a la que ya tiene el sitio, y el logo viene a 420x173
   contra los 1080x444 del actual — cambiarlo solo lo dejaria borroso.
   El sombrero de bruja que se ve en la referencia no esta en la
   imagen: es un SVG que su hero le superpone, y eso ya viene dentro
   del banner de aqui abajo. */

img[src$="hero-60off.webp"] {
  content: url("/assets/marca/hw-hero.webp");
}


/* ───────────────────────────────────────────────────────────────────
   5. QUIEN PREFIERE QUIETO, QUIETO
   ───────────────────────────────────────────────────────────────────
    El sitio ya respeta prefers-reduced-motion. La deriva del banner es
    decorativa, asi que se apaga para quien haya solicitado movimiento
    reducido. */
@media (prefers-reduced-motion: reduce) {
   .hero-carousel-root::before,
   .hero-carousel-root::after,
   .hero-slide-image::before {
      animation: none;
   }
}