/* =========================================================================
   Ambientación de Navidad
   =========================================================================
   Esta hoja solo se pide cuando NavidadExpert.Encendida es verdadero, así que
   fuera de temporada no se descarga ni se parsea. Todo cuelga de body.nv, de
   todos modos, para que nada de acá pueda pisar a la tienda si algún día el
   archivo se incluye de más.

   La paleta no reemplaza a la de niddo: la Navidad entra como una capa
   encima -guirnalda, nieve, muñecos- y el catálogo se queda con sus colores.
   Si las fichas de producto se tiñeran de rojo, las prendas -que son lo que
   el comprador vino a mirar- dejarían de leerse.

   Los dos verdes y el rojo conviven con el azul y el rosa de la marca a
   propósito: el azul de niddo ya es un azul de invierno, así que las luces de
   la guirnalda incluyen el azul y el rosa de la casa entre las de colores.
   ========================================================================= */

.nv{
  --nv-rojo:#C8372E;
  --nv-rojo-dk:#9E2A22;
  --nv-pino:#2F6B4F;
  --nv-oro:#D9A334;
  --nv-nieve:#F4F8FF;
}

/* ---------- La nieve ----------
   Un canvas fijo, por encima del contenido y por debajo de los paneles: los
   copos caen delante de la página, como mirando por una ventana. Queda abajo
   del cajón (980) y del modal (1000) porque nieve sobre un diálogo abierto
   estorba la lectura justo cuando hay algo que decidir. */
.nv-nieve{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:940;pointer-events:none}

/* ---------- La guirnalda del encabezado ----------
   Colgada del borde de abajo del encabezado, que es pegajoso: así acompaña
   todo el scroll sin repetirse en cada pantalla.

   La dibuja el JS como un SVG y no es una imagen de fondo repetida, que es lo
   que era antes. Con una imagen las lamparitas no existen como elementos y no
   hay nada a lo que apuntarle con el mouse: para que se prenda la que tocás,
   cada una tiene que ser un nodo propio. */
body.nv header{overflow:visible}

.nv-guirnalda{
  position:absolute;left:0;right:0;top:100%;height:24px;z-index:3;
  pointer-events:none}

.nv-guirnalda svg{display:block;width:100%;height:100%}

/* Nada de la guirnalda recibe el mouse, ni siquiera las lamparitas.
   Cuelga 30 px POR ENCIMA del contenido: cualquier cosa de acá que reciba el
   puntero se come el clic de lo que tenga abajo, que en el catálogo es la
   fila de filtros. Quién está prendida lo decide el JS por cercanía y lo
   marca con .nv-prendida. */
.nv-luz{pointer-events:none}

.nv-luz .nv-bulbo{
  transition:filter .22s ease, transform .22s ease, opacity .22s ease;
  transform-box:fill-box;transform-origin:center;
  animation:nv-titileo 4s ease-in-out infinite}

.nv-luz .nv-halo{transition:opacity .3s ease;opacity:0}

/* animation:none y no animation-play-state:paused.
   Pausada, la animación SIGUE aplicando el valor donde quedó, y una animación
   le gana a una declaración normal en la cascada: la lamparita se agrandaba y
   el brillo del hover no llegaba nunca. Cortándola, la propiedad vuelve a
   estar libre y el hover manda. La transición de opacity le pone el fundido. */
.nv-luz.nv-prendida .nv-bulbo{
  animation:none;
  opacity:1;
  filter:brightness(1.5) saturate(1.35) drop-shadow(0 0 5px currentColor);
  transform:scale(1.32)}

.nv-luz.nv-prendida .nv-halo{opacity:.45}

/* El titileo de fondo va por opacity y no por filter, que es la propiedad que
   usa el hover: si las dos pelearan por filter, prender una lamparita a mano
   no se notaría. Cada una arranca con su propio retraso -se lo pone el JS-
   para que la guirnalda respire en vez de latir toda junta. */
@keyframes nv-titileo{
  0%,100%{opacity:.78}
  50%{opacity:1}}

