/* ---------------------------------------------------- */
/* 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: #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: #eaecff;
    font-size: 1.1em;
    font-weight: 550;
}

.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 CSS ADICIONALES para la sección Hero */
/* ---------------------------------------------------- */
:root {
    /* ... Variables anteriores ... */
    --color-hero-bg: #00796B;       /* Verde oscuro/teal para el fondo temporal (similar al de la imagen) */
    --color-btn-primary: #4DC0B5;    /* Verde claro del botón 1 */
    --color-btn-secondary: #007bff;  /* Azul para el botón 2 (puedes cambiarlo) */
    --color-btn-text: #fff;         /* Color del texto de los botones */
    --color-hero-text: #fff;        /* Color del texto principal */
}

/* ---------------------------------------------------- */
/* 4. y 5. Estilos de la Sección de Héroe (100vh Responsiva) */
/* ---------------------------------------------------- */

.hero-section {
    /* Requisitos: 100% del ancho y 100% del alto de la ventana */
    width: 100vw;
    height: 95vh;
    
    /* Configuración Flexbox para centrar todo el contenido */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    
    /* Fondo temporal (1. Fondo de un verde parecido) */
    background-image: url(/resources-inicio/BG-azul.jpeg); 
    background-color: var(--color-hero-bg);
    background-size: cover;
    background-position: center;
    
    /* Necesario para posicionar el contenido y el overlay (fondo de imagen) */
    position: relative;
    text-align: center;
    overflow: hidden; /* Importante para que no haya barras de scroll innecesarias */
}

/* Estilos para el fondo de imagen (cuando la agregues) */
/* Usa esta clase para el <img> o para el background-image */
.hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;        
    background-image: url(/ResoursesInicio/webKalma1.png); 
    /* Por ejemplo, para una imagen de fondo: 
    background-image: url('ruta/a/tu/imagen.jpg'); 
    background-size: cover; 
    background-position: center; */
    /* Aquí se agregaría el color del fondo temporal mientras no hay imagen */
    /* background-color: var(--color-hero-bg);  */
    opacity: 1; /* Puedes reducir la opacidad si pones una imagen muy intensa */
    z-index: 1;
}

/* ---------------------------------------------------- */
/* 2. y 5. Estilos del Texto (Responsivo) */
/* ---------------------------------------------------- */

.hero-content {
    /* Mantiene el contenido por encima del fondo/overlay */
    position: relative;
    z-index: 2; 
    padding: 20px; /* Padding horizontal para evitar que el texto toque los bordes en móvil */
    background: rgba(0, 44, 60, 0.3);
    border-radius: 30px;
    backdrop-filter: blur(10px);
}

.hero-title {
    color: var(--color-hero-text);
    /* 5. Ajuste de tamaño de fuente: usa unidades relativas (vw, viewport width) */
    /* Tamaño base grande, que escala con la ventana */
    font-size: 5vw; 
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-subtitle {
    color: var(--color-hero-text);
    /* Ajuste de tamaño de fuente responsivo */
    font-size: 1.8vw; 
    margin-bottom: 40px;
    font-weight: 300;
}

/* ---------------------------------------------------- */
/* 1. Estilos de los Botones */
/* ---------------------------------------------------- */

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacio entre los botones */
}

.btn {
    text-decoration: none;
    color: var(--color-btn-text);
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: bold;
    /* Efecto de transición para un hover suave */
    transition: background-color 0.3s ease, transform 0.2s ease;
    
    /* 5. Ajuste de tamaño de fuente responsivo para los botones */
    font-size: clamp(0.8em, 1.2vw, 1em); 
    /* clamp(MÍN, PREFERIDO (responsivo), MÁX) asegura que la fuente no sea ni muy pequeña ni muy grande */
}

.btn-primary {
    background-color: var(--color-btn-primary); /* Verde claro */
    border: 2px solid var(--color-btn-primary);
}

.btn-secondary {
    background-color: transparent; /* Fondo transparente */
    border: 2px solid var(--color-btn-primary); /* Borde con el color primario */
}

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

.btn-secondary:hover {
    background-color: var(--color-btn-primary); /* Se llena de color al pasar el ratón */
    transform: translateY(-2px);
}

