/* Happy Xmas Time — animaciones suaves, livianas y accesibles.
   Sin canvas, GIFs animados, videos ni bibliotecas adicionales.
   Textura de destellos optimizada en Higgsfield: 2.4 KB. */
/* Happy Xmas Time — animaciones suaves, premium y accesibles.
   Nieve con profundidad en canvas; luces y destellos por CSS. */
:root { --xmas-light: url("/assets/navidad/glow-sprite.png"); }
.snowDepthCanvas { position: fixed; inset: 0; z-index: 26; pointer-events: none; overflow: hidden; }
/* Luces del borde dorado del encabezado. */
.headerFairyLine { position: absolute; bottom: -7px; left: 0; width: 100%; height: 18px; pointer-events: none; z-index: 4; overflow: hidden; }
.headerGlow, .roofGlow, .skyGlow { position: absolute; display: block; background-image: var(--xmas-light); background-repeat: no-repeat; background-size: 400% 100%; background-position: var(--glow-frame) center; pointer-events: none; will-change: opacity, transform; }
.headerGlow { width: 15px; height: 15px; top: 0; left: var(--glow-x); opacity: .55; animation: twinkleSoft var(--glow-duration) ease-in-out infinite; animation-delay: var(--glow-delay); }
/* Luz sobre los pequeños focos existentes de la cabaña (sin dibujar otro techo). */
.roofLights { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.roofGlow { width: 3.2%; aspect-ratio: 1/1; left: var(--glow-x); top: var(--glow-y); transform: translate(-50%,-50%); opacity: .55; animation: roofFlicker var(--glow-duration) ease-in-out infinite; animation-delay: var(--glow-delay); }
/* Estrellas sutiles en la zona celeste, lejos del texto principal. */
.skySparkles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.skyGlow { width: clamp(20px,3vw,38px); aspect-ratio: 1/1; left: var(--glow-x); top: var(--glow-y); opacity: .36; animation: skyShimmer var(--glow-duration) ease-in-out infinite; animation-delay: var(--glow-delay); }
@keyframes twinkleSoft { 0%, 100% { opacity:.30; transform:scale(.82); } 45% { opacity:.84; transform:scale(1.07); } 70% { opacity:.48; transform:scale(.94); } }
@keyframes roofFlicker { 0%, 100% { opacity:.30; } 35% { opacity:.88; } 75% { opacity:.43; } }
@keyframes skyShimmer { 0%, 100% { opacity:.16; transform:scale(.76); } 50% { opacity:.65; transform:scale(1.16); } }
/* Movimientos casi imperceptibles de la escenografía. */
.campaignLogo { animation: xmasLevitate 9.2s ease-in-out infinite; }
.flake1 { animation: flakeSway 11s ease-in-out infinite alternate; }
.flake2 { animation: flakeSway 13s ease-in-out -3s infinite alternate-reverse; }
.flake3 { animation: twinkleSoft 7.2s ease-in-out infinite; }
.ornamentLeft img { transform-origin: center 8%; animation: ornamentSway 8s ease-in-out infinite alternate; }
.ornamentRight img { transform-origin: center 8%; animation: ornamentSway 9.3s ease-in-out -2s infinite alternate-reverse; }
.tinyStar { animation: goldenStar 6.5s ease-in-out infinite; }
@keyframes xmasLevitate { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-5px,0)} }
@keyframes flakeSway { 0%{transform:translate3d(0,0,0) rotate(-7deg)} 100%{transform:translate3d(4px,8px,0) rotate(8deg)} }
@keyframes ornamentSway { 0%{transform:rotate(-2deg)} 100%{transform:rotate(2deg)} }
@keyframes goldenStar { 0%,100%{opacity:.72;transform:scale(.95)} 50%{opacity:1;transform:scale(1.06)} }
/* La tarjeta del formulario respira con una luz cálida leve, nunca con flashes. */
.consult { animation: consultWarmth 8s ease-in-out infinite; }
@keyframes consultWarmth { 0%,100% { border-color:#e9c387; } 50% { border-color:#ffdfa4; } }
.effectsToggle { position:fixed;right:18px;bottom:18px;z-index:32;display:flex;gap:7px;align-items:center;padding:10px 13px;border:1px solid rgba(255,232,183,.65);border-radius:100px;background:rgba(5,64,39,.93);color:#fff;box-shadow:0 5px 22px #0a261633;backdrop-filter:blur(6px);font-size:11px;font-weight:800;transition:background .2s,transform .2s; }
.effectsToggle:hover { background:#0b7040;transform:translateY(-2px); }
.effectsToggleIcon { display:block;line-height:1;font-size:16px; }
.effectsToggle[aria-pressed="false"] { background:rgba(87,78,72,.87); }
/* Pausa en segundo plano, por preferencia o por control voluntario. */
html.effectsOff .snowDepthCanvas { display:none; }
html.effectsOff .campaignLogo,html.effectsOff .flake,html.effectsOff .ornament img,html.effectsOff .tinyStar,html.effectsOff .consult { animation:none!important; }
html.effectsOff .roofGlow,html.effectsOff .headerGlow,html.effectsOff .skyGlow { animation:none!important;opacity:.36; }
html.effectsOff .marqueeTrack { animation-play-state:paused; }
html.tabInactive .campaignLogo, html.tabInactive .roofGlow, html.tabInactive .headerGlow, html.tabInactive .skyGlow, html.tabInactive .flake, html.tabInactive .marqueeTrack { animation-play-state:paused; }
@media(max-width:730px) {
    .roofGlow:nth-child(2n) { display:none; }
  .headerGlow:nth-child(2n) { display:none; }
  .skyGlow:nth-child(n+6) { display:none; }
  .effectsToggle { right:10px;bottom:10px;padding:8px 10px;font-size:10px; }
  .roofGlow { width:4.2%; }
}
@media(prefers-reduced-motion:reduce) {
  .snowDepthCanvas,.headerFairyLine,.roofLights,.skySparkles,.effectsToggle { display:none!important; }
  .campaignLogo,.flake,.ornament img,.tinyStar,.consult { animation:none!important; }
}

/* Fondo cinematográfico Higgsfield: imagen original como fallback, MP4 sin bloquear la UI. */
.heroSky { overflow:hidden; }
.heroBackdropVideo {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
  pointer-events:none;
  opacity:1;
  transform:translateZ(0);
}
html.effectsOff .heroBackdropVideo { opacity:0; }
@media (prefers-reduced-motion:reduce) {
  .heroBackdropVideo { display:none!important; }
}