@font-face {
    font-family: 'corbel';
    src: url(../fonts/corbel.ttf);
}
@font-face {
    font-family: 'corbel-b';
    src: url(../fonts/corbelb.ttf);
}
@font-face {
    font-family: 'LoH';
    src: url(../fonts/Fortheloveofhate.ttf);
}
@font-face {
    font-family: 'LoH-li';
    src: url(../fonts/Fortheloveofhatelight.ttf);
}
:root {
    --azul: #0054A4;
    --rojo: #C41230;
    --gris: #f4f4f4;
    --gristxt: #959292;
}
*{
    margin: 0;
    font-family: 'LoH';
}
body{
    overflow-x: hidden;
    margin: 0 auto;
}
html{
    scroll-behavior: smooth;
}
nav{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: var(--azul);
    padding-bottom: 2em;
    font-size: 20px;
}
nav a{
    text-decoration: none;
    color: inherit;
}
p{
    font-size: 1.2em;
}
header{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
/* Boton whatsapp INICIO*/
.whp{
    z-index: 10;
    top: 120px;
    right: 30px;
    display: grid;
    place-content: center;
    width: 50px;
    height: 50px;
    position: fixed;
    background-color: #00df3b;
    padding: 0.1em;
    font-size: 2.5em;
}
.whp i{
    color: white;
}
/* Boton whatsapp FIN*/

/* searchform inicio */
.searchform i{
    font-size: 2.5rem;
    padding: 0.1rem;
    margin: auto;
    background-color: var(--rojo);
    color: white;
    cursor: pointer;
    width: 58px;
    height: 58px;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.searchform{
    display: block;
    min-width: 0;
    max-width: none;
    width: fit-content;
    position: fixed;
    right: 30px;
    top: 40px;
    z-index: 100;
}
.searchform label{
    display: flex;
    position: relative;
}
.searchform input{
    transition: 250ms;
    width: 0;
    border: none;
    padding: 0;
}
.searchform.activeform input{
    width: 200px;
    padding-left: 1.5rem;
}
/* searchform fin */

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 30;
    left: 100%;
    top: -3vw;
}
.dropdown-content a{
    padding: 0.8em 0;
    display: block;
    color: #0054A4;
}
.dropdown-content a:hover{
    color: white;
    background-color: #C41230;
}
.dropdown-content hr{
    margin: 0 auto;
    width: 95%;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.footer_div_redes{
    text-align: center;
}
.container_flex{
    display: flex;
}
.logo_aside{
    padding-bottom: 3rem;
}
.shad{
    -webkit-box-shadow: 0px 2px 25px 0px rgba(204,204,204,1);
    -moz-box-shadow: 0px 2px 25px 0px rgba(204,204,204,1);
    box-shadow: 0px 2px 25px 0px rgba(204,204,204,1);
}
.shad-O{
    -webkit-box-shadow: 0px 2px 25px 0px rgba(90,90,90,1);
    -moz-box-shadow: 0px 2px 25px 0px rgba(90,90,90,1);
    box-shadow: 0px 2px 25px 0px rgba(90,90,90,1);
}
.dropShad{
    filter: drop-shadow(2px 2px 4px rgba(204,204,204,1));
}

.logoHeader{
    width: 6em;
}
.logoHeader:hover{
    transform: scale(1.1);
    transition: 0.5s;
}
.img_header{
    position: relative;
    width: 85vw;
    max-height: 100vh;
    position: relative;
    z-index: 1;
    margin-bottom: -6px;
}
.img_header img, .img_header video{
    width: 100%;
    max-height: 100vh;
    object-fit: cover;
}
.container_info_header{
    position: absolute;
    color: white;
    left: 17.7%;
    bottom: 27%;
    width: 22vw;
}
.container_info_header{
    text-align: center;
}
.container_info_header{
    padding: 1.2vw;
}
.container_info_header h1{
    font-size: 2vw;
}
.container_info_header p{
    font-family: 'LoH-li';
    font-size: 1.1vw;
    margin: 1.5vw 0;
}
.btn_inicio{
    color: white;
    padding: 0.25em;
    font-size: 1.1vw;
    color: black;
    background-color: white;
    border: none;
    width: 22%;
    aspect-ratio: 1;
}

.menu_aside, .logo_aside{
    height: calc(100%/6);
    display: grid;
    align-content: center;
    cursor: pointer;
}
.menu_aside:hover{
    background-color: #C41230;
    color: white;
    transition: 0.5s;
}
.experiencia{
    background: var(--azul);
    color: white;
    padding: 5.5em 0;
}
.experiencia h2{
    font-size: 4em;
    text-align: center;
    font-weight: lighter;
    margin-bottom: 1em;
}

.containerIconos{
    display: flex;
    margin: 0 auto;
    justify-content: space-evenly;
}
.iconoExp{
    width: calc(98%/6);
    text-align: center;
    text-decoration: none;
    color: white;
}
.iconoExp:hover{
    transform: scale(1.1);
    transition: 0.5;
}
.iconoExp img{
    width: 7em;
}
.owl-theme .owl-dots .owl-dot span{
    border-radius: 0;
}
.extra{
    background-image: url(../img/Recurso5.png);
    background-repeat: repeat-x;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-content: space-between;
    place-items: center;
    padding: 5em 0 6em;
}
.extraDiv{
    display: inline-block;
    text-align: center;
    width: 90%;
}
.extraDiv h1{
    color: var(--azul);
    font-size: 3.5vw;
    padding-bottom: 0.1em;
    margin-top: -4vw;
}
.extraDiv img{
    width: 30vw;
}
.extraDiv img:hover{
    transform: scale(1.05);
    transition: 0.5s;
}
.extraDiv p{
    font-family: 'corbel';
    padding: 2.5vw;
    text-align: left;
}
.extra_txt{
    display: flex;
    flex-direction: column;
}
.extra_txt img{
    width: 5vw;
}
.extraDiv2 .extra_txt{
    align-items: flex-end;
}
.extraDiv2 .extra_txt img{
    position: relative;
    right: 70%;
}
.complementarioHeader{
    width: 85vw;
}
.extraDiv1{
    justify-self: left;
}
.extraDiv1 h1{
    text-align: right;
    width: 80%;
    padding-right: 20%;
    border-bottom: var(--rojo) solid 5px;
}
.extraDiv2 h1{
    text-align: left;
    width: 65%;
    padding-left: 20%;
}
.extraDiv2{
    justify-self: right;
}
.extraDiv2 p{
    border-top: var(--rojo) solid 5px;
}
.banner{
    position: relative;
}
.banner-btn{
    position: absolute;
    left: 32%;
    bottom: 2%;
}
.banner-btn button{
    background-color: white;
    color: var(--azul);
    aspect-ratio: 1;
    font-size: 2vw;
    padding: 1.8vw;
    border: none;
    cursor: pointer;
}
.imgBanner{
    width: 100%;
}


.especial{
    display: flex;
    justify-content: space-between;
    padding: 2em 5em 0;
    max-width: 1750px;
    margin: 0 auto;
}
.especial_txt{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-bottom: 3em;
    gap: 2em;
}
.especial_txt h1{
    color: var(--rojo);;
    font-size: 4vw;
}
.especial_txt h2{
    font-weight: normal;
    color: var(--azul);
    font-size: 3vw;
}
.especial_img{
    text-align: right;
    width: 45%;
}
.especial_img img{
    height: 100%;
    object-fit: cover;
}
.especial_btn{
    color: white;
    background: var(--azul);
    width: 13vw;
    max-width: 15rem;
    border: 0;
    padding: 1em 0;
    font-size: 1.5em;
    aspect-ratio: 1;
}
.btnAppcore{
    transition: 0.4s;
}
.btnAppcore:hover{
    transform: scale(1.1);
    cursor: pointer;
}


.premios{
    background: rgb(36,60,169);
    background: radial-gradient(circle, rgba(36,60,169,1) 0%, rgba(8,21,74,1) 60%);
    color: white;
    padding: 2em 5em;
}
.premiosGrid{
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(5, 1fr);
    max-width: 1750px;
    margin: 0 auto;
}
.multiP{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    grid-column: 1/4;
    grid-row: 1/5;
    text-align: center;
}
.multiP img{
    width: 100%;
    max-width: 510px;
    margin:  0 auto;
    position: relative;
    top: 3em;
}
.multiP h1{
    font-size: 4em;
    width: 35vw;
    max-width: 600px;
    text-align: left;
}
.doradas{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    grid-column: 4/10;
    grid-row: 1/5;
    width: 100%;
    height: 30vh;
    margin: auto;
}
.doradas img{
    width: 16.5vw;
    margin: 0 1.5em;
    max-width: 330px;
}
.eaton{
    grid-column: 1/10;
    grid-row: 5/6;
    padding-right: 3em;
    text-align: right;
}
.eaton img{
    width: 20vw;
}


.sucursales_img{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}
.sucursales{
    position: relative;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    max-width: 1750px;
    margin: 0 auto;
    padding: 3em 0;
}
.sucursal{
    position: relative;
    width: 23vw;
    max-width: 24em;
    aspect-ratio: 1/1;
}
.sucursal:hover{
    transform: scale(1.05);
    transition: 0.5s;
}
.tituloSucursales{
    padding-left: 12%;
    font-size: 4vw;
    margin-top: 1em;
    color: var(--rojo);;
}
#CDMX, #GUADALAJARA, #MONTERREY, #HERMOSILLO{
    background-size: cover;
    color: white;
    text-align: center;
}
#CDMX{
    background-image: url(../img/cdmx.webp);
}
#GUADALAJARA{
    background-image: url(../img/monterrey.webp);
}
#MONTERREY{
    background-image: url(../img/guadalajara.webp);
}
#HERMOSILLO{
    background-image: url(../img/hermosillo.webp);
}
.nombre_sucursal{
    background-color: var(--rojo);;
    display: inline-block;
    width: 70%;
    padding: 1em;
}
.sucursal_txt{
    font-family: 'corbel';
    line-height: 1.5em;
    margin-top: 3.5em;
}
.adornoSuc{
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    aspect-ratio: 1/1;
    width: 20em;
}


