@charset "UTF-8";
/* ============================================================================
   INGENIUSLAB — Capa temática de Halloween  ·  v1.1
   ----------------------------------------------------------------------------
   Capa ADITIVA. Se carga DESPUÉS de css/style.css y casi todo está
   encapsulado bajo  html.hw-on  —  si la clase no está, el sitio queda
   prácticamente idéntico al original.

   ÚNICA EXCEPCIÓN: la regla ".blink" (botón "Tienda" del menú) cerca de la
   sección 2 — corrige un desbordamiento de la plantilla que ya existía con
   el tema apagado (el menú necesitaba 23px más de los que tenía), así que
   se dejó activa todo el año a propósito, no sólo en temporada. Documentado
   en el propio bloque de esa regla.

   Para desinstalar por completo: borrar las 2 líneas de halloween.css y
   halloween.js del index.html. No se ha modificado ni un byte de style.css.

   Paleta estacional:
     naranja calabaza  #FF6B00     morado nocturno  #1A0B2E
     gris ahumado      #6E6A78     verde marca      #28bd25  (se conserva)
   ========================================================================= */

:root {
  --hw-pumpkin:       #FF6B00;
  --hw-pumpkin-soft:  #FF8C33;
  --hw-pumpkin-deep:  #C24E00;
  --hw-night:         #1A0B2E;
  --hw-night-2:       #2A1245;
  --hw-smoke:         #6E6A78;
  --hw-smoke-light:   #A39DAF;
  --hw-brand:         #28bd25;
  --hw-ease:          cubic-bezier(.22,.61,.36,1);
}

/* ===========================================================================
   1 · TIPOGRAFÍA — toque gótico SOLO en títulos principales
   Cinzel es una romana de inscripción: misteriosa y elegante, no "de disfraz".
   El cuerpo de texto sigue siendo Roboto para no tocar la legibilidad.
   ========================================================================= */

/* OJO: .oh-desktop es una clase de utilidad del template (overflow:hidden) y
   también la llevan columnas del grid, un <h5> y un <p> del boletín. Por eso
   el selector exige h3: así sólo alcanza a los 6 títulos de sección reales y
   ni el cuerpo de texto ni las etiquetas del formulario cambian de fuente. */
.hw-on .swiper-title,
.hw-on h1,
.hw-on .heading-1,
.hw-on h3.oh-desktop > span {
  font-family: "Cinzel", "Times New Roman", Georgia, serif;
  letter-spacing: .06em;
  font-weight: 600;
}

/* Cinzel tiene ojo medio menor que Roboto: se compensa el interlineado
   para que los títulos largos del slider no se peguen entre líneas. */
.hw-on .swiper-title { line-height: 1.22; }

/* Filete naranja bajo los títulos de sección — ancla visual estacional. */
.hw-on h3.oh-desktop > span { position: relative; padding-bottom: 14px; }
.hw-on h3.oh-desktop > span::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 58px; height: 3px;
  background: linear-gradient(90deg, var(--hw-pumpkin), rgba(255,107,0,0));
  border-radius: 2px;
}

/* Los títulos centrados llevan el filete simétrico. La clase .hw-mid la pone
   halloween.js leyendo el text-align calculado: el template centra unas veces
   con .text-center y otras heredando del contenedor, así que no hay un
   selector CSS que cubra ambos casos. */
.hw-on h3.oh-desktop > span.hw-mid::after {
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  background: linear-gradient(90deg, rgba(255,107,0,0), var(--hw-pumpkin) 50%, rgba(255,107,0,0));
}

/* ===========================================================================
   2 · BOTONES — el verde de marca se conserva; el hover pasa a calabaza
   (el template usaba amarillo #fff700 en hover, que ya era el eslabón débil)
   ========================================================================= */

.hw-on .button-primary:hover,
.hw-on .button-primary:active,
.hw-on .button-primary-2:hover {
  color: #fff;
  background-color: var(--hw-pumpkin);
  border-color: var(--hw-pumpkin);
  box-shadow: 0 6px 22px rgba(255,107,0,.38);
}

/* Botones de la tabla de precios: el template los pinta de amarillo flúor
   #fff700, el único color que no convive con la paleta estacional.
   Texto en morado nocturno y no en blanco a propósito: sobre #FF6B00 el
   blanco da 3.0:1 y el morado 6.5:1, que sí cumple WCAG AA en texto normal. */
.hw-on .button-secondary,
.hw-on .button-secondary:focus {
  background-color: var(--hw-pumpkin);
  border-color: var(--hw-pumpkin);
  color: var(--hw-night);
}
.hw-on .button-secondary:hover,
.hw-on .button-secondary:active {
  background-color: var(--hw-night);
  border-color: var(--hw-night);
  color: var(--hw-pumpkin);
  box-shadow: 0 6px 22px rgba(26,11,46,.4);
}

