body,html{
   overflow-x: hidden !important;
   
}
.web{
    overflow-y:hidden;
    overflow-x: hidden !important;
}
iframe {
    overflow: hidden !important;
    pointer-events: none !important;
}
/* fonts */

@font-face {
    font-family: 'Euclid Circular A Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Euclid Circular A Regular'), url('../fonts/Euclid Circular A Regular.woff') format('woff');
    }

    @font-face {
    font-family: 'Euclid Circular A Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Euclid Circular A Medium'), url('../fonts/Euclid Circular A Medium.woff') format('woff');
    }
    
    @font-face {
    font-family: 'Euclid Circular A SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Euclid Circular A SemiBold'), url('../fonts/Euclid Circular A SemiBold.woff') format('woff');
    }
    
    @font-face {
    font-family: 'Euclid Circular A Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Euclid Circular A Bold'), url('../fonts/Euclid Circular A Bold.woff') format('woff');
    }
   

.open-sans{
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}
.montserrat{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.font-euclid-regular{
    font-family: 'Euclid Circular A Regular';
    font-style: normal;
    font-weight: normal;
}
.font-euclid-medium{
    font-family: 'Euclid Circular A Medium';
    font-style: normal;
    font-weight: normal;
}
.font-euclid-semibold{
    font-family: 'Euclid Circular A SemiBold';
    font-style: normal;
    font-weight: normal;
}
.font-euclid-bold{
    font-family: 'Euclid Circular A Bold';
    font-style: normal;
    font-weight: normal;
}
.font-spacing-titles{
    letter-spacing: -1.3px;
}
.font-spacing-subtitles{
    letter-spacing: -.63px;
}
.font-300{
    font-weight: 300;
}
.font-400{
    font-weight: 400;
}
.font-500{
    font-weight: 500;
}
.font-600{
    font-weight: 600;
}
.font-700{
    font-weight: 700;
}
.grecaptcha-badge {
    visibility: hidden;
 }
 .modal-pedido{
    cursor:pointer;
    background: #198754b9;
    box-shadow: 0 8px 32px 0 rgba(59, 63, 129, 0.199);
    backdrop-filter: blur( 3.5px );
    -webkit-backdrop-filter: blur( 3.5px );
    border-radius: 20px;
    border: 1px solid #5cb85c63;
    z-index:1000;
}
.text-edad{
    font-size:1.05rem;
    color:rgb(255, 255, 255) !important;
    text-shadow: 0 2px 4px rgb(29 29 29 / 36%);
}
.btn-tabu-pedido{
    transition: 0.7s;
    color:#ffffff;
    border-color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, 0); 
    font-size:0.9rem;
    padding:0.7rem 1.3rem 0.7rem 1.3rem;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    border-radius: 25px!important;
}
.btn-tabu-pedido:hover{
    color:#ffffff;
    border-color: rgba(0, 0, 0, 0.74);
    background: rgba(0, 0, 0, 0.74);
    font-weight: 600;
}

.banner-3{
    background-image: url('../img/banner-3.png');
    background-position: left;
    background-size: 20%;
    background-repeat: no-repeat;
}

.home-background{
    position:relative;
    background-image: url('../img/test3.svg');
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    z-index: 1;
}
.contact-bg{
    position:relative;
    background-image: url('../img/contact-bg.svg');
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    z-index: 0;
}
/* Agregar imagen superpuesta */
.home-background::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../img/gloves-dr.webp');
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    z-index: -1;
}
.contact-bg::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../img/contacto-img.webp');
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    z-index: -1;
}
/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .home-background::after {
        display: none; /* Ocultar la imagen superpuesta en dispositivos móviles */
    }
    .contact-bg::after {
        display: none; /* Ocultar la imagen superpuesta en dispositivos móviles */
    }
}
.round-img{
    border-radius: 200px 200px 10px 10px;
    -moz-border-radius: 200px 200px 10px 10px;
    -webkit-border-radius: 200px 200px 10px 10px;
    border: 0px solid #000000;
}
.round-img-about{
    border-radius: 200px 200px 10px 10px;
    -moz-border-radius: 200px 200px 10px 10px;
    -webkit-border-radius: 200px 200px 10px 10px;
    border: 10px solid #ecccb2;
}
.bloque-title{
    color: #1A69A8;
    font-size:1.8rem;
}
.bloque-enfoque{
    color: #89aa1d;
    font-size:2.3rem;
}
.inicio-margin{
    margin-top:1%;
}
.bloque-text{
    font-size:2rem;
    color:#222222;
    width:80%;
}
.bloque-text-card{
    font-size:1.0rem;
    color: rgb(29, 29, 29);
}
.text-right{
    text-align:right;
}
.title{
    font-size: 4rem;
    color:#1A69A8;
    line-height: 95%;
}
.title-contacto{
    font-size: 2.4rem;
    color:#262626;
    line-height: 95%;
}
.subtitle{
    font-size: 1.8rem;
    color:#343434;
}
.subtitle-contacto{
    font-size: 1.3rem;
    color:#5f5f5f;
}
.title-about{
    font-size: 3rem;
    color:#1A69A8;
}
.subtitle-about{
    font-size: 1rem;
    color:#343434;
    margin-top:-2%;
}
.social-icons{
    font-size:2.5rem;
    color:#FFFF;
}
.footer{
    font-size:1.2rem;
    color:#313131;
}
.iconos-footer a i{
    font-size:1.5rem;
    color:#313131;
}
.title-productos{
    font-size:1.1rem;
    color: #343434;
    text-align: left;
}
.subtitle-productos{
    font-size:0.9rem;
    color: #343434;
    text-align: left;
}
.margin-less{
    margin-top:-2%
}
/* divs */

