/* ============================================
   VARIABLES Y COLORES
   ============================================ */
:root {
    --mint: #66E6C1;
    --mint-dark: #2AA58B;
    --accent: #FF6B6B;
    --text-dark: #05221d;
    --bg-soft: #f6f9f8;
    --text-muted: #6b7f79;
    --white: #ffffff;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    /* CAMBIO: Nueva tipografía de marca */
    --font-script: 'Pacifico', cursive;
    --font-base: 'Poppins', sans-serif;
}

/* ============================================
   RESET Y ESTILOS BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    background-color: var(--white);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-base);
    font-weight: 700;
    color: var(--text-dark);
}

p {
    color: var(--text-muted);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

button {
    font-family: var(--font-base);
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

/* CAMBIO: Clase helper para la tipografía de marca */
.text-script {
    font-family: var(--font-script);
    font-weight: 400; /* Las fuentes script no suelen necesitar bold */
    color: var(--mint-dark);
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container-max {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .container-max { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container-max { padding: 0 2rem; } }

/* ============================================
   SIDEBAR DECORATION
   ============================================ */
.sidebar-mint {
    position: fixed;
    left: 0;
    top: 0;
    width: 4px;
    height: 100vh;
    background: linear-gradient(180deg, var(--mint) 0%, var(--mint-dark) 100%);
    opacity: 0.3;
    z-index: 0;
    display: none;
}
@media (min-width: 1024px) { .sidebar-mint { display: block; } }

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all 0.3s ease;
    background: transparent;
}
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0; /* CAMBIO: Ajustado padding para el nuevo logo */
}
.navbar-logo img {
    height: 3.5rem; /* CAMBIO: Ajustado para el logo vertical */
    width: auto;
}
.navbar-links {
    display: none;
    gap: 1.5rem; /* CAMBIO: Reducido espacio para que quepa el nuevo enlace */
}
@media (min-width: 768px) { .navbar-links { display: flex; } }
.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
}
.nav-link:hover { color: var(--mint); }
/* --- PEGAR ESTO DENTRO DE @media (max-width: 768px) --- */

    /* 1. Poner todo en fila horizontal */
    .navbar-content {
        flex-direction: row !important; /* Fuerza la fila */
        justify-content: space-between; /* Separa los extremos */
        align-items: center;
        padding: 0.5rem 0; /* Menos altura */
        gap: 0; /* Quitamos huecos grandes */
    }

    /* 2. Ajustar logo y texto para que quepan */
    .navbar-logo {
        gap: 5px;
    }
    .navbar-logo img {
        height: 2rem; /* Logo más pequeño */
    }
    .brand-name {
        font-size: 1.2rem; /* Texto más pequeño */
    }

    /* 3. Ajustar el botón para que quepa a la derecha */
    .navbar .btn-primary {
        width: auto !important; /* Que no ocupe todo el ancho */
        max-width: none;
        margin: 0;
        display: block;
        font-size: 0.75rem; /* Letra pequeña */
        padding: 0.5rem 0.8rem; /* Botón compacto */
        white-space: nowrap; /* Que no se parta el texto */
    }
    
    /* Ajuste para separar el contenido del Hero porque el menú es más fino */
    .hero {
        padding-top: 8rem; 
    }
/* --- NUEVO: Clase para ocultar el navbar al hacer scroll --- */
.navbar {
    /* Aseguramos que tenga transición para el movimiento */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar-hidden {
    transform: translateY(-100%); /* Se mueve hacia arriba fuera de la vista */
}
/* ============================================
   BUTTONS
   ============================================ */
.btn-primary { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; background: linear-gradient(135deg, var(--mint) 0%, var(--mint-dark) 100%); color: var(--text-dark); box-shadow: 0 4px 15px rgba(102, 230, 193, 0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 230, 193, 0.4); }
.btn-secondary { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; border: 2px solid var(--mint); color: var(--mint); background: transparent; }
.btn-secondary:hover { background: var(--mint); color: var(--text-dark); transform: translateY(-2px); }
.btn-plan { width: 100%; padding: 0.75rem; border-radius: 0.5rem; font-weight: 600; border: 2px solid var(--mint); color: var(--mint); background: transparent; }
.btn-plan:hover { background: var(--mint); color: var(--text-dark); }
.btn-submit { width: 100%; padding: 1rem; font-size: 1rem; }

/* ============================================
   HERO SECTION
   ============================================ */
.hero { padding-top: 10rem; padding-bottom: 4rem; background-color: var(--white); position: relative; overflow: hidden; }
@media (min-width: 768px) { .hero { padding-bottom: 6rem; } }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .hero-grid { grid-template-columns: 1fr 1fr; } }

