/**
* TODO: Change the fonts it's a temporarily solution.
*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@400;500;600;700&display=swap');

@font-face {
    font-family: SUZUKIPROBOLD;
    src: url(../fonts/SUZUKIPROBOLD.OTF);
}

@font-face {
    font-family: SUZUKIPROREGULAR;
    src: url(../fonts/SUZUKIPROREGULAR.OTF);
}

@font-face {
    font-family: SUZUKIPROHEADLINE;
    src: url(../fonts/SUZUKIPROHEADLINE.OTF);
}


:root {
    /*Colors*/
    /*Primary*/
    --brand: #DE0039;
    --brand-dark: #A3162C;
    --brand-light: #FFB3AF;
    --brand-dark-dark: #6B181F;
    --brand-medium: #DC3545;
    --brand-white: #FFFFFF;
    --brand-black: #000000;
    --brand-black-dark: #333333;
    --brand-black-light: #A0A0A0;
    /*Secundary*/
    --brand-secundary: #003399;
    --brand-secundary-medium: #00368F;
    --brand-secundary-dark: #001151;
    --brand-secundary-light: #0098D9;
    /*Border Show case*/
    --brand-secundary-border: #176DB7;
    /*Gray*/
    --gray-dark-9: #4D4D4D;
    --gray-dark-8: #3E3E3F;
    --gray-dark-7: #262626;
    --gray-dark-6: #5C5C5C;
    --gray-dark-5: #3E3E3E;
    --gray-dark-4: #414141;
    --gray-dark-3: #565656;
    --gray-dark-2: #6C6C6C;
    --gray-dark-1: #666666;
    /* Was Duplicated */
    --gray: #9A9A9A;
    --gray-light-1: #B3B3B3;
    --gray-light-2: #CCCCCC;
    --gray-light-3: #E5E5E5;
    --gray-light-4: #F1F1F1;
    --gray-light-5: #999;
    /* No Colors */
    --black: black;
    --white: white;
    /* Blue */
    --blue: blue;
    --blue-dark-1: #014E98;
    --blue-blogHome: #039;
    --error: rgb(227, 25, 25);
    /* Notification */
    --notification-default:#236377;
    --notification-light:#D3E5EA;
    /* Fonts */
    --family-title: 'SuzukiPROBold';
    --family-title-2: 'SuzukiPRORegular';
    --family-paragraph: "SuzukiPROHeadline";
    --family-alternate-1: "Lato";
    --family-alternate-2: "Lato";
    --family-alternate-3: "Lato";
    /* Font sizes*/
    --title-1: 3rem;
    --title-2: 2.5rem;
    --title-3: 2rem;
    --title-4: 1.75rem;
    --title-5: 1.5rem;
    --title-6: 1.25rem;
    --paragraph-1: 1.125rem;
    --paragraph-2: 1rem;
    --paragraph-3: 0.875rem;
    --paragraph-4: 0.75rem;
    --paragraph-5: 0.625rem;
    --cta-1: 1.125rem;
    --cta-2: 1rem;
    --cta-3: 1rem;
    --cta-4: 0.875rem;
    --cta-5: 0.813rem;
    /* 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;
    /* Borders */
    --border-lg: 6px solid;
    --border-md: 4px solid;
    --border-sm: 2px solid;
    --border-xs: 1px solid;
    /* Layers */
    --header-layers: 99;
    --aside-model-layer: 9;
    /* Spacing */
    /* <<<<<<< HEAD */
    /* >>>>>>> IntegrationsTest */
    /* Colors: styles - figma */
    --primary: #1F3750;
    --white: #fff;
    --gray: #666666;
    --gray2: #969696;
    --gray3: #D2D1D1;
    --grayLight: #F4F4F4;
    --darkGray: #414141;
    --footer: #3E3E3E;
    --black: #000;
    --gray-pagination: #B2B2B2;
    /* Font sizes: styles - figma */
    --text_p: 18px;
    /**
* Global Layers (z-index)
*/
    --layer-header: 99;
}

/*FONT FAMILIES*/
.title-1 {
    font-family: var(--family-title);
    font-size: var(--title-1);
}

.title-2 {
    font-family: var(--family-title-2);
    font-size: var(--title-2);
    line-height: 1;
}

.title-3 {
    font-family: var(--family-title);
    font-size: var(--title-3);
    line-height: 1;
}

.title-4 {
    font-family: var(--family-title);
    font-size: var(--title-4);
    line-height: 1;
}

.title-5 {
    font-family: var(--family-title);
    font-size: var(--title-5);
    line-height: 1;
}

.title-6 {
    font-family: var(--family-title);
    font-size: var(--title-6);
    line-height: 1;
}

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

/*BODY & MAIN STYLES*/


/*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;
    color: var(--gray-light-1);
    font-family: var(--family-title);
    padding: 0rem 2rem;
    /* margin-left: 2rem; */
}

