/* ---------------------------------------------------- */
/* 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
    ==========================================================================
    Define colores y tamaños para facilitar modificaciones futuras.
*/
:root {
    /* Colores */
    --color-texto-principal: #FFFFFF; /* Blanco para el texto */
    /* Simula el tono azulado de la imagen con una leve transparencia (70%) */
    --color-fondo-superpuesto: rgba(0, 188, 212, 0.7); 
    
    /* Tipografía */
    --fuente-principal: sans-serif; /* Cambia a la fuente de tu web si es necesario */
    --tamano-titulo: 2.5rem; 
    --tamano-subtitulo: 1.1rem; 
}

/* Reset básico para mejor consistencia */
body, h1, p {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--fuente-principal);
}

/* ==========================================================================
    ESTILOS DE LA SECCIÓN DE CONTACTO
    ==========================================================================
*/

.seccion-contacto {
    /* Altura mínima para que la imagen sea visible en todos los dispositivos */
    min-height: 350px; 
    
    /* Flexbox para centrar perfectamente el texto (horizontal y vertical) */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    text-align: center; 
    
    position: relative; /* Clave para posicionar la imagen y el overlay */
    overflow: hidden; 
    width: 100%; /* Ocupa todo el ancho de la pantalla */
}

/* Estilos para la imagen de fondo */
.seccion-contacto__fondo {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* **Clave para la responsividad:** La imagen cubre el área sin distorsionarse. */
    object-fit: cover; 
    z-index: 1; /* Fondo */
}

/* Capa de color/gradiente superpuesta (Overlay) */
.seccion-contacto__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-fondo-superpuesto); 
    z-index: 2; /* Encima de la imagen */
}

/* Contenedor del texto (título y subtítulo) */
.seccion-contacto__contenido {
    position: relative; 
    z-index: 3; /* Asegura que el texto esté visible sobre el overlay */
    padding: 20px; 
    max-width: 90%; 
}

/* Estilos para el título principal "Contáctanos" */
.seccion-contacto__titulo {
    font-size: var(--tamano-titulo);
    color: var(--color-texto-principal);
    font-weight: bold; 
    margin-bottom: 0.5rem; 
}

/* Estilos para el subtítulo/mensaje */
.seccion-contacto__subtitulo {
    font-size: var(--tamano-subtitulo);
    color: var(--color-texto-principal);
    font-weight: 300; 
}

/* ==========================================================================
    MEDIA QUERIES PARA RESPONSIVIDAD (Ajustes por tamaño de pantalla)
    ==========================================================================
*/
   
/* Móviles y Tablets pequeñas (Menor a 768px) */
@media (max-width: 768px) {
    :root {
        /* Reduce el tamaño del texto para móviles */
        --tamano-titulo: 2rem; 
        --tamano-subtitulo: 1rem;
    }

    .seccion-contacto {
        /* Reduce la altura en móviles si es necesario */
        min-height: 250px; 
    }
}

/* Pantallas muy grandes (Mayor a 1400px) */
@media (min-width: 1400px) {
    :root {
        /* Aumenta un poco el tamaño para escritorios grandes */
        --tamano-titulo: 3rem;
        --tamano-subtitulo: 1.2rem;
    }
}






































/* ==========================================================================
    VARIABLES Y ESTILOS BASE PARA CONTACTO (Tarjetas)
    ==========================================================================
*/
:root {
    /* Colores para las tarjetas */
    --color-principal-tarjeta: #00bcd4; /* Azul/Cian (para iconos y botones) */
    --color-texto-principal-tarjeta: #333;
    --color-texto-secundario-tarjeta: #666;
    --color-fondo-tarjeta: #fff;
    --color-sombra-tarjeta: rgba(0, 0, 0, 0.08);
}

/* Importar FontAwesome para los iconos (opcional si ya lo tienes) 
    Asegúrate de incluir esto en el <head> de tu HTML:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
*/
/* @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'); */


/* Contenedor principal para la sección */
.contacto-tarjetas-container {
    padding: 50px 20px;
    background-color: #f8f8f8; /* Fondo sutil para destacar las tarjetas */
}

/* Grid para las 4 tarjetas (Responsivo) */
.tarjetas-grid {
    display: grid;
    /* Por defecto, una columna en móviles */
    grid-template-columns: 1fr; 
    gap: 30px; /* Espacio entre tarjetas */
    max-width: 1200px; /* Ancho máximo del grid */
    margin: 0 auto; /* Centrar el grid */
}

/* Estilos de cada tarjeta de contacto */
.tarjeta-contacto {
    background-color: var(--color-fondo-tarjeta);
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    /* Borde sutil y sombra como en la imagen de referencia */
    border: 1px solid #eee;
    box-shadow: 0 4px 10px var(--color-sombra-tarjeta);
    transition: transform 0.3s ease;
}

.tarjeta-contacto:hover {
    /* Efecto sutil al pasar el ratón */
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px var(--color-sombra-tarjeta);
}

/* Iconos */
.icono-contacto {
    font-size: 2.5rem;
    color: var(--color-principal-tarjeta);
    margin-bottom: 15px;
}

/* Títulos de las tarjetas */
.tarjeta-titulo {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-texto-principal-tarjeta);
    margin-bottom: 5px;
}