/* CTAs del hero: sobre fotografía oscura el naranja rinde mejor que el verde
   y es el acento estacional más visible del sitio. */
.hw-on .button-shadow-2.button-primary,
.hw-on .button-shadow-2.button-primary:focus {
  background-color: var(--hw-pumpkin);
  border-color: var(--hw-pumpkin);
  color: #fff;
  box-shadow: 0 10px 30px rgba(255,107,0,.35);
}
.hw-on .button-shadow-2.button-primary:hover {
  background-color: var(--hw-pumpkin-deep);
  border-color: var(--hw-pumpkin-deep);
  box-shadow: 0 12px 34px rgba(255,107,0,.5);
}

/* Micro-animación de hover: barrido de luz. Transform/opacity puros -> GPU.
   Se desactiva con el interruptor y con prefers-reduced-motion. */
.hw-on:not(.hw-still) .button { position: relative; overflow: hidden; }
.hw-on:not(.hw-still) .button::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -140%;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.hw-on:not(.hw-still) .button:hover::after { animation: hw-sheen .75s var(--hw-ease) forwards; }
@keyframes hw-sheen { to { left: 140%; } }

/* Enlace "Tienda" — arreglo de maquetación FUERA de .hw-on, a propósito.
   <ul class="rd-navbar-nav"> es inline-block sin flex (720px de hueco real
   en desktop) y la suma de los 7 ítems necesita 743px: un sobrante de sólo
   23px que el template YA desbordaba antes de este tema (comprobado con el
   tema apagado), empujando "Tienda" a una segunda línea centrada. Esto no
   es decoración estacional, es un bug de la plantilla — así que se corrige
   todo el año, no sólo del 13 de octubre al 2 de noviembre. Sólo toca
   tamaño/alineación; el rojo y el parpadeo originales de .blink no se
   tocan aquí, sólo dentro de .hw-on más abajo. */
.blink {
  padding: 6px 13px;
  font-size: 12px;
  letter-spacing: .03em;
  vertical-align: middle;
}

/* El parpadeo rojo original se sustituye por una píldora calabaza con pulso
   suave — mismo protagonismo, acabado profesional. Esto sí es estacional. */
.hw-on .blink {
  animation: none;
  background: linear-gradient(135deg, var(--hw-pumpkin), var(--hw-pumpkin-deep));
  border-radius: 20px;
  width: auto;
  height: auto;
  padding: 6px 13px;
  line-height: 1.4;
  font-weight: 700;
  box-shadow: 0 3px 14px rgba(255,107,0,.45);
  transition: transform .25s var(--hw-ease), box-shadow .25s var(--hw-ease);
}
.hw-on .blink:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,0,.6); }
.hw-on:not(.hw-still) .blink { animation: hw-pulse 2.6s ease-in-out infinite; }
@keyframes hw-pulse {
  0%,100% { box-shadow: 0 3px 14px rgba(255,107,0,.45); }
  50%     { box-shadow: 0 3px 22px rgba(255,107,0,.85); }
}

/* Punto activo de la paginación del slider: también era #fff700. */
.hw-on .swiper-pagination-bullet::before { background: var(--hw-pumpkin); }

/* Botón "volver arriba": el template lo pinta de amarillo #fff700, que sobre
   el pie morado desentona. Pasa a calabaza mientras dure la temporada. */
.hw-on .ui-to-top {
  background: var(--hw-pumpkin);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,107,0,.42);
}
.hw-on .ui-to-top:hover,
.hw-on .ui-to-top:focus {
  background: var(--hw-night);
  color: var(--hw-pumpkin);
}

/* ===========================================================================
   3 · NAVEGACIÓN — acentos, sin tocar la estructura
   ========================================================================= */

.hw-on .rd-nav-link::before { background: var(--hw-pumpkin); }
.hw-on .rd-nav-link:hover   { color: var(--hw-pumpkin); }
.hw-on .rd-navbar-fixed .rd-nav-item.active .rd-nav-link,
.hw-on .rd-navbar-fixed .rd-nav-item.focus  .rd-nav-link { background: var(--hw-pumpkin); }

/* Hairline superior: sella el sitio como "modo estacional" en 3px. */
.hw-on .rd-navbar-wrap::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 1100;
  background: linear-gradient(90deg, var(--hw-night), var(--hw-pumpkin) 35%, var(--hw-pumpkin) 65%, var(--hw-night));
  pointer-events: none;
}

/* ===========================================================================
   4 · SECCIONES OSCURAS — el velo gris azulado pasa a morado nocturno
   ========================================================================= */

.hw-on .parallax-container::before {
  background-color: rgba(26,11,46,.76);
  background-image: radial-gradient(ellipse at 50% 120%, rgba(255,107,0,.16), transparent 60%);
}
.hw-on .parallax-container .box-icon-creative-title a:hover { color: var(--hw-pumpkin); }