@media (max-width:768px) {
    .footer-content {
        flex-wrap: nowrap;
        flex-direction: column;
        padding: 0 1.5rem;
        gap: 0;
    }
}

.footer-content_herramientas{
    flex: 1 auto;
    max-width: 12rem;
    margin-top: 1rem;

}


@media (max-width:768px) {
.footer-content_herramientas{
    flex: 1 auto;
    max-width: 100%;
    margin-top: 0rem;

}
}

.footer-content_legal{
    flex: 1 auto;
    max-width: 16.3rem;

}


.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-light-1);
    font-family: var(--family-title-2);
    font-size: var(--paragraph-1);
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

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


}

.footer-copyright {
    /*border-top: 1px solid var(--gray3);*/
    padding-top: var(--paragraph-2);
    padding-bottom: var(--paragraph-2);
    padding-left: 2rem;
    padding-right: 2rem;
    color: var(--white);
    background-color: var(--brand);
    display: flex;
    gap: 15rem;
    justify-content: space-between;

}


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


/* .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;
    }
}


/*Buttons Funcionality Black And white*/
.buttonsBanner {
    width: 50%;
    padding-top: 1rem;
}

.buttonsBanner>a {
    text-decoration: none;
    display: contents;
}

@media (max-width:768px) {

    .buttonsBanner {
        width: 100%;
        display: flex;
    }
}

@media (max-width:768px) {

    .buttonsBanner>a {
        flex: 1 1 auto;
    }
}

@media (max-width:1428px) {

    .buttonsBanner>a {
        display: block;
        width: 252px;
    }
}

.link-wrapper {
    border: 1px solid var(--darkGray);
    padding: 1rem 0;
    margin-top: var(--title-2);
    width: 100%;
}

@media (max-width:1280px) {

    .link-wrapper {
        padding: 0.5rem 0;
        margin-top: var(--title-5);
    }
    body::-webkit-scrollbar {
        width: 12px;
        display: inline;
    }

    body::-webkit-scrollbar-thumb {
        background-color: #8888888a;
        border-radius: 0px;
    }
}

@media (max-width:768px) {

    .link-wrapper {
        margin: var(--title-5) 0 0.15rem 0;
    }
}

.black-button {
    color: var(--white);
    background-color: var(--brand);
    margin: 0 0 1rem 0;
    border: 0.12rem solid var(--brand-white);
    font-family: var(--family-title);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}

.black-button:hover {
    color: var(--white);
    background-color: var(--brand-dark);

}

.black-button:active {
    color: var(--brand-white);
    background-color: var(--brand-dark-dark);
    border: none;
}

@media (max-width:768px) {
    .black-button {
        margin: 0;
        padding-bottom: 0.39rem;
    }
}

.white-button {
    color: var(--gray-light-3);
    background-color: transparent;
    margin: 0 0 .1rem 0;
    border: 0.12rem solid var(--brand-white);
    font-family: var(--family-title);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.white-button:hover {
    color: var(--brand-white);
    background-color: var(--gray-dark-4);

}

@media (max-width:768px) {
    .white-button {
        margin: 0;
    }
}

/* Customizing the vertical scrollbar */
::-webkit-scrollbar {
    width: 5px;
    /* Scrollbar width */
    display: none;
    /* Hide the scrollbar when not hovered */
}

.white-button:active {
    color: var(--brand);
    background-color: var(--gray-light-1);
}

::-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: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 767px) {
    :root {
        /* Font sizes*/
        --title-1: 1.625rem;
        --title-2: 1.5rem;
        --title-3: 1.375rem;
        --title-4: 1.125;
        --title-5: 1.125;
        --title-6: 1.125;
        --paragraph-1: 1rem;
        --paragraph-2: 0.875rem;
        --paragraph-3: 0.75rem;
        --paragraph-4: 0.65rem;
        --cta-1: 1rem;
        --cta-2: 1rem;
        --cta-3: 0.875rem;
        --cta-4: 0.75rem;
    }
}

/* 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(--family-title);
    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(--family-title);
    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-light-1);
    font-family: var(--family-title-2);
    font-size: var(--paragraph-1);
    font-style: normal;
    font-weight: 400;
    line-height: 26px;   

}




/* ACORDEON @medias */
/* @media (max-width: 1200px) {
    .footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF{
            
    }
    
} */

@media (max-width: 768px) {

    .footer-content_herramientas {
        width: 100%;
        border-bottom: 0.1px solid var(--gray-dark-2);
    }


    .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-light-1);
        font-family: var(--family-title-2);
        font-size: var(--paragraph-1);
        font-style: normal;
        font-weight: 400;
        line-height: 26px;

    }

    .acordeon {
        width: 100%;
        /* margin: 90px auto; */
        color: gray;
        background-color: var(--gray-dark-5);
        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;
    }


    /* 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-5);
        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;
    }

}

/*  Chat bot   */

#custom-launcher {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgb(255, 0, 0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-self: center;
}

.cn-button-init {
    width: 78px;
    height: 78px;
    border-radius: 50%;
}