/* ---------------------------------------------------- */
/* Variables CSS para fácil edición de colores y tamaños */
/* ---------------------------------------------------- */
:root {
    --color-principal: #ffffff;       /* Color de fondo de la barra */
    --color-texto: #fff;           /* Color del texto de los enlaces */
    --color-acento: #007bff;       /* Color para el hover */
    --color-fondo-pagina: #f4f4f4; /* Color de fondo del body */
    --altura-nav: 60px;            /* Altura fija de la barra */
}

/* ---------------------------------------------------- */
/* Estilos Generales y Resets */
/* ---------------------------------------------------- */
* {
    box-sizing: border-box; /* Padding y border incluidos en el ancho/alto */
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--color-fondo-pagina);
}

/* ---------------------------------------------------- */
/* Estilos del Navbar Principal */
/* ---------------------------------------------------- */
.navbar {
    background-color: #000;
    color: var(--color-texto);
    height: var(--altura-nav);
    width: 100vw;
    display: flex;
    justify-content: space-between; /* Separa logo de los enlaces */
    align-items: center;
    padding: 0 20px;
    position: sticky; /* La barra se mantiene arriba */
    top: 0;
    z-index: 1000;
}

/* 1. Logo */
.logo {
    font-size: 1.5em; 
    font-weight: bold;
    text-decoration: none;
    color: #1bb0c7;


    /* MODIFICACIÓN: Usa Flexbox para alinear la imagen y el texto */
    display: flex; /* Convierte en contenedor flexible */
    align-items: center; /* Centra verticalmente la imagen y el texto */
}

.logo:hover {
    color: #00ddff;
}
/* NUEVA REGLA: Estilo para la imagen del logo */
.logo-img {
    /* 1. Responsividad y ajuste al texto: La altura será la misma que el texto. */
    height: 2.8em; /* Toma la altura de la fuente (1.5em de .logo) */
    width: auto; /* Mantiene la proporción */
    
    /* 2. Alineación y espaciado */
    vertical-align: middle; /* Alinea el centro de la imagen con el centro del texto */
    margin-right: 8px; /* Espacio entre el logo y el texto */
}

/* 2. Enlaces del menú principal */
.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li a {
    /* color: #1e1e1e; */
    color: #eaecff;
    font-weight: 550;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    font-size: 1em; 
    transition: background-color 0.3s;
}

.nav-links li a:hover {
    background-color: #00ddff;
    color: #1e1e1e;
    border-radius: 5px;
    font-weight: 550;
}
.nav-links li .inicio {
    /* color: #0091a8; */
    color: #eaecff;
    font-weight: 550;
}
.nav-links li .inicio:hover{
    color: #003a43;
}

/* Botón de menú hamburguesa (inicialmente oculto) */
.menu-toggle {
    display: none; /* Oculto en escritorio */
    font-size: 30px;
    cursor: pointer;
    line-height: var(--altura-nav); /* Centra el icono verticalmente */
    user-select: none;
    color: #ffffff;
}

/* Oculta la "x" al inicio */
.menu-toggle .close-icon {
    display: none; 
}

/* ---------------------------------------------------- */
/* 3. Menú Desplegable (para móvil/tablet) */
/* ---------------------------------------------------- */
.dropdown-menu {
    /* Inicialmente oculto por defecto */
    display: none; 
    /* position: absolute; */
    top: var(--altura-nav); /* Empieza debajo del navbar */
    left: 0;
    width: 100vw; /* Ancho completo */
    /* background-color: var(--color-principal);  */
    background-color: #000; 
    box-shadow: 0 8px 16px rgba(28, 28, 28, 0.2);
    list-style: none;
    z-index: 999;
    position: sticky;
}

/* Clase que JavaScript añade para MOSTRAR el menú */
.dropdown-menu.open {
    display: block;
    /* La altura se ajusta automáticamente al contenido */
}