/* Cielo estrellado: textura barata (radial-gradients puntuales, sin nodos
   nuevos) para que las bandas oscuras lean como "noche" y no sólo como una
   fotografía atenuada. Se repite en el footer para que ambas zonas casen. */
.hw-on .parallax-container::after,
.hw-on .footer-classic::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 15%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 72%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(2px 2px at 30% 82%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 45% 38%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 55%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 20% 60%, rgba(255,255,255,.4), transparent 60%);
}
.hw-on .parallax-container::after { z-index: 1; }
.hw-on:not(.hw-still) .parallax-container::after,
.hw-on:not(.hw-still) .footer-classic::after { animation: hw-twinkle 6s ease-in-out infinite; }
@keyframes hw-twinkle { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ===========================================================================
   5 · FOOTER — noche cerrada + calabaza minimalista
   ========================================================================= */

.hw-on .footer-classic { position: relative; background-color: var(--hw-night); }
.hw-on .footer-classic::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,11,46,.88), rgba(10,4,20,.96));
  pointer-events: none;
}
/* El contenido del pie se eleva por encima del velo morado; la capa de
   adornos queda deliberadamente excluida para conservar position:absolute
   y colocarse en z-index 1 (sobre el velo, bajo los textos). */
.hw-on .footer-classic > *:not(.hw-decor) { position: relative; z-index: 2; }
.hw-on .footer-classic .hw-decor,
.hw-on .footer-classic::after { z-index: 1; }
.hw-on .footer-classic-list a:hover,
.hw-on .footer-classic a.phone:hover,
.hw-on .footer-classic a.mail:hover { color: var(--hw-pumpkin); }
.hw-on .footer-classic-title { color: var(--hw-pumpkin-soft); }

/* La franja de copyright queda FUERA del <footer> en el DOM: la plantilla
   trae un desbalance de <div> en el bloque del mapa y el navegador la
   reubica como hermana. Por eso no hereda el morado y hay que pintarla
   aparte, o la noche se cortaría justo antes del borde inferior.
   (El desbalance es previo a este tema; no se toca aquí para no mover
   la maquetación del pie.) */
.hw-on .footer-classic-panel {
  background: #120722;
  border-top: 1px solid rgba(255,107,0,.22);
}
.hw-on .footer-classic-panel .rights { color: #8E86A0; }

/* Calabaza tallada en el pie: mismo motivo que la fila del hero, a tamaño
   reducido y algo apagada por defecto (cobra brillo completo al pasar el
   cursor). La imagen externa es una silueta negra lisa (sin currentColor,
   <img> no se puede recolorear desde fuera) — sobre el morado nocturno del
   pie sería casi invisible, así que lleva su propio disco cálido detrás,
   igual que la fila del hero y el susto (ver secciones 6b y 6e). */
.hw-pumpkin-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 26px auto 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #F4EFE4 55%, #E7DFC9 100%);
  box-shadow: 0 0 0 2px rgba(255,107,0,.4), 0 4px 12px rgba(0,0,0,.35);
  opacity: .82;
  transition: opacity .4s var(--hw-ease), transform .4s var(--hw-ease);
}
.hw-pumpkin-mark img { display: block; width: 64%; height: 64%; object-fit: contain; }
.hw-pumpkin-mark:hover { opacity: 1; }
.hw-on:not(.hw-still) .hw-pumpkin-mark { animation: hw-breathe 5s ease-in-out infinite; }
@keyframes hw-breathe {
  0%,100% { transform: translateY(0)    scale(1);    }
  50%     { transform: translateY(-5px) scale(1.035); }
}

/* ===========================================================================
   6 · ADORNOS — telarañas esquineras, murciélagos y araña colgante
   Todo inyectado como SVG inline (0 peticiones HTTP) y pointer-events:none.
   ========================================================================= */

/* Anclaje: las secciones que hospedan adornos necesitan contexto de posición. */
.hw-host { position: relative; }

