* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura que padding y border no afecten el ancho/altura definidos */
}

 /* Colores y Fuentes */
:root {
    --blue-dark: #002460;
    --light-blue: #14abe3;
    --dark-overlay: rgba(0, 0, 0, 0.3); /* Opacidad al 30% */
}


.divider-icon { /* Solo si usaste una clase específica para el divisor */
    height: 25px; /* Igual al alto de los otros iconos */
    width: auto; /* Ajusta automáticamente el ancho para mantener la proporción */
    margin-left: 10px; /* Aumenta este valor según sea necesario */
}


body {
    font-family: 'Montserrat', sans-serif;
    color: var(--blue-dark);
}

header, .main-nav, .top-bar {
    background-color: var(--blue-dark);
    color: white;
}

/* Títulos, subtítulos y texto */
h1 {
    font-size: 65px; /* 65pt en diseño web, ajustamos según px */
    font-weight: 600; /* Semibold */
}

h2 {
    font-size: 30px; /* 30pt para subtítulos */
    font-weight: 300; /* Light */
}


/* Efectos de Imagen */
.hero, .follow-us, .mapa {
    background-size: cover;
    background-attachment: fixed; /* Efecto Parallax */
    background-position: center;
}

.follow-us, .mapa {
    background-color: var(--dark-overlay);
}

/* Estilos adicionales según necesidades */


 

.packages, .specials, .coverage, .news {
    padding: 20px;
    /*border-bottom: 1px solid #ccc;*/
}
 

 
.choose-your-pack {
    text-align: center;
    margin: 20px 0;
}

.pack-title-1 {
    text-align: center;
    margin-bottom: -10px; 
}

.pack-title {
    text-align: center;
    margin-bottom: 20px; 
}

.pack-images {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

 

.pack-image.small {
    width: 15%; /* Reduce el tamaño de acuerdo a la preferencia */
    height: auto;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Ajusta este valor si el movimiento es demasiado grande */
    }
}

.pack-image.large {
    width: 60%;
    height: auto;
    transform: translateY(50px); /* Desplazado hacia abajo inicialmente */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

 

.packs-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Asegura que los elementos estén distribuidos equitativamente */
}

.pack {
    text-align: center; /* Esto centrará el contenido del 'pack' */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Alinea el contenido para empujar el botón al fondo */
    flex-basis: 23%; /* Ajusta esto según el número de elementos que desees por fila */
    margin: 10px; /* Espaciado entre packs */
    text-align: center; /* Centrado de texto y contenido */
    padding: 20px; /* Espaciado interior */
    border-right: 2px solid #14abe3;
}

.pack img, .pack a {
    display: block; /* Hace que los elementos sean bloque y los centra */
    margin: 0 auto; /* Auto-margins para centrar horizontalmente dentro de su contenedor */
}

/*.pack img {
    max-width: 100%; 
    height: auto; 
}*/

