body, html{
    font-family: "Outfit", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: regular;
    font-style: normal;
}

.animated-elements,
.btn-acrilicos,
.btn-solid-black,
.productos-list li img{
    transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
  }
  
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.offcanvas{ background-color: #3F3F3F !important; }

.btn-close {
  --bs-btn-close-color: white !important;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 1;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em .25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
  border: 0;
  border-radius: .375rem;
  opacity: 1;
}


/* Estilos de texto */

.text-justify{ text-align: justify; }

/* Estilos de Botones */
.btn-acrilicos,.btn-solid-blue,.btn-silicones,.btn-solid-orange,.btn-poliuretanos,.btn-solid-black{ font-size: 15px;}

.btn-acrilicos{ border-radius: 50px; background: #0C5DE1; background: linear-gradient(90deg, #0C5DE1 10%, #0E2588 60%); opacity: 1; padding: 12px 20px; border: 0; }
.btn-acrilicos:hover,
.btn-acrilicos:focus,
.btn-acrilicos:active{
    opacity: 0.75;
}

.btn-solid-blue{ border-radius: 50px; background: #0C5DE1; background: linear-gradient(90deg, #0E2588 10%, #0E2588 60%); opacity: 1; padding: 12px 20px; border: 0; }
.btn-solid-blue:hover,
.btn-solid-blue:focus,
.btn-solid-blue:active{
    opacity: 0.75;
}

.btn-silicones{ border-radius: 50px; background: rgb(238,173,0); background: linear-gradient(90deg, rgba(238,173,0,1) 0%, #e65f2b 100%); opacity: 1; padding: 12px 20px; border: 0; }
.btn-silicones:hover,
.btn-silicones:focus,
.btn-silicones:active{
    opacity: 0.75;
}

.btn-solid-orange{ border-radius: 50px; background: #e65f2b; background: linear-gradient(90deg, #e65f2b 0%, #e65f2b 100%); opacity: 1; padding: 12px 20px; border: 0; }
.btn-solid-orange:hover,
.btn-solid-orange:focus,
.btn-solid-orange:active{
    opacity: 0.75;
}

.btn-poliuretanos{ border-radius: 50px; background: rgb(105,105,105); background: linear-gradient(90deg, rgba(105,105,105,1) 0%, rgba(0,0,0,1) 100%); opacity: 1; padding: 12px 20px; border: 0; }
.btn-poliuretanos:hover,
.btn-poliuretanos:focus,
.btn-poliuretanos:active{
    opacity: 0.75;
}

.btn-solid-black{ border-radius: 50px; background: rgb(105,105,105); background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0,0,0,1) 100%); opacity: 1; padding: 12px 20px; border: 0; }
.btn-solid-black:hover,
.btn-solid-black:focus,
.btn-solid-black:active{
    opacity: 0.75;
}

.btn-primary.whatsapp-btn{
    background-color: #33ba44;
    border-color: #33ba44;
    opacity: .9;
}

.btn-primary.whatsapp-btn:hover, 
.btn-primary.whatsapp-btn:active, 
.btn-primary.whatsapp-btn:focus {
    background-color: #33ba44;
    opacity: 1;
    border-color: #33ba44;
}


/* Estilos de Splide */
#home-slider .splide__arrow{ background: white !important; }
#home-slider.splide ul.splide__pagination{ bottom: 0.5em !important; }
.splide__pagination__page{ background: white !important; opacity: 1; }
ul.productos-list .splide__slide{ padding: 20px 20px 45px 20px; }

.splide.blue .splide__pagination,
.splide.orange .splide__pagination,
.splide.black .splide__pagination{ bottom: -1.5em; }
.dots-same-size .splide__pagination__page{ transform: scale(1.4); }
.splide__pagination li{ padding: 10px; }

.splide.blue .splide__pagination li button.is-active{ background: #1f42dd !important; opacity: 1; }
.splide.orange .splide__pagination li button.is-active{ background: #e65f2b !important; opacity: 1; }
.splide.black .splide__pagination li button.is-active{ background: black !important; opacity: 1; }
.splide.black-gray .splide__pagination li button.is-active{ background: black !important; opacity: 1; }
.splide.black-gray .splide__pagination__page { background-color: #ccc !important; }

#productos-thumbs-list-container .splide__pagination{ bottom: -1.5em !important; }


/* estilos generales */

h2.accordion-header > button.accordion-button{ font-weight: bold; }

.footer .list-group-item{ background: transparent;}
.swca-footer-rrss li{ padding: 5px;}
.swca-footer-rrss li a{ background: #1d1d1d; color: white; padding: 10px; border: 0; border-radius: 50px; display: block; font-size: 28px; width: 60px; height: 60px; }
.swca-footer-rrss li a:hover,
.swca-footer-rrss li a:focus,
.swca-footer-rrss li a:active{ 
    opacity: 0.55;
}

img.swca-especialistas-en-sellado{ height: 85%; }

.pt-50px{ padding-top: 50px; }
.ps-50px{ padding-left: 50px; }
.pe-50px{ padding-right: 50px; }
.pb-50px{ padding-bottom: 50px; }

.pt-100px{ padding-top: 100px; }
.ps-100px{ padding-left: 100px; }
.pe-100px{ padding-right: 100px; }
.pb-100px{ padding-bottom: 100px; }

.link-arrow-right{ display: block; text-decoration: none; outline: none; position: relative; padding: 5px 40px 5px 10px; color: black; }
.link-arrow-right svg{ transition: all 0.2s; display: inline-block; position: absolute; right: 20px; top: 8px; }
.link-arrow-right:hover{ color: #757575;}
.link-arrow-right:hover svg{ right: 10px; fill:#757575; }

.productos-list li{ background: url(../images-camaleon-2025/home-bucket-shadow.png) no-repeat; background-position: bottom; background-size: contain; }
.productos-list li img:hover{ transform: scale(1.05); }
.productos-list li .img-container{ position: relative; }
.productos-list li .img-container .tag{ position: relative; /* Necesario para posicionar el pseudo-elemento */
    overflow: hidden; /* Recorta el brillo que se sale de los bordes */ position: absolute; bottom: 11.5%; right: 13px; background: #515151; color: white; border-radius: 10px 0 0 10px; border: 0; padding: 6px 12px; font-size: 12px; z-index: 9; }

.productos-list li:hover .tag::before,
.tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Inicialmente fuera del lado izquierdo */
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-25deg); /* Inclina el brillo para un efecto de cinta */
    transition: left 0.3s ease-in-out; /* Animación del desplazamiento */
    z-index: 1; /* Asegura que el brillo esté encima del fondo */
}

.productos-list li:hover .tag::before,
.tag:hover::before {
    left: 150%; /* Desplaza el brillo hacia la derecha, fuera del lado derecho */
}

.background-EFEFEF{ background: #EFEFEF; }
.background-F8F8F8{ background: #F8F8F8; }
.background-1D1D1D{ background: #1D1D1D; }



.fw-600{ font-weight: 600; }

.background-explorar{ background: #6D6D6D; border-radius: 60px; }
.background-inner-explorar{ background: #EDEDED; border-radius: 60px; }

.background-slider-before-after{ background: linear-gradient(to bottom, #EFEFEF 50%, #F8F8F8 50%); }




/* Breakpoints */

@media only screen and (min-width:1400px) { /* XXL */

    

}

@media only screen and (min-width:1200px) and (max-width: 1399px) { /* XL */

    
    

    

}

@media screen and (min-width:992px) {

    #main{ margin-top: 100px; }
    
}

@media only screen and (min-width:992px) and (max-width: 1199px) { /* LG */

    

}

@media screen and (max-width:991px) {

    #main{ margin-top: 100px; }
    .productos-list li .img-container .tag{ right: 5px; }

    .cursor, .cursor-follower{ display: none !important; }
    
}

@media screen and (max-width:575px) {

    #main{ min-height: 90px; }
    
}

@media only screen and (min-width:768px) and (max-width: 991px) { /* MD */

    

}

@media only screen and (min-width:576px) and (max-width: 767px) { /* SM */

    
}

@media screen and (max-width: 500px)
{
    .productos-list li .img-container .tag{ right: 10px; }
}

@media (min-width: 400px) and (max-width: 575px)
{
    
}

@media (max-width: 399px)
{
    
}

@media only screen and (max-width:575px){ /* XS */


    .navbar-brand img {
        max-width: 130px;
    }

    #open-menu{ margin-top: 20px; }
    .swca-footer-rrss li a{ padding: 5px; width: 40px; height: 40px; font-size: 20px; }

    


}