/* Variables de Color */
:root {
    --color-dark: #1f2731; /* Fondo principal oscuro */
    --color-primary: #ffc93c; /* Amarillo principal */
    --color-secondary: #B13BFF; /* Azul de planes y botones secundarios */
    --color-text-light: #ffffff;
    --color-text-dark: #333333;
    --color-gray-text: #999999;
    --color-card-dark: #1c242d;
    --color-card-light: #ffffff;
    --color-button-dark: #27303c;
    --color-footer-bg: #1f2731; /* Color de fondo del footer */
    --color-partner-bg: #f8f8f8; /* Color de fondo de la sección de partners */
    --color-form-bg: #27303c; /* Color de fondo del formulario */
}

/* Base y Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

a {
    text-decoration: none;
    color: inherit;
}

/* ======================================= */
/* Botones (Shared Styles) */
/* ======================================= */
.btn {
    background-color: #090040;
    color: #ffffff;
    padding: 12px 30px;
    font-family: "Montserrat";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}

.btn:hover  {
    background-color: #FFCC00 ;
    color: #471396;
}

.btn-primary:hover {
    background-color: #B13BFF ;
    color: #ffffff;
}


/* Botón Amarillo (Contáctanos en Hero) */
.btn-primary {
    background-color: #FFCC00;
    color: #090040;
    padding: 12px 30px;
    font-family: "Montserrat";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    border: none !important;
}

/* Botón Naranja (Nuestros Planes) */
.btn-secondary {
    background-color: var(--color-primary);
    color: var(--color-text-dark);
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 10px;
    letter-spacing: 0.5px;
    border: none;
    
}
.btn-secondary:hover {
    background-color: #B13BFF ;
    color: #ffffff;
    border: none;
}

