{% extends "base.html" %}

{% block title %}Inicio - Olé Consulting{% endblock %}

{% block content %}
<!-- 1. Hero Section -->
<section class="hero">
    <div class="container text-center">
        <img src="{{ url_for('static', filename='img/LOGO-OLE-CONTULTING-NEGRO.png') }}" alt="Olé Consulting Logo" class="hero-logo mb-4">
        <h1 class="gradient-title">Bienvenido a OLÉ CONSULTING</h1>
        <div class="hero-divider"></div>
    </div>
</section>

<!-- 2. Beneficios clave (3 columnas) -->
<section class="benefits" id="beneficios">
    <div class="container">
        <div class="section-header text-center mb-5">
            <p class="section-intro"><strong>Analizamos tus facturas</strong> con los <strong>mejores precios</strong> del <strong>mercado energético</strong>.</p>
            <p class="section-cta-text"><strong>¡Ahorra hoy!</strong> Solicita tu <strong>estudio gratuito</strong> y <strong>sin compromiso</strong>.</p>
            <a href="{{ url_for('invoice.estudio_gratuito') }}" class="btn-gradient">Solicitar Estudio Gratuito</a>

            <h2>Nuestros beneficios</h2>
            <p>Descubre por qué <strong>confiar en nosotros</strong></p>
        </div>
        <div class="row">
            <!-- Beneficio 1 -->
            <div class="col-md-4">
                <div class="benefit-item">
                    <div class="benefit-icon">
                        <i class="fas fa-piggy-bank"></i>
                    </div>
                    <h3>Ahorro Garantizado</h3>
                    <p>Optimizamos tus contratos y consumos para reducir tus costes energéticos de forma significativa.</p>
                </div>
            </div>
            <!-- Beneficio 2 -->
            <div class="col-md-4">
                <div class="benefit-item">
                    <div class="benefit-icon">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h3>Expertos en Energía</h3>
                    <p>Nuestro equipo de profesionales tiene un profundo conocimiento del sector energético.</p>
                </div>
            </div>
            <!-- Beneficio 3 -->
            <div class="col-md-4">
                <div class="benefit-item">
                    <div class="benefit-icon">
                        <i class="fas fa-user-friends"></i>
                    </div>
                    <h3>Atención Personalizada</h3>
                    <p>Ofrecemos soluciones a medida y un trato cercano para cada uno de nuestros clientes.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 3. Cómo trabajamos -->
<section class="how-we-work" id="servicios">
    <div class="container">
        <!-- 1. TÍTULO Y SUBTÍTULO -->
        <div class="section-header text-center mb-5">
            <h2>Cómo trabajamos</h2>
            <p>Un proceso simple y eficiente para ayudarte a ahorrar</p>
        </div>
        
        <div class="process-steps-container">
            <!-- 2. FILA DE ICONOS -->
            <div class="row icon-row justify-content-center">
                <div class="col-md-4 text-center">
                    <div class="icon-container">
                        <i class="fas fa-file-upload"></i>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="icon-container">
                        <i class="far fa-lightbulb"></i>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="icon-container">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
            </div>
            
            <!-- 3. LÍNEA CON PUNTO MÓVIL (entre iconos y cards) -->
            <div class="timeline-wrapper">
                <div class="timeline-line"></div>
                <div class="dot-wrapper">
                    <div class="moving-dot" id="moving-dot"></div>
                </div>
            </div>
            
            <!-- 4. FILA DE CARDS -->
            <div class="row card-row">
                <!-- Card 1 -->
                <div class="col-md-4">
                    <div class="process-card">
                        <div class="step-number">1</div>
                        <h3>Sube tu factura</h3>
                        <p>Envíanos tu factura eléctrica a través de nuestro formulario seguro.</p>
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="col-md-4">
                    <div class="process-card">
                        <div class="step-number">2</div>
                        <h3>Analizamos</h3>
                        <p>Nuestro equipo analiza y compara para encontrar la mejor opción para ti.</p>
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="col-md-4">
                    <div class="process-card">
                        <div class="step-number">3</div>
                        <h3>Propuesta de ahorro</h3>
                        <p>Recibe nuestra propuesta personalizada con el ahorro estimado.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 4. Ahorro en factura -->
