/* Styles */

:root {
    --bs-celeste: #0081c8;
    --bs-morado: #250d36;
}

.bg-header {
    background: url('../imagen/INTERNET-SPEED-FONDO.png');
    background-size: cover;
    background-position: center;
    /* sin fixed talves se vea mejor */

    height: 720px;
}

@font-face {
    font-family: 'Asap', sans-serif;
    font-style: normal;
    font-weight: 500;
    src: local('Asap Regular'), local('Asap-Regular'), url(https://fonts.googleapis.com/css2?family=Asap:wght@700&display=swap) format('truetype');
}

.politicas {
    padding: 10px;
    font-size: 0.7em;
    font-family: Arial, Helvetica, sans-serif
}

.bg-speedapp {
    background: url('/imagen/INTERNET-SPEED_ FONDO DE APP_Mesa de trabajo 1 copia 2.png');
    background-size: cover;
    background-position: center;
}

.bg-regalos {
    background: url('/imagen/regalos.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.bg-pagos {
    background: url('/imgepagos/bgpuntos.png');
    width: 100% !important;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.bg-pagosmovil {
    background: url('/imgepagos/puntomovil.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.bg-header-sm {
    background: url('../imagen/INTERNET-SPEED-FONDO.png');


}

@media (min-width: 576px) {
    .bg-header {

        background-image: url('../imagen/INTERNET-SPEED-FONDO.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 600px;
    }

}

.cursor {
    cursor: pointer;
}

.bg-speed {


    background: var(--bs-morado);

}

.bg-speeds {
    background: var(--bs-morado);
    clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 100%);
}

.overloa {
    position: absolute;
    z-index: 10;
    left: 100px;
}


.btn-outline-celeste {
    color: #0081c8;
    border: 2px solid #0081c8 !important;
}

.btn-outline-celeste:hover {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.bg-infografia {

    background: url(../img/FONDO.jpg);
    background-size: cover;
    background-position: center;

    height: 150px;
    width: 100%;
    margin-top: 25px;
    padding-top: 15px;
    color: #fff !important;

}

.planes {
    transition: all .3s ease-in-out;
}

.planes:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.invalid {
    border-color: rgb(240, 60, 90);
}

.invalid:focus {
    border-color: rgb(240, 60, 90) !important;
}

.swiper-pagination {
    background: transparent !important;
    border: none;
}

.swiper-container {
    width: 100%;
    height: 300px;
}

.swiper-pagination-bullet-active {
    background: transparent !important;
}

.swiper-slide {
    text-align: center;
    display: flex;
    align-items: center;


}

.swiper-scrollbar {
    color: transparent !important;
}

.slick-carousel {
    display: flex;
    /* Utiliza flexbox para centrar los elementos */
    justify-content: center;
    /* Centra los elementos horizontalmente */
    align-items: center;
    /* Centra los elementos verticalmente */
    gap: 20px;
    /* Ajusta el espaciado entre los elementos */
}

/* Ajusta el tamaño de las imágenes dentro del carrusel */
.slick-carousel img {
    height: 350px;
    width: auto;
    /* Ajusta el ancho automáticamente */
    max-width: 100%;
    /* Asegura que las imágenes no se desborden */
}

.slick-list {

    max-width: 1100px !important;
    width: 1100px !important;
}

.slick-carousel {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.modal.zoom .modal-dialog {
    transform: scale(0) !important;
    transition: transform 0.3s ease-in-out !important;
}

.modal.zoom.show .modal-dialog {
    transform: scale(1) !important;
}

/*.swiper-button-next{
    color: aliceblue !important;
    padding-left: 15px !important;
}
.swiper-button-prev {
    color: aliceblue !important;
    padding-right: 45px !important;
}*/

/*Loader pages*/

.loader {
    --color: #a5a5b0;
    --size: 60px;
    position: relative;
    width: var(--size);
    height: var(--size);
}

.loader span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid var(--color);
    border-bottom: 1px solid transparent;
    border-radius: 100%;
    animation: keyframes-rotate .8s infinite linear;
}

.loader svg {
    width: 100%;
    height: 100%;
    padding: 9%;
    fill: var(--color);
    animation: keyframes-blink .8s infinite ease-in-out;
}

@keyframes keyframes-rotate {
    0% {
        transform: rotate(360deg);
    }
}

@keyframes keyframes-blink {
    50% {
        opacity: 0.8;
    }
}
@font-face {
    font-family: 'asap-regular';
    font-style: normal;
    font-weight: 400;
    src: local('Asap Regular'), local('Asap-Regular'), url(../font/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}

#superpuesto {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    opacity: 1;
    z-index: 100;
    transition: opacity 1s ease-in-out;
}