/* ============================================================================
   TEMA DE HALLOWEEN — estilos. Ver la explicación en halloween-tema.js.

   Todo cuelga de `html.tema-halloween`: sin esa clase, este archivo no hace
   nada. La clase la pone (y la saca) el JS.

   ⚠️ ES LA MISMA PÁGINA CON DETALLES, NO OTRA. Regla para lo que se agregue:
      nada cambia de tamaño ni de lugar, el verde sigue siendo el color de la
      liga y el azul no se pierde. El naranja y el violeta entran como ACENTO:
      en la luz del fondo, en un filo, en un brillo. Si algo de acá hace que
      un botón o un panel se lea distinto, está de más.
   ========================================================================= */
html.tema-halloween {
  --hw: #ff8a1f;          /* naranja de calabaza */
  --hw-2: #a05cff;        /* violeta */
  --line: #2a3228;        /* las mismas líneas, un pelo más cálidas */
  scrollbar-color: #6b3a12 #0b0f0d;
}

/* ---- el fondo: la misma noche de estadio, con luna de calabaza ----
   El verde de arriba a la derecha y el azul de arriba a la izquierda son los
   de siempre. Se suman la luz naranja de la luna y un resto violeta abajo. */
/* ⚠️ RENDIMIENTO: ESTE ARCHIVO SE REVISÓ ENTERO PARA QUE NO PESE (09/10/2026).
   El organizador pidió que el tema no le agregue lag a la página sin perder
   cómo se ve. La regla que quedó: LO QUE SE MUEVE, SE MUEVE SOLO CON
   `transform` Y `opacity`, que el navegador resuelve en la placa de video sin
   volver a dibujar nada. Lo que se sacó, y por qué:
     · `background-attachment: fixed` en el <body>: obligaba a repintar el
       fondo entero en cada paso del scroll. Ahora los degradados viven en la
       capa fija (.hwt), que no se repinta nunca.
     · `mix-blend-mode` en el grano: mezclar una capa a pantalla completa
       contra todo lo de atrás es de lo más caro que hay. Va con opacidad sola.
     · `filter: blur()` en nubes y niebla: un desenfoque sobre algo tan grande
       y que se mueve. Los bordes ya son un degradado suave; no hacía falta.
     · La vela de las calabazas animaba el dibujo POR DENTRO del SVG, que tiene
       una sombra encima: se recalculaba la sombra en cada cuadro. Ahora el
       dibujo está quieto y lo que titila es un resplandor aparte.
     · Las ventanas del caserón titilaban dentro de un SVG del ancho de la
       pantalla: se repintaba entero. Quedaron encendidas y quietas.
     · La mecha del menú animaba un degradado (repinta); ahora es un punto que
       se desliza.
     · Brasas y murciélagos: menos cantidad, y las brasas sin sombra.
   Si se agrega algo acá, que cumpla la regla de arriba. */