<section class="savings-section py-5 bg-light">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h2>Ahorro en tu factura</h2>
            <p>Resultados reales de nuestros clientes</p>
        </div>

        {% if savings and savings|length > 0 %}
        <div class="savings-marquee-container">
            <div class="savings-marquee-track">
                <!-- Primary set of cards -->
                {% for s in savings %}
                <div class="saving-card">
                    <h4 class="fw-semibold">Caso real · {{ s.initials }}</h4>
                    <div class="saving-data my-3">
                        {% if s.percent %}<span class="saving-percentage text-gradient">-{{ s.percent }}%</span>{% endif %}
                        <span class="saving-amount">{{ "%.2f"|format(s.amount) }} €/año</span>
                    </div>
                    <p class="small text-muted mb-0">Ahorro estimado al optimizar su contrato.</p>
                </div>
                {% endfor %}
                <!-- Cloned set for seamless loop -->
                {% for s in savings %}
                <div class="saving-card">
                    <h4 class="fw-semibold">Caso real · {{ s.initials }}</h4>
                    <div class="saving-data my-3">
                        {% if s.percent %}<span class="saving-percentage text-gradient">-{{ s.percent }}%</span>{% endif %}
                        <span class="saving-amount">{{ "%.2f"|format(s.amount) }} €/año</span>
                    </div>
                    <p class="small text-muted mb-0">Ahorro estimado al optimizar su contrato.</p>
                </div>
                {% endfor %}
            </div>
        </div>
        {% else %}
        <div class="text-center p-4 bg-light rounded-3">
            <p class="mb-0">Aún no hay ejemplos de ahorro para mostrar. ¡Sube tu factura para ser el primero!</p>
        </div>
        {% endif %}

        <div class="text-center mt-5">
            <a href="{{ url_for('invoice.estudio_gratuito') }}" class="btn-gradient btn-lg">Calcula tu ahorro ahora</a>
        </div>
    </div>
</section>

<style>
    .savings-marquee-container {
        overflow: hidden;
        position: relative;
        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }
    .savings-marquee-track {
        display: flex;
        width: fit-content; 
        animation: scroll-right 40s linear infinite;
    }
    .savings-marquee-container:hover .savings-marquee-track {
        animation-play-state: paused;
    }
    @keyframes scroll-right {
        from { transform: translateX(-50%); }
        to { transform: translateX(0%); }
    }
    .saving-card {
        flex: 0 0 auto;
        width: 290px;
        margin: 0 1rem;
        padding: 1.5rem;
        background-color: white;
        border-radius: 16px; /* Esquinas pulidas */
        box-shadow: 0 4px 15px rgba(0,0,0,0.07);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-align: center;
        border: 1px solid #eee;
    }
    .saving-card:hover {
        transform: translateY(-8px); /* Efecto hover */
        box-shadow: 0 12px 25px rgba(0,0,0,0.12);
    }
    .saving-card h4 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    .saving-card .saving-percentage {
        font-size: 2.3rem;
        font-weight: 700;
        display: block;
    }
    .saving-card .saving-amount {
        font-size: 1.2rem;
        font-size: 1.25rem;
        display: block;
        color: #333;
    }
</style>

<!-- 5. Carrusel de comercializadoras -->
<section class="partners-carousel" id="partners">
    <div class="container">
        <div class="section-header text-center mb-4">
            <h2>Trabajamos con las principales comercializadoras</h2>
        </div>
        <div class="logo-marquee-container">
            <div class="logo-marquee-track">
                <!-- Primer conjunto de logos -->
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/ACCIONA.png') }}" alt="Acciona" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/AXPO.png') }}" alt="Axpo" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/ELEIA.png') }}" alt="Eleia" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/ENDESA.png') }}" alt="Endesa" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/IBERDROLA.png') }}" alt="Iberdrola" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/LOGO_OLELUZ-COMER-sRGB - v2-min.png') }}" alt="OléLuz" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/NATURGY.png') }}" alt="Naturgy" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/PLENITUDE.png') }}" alt="Plenitude" class="partner-logo img-fluid">
                </div>
                <!-- Segundo conjunto de logos (duplicado para efecto bucle) -->
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/ACCIONA.png') }}" alt="Acciona" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/AXPO.png') }}" alt="Axpo" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/ELEIA.png') }}" alt="Eleia" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/ENDESA.png') }}" alt="Endesa" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/IBERDROLA.png') }}" alt="Iberdrola" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/LOGO_OLELUZ-COMER-sRGB - v2-min.png') }}" alt="OléLuz" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/NATURGY.png') }}" alt="Naturgy" class="partner-logo img-fluid">
                </div>
                <div class="logo-item">
                    <img src="{{ url_for('static', filename='img/Comer/PLENITUDE.png') }}" alt="Plenitude" class="partner-logo img-fluid">
                </div>
            </div>
        </div>
    </div>
    <div class="section-header text-center mb-4">
    <p>Logotipos propiedad de sus titulares; se muestran con fines identificativos</p>
</div>
</section>

<!-- 6. CTA intermedio -->
<section class="cta-section">
    <div class="container">
        <h2 class="mb-4">Comienza a ahorrar hoy mismo</h2>
        <a href="{{ url_for('invoice.estudio_gratuito') }}" class="btn-gradient">Estudio gratuito</a>
    </div>
</section>

