/* landing_assets/css/style.css (Revisión Profunda) */

/* === Importar Fuente === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* === Variables CSS === */
:root {
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-secondary: #64748b;
    --bs-success: #10b981;
    --bs-warning: #f59e0b;
    --bs-info: #3b82f6;
    --bs-dark: #1e293b;
    --bs-light: #f8fafc;
    --text-body: #334155;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --white: #FFFFFF;
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --gradient-light-alt: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%); /* Más sutil */
    --gradient-dark: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    --font-family-sans-serif: 'Poppins', system-ui, -apple-system, sans-serif;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 3px 5px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
     --radius-sm: 0.375rem;
     --radius: 0.5rem;
     --radius-lg: 0.75rem;
     --radius-xl: 1rem;
     --radius-full: 9999px;
}

/* === Base y Tipografía === */
body {
    font-family: var(--font-family-sans-serif);
    font-weight: 400;
    line-height: 1.75; /* Mayor interlineado */
    color: var(--text-body);
    background-color: var(--white);
    padding-top: 75px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Jerarquía tipográfica mejorada */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--bs-dark);
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 1.5rem; /* Más espacio inferior */
}
h1.display-2 { font-size: calc(1.5rem + 2.8vw); font-weight: 800; letter-spacing: -0.02em; } /* Más impactante */
@media (min-width: 1200px) { h1.display-2 { font-size: 3.75rem; } }
h2.h1 { font-size: calc(1.375rem + 1.5vw); font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 1200px) { h2.h1 { font-size: 2.75rem; } }
h2.display-6 { font-size: 2rem;}
h3.h4 { font-weight: 600; margin-bottom: 1.25rem; }

.lead { font-weight: 400; color: var(--text-body); font-size: 1.15rem; margin-bottom: 1.75rem; line-height: 1.6; }
.lead.text-secondary { color: var(--text-body) !important; }
.fw-bolder { font-weight: 800 !important; }
.fw-bold { font-weight: 600 !important; }
.fw-semibold { font-weight: 500 !important; }

/* Mejora de badges para mejor jerarquía */
.badge { padding: 0.5em 1em; font-weight: 500; letter-spacing: 0.01em; }

a { color: var(--bs-primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #3c3aa8; }

/* === Navbar Flotante === */
.landing-navbar {
    background-color: transparent !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.landing-navbar .navbar-brand { color: var(--bs-primary) !important; transition: color 0.3s ease;}
.landing-navbar .nav-link { color: var(--text-body) !important; font-weight: 500; padding: 0.5rem 1rem; border-radius: var(--radius-full); }
.landing-navbar .nav-link:hover { color: var(--bs-primary) !important; background-color: rgba(var(--bs-primary-rgb), 0.05);}
.landing-navbar .nav-link.active { color: var(--bs-primary) !important; font-weight: 600; }
.landing-navbar .btn { transition: all 0.3s ease; }

.landing-navbar.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.97) !important;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* === Hero V3 === */
.hero-section-v3 {
    background-color: #eef2ff; /* Fondo claro base (Indigo light) */
    min-height: 95vh;
    padding-top: 120px; /* Más espacio arriba */
    padding-bottom: 6rem;
    background-image: url('https://soywako.com/leads/public/img/fondoauth.jpg'); /* Imagen de fondo de Unsplash */
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Overlay para mejorar legibilidad del texto */
.hero-section-v3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
}

.hero-section-v3 .container {
    position: relative;
    z-index: 2;
}

nav#landingNav {
    padding: 1rem 2rem;
    top: 0;
    z-index: 1000;
    border: none;
    background-image: linear-gradient(135deg, rgb(99, 102, 241), rgb(139, 92, 246));
}

a.btn.btn-outline-primary.btn-sm.px-3.rounded-pill.lift.ms-2 {
    background: azure;
}
.hero-section-v3 h1 { line-height: 1.2;
color: #ffffff;

 }
.hero-section-v3 .lead { color: #ffffff; }
.hero-section-v3 .text-gradient {
    background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-info) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-image { max-height: 80vh; object-fit: contain;}

/* Formas abstractas (Más sutiles) */
.shape { position: absolute; border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; opacity: 0.3; filter: blur(60px); pointer-events: none; animation: morph 20s ease-in-out infinite both alternate;}
.shape-1 { width: 45vw; height: 45vw; background: rgba(var(--bs-primary-rgb), 0.5); top: -10%; left: -15%; animation-delay: 0s; }
.shape-2 { width: 30vw; height: 30vw; background: rgba(var(--bs-info-rgb), 0.5); bottom: -15%; right: -10%; animation-delay: 5s; }
.shape-3 { /* Eliminado por simplicidad, opcional añadir otro */ }

/* === Secciones Generales === */
.py-6 { padding-top: 6rem !important; padding-bottom: 6rem !important;}
.bg-gradient-light-alt { background: var(--gradient-light-alt); }
.bg-light { background-color: var(--bs-light) !important; }

/* Imagen Holder con Borde Sutil */
.image-holder { position: relative; }
.image-holder::before { /* Efecto de borde sutil */
    content: '';
    position: absolute;
    inset: -5px; /* Ligeramente fuera */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl); /* Más redondeado */
    opacity: 0.5;
    z-index: -1;
}

/* === Cómo Funciona (Acordeón Estilizado) === */
.steps-accordion .accordion-item {
    background-color: transparent;
    border: 0;
    margin-bottom: 1rem;
}
.steps-accordion .accordion-button {
    background-color: var(--white);
    border-radius: var(--radius) !important;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bs-dark);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.steps-accordion .accordion-button:hover {
    background-color: var(--bs-light);
}
.steps-accordion .accordion-button:not(.collapsed) {
     background: var(--gradient-primary);
     color: var(--white);
     box-shadow: var(--shadow);
 }
.steps-accordion .accordion-button .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    font-weight: 700;
    margin-right: 0.75rem;
    color: var(--bs-primary);
    transition: var(--transition);
}
.steps-accordion .accordion-button:not(.collapsed) .step-num {
    background-color: var(--white);
    color: var(--bs-primary);
}
.steps-accordion .accordion-button::after { /* Ocultar ícono default */ display: none;}
.steps-accordion .accordion-body {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    background-color: var(--white);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    margin-top: -1px; /* Para unir visualmente */
    border: 1px solid var(--border-color);
    border-top: none;
}