.carousel img{
    border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}
.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;    
}
.header.scrolls {
    padding: 30px 0;
    background: none;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)
}
.header.scrolls.scrolled {
    padding: 1px 0;
    color:  #313131;
    background: rgba(245, 245, 245, 0.75);
}
.header.scrolls.scrolled>div a {
    color: #313131 !important;
    transition: 0.5;
}
.header.scrolls.scrolled>div a:hover {
    color: #1A69A8 !important
}

@supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
    .header.scrolls.scrolled {
        background: rgba(245, 245, 245, 0.75);
        -webkit-backdrop-filter: blur(10px) saturate(3);
        backdrop-filter: blur(10px) saturate(3); 
    }
}
body.modal-open .web{
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

.header.scrolls> button{
    color: #474647 !important
}

.follow-us span{
    color: #ffffff !important;
    font-size: 1.3rem;
    padding:4rem;
} 
.follow-us span i{
    color: #ffffff !important;
}
.follow-us a{
    text-decoration: none;
    cursor: pointer;
}
.navbar-brand{
    padding-left:12rem;
}
.nav-link {
    color: #313131 !important;
    font-size:1rem;
    transition: 0.7s;
    cursor:pointer;
    letter-spacing: 0.3px;
}
.nav-social{
    font-size:1.5rem;
    color:#1A69A8;
    text-decoration:none;
}
.nav-link:hover {
    color: #1A69A8 !important;
    font-size:1rem;
}
.nav-link-cart {
    color: rgb(0, 0, 0) !important;
    font-size:1.1rem;
    transition: 0.7s;
    cursor:pointer;
    text-decoration: none;
}
.nav-link-cart:hover {
    color: #363636 !important;
    font-size:1.15rem;
}
.waves{
    overflow:hidden;
    position:relative;
}
.waves::before{
    content:'';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat; 
    transform:scaleX(1.5);
    transform-origin: 100% 100%;
    animation: 15s infinite alternate shape-anim-6097-mobile linear;
    background-size: 100% 283px;
    background-position: 50% 100%;    
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23f8dcd4"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23f8dcd4"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23f8dcd4"/></svg>'); 
}
    
@keyframes shape-anim-6097-mobile {
    100% {
    transform: scaleX(1.5) translateX(calc(100% - (100% / 1.5)));
    }
} 
@media (min-width:768px){
    .waves::before{
    transform:scaleX(1.5);
    transform-origin: 100% 100%;
    animation: 15s infinite alternate shape-anim-6097-mobile linear;
    background-size: 100% 283px;
    background-position: 50% 100%;   
    }  
}    
@media (min-width:1025px){
    .waves::before{ 
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    transform:scaleX(4);
    transform-origin: 100% 100%;
    animation: 15s infinite alternate shape-anim-6097  linear;
    background-size: 100% 283px;
    background-position: 50% 100%;  
    }
}
@media (min-width:2100px){
    .waves::before{
    background-size: 100% calc(2vw + 283px);
    }
}

@keyframes shape-anim-6097 {
    100% {
    transform: scaleX(4) translateX(calc(100% - (100% / 4)));
    }
}
    
.waves-white{
    overflow:hidden;
    position:relative;
}
.waves-white::before{
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat; 
    transform:scaleX(2.3);
    transform-origin: 100% 100%;
    animation: 10s infinite alternate shape-anim-2763-mobile linear;
    background-size: 100% 89px;
    background-position: 50% 100%;    
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23ffffff"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23ffffff"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23ffffff"/></svg>'); 
}
    
@keyframes shape-anim-2763-mobile {
    100% {
    transform: scaleX(2.3) translateX(calc(100% - (100% / 2.3)));
    }
} 
@media (min-width:768px){
    .waves-white::before{
        transform:scaleX(4);
        transform-origin: 100% 100%;
        animation: 10s infinite alternate shape-anim-2763-tablet linear;
        background-size: 100% 90px;
        background-position: 50% 100%;   
    }  
}
    
@keyframes shape-anim-2763-tablet {
    100% {
    transform: scaleX(4) translateX(calc(100% - (100% / 4)));
    }
}  
@media (min-width:1025px){
    .waves-white::before{ 
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw; 
        transform:scaleX(2.9);
        transform-origin: 100% 100%;
        animation: 10s infinite alternate shape-anim-2763  linear;
        background-size: 100% 202px;
        background-position: 50% 100%;  
    }
}
@media (min-width:2100px){
    .waves-white::before{
        background-size: 100% calc(2vw + 202px);
    }
}

@keyframes shape-anim-2763 {
    100% {
        transform: scaleX(2.9) translateX(calc(100% - (100% / 2.9)));
    }
}
 
.back-to-top {
    position: fixed;
    bottom: 2.5rem;
    right: 2.5rem;
    display: none;
    cursor:pointer;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(59, 63, 129, 0.199);
    backdrop-filter: blur( 3.5px );
    -webkit-backdrop-filter: blur( 3.5px );
    border-radius: 20px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    z-index:1000;
}
.logo-nav{
    transition:0.8s;
    width: 40%;
}
.reduce{
    transition:0.8s;
    width:25%;
}
.visible{
    display: none;
}  
.filter-white {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}
.filter-black {
    -webkit-filter: brightness(0) invert(0);
    filter: brightness(0) invert(0);
}
.bloque-gris{
    background-color: #e7e7e754;


}
.bloque-about{
    background-color:#fff4e5;
    background-size: cover;
    padding-top:5%;
    padding-bottom:2%;
    border-radius: 25px;
}
.marca{
    filter: grayscale(1);
    opacity: 0.45;
    transition:.5s;
    cursor: pointer;
    transition: transform .2s;
    vertical-align: middle;

}
.slick-slider {
padding-top:2%;
}
  
.marca img{
    width:100%;
    vertical-align: middle;
   
}
.slick-marcas .item{
    padding:15px;
}
.marca:hover{
    filter:grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}
/* card  */



.slick-track{
    padding:0% 0% 3% 0%;
    
}


.card-productos{
    transition: 0.5s;
    cursor:pointer;
    background: rgba(255, 255, 255, 0.103);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.053);
    backdrop-filter: blur( 3.5px );
    -webkit-backdrop-filter: blur( 3.5px );
    border-radius: 20px;
    border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    border: 1px solid rgba(36, 36, 36, 0.071);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    height:480px;
    transition: transform .2s;

}

