/* Tableta y móvil (hasta 1024px) */
@media (max-width: 1024px) {


    #wrap-welcome{
        width: 80%;
    }
    
    /* Apilar todas las columnas */
    .elementor-container {
        flex-direction: column;
    }
    
    /* Cada columna ocupa todo el ancho */
    .elementor-col-33 {
        width: 100%;
    }
    
    /* Apilar Disney y Fortnite */
    .contenedor-fortnite-disney {
        flex-direction: column;
    }
    
    #disney, #fortnite {
        width: 100%;
    }
    
    /* TODAS las imágenes sin altura fija */
    .elementor-column img,
    #disney img, #fortnite img,
    #controller img,
    #netflix,
    .elementor-column:nth-child(2) img {
        height: auto !important;
        width: 100% !important;
    }
}

/* ===== MENÚ EN MÓVIL (persiana que tapa TODO) ===== */

@media (max-width: 768px){


    .contenedor{
    padding: 0 15px;
    }

    .menu-toggle {
    display: block;  /* ← Esto muestra el botón en móvil */
    }

    .menu {
        position: fixed;
        background-color: #4164b6;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        padding: 2rem;
        z-index: 1001;
        transform: translateY(-100%);
        transition: transform 0.4s ease-in-out;
        display: flex;
    }

    .menu.active {
        transform: translateY(0);
    }



        
    /* Items del menú */
    .menu > li {
        width: 100%;
        text-align: center;
        list-style: none;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .menu.active > li:nth-child(1) { transition-delay: 0.1s; }
    .menu.active > li:nth-child(2) { transition-delay: 0.2s; }
    .menu.active > li:nth-child(3) { transition-delay: 0.3s; }
    .menu.active > li:nth-child(4) { transition-delay: 0.4s; }

    .menu.active > li {
        opacity: 1;
        transform: translateY(0);
    }

    .menu > li > a {
        color: white;
        text-decoration: none;
        font-size: 1.5rem;
        padding: 12px 20px;
        display: inline-block;
    }

    /* Submenús en móvil */
    .submenu {
        display: none;
        position: static;
        width: 100%;
        margin-top: 15px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        text-align: center;
    }

    .menu li:hover .submenu {
        display: block;
    }

    .submenu li {
        display: block;
        width: 100%;
        margin: 8px 0;
    }

    .submenu li a {
        display: block;
        padding: 10px 15px;
        color: #e0e0e0;
        text-decoration: none;
        font-size: 1rem;
    }

    #wrap-contact{
        width: 100%;
        justify-content: center;
        flex-direction: column;
        margin: 0;
    }


    #g-in-touch{
        width: 100%;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 5px;

    }

    #contact{
        width: 100%;
        padding: 5px;

    }

    #wrap-clients{
        width: 100%;
    }

    #wrap-clients p{
        padding: 20px;
    }


    #brands{
        padding-top: 50px;
        width: 100%;
        align-items: center;
        flex-direction: column;
    }



    #brands > *{
        width: 80%;
    
    }


    .elementor-section-full_width{
        width: 100%;
        height: auto;
    }


    /* El contenedor principal del mosaico */
    .elementor-section {
        width: 100%;
        overflow-x: hidden;
    }

    .elementor-container {
        display: flex;
        flex-direction: column;  /* Cambia a columna en móvil */
        width: 100%;
    }

    /* Cada columna ocupará el 100% */
    .elementor-column {
        width: 100% !important;
        display: block;
    }

    /* Todas las imágenes dentro del mosaico */
    .elementor-column img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Arreglar los contenedores flex de la columna derecha */
    .elementor-column [style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important;  /* Apila las imágenes */
        width: 100% !important;
    }

    /* Los divs con width: 160% etc */
    .elementor-column [style*="width: 160%"],
    .elementor-column [style*="width: 130%"],
    .elementor-column [style*="width: 134%"] {
        width: 100% !important;
    }

    /* Ajuste específico para las imágenes de Disney y vlad */
    .elementor-widget-image img {
        width: 100% !important;
        height: auto !important;
    }

    /* La imagen bruce-tang */
    .ajuste img {
        width: 100% !important;
        height: auto !important;
    }

}

/* Móviles modernos: hasta 480px (iPhone SE, Galaxy S, etc.) */


@media (max-width: 480px) {
    
/* SECCIÓN WELCOME */


#wrap-about-us{
    width: 80%;
    flex-direction: column ;
    align-items: center;
}

#element1-about-us h2{
width: 100%;
text-align: left;
font-size: 20px ;


}

 #element1-about-us p{
    width: 100%;
    text-align: left;
    
    
}

#element2-about-us p{
    width: 100%;
    text-align: left;

}
   

#element1-about-us{
    width: 100%;
    text-align: center;
    
}
#element2-about-us{
    width: 100%;
    text-align: center;
}




#welcome {
    min-height: auto;  /* elimina la altura fija de 994px */
    padding: 60px 20px;  /* espacio interno */
}

#wrap-welcome {
    width: 100%;  /* ocupa todo el ancho */
    min-height: auto;  /* elimina min-height: 392px */
    padding: 0 16px;
}

#wrap-welcome h1 {
    font-size: 32px !important;  /* baja de 100px a 32px */
    font-weight: 800;
    line-height: 1.2;
}

#wrap-welcome h4 {
    font-size: 18px !important;  /* baja de 36px a 18px */
}
}

/* Para móviles muy pequeños (320px) */
@media (max-width: 320px) {
    #wrap-welcome h1 {
        font-size: 28px !important;
    }
    
    #wrap-welcome h4 {
        font-size: 16px !important;
    }
}