/* Botón de Contratar (Planes) */
.btn-tertiary {
    background-image: linear-gradient(to left, #B13BFF, #FFCC00);
    color: #ffffff;
    width: 100%;
    margin-top: 15px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 700;
            cursor: pointer;
        /* La transición hace que el cambio de tamaño sea gradual */
        transition: transform 0.3s ease;
    
}
.btn-tertiary:hover {
    background-color: #FFCC00;
    color: #471396;
    transform: scale(1.1);
    font-size: 16px;
}

/* Nuevo Botón de esquema oscuro para CTA */
.btn-dark-outline {
    background-color: transparent;
    color: var(--color-text-light);
    border: 2px solid var(--color-text-light);
    padding: 12px 30px;
    font-size: 14px;
    letter-spacing: 1px;
}
.btn-dark-outline:hover {
    background-color: var(--color-text-light);
    color: var(--color-text-dark);
}


/* ======================================= */
/* Header y Hero Section */
/* ======================================= */
/* ======================================= */
/* Header y Hero Section - Ajuste para ampliar el recorte vertical */
/* ======================================= */
.hero-section {
    /* Mantenemos el min-height y el punto de corte del 70% */
    
    padding: 20px 0 100px 0; 
    color: var(--color-text-light);
    position: relative;
    
    background-image: 
        linear-gradient(
            rgba(9, 0, 64, 0.9) 0%, 
            rgba(31, 39, 49, 0.7) 70%, 
            transparent 70% 
        ), 
        linear-gradient(to bottom, transparent 70%, #ffffff 70%), 
        url('../img/image-2.png'); 
        
    background-size: 
        cover, 
        100% 100%, 
        cover; 

    
    background-color: #ffffff; 
    
    /* ¡CAMBIO CLAVE! Aumentar el segundo valor (%) baja el enfoque 
       y amplía la porción visible del fondo hacia abajo. */
    background-position: center 80%; /* PRUEBA ESTE VALOR */
    background-repeat: no-repeat;
    object-fit:unset
}
/* Top Bar / Navegación */
/* Estas clases ya no se usan en el nuevo HTML, pero se mantienen por si acaso */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo1 img {
    width: 100%;
}

/* Hero Content - Ahora dentro del contenedor alineado */
.hero-content {
    /* Se quita el max-width/margin para que herede del .container padre */
    padding: 80px 0 0 0; /* Ajustamos padding vertical, el horizontal lo da el .container */
}

.hero-content h1 {
    font-family: "Montserrat";
    font-size: 26px;
    font-weight: 700;
    color: #FFCC00;
    margin-bottom: 10px;
 
}

.hero-content h2 {
        font-family: "montserrat";

    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;

}

.hero-content p {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 35px;
    max-width: 1000px;
    opacity: 0.9;
}


/* Navbar - Reajustamos las reglas de navbar */
.navbar {
    /* El container-fluid interno maneja la mayoría de esto, solo nos queda el margen para centrar el navbar wrapper */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar img{
    width: 80px;
}

.navbar-nav .nav-link{
    margin-right: 30px;
    font-size: 18px;
    font-weight: 700;
    opacity: 0.9;
    transition: opacity 0.3s;
    padding-bottom: 2px;
    text-decoration: none;
    color: #ffffff;
}

.nav-link.active, .navbar-nav .nav-link.show{
    text-decoration: none;
    color: #FFCC00 !important;
}

.navbar-nav a:hover {
    opacity: 1;
    border-bottom: 2px solid var(--color-primary) ;
    color: #B13BFF;
}

/* Contact Info en Navbar */
.contact-info {
    font-size: 14px;
}

.contact-info span {
    margin-left: 20px;
    opacity: 0.85;
}

.contact-info i {
    color: var(--color-primary);
    margin-right: 5px;
}

/* ======================================= */
/* Grilla beneficios - AJUSTES CRUCIALES */
/* ======================================= */

/* Usamos una clase específica para el container del hero si queremos padding diferente al default */
.hero-container-content {
    /* Mantenemos la alineación de Bootstrap y solo ajustamos el padding vertical si es necesario */
    padding-left: var(--bs-gutter-x, 0.75rem);
    padding-right: var(--bs-gutter-x, 0.75rem);
}

/* Eliminamos todas las reglas de padding problemáticas de la sección de beneficios. 
   El espaciado ahora se maneja con las clases p-* en el HTML (ej. p-5) */

.beneficios img{
    width: 60px;
    /* padding: 0px 0px 0px 40px; <-- ELIMINADO */
}

.beneficios{
    border-radius: 55px !important;

}


.beneficios h3{
     font-family: "Montserrat";
    font-size: 20px;
    font-weight: 700;
}

.beneficios h4{
     font-family: "Montserrat";
    font-size: 26px;
    font-weight: 700;
}


.descripcion { 
    background-color: #471396;
    border-radius: 10px 0px 0px 10px; 
    
}


.beneficios1{
    box-shadow: 10px 8px 20px rgba(177, 59, 255, 0.2);
}

.beneficios1 p{
    padding-top: 10px;
    padding-left: 50px ;
    font-size: 20px;
    font-weight: 700;

}
.logo-bene img{
    width: 140px;
    object-fit: cover;
    padding-bottom: 30px;
    margin: 0 auto;



}






/* ======================================= */
/* Navbar Toggler - AJUSTES PARA EL HAMBURGUESA */
/* ======================================= */

/* 1. Estilo para el botón completo (el 'cuadrado' que contiene el icono) */
.navbar-toggler {
    /* Cambia el color de fondo del botón a Morado Oscuro (ejemplo) */
    background-color: #471396; /* Color de fondo del botón. Usé el color 'morado' de tu .descripcion */
    border: none; /* Elimina el borde de Bootstrap */
    padding: 0.25rem 0.5rem; /* Ajusta el padding si es necesario */
}

.navbar-toggler:focus {
    /* Elimina el borde de enfoque (azul) de Bootstrap al hacer clic */
    box-shadow: none; 
    border-color: transparent; 
}

/* 2. Estilo para el icono de las barras (el 'navbar-toggler-icon') */
.navbar-toggler-icon {
    /* Bootstrap utiliza un background-image (SVG) para las barras. 
       Para cambiar el color de un SVG negro a un color diferente (ej. Amarillo: #ffc93c), 
       se usa un filtro CSS. El valor `invert(70%) sepia(300%) hue-rotate(360deg) saturate(3000%)` 
       aproxima el cambio a un color brillante (var(--color-primary) o amarillo)
    */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 201, 60)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    
    /* Alternativa con filtro: Si usas la imagen predeterminada de Bootstrap (negra), 
       puedes aplicar un filtro para colorearla (Más compatible con temas): */
    /* filter: invert(86%) sepia(85%) saturate(300%) hue-rotate(330deg) brightness(100%); */
    /* El filtro anterior simula el color amarillo de tu variable --color-primary */
}

/* ¡Importante! Elimina estas reglas de tu CSS ya que están incorrectas para Bootstrap 5 */
/* .navbar-toggler button{
    color: #25d366;
}

.navbar-toggler-icon{
    color: #25d366;
} */

/* ======================================= */
/* Planes Section */
/* ======================================= */

.plans-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 0px 80px 0px; /* Ajuste para compensar el card flotante */
    text-align: center;
}

.plans-section h3 {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 40px;
    color: #471396;
}

/* Selector de Tipo de Plan */
.plan-type-selector {
    display: inline-flex;

    border-radius: 5px;
    margin-bottom: 50px;
    overflow: hidden;
}

.plan-type {
    display: flex;
    align-items: center;
    padding: 12px 25px;


}



.plan-type p {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
}


.plan-type img {
    width: 80px;
    padding-right: 20px;
}

/* Contenedor de Tarjetas de Planes */
.plans-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que los planes salten de línea */
    gap: 25px;
    width: 100%;
}