/* === Simulador Ganancias V3 === */
.calculator-card-v2 { 
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.calculator-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

/* Mejora del slider para hacerlo más interactivo */
.form-range {
    height: 8px;
    border-radius: 4px;
}

.form-range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    background-color: var(--bs-primary);
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* Mejora visual para los CTAs */
.btn-warning {
    background: linear-gradient(45deg, #f59e0b, #fbbf24);
    border: none;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
    transition: all 0.3s ease;
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(245, 158, 11, 0.4);
}

.pulse-grow {
    animation: pulse-grow 2s infinite alternate;
}

@keyframes pulse-grow {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
.calculator-card-v3 .form-range {
    padding: 0; /* Quitar padding default */
    accent-color: var(--bs-primary); /* Color del slider */
}
.calculator-card-v3 #visitas-valor-v3 { min-width: 50px; text-align: right; }

/* === Referidos V3 === */
.referral-section { background: var(--gradient-dark); }
.referral-section .badge { font-size: 0.8rem; }

/* === FAQ V3 === */
.faq-accordion .accordion-button { border-radius: var(--radius) !important; }
.faq-accordion .accordion-button:not(.collapsed) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: var(--bs-primary);
    color: white;
}
.faq-accordion .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.faq-accordion .accordion-body { background-color: #fff; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); border: 1px solid var(--border-color); border-top:0; }

/* === CTA Final V3 Alt === */
.cta-final-section-v3-alt { background-color: var(--bs-light); padding: 8rem 0; }

/* === Footer V3 === */
.footer-v3 { font-size: 0.9rem; }
.footer-v3 .navbar-brand { font-size: 1.25rem; }

/* === Utilidades / Efectos === */
.lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lift:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }

/* Animación Pulso (más sutil) */
.pulse-grow { animation: pulseGrow 2s infinite cubic-bezier(0.4, 0, 0.6, 1); }
@keyframes pulseGrow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Max Viewport Height (para imágenes) */
.max-vh-60 { max-height: 60vh; }

/* === Responsive Ajustes === */
@media (max-width: 991.98px) {
     body { padding-top: 66px;
width: 100%;
      } /* Ajustar si navbar es más pequeño */
     h1.display-2 { font-size: 2.8rem; }
     h2.h1 { font-size: 2.2rem; }
     .hero-section-v3 { padding: 8rem 0 6rem 0; min-height: auto; }
     .py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important;}
     .steps-accordion .accordion-button { font-size: 1rem;}
}
@media (max-width: 767.98px) {
     h1.display-2 { font-size: 2.2rem; }
     h2.h1 { font-size: 1.8rem; }
     .lead { font-size: 1rem;}
     .calculator-card-v3 #visitas-valor-v3 { font-size: 1.5rem;}
     .calculator-card-v3 #ganancia-calculada-v3 { font-size: 2.5rem;}
}