/* ============================================================================
   TEMA HALLOWEEN · «La Casa de las Travesuras» (sáb 31-10-2026)
   Va ENCIMA de styles.css y solo se carga mientras Ajustes → «Tema del sitio» = halloween
   y no pasó «Tema hasta» (lib/layout.js, temaActivo). La identidad de siempre no se toca:
   apagar el tema es no cargar esta hoja.
   Colores sacados del flyer: noche turquesa, niebla, globo rojo, calabaza y brasa.
   ============================================================================ */
@font-face{font-family:'Creepster';src:url('/fonts/Creepster-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

:root[data-tema="halloween"]{
  --ink:#04090B; --surface:#0A1518; --surface-2:#10201F; --line:rgba(150,215,210,.13);

  /* Las seis tintas toman los colores del flyer (mismo lugar, otra paleta) */
  --c-yellow:#FFB31A;   /* brasa */
  --c-orange:#FF7314;   /* calabaza */
  --c-magenta:#E0172B;  /* globo rojo */
  --c-cyan:#5BC2BE;     /* niebla */
  --c-lime:#9CC9C4;     /* bruma */
  --c-violet:#5A1F73;   /* crepúsculo */

  /* Acento funcional = el rojo del globo. Blanco sobre él da 4,9:1 (pasa AA). */
  --accent:#E0172B; --accent-2:#FF5263; --accent-deep:#9E0F1E;
  --sobre-acento:#fff;
  --accent-rgb:224,23,43; --accent-deep-rgb:158,15,30;
  --accent-glow:rgba(224,23,43,.55);

  --spectrum:linear-gradient(100deg,#FFB31A 0%,#FF7314 24%,#E0172B 48%,#5A1F73 72%,#5BC2BE 100%);
  /* Botón primario: brasa → calabaza → naranjo sangre, con tinta negra encima (5,9:1 en el extremo). */
  --spectrum-hot:linear-gradient(100deg,#FFB31A 0%,#FF7314 50%,#F2542D 100%);
  --info:#5BC2BE;
  --shadow-accent:0 14px 40px rgba(224,23,43,.32);
}

/* Fondo: niebla de luna arriba y faroles de calabaza abajo, en vez de las salpicaduras de colores. */
:root[data-tema="halloween"] body::before{
  background-image:
    radial-gradient(900px 520px at 50% -10%,rgba(91,194,190,.16),transparent 64%),
    radial-gradient(700px 440px at 6% 26%,rgba(18,58,64,.55),transparent 62%),
    radial-gradient(620px 380px at 96% 70%,rgba(255,115,20,.10),transparent 60%),
    radial-gradient(560px 360px at 2% 96%,rgba(255,115,20,.09),transparent 60%),
    radial-gradient(700px 420px at 70% 40%,rgba(224,23,43,.06),transparent 62%)}
/* Títulos de terror solo donde se leen grandes: el héroe, la ficha de la fiesta y los títulos de sección. */
:root[data-tema="halloween"] :is(.qts-hero h1,.hero-title,.section-head h2,.closer h2){
  font-family:'Creepster','Bebas Neue',sans-serif;font-weight:400;letter-spacing:.03em;
  text-shadow:0 0 34px rgba(224,23,43,.35)}
:root[data-tema="halloween"] .qts-hero h1{font-size:clamp(2.4rem,7.4vw,4.8rem);line-height:.98}
@media(max-width:640px){:root[data-tema="halloween"] .qts-hero h1{font-size:clamp(2rem,8.6vw,2.7rem)}}

/* Respaldo del héroe (sin WebGL o mientras carga): las mismas tintas del flyer. */
:root[data-tema="halloween"] .qts-hero::before{background:
  radial-gradient(52% 44% at 74% 22%,rgba(224,23,43,.40),transparent 66%),
  radial-gradient(46% 40% at 18% 30%,rgba(79,168,168,.34),transparent 66%),
  radial-gradient(44% 38% at 62% 78%,rgba(18,58,64,.70),transparent 66%),
  radial-gradient(34% 30% at 26% 84%,rgba(255,115,20,.24),transparent 64%),
  #020506}

/* Lo que traía el magenta escrito a mano en styles.css */
@media(hover:hover) and (pointer:fine){
  :root[data-tema="halloween"] .btn-primary:hover{box-shadow:0 18px 52px rgba(242,84,45,.45)}}
:root[data-tema="halloween"] .btn-primary:focus-visible{box-shadow:0 18px 52px rgba(242,84,45,.45)}
:root[data-tema="halloween"] .closer{background:linear-gradient(160deg,rgba(224,23,43,.16),rgba(18,58,64,.40) 45%,rgba(91,194,190,.10) 100%),var(--surface)}
:root[data-tema="halloween"] .oferta-card{
  background:linear-gradient(135deg,rgba(224,23,43,.22),rgba(18,58,64,.45) 55%,rgba(255,115,20,.08));
  box-shadow:0 0 0 1px rgba(224,23,43,.65) inset,0 24px 60px rgba(0,0,0,.55)}
:root[data-tema="halloween"] .hero-oferta{background:linear-gradient(90deg,rgba(224,23,43,.26),rgba(18,58,64,.5));border-color:rgba(224,23,43,.65)}

/* ───────── Telarañas y araña (23-10, «más inmersiva») ─────────
   .tema-deco va fija, del tamaño exacto de la pantalla y con overflow:hidden: nada se sale de los bordes
   (lo que se sale de una capa fija ensancha la página en iPhone). Va detrás del contenido (z-index -1) y se
   asoma en las esquinas. El héroe está aislado (isolation), así que lleva su propia copia (.tema-hero): ahí
   las telarañas y la araña quedan sobre el fondo animado y bajo los textos. Las telarañas se mecen apenas desde su esquina; la araña cuelga
   en el héroe y sube y baja de su hilo. Solo transform; con movimiento reducido, todo quieto. */
.tema-deco{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.tema-hero{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.td-tela{position:absolute;top:0;width:clamp(230px,52vw,470px);aspect-ratio:1;opacity:.34;
  filter:drop-shadow(0 0 6px rgba(91,194,190,.25))}
.td-izq{left:0;transform-origin:0 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23dcefec' stroke-linecap='round'%3E%3Cg%3E%3Cpath d='M0 0L306.0 0.0M0 0L300.4 58.4M0 0L283.7 114.6M0 0L253.7 171.1M0 0L212.6 220.1M0 0L162.2 259.5M0 0L104.7 287.5M0 0L47.9 302.2M0 0L0.0 306.0M34.0 0.0Q30.5 2.9 33.4 6.5M33.4 6.5Q29.3 8.7 31.5 12.7M31.5 12.7Q27.0 14.4 28.2 19.0M28.2 19.0Q23.4 19.7 23.6 24.5M23.6 24.5Q18.8 24.1 18.0 28.8M18.0 28.8Q13.4 27.5 11.6 31.9M11.6 31.9Q7.7 29.6 5.3 33.6M62.0 0.0Q55.5 5.3 60.9 11.8M60.9 11.8Q53.5 15.8 57.5 23.2M57.5 23.2Q49.3 26.2 51.4 34.7M51.4 34.7Q42.7 35.9 43.1 44.6M43.1 44.6Q34.4 44.0 32.9 52.6M32.9 52.6Q24.5 50.2 21.2 58.3M9.7 61.2Q4.4 55.6 0.0 62.0M94.0 0.0Q84.2 8.1 92.3 17.9M92.3 17.9Q81.1 24.0 87.2 35.2M87.2 35.2Q74.7 39.7 77.9 52.6M77.9 52.6Q64.8 54.4 65.3 67.6M65.3 67.6Q52.1 66.7 49.8 79.7M32.1 88.3Q21.2 81.9 14.7 92.8M14.7 92.8Q6.6 84.3 0.0 94.0M130.0 0.0Q116.5 11.2 127.6 24.8M127.6 24.8Q112.2 33.2 120.5 48.7M120.5 48.7Q103.3 54.9 107.8 72.7M107.8 72.7Q89.6 75.2 90.3 93.5M68.9 110.2Q51.3 105.2 44.5 122.2M44.5 122.2Q29.3 113.3 20.3 128.4M20.3 128.4Q9.2 116.6 0.0 130.0M170.0 0.0Q152.3 14.7 166.9 32.4M166.9 32.4Q146.7 43.5 157.6 63.7M157.6 63.7Q135.1 71.8 140.9 95.1M118.1 122.3Q94.2 120.6 90.1 144.2M90.1 144.2Q67.1 137.5 58.1 159.7M58.1 159.7Q38.3 148.1 26.6 167.9M26.6 167.9Q12.0 152.5 0.0 170.0M214.0 0.0Q191.7 18.5 210.1 40.8M210.1 40.8Q184.7 54.7 198.4 80.2M177.4 119.7Q147.5 123.8 148.7 153.9M148.7 153.9Q118.6 151.8 113.4 181.5M113.4 181.5Q84.4 173.1 73.2 201.1M73.2 201.1Q48.2 186.5 33.5 211.4M33.5 211.4Q15.1 192.0 0.0 214.0M262.0 0.0Q234.7 22.6 257.2 50.0M242.9 98.1Q208.2 110.7 217.2 146.5M217.2 146.5Q180.6 151.6 182.0 188.5M182.0 188.5Q145.2 185.8 138.8 222.2M138.8 222.2Q103.4 211.9 89.6 246.2M89.6 246.2Q59.0 228.3 41.0 258.8M41.0 258.8Q18.5 235.1 0.0 262.0M118 78Q126 120 121 168M58 152Q62 190 57 236' stroke-width='1.15' opacity='.9'/%3E%3Ccircle cx='121' cy='170' r='2.2' fill='%23dcefec' stroke='none' opacity='.8'/%3E%3Ccircle cx='57' cy='238' r='1.8' fill='%23dcefec' stroke='none' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.td-der{right:0;transform-origin:100% 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23dcefec' stroke-linecap='round'%3E%3Cg transform='translate(300,0) scale(-1,1)'%3E%3Cpath d='M0 0L306.0 0.0M0 0L300.4 58.4M0 0L283.7 114.6M0 0L253.7 171.1M0 0L212.6 220.1M0 0L162.2 259.5M0 0L104.7 287.5M0 0L47.9 302.2M0 0L0.0 306.0M34.0 0.0Q30.5 2.9 33.4 6.5M33.4 6.5Q29.3 8.7 31.5 12.7M31.5 12.7Q27.0 14.4 28.2 19.0M28.2 19.0Q23.4 19.7 23.6 24.5M23.6 24.5Q18.8 24.1 18.0 28.8M18.0 28.8Q13.4 27.5 11.6 31.9M11.6 31.9Q7.7 29.6 5.3 33.6M62.0 0.0Q55.5 5.3 60.9 11.8M60.9 11.8Q53.5 15.8 57.5 23.2M57.5 23.2Q49.3 26.2 51.4 34.7M51.4 34.7Q42.7 35.9 43.1 44.6M43.1 44.6Q34.4 44.0 32.9 52.6M32.9 52.6Q24.5 50.2 21.2 58.3M9.7 61.2Q4.4 55.6 0.0 62.0M94.0 0.0Q84.2 8.1 92.3 17.9M92.3 17.9Q81.1 24.0 87.2 35.2M87.2 35.2Q74.7 39.7 77.9 52.6M77.9 52.6Q64.8 54.4 65.3 67.6M65.3 67.6Q52.1 66.7 49.8 79.7M32.1 88.3Q21.2 81.9 14.7 92.8M14.7 92.8Q6.6 84.3 0.0 94.0M130.0 0.0Q116.5 11.2 127.6 24.8M127.6 24.8Q112.2 33.2 120.5 48.7M120.5 48.7Q103.3 54.9 107.8 72.7M107.8 72.7Q89.6 75.2 90.3 93.5M68.9 110.2Q51.3 105.2 44.5 122.2M44.5 122.2Q29.3 113.3 20.3 128.4M20.3 128.4Q9.2 116.6 0.0 130.0M170.0 0.0Q152.3 14.7 166.9 32.4M166.9 32.4Q146.7 43.5 157.6 63.7M157.6 63.7Q135.1 71.8 140.9 95.1M118.1 122.3Q94.2 120.6 90.1 144.2M90.1 144.2Q67.1 137.5 58.1 159.7M58.1 159.7Q38.3 148.1 26.6 167.9M26.6 167.9Q12.0 152.5 0.0 170.0M214.0 0.0Q191.7 18.5 210.1 40.8M210.1 40.8Q184.7 54.7 198.4 80.2M177.4 119.7Q147.5 123.8 148.7 153.9M148.7 153.9Q118.6 151.8 113.4 181.5M113.4 181.5Q84.4 173.1 73.2 201.1M73.2 201.1Q48.2 186.5 33.5 211.4M33.5 211.4Q15.1 192.0 0.0 214.0M262.0 0.0Q234.7 22.6 257.2 50.0M242.9 98.1Q208.2 110.7 217.2 146.5M217.2 146.5Q180.6 151.6 182.0 188.5M182.0 188.5Q145.2 185.8 138.8 222.2M138.8 222.2Q103.4 211.9 89.6 246.2M89.6 246.2Q59.0 228.3 41.0 258.8M41.0 258.8Q18.5 235.1 0.0 262.0M118 78Q126 120 121 168M58 152Q62 190 57 236' stroke-width='1.15' opacity='.9'/%3E%3Ccircle cx='121' cy='170' r='2.2' fill='%23dcefec' stroke='none' opacity='.8'/%3E%3Ccircle cx='57' cy='238' r='1.8' fill='%23dcefec' stroke='none' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
@keyframes td-mece{from{transform:rotate(-1.2deg)}to{transform:rotate(1.4deg)}}
.td-izq{animation:td-mece 7s var(--ease-in-out) infinite alternate}
.td-der{animation:td-mece 8.5s var(--ease-in-out) infinite alternate-reverse}

/* La araña (SVG en línea, lib/art.js → aranaSvg): baja por su hilo, rebota hasta asentarse, se queda respirando,
   tiene un susto y vuelve a subir (ciclo de 17 s). El hilo y el cuerpo se mecen como péndulo desde arriba, cada pata
   se mueve a su tiempo y los ojos laten. Fuera de pantalla (.fuera, lo pone fx3d.js) todo se pausa.
   En el teléfono descansa a la derecha del título: más abajo la tapaban las fichas de fecha y hora. */
.tema-arana{position:absolute;z-index:2;top:-280px;right:20%;width:120px;height:352px;margin-right:-60px;pointer-events:none;
  animation:ta-baja 17s infinite}
.ta-pendulo{position:absolute;inset:0;transform-origin:50% 0;animation:ta-pendulo 4.8s var(--ease-in-out) infinite alternate}
.ta-pendulo::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.2px;margin-left:-.6px;
  background:linear-gradient(rgba(220,239,236,0),rgba(220,239,236,.5) 35%,rgba(232,246,244,.7))}
.ta-cuerpo{position:absolute;left:50%;top:100%;width:76px;margin-left:-38px;aspect-ratio:140/150;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(224,23,43,.28))}
.ta-cuerpo .ar-svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes ta-baja{
  0%{transform:translate3d(0,-150px,0);animation-timing-function:cubic-bezier(.45,0,.2,1)}
  20%{transform:translate3d(0,14px,0);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  25%{transform:translate3d(0,-10px,0);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  30%{transform:translate3d(0,6px,0);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  35%{transform:translate3d(0,-2px,0);animation-timing-function:ease-in-out}
  40%,64%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  67%{transform:translate3d(0,-38px,0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  72%{transform:translate3d(0,-26px,0);animation-timing-function:cubic-bezier(.5,0,.5,1)}
  100%{transform:translate3d(0,-150px,0)}}
@keyframes ta-pendulo{from{transform:rotate(-1.6deg)}to{transform:rotate(1.8deg)}}
/* Patas: quietas casi todo el tiempo y un tirón corto cada tanto, cada una a su ritmo. */
.ar-pata{transform-box:fill-box;transform-origin:100% 0;animation:ar-pata 3.9s var(--ease-in-out) infinite}
.ar-p3,.ar-p4{transform-origin:100% 100%}
.ar-p1{animation-delay:-.4s}.ar-p2{animation-delay:-1.3s;animation-duration:4.6s}
.ar-p3{animation-delay:-2.2s;animation-duration:4.2s}.ar-p4{animation-delay:-3s;animation-duration:5.1s}
.ar-der.ar-p1{animation-delay:-2.6s}.ar-der.ar-p2{animation-delay:-.2s}.ar-der.ar-p3{animation-delay:-3.4s}.ar-der.ar-p4{animation-delay:-1.7s}
@keyframes ar-pata{0%,68%,100%{transform:rotate(0)}74%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}86%{transform:rotate(1.5deg)}}
.ar-abdomen{transform-box:fill-box;transform-origin:50% 0;animation:ar-respira 3.4s var(--ease-in-out) infinite alternate}
@keyframes ar-respira{from{transform:scale(1)}to{transform:scale(1.03)}}
.ar-ojos-halo{animation:ar-ojos 2.6s var(--ease-in-out) infinite alternate}
@keyframes ar-ojos{from{opacity:.12}to{opacity:.5}}
@media(min-width:900px){.tema-arana{right:47%;height:480px}.ta-cuerpo{width:112px;margin-left:-56px}}
.qts-hero.fuera .tema-arana,.qts-hero.fuera .tema-arana *{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){.td-izq,.td-der,.tema-arana,.tema-arana *{animation:none}}