@media (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto;
    }

    .color-section {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 50vh; 
        padding: 20px;
        z-index: 100; 
    }

   .text-section {
        width: 100%;
        height: auto;
        min-height: 50vh;
        padding: 40px 20px;
        margin-top: 50vh; 
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .text-section img {
        max-width: 90%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    .logo {
        width: 67%;
    }
    
    /* MODIFICACIÓN AQUÍ PARA EL MENÚ HAMBURGUESA */
    .hamburger-menu {
        display: flex; /* Asegura que se muestre en móvil */
        position: fixed; /* Lo fija en la pantalla */
        left: 20px; /* Posición desde la izquierda */
        top: 20px; /* Posición desde arriba */
    }

    .menu {
        display: block; /* Asegura que el menú sea visible cuando se active (se controla con JS) */
        /* Ten en cuenta que para un menú desplegable "escondido" inicialmente,
           necesitarás propiedades como 'left: -100%;' o 'transform: translateX(-100%);'
           en su estado normal, y luego cambiarlas a 'left: 0;' o 'transform: translateX(0);'
           cuando esté activo, usualmente con JavaScript.
           'display: block;' aquí solo asegura que el bloque esté presente, no su visibilidad inicial.
        */
    }
    /* FIN DE LA MODIFICACIÓN */

    .parallax {
        background-image: url("../00.imgBrand/mj+logo-orange-white.png");
        background-size: 100% auto;
        background-attachment: fixed;
        background-position: 50% 80%;
    }

    .parallax1 {
        background-image: url("../00.imgBrand/RealmenteUrbano-spanish.jpg");
        background-size: 100% auto;
        background-attachment: fixed;
        background-position: 50% 80%;
    }

    .section-background h2 {
        font-size: 2em;
        text-align: center;
        padding: 10px;
    }

    .text-bloc p {
        font-size: 0.75em;
        /* margin: 20px; */
    }
}