/* --- RESET BÁSICO, FUENTES Y COLORES --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', Arial, sans-serif;
    color: #444;
    line-height: 1.6;
    background-color: #F8F8F8; /* Fondo general muy claro */
}

/* --- PALETA DE COLORES AZUL --- */
:root {
    --azul-principal: #2d358c; /* Azul oscuro del logo y principal */
    --azul-secundario: #4A6AC1; /* Azul intermedio para contrastes y hovers */
    --azul-oscuro: #1A2E6B; /* Azul muy oscuro para fondo de sección */
    --texto-oscuro: #333;
    --texto-claro: #FFF;
    --fondo-gris-claro: #F8F8F8;
    --fondo-footer: #111;
}

a {
    text-decoration: none;
    color: var(--azul-principal);
    transition: color 0.3s ease;
}
a:hover {
    color: var(--azul-secundario);
}

.highlight {
    color: var(--azul-secundario);
}

.highlight-blue {
    color: var(--azul-oscuro);
    font-weight: 700;
}


/* --- CABECERA Y NAVEGACIÓN --- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: var(--azul-principal); /* FONDO AZUL DEL LOGO */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.logo-container .logo {
    height: 80px; /* TAMAÑO DEL LOGO AUMENTADO */
}

.nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
}

.nav a {
    color: var(--texto-claro); /* COLOR BLANCO PARA LOS LINKS */
    font-weight: 600;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a.active {
    color: var(--texto-claro); /* HOVER DE TEXTO BLANCO */
    border-bottom-color: #F0F0F0; /* HOVER DE LÍNEA GRIS CLARO */
}

/* Estilo del botón de hamburguesa (invisible en desktop) */
.hamburger-menu {
    display: none; /* Oculto por defecto */
    background: transparent;
    border: none;
    color: var(--texto-claro);
    font-size: 1.5em;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

/* --- SECCIÓN HERO (Banner principal y formulario) ---
.hero-section {
    background-color: var(--fondo-gris-claro);
    padding: 60px 5%;
    position: relative;
} */
/* --- SECCIÓN HERO (Banner principal y formulario) --- */
.hero-section {
    /* ESTILOS DEL FONDO DE IMAGEN */
    background-image: url('img/fondo.png');
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center center; 
    /* Estilos del Contenedor */
    padding: 60px 5%;
    position: relative; /* FUNDAMENTAL: Punto de referencia para el overlay */
    min-height: 500px; 
    /* El color de fondo se mantiene como fallback si la imagen no carga */
    background-color: var(--azul-principal);
}

/* 1. OVERLAY (EL "FILTRO" SEMI-TRANSPARENTE) */
.hero-section::before {
    content: "";
    position: absolute; /* Se posiciona sobre el contenedor principal */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* AQUÍ SE DEFINE EL COLOR Y EL ESFUMADO */
    background-color: rgba(0, 0, 0, 0.05); /* Negro con 40% de opacidad */
    z-index: 1; /* Bajo, para que el contenido pase por encima */
}

/* 2. ASEGURAR QUE EL CONTENIDO ESTÉ POR ENCIMA */
.hero-section .hero-content-wrapper {
    position: relative;
    z-index: 2; /* Mayor que el z-index del overlay */
}
.hero-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

/* Estilos para que las imágenes queden ALINEADAS */
.hero-text-container {
    flex: 3;
    position: relative;
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; /* Alinea todo a la izquierda */
    justify-content: center;
    gap: 15px;
}

/* Contenedor interno para la mujer y el texto de título (SIDE-BY-SIDE) */
.hero-images-wrapper {
    display: flex;
    align-items: flex-end; /* Alinea los elementos por la base */
    gap: 10px; 
    width: 100%;
    max-width: 600px;
    margin-bottom: 20px;
}

/* Estilos para la imagen de la mujer (personaje-top.png) */
.mujer-bolso-img {
    max-width: 200px; 
    height: auto;
}

/* Estilos para la imagen de "Necesitas Plata?" (titletopblue.png) */
.necesitas-plata-img {
    max-width: 350px; 
    height: auto;
    display: block;
}

/* Estilo para el texto "Créditos en el acto..." */
.hero-claim-bottom {
    font-size: 1.2em; /* Ligeramente más grande para más impacto */
    color: var(--texto-claro); /* ¡NUEVO! Letras blancas */
    font-weight: 700; /* Negrita */
    margin-top: 25px; 
    text-align: center; 
    max-width: 90%; 
    
    /* ESTILOS DE FONDO PARA EL RECUADRO DESTACADO */
    background-color: var(--azul-principal); /* ¡NUEVO! Fondo azul principal (#2d358c) */
    padding: 15px 25px; 
    border-radius: 10px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave para levantarlo */
    
    position: relative; 
    z-index: 3;
}

/* Estilos de formulario (Se mantienen intactos) */
.precalifica-form-container {
    flex: 2;
    background-color: var(--texto-claro);
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
}

.precalifica-form-container .form-title {
    color: var(--azul-principal);
    margin-bottom: 8px;
    font-size: 1.6em;
    font-weight: 700;
}

.precalifica-form-container .form-subtitle {
    color: #777;
    font-size: 0.95em;
    margin-bottom: 25px;
}

.precalifica-form input {
    width: 100%;
    padding: 15px;
    margin-bottom: 18px;
    border: 1px solid #DDD;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s;
}

.precalifica-form input:focus {
    border-color: var(--azul-secundario);
    outline: none;
}

.btn-enviar {
    background-color: var(--azul-principal);
    color: var(--texto-claro);
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease;
}

.btn-enviar:hover {
    background-color: var(--azul-secundario);
}

.btn-enviar i {
    margin-left: 10px;
}

/* --- SECCIÓN DE REQUISITOS (AZUL) --- */
.requisitos-section {
    background-color: var(--azul-principal);
    color: var(--texto-claro);
    text-align: center;
    padding: 60px 5%;
}

.requisitos-section h2 {
    color: var(--texto-claro);
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 40px;
}

/* AJUSTE: El grid ahora incluye los símbolos + */
.requisitos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Reducimos el espacio entre ítems y los iconos + */
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.plus-icon {
    font-size: 2.5em;
    color: var(--texto-claro); /* Color blanco para contraste */
    opacity: 0.8;
}

.requisito-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
}



.requisito-item .req-title {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.3;
}

/* AJUSTE: El grid ya no necesita espacio para los signos + */
.requisitos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px; /* Aumentamos el gap para separarlos */
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.requisito-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px; /* Aumentamos el ancho para los círculos */
}

