.fotos-medianas {
        height: 455px;
        width: 100%;
        object-fit: cover;
    }

    .fotos-pequeñas {
        height: 215px;
        width: 325px;
        object-fit: cover;
    }

    /*cabecera expandible*/
    .header-expandible {
        display: flex;
        width: 100%;
        height: 100vh;
        /* Ajusta la altura a tu gusto */
        overflow: hidden;
    }

    .header-item {
        flex: 1;
        /* Todas empiezan con el mismo ancho */
        transition: all 0.5s ease-in-out;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        cursor: pointer;
        margin-bottom: 70px;
        height:100vh;
    }

    /* El truco: al pasar el cursor, esta crece y las demás se encogen */
    .header-expandible:hover .header-item {
        flex: 0.5;
    }

    .header-expandible .header-item:hover {
        flex: 2;
        /* Este valor define qué tan "ancha" se vuelve la imagen */
    }

    /* Opcional: Texto sobre la imagen */
    .header-content {
        position: absolute;
        bottom: 20px;
        left: 20px;
        color: rgb(102, 78, 14);
        background: rgba(0, 0, 0, 0.5);
        padding: 10px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .header-item:hover .header-content {
        opacity: 1;
    }

    /* Cuando la pantalla sea de 768px o menor (tamaño móvil/tablet) cabecera */
    @media screen and (max-width: 1400px) {
        .imagen-oculta-movil {
            display: none;
            /* Esto oculta la imagen y elimina el espacio que ocupaba */
        }
    }

    /* --- ESTILOS PARA MÓVIL --- logo y titulo */
@media screen and (max-width: 600px) {
    .logo {
        width: 40px; /* Hace el logo más pequeño */
    }
    .titulo {
        font-size: 20px; /* Reduce el tamaño del texto */
    }
}