/* ---------- El gorro del logo ----------
   Absoluto sobre la marca, no un hermano más del flex: el logo ya reparte
   marca y texto con gap, y un tercer hijo en el flujo correría el nombre de
   la tienda para la derecha. */
body.nv header .logo{position:relative}

/* Las medidas salen del logo, no del ojo. La marca mide 34 px de alto con un
   viewBox de 210x150, o sea escala 0,227. El antifaz va de y=62 a y=130, así
   que su borde de arriba cae a 14 px del tope de la marca, y de x=46 a x=164,
   o sea de 10,4 px a 37,2 px.

   Con el gorro a 26 px de ancho, el ala termina a 16,5 px de su propio tope:
   top:-2px la deja apoyada justo en esos 14 px. Antes estaba en -13px y el
   gorro flotaba arriba a la izquierda, sin tocar la cabeza. */
.nv-gorro{
  position:absolute;left:7px;top:-1px;width:26px;height:auto;
  transform:rotate(-14deg);transform-origin:62% 88%;
  pointer-events:none;
  animation:nv-gorro-tumbo 5s ease-in-out infinite}

@keyframes nv-gorro-tumbo{
  0%,100%{transform:rotate(-14deg)}
  50%{transform:rotate(-9deg) translateY(-1px)}}

/* El logo del encabezado ya respira solo (nd-breathe). Cuando se le pasa el
   mouse esa animación se pausa y la marca se agranda; el gorro tiene que
   acompañar o queda flotando al lado de un logo que se movió. */
body.nv header .logo:hover .nv-gorro{
  animation-play-state:paused;
  transform:rotate(-18deg) translate(0,-2px) scale(1.07)}

/* ---------- La banda del pie ----------
   Entre el contenido y el pie, donde ya no hay nada que comprar: los muñecos
   son lo último que se ve, no algo que se cruza mientras se mira un pijama. */