footer{
    font-family: 'LoH-li';
    background-color: var(--azul);
    color: white;
    position: relative;
    padding: 3em 4vw 0;
    overflow: hidden!important;
}
footer hr{
    color: white;
    width: 95%;
    margin: 0 auto;
}
footer a, footer p, .legales span{
    font-family: 'LoH-li';
    font-weight: bold;
}
.logoFooter{
    width: 4em;
    margin-bottom: 1.5em;
}
.footer_div_redes p{
    text-align: justify;
    line-height: 1.6em;
}
.linksF{
    line-height: 3em;
    padding-top: 1em;
}
.divFoot a{
    text-decoration: none;
    color: white;
}
.redes{
    margin: 3em 0;
    display: flex;
    justify-content: space-evenly;
}
.redes a{
    background-color: white;
    width: 1em;
    padding: 0.5em;
    font-size: 1.5em;
    text-decoration: none;
    color: var(--azul);
    display: grid;
    place-content: center;
}
.redes a:hover{
    transform: scale(1.2);
    transition: 0.3s;
}
.divFoot{
    width: 20%;
}
#telefonos_foot{
    width: 35%;
}
.linksF span{
    font-family: Arial, Helvetica, sans-serif;
}
.divFoot hr{
    margin: 0;
}
#cuadrosFooter{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
}
.infoFooter, .legales{
    position: relative;
    z-index: 10;
}
.infoFooter{
    display: flex;
    justify-content: space-between;
}
.legales{
    text-align: center;
}