/* 3. Botones del desplegable */
.dropdown-menu li {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-menu li a {
    display: block;
    width: 100%;
    padding: 15px;
    text-decoration: none;
    color: #0598b1;
    font-size: 1.1em;
}

.dropdown-menu li a:hover {
    background-color: #000;
}

/* ---------------------------------------------------- */
/* Media Query: RESPONSIVE - PANTALLAS PEQUEÑAS (ej. < 768px) */
/* ---------------------------------------------------- */
@media (max-width: 768px) {
    
    /* 3. Oculta los enlaces principales (Servicios, Compañías, Contacto) */
    .nav-links li:not(:first-child) {
        /* Oculta todos los <li> EXCEPTO el primero (Inicio) */
        display: none;
    }
    /* NOTA: Para este ejemplo se están ocultando los enlaces en el <ul>.
       Si quieres ocultar solo los tres mencionados, usa la clase 'nav-desktop-only'
       que está en el HTML, y ocúltalos aquí: */
    /* .nav-desktop-only { display: none; } */
    
    /* Muestra el botón de menú hamburguesa */
    .menu-toggle {
        display: block; 
    }
    
    /* Ajustes generales para móvil */
    .navbar {
        padding: 0 15px; 
    }

    /* Dentro de @media (max-width: 768px) */
    .logo {
        font-size: 1.3em;
        /* (Opcional, si no lo hiciste en la regla general de arriba) */
        display: flex; 
        align-items: center; 
    }
    /* ¡La imagen se ajusta automáticamente! (height: 1.3em) */
    .logo-img {
        height: 2.5em; /* Esto sobrescribe el 1.5em de arriba, ajustándose al nuevo font-size */
    }
}



































/* ==========================================================================
    VARIABLES Y ESTILOS BASE PARA LA SECCIÓN DE COMPAÑÍAS COLABORADORAS
    ==========================================================================
*/
:root {
    /* Colores del degradado (replicando la imagen de referencia) */
    --color-gradiente-inicio: #34b8aa; /* Verde/Cian claro */
    --color-gradiente-fin: #30b1c0; /* Cian/Azul oscuro */
    --color-texto-banner: #FFFFFF; /* Texto siempre blanco */
}

/* Contenedor principal del banner */
.colaboradoras-banner {
    /* Altura mínima para asegurar que el banner se vea bien, responsiva */
    min-height: 150px; 
    width: 100%;
    
    /* Configura el fondo con un degradado lineal (de izquierda a derecha) */
    background: linear-gradient(90deg, var(--color-gradiente-inicio) 0%, var(--color-gradiente-fin) 100%);
    
    /* Usa Flexbox para centrar el contenido perfectamente */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    text-align: center; /* Centra el texto dentro del contenedor de contenido */
    
    padding: 40px 20px; /* Padding para evitar que el texto toque los bordes */
}

/* Contenedor del Título y Subtítulo */
.colaboradoras-content {
    max-width: 800px; /* Limita el ancho del texto en pantallas muy grandes */
}

/* Estilos del Título Principal */
.colaboradoras-title {
    font-size: clamp(2rem, 5vw, 3rem); /* Responsivo: 2rem en móvil, hasta 3rem en escritorio */
    font-weight: bold;
    color: var(--color-texto-banner);
    margin-bottom: 10px;
    line-height: 1.2;
}

/* Estilos del Subtítulo/Descripción */
.colaboradoras-subtitle {
    font-size: clamp(0.95rem, 2vw, 1.2rem); /* Responsivo: 0.95rem en móvil, hasta 1.2rem en escritorio */
    color: var(--color-texto-banner);
    font-weight: 300; /* Texto más ligero */
    line-height: 1.5;
    /* Ancho máximo para que no se extienda demasiado en una sola línea */
    max-width: 600px; 
    margin: 0 auto;
}

/* ==========================================================================
    MEDIA QUERIES (Ajustes responsivos, aunque el diseño ya es muy flexible)
    ==========================================================================
*/

/* Pantallas pequeñas (Móviles) */
@media (max-width: 576px) {
    .colaboradoras-banner {
        /* Reduce la altura mínima en móviles si quieres un banner más compacto */
        min-height: 200px; 
    }
}







































/* ==========================================================================
    VARIABLES Y ESTILOS BASE PARA LA SECCIÓN DE OPERADORAS
    ==========================================================================
*/
:root {
    --color-primary-accent: #34b8aa; /* Cian/Turquesa para iconos y bordes */
    --color-background-soft: #f8f8f8;
    --color-text-dark: #333333;
    --color-text-light: #666666;
    --color-card-border: #e0e0e0;
    --color-accordion-header: #f8f8f8; /* Fondo sutil para las barras del acordeón */
}

.operadoras-section {
    padding: 20px;
    background-color: var(--color-background-soft);
    display: flex;
    justify-content: center;
}

/* Contenedor principal (la "tarjeta" grande) */
.operadoras-card {
    max-width: 1000px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Importante para la imagen redondeada */
}

/* ---------------------------------------------------- */
/* CABECERA (IMAGEN + FADE) */
/* ---------------------------------------------------- */
.card-header-image {
    position: relative;
    /* Altura fija para la imagen, ajusta si es necesario */
    height: 600px; 
}

.header-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Recorta la imagen para que no sobresalga */
}

