/* ============================================
   PERSONALIZACIÓN NAVIDEÑA 2025
   ============================================ */

/* Nieve cayendo - animación */
@keyframes snowfall {
  0% {
    transform: translateY(-10vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) translateX(20px);
    opacity: 0;
  }
}

/* Efecto de brillo en elementos */
@keyframes christmasGlow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
                 0 0 20px rgba(255, 215, 0, 0.6),
                 0 0 30px rgba(255, 215, 0, 0.4);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 215, 0, 1),
                 0 0 30px rgba(255, 215, 0, 0.8),
                 0 0 40px rgba(255, 215, 0, 0.6);
  }
}

/* Luces navideñas parpadeantes */
@keyframes christmasLights {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Animación de rotación para decoraciones */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animación de balanceo */
@keyframes swing {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* Contenedor de nieve */
.snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* Copos de nieve individuales */
.snowflake {
  position: absolute;
  top: -10px;
  color: white;
  font-size: 1em;
  user-select: none;
  animation: snowfall linear infinite;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/* Diferentes velocidades y posiciones para los copos */
.snowflake:nth-child(1) { left: 2%; animation-duration: 8s; animation-delay: 0s; font-size: 1.2em; }
.snowflake:nth-child(2) { left: 10%; animation-duration: 10s; animation-delay: 1s; font-size: 0.8em; }
.snowflake:nth-child(3) { left: 20%; animation-duration: 7s; animation-delay: 3s; font-size: 1em; }
.snowflake:nth-child(4) { left: 30%; animation-duration: 9s; animation-delay: 2s; font-size: 1.5em; }
.snowflake:nth-child(5) { left: 40%; animation-duration: 11s; animation-delay: 0.5s; font-size: 0.9em; }
.snowflake:nth-child(6) { left: 50%; animation-duration: 8.5s; animation-delay: 2.5s; font-size: 1.3em; }
.snowflake:nth-child(7) { left: 60%; animation-duration: 10.5s; animation-delay: 1.5s; font-size: 1.1em; }
.snowflake:nth-child(8) { left: 70%; animation-duration: 9.5s; animation-delay: 0.8s; font-size: 0.7em; }
.snowflake:nth-child(9) { left: 80%; animation-duration: 7.5s; animation-delay: 2.8s; font-size: 1.4em; }
.snowflake:nth-child(10) { left: 90%; animation-duration: 10.8s; animation-delay: 1.2s; font-size: 1em; }
.snowflake:nth-child(11) { left: 5%; animation-duration: 9.2s; animation-delay: 3.5s; font-size: 0.9em; }
.snowflake:nth-child(12) { left: 15%; animation-duration: 8.8s; animation-delay: 1.8s; font-size: 1.2em; }
.snowflake:nth-child(13) { left: 25%; animation-duration: 11.5s; animation-delay: 0.3s; font-size: 1.1em; }
.snowflake:nth-child(14) { left: 35%; animation-duration: 7.8s; animation-delay: 2.2s; font-size: 0.8em; }
.snowflake:nth-child(15) { left: 45%; animation-duration: 10.2s; animation-delay: 1.7s; font-size: 1.3em; }
.snowflake:nth-child(16) { left: 55%; animation-duration: 9.8s; animation-delay: 0.6s; font-size: 1em; }
.snowflake:nth-child(17) { left: 65%; animation-duration: 8.3s; animation-delay: 3.2s; font-size: 1.4em; }
.snowflake:nth-child(18) { left: 75%; animation-duration: 11.2s; animation-delay: 1.3s; font-size: 0.9em; }
.snowflake:nth-child(19) { left: 85%; animation-duration: 7.2s; animation-delay: 2.6s; font-size: 1.2em; }
.snowflake:nth-child(20) { left: 95%; animation-duration: 9.6s; animation-delay: 0.9s; font-size: 1.1em; }

/* Decoraciones navideñas en el header */
.christmas-decoration {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.christmas-light {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 8px;
  animation: christmasLights 1.5s infinite;
}

.christmas-light.red { background: #e74c3c; box-shadow: 0 0 10px #e74c3c; }
.christmas-light.green { background: #2ecc71; box-shadow: 0 0 10px #2ecc71; animation-delay: 0.5s; }
.christmas-light.blue { background: #3498db; box-shadow: 0 0 10px #3498db; animation-delay: 1s; }
.christmas-light.yellow { background: #f1c40f; box-shadow: 0 0 10px #f1c40f; animation-delay: 0.25s; }
.christmas-light.purple { background: #9b59b6; box-shadow: 0 0 10px #9b59b6; animation-delay: 0.75s; }

/* Contenedor de luces navideñas */
.christmas-lights-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 9998;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 5px;
}

/* Tema navideño para el header */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #e74c3c 0px,
    #e74c3c 40px,
    #2ecc71 40px,
    #2ecc71 80px,
    #f1c40f 80px,
    #f1c40f 120px,
    #3498db 120px,
    #3498db 160px
  );
  z-index: 10001;
}

/* Decoraciones en el logo */
.brand-logo-container {
  position: relative;
}

.brand-logo-container::before {
  content: '🎄';
  position: absolute;
  top: -8px;
  left: -8px;
  font-size: 20px;
  animation: swing 2s ease-in-out infinite;
  transform-origin: top center;
  z-index: 2;
}

.brand-logo-container::after {
  content: '⭐';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 18px;
  animation: rotate 4s linear infinite;
  z-index: 2;
}

/* Títulos con efecto navideño */
.section-title {
  position: relative;
}

.section-title::before {
  content: '🎅 ';
  animation: swing 3s ease-in-out infinite;
  display: inline-block;
  transform-origin: top center;
}

.section-title::after {
  content: ' 🎄';
  animation: swing 3s ease-in-out infinite;
  animation-delay: 1.5s;
  display: inline-block;
  transform-origin: top center;
}

/* Botones con tema navideño */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #c41e3a 0%, #165b33 100%) !important;
  border: 2px solid #ffd700 !important;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Cards con borde navideño */
.card {
  position: relative;
  border: 2px solid transparent;
  background-image: 
    linear-gradient(white, white),
    repeating-linear-gradient(
      45deg,
      #c41e3a 0px,
      #c41e3a 10px,
      #165b33 10px,
      #165b33 20px,
      #ffd700 20px,
      #ffd700 30px
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Emojis de las cards con efecto navideño */
.card-emoji {
  position: relative;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

/* Hero con nieve sutil en el fondo */
.hero {
  position: relative;
  background: linear-gradient(
    135deg,
    #f8f9fa 0%,
    #e8f5e9 25%,
    #fff3e0 50%,
    #fce4ec 75%,
    #f3e5f5 100%
  ) !important;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.6) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0.5;
}

/* Calendario con tema navideño */
.calendar-header {
  background: linear-gradient(
    135deg,
    rgba(196, 30, 58, 0.05) 0%,
    rgba(22, 91, 51, 0.05) 50%,
    rgba(255, 215, 0, 0.05) 100%
  ) !important;
  border: 3px solid rgba(196, 30, 58, 0.2) !important;
}

/* Estrellas decorativas */
.christmas-stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9997;
}

.christmas-star {
  position: absolute;
  color: #ffd700;
  font-size: 20px;
  animation: twinkle 2s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}

/* Posiciones aleatorias para las estrellas */
.christmas-star:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.christmas-star:nth-child(2) { top: 25%; left: 85%; animation-delay: 0.5s; }
.christmas-star:nth-child(3) { top: 45%; left: 15%; animation-delay: 1s; }
.christmas-star:nth-child(4) { top: 65%; left: 90%; animation-delay: 1.5s; }
.christmas-star:nth-child(5) { top: 80%; left: 25%; animation-delay: 0.8s; }
.christmas-star:nth-child(6) { top: 35%; left: 70%; animation-delay: 1.2s; }

/* Mensaje navideño flotante */
.christmas-message {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #c41e3a 0%, #165b33 100%);
  color: white;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 8px 32px rgba(196, 30, 58, 0.4);
  z-index: 9996;
  border: 2px solid #ffd700;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

.christmas-message::before {
  content: '🎄 ';
}

.christmas-message::after {
  content: ' ❄️';
}

/* Responsive - Reducir efectos en móviles */
@media (max-width: 768px) {
  .snowflake:nth-child(n+11) {
    display: none;
  }
  
  .christmas-star:nth-child(n+4) {
    display: none;
  }
  
  .christmas-message {
    font-size: 12px;
    padding: 8px 20px;
    top: 70px;
  }
  
  .section-title::before,
  .section-title::after {
    font-size: 0.8em;
  }
}

/* Efecto de escarcha en elementos */
.frost-effect {
  position: relative;
}

.frost-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Copos de nieve en el footer */
footer::before {
  content: '❄️ ✨ 🎄 ⭐ ❄️ ✨ 🎄 ⭐ ❄️ ✨ 🎄 ⭐';
  display: block;
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  animation: shimmer 3s ease-in-out infinite;
}