/* =========================================================
   ALLEGRA FILMS
   CSS GENERAL + VERSIÓN MÓVIL LIMPIA
   ========================================================= */


/* =========================================================
   HEADER GENERAL - ESCRITORIO
   ========================================================= */

/* Header transparente sobre la imagen */
body > div.wrapper > div > header {
    background: transparent !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* Eliminar fondos interiores del header */
header .header_inner,
header .header_bottom,
header .header_top_bottom_holder {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Logo Allegra en blanco en escritorio */
.q_logo img {
    filter: brightness(0) invert(1);
}

/* Menú principal en blanco */
nav.main_menu > ul > li > a,
nav.main_menu > ul > li > a > span {
    color: #ffffff !important;
}


/* =========================================================
   SELECTOR DE IDIOMA - ESCRITORIO
   ========================================================= */

.wpml-ls-legacy-dropdown {
    width: 6em !important;
}

/* Fondo transparente */
.wpml-ls-legacy-dropdown,
.wpml-ls-legacy-dropdown ul,
.wpml-ls-legacy-dropdown li,
.wpml-ls-legacy-dropdown a,
.wpml-ls-legacy-dropdown span,
.wpml-ls-sidebars-header_bottom_right,
.wpml-ls-sidebars-header_bottom_right ul,
.wpml-ls-sidebars-header_bottom_right li,
.wpml-ls-sidebars-header_bottom_right a {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Texto blanco + borde rosa */
.wpml-ls-legacy-dropdown a,
.wpml-ls-sidebars-header_bottom_right a {
    color: #ffffff !important;
    border-color: #f60dac !important;
}

/* Texto interior */
.wpml-ls-legacy-dropdown a span,
.wpml-ls-sidebars-header_bottom_right a span {
    color: #ffffff !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 2.9px !important;
    text-transform: uppercase !important;
}

/* Hover rosa */
.wpml-ls-legacy-dropdown a:hover,
.wpml-ls-legacy-dropdown a:focus,
.wpml-ls-sidebars-header_bottom_right a:hover,
.wpml-ls-sidebars-header_bottom_right a:focus {
    background-color: rgba(249, 62, 190, 0.22) !important;
    background-image: none !important;
    color: #ffffff !important;
}


/* =========================================================
   HOME - FILMS POR DEFECTO
   ========================================================= */

body.home .projects_holder_outer.films-default
.projects_holder article.mix.films-default-hide {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body.home .projects_holder_outer.films-default
.projects_holder article.mix.films-default-show {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ocultar filtro TOT */
body.home .projects_holder_outer .filter_outer ul li:first-child {
    display: none !important;
}


/* =========================================================
   IDIOMAS AÑADIDOS AL MENÚ:
   OCULTARLOS EN ESCRITORIO
   ========================================================= */

@media only screen and (min-width: 769px) {

    nav.main_menu .wpml-ls-item,
    nav.main_menu .wpml-ls-menu-item {
        display: none !important;
    }

}


/* =========================================================
   VERSIÓN MÓVIL
   ========================================================= */

@media only screen and (max-width: 768px) {


    /* =====================================================
       HEADER
       ===================================================== */

    body > div.wrapper > div > header {
        position: relative !important;
        top: auto !important;
        left: 0 !important;

        width: 100% !important;
        height: auto !important;

        background: #ffffff !important;

        z-index: 1000 !important;

        overflow: visible !important;
    }

    header .header_inner,
    header .header_bottom,
    header .header_top_bottom_holder {
        position: relative !important;

        width: 100% !important;
        height: auto !important;
        min-height: 150px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;

        box-shadow: none !important;
        border: none !important;

        overflow: visible !important;
    }


    /* =====================================================
       ZONA DEL LOGO
       ===================================================== */

    header .header_inner_left {
        position: relative !important;

        float: none !important;

        left: 0 !important;
        top: 0 !important;

        width: 100% !important;
        height: 150px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       LOGO CENTRADO
       ===================================================== */

    header .logo_wrapper {
        position: absolute !important;

        left: 50% !important;
        top: 0 !important;

        width: 170px !important;
        height: 150px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: translateX(-50%) !important;
        -webkit-transform: translateX(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    header .q_logo {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        -webkit-transform: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    header .q_logo a {
        width: 100% !important;
        height: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    header .q_logo img {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: auto !important;
        height: auto !important;

        max-width: 160px !important;
        max-height: 120px !important;

        margin: 0 auto !important;

        transform: none !important;
        -webkit-transform: none !important;

        filter: none !important;
    }


    /* =====================================================
       BOTÓN HAMBURGUESA
       ===================================================== */

    header .mobile_menu_button {
        display: block !important;

        position: absolute !important;

        left: 20px !important;
        right: auto !important;
        top: 25px !important;

        margin: 0 !important;

        z-index: 6000 !important;
    }


    /* =====================================================
       MENÚ MÓVIL
       ===================================================== */

    nav.mobile_menu {
        position: relative !important;

        top: auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;

        overflow: visible !important;

        z-index: 7000 !important;
    }

    nav.mobile_menu > ul {
        position: relative !important;

        width: 100% !important;
        height: auto !important;

        background: #ffffff !important;

        overflow: visible !important;
    }


    /* =====================================================
       ENLACES NORMALES DEL MENÚ
       ===================================================== */

    nav.mobile_menu > ul > li:not(.wpml-ls-menu-item):not(.wpml-ls-item) > a {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }


    /* =====================================================
       IDIOMAS EN EL MENÚ MÓVIL
       CAT / ESP / ENG EN UNA SOLA LÍNEA
       ===================================================== */

    nav.mobile_menu > ul > li.wpml-ls-menu-item,
    nav.mobile_menu > ul > li.wpml-ls-item {
        display: inline-block !important;

        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;

        float: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom: none !important;
    }

    nav.mobile_menu > ul > li.wpml-ls-menu-item > a,
    nav.mobile_menu > ul > li.wpml-ls-item > a {
        display: inline-block !important;

        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;

        padding: 22px 14px !important;

        border: none !important;

        background: transparent !important;

        color: #000000 !important;

        font-size: 14px !important;
        line-height: 1 !important;
    }


    /* =====================================================
       HOME - ELIMINAR MARGEN EXTRA DEL CONTENIDO
       ===================================================== */

    body.home .content {
        margin-top: 0 !important;
    }


    /* =====================================================
       HOME - FILTROS
       ===================================================== */

    body.home .filter_outer {
        position: relative !important;

        width: 100% !important;
        height: auto !important;

        margin: 15px 0 30px 0 !important;
        padding: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 1 !important;
    }

    body.home .filter_holder {
        position: relative !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 1 !important;
    }

    body.home .filter_holder ul {
        position: relative !important;

        width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;

        justify-content: center !important;
        align-items: center !important;

        gap: 8px 18px !important;

        margin: 0 !important;
        padding: 0 20px !important;

        box-sizing: border-box !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 1 !important;
    }

    body.home .filter_holder ul li {
        display: inline-block !important;

        float: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body.home .filter_holder ul li span {
        font-size: 13px !important;
        line-height: 1.4 !important;
        letter-spacing: 1.5px !important;

        white-space: nowrap !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       HOME - GRID DE PROYECTOS
       ===================================================== */

    body.home .projects_holder {
        position: relative !important;

        width: calc(100% - 40px) !important;

        margin-left: 20px !important;
        margin-right: 20px !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        z-index: 1 !important;
    }

    body.home .projects_holder article {
        width: 100% !important;

        float: none !important;

        margin: 0 0 24px 0 !important;
        padding: 0 !important;
    }

    body.home .projects_holder article .image,
    body.home .projects_holder article .image_holder,
    body.home .projects_holder article .image img,
    body.home .projects_holder article img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

}

/* =========================================
   FICHAS DE PROYECTO - MÓVIL
   OCULTAR FONDO Y EVITAR DESBORDE
   ========================================= */

@media only screen and (max-width: 768px) {

    /* Quitar la imagen de fondo en las fichas de proyecto */
    body.single-portfolio_page,
    body.single-portfolio_page .content,
    body.single-portfolio_page .content_inner,
    body.single-portfolio_page .full_width,
    body.single-portfolio_page .full_section_inner,
    body.single-portfolio_page .vc_row {
        background-image: none !important;
        background-color: #f3f3f3 !important;
    }

    /* Evitar que la galería deje ver cosas por fuera */
    body.single-portfolio_page .wpb_gallery,
    body.single-portfolio_page .wpb_gallery_slides,
    body.single-portfolio_page .flexslider,
    body.single-portfolio_page .flex-viewport {
        overflow: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Mantener las imágenes dentro de su contenedor */
    body.single-portfolio_page .wpb_gallery img,
    body.single-portfolio_page .flexslider img,
    body.single-portfolio_page .slides img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

}
/* =========================================
   PROYECTOS - OCULTAR TITLE AREA EN MÓVIL
   ========================================= */

@media only screen and (max-width: 768px) {

    body.single-portfolio_page .title_outer {
        display: none !important;
    }

}
/* =========================================
   PROYECTOS - FONDO BLANCO EN MÓVIL
   ========================================= */

@media only screen and (max-width: 768px) {

    body.single-portfolio_page,
    body.single-portfolio_page .wrapper,
    body.single-portfolio_page .wrapper_inner,
    body.single-portfolio_page .content,
    body.single-portfolio_page .content_inner,
    body.single-portfolio_page .container,
    body.single-portfolio_page .container_inner,
    body.single-portfolio_page .full_width,
    body.single-portfolio_page .full_width_inner,
    body.single-portfolio_page .portfolio_single {
        background-color: #ffffff !important;
    }

}
/* =========================================
   PROYECTOS - CAJA DE CONTENIDO BLANCA EN MÓVIL
   ========================================= */

@media only screen and (max-width: 768px) {

    body > div.wrapper > div > div > div > div.container > div > div > div > div.portfolio_single.portfolio_template_4 > div.vc_row.wpb_row.section.vc_row-fluid.grid_section > div > div > div:nth-child(2),
    
    body > div.wrapper > div > div > div > div.container > div > div > div > div.portfolio_single.portfolio_template_4 > div.vc_row.wpb_row.section.vc_row-fluid.grid_section > div > div > div:nth-child(2) > .vc_column-inner {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

}