/* Estilos básicos para el cuerpo de la página */
body {
    font-family: sans-serif;
    margin: 0;
    background-color: #a7eec5;
}

/* ================================================
   ESTILOS PARA EL HEADER (ASUMO QUE YA LOS TIENES)
   ================================================
   Pega aquí los estilos de tu header si es necesario. 
   El siguiente código se enfoca en la nueva sección de la galería.
*/
.masthead {
    /* ... Tus estilos para el header aquí ... */
    background-color: #333;
    color: white;
    padding: 1rem;
}


/* =================================
   ESTILOS PARA LA GALERÍA DE IMÁGENES
   =================================
*/

/* Contenedor principal que divide la página en dos columnas */
.gallery-container {
    display: flex;
    padding: 0;
    height: 70vh;
    width: 98vw;
    gap: 20px; /* Espacio entre la barra lateral y la grilla */
}

/* Columna de categorías a la izquierda */
.gallery-sidebar {
    width: 200px; /* Ancho fijo para la barra de categorías */
    flex-shrink: 0; /* Evita que la barra se encoja */
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: fit-content; /* Se ajusta al alto de su contenido */
}

.gallery-sidebar h3 {
    margin-top: 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.category-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.category-list li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.category-list li a:hover {
    background-color: #f0f0f0;
}

/* Estilo para la categoría activa */
.category-list li a.active {
    background-color: #1E8449; /* Un color verde de tu logo */
    color: white;
    font-weight: bold;
}


/* Grilla de imágenes a la derecha */
.image-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* === CAMBIO AQUÍ === */
    /* `minmax(200px, 1fr)`: Las columnas tendrán un mínimo de 200px,
       pero no más de lo que permita el espacio disponible,
       y `auto-fill` creará tantas columnas como quepan.
       Esto es más flexible y a menudo mejor que un 'repeat(5, 1fr)' fijo. */
    gap: 20px;

    /* === AÑADIDO: Limita el ancho máximo de la grilla completa === */
    max-width: calc(7 * 20vh + 4 * 15px); /* 5 columnas de 200px + 4 gaps de 15px */
    /* Ajusta este valor si 200px por imagen es muy pequeño o grande. */
    margin: 0 auto; /* Para centrar la grilla si no ocupa todo el ancho disponible */
}

.image-item {
    /* Mantén el width al 100% para que ocupe el espacio de la grilla */
    width: 100%; 

    
    /* === CAMBIO CLAVE: Usa aspect-ratio para controlar la altura === */
    /* Por ejemplo, 4/3 es una proporción común para fotos, o 1/1 para cuadrados */
    aspect-ratio: 4/3; /* Esto hará que la altura sea 3/4 del ancho */
    /* Si prefieres cuadrados perfectos, usa aspect-ratio: 1/1; */
    
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.image-item img {
    width: 100%; 
    height: 100%; /* ¡Esencial! La imagen ahora ocupa el 100% de la altura del .image-item (que ya tiene una altura controlada por aspect-ratio) */
    object-fit: cover; 
    display: block; 
    transition: transform 0.3s ease; 
}

/* Efecto de zoom al pasar el ratón sobre la imagen */
.image-item img:hover {
    transform: scale(1.05);
}

/* Diseño responsivo para pantallas más pequeñas */
@media (max-width: 1024px) {
    .image-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablets */
    }
}

@media (max-width: 768px) {
    .gallery-container {
        flex-direction: column; /* Apila las columnas en móviles */
    }
    .gallery-sidebar {
        width: 100%; /* La barra de categorías ocupa todo el ancho */
        box-sizing: border-box;
    }
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
    }
}
header.masthead {
    padding: 4%;}

    /* --- ESTILOS PARA EL CARRUSEL SWIPER --- */

/* Contenedor principal del slider */
.mi-slider {
    width: 100%;
    height: 300px; /* Ajusta la altura según necesites */
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Estilo para cada slide (cada imagen) */
.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 100px;
    height: 50px;
    transition: transform 0.5s ease; /* Transición suave para el tamaño */
    transform: scale(0.7); /* Las imágenes por defecto son más pequeñas */
    opacity: 0.6; /* Hacemos más opacas las imágenes de los lados */
}

/* Estilo para la imagen ACTIVA (la del centro) */
.swiper-slide-active {
    transform: scale(1); /* La imagen del centro recupera su tamaño original */
    opacity: 1; /* Opacidad completa para la imagen central */
    z-index: 1;
}

/* Estilo para las imágenes dentro de los slides */
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit:contain  /* Asegura que la imagen cubra todo el espacio sin deformarse */
}

/* Estilos para las flechas de navegación (opcional) */
.swiper-button-next, .swiper-button-prev {
    color: #fff; /* Color de las flechas */
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 44px;
    height: 44px;
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 24px;
}