.card-productos:hover button{
    font-weight: 600;
    background: #145489;
    color: #ffffff;
    border-color:#145489; 
}
.card{
    border:1px solid #00000016 !important;
    border-radius: 20px;
    transition: transform .2s;
    cursor:pointer;
}
.card:hover{
    transform: scale(1.02);
}
.card-img:hover{
    width:150%;
}
.card-img-overlay{
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #0f202785, #203a4388, #ffffff00);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #0f202785, #203a4388, #ffffff00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 20px;
}
.card-img {
    border-radius: 20px;
    padding:0.1%;
}
.card-title{
    font-size:2rem;
    text-shadow: 1px 2px 7px rgba(0, 0, 0, 0.577);

    color:#fff;
}
.card-text{
    font-size:1.2rem;
    text-shadow: 1px 2px 7px rgba(0,0,0,0.577);

    color:#fff;
}
.blurry{
    -webkit-backdrop-filter: blur(5px);

    backdrop-filter: blur(5px);
}
.msp-home{
    padding-top:9% !important;
    padding-bottom:10%;
}
.msp-home img{
    width:100%;
}
.msp-contacto{
    padding-top:3% !important;
    padding-bottom:3%;
}
.msp-contacto img{
    width:60%;
}

.card-productos img{
    width:100% !important;
    border-radius: 20px !important;

}
.slick-slide {
    outline: none
}
/* botones */
.btn-contacto-alt{
    transition: 0.7s;
    background: #1A69A8;
    color: #ffffff;
    border-color:#1A69A8;   
    font-size:0.9rem;
    padding:0.7rem 1.3rem 0.7rem 1.3rem;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    border-radius: 25px!important;
    box-shadow: 0 8px 32px 0 rgba(59, 62, 129, 0.402);
    z-index: 1;
    transition: transform .2s;
    
}
.btn-contacto-alt:hover{
    font-size:0.9rem;
    font-weight: 600;
    background: #145489;
    color: #ffffff;
    border-color:#145489; 
    transform: scale(1.02);
}
.btn-producto{
    transition: 0.7s;
    background: #ebebeb94;
    color: #9e9e9e;
    border-color:#ebebeb94;   
    font-size:0.9rem;
    padding:0.7rem 1.3rem 0.7rem 1.3rem;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    border-radius: 25px!important;
    z-index: 1;
}
.btn-producto:hover{
    font-size:0.9rem;
    font-weight: 600;
    background: #145489;
    color: #ffffff;
    border-color:#145489; 
}
.carousel-item img{
    width:80%;
}