/* CAMBIO: Estilos para el nuevo H1 */
.hero-content .main-hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 800;
}
.hero-content .main-hero-subtitle {
    display: block;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.3;
    color: var(--text-dark);
    font-weight: 400; /* Hacemos el subtítulo más ligero */
}
.hero-content .main-hero-subtitle .text-script {
    font-size: 1.1em; /* Hacemos la fuente script un poco más grande */
    color: var(--mint-dark);
}

.hero-subtitle { font-size: 1.125rem; line-height: 1.8; margin-bottom: 2rem; color: var(--text-muted); }
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.text-gradient { background: linear-gradient(135deg, var(--mint) 0%, var(--mint-dark) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.flow-container { position: relative; }
.flow-container::before { content: ''; position: absolute; top: -80px; right: -80px; width: 256px; height: 256px; background: rgba(102, 230, 193, 0.2); border-radius: 50%; filter: blur(60px); z-index: -1; }

/* ============================================
   FLOW ANIMATION (Sin cambios)
   ============================================ */
.flow-animation { width: 100%; }
.flow-steps { display: flex; justify-content: space-between; align-items: flex-start; position: relative; margin-bottom: 2rem; height: 120px; }
.flow-arrow-bg { position: absolute; top: 40px; left: 10%; width: 80%; height: 4px; background-color: var(--gray-200); z-index: 1; }
.flow-arrow-fill { position: absolute; top: 40px; left: 10%; width: 0%; height: 4px; background: linear-gradient(90deg, var(--mint), var(--mint-dark)); border-radius: 2px; z-index: 2; transition: width 0.5s ease-out; }
.flow-step { display: flex; flex-direction: column; align-items: center; width: 20%; position: relative; z-index: 3; }
.flow-step-icon { width: 80px; height: 80px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 0.5rem; background-color: var(--gray-100); color: var(--gray-400); border: 3px solid transparent; transition: all 0.3s ease; }
.flow-step-icon.active { transform: scale(1.1); box-shadow: 0 8px 24px rgba(102, 230, 193, 0.4); background-color: var(--mint); color: var(--text-dark); border-color: var(--mint); }
.flow-step-icon.past { background-color: var(--white); color: var(--mint); border-color: var(--mint-dark); }
.flow-step-label { font-size: 0.75rem; font-weight: 600; text-align: center; color: var(--gray-400); transition: color 0.3s ease; }
.flow-step-label.active { color: var(--mint-dark); }
.flow-step-label.past { color: var(--text-muted); }
.flow-info { padding: 1.5rem; background: linear-gradient(to right, rgba(102, 230, 193, 0.1), rgba(102, 230, 193, 0.05)); border-radius: 0.75rem; margin-bottom: 1.5rem; border: 1px solid var(--gray-200); }
.flow-info h3 { margin-bottom: 0.5rem; font-size: 1rem; }
.flow-info p { font-size: 0.875rem; }
.flow-progress { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
.flow-progress-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--gray-300); transition: all 0.3s ease; }
.flow-progress-dot.active { width: 2rem; background-color: var(--mint); }
.flow-progress-dot.past { background-color: rgba(102, 230, 193, 0.5); }
.flow-text { text-align: center; font-size: 0.75rem; color: var(--text-muted); }

/* ============================================
   SECTIONS
   ============================================ */
.section { padding: 4rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }
.section-mint { background: linear-gradient(135deg, rgba(102, 230, 193, 0.1) 0%, rgba(42, 165, 139, 0.05) 100%); }
.section-dark { background-color: var(--text-dark); }
.section-dark h2 { color: var(--white); }
.section-dark p { color: var(--gray-300); }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1rem; }
.section-header p { font-size: 1.125rem; max-width: 600px; margin: 0 auto; }