.plan-card2 {
    width: 230px; /* Ajustado ligeramente para permitir más en una fila */
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(177, 59, 255, 0.6);
    background-color: var(--color-card-light);
    display: flex;
    flex-direction: column;
    margin: 10px;
}

.plan-header-primary,
.plan-header-secondary {
    padding: 18px 0;
    color: var(--color-text-dark);
    text-align: center;
}

.plan-header-primary {
    background-color: var(--color-primary); /* Amarillo */
}

.plan-header-secondary {
    background-color: var(--color-secondary); /* Azul */
    color: var(--color-text-light);
}


.plan-card22 {
    width: 320px; /* Ajustado ligeramente para permitir más en una fila */
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(177, 59, 255, 0.6);
    background-color: var(--color-card-light);
    display: flex;
    flex-direction: column;


    
}

.plan-header-primary h4,
.plan-header-secondary h4 {
    font-size: 28px;
    font-weight: 700;
}

.plan-body {
    padding: 25px;
    text-align: center;
    flex-grow: 1; /* Para que el cuerpo se estire y el botón quede abajo */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.plan-body .price {
    font-size: 38px;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: 5px;
}






.plan-body .price2 {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 5px;
}




.plan-body .internet-label {
    font-family: "Montserrat";
    font-size: 22px;
    font-weight: 700;
    color: var( --color-text-dark);
    margin-bottom: 15px;
}

.plan-body .speed-detail {
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: 700;
    line-height: 0.2rem;
    color: var( --color-text-dark);
}


.plan-body .speed-detail2 {
    font-size: 12px;
    font-weight: 600;
    line-height: 0.4;
    color: #ffffff !important;
}

.plan-body .speed-detail3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 0.4;
    color: #ffffff !important;
}

.card-oscura{
    background-color: #090040;

}

.plan-header-secondary h5{
     font-size: 46px;
    font-weight: 700;
    line-height: 0.4;
    color: #ffffff ;
    padding-top: 20px;
    padding-bottom: 10px;

}

.plan-header-primary h5{
     font-size: 46px;
    font-weight: 700;
    line-height: 0.4;
    color: var(--color-text-dark);;
    padding-top: 20px;
    padding-bottom: 8px;

}

.fibra{
    font-family: "Montserrat";
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;

}



.plan-header-secondary .fibra{

    font-family: "Montserrat";
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;

}

.plan-header-primary .fibra {
    font-family: "Montserrat";
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text-dark);;

}