/* Información de la tarjeta (número, email, etc.) */
.tarjeta-info {
    font-size: 0.95rem;
    color: var(--color-texto-secundario-tarjeta);
    margin-bottom: 25px;
}

/* Estilo general para los botones de contacto */
.btn-contacto {
    display: block; /* Ocupa todo el ancho de la tarjeta */
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none; /* Elimina el subrayado de los <a> */
    cursor: pointer;
    
    /* Colores del botón */
    background-color: var(--color-principal-tarjeta);
    color: var(--color-fondo-tarjeta); /* Texto blanco */
    
    transition: background-color 0.3s ease;
}

.btn-contacto:hover {
    background-color: #00a7b8; /* Tono ligeramente más oscuro al pasar el ratón */
}


/* ==========================================================================
    MEDIA QUERIES (Responsividad)
    ==========================================================================
*/

/* Tablets y Laptops pequeñas (768px a 1199px) */
@media (min-width: 768px) {
    .tarjetas-grid {
        /* Dos columnas en tabletas */
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Escritorios grandes (1200px y más) */
@media (min-width: 1200px) {
    .tarjetas-grid {
        /* Cuatro columnas en escritorios */
        grid-template-columns: repeat(4, 1fr); 
    }
}




































/* ==========================================================================
    VARIABLES Y ESTILOS BASE PARA LA SECCIÓN SOLICITUD + VENTAJAS
    ==========================================================================
*/
:root {
    /* Colores */
    --color-primary-cta: #34b8aa; /* Verde/Cian para el botón y acentos */
    --color-background-soft: #f8f8f8; /* Fondo de la sección */
    --color-card-background: #ffffff; /* Fondo de las tarjetas */
    --color-text-dark: #333333; /* Texto principal */
    --color-text-light: #666666; /* Texto secundario */
    --color-opcion-active: #eaf8f7; /* Fondo de la opción activa */
    --color-check-icon: #34b8aa; /* Color del check de las ventajas */
}

/* Contenedor principal de la sección */
.estudio-ventajas-section {
    background-color: var(--color-background-soft);
    padding: 60px 20px;
}

/* Contenedor que maneja el diseño de dos columnas */
.estudio-ventajas-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Por defecto, una sola columna para móviles */
    grid-template-columns: 1fr;
    gap: 40px;
}

/* ---------------------------------------------------- */
/* ESTILOS COLUMNA SOLICITUD (IZQUIERDA) */
/* ---------------------------------------------------- */
.columna-solicitud {
    background-color: var(--color-card-background);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.solicitud-titulo {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-text-dark);
    margin-bottom: 10px;
}

.solicitud-subtitulo {
    font-size: 0.95rem;
    color: var(--color-text-light);
    margin-bottom: 25px;
}

/* Estilos de las Opciones/Servicios (Telefonia, Luz, Seguridad) */
.opciones-servicio-group {
    margin-bottom: 30px;
    display: grid;
    gap: 10px;
}

.opcion-servicio {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    background-color: var(--color-card-background);
    transition: all 0.2s ease;
    cursor: pointer;
    background-color: var(--color-opcion-active);
    border-color: var(--color-primary-cta);
}

/* Estilo para la opción que está 'activa' o seleccionada */
/* .opcion-servicio.active {
    background-color: var(--color-opcion-active);
    border-color: var(--color-primary-cta);
}

.opcion-icono {
    font-size: 1.5rem;
    color: var(--color-primary-cta);
    margin-right: 15px;
}

.opcion-titulo {
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 2px;
}

.opcion-detalle {
    font-size: 0.85rem;
    color: var(--color-text-light);
} */

/* Estilo para el botón de 'Solicitar Estudio Ahora' */
.btn-estudio-ahora {
    width: 100%;
    padding: 15px;
    background-color: var(--color-primary-cta);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-estudio-ahora:hover {
    background-color: #2da398; /* Tono más oscuro al pasar el ratón */
}

/* ---------------------------------------------------- */
/* ESTILOS COLUMNA VENTAJAS (DERECHA) */
/* ---------------------------------------------------- */
.columna-ventajas {
    background-color: var(--color-card-background);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.ventajas-titulo {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-text-dark);
    margin-bottom: 25px;
}

/* Contenedor de cada ventaja */
.ventaja-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ventaja-item:last-child {
    border-bottom: none; /* Elimina el borde inferior del último item */
    padding-bottom: 0;
}

/* Icono de check */
.check-icono {
    font-size: 1.2rem;
    color: var(--color-check-icon);
    margin-right: 15px;
    margin-top: 3px; /* Alineación visual con el texto */
}

.ventaja-contenido {
    flex-grow: 1;
}

.ventaja-titulo-item {
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 3px;
}

.ventaja-detalle {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.4;
}


/* ==========================================================================
    MEDIA QUERIES (Responsividad)
    ==========================================================================
*/

/* Pantallas medianas y grandes (Tablets grandes y Escritorio) */
@media (min-width: 768px) {
    .estudio-ventajas-container {
        /* Dos columnas de igual ancho */
        grid-template-columns: 1fr 1fr; 
    }
}

































































/* 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;
    }
}