html.tema-halloween body { background: #0b0f0d; }

/* ---- la capa de adorno: fija, atrás de todo y sin clics ---- */
.hwt { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict;
  /* la misma noche de estadio: el verde arriba a la derecha y el azul arriba a
     la izquierda son los de siempre; se suman la luz naranja de la luna y un
     resto violeta abajo */
  background:
    radial-gradient(760px 460px at 86% -6%, rgba(255, 138, 31, .22), transparent 62%),
    radial-gradient(1100px 600px at 70% -8%, rgba(55, 194, 74, .13), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(69, 211, 255, .09), transparent 55%),
    radial-gradient(900px 620px at 0% 108%, rgba(160, 92, 255, .12), transparent 62%),
    radial-gradient(900px 560px at 100% 104%, rgba(255, 138, 31, .08), transparent 60%),
    linear-gradient(180deg, #0f1310 0%, #0b0f0d 42%);
}
.hwt > * { position: absolute; }

/* estrellas: quietas casi todas, alguna titila */
.hwt-estrellas { inset: 0; }
.hwt-estrellas i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #e9efe9; }
.hwt-estrellas i.titila { animation: hwtTitila 5s ease-in-out infinite; }

/* la luna, con su halo y sus cráteres */
.hwt-halo { right: calc(5vw - 150px); top: -66px; width: calc(clamp(110px, 13vw, 190px) + 300px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 160, 60, .2), rgba(255, 138, 31, .07) 42%, transparent 68%);
  animation: hwtRespira 9s ease-in-out infinite; }
.hwt-luna {
  right: 5vw; top: 84px; width: clamp(110px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 32%, rgba(150, 78, 10, .4) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 62%, rgba(150, 78, 10, .36) 0 13%, transparent 14%),
    radial-gradient(circle at 66% 28%, rgba(150, 78, 10, .28) 0 6%, transparent 7%),
    radial-gradient(circle at 34% 70%, rgba(150, 78, 10, .26) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 46%, rgba(150, 78, 10, .2) 0 4%, transparent 5%),
    radial-gradient(circle at 38% 34%, #fff0c2, #ffc163 46%, #e07a14 78%, #9c4a08);
  box-shadow: inset -10px -12px 26px rgba(90, 40, 4, .55), 0 0 50px 8px rgba(255, 150, 40, .25);
  opacity: .55;
}
/* nubes que le pasan por delante, muy despacio */
.hwt-nubes { inset: 0; }
.hwt-nubes i { position: absolute; left: -50vw; top: 96px; width: 50vw; height: 60px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(8, 10, 9, .82), rgba(8, 10, 9, .46) 34%, rgba(8, 10, 9, .14) 56%, transparent 72%);
  will-change: transform; animation: hwtNube 120s linear infinite; }
.hwt-nubes i:nth-child(2) { top: 150px; width: 64vw; height: 50px; animation-duration: 170s; animation-delay: -70s; opacity: .8; }
.hwt-nubes i:nth-child(3) { top: 50px; width: 42vw; height: 42px; animation-duration: 145s; animation-delay: -110s; opacity: .7; }

/* murciélagos (ver halloween-tema.js) */
.hwt-vuelo { inset: 0; }
.hwt-vuelo i { position: absolute; left: 0; top: var(--y); width: calc(40px * var(--s)); opacity: calc(.35 + .3 * var(--s));
  animation: hwtCruza var(--t) var(--d) linear infinite; }
.hwt-vuelo i.hwt-vuelve { animation-name: hwtVuelve; }
.hwt-vuelo b { display: block; animation: hwtPlanea var(--tb) ease-in-out infinite alternate; }
.hwt-vuelo svg { display: block; width: 100%; overflow: visible; fill: #040605; }
.hwt-ala { transform-box: fill-box; animation: hwtAlaI var(--ta) ease-in-out infinite alternate; }
.hwt-ala-i { transform-origin: 100% 88%; }
.hwt-ala-d { transform-origin: 0% 88%; animation-name: hwtAlaD; }

/* el horizonte: reja, lápidas y caserón */
.hwt-horizonte { left: 0; bottom: 0; width: 100%; height: clamp(120px, 20vh, 200px); opacity: .95; }
.hwt-vela { animation: hwtVela 1.9s ease-in-out infinite; }

/* las calabazas: dos grupos grandes, uno en cada esquina de abajo, delante de
   los árboles y del horizonte (ver HWT_CALABAZA en halloween-tema.js) */
.hwt-calabazas { inset: 0; }
.hwt-calabazas i { position: absolute; bottom: var(--y); width: var(--t); transform: rotate(var(--g)); transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .7)); }
.hwt-calabazas i.hwt-cal-i { left: calc(var(--x) - var(--t) / 2); }
.hwt-calabazas i.hwt-cal-d { right: calc(var(--x) - var(--t) / 2); }
.hwt-calabazas svg { display: block; width: 100%; overflow: visible; }
.hwt-calabazas .hwt-vela, .hwt-horizonte .hwt-vela { animation: none; }
/* la luz de la vela: un resplandor por delante y otro alrededor, que son los que titilan */
.hwt-calabazas i::before, .hwt-calabazas i::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  will-change: opacity; animation: hwtVela 1.6s var(--d) ease-in-out infinite; }
.hwt-calabazas i::before { inset: -22% -22% -14%; z-index: -1; background: radial-gradient(ellipse, rgba(255, 130, 20, .34), rgba(255, 110, 10, .12) 46%, transparent 70%); }
.hwt-calabazas i::after { inset: 34% 14% 8%; background: radial-gradient(ellipse, rgba(255, 226, 122, .5), rgba(255, 150, 40, .2) 48%, transparent 72%); }

