/* Importar fuentes de Google Fonts (opcional, pero mejora la estética) */
/* Puedes ir a fonts.google.com y elegir tus fuentes, luego pegas aquí el @import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@700&display=swap');


/* Estilos Generales del Cuerpo */
body {
    font-family: 'Montserrat', sans-serif; /* Fuente principal */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0; /* Fondo suave */
    color: #333;
    overflow-x: hidden; /* Evita el scroll horizontal */
}

/* Encabezado */
header {
    background: linear-gradient(to right, #444, #222); /* Degradado oscuro */
    color: #fff;
    padding: 2em 0;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

header h1 {
    font-family: 'Playfair Display', serif; /* Fuente para el título principal */
    margin-bottom: 0.5em;
    font-size: 2.8em;
    letter-spacing: 2px;
}

header p {
    font-size: 1.2em;
    opacity: 0.9;
}

/* Contenedor de la Galería (Grid Layout) */
.gallery-container {
    display: grid;
    /* Columnas responsivas: mínimo 280px de ancho, flexible para llenar el espacio */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px; /* Espacio entre los elementos de la galería */
    padding: 30px;
    max-width: 1300px; /* Ancho máximo del contenedor para mantener el diseño centrado */
    margin: 30px auto; /* Centra el contenedor en la página */
}

/* Elemento Individual de la Galería */
.gallery-item {
    background-color: #fff;
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Asegura que el contenido se recorte si excede los bordes */
    text-align: center;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15); /* Sombra suave para efecto de elevación */
    /* Transiciones suaves para efectos hover y JavaScript */
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out, opacity 0.6s ease-out, transform 0.6s ease-out;

    /* Estado inicial para la animación de JavaScript (script.js) */
    opacity: 0; /* Por defecto oculto si JavaScript está activo */
    transform: translateY(20px); /* Un poco desplazado hacia abajo */
    /* Estas propiedades son anuladas por la clase .fade-in */
}

/* Efecto Hover para el Elemento de Galería */
.gallery-item:hover {
    transform: translateY(-8px) scale(1.02); /* Efecto de elevación y ligero zoom */
    box-shadow: 0 12px 25px rgba(0,0,0,0.25); /* Sombra más pronunciada al hacer hover */
}

/* Contenedor del Enlace de la Imagen (para control de tamaño y recorte) */
.gallery-item a {
    display: block; /* Importante para que height y width funcionen bien */
    height: 250px; /* Altura fija para la zona de la imagen */
    width: 100%; /* Ocupa todo el ancho disponible */
    overflow: hidden; /* Recorta la imagen si es demasiado grande */
    line-height: 0; /* Elimina cualquier espacio extra debajo de las imágenes */
}

/* Estilos de la Imagen en sí */
.gallery-item img {
    width: 100%; /* La imagen ocupa el 100% del ancho de su contenedor <a> */
    height: 100%; /* La imagen ocupa el 100% de la altura de su contenedor <a> */
    object-fit: cover; /* Recorta la imagen para que llene el contenedor sin distorsionarse */
    display: block; /* Elimina márgenes extra que los navegadores pueden añadir a las imágenes */
    margin: 0; /* Asegura que no haya márgenes por defecto */
    padding: 0; /* Asegura que no haya padding por defecto */
    transition: transform 0.5s ease-in-out; /* Transición suave para el efecto zoom al hacer hover */

    /* <<-- REGLAS DE DEPURACIÓN TEMPORALES (ELIMINAR DESPUÉS DE SOLUCIONAR) -->> */
    /* Esto es para asegurar la visibilidad. Si funciona, podrías intentar eliminarlas. */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    /* <<-- FIN REGLAS DE DEPURACIÓN TEMPORALES -->> */
}

/* Efecto Zoom al hacer hover sobre la Imagen */
.gallery-item a:hover img {
    transform: scale(1.1); /* Ligeramente más grande al hacer hover */
}

/* Título y Descripción del Dibujo */
.gallery-item h2 {
    font-size: 1.5em;
    margin: 15px 10px 5px;
    color: #444;
}

.gallery-item p {
    font-size: 0.95em;
    color: #666;
    padding: 0 15px 15px;
    margin-top: 0;
}

/* Pie de Página */
footer {
    text-align: center;
    padding: 2em 0;
    background-color: #333;
    color: #aaa;
    margin-top: 40px;
    font-size: 0.9em;
}

/* --- Media Queries para Responsividad (Ajustes para diferentes tamaños de pantalla) --- */

/* Pantallas medianas (ej. tablets en horizontal) */
@media (max-width: 992px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
        padding: 20px;
    }
    header h1 {
        font-size: 2.2em;
    }
}

/* Pantallas pequeñas (ej. tablets en vertical, smartphones grandes) */
@media (max-width: 768px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 15px;
        padding: 15px;
    }
    .gallery-item h2 {
        font-size: 1.3em;
    }
    .gallery-item p {
        font-size: 0.9em;
    }
}

/* Pantallas muy pequeñas (ej. smartphones) */
@media (max-width: 480px) {
    .gallery-container {
        grid-template-columns: 1fr; /* Una sola columna */
        padding: 10px;
    }
    .gallery-item {
        margin: 0 auto; /* Centra los elementos individuales */
        max-width: 350px; /* Ancho máximo para evitar que se estiren demasiado */
    }
    header h1 {
        font-size: 1.8em;
    }
    header p {
        font-size: 1em;
    }
}

/* --- CLASE PARA LA ANIMACIÓN JAVASCRIPT --- */
/* Esta clase se añade por script.js para que los elementos aparezcan */
.gallery-item.fade-in {
    opacity: 1 !important; /* Es crucial para que la imagen se vea */
    transform: translateY(0) !important; /* Devuelve el elemento a su posición original */
}