.hw-decor {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

/* --- Telarañas de esquina --- */
.hw-web { position: absolute; width: 132px; height: 132px; color: #fff; opacity: .16; }
.hw-web svg { width: 100%; height: 100%; display: block; }
.hw-web--tl { top: 0; left: 0; }
.hw-web--tr { top: 0; right: 0; transform: scaleX(-1); }
.hw-decor--light .hw-web { color: var(--hw-night); opacity: .13; }

/* Las fotos del slider alternan zonas claras y oscuras: un hilo blanco al
   16 % desaparece sobre una manga blanca. Una sombra de 1px da el contorno
   que hace legible la telaraña sobre cualquier diapositiva. */
.hw-decor--dark .hw-web { filter: drop-shadow(0 1px 1px rgba(0,0,0,.42)); }

/* --- Araña colgante (micro-animación principal, desactivable) ---
   Va suelta en la capa, NO dentro de .hw-web--tr: esa telaraña está
   espejada con scaleX(-1) y arrastraría a la araña al revés. */
.hw-spider { position: absolute; top: 0; right: 96px; width: 26px; transform-origin: 50% 0; }
.hw-spider-thread {
  display: block; width: 1px; height: 54px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.42));
}
.hw-spider svg {
  display: block; width: 26px; height: 26px;
  color: #140A22;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.hw-decor--light .hw-spider-thread { background: linear-gradient(180deg, rgba(26,11,46,.08), rgba(26,11,46,.4)); }
.hw-decor--light .hw-spider svg { color: var(--hw-night); }
.hw-on:not(.hw-still) .hw-spider { animation: hw-dangle 6.5s ease-in-out infinite; }
@keyframes hw-dangle {
  0%,100% { transform: rotate(-3.5deg) translateY(0);   }
  50%     { transform: rotate( 3.5deg) translateY(10px); }
}

/* --- Murciélagos --- */
.hw-bat {
  position: absolute;
  color: #150B26;
  opacity: .82;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.hw-bat svg { display: block; width: 100%; height: auto; }
.hw-bat--1  { width: 56px; top: 15%; right: 6%;  }
.hw-bat--2  { width: 38px; top: 33%; right: 14%; opacity: .72; }
.hw-bat--3  { width: 46px; top: 57%; right: 3%;  opacity: .55; }

/* Sobre fotografía el silueteado puro desaparece: una luz de contorno de 1px
   garantiza que el murciélago se lea sobre cualquier slide, claro u oscuro. */
.hw-decor--dark .hw-bat {
  filter: drop-shadow(0 0 4px rgba(255,255,255,.34)) drop-shadow(0 4px 8px rgba(0,0,0,.45));
}

/* Footer: tinta calabaza casi textural, pegada al borde para no cruzar
   los enlaces rápidos ni el mapa de la derecha. */
.hw-decor--night .hw-bat { color: var(--hw-pumpkin); filter: none; }
.hw-bat--f1 { width: 40px; top: 11%; left: 2%; opacity: .32; }
.hw-bat--f2 { width: 27px; top: 54%; left: 5%; opacity: .22; }

.hw-on:not(.hw-still) .hw-bat--1  { animation: hw-float-a 7s   ease-in-out infinite;       }
.hw-on:not(.hw-still) .hw-bat--2  { animation: hw-float-b 9s   ease-in-out infinite .8s;   }
.hw-on:not(.hw-still) .hw-bat--3  { animation: hw-float-a 11s  ease-in-out infinite 1.6s;  }
.hw-on:not(.hw-still) .hw-bat--f1 { animation: hw-float-b 8.5s ease-in-out infinite .4s;   }
.hw-on:not(.hw-still) .hw-bat--f2 { animation: hw-float-a 10s  ease-in-out infinite 1.2s;  }

/* El vuelo (deriva lenta) vive en el <div> exterior; el aleteo (rápido) vive
   en el <svg> interior — así ambos movimientos se componen sin pelearse:
   cada uno anima un elemento distinto del mismo árbol. */
@keyframes hw-float-a {
  0%,100% { transform: translate3d(0,0,0);          }
  25%     { transform: translate3d(-14px,-12px,0);  }
  50%     { transform: translate3d(-6px,-22px,0);   }
  75%     { transform: translate3d(8px,-10px,0);    }
}
@keyframes hw-float-b {
  0%,100% { transform: translate3d(0,0,0);         }
  33%     { transform: translate3d(16px,-14px,0);  }
  66%     { transform: translate3d(5px,-24px,0);   }
}

/* Aleteo: escala vertical rápida sobre el propio dibujo (el viewBox del
   murciélago está recortado a su tinta, así que escalar en Y desde el
   centro sí se lee como un ala que sube y baja, no como un "respirar"
   lento). Cada murciélago lleva una duración/retraso ligeramente distintos
   para que no aleteen todos al unísono. */
.hw-bat svg, .hw-flybat svg { transform-origin: 50% 50%; }
.hw-on:not(.hw-still) .hw-bat svg,
.hw-on:not(.hw-still) .hw-flybat svg {
  animation: hw-flap .22s ease-in-out infinite;
}
.hw-on:not(.hw-still) .hw-bat--2  svg { animation-duration: .19s; animation-delay: -.05s; }
.hw-on:not(.hw-still) .hw-bat--3  svg { animation-duration: .26s; animation-delay: -.11s; }
.hw-on:not(.hw-still) .hw-bat--f1 svg { animation-duration: .21s; animation-delay: -.07s; }
.hw-on:not(.hw-still) .hw-bat--f2 svg { animation-duration: .24s; animation-delay: -.02s; }
@keyframes hw-flap {
  0%, 100% { transform: scaleY(1);   }
  50%      { transform: scaleY(.42); }
}

/* ===========================================================================
   6b · ESCENA DE CABECERA — luna + mansión embrujada + calabazas
   Ancla a la derecha del hero: los subtítulos del slider usan max-width
   320-350px desde lg, así que esta franja (hasta 380px) nunca los toca.
   ========================================================================= */

.hw-scene {
  position: absolute;
  right: 4%; bottom: 0;
  width: min(34vw, 380px);
}
.hw-scene svg { display: block; width: 100%; height: auto; }
.hw-scene-moon { filter: drop-shadow(0 0 26px rgba(245,233,200,.55)); }
.hw-scene-window { filter: drop-shadow(0 0 6px rgba(255,201,113,.85)); }
.hw-on:not(.hw-still) .hw-scene-window { animation: hw-window-flicker 4.5s ease-in-out infinite; }
@keyframes hw-window-flicker { 0%,100% { opacity: .85; } 50% { opacity: .5; } }

.hw-pumpkin-row {
  position: absolute;
  right: 6%; bottom: -6px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
/* Mismo problema que la calabaza del pie: la imagen es una silueta negra
   lisa, así que necesita su disco cálido detrás para leerse sobre
   cualquier foto del slider (claras y oscuras alternan entre diapositivas). */
.hw-pumpkin-row .hw-pumpkin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #F4EFE4 55%, #E7DFC9 100%);
  box-shadow: 0 0 0 2px rgba(255,107,0,.45), 0 4px 10px rgba(0,0,0,.4);
}
.hw-pumpkin-row .hw-pumpkin img { display: block; width: 64%; height: 64%; object-fit: contain; }
.hw-pumpkin-row .hw-pumpkin:nth-child(2) { width: 68px; height: 68px; }
.hw-pumpkin-row .hw-pumpkin:nth-child(3) { width: 44px; height: 44px; }
.hw-on:not(.hw-still) .hw-pumpkin-row .hw-pumpkin { animation: hw-breathe 5s ease-in-out infinite; }
.hw-on:not(.hw-still) .hw-pumpkin-row .hw-pumpkin:nth-child(2) { animation-delay: .6s; }
.hw-on:not(.hw-still) .hw-pumpkin-row .hw-pumpkin:nth-child(3) { animation-delay: 1.1s; }

/* ===========================================================================
   6c · MURCIÉLAGOS VOLANDO POR TODA LA PANTALLA
   Capa FIJA (no atada al hero): cruzan de lado a lado sobre cualquier
   sección mientras el visitante hace scroll. pointer-events:none en toda la
   capa — nunca bloquean clics, estén donde estén en la animación.
   ========================================================================= */

.hw-skylayer {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
}
.hw-flybat {
  position: absolute;
  left: -14%;
  color: #140A22;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.3));
  will-change: transform;
}
.hw-flybat svg { display: block; width: 100%; height: auto; }

.hw-on:not(.hw-still) .hw-flybat--a { animation-name: hw-cross-a; animation-timing-function: linear; animation-iteration-count: infinite; }
.hw-on:not(.hw-still) .hw-flybat--b { animation-name: hw-cross-b; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes hw-cross-a {
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(28vw,-22px,0); }
  50%  { transform: translate3d(56vw,10px,0); }
  75%  { transform: translate3d(84vw,-16px,0); }
  100% { transform: translate3d(118vw,0,0); }
}
@keyframes hw-cross-b {
  0%   { transform: translate3d(0,0,0); }
  30%  { transform: translate3d(35vw,16px,0); }
  60%  { transform: translate3d(70vw,-20px,0); }
  100% { transform: translate3d(118vw,6px,0); }
}
/* Sin la animación (quieto / reduced-motion), la capa entera no aporta nada
   y dejarla fija a medio vuelo se vería como un fallo — se oculta del todo. */
.hw-still .hw-skylayer { display: none; }

/* ===========================================================================
   6d · FRANJA SUPERIOR DE TEMPORADA
   Barra normal (sin position:fixed) insertada como primer hijo de .page:
   empuja el resto del contenido hacia abajo igual que cualquier elemento en
   flujo, así que no compite ni se superpone con el navbar fijo/"stick-up".
   ========================================================================= */

.hw-ribbon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 46px 10px 16px;
  background: linear-gradient(90deg, var(--hw-night), var(--hw-pumpkin-deep) 45%, var(--hw-pumpkin) 75%, var(--hw-night));
  background-size: 200% 100%;
  color: #fff;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
}
.hw-ribbon-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; color: #fff; }
.hw-ribbon-icon svg { display: block; width: 100%; height: auto; }
.hw-ribbon-close {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  width: 23px; height: 23px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.hw-ribbon-close:hover { background: rgba(255,255,255,.3); }
.hw-ribbon-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hw-on:not(.hw-still) .hw-ribbon { animation: hw-ribbon-shift 10s ease-in-out infinite; }
@keyframes hw-ribbon-shift { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ===========================================================================
   6e · "SUSTO" OCASIONAL — calavera / calabaza / fantasma / zombie / drácula
   / momia (6 imágenes externas, ver IMG en halloween.js — licencia Dominio
   Público / CC0, SVG Repo). Lo crea y lo destruye halloween.js, cada 30-60s,
   en una posición aleatoria dentro de TODA la pantalla visible actual (sigue
   el scroll al ser position:fixed — aparece en la sección que se esté
   viendo, no siempre arriba). 1 cada vez, nunca solapado; esta regla sólo
   define su apariencia y su ciclo de vida de 3s exactos: aparición elástica
   → pausa → se desvanece. No se programa nunca en modo "quieto" ni con
   prefers-reduced-motion (ver sección 10).

   Las 6 imágenes son siluetas negras lisas (sin currentColor): el "disco"
   cálido detrás no es sólo decorativo, es lo que garantiza que se lean
   tanto sobre una foto del slider como sobre una sección blanca o una
   banda nocturna — exactamente el mismo motivo que en 6b/footer.
   ========================================================================= */

.hw-jumpscare {
  position: fixed;
  z-index: 600;
  width: 112px;
  height: 112px;
  pointer-events: none;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #F4EFE4 55%, #E7DFC9 100%);
  box-shadow: 0 0 0 3px rgba(255,107,0,.55), 0 12px 28px rgba(0,0,0,.45);
}
.hw-jumpscare img { display: block; width: 62%; height: 62%; object-fit: contain; }
.hw-jumpscare--show { animation: hw-jumpscare-life 3s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes hw-jumpscare-life {
  0%   { opacity: 0; transform: scale(.3)  rotate(-8deg); }
  12%  { opacity: 1; transform: scale(1.1) rotate(3deg);  }
  18%  { transform: scale(.95) rotate(-2deg); }
  24%  { transform: scale(1)   rotate(0deg); }
  82%  { opacity: 1; transform: scale(1)    rotate(0deg); }
  100% { opacity: 0; transform: scale(.72)  rotate(4deg); }
}

/* ===========================================================================
   6f · BRUJA EN ESCOBA — cruce único, no en bucle
   Imagen externa (witch-flying-broom, CC0, SVG Repo). Igual mecánica que
   los murciélagos del cielo pero de un solo uso: cruza una vez y
   halloween.js destruye el nodo al terminar, en vez de repetir infinito.

   A diferencia del susto, aquí un disco de fondo se vería raro (una mancha
   redonda arrastrándose tras ella en pleno vuelo) — en su lugar lleva un
   halo claro de 1-2px por fuera del trazo negro, el mismo recurso que ya
   usan los murciélagos del hero sobre las fotos del slider (sección 6).
   ========================================================================= */

.hw-witch {
  position: fixed;
  left: -170px;
  z-index: 560;
  width: 108px;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.65)) drop-shadow(0 0 7px rgba(255,255,255,.35)) drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.hw-witch img { display: block; width: 100%; height: auto; }
.hw-witch--fly { animation-name: hw-witch-cross; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes hw-witch-cross {
  0%   { transform: translate3d(0,0,0)      rotate(-3deg); }
  20%  { transform: translate3d(24vw,-34px,0) rotate(2deg); }
  45%  { transform: translate3d(48vw,12px,0)  rotate(-3deg); }
  70%  { transform: translate3d(72vw,-24px,0) rotate(3deg); }
  100% { transform: translate3d(120vw,4px,0)  rotate(-1deg); }
}

/* ===========================================================================
   6g · TORMENTA — cada minuto exacto (único reloj que NO es un rango
   aleatorio, se pidió así explícitamente). halloween.js la crea y destruye
   sola, dura ~4.3s: oscurece toda la pantalla, aparece en grande la misma
   mansión embrujada del hero y caen dos rayos con destellos. pointer-events
   :none en todo — nunca bloquea un clic, ni siquiera mientras está oscuro.

   z-index 9985: por debajo de los widgets fijos y modales (9997+/9998+ —
   se quedan visibles y usables durante el evento) Y por debajo del marco
   naranja de la página (9990, sección 7b) — a propósito: el marco es la
   "firma" del tema y conviene que se siga viendo, incluso con la pantalla
   oscurecida detrás.
   ========================================================================= */

.hw-storm {
  position: fixed;
  inset: 0;
  z-index: 9985;
  pointer-events: none;
  opacity: 0;
}
.hw-storm--show { animation: hw-storm-life 4.3s ease-in-out forwards; }
@keyframes hw-storm-life {
  0%   { opacity: 0; }
  7%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

.hw-storm-dark {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 38%, rgba(26,11,46,.6), rgba(5,2,10,.9));
}

.hw-storm-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  mix-blend-mode: screen;
}
.hw-on:not(.hw-still) .hw-storm--show .hw-storm-flash { animation: hw-lightning-flash 4.3s ease-in-out forwards; }
@keyframes hw-lightning-flash {
  0%, 13%, 23%, 41%, 51%, 100% { opacity: 0; }
  14%  { opacity: .9; }
  16%  { opacity: .15; }
  18%  { opacity: .65; }
  42%  { opacity: .75; }
  44%  { opacity: .1; }
  46%  { opacity: .5; }
}

/* "Que caigan rayos": el contenedor es alto a propósito (42% del alto de
   pantalla) y el polígono del rayo se estira para llenarlo — con
   transform-origin arriba, crecer en scaleY desde .2 hasta 1 se lee como
   un rayo que CAE desde el cielo, no como un icono quieto parpadeando. */
.hw-storm-bolt {
  position: absolute;
  top: -2%;
  width: 30px;
  height: 42vh;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255,247,214,.9));
  transform-origin: 50% 0%;
  transform: scaleY(.2);
}
.hw-storm-bolt svg { display: block; width: 100%; height: 100%; }
.hw-storm-bolt--1 { left: 16%; }
.hw-storm-bolt--2 { left: 70%; height: 36vh; }
.hw-on:not(.hw-still) .hw-storm-bolt--1 { animation: hw-bolt-strike 4.3s ease-in-out forwards; }
.hw-on:not(.hw-still) .hw-storm-bolt--2 { animation: hw-bolt-strike 4.3s ease-in-out forwards .55s; }
@keyframes hw-bolt-strike {
  0%, 13%, 22%, 100% { opacity: 0; transform: scaleY(.2); }
  14% { opacity: 1;  transform: scaleY(1); }
  16% { opacity: .2; transform: scaleY(1); }
  18% { opacity: .85; transform: scaleY(1); }
  20% { opacity: 0;  transform: scaleY(1); }
}

.hw-storm-house {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 260px;
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.6));
}
.hw-storm-house svg { display: block; width: 100%; height: auto; }

