:root {
    /* --base: #C8102E; */
    --base: #C90011;
}

.input__error{
    border-color: #e96e6e;
}

.flex {
    display: flex;
}

.wrap {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}


header {
    position: sticky !important;
    top: 0;
    z-index: 999999999999999;
    width: 100%;
    box-shadow: -3px -7px 20px 0px #4d4c4c;
}

.navbar_container {

    margin: 0px !important;
    padding: 0px !important;
}

.navbar-toggler {
    border: none !important;
}

.banner1__txt {
    position: relative;
    top: 120px;
}


.resaltar_1 {
    font-weight: 100;

}

.resaltar_2 {
    font-weight: 500;
}

.resaltar_3 {
    font-weight: 900;
}

#contratarPlan:hover, #contratarPlan:focus, #contratarPlan:active {
    background-color: #343a40 !important;
    border-color: #343a40 !important;
    color: #fff;

}

.tarifas {
    gap: 24px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 90%;
    justify-content: space-between;
}

.tarifa {
    transform: scale(1);
    transition: ease-in-out;
    transition-duration: 300ms;
}

.tarifa:hover {
    transform: scale(1.05);
    z-index: 999999999999999;
    transition: ease-in-out;
    transition-duration: 300ms;
    box-shadow: 4px 4px 4px lightgray;
    border-radius: 8px;
}

.top {
    background: linear-gradient(-35deg, #eb1104 0%, #ff7e76 96%), var(--bs-body-color);
    /* transform: scale(1.10); */
    /* margin-right: 0px; */
    /* padding-right: 12px; */
    border-radius: 8px;
    z-index: 1;
    height: 550px;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
    height: 220px;
}

section.masthead {
    background-image: url("/assets/img/control_tiempo_red.png");
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;

    h1 {
        text-align: left;
        font-size: clamp(50px, 5vw, 90px);
        margin: 0px;
        margin-bottom: 0px;
        padding: 0 0 15px 0;

        /* border-radius: 8px; */

    }
}

.features-icons {
    width: 100%;
    height: 800px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.showcase {
    margin: 100px auto;
    width: 80%;
}

.showcase-img {
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.most_popular {
    background: transparent;
    border: none;
}

.most_popular_txt {
    background-color: #343A40 !important;
    padding: 10px 20px !important;
}

.bs-icon-xs.bs-icon-rounded.bs-icon-primary-light.bs-icon {
    background-color: #343A40;
}

.call_us {
    background: url(/assets/img/call_us.jpg) no-repeat right;
    background-size: cover;
}

.more_info {
    margin-bottom: 8px;
    font-size: clamp(40px, 2vw, 60px);

}

.more_info_txt {
    font-size: clamp(24px, 2vw, 30px);
    padding-bottom: 0px;
    margin-bottom: 0px;
    color: rgb(231, 94, 108);

}

.deformar {
    transform: rotate3d(-4, 4, 1, 336deg) !important;
    scale: 1.1 !important;
    padding: 10px;
    background: rgb(231, 94, 108);
    max-width: 450px;
}

.close {
    background-color: white;
    border: none;
    /* span{
        font-size: xx-large;
    } */
}

.close_x {
    background-color: white;
    border: none;

    span {
        font-size: xx-large;
    }
}


.showcase .showcase-img {
    /* min-height: 560px; */
    /* min-height: 560px; */
    min-height: initial;

    height: 60vh;
    background-size: cover;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    svg {
        vertical-align: middle;
    }
}

.progress-wrap {
    position: fixed;
    bottom: 40px;
    right: 15px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
    background: var(--base);
    border: 1.2px solid rgba(255, 255, 255, 0.12);
}

.progress-wrap::after {
    position: absolute;
    content: "\F148";
    font-family: "icomoon";
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: var(--base);
    height: 40px;
    width: 40px;
    cursor: pointer;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.progress-wrap svg.progress-circle path {
    box-sizing: border-box;
    stroke: var(--Primary);
    stroke-width: 4;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-duration: 0.4s;
    transition-timing-function: linear;
  }

  /* BOTON DE SCROLL */
#scroll-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;  /* Inicialmente transparente */
    visibility: hidden;  /* Inicialmente oculto */
    transition: opacity 0.3s, visibility 0.3s;  /* Transición suave */
  }
  
  .progress-ring__circle {
    transition: 0.35s stroke-dashoffset;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }
  
  #scroll-button  .fas {
    color: var(--base);
    transition: transform 0.35s;
    position: absolute;
  }


  .modal {
    --bs-modal-width: 1000px;
    --bs-modal-zindex: 9999999999;

  }


/* FIN BOTON DE SCROLL */



.swiper {
    width: 100%;
    /* height: auto; */
    height: 600px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    min-height: 500px;
    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px white;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .swiper {
        /*display: none; /* Oculta el slider en pantallas grandes */
    }
}

/* .footer{
    background-color: var(--base) !important;
    color: white;
     a{
        color: white !important;
     }

     p{
        color: var(--bs-gray-300) !important;
     }
     
} */

@media (max-width: 500px) {
    .showcase .showcase-img {
        /* min-height: 560px; */
        /* min-height: 560px; */
        min-height: initial;

        height: 40vh;
        background-size: cover;
    }


}

@media (min-width: 768px) {
    .showcase .showcase-text {
        padding: 10px;
    }


}

@media (max-width: 768px) {
    .navbar-collapse.collapse.show {

        padding-bottom: 20px !important;


    }



    .banner1__txt {
        position: relative;
        top: 30px;
    }





}



@media (max-width: 1000px) {
    section.masthead {
        background-image: url("/assets/img/control_tiempo_red2.png");
        background-position: right 310px;
        background-size: 680px;
        background-repeat: no-repeat;
        margin: 0 auto;
        background-color: var(--base);
        padding-top: 20px;
        max-height: 740px;



    }

    .deformar {
        transform: rotate3d(-4, 4, 1, 336deg) !important;
        scale: 1.1 !important;
        padding: 10px;
        background: rgba(231, 94, 107, 0.69);
        max-width: 450px;
    }

    .showcase .container-fluid .row {
        position: relative;
        margin-bottom: 40px;
    }

    .showcase .showcase-text {
        padding: 0px !important;

        h2 {
            position: absolute;
            top: 0;
            text-align: center;
            width: 100%;
            margin: 0 auto;
            left: 0%;
            background: white;
        }
    }
}