.header-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el área */
    display: block;
}

/* Capa de degradado (CLAVE PARA EL EFECTO FADE-OUT BLANCO) */
.header-image-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cubre toda el área para un degradado suave */
    /* Degradado de transparente (arriba) a blanco opaco (abajo) */
    background: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0) 75%, /* Transparente en la parte superior */
        rgba(255, 255, 255, 1) 80% /* Blanco opaco en la parte inferior */
    );
    z-index: 2;
}

/* Bloque del Título (Superpuesto en el área blanca de la imagen) */
.servicio-titulo-bloque {
    position: absolute;
    bottom: 0; /* Lo coloca en la parte inferior de la imagen */
    left: 0;
    z-index: 3; /* Sobre el fade */
    display: flex;
    align-items: center;
    padding: 0 40px 20px 40px; /* Padding para evitar que toque los bordes */
    margin: 50px 0 0;
}

.servicio-icono {
    font-size: 1.8rem;
    color: var(--color-primary-accent);
    margin: 5px 15px 0 0;
}

.servicio-titulo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text-dark);
    margin: 0;
}

.servicio-subtitulo {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin: 0;
}

/* ---------------------------------------------------- */
/* CONTENIDO (ACORDEÓN Y TARJETAS DE OPERADORAS) */
/* ---------------------------------------------------- */
.card-body {
    padding: 20px 40px 40px 40px;
    /* Ajusta el padding para que no interfiera con el bloque de título */
    padding-top: 20px; 
}

/* Estilo de la barra del Acordeón (Desplegable) */
.acordeon-item {
    border: 1px solid var(--color-card-border);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.acordeon-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--color-accordion-header);
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-text-dark);
    /* Borde inferior para separar visualmente */
    border-bottom: 1px solid var(--color-card-border);
    transition: background-color 0.2s;
}

/* Efecto hover en la barra */
.acordeon-header:hover {
    background-color: #f0f0f0;
}

.acordeon-icon {
    color: var(--color-primary-accent);
    margin-right: 10px;
}

.acordeon-label {
    flex-grow: 1; /* Ocupa el espacio central */
}

