@extends('web.layout')
@section('contenidoWeb')
    <!-- Hero Section Renovado -->
    <section class="hero-caasag overflow-hidden position-relative" id="hero">
        <div class="hero-animated-bg"></div>
        <div class="hero-particles"></div>
        <div class="container">
            <div class="row align-items-center min-vh-100">
                <div class="col-lg-6 hero-content" data-aos="fade-right">
                    <div class="hero-badge mb-4">
                        <div class="badge-caasag">
                            <i class="fas fa-handshake me-2"></i>
                            <span>Transformando la Educación</span>
                            <div class="badge-pulse"></div>
                        </div>
                    </div>
                    <h1 class="hero-title-caasag mb-4">
                        Fortalecemos la
                        <span class="text-gradient-caasag">Excelencia Educativa</span>
                        con
                        <span class="brand-caasag">CAASAG</span>
                        <span class="title-symbol">✨</span>
                    </h1>
                    <p class="hero-description-caasag mb-5">
                        Somos una organización comprometida con la innovación educativa,
                        creando alianzas estratégicas que transforman el futuro educativo
                        y empresarial a través de soluciones efectivas.
                    </p>

                    <div class="hero-values mb-5">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="value-item">
                                    <i class="fas fa-lightbulb text-golden me-2"></i>
                                    <span>Innovación Educativa</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="value-item">
                                    <i class="fas fa-users text-blue me-2"></i>
                                    <span>Alianzas Estratégicas</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="value-item">
                                    <i class="fas fa-heart text-golden me-2"></i>
                                    <span>Compromiso Social</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="value-item">
                                    <i class="fas fa-award text-blue me-2"></i>
                                    <span>Excelencia Académica</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="hero-actions">
                        <a href="#mision" class="btn btn-golden-caasag btn-lg me-3">
                            <i class="fas fa-arrow-right me-2"></i>Conoce Nuestra Misión
                        </a>
                        <a href="#contacto" class="btn btn-blue-caasag btn-lg">
                            <i class="fas fa-envelope me-2"></i>Colabora con Nosotros
                        </a>
                    </div>
                </div>

                <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
                    <div class="hero-visual">
                        <div class="main-image-container">
                            <img src="{!! asset('web/assets/img/utilidades/img_caasag_v0.png') !!}" alt="CAASAG Educación" class="main-hero-img">
                            <div class="image-overlay"></div>
                        </div>

                        <!-- Elementos flotantes educativos -->
                        <div class="floating-elements-caasag">
                            <div class="floating-card-caasag card-1">
                                <i class="fas fa-graduation-cap"></i>
                                <span>Educación</span>
                            </div>
                            <div class="floating-card-caasag card-2">
                                <i class="fas fa-chart-network"></i>
                                <span>Consultoría</span>
                            </div>
                            <div class="floating-card-caasag card-3">
                                <i class="fas fa-hands-helping"></i>
                                <span>Desarrollo Social</span>
                            </div>
                            <div class="floating-card-caasag card-4">
                                <i class="fas fa-cogs"></i>
                                <span>Plataforma Digital</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scroll indicator mejorado -->
        <div class="scroll-indicator-caasag">
            <div class="scroll-animation">
                <div class="scroll-dot"></div>
            </div>
            <p class="scroll-text">Descubre más sobre CAASAG</p>
        </div>
    </section>
    <!-- Misión, Visión y Valores -->
    <section class="mission-vision-values py-8" id="mision">
        <div class="container">
            <!-- Misión -->
            <div class="row align-items-center mb-8">
                <div class="col-lg-6" data-aos="fade-right">
                    <div class="content-block">
                        <div class="section-tag">
                            <i class="fas fa-compass me-2"></i>
                            <span>Nuestra Misión</span>
                        </div>
                        <h2 class="section-title-caasag mb-4">Unimos Esfuerzos para Transformar la Educación</h2>
                        <p class="mission-text">
                            Unir esfuerzos entre instituciones educativas para promover el desarrollo académico,
                            tecnológico y humano, mediante alianzas colaborativas que generen impacto positivo
                            y sostenible en la educación local, nacional e internacional y sus comunidades.
                        </p>
                        <div class="mission-highlights">
                            <div class="highlight-item">
                                <i class="fas fa-globe text-golden me-2"></i>
                                <span>Impacto Global</span>
                            </div>
                            <div class="highlight-item">
                                <i class="fas fa-rocket text-blue me-2"></i>
                                <span>Desarrollo Tecnológico</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
                    <div class="image-container-caasag">
                        <img src="{!! asset('web/assets/img/utilidades/img_caasag_v1.png') !!}" alt="Misión CAASAG" class="img-fluid rounded-caasag">
                        <div class="image-decoration">
                            <i class="fas fa-handshake"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Visión -->
            <div class="row align-items-center mb-8">
                <div class="col-lg-6 order-lg-2" data-aos="fade-left">
                    <div class="content-block">
                        <div class="section-tag">
                            <i class="fas fa-eye me-2"></i>
                            <span>Nuestra Visión</span>
                        </div>
                        <h2 class="section-title-caasag mb-4">Liderando la Innovación Educativa</h2>
                        <p class="vision-text">
                            Ser un referente regional en innovación educativa y cooperación académica,
                            que impulse la transformación del sistema educativo a través de alianzas sólidas,
                            tecnología de vanguardia y compromiso social.
                        </p>
                        <div class="vision-elements">
                            <div class="element-card">
                                <i class="fas fa-medal text-golden"></i>
                                <span>Referente Regional</span>
                            </div>
                            <div class="element-card">
                                <i class="fas fa-laptop-code text-blue"></i>
                                <span>Tecnología Avanzada</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 order-lg-1" data-aos="fade-right" data-aos-delay="200">
                    <div class="image-container-caasag">
                        <img src="{!! asset('web/assets/img/utilidades/img_caasag_v2.png') !!}" alt="Visión CAASAG" class="img-fluid rounded-caasag">
                        <div class="image-decoration">
                            <i class="fas fa-telescope"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Valores -->
            <div class="values-section" data-aos="fade-up">
                <div class="section-header text-center mb-6">
                    <div class="section-tag mx-auto">
                        <i class="fas fa-heart me-2"></i>
                        <span>Nuestros Valores</span>
                    </div>
                    <h2 class="section-title-caasag">Principios que Nos Guían</h2>
                    <p class="section-subtitle">Valores fundamentales que definen nuestra forma de trabajar y relacionarnos</p>
                </div>

                <div class="values-grid">
                    <div class="row g-4">
                        <div class="col-lg-3 col-md-6">
                            <div class="value-card" data-aos="zoom-in" data-aos-delay="100">
                                <div class="value-icon">
                                    <i class="fas fa-users"></i>
                                </div>
                                <h5>Colaboración</h5>
                                <p>Creemos en la fuerza del trabajo conjunto para alcanzar metas comunes.</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="value-card" data-aos="zoom-in" data-aos-delay="200">
                                <div class="value-icon">
                                    <i class="fas fa-lightbulb"></i>
                                </div>
                                <h5>Innovación</h5>
                                <p>Impulsamos soluciones creativas y tecnológicas para una educación de calidad.</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="value-card" data-aos="zoom-in" data-aos-delay="300">
                                <div class="value-icon">
                                    <i class="fas fa-hands-helping"></i>
                                </div>
                                <h5>Compromiso Social</h5>
                                <p>Actuamos con responsabilidad y vocación de servicio hacia nuestra comunidad.</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="value-card" data-aos="zoom-in" data-aos-delay="400">
                                <div class="value-icon">
                                    <i class="fas fa-shield-alt"></i>
                                </div>
                                <h5>Ética</h5>
                                <p>Promovemos la honestidad, el respeto y la integridad en todas nuestras acciones.</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="value-card" data-aos="zoom-in" data-aos-delay="500">
                                <div class="value-icon">
                                    <i class="fas fa-trophy"></i>
                                </div>
                                <h5>Excelencia Académica</h5>
                                <p>Fomentamos la mejora continua en todos los procesos formativos.</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="value-card" data-aos="zoom-in" data-aos-delay="600">
                                <div class="value-icon">
                                    <i class="fas fa-handshake"></i>
                                </div>
                                <h5>Honestidad</h5>
                                <p>Actuamos con rectitud, coherencia y verdad en todo momento.</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="value-card" data-aos="zoom-in" data-aos-delay="700">
                                <div class="value-icon">
                                    <i class="fas fa-eye"></i>
                                </div>
                                <h5>Transparencia</h5>
                                <p>Mantenemos procesos claros y abiertos para fortalecer la confianza institucional.</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="value-card" data-aos="zoom-in" data-aos-delay="800">
                                <div class="value-icon">
                                    <i class="fas fa-heart"></i>
                                </div>
                                <h5>Lealtad</h5>
                                <p>Nos mantenemos firmes a nuestros principios, aliados y compromisos educativos.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Servicios Principales -->
    <section class="services-section py-8 bg-light" id="servicios">
        <div class="container">
            <div class="section-header text-center mb-8">
                <div class="section-tag mx-auto">
                    <i class="fas fa-cogs me-2"></i>
                    <span>Nuestros Servicios</span>
                </div>
                <h2 class="section-title-caasag">Transformamos Ideas en Soluciones Efectivas</h2>
                <p class="section-subtitle">Servicios especializados para impulsar el crecimiento sostenible y el bienestar de las comunidades</p>
            </div>

            <div class="services-grid">
                <div class="row g-5">
                    <div class="col-lg-4">
                        <div class="service-card" data-aos="fade-up" data-aos-delay="100">
                            <div class="service-number">01</div>
                            <div class="service-icon">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <h4>Educación</h4>
                            <p>Fortalecemos la calidad educativa con evaluación docente, formación académica y gestión escolar.</p>
                            <div class="service-features">
                                <ul>
                                    <li><i class="fas fa-check-circle text-golden me-2"></i>Evaluación docente integral</li>
                                    <li><i class="fas fa-check-circle text-golden me-2"></i>Formación académica continua</li>
                                    <li><i class="fas fa-check-circle text-golden me-2"></i>Gestión escolar eficiente</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="service-card" data-aos="fade-up" data-aos-delay="200">
                            <div class="service-number">02</div>
                            <div class="service-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <h4>Consultoría</h4>
                            <p>Acompañamos a instituciones y empresas en su transformación estratégica y organizacional.</p>
                            <div class="service-features">
                                <ul>
                                    <li><i class="fas fa-check-circle text-blue me-2"></i>Transformación digital</li>
                                    <li><i class="fas fa-check-circle text-blue me-2"></i>Estrategias organizacionales</li>
                                    <li><i class="fas fa-check-circle text-blue me-2"></i>Optimización de procesos</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="service-card" data-aos="fade-up" data-aos-delay="300">
                            <div class="service-number">03</div>
                            <div class="service-icon">
                                <i class="fas fa-hands-helping"></i>
                            </div>
                            <h4>Desarrollo Social</h4>
                            <p>Ejecutamos proyectos con impacto comunitario, inclusión y formación social.</p>
                            <div class="service-features">
                                <ul>
                                    <li><i class="fas fa-check-circle text-golden me-2"></i>Proyectos comunitarios</li>
                                    <li><i class="fas fa-check-circle text-golden me-2"></i>Programas de inclusión</li>
                                    <li><i class="fas fa-check-circle text-golden me-2"></i>Formación social integral</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Plataforma Digital -->
    <section class="platform-section py-8" id="plataforma">
        <div class="container">
            <div class="section-header text-center mb-8">
                <div class="section-tag mx-auto">
                    <i class="fas fa-laptop-code me-2"></i>
                    <span>Plataforma Digital</span>
                </div>
                <h2 class="section-title-caasag">Sistema Integral de Gestión Educativa</h2>
                <p class="section-subtitle">Tecnología avanzada para optimizar procesos educativos y administrativos</p>
            </div>

            <div class="platform-content">
                <div class="row align-items-center mb-8">
                    <div class="col-lg-6" data-aos="fade-right">
                        <div class="platform-features">
                            <h3 class="mb-4">Moderniza tu Institución Educativa</h3>
                            <p class="platform-description">
                                Nuestra plataforma digital integra todas las funciones necesarias para
                                administrar eficientemente instituciones educativas, desde la gestión
                                de estudiantes hasta el control financiero avanzado.
                            </p>

                            <div class="feature-grid">
                                <div class="feature-item-platform">
                                    <div class="feature-icon-platform">
                                        <i class="fas fa-users"></i>
                                    </div>
                                    <div class="feature-content">
                                        <h5>Gestión de Estudiantes</h5>
                                        <p>Control integral de información académica y personal</p>
                                    </div>
                                </div>

                                <div class="feature-item-platform">
                                    <div class="feature-icon-platform">
                                        <i class="fas fa-chart-bar"></i>
                                    </div>
                                    <div class="feature-content">
                                        <h5>Reportes Inteligentes</h5>
                                        <p>Análisis detallado y reportes en tiempo real</p>
                                    </div>
                                </div>

                                <div class="feature-item-platform">
                                    <div class="feature-icon-platform">
                                        <i class="fas fa-mobile-alt"></i>
                                    </div>
                                    <div class="feature-content">
                                        <h5>Acceso Móvil</h5>
                                        <p>Disponible en cualquier dispositivo, en cualquier momento</p>
                                    </div>
                                </div>

                                <div class="feature-item-platform">
                                    <div class="feature-icon-platform">
                                        <i class="fas fa-shield-alt"></i>
                                    </div>
                                    <div class="feature-content">
                                        <h5>Seguridad Avanzada</h5>
                                        <p>Protección de datos con estándares internacionales</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
                        <div class="platform-demo">
                            <div class="demo-container">
                                <img src="{!! asset('web/assets/img/utilidades/img_caasag_v3.png') !!}" alt="Plataforma CAASAG" class="img-fluid platform-image">
                                <div class="demo-overlay">
                                    <button class="play-button" data-bs-toggle="modal" data-bs-target="#demoModal">
                                        <i class="fas fa-play"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="platform-stats">
                    <div class="row g-4">
                        <div class="col-lg-3 col-md-6">
                            <div class="stat-card-platform" data-aos="zoom-in" data-aos-delay="100">
                                <div class="stat-icon-platform">
                                    <i class="fas fa-school"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 class="stat-number" data-count="150">0</h3>
                                    <p>Instituciones Atendidas</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="stat-card-platform" data-aos="zoom-in" data-aos-delay="200">
                                <div class="stat-icon-platform">
                                    <i class="fas fa-user-graduate"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 class="stat-number" data-count="25000">0</h3>
                                    <p>Estudiantes Registrados</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="stat-card-platform" data-aos="zoom-in" data-aos-delay="300">
                                <div class="stat-icon-platform">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 class="stat-number" data-count="80">0</h3>
                                    <p>% Eficiencia Mejorada</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="stat-card-platform" data-aos="zoom-in" data-aos-delay="400">
                                <div class="stat-icon-platform">
                                    <i class="fas fa-star"></i>
                                </div>
                                <div class="stat-content">
                                    <h3 class="stat-number" data-count="95">0</h3>
                                    <p>% Satisfacción</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Agremiados y Alianzas -->
    <section class="partners-section py-8 bg-light" id="agremiados">
        <div class="container">
            <div class="section-header text-center mb-8">
                <div class="section-tag mx-auto">
                    <i class="fas fa-handshake me-2"></i>
                    <span>Nuestros Agremiados</span>
                </div>
                <h2 class="section-title-caasag">Alianzas Estratégicas para el Crecimiento</h2>
                <p class="section-subtitle">Colaboramos con instituciones líderes para fortalecer el ecosistema educativo</p>
            </div>

            <div class="partners-content">
                <!-- Slider de logos de socios -->
                <div class="partners-slider" data-aos="fade-up">
                    <div class="partners-track">
                        <div class="partner-logo">
                            <div class="logo-placeholder">
                                <img src="{!! asset('web/assets/img/agremiados/cecacs.png') !!}" alt="CECACS" width="100">
                            </div>
                        </div>
                        <div class="partner-logo">
                            <div class="logo-placeholder">
                                <img src="{!! asset('web/assets/img/agremiados/ceeci.png') !!}" alt="CEECI" width="100">
                            </div>
                        </div>
                        <div class="partner-logo">
                            <div class="logo-placeholder">
                                <img src="{!! asset('web/assets/img/agremiados/cesae.png') !!}" alt="CESAE" width="100">
                            </div>
                        </div>
                        <div class="partner-logo">
                            <div class="logo-placeholder">
                                <img src="{!! asset('web/assets/img/agremiados/cencer.png') !!}" alt="CENCER" width="100">
                            </div>
                        </div>
                        <div class="partner-logo">
                            <div class="logo-placeholder">
                                <img src="{!! asset('web/assets/img/agremiados/cultiva.png') !!}" alt="CULTIVA" width="100">
                            </div>
                        </div>
                        <!-- Duplicamos para efecto infinito -->
                        <div class="partner-logo">
                            <div class="logo-placeholder">
                                <img src="{!! asset('web/assets/img/agremiados/hr.png') !!}" alt="HR" width="100">
                            </div>
                        </div>
                        <div class="partner-logo">
                            <div class="logo-placeholder">
                                <img src="{!! asset('web/assets/img/agremiados/usag.png') !!}" alt="USAG" width="100">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Categorías de alianzas -->
                <div class="alliance-categories mt-8">
                    <div class="row g-4">
                        <div class="col-lg-4">
                            <div class="category-card" data-aos="fade-up" data-aos-delay="100">
                                <div class="category-icon">
                                    <i class="fas fa-university"></i>
                                </div>
                                <h4>Instituciones Educativas</h4>
                                <p>Universidades, institutos y centros de formación que comparten nuestra visión educativa.</p>
                                <div class="category-count">
                                    <span class="count-number">25+</span>
                                    <span class="count-label">Instituciones</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="category-card" data-aos="fade-up" data-aos-delay="200">
                                <div class="category-icon">
                                    <i class="fas fa-building"></i>
                                </div>
                                <h4>Sector Empresarial</h4>
                                <p>Empresas comprometidas con el desarrollo profesional y la responsabilidad social.</p>
                                <div class="category-count">
                                    <span class="count-number">40+</span>
                                    <span class="count-label">Empresas</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="category-card" data-aos="fade-up" data-aos-delay="300">
                                <div class="category-icon">
                                    <i class="fas fa-globe"></i>
                                </div>
                                <h4>Organizaciones Internacionales</h4>
                                <p>Alianzas globales para proyectos de impacto social y desarrollo sostenible.</p>
                                <div class="category-count">
                                    <span class="count-number">15+</span>
                                    <span class="count-label">Organizaciones</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Testimonios -->
    <section class="testimonials-section py-8" id="testimonios">
        <div class="container">
            <div class="section-header text-center mb-8">
                <div class="section-tag mx-auto">
                    <i class="fas fa-quote-left me-2"></i>
                    <span>Testimonios</span>
                </div>
                <h2 class="section-title-caasag">Lo que Dicen Nuestros Colaboradores</h2>
                <p class="section-subtitle">Experiencias reales de quienes han confiado en CAASAG</p>
            </div>

            <div class="testimonials-content">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="testimonial-card-main" data-aos="fade-up">
                            <div class="testimonial-content">
                                <div class="quote-icon">
                                    <i class="fas fa-quote-left"></i>
                                </div>
                                <blockquote>
                                    "Excelente acompañamiento. Nos ayudaron a construir un plan de mejora institucional sólido."
                                </blockquote>
                                <div class="testimonial-author">
                                    <div class="author-avatar">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="author-info">
                                        <h5>Carlos T.</h5>
                                        <p>Coordinador Académico</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Testimonios adicionales -->
                <div class="row g-4 mt-6">
                    <div class="col-lg-4">
                        <div class="testimonial-card-small" data-aos="fade-up" data-aos-delay="100">
                            <div class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p>"La plataforma transformó completamente nuestra gestión administrativa."</p>
                            <div class="author">
                                <strong>María G.</strong> - Directora
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="testimonial-card-small" data-aos="fade-up" data-aos-delay="200">
                            <div class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p>"Soporte excepcional y herramientas que realmente funcionan."</p>
                            <div class="author">
                                <strong>Roberto S.</strong> - Administrador
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="testimonial-card-small" data-aos="fade-up" data-aos-delay="300">
                            <div class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p>"CAASAG nos ayudó a digitalizar todos nuestros procesos educativos."</p>
                            <div class="author">
                                <strong>Ana L.</strong> - Coordinadora TI
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Call to Action / Contacto -->
    <section class="contact-cta-section py-8" id="contacto">
        <div class="container">
            <div class="cta-card-caasag">
                <div class="row align-items-center">
                    <div class="col-lg-6" data-aos="fade-right">
                        <div class="cta-content">
                            <h3 class="cta-title-caasag">¿Listo para Colaborar con CAASAG?</h3>
                            <p class="cta-description-caasag">
                                Contáctanos y démosle forma a un proyecto juntos.
                                Transformemos ideas en soluciones efectivas para el futuro educativo.
                            </p>
                            <div class="cta-benefits">
                                <div class="benefit-item-cta">
                                    <i class="fas fa-calendar-check text-golden me-2"></i>
                                    <span>Consulta personalizada gratuita</span>
                                </div>
                                <div class="benefit-item-cta">
                                    <i class="fas fa-handshake text-blue me-2"></i>
                                    <span>Alianzas estratégicas duraderas</span>
                                </div>
                                <div class="benefit-item-cta">
                                    <i class="fas fa-rocket text-golden me-2"></i>
                                    <span>Implementación en tiempo récord</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
                        <div class="contact-form-caasag">
                            <form class="contact-form" id="contactForm">
                                <div class="form-header">
                                    <h4>Iniciemos una Conversación</h4>
                                    <p>Cuéntanos sobre tu proyecto o institución</p>
                                </div>

                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="nombre">Nombre Completo</label>
                                            <input type="text" class="form-control" id="nombre" name="nombre" required>
                                            <i class="fas fa-user form-icon"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="email">Correo Electrónico</label>
                                            <input type="email" class="form-control" id="email" name="email" required>
                                            <i class="fas fa-envelope form-icon"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="telefono">Teléfono</label>
                                            <input type="tel" class="form-control" id="telefono" name="telefono" required>
                                            <i class="fas fa-phone form-icon"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="tipo_organizacion">Tipo de Organización</label>
                                            <select class="form-select" id="tipo_organizacion" name="tipo_organizacion" required>
                                                <option value="">Selecciona una opción</option>
                                                <option value="institucion_educativa">Institución Educativa</option>
                                                <option value="empresa">Empresa</option>
                                                <option value="fundacion">Fundación/ONG</option>
                                                <option value="gobierno">Gobierno</option>
                                                <option value="otro">Otro</option>
                                            </select>
                                            <i class="fas fa-building form-icon"></i>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="organizacion">Nombre de la Organización</label>
                                            <input type="text" class="form-control" id="organizacion" name="organizacion" required>
                                            <i class="fas fa-university form-icon"></i>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="servicio_interes">Servicio de Interés</label>
                                            <select class="form-select" id="servicio_interes" name="servicio_interes" required>
                                                <option value="">¿En qué podemos ayudarte?</option>
                                                <option value="educacion">Servicios Educativos</option>
                                                <option value="consultoria">Consultoría Organizacional</option>
                                                <option value="desarrollo_social">Desarrollo Social</option>
                                                <option value="plataforma_digital">Plataforma Digital</option>
                                                <option value="alianza_estrategica">Alianza Estratégica</option>
                                            </select>
                                            <i class="fas fa-cogs form-icon"></i>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="mensaje">Mensaje</label>
                                            <textarea class="form-control" id="mensaje" name="mensaje" rows="4" placeholder="Cuéntanos más sobre tu proyecto o necesidades..."></textarea>
                                            <i class="fas fa-comment form-icon"></i>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-submit-caasag w-100">
                                            <span class="btn-text">
                                                <i class="fas fa-paper-plane me-2"></i>
                                                Enviar Mensaje
                                            </span>
                                            <span class="btn-loading d-none">
                                                <i class="fas fa-spinner fa-spin me-2"></i>
                                                Enviando...
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal para Demo de Plataforma -->
    <div class="modal fade" id="demoModal" tabindex="-1" aria-labelledby="demoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="demoModalLabel">Demo de la Plataforma CAASAG</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="demo-placeholder">
                        <div class="demo-content">
                            <i class="fas fa-play-circle"></i>
                            <h6>Demo Interactivo de la Plataforma</h6>
                            <p>Aquí se mostraría un video o demo interactivo de la plataforma CAASAG</p>
                            <button class="btn btn-golden-caasag">
                                <i class="fas fa-calendar me-2"></i>Agendar Demo Personalizada
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection