/* link-button-styles */
@import url("../vendors/ui-kit/button-link/button-link.css");
/* Centered Video Component */
@import url("./model_page/CenteredVideo.css");
/* SecuritySwiper Component */
@import url("./model_page/SecuritySwiper.css");
/* showcase_model Component */
/* @import url("./model_page/showcase_model.css"); */
/* Tecnologia de vehiculos Component */
@import url("./model_page/tecnologiadevehiculos.css");
/* Feedback o calificacion */ 
/*@import url("./model_page/calificacion.css");*/
/* Otros modelos */
@import url("./model_page/otrosmodels.css");
/* Galeria triple */
@import url("./model_page/galeriaTriplePDP.css");
/* Galeria Multiple */
@import url("./model_page/galeriaMultiplePDP.css");
/* ShowCase PDP */
@import url("./PDP/showcasePDP.css");
/* Calificación PDP o Feedback */
@import url("./model_page/calificacionPDP.css");
/* Diseño Interior PDP*/
@import url("./model_page/disenoInteriorPDP.css");
/* showcase_model Component */
/* Banner Whit CTA */
@import url("./model_page/BannerCTA.css");
/* Editable View */

/* editableView Component */
/*@import url("./[blocklist]_components/editableView.css");*/
@import url("./[blocklist]_components/afterSales.css");

/**
* TODO: Change the fonts it's a temporarily solution.
*/


/* CSS HOME PAGE */
/* Import Swiper Noticias */

/* Import Showcase Modelos Home */
@import url("./[blocklist]_components/HomeModelos/showcase_home_modelos.css"); 

/* Import Showcase Modelos Home */
@import url("./[blocklist]_components/HomeModelos/showcase_home_modelos_comerciales.css"); 

/* Import Principal Banner Home */
@import url("./[blocklist]_components/HomeModelos/bannerHome.css");

/* Import Swiper Noticias Home */
@import url("./[blocklist]_components/HomeModelos/noticiasHOME.css");

@import url("./[blocklist]_components/editableView.css");

/* Import Hero Banner Home */
@import url("./[blocklist]_components/HomeModelos/heroBannerHOME.css");

/* Import Servicios Home */
@import url("./[blocklist]_components/HomeModelos/serviciosHOME.css");

/* Import Cards informative Home */
@import url("./[blocklist]_components/HomeModelos/PorQueElegirDercocenterHome.css");

/* Import Box Concesionarios Home */
@import url("./[blocklist]_components/HomeModelos/concesionarioHome.css");

/*------------------------ FONTS --------------------------------*/
    /* regular */
    @font-face {
        font-family: 'Titillium Web';
        src: url('../fonts/TitilliumWeb-Regular.ttf');
        font-weight: 700 !important;
        font-style: normal;
        font-display: swap;
    }
    /*  Bold */
    @font-face {
        font-family: 'Titillium Web Bold';
        src: url('../fonts/TitilliumWeb-Bold.ttf');
        font-weight: 700 !important;
        font-style: normal;
        font-display: swap;
    }

    /* regular */
    @font-face {
        font-family: 'Nunito Sans';
        src: url('../fonts/NunitoSans_7pt-Regular.ttf');
        font-weight: 700 !important;
        font-style: normal;
        font-display: swap;
    }    

    /*  Bold */
    @font-face {
        font-family: 'Nunito Sans Bold';
        src: url('../fonts/NunitoSans_7pt-Bold.ttf');
        font-weight: 700 !important;
        font-style: normal;
        font-display: swap;
    }
/* -------------------------------------------------------------------- */

html > body {
    background: none !important;
    font-family: var(--font-family-1) !important;
}

:root {
    /*Colors*/
    /*Primary*/
    --brand: #0B457F;
    --brand-dark: #14345E;
    --brand-light: #C7CCDE;
    --brand-white: #FFFFFF;
    --brand-black: #000000;
    --brand-disabled: #888889;
    /*Gray*/
    --gray-dark-9: #F1F1F1;
    --gray-dark-8: #E5E5E5;
    --gray-dark-7: #CCCCCC;
    --gray-dark-6: #B3B3B3;
    --gray-dark-5: #9A9A9A;
    --gray-dark-4: #838383;
    --gray-dark-3: #6C6C6C;
    --gray-dark-2: #565656;
    --gray-dark-1: #414141;
    /*Alerts*/
    --alert-error-main: #D32F2F;
    --alert-error-light: #FAE8E8;
    --alert-success-email: #318234;
    --alert-success-email-light: #E4F5E5;
    --alert-main: #FFB531;
    --alert-light: #FDED9F;
    --alert-information-main: #2A7FD3;
    --alert-information-light: #E7F1FA;
    --alert-information-light-1: #24D4CB;
    /*Opacity*/
    --opacity-black-80: #000000, rgba(0, 0, 0, 0.80);
    --opacity-black-60: #000000, rgba(0, 0, 0, 0.60);
    --opacity-black-40: #000000, rgba(0, 0, 0, 0.40);
    --opacity-black-20: #000000, rgba(0, 0, 0, 0.20);
    --opacity-black-10: #000000, rgba(0, 0, 0, 0.1);
    --opacity-white-80: #FFFFFF, rgba(0, 0, 0, 0.80);
    --opacity-white-60: #FFFFFF, rgba(0, 0, 0, 0.60);
    --opacity-white-40: #FFFFFF, rgba(0, 0, 0, 0.40);
    --opacity-white-20: #FFFFFF, rgba(0, 0, 0, 0.20);
    --opacity-scale-40: #586F9E, rgba(88, 111, 157, 0.40);
    /*Scales*/
    --scale-brand-1: #586F9E;
    --scale-brand-2: #909CBE;
    /* END Colors */
    /* Fonts */
    --font-family-1: 'Titillium Web';
    --font-family-2: 'Nunito Sans';
    --font-family-3: 'Nunito Sans Bold';
    --font-family-4: 'Titillium Web Bold';
    /* Font sizes*/
    /* title */
    --title-1: 3rem;
    --title-2: 2.5rem;
    --title-3: 2rem;
    --title-4: 1.75rem;
    --title-5: 1.5rem;
    --title-6: 1.25rem;
    /*  */
    --title-7: 1.25rem;
    --title-8: 1.25rem;
    --title-9: 2rem;
    --title-10: 1.75rem;
    --title-11: 1.5rem;
    /* paragraph */
    --paragraph-1: 1.125rem;
    --paragraph-2: 1rem;
    --paragraph-3: 0.875rem;
    --paragraph-4: 0.75rem;
    /*  */
    --paragraph-5: 0.875rem;
    /* cta button */
    --cta-1: 1.125rem;
    --cta-2: 1rem;
    --cta-3: 1rem;
    --cta-4: 0.875rem;
    /* 360 responsive */
    --cta-1-a: 1.125rem;
    /* cta button mailings */
    --cta-mailing-1: 1.25rem;
    /* Font weights*/
    --weight-extra-bold: 800;
    --weight-bolder: 700;
    --weight-bold: 600;
    --weight-semibold: 500;
    --weight-normal: 400;
    --weight-semilight: 300;
    --weight-light: 200;
    --weight-lighter: 100;
    /* Line Heights */
    --paragraph-1-line-height: normal;
    /* Borders */
    --border-xlg: 12px solid;
    --border-lg: 6px solid;
    --border-md: 4px solid;
    --border-sm: 2px solid;
    --border-xs: 1px solid;
    /* Layers */
    --header-layers: 99;
    --aside-model-layer: 9;
    /* Global Layers (z-index)*/
    --layer-header: 99;
    /* 20-11 */
    --line-height-1: 1.25rem;
    /* MUST BE DELETED!!!!! -FROM OLD TEMPLATE */
    --brand-disabled: #FFCCC5;
    --brand-red: #D30D2B;
    --gray-light-1: #FFFFFF;
    --brand-light-2: #C7CCDE;
    --gray-light-2: #F2F2F2;
    --gray-light-4: #F1F1F1;
    --notification-default: #236377;
    --notification-light: #D3E5EA;
    --alert-main-light: #FCE1B5;
    --primary: #1F3750;
    --white: #fff;
    --white-20: #ffffff50;
    --gray: #666666;
    --gray2: #969696;
    --gray3: #D2D1D1;
    --grayLight: #F4F4F4;
    --darkGray: #414141;
    --footer: #F1F1F1;
    --footer-copyright: #212529;
    --black: #000;
    --gray-pagination: #B2B2B2;
    --text_p: 18px;
    /* END - MUST BE DELETED!!!!! - FROM OLD TEMPLATE */
}


