/* ============================================================
   FUENTES PERSONALIZADAS - Colo Pro
   ============================================================ */

@font-face {
  font-family: 'Colo Pro';
  src: url('../fonts/Colo-Pro.eot');
  src: local('Colo Pro'), local('Colo-Pro'),
    url('../fonts/Colo-Pro.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Colo-Pro.woff') format('woff'),
    url('../fonts/Colo-Pro.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Colo Pro';
  src: url('../fonts/Colo-Pro-Black.eot');
  src: local('Colo Pro Black'), local('Colo-Pro-Black'),
    url('../fonts/Colo-Pro-Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Colo-Pro-Black.woff') format('woff'),
    url('../fonts/Colo-Pro-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

/* ============================================================
   Estilos personalizados del Festival Raíces
   ============================================================ */

/* Desplazamiento suave al hacer clic en los enlaces del menú */
html {
  scroll-behavior: smooth;
}

/* Deja un margen superior al saltar a una sección */
section[id] {
  scroll-margin-top: 5rem;
}

/* Animación sutil de aparición para las tarjetas */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animar {
  animation: fadeInUp 0.6s ease both;
}

/* Estilo del texto seleccionado */
::selection {
  background-color: #D81F26;
  color: #102652;
}

/* ============================================================
   Estilos adicionales para el slider
   ============================================================ */

/* Transición suave para el track del slider */
#sliderTrack {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Efecto hover en los botones del slider */
#sliderPrev,
#sliderNext {
  transition: all 0.3s ease;
  z-index: 20;
}

#sliderPrev:hover,
#sliderNext:hover {
  transform: translateY(-50%) scale(1.1);
}

/* Estilo de los puntos indicadores */
.dot {
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 20;
}

.dot:hover {
  transform: scale(1.2);
}

/* Mejora la legibilidad de los textos en las imágenes */
#slider .absolute .font-title {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Estilos de la cuenta regresiva
   ============================================================ */

#countdown > div {
  transition: transform 0.3s ease;
}

#countdown > div:hover {
  transform: translateY(-4px);
}

#countdown > div > div {
  transition: all 0.3s ease;
}

#countdown > div:hover > div {
  border-color: rgba(216, 31, 38, 0.4);
  box-shadow: 0 8px 30px rgba(216, 31, 38, 0.15);
}

/* Animación de pulso para los números */
@keyframes pulseNumber {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

#cd-days, #cd-hours, #cd-minutes, #cd-seconds {
  animation: pulseNumber 2s ease-in-out infinite;
}

/* Efecto de brillo */
#countdown > div > div {
  position: relative;
  overflow: hidden;
}

#countdown > div > div::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, transparent 40%, rgba(216, 31, 38, 0.1) 50%, transparent 60%);
  border-radius: 16px;
  z-index: -1;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Animación de pulso para "en vivo" */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================================
   Responsive - SLIDER CORREGIDO
   ============================================================ */

/* Desktop */
@media (min-width: 1025px) {
  #slider .relative {
    aspect-ratio: 21/9 !important;
  }
  
  #slider .relative img {
    object-fit: cover !important;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  #slider .relative {
    aspect-ratio: 16/9 !important;
  }
  
  #slider .relative img {
    object-fit: cover !important;
  }
}

/* Móvil - CORREGIDO */
@media (max-width: 640px) {
  /* Eliminar el padding-top que causaba problemas */
  #slider .relative {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    height: auto !important;
    padding-top: 0 !important;
  }
  
  #slider .relative img {
    object-fit: contain !important;
    background-color: #102652;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }
  
  /* Ajustar contenedor de imágenes en móvil */
  #slider .min-w-full {
    min-width: 100% !important;
    width: 100% !important;
  }
  
  /* Ajustar botones más pequeños en móvil */
  #sliderPrev,
  #sliderNext {
    padding: 6px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #sliderPrev svg,
  #sliderNext svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Puntos más pequeños en móvil */
  .dot {
    width: 8px !important;
    height: 8px !important;
  }
  
  /* Ajustar textos superpuestos en móvil */
  #slider .absolute.bottom-6.left-6 {
    bottom: 8px !important;
    left: 8px !important;
  }
  
  #slider .absolute .font-title {
    font-size: 0.9rem !important;
  }
  
  #slider .absolute .inline-block {
    font-size: 0.5rem !important;
    padding: 2px 8px !important;
  }
  
  /* Ajustes de cuenta regresiva en móvil */
  #countdown {
    gap: 6px !important;
  }
  
  #countdown > div > div {
    padding: 10px 2px !important;
  }
  
  #countdown > div > div > div:first-child {
    font-size: 1.8rem !important;
  }
  
  #countdown > div > div > div:last-child {
    font-size: 7px !important;
    letter-spacing: 0.05em !important;
  }
}