/* ============================================
   CARDS (Anti-NPC)
   ============================================ */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.card { background-color: var(--white); padding: 2rem; border-radius: 0.75rem; border: 1px solid var(--gray-200); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
.card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.card h3 { margin-bottom: 1rem; color: var(--text-dark); }

/* ============================================
   BENEFITS GRID (Anti-NPC)
   ============================================ */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.benefit-card { padding: 2rem; background: linear-gradient(to bottom right, rgba(102, 230, 193, 0.1), rgba(102, 230, 193, 0.05)); border-radius: 0.75rem; border: 1px solid var(--gray-200); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
.benefit-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.benefit-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.benefit-card h3 { margin-bottom: 1rem; font-size: 1.25rem; }

/* ============================================
   NUEVA SECCIÓN DEMO
   ============================================ */
.demo-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .demo-grid { grid-template-columns: 1fr 1fr; } }
.demo-content h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1rem; }
.demo-content h2 .text-script { font-size: 1.1em; color: var(--mint); } /* Estilo script en fondo oscuro */
.demo-subtitle { font-size: 1.125rem; margin-bottom: 2rem; }
.demo-subtitle .text-script { color: var(--white); }
.demo-features { list-style: none; padding: 0; }
.demo-features li { font-size: 1rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; color: var(--white); }
.demo-check { color: var(--mint); font-weight: 600; }
.demo-form-container { background-color: var(--white); padding: 2rem; border-radius: 0.75rem; }
.demo-form { display: grid; gap: 1rem; }
.demo-form input { padding: 0.75rem; border: 1px solid var(--gray-300); border-radius: 0.5rem; font-family: var(--font-base); font-size: 0.95rem; }
.demo-form input:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 2px rgba(102, 230, 193, 0.2); }
.demo-success { display: none; text-align: center; margin-top: 1rem; color: var(--mint-dark); font-weight: 600; }

/* ============================================
   CAMBIO: NUEVA SECCIÓN DIFERENCIADOR
   ============================================ */
.diferenciador-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 768px) {
    .diferenciador-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.diferenciador-content .plan-badge {
    margin-bottom: 1rem;
}
.diferenciador-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}
.diferenciador-content p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
}
.diferenciador-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
}
.diferenciador-list li {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    padding-left: 2rem;
    position: relative;
}
.diferenciador-list li::before {
    content: '✔';
    color: var(--mint);
    font-weight: 600;
    position: absolute;
    left: 0;
    top: 0;
}
.diferenciador-visual img {
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}


/* ============================================
   PLANS GRID (Anti-NPC)
   ============================================ */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.plan-card { background-color: var(--white); padding: 2rem; border-radius: 0.75rem; border: 1px solid var(--gray-200); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; }
