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

















/* Nuestros Servicios */


.header-servicios {
  background-color: #33bccc; /* Color turquesa de la imagen */
  color: #ffffff;
  padding: 60px 20px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.header-contenido {
  max-width: 800px;
  margin: 0 auto;
}

.header-servicios h1 {
  font-family: Arial, sans-serif;
  font-size: 48px;
  font-weight: bold;
  margin: 0 0 15px 0;
}

.header-servicios p {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  font-weight: normal;
}

/* Responsivo */
@media (max-width: 768px) {
  .header-servicios h1 {
    font-size: 32px;
  }
  .header-servicios p {
    font-size: 16px;
  }
}









/* P1 */

/* --- CONTENEDOR PRINCIPAL --- */
.serv-container {
    background-image: url(/resources-inicio/BG-azul.jpeg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 60px 20px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.simple-sin-problemas {
    max-width: 1250px;
    margin: 0 auto;
}

.titulo {
    text-align: center;
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #fff;
    margin-bottom: 80px;
    font-weight: 800;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

/* --- ESTILO DEL DIFUMINADO (GLASS-CARD) --- */
.glass-card {
    background: rgba(255, 255, 255, 0.05); /* Fondo blanco muy transparente */
    backdrop-filter: blur(15px);           /* Efecto de desenfoque del fondo */
    -webkit-backdrop-filter: blur(15px);    /* Compatibilidad para Safari */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil para definir la forma */
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* --- BLOQUES DE SERVICIO --- */
.servicio-block {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 50px;
    margin-bottom: 120px;
}

@media (min-width: 992px) {
    .servicio-block {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch; /* Para que la tarjeta de cristal y la imagen tengan alturas similares */
    }
    
    .servicio-block.reverse {
        flex-direction: row-reverse;
    }

    .servicio-texto {
        flex: 1;
        max-width: 550px; /* Ancho controlado de la tarjeta de cristal */
    }

    .servicio-imagen {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- TEXTOS --- */
.header-servicio {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.header-servicio .icono {
    font-size: 2.2rem;
    color: #14c8cb;
}

.header-servicio h2 {
    font-size: 1.8rem;
    color: #fff;
    margin: 0;
    font-weight: 700;
}

.descripcion {
    font-size: 1.1rem;
    color: #f0f0f0;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* --- ACORDEÓN --- */
.acordeon-item {
    margin-bottom: 5px;
}

.toggle-check {
    display: none;
}

.acordeon-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s;
}

.acordeon-label:hover {
    background: rgba(20, 200, 203, 0.1);
}

.acordeon-label::after {
    content: '▾';
    transition: transform 0.3s;
}

.acordeon-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: rgba(0,0,0,0.2);
    border-radius: 0 0 10px 10px;
}

.acordeon-content ul {
    list-style: none;
    padding: 20px;
    margin: 0;
}

.acordeon-content li {
    color: #e0e0e0;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.toggle-check:checked + .acordeon-label::after {
    transform: rotate(180deg);
}

.toggle-check:checked + .acordeon-label + .acordeon-content {
    max-height: 600px;
}

/* --- BOTÓN SOLICITAR --- */
.btn-solicitar {
    display: inline-block;
    margin-top: 30px;
    padding: 14px 40px;
    background-color: #14c8cb;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s;
    text-align: center;
}

.btn-solicitar:hover {
    background-color: #0fb1b4;
    box-shadow: 0 5px 15px rgba(20, 200, 203, 0.4);
    transform: translateY(-2px);
}

/* --- IMÁGENES --- */
.servicio-imagen img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    transition: transform 0.4s;
}

.servicio-imagen img:hover {
    transform: scale(1.02);
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 768px) {
    .glass-card {
        padding: 25px;
        margin: 0 10px;
    }
    
    .titulo {
        margin-bottom: 40px;
    }
}




































/* p2 */

/*
 * ========================================
 * SECCIÓN GENERAL Y TEXTOS
 * ========================================
 * COMENTARIO: Estilos para la sección principal.
 */
.simple-sin-problemas-2 {
    /* Fondo blanco como en la imagen */
    background-color: #ffffff; 
    width: 100vw; /* Ocupa todo el ancho de la ventana */
    height: auto;
    padding: 60px 20px 80px; /* Espaciado interno: arriba, lados, abajo */
    text-align: center;
    font-family: Arial, sans-serif;
    color: #000;
}

.titulo-secundario {
    font-size: clamp(2rem, 5vw, 3.5rem); /* Título responsivo */
    margin-bottom: 30px;
    font-weight: bold;
}

.parrafo-superior {
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    max-width: 900px; /* Ancho máximo para el texto */
    margin: 0 auto 40px;
    line-height: 1.6;
}

.frase-inferior {
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    font-weight: bold;
    /* Espacio antes de la imagen de beneficios */
    margin-bottom: 60px; 
}


/*
 * ========================================
 * ESTILOS PARA LA IMAGEN DE BENEFICIOS
 * ========================================
 */
.contenedor-imagen-beneficios {
    /* COMENTARIO: Centrar la imagen en la página y limitar su tamaño máximo */
    max-width: 1000px; 
    margin: 0 auto;
    padding: 0 10px; /* Padding lateral para que la imagen no toque los bordes en móvil */
}

.imagen-beneficios-responsiva {
    /* COMENTARIO: La clave de la responsividad. La imagen ocupa el 100% del contenedor. */
    width: 100%; 
    height: auto;
    display: block;
    
    /* COMENTARIO: Efecto HOVER (Scale 1.05 con transición suave) */
    transition: transform 0.4s ease-in-out; 
    cursor: pointer;
}

.imagen-beneficios-responsiva:hover {
    /* Usamos un escalado sutil (1.05) porque la imagen es muy ancha */
    transform: scale(1.05); 
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* COMENTARIO: Media Query para ajustar el hover en pantallas pequeñas */
@media (max-width: 650px) {
     .imagen-beneficios-responsiva:hover {
        /* Escalado aún más sutil en móviles */
        transform: scale(1.03); 
    }
}
















































/* p4 */


/*
 * ========================================
 * SECCIÓN GENERAL Y TEXTOS
 * ========================================
 */
.soluciones-kalma {
    width: 100%; 
    font-family: Arial, sans-serif;
    color: #fff;
}

.contenedor-fondo {
    /* * CAMBIO: Fondo turquesa (#20a0b6) reemplazado por azul oscuro de la nueva imagen 
     */
    background: linear-gradient(45deg, #09809b, #056479, #034d5e, #023b48, #00252c, #001a28); /* Azul oscuro o similar a la imagen */
    
    /* * CAMBIO: Aumentamos el padding vertical (top/bottom) para hacer la sección más larga.
     */
    padding: 70px 20px 100px; /* Aumentado de 40px a 70px arriba y 100px abajo */
    
    text-align: center;
    max-width: 100vw;
    margin: 0 auto;
}

/* Título principal (Con Soluciones con Kalma sí es posible) */
.titulo-principal {
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: 20px;
    font-weight: bold;
}

/* Subtítulo (El secreto está en...) */
.subtitulo {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    max-width: 800px;
    margin: 0 auto 30px;
    line-height: 1.5;
}

/* Frase destacada (¡Sin experiencia ni inversión!) */
.frase-destacada {
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    font-weight: bold;
    margin-bottom: 40px;
}

/* Texto inferior (Te proporcionamos un catálogo...) */
.texto-inferior {
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 500;
    
    /* * CAMBIO: Aumentamos el margen inferior para alargar el espacio antes del carrusel 
     */
    margin-bottom: 70px; /* Aumentado de 50px a 70px */
}


/*
 * ========================================
 * CARRUSEL DE MARCAS Y ANIMACIÓN
 * ========================================
 */

/* Contenedor visible del carrusel */
.carrusel-marcas {
    overflow: hidden;
    width: 100%;
    
    /* * CAMBIO: Aumentamos el padding vertical para hacer el área del carrusel más larga.
     */
    padding: 30px 0; /* Aumentado de 20px a 30px */
}

/* El 'track' contiene todas las imágenes (originales + duplicadas) y es el que se anima */
.carrusel-track {
    display: flex;
    width: 200%; 
    animation: scroll-marcas 40s linear infinite;
}

/* Detener animación al pasar el ratón (opcional) */
.carrusel-marcas:hover .carrusel-track {
    animation-play-state: paused;
}

/* Cada logo de marca */
.marca-item {
    width: 10%; 
    flex-shrink: 0;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.marca-item img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
    .marca-item {
        width: 16.66%; 
        padding: 0 5px;
    }
    
    .carrusel-track {
        animation-duration: 50s;
    }
}

/* Definición de la animación de desplazamiento (SIN CAMBIOS) */
@keyframes scroll-marcas {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); 
    }
}
























































/* 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: #fff;
    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: rgb(0, 42, 53);
    font-size: clamp(2em, 5vw, 3.5em); /* Responsivo */
    margin-bottom: 20px;
    font-weight: 700;
}

.cta-subtitle {
    color: rgb(0, 42, 53);
    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 */
}

/* ==========================================================================
    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);
        box-shadow: 0 0 0 0 rgba(77, 192, 181, 0.7); /* Sombra inicial (transparente) */
    }
    50% {
        /* Estado intermedio: ligeramente más grande, dando el efecto de latido */
        transform: scale(1.03); 
        /* Un pulso sutil con el color del botón (var(--color-cta-bg) o similar) */
        box-shadow: 0 0 0 10px rgba(77, 192, 181, 0); 
    }
    100% {
        /* Vuelve al estado inicial */
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(77, 192, 181, 0.7); 
    }
}

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