.my-custom-hr{
    height: 3px; /* Adjust thickness */
    background-color: #FFCC00; /* Change color */
    border: none; /* Remove default border */
    margin-top: 10px;
    margin-bottom: 20px;/* Add vertical spacing */
    width: 50%; /* Set width */
    margin-left: auto; /* Center the line */
    margin-right: auto;
    opacity: 1;
}

.my-custom-hr2{
    height: 3px; /* Adjust thickness */
    background-color: #B13BFF; /* Change color */
    border: none; /* Remove default border */
    margin: 10px 0; /* Add vertical spacing */
    width: 80%; /* Set width */
    margin-left: auto; /* Center the line */
    margin-right: auto;
    opacity: 1;
}

/* ======================================= */
/* Nuevas Secciones */
/* ======================================= */

/* Sección de Planes Adicionales (debajo del primer set) */
.additional-plans-section {
    max-width: 1200px;
    margin: 60px auto 80px auto;
    padding: 0 20px;
    text-align: center;
}

.additional-plans-section h4 {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 40px;
    color: #471396;
}

.additional-plans-section .plans-container {
    gap: 20px; /* Ligeramente más pequeño el gap */
}

/* Sección de Info CTA */
.info-cta-section {
    display: flex;
    margin: 0px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   
}




.cta-left {
    padding: 6rem ;
    color: var(--color-text-light);
    margin: 0 auto;
    
}




.cta-right {
    padding: 6rem ;
    color: var(--color-text-light);
    margin: 0 auto;

}

.cta-left {
    background-image:  url('../img/image-4.jpg'); /* Placeholder */
    background-color: #471396; /* Color de respaldo */
}

.cta-right {
    background-color: #B13BFF ;
    color: #ffffff;
}

.cta-left h3,
.cta-right h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;

    
}

.cta-left p,
.cta-right p {
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.5;


}

/* Sección de Partners */

        .partners-section {
            max-width: 1200px;
            margin: 80px auto;
            padding: 50px 20px;
            text-align: center;
            background-color: var(--color-partner-bg);
            border-radius: 8px;
        }

.partners-section h3 {

    font-family: "montserrat";
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 40px;
    color: #471396;
}


.partners-section  span{
    font-family: "montserrat";
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--color-dark);
    
}


        .partners-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            gap: 30px;
        }

        .partners-container img {
            max-width: 250px;
            height: auto;
            padding: 20px;
 
        }

        .partners-container img:hover {
            opacity: 1;
        }


        .imagen-con-borde1 {
        border: 5px solid #090040;
        border-radius: 10px;
        background-color: #ffffff;
        }

         .imagen-con-borde2 {
        border: 5px solid #471396;
        border-radius: 10px;
        background-color: #ffffff;
        }

        .imagen-con-borde3 {
        border: 5px solid #B13BFF;
        border-radius: 10px;
        background-color: #ffffff;
        }

        .imagen-con-borde4 {
        border: 5px solid #FFCC00;
        border-radius: 10px;
        background-color: #ffffff;
        }
        



        /* Estilos para el div cta-left */
.info-cta-section .cta-left {
    /* Agrega la imagen de fondo. Asegúrate de que la ruta sea correcta. */
    background-image: url('../img/imagen-6.jpg'); 
    background-size: cover; /* Asegura que la imagen cubra todo el área */
    background-position: center; /* Centra la imagen */
    color: white; /* Para que el texto sea legible sobre el fondo */    
    /* Opcional: Para mejorar la legibilidad, puedes agregar un overlay semitransparente con un gradiente */
    background-blend-mode: multiply; /* Mezcla el color de fondo con la imagen */
    background-color: rgba(0, 0, 0, 0.7); /* Color base con transparencia para oscurecer la imagen */

}





.contact-faq-section{
    margin: 0 auto;
    padding: 0px 20px;

}

.faq-container {
    margin: 0 auto;
    flex: 1;
    padding: 40px 0; /* Alinea el padding superior con el formulario */
}

.faq-container h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