/* ---------------------------------------------------- */
/* Media Query: RESPONSIVE - AJUSTES PARA MÓVILES (ej. < 600px) */
/* ---------------------------------------------------- */
@media (max-width: 600px) {
    .hero-content {
        /* Mantiene el contenido por encima del fondo/overlay */
        position: relative;
        z-index: 2; 
        padding: 20px; /* Padding horizontal para evitar que el texto toque los bordes en móvil */
        background: rgba(0, 44, 60, 0.3);
        border-radius: 30px;
        backdrop-filter: blur(0.8px);
    }
    /* El título y subtítulo se hacen más grandes en relación al viewport */
    .hero-title {
        font-size: 8vw; /* Más grande en móvil para mejor visibilidad */
    }
    
    .hero-subtitle {
        font-size: 3.5vw;
        padding: 0 10px;
    }
    
    /* Los botones pasan a estar uno encima del otro */
    .hero-buttons {
        flex-direction: column;
        gap: 15px; /* Menos espacio */
        width: 80%; /* Ocupan más ancho */
        margin: 0 auto;
    }
    
    .btn {
        width: 100%; /* El botón ocupa todo el ancho del contenedor */
        padding: 18px 20px; /* Más padding para que sean fáciles de tocar */
    }
}


.hero-background-overlay {
    /* ... (resto de las propiedades IMAGEN PRINCIPAL DE FONDO) ... */
    
    /* 1. Descomenta y cambia la ruta de la imagen */
    background-image: url('ruta/a/tu/imagen.jpg'); 
    
    /* 2. Ajustes necesarios para que la imagen cubra todo */
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    
    /* 3. ¡Opcional! Puedes bajar la opacidad para que el texto resalte más */
    /* opacity: 0.8; */
    
    /* ELIMINA o COMENTA: background-color: var(--color-hero-bg); */
}





























/* ---------------------------------------------------- */
/* Variables CSS para la Sección Libro 3D */
/* ---------------------------------------------------- */
:root {
    /* ... Variables anteriores ... */
    --color-book-bg: #4DC0B5;       
    --color-page-bg: #fff;          
    --color-book-text: #333;        
    --animation-duration: 0.8s;     /* Velocidad de la transición del libro */
    --arrow-color: #f1f1f1;         /* Color de las flechas (discreto) */
}

/* ---------------------------------------------------- */
/* Estilos de la Sección Contenedora (100vw/100vh) */
/* ---------------------------------------------------- */

.companies-book-section {
    overflow: hidden;
    visibility: hidden;
    /* REQUISITO: 100vw y 100vh */
    width: 80vw;
    height: 1vh;
    margin: auto;
    background-color: var(--color-book-bg);
    
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; 
    /* overflow: hidden;  */
    /* Propiedad para mejorar el rendimiento de la animación 3D */
    transform-style: preserve-3d;
}

/* Contenedor del Libro 3D: Ocupa toda la sección */
.book-container {
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 1500px; 
}

/* Estilo Base de las Páginas */
.book-page {
    position: absolute;
    width: 100%;
    height: 100%;
    
    background-color: var(--color-page-bg);
    
    /* Configuración de la Animación de Volteo */
    transform-origin: left center; /* Pivote en el centro izquierdo para simular un libro */
    transform: rotateY(0deg); 
    transition: transform var(--animation-duration) ease-in-out;
    
    display: none; 
    opacity: 0;
    
    /* Evita que el reverso de la página que se voltea sea visible */
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
}

/* Clase activa */
.book-page.active {
    display: block;
    opacity: 1;
    z-index: 10;
}

/* Clase para la página que se está volteando */
.book-page.flipping-out {
    display: block; 
    opacity: 1;
    z-index: 20; /* Siempre encima */
}

/* Clase para la página siguiente (que espera debajo) */
.book-page.next-page {
    display: block; 
    opacity: 1;
    z-index: 15; 
    transform: rotateY(0deg); /* El estado final es plano */
}

/* Contenido de la Página (Centrado y Responsivo) */
.page-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: clamp(30px, 8%, 100px); /* Padding responsivo */
    text-align: center;
}

.book-title {
    font-size: clamp(2.3em, 5vw, 4em);
    color: var(--color-book-text);
    margin-bottom: 20px;
}

.book-subtitle, .book-footer-text {
    font-size: clamp(1em, 2vw, 1.3em);
    color: #555;
    margin: 40px 0 40px 0;
}

