:root{
    --negro: #070604;
    --rojo: #FC0105;
    --gradient: linear-gradient(125deg, var(--rojo), #070604bd);
    --border: 3px solid #FC0105;
}
@font-face {
    font-family: Barlow-Bold;
    font-display: auto;
    src: url('../fonts/Barlow-Bold.ttf');
}
@font-face {
    font-family: Barlow-Light;
    font-display: auto;
    src: url('../fonts/Barlow-Light.ttf');
}
@font-face {
    font-family: Barlow-Thin;
    font-display: auto;
    src: url('../fonts/Barlow-Thin.ttf');
}
@font-face {
    font-family: Exo2;
    font-display: auto;
    src: url('../fonts/Exo2-VariableFont_wght.ttf');
}
@font-face {
    font-family: WorkSans;
    font-display: auto;
    src: url('../fonts/WorkSans-VariableFont_wght.ttf');
}

label.error, .error{
    width: 100%;
    color: var(--negro);
    font-size: .9rem !important;
}
a{
    color: inherit;
    text-decoration: none;
}
a:hover,
.nav-link:hover,
.nav-link:focus{
    color: inherit;
}
.form-control:focus{
    box-shadow: none;
}
body{
    font-family: 'Exo2';
    font-size: 18px;
}
.justify{
    text-align: justify;
}

.size-1{
    font-size: 2.6rem;
}
.size-2{
    font-size: 2.3rem;
}
.size-4{
    font-size: 1.5rem;
}
.barlow{
    font-family: 'Barlow-Light';
}
.barlow strong{
    font-weight: normal;
    font-family: 'Barlow-Bold';
}

.header{
    background-color: var(--negro);
    color: #fff;
    text-transform: uppercase;
    font-family: 'Worksans';
}
.header .nav-link{
    color: #fff;
    font-weight: 300;
}
.header .nav-link:hover{
    color: var(--rojo);
}
.video-home{
    height: calc(100vh - 106px);
    position: relative;
    overflow: hidden;
}
.video-home video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.navbar-toggler{
    color: #fff;
    border-color: #fff;
}
.text-rojo{
    color: var(--rojo);
}
.bg-rojo{
    background: var(--gradient), var(--rojo);
}
.bg-rojo::before{
    content: "";
    position: absolute;
    width: calc(300px + 20vw);
    height: calc(300px + 20vw);
    border: 2px solid var(--rojo);
    border-radius: 50%;
    bottom: 87%;
    left: 50%;
    transform: translateX(-40%);
    z-index: 0;
}

.titulo-principal .dic-flotante-1{
    left: 80%;
}

.productividad{
    z-index: 10;
    margin-bottom: 7rem;
}
.productividad::before{
    content: "";
    position: absolute;
    top: 10%;
    width: 5%;
    height: 35%;
    border-top: var(--border);
    border-right: var(--border);
    z-index: -9;
}
.productividad::after{
    content: "";
    position: absolute;
    width: 90%;
    left: calc(5% - 3px);
    top: calc(45% - 3px);
    bottom: 0%;
    border-top: var(--border);
    border-right: var(--border);
    z-index: -9;
}
.borde-bottom{
    position: absolute;
    bottom: 0;
    border-top: var(--border);
    right: calc(5% + 3px);
    width: 30%;
}
.cubo{
    position: absolute;
    top: 45%;
    left: 5%;
    width: calc(2.5vw + 30px);
    transform: translate(-50%, -50%);
    z-index: -1;
}
.disco{
    position: absolute;
    width: calc(2.2vw + 30px);
    height: calc(2.2vw + 30px);
    transform: translate(-50%, -50%);
    animation: walk 20s infinite;
    animation-timing-function: linear;
    z-index: -3;
}
.disco::before{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #FC0105;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: wave 3s infinite;
    
}
.disco::after{
    content: "";
    width: 70%;
    height: 70%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 6px solid #FC0105;
    position: absolute;
    animation: wave 3s infinite;
    animation-delay: .7s;
}
.card-red{
    background: radial-gradient(#070604, #FC0105);
}
.garantia{
    margin-top: 12rem;
    padding-bottom: 10rem;
}
.dic-flotante-1{
    animation: none !important;
    z-index: 1;
    left: 34%;
    top: 7%;
}
.dic-flotante-2{
    animation: none;
    z-index: 1;
    left: 14%;
    top: 55%;
    width: calc(2.2vw + 60px);
    height: calc(2.2vw + 60px);
}
.card-garantia{
    max-width: 340px;
    margin: auto;
    border: 2px solid var(--negro);
    font-family: 'Worksans';
    font-weight: 300;
    background: #fff;
    position: relative;
}
.card-garantia::after{
    content: "";
    width: 80px;
    height: 200px;
    background: url('../img/enchufe.png') no-repeat top;
    background-size: contain;
    position: absolute;
    top: 150%;
    left: 50%;
    transform: translateX(-50%);
    transition: 200ms ease-in-out;
}
.card-garantia:hover::after{
    top: 100%;
}
.card-garantia .titulo{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}
.card-garantia h2, .card-content h2{
    font-weight: 300;
    font-size: 1.5rem;
}
.card-garantia .card-content{
    background: var(--negro);
    color: #fff;
}
.card-garantia .card-content{
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.btn-mas{
    color: #fff;
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 300;
}

.beneficios{
    color: #fff;
    padding-bottom: 15rem;
}
.beneficios.bg-rojo::before{
    left: 20%;
    bottom: 75%;
    z-index: 0;
}
.beneficios .container-fluid{
    position: relative;
    z-index: 10;
}
.card-beneficios{
    background: linear-gradient(var(--negro), #3a3a3a);
    padding: 1.4rem 2rem;
}
.card-beneficios .titulo{
    margin-bottom: 2rem;
}
.card-beneficios .titulo h3{
    font-size: 1.3rem;
}

.beneficios::after{
    content: "";
    position: absolute;
    width: calc(150px + 30vw);
    height: calc(150px + 30vw);
    border: 2px solid var(--rojo);
    border-radius: 50%;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}
.beneficios .dic-flotante-1{
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.beneficios .dic-flotante-1::after,
.beneficios .dic-flotante-1::before{
    border-color: #ffffff61;
}
.borde-bco{
    position: absolute;
    width: 60%;
    height: 3px;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.clientes{
    padding-top: 10rem;
    background: linear-gradient(125deg, var(--negro), var(--rojo));
    color: #fff;
}
.swiper-clientes{
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.card-clientes{
    height: 200px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: #fff;
}

.swiper-testimonials .card-testimonials{
    padding: 20px 30px;
    /* transform: scale(.9); */
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 20px;
    font-size: .8rem;
    color: #999;
    background: #fff;
    box-shadow: 0px 0px 20px #070604a1;
    transition: 400ms;
}
.swiper-testimonials .swiper-slide-active .card-testimonials{
    transition: 400ms;
    /* transform: scale(1); */
}
.swiper-testimonials .card-testimonials h3{
    color: var(--negro);
    font-size: 1.3rem;
}
.swiper-testimonials .card-testimonials h4{
    font-size: .9rem;
}
.img-user{
    min-width: 100px;
    min-height: 100px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}
.img-user img{
    position: absolute;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}
.testimonials{
    background: url('../img/sharp-fondo.png') no-repeat bottom center;
    background-size: 100% auto;
    position: relative;
}
.testimonials::before{
    content: "";
    position: absolute;
    top: calc(5rem - 20px);
    width: calc(20% + 3vw);
    background: var(--rojo);
    height: 3px;
    right: 0;
    z-index: -1;
}
.testimonials::after{
    content: "";
    position: absolute;
    top: 5rem;
    width: calc(40% + 3vw);
    background: var(--rojo);
    height: 3px;
    right: 0;
    z-index: -1;
}
.testimonials .linea{
    position: absolute;
    top: calc(5rem - 12px);
    width: calc(15% + 3vw);
    background: var(--rojo);
    height: 2px;
    right: 0;
    z-index: -1;
}
.contacto{
    color: #fff;
    z-index: 10;
}
.form-contacto label{
    font-size: 1.5rem;
}
.form-contacto .form-control{
    background: radial-gradient(#ffffff30, var(--negro)), var(--negro);
    background-size: 100% 300px;
    background-position: center;
    border: none;
    color: #fff;
    padding: .7rem .8rem;
}

.btn-enviar{
    background: radial-gradient(#ffffff30, var(--negro)), var(--negro);
    padding: 7px 30px;
    color: #fff;
}
.formas::before{
    content: "";
    position: absolute;
    bottom: 6%;
    right: 35%;
    left: auto;
    width: 20%;
    border: none;
    border-bottom: var(--border);
    border-radius: 0;
    height: auto;
    transform: none;
}
.formas .box-1{
    position: absolute;
    width: 30%;
    height: 40%;
    border-left: var(--border);
    border-bottom: var(--border);
    top: 0;
    right: 0;
}
.formas .box-2{
    position: absolute;
    width: 20%;
    height: 40%;
    border-top: var(--border);
    border-right: var(--border);
    top: 10%;
    right: 35%;
}
.formas .box-3{
    position: absolute;
    border-top: var(--border);
    border-right: var(--border);
    border-bottom: var(--border);
    top: 50%;
    right: 5%;
    bottom: 6%;
    left: calc(65% - 3px);
}
.formas .disco{
    z-index: 0;
    animation: walk2 20s infinite;
    animation-timing-function: linear;
    transform: translate(50%, 0);
}
.formas .dic-flotante-1{
    left: 80%;
    opacity: .5;
    display: block !important;
}

@keyframes walk2 {
    0%{
        right: 55%;
        top: calc(6% - 3px);
    }
    15%{
        right: 35%;
        top: calc(6% - 3px);
    }
    25%{
        right: 35%;
        top: 46%;
    }
    45%{
        top: 46%;
        right: 5%;
    }
    60%{
        right: 5%;
        top: 89%;
    }
    95%, 100%{
        top: 89%;
        right: 55%;
    }
}

.footer{
    background: var(--negro);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 300   ;

}
.footer h3{
    color: var(--rojo);
    margin-bottom: 2rem;
    font-weight: 300;
}
.social{
    font-size: 2.3rem;
}
.footer a{
    transition: 250ms;
}
.footer a:hover{
    /* color: var(--rojo); */
    filter: drop-shadow(0px 0px 10px #FC0105);
}
.card-img {
    width: 100%;
    height: 230px;
    position: relative;
    overflow: hidden;
}
.card-img img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    left: 0;
    top: 0;
}
.card-content{
    font-size: 1rem;
    text-align: justify;
}
.body-blog .card-content .btn-mas{
    color: var(--rojo);
}

.recent-post-img{
    position: relative;
    height: 75px;
    min-width: 100px;
}
.recent-post-img img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    object-fit: cover;
    object-position: center;
}

.btn-whatsapp {
    position: fixed;
    bottom: 30px;
    left: 20px;
    background: linear-gradient(#5FFB7C, #27CD44);
    padding-bottom: 3px;
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px 0px #00000085;
    transition: all 250ms;
    -webkit-animation: whatsapp 2s infinite;
    animation: whatsapp 2s infinite;
    z-index: 1000;
}
.btn-whatsapp:hover{
    color: #fff;
}

@keyframes whatsapp {

    0%,
    20%,
    50%,
    80%,
    100% {
        scale: 1;
    }

    40% {
        scale: 1.15;
    }

    60% {
        scale: 1.1;
    }
}


.swiper-pagination-bullet-active{
    background: var(--rojo);
}

/****  Loader  ****/
.loader {
    width: 40px;
    height: 40px;
}
   
.loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-top: 2px solid var(--negro);
    border-right: 2px solid transparent;
    animation: spinner8217 0.8s linear infinite;
}

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

@keyframes spinner8217 {
    to {
        transform: rotate(360deg);
    }
}
/****  Loader  ****/


@keyframes walk {
    0%{
        left: 0;
        top: 10%;
    }
    5%{
        left: 5%;
        top: 10%;
    }
    15%{
        top: 45%;
        left: 5%;
    }
    65%{
        top: 45%;
        left: calc(95% - 3px);
    }
    85%{
        left: calc(95% - 3px);
        top: 100%;
    }
    100%{
        left: 65%;
        top: 100%;
    }
}
@keyframes wave {
    0%{
        width: 0%;
        height: 0%;
        opacity: 0;
    }
    85%{
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100%{
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}

.banner-back{
    position: relative;
    width: 100%;
    height: calc(100vh - 110px);
}
.banner-back img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media(max-width:1399px){
	.productividad h3, .venta_renta h3{
        font-size: calc(.8rem + 1.5vw);
    }
}
@media(max-width:1199px){
    .banner h2, .garantia h2{
        font-size: calc(.8rem + 1.5vw);
    }
    .btn-mas{
        font-size: calc(.1rem + 1.5vw);
    }
    .swiper-testimonials .swiper-slide-active .card-testimonials, .swiper-testimonials .card-testimonials{
        transform: scale(1);
    }
    .testimonials .linea{
        top: calc(2rem - 12px);
        width: calc(10% + 3vw);
    }
    .testimonials::after {
        top: 2rem;
        width: calc(30% + 3vw);
    }
    .testimonials::before {
        top: calc(2rem - 20px);
        width: calc(15% + 3vw);
    }
    .borde-bco{
        width: 45%;
    }
}
@media(max-width:991px){
    .size-1{
        font-size: calc(1.3rem + 1.5vw);
    }
    .size-2 {
        font-size: calc(1rem + 1.5vw);
    }
    .size-4, .form-contacto label{
        font-size: calc(.6rem + 1.5vw);
    }
    .footer{
        font-size: calc(.6rem + 1vw);
    }
    .borde-bco, .beneficios .dic-flotante-1{
        display: none;
    }
    .box-1,
    .box-2,
    .box-3{
        display: none;
    }
    .formas .disco{
        display: none;
    }
    .formas::before{
        display: none;
    }
    .banner-back{
        height: auto;
    }
    .banner-back img{
        height: auto;
    }
}
@media(max-width:767px){
	.productividad h3, .venta_renta h3{
       text-align: center;
    }
    .productividad .img-responsive, .venta_renta .img-responsive{
        max-width: 300px;
    }
    @keyframes walk {
        0%{
            left: 0;
            top: 10%;
        }
        3%{
            left: 5%;
            top: 10%;
        }
        20%{
            top: 45%;
            left: 5%;
        }
        65%{
            top: 45%;
            left: calc(95% - 3px);
        }
        90%{
            left: calc(95% - 3px);
            top: 100%;
        }
        100%{
            left: 65%;
            top: 100%;
        }
    }
    .btn-mas, .card-beneficios .titulo h3{
        font-size: calc(.6rem + 1.5vw);
    }
    .size-4{
        font-size: calc(.5rem + 1.5vw);
    }
    .card-garantia::after{
        content: initial;
    }
    .img-user{
        min-width: calc(60px + 3vw);
        min-height: calc(60px + 3vw);
    }
    .garantia{
        margin-top: 8rem;
    }
    .productividad{
        margin-bottom: 4.5rem;
    }
    .beneficios {
        padding-bottom: 8rem;
    }
    .footer h3{
        margin-bottom: 1rem;
    }
}
@media(max-width:575px){
    .card-clientes{
        max-width: 300px;
        margin: auto;
    }

}