/* ===========================================================================
   7 · MODAL DE BIENVENIDA — re-tematizado reutilizando el existente
   ========================================================================= */

.hw-on .mb-tag             { background: var(--hw-pumpkin); }
.hw-on .mb-btn-close       { background: var(--hw-pumpkin); }
.hw-on .mb-btn-close:hover { background: var(--hw-pumpkin-deep); }
.hw-on .mb-noshow input    { accent-color: var(--hw-pumpkin); }
.hw-on .mb-dialog          { border-top: 4px solid var(--hw-pumpkin); }
.hw-on .mb-title           { font-family: "Cinzel", Georgia, serif; letter-spacing: .02em; }

/* ===========================================================================
   7b · CONTORNO DE PÁGINA — marco naranja degradado
   Pseudo-elemento fijo cubriendo todo el viewport, borde en gradiente vía el
   truco "border-image: linear-gradient() 1". pointer-events:none, así que
   nunca interfiere con nada; z-index por debajo de los widgets fijos
   (9997+) y los modales (9998+) para no taparlos en las esquinas.
   ========================================================================= */

.hw-on body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  border: 5px solid transparent;
  border-image: linear-gradient(135deg,
    var(--hw-night) 0%, var(--hw-pumpkin-deep) 25%, var(--hw-pumpkin) 50%,
    var(--hw-pumpkin-deep) 75%, var(--hw-night) 100%) 1;
}