.page-category-title {
    font-size: clamp(1.8em, 3.5vw, 2.5em);
    color: var(--color-book-text);
    margin-bottom: 40px;
    border-bottom: 3px solid var(--color-book-bg);
    padding-bottom: 10px;
}

/* Estilos de la Cuadrícula/Lista de Logos */
.company-grid {
    display: grid;
    /* 2 o 3 columnas en escritorio */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 30px;
    max-width: 800px;
    width: 100%;
    margin-top: 20px;
}

.company-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: var(--color-page-bg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.company-item img {
    height: 80px;
    width: auto;
    object-fit: contain;
    margin-bottom: 10px;
}

.company-item span {
    font-size: clamp(0.9em, 1.2vw, 1.1em);
    font-weight: 600;
    color: #333;
}

/* ---------------------------------------------------- */
/* Botones de Navegación Discretos y Animación de Latido */
/* ---------------------------------------------------- */

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent; /* Fondo transparente */
    color: var(--arrow-color);
    border: none;
    padding: 20px 10px;
    cursor: pointer;
    z-index: 30;
    transition: color 0.3s, transform 0.3s;
}

.nav-arrow:hover {
    color: white; /* Se ilumina al pasar el ratón */
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow .material-icons {
    font-size: clamp(30px, 4vw, 50px);
}

.nav-arrow.prev {
    left: 0.5px;
    margin-top: 250px;
}

.nav-arrow.next {
    right: .5px;
    margin-top: 250px;
}

/* 1. Animación de Latido (Pulse) para el botón 'next' */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        scale: 1;
    }
    25% {
        scale: 1.2;
        color:#8bc1a1;
    }
    50% {
        scale: 1;
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);        
    }
    75% {
        scale: 1.2;
        color:#8bc1a1;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        scale: 1;
    }
}

.pulse-animation {
    background: rgba(255, 255, 255, 0.1); /* Ligero fondo para el efecto */
    border-radius: 50%; /* Esfera alrededor del icono */
    animation: pulse 2s infinite;
}

/* ---------------------------------------------------- */
/* Media Query: AJUSTES PARA MÓVILES */
/* ---------------------------------------------------- */
@media (max-width: 768px) {
    /* El grid se ajusta automáticamente a 2 o 1 columna si es necesario */
    .company-grid {
        grid-template-columns: 1fr 1fr; 
        gap: 20px;
    }
    
    .company-item img {
        height: 40px;
    }

    .nav-arrow {
        padding: 15px 5px;
    }
}
































/* ---------------------------------------------------- */
/* Variables CSS para la Sección ¿Quiénes Somos? */
/* ---------------------------------------------------- */
:root {
    /* ... Variables anteriores ... */
    --color-about-bg: #f8f8f8;          /* Fondo muy claro */
    --color-about-text: #333;           /* Color de texto principal */
    --color-about-title: #222;          /* Color del título */
    --color-about-btn: #4DC0B5;         /* Verde del botón (similar al primario del héroe) */
    --padding-section: 80px;            /* Padding superior e inferior de la sección */
    --max-width-container: 1100px;      /* Ancho máximo del contenido */
}

/* ---------------------------------------------------- */
/* Estilos de la Sección ¿Quiénes Somos? */
/* ---------------------------------------------------- */

.about-us-section {
    background-color: var(--color-about-bg);
    padding: var(--padding-section) 20px; /* Padding vertical y horizontal para móviles */
    width: 100%;
}

/* Contenedor principal que centra y limita el ancho */
.about-us-container {
    max-width: var(--max-width-container);
    margin: 0 auto;
}

/* Contenedor flexible para las dos columnas (texto e imagen) */
.about-us-content-wrapper {
    display: flex;
    justify-content: space-between; /* Espacia las columnas */
    align-items: center; /* Centra verticalmente las columnas */
    gap: 50px; /* Espacio entre las columnas */
}

/* Columna de Texto */
.about-us-text-column {
    flex: 1; /* Ocupa el espacio restante */
    color: var(--color-about-text);
}

.about-us-title {
    color: var(--color-about-title);
    font-size: clamp(2em, 4vw, 2.5em); /* 5. Responsivo: escala entre 2em y 2.5em */
    margin-bottom: 30px;
}

