/* Importando fuentes desde google fonts, Plus jakarta Sans, Josefin Sans y Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/* Declarando variables */
:root{
    --type-font_1:'Plus Jakarta Sans', sans-serif; /*Fuente primncipal que se usara en la mayor parte de la web*/
    --type-font_2:'Josefin Sans', sans-serif; /*Fuente secundaria que se usara en lugares importantes para diferenciarlo del resto de la pagina*/
    --type-font_3:'Roboto', sans-serif; /*Fuente que solo se usara en el copiry de la web*/

    --color--black_light:#191818;
    --color--black: #000;
    --color--red:#D20000;
    --colorFilter--red:invert(12%) sepia(97%) saturate(5916%) hue-rotate(14deg) brightness(84%) contrast(119%);
    --color--red_dark:#990000;
    --color--orange_light:#FFB701;
    --color--orange:#FC8500;
    --colorFilter--orange:invert(53%) sepia(16%) saturate(5259%) hue-rotate(4deg) brightness(102%) contrast(101%);
    --color--orange_dark:#CC6C00;
    --color--white:#fff;
    --colorFilter--white:invert(100%) sepia(0%) saturate(0%) hue-rotate(311deg) brightness(102%) contrast(104%);
    --color--white_dark:#F4F6F9;
    --color--blue_dark:#023047;
    --color-blue_light:#475C66;
    --color--skyblue:#209EBB;
    --color--skyblue_light:#BECAE6;


}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
    font-size: 62.5%;
    font-family: var(--type-font_1);
    font-size: 1.2rem;
    font-style: normal;
}

/*  */
a{
    text-decoration: none;
}

li{
    list-style: none;
}
address{
    font-style: normal;
}



/* Inicio Header */

    /* inicio Container contact information */
    header .container-contact_information{
        padding: 0px 40px;
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        background-color: var(--color--blue_dark);
    }
    header .container-contact_information .container-information{
        display: flex;
        align-items: center;
    }
    header .container-contact_information address{
        display: inline;
    }
    header .container-contact_information .information{
        color:var(--color--skyblue_light) ;
        font-size: 0.8rem;
        font-weight: 500;
    }

    header .container-contact_information .icon-general_1 {
        height: 16px;
        filter: var(--colorFilter--orange);
        margin-right: 8px;
    }
    /* fin Container contact information */

    /* inicio nav bar  */
    .nav_bar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
        height: 80px;
    }
    .logo{
        height: 40px;

    }
    .imagotipo_rectangle-navbar{
        display: flex;
        gap: 8px;
    }
    .logotipo-1{
        font-family: var(--type-font_2);
        text-transform: uppercase;
        font-weight: 400;
    }
    .logotipo-1.logotipo_p2{
        font-size: 0.5rem;
        letter-spacing: 0.35px;
        font-weight: 500;
        color: var(--color--blue_dark);
    }
    .logotipo-1.logotipo_p1{
        font-size: 2rem;
        letter-spacing: 6px;
        font-weight: 600;
        color: var(--color--orange);
        margin-bottom: -0.15em;
    }
    
/* Inicio ocultar Menus momentaneamente */
    .container-main_menu, .container-secondary_menu li:nth-child(1), .container-secondary_menu li:nth-child(3){
        display: none;
    }
    .container_mobile-main_menu, .container_mobile-secondary_menu li:nth-child(1), .container_mobile-secondary_menu li:nth-child(3){
        display: none;
    }

    .nav_bar .container-menu_navbar .container-list{
        display: flex;
        
    }
    .nav_bar  .container-list .link-menu_navbar{
        font-family: var(--type-font_2);
        padding: 0 10px;
        color: var(--color-blue_light);
        box-sizing:border-box;
        transition: font-weight 0.3s ease-in-out;
        font-weight: 600;
    }
    .nav_bar .container-list .link-menu_navbar:hover{
        color: var(--color--blue_dark);
        /* font-weight: 600; */
    }
    .mobile-menu_navbar{
        display: flex;
        font-family: var(--type-font_2);
        text-transform: uppercase;
        padding: 10px 12px 6px 12px ;
        border-radius: 6px;
        font-weight: 600;
        font-size: 1rem;
        color: var(--color--white);
        background-color: var(--color--orange);
        display: none;
        transition: background-color 0.3s ease-in-out;
    }
    .container-mobile_menu{
        position: absolute;
        z-index: 100;
        padding: 36px 0;
        background: var(--color--white_dark);
        display: none;
    }

    .nav_bar .container-mobile_menu .link-menu_navbar{
        font-size: 1.2rem;
        display: block;
        padding: 10px 36px;
        font-weight: 400;

    }

    /* fin nav bar  */
/* Fin Header*/

