/*----------------------------------
             FONTS
------------------------------------*/
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(../fonts/poppins200.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/poppins300.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins400.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/poppins600.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins700.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /* latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/poppins900.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/*Generales*/
*{box-sizing: border-box;font-family:Poppins, sans-serif;
	scroll-behavior: smooth;}
body{margin:0;padding:0;background-color:var(--blanco);}


/*
  COLORES MODO OSCURO
*/
body.dark{
    background-color:var(--negro);transition:all ease .5s;
}

body.dark .dDark{display:block;} body.dark .dLight{display:none;}

body.dark .containerMenu .containerButtonsD {color:var(--negro);}
body.dark .avisoPreMenu{background-color:var(--principal);}
body.dark .avisoPreMenu p{color:var(--blanco);padding-left:5px;padding-right:5px;}
body.dark .avisoPreMenu i{color:var(--blanco);padding-left:5px;padding-right:5px;height:21px;padding-top:5px;}
body.dark header{background-color:var(--negro);
    border:solid 1px #18191b;}
body.dark .containerMenu .containerButtonsD{color:var(--blanco);}
body.dark .nav-bar span:after{background-color:var(--blanco);}
body.dark .nav-bar span:before{background-color:var(--blanco);}
body.dark .nav-bar span{background-color:var(--blanco);}
body.dark .closeBar span{background-color:transparent;}
body.dark .menu__link{color:var(--blanco);}
body.dark .menu{background-color:var(--negro);}
body.dark .container-submenu:hover .submenu{box-shadow:none;}

body.dark .submenu-btn span::after{background-color:var(--blanco);}
body.dark .submenu-btn span::before{background-color:var(--blanco);}

body.dark .submenu-btn:hover span::after{background-color:var(--blanco);}
body.dark .submenu-btn:hover span::before{background-color:var(--blanco);}

body.dark .submenu .menu__link{background-color:#161313;}


body.dark .menu__item:hover > .submenu-btn{color:var(--blanco);}
body.dark .buscadorModal{background-color:#3b3b3bde;}

body.dark .modo{background-color:var(--blanco);border:1px solid var(--negro);}
body.dark .modo p{color: var(--negro);}
body.dark .modo i{color: var(--negro);}
body.dark .usuario{color:var(--blanco);}
body.dark .usuario p {color:var(--blanco);}
body.dark .containerIcons a {color:var(--blanco);}


/*-------------------------------------------------------------
            MODALES USUARIO
/*---------------------------------------------------------------*/


.usuario, .containerIcons a{color:var(--negro);}
.usuario p{color:var(--negro);}
.usuarioModal{
    width:100%;height:100vh;z-index:1000;
    transition:all ease .5s;


    display:flex;
    align-items: center;
    justify-content: center;


    position:absolute;top:0;
    position:fixed;display:none;
    background-color:rgba(51, 51, 51, 0.507);
}


.abrirModalUsuario{
    display:flex;
}

.containerModalUsuario{
    width:400px;
    height:auto;
    min-height:450px;
    background-color: var(--blanco);
    overflow:hidden;
    padding:10px 30px;
    text-align:center;
    border-radius:5px;
}

.containerModalUsuario form .titleModal{
    font-size:35px;display:block;margin-bottom:20px;margin-top:15px;color: var(--negro);
    line-height:40px;
}
.containerModalUsuario label{
    font-size:14px;text-align: left;
    width:100%;display:block;
}

.containerModalUsuario label span{
    color:tomato;
}

.containerModalUsuario input{
    width:100%;display:block;
    padding:12px;border-radius:5px;
    margin-top:10px;margin-bottom:15px;
    outline:none;
    background-color: transparent;
    color: var(--negro);
    border:1px solid var(--colorshadow);
}

body.dark .containerModalUsuario input{
    color:var(--blanco);
}


.containerModalUsuario input:focus{
    border:1px solid var(--secundario);
}

.containerModalUsuario input:hover{
    border:1px solid silver;
}



.containerModalUsuario .span{
    font-size:14px;width:100%;display:block;text-align: right;
    transition: all ease .3s;cursor: pointer;
}

.containerBuscador .span:hover{
    text-decoration: underline;
}

.containerModalUsuario form .submit{
    outline:none;
    background-color: var(--principal);
    color:var(--blanco);border:none;
    transition:all ease .3s;
    cursor: pointer;padding-top:10px;padding-bottom:10px;
    font-size:20px;
}
.containerModalUsuario form .submit:hover{
    background-color: var(--secundario);
}



.containerBuscador form .submit:hover{
    background-color: var(--secundario);
}


.noTieneCuenta{
    font-size:15px;display:block;padding:10px 10px 20px 10px;color: var(--negro);
    transition:all ease .3s;
    cursor: pointer;
}

.noTieneCuenta:hover{
    color: var(--principal);
}

.mostrarFormm{
    display:flex;
}

.OcultarFormm{
    display:none;
}


.iconCloseModalUsuario{
    width:50px;height:50px;
    border-radius:50%;
    position: relative;
    background-color: rgb(243, 243, 243);
    overflow: hidden;
    display:flex;justify-content:center;
    align-items:center;margin-left:90%;
    margin-bottom:-20px;
    color:var(--blanco);transition:all ease .2s;cursor:pointer;
}
.iconCloseModalUsuario:hover{
    transform:rotate(360deg);
}
.iconCloseModalUsuario::after,.iconCloseModalUsuario::before{
    content:'';
    position:absolute;
    height:2px;width:50%;
    background-color:var(--negro);
}
.iconCloseModalUsuario::after{transform:rotate(45deg);transition:all ease .3s;}
.iconCloseModalUsuario::before{transform:rotate(-45deg);transition:all ease .3s;}

.iconCloseModalUsuario:hover.iconCloseModalUsuario::after{transform:rotate(-45deg);}
.iconCloseModalUsuario:hover.iconCloseModalUsuario::before{transform:rotate(45deg);}









/*Slider*/
.bannerEscritorio{display:block;}
.bannerResponsive{display:none;}
/*Fin del slider*/

.marginTopHeader{margin-top:-30px;}
header{
    min-height:55px;position: fixed;height:55px;;z-index:101;
    border:solid 1px var(--grisclaro);
    background-color: var(--blanco);width:100%;height:auto;display:flex;justify-content:center;
}



.containerMenu{
    display:flex;
    justify-content:space-between;
    height:55;width:100%;
}

.controlImgAbsNav{
    padding:5px;
    width:130px;
    height:auto;
    overflow:hidden;
}

.containerMenu .containerOpenLogo{
    max-height:55px;
    overflow:hidden;
    display:flex;color:var(--negro);
    justify-content:space-between;order:1;align-items: center;
}

.controlImgAbsNav img{
    width:100%;height:auto; 
}

.dDark{display:none;}
.dLight{display:block;}

.containerMenu .containerButtonsD{
    max-height:50px;
    display:flex;color:var(--negro);order:2;
    justify-content:space-between; 
}
.containerMenu nav{
    order:3;font-weight: 500;
}
.containerButtons img{
   padding:10px;cursor:pointer;
}
.containerIcons{
    display:flex;cursor:pointer;font-variant: small-caps;text-transform:uppercase;
    justify-content:space-between;align-items:center;padding:0px 10px 0px 0px;margin-top:-3px;
}

.flexIconMenuO{
    display:flex;justify-content: center;align-items:center;transition:all ease .3s;
    flex-direction: column;width:70px;height:40px;/*border-left:1px solid silver;*/
}
.flexIconMenuO:hover{color:var(--secundadario);}

.flexIconMenuO i{
    height:20px;padding-top:10px;
}

.flexIconMenuO p{
   font-size:10px; text-align: center;padding-left:5px;padding-right:5px;
}


/*Carrito*/
.cart span,.favoritos span{
    position:absolute;display:flex;
    justify-content:center;align-items:center;
    overflow:hidden;border-radius:50%;
    margin-top:-10px;font-size:11px;margin-left:27px;
    color:var(--blanco);padding:2px;
    margin-top:-17px;margin-left:15px;
    text-align:center;min-width:17px;max-height:17px;
}


.cart span{background-color:var(--cartSpan);}
.favoritos span{background-color:var(--principal);}

.ocultResponss{color: var(--negro);}
body.dark .ocultResponss{color:var(--blanco);}

.nav-bar{
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    font-size:1.5em;
    width:40px;height:40px;border-radius:50%;
}

.nav-bar span{
    display:flex;position:relative;
    justify-content: center;align-items: center;
    width:50%;height:2px;background-color:var(--negro);
}
.nav-bar span:after,.nav-bar span:before{
    content:"";
    position:absolute;width:100%;height:2px;
    display:flex;
    background-color:var(--negro);
}

.nav-bar span:after{top:-8px;transition:all ease .5s;}
.nav-bar span:before{top:8px;transition:all ease .5s;}

.closeBar span{background-color:transparent;}

.closeBar span::after{transform: rotate(45deg);top:0px;}
.closeBar span::before{transform: rotate(-45deg);top:0px;}


.main-nav{
    width:100%;
}
.menu, .submenu{
    list-style:none;padding:0;margin:0;
}
.menu{
    background-color:var(--blanco);
    width:250px;height:100%;overflow:auto;
    margin-left:-100%;position:absolute;position:fixed;
    transition:all ease .4s;z-index:1;left:0px;
}


.mostrar{
    margin-left:0;

}

.menu__link{
    display:block;color:var(--negro);
    padding:20px;
    font-size:1em;transition:all ease .5s;
    text-decoration:none;border-bottom:solid 0.2px rgb(236, 236, 236);
}
.menu__link:hover{
    background-color:transparent;color:var(--principal);
}

.submenu{
    transition:0.3s all ease;
    height:0px;overflow:hidden;}

.submenu .menu__link{
    background-color:#fafafa;font-weight:400;
    font-size:0.85em;
    padding-left:30px;transition:all ease .3s;
}

.submenu .menu__link:hover{
    background-color:transparent;padding-left:15px;
}

.submenu-btn span{
    display:flex;position:relative;left:95%;top:-2px;
    justify-content: center;align-items: center;
    width:6px;height:1px;background-color:transparent;
}

.submenu-btn span::after,.submenu-btn span::before{
    content:"";
    position:absolute;width:100%;height:1px;
    display:flex;transition:all ease .3s;
    background-color:var(--negro);
}
.submenu-btn span::after{top:-10px;transform:rotate(40deg);transition:all ease .3s;}
.submenu-btn span::before{top:-10px;left:5px;transform:rotate(-40deg);transition:all ease .3s;}

.submenu-btn:hover span::after{background-color:var(--blanco);}
.submenu-btn:hover span::before{background-color:var(--blanco);}

.removerSubMenu{background-color:var(--principal);color:var(--blanco)}
.removerSubMenu span::after{top:-10px;transform:rotate(-40deg);background-color:var(--blanco);}
.removerSubMenu span::before{top:-10px;transform:rotate(40deg);background-color:var(--blanco);}


.overlayMenu{
    background-color:rgba(54, 54, 54, 0.335);top:85px;
    height:100vh;width:100%;position:absolute;
    position:fixed;display:none;z-index:1;
}

.displayOverLayMenu{
    display:block;
}



    /*Buscador*/
    .buscadorModal{
        width:100%;height:auto;z-index:1000;
        transition:all ease .3s;
        position:absolute;top:0;
        position:fixed;display:none;
        background-color:rgba(54, 54, 54, 0.335);
    }

    .abrirBuscador{
        display:flex;
        transition:all ease .3s;
    }

    .containerBuscador{
        width:100%;
        background-color:var(--blanco);
        height:auto;max-height:210px;/*margin:auto;*/
        transition:all ease .3s;
    }

    body.dark .containerBuscador{
        background-color: var(--negro);
    }


    .iconCloseBuscador{
        width:50px;height:50px;
        /*
        margin-top:-150px;margin-bottom:50px;
        */
        border-radius:50%;position:relative;
        display:flex;justify-content:center;background-color:var(--blanco);
        align-items:center;margin-left:96%;
        color:var(--blanco);transition:all ease .2s;cursor:pointer;

        /*borrar luego si es necesario*/
    }

    body.dark .iconCloseBuscador{
        border-radius:0px;
    }


    .iconCloseBuscador:hover{
        transform:rotate(360deg);
    }
    .iconCloseBuscador::after,.iconCloseBuscador::before{
        content:'';
        position:absolute;
        height:2px;width:50%;
        background-color:var(--negro);
    }
    .iconCloseBuscador::after{transform:rotate(45deg);transition:all ease .3s;}
    .iconCloseBuscador::before{transform:rotate(-45deg);transition:all ease .3s;}

    .iconCloseBuscador:hover.iconCloseBuscador::after{transform:rotate(-45deg);}
    .iconCloseBuscador:hover.iconCloseBuscador::before{transform:rotate(45deg);}

    .containerBuscador form{
        margin:auto;max-width:1400px;width:90%;
    }

    .containerBuscador form p{
        color:var(--blanco);
        font-size:20px;margin-bottom:5px;
    }
    .containerBuscador .FlexBuscadorModal{
        display:flex;margin-top:20px;margin-bottom:40px;
        justify-content: center;
        background-color: var(--blanco);
        height:auto;
    }

    body.dark .containerBuscador .FlexBuscadorModal{
        background-color: var(--negro);
    }

    .containerBuscador .FlexBuscadorModal input{
        padding:15px;outline:none;border:none;
        width:100%;max-width:1100px;font-size:20px;
        border-bottom:2px solid silver
    }

    body.dark .containerBuscador .FlexBuscadorModal input{
        border:none;
    }

    .clearValInput{
        width:55px;background-color:var(--blanco);cursor:pointer;border-bottom:2px solid silver;
    }
    body.dark .clearValInput{
        border:none;
    }

    .clearValInput::after,.clearValInput::before{
        content:'';
        position:absolute;margin-top:30px;
        height:1px;background-color: var(--negro);
        width:20px;margin-left:10px;
    }

    .clearValInput::after{transform:rotate(45deg);}
    .clearValInput::before{transform:rotate(-45deg);}
    

    .containerBuscador .FlexBuscadorModal button{
        padding:15px;outline:none;border:none;cursor:pointer;
        width:60px;background-color:var(--principal);color:var(--negro);transition:all ease .3s;
    }
    .containerBuscador .FlexBuscadorModal button:hover{
        position:relative;
    }

    .containerBuscador .FlexBuscadorModal button span{
        border-radius:50%;
        width:18px;height:18px;border:2px solid var(--blanco);
        position: absolute;margin-top:-14px;margin-left:-12px;
    }
    .containerBuscador .FlexBuscadorModal button span::after{
        content:'';
        position:absolute;transform:rotate(45deg);
        height: 2px; width:10px;margin-top:18px;margin-left:5px;
        background-color:var(--blanco);
    }

    /*Estilos para resultados de búsqueda*/
    .resultadosBusqueda{
        width:100%;height:75%;margin:auto;overflow-x:scroll;
      }
      .flexResultadosBusqueda{
        display:flex;justify-content:center;
        background-color:var(--blanco);padding:20px;
        border-bottom:1px solid #f5f5f5;
      }
      .flexResultadosBusqueda a{list-style:none;text-decoration:none;}
      .flexResultadosBusqueda .imgResultadoBusqueda{
        width:130px;
        height:150px;
      }
      .flexResultadosBusqueda .imgResultadoBusqueda img{
        width:100%;
        height:100%;
      }
      .flexResultadosBusqueda .infoResultadoBusqueda{
        width:800px;padding:10px;color:var(--negro);
      }

      .flexResultadosBusqueda .infoResultadoBusqueda .nombreProductoResutladoBusqueda{
        font-size:25px;
        padding:10px;
      }

      .flexResultadosBusqueda .infoResultadoBusqueda .BotonProductoResutladoBusqueda{
      font-size: 15px;
      margin-left:10px;
      width: 150px;
      text-align: center;
      line-height: 2.5;
      border-radius:5px;
      height: 40px;
      background-color: var(--negro);
      color: var(--blanco);
      transition:all ease .3s;
      }

      .flexResultadosBusqueda:hover .BotonProductoResutladoBusqueda{ background-color: var(--principal);}




@media(max-width:1000px){
    .flexResultadosBusqueda .infoResultadoBusqueda{width:500px;}
}
@media(max-width:700px){
    .flexResultadosBusqueda .infoResultadoBusqueda{width:300px;}
    .flexResultadosBusqueda .infoResultadoBusqueda .nombreProductoResutladoBusqueda{font-size:20px;line-height: 20px;}
}
@media(max-width:480px){
    .flexResultadosBusqueda .infoResultadoBusqueda{width:250px;}
}
@media(max-width:410px){
    .flexResultadosBusqueda .infoResultadoBusqueda{width:210px;}
}

@media(max-width:390px){
    .flexResultadosBusqueda .infoResultadoBusqueda{width:200px;}
    .flexResultadosBusqueda{padding:10px;}
    .flexResultadosBusqueda .imgResultadoBusqueda{width:110px;height:130px;}
}





 /*Aviso*/
 .despAparecer{display:none;}
 .avisoPreMenu{background-color:var(--principal);width:100%;height:auto;max-height:30px;padding:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
 .avisoPreMenu i{color:var(--blanco);padding-right:10px;font-size:12px;}
 .avisoPreMenu p{color:var(--blanco);font-size:14px;font-weight:500;}
 .avisoPreMenu span{color:var(--blanco);font-size:14px;padding-left:10px;} 
 /*Fin del aviso*/
 /*Modo*/
 .modo{width:30px;
    border-top-right-radius: 10px;border-bottom-right-radius: 10px;height:30px;overflow:hidden;background-color:var(--negro);position:absolute;z-index:100;top:100px;left:-1px;display:flex;justify-content:center;padding-top:9px;padding-left:0px;color:var(--blanco);cursor: pointer;transition:all ease .3s;}

#lightDark{
    margin-top:-2px;
}





 @media(max-width:1160px){
    .containerIcons{margin-top:5px;}
    .containerMenu{flex-wrap: wrap;}
    .containerMenu .containerOpenLogo img{margin-top:0px;width:100%;}

    /*Moviendo el buscador para vista inferior*/
    .containerBuscador{max-height:90px;}
    .containerBuscador form{width:85%;margin-left:0px;}
    .containerBuscador .ocultResponss{display:none;}
    .containerBuscador .FlexBuscadorModal{margin-top:10px;}
    .iconCloseBuscador{position:absolute;margin-left:90%;}
    .containerBuscador .clearValInput{display:none;}
    .containerBuscador .FlexBuscadorModal button{background-color:transparent;color:var(--negro);}
    body.dark .containerBuscador .FlexBuscadorModal button{background-color:var(--blanco);color:var(--negro);}
    .containerBuscador .iconCloseBuscador{margin-top:10px;width:50px;height:60.5px;margin-left:85%;}
    .containerBuscador .FlexBuscadorModal button span{border:2px solid var(--negro);}
    .containerBuscador .FlexBuscadorModal button span::after{background-color:var(--negro);}
    
    /*-- Sede --*/
    .selector-container{
        margin-top:55px;
    }
 }
@media(max-width:850px){
    .containerMenu .containerOpenLogo{width:auto;}
        
}
@media(max-width:700px){
    .bannerEscritorio{display:none;}
    .bannerResponsive{display:block;}
}

@media(max-width:525px) {
.removeborderLeftResponsive{border-left:0;}
}

@media(max-width:500px) {
    .containerModalUsuario{width:350px;padding:10px 20px;}
    .iconCloseModalUsuario{margin-left:87%;}
}

@media(max-width:475px){
    .flexIconMenuO p{display:none;}
    .flexIconMenuO{width:50px;}
    .cart span{margin-top:-25px;}
    .favoritos span{margin-top:-25px;margin-left:10px;}
    .flexIconMenuO i{padding-top:3px;}
}


@media(max-width:450px) {
    .containerModalUsuario{width:310px;padding:10px 18px;}
    .iconCloseModalUsuario{margin-left:85%;}

}




@media(max-width:400px){.flexIconMenuO{width:45px;}}

@media(max-width:365px){.flexIconMenuO{width:43px;}}
@media(max-width:360px){.containerOpenLogo img{width:90px;margin-top:5px;}}
@media(max-width:355px){.flexIconMenuO{width:38px;}}
@media(max-width:336px){.containerOpenLogo img{width:80px;margin-top:5px;}}


@media(min-width:1160px){
   
    .overlayMenu{display:none;}
    .nav-bar{
        display:none;
    }
    .header{height:65px;}
    .main-nav{
        width:auto;display:flex;justify-content:left;align-items: center;
    }
    .menu{
        margin-left:0;width:auto;background-color:transparent;transition:all ease .0s;
        display:flex;height:auto;overflow:visible;position: static;
    }
    .container-submenu{
        position:relative;
    }
    .menu__link{background-color:var(--blanco);border-bottom:0px;}
    .menu__link:hover{background-color:transparent;color:var(--negro);}
    .submenu-btn span::after{margin-left:20px;}
    .submenu-btn span::before{margin-left:9.5px;}
    .submenu-btn:hover span::after{background-color:var(--principal);top:-10px;transform:rotate(-40deg)}
    .submenu-btn:hover span::before{background-color:var(--principal);top:-10px;transform:rotate(40deg)}
    



    .menu__item:hover > .submenu-btn{
        background-color:transparent;color:var(--negro);
    } 
    .menu__item:hover >  .submenu-btn span::after{
        background-color:var(--principal);top:-10px;transform:rotate(-40deg)
    }
    .menu__item:hover >  .submenu-btn span::before{
        background-color:var(--principal);top:-10px;transform:rotate(40deg)
    }

    .selectedItem::before{
        content:'';
        background-color: var(--principal);
        width:0px;height:2px;transition:all ease .3s;
        position:absolute;margin-top:25px;
    }

    .selectedItem2::before{
        content:'';
        background-color: var(--principal);
        width:0px;height:2px;transition:all ease .3s;
        position:absolute;margin-top:25px;
    }

    .selectedItem3::before{
        content:'';
        background-color: var(--principal);
        width:0px;height:2px;transition:all ease .3s;
        position:absolute;margin-top:25px;
    }

  
    .menu__link{position:relative;height:auto;font-size:1em;background-color:transparent;margin-top:-5px;}
    .menu__item:hover .selectedItem::before{
        width:55%;
    }





    .menu__item:hover .selectedItem2::before{
        width:68%;
    }

    .menu__item:hover .selectedItem3::before{
        width:75%;
    }
    
    

    .submenu{
        position:absolute;
        top:55px;height:0px;
        transition:all ease .3s;
        width:auto;border-radius:20px;
        z-index:1000;min-width:220px;
        background-color:var(--blanco);
    }
    .submenu-btn{margin-right:20px;}
    .submenu .menu__link{padding-left:10px;padding-right:8px;width:auto;max-width:220px;padding:15px;}
    .submenu .menu__link:hover{color:var(--principal);}
    .container-submenu:hover .submenu{
        overflow:hidden;border-radius:2px;
        opacity:1;box-shadow: 0 -3px 23px -9px var(--colorshadow);height:auto;
    }

    .containerMenu{
        display:flex;
        justify-content:space-between;height:70px;
        max-width:1550px;margin: auto;padding:0px;
    }
    
    .containerMenu .containerOpenLogo{order:1;width:150px;max-height:70px;}
    .containerMenu .containerButtonsD{order:3;max-height:70px;}
    .containerMenu nav{
        order:2;
    }
}