/* --- RESET Y ESTILOS GLOBALES --- */
        
html {
    /* Esto hace que el salto sea una animación fluida en navegadores modernos */
    scroll-behavior: smooth; 
}

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            color: #333;
            line-height: 1.6;
            background-color: #fff;
        }

        /* Contenedor principal para centrar contenido */
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        h1, h2, h3, h4 {
            color: #1a1a1a;
        }

        p {
            color: #555;
            margin-bottom: 1rem;
        }

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

        /* --- HEADER / TOP BAR --- */
        header {
    /* Esto hace la magia: se queda pegado al llegar al tope */
    position: sticky; 
    top: 0; 
    
    /* Asegura que el menú esté siempre ENCIMA del resto del contenido */
    z-index: 1000; 
    
    /* Dale un color de fondo, si no, el texto de la página se verá "a través" del header */
    background-color: #ffffff; 
    
    /* Opcional: una sombra suave para separarlo visualmente del contenido cuando bajas */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    
    /* Mantén tu padding original */
    padding: 7px 0;
}

/* Aplicamos la fuente a todos los elementos del cuerpo (Body) */
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6; /* Un espaciado ligeramente mayor mejora la lectura */
    color: #1a1a1a; /* Color de texto por defecto */
}

        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Estilos para el logo (Imagen) */
    .logo img {
    /* Define el alto de tu logo. Unos 30px es estándar para un header */
    height: 40px; 
    /* Asegura que el ancho se ajuste proporcionalmente */
    width: auto;
    /* Si el logo original era texto, esto mantiene el tamaño de fuente anterior */
    vertical-align: middle; 
}

/* Opcional: Eliminar cualquier estilo de fuente que se aplique por defecto a .logo */
.logo {
    /* Si tenías font-weight o font-size aquí, puedes eliminarlos si solo lleva la imagen */
    font-size: 0; /* Esto asegura que no haya espacio extra si hay texto oculto */
}

        nav a {
            margin-left: 20px;
            font-size: 0.85rem;
            text-transform: uppercase;
            font-weight: 500;
        }

        .btn-contact-nav {
            border: 1px solid #333;
            padding: 8px 16px;
            border-radius: 20px;
        }

        /* --- SECCIÓN 1: HERO (REFACTORIZADO Y LIMPIO) --- */
.hero {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 60px 0;
    text-align: center;
    cursor: none; /* Ocultamos cursor */
}

/* --- CAPA 1: EL FONDO BORROSO (Automático) --- */
/* Esto crea la imagen de fondo borrosa detrás de todo */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Al fondo */
    
    /* IMAGEN DE FONDO */
    background-image: url('img/seccion1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* EL DESENFOQUE */
    filter: blur(10px); 
    transform: scale(1.1); /* Escalar un poco evita bordes blancos al desenfocar */
}

/* --- CAPA 2: LA MÁSCARA NÍTIDA (La que mueve la lupa) --- */
.hero-mask-sharp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Encima del fondo borroso */
    
    /* LA MISMA IMAGEN, PERO NÍTIDA */
    background-image: url('img/seccion1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* EL RECORTE MAGICO */
    /* Solo mostramos un círculo de 120px donde esté el mouse */
    clip-path: circle(120px at var(--x, 50%) var(--y, 50%));
}

/* --- CAPA 3: EL TEXTO (Siempre encima y nítido) --- */
.hero-content {
    position: relative;
    z-index: 3; /* Encima de todo lo anterior */
    color: white; /* Texto blanco */
    margin-right: 0%;
    margin-bottom: -3%;
}

.hero-content h1 {
    font-size: 1,2 rem;
    margin-bottom: 20px;
    line-height: 1.2;
    color: white;
}

.hero-content p {
    font-size: 1.1rem;
    color: #f0f0f0;
    max-width: 800px;
    margin: 0 auto;
}