/* NUEVO: Estilo para los círculos */
.requisito-item.circle-item {
    background-color: var(--azul-secundario); /* Fondo celeste claro */
    width: 180px; /* Diámetro del círculo */
    height: 180px; /* Diámetro del círculo */
    border-radius: 50%; /* Esto crea el círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border: 5px solid var(--texto-claro); /* Borde blanco de contraste */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.requisito-item .req-title {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--texto-claro); /* Texto blanco dentro del círculo */
    margin: 0; /* Elimina margen innecesario */
}

.listo-text {
    font-size: 3em;
    font-weight: 800;
    color: var(--texto-claro);
    text-transform: uppercase;
}

/* --- BANDA INTERMEDIA (BLANCO) --- */
.info-band-middle {
    background-color: var(--texto-claro);
    text-align: center;
    padding: 30px 5%;
    font-size: 1.5em;
    font-weight: 400;
    line-height: 1.4;
    border-bottom: 1px solid #EEE;
}


/* --- SECCIÓN DE BENEFICIOS (AZUL OSCURO) --- */
.beneficios-section {
    background-color: var(--azul-oscuro);
    color: var(--texto-claro);
    text-align: center;
    padding: 60px 5%;
}

.beneficios-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto 40px;
}

.beneficio-item {
    flex: 1;
    min-width: 250px;
    padding: 30px 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.beneficio-item.dark-blue-bg {
    background-color: var(--azul-secundario);
}

.beneficio-item h3 {
    font-size: 1.5em;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
}

.beneficio-item .large-number {
    font-size: 2.2em;
    display: block;
    margin-top: 5px;
}

.money-img-container {
    background: var(--texto-claro);
    padding: 0;
}

.billetes-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block; /* Elimina espacio inferior */
}

