.elementor-kit-45{--e-global-color-primary:#1C244B;--e-global-color-secondary:#F3F5F8;--e-global-color-text:#324A6D;--e-global-color-accent:#467FF7;--e-global-color-60da78b:#02010100;--e-global-color-c696dce:#FFFFFF;--e-global-color-14ef391:#C8D5DC;--e-global-color-764183d:#F9FAFD;--e-global-color-d6cea4e:#FFFFFF;--e-global-color-86b4fcd:#02010100;--e-global-color-57c8da2:#000000CC;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-size:65px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:capitalize;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:1.1em;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:300;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.5em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:capitalize;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0px;--e-global-typography-392b9e0-font-family:"Poppins";--e-global-typography-392b9e0-font-size:22px;--e-global-typography-392b9e0-font-weight:600;--e-global-typography-392b9e0-text-transform:capitalize;--e-global-typography-392b9e0-font-style:normal;--e-global-typography-392b9e0-text-decoration:none;--e-global-typography-392b9e0-line-height:1.2em;--e-global-typography-392b9e0-letter-spacing:0px;--e-global-typography-c05b693-font-family:"Poppins";--e-global-typography-c05b693-font-size:22px;--e-global-typography-c05b693-font-weight:300;--e-global-typography-c05b693-text-transform:none;--e-global-typography-c05b693-font-style:normal;--e-global-typography-c05b693-text-decoration:none;--e-global-typography-c05b693-line-height:1.5em;--e-global-typography-c05b693-letter-spacing:0px;--e-global-typography-6558fb1-font-family:"Poppins";--e-global-typography-6558fb1-font-size:16px;--e-global-typography-6558fb1-font-weight:300;--e-global-typography-6558fb1-text-transform:uppercase;--e-global-typography-6558fb1-font-style:normal;--e-global-typography-6558fb1-text-decoration:none;--e-global-typography-6558fb1-line-height:1.5em;--e-global-typography-6558fb1-letter-spacing:10px;--e-global-typography-92bce3b-font-family:"Poppins";--e-global-typography-92bce3b-font-size:16px;--e-global-typography-92bce3b-font-weight:400;--e-global-typography-92bce3b-text-transform:capitalize;--e-global-typography-92bce3b-font-style:italic;--e-global-typography-92bce3b-text-decoration:underline;--e-global-typography-92bce3b-line-height:1em;--e-global-typography-92bce3b-letter-spacing:0px;--e-global-typography-b2deeae-font-family:"Poppins";--e-global-typography-b2deeae-font-size:85px;--e-global-typography-b2deeae-font-weight:600;--e-global-typography-b2deeae-text-transform:none;--e-global-typography-b2deeae-font-style:normal;--e-global-typography-b2deeae-text-decoration:none;--e-global-typography-b2deeae-line-height:1em;--e-global-typography-b2deeae-letter-spacing:0px;--e-global-typography-fb1a3e0-font-family:"Poppins";--e-global-typography-fb1a3e0-font-size:200px;--e-global-typography-fb1a3e0-font-weight:600;--e-global-typography-fb1a3e0-text-transform:none;--e-global-typography-fb1a3e0-font-style:normal;--e-global-typography-fb1a3e0-text-decoration:none;--e-global-typography-fb1a3e0-line-height:1.2em;--e-global-typography-fb1a3e0-letter-spacing:0px;--e-global-typography-397e168-font-family:"Poppins";--e-global-typography-397e168-font-size:16px;--e-global-typography-397e168-font-weight:400;--e-global-typography-397e168-text-transform:capitalize;--e-global-typography-397e168-font-style:italic;--e-global-typography-397e168-text-decoration:none;--e-global-typography-397e168-line-height:1.3em;--e-global-typography-397e168-letter-spacing:0px;background-color:var( --e-global-color-c696dce );}.elementor-kit-45 e-page-transition{background-color:#FFBC7D;}.elementor-kit-45 a{color:var( --e-global-color-accent );}.elementor-kit-45 a:hover{color:var( --e-global-color-primary );}.elementor-kit-45 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-392b9e0-font-family ), Sans-serif;font-size:var( --e-global-typography-392b9e0-font-size );font-weight:var( --e-global-typography-392b9e0-font-weight );text-transform:var( --e-global-typography-392b9e0-text-transform );font-style:var( --e-global-typography-392b9e0-font-style );text-decoration:var( --e-global-typography-392b9e0-text-decoration );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1600px;}.e-con{--container-max-width:1600px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-45{--e-global-typography-primary-font-size:45px;--e-global-typography-secondary-font-size:25px;--e-global-typography-text-font-size:14px;--e-global-typography-accent-font-size:14px;--e-global-typography-c05b693-font-size:14px;--e-global-typography-6558fb1-font-size:14px;--e-global-typography-92bce3b-font-size:14px;--e-global-typography-b2deeae-font-size:65px;--e-global-typography-fb1a3e0-font-size:145px;--e-global-typography-397e168-font-size:14px;}.elementor-kit-45 h4{font-size:var( --e-global-typography-392b9e0-font-size );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-45{--e-global-typography-primary-font-size:28px;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-size:20px;--e-global-typography-392b9e0-font-size:18px;--e-global-typography-b2deeae-font-size:48px;--e-global-typography-b2deeae-line-height:1em;--e-global-typography-fb1a3e0-font-size:100px;--e-global-typography-fb1a3e0-line-height:1em;}.elementor-kit-45 h4{font-size:var( --e-global-typography-392b9e0-font-size );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nuestra salud vital | Hablemos del Alzheimer</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#5E81AC',
              secondary: '#81A1C1',
              accent: '#88C0D0',
              light: '#ECEFF4',
              dark: '#2E3440'
            }
          }
        }
      }
    </script>