.about-us-paragraph {
    font-size: clamp(1em, 1.5vw, 1.1em); /* 5. Responsivo: Escala para el cuerpo del texto */
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Estilo para el texto resaltado (strong) */
.highlight {
    font-weight: bold;
}

/* Estilo del Botón (Similar al hero, pero con su propio color de fondo) */
.btn-about {
    /* Reutilizamos los estilos base de .btn */
    display: inline-block; /* Necesario si se quita la clase .btn */
    margin-top: 15px;
    background-color: var(--color-about-btn);
    border: 2px solid var(--color-about-btn);
}

.btn-about:hover {
    background-color: #36a79b; /* Tono más oscuro al pasar el ratón */
    border-color: #36a79b;
    transform: translateY(-2px);
}

/* 2. y 5. Estilos de la Imagen (Responsiva) */
.about-us-image-column {
    flex: 1; /* Ocupa la otra mitad */
    max-width: 50%; /* Asegura que no tome más de la mitad en escritorio */
}

.about-us-image {
    width: 100%; /* La imagen ocupa todo el ancho de su contenedor */
    height: auto;
    display: block;
    border-radius: 8px; /* Bordes ligeramente redondeados, como en la referencia */
    object-fit: cover; /* Asegura que la imagen se ajuste bien */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* ---------------------------------------------------- */
/* Media Query: RESPONSIVE - PANTALLAS PEQUEÑAS (ej. < 850px) */
/* ---------------------------------------------------- */
@media (max-width: 850px) {
    /* 2. Las columnas se apilan verticalmente */
    .about-us-content-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    
    /* La columna de la imagen pasa a ocupar el 100% de ancho */
    .about-us-image-column {
        max-width: 100%;
        order: -1; /* Mueve la imagen arriba del texto en móvil (opcional) */
    }
    
    /* El texto del botón se asegura de ser legible */
    .btn-about {
        width: 100%; /* Opcional: el botón ocupa todo el ancho en móvil */
        text-align: center;
    }

    .about-us-text-column {
        padding: 0;
    }

    .about-us-title {
        text-align: center;
    }
}





































/* ---------------------------------------------------- */
/* Variables CSS ADICIONALES para la Sección ¿Por Qué Elegirnos? */
/* ---------------------------------------------------- */
:root {
    /* ... Variables anteriores ... */
    --color-reasons-bg: #fff;           /* Fondo blanco puro */
    --color-reasons-title: #222;        
    --color-icon: #007bff;              /* Azul primario para iconos y acentos */
    --card-hover-scale: 1.05;           /* 1. Escala no exagerada (ajustada a 1.05, puedes probar 1.2 o 1.3 si quieres más impacto) */
    --card-width-desktop: 250px;
    --card-height-desktop: 300px;
}

/* ---------------------------------------------------- */
/* 4. y 5. Estilos de la Sección General (Responsiva) */
/* ---------------------------------------------------- */

.reasons-section {
    background-color: var(--color-reasons-bg);
    /* 4. Altura estética y 100vw. Usamos padding para controlar la altura mínima */
    min-height: 40vh; 
    width: 100vw;
    padding: 40px 20px 50px; 
    text-align: center; /* Centra el título */
}

.reasons-container {
    max-width: 1200px;
    margin: 0 auto;
}

.reasons-title {
    color: var(--color-reasons-title);
    font-size: clamp(2em, 4vw, 3em); /* Título responsivo */
    margin-bottom: 40px;
}

/* ---------------------------------------------------- */
/* 2. Estilos del Grid de Tarjetas (4 Columnas) */
/* ---------------------------------------------------- */

.cards-grid {
    display: grid;
    /* En escritorio, 4 columnas de tamaño similar */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
}

/* Contenedor de la Tarjeta */
.card-wrapper {
    /* 1. Aplica la escala al contenedor para que el tamaño de la tarjeta no afecte a las vecinas */
    
    /* perspective: 1000px; *Necesario para el efecto 3D de volteo */
    
    
    transform: scale(1); /* Escala inicial */
    transition: transform 0.3s ease, border-color 0.3s ease, border-width 0.3s ease; /* Transición suave en la propiedad transform */
}

/* 1. Efecto Hover: Escala y Volteo (Transformación en el eje Y) */
/* .card-wrapper:hover {
    Aplica el scale no exagerado */
    /* transform: scale(var(--card-hover-scale));  */
    /* z-index: 10; Eleva la tarjeta sobre las vecinas al hacer hover
} */

/* Contenedor del efecto Flip (Volteo) */
.flip-card {
    position: relative;
    width: 100%;
    height: var(--card-height-desktop); /* Altura fija en escritorio */
    text-align: center;
    transition: transform 0.8s; /* Velocidad de la animación de volteo */
    transform-style: preserve-3d; /* Esencial para el 3D */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
}

/* 1. Voltear la tarjeta al hacer hover en el contenedor */
/* .card-wrapper:hover .flip-card {
    transform: rotateY(180deg); Volteo Horizontal
    Para volteo vertical: transform: rotateX(180deg);
} */

/* ---------------------------------------------------- */
/* Cara Frontal y Trasera de la Tarjeta */
/* ---------------------------------------------------- */

/* FRONT y BACK: posicionamiento absoluto y control de backface */
.flip-card-front,
.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #eee;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #fff;
}

/* Cara frontal: arriba por defecto */
.flip-card-front {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    z-index: 2;
    transition: opacity .18s linear;
}

/* Cara trasera: rotada y transparente para dejar ver la imagen */
/* .flip-card-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    z-index: 1;
    background-color: transparent;
    color: white;
    overflow: hidden;
} */

/* Imagen de fondo del reverso */
/* .back-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    z-index: 9;
    outline: 3px solid lime;
} */


/* Oculta cara frontal al girar (para que no se vea espejada) */
.card-wrapper:hover{
    transform: scale(1.1); /* Escala el elemento un 10% */
    border-color: #007bff; /* Cambia el color del borde */
    border-width: 10px; /* Cambia el grosor del borde */

}


/* .card-wrapper:hover .flip-card-front {
    opacity: 0;
    pointer-events: none;
} */

/* Volteo */
/* .card-wrapper:hover .flip-card {
    transform: rotateY(180deg);
} */


/* Estilos de la Cara Frontal */
.card-icon {
    font-size: 40px;
    color: var(--color-icon);
    margin-bottom: 15px;
}

.card-title {
    font-size: clamp(1em, 1.2vw, 1.2em); /* Título responsivo */
    font-weight: bold;
    margin-bottom: 10px;
}

.card-text {
    font-size: clamp(0.9em, 1vw, 1em); /* Texto responsivo */
    line-height: 1.4;
    color: #666;
}

/* Estilos de la Cara Trasera (El reverso) */
/* .flip-card-back {
    position: relative;
    background-color: transparent; * ✅ fondo transparente para ver la imagen *
    color: white;
    transform: rotateY(180deg);
    z-index: 1;
    overflow: hidden; * ✅ evita que la imagen se salga del borde *
} */

/* .flip-card-front {
    z-index: 2; ✅ La cara frontal va arriba inicialmente
    transform: rotateY(0deg);
} */


/* .back-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
} */




/* ---------------------------------------------------- */
/* Media Query: RESPONSIVE - PANTALLAS GRANDES/TABLET (ej. < 1024px) */
/* ---------------------------------------------------- */
@media (max-width: 1024px) {
    /* 2. Las tarjetas pasan a 2 columnas */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Adaptamos la altura de las tarjetas en tablet/móvil */
    .flip-card {
        height: 280px; 
    }

    /* Aseguramos que el texto fluya bien */
    .card-title {
        font-size: 1.1em;
    }
    .card-text {
        font-size: 0.95em;
    }
}

/* ---------------------------------------------------- */
/* Media Query: RESPONSIVE - MÓVILES (ej. < 600px) */
/* ---------------------------------------------------- */
@media (max-width: 600px) {
    /* 2. Las tarjetas pasan a 1 columna */
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .reasons-title {
        margin-bottom: 40px;
    }

    .flip-card {
        /* Altura adaptada para móviles */
        height: 250px; 
    }
    
    /* Reducimos el scale para evitar que la tarjeta salga demasiado de la pantalla */
    .card-wrapper:hover {
        transform: scale(1.02); 
    }
}


/* --- FIX: Imagen visible en el reverso --- */
/* .flip-card-back,
.flip-card-back * {
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transform: none !important;
}

.flip-card-back {
    transform: rotateY(180deg) !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flip-card-back .back-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1 !important;
    z-index: 1;
} */










































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