/* ===========================================================================
   8 · INTERRUPTOR DE DECORACIÓN
   Abajo a la IZQUIERDA: el widget de WhatsApp (bottom:112px/right:28px) y el
   botón "volver arriba" (bottom:40px/right) ocupan el lado derecho.
   ========================================================================= */

.hw-toggle {
  position: fixed;
  bottom: 28px; left: 28px;
  z-index: 9997;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(255,107,0,.42);
  border-radius: 30px;
  background: rgba(26,11,46,.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #F3EEF8;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.34);
  transition: transform .22s var(--hw-ease), box-shadow .22s var(--hw-ease), border-color .22s;
}
.hw-toggle:hover { transform: translateY(-2px); border-color: var(--hw-pumpkin); box-shadow: 0 9px 28px rgba(255,107,0,.3); }
.hw-toggle:focus-visible { outline: 2px solid var(--hw-pumpkin); outline-offset: 3px; }
.hw-toggle svg { width: 19px; height: 19px; color: var(--hw-pumpkin); flex-shrink: 0; }
.hw-toggle-label { white-space: nowrap; }
.hw-still .hw-toggle svg { color: var(--hw-smoke-light); }

/* Red de seguridad: halloween.js ya no programa el susto ni la bruja en
   modo "quieto" ni con reduced-motion, pero si un nodo quedara a medio
   vivir justo cuando el visitante cambia de modo, que desaparezca con él. */
.hw-still .hw-jumpscare, .hw-still .hw-witch, .hw-still .hw-storm { display: none; }

/* ===========================================================================
   9 · RESPONSIVE
   Por debajo de 992px se reduce la carga decorativa; en móvil sólo sobrevive
   una telaraña y el interruptor se contrae a icono. Nada compite con el texto.
   ========================================================================= */

@media (max-width: 1199px) {
  .hw-bat--3, .hw-bat--f2 { display: none; }
  .hw-web { width: 108px; height: 108px; }
  .hw-scene { width: min(30vw, 300px); }
  /* A partir de aquí la pantalla ya no tiene sitio para 6 murciélagos
     cruzando a la vez sin sentirse saturado: se queda la mitad. */
  .hw-flybat--n1, .hw-flybat--n3, .hw-flybat--n5 { display: none; }
}

@media (max-width: 991px) {
  .hw-bat--2, .hw-bat--f1 { display: none; }
  .hw-bat--1 { width: 32px; top: 12%; right: 5%; }
  .hw-spider { display: none; }
  .hw-web--tr { display: none; }
  .hw-web { width: 88px; height: 88px; }
  /* Los subtítulos del slider pasan a ocupar todo el ancho: ya no queda
     hueco libre a la derecha para la escena ni la fila de calabazas. */
  .hw-scene, .hw-pumpkin-row { display: none; }
}

@media (max-width: 767px) {
  /* En móvil el hero es casi todo texto: fuera murciélagos, queda la telaraña. */
  .hw-bat { display: none; }
  .hw-web { width: 76px; height: 76px; opacity: .2; }
  .hw-on .oh-desktop > span { padding-bottom: 10px; }
  .hw-on .oh-desktop > span::after { width: 42px; height: 2px; }
  .hw-on .rd-navbar-wrap::before { height: 2px; }
  .hw-pumpkin-mark { width: 46px; margin-top: 20px; }

  .hw-toggle { bottom: 20px; left: 16px; padding: 10px; gap: 0; }
  .hw-toggle-label { display: none; }
  .hw-toggle svg { width: 21px; height: 21px; }

  /* En pantallas pequeñas, 2-3 murciélagos bastan para leerse "por toda la
     pantalla" sin saturar ni pesar en el pintado. */
  .hw-flybat--n1, .hw-flybat--n2, .hw-flybat--n3 { display: none; }

  .hw-ribbon { padding: 8px 36px 8px 12px; font-size: 11.5px; line-height: 1.4; }
  .hw-ribbon-icon { width: 14px; height: 14px; }
  .hw-ribbon-close { width: 20px; height: 20px; right: 8px; }

  .hw-jumpscare { width: 92px; height: 92px; }
  .hw-witch { width: 86px; }
  .hw-on body::after { border-width: 3px; }

  .hw-storm-house { width: 190px; }
  .hw-storm-bolt { width: 26px; }
}

/* Pantallas muy estrechas: el interruptor no debe tapar contenido al hacer
   scroll hasta el pie, donde también vive el botón de WhatsApp. */
@media (max-width: 400px) {
  .hw-toggle { bottom: 16px; left: 12px; }
}

/* ===========================================================================
   10 · ACCESIBILIDAD — respeto del ajuste del sistema
   Si el usuario pidió menos movimiento, los adornos se quedan quietos
   (siguen visibles, pero inertes). Equivale al interruptor en "quieto".
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hw-on .hw-bat,
  .hw-on .hw-bat svg,
  .hw-on .hw-flybat svg,
  .hw-on .hw-spider,
  .hw-on .hw-pumpkin-mark,
  .hw-on .hw-pumpkin-row .hw-pumpkin,
  .hw-on .hw-scene-window,
  .hw-on .parallax-container::after,
  .hw-on .footer-classic::after,
  .hw-on .hw-ribbon,
  .hw-on .hw-storm-flash,
  .hw-on .hw-storm-bolt,
  .hw-on .blink,
  .hw-on .button::after {
    animation: none !important;
    transition: none !important;
  }
  /* Igual que en modo "quieto": una capa cuyo único propósito es moverse no
     tiene sentido congelada a medio vuelo, así que se oculta entera. halloween.js
     tampoco programa el susto, la bruja ni la tormenta bajo esta preferencia
     — esto es sólo la red de seguridad para un nodo que ya estuviera en
     pantalla. */
  .hw-skylayer, .hw-jumpscare, .hw-witch, .hw-storm { display: none !important; }
}

/* Impresión: ningún adorno llega al papel. */
@media print {
  .hw-decor, .hw-toggle, .hw-pumpkin-mark,
  .hw-skylayer, .hw-ribbon, .hw-scene, .hw-pumpkin-row,
  .hw-jumpscare, .hw-witch, .hw-storm { display: none !important; }
  .hw-on body::after { display: none !important; }
}