.call-to-action {
    max-width: 800px;
    margin: 0 auto;
}

.call-to-action p {
    font-size: 1.1em;
    margin-bottom: 25px;
}

.btn-precalificar-2 {
    text-decoration: none; /* <--- CRUCIAL: Elimina el subrayado por defecto del <a> */
    text-align: center; /* <--- Asegura que el texto esté centrado si el <a> es bloque */
    display: inline-block; /* <--- Permite aplicar padding y ancho correctamente */
    
    background-color: var(--azul-principal);
    color: var(--texto-claro); /* Asegura que el texto sea blanco */
    
    /* ... (resto de estilos) ... */
    padding: 18px 45px;
    border: 2px solid var(--azul-principal);
    border-radius: 30px;
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-precalificar-2:hover {
     background-color: var(--azul-secundario);
    border-color: var(--azul-secundario);
    transform: translateY(-2px);
    color: var(--texto-claro); /* Asegura que el texto siga siendo blanco */
}

.rango-cuotas {
    font-size: 0.9em;
    margin-top: 15px;
    opacity: 0.8;
}

/* --- TRABAJA CON NOSOTROS --- */
.trabaja-section {
    background-color: var(--fondo-gris-claro);
    padding: 80px 5%;
    text-align: center;
}

.trabaja-content-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

.trabaja-section h2 {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--azul-oscuro);
    line-height: 1.2;
    margin-bottom: 30px;
}

.btn-trabaja {
    background-color: var(--azul-secundario);
    color: var(--texto-claro);
    padding: 15px 50px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
}

.btn-trabaja:hover {
    background-color: var(--azul-principal);
}


/* --- PIE DE PÁGINA (FOOTER) --- */
.footer {
    background-color: var(--fondo-footer);
    color: #BBB;
    padding: 40px 5% 20px;
    font-size: 0.9em;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 30px;
}

.footer-col {
    flex: 1;
    min-width: 250px;
    line-height: 1.8;
}

.footer-col h3 {
    color: var(--azul-secundario);
    font-size: 1.1em;
    margin-bottom: 15px;
    font-weight: 700;
}

.footer-col a {
    color: #BBB;
}

.footer-col a:hover {
    color: var(--azul-secundario);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 20px;
    color: #888;
    font-size: 0.75em;
}
/* --- NUEVOS ESTILOS: DESCARGO LEGAL DEL FOOTER --- */
.footer-legal-disclaimer {
    max-width: 1200px;
    margin: 15px auto 25px auto; /* Espacio superior, centrado, espacio inferior */
    padding: 0 5%;
    color: #888;
    text-align: justify; /* Justificado para mejor lectura de texto largo */
    line-height: 1.4;
    border-top: 1px solid #333; /* Línea de separación sutil */
    padding-top: 20px;
}

.footer-legal-disclaimer p {
    font-size: 0.7em; /* Letra pequeña como solicitaste */
}

/* --- BOTÓN FLOTANTE DE WHATSAPP --- */
.whatsapp-float {
    position: fixed; /* Lo mantiene fijo en la pantalla */
    width: 60px;
    height: 60px;
    bottom: 40px; /* Distancia desde la parte inferior */
    right: 40px; /* Distancia desde la derecha */
    background-color: #25D366; /* Color oficial de WhatsApp */
    color: #FFF;
    border-radius: 50px; /* Para que sea un círculo perfecto */
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 10000; /* Asegura que esté por encima de todos los demás elementos */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    color: #FFF; /* Mantiene el color blanco del ícono */
    background-color: #128C7E; /* Sutil cambio de color en hover */
    transform: scale(1.1); /* Efecto para indicar interactividad */
}

/* Ajuste de responsividad para pantallas más pequeñas */
@media (max-width: 600px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px; 
        right: 20px; 
        font-size: 25px;
    }
}
/* --- SECCIÓN DE PREGUNTAS FRECUENTES (FAQ) --- */
.faq-section {
    background-color: var(--fondo-gris-claro);
    padding: 80px 5%;
    text-align: center;
}

