/* =====================================================================
   MARLOW — Decoración temporal de Halloween
   =====================================================================
   100% AISLADO del diseño base: solo clases nuevas (prefijo hw-),
   nunca redefine ni sobreescribe ninguna regla de styles.css. Reutiliza
   las variables de color ya existentes (--red-marlow, --red-glow,
   --black-deep, --line) — nunca inventa colores nuevos fuera de la
   paleta Marlow.

   REVERSIÓN: borrar este archivo + quitar su <link> en index.html +
   quitar los contenedores con clases hw-* + restaurar el src original
   del conejo. Nada de esto toca styles.css/script.js/data.js.

   Todo elemento es puramente decorativo: pointer-events:none, y nunca
   se agregan en el flujo normal del documento (siempre position:
   absolute, dentro de un contenedor ya relative), así que no pueden
   generar overflow horizontal ni desplazar contenido real.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Niebla — mismo truco de máscara radial que .hero-bg-lines, pero con
   un degradé de color en vez de líneas, animado muy lento.
   --------------------------------------------------------------------- */
.hw-fog{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.hw-fog::before, .hw-fog::after{
  content:""; position:absolute; left:-20%; width:140%; height:60%;
  background:linear-gradient(90deg, transparent, rgba(216,31,46,.18) 35%, rgba(20,16,15,.32) 60%, transparent);
  filter:blur(11px);
  animation:hwFogDrift 26s linear infinite;
}
.hw-fog::before{ top:8%; animation-duration:30s; }
.hw-fog::after{ top:55%; animation-duration:38s; animation-direction:reverse; opacity:.7; }
@keyframes hwFogDrift{
  0%{ transform:translateX(-6%); }
  50%{ transform:translateX(6%); }
  100%{ transform:translateX(-6%); }
}

/* ---------------------------------------------------------------------
   Murciélagos — silueta simple, cruzan muy de vez en cuando.
   --------------------------------------------------------------------- */
.hw-bat{
  position:absolute; width:34px; height:auto; color:var(--silver,#a39d97);
  opacity:.92; pointer-events:none; z-index:2;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
.hw-bat svg{ width:100%; height:auto; display:block; }
.hw-bat-fly{ animation:hwBatFly 16s ease-in-out infinite; }
@keyframes hwBatFly{
  0%, 100%{ transform:translate(0,0) scale(1); }
  45%{ transform:translate(26px,-14px) scale(1.05); }
  55%{ transform:translate(26px,-14px) scale(1.05); }
}

/* ---------------------------------------------------------------------
   Calabazas — glow MUY suave, reutilizando la misma técnica que
   pulseGlow ya usa el proyecto.
   --------------------------------------------------------------------- */
.hw-pumpkin{
  position:absolute; width:46px; height:auto; pointer-events:none; z-index:2;
  filter:drop-shadow(0 0 10px rgba(255,120,30,.35));
  animation:hwPumpkinGlow 4.5s ease-in-out infinite;
}
.hw-pumpkin svg{ width:100%; height:auto; display:block; }
@keyframes hwPumpkinGlow{
  0%,100%{ filter:drop-shadow(0 0 7px rgba(255,120,30,.28)); }
  50%{ filter:drop-shadow(0 0 15px rgba(255,140,40,.5)); }
}

/* ---------------------------------------------------------------------
   Telarañas — esquinas discretas, estáticas (sin animación, son fondo).
   --------------------------------------------------------------------- */
.hw-cobweb{
  position:absolute; width:72px; height:72px; pointer-events:none; z-index:1;
  opacity:.8;
}
.hw-cobweb svg{ width:100%; height:100%; display:block; }
.hw-cobweb-tl{ top:0; left:0; }
.hw-cobweb-tr{ top:0; right:0; transform:scaleX(-1); }

/* ---------------------------------------------------------------------
   Hero — posiciones específicas de cada elemento decorativo.
   .hero-visual ya es position:relative, así que estos quedan contenidos
   ahí sin agregar overflow nuevo.
   --------------------------------------------------------------------- */
.hero-visual .hw-pumpkin-hero{ bottom:4%; left:2%; }

/* El conejo Halloween ya trae su propia calabaza y capa: la calabaza
   decorativa (quedaba sobre el zapato) y la flecha punteada original
   (pensada para el conejo anterior, caía sobre la capa) se ocultan en
   TODOS los anchos, para que en PC se vea igual de limpio que en celular.
   En celular ya estaban ocultas (≤480px y ≤860px respectivamente). */
.hw-pumpkin-hero,
.hero-visual .hero-point-arrow{
  display:none;
}
.hero-visual .hw-bat-hero-1{ top:4%; right:8%; }
.hero-visual .hw-bat-hero-2{ top:22%; left:0; width:24px; opacity:.6; animation-delay:-8s; }

/* Telaraña chica en 2 de los 4 ring-divider existentes — nunca los 4,
   para no saturar. .ring-divider ya es un contenedor acotado; se le da
   position:relative solo acá, de forma aislada, para poder anclar la
   telaraña sin tocar su regla original en styles.css. */
.ring-divider.hw-has-cobweb{ position:relative; overflow:visible; }
.ring-divider.hw-has-cobweb .hw-cobweb{ width:46px; height:46px; top:-14px; }

/* ---------------------------------------------------------------------
   Responsive — menos decoración en pantallas chicas, el conejo y los
   CTA siempre quedan completamente intactos y usables.
   --------------------------------------------------------------------- */
@media (max-width:760px){
  .hw-bat-hero-2,
  .hw-cobweb-tr{ display:none; } /* se oculta lo secundario, nunca el conejo ni los CTA */
  .hw-pumpkin{ width:34px; }
  .hw-bat{ width:26px; }
  .hw-cobweb{ width:52px; height:52px; }
  .hw-fog::before, .hw-fog::after{ filter:blur(12px); }
}
@media (max-width:480px){
  .hw-pumpkin-hero,
  .hw-bat-hero-1{ display:none; } /* en pantallas muy chicas, solo queda la niebla sutil + el conejo */
}

/* ---------------------------------------------------------------------
   Decoración lateral — una pieza por sección, ancladas SIEMPRE al
   borde interno de la sección misma (nunca al gutter externo del
   .container, que no existe en pantallas angostas/laptops de ancho
   medio) — así nunca generan overflow horizontal, en ningún tamaño.
   Secundarias y discretas: tamaño chico, sin animación salvo un leve
   balanceo en el murciélago.
   --------------------------------------------------------------------- */
.hw-side{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:auto; pointer-events:none; z-index:1;
  opacity:.55; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.hw-side svg{ width:100%; height:auto; display:block; }
.hw-side-left{ left:10px; }
.hw-side-right{ right:10px; }

/* Plataformas y Asesores: la tarjeta flotante "¿Tenés dudas?" ocupa en
   desktop la franja vertical central del viewport (~35%-65%) durante
   todo el recorrido. Para estas 2 decoraciones puntuales (derecha) se
   las sube hacia la zona alta de su sección, lejos de esa franja —
   sin tocar la tarjeta ni la regla base .hw-side-right (Beneficios y
   Promociones, ya aprobados, no se ven afectados por este override). */
#plataformas .hw-side-right,
#asesores .hw-side-right{ top:130px; transform:none; }

/* El murciélago de Promociones reutiliza el leve balanceo ya aprobado
   para los del hero, pero más lento/discreto para no competir. */
#promociones .hw-side{ animation:hwSideSway 9s ease-in-out infinite; }
@keyframes hwSideSway{
  0%,100%{ transform:translateY(-50%) rotate(0deg); }
  50%{ transform:translateY(-54%) rotate(-4deg); }
}

@media (max-width:1180px){
  .hw-side{ width:30px; opacity:.4; }
}
@media (max-width:760px){
  .hw-side{ display:none; } /* en mobile, el contenido ya ocupa todo el ancho — se ocultan para no competir */
}