.faq-item {
    background-color: var(--color-card-light);
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.faq-item p {
    font-size: 15px;
    color: var(--color-gray-text);
    padding-right: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    opacity: 0;
}

/* Simular apertura/cierre de FAQ - En un entorno real se haría con JS */
.faq-item:nth-child(2) h4 {
    /* Por ejemplo, el segundo FAQ está abierto inicialmente */
    margin-bottom: 0; /* Para que el párrafo abierto no tenga doble margin */
}

.faq-item:nth-child(2) p {
    max-height: 100px; /* Ajusta este valor según el contenido más largo */
    padding-top: 10px;
    opacity: 1;
}



.lado-iz {
background-color:  #471396 ;
padding-bottom: 100px;
border-radius: 10px 0px 0px 10px;

}


.lado-iz h1 {
    font-family: "montserrat";
    font-weight: 800;
    font-size: 40px;
    color: #ffffff ;

}


.lado-iz h3 {
    font-family: "montserrat";
    font-weight: 600;
    font-size: 24px ;
    color: #ffffff ;

}


.info-cta-section2 {
    display: flex;
    overflow: hidden;
   
}


.acordeon{
    margin-top: 10px;
    margin-bottom: 60px;



}

.beneficios2{
    padding: 60px  0px;
    box-shadow: 10px 8px 20px rgba(177, 59, 255, 0.2);


}


/* Footer */
/* Estilos para el footer (main-footer) */


.main-footer {
    /* La sintaxis de background-image permite apilar imágenes y gradientes. */
    /* La capa negra (rgba) se coloca PRIMERO para que esté encima. */
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5)), url('../img/footer.jpg'); 
    
    background-size: cover; 
    background-position: bottom center; 
    background-repeat: no-repeat;
    
    background-color: #2c3e50; /* Sigue siendo un color de respaldo */
    color: white; 
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 60px;
    margin-bottom: 30px;
}

.footer-col h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 25px;
}

.logo {
    margin-bottom: 20px;

}

 .logo img {
        width: 120PX;
}

.footer-about p {
    font-size: 14px;
    margin-bottom: 25px;
    line-height: 1.6;
}

.social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    font-size: 16px;
    margin-right: 10px;
    transition: background-color 0.3s;
}

.social-links a:hover {
    background-color: var(--color-primary);
    color: var(--color-dark);
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    font-size: 15px;
    opacity: 0.8;
    transition: opacity 0.3s, color 0.3s;
}

.footer-col ul li a:hover {
    opacity: 1;
    color: var(--color-primary);
}

.footer-contact p {
    font-size: 15px;
    margin-bottom: 10px;
}
.footer-contact p strong {
    color: var(--color-primary);
}

.footer-pattern {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.1;
    z-index: 0;
    height: 250px; /* Ajusta según el tamaño de tu imagen */
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
    position: relative; /* Para el botón flotante */
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p{
    margin-bottom: 0px;
}



.footer-col ul{
 padding-left: 0px;
}

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
}

.whatsapp-float a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #25d366; /* Color de WhatsApp */
    color: var(--color-text-light);
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.whatsapp-float a:hover {
    transform: scale(1.1);
}



.contanier4{
    margin: 0 auto;
    padding-bottom: 20px;
    
}

.footer1{
    width: 0 auto !important;
    max-width: 1200px;
}


.accordion-item {
    padding: 20px 0px;
}


/* ======================================= */
/* Hero Content - Títulos Responsivos */
/* ======================================= */

.hero-content {
    /* Mantenemos el padding vertical y el horizontal lo da el .container padre */
    padding: 80px 0 0 0; 
}

.hero-content h1 {
    font-family: "Montserrat";
    /* Tamaño por defecto (Desktop First) */
    font-size: 30px; 
    font-weight: 700;
    color: #FFCC00;
    margin-bottom: 10px;
}

.hero-content h2 {
    /* Tamaño por defecto (Desktop First) */
    font-size: 60px; 
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    /* Evita que el texto se salga de la pantalla en una sola línea */
    word-break: break-word; 
}

































/* ======================================= */
/* Servicios */
/* ======================================= */