/* Inicio de Hero */
    .hero{
        /* height: 512px; */
        background: var(--color--orange_light);
    }
    .title {
        font-family: var(--type-font_2);
        font-size: 2.4rem;
        text-align: center;
        font-weight: 600;
        margin-bottom: 12px;
        color: var(--color--blue_dark);
    }
    .title-complement {
        font-family: var(--type-font_2);
        font-size: 1rem;
        text-align: center;
        font-weight: 500;
        color: var(--color--blue_dark);
    }
    .container-title{
        padding: 40px 0px 24px 0px;
    }
    .background_hero{
        /* height: 400px; */
        width: 100%;
        background-image:url("../image/fondo_hero.svg") ;
        background-repeat: no-repeat;
        background-position-x: 0px;
        background-position-y: 0 ;
        background-size: cover;
    }
    .container-solutions{
        /* height:420px ; */
        padding-top: 20px;
        display: flex;
        position: relative;
    }
    .image-solution{
        height: auto;
        width: 70%;

    }
    .title-image_solution{
        color: var(--color--white);
        font-weight: 400;
        font-size: 1rem;
        padding: 16px 10px 0px 10px;
    }
    .container-item_solution{
        width: 25%;
        height: 100%;
        /* border: 1px green solid; */
        text-align: center;
    }
    .container-buttons{
        display: flex;
        gap: 80px;
        justify-content: center;
        padding: 36px;
    }

    .button{
        font-size: 1rem;
        color: var(--color--white);
        display:block;
        padding: 10px 52px;
        border-radius: 8px;
        text-transform: uppercase;
        font-weight: 400;
    }
    .button_primary{
        background-color: var(--color--orange);
        transition: background-color 0.2s ease-in;
    }
    .button_primary:hover{
        background-color: var(--color--orange_light);
    }
    .button_secondary{
        border: var(--color--skyblue) 2px solid;
        transition: background-color 0.2s ease-in;
        
    }
    .button_secondary:hover{
        background-color: var(--color--skyblue);
        color: var(--color--white);
    }
/* fin de Hero */

/* inicio section specialists */
/* main{
    max-width: 1440px;
    margin: 0 auto;
} */

    .sections-item{
        padding: 40px 0;
    }
    .sections .container-title{
        padding: 80px 10px 60px 10px;
    }
    .sections .container-title .title{
        text-transform: uppercase;
        font-size: 2rem;
    }
    .sections .container-title .title-complement{
        font-size: 1rem;
    }
    .section-item_impar{
        background-color: var(--color--white_dark);
    }
    
    .title-complement_secItem{
        color: var(--color--black_light);
        font-size: 1rem;
        font-weight: 500;
        text-align: center;
    }
    
    .container-title_secItem{
        padding: 40px 10px;
    }
    .title-secItem{
        text-transform: uppercase;
        color: var(--color--black);
        font-weight: 600;
        font-size: 1.6rem;
        text-align: center;
        padding-bottom: 12px;
    }
    
    .container-details_secItemP{
        display: grid;
        grid-template: auto auto / 1fr 33%;
        grid-template-areas: "aTitle aImage"
                            "aCards aImage";
    }
    .container-details_secItemS{
        display: grid;
        grid-template: auto auto /33% 1fr;
        grid-template-areas: "aImage aTitle "
                            "aImage aCards";
    }
    .container-details_secItem{
        padding-bottom: 40px;
    }
    .title-description{
        grid-area: aTitle;
        font-size:1.4rem;
        font-weight: 600;
        color: var(--color--red_dark);
        text-align: center;
        padding-bottom: 40px;
    }
    
    .container-cards{
        grid-area: aCards;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
        padding: 0px 40px;
    }
    .image-details_secItem{
        grid-area: aImage;
        width: 100%;
    }
    
    .card-details{
        height: 164px;
        width: 31%;
        /* min-width: 150px; */
        background-color: var(--color--white);
        padding: 20px 10px;
        text-align: center;
        border-radius: 12px;
        border: var(--color--black_light) solid 1px;
        /* box-shadow: 1px 1px 5px ; */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
    }
    .section-item_par .card-details{
        background-color: var(--color--white_dark);
    }
    .container-details_secItemS .title-description{
        color: var(--color--orange_dark);
    }
    
    .container-details_secItemS .image-title_card{
        filter: var(--colorFilter--orange);
    }
    .image-title_card{
        width: 20px;
        filter: var(--colorFilter--red);
    }
    .title-card{
        display: flex;
        gap: 4px;
        justify-content: center;
        padding-bottom: 10px;
        font-size: 0.7rem;
        text-transform: uppercase;
        font-weight: 700;
        align-items: start;
    }
    .description-card{
        font-size: 0.7rem;
        font-weight: 400;
    }

    .mensaje-section{
        font-size:1.6rem;
        font-weight: 400;
        text-align: center;
        color: var(--color--blue_dark);
    }
    .sections-item .button_secondary{
        color: var(--color--skyblue);
        font-weight: 500;
    }
    .sections-item .button_secondary:hover{
        color: var(--color--white);
        
    }
/* fin section specialists */

