/* ==========================================================
   MATDISCOL · Temporada navideña (solo con la clase .navidad)
   ========================================================== */

/* Gorro de Navidad sobre el logo */
.navidad .logo-mark { position: relative; }
.navidad .logo-mark::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: -38%; top: -30%; width: 92%; height: 62%;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M9 34 C14 14 30 2 46 6 C54 8 58 16 57 24 C52 18 45 16 40 20 C35 24 34 30 34 34 Z' fill='%23d6142b'/%3E%3Cpath d='M46 6 C54 8 58 16 57 24 C55 21 52 19 49 18 C51 14 50 9 46 6Z' fill='%23a50e20' opacity='.55'/%3E%3Crect x='4' y='31' width='36' height='10' rx='5' fill='%23fff'/%3E%3Ccircle cx='57' cy='26' r='6' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-16deg); transform-origin: 70% 90%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18));
  animation: xmasGorro 4.5s ease-in-out infinite;
}
@keyframes xmasGorro { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(-10deg); } }

/* Guirnalda de luces */
.navidad .topbar, .navidad .gx-top { position: relative; }
.xmas-luces {
  position: absolute; left: 0; right: 0; bottom: -9px; height: 16px; z-index: 5; pointer-events: none;
  display: flex; justify-content: space-around; align-items: flex-start;
}
.xmas-luces::before { /* el cable */
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 10px;
  background: radial-gradient(ellipse 18px 6px at 17px 0, transparent 70%, rgba(30, 60, 40, .55) 72%, transparent 80%) repeat-x;
  background-size: 34px 10px;
}
.xmas-luces i {
  position: relative; width: 7px; height: 11px; border-radius: 50% 50% 45% 45%;
  background: var(--c); box-shadow: 0 0 8px 1px var(--c);
  animation: xmasLuz 2.4s ease-in-out infinite; animation-delay: var(--d);
}
.xmas-luces i::before { content: ""; position: absolute; left: 1px; top: -3px; width: 5px; height: 4px; border-radius: 1px; background: #2c3a30; }
@keyframes xmasLuz { 0%, 100% { opacity: 1; } 50% { opacity: .35; box-shadow: none; } }
.gx-top .xmas-luces { bottom: -8px; }

/* Etiqueta de temporada en el inicio de la tienda */
.xmas-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: linear-gradient(90deg, #0f6b3f, #1b8a52); color: #fff; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px;
}
.xmas-tag::before { content: "🎄"; font-size: 12px; letter-spacing: 0; }
.xmas-pie { color: inherit; }

/* Nieve */
.xmas-nieve { position: fixed; inset: 0; z-index: 91; pointer-events: none; }
.navidad .gate { z-index: 90; }
.navidad .gate ~ .xmas-nieve, .navidad .xmas-nieve { mix-blend-mode: normal; }

/* Detalles verdes y rojos en la pantalla de inicio */
.navidad .gx-glow { background: radial-gradient(closest-side, rgba(226, 0, 26, .28), rgba(15, 107, 63, .14) 55%, transparent); }
.navidad .gx-since i { background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .2); }

@media (prefers-reduced-motion: reduce) {
  .navidad .logo-mark::before, .xmas-luces i { animation: none; }
}
@media (max-width: 600px) {
  .xmas-luces i { width: 6px; height: 9px; }
}