/*FONT FAMILIES*/
    /* title */
    .title-1 {
        font-family: var(--font-family-1);
        font-size: var(--title-1);
    }
    .title-2 {
        font-family: var(--font-family-1);
        font-size: var(--title-2);
    }
    .title-3 {
        font-family: var(--font-family-4);
        font-size: var(--title-3);
    }
    .title-4 {
        font-family: var(--font-family-1);
        font-size: var(--title-4);
    }
    .title-5 {
        font-family: var(--font-family-1);
        font-size: var(--title-5);
    }
    .title-6 {
        font-family: var(--font-family-1);
        font-size: var(--title-6);
    }
        /* CUSTOM */
        /* 20- 12*/
            .title-7 {font-size: var(--title-7);}
        /* 20-14 */
            .title-8 {font-size: var(--title-8);}
        /* 32 - 20 */
            .title-9 {font-size: var(--title-9);}
        /* 28 - 20 */
            .title-10 {font-size: var(--title-10);}
        /* 24-16 */
            .title-11 {font-size: var(--title-11);}
    /* paragraph */
    .paragraph-1{
        font-family: var(--font-family-1);
        font-size: var(--paragraph-1);
    }
    .paragraph-2{
        font-family: var(--font-family-1);
        font-size: var(--paragraph-2);
    }
    .paragraph-3{
        font-family: var(--font-family-1);
        font-size: var(--paragraph-3);
    }
    .paragraph-4{
        font-family: var(--font-family-1);
        font-size: var(--paragraph-4);
    }
        /* CUSTOM */
        /* 14 - 9*/
            .paragraph-5 {font-size: var(--paragraph-5);}
    /* cta Buttons */
    .cta-1{
        font-family: var(--font-family-4);
        font-size: var(--cta-1);
    }
    .cta-2{
        font-family: var(--font-family-4);
        font-size: var(--cta-2);
    }
    .cta-3{
        font-family: var(--font-family-4);
        font-size: var(--cta-3);
    }
    .cta-4{
        font-family: var(--font-family-4);
        font-size: var(--cta-4);
    }
        /* 360 responsive */
        .cta-1-a{
            font-family: var(--font-family-4);
            font-size: var(--cta-1-a);
        }
    /* cta button mailings */
    .cta-mailing-1{
        font-family: var(--font-family-4);
        font-size: var(--cta-mailing-1);
    }
    .cta-mailing-2{
        font-family: var(--font-family-4);
        font-size: var(--cta-2);
        text-decoration: underline;
    }

    /*  */
    .font-family-1{
        font-family: var(--font-family-1);
    }
/*    .font-family-2{
        font-family: var(--font-family-2);
    }
    .font-family-3{
        font-family: var(--font-family-3);
    }
    .font-family-4{
        font-family: var(--font-family-4);
    }*/


.ta-r {
    text-align: right;
}

/*BODY(Reset) & MAIN STYLES*/
body{
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--brand-black);
}

/*Wrapper the text (Truncated in 3 lines)*/
.truncated-text-3l {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* number of lines to show */
    line-height: X;
    /* fallback */
    max-height: X * 3;
    /* fallback */
}

/* HEADER */
/* FOOTER */
footer {
    background-color: var(--footer);
    padding-top: var(--title-2);
    padding-bottom: 0rem;
    margin-top: 0rem;
}

