/*.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 15%;*/
/* Margen del 20% a ambos lados */
/*}

    .image-container .column {
        flex: 1 1 calc(50% - 2%);*/
/* 50% del ancho menos el margen horizontal */
/*margin-bottom: 2%;*/
/* Margen vertical entre im�genes */
/*}

    .image-container img {
        width: 100%;
        height: auto;
        display: block;
    }

@media (max-width: 768px) {*/
/* Vista para tabletas y m�viles */
/*.image-container {
        margin: 0 20%;*/
/* Mantiene el margen del 20% */
/*}

        .image-container .column {
            flex: 1 1 100%;*/
/* Ocupa el 100% del ancho */
/*}
}*/


/*.container {
    width: 60%;*/
/* Margen del 20% a ambos lados (100% - 2*20% = 60%) */
/*margin: 0 auto;
    padding: 20px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2%;
    margin-bottom: 20px;
}

    .image-grid img {
        width: 100%;
        height: auto;
        display: block;
    }*/

/* Media query para tabletas */
/*@media screen and (max-width: 768px) {
    .container {
        width: 90%;*/
/* Margen del 5% a ambos lados (100% - 2*5% = 90%) */
/*}

    .image-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}*/

/* Media query para m�viles */
/*@media screen and (max-width: 480px) {
    .container {
        width: 90%;*/
/* Margen del 5% a ambos lados (100% - 2*5% = 90%) */
/*}

    .image-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}*/




/*.container {
    width: 60%;*/
/* Margen del 20% a ambos lados (100% - 2*20% = 60%) */
/*margin: 0 auto;
    padding: 20px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2%;
    margin-bottom: 20px;
}

    .image-grid img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.3s ease;*/
/* A�ade transici�n suave */
/*}

        .image-grid img:hover {
            transform: scale(1.1);*/
/* Aumenta el tama�o al 110% */
/*}*/

/* Media query para tabletas */
/*@media screen and (max-width: 768px) {
    .container {
        width: 90%;*/
/* Margen del 5% a ambos lados (100% - 2*5% = 90%) */
/*}

    .image-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}*/

/* Media query para m�viles */
/*@media screen and (max-width: 480px) {
    .container {
        width: 90%;*/
/* Margen del 5% a ambos lados (100% - 2*5% = 90%) */
/*}

    .image-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}*/

/*.container {
    width: 60%;*/
/* Margen del 20% a ambos lados (100% - 2*20% = 60%) */
/*margin: 0 auto;
    padding: 20px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2%;*/
/* Espacio entre contenedores de imagen */
/*margin-bottom: 20px;
}*/

/* Contenedor para cada imagen */
/*.image-container {
    position: relative;*/
/* Necesario para posicionar el overlay absoluto */
/*overflow: hidden;*/
/* Oculta la parte de la imagen que se sale al hacer zoom */
/*display: block;*/
/* Asegura que ocupe su espacio */
/*}*/

/* Estilo para el overlay (inicialmente invisible) */
/*.image-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 165, 0, 0);*/
/* Naranja completamente transparente */
/*opacity: 0;
        transition: background-color 0.3s ease, opacity 0.3s ease;*/
/* Transiciones suaves */
/*pointer-events: none;*/
/* Para que el hover no se quede en el overlay */
/*z-index: 1;*/
/* Asegura que est� sobre la imagen */
/*}*/

/* Imagen dentro del contenedor */
/*.image-container img {
        width: 100%;
        height: auto;
        display: block;*/
/* Elimina espacio extra debajo de la imagen */
/*transition: transform 0.3s ease;*/
/* Transici�n suave para el zoom */
/*}*/

/* Efectos al pasar el cursor sobre el CONTENEDOR */
/*.image-container:hover::before {
        background-color: rgba(255, 165, 0, 0.5);*/
/* Naranja con 50% de opacidad */
/*opacity: 1;*/
/* Hace visible el overlay */
/*}

    .image-container:hover img {
        transform: scale(1.1);*/
/* Aplica el zoom a la imagen */
/*}*/

/* Media query para tabletas */
/*@media screen and (max-width: 768px) {
    .container {
        width: 90%;
    }

    .image-grid {
        grid-template-columns: 1fr;*/
/* Una columna */
/*gap: 20px;*/
/* Espacio fijo */
/*}
}*/

/* Media query para m�viles */
/*@media screen and (max-width: 480px) {
    .container {
        width: 90%;
    }

    .image-grid {
        grid-template-columns: 1fr;*/
/* Una columna */
/*gap: 20px;*/
/* Espacio fijo */
/*}
}*/

.container {
    width: 70%;
    /* Margen del 15% a ambos lados (100% - 2*15% = 70%) */
    margin: 0 auto;
    padding: 20px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2%;
    /* Espacio entre contenedores de imagen */
    margin-bottom: 20px;
}

/* Contenedor para cada imagen */
.image-container {
    position: relative;
    /* Necesario para posicionar el overlay absoluto */
    overflow: hidden;
    /* Oculta la parte de la imagen que se sale al hacer zoom */
    display: block;
    /* Asegura que ocupe su espacio */
}

/* Estilo para el overlay (inicialmente invisible) */
.image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 165, 0, 0);
    /* Naranja completamente transparente */
    opacity: 0;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    /* Transiciones suaves */
    pointer-events: none;
    /* Para que el hover no se quede en el overlay */
    z-index: 1;
    /* Asegura que est� sobre la imagen */
}

/* Imagen dentro del contenedor */
.image-container img {
    width: 100%;
    height: auto;
    display: block;
    /* Elimina espacio extra debajo de la imagen */
    transition: transform 0.3s ease;
    /* Transici�n suave para el zoom */
}

/* Efectos al pasar el cursor sobre el CONTENEDOR */
.image-container:hover::before {
    background-color: rgba(255, 165, 0, 0.5);
    /* Naranja con 50% de opacidad */
    opacity: 1;
    /* Hace visible el overlay */
}

.image-container:hover img {
    transform: scale(1.1);
    /* Aplica el zoom a la imagen */
}

h1.titulos {
    font-size: 1.8rem;
}

/* Media query para tabletas */
@media screen and (max-width: 768px) {
    .container {
        width: 90%;
        /* Margen del 5% a ambos lados (100% - 2*5% = 90%) */
    }

    .image-grid {
        grid-template-columns: 1fr;
        /* Una columna */
        gap: 20px;
        /* Espacio fijo */
    }
}

/* Media query para m�viles */
@media screen and (max-width: 480px) {
    .container {
        width: 90%;
        /* Margen del 5% a ambos lados (100% - 2*5% = 90%) */
    }

    .image-grid {
        grid-template-columns: 1fr;
        /* Una columna */
        gap: 20px;
        /* Espacio fijo */
    }
}