/* árboles secos en las dos esquinas de abajo */
.hwt-arbol { bottom: -6px; height: min(58vh, 540px); width: auto; fill: none; stroke: #060907; stroke-linecap: round; opacity: .92;
  transform-origin: 50% 100%; animation: hwtViento 13s ease-in-out infinite alternate; }
.hwt-arbol-i { left: -40px; height: min(50vh, 460px); }
.hwt-arbol-d { right: -50px; animation-duration: 17s; animation-direction: alternate-reverse; }

/* niebla baja */
.hwt-niebla { left: 0; right: 0; bottom: 0; height: 38vh; }
.hwt-niebla i { position: absolute; left: -30%; bottom: -12%; width: 160%; height: 70%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(190, 200, 215, .12), rgba(190, 200, 215, .05) 44%, transparent 68%);
  will-change: transform; animation: hwtNiebla 44s ease-in-out infinite alternate; }
.hwt-niebla i + i { bottom: 6%; height: 52%; background: radial-gradient(ellipse at 50% 70%, rgba(255, 150, 60, .07), transparent 66%);
  animation-duration: 61s; animation-direction: alternate-reverse; }

/* brasas que suben meciéndose (el <i> sube, el <b> se hamaca) */
.hwt-brasas { inset: 0; }
.hwt-brasas i { position: absolute; left: var(--x); bottom: -12px; opacity: 0; animation: hwtBrasa var(--t) var(--d) ease-in infinite; }
.hwt-brasas i:nth-child(n+15), .hwt-vuelo i:nth-child(n+7) { display: none; }      /* 14 brasas y 6 murciélagos alcanzan */
.hwt-brasas b { display: block; width: calc(9px * var(--s)); height: calc(9px * var(--s)); border-radius: 50%;
  background: radial-gradient(circle, #ffd08a 0 22%, rgba(255, 130, 30, .55) 40%, transparent 70%); animation: hwtMece var(--tm) ease-in-out infinite alternate; }

/* textura: grano fino sobre todo el fondo, para que no sea un degradado liso */
.hwt-grano { inset: 0; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* y un oscurecido en los bordes, que junta todo */
.hwt-vineta { inset: 0; background: radial-gradient(ellipse at 50% 38%, transparent 46%, rgba(0, 0, 0, .5) 100%); }

/* telarañas en las esquinas de arriba, justo debajo del menú */
.hwt-tela { top: 64px; width: clamp(110px, 12vw, 190px); aspect-ratio: 1; opacity: .2; }
.hwt-tela svg { display: block; width: 100%; height: 100%; fill: none; stroke: #dfe8e2; stroke-width: .7; }
.hwt-tela-i { left: 0; }
.hwt-tela-d { right: 0; transform: scaleX(-1); }

/* ---- los acentos sobre la página de siempre ---- */
/* ⚠️ EL FILO DEL MENÚ ES UNA BRASA, NO UN ARCOÍRIS. La primera versión pasaba
   por violeta, naranja, verde y celeste: cuatro colores en fila se leen como
   una bandera, no como Halloween. Ahora es un solo color —naranja de
   calabaza— que nace y muere en oscuro, con un punto más encendido que lo
   recorre despacio, como una mecha. */
html.tema-halloween .nav { border-bottom-color: transparent; }
html.tema-halloween .nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #5c2204 8%, #d9480f 28%, #ff9a1f 50%, #d9480f 72%, #5c2204 92%, transparent);
  box-shadow: 0 0 10px rgba(255, 122, 24, .55), 0 0 22px rgba(255, 90, 20, .25);
  opacity: .9;
}
/* el punto encendido que la recorre: un elemento aparte que se desliza */
html.tema-halloween .nav::before {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 90px; height: 6px; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse, #ffe9a8, rgba(255, 170, 60, .6) 36%, transparent 70%);
  will-change: transform; animation: hwtMecha 9s ease-in-out infinite alternate;
}
html.tema-halloween .nav-links a.active, html.tema-halloween .nav-drop.active .nav-drop-b { box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .45); }
/* ⚠️ «LEAGUE» LLEVA EL COSMÉTICO «COLOR: CALABAZA» Y NADA MÁS. El mismo
   degradado (amarillo de vela → naranja → rojizo), el mismo resplandor y el
   mismo titilar de vela que tiene el nombre en la carta. LA LETRA ES LA DE
   SIEMPRE: se probó con la gótica del sobre, más grande, y el organizador la
   rechazó dos veces —era otra marca, y al ser más ancha «League» se caía a un
   segundo renglón, lejos de «Dioses»—. Lo que cambia es el color y que se
   mueve; el logo sigue siendo el logo.
   `white-space: nowrap` en el nombre entero: pase lo que pase con el ancho,
   las dos palabras van pegadas en el mismo renglón. */
html.tema-halloween .brand .brand-full { white-space: nowrap; }
html.tema-halloween .brand .sub {
  color: transparent; background: linear-gradient(180deg, #ffe38f, #ff9a1f 46%, #d9480f); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 .35em rgba(255, 140, 30, .8)); animation: hwtVela 1.6s ease-in-out infinite;
}
/* los paneles: un filo de luz naranja arriba, como si les diera la luna */
html.tema-halloween .panel { box-shadow: inset 0 1px 0 rgba(255, 150, 60, .2), var(--shadow, none); }
html.tema-halloween .panel-head { background-image: linear-gradient(90deg, rgba(255, 138, 31, .06), transparent 46%); }
/* el botón principal sigue siendo verde; el resplandor de abajo es naranja */
html.tema-halloween .btn-primary { box-shadow: 0 8px 22px -8px rgba(255, 138, 31, .7); }
html.tema-halloween ::selection { background: rgba(255, 138, 31, .4); color: #fff; }

/* ---- «NUEVO» sobre el enlace Sobres del menú (10/10/2026) ----
   Para que se vea que entró la colección de Halloween. Es un cartelito
   montado sobre la esquina del enlace: va con `position: absolute`, así que
   NO cambia el ancho del menú ni mueve nada (la barra ya se rompió tres veces
   por tocarle los tamaños). Se va solo: cuando la persona entra a Sobres ya no
   lo ve más (`hw-sobres-visto`, lo pone halloween-tema.js), y con el tema. */
html.tema-halloween:not(.hw-sobres-visto) .nav-links a[href$="sobres.html"],
html.tema-halloween:not(.hw-sobres-visto) .nav-mobile a[href$="sobres.html"] { position: relative; }
html.tema-halloween:not(.hw-sobres-visto) .nav-links a[href$="sobres.html"]::after,
html.tema-halloween:not(.hw-sobres-visto) .nav-mobile a[href$="sobres.html"]::after {
  content: "NUEVO"; position: absolute; top: -7px; right: -8px; z-index: 2; pointer-events: none;
  padding: 2px 5px; border-radius: 99px; font: 900 8.5px/1 var(--font, system-ui); letter-spacing: .08em;
  color: #1a0900; background: linear-gradient(180deg, #ffd27a, #ff8a1f);
  box-shadow: 0 0 0 1.5px #0b0f0d, 0 0 10px rgba(255, 138, 31, .7);
  transform: rotate(6deg); animation: hwtNuevo 2.4s ease-in-out infinite;
}
html.tema-halloween:not(.hw-sobres-visto) .nav-mobile a[href$="sobres.html"]::after { top: 50%; right: 14px; margin-top: -7px; transform: none; font-size: 10px; padding: 3px 7px; }
@keyframes hwtNuevo { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }

/* ---- el botón de la vista previa (solo mientras no es público) ---- */
.hwt-prueba {
  position: fixed; left: 14px; bottom: 14px; z-index: 80; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 99px; border: 1px solid rgba(255, 138, 31, .5); background: rgba(14, 10, 6, .92);
  color: #f1dcc6; font: 600 12.5px/1.2 var(--font); box-shadow: 0 10px 26px -10px #000; cursor: pointer;
}
.hwt-prueba b { color: #ffb25c; }
.hwt-prueba u { text-decoration: none; padding: 3px 8px; border-radius: 99px; background: rgba(255, 138, 31, .16); color: #ffcf96; font-weight: 800; }
.hwt-prueba:hover u { background: rgba(255, 138, 31, .3); }

/* ---- animaciones ----
   ⚠️ TODO DESPACIO Y CON ENTRADA Y SALIDA SUAVES. Es un fondo: si algo llama la
   atención más que el contenido, está mal. Lo único rápido es el aleteo. */
@keyframes hwtTitila { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }
@keyframes hwtRespira { 0%, 100% { opacity: .7; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes hwtNube { from { transform: translateX(0); } to { transform: translateX(210vw); } }
@keyframes hwtCruza { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }
@keyframes hwtVuelve { from { transform: translateX(110vw); } to { transform: translateX(-10vw); } }
/* planea: se hunde y remonta, inclinándose un poco */
@keyframes hwtPlanea { from { transform: translateY(calc(var(--bob) * -1)) rotate(-7deg); } to { transform: translateY(var(--bob)) rotate(6deg); } }
@keyframes hwtAlaI { from { transform: rotate(26deg); } to { transform: rotate(-40deg); } }
@keyframes hwtAlaD { from { transform: rotate(-26deg); } to { transform: rotate(40deg); } }
@keyframes hwtViento { from { transform: rotate(-.5deg); } to { transform: rotate(.7deg); } }
@keyframes hwtNiebla { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes hwtBrasa { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .8; } 65% { opacity: .45; } 100% { opacity: 0; transform: translateY(-105vh); } }
@keyframes hwtMece { from { transform: translateX(calc(var(--v) * -26px)); } to { transform: translateX(calc(var(--v) * 26px)); } }
@keyframes hwtMecha { from { transform: translateX(6vw); } to { transform: translateX(calc(94vw - 90px)); } }
@keyframes hwtVela { 0%, 100% { opacity: 1; } 22% { opacity: .7; } 37% { opacity: .95; } 61% { opacity: .76; } 80% { opacity: 1; } }

/* quien pidió menos movimiento se queda con el dibujo quieto */
@media (prefers-reduced-motion: reduce) {
  .hwt *, html.tema-halloween .brand .sub { animation: none !important; }
  .hwt-brasas, .hwt-vuelo { display: none; }
}
/* en el celular, menos cosas: la pantalla es chica y la batería también */
@media (max-width: 720px) {
  .hwt-arbol { height: 34vh; opacity: .7; }
  .hwt-horizonte { height: 110px; }
  /* en el celular, una sola calabaza grande por esquina y más chicas */
  .hwt-calabazas i { width: calc(var(--t) * .55); }
  .hwt-calabazas i:nth-child(n+2):not(:nth-child(4)) { display: none; }
  .hwt-calabazas i.hwt-cal-i { left: 4px; } .hwt-calabazas i.hwt-cal-d { right: 58px; }
  .hwt-tela { display: none; }
  .hwt-brasas i:nth-child(n+11), .hwt-vuelo i:nth-child(n+5) { display: none; }
  .hwt-prueba { left: 8px; bottom: 8px; font-size: 11.5px; }
  .hwt-prueba span { display: none; }      /* que no se meta abajo del botón del chat */
}