/* Inicio de footer */
footer{
    display: grid;
    grid-template: auto auto / 2fr 1fr 2fr;
    grid-template-areas: "brand amenu info"
                        "acopy acopy acopy";
    background-color: var(--color--blue_dark);
    padding: 24px 40px 16px 40px;
}
.brand{
    grid-area: brand;
}
.imagotipo_rectangle-footer{
    display: flex;
    gap: 8px;
   
}
.imagotipo_rectangle-footer .logotipo-1{
    color: var(--color--white);
}
.imagotipo_rectangle-footer .logo{
    filter:var(--colorFilter--white)
}
.container-menu_footer{
    grid-area: amenu;
}
.container-menu_footer .container-list, .information-footer{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.link-menu_footer, .info-footer{
    color: var(--color--white);
    font-family: var(--type-font_2);
    font-size: 1rem;
    font-weight: 300;
}
.container-menu_footer .container-list{
    text-align: center;
}
.information-footer{
    grid-area: info;
    text-align: right;
}
.copyright{
    padding-top: 20px;
    grid-area: acopy;
    text-align: center;
    color: var(--color--skyblue);
    font-family: var(--type-font_3);
    font-size: 0.8rem;
}

/* Fin de footer */

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    /* Estilos específicos para dispositivos con un ancho máximo de 768px */

    /* inicio header */
    header .container-contact_information{
        flex-direction: column;
        height:68px;
        padding: 10px 10px;
    }
    .nav_bar{
        padding: 0 16px;
        height: 84px;
    }
    .imagotipo_rectangle-navbar{
        flex-direction: column;
        gap:opx;
    }
    .logotipo-1.logotipo_p2{
        font-size: 0.29rem;
        letter-spacing: 0.35px;
        font-weight: 500;
        color: var(--color--blue_dark);
    }
    .logotipo-1.logotipo_p1{
        font-size: 1rem;
        letter-spacing: 6px;
        font-weight: 600;
        color: var(--color--orange);
        margin-bottom: -0.1em;
        margin-top: -0.2em;
    }
    .mobile-menu_navbar{
        display: flex;
    }
    .container-mobile_menu{
        top:152px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .nav_bar .container-menu_navbar{
        display: none;
    }
    /* fin header */

    /* inicio hero */
    .container-solutions{
        height:420px ;
    }
    .container-title{
        padding: 40px 10px 24px 10px;
    }
    .title {
        font-family: var(--type-font_2);
        font-size: 1.8rem;
        text-align: center;
        font-weight: 600;
        margin-bottom: 12px;
        color: var(--color--blue_dark);
    }
    .title-complement {
        font-family: var(--type-font_2);
        font-size: 1rem;
        text-align: center;
        font-weight: 400;
        color: var(--color--blue_dark);
    }
    .container-item_solution{
        position: absolute;
        z-index: 10;
        width: 100%;
        opacity: 0;
        transition: opacity 1.5s ease-in-out;
    }
    .image-solution{
        height: 75%;
        width: auto;

    }
    .container-buttons{
        flex-direction: column;
        gap: 16px;
        padding: 20px 40px;
    }
    .button{
        padding: 12px 18px;
        text-align: center;
    }

    /* fin hero  */
    /* inicio de section Laptop */
    
    .container-details_secItem{
        display: grid;
        grid-template: auto auto auto / 1fr;
        grid-template-areas: "aTitle"
                            "aImage"
                            "aCards ";
    }
    .container-cards{
        row-gap: 24px;
    }
    .title-card{
        font-size: 1rem ;
    }
    .card-details{
        width: 100%;
        padding: 20px 10px;
        min-width: 150px;
    }
    .image-details_secItem{
        padding-bottom: 40px;
    }
    .description-card{
        font-size: 0.9rem;
        font-weight: 400;
    }
    /* fin de section Laptop */

/* Inicio de footer */
footer{
    display: grid;
    grid-template: auto auto auto auto/ 1fr;
    grid-template-areas: "brand"
                        "amenu"
                        "info"
                        "acopy";
    background-color: var(--color--blue_dark);
    padding: 24px 20px 16px 20px;
    row-gap: 30px;
}
.brand{
    display: flex;
    justify-content: center;
}


}
.imagotipo_rectangle-footer .logotipo-1{
    color: var(--color--white);
}
.information-footer{
text-align: center;
}
.imagotipo_rectangle-footer .logotipo_p1{
    font-size: 1.8rem;
    letter-spacing: 6px;
    font-weight: 600;
    margin: 0;
}
.imagotipo_rectangle-footer .logotipo_p2{
    font-size: 0.5rem;
    letter-spacing: 0px;
    font-weight: 500;
    margin-top: -0.5px;
}

/* Fin de footer */



/* Estilos para tabletas */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Estilos específicos para tabletas con un ancho mínimo de 768px y un ancho máximo de 1024px */


/* inicio de section Laptop */
.card-details{
    width: 45%;
    padding: 20px 10px;
    max-width: 350px;
}

/* fin de section Laptop */

}
/* Estilos para pantallas de escritorio */
@media (min-width: 1024px) {
    /* Estilos específicos para pantallas de escritorio con un ancho mínimo de 1024px */


}