/* 
GALERÍA Y DESTACADOS FIX - Sobrescribe los estilos viejos de .section-galeria y .section-destacados
para que funcione con la nueva estructura HTML en index.php
*/

.section-galeria,
.section-destacados {
  padding: 7vw !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  height: auto !important;
}

.section-galeria header,
.section-destacados header {
  width: 100% !important;
  margin-bottom: 30px !important;
  grid-column: auto !important;
  place-self: auto !important;
}

.section-galeria header h2,
.section-destacados header h2 {
  font-size: 2.5rem !important;
  color: var(--main-green-color) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.5px !important;
  text-align: left !important;
  margin: 0 !important;
}

.section-galeria .galeria-grid,
.section-destacados .destacados-container {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 40px !important;
  place-items: auto !important;
}

.section-galeria > div:last-child,
.section-destacados > div:last-child {
  width: 100% !important;
  text-align: center !important;
  padding-top: 20px !important;
}

.section-galeria a,
.section-destacados a {
  display: inline-block !important;
  padding: 15px 45px !important;
  background-color: var(--main-green-color, #01a499) !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
  letter-spacing: 0.5px !important;
  grid-column: auto !important;
}

.section-galeria a:hover,
.section-destacados a:hover {
  filter: saturate(150%) !important;
  transform: translateY(-2px) !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .section-galeria .galeria-grid,
  .section-destacados .destacados-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .section-galeria,
  .section-destacados {
    padding: 20px !important;
  }
  
  .section-galeria .galeria-grid,
  .section-destacados .destacados-container {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  
  .section-galeria a,
  .section-destacados a {
    padding: 12px 30px !important;
    font-size: 14px !important;
  }
}