/* =====================================================================
   Halloween 2026 · edición de temporada de la web.
   Solo se carga mientras _generador/campanas.py tiene la campaña activa, y todo cuelga de dos atributos que pone
   tema.js en <html> antes de pintar: data-campana="halloween" (en fechas: se ve el interruptor) y data-halloween
   (el tema, encendido). Sin ellos, esta hoja no cambia nada.
   La idea: la cara de Dondulcín ya va calada, como una calabaza; en Halloween se enciende por dentro con luz de vela,
   y la web cae al anochecer para que esa luz se vea. El rojo de marca sigue en las bandas, el logo y los precios; la
   acción (botones, flechas, lo elegido) pasa a naranja calabaza.
   ===================================================================== */

:root {
  --hw-luz: #ffb02e;            /* la cara encendida de los Dondulcín pequeños y del interruptor */
  --hw-luz-clara: #ffd98a;      /* el texto seleccionado (con tinta: 12,3:1) */
  --hw-brasa: #e8650f;          /* el cursor de los campos */
  --hw-calabaza: #f5821f;       /* relleno de la acción, siempre con tinta encima (6,4:1) */
  --hw-calabaza-hover: #ff9a3d; /* al pasar el ratón la calabaza se aviva (tinta: 7,9:1) */
  --hw-calabaza-borde: #d4600a; /* anillos, bordes e iconos sobre blanco (3,8:1) y gris (3,5:1) */
  --hw-calabaza-tinta: #a94505; /* naranja como texto sobre blanco (5,9:1) y gris (5,4:1) */
  --hw-tinta: #2b1a19;          /* la tinta de la casa, también de noche, sobre la calabaza */
  --hw-noche: #1f0605;          /* lo alto del cielo */
  --hw-murcielago: #170404;
}
:root[data-theme="dark"] { --hw-calabaza-borde: #f08a3a; --hw-calabaza-tinta: #ff9d4d; } /* sobre tarjeta: 7,6:1 */

/* 1 · El farol: el Dondulcín grande del hero y del pie. La luz va debajo de la mancha, que se vuelve translúcida, y se
   ve por los agujeros de la cara (campanas.farol); un halo alumbra alrededor y el corazón de la vela tiembla despacio,
   a destiempo, como una llama. */
:root[data-halloween] .farol { visibility: visible; }
:root[data-halloween] :is(.hero__mascot, .footer__mascot) { overflow: visible; }
:root[data-halloween] :is(.hero__mascot, .footer__mascot) .blob { fill: rgb(205 25 23 / 0.3); }
/* la lengua, delante de la luz, va en rojo brasa opaco (translúcida se volvía color barro) */
:root[data-halloween] :is(.hero__mascot, .footer__mascot) .tongue { fill: #7a120c; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-halloween] .farol__vela { animation: hw-vela 3.6s ease-in-out infinite; }
  :root[data-halloween] .farol__halo { animation: hw-halo 3.6s ease-in-out infinite; }
  :root[data-halloween] .footer__mascot :is(.farol__vela, .farol__halo) { animation-duration: 4.3s; animation-delay: -1.7s; }
  /* encendida a mano: la vela prende una vez, con dos chispazos, y se queda */
  :root.campana-prende .farol { animation: hw-prende 1100ms ease-out both; }
}
@keyframes hw-vela {
  0%, 100% { opacity: 0.88; }
  9% { opacity: 0.6; }
  15% { opacity: 0.96; }
  32% { opacity: 0.74; }
  47% { opacity: 1; }
  53% { opacity: 0.66; }
  69% { opacity: 0.93; }
  84% { opacity: 0.72; }
}
@keyframes hw-halo { 0%, 100% { opacity: 0.92; } 9%, 53% { opacity: 0.74; } 47% { opacity: 1; } }
@keyframes hw-prende {
  0% { opacity: 0; }
  14% { opacity: 0.75; }
  22% { opacity: 0.15; }
  38% { opacity: 0.9; }
  48% { opacity: 0.45; }
  70%, 100% { opacity: 1; }
}

/* 2 · Los Dondulcín pequeños (¿Hablamos?, la cesta vacía, el pedido, el idioma elegido…) llevan la misma luz en la
   cara, en plano: a ese tamaño, un degradado no se lee */
:root[data-halloween] :is(.close__mascot, .cart__mascot, .jobs-card__mascot, .checkout__mascot, .done__mascot, .lang__mascot) path[fill="#fff"] {
  fill: var(--hw-luz);
}

/* 3 · Luz de vela en lo que se selecciona y en el cursor de los campos */
:root[data-halloween] ::selection,
:root[data-halloween] :is(.hero, .band--red, .band--brand, .footer, .menu) ::selection { background: var(--hw-luz-clara); color: var(--hw-tinta); }
:root[data-halloween] :is(input, textarea) { caret-color: var(--hw-brasa); }

/* 4 · El anochecer. El hero de la portada es un cielo: noche arriba, el rojo de la marca encendido en el horizonte,
   detrás de las magdalenas. Las bandas rojas se apagan hacia abajo y el pie termina en noche, donde luce el farol.
   De noche (modo oscuro) el hero sube del negro del papel y vuelve a él, sin corte. Bizcochos Redondos conserva su
   propio cielo (.footer--cosmos). */
:root[data-halloween] .hero { background: linear-gradient(180deg, var(--hw-noche) 0%, #3f0a07 26%, #8e140d 62%, #d42117 100%); } /* taste-skill-ignore: la noche de la web: el degradado permitido de DESIGN.md */
:root[data-halloween][data-theme="dark"] .hero { background: linear-gradient(180deg, var(--paper) 0%, #2a0807 26%, #7d120c 62%, #a3160e 82%, var(--paper) 100%); } /* taste-skill-ignore */
:root[data-halloween]:not([data-theme="dark"]) .band--red { background: radial-gradient(140% 110% at 50% 0%, #b8170f 0%, #82110b 52%, #3a0907 100%); } /* taste-skill-ignore */
:root[data-halloween]:not([data-theme="dark"]) .band--brand { background: radial-gradient(140% 110% at 50% 0%, #d01f15 0%, #93140c 52%, #430a07 100%); } /* taste-skill-ignore */
:root[data-halloween] .footer:not(.footer--cosmos) { background: linear-gradient(180deg, #d42117 0%, #8e140d 46%, #2a0706 100%); } /* taste-skill-ignore */
:root[data-halloween][data-theme="dark"] .footer:not(.footer--cosmos) { background: linear-gradient(180deg, var(--paper) 0%, #6e110c 42%, var(--hw-noche) 100%); } /* taste-skill-ignore */

/* 5 · El cielo: unas pocas estrellas arriba, que titilan, y murciélagos que planean junto al farol (campanas.cielo).
   Siluetas planas y quietas salvo un vaivén lento; nunca encima de los titulares. En el pie, solo en escritorio. */
.hw-cielo { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
/* styles.css oculta [hidden] con !important: estas reglas, más específicas, lo levantan antes de pintar (sin saltos) */
:root[data-halloween] .hw-cielo[hidden] { display: block !important; }
.footer .hw-cielo { z-index: -1; }
:root[data-halloween] .footer--cosmos .hw-cielo[hidden] { display: none !important; }
.hw-star, .hw-bat { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; overflow: visible; }
.hw-star { fill: #ffe7bf; opacity: 0.8; }
.hw-bat { fill: var(--hw-murcielago); rotate: var(--r); opacity: 0.92; }
@media (max-width: 860px) {
  .hw-star, .hw-bat { left: var(--mx); top: var(--my); }
  :root[data-halloween] .hw-cielo--pie[hidden] { display: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-halloween] .hw-star { animation: hw-brilla 4.6s ease-in-out var(--d) infinite; }
  :root[data-halloween] .hw-bat { animation: hw-planea 6.8s ease-in-out var(--d) infinite; }
}
@keyframes hw-brilla { 0%, 100% { opacity: 0.8; scale: 1; } 50% { opacity: 0.25; scale: 0.7; } }
@keyframes hw-planea { 0%, 100% { translate: 0 0; } 50% { translate: 7px -10px; } }

/* La luna creciente, la telaraña de la esquina con su araña colgando del hilo (sube y baja despacio) y, al cargar la
   portada o encender el tema, una bandada que sale de detrás del farol y se pierde por el cielo (una vez). */
.hw-luna { position: absolute; left: 40.5%; top: 9%; width: clamp(2.6rem, 1.6rem + 2.2vw, 4.4rem); fill: #ffe7bf; opacity: 0.92; }
.hw-tela { position: absolute; top: 0; right: 0; width: clamp(7rem, 4rem + 9vw, 13rem); overflow: visible; fill: none; stroke: #ffe7bf; stroke-opacity: 0.34; stroke-width: 1; }
.hw-arana { --h: clamp(9rem, 6rem + 9vw, 15rem); position: absolute; top: 0; right: clamp(3.2rem, 1.6rem + 3.4vw, 5.6rem); width: 1.6rem; height: var(--h); }
.hw-arana__hilo { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: rgb(255 231 191 / 0.42); transform-origin: top; }
.hw-arana__cuerpo { position: absolute; left: 0; bottom: -0.8rem; width: 100%; overflow: visible; }
.hw-arana__g { fill: var(--hw-murcielago); }
.hw-arana__patas { fill: none; stroke: var(--hw-murcielago); stroke-width: 1.1; stroke-linecap: round; }
.hw-bandada { position: absolute; left: 76%; top: 38%; }
.hw-vuela { position: absolute; left: 0; top: 0; width: var(--w); max-width: none; height: auto; overflow: visible; fill: var(--hw-murcielago); stroke: var(--hw-calabaza-hover); stroke-opacity: 0.75; stroke-width: 1.2; stroke-linejoin: round; opacity: 0; }  /* el filo, alumbrado por el farol del que salen: sobre el negro de arriba se perderían */  /* su punto de salida mide 0: sin el max-width de la hoja base */
@media (max-width: 860px) {
  .hw-luna { left: 50%; top: 1.2%; }
  .hw-tela { width: 5.5rem; }
  .hw-arana { --h: 6.5rem; right: 2.1rem; }
  .hw-bandada { left: 78%; top: 70%; }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-halloween] .hw-arana__hilo { animation: hw-hilo 5.2s ease-in-out infinite; }
  :root[data-halloween] .hw-arana__cuerpo { animation: hw-baja 5.2s ease-in-out infinite; }
  :root[data-halloween] .hw-vuela { animation: hw-sale 3000ms cubic-bezier(0.3, 0.55, 0.35, 1) var(--d) both; }
  :root[data-halloween] .hw-vuela path { transform-box: fill-box; transform-origin: center; animation: hw-aletea 170ms ease-in-out infinite alternate; }
}
/* hilo y araña van a la vez: el hilo se estira un 18 % y la araña baja lo mismo */
@keyframes hw-hilo { 0%, 100% { scale: 1 1; } 50% { scale: 1 1.18; } }
@keyframes hw-baja { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--h) * 0.18); } }
@keyframes hw-sale {
  0% { opacity: 0; translate: 0 0; scale: 0.35; }
  12% { opacity: 0.95; }
  85% { opacity: 0.9; }
  100% { opacity: 0; translate: var(--tx) var(--ty); scale: 1; }
}
@keyframes hw-aletea { to { scale: 1 0.7; } }

/* 6 · La acción en calabaza: solo los tokens de styles.css (--accion*), así la siguen todos los componentes que los
   usan, también los que se añadan a la web. Sobre rojo, los botones siguen blancos; la calabaza lleva siempre tinta. */
:root[data-halloween] {
  --accion: var(--hw-calabaza);
  --accion-tinta: var(--hw-tinta);
  --accion-hover: var(--hw-calabaza-hover);
  --accion-sombra: rgb(232 101 15 / 0.65);
  --accion-borde: var(--hw-calabaza-borde);
  --accion-texto: var(--hw-calabaza-tinta);
  --accion-actual: var(--hw-tinta);
}
/* el subrayado del menú también al pasar el ratón (en styles.css es del color del texto) */
:where(:root[data-halloween]) .nav__link::after,
:where(:root[data-halloween]) .nav__link[aria-current="page"]::after { background: var(--hw-calabaza); }

/* 7 · El interruptor (la forma, en temporada.css): encendido, la cara de Dondulcín se ilumina; lleva una telaraña de
   esquina dentro del círculo y un murciélago posado en el borde, que levanta el vuelo un poco y aletea al pasar el
   ratón. Y la nota, de noche, con su murciélago. */
:root[data-campana="halloween"] .campana-btn--halloween { display: inline-grid !important; }
:root[data-campana="halloween"] .campana-pill--halloween { display: inline-flex !important; }
.campana-btn--halloween .campana-btn__luz, .campana-pill--halloween .campana-btn__luz { fill: transparent; transition: fill 240ms ease; }
:root[data-halloween] :is(.campana-btn--halloween, .campana-pill--halloween) .campana-btn__luz { fill: var(--hw-luz); }
.campana-btn__tela { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; pointer-events: none; }
.campana-btn__tela svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-opacity: 0.32; stroke-width: 0.9; }
.campana-btn__murcielago {
  position: absolute; top: -3px; right: -7px; width: 26px; height: auto; max-width: none; overflow: visible; fill: currentColor;
  rotate: 16deg; pointer-events: none; transition: translate 320ms var(--ease-out), rotate 320ms var(--ease-out);
}
.campana-btn__murcielago path { transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }
.campana-pill .campana-btn__murcielago { top: -5px; right: 0.9rem; width: 26px; rotate: -10deg; fill: var(--hw-murcielago); stroke: var(--hw-calabaza-hover); stroke-opacity: 0.8; stroke-width: 1.2; stroke-linejoin: round; }   /* sobre el rojo del menú y el blanco de la píldora */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .campana-btn:hover .campana-btn__murcielago { translate: 3px -2px; rotate: 4deg; }
  .campana-btn:hover .campana-btn__murcielago path { animation: hw-aletea 150ms ease-in-out 4 alternate; }
}
.campana-nota--halloween {
  --nota-fondo: var(--hw-noche); --nota-texto: #f3dcbc; --nota-titulo: #fff3dd;
  --nota-ok: var(--hw-calabaza); --nota-ok-texto: var(--hw-tinta); --nota-ok-hover: var(--hw-calabaza-hover); --nota-enlace: var(--hw-luz);
}
.hw-nota__murcielago {
  position: absolute; top: -15px; left: 1.1rem; width: 40px; height: auto; max-width: none; overflow: visible; rotate: -8deg;
  fill: var(--hw-murcielago); stroke: var(--hw-calabaza-hover); stroke-opacity: 0.75; stroke-width: 1.2; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .campana-btn--halloween .campana-btn__luz { transition: none; }
}