@keyframes shimmy {
    0% {
      transform: translateY(-5px);    
    }
    100% {
      transform: translateY(5px);
    }
  }

/* colores */

.blanco-claro{
    background-color: #3baea0;
    /*background: rgba(236, 204, 178, 0.75);
    backdrop-filter: blur( 3.5px );
    -webkit-backdrop-filter: blur( 3.5px );*/
}
.texto-negro{
    color:rgb(31, 31, 31);
}

 /* contact form */

.form-control{
    font-family: 'Euclid Circular A Regular';
    font-style: normal;
    font-weight: normal;
    color:rgba(0, 0, 0, 0.507);
    font-size:14px;
    line-height: 1.5;
    display: block;
    width: 100%;
    height: calc(2.75rem + 2px);
    padding: .625rem .75rem;
    transition: all .2s cubic-bezier(.68, -.55, .265, 1.55); 
    border: 1px solid rgb(255, 255, 255);;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    background-clip: padding-box;
    box-shadow: none;
}
.form-control::-webkit-input-placeholder{
    color:rgb(255, 255, 255);
}
.form-control-alternative{
    transition: box-shadow .15s ease; 
    color:rgb(255, 255, 255);
    border: 0;
    box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);
}
.form-control-alternative:focus{
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
}
.input-group-alternative{
    transition: box-shadow .15s ease; 
    border: 0;
    box-shadow: 0 1px 3px rgba(104, 104, 104, 0.123), 0 1px 0 rgba(0, 0, 0, .02);
}
.input-group-alternative .form-control,
.input-group-alternative .input-group-text{
    border: 0;
    box-shadow: none;
}
.input-group-text{
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    display: flex;
    font-family: 'Euclid Circular A Regular';
    font-style: normal;
    font-weight: normal;
    color:rgb(255, 255, 255);
    margin-bottom: 0;
    padding: .625rem .75rem;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #000000;
    border-radius: .375rem; 
    background-color: rgba(255, 255, 255, 0);
    align-items: center;
}
.label-contact{
    font-size:1rem!important;
}

/* responsive */

@media (max-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .navbar .navbar-collapse {
        text-align: center;
    }
    .navbar-brand{
        padding-left:0.5rem;
        width:280px!important;
    }
    .msp-home{
        padding-top:15% !important;
        padding-bottom:5% !important;
    }
    .msp-home img{
        display: block;
        margin: 0 auto;
    }
    .card-productos img{
        width:30%;
    }
    .principal img{
        width:26%;
    }
    .bloque-text{
        font-size:1.3rem;
        color:#474647;
        width:80%;
    }
    .title{
        font-size: 2.3rem;
        color:#1A69A8;
    }
    .inicio-margin{
        margin-top:-15%;
    }
    .subtitle{
        font-size: 1.2rem;
        color:#161616;
    }
    .title-about{
        font-size: 2.5rem;
        color:#1A69A8;
    }
    .subtitle-about{
        font-size: 1rem;
        color:#161616;
    }
    .title-contacto{
        font-size: 2rem;
    }
    .subtitle-contacto{
        font-size: 1rem;
        color:#5f5f5f;
    }
    .banner-1{
        background-image: url('../img/banner-1.png');
        background-position: right;
        background-size: 20%;
        background-repeat: no-repeat;
    }
    .card-title{
        font-size:1.1rem;
    }
    .card-text{
        font-size:0.8rem;
    }
}
.navbar-toggler span {
    display: block;
    background-color: #4f4f4f;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
  }
  .navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg);
  }
  
  .navbar-toggler span:nth-child(2) {
    opacity: 1;
  }
  
  .navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg);
  }
  
  .navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg);
  }
  .alert-fixed {
    position:fixed; 
    bottom: 0px; 
    left: 0px; 
    width: 100%;
    z-index:9999; 
    border-radius:0px
}
.slick-prev:before, .slick-next:before {
    color: #09529b !important;
    font-size: 25px !important;
    z-index:1000!important;
  }