<!-- 7. Blog / Noticias -->
<section class="blog-section">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h2>Blog y Noticias</h2>
            <p>Las últimas actualizaciones del sector energético</p>
        </div>
        <div class="row">
            {% if articles %}
                <!-- Primera fila de artículos (1-3) -->
                {% for article in articles[:3] %}
                <div class="col-md-4 mb-4">
                    <div class="blog-post">
                        {% if article.featured_image %}
                        <img src="{{ url_for('uploaded_file', filename=article.featured_image|replace('/static/uploads/', '')|replace('static/uploads/', '')|replace('/uploads/', '')|replace('uploads/', '')) }}" alt="{{ article.title }}" class="blog-image img-fluid">
                        {% else %}
                        <img src="https://placehold.co/400x200?text=Blog+Post" alt="{{ article.title }}" class="blog-image img-fluid">
                        {% endif %}
                        <div class="blog-content">
                            <h3>{{ article.title }}</h3>
                            <p class="text-muted">{{ article.published_at if article.published_at else article.created_at }}</p>
                            <p>{{ article.summary if article.summary else article.content|truncate(100, true, '...') }}</p>
                            <a href="{{ url_for('blog.article_detail', slug=article.slug) }}" class="text-gradient">Leer más</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
                
                <!-- Segunda fila de artículos (4-6) -->
                {% for article in articles[3:] %}
                <div class="col-md-4 mb-4">
                    <div class="blog-post">
                        {% if article.featured_image %}
                        <img src="{{ url_for('uploaded_file', filename=article.featured_image|replace('/static/uploads/', '')|replace('static/uploads/', '')|replace('/uploads/', '')|replace('uploads/', '')) }}" alt="{{ article.title }}" class="blog-image img-fluid">
                        {% else %}
                        <img src="https://placehold.co/400x200?text=Blog+Post" alt="{{ article.title }}" class="blog-image img-fluid">
                        {% endif %}
                        <div class="blog-content">
                            <h3>{{ article.title }}</h3>
                            <p class="text-muted">{{ article.published_at if article.published_at else article.created_at }}</p>
                            <p>{{ article.summary if article.summary else article.content|truncate(100, true, '...') }}</p>
                            <a href="{{ url_for('blog.article_detail', slug=article.slug) }}" class="text-gradient">Leer más</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <!-- Artículos de respaldo si no hay artículos en la base de datos -->
                <div class="col-md-4 mb-4">
                    <div class="blog-post">
                        <img src="https://placehold.co/400x200?text=Blog+Post+1" alt="Artículo 1" class="blog-image img-fluid">
                        <div class="blog-content">
                            <h3>Cómo ahorrar energía en casa</h3>
                            <p class="text-muted">Próximamente</p>
                            <p>Consejos prácticos para reducir el consumo energético en tu hogar sin renunciar al confort.</p>
                            <a href="{{ url_for('blog.list_articles') }}" class="text-gradient">Ver blog</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="blog-post">
                        <img src="https://placehold.co/400x200?text=Blog+Post+2" alt="Artículo 2" class="blog-image img-fluid">
                        <div class="blog-content">
                            <h3>Novedades en tarifas eléctricas</h3>
                            <p class="text-muted">Próximamente</p>
                            <p>Todo lo que necesitas saber sobre los últimos cambios en la regulación de tarifas eléctricas.</p>
                            <a href="{{ url_for('blog.list_articles') }}" class="text-gradient">Ver blog</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="blog-post">
                        <img src="https://placehold.co/400x200?text=Blog+Post+3" alt="Artículo 3" class="blog-image img-fluid">
                        <div class="blog-content">
                            <h3>Energía renovable y autoconsumo</h3>
                            <p class="text-muted">Próximamente</p>
                            <p>Descubre cómo la energía renovable y el autoconsumo pueden reducir tu factura energética.</p>
                            <a href="{{ url_for('blog.list_articles') }}" class="text-gradient">Ver blog</a>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
        
        <!-- Botón "Ir al blog" (aparece siempre) -->
        <div class="text-center mt-4">
            <a href="{{ url_for('blog.list_articles') }}" class="btn-gradient">Ir al blog</a>
        </div>
    </div>
</section>