.faq-section h2 {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--azul-oscuro);
    margin-bottom: 50px;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.faq-item {
    border: 1px solid #DDD;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* Importante para el efecto de acordeón */
    background-color: var(--texto-claro);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.faq-question {
    width: 100%;
    padding: 20px;
    background-color: var(--texto-claro);
    color: var(--azul-oscuro);
    font-size: 1.1em;
    font-weight: 600;
    text-align: left;
    border: none;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question::after {
    content: '\25BC'; /* Icono de flecha hacia abajo (triángulo) */
    font-size: 0.9em;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.faq-question.active {
    background-color: var(--azul-secundario); /* Fondo celeste al estar activo */
    color: var(--texto-claro); /* Texto blanco al estar activo */
}

.faq-question.active::after {
    transform: rotate(180deg); /* Gira la flecha cuando está activo */
}

.faq-answer {
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer p {
    padding-bottom: 20px;
    color: #555;
    line-height: 1.5;
}

/* Estado activo del acordeón (se maneja con JS) */
.faq-answer.active {
    max-height: 200px; /* Suficiente altura para el contenido */
    padding-top: 10px;
}

/* --- RESPONSIVIDAD (Media Queries) --- */
@media (max-width: 1024px) {
    .hero-content-wrapper {
        flex-direction: column;
        text-align: center;
    }
    .hero-text-container {
        padding-right: 0;
        margin-bottom: 40px;
        align-items: center; /* Centra el contenido en móvil */
    }
    
  /* MODIFICACIÓN: En móvil, mantenemos las imágenes LADO A LADO */
    .hero-images-wrapper {
        flex-direction: row; /* Mantiene en fila */
        justify-content: center; 
        align-items: flex-end; 
        flex-wrap: wrap; 
        max-width: 100%;
        gap: 15px;
        margin-bottom: 20px;
    }

    .mujer-bolso-img {
        max-width: 150px; /* Se reduce el tamaño para que quepan */
        height: auto;
    }
    
    .necesitas-plata-img {
        max-width: 280px; /* El título ajustado */
        height: auto;
    }
    
    .hero-claim-bottom {
        text-align: center; /* Centramos el texto en móvil */
        padding-left: 0;
    }

    .precalifica-form-container {
        width: 100%;
        max-width: 450px;
    }
    .footer-container {
        flex-direction: column;
        align-items: center;
    }
    .footer-col {
        min-width: 100%;
        text-align: center;
    }
    
    /* ESTILOS MENÚ HAMBURGUESA */
    .header {
        flex-wrap: wrap; 
        justify-content: space-between;
    }
    
    .nav {
        position: fixed;
        top: 0;
        right: -300px; 
        width: 300px;
        height: 100%;
        background-color: var(--azul-oscuro);
        padding-top: 80px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        display: block;
    }

    .nav.open {
        right: 0; 
    }

    .nav ul {
        flex-direction: column; 
        align-items: flex-start;
        padding: 20px;
    }

    .nav ul li {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .nav a {
        display: block; 
        padding: 15px 10px;
        font-size: 1.1em;
        border-bottom: none; 
    }
    
    .hamburger-menu {
        display: block;
        order: 2; 
    }
}

@media (max-width: 768px) {
   
    .beneficios-grid {
        flex-direction: column;
        gap: 30px;
    }
  
    .beneficio-item {
        width: 100%;
        min-width: unset;
    }
  
    
      .requisitos-grid {
        flex-direction: column;
        gap: 30px; /* Menor espacio vertical entre ítems */
    }
    .requisito-item {
        width: 100%;
        min-width: unset;
    }
    
    /* Aseguramos que el círculo se mantenga grande en móvil */
    .requisito-item.circle-item {
        width: 200px; 
        height: 200px; 
    }
    
       .plus-icon {
        transform: rotate(90deg); /* Rota el + para que sea horizontal | */
        margin: 10px 0;
    }
    
    
    .listo-text {
        font-size: 2.5em;
    }
    .info-band-middle {
        font-size: 1.2em;
    }
}