.hero-section2 {
    /* Agrega la imagen de fondo. Asegúrate de que la ruta sea correcta. */
    background-image: url('../img/image-10.png'); 
    background-size: cover; /* Asegura que la imagen cubra todo el área */
    background-position: center; /* Centra la imagen */
    color: white; /* Para que el texto sea legible sobre el fondo */    
    /* Opcional: Para mejorar la legibilidad, puedes agregar un overlay semitransparente con un gradiente */
    background-blend-mode: multiply; /* Mezcla el color de fondo con la imagen */
    background-color: rgba(9, 0, 64, 0.7); /* Color base con transparencia para oscurecer la imagen */
    padding: 20px 0 100px 0;


}




.hero-section4 {
    /* Agrega la imagen de fondo. Asegúrate de que la ruta sea correcta. */
    background-image: url('../img/imagen-12.jpg'); 
    background-size: cover; /* Asegura que la imagen cubra todo el área */
    background-position: center 30%; /* Centra la imagen */
    color: white; /* Para que el texto sea legible sobre el fondo */    
    /* Opcional: Para mejorar la legibilidad, puedes agregar un overlay semitransparente con un gradiente */
    background-blend-mode: multiply; /* Mezcla el color de fondo con la imagen */
    background-color: rgba(9, 0, 64, 0.7); /* Color base con transparencia para oscurecer la imagen */
    padding: 20px 0 100px 0;


}



.plan-card3 {
    width: 230px; /* Ajustado ligeramente para permitir más en una fila */
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(177, 59, 255, 0.6);
    background-color: var(--color-card-light);
    display: flex;
    flex-direction: column;
    margin: 10px;
}


.subtitulo {
    font-family: "montserrat";
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--color-dark);
    
}