.flecha-icon {
    /* Icono de flecha a la derecha */
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

/* Estado activo: rota la flecha 180 grados */
.acordeon-header.active .flecha-icon {
    transform: rotate(180deg);
}

/* Contenido del Acordeón (inicialmente oculto) */
.acordeon-content {
    /* Clave: Ocultar con altura 0 y transición suave */
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Transición suave para desplegar */
    padding: 0 20px;
}

/* Clase añadida por JS para mostrar el contenido */
.acordeon-content.show {
    /* El valor debe ser lo suficientemente grande para contener todo el contenido */
    max-height: 1000px; 
    padding: 20px; /* Aplica el padding solo cuando se muestre */
}

/* Diseño de las 3 tarjetas de operadoras */
.operadoras-grid {
    display: grid;
    /* 1 columna en móvil, 3 en escritorio */
    grid-template-columns: 1fr; 
    gap: 20px;
    padding: 10px 0;
}

.operadora-card {
    border: 1px solid var(--color-card-border);
    border-radius: 8px;
    padding: 20px;
    transition: box-shadow 0.3s;
}

.operadora-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.operadora-nombre {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    /* color: var(--color-primary-accent); */
    margin-bottom: 5px;
}

.operadora-eslogan {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 15px;
    height: 36px; /* Altura fija para el eslogan para mantener el grid uniforme */
}

/* Lista de ventajas */
.operadora-lista-ventajas {
    list-style: none;
    padding: 0;
    margin: 0;
}

.operadora-lista-ventajas li {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: var(--color-text-dark);
    margin-bottom: 8px;
}

.lista-check-icon {
    color: var(--color-primary-accent);
    font-size: 0.9rem;
    margin-right: 8px;
    
}

/* ==========================================================================
    MEDIA QUERIES
    ==========================================================================
*/
/* Tablets y Escritorios */
@media (min-width: 768px) {
    .operadoras-grid {
        /* Tres columnas para tablets y escritorio */
        grid-template-columns: repeat(3, 1fr); 
    }

    .header-image-wrapper .ftth {
        background-size: cover;
        background-position: left;
    }
}

/* Escritorios grandes */
@media (min-width: 1200px) {
    .card-body {
        /* Aumenta el padding en pantallas grandes si es necesario */
        padding: 30px 60px 60px 60px;
    }
}







/* ==========================================================================
    ESTILOS ADICIONALES PARA LA SECCIÓN DE ENERGÍA
    ==========================================================================
*/

/* Media Query para el diseño de 5 tarjetas (Energía) */
@media (min-width: 768px) {
    /* Asegura que el grid de las tarjetas se vea bien. 
       Como hay 5 tarjetas, la última columna quedará vacía.
    */
    .energia-section .operadoras-grid {
        grid-template-columns: repeat(3, 1fr); 
    }
}

/* Estilo para la tarjeta vacía si hay un número impar de ítems (como 5) */
.operadora-card.empty-card {
    /* Hace que la sexta celda del grid se vea invisible, manteniendo la estructura */
    border: none;
    box-shadow: none;
    background-color: transparent;
    padding: 0;
}













































/* FORMULARIOS DE CONTACTO */









/* ---------------------------------------------------- */
/* Variables para la Sección CTA y Modal del FORMULARIO*/
/* ---------------------------------------------------- */
:root {
    /* ... Variables anteriores ... */
    --color-cta-bg: #4DC0B5;        /* Color turquesa de fondo de la CTA (Primera imagen) */
    --color-cta-text: #fff;
    --color-modal-bg: #fff;
    --color-modal-border: #eee;
    --color-form-primary: #007bff;   /* Azul para el acento del formulario */
    --color-form-button: #4DC0B5;    /* Verde/Turquesa del botón del formulario */
}

/* ---------------------------------------------------- */
/* 5. y 6. Estilos de la Sección CTA (Empieza a ahorrar hoy mismo) */
/* ---------------------------------------------------- */

.cta-section {
    /* 5. Altura: 50 a 70vh, y 100vw */
    min-height: 50vh; 
    width: 100vw;
    background-color: var(--color-cta-bg);
    padding: 60px 20px;
    
    /* Centrado de contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.cta-content {
    max-width: 800px;
    padding: 20px 0px;
}

.cta-title {
    color: var(--color-cta-text);
    font-size: clamp(2em, 5vw, 3.5em); /* Responsivo */
    margin-bottom: 20px;
    font-weight: 700;
}

.cta-subtitle {
    color: var(--color-cta-text);
    font-size: clamp(1em, 2vw, 1.4em); /* Responsivo */
    margin-bottom: 40px;
    line-height: 1.6;
}

/* ---------------------------------------------------- */
/* Estilos del Botón CTA (Reutiliza .btn) */
/* ---------------------------------------------------- */

/* ---------------------------------------------------- */
/* Estilos del Botón CTA (Reutiliza .btn) */
/* ---------------------------------------------------- */
/* ==========================================================================
    ANIMACIÓN DE LATIDO PARA EL BOTÓN CTA (Solicita tu Estudio Gratuito)
    ==========================================================================
*/

/* 1. Define la animación usando @keyframes */
@keyframes pulse {
    0% {
        /* Estado inicial: tamaño normal */
        transform: scale(1);
        /* Usa el color del botón (52, 184, 170) para la sombra que se desvanece */
        box-shadow: 0 0 0 0 rgba(52, 184, 170, 0.7); 
    }
    50% {
        /* Estado intermedio: ligeramente más grande (el latido) */
        transform: scale(1.03); 
        /* Sombra pulsante que se extiende y se hace transparente */
        box-shadow: 0 0 0 10px rgba(52, 184, 170, 0); 
    }
    100% {
        /* Vuelve al estado inicial */
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(52, 184, 170, 0.7); 
    }
}

/* 2. Estilos y Aplicación de la Animación al Botón .btn-cta */
.btn-cta {
    /* Mantenemos el estilo base de .btn */
    background-color: rgb(52, 184, 170);
    /* NOTA: Revisar si '--color-cta-text' está definido. Asumo que es blanco. */
    border: 2px solid var(--color-cta-text); 
    color: var(--color-cta-text);
    padding: 18px 40px;
    font-size: 1.1em;
    
    /* Propiedades necesarias para la animación de escala/transformación */
    display: inline-block; 
    
    /* Configuración de la animación: */
    animation: pulse 2s infinite ease-in-out; 
    /* Transición suave para cualquier otra interacción (ej. hover) */
    transition: all 0.3s ease-in-out; 
}


.btn-cta:hover {
    /* Desactivar o modificar la animación en hover es opcional, 
       pero el color de fondo debe cambiar */
    background-color: rgba(255, 255, 255, 0.9);     
    color: rgb(38, 159, 147);
    
    /* Opcional: Pausar la animación al hacer hover si quieres */
    /* animation-play-state: paused; */
}


/* ---------------------------------------------------- */
/* 2. Estilos del MODAL (POP-UP) */
/* ---------------------------------------------------- */

.modal {
    /* Inicialmente oculto */
    display: none; 
    position: fixed; /* Fijo sobre todo */
    z-index: 2000; /* Asegura que esté por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Scroll si el contenido es largo */
    background-color: rgba(0,0,0,0.5); /* Fondo semitransparente oscuro */
    padding-top: 50px; 
}

/* Contenido del Modal (la tarjeta del formulario) */
.modal-content {
    background-color: var(--color-modal-bg);
    margin: 5% auto; /* Centrado en la pantalla (5% de margen superior/inferior) */
    padding: 30px;
    border: 1px solid var(--color-modal-border);
    border-radius: 10px;
    position: relative;
    max-width: 500px; /* Ancho máximo para escritorio */
    width: 90%; /* Ancho responsivo */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Botón de Cerrar (la "x") */
.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close-btn:hover,
.close-btn:focus {
    color: #000;
    text-decoration: none;
}

/* ---------------------------------------------------- */
/* Estilos del Formulario dentro del Modal */
/* ---------------------------------------------------- */

.modal-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.modal-title {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 5px;
}

.modal-description {
    font-size: 0.9em;
    color: #666;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 0.95em;
}

/* Estilo de los campos de texto/teléfono */
input[type="text"], 
input[type="tel"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    /* Efecto de foco similar al de la referencia */
    transition: border-color 0.3s ease;
}

input[type="text"]:focus, 
input[type="tel"]:focus {
    border-color: var(--color-form-primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--color-form-primary);
}

/* Estilos para los Radio Buttons (Servicios de interés) */
.service-group label {
    margin-bottom: 15px;
}

.radio-option {
    margin-bottom: 10px;
    /* Alineación de radio y texto */
    display: flex; 
    align-items: center;
}

.radio-option input[type="radio"] {
    /* Ocultamos el radio por defecto si queremos un diseño custom, pero aquí lo dejamos simple */
    margin-right: 10px;
    transform: scale(1.1); /* Ligeramente más grande */
}

/* Estilo del Botón de Envío del Formulario */
.btn-submit {
    /* Reutilizamos los estilos base de .btn */
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    background-color: var(--color-form-button);
    border: none;
    color: var(--color-cta-text);
    cursor: pointer;
    margin-top: 15px;
}

.btn-submit:hover {
    background-color: #36a79b;
    transform: none; /* Desactivamos el transform del .btn base */
}

/* ---------------------------------------------------- */
/* Media Query: AJUSTE DEL MODAL EN MÓVIL (ej. < 400px) */
/* ---------------------------------------------------- */
@media (max-width: 400px) {
    /* El modal ocupa más espacio vertical en pantallas muy pequeñas */
    .modal-content {
        margin: 10% auto;
        padding: 20px;
        width: 95%;
    }
}

































/* ---------------------------------------------------- */
/* Variables CSS para el floating action button (Chat Flotante) */
/* ---------------------------------------------------- */
:root {
    /* ... Variables anteriores ... */
    --fab-size: 60px;               /* Tamaño del botón flotante */
    --fab-color: #4DC0B5;           /* Color del botón flotante (Turquesa) */
    --modal-chat-width: 300px;      /* Ancho fijo para el modal de chat */
    --color-btn-whatsapp: #007bff;  /* Azul para el botón Whatsapp */
    --color-btn-email: #4DC0B5;     /* Turquesa para el botón Email */
}

/* ---------------------------------------------------- */
/* 1. Botón Flotante (FAB) */
/* ---------------------------------------------------- */

.fab-btn {
    position: fixed; /* Fijo, no se mueve con el scroll */
    right: 20px;     /* Distancia de la derecha */
    bottom: 20px;    /* Distancia de la parte inferior */
    
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%; /* Lo hace redondo */
    background-color: var(--fab-color);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 1500; /* Alto z-index para que esté sobre todo */
}

.fab-btn:hover {
    background-color: #36a79b; /* Tono más oscuro al pasar el ratón */
    transform: scale(1.05);
}

.fab-btn .material-icons {
    font-size: 28px;
}

/* El botón de cerrar (la 'X') se muestra cuando se oculta el de 'chat' */
.fab-close-btn {
    display: none; 
    /* El JS se encargará de mostrar este y ocultar el otro */
}

/* ---------------------------------------------------- */
/* 2. Modal del Asistente Virtual (Pop-up de Chat) */
/* ---------------------------------------------------- */

.chat-modal {
    display: none; /* Inicialmente oculto */
    position: fixed;
    /* Colocación: justo por encima del botón flotante */
    right: 20px;
    bottom: calc(20px + var(--fab-size) + 15px); /* 15px de separación del FAB */
    z-index: 1500;
}

.chat-modal-content {
    background-color: white;
    /* 2. Ancho: ocupa menos de la mitad del vw. Usamos un ancho fijo que funciona bien en móvil. */
    width: var(--modal-chat-width); 
    max-width: 90vw; /* Asegura que no se salga de la pantalla en móvil */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

.chat-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.chat-modal-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
}

.close-chat-btn {
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.close-chat-btn:hover {
    color: #333;
}

.chat-greeting {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 20px;
}

/* Contenedor de los dos botones (Whatsapp y Email) */
.chat-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

/* 3. Estilos de los botones del modal (reutiliza .btn) */
.btn-chat {
    /* Sobreescribe estilos base si es necesario, pero mantiene la clase .btn */
    text-align: center;
    padding: 12px;
    font-size: 1em;
    font-weight: 500;
    border: none;
    color: white;
}

.btn-whatsapp {
    background-color: var(--color-btn-whatsapp);
}

.btn-email {
    background-color: var(--color-btn-email);
}

.btn-whatsapp:hover {
    background-color: #0069d9;
    transform: none;
}

.btn-email:hover {
    background-color: #36a79b;
    transform: none;
}

.chat-footer-text {
    font-size: 0.8em;
    color: #777;
    text-align: center;
}


/* ---------------------------------------------------- */
/* 4. Media Query: RESPONSIVE - Móviles (ajusta la posición del FAB) */
/* ---------------------------------------------------- */
@media (max-width: 600px) {
    /* Asegura que el FAB y el Modal no se peguen a la esquina en móviles */
    .fab-btn {
        right: 15px;
        bottom: 15px;
        width: 50px; /* Un poco más pequeño */
        height: 50px;
    }
    .fab-btn .material-icons {
        font-size: 24px;
    }
    
    /* Reposiciona el modal en móvil */
    .chat-modal {
        right: 15px;
        bottom: calc(15px + 50px + 10px); 
    }

    /* Permite que el modal ocupe más ancho si la pantalla es muy pequeña */
    .chat-modal-content {
        width: 280px;
    }
}