.plan-card.featured { border: 2px solid var(--mint); box-shadow: 0 8px 24px rgba(102, 230, 193, 0.3); }
.plan-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); }
.plan-badge { display: inline-block; padding: 0.25rem 0.75rem; background-color: rgba(102, 230, 193, 0.2); color: var(--mint); font-size: 0.75rem; font-weight: 600; border-radius: 9999px; margin-bottom: 1rem; align-self: flex-start; }
.plan-card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.plan-price { font-size: 2.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1rem; }
.plan-price .price-period { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
.plan-price-hidden { font-size: 1.25rem; font-weight: 500; color: var(--text-muted); margin-bottom: 1rem; height: 2.25rem; padding-top: 0.5rem; }
.plan-card p { margin-bottom: 2rem; line-height: 1.6; flex-grow: 1; }
.plan-card button { width: 100%; }

/* ============================================
   TESTIMONIALS (Anti-NPC)
   ============================================ */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.testimonial-card { padding: 2rem; background: linear-gradient(to bottom right, rgba(102, 230, 193, 0.1), rgba(102, 230, 193, 0.05)); border-radius: 0.75rem; border: 1px solid var(--gray-200); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
.testimonial-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.stars { color: var(--mint); margin-bottom: 1rem; font-size: 1.25rem; }
.testimonial-card p { margin-bottom: 1.5rem; font-style: italic; line-height: 1.8; }
.testimonial-author strong { display: block; color: var(--text-dark); margin-bottom: 0.25rem; }
.testimonial-author span { font-size: 0.875rem; color: var(--text-muted); }

/* ============================================
   FAQ (Anti-NPC)
   ============================================ */
.faq-container { max-width: 800px; margin: 0 auto; display: grid; gap: 1rem; }
.faq-item { padding: 1.5rem; background-color: var(--white); border: 1px solid var(--gray-200); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border-radius: 0.75rem; transition: all 0.3s ease; }
.faq-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.faq-item h3 { margin-bottom: 0.75rem; font-size: 1rem; }
.faq-item p { font-size: 0.95rem; line-height: 1.6; }
.faq-item .text-script { font-size: 1.1em; } /* Estilo script en FAQ */

/* ============================================
   CONTACT FORM (Anti-NPC)
   ============================================ */
.contact-container { max-width: 600px; }
.contact-form { display: grid; gap: 1.5rem; margin-top: 2rem; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .form-row { grid-template-columns: 1fr 1fr; } }
.contact-form input, .contact-form select, .contact-form textarea { padding: 0.75rem; border: 1px solid var(--gray-300); border-radius: 0.5rem; font-family: var(--font-base); font-size: 0.95rem; transition: all 0.3s ease; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 2px rgba(102, 230, 193, 0.2); }
.contact-form textarea { resize: none; }

/* ============================================
   FOOTER (Diseño Final Centrado y Limpio)
   ============================================ */
.footer {
    background-color: var(--text-dark);
    color: var(--white);
    padding: 4rem 0 2rem; /* Un poco más de aire arriba */
}

.footer-content {
    display: grid;
    /* Tres columnas iguales para equilibrar el peso visual */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 2rem;
    margin-bottom: 3rem;
    text-align: center; /* Centramos todo el texto */
}

/* Ajustes de la sección de Marca */
.footer-brand-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el logo horizontalmente */
    gap: 0.5rem;
}

.footer-logo {
    height: 6rem; /* Logo un pelín más grande para destacar */
    width: auto;
    display: block;
    margin-bottom: 0.5rem;
}

.footer-brand-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
}

.footer-brand-link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-brand-link:hover {
    color: var(--mint); /* Toque de color al pasar el ratón */
}

/* Ajustes de los Enlaces y Títulos */
.footer-section h4 {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    text-transform: uppercase; /* Un toque elegante */
    letter-spacing: 1px;
    font-weight: 600;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 0.8rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.footer-section a:hover {
    color: var(--mint);
    padding-left: 5px; /* Pequeño movimiento al hacer hover */
}

/* Barra inferior */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 3rem;
    }
    
    /* Reordenamos para que el logo salga al final en móvil si quieres, 
       o lo dejamos al principio (por defecto) */
}
/* ============================================
   ANIMACIÓN REVEAL
   ============================================ */
[data-reveal] { opacity: 0; transition: all 0.7s ease-out; }
[data-reveal="up"] { transform: translateY(32px); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="fade"] { opacity: 0; }
.is-revealed { opacity: 1; transform: translate(0, 0); }


/* ============================================
   RESPONSIVE (CORRECCIONES MÓVIL)
   ============================================ */

/* 1. Fix Global para evitar que la web "baile" a los lados */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
}

@media (max-width: 768px) {
    /* --- NAVBAR MÓVIL: LOGO ARRIBA, BOTÓN CENTRADO ABAJO --- */
    .navbar-content {
        flex-direction: column; /* Pone los elementos uno debajo de otro */
        justify-content: center;
        gap: 1rem; 
        padding: 1rem 0;
    }

    /* El botón "Hablar con un experto" en móvil */
    .navbar-btn {
        width: 100%; 
        max-width: 280px; /* Ancho máximo bonito */
        margin: 0 auto; /* ESTO LO CENTRA PERFECTAMENTE */
        display: block;
        font-size: 0.9rem;
    }

    /* --- HERO --- */
    .hero {
        padding-top: 13rem; /* Más espacio porque el menú ahora es más alto */
        padding-bottom: 3rem;
    }
    .hero-buttons {
        flex-direction: column;
    }
    .hero-buttons button {
        width: 100%;
    }

    /* --- ANIMACIÓN FLOW --- */
    .flow-steps {
        height: auto;
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 2rem;
    }
    .flow-step { width: 100%; }
    .flow-arrow-bg, .flow-arrow-fill { display: none; }
    .flow-step-icon { width: 60px; height: 60px; font-size: 1.5rem; }

    /* --- FORMULARIO DEMO: ARREGLADO Y CENTRADO --- */
    .demo-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .demo-content {
        text-align: center;
        padding: 0 1rem;
    }
    .demo-features li {
        justify-content: center;
    }
    /* Esto centra la caja del formulario */
    .demo-form-container {
        width: 100%;
        margin: 0 auto; 
        box-sizing: border-box;
    }

}
/* ========================
   SECCIÓN AFILIADOS (V3 - Estilo Card Contenida)
   ======================== */

