/* --- BANNER NAVIDEÑO --- */
.xmas-banner {
  position: relative;
  background: linear-gradient(135deg, #1b1b29, #13131c);
  border: 1px solid #29293a;
  padding: 1rem 1.3rem;
  border-radius: 14px;
  margin-bottom: 1.4rem;
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.92rem;
  color: #f5f5f5;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}

/* ANIMACIÓN SUAVE */
.xmas-banner {
  animation: xmasFade 0.8s ease-out;
}

@keyframes xmasFade {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* --- GORRO NAVIDEÑO ESQUINA IZQUIERDA PERFECTA --- */
.xmas-gorro {
  position: relative;
  overflow: visible;
}

.xmas-gorro::before {
  content: "";
  position: absolute;

  /* Ajustes finos para que quede pegado */
  top: -25px;   /* más arriba */
  left: -50px;  /* más hacia fuera */

  width: 110px;
  height: 110px;

  background-image: url('../img/gorro_navidad.png');
  background-size: contain;
  background-repeat: no-repeat;

  /* Inclinación natural hacia la izquierda */
  transform: rotate(-25deg);
  transform-origin: 15% 20%;

  pointer-events: none;
  z-index: 50;
}

/* ===== LUCES NAVIDEÑAS ===== */
.xmas-luces-banner {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 28px;              /* separación entre bombillas */
  margin: 1.5rem auto 0;
  padding-bottom: 2px;   /* cuelgan un poco más del cable */
  max-width: 280px;
  /* animation: sway 2.8s ease-in-out infinite;  movimiento de todo (desactivado) */
}

/* CABLE FINO Y ONDULADO */
.xmas-luces-banner::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 14px;
  border-top: 2px solid rgba(80, 80, 100, 0.7);
  border-radius: 50% / 100%;
  pointer-events: none;
}

/* BOMBILLAS */
.bulb {
  width: 14px;
  height: 18px;
  border-radius: 50% 50% 45% 45%;
  display: inline-block;
  position: relative;
  margin-top: 8px;   /* casi al final del cable */
  z-index: 2;        /* por encima del cablecito */

  /* Glow suave base (siempre encendidas) */
  animation: bulbGlow 1.6s ease-in-out infinite alternate;
}

/* PORTA-BOMBILLA */
.bulb::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 5px;
  background: #222;
  border-radius: 3px;
  z-index: 3; /* casquillo aún por encima del cablecito */
}

/* CABLECITO QUE BAJA A CADA BOMBILLA */
.bulb::after {
  content: "";
  position: absolute;
  top: -12px;                 /* toca el cable principal */
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 12px;               /* conecta bien con la bombilla */
  background: rgba(80, 80, 100, 0.7);
  border-radius: 2px;
  z-index: 1;                  /* por detrás de la bombilla */
}

/* COLORES Y GLOW (usa currentColor) */
.bulb.red {
  background: #ff4949;
  color: #ff4949;
}
.bulb.yellow {
  background: #ffd94a;
  color: #ffd94a;
}
.bulb.green {
  background: #63ff78;
  color: #63ff78;
}
.bulb.blue {
  background: #4ab6ff;
  color: #4ab6ff;
}

/* GLOW SUAVE (sin movimiento vertical) */
@keyframes bulbGlow {
  0% {
    opacity: 0.7;
    box-shadow: 0 0 4px currentColor;
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 12px currentColor;
  }
}

/* PARPADEO IRREGULAR (solo algunas) */
.bulb.blink-slow {
  animation: bulbGlow 1.6s ease-in-out infinite alternate,
             bulbFlicker 3s infinite;
}

.bulb.blink-fast {
  animation: bulbGlow 1.6s ease-in-out infinite alternate,
             bulbFlicker 1.9s infinite;
}

/* Flicker “random” (cortes de luz) */
@keyframes bulbFlicker {
  0%, 15%, 22%, 60%, 100% {
    opacity: 1;
    box-shadow: 0 0 12px currentColor;
  }
  16%, 18%, 24% {
    opacity: 0.15;
    box-shadow: 0 0 2px currentColor;
  }
  55% {
    opacity: 0.4;
    box-shadow: 0 0 4px currentColor;
  }
}

/* Balanceo del conjunto (guardado por si quieres reactivarlo) */
@keyframes sway {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(2.2deg); }
  100% { transform: rotate(0deg); }
}

/* Luces navideñas pantallas grandes */
/* 🔸 PANTALLAS GRANDES: más ancho, más luces y más separación */
@media (min-width: 900px) {

  /* Cable más largo */
  .xmas-luces-banner {
    max-width: 800px;     /* antes 280px */
    gap: 95px;            /* más separación entre bombillas */
    margin: 2.5rem auto 0;
    padding-bottom: 8px; /* queda más “colgante” */
  }

  /* El cable ondulado se estira */
  .xmas-luces-banner::before {
    border-top-width: 3px;
    border-radius: 50% / 80%;
  }

  /* Bombillas algo más grandes */
  .bulb {
    width: 16px;
    height: 21px;
    margin-top: 10px;
  }

  .bulb::before {
    width: 12px;
    height: 6px;
  }
  
  .bulb::after {
    height: 14px; /* cablecito más largo */
  }
}