/* RESET BÁSICO Y FUENTE */
body {
    font-family: 'Arial', sans-serif; /* Fuente limpia y profesional */
    margin: 0;
    padding: 0;
    background-color: #f4f4f9; /* Fondo muy claro */
    color: #333; /* Texto oscuro para buen contraste */
    line-height: 1.6;
}

/* ENCABEZADO */
.header {
    background-color: #487cb0; /* Color oscuro (azul marino/gris) profesional */
    color: white;
    padding: 60px 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* ESTILOS PARA EL LOGO EN EL ENCABEZADO */
.header-logo {
    max-width: 150px; /* Tamaño máximo del logo, puedes ajustarlo */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-bottom: 20px; /* Espacio debajo del logo */
    border-radius: 50%; /* Si quieres que el logo sea circular, si no, quita esta línea */
    background-color: white; /* Para que el logo se vea bien si es transparente en un fondo oscuro */
    padding: 10px; /* Espacio alrededor del logo dentro de su 'círculo' si lo hiciste circular */
}

.header h1 {
    margin: 0 0 10px;
    font-size: 2.5em;
}

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

/* CONTENEDOR DE LA GALERÍA CON CSS GRID */
.gallery-container {
    display: grid;
    /* Define 3 columnas de igual tamaño, mínimo 300px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; /* Espacio entre las imágenes */
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto; /* Centra el contenedor en la página */
}

/* ÍTEM INDIVIDUAL DE LA GALERÍA */
.gallery-item {
    overflow: hidden; /* Oculta el exceso si la imagen es muy grande */
    border-radius: 8px; /* Bordes redondeados sutiles */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    /* Efecto al pasar el ratón: levanta la caja y da más zoom */
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* IMAGEN DENTRO DEL ÍTEM */
.gallery-item img {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    height: 300px; /* Altura fija para uniformidad */
    object-fit: cover; /* Recorta la imagen para que cubra el área sin distorsionarla */
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.05); /* Ligerísimo zoom a la imagen en hover */
}

/* PIE DE PÁGINA */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}