/* ===================================================================
 *  agua-y-saneamiento.css
 *  Estilos específicos y únicos para la página de Agua y Saneamiento.
 * =================================================================== */

/* --- Estilos Generales de Sección --- */
.section-padding { padding-top: 100px; padding-bottom: 100px; }
.section-title { font-size: 2.8rem; margin-bottom: 1rem; font-weight: 700; }
.subtitle { display: block; color: #011954; font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; letter-spacing: 1px; }

/* --- Cabecera de Página --- */
#page-header { position: relative; height: 50vh; min-height: 350px; background-image: url('../imagenes/cabecera.jpg'); background-size: cover; background-position: center center; display: flex; align-items: center; justify-content: center; text-align: center; }
#page-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); }
#page-header .page-title { position: relative; color: white; font-weight: 500; font-size: 3.5rem; }

/* --- Sección de Contadores Estilo "Alert" --- */
.counters-alert-section { padding-top: 60px; padding-bottom: 20px; }
.counters-alert-box { background-color: #011954; color: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(1, 25, 84, 0.3); }
.counters-alert-box .stat-item h3 { font-family: 'Rubik', sans-serif; font-size: 3.5rem; font-weight: 700; margin-bottom: 0; color: #ffffff; }
.counters-alert-box .stat-item p { font-size: 1rem; color: rgba(255, 255, 255, 0.8); margin-top: 5px; }

/* --- Galería de Imágenes Asimétrica (NUEVO) --- */
.asymmetric-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px; /* Altura base de cada fila de la cuadrícula */
    gap: 1.5rem; /* Espacio entre las imágenes */
}

.gallery-item {
    overflow: hidden;
    border-radius: 12px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La magia para que la imagen se adapte */
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Definiendo el tamaño y posición de cada item en la cuadrícula */
.gallery-item.item-1 {
    grid-column: 1 / 3; /* Ocupa desde la columna 1 hasta la 3 (2 columnas) */
    grid-row: span 2; /* Ocupa 2 filas de alto */
}
.gallery-item.item-2 {
    grid-column: 3 / 4; /* Ocupa la columna 3 */
    grid-row: span 1; /* Ocupa 1 fila de alto */
}
.gallery-item.item-3 {
    grid-column: 4 / 5; /* Ocupa la columna 4 */
    grid-row: span 1;
}
.gallery-item.item-4 {
    grid-column: 3 / 5; /* Ocupa las columnas 3 y 4 */
    grid-row: span 1;
}
.gallery-item.item-5 {
    grid-column: 1 / 3; /* Ocupa las columnas 1 y 2 */
    grid-row: span 1;
}

/* --- Responsive para la Galería --- */
@media (max-width: 991px) {
    .asymmetric-gallery {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
        grid-auto-rows: 300px;
    }
    /* Reseteamos el posicionamiento para que fluya naturalmente en 2 columnas */
    .gallery-item.item-1,
    .gallery-item.item-2,
    .gallery-item.item-3,
    .gallery-item.item-4,
    .gallery-item.item-5 {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 576px) {
    .asymmetric-gallery {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
}