.pack img {
    width: 50%;
    height: auto;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.pack:last-child {
    border-right: none; /* Elimina la línea del último item para evitar una línea al final */
}

/* Estilos para pantallas medianas - Muestra 2 columnas */
@media (max-width: 768px) {
    .pack {
        flex-basis: 48%; /* Hace que cada pack tome aproximadamente la mitad del ancho del contenedor */
    }
}

/* Estilos para pantallas pequeñas - Muestra 1 columna */
@media (max-width: 480px) {
    .pack {
        flex-basis: 100%; /* Hace que cada pack tome el ancho completo del contenedor */
    }
}


.pack h2 {
    color: #002460;
    font-size: 24px;
    margin-bottom: 15px;
}

.pack p {
    font-size: 130%;
    min-height: 120px; /* Asegura que el espacio para el texto sea consistente */
}

.pack button {
    background-color: #002460;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    width: 200px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: auto; /* Empuja el botón hacia abajo */
}

.pack button:hover {
    background-color: #002460;
}


 .carousel div {
    width: 100%;
    height: 500px;  
    background-size: cover;  
    background-position: center center;   
    background-repeat: no-repeat;
}



.follow-us {
    position: relative;
    overflow: hidden;
    height: 500px; /* O ajusta según tus necesidades */
    background-image: url('img/seguinos.jpg'); /* Cambia a tu imagen de fondo */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Estilos adicionales para móviles */
@media (max-width: 768px) {
    .follow-us {
        background-attachment: scroll; /* Desactiva el efecto Parallax */
        background-position: top center; /* Centra la imagen horizontal y verticalmente */
        background-size: cover; /* Asegura que la imagen llene todo el contenedor */
        height: 400px; /* Aumenta la altura para que se vea más contenido */
    }

    .follow-us .content {
        padding: 20px; /* Agrega algo de espacio alrededor del contenido */
        padding-top: 130px;
    }

    .follow-us h2 {
        font-size: 18px; /* Reduce el tamaño del texto */
        padding: 10px; /* Agrega un poco de espacio alrededor */
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Añade sombra al texto para mayor visibilidad */
        color: #fff; /* Asegura que el texto sea blanco */
        margin: 0 auto; /* Centra el texto horizontalmente */
        max-width: 90%; /* Ajusta el ancho del texto para que no ocupe todo */
        text-align: center; /* Centra el texto */
    }

    .follow-us .btn-blue {
        margin-top: 20px; /* Espacio adicional para separar el botón del texto */
    }

.mapa h2 {
    font-size: 18px;
    padding: 10px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
    color: #fff;
    margin: 0 auto;
    max-width: 90%;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Borde blanco semi-transparente */
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}


}

/* Añadir sombra al texto para todas las vistas */
.follow-us h2 {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6); /* Sombra en todas las vistas */
    color: #fff; /* Blanco para el texto */
}



.mapa {
    position: relative;
    overflow: hidden;
    height: 500px; /* O ajusta según tus necesidades */
    background-image: url('img/mapa-1.jpg'); /* Cambia a tu imagen de fondo */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mapa:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* Fondo negro con opacidad al 30% */
    z-index: 1;
}


.follow-us .content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff; /* Cambia el color del texto según tu diseño */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mapa .content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff; /* Cambia el color del texto según tu diseño */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mapa h2, .mapa p {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8); /* Agrega sombra negra al texto */
}


.follow-us h2, .mapa h2 {
    margin: 0 0 20px 0; /* Espaciado alrededor del título */
}

.follow-us .social-links a {
    margin: 0 10px; /* Espaciado entre íconos */
    display: inline-block;
    cursor: pointer;
}

.follow-us .social-links img {
    width: 40px; /* Tamaño de los íconos */
    height: auto;
}

.follow-us .social-links img:hover {
    transform: scale(1.15);
}


/* Inicio:  Noticias*/
.news-section {
    text-align: center; /* Centra el contenido */
    padding: 20px 0;
}

.news-section h2 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--blue-dark);
}

.news-section p {
    font-size: 18px;
    margin-bottom: 30px;
    color: var(--blue-dark);
}

.news-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas */
    gap: 40px; /* Espaciado entre las tarjetas */
    max-width: 1200px; /* Limita el ancho del contenedor */
    margin: 0 auto; /* Centra el contenedor */
}

.news-item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    position: relative; /* Necesario para posicionar el borde inferior */
    height: 500px; 
}

.news-item:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.news-item-home {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    position: relative; /* Necesario para posicionar el borde inferior */
    height: 650px; 
}

.news-item-home:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.news-image {
    width: 100%;
    height: 350px; /* Incrementa la altura de las imágenes */ 
    background-size: cover;
    background-position: center;
}

.news-image-home {
    width: 100%;
    height: 500px; /* Incrementa la altura de las imágenes */ 
    background-size: cover;
    background-position: center;
}

.news-text {
    padding: 15px;
    flex-grow: 1; /* Expande el contenido para mantener equilibrio */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-text h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--blue-dark);
}

.news-text p {
    font-size: 16px;
    color: var(--light-blue);
    margin-bottom: 20px;
}