.mascara{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--azul);
    opacity: 0.4;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.sucursal_desc{
    position: relative;
    z-index: 10;
}
.legales{
    padding: 3em 0;
}

.fondoM{
    background-color: var(--gris);
    padding: 1rem 0 2rem;
    margin: 2rem 0;
}


/* MENU INICIO */
.inicial_menuMob{
    display: none!important;
    position: absolute;
    font-size: 2.5rem;
    left: 2rem;
    top: 2rem;
    z-index: 50;
    color: white;
    background-color: var(--azul);
    padding: 0.25rem 0.4rem;
    cursor: pointer;
}
.menumobActivo{
    display: block!important;
    position: fixed;
    width: 100%;
    z-index: 120;
    background: white;
    transition: 0.5s;
}
/* MENU FIN */

.marcasseparadas{
    display: none;
}
/* CARRUSEL PRODUCTOS INICIO */
.olw-items{
    color: black;
}
.owl-carousel .owl-item img{
    display: block;
    width: min(100%,300px);
    margin: auto;
    max-width: 27em;
    aspect-ratio: 1;
    object-fit: contain;

    /* ------ */
    border: solid var(--azul) 1px;
    padding: 10px;
    box-sizing: border-box;
    background: white;
}
.owl-theme .owl-nav [class*="owl-"]{
    border-radius: 0;
}
.owl-prev{
    position: absolute;
    top: 45%;
    left: 3rem;
}
.owl-next{
    position: absolute;
    top: 45%;
    right: 3rem;
}
.container_info h2{
    margin: 1rem 0;
}
.prodCat h3{
    margin-bottom: 1rem;
}
.container_info{
    padding: 0 3rem;
}
.owl-theme .owl-nav{
    /* display: flex; */
    /* width: 90%; */
    /* justify-content: space-between; */
    /* padding: 0 5%; */
    /* position: absolute; */
    /* top: 35%; */
    margin: 0 auto;
}
/* CARRUSEL PRODUCTOS FIN */