</head>
<body class="bg-light font-sans text-dark">
    <custom-navbar></custom-navbar>
    
    <!-- Hero Section -->
    <section class="relative bg-gradient-to-r from-primary to-accent text-white py-20 px-4 md:px-10 lg:px-20">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6">Hablemos del Alzheimer</h1>
                    <p class="text-xl mb-8">Entenderlo es el primer paso para actuar. Información clara y empática sobre prevención, síntomas y cuidados.</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#sintomas" class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-300 text-center">Conoce los síntomas</a>
                        <a href="#prevencion" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition duration-300 text-center">Métodos de prevención</a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="http://static.photos/medical/640x360/42" alt="Cerebro saludable" class="rounded-xl shadow-2xl max-w-full h-auto">
                </div>
            </div>
        </div>
    </section>

    <!-- Qué es el Alzheimer -->
    <section class="py-16 px-4 md:px-10 lg:px-20 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-primary mb-4">¿Qué es el Alzheimer?</h2>
                <div class="w-24 h-1 bg-secondary mx-auto"></div>
            </div>
            <div class="grid md:grid-cols-2 gap-10 items-center">
                <div>
                    <p class="text-lg mb-6">El Alzheimer es un trastorno cerebral que destruye lentamente la memoria y las habilidades del pensamiento, y eventualmente la capacidad de realizar las tareas más sencillas del día a día.</p>
                    <p class="text-lg mb-6">Los síntomas pueden aparecer hasta 10 años antes de manifestarse completamente. Es la tercera causa de muerte en adultos mayores, después de las enfermedades cardíacas y el cáncer.</p>
                    <div class="bg-accent bg-opacity-10 p-6 rounded-lg border-l-4 border-accent">
                        <i data-feather="alert-triangle" class="text-accent w-8 h-8 mb-3"></i>
                        <h3 class="font-bold text-lg mb-2">No es parte normal del envejecimiento</h3>
                        <p>Aunque el riesgo aumenta con la edad, el Alzheimer no es una consecuencia inevitable del envejecimiento.</p>
                    </div>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl">
                    <h3 class="font-bold text-xl mb-4 text-primary">Prevalencia por edad</h3>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span>60-69 años</span>
                                <span class="font-bold">0.3%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-secondary h-2.5 rounded-full" style="width: 3%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span>70-79 años</span>
                                <span class="font-bold">3.2%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-secondary h-2.5 rounded-full" style="width: 32%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span>80+ años</span>
                                <span class="font-bold">10%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-secondary h-2.5 rounded-full" style="width: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Síntomas -->
    <section id="sintomas" class="py-16 px-4 md:px-10 lg:px-20 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-primary mb-4">Síntomas iniciales</h2>
                <p class="text-lg max-w-2xl mx-auto">Reconocer las primeras señales puede marcar la diferencia en el manejo de la enfermedad.</p>
                <div class="w-24 h-1 bg-secondary mx-auto mt-4"></div>
            </div>
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <i data-feather="activity" class="text-accent w-8 h-8 mb-4"></i>
                    <h3 class="font-bold text-lg mb-2">Cambios emocionales</h3>
                    <p>Ansiedad, euforia, episodios de agresividad o agitación sin motivo aparente.</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <i data-feather="eye-off" class="text-accent w-8 h-8 mb-4"></i>
                    <h3 class="font-bold text-lg mb-2">Alteraciones perceptivas</h3>
                    <p>Ideación delirante, alucinaciones o percepción distorsionada de la realidad.</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <i data-feather="moon" class="text-accent w-8 h-8 mb-4"></i>
                    <h3 class="font-bold text-lg mb-2">Trastornos del sueño</h3>
                    <p>Inversión del ritmo diurno y nocturno, dificultad para dormir o sueño excesivo.</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <i data-feather="navigation" class="text-accent w-8 h-8 mb-4"></i>
                    <h3 class="font-bold text-lg mb-2">Deambulación</h3>
                    <p>Caminar sin rumbo fijo o perderse en lugares conocidos.</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <i data-feather="heart" class="text-accent w-8 h-8 mb-4"></i>
                    <h3 class="font-bold text-lg mb-2">Apatía</h3>
                    <p>Pérdida de interés por actividades cotidianas y desinterés general.</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <i data-feather="alert-circle" class="text-accent w-8 h-8 mb-4"></i>
                    <h3 class="font-bold text-lg mb-2">Pérdida de autonomía</h3>
                    <p>Dificultad para realizar tareas básicas que antes manejaba con facilidad.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Prevención -->
    <section id="prevencion" class="py-16 px-4 md:px-10 lg:px-20 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-primary mb-4">Prevención y salud cerebral</h2>
                <p class="text-lg max-w-2xl mx-auto">Acciones que puedes tomar hoy para cuidar tu cerebro mañana.</p>
                <div class="w-24 h-1 bg-secondary mx-auto mt-4"></div>
            </div>
            <div class="grid md:grid-cols-2 gap-10 items-center">
                <div>
                    <div class="mb-8">
                        <h3 class="font-bold text-xl mb-3 text-primary">Ejercicio mental</h3>
                        <p class="mb-4">Leer regularmente, aprender nuevas habilidades y reducir el tiempo de pantalla estimulan las conexiones neuronales.</p>
                        <div class="flex items-center gap-2 text-accent">
                            <i data-feather="book"></i>
                            <i data-feather="activity"></i>
                            <i data-feather="tablet"></i>
                        </div>
                    </div>
                    <div class="mb-8">
                        <h3 class="font-bold text-xl mb-3 text-primary">Nutrición cerebral</h3>
                        <p class="mb-2">El omega-3 (especialmente DHA) es fundamental para la salud cerebral:</p>
                        <ul class="list-disc pl-5 space-y-1">
                            <li>Constituye hasta el 60% de los ácidos grasos cerebrales</li>
                            <li>Protege contra la degeneración neuronal</li>
                            <li>Equilibra la relación con omega-6</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="font-bold text-xl mb-3 text-primary">Sueño reparador</h3>
                        <p>6-8 horas de sueño de calidad son esenciales para la limpieza de toxinas cerebrales y consolidación de memoria.</p>
                    </div>
                </div>
                <div class="bg-primary bg-opacity-5 p-8 rounded-xl border border-primary border-opacity-20">
                    <h3 class="font-bold text-xl mb-4 text-primary">Factores de riesgo modificables</h3>
                    <div class="space-y-4">
                        <div class="flex items-start gap-3">
                            <i data-feather="x" class="text-red-500 mt-1 flex-shrink-0"></i>
                            <div>
                                <h4 class="font-bold">Sedentarismo</h4>
                                <p class="text-sm">La inactividad física aumenta el riesgo de deterioro cognitivo.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i data-feather="x" class="text-red-500 mt-1 flex-shrink-0"></i>
                            <div>
                                <h4 class="font-bold">Tabaquismo/Vapeo</h4>
                                <p class="text-sm">Fumar y vapear dañan los vasos sanguíneos cerebrales.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i data-feather="x" class="text-red-500 mt-1 flex-shrink-0"></i>
                            <div>
                                <h4 class="font-bold">Obesidad y diabetes</h4>
                                <p class="text-sm">El control metabólico es clave para la salud cerebral.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i data-feather="x" class="text-red-500 mt-1 flex-shrink-0"></i>
                            <div>
                                <h4 class="font-bold">Contaminación ambiental</h4>
                                <p class="text-sm">La exposición crónica a contaminantes afecta la cognición.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i data-feather="x" class="text-red-500 mt-1 flex-shrink-0"></i>
                            <div>
                                <h4 class="font-bold">Discapacidad auditiva</h4>
                                <p class="text-sm">La pérdida auditiva no tratada acelera el deterioro cognitivo.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Diagnóstico -->
    <section class="py-16 px-4 md:px-10 lg:px-20 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <div class="grid md:grid-cols-2 gap-10 items-center">
                <div class="order-2 md:order-1">
                    <h2 class="text-3xl font-bold text-primary mb-4">Diagnóstico temprano</h2>
                    <div class="w-24 h-1 bg-secondary mb-6"></div>
                    <p class="mb-6">El diagnóstico precoz permite implementar estrategias que pueden ralentizar el progreso de la enfermedad y mejorar la calidad de vida.</p>
                    <div class="mb-6">
                        <h3 class="font-bold text-lg mb-2">Factores genéticos</h3>
                        <p>Los genes PS1 y PS2 están asociados con formas hereditarias de Alzheimer. Las mujeres tienen mayor riesgo, especialmente aquellas con historial de síndrome de ovario poliquístico no tratado.</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <h3 class="font-bold text-lg mb-3 text-primary">¿Debo preocuparme?</h3>
                        <p class="mb-4">Olvidar cosas ocasionalmente no significa tener Alzheimer. El estrés, falta de sueño o multitarea excesiva pueden causar olvidos normales.</p>
                        <a href="#contacto" class="inline-flex items-center text-accent font-medium">
                            Consulta a un especialista
                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                        </a>
                    </div>
                </div>
                <div class="order-1 md:order-2">
                    <img src="http://static.photos/medical/640x360/23" alt="Diagnóstico temprano" class="rounded-xl shadow-lg w-full">
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section id="contacto" class="py-16 px-4 md:px-10 lg:px-20 bg-primary text-white">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl font-bold mb-6">¿Tienes dudas o preocupaciones?</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto">La información es el primer paso para el cuidado. Consulta con un profesional de la salud si reconoces varios síntomas persistentes.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#" class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-300">Encuentra un especialista</a>
                <a href="#" class="border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition duration-300">Descarga guía informativa</a>
            </div>
        </div>
    </section>

    <!-- Podcast Section -->
    <section class="py-16 px-4 md:px-10 lg:px-20 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-primary mb-4">Escucha nuestro podcast</h2>
                <p class="text-lg max-w-2xl mx-auto">"Neuroexeltis: Hablemos del Alzheimer" con los doctores Mynor Álvarez y Raúl Batres</p>
                <div class="w-24 h-1 bg-secondary mx-auto mt-4"></div>
            </div>
            <div class="bg-gray-50 rounded-xl p-8 md:p-10 flex flex-col md:flex-row gap-8 items-center">
                <!-- Miniatura que abre el modal -->
                <div class="w-full md:w-1/3">
                    <button 
                        type="button" 
                        data-open-video-modal
                        class="group relative w-full rounded-lg overflow-hidden shadow-xl focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-gray-50"
                    >
                        <img 
                            src="https://img.youtube.com/vi/ZSY_7RP4nfk/hqdefault.jpg" 
                            alt="Podcast Neuroexeltis: Hablemos del Alzheimer" 
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                            loading="lazy"
                        >
                        <div class="absolute inset-0 bg-black/40 group-hover:bg-black/50 transition-colors duration-300"></div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="bg-white/90 group-hover:bg-white rounded-full p-4 md:p-5 shadow-lg transition-colors duration-300 flex items-center justify-center">
                                <i data-feather="play" class="w-6 h-6 md:w-7 md:h-7 text-primary"></i>
                            </div>
                        </div>
                    </button>
                </div>
                <div class="flex-1">
                    <h3 class="font-bold text-2xl mb-3 text-primary">Episodio completo: Entendiendo el Alzheimer</h3>
                    <p class="mb-6">En este episodio, los expertos explican de manera sencilla qué es el Alzheimer, sus síntomas tempranos, factores de riesgo y estrategias de prevención basadas en evidencia científica.</p>
                    <div class="flex flex-wrap gap-4">
                        <button 
                            type="button" 
                            data-open-video-modal
                            class="flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition"
                        >
                            <i data-feather="play"></i>
                            Escuchar ahora
                        </button>
                        <a 
                            href="https://www.youtube.com/watch?v=ZSY_7RP4nfk" 
                            target="_blank" 
                            rel="noopener" 
                            class="flex items-center gap-2 border border-primary text-primary px-4 py-2 rounded-lg hover:bg-primary hover:bg-opacity-5 transition"
                        >
                            <i data-feather="share-2"></i>
                            Ver en YouTube
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <custom-footer></custom-footer>

    <!-- Modal de video YouTube -->
    <div 
        id="videoModal" 
        class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden"
    >
        <div class="bg-black rounded-xl max-w-3xl w-full mx-4 relative overflow-hidden">
            <!-- Botón cerrar -->
            <button 
                type="button" 
                id="closeVideoModal"
                class="absolute top-3 right-3 z-10 bg-white/90 hover:bg-white rounded-full p-1.5 shadow focus:outline-none focus:ring-2 focus:ring-accent"
            >
                <i data-feather="x" class="w-5 h-5 text-dark"></i>
            </button>

            <!-- Contenedor responsivo para el iframe -->
            <div class="relative w-full pt-[56.25%]">
                <iframe 
                    id="videoIframe"
                    class="absolute inset-0 w-full h-full"
                    src=""
                    data-src="https://www.youtube.com/embed/ZSY_7RP4nfk"
                    title="Podcast Alzheimer"
                    frameborder="0"
                    loading="lazy"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                ></iframe>
            </div>
        </div>
    </div>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>

    <!-- Script para manejar modal y lazy loading del video -->
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const modal = document.getElementById('videoModal');
        const iframe = document.getElementById('videoIframe');
        const videoSrc = iframe.getAttribute('data-src');
        const openButtons = document.querySelectorAll('[data-open-video-modal]');
        const closeBtn = document.getElementById('closeVideoModal');/* End custom CSS */