.news-text .btn {
    margin: 10px auto 20px; /* Centra el botón horizontalmente y agrega espacio inferior */
    padding: 10px 20px;
    width: 150px; /* Ancho fijo del botón */
    text-align: center; /* Asegura que el texto esté centrado */
    border: 2px solid var(--light-blue);
    background-color: transparent;
    color: var(--light-blue);
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.news-text .btn:hover {
    background-color: var(--light-blue);
    color: #fff;
}


/* Borde celeste en la parte inferior */
.news-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px; /* Grosor del borde */
    background-color: var(--light-blue); /* Color celeste */
    border-radius: 0 0 10px 10px; /* Esquinas inferiores redondeadas */
}
/* Fin: Noticias */ 
 
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #14ABE3;
    color: #14ABE3;
    background-color: transparent;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: scale(1.15); 
    background-color: #14ABE3;
    color: #fff;
}

.btn-submit {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #14ABE3;
    color: #14ABE3;
    background-color: transparent;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    transform: scale(1.15); 
    background-color: #14ABE3;
    color: #fff;
}

.btn-blue {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #002460;
    color: white;
    background-color: #002460;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 150px;
    text-align: center;
    font-size: 100%;
}

.btn-light-blue {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #15ABE2;
    color: white;
    background-color: #15ABE2;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 150px;
    text-align: center;
    font-size: 100%;
}

.btn-blue:hover, .btn-light-blue:hover {
    transform: scale(1.15); /* Aumenta ligeramente el tamaño para un efecto más notorio */
}

.news-item .btn:hover {
    transform: scale(1.15);
    transition: transform 0.3s ease;
}



/* Ajusta para dispositivos más pequeños */
@media (max-width: 768px) {
    .news-item, .news-item-home {
        flex-direction: column;
    }

    .news-text, .news-image, .news-image-home {
        width: 100%; /* Cada sección usa todo el ancho disponible */
        padding: 0 10px; /* Mantiene el espacio interior en dispositivos pequeños */
    }

    .news-item.reverse {
        flex-direction: column-reverse; /* Mantiene el orden visual deseado en diseño inverso */
    }
}


.video-section {
    width: 100%;
    overflow: hidden; /* Previene cualquier desbordamiento si el video es más grande que la sección */
}

video {
    width: 100%; /* Asegura que el video ocupe todo el ancho de la sección */
    height: auto; /* Mantiene la relación de aspecto */
}


.button-options a {
    display: block;
    background-color: #002460; /* Mantén un fondo consistente para todas las opciones */
    color: white;
    text-align: center;
    padding: 12px 20px; /* Padding uniforme para las opciones */
    text-decoration: none;
    border-bottom: 1px solid #14abe3; /* Líneas divisorias entre opciones */
}

.button-options a:last-child {
    border-bottom: none; /* No dibujar borde en el último elemento */
}

.btn-help i {
    margin-right: 5px;
    transition: transform 0.3s ease; /* Suaviza el cambio de ícono */
}


span.cuadrado-celeste {
    color: #00A6D9;
    font-size: 18px;
}

/* INICIO:  FOOTER */
.footer-section ul li {
    margin-bottom: 3px; /* Agrega espacio entre los elementos */
}

footer {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    background-color: #002460; /* Fondo oscuro azul */
    color: white;
    padding: 20px 0;
    font-weight: 500; /* Medium para títulos en footer */
}