/* 1. EL CONTENEDOR DE LA SECCIÓN (Ahora centra la tarjeta) */
.affiliate-section {
    background-color: #f7f9fc; /* Fondo gris muy suave para la sección */
    padding: 4rem 1rem; /* Espacio arriba/abajo y en los lados para móvil */
    display: flex;
    justify-content: center; /* Centra la tarjeta horizontalmente */
    align-items: center;
}

/* 2. LA TARJETA (Ahora tiene bordes y sombra) */
.affiliate-card {
    background: linear-gradient(135deg, #FFFBF5 0%, #FFF4E6 100%); /* Fondo naranja suave */
    border: 1px solid #FED7AA; /* Borde naranja suave */
    border-radius: 1.5rem; /* ¡BORDES REDONDEADOS! */
    padding: 3rem;
    
    max-width: 1100px; /* Ancho máximo para que no sea invasiva */
    width: 100%;
    
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); /* Sombra para que flote */
    
    display: grid;
    grid-template-columns: 1.5fr 0.5fr; /* 2 columnas (texto | emoji) */
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* 3. Contenido de Texto */
.affiliate-content h2 {
    color: #431407; 
    font-size: 2.5rem;
    margin-top: 10px;
    margin-bottom: 20px;
}

.affiliate-content p {
    color: #78350F;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* 4. Los Pasos (1, 2, 3) */
.affiliate-steps {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 20px;
    margin-bottom: 40px; 
}

.step-item {
    background: #fff;
    padding: 20px; 
    border-radius: 12px;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
    border: 1px solid #FFEDD5;
    text-align: center; 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.step-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.1);
}

.step-icon {
    font-size: 2.2rem; 
    margin-bottom: 10px;
    display: block; 
    line-height: 1; 
}
.step-item strong {
    color: #431407;
}
.step-item div {
    color: #78350F;
}

/* 5. Botones y Enlaces */
.affiliate-cta-area {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px; 
}

.affiliate-btn {
    background-color: #F97316 !important; /* Naranja vibrante */
    color: white !important;
    display: inline-block;
    padding: 15px 40px !important; 
    font-size: 1.1rem !important; 
    font-weight: 700;
    border-radius: 50px !important; 
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(249, 115, 22, 0.3);
}
.affiliate-btn:hover {
    background-color: #EA580C !important;
    transform: translateY(-3px) scale(1.02); 
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.4);
}

.small-text-info {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #78350F;
}
.whatsapp-link {
    color: #F97316;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease;
}
.whatsapp-link:hover {
    color: #EA580C;
    text-decoration: underline;
}

/* 6. Formulario Oculto */
.affiliate-form-container {
    max-width: 600px;
    margin: 40px auto 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 1rem; /* Más redondeado */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #FFEDD5;
    display: none; 
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
.affiliate-form-container.active {
    display: block; 
    transform: translateY(0);
    opacity: 1;
}

#afiliados-form label {
    display: block;
    text-align: left;
    margin-bottom: 8px;
    font-weight: 600;
    color: #431407;
    font-size: 0.95rem;
}
#afiliados-form input[type="text"],
#afiliados-form input[type="tel"],
#afiliados-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #FFEDD5;
    border-radius: 8px;
    font-size: 1rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#afiliados-form input:focus,
#afiliados-form textarea:focus {
    border-color: #F97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
    outline: none;
}
#afiliados-form textarea {
    resize: vertical;
}
#afiliados-form .submit-affiliate-form {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    background-color: #F97316 !important;
    color: white !important;
    border: none !important;
    transition: all 0.3s ease;
}
#afiliados-form .submit-affiliate-form:hover {
    background-color: #EA580C !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.3);
}

