/* General Styles */
        body {
            font-family: "Montserrat", serif !important;
            font-weight: normal;
        }

        /* Sticky top  */
        .sticky-top {
            position: fixed; /* Asegura que se quede fijo */
            top: 0; /* Se quedará en la parte superior */
            z-index: 1050 !important; /* Asegura que el Top Bar esté por encima de todo */
            width: 100%;
            
            height: auto;
            padding: 5px 0;
        }

        /* Ajustes responsivos para pantallas pequeñas */
        @media (max-width: 576px) {
            .sticky-top {
                width: 99vw;
                font-size: 12px; /* Reducir el tamaño de fuente */
                padding: 3px 0; /* Reducir espaciado interno */
            }
        }

        .topbar-logos {
            color: #666666;
            font-size: 15px;
        }

        .navbar {
            position: fixed; /* Para que la Navbar también sea sticky */
            top: 40px; /* Mantiene la navbar en la parte superior */
            z-index: 1040; /* Navbar debajo del Top Bar */
            width: 100%;
            font-size: 14px;
            /* height: 10vh; */
            height: auto; /* Ajustar altura automáticamente */
            padding: 6px 10px;
        }

        .navbar-brand img {
            display: block; /* Asegúrate de que no esté en none */
            visibility: visible; /* Asegúrate de que no esté en hidden */
            max-height: 56px;
            height: auto;
        }

        /* Ajustes responsivos */
        @media (max-width: 576px) {
            .navbar {
                top: 20px;
                padding: 5px 20px; /* Reducir espaciado interno */
                font-size: 1rem;
            }
            .navbar-brand img {
                max-height: 48px; /* Logotipo más pequeño */
            }
        }

        @media (max-width: 380px) {
            .navbar {
                top: 18px;
                font-size: 14px;
        
            }
        
        }

        .navbar-collapse {
            /* width: 90%; */
            background-color: #f8f9fa; /* Cambia este valor por el color que desees */
        }

        .nav-item:hover {
            background-color: #E8E0F7;
            border-radius: 10px;
            /* padding-left: 5px;
            padding-right: 5px; */
            color: #830CC4;
        }

        .nav-item a:hover {
            
            color: #830CC4;
        }

        a {
        text-decoration: none !important;
        }

        .bold {
            font-weight: bolder;
            font-size: 18px;
        }

        .text-purple {
            color: #611284 !important;
            font-weight: 600 !important;
        }

        .btn-telmov {
            background-color: #47D7AC !important;
            color: #5C068C !important;
            border-radius: 12px !important;
            font-weight: bold !important;
            padding: 5px 20px !important;
            
        }

        .btn-telmov:hover {
            background-color: #37B87F !important;
            
        }
        
        .logos-redes {
            font-size: 22px;
        }
        

        .carousel-item img {
            border-radius: 15px;
        }

        /* Plans Section */
        .card {
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

       /* Seccion cambiate a Telmovil  */
    /* Estilo para la sección con fondo */
        #cambiate-a-telmovil {
            /* background-image: url('img/fondo-banner.jpg');  */
            background-color: #FBF9FF;
            background-size: cover;
            background-position: center;
            border-radius: 20px; /* Bordes redondeados */
            overflow: hidden; /* Asegura que nada se salga del contenedor */
            position: relative; /* Necesario para la capa de opacidad */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
        }

        /* Capa de opacidad */
        #cambiate-a-telmovil .background-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0); /* Fondo oscuro translúcido */
            z-index: 1; /* Coloca la capa debajo del contenido */
        }

        /* Ajustes del contenido dentro del contenedor */
        #cambiate-a-telmovil .z-2 {
            z-index: 2; /* Asegura que el contenido esté encima de la capa de opacidad */
            position: relative;
        }

        /* Estilos para el texto */
        #cambiate-a-telmovil h2 {
            font-size: 2rem; /* Tamaño del título */
            font-weight: bold; /* Negrita */
            margin-bottom: 1rem; /* Separación del texto inferior */
            color: #000;
        }

        #cambiate-a-telmovil p {
            font-size: 1rem; /* Tamaño estándar para párrafos */
            line-height: 1.5; /* Espaciado entre líneas */
            font-weight: 400;
            margin-bottom: 1rem; /* Separación entre párrafos */
            color: #000; /* Color blanco del texto */
        }

        #cambiate-a-telmovil a {
            color: #000; /* Enlaces en blanco */
            font-weight: normal; /* Negrita */
            text-decoration: none; 
        }

        .purple-text {
            color: #691A95;
            font-weight: bold;
        }

        #cambiate-a-telmovil button {
            background-color: #6a0dad; /* Color principal del botón */
            border: none; /* Sin bordes */
            color: white; /* Texto blanco */
            padding: 0.5rem 1.5rem; /* Espaciado interno */
            font-size: 1rem; /* Tamaño del texto */
            border-radius: 5px; /* Bordes redondeados */
            cursor: pointer; /* Cursor interactivo */
            transition: background-color 0.3s ease; /* Transición suave */
        }

        #cambiate-a-telmovil button:hover {
            background-color: #530ba3; /* Color del botón al pasar el mouse */
        }

        .btn-morado {
            background-color: #6a0dad; /* Color principal del botón */
            border: none; /* Sin bordes */
            color: white; /* Texto blanco */
            padding: 0.5rem 1.5rem; /* Espaciado interno */
            font-size: 1rem; /* Tamaño del texto */
            border-radius: 5px; /* Bordes redondeados */
            cursor: pointer; /* Cursor interactivo */
            transition: background-color 0.3s ease; /* Transición suave */
        }

        .btn-morado:hover {
            background-color: #530ba3; /* Color del botón al pasar el mouse */
        }

        .btn-morado2 {
            width: 100%;
            background-color: #5C068C; /* Color principal del botón */
            border: none; /* Sin bordes */
            color: white; /* Texto blanco */
            padding: 0.4rem 1.5rem; /* Espaciado interno */
            font-size: 1.2rem; /* Tamaño del texto */
            margin-bottom: 15px;
            border-radius: 15px; /* Bordes redondeados */
            cursor: pointer; /* Cursor interactivo */
            transition: background-color 0.3s ease; /* Transición suave */
        }

        .btn-morado2:hover {
            background-color: #530ba3; /* Color del botón al pasar el mouse */
        }

        /* Estilo para la imagen */
        #cambiate-a-telmovil img {
            max-width: 100%; /* Asegura que la imagen no se desborde */
            border-radius: 10px; /* Bordes redondeados de la imagen */
        }

        @media (max-width: 576px) {

            /* Estilos para el texto */
            #cambiate-a-telmovil h2 {
                font-size: 1.4rem; /* Tamaño del título */
                font-weight: bold; /* Negrita */
                margin-bottom: 0.6rem; /* Separación del texto inferior */
                color: #000;
            }

            #cambiate-a-telmovil p {
                font-size: 1rem; /* Tamaño estándar para párrafos */
                line-height: 1.3; /* Espaciado entre líneas */
                font-weight: 400;
                margin-bottom: 0.7rem; /* Separación entre párrafos */
                color: #000; /* Color blanco del texto */
            }

            #cambiate-a-telmovil a {
                color: #000; /* Enlaces en blanco */
                font-weight: normal; /* Negrita */
                text-decoration: none; 
            }
        }
       /* Seccion cambiate a Telmovil  */

       /* SECCION PUNTOS DE RECARGA */
       .carousel-caption p {
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 10px;
            border-radius: 5px;
            display: inline-block;
        }

        #puntosRecargaCarousel .custom-prev,
        #puntosRecargaCarousel .custom-next {
        font-size: 2.8rem; /* Tamaño de las flechas */
        width: 60px; /* Ancho del botón */
        height: 60px; /* Altura del botón */
        line-height: 60px; /* Centrado vertical */
        background-color: transparent; /* Fondo del botón */
        color: #666666; /* Color de la flecha */
        border: none; /* Sin borde */
        border-radius: 20px; /* Forma circular */
        position: absolute; /* Para colocar las flechas */
        top: 50%; /* Centrar verticalmente */
        transform: translateY(-50%); /* Ajustar al centro */
        z-index: 1000; /* Asegurar que esté encima */
    }

    #puntosRecargaCarousel .custom-prev {
        left: -70px; /* Colocar a la izquierda del carrusel */
    }

    #puntosRecargaCarousel .custom-next {
        right: -70px; /* Colocar a la derecha del carrusel */
    }

       /* Puntos de recarga section  */

       /* CARRUSEL PLANES  */

       .nav-pills .nav-link.active {
            background-color: transparent !important;
            color: #5E0D8B !important;
            font-weight: bold;
            border-radius: 25px;
        }

        .nav-pills .nav-link {
            color: #000;
            /* border: 1px solid #5E0D8B; */
            border-radius: 25px !important;
            font-weight: normal;
            padding: 10px 20px;
            margin-bottom: 10px;
        }

        /* .nav-pills .nav-link:hover {
            background-color: #5e005e;
            color: #fff;
        } */

        .owl-carousel .item {
            text-align: center;
            padding: 0px 35px;
            background: #FAFAFA;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            /* height: 600px;
            max-height: 90vh; */
        }

        #puntos-de-recarga .owl-carousel .item img {
            filter: grayscale(98%);
        }

        @media (max-width: 420px) {
            .owl-carousel .item {
            
                padding: 0px 22px !important;
                
                /* height: 600px;
                max-height: 90vh; */
            }
        }

        .new-paquetes .item {
            text-align: center;
            padding: 15px;
            background: #FAFAFA !important;
            border: solid transparent !important;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            height: 560px;
            max-height: 650px !important;
        }

        .new-paquetes .item:hover {
            
            border: solid 2px #5E0D8B !important;
        
        }
        .img-ofertas {
            width: 60% !important;
            height: auto;
            margin: auto;
            margin-top: 8px;
            margin-bottom: 20px;
        }

        /* Estilos personalizados por precio */
        
        .item-30 {
            border: 2px solid #824BF9;
        }

        .item-50 {
            border: 2px solid #16DF7E;
        }

        .item-100 {
            border: 2px solid #F44573;
        }

        .item-200 {
            border: 2px solid #F0B40E;
        }

        .item-300 {
            border: 2px solid #FC7131;
        }

        .caja-oferta img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }

        .costo-paquete {
            font-size: 26px;
            font-weight: bold;
            color: #10B89E;
        }

        .btn-ofertas {
            width: 100%;
            background-color: #fff;
            display: inline-block;
            border: none;
            font-size: 1.2rem; /* Tamaño del texto */
            color: #7A34A1;
            font-weight: bold;
            padding: 0.4rem 1.5rem; /* Espaciado interno */
            border: solid 2px #7A34A1;
            border-radius: 15px;
            margin-bottom: 15px;
        }

        .btn-ofertas:hover {
            background-color: #5e005e;
            color: white;
        }

        .tab-content {
            margin-top: 20px;
        }

        .owl-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .owl-nav .owl-prev, .owl-nav .owl-next {
            background-color: rgba(128, 0, 128, 0.8);
            color: white;
            padding: 10px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
        }

        .owl-nav .owl-prev:hover, .owl-nav .owl-next:hover {
            background-color: rgba(128, 0, 128, 1);
        }

         /*  */
         @media (max-width: 576px) {

            .new-paquetes .item {
                text-align: center;
                padding: 13px;
                border-radius: 10px;
                height: 580px;
                max-height: 80vh;
            }

            /* .new-paquetes p {
                font-size: 1rem;
            }  */
            .img-ofertas {
                width:52% !important;
                height: auto;
                margin: auto;
                margin-top: 14px !important;
                margin-bottom: 8px;
            }

        }


        /* CARRUSEL PLANES  */

        /* BANNER DESCARGA LA APP */
        .banner-descarga-la-app {
            background-image: url('../assets/images/banner-descarga-la-app2.png'); /* Cambia esto a la ruta de tu imagen */
            background-size: cover;
            background-position: center;
            /* height: 300px; */
            /* height: auto; */
            height: 151px; 
            border-radius: 30px !important;
            position: relative;
        }

        /* Ajustes responsivos */
        @media (max-width: 576px) {

            .banner-descarga-la-app {
                background-image: url('../assets/images/banner-descarga-la-app2.jpg'); /* Cambia esto a la ruta de tu imagen */
                background-size: cover;
                background-position: center;
                /* height: 300px; */
                /* height: auto; */
                height: 400px;
                position: relative;
                
            }

        }

        /* BANNER DESCARGA LA APP */

    
        /* BANNER FINAL  */
        .banner-suscripcion {
        background-image: url('../assets/images/newhome-Newsletter.png'); /* Cambia esto a la ruta de tu imagen */
        background-size: cover;
        background-position: center;
        /* height: 300px; */
        /* height: auto; */
        height: 250px;
        position: relative;
    }

        .banner-suscripcion .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3); /* Capa de transparencia */
            z-index: 1;
        }

        .banner-suscripcion .container {
            position: relative;
            z-index: 2;
        }

        .banner-suscripcion input {
            border-radius: 10px;
        }

        .banner-suscripcion button {
            border-radius: 10px;
        }

        .banner-suscripcion h2 {
            font-size: 1.5rem; /* Tamaño del título adaptable */
        }

        .banner-suscripcion p {
            font-size: 1rem; /* Reducir tamaño del texto */
        }

        .banner-suscripcion form {
            display: flex;
            flex-wrap: wrap; /* Asegura que los elementos se ajusten en pantallas pequeñas */
            justify-content: center; /* Centra el formulario */
            gap: 10px; /* Espaciado entre input y botón */
        }

        .banner-suscripcion input {
            flex: 1 1 auto; /* Se adapta al ancho disponible */
            max-width: 300px; /* Máximo ancho */
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .banner-suscripcion button {
            flex: 0 1 auto; /* Tamaño automático pero ajustado */
            padding: 10px 20px;
            background-color: #47D7AC;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .banner-suscripcion button:hover {
            background-color: #37B87F;
        }

        /* Ajustes responsivos */
        @media (max-width: 576px) {

            .banner-suscripcion {
                background-image: url('../assets/images/newhome-Newsletter2.jpg'); /* Cambia esto a la ruta de tu imagen */
                background-size: cover;
                background-position: center;
                /* height: 300px; */
                height: auto;
                position: relative;
            }

            .banner-descarga-la-app2 {
                background-image: url('../assets/images/banner-descarga-la-app2.jpg'); /* Cambia esto a la ruta de tu imagen */
                background-size: cover;
                background-position: center;
                /* height: 300px; */
                /* height: auto; */
                height: 70vh;
                
            }


            .banner-suscripcion h2 {
                font-size: 1.5rem; /* Reducir título en pantallas pequeñas */
            }
            .banner-suscripcion p {
                font-size: 0.9rem;
            }
            .banner-suscripcion input {
                max-width: 100%; /* Asegura que no se salga del contenedor */
            }
            .banner-suscripcion button {
                width: 100%; /* Botón ocupa todo el ancho */
            }
        }





        /* Footer Styles */
        .footer {
            background-color: #302F4A;
            color: #fff;
            padding: 40px 0;
        }

        .footer a {
            color: #fff;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        .footer h5 {
            margin-bottom: 20px;
        }

        .footer-logos img {
            max-height: 50px;
            margin-right: 10px;
        }

        .payment-logos img {
            max-height: 40px;
            margin-right: 5px;
        }

        .footer-hr {
            border-color: #fff;
            margin: 15px 60px;
        }

        .footer ul {
            
            margin-right: 12px;
        }

        .footer ul li {
            font-weight: lighter;
            margin: 7px 0px;
        }

        /* Responsive - Medias Querys  */
        /* Responsive adjustments for Top Bar */
        @media (max-width: 576px) {
            .top-bar-links {
                flex-direction: column; /* Cambia los enlaces a columna en pantallas pequeñas */
                align-items: flex-start;
            }
            .top-bar-icons {
                flex-direction: row; /* Los íconos en fila */
                margin-bottom: 10px; /* Deja espacio entre los íconos y los enlaces */
            }
            .top-bar-icons a {
                margin-right: 10px; /* Espacio entre los iconos */
            }
        }

        
        @media (min-width: 577px) {
            .top-bar-links {
                margin-top: 10px;
            }
        }

        /* Asegura que la navbar tenga espacio para no amontonarse con el top bar */
        @media (max-width: 370px) {
            .navbar {
                top: 5vh; /* Ajusta el top para que no se amontone con el top bar en pantallas pequeñas */
            }

            .navbar-brand img {
            display: block; /* Asegúrate de que no esté en none */
            visibility: visible; /* Asegúrate de que no esté en hidden */
            max-height: 35px;
             }
        }