/* =====================================================================
   Navidad · tema de temporada de la web (preparado en oct. 2026). Se enciende a mano en el panel.
   Todo cuelga de dos atributos que pone tema.js en <html> antes de pintar: data-campana="navidad" (está encendido:
   se ve su interruptor) y data-navidad (el visitante lo ve). Sin ellos, esta hoja no cambia nada.
   La idea: el rojo de DonDulce ya es de Navidad, así que se queda; lo que llega es el invierno. Nieva sobre la web
   (en la portada, en las bandas rojas y en el pie), Dondulcín se cubre de nieve, una guirnalda de luces cuelga sobre
   la portada, brillan estrellas doradas, cruza una estrella fugaz y la página sigue en un manto de nieve. La acción
   pasa a verde abeto, solo con los tokens --accion* de styles.css.
   La nevada va sobre piezas de siempre (.hero, .band--red, .band--brand, .footer), así llega también a las bandas
   que se añadan a la web.
   ===================================================================== */

:root {
  --nv-abeto: #1d6a43;           /* la acción, con blanco encima (6,6:1) */
  --nv-abeto-hover: #14583a;
  --nv-abeto-borde: #1d6a43;     /* anillos y contornos (6,6:1 sobre blanco, 5,9:1 sobre gris) */
  --nv-abeto-texto: #1d6a43;
  --nv-oro: #f4c64f;             /* estrellas, luces, la nota */
  --nv-oro-claro: #ffe7a3;       /* el texto seleccionado (con tinta: 13,6:1) */
  --nv-noche: #143f2a;           /* la nota: un abeto de noche */
  --nv-nieve: #ffffff;
  --nv-sombra-nieve: #cfdbe5;    /* el filo de la nieve, para que se lea sobre blanco */
}
:root[data-theme="dark"] { --nv-abeto: #1f7a4d; --nv-abeto-hover: #186640; --nv-abeto-borde: #57c08a; --nv-abeto-texto: #6fd39c; }

/* 1 · La acción en verde abeto (sobre rojo, los botones siguen blancos con texto rojo) */
:root[data-navidad] {
  --accion: var(--nv-abeto);
  --accion-tinta: #fff;
  --accion-hover: var(--nv-abeto-hover);
  --accion-sombra: rgb(20 88 58 / 0.55);
  --accion-borde: var(--nv-abeto-borde);
  --accion-texto: var(--nv-abeto-texto);
  --accion-actual: var(--nv-noche);
}
:where(:root[data-navidad]) .nav__link::after,
:where(:root[data-navidad]) .nav__link[aria-current="page"]::after { background: var(--accion-borde); }
:root[data-navidad] ::selection,
:root[data-navidad] :is(.hero, .band--red, .band--brand, .footer, .menu) ::selection { background: var(--nv-oro-claro); color: #2b1a19; }
:root[data-navidad] :is(input, textarea) { caret-color: var(--nv-abeto); }

/* 2 · Dondulcín nevado: el grande del hero y del pie lleva nieve encima, recortada por su silueta (sigue sus
   lóbulos y gotea un poco) */
:root[data-navidad] .nv-mascota { visibility: visible; }
.nv-nevado__nieve { fill: var(--nv-nieve); }
.nv-nevado__filo { fill: none; stroke: var(--nv-sombra-nieve); stroke-width: 3; }

/* 3 · La nevada: dos capas de copos (lejos, pequeños y lentos; cerca, grandes y más rápidos), cada una un mosaico
   que baja exactamente un azulejo (300 px) y vuelve a empezar, sin costura. Detrás del contenido. */
:root[data-navidad] :is(.band--red, .band--brand) { position: relative; isolation: isolate; overflow: clip; }
:root[data-navidad] :is(.nv-cielo, .band--red, .band--brand, .footer:not(.footer--cosmos))::before,
:root[data-navidad] :is(.nv-cielo, .band--red, .band--brand, .footer:not(.footer--cosmos))::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -300px; height: calc(100% + 300px); pointer-events: none;
  background: url(../img/nv-nieve-lejos.svg) 0 0 / 300px 300px repeat;
}
/* la capa de cerca (copos grandes) solo en la portada: en las bandas y el pie, con más texto, basta la de lejos */
:root[data-navidad] .nv-cielo::after { background-image: url(../img/nv-nieve-cerca.svg); background-position: 140px 90px; }
:root[data-navidad] :is(.band--red, .band--brand, .footer:not(.footer--cosmos))::after { content: none; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-navidad] :is(.nv-cielo, .band--red, .band--brand, .footer:not(.footer--cosmos))::before { animation: nv-cae 30s linear infinite; }
  :root[data-navidad] :is(.nv-cielo, .band--red, .band--brand, .footer:not(.footer--cosmos))::after { animation: nv-cae 16s linear infinite; }
}
@keyframes nv-cae { to { translate: 0 300px; } }