/* ---- Flechas Slick ---- */
.slick-prev, .slick-next {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 18px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.slick-prev:hover, .slick-next:hover {
    background-color: #007bff;
    color: #fff;
}

/* Posicionarlas fuera del carrusel */
.slick-prev {
    left: -60px;
}

.slick-next {
    right: -60px;
}

/* Asegurar que el contenedor permita que sobresalgan las flechas */
.plans-carousel-home, 
.plans-carousel-additional {
    position: relative;
    overflow: visible; 
}

/* Estilo de puntos */
.slick-dots {
    bottom: -40px;
}

.slick-dots li button:before {
    font-size: 12px;
    color: #007bff;
    opacity: 0.6;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #007bff;
}

.plans-section2 {
  background: none; /* sin fondo */
  padding: 60px 0;
}

.plan-card2 {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  text-align: center;
}

/* Flechas del carrusel */
.slick-prev, .slick-next {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #333;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.slick-prev { left: -35px; }
.slick-next { right: -35px; }

.slick-prev:hover, .slick-next:hover {
  color: #000;
}
.plans-carousel-home 
/* Puntos de navegación */
.slick-dots li button:before {
  font-size: 10px;
  color: #aaa;
}

.slick-dots li.slick-active button:before {
  color: #000;
}



.plans-carousel-home {
    margin: 0 auto;


}

.plans-section2{
    margin: 0 auto;
    text-align: center;
}

.plans-section2 h2{
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 40px;
    color: #471396;
}





.plans-container2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que los planes salten de línea */
    gap: 25px;
    width: 80%;
}

.plans-container2 h3{
    font-weight: 900;
}






/* Nosotros */


.hero-content2 h2{
    font-family: "Montserrat";
    font-size: 60px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    word-break: break-word;

}

.Nosotros-descripcion{

    padding-top:6em;

}

.texto-nosotros h3{
    font-family: "Montserrat";
    font-size: 32px;
    font-weight: 700;
    color: #471396;
    margin-bottom: 10px;

}

.texto-nosotros span{
    font-family: "Montserrat";
    font-size: 20px;
    font-weight: 700;
    color: #1f2731;
    line-height:1.9rem;
    text-align: justify;
    margin-bottom: 10px !important;
}

.texto-nosotros p{
    font-family: "Montserrat";
    font-size: 16px;
    font-weight: 500;
    color: #1f2731;
    line-height:1.6rem;

}



.texto-nosotros a{
    margin-top: 80px;
    margin-bottom: 30px;
}

.texto-nosotros img{
    height: 60%;
    width: 100%;
    object-fit: contain;
}



.hero-section3 {
    /* Agrega la imagen de fondo. Asegúrate de que la ruta sea correcta. */
    background-image: url('../img/imagen-11.png'); 
    background-size: cover; /* Asegura que la imagen cubra todo el área */
    background-position: center 13%; /* Centra la imagen */
    color: white; /* Para que el texto sea legible sobre el fondo */    
    /* Opcional: Para mejorar la legibilidad, puedes agregar un overlay semitransparente con un gradiente */
    background-blend-mode: multiply; /* Mezcla el color de fondo con la imagen */
    background-color: rgba(9, 0, 64, 0.7); /* Color base con transparencia para oscurecer la imagen */
    padding: 20px 0 100px 0;

}









































/********************************************  
Nosotros 
********************************************/






.hero-section5 {
    /* Agrega la imagen de fondo. Asegúrate de que la ruta sea correcta. */
    background-image: url('../img/imagen-9'); 
    background-size: cover; /* Asegura que la imagen cubra todo el área */
    background-position: center 70%; /* Centra la imagen */
    color: white; /* Para que el texto sea legible sobre el fondo */    
    /* Opcional: Para mejorar la legibilidad, puedes agregar un overlay semitransparente con un gradiente */
    background-blend-mode: multiply; /* Mezcla el color de fondo con la imagen */
    background-color: rgba(9, 0, 64, 0.7); /* Color base con transparencia para oscurecer la imagen */
    padding: 20px 0 100px 0;

}
 



.hero-section6 {
    background-color: #090040; /* Color base con transparencia para oscurecer la imagen */
    padding: 100px 0px 100px 0px;

}



.resultados {
    padding: 40px 0px;
}



.resultados img{
    width: 18%;
}


.resultados h3{
    font-family: "Montserrat";
    font-size: 40px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 10px;
    margin-top: 14px;
}

.resultados p{
    font-family: "Montserrat";
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}



.Nosotros-descripcion h2{
    font-family: "montserrat";
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 40px;
    color: #471396;

}


.Nosotros-descripcion2{
    margin-top: 60px;
    margin-bottom: 90px;
}


.subtitulo2  .Nosotros-descripcion {
    font-family: "montserrat";
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #1f2731;

}





.Nosotros-descripcion2 h2{
    font-family: "Montserrat";
    font-size: 20px;
    font-weight: 700;
    color: #1f2731;
}



















/********************************************  
Contacto
********************************************/





.contacto{
    padding-top: 30px;

}



.contacto2 {
  position: relative;
  margin-top: 40px;
  width: 70%;
  padding: 20px;
  background-color: rgb(177, 59, 255,0.2);
  border-radius: 20px; /* ← Curva los bordes */
  overflow: hidden; /* ← Importante para que nada se desborde */
  z-index: 1;
}

/* Borde degradado con ::before */
.contacto2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  padding: 5px; /* ← grosor del borde */
  background: linear-gradient(to left, #B13BFF, #FFCC00);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}




.contacto h2{
    font-family: "montserrat";
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 40px;
    color: #ffffff;

}

.contacto span{
    font-family: "montserrat";
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #ffc93c;

}

.contacto p{
    font-family: "montserrat";
    color: #fff;

}









/* Contenedor del carrusel */
.plans-carousel-home,
.plans-container2 {
  max-width: 1100px;   /* <-- Ajusta este valor según el diseño general */
  min-height: 400px;

}


.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}




.resultados2 {
    padding: 40px 0px;
}

.resultados2 h3{
    font-family: "Montserrat";
    font-size: 30px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 10px;
    margin-top: 14px;
}

.resultados2 p{
    font-family: "Montserrat";
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #FFCC00;
}

.resultados2 img{
    width: 12%;
}


/********************** Nosotros **********************/




































































/* --- Media Query para Dispositivos Intermedios (Tablet / >576px) --- */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 24px;
    }

    .hero-content h2 {
        font-size: 48px; /* Reducimos el H2 */
    }
    
    .hero-content p {
        font-size: 18px; /* Reducimos el párrafo del hero */
    }


    .hero-content2 {
        padding: 0px 20px 0px 20px;

    }

    .hero-content {
        padding: 0px 20px 0px 20px;
       
    }

    .Nosotros-descripcion {
        padding-top: 3em;
    }

    .texto-nosotros a {
        margin-top: 20px;
        margin-bottom: 30px;
    }




    .plan-card3 {
    width: 400px; /* Ajustado ligeramente para permitir más en una fila */
    margin: 10px;
}



    .hero-section2{


        padding: 20px 0 20px 0;

    }

    .hero-section3 {
        padding: 20px 0 20px 0;
    }


    .resultados img {
        width: 20%;
    }
    .resultados {
        padding: 12px 0px;
    }

    .cta-left {
        padding: 3rem;
        color: var(--color-text-light);
        margin: 0 auto;
    }
    
    .cta-right {
        padding: 3rem;
        color: var(--color-text-light);
        margin: 0 auto;
    }
    .navbar {
        border-bottom: none;
    }

    .footer-descripcion{
        text-align: center;

        
    }
    .footer-descripcion img{
        text-align: center;

    }

 .navbar-nav .nav-link{
    margin-right: 0px;
}