.footer-container {
    display: flex;
    justify-content: space-around;
    align-items: start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo img {
    width: 200px; /* Ajusta esto según el tamaño de tu logo */
}

.footer-logo p {
    margin: 10px 0 0 0;
}

.footer-section h4 {
    margin-bottom: 10px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 90%;
}

.footer-section ul li a:hover {
    color: #e1efff; /* Color más claro en hover */
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    /* Estructura del contenedor */
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: left; /* Cambiar alineación del texto */
        padding: 20px;
    }

    /* Alineación del logo */
    .footer-logo {
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-logo img {
        width: 150px; /* Ajusta el tamaño del logo */
        margin-bottom: 0px;
    }

    /* Ajustar las secciones */
    .footer-section {
        text-align: left; /* Asegura que los textos estén alineados a la izquierda */
        width: 100%; /* Ocupa todo el ancho disponible */
        margin-bottom: 20px; /* Espaciado entre secciones */
    }

    /* Títulos */
    .footer-section h4 {
        font-size: 18px; /* Ajusta el tamaño para móvil */
        margin-left: 20px; /* Margen izquierdo para alineación */
        color: #e1efff; /* Color para títulos */
    }

    /* Enlaces */
    .footer-section ul {
        padding-left: 20px; /* Margen izquierdo para los ítems */
    }

    .footer-section ul li a {
        font-size: 16px; /* Tamaño de fuente para los enlaces */
        margin: 10px 0; /* Espaciado entre enlaces */
        display: block; /* Hace que cada enlace ocupe toda la línea */
    }

    /* Botón Opciones */
    .footer-options {
        display: block;
        margin-top: 20px;
        text-align: center;
    }

    .footer-options button {
        background-color: #14ABE3;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .footer-options button:hover {
        background-color: #0c8fbf;
    }
}
/* FIN:  FOOTER */

.color-blue {
    color: #002460 !important;
}

.color-light-blue {
    color: #14abe3 !important;
}

.plans-list li a {
    text-decoration: none;
    color: white;
    background-color: #00c3ff;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: normal;
    transition: background-color 0.3s;
    border-radius: 20px;
    transition: transform 0.3s ease; /* Asegúrate de incluir esto */
}

.plans-list li a:hover {
    transform: scale(1.15); /* Aumenta ligeramente el tamaño para un efecto más notorio */
}

.section-title {
            font-size: 1.5em;
            font-weight: bold;
            color: #00c3ff;
            position: relative;
            display: block; /* Asegura que sea un bloque para alinearse a la izquierda */
            margin: 20px 0;
            text-align: left; /* Asegura la alineación a la izquierda */
        }

.section-sub-title {
            font-size: 1.2em;
            font-weight: bold;
            color: #00c3ff;
            position: relative;
            display: block; /* Asegura que sea un bloque para alinearse a la izquierda */
            text-align: left; /* Asegura la alineación a la izquierda */
        }


.trabaja-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    align-items: center;
    margin: 0 20px; /* Añade márgenes laterales */
}

.trabaja-text {
    width: calc(100% - 20px); /* Resta para compensar el margen */
    padding: 0 10px; /* Espacio interior para evitar que el contenido toque los bordes */
}

.news-text {
    width: 100%;
}

.video-trabaja {
    border-radius: 25px;
}

.btn-sky-blue {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #14ABE3; /* Fondo azul para el botón de ayuda*/
    color: white; /* Texto en blanco para el botón de ayuda */
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border-radius: 20px;
    font-size: 1em;
    border: none;
    margin-top: 10px;
}

.btn-sky-blue:hover {
    transform: scale(1.15); 
}

a {
    text-decoration: none;
}

.subtitle-blue {
    color: #002460 !important;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 10px;
}




/* General styles */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}


/* Inicio:  Menú principal */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.main-nav .logo {
    margin-left: 20px; /* Ajusta según necesidad */
}