/* 7. Emoji Flotante (Cohete) */
.emoji-graphic {
    font-size: 8rem;
    text-align: center;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* 8. Responsive para Móvil */
@media (max-width: 768px) {
    .affiliate-section {
        padding: 2rem 1rem; /* Menos padding en móvil */
    }
    .affiliate-card {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        text-align: center;
        padding: 2rem 1.5rem;
    }
    .affiliate-content h2 {
        font-size: 2rem;
    }
    .affiliate-steps {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        gap: 15px;
    }
    .step-item {
        padding: 15px;
    }
    .emoji-graphic { 
        display: none; /* Oculta el cohete en móvil */
    }
    .affiliate-form-container {
        padding: 20px;
    }
}
/* ============================================
   TARJETA IMPULSO LOCAL (Estilo Premium & Dinámico)
   ============================================ */

/* Variable para el azul de Impulso Local */
:root {
    --blue-il: #2563EB; 
    --blue-il-dark: #1E40AF;
    --neon-blue: #60A5FA; /* Azul claro para el neón */
}

.section-il-wrapper {
    padding: 4rem 0;
    background-color: var(--white);
}

.il-card {
    background: linear-gradient(135deg, var(--blue-il) 0%, var(--blue-il-dark) 100%);
    border-radius: 1rem;
    
    /* CAMBIO 1: MÁS ALTO (Más Padding) */
    padding: 5rem 3rem; 
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.25);
    color: var(--white);
    position: relative;
    overflow: hidden;
    
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Decoración de fondo */
.il-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

/* --- CAMBIO 2: LOGO DINÁMICO CON NEÓN --- */
.il-card-logo img {
    height: 10rem; /* Un poco más grande */
    width: auto;
    
    /* Borde y Neón */
    border-radius: 12px; 
    border: 2px solid var(--neon-blue);
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.5); /* Resplandor inicial */
    
    /* Animación de Flotar */
    animation: floatLogo 4s ease-in-out infinite;
    transition: all 0.3s ease;
    
    /* IMPORTANTE: Sin filtros de color, se ve la imagen original */
}

/* Efecto al pasar el ratón por encima del logo */
.il-card-logo img:hover {
    transform: scale(1.1) rotate(-3deg); /* Crece y gira un poco */
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.9); /* El neón se vuelve más fuerte */
}

/* Definición de la animación de flotar */
@keyframes floatLogo {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } /* Sube 10px */
    100% { transform: translateY(0px); }
}

/* Estilos del Texto */
.il-card-content {
    flex: 1;
}
.il-card-content h3 {
    color: var(--white);
    font-size: 1.8rem; /* Texto un pelín más grande */
    margin-bottom: 0.8rem;
    font-family: var(--font-base);
}
.il-card-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin: 0;
    max-width: 600px;
}

/* --- CAMBIO 3: BOTÓN INVERTIDO --- */
.btn-il {
    background-color: var(--white);
    color: var(--blue-il);
    padding: 1rem 2rem; /* Botón más grande */
    border-radius: 0.5rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--white); /* Borde blanco invisible al principio */
}

/* Estado Hover (Ratón encima) */
.btn-il:hover {
    background-color: transparent; /* Fondo transparente (se ve el azul de la tarjeta) */
    color: var(--white); /* Texto blanco */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); /* Resplandor blanco */
    transform: translateY(-3px);
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 768px) {
    .il-card {
        flex-direction: column;
        text-align: center;
        padding: 3rem 1.5rem;
        gap: 2rem;
    }
    
    .il-card-logo img {
        height: 6rem;
        margin-bottom: 0;
    }
    
    .il-card-action {
        width: 100%;
    }
    
    .btn-il {
        width: 100%;
        text-align: center;
    }
}
/* Estilo para el nombre FasTables en el Navbar */
.brand-name {
    font-family: 'Pacifico', cursive; /* Forzamos la fuente aquí por si la variable falla */
    font-size: 1.8rem;
    color: var(--text-dark);
    line-height: 1;
    margin-top: 5px;
    font-weight: 400; /* Pacifico no necesita bold */
}