.contact-info {
    padding-top: 40px;
}

.contact-info span{
    font-size: 20px;
}







   .navbar {
    background-color: transparent !important;
    transition: background-color 0.3s ease;
  }

  /* Navbar y menú desplegado con fondo semitransparente */

  /* Hace que el fondo abarque todo el navbar, incluido el logo */
  .navbar.navbar-expand-lg:has(.navbar-collapse.show) {
    background-color: rgba(9, 0, 64, 0.6) !important;
  }

  /* Texto e íconos blancos dentro del menú abierto */
  .navbar-collapse.show .nav-link,
  .navbar-collapse.show .contact-info span,
  .navbar-collapse.show .contact-info i {
    color: #ffffff !important;
  }

  /* Ícono hamburguesa blanco */
  .navbar-toggler {
    border-color: #ffffff !important;
  }





.hero-section {
    padding: 0px 0 100px 0;
}

.hero-section2 {
    padding: 0px 0 100px 0;
}

.hero-section3{
    padding: 0px 0 100px 0;
}



.hero-section5{
    padding: 0px 0 100px 0;
}

.container-fluid {
    padding-top: 10px;

}



.contacto2 {

    width: 90%;
}

.contacto2 h3{
    font-size: 22px;
}

.contacto2 img{
    
    width: 20%;
}






}



















/* --- Media Query para Dispositivos Móviles (Smartphone / <576px) --- */
@media (max-width: 576px) {

    .hero-content h1 {
        font-size: 20px; /* Tamaño pequeño para H1 en móvil */
    }

    .hero-content h2 {
        font-size: 36px; /* Tamaño adecuado para H2 en móvil */
    }

    .hero-content p {
        font-size: 16px; 
        margin-bottom: 25px;
    }

    .hero-content2 {
        padding: 0px; /* Menos espacio arriba en móvil */
    }


    .plan-card2{
        width: 300px;
    }


    .plan-card3 {
    /* Mantenemos el width, pero este será ignorado por Slick */
    width: 20px; 
    
    /* ... (deja el resto de los estilos, pero quita cualquier display: flex aquí) ... */
    display: flex; /* <-- Mantén esto si necesitas flex en la tarjeta interna, si no, quítalo */
    flex-direction: column; 
    margin: 10px;
}

/* Modifica el plans-container para que Slick funcione bien */
.plans-container2 {
    /* IMPORTANTE: Comenta o quita estas 3 líneas para que Slick funcione */
    /* display: flex; 
    justify-content: center; 
    flex-wrap: wrap; */ 
    
    gap: 25px; /* Esto no será usado por Slick, pero déjalo si lo usas en otros sitios */
    width: 90%;
}




   .footer-descripcion2{
        text-align: center;

        
    }


}