.nv-banda{
  position:relative;overflow:hidden;
  padding:46px 0 0;
  background:linear-gradient(180deg,#D9E4F7 0%,#ECF2FC 58%,#FBFCFF 100%)}

/* El bosque del fondo: dos filas, una atras mas chica y mas clara y otra
   adelante. Con una sola fila de un patron de 220 px, en una pantalla ancha se
   ve el mismo pino repetido veinte veces. Dos filas de anchos distintos -290 y
   390- no vuelven a coincidir en todo el ancho de la pantalla, asi que el
   patron deja de leerse.

   Translucidos y apoyados sobre la linea de la nieve: tienen que leerse como
   lejania, no competir con los munecos. */
.nv-cielo{
  position:absolute;inset:0;pointer-events:none;
  background-repeat:repeat-x, repeat-x;
  background-position:left bottom 34px, left bottom 42px;
  background-size:290px 78px, 390px 58px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='290' height='78'%3E%3Cg fill='%232F6B4F' opacity='.34'%3E%3Crect x='28' y='58' width='6' height='20'/%3E%3Cpath d='M31 6 L47 36 L15 36 Z'/%3E%3Cpath d='M31 22 L54 62 L8 62 Z'/%3E%3Crect x='105' y='64' width='5' height='14'/%3E%3Cpath d='M107.5 26 L119 48 L96 48 Z'/%3E%3Cpath d='M107.5 38 L124 68 L91 68 Z'/%3E%3Crect x='178' y='60' width='6' height='18'/%3E%3Cpath d='M181 12 L198 42 L164 42 Z'/%3E%3Cpath d='M181 28 L205 66 L157 66 Z'/%3E%3Crect x='252' y='66' width='5' height='12'/%3E%3Cpath d='M254.5 32 L265 52 L244 52 Z'/%3E%3Cpath d='M254.5 44 L270 70 L239 70 Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='58'%3E%3Cg fill='%232F6B4F' opacity='.16'%3E%3Cpath d='M24 10 L38 34 L10 34 Z'/%3E%3Cpath d='M24 22 L44 52 L4 52 Z'/%3E%3Cpath d='M96 18 L107 38 L85 38 Z'/%3E%3Cpath d='M96 28 L112 54 L80 54 Z'/%3E%3Cpath d='M168 6 L184 32 L152 32 Z'/%3E%3Cpath d='M168 20 L190 52 L146 52 Z'/%3E%3Cpath d='M246 16 L258 36 L234 36 Z'/%3E%3Cpath d='M246 26 L263 54 L229 54 Z'/%3E%3Cpath d='M322 10 L337 34 L307 34 Z'/%3E%3Cpath d='M322 24 L343 53 L301 53 Z'/%3E%3C/g%3E%3C/svg%3E")}

/* La nieve sobre la que se paran.

   Era un border-radius al 50%, y con la banda de mil y pico de pixeles de
   ancho ese arco se estira tanto que el borde sale una linea recta: la escena
   terminaba cortada por una regla horizontal. Ahora es un medano dibujado,
   estirado a lo ancho con preserveAspectRatio='none'. Deformar una loma de
   nieve a lo largo no se nota; deformar un pino si, por eso los pinos van
   repetidos y esto no.

   Del color del pie y no blanco puro: el pie arranca justo abajo, y con blanco
   quedaba una linea horizontal marcando donde termina el dibujo. Del mismo
   tono, la nieve y el pie son una sola superficie y los munecos se paran
   sobre ella. */
.nv-suelo{
  position:absolute;left:0;right:0;bottom:0;height:62px;
  background-repeat:no-repeat;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='62' viewBox='0 0 1200 62' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C90 14 170 34 268 26 C372 17 436 40 548 31 C664 21 726 42 846 32 C948 23 1032 41 1120 31 C1158 27 1180 30 1200 27 L1200 62 L0 62 Z' fill='%23FDF7F3'/%3E%3C/svg%3E")}

/* Mas angosto que el .wrap de la tienda, que son 1220 px.

   Con el ancho completo los dos munecos quedaban pegados a los bordes de la
   pantalla y en el medio sobraba medio metro de cielo vacio: no se leia como
   una escena, se leian como dos dibujos sueltos y un titulo perdido entre los
   dos. Juntandolos, el saludo queda entre ellos y la banda se compone. */
.nv-banda-in{
  position:relative;z-index:1;
  max-width:920px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding-bottom:30px}

.nv-banda .nv-fig{display:block;height:auto;flex-shrink:0}
.nv-banda .nv-casca{width:116px}
.nv-banda .nv-noel{width:158px}

/* align-self:center y no el flex-end de los hermanos.
   La fila se alinea abajo porque los munecos se paran en la nieve, y el
   saludo arrastrado con ellos quedaba a la altura de las rodillas, con la
   bajada metida entre los pinos. Centrado, queda a la misma altura que el
   medio de los munecos, que es donde lo busca el ojo. */
.nv-saludo{
  flex:1;align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  text-align:center}

.nv-saludo-1{
  font-size:clamp(1.6rem,4.4vw,2.6rem);font-weight:800;letter-spacing:-.6px;
  color:var(--nv-rojo);text-wrap:balance;line-height:1.1}

/* La tinta de la tienda, no el azul medio.
   El gris de --nd-muted esta calibrado contra el blanco; sobre el azul de la
   banda daba 2,6:1 y no se leia. Lo pase a --nd-blue-dk y queda en 3,7:1
   contra el tramo mas oscuro del degrade: mejor, pero sigue sin llegar al
   4,5:1 que pide AA para texto chico. Con --nd-ink da 8:1.
   (El titulo si pasa con el rojo: 4,1:1 y es texto grande, que necesita 3.) */
.nv-saludo-2{
  font-size:.95rem;color:var(--nd-ink)}

/* El pie trae un margen de arriba para despegarse del contenido suelto. Acá
   arriba ya no hay contenido suelto sino una banda de color: ese margen
   abriría una franja blanca entre dos bloques pintados, que es exactamente el
   hueco que se arregló en la portada. */
body.nv footer{margin-top:0}

/* ---------- Los muñecos se mueven ---------- */
.nv-saluda{
  transform-box:view-box;transform-origin:114px 112px;
  animation:nv-saludo 2.2s ease-in-out infinite}

@keyframes nv-saludo{
  0%,100%{transform:rotate(2deg)}
  50%{transform:rotate(-15deg)}}

.nv-banda .nv-noel{animation:nv-flota 4.4s ease-in-out infinite}

@keyframes nv-flota{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}}

/* ---------- El Grinch ----------
   Fijo abajo a la izquierda, no a la derecha: ahí viven los avisos
   (.nd-avisos, z-index 2000) y un muñeco atrás de un mensaje de error es
   justo lo que no se quiere.

   Queda medio afuera de la pantalla y se asoma cada tanto. El z-index lo deja
   atrás del cajón y del modal. */
/* Escondido NO recibe el mouse.
   De los 156 px del muneco quedan 31 asomando aunque este escondido, y esa
   franja esta fija abajo a la izquierda, encima de lo que haya ahi: en el
   catalogo cae sobre la grilla de talles, asi que hacer clic en un talle
   abria el Grinch en vez de filtrar. Recibe el mouse solo cuando esta a la
   vista y se sabe que esta ahi. */
.nv-grinch{
  position:fixed;left:-20px;bottom:0;width:134px;z-index:860;
  pointer-events:none;
  transform:translateY(80%) rotate(-5deg);
  transition:transform .55s cubic-bezier(.22,.9,.3,1.25)}

.nv-grinch.nv-asoma,
.nv-grinch.nv-feliz{pointer-events:auto;cursor:pointer}

.nv-grinch .nv-fig{display:block;width:100%;height:auto}
.nv-grinch.nv-asoma{transform:translateY(14%) rotate(-5deg)}

/* Si le hacen clic, sale entero y le crece el corazon. Es lo unico que le
   pasa al Grinch en todo el cuento, asi que es lo que tiene que pasar cuando
   alguien lo toca. Despues se vuelve a esconder solo. */
.nv-grinch.nv-feliz{transform:translateY(-4%) rotate(-2deg)}

.nv-corazon{
  transform-box:fill-box;transform-origin:center;
  transform:scale(0);opacity:0}

.nv-grinch.nv-feliz .nv-corazon{
  animation:nv-corazon 2.4s cubic-bezier(.3,1.4,.4,1) forwards}

/* Tres tirones y no uno: en el cuento el corazon le crece tres tallas. */
@keyframes nv-corazon{
   0%{transform:scale(0);opacity:0}
  18%{transform:scale(.55);opacity:1}
  34%{transform:scale(.42);opacity:1}
  52%{transform:scale(.85);opacity:1}
  66%{transform:scale(.72);opacity:1}
  82%{transform:scale(1.15);opacity:1}
  92%{transform:scale(1.05);opacity:1}
 100%{transform:scale(1.05);opacity:0}}

/* En el celular el ancho útil es todo: un muñeco fijo tapando la esquina
   inferior izquierda se come el botón de lo que haya ahí abajo. */
@media (max-width:900px){.nv-grinch{display:none}}

/* ---------- Pantallas chicas ---------- */
@media (max-width:760px){
  .nv-banda{padding-top:22px}
  .nv-banda-in{gap:10px;padding-bottom:20px}
  .nv-banda .nv-casca{width:62px}
  .nv-banda .nv-noel{width:84px}
  .nv-saludo-2{display:none}
  .nv-suelo{height:42px}
  .nv-cielo{background-position:left bottom 24px, left bottom 30px;
            background-size:200px 54px, 270px 40px}
  .nv-guirnalda{height:19px}
  .nv-gorro{width:22px;left:3px;top:-2px}
}

/* ---------- Quien pidió que no se mueva nada ----------
   La nieve la apaga el JS, que dibuja un cuadro quieto y no vuelve a tocar el
   canvas. Acá se frena todo lo demás. */
@media (prefers-reduced-motion:reduce){
  .nv-gorro,
  .nv-saluda,
  .nv-banda .nv-noel,
  .nv-luz .nv-bulbo{animation:none}
  .nv-grinch{transition:none}
  .nv-grinch.nv-feliz .nv-corazon{animation:none;transform:scale(1);opacity:1}
}