/* 4 · La portada: guirnalda, destellos dorados, estrella fugaz y el manto de nieve donde sigue la página
   (temporada_navidad.cielo). Por encima de Dondulcín y por debajo de las magdalenas y del texto. */
.nv-cielo { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
:root[data-navidad] .nv-cielo[hidden] { display: block !important; }

.nv-guirnalda { position: absolute; left: 0; right: 0; top: 0; height: 60px; }
.nv-guirnalda svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; fill: none; stroke: #2a0f0d; stroke-width: 1.6; }
.nv-guirnalda--estrecha { display: none; }
@media (max-width: 760px) { .nv-guirnalda--ancha { display: none; } .nv-guirnalda--estrecha { display: block; } }
.nv-bombilla {
  --c: var(--nv-oro);
  position: absolute; left: var(--x); top: var(--y); width: 9px; height: 13px; margin: -1px 0 0 -4.5px;
  border-radius: 45% 45% 50% 50%; background: var(--c);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--c) 55%, transparent); /* taste-skill-ignore: la luz de la bombilla */
}
.nv-bombilla::before { content: ""; position: absolute; left: 2px; top: -3px; width: 5px; height: 4px; border-radius: 1px; background: #2a0f0d; }
.nv-bombilla--blanca { --c: #fff3d6; }
.nv-bombilla--verde { --c: #5cc08a; }
.nv-bombilla--ambar { --c: #ffb35c; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-navidad] .nv-bombilla { animation: nv-luce 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -0.37s); }
  /* encendido a mano: las luces se encienden una tras otra, una sola vez */
  :root[data-navidad].campana-prende .nv-bombilla { animation: nv-enciende 520ms ease-out both; animation-delay: calc(var(--i) * 45ms); }
}
@keyframes nv-luce { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes nv-enciende { from { opacity: 0.12; scale: 0.8; } 60% { opacity: 1; scale: 1.15; } }

.nv-destello { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; fill: var(--nv-oro); opacity: 0.95; }
@media (max-width: 860px) { .nv-destello { left: var(--mx); top: var(--my); } }
@media (prefers-reduced-motion: no-preference) {
  :root[data-navidad] .nv-destello { animation: nv-titila 3.6s ease-in-out var(--d) infinite; }
}
@keyframes nv-titila { 0%, 100% { opacity: 0.95; scale: 1; rotate: 0deg; } 50% { opacity: 0.35; scale: 0.65; rotate: 45deg; } }

/* la estrella fugaz: cruza el cielo una vez al cargar la portada (y al encender el tema) */
.nv-fugaz {
  position: absolute; left: 4%; top: 12%; width: 150px; height: 2px; border-radius: 2px; opacity: 0; rotate: 18deg; transform-origin: 100% 50%;
  background: linear-gradient(90deg, transparent, rgb(255 243 214 / 0.85)); /* taste-skill-ignore: la estela de la estrella */
}
.nv-fugaz::after { content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff8e6; box-shadow: 0 0 8px 2px rgb(255 230 160 / 0.8); } /* taste-skill-ignore */
@media (prefers-reduced-motion: no-preference) {
  :root[data-navidad] .nv-fugaz { animation: nv-cruza 1500ms cubic-bezier(0.3, 0.6, 0.3, 1) 1200ms both; }
}
@keyframes nv-cruza { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; translate: 46vw 15vw; } }
@media (max-width: 760px) { .nv-fugaz { left: 2%; top: 6%; width: 90px; } }

.nv-manto { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(26px, 4.2vw, 64px); max-width: none; fill: var(--paper); }

/* 5 · El interruptor (la forma, en temporada.css): nieve amontonada encima y una estrella dorada; encendido, a
   Dondulcín le cae la nieve en la cabeza. Y la nota, verde abeto de noche, con su nieve y su estrella. */
:root[data-campana="navidad"] .campana-btn--navidad { display: inline-grid !important; }
:root[data-campana="navidad"] .campana-pill--navidad { display: inline-flex !important; }
:is(.campana-btn--navidad, .campana-pill--navidad) .nv-nevado { opacity: 0; transition: opacity 240ms ease; }
:root[data-navidad] :is(.campana-btn--navidad, .campana-pill--navidad) .nv-nevado { opacity: 1; }
:is(.campana-btn--navidad, .campana-pill--navidad) .nv-nevado__filo { stroke-width: 12; }
/* la nieve caída encima: una capa dentro de la forma (recortada por su borde redondeado) que cubre lo de arriba y
   gotea un poco; el icono y el texto quedan por encima */
.nv-capa { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.nv-capa svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
.nv-capa--pill svg, .nv-capa--nota svg { height: 15px; }
.nv-capa__nieve { fill: var(--nv-nieve); }
.nv-capa__filo { fill: none; stroke: #b7c7d4; stroke-width: 1; vector-effect: non-scaling-stroke; }
/* sobre fondo claro (el botón gris, la píldora encendida) la nieve blanca no se ve: va en la sombra azulada de la nieve */
:root:not([data-theme="dark"]) .nv-capa--boton .nv-capa__nieve, .campana-pill[aria-pressed="true"] .nv-capa__nieve { fill: #e3ecf3; }
:root:not([data-theme="dark"]) .nv-capa--boton .nv-capa__filo, .campana-pill[aria-pressed="true"] .nv-capa__filo { stroke: #9db2c3; stroke-width: 1.3; }
:is(.campana-btn--navidad, .campana-pill--navidad) > :not(.nv-capa, .nv-boton__estrella), .campana-nota--navidad > :not(.nv-capa, .nv-nota__estrella) { position: relative; }
.nv-boton__estrella { position: absolute; top: -4px; right: -3px; width: 13px; height: auto; max-width: none; pointer-events: none; fill: var(--nv-oro); transition: rotate 420ms var(--ease-out), scale 420ms var(--ease-out); }
.campana-pill .nv-boton__estrella { top: -6px; right: 0.6rem; width: 15px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .campana-btn--navidad:hover .nv-boton__estrella { rotate: 90deg; scale: 1.25; }
}
.campana-nota--navidad {
  --nota-fondo: var(--nv-noche); --nota-texto: #e9f1ea; --nota-titulo: #fff;
  --nota-ok: var(--nv-oro); --nota-ok-texto: #2b1a19; --nota-ok-hover: #ffd76e; --nota-enlace: var(--nv-oro);
}
.nv-nota__estrella { position: absolute; top: -10px; left: 1.4rem; width: 18px; height: auto; max-width: none; fill: var(--nv-oro); }

@media (prefers-reduced-motion: reduce) {
  .nv-fugaz { display: none; }
  :is(.campana-btn--navidad, .campana-pill--navidad) .nv-nevado, .nv-boton__estrella { transition: none; }
}