<!-- 8. FAQ o "Por qué Olé" -->
<section class="faq-section">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h2>Preguntas frecuentes</h2>
            <p>Todo lo que necesitas saber sobre nuestros servicios</p>
        </div>
        <div class="accordion" id="faqAccordion">
            {% if faqs %}
                {% for faq in faqs %}
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading{{ faq.id }}">
                        <button class="accordion-button {{ 'collapsed' if not loop.first else '' }}" type="button" data-bs-toggle="collapse" 
                                data-bs-target="#collapse{{ faq.id }}" aria-expanded="{{ 'true' if loop.first else 'false' }}" 
                                aria-controls="collapse{{ faq.id }}">
                            {{ faq.question }}
                        </button>
                    </h2>
                    <div id="collapse{{ faq.id }}" class="accordion-collapse collapse {{ 'show' if loop.first else '' }}" 
                         aria-labelledby="heading{{ faq.id }}" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            {{ faq.answer|safe }}
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <!-- Preguntas de respaldo si no hay FAQs en la base de datos -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" 
                                aria-expanded="true" aria-controls="collapseOne">
                            ¿Cómo funciona el servicio de Olé Consulting?
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Nuestro servicio es simple: analizamos tu factura actual, identificamos oportunidades de ahorro y te recomendamos 
                            las mejores opciones disponibles en el mercado, sin coste alguno para ti.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" 
                                aria-expanded="false" aria-controls="collapseTwo">
                            ¿Cuánto puedo ahorrar en mi factura?
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            El ahorro varía según tu situación actual, pero nuestros clientes suelen conseguir entre un 15% y un 30% 
                            de reducción en sus facturas energéticas. Con nuestro estudio personalizado, podrás ver exactamente cuánto puedes ahorrar.
                        </div>
                    </div>
                </div>
                <!-- Nuevas FAQs sobre el proceso del comparador -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" 
                                aria-expanded="false" aria-controls="collapseThree">
                            ¿Cómo inicio el proceso para obtener mi estudio de ahorro?
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Es muy sencillo. Simplemente ve a nuestra sección de "Estudio Gratuito" y proporciona los datos de tu factura eléctrica, ya sea subiendo el archivo de tu factura o introduciendo manualmente los datos clave de consumo y potencia.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFour">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" 
                                aria-expanded="false" aria-controls="collapseFour">
                            ¿Qué sucede si subo mi factura en PDF o imagen?
                        </button>
                    </h2>
                    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Si subes tu factura, nuestro sistema utiliza tecnología OCR (Reconocimiento Óptico de Caracteres) para extraer automáticamente toda la información relevante: consumos, potencia, peajes, etc. Estos datos se validan y organizan para el análisis.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFive">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" 
                                aria-expanded="false" aria-controls="collapseFive">
                            ¿Cómo calculan mi gasto actual?
                        </button>
                    </h2>
                    <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Una vez que tenemos tus datos de consumo y potencia (extraídos de la factura o ingresados por ti), y conociendo los precios de tu tarifa actual, nuestro sistema calcula con precisión cuánto estás pagando en este momento.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingSix">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" 
                                aria-expanded="false" aria-controls="collapseSix">
                            ¿Con qué tarifas comparan mis datos?
                        </button>
                    </h2>
                    <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Comparamos tus datos con las tarifas y precios actualizados que tenemos en nuestro sistema, provenientes de nuestra área de gestión de tarifas. Estas son las opciones que OLE CONSULTING considera más competitivas y beneficiosas para ti.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingSeven">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" 
                                aria-expanded="false" aria-controls="collapseSeven">
                            ¿En qué consiste la simulación para encontrar ahorros?
                        </button>
                    </h2>
                    <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Nuestro calculador energético toma tus datos de consumo y potencia y simula cuánto pagarías con cada una de las tarifas de referencia de nuestro sistema. Así identificamos las opciones que te ofrecen el mayor ahorro.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingEight">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" 
                                aria-expanded="false" aria-controls="collapseEight">
                            ¿Cómo se calcula el ahorro final que me muestran?
                        </button>
                    </h2>
                    <div id="collapseEight" class="accordion-collapse collapse" aria-labelledby="headingEight" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            El ahorro potencial se calcula como la diferencia entre tu gasto actual y el gasto que tendrías con la mejor tarifa (o las mejores tarifas) que encontramos en nuestra simulación. Te preparamos un estudio personalizado con este ahorro.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingNine">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine" 
                                aria-expanded="false" aria-controls="collapseNine">
                            ¿Qué información recibiré en el estudio de ahorro?
                        </button>
                    </h2>
                    <div id="collapseNine" class="accordion-collapse collapse" aria-labelledby="headingNine" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            El estudio te mostrará un resumen de tu gasto actual, la tarifa o tarifas que te recomendamos, un desglose del coste estimado con la nueva tarifa, y el ahorro total (mensual y/o anual) que podrías obtener. También puede incluir gráficos y un llamado a la acción para facilitar tu decisión.
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</section>

<!-- 9. CTA final -->
<section class="final-cta-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h2>¿Listo para empezar a ahorrar?</h2>
                <p>Únete a miles de clientes satisfechos que ya han reducido sus facturas energéticas.</p>
            </div>
            <div class="col-md-4 text-md-end">
                <a href="{{ url_for('invoice.estudio_gratuito') }}" class="btn-gradient">Solicitar Estudio Gratuito</a>
            </div>
        </div>
    </div>
</section>

<!-- El footer ha sido centralizado en base.html -->

{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/faq.js') }}"></script>
{% endblock %}