/* --- ICONO VISUAL DE LA LUPA --- */
.magnifying-glass-icon {
    position: absolute;
    width: 350px; 
    height: 350px;
    z-index: 100; 
    transform: translate(-38%, -38%); /* Ajuste de centro para tu SVG específico */
    pointer-events: none; 
    background-image: url('img/lupa.svg'); 
    background-size: contain;
    background-repeat: no-repeat;
}


        /* --- SECCIÓN 2: ESTADÍSTICAS (NARANJA) --- */
        .stats-section {
            background: linear-gradient(135deg, #F99F59 0%, #F58634 100%);
            color: white;
            padding: 60px 0;
            position: relative;
            overflow: hidden;
            margin-bottom: 60px;
        }

        .stats-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .stats-left {
            max-width: 60%;
        }

        .stats-header {
            text-transform: uppercase;
            font-weight: 700;
            margin-bottom: 30px;
            letter-spacing: 1px;
            font-size: 1.1rem;
        }

        .stat-item {
            margin-bottom: 30px;
        }

        .stat-number {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1;
            margin-bottom: 5px;
        }

        .stat-desc {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9rem;
            max-width: 450px;
        }

        /* Decoración abstracta derecha (simulada) */
        .stats-graphic {
    /* Eliminamos el estilo de fuente que usaba el lápiz: */
    font-size: 0; 
    opacity: 1; /* Hacemos la imagen visible */
    
    /* DEFINICIÓN DE LA IMAGEN DE FONDO (¡Aquí es donde se cambia!) */
    background-image: url('img/estadisticas.png'); 
    background-size: contain; /* Asegura que la imagen se vea completa */
    background-repeat: no-repeat;
    background-position: center;
    
    /* Definimos el tamaño del contenedor para que la imagen se vea */
    width: 300px; /* Ancho deseado para el gráfico */
    height: 300px; /* Alto deseado para el gráfico */
    
    /* El transform original puede causar problemas con imágenes, lo eliminamos: */
    /* transform: rotate(-15deg); */ 
}

        /* --- SECCIÓN 3: BENEFICIOS --- */
        .benefits {
            margin-bottom: 80px;
        }

        .section-title {
            text-align: center;
            text-transform: uppercase;
            font-weight: 700;
            margin-bottom: 50px;
            font-size: 1.2rem;
            letter-spacing: 0.5px;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            max-width: 900px;
            margin: 0 auto;
        }

        .benefit-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }

        .benefit-icon {
            width: 50px;
            height: 50px;
            flex-shrink: 0;
        }

        .benefit-text h4 {
            font-size: 1.1rem;
            margin-bottom: 10px;
        }

        .benefit-text p {
            font-size: 0.9rem;
            color: #666;
        }

        /* --- SECCIÓN 4: SOBRE MÍ (Texto + Imagen) --- */
        .about {
            display: flex;
            align-items: center;
            gap: 60px;
            margin-bottom: 80px;
            background-color: #f9f9f9; /* Fondo sutil para diferenciar */
        }
        
        /* Ajuste para que el fondo gris ocupe todo el ancho si se desea, 
           pero aquí lo mantengo limpio en el contenedor */
        
        .about-text {
            flex: 1;
        }

        .about-text h2 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            line-height: 1.3;
        }

        .about-image {
            flex: 1;
        }

        .about-image img {
            width: 100%;
            height: auto;
            border-radius: 4px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .btn-link {
            display: inline-block;
            margin-top: 10px;
            font-weight: 600;
            color: #F58634;
            border-bottom: 2px solid #F58634;
        }

        /* --- SECCIÓN 5: SERVICIOS --- */
        .services {
            margin-bottom: 100px;
        }

        .services-row {
            display: flex;
            justify-content: space-around;
            text-align: center;
            gap: 30px;
        }

        .service-item {
    flex: 1;
    max-width: 250px;
    
    /* Añadido para el efecto: */
    background-color: #fff; /* Fondo blanco sólido */
    border-radius: 8px; /* Bordes suaves */
    padding: 25px 15px; /* Espacio interno para que parezca una tarjeta */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    
    text-align: center; /* Mantiene el contenido centrado */
}

        .service-icon {
            height: 60px;
            margin-bottom: 20px;
        }
        
        .service-item h4 {
    /* El valor original era 1rem. Lo aumentaremos un poco. */
    font-size: 1.30rem; 
    font-weight: 600; /* Opcional: Para darle más énfasis */
    margin-bottom: 10px;
}

        .service-item p {
            /* El valor original era 0.8rem. Lo subiremos a 0.95rem o 1rem. */
            font-size: 0.95rem;
            line-height: 1.4; /* Ajusta la altura de línea para mejor lectura */
        }

        /* --- SECCIÓN 6: FAQ DUDAS FRECUENTES --- */
        .faq {
            margin-bottom: 80px;
            position: relative;
        }

        .faq-header {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-bottom: 40px;
        }
        
        .faq-icon {
            font-size: 2rem;
            font-weight: bold;
            color: #ddd;
        }

        .faq-list {
    cursor: pointer; /* Indica que se puede hacer clic en las preguntas */
}

        .faq-item {
            margin-bottom: 30px;
        }

        .faq-question {
            font-weight: 700;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        
        .faq-question::before {
            content: '•';
            color: #F58634; /* Azulito claro en la imagen original, aquí uso el naranja del tema */
            font-size: 1.5rem;
            margin-right: 10px;
            line-height: 0;
        }

        .faq-answer {
            padding-left: 20px;
            font-size: 0.95rem;
        }

        /* --- SECCIÓN 7: FOOTER / CTA --- */
        .footer-cta {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 60px 0;
            border-top: 1px solid #eee;
        }

        .cta-left h2 {
            font-size: 2.5rem;
            max-width: 300px;
            line-height: 1.1;
        }

        .cta-right {
            text-align: right;
        }

        .cta-socials {
            margin-bottom: 20px;
        }
        
        .cta-socials p, .cta-contact p {
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: #999;
        }

        .social-icons a {
            font-weight: 700;
            margin-left: 10px;
            color: #333;
        }

        .btn-contact-footer {
            display: inline-block;
            margin-top: 5px;
            font-weight: 700;
            font-size: 1.2rem;
            color: #333;
        }
        /* --- ESTILOS ESPECÍFICOS PARA EL BOTÓN EN EL FOOTER --- */
footer .btn-link {
    /* 1. ELIMINAR SUBRAYADO */
    text-decoration: none; 
    
    /* 2. CAMBIAR COLOR A NEGRO */
    color: #1a1a1a; /* Negro oscuro para buen contraste */
    
    /* Opcional: Para que parezca más un botón */
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #1a1a1a; /* Borde negro */
    border-radius: 3px;
    font-weight: 600;
    transition: background-color 0.3s;
}

/* Opcional: Efecto hover */
footer .btn-link:hover {
    background-color: #1a1a1a; /* Fondo negro al pasar el ratón */
    color: white; /* Texto blanco en hover */
}


        /* --- RESPONSIVE (Móvil) --- */

@media (max-width: 768px) 
    /* 1. AJUSTES GENERALES */
    .container {
        padding: 0 15px; /* Reducimos el padding lateral para usar más espacio */
    }
    
    /* Reducimos el padding en todas las secciones para que haya más contenido */
    section {
        padding: 50px 0;
    }

    /* 2. HERO (SECCIÓN 1) */
    .hero {
        min-height: 680px; /* Reducimos la altura del Hero */
        padding: 40px 0;
    }
    .hero-content h1 { 
        font-size: 1.8rem; /* Fuente más pequeña para el título principal */
    }
    .hero-content p {
        font-size: 1rem;
    }

    /* Ajuste para el texto que moviste abajo a la derecha */
    .hero-content {
        margin-right: 0; /* Removemos el margen extra en móvil */
        margin-bottom: 0;
        /* Y centramos el texto en la caja en móvil para mejor legibilidad */
        text-align: center; 
    }
    
    /* 3. LUPA VISUAL (OPCIONAL: hacemos el icono de la lupa más pequeño o lo ocultamos) */
    .magnifying-glass-icon {
        width: 200px; /* Reducimos el tamaño visual del icono */
        height: 200px;
    }
    
    /* 4. MÁSCARA DEL EFECTO LUPA (CRUCIAL: AJUSTE DEL TAMAÑO DEL CÍRCULO) */
    /* Necesitarás modificar el tamaño del círculo de recorte para que se ajuste */
    .hero-mask-sharp {
        /* Ejemplo: si antes era circle(120px...) */
        clip-path: circle(60px at var(--x, 50%) var(--y, 50%)); 
    } /* Cierre de la media query anterior */
    @media (max-width: 768px) {
    /* 5. ESTADÍSTICAS (SECCIÓN 2) */
    .stats-content { 
        flex-direction: column; 
        text-align: center; /* Centramos el texto cuando la gráfica desaparece */
    }
    .stats-graphic { 
        display: none; /* Como ya lo tenías, ocultamos la gráfica */
    }
    .stats-left { 
        max-width: 100%; 
    }

    /* 6. SOBRE MÍ (ABOUT) */
    .about { 
        flex-direction: column; 
        text-align: center;
    }
    /* Aseguramos que la imagen y el texto se vean bien */
    .about-image, .about-text {
        width: 100%;
        margin: 0;
    }

    /* 7. BENEFICIOS */
    .benefits-grid { 
        grid-template-columns: 1fr; /* Cada beneficio ocupa su propia fila */
    }
    
    /* 8. SERVICIOS */
    .services-row { 
        flex-direction: column; 
        align-items: center; 
    }
    .service-item {
        margin-bottom: 30px;
    }
    
    /* 9. FOOTER Y CTA */
    .footer-cta { 
        flex-direction: column; 
        align-items: center; /* Centramos para móvil */
        gap: 30px; 
        text-align: center;
    }
    .cta-right { 
        text-align: center; 
    }
    .social-icons {
        justify-content: center; /* Centramos los iconos sociales */
    }
}
@media (max-width: 768px) {
    /* 10. HEADER / NAV (Si no tienes menú hamburguesa) */
    header {
        flex-direction: column;
        align-items: center;
        padding: 15px 0;
    }
    .nav-links {
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-top: 15px;
    }
    .nav-links a {
        margin: 10px 0;
    }
}

        /* EFECTO HOVER INMERSIVO */
.service-item:hover {
    /* 1. ELEVACIÓN: Mueve la tarjeta 5px hacia arriba (eje Y) */
    transform: translateY(-5px); 
    
    /* 2. SOMBRA: Aplica una sombra más pronunciada para simular elevación */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); 
    
    /* 3. COLOR: Opcional, un fondo ligeramente diferente para destacar */
    background-color: #fcfcfc;
}

/* CAMBIO DE COLOR DEL ICONO AL HACER HOVER */
.service-item:hover .service-icon {
    /* Usamos 'stroke' para los iconos SVGs esquemáticos */
    stroke: #F58634; /* Cambia a tu color naranja principal */
}

/* Oculta el contenido de las respuestas por defecto */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Transición para la animación de apertura */
    padding-left: 20px;
}

/* Propiedades del encabezado de la pregunta */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.toggle-icon {
    font-size: 1.5rem;
    font-weight: 300;
    margin-left: 20px;
    transition: transform 0.3s ease;
    color: #F58634; /* Color del signo +/- */
}

/* Gira el icono + a una X (o un -) cuando está activo */
.accordion-header.active .toggle-icon {
    transform: rotate(45deg); /* Gira 45 grados para simular una 'X' */
    color: #333;
}