/* navidad-2026 · EditorialPoint22 · decoración de Navidad temporal (14-nov-2026 → 6-ene-2027).
   Todo cuelga de html.nv, que solo pone navidad.js (y lo deja de poner solo el 7-ene-2027).
   Solo CSS + SVG en línea: sin imágenes, sin librerías, sin fuentes nuevas.
   Quitar: borrar la línea <!--navidad-2026--> de cada página (quitar.py). */
:root{--nv-on:1}

html.nv{--nv-h:36px;--nv-red:#A61E22;--nv-green:#1E5E45;--nv-gold:#E7B43C}

/* 1. Cinta superior. El hueco se reserva desde el CSS (sin saltos de maquetación);
      body::before la pinta al instante y navidad.js pone el enlace encima. */
html.nv body{padding-top:var(--nv-h)}
html.nv body::before,
.nv-cinta{position:absolute;top:0;left:0;right:0;height:var(--nv-h);
  background:var(--nv-red) radial-gradient(rgba(255,255,255,.16) 1.1px,transparent 1.7px) 0 0/18px 18px}
html.nv body::before{content:"";z-index:39}
.nv-cinta{z-index:40;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:0 16px;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;
  font:700 14.5px/1 "Nunito Sans",system-ui,Arial,sans-serif;letter-spacing:.01em}
.nv-cinta .nv-txt{overflow:hidden;text-overflow:ellipsis}
a.nv-cinta:hover .nv-txt{text-decoration:underline;text-underline-offset:3px}
a.nv-cinta:focus-visible{outline:3px solid var(--nv-gold);outline-offset:-3px}
.nv-cinta .nv-fl{color:var(--nv-gold);font-size:16px}
.nv-cinta .nv-ico{flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.6' y='8.6' width='14.8' height='9' rx='1.4' fill='none' stroke='white' stroke-width='1.6'/%3E%3Crect x='1.6' y='5.4' width='16.8' height='3.4' rx='1' fill='none' stroke='white' stroke-width='1.6'/%3E%3Cpath d='M10 5.4v12.2' stroke='%23E7B43C' stroke-width='2'/%3E%3Cpath d='M10 5.2C8 1.6 4.2 2.4 6 5.2M10 5.2c2-3.6 5.8-2.8 4 0' fill='none' stroke='%23E7B43C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* 2. Guirnalda de luces en el borde inferior de la cabecera (dentro de ella, no tapa contenido). */
html.nv body>header::after,
html.nv .stnav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:14px;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M0 3Q30 9 60 3Q90 9 120 3' fill='none' stroke='%231E5E45' stroke-width='1.2'/%3E%3Cg fill='%236b6459'%3E%3Crect x='13.8' y='4.6' width='2.4' height='2'/%3E%3Crect x='43.8' y='4.6' width='2.4' height='2'/%3E%3Crect x='73.8' y='4.6' width='2.4' height='2'/%3E%3Crect x='103.8' y='4.6' width='2.4' height='2'/%3E%3C/g%3E%3Cellipse cx='15' cy='9.4' rx='2.3' ry='3.1' fill='%23C62828'/%3E%3Cellipse cx='45' cy='9.4' rx='2.3' ry='3.1' fill='%23E7B43C'/%3E%3Cellipse cx='75' cy='9.4' rx='2.3' ry='3.1' fill='%232E7D57'/%3E%3Cellipse cx='105' cy='9.4' rx='2.3' ry='3.1' fill='%23F15A29'/%3E%3C/svg%3E") 0 100%/120px 14px repeat-x}

/* 3. Gorrito de Papá Noel sobre el «22» del logo (posición absoluta: no mueve nada). */
html.nv .brand b,
html.nv .bd b{position:relative}
html.nv .brand b::after,
html.nv .bd b::after{content:"";position:absolute;top:-.5em;right:-.42em;width:.78em;height:.68em;pointer-events:none;transform:rotate(14deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cpath d='M5 21Q9 5 22 4Q29 4 28.5 12Q25 8.5 23 21Z' fill='%23C62828'/%3E%3Crect x='3' y='19' width='22.5' height='6.5' rx='3.2' fill='white' stroke='%23d9d2c3' stroke-width='.8'/%3E%3Ccircle cx='28.3' cy='13.2' r='3.3' fill='white' stroke='%23d9d2c3' stroke-width='.8'/%3E%3C/svg%3E") center/contain no-repeat}

/* 4. Nieve quieta y muy suave en la cabecera de la página (home, ideas, fichas, EN, CA). */
html.nv .hero,
html.nv .ihero,
html.nv .ehero{position:relative;isolation:isolate}
html.nv .hero::before,
html.nv .ihero::before,
html.nv .ehero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180' viewBox='0 0 240 180'%3E%3Cg fill='none' stroke='%23B9A57A' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M24 30h12M30 24v12M25.8 25.8l8.4 8.4M34.2 25.8l-8.4 8.4'/%3E%3Cpath d='M193 55h14M200 48v14M195.1 50.1l9.8 9.8M204.9 50.1l-9.8 9.8'/%3E%3Cpath d='M145 135h10M150 130v10M146.5 131.5l7 7M153.5 131.5l-7 7'/%3E%3Cpath d='M66 120h8M70 116v8M67.2 117.2l5.6 5.6M72.8 117.2l-5.6 5.6'/%3E%3C/g%3E%3Cg fill='%23B9A57A'%3E%3Ccircle cx='120' cy='40' r='1.8'/%3E%3Ccircle cx='230' cy='150' r='1.6'/%3E%3Ccircle cx='15' cy='90' r='1.6'/%3E%3Ccircle cx='105' cy='85' r='1.4'/%3E%3Ccircle cx='185' cy='100' r='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/240px 180px repeat;
  opacity:.55;-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.25) 70%,transparent);mask-image:linear-gradient(#000,rgba(0,0,0,.25) 70%,transparent)}

/* 5. Ramita de acebo tras el primer título de cada sección.
      display:inline + vacío: no crea punto de corte, así nunca se queda sola en una línea. */
html.nv section h2:first-of-type::after{content:"";display:inline;padding-left:1em;margin-left:.08em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M12 12C7 6 2 8 1 5c3-1 8-1 11 7z' fill='%232E7D57'/%3E%3Cpath d='M12 12c5-6 10-4 11-7-3-1-8-1-11 7z' fill='%232E7D57'/%3E%3Ccircle cx='9.8' cy='13.2' r='2.6' fill='%23C62828'/%3E%3Ccircle cx='14.2' cy='13.6' r='2.6' fill='%23C62828'/%3E%3Ccircle cx='12' cy='10.6' r='2.6' fill='%23D93A3A'/%3E%3C/svg%3E") 100% 58%/min(.72em,30px) auto no-repeat}

/* Única animación: un brillo lento en el regalo de la cinta. Fuera si el usuario pide menos movimiento. */
@keyframes nv-brillo{0%,100%{opacity:1}50%{opacity:.55}}
html.nv .nv-cinta .nv-ico{animation:nv-brillo 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html.nv .nv-cinta .nv-ico{animation:none}}

/* Pantallas muy estrechas: cinta un poco más compacta. */
@media (max-width:360px){.nv-cinta{font-size:13.5px;gap:6px;padding:0 10px}}

/* Al imprimir, nada de decoración. */
@media print{
  html.nv body{padding-top:0}
  html.nv body::before,.nv-cinta,
  html.nv body>header::after,html.nv .stnav::after,
  html.nv .brand b::after,html.nv .bd b::after,
  html.nv .hero::before,html.nv .ihero::before,html.nv .ehero::before,
  html.nv section h2:first-of-type::after{display:none}
}