.main-nav .logo img {
    width: 120px;
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li {
    padding: 0 15px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.nav-links .phone-number {
    background-color: #14ABE4;
    padding: 5px 10px;
    border-radius: 20px;
    transition: transform 0.3s ease; /* Asegúrate de incluir esto */
}

.phone-number:hover {
    transform: scale(1.15);    
}

.phone-number a:hover {
    text-decoration: none !important;
}

.nav-links a:hover {
    text-decoration: underline;
}

.top-bar {
    background-color: var(--blue-dark);
    color: white;
    text-align: right;
    padding: 5px 20px;
}

.top-bar a {
    color: white;
    text-decoration: none;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
}

.top-bar span {
    color: white;
    margin: 0 5px;
}

.social-icon img, .login-link img {
    margin-right: 5px; /* Espacio entre el ícono y el texto */
}

.social-icon img:hover, .login-link:hover {
    transform: scale(1.15); 
}

.social-icon {
    display: inline-block;
}

.login-link img {
    width: 20px; /* Ajustar según necesidad */
    height: auto;
}

.social-icon img {
    width: 25px; /* Ajustar según necesidad */
    height: auto;
}

.social-icon img, .login-link img {
    background-color: var(--blue-dark); /* Ajusta el color de fondo al del área donde están los íconos */
    border-radius: 50%; /* Opcional: para hacer los íconos circularmente recortados */
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.main-nav .logo {
    flex: 1;  /* Asegura que el logo ocupe espacio flexible en el contenedor */
    display: flex;
    justify-content: center;  /* Centra el logo horizontalmente en su espacio asignado */
}

.nav-links li {
    /* Ajustes adicionales para los ítems si son necesarios */
}

.phone-number {
    display: flex; /* Esto asegura que los elementos internos se dispongan en línea */
    align-items: center; /* Esto centra los elementos verticalmente */
    white-space: nowrap; /* Esto evita que el texto se divida en múltiples líneas */
}

.phone-number i {
    margin-right: 5px; /* Espacio entre el ícono y el número de teléfono */
    color: white; /* Asegúrate de que el ícono sea visible si es necesario */
}

.phone-number a {
    color: inherit; /* Hereda el color del elemento padre, útil si necesitas estandarizar los colores de los enlaces */
    text-decoration: none; /* Elimina el subrayado del enlace */
}

.nav-links {
    flex: 1; /* Distribuye el espacio restante igualmente a ambos lados del logo */
    list-style: none;
    display: flex;
    justify-content: space-around; /* Espacia los enlaces uniformemente */
    margin: 0;
    padding: 0;
}

/* Ocultar el logo de escritorio en dispositivos móviles */
.desktop-logo {
    display: block;
}

.logo-mobile {
    display: none;
}

.menu-icon,
.close-icon {
    display: none;
}

/* Ajustes móviles */
@media (max-width: 768px) {
        .menu-icon {
        display: block; /* Hacer que sean visibles solo en la vista móvil */
        position: absolute;
        top: 15px; /* Ajusta la posición vertical */
        left: 15px; /* Alinea al lado izquierdo */
        font-size: 28px; /* Tamaño del icono */
        color: white;
        cursor: pointer;
        z-index: 10; /* Asegura que el menú esté encima del contenido pero no interfiera con otros elementos */
        width: 50px; /* Reduce el área activa */
        height: 50px; /* Reduce el área activa */
        text-align: center; /* Centra el ícono dentro de su contenedor */
    }

        .close-icon {
        display: block;
        position: absolute;
        top: 15px; /* Posiciona en la parte superior */
        right: 15px; /* Alinea al lado derecho */
        font-size: 28px; /* Tamaño del icono */
        color: white;
        cursor: pointer;
    }

    .nav-links {
        flex-direction: column; /* Cambia la dirección de los elementos a columna */
        justify-content: flex-start; /* Alinea los elementos al inicio */
        align-items: center; /* Centra los elementos horizontalmente */
        margin: 0;
        padding: 0;
        gap: 30px; /* Espacio fijo entre los elementos */
    }

    .desktop-logo {
        display: none !important;
    }

.logo-mobile {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    margin: 0 auto 20px auto; /* Márgenes para que el logo tenga espacio arriba y abajo */
    width: 120px; /* Ajusta el tamaño del logo según sea necesario */
    height: auto;
    text-align: center; /* Por si tiene texto */
}

.logo-mobile-menu {
    margin-top: 40px;
    margin-bottom: 0px;
}

    .logo-mobile img {
        max-width: 120px;
        height: auto;
        margin: 0 auto;
    }

    .menu-icon {
        display: block !important;
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 28px;
        color: white;
        cursor: pointer;
    }

    .close-icon {
        display: block !important;
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 28px;
        color: white;
        cursor: pointer;
    }

/* Ajuste del menú móvil */
.nav-links {
    display: flex;
    flex-direction: column; /* Asegura que los elementos estén en columna */
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px; /* Ajusta el ancho del menú */
    height: 100%;
    background-color: rgba(0, 36, 96, 0.95);
    padding-top: 10px; /* Espaciado superior para evitar que los ítems se solapen con el logo */
    transition: left 0.3s ease;
    z-index: 9999 !important; /* Asegura que el menú tenga prioridad */

        padding: 0 !important; /* Elimina relleno dentro del contenedor */
    margin: 0 !important; /* Elimina márgenes alrededor del contenedor */
}

/* Cuando el menú está abierto */
.nav-links.open {
    left: 0 !important; /* Despliega el menú */
}

/* Ítems del menú con espaciado fijo */
.nav-links li {
    /*margin: 15px 0 !important;*/ /* Espaciado consistente entre ítems */
    text-align: center !important;
}

/* Ajuste del texto de los ítems */
.nav-links li a {
    font-size: 16px !important;
    color: white;
    text-decoration: none;
}

 

/* Menú hamburguesa */
.menu-icon {
    display: block !important;
    color: white;
    font-size: 28px;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
}

/* Icono de cerrar */
.close-icon {
    display: block !important;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    color: white;
    cursor: pointer;
}


    .phone-number {
        margin-top: 15px !important;
        text-align: center !important;
    }
}
/* FIN: Menú Principal */

/* INICIO:  TITULOS */
.titulos-home {
    font-weight: bold;font-size: 150%;
}

.subtitulos-noticias {
    font-size: 130%;color:rgb(80,80,80);
}

@media (max-width: 768px) {
    .titulos-home {
        font-weight: bold;font-size: 90%;
    }    

    .subtitulos-noticias {
    font-size: 120%;color:rgb(80,80,80);
    }
}
/* FIN:  TITULOS */

/* INICIO:  PACK IMAGENES */
@media (max-width: 768px) {
    .pack-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px; /* Reduce el espacio entre los elementos */
        margin: 10px 0; /* Reduce márgenes superiores e inferiores */
        min-height: auto; /* Permite ajustar la altura al contenido */
    }

    .pack-image.large {
        width: 80%; /* Reduce el tamaño de la imagen grande */
        height: auto;
        margin: 0; /* Elimina márgenes adicionales */
    }

    .pack-image.small {
        display: none;
    }

    .choose-your-pack {
        margin-bottom: 10px; /* Ajusta el espacio inferior de la sección */
    }
}
/* FIN:  PACK IMAGENES */

.products-pack-section h2 {
    color: white;
}


/* INICIO: INTERNET */
.digital-tv-section {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    align-items: stretch; /* Esto asegurará que ambas tarjetas tengan la misma altura */
}

.tv-digital-left, .tv-digital-right {
    flex: 1; /* Ambos ocupan el mismo espacio */
    margin: 10px;
    display: flex;
    flex-direction: column; /* Esto ayuda si hay contenido adicional */
    justify-content: space-between; /* Alinea el contenido interno correctamente */
}

.tv-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 100%; /* Asegura que ocupe todo el alto disponible */
}

.tv-image {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 100%; /* También asegura que la imagen ocupe el alto disponible */
    object-fit: cover; /* Esto mantiene el aspecto de la imagen sin distorsión */
}

.product-card-content p {
        font-size: 1em; 
        text-align: center;
        margin-bottom: 5px;
    }

.why-card p {
        font-size: 1.1em; 
        text-align: center;
    }

@media (max-width: 768px) {
    .digital-tv-section {
        display: flex;
        flex-direction: column; /* Cambia la disposición a vertical */
        align-items: center; /* Centra las tarjetas */
        gap: 20px; /* Espacio entre las tarjetas */
    }

    .tv-digital-left, .tv-digital-right {
        flex: none; /* Permite que las tarjetas ocupen el ancho completo */
        width: 90%; /* Ajusta el ancho de las tarjetas */
        margin: 0; /* Elimina márgenes laterales */
    }

    .tv-card {
        padding: 15px; /* Reduce el padding interno */
        text-align: center; /* Centra el texto */
    }

    .tv-card h2 {
        font-size: 2em; /* Ajusta el tamaño del título */
    }

    .tv-card img {
        width: 100px; /* Ajusta el tamaño del icono */
        margin: 10px auto; /* Centra el icono */
    }

    .buttons {
        flex-direction: column; /* Coloca los botones en columna */
        gap: 10px; /* Espacio entre los botones */
        margin-top: 15px; /* Espacio superior */
    }

    .contratar-btn, .llamame-btn {
        width: 100%; /* Los botones ocupan todo el ancho */
        font-size: 0.9em; /* Ajusta el tamaño de la fuente */
        padding: 10px 0; /* Reduce el padding */
    }

    .tv-digital-right img {
        width: 100%; /* Imagen ocupa todo el ancho */
        border-radius: 10px; /* Mantén bordes redondeados */
        margin: 0 auto; /* Centra la imagen */
    }

    .overlay-text {
        position: relative; /* Ajusta la posición del texto para que no sea flotante */
        bottom: auto;
        left: auto;
        background-color: rgba(0, 0, 0, 0.7); /* Fondo más oscuro para mayor contraste */
        padding: 10px; /* Espaciado interno */
        margin-top: 10px; /* Espacio superior */
        border-radius: 5px; /* Bordes redondeados */
        text-align: center; /* Centra el texto */
        color: white; /* Texto blanco para contraste */
    }

    .products-pack-section h2 {
        font-size: 140%;
        font-weight: bold;
    }

    .why-choose-section h2 {
        font-size: 140%;
        font-weight: bold;
    }

        /* Sección de tarjetas */
    .products-pack {
        display: flex;
        flex-direction: column; /* Cambia a diseño vertical */
        align-items: center;
        gap: 20px; /* Añade espacio entre tarjetas */
    }

    .product-card {
        width: 90%; /* Ajusta el ancho al 90% del viewport */
        margin: 0; /* Elimina márgenes laterales */
    }

    .product-card img {
        width: 100%; /* Asegura que la imagen ocupe todo el ancho de la tarjeta */
    }

    .product-card-content h3 {
        font-size: 1.2em; /* Incrementa el tamaño del título */
        margin-bottom: 10px; /* Añade espacio debajo */
    }

    .btn-sky-blue {
        padding: 12px 20px; /* Agranda el botón para mejor usabilidad */
        font-size: 1em; /* Incrementa el tamaño de la fuente */
    }

    /* Sección "¿POR QUÉ ELEGIR INTERNET PARA TODOS?" */
    .why-choose-cards {
        display: flex;
        flex-direction: column; /* Cambia a diseño vertical */
        gap: 20px; /* Espacio entre las tarjetas */
        align-items: center;
    }

    .why-card {
        width: 90%; /* Ocupa el 90% del ancho del viewport */
        text-align: center; /* Centra los textos */
    }

    .why-card img {
        margin-bottom: 15px; /* Añade espacio debajo del ícono */
        width: 40px; /* Ajusta el tamaño del ícono */
        height: auto;
    }

    .subtitle-blue {
        font-size: 1.1em; /* Incrementa ligeramente el tamaño del subtítulo */
        margin-bottom: 5px;
    }

    .why-card p {
        font-size: 0.9em; /* Ajusta el texto para mayor legibilidad */
    }
}
/* FIN: INTERNET */

/* INICIO: TRABAJA-CON-NOSOTROS.PHP */
.card-block select {
    background-color: white;
}

.button-enviar {
    font-size: 18px !important;
    font-weight: bold;
}

@media (max-width: 768px) {
    /* Acordeones */
    .accordion {
        font-size: 16px; /* Tamaño más pequeño */
        padding: 12px; /* Reduce el padding */
    }

    .panel {
        padding: 10px; /* Reduce el padding dentro del panel */
    }

    /* Formulario */
    .form-group {
        display: flex; /* Flex para manejar los elementos */
        flex-direction: column; /* Coloca el label y el input en líneas separadas */
        align-items: flex-start; /* Alinea los elementos al inicio */
        margin-bottom: 20px; /* Mayor separación entre grupos */
    }

    .form-group label {
        margin-bottom: 5px; /* Espaciado entre label e input */
        font-size: 16px; /* Tamaño ajustado para móvil */
        text-align: left; /* Alinea el texto del label a la izquierda */
        width: 100%; /* Ocupa toda la línea */
    }

    .form-group .form-control {
        font-size: 16px; /* Tamaño adecuado para inputs */
        width: 100%; /* Los inputs ocupan todo el ancho */
        padding: 10px; /* Espaciado interno */
        border-radius: 5px; /* Bordes redondeados */
        border: 1px solid #ccc; /* Borde ligero */
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil */
        margin-bottom: 15px; /* Agrega espacio debajo de cada input */
    }

    /* Campo de fecha */
    input[type="date"] {
        font-size: 16px; /* Texto más legible */
        width: 100%; /* Ocupa todo el ancho disponible */
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc; /* Borde ligero */
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil */
        margin-bottom: 15px; /* Espaciado debajo */
    }

    /* Select */
    select.form-control {
        font-size: 16px; /* Tamaño consistente con otros inputs */
        padding: 10px;
        width: 100%;
        border-radius: 5px;
        border: 1px solid #ccc; /* Borde ligero */
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil */
        margin-bottom: 15px; /* Espaciado debajo */
    }

    /* Botón de envío */
    input[type="submit"] {
        width: 100%; /* Botón ocupa todo el ancho */
        font-size: 16px;
        padding: 12px; /* Espaciado interno */
        background-color: #007bff; /* Color del botón */
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    input[type="submit"]:hover {
        background-color: #0056b3; /* Color al pasar el cursor */
    }

    /* Video */
    .video-container video {
        width: 100%; /* Asegura que ocupe todo el ancho */
        height: auto; /* Mantiene la relación de aspecto */
    }

    /* Botones */
    .btn {
        font-size: 14px; /* Tamaño de texto más pequeño */
        padding: 8px 16px; /* Reduce el padding */
    }

    /* Alineación de elementos generales */
    .news-text,
    .trabaja-text {
        text-align: left; /* Cambia la alineación a la izquierda */
    }

    /* Tarjetas de noticias */
    .news-container {
        grid-template-columns: 1fr; /* Cambia a una sola columna */
        gap: 20px; /* Ajusta el espaciado */
    }

    .news-item, .news-item-home {
        height: auto; /* Deja que las tarjetas se adapten al contenido */
    }

    .news-image {
        height: 200px; /* Ajusta la altura de las imágenes */
    }

    .news-image-home {
        height: 300px; /* Ajusta la altura de las imágenes */
    }

    .news-item-home h2 {
        font-size: 120%;
        margin-left: 10px;
        margin-top: 10px;
    }
}
/* FIN: TRABAJA-CON-NOSOTROS.PHP */

/* INICIO: NOTICIAS.PHP */
.img-noticias {
    border-radius: 15px;
    margin-top: -20px;
}

.section-noticias {
    text-align: center;
    margin-left: 60px;
    margin-right: 60px;
}

.titulo-web {
    text-align: center;
    margin-bottom: -10px; 
}
/* FIN: NOTICIAS.PHP */

.font-bold {
    font-weight: bold;
}

.chat-popup .form-container .btn, .pagar-popup .form-container .btn {
    font-family: 'Montserrat', sans-serif;
}

.contratar-btn, .llamame-btn, .enviar-button {
            font-family: 'Montserrat', sans-serif;
            background-color: #15ABE2;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 1em;
            transition: transform 0.3s ease; /* Asegúrate de incluir esto */
}

.llamame-btn {
    background-color: #002460;
}

.llamame-btn:hover {
    transform: scale(1.15);    
}

.enviar-button:hover, .button-enviar:hover {
    transform: scale(1.05); /* Efecto de escala al pasar el cursor */
    transition: transform 0.3s ease, background-color 0.3s ease !important; /* Transición suave */
}


#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 2px solid #ccc;
  padding: 20px;
  z-index: 9999;
  display: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
#popup img {
  max-width: 100%;
  height: auto;
}
#popup a {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
#popup a:hover {
  background: #0056b3;
}
#closePopup {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
}