.social-media {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.social-media>a {
    margin: 0 0.5rem;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    
    padding: 0rem 2rem;
    
    /* margin-left: 2rem; */
}


.footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF .etiqueta > h5 {
    font-family: var(--font-family-1);
    color: var(--gray-dark-2, #565656);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.44444rem; /* 144.444% */
    letter-spacing: 0.04rem;
}

.footer-content_herramientas{
    flex: 1 auto;
    max-width: 12rem;
    margin-top: 1rem;
    /* border-radius: 50%; */
}
.tuclase{
    border-radius: 50%;
}

.footer-content_legal{
    flex: 1 auto;
    max-width: 16.3rem;
    margin-left: 10px;
    margin-top: 1rem;
}

.footer-content_legal > h5 {
    color: var(--gray-dark-2);
    font-family: var(--font-family-1);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.44444rem;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
}


.footer-content_modelos>ul,
.footer-content_herramientas>ul,
.footer-content_ayuda>ul,
.footer-content_servicios>ul,
.footer-content_legal>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

    .footer-content_modelos > ul > li > a,
    .footer-content_herramientas > ul > li > a,
    .footer-content_ayuda > ul > li > a,
    .footer-content_servicios > ul > li > a,
    .footer-content_legal > ul > li > a {
        text-decoration: none;
        color: var(--gray-dark-3, #6C6C6C);
        font-family: var(--font-family-1);
        font-size: 0.88889rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.22222rem;
        letter-spacing: 0.03556rem;
        
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

.footer-content_legal>ul>li{
    display: flex;
}

.footer-copyright {
    /*border-top: 1px solid var(--gray3);*/
    padding: 40px 76px 19px 76px;
    color: var(--gray-dark-8);
    background-color: var(--footer-copyright);
    display: flex;
    gap: 15rem;
    justify-content: space-between;
    font-family: var(--font-family-1);
    font-size:  var(--paragraph-4);
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: 1rem; /* 133.333% */
    letter-spacing: 0.025rem;
    align-items: center;
}

.helpButton {
    display: none;
}

@media (max-width:768px) {
    .footer-copyright {
        padding: 1rem;
        align-items: center;
        gap: 2rem;
        gap: 0;
        flex-direction: column-reverse;
        margin-bottom: 0rem;
    }
}

@media (min-width:769px) {
    .footer-copyright {
        box-sizing: border-box;
/*        height: 78px;*/
    }
}


/* .footer-copyright p {
        padding-left: 6.5rem;
        padding-top: .5rem;
    } */

@media (max-width:768px) {
    .footer-copyright p {
        padding-left: 0rem;
        padding-top: .5rem;
    }
}

@media (max-width:768px) {
    .footer-copyright .copyright {
        margin-top: 1rem;
        margin-bottom: 3rem;
        text-align: center;
        padding: 24px 12px 24px 12px;
    }
}



/* Customizing the vertical scrollbar */
body * ::-webkit-scrollbar {
    display:none;
}
body * {
    scrollbar-width: none;
}

::-webkit-scrollbar-thumb {
    background-color: #8888888a;
    /* Scroll thumb color */
    border-radius: 5px;
    /* Rounded corners of the thumb */
}

::-webkit-scrollbar-track {
    background-color: #f2f2f2;
    /* Background color of the scrollbar track */
}

/* Customizing the horizontal scrollbar */
::-webkit-scrollbar-horizontal {
    height: 5px;
    /* Scrollbar height for horizontal scrollbar */
}

::-webkit-scrollbar-thumb:horizontal {
    background-color: #888;
    /* Color of the horizontal scroll thumb */
    border-radius: 5px;
    /* Rounded corners of the horizontal thumb */
}

::-webkit-scrollbar-track:horizontal {
    background-color: #f2f2f2;
    /* Background color of the horizontal scrollbar track */
}

@media (max-width: 360px) {
    :root {
        /* Font sizes*/
            /* cta buttons */
            --cta-1-a: 1rem;
        }
}

@media (max-width: 576px) {}

@media only screen and (max-width: 600px) {
    .helpButton{
        display:none;
    }
}

@media (max-width: 760px) {
    .embeddedServiceHelpButton .helpButton {
        margin-bottom:50px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    :root {
    /* Font sizes*/
        /* TITLE */
        --title-1: 1.625rem;
        --title-2: 1.5rem;
        --title-3: 1.375rem;
        --title-4: 1.125rem;
        --title-5: 1.125rem;
        --title-6: 1.125rem;
            /* CUSTOM */
            --title-7: 0.75rem;
            --title-8: 0.875rem;
            --title-9: 1.25rem;
            --title-10: 1.25rem;
            --title-11: 1rem;
        /* paragraph */
        --paragraph-1: 1rem;
        --paragraph-2: 0.875rem;
        --paragraph-3: 0.75rem;
            /*  */
            --paragraph-5: 0.5625rem;
        /* cta buttons */
        --cta-1: 1rem;
        /* 20-11 */
         --line-height-1: 0.6875rem;
    }

    /* ********************  */
        footer {
            padding-top: .5rem;
        }

        .footer-content {
            flex-wrap: nowrap;
            flex-direction: column;
            padding: 0 1.5rem;
            gap: 0;
        }

        .footer-content_herramientas {
            width: 100%;
            flex: 1 auto;
            max-width: 100%;
            margin-top: 0rem;
        }

        .footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF.activa .contenido>ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF.activa .contenido>ul>li>a {

            text-decoration: none;
            color: var(--gray-dark-3);
            font-family: var(--font-family-1);
            font-size: var(--paragraph-1);
            font-style: normal;
            font-weight: 400;
            line-height: 26px;

        }

        .footer-copyright .copyright {
            margin-top: 1rem;
            margin-bottom: 3rem;
            text-align: center;
            padding: 24px 12px 24px 12px;
        }

        .footer-copyright p {
            padding-left: 0rem;
            padding-top: .5rem;
        }

        .footer-copyright {
            padding: 1rem;
            align-items: center;
            gap: 2rem;
            gap: 0;
            flex-direction: column-reverse;
            margin-bottom: 0rem;
        }

        .acordeon {
            width: 100%;
            /* margin: 90px auto; */
            color: gray;
            background-color: var(--footer);
            padding: 0;
        }

        /**************/
        .acordeon .contenedorF {
            position: relative;
            margin: 10px 10px;
        }

        /* Posiciona las etiquetas en relación con el contenedor. Añade relleno en la parte superior e inferior 
    y aumenta el tamaño de la fuente. También hace que su cursor sea un puntero */
        .acordeon .etiqueta {
            position: relative;
            padding: 10px 0;
            font-size: 30px;
            color: var(--gray-light-1);
            cursor: pointer;
            border-bottom: 1px solid var(--gray-dark-7, #CCC);
        }

        /* H5 modificado por margin´s implicitos desde Bootstrap */
        .acordeon .etiqueta h5 {
            margin-bottom: 0rem;

        }


        /**************/
        /* Posiciona el signo más a 5px de la derecha. Lo centra utilizando la propiedad transform. */
        .acordeon .etiqueta::before {
            content: url("data:image/svg+xml;charset=UTF-8, <svg width='46' height='46' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='darkgray' class='bi bi-plus'><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/></svg>");
            /* color: gray; */
            position: absolute;
            top: 50%;
            right: 0;
            font-size: 30px;
            transform: translateY(-50%);
        }

        /* Oculta el contenido (altura: 0), disminuye el tamaño de la fuente, justifica el texto y añade la transición */
        .acordeon .contenido {
            position: relative;
            /* background: var(--gray-dark-7); */
            height: 0;
            font-size: 20px;
            text-align: justify;
            width: 100%;
            overflow: hidden;
            transition: 0.5s;
        }

        /* Añade una línea horizontal entre los contenidos */
        .acordeon hr {
            width: 100;
            margin-left: 0;
            border: 1px solid grey;
        }

        /* Muestra la parte de contenido cuando está activa. Establece la altura */
        .acordeon .contenedorF.activa .contenido {
            height: auto;
        }

        /* Cambia de signo positivo a negativo una vez activado */
        .acordeon .contenedorF.activa .etiqueta::before {
            content: url("data:image/svg+xml;charset=UTF-8, <svg height='46' width='46' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='darkgray' xml:space='preserve'><path d='M40 23.99H10a1 1 0 1 0 0 2h30a1 1 0 1 0 0-2z'/></svg>");
            font-size: 30px;
        }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {}

.title {
    color: var(--black);
    font-family: var(--font-family-1);
    font-size: var(--title-3);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.title-white {
    color: var(--brand-white);
    font-family: var(--font-family-1);
    font-size: var(--title-3);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

}

/* ACORDEON Desktop 0*/

.footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF .contenido>ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 0;
    padding-right: 2rem;

}
.footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF .contenido>ul>li>a {
    text-decoration: none;
    color: var(--gray-dark-3, #6C6C6C);
    font-family: var(--font-family-1);
    font-size: var(--paragraph-2);
    font-style: var(--paragraph-1-line-height);
    font-weight: var(--weight-normal);
    line-height: 1.375rem;
}
.max-w{
    max-width: 1920px;
    margin-right: auto;
    margin-left: auto;
}

.embeddedServiceHelpButton .helpButton .uiButton {
    background-color: #00A0DC;
    font-family: "--font-family-1", sans-serif;
}
.embeddedServiceHelpButton .helpButton .uiButton:focus {
    outline: 1px solid #00A0DC;

}

.embeddedServiceHelpButton a:link {
    text-decoration: none;
    color:white;

}
.embeddedServiceHelpButton a:visited {
    text-decoration: none;
    color:white;

}
.embeddedServiceHelpButton a:hover {
    text-decoration: none;
    color:white;

}
.embeddedServiceHelpButton a:active {
    text-decoration: none;
    color:white;

}