/* Estilos simplificados para la lista de eventos */

/* Hero Section Modern Styles */
.hero-section-modern {
  font-family: 'Poppins', sans-serif;
}

.hero-typography h1, .hero-typography h2 {
  animation: fadeInUp 0.8s ease-out;
}

.search-form .form-control:focus {
  outline: none;
  box-shadow: 0 10px 40px rgba(242, 81, 52, 0.15) !important;
}

.search-form button:hover {
  background: #d63031 !important;
  transform: scale(1.05);
}

.hero-image-wrapper {
  transition: all 0.3s ease;
}

.hero-image-wrapper:hover {
  transform: rotate(0deg) scale(1.02);
}

/* Efectos hover para categorías circulares */
.category-item-circular:hover .category-circle {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 20px rgba(240, 85, 55, 0.25) !important;
}

.category-item-circular:hover span {
  color: #f05537 !important;
  font-weight: 700;
}

/* Efectos hover para botón de filtros avanzados */
#toggleAdvancedBtn:hover {
  background: #f05537 !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(240, 85, 55, 0.25) !important;
}

/* Efectos hover para formularios */
.form-select:focus {
  border-color: #f05537 !important;
  box-shadow: 0 0 0 0.2rem rgba(240, 85, 55, 0.25) !important;
}

.form-control:focus {
  border-color: #f05537 !important;
  box-shadow: 0 0 0 0.2rem rgba(240, 85, 55, 0.25) !important;
}

/* Animaciones */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animaciones suaves */
* {
  transition: all 0.3s ease;
}

/* Responsive Design */
@media (max-width: 991px) {
  .hero-section-modern {
    min-height: 60vh !important;
    padding: 60px 0 40px !important;
  }
  
  .hero-content-left {
    padding-right: 0 !important;
    text-align: center;
    margin-top: 30px;
  }
  
  .hero-typography h1, .hero-typography h2 {
    font-size: 2.8rem !important;
  }
  
  .hero-image-wrapper {
    transform: rotate(0deg) !important;
    margin-bottom: 20px;
  }
  
  .hero-image-wrapper img {
    height: 300px !important;
  }
}

@media (max-width: 768px) {
  .hero-typography h1, .hero-typography h2 {
    font-size: 2.2rem !important;
  }
  
  .hero-section-modern p {
    font-size: 1.1rem !important;
  }
  
  .search-section {
    max-width: 100% !important;
  }
  
  .search-form .input-group {
    height: 50px !important;
  }
  
  .search-form .form-control {
    padding: 15px 20px !important;
    font-size: 14px !important;
  }
  
  .search-form button {
    padding: 15px 20px !important;
  }
  
  .category-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
    gap: 15px !important;
  }
  
  .category-circle {
    width: 60px !important;
    height: 60px !important;
  }
  
  .category-circle i {
    font-size: 20px !important;
  }
}

@media (max-width: 576px) {
  .hero-typography h1, .hero-typography h2 {
    font-size: 1.8rem !important;
  }
  
  .hero-image-wrapper img {
    height: 250px !important;
  }
}