.owl-theme .owl-dots .owl-dot span{
    background-color: #0054A4;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background-color: #7e97af;
}
.owl-nav button{
    background: var(--azul)!important;
    aspect-ratio: 1;
    color: white!important;
    width: 2.5rem;
}

.logoMob{
    display: none;
}

.imgBannerMob{
    display: none;
}
.aire-mob-h{
    display: none;
}




@media (min-device-width:600px) and (max-device-width:1100px){
    /* nav{
        padding-top: 2em;
        gap: 1.5em;
    }
    .img_header{
        background-image: url(../img/webv2-02.jpg);
        background-size: cover;
        width: 85vw;
    }
    .img_header img, .img_header video {
        display: none;
    } */
    .complementarioHeader{
        width: 75vw;
    }

    .experiencia{
        padding: 5.5em 1.5em 0;
    }
    .iconoExp{
        width: calc(95%/3);
        margin-bottom: 5.5em;
    }
    .containerIconos{
        flex-wrap: wrap;
    }

    #telefonos_foot{
        width: calc(90%/2);
    }
    .extra{
        gap: 3em;
    }
    .extraImg{
        width: 30em!important;
    }
    .extraDiv1, .extraDiv2{
        grid-column: 1/3;
    }
    .extraDiv1 .extraImg{
        margin-left: 6em;
    }
    .extraDiv1 h1{
        width: 80%;
        padding-right: 6%;
    }
    .extraDiv2{
        display: flex;
        flex-direction: column-reverse;
    }
    .extraDiv2 img{
        align-self: center;
    }
    .extraDiv h1{
        font-size: 3.5em;
        margin-top: 0;
    }
    .extraDiv2 h1 {
        width: 70%;
    }
    .extra_txt img{
        display: none;
    }
    .especial_img img{
        width: 36vw;
    }
    .especial{
        padding: 2em 2em 0;
    }
    .especial_btn{
        padding: 0.5em 0;
        min-width: 10rem;
        width: 25%;
    }
    .especial_txt h1{
        font-size: 5vw;
    }
    .especial_txt h2{
        font-size: 4vw;
    }


    .premiosGrid{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .multiP h1{
        width: auto;
        text-align: center;
    }
    .multiP img{
        width: 75%;
        margin-top: 1em;
        top: 0;
    }
    .doradas{
        padding-top: 4em;
        height: auto;
    }
    .doradas img{
        width: 28vw;
        margin-bottom: 2em;
    }
    .eaton{
        width: 100%;
        margin-top: 4em;
    }
    .eaton img{
        width: 17em;
    }


    .sucursales{
        display: block;
    }
    .sucursal{
        width: 45vw;
    }
    .tituloSucursales{
        font-size: 2.2em;
        text-align: center;
        padding: 0;
        margin-bottom: 1.5em;
    }
    .sucursal_txt{
        padding-bottom: 0.5em;
    }
    .adornoSuc{
        z-index: -10;
        top: 0;
        width: 10em;
        transform: rotate(90deg);
    }
    .infoFooter{
        flex-wrap: wrap;
    }
    .divFoot{
        margin-bottom: 3em;
        width: calc(90%/2);
    }
    footer hr{
        width: 100%;
    }


    /* MENU INICIO */
    header{
        display: block;
        min-height: 0!important;
    }
    .inicial_menuMob{
        display: block!important;
    }
    .incial_menuPC{
        display: none;
        /* top: -50%; */
    }
    .inicial_menuMob{
        display: block;
    }
    .img_header{
        width: 100%;
    }
    /* .menumobActivo{
        top: 0;
    } */
    nav a{
        display: block;
        margin: 1em 0;
    }
    /* .menu_aside.dropdown a{
        margin: 0;
    } */
    .dropdown:hover .dropdown-content {
        display: block;
        position: initial;
    }
    .dropdown-content a{
        margin: 0.5em 0!important;
    }
    .complementarioHeader{
        width: 100%;
        min-height: 60vmin;
    }
    /* MENU FIN */



    .container_info_header h1{
        display: none;
    }
    .btn_inicio{
        font-size: 2.1vw;
    }
    .container_info_header{
        padding: 0;
        width: 29vw;
    }
}
@media (min-device-width:250px) and (max-device-width:599px){
    #telefonos_foot{
        width: 100%;
    }
    .experiencia{
        padding: 3em 0 0;
    }
    .experiencia h2{
        font-size: 13vw;
    }
    .containerIconos{
        flex-wrap: wrap;
    }
    .iconoExp{
        width: calc(98%/2);
        margin-bottom: 3em;
    }


    .extra{
        display: block;
    }
    .extraDiv{
        width: 100%;
        margin-bottom: 3em;
    }
    .extraDiv img{
        margin: 2em auto 0;
    }
    .extra_txt img{
        display: none;
    }
    .extra_txt h1{
        margin-top: 0;
    }
    .extraImg{
        width: 70%!important;
    }
    .extraDiv p{
        text-align: center;
    }
    .extraDiv h1{
        font-size: 2.5em;
        width: 100%;
        text-align: center;
        padding: 0;
    }
    .extraDiv2{
        display: flex;
        justify-content: center;
        flex-direction: column-reverse;
    }


    .especial{
        display: block;
        padding: 2em 2em 0;
    }
    .especial_img{
        width: 100%;
        text-align: center;
    }
    .especial_img img{
        width: 85%;
    }
    .especial_btn{
        width: 7em;
        padding: 0.5em 0;
    }
    .especial_txt{
        text-align: center;
        padding-bottom: 1.5em;
    }
    .especial_txt h1{
        font-size: 2em;
    }
    .especial_txt h2{
        font-size: 1.5em;
    }


    .premios{
        padding: 4em 2em;
    }
    .premiosGrid{
        display: block;
    }
    .multiP h1{
        width: auto;
        font-size: 10vw;
        text-align: center;
    }
    .multiP img{
        top: 0;
        width: 70vw;
        margin: 2em auto;
    }
    .doradas{
        height: auto;
    }
    .doradas img{
        margin-bottom: 2em;
        width: 50vw;
    }
    .eaton{
        text-align: right;
        padding: 0;
    }
    .eaton img{
        width: 60%;
    }


    .tituloSucursales{
        padding: 0;
        font-size: 2em;
        text-align: center;
        margin: 0 0 1.5em;
    }
    .sucursales{
        display: block;
    }
    .sucursales_img{
        flex-direction: column;
    }
    .sucursal{
        width: 90vw;
        margin: 0 auto;
    }
    .adornoSuc{
        z-index: -10;
    }


    .infoFooter{
        flex-wrap: wrap;
    }
    .divFoot{
        margin-bottom: 3em;
        width: 100%;
        text-align: center;
    }
    .divFoot h2{
        margin-bottom: 1.5vw;
    }

    /* MENU INICIO */
    header{
        display: block;
        min-height: 0!important;
    }
    .inicial_menuMob{
        display: block!important;
    }
    .incial_menuPC{
        display: none;
        /* top: -50%; */
    }
    .inicial_menuMob{
        display: block;
    }
    .img_header{
        width: 100%;
    }
    nav a{
        display: block;
        margin: 1em 0;
    }
    /* .menu_aside.dropdown a{
        margin: 0;
    } */
    .dropdown-content a{
        margin: 0.5em 0!important;
    }
    .complementarioHeader{
        width: 100%;
        min-height: 60vmin;
    }
    .dropdown-content{
        display: none;
        position: initial;
    }
    /* MENU FIN */

    .logoMob{
        display: block;
        height: 30vw;
        padding: 10vw 0;
        position: relative;
        text-align: center;
    }
    .logoMob img{
        width: 25vw;
    }
    .inicial_menuMob{
        position: absolute;
        font-size: 9vw;
        top: 39vw;
        left: 18vw;
    }
    .marcascompleta{
        display: none;
    }
    .marcasseparadas{
        display: block;
        margin: auto;
    }
    .imgBannerMob{
        width: 100%;
        display: block;
    }
    .imgBanner{
        display: none;
    }
    .aire-mob-h{
        position: absolute;
        font-size: 5vw;
        display: block;
        color: white;
        width: 50vw;
        bottom: 30vw;
        left: 8vw;
    }
    .banner-btn button{
        font-size: 3.5vw;
    }
    .banner-btn{
        left: 27vw;
        bottom: 8vw;
    }
}