/* ============================================
   Gallery - Sección y página de galería
   Fondo oscuro. Incluye: botones de filtro por
   categoría, grid de imágenes con hover overlay,
   y nota informativa sobre contenido futuro.
   ============================================ */

.section-gallery { background: var(--light); }
.section-gallery .section-title { color: var(--dark); }
.gallery-filters {
    display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; flex-wrap: wrap;
}
.filter-btn {
    padding: 10px 24px; border: 2px solid rgba(0,0,0,0.15); background: transparent;
    border-radius: 30px; font-weight: 700; font-size: 14px; cursor: pointer;
    transition: var(--transition); font-family: 'Lato', sans-serif; color: var(--text);
}
.filter-btn:hover, .filter-btn.active {
    background: var(--primary); color: var(--dark); border-color: var(--primary);
}
.gallery-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.gallery-item {
    position: relative; border-radius: 8px; overflow: hidden;
    cursor: pointer; aspect-ratio: 1;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: flex; align-items: center;
    justify-content: center; opacity: 0; transition: var(--transition);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay span { color: var(--white); font-weight: 700; font-size: 16px; }
.gallery-note {
    text-align: center; margin-top: 30px; padding: 20px;
    background: rgba(200,169,126,0.1); border-radius: 8px;
}
.gallery-note p { color: var(--text-light); font-size: 14px; }
.gallery-note i { color: var(--primary); margin-right: 8px; }