Tul xxx Tul

Viewing: index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Brilla | Workshop de Voz y Oratoria</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="assets/img/favicon.png">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            color: #093353;
        }
        .days-row {
            display: flex;
            gap: 20px;
            flex-wrap: nowrap;
            overflow-x: auto;
            padding-bottom: 12px;
            margin-top: 32px;
            scroll-snap-type: x mandatory;
        }
        .days-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 14px;
        }
        .days-dot {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            border: 0;
            padding: 0;
            background: rgba(9, 51, 83, 0.28);
            transition: width 180ms ease, background-color 180ms ease;
        }
        .days-dot.is-active {
            width: 24px;
            background: #3FBEC6;
        }
        .days-row::-webkit-scrollbar {
            height: 8px;
        }
        .days-row::-webkit-scrollbar-thumb {
            background: rgba(9, 51, 83, 0.3);
            border-radius: 999px;
        }
        .day-card {
            flex: 0 0 320px;
            min-width: 320px;
            scroll-snap-align: start;
        }
        @media (min-width: 1200px) {
            .days-row {
                overflow-x: visible;
                display: grid;
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
            .day-card {
                flex: initial;
                min-width: 0;
            }
            .days-dots {
                display: none;
            }
        }
        @media (max-width: 1199.98px) {
            .days-row {
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .days-row::-webkit-scrollbar {
                display: none;
            }
        }
        .bg-brilla {
            background: linear-gradient(135deg, #3FBEC6, #086A88);
            color: #fff;
        }
        .hero-header {
            background-image: url('assets/img/header.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            color: #fff;
        }
        .btn-brilla {
            background-color: #093353;
            color: #fff;
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: 600;
        }
        .btn-brilla:hover {
            background-color: #06253d;
            color: #fff;
        }
        .section {
            padding: 80px 0;
        }
        .presenters-logo {
            max-width: 160px;
            margin: 30px auto 10px;
            display: block;
        }
        .presenters-media {
            width: min(620px, 100%);
            margin: 26px auto 10px;
            position: relative;
        }
        .presenters-media img {
            width: 100%;
            display: block;
        }
        .facilitator-card {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            flex-wrap: wrap;
            margin-top: 30px;
        }
        .facilitator-card img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 24px;
            box-shadow: 0 15px 35px rgba(9, 51, 83, 0.25);
        }
        .facilitator-card .facilitator-info {
            max-width: 360px;
            text-align: left;
        }
        .badge-brilla {
            background-color: #3FBEC6;
            color: #fff;
            padding: 10px 15px;
            border-radius: 20px;
            margin: 5px;
            display: inline-block;
        }
        .price {
            font-size: 3rem;
            font-weight: 700;
            color: #3FBEC6;
        }
        .hero-subtitle {
            font-weight: 600;
            margin-top: 10px;
        }
        .scan-list {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }
        .scan-list li {
            position: relative;
            padding-left: 22px;
            margin: 10px 0;
        }
        .scan-list li::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: #3FBEC6;
            position: absolute;
            left: 0;
            top: 0.55em;
            transform: translateY(-50%);
        }
        .brilla-card {
            border: 0;
            border-radius: 18px;
            box-shadow: 0 12px 30px rgba(9, 51, 83, 0.12);
        }
        .brilla-card .card-body {
            padding: 24px;
        }
        .day-card-inner {
            overflow: hidden;
        }
        .day-card-inner .card-body {
            padding-top: 18px;
            text-align: center;
        }
        .day-badge-wrap {
            text-align: center;
        }
        .day-badge-wrap .badge-brilla {
            white-space: nowrap;
        }
        .day-video-wrap {
            width: 100%;
            aspect-ratio: 3 / 4;
            overflow: hidden;
            background: transparent;
            margin: 0;
        }
        .day-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
            background-color: transparent;
        }
        .ratio {
            position: relative;
            width: 100%;
            min-height: 220px;
        }
        .ratio.ratio-16x9 {
            --bs-aspect-ratio: 56.25%;
        }
        .ratio::before {
            display: block;
            padding-top: var(--bs-aspect-ratio, 56.25%);
            content: "";
        }
        .ratio > * {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .yt-lite {
            width: 100%;
            height: 100%;
            cursor: pointer;
            position: absolute;
            inset: 0;
            border-radius: 16px;
            overflow: hidden;
            background-color: #000;
            background-size: cover;
            background-position: center;
            touch-action: manipulation;
        }
        .yt-lite:focus-visible {
            outline: 3px solid #3FBEC6;
            outline-offset: 4px;
        }
        .yt-lite::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.45));
            pointer-events: none;
        }
        .yt-lite.is-loaded {
            cursor: default;
        }
        .yt-lite.is-loaded::before {
            display: none;
        }
        .yt-play {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            z-index: 1;
            pointer-events: none;
        }
        .yt-play span {
            width: 74px;
            height: 74px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.92);
            display: grid;
            place-items: center;
            box-shadow: 0 18px 40px rgba(0,0,0,0.28);
        }
        .yt-play span::before {
            content: "";
            width: 0;
            height: 0;
            border-left: 18px solid #093353;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            margin-left: 4px;
        }
        .facilitator-slider {
            width: min(320px, 100%);
            aspect-ratio: 1 / 1;
            border-radius: 24px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 15px 35px rgba(9, 51, 83, 0.25);
            margin: 0 auto;
        }
        .facilitator-slide {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 1400ms ease;
        }
        .facilitator-slide.is-active {
            opacity: 1;
        }
        .pill {
            display: inline-block;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(63, 190, 198, 0.15);
            color: #093353;
            font-weight: 600;
            margin: 6px 6px 0 0;
        }
        .pill-grid-row {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: nowrap;
        }
        .pill-grid-row + .pill-grid-row {
            margin-top: 14px;
        }
        @media (max-width: 991.98px) {
            .pill-grid-row {
                flex-wrap: wrap;
            }
        }
        @media (max-width: 767.98px) {
            .hero-header {
                background-image: url('assets/img/headerv.png');
                background-size: contain;
                background-position: center top;
                background-repeat: no-repeat;
                height: min(100vh, calc(100vw * 16 / 9));
                padding: 0 !important;
            }
            .hero-header .container {
                margin-top: 0;
                padding-top: 40vh;
                padding-bottom: 18px;
            }
            .hero-header .hero-subtitle {
                margin-top: 6px;
                font-size: 1.15rem;
            }
            .hero-header .badge-brilla {
                padding: 8px 12px;
            }
            .hero-header .btn-brilla {
                margin-top: 18px !important;
            }
            .hero-hide-mobile {
                display: none !important;
            }
            .pill-grid .pill.pill-wide-mobile {
                width: 100% !important;
            }
        }
        .pill-grid .pill {
            margin: 0;
            width: 220px;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-align: center;
            padding: 16px 16px;
            height: 110px;
            border-radius: 18px;
            background: rgba(9, 51, 83, 0.04);
            border: 2px solid var(--pill-color, #3FBEC6);
        }
        @media (max-width: 991.98px) {
            .pill-grid .pill {
                width: calc(50% - 7px);
            }
        }
        .pill-grid .pill i {
            color: var(--pill-color, #086A88);
            font-size: 2.05rem;
            line-height: 1;
        }
        .pill-label {
            line-height: 1.05;
        }
        .pill-label span {
            display: block;
        }
        .reveal {
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 600ms ease, transform 600ms ease;
            will-change: opacity, transform;
        }
        .reveal.reveal-visible {
            opacity: 1;
            transform: translateY(0);
        }
        @media (prefers-reduced-motion: reduce) {
            .reveal {
                opacity: 1;
                transform: none;
                transition: none;
            }
        }
    </style>
</head>

<body>

<!-- HERO -->
<section class="hero-header text-center section">
    <div class="container">
        <h1 class="display-3 fw-bold hero-hide-mobile">BRILLA</h1>
        <p class="lead mt-3 hero-hide-mobile">Respira naturalmente entrenando tu voz</p>
        <p class="hero-subtitle">25 minutos al día pueden cambiar cómo te escuchan.</p>

        <div class="mt-4">
            <span class="badge-brilla">5 al 9 de enero 2025</span>
            <span class="badge-brilla">Workshop virtual</span>
            <span class="badge-brilla">5 clases de 25 min</span>
        </div>

        <a href="#inscripcion" class="btn btn-brilla mt-5">Inscríbete ahora por USD $10</a>
    </div>
</section>

<!-- PROBLEMA -->
<section class="section reveal">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h2 class="fw-bold">Tu voz es tu principal herramienta</h2>
                <p class="mt-3 mb-2">Muchas personas nunca reciben entrenamiento vocal. Esto suele provocar:</p>
                <ul class="scan-list">
                    <li>Falta de aire al hablar</li>
                    <li>Fatiga vocal</li>
                    <li>Inseguridad al expresarse</li>
                    <li>Desconexión entre lo que piensan y lo que transmiten</li>
                </ul>
                <p class="fw-semibold mt-3 mb-0">No es falta de talento. Es falta de entrenamiento.</p>
            </div>
            <div class="col-md-6 text-center">
                <!-- Video loop -->
                <video class="img-fluid rounded" autoplay muted loop playsinline>
                    <source src="assets/img/coach.mp4" type="video/mp4">
                    Tu navegador no soporta la reproducción de video.
                </video>
            </div>
        </div>
        <div class="text-center mt-5">
            <a href="#inscripcion" class="btn btn-brilla">Inscríbete ahora por USD $10</a>
        </div>
    </div>
</section>

<!-- TRANSFORMACIÓN -->
<section class="bg-light section text-center reveal">
    <div class="container">
        <h2 class="fw-bold">Cuando entrenas tu voz, todo cambia</h2>
        <p class="mt-2 mb-0 fw-semibold">No es solo técnica: es fluidez, seguridad y presencia para expresarte sin miedo.</p>
        <div class="row g-4 mt-4 justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="card brilla-card h-100 text-start">
                    <div class="card-body">
                        <h5 class="fw-bold mb-3">Antes</h5>
                        <ul class="scan-list">
                            <li>Te aceleras o te quedas en blanco al hablar</li>
                            <li>Miedo a que te juzguen (miedo escénico)</li>
                            <li>Dudas de ti y minimizas tu valor (síndrome del impostor)</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-5">
                <div class="card brilla-card h-100 text-start">
                    <div class="card-body">
                        <h5 class="fw-bold mb-3">Después</h5>
                        <ul class="scan-list">
                            <li>Hablas con fluidez, claridad y mejor ritmo</li>
                            <li>Presencia que se nota: seguridad sin forzar</li>
                            <li>Confianza real para mostrarte y sostener tu mensaje</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <p class="fw-semibold mt-4 mb-0">Aquí no finges confianza. La construyes.</p>
        <div class="mt-4">
            <a href="#inscripcion" class="btn btn-brilla">Inscríbete ahora por USD $10</a>
        </div>
    </div>
</section>

<!-- QUÉ ES -->
<section class="section reveal">
    <div class="container">
        <div class="text-center">
            <h2 class="fw-bold">El recorrido de los 5 días</h2>
            <p class="mt-2 mb-0 fw-semibold">Una palabra. Un enfoque. Un avance real.</p>
        </div>

        <div class="days-row">
            <div class="day-card">
                <div class="card brilla-card h-100 day-card-inner">
                    <div class="day-video-wrap">
                        <video class="day-video" autoplay muted loop playsinline preload="metadata">
                            <source src="assets/img/dias/Mauricio.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="card-body">
                        <div class="day-badge-wrap">
                            <p class="badge-brilla mb-3">Día 1 · Respira</p>
                        </div>
                        <p class="mb-0">Aprende a respirar con soporte y calma para liberar tu voz con potencia desde el primer día.</p>
                    </div>
                </div>
            </div>
            <div class="day-card">
                <div class="card brilla-card h-100 day-card-inner">
                    <div class="day-video-wrap">
                        <video class="day-video" autoplay muted loop playsinline preload="metadata">
                            <source src="assets/img/dias/Laura.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="card-body">
                        <div class="day-badge-wrap">
                            <p class="badge-brilla mb-3">Día 2 · Naturalmente</p>
                        </div>
                        <p class="mb-0">Activa tu voz natural con ejercicios orgánicos para hablar sin forzar y sentirte más libre al expresarte.</p>
                    </div>
                </div>
            </div>
            <div class="day-card">
                <div class="card brilla-card h-100 day-card-inner">
                    <div class="day-video-wrap">
                        <video class="day-video" autoplay muted loop playsinline preload="metadata">
                            <source src="assets/img/dias/Carlos.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="card-body">
                        <div class="day-badge-wrap">
                            <p class="badge-brilla mb-3">Día 3 · Entrenando</p>
                        </div>
                        <p class="mb-0">Crea el hábito: postura, energía y gimnasia vocal para que tu comunicación mejore día a día.</p>
                    </div>
                </div>
            </div>
            <div class="day-card">
                <div class="card brilla-card h-100 day-card-inner">
                    <div class="day-video-wrap">
                        <video class="day-video" autoplay muted loop playsinline preload="metadata">
                            <source src="assets/img/dias/Andrés.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="card-body">
                        <div class="day-badge-wrap">
                            <p class="badge-brilla mb-3">Día 4 · Tu Voz</p>
                        </div>
                        <p class="mb-0">Afina tu vocalización y dicción para que cada palabra suene clara, segura y coherente.</p>
                    </div>
                </div>
            </div>
            <div class="day-card">
                <div class="card brilla-card h-100 day-card-inner">
                    <div class="day-video-wrap">
                        <video class="day-video" autoplay muted loop playsinline preload="metadata">
                            <source src="assets/img/dias/Nevin.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="card-body">
                        <div class="day-badge-wrap">
                            <p class="badge-brilla mb-3">Día 5 · Brilla</p>
                        </div>
                        <p class="mb-0">Integra técnica y mensaje para decir lo que importa con presencia, impacto y autenticidad.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="days-dots" aria-label="Paginación del recorrido" role="tablist"></div>

        <p class="text-center fw-semibold mt-4 mb-0">No es información. Es transformación progresiva, día a día.</p>
        <div class="text-center mt-4">
            <a href="#inscripcion" class="btn btn-brilla">Inscríbete ahora por USD $10</a>
        </div>
    </div>
</section>

<!-- VIDEO -->
<section class="bg-light section text-center reveal reveal-visible">
    <div class="container">
        <h2 class="fw-bold">Descubre cómo funciona Brilla</h2>
        <p class="mt-3 mb-0 fw-semibold">Esto no es teoría. Es entrenamiento guiado.</p>
        <div class="ratio ratio-16x9 mt-4">
            <div class="yt-lite" data-videoid="-rCAwBN5LrE" aria-label="Reproducir video" role="button" tabindex="0" style="background-image:url('https://i.ytimg.com/vi/-rCAwBN5LrE/hqdefault.jpg');">
                <div class="yt-play"><span></span></div>
            </div>
        </div>
        <div class="mt-4">
            <a href="#inscripcion" class="btn btn-brilla">Inscríbete ahora por USD $10</a>
        </div>
    </div>
</section>

<!-- METODOLOGÍA -->
<section class="section reveal">
    <div class="container">
        <h2 class="fw-bold text-center">Metodología y contenido</h2>
        <ul class="list-group list-group-flush mt-4">
            <li class="list-group-item">✔ <strong>Live de lanzamiento</strong> → Entiende el método antes de empezar</li>
            <li class="list-group-item">✔ <strong>Clases de 25 minutos</strong> → Fáciles de cumplir incluso con agenda llena</li>
            <li class="list-group-item">✔ <strong>Retroalimentación en vivo</strong> → Corrige y mejora en tiempo real</li>
            <li class="list-group-item">✔ <strong>Insignias + certificación</strong> → Compromiso real con resultados reales</li>
        </ul>
        <div class="text-center mt-5">
            <a href="#inscripcion" class="btn btn-brilla">Inscríbete ahora por USD $10</a>
        </div>
    </div>
</section>

<!-- QUIÉNES SOMOS -->
<section class="bg-light section reveal">
    <div class="container">
        <div class="text-center">
            <h2 class="fw-bold">¿Quiénes lo presentan?</h2>
            <div class="presenters-media">
                <img src="assets/img/logo.png" alt="Logo El Poder de la Palabra" class="img-fluid">
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-10">
                <p class="mt-3 mb-3">
                    <strong>El Poder de la Palabra</strong> es una plataforma de formación creada en 2013, enfocada en comunicación, oratoria, desarrollo personal y emprendimiento.
                </p>
                <p class="mb-0">
                    A través de una metodología práctica y consciente, ha acompañado a más de 200 personas a entrenar su voz, mejorar su comunicación y aplicar lo aprendido en su vida personal, profesional y laboral.
                </p>
            </div>
        </div>

        <div class="row justify-content-center mt-5">
            <div class="col-lg-10">
                <p class="fw-semibold mb-2">En nuestra plataforma desarrollamos capacitaciones en:</p>
                <div class="pill-grid" aria-label="Áreas de formación">
                    <div class="pill-grid-row">
                        <span class="pill pill-wide-mobile" style="--pill-color:#822da0"><i class="bi bi-chat-dots"></i><span class="pill-label"><span>Comunicación</span></span></span>
                        <span class="pill" style="--pill-color:#ff9100"><i class="bi bi-person-heart"></i><span class="pill-label"><span>Desarrollo</span><span>Personal</span></span></span>
                        <span class="pill" style="--pill-color:#ff0000"><i class="bi bi-globe2"></i><span class="pill-label"><span>Plataformas</span><span>Digitales</span></span></span>
                    </div>
                    <div class="pill-grid-row">
                        <span class="pill" style="--pill-color:#000000"><i class="bi bi-camera-video"></i><span class="pill-label"><span>Audiovisuales</span></span></span>
                        <span class="pill" style="--pill-color:#00d100"><i class="bi bi-music-note-beamed"></i><span class="pill-label"><span>Producción</span><span>Musical</span></span></span>
                        <span class="pill" style="--pill-color:#1eafc8"><i class="bi bi-clipboard-data"></i><span class="pill-label"><span>Administración</span></span></span>
                        <span class="pill" style="--pill-color:#ff3c00"><i class="bi bi-rocket-takeoff"></i><span class="pill-label"><span>Emprendimiento</span></span></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row align-items-start g-4 mt-5">
            <div class="col-lg-4">
                <div class="facilitator-slider" aria-hidden="true">
                    <img class="facilitator-slide is-active" src="assets/img/facilitador/A.png" alt="">
                    <img class="facilitator-slide" src="assets/img/facilitador/B.png" alt="">
                    <img class="facilitator-slide" src="assets/img/facilitador/C.png" alt="">
                    <img class="facilitator-slide" src="assets/img/facilitador/D.png" alt="">
                    <img class="facilitator-slide" src="assets/img/facilitador/E.png" alt="">
                    <img class="facilitator-slide" src="assets/img/facilitador/F.png" alt="">
                </div>
            </div>
            <div class="col-lg-8">
                <h4 class="fw-bold mb-2">Nevin Paredes</h4>
                <p class="mb-3">Artista de la Palabra que se expresa a través de la voz, la música y lo visual para comunicar principios que invitan a vivir con propósito y coherencia.</p>
                <p class="mb-3">Con más de 20 años de experiencia en comunicación, ha acompañado proyectos artísticos y empresariales como mentor, estratega y creador, integrando técnica vocal, respiración natural y presencia comunicacional.</p>
                <p class="mb-3">Es fundador de El Poder de la Palabra, así como de CyNe Producciones, eMprendo y eComercial, iniciativas desde las cuales ha ayudado a las personas a entrenar su voz y comunicar con mayor claridad y seguridad.</p>
                <p class="text-center fw-semibold mt-5 mb-0">“No solo se trata de que te escuchen, se trata de que tu voz sea el puente hacia tus sueños.”</p>
            </div>
        </div>

    </div>
</section>

<!-- PRECIO -->
<section id="inscripcion" class="section text-center reveal">
    <div class="container">
        <h2 class="fw-bold">Inversión</h2>
        <p class="price mt-3">USD $10</p>
        <p>Acceso completo a los 5 días del workshop</p>
        <a href="#" class="btn btn-brilla mt-3">Inscríbete ahora por USD $10</a>
        <p class="mt-3 mb-1 fw-semibold">Menos que una cena. Más impacto que muchos cursos largos.</p>
        <p class="mb-0">Acceso inmediato · Certificación · Cupos limitados</p>
    </div>
</section>

<!-- FOOTER -->
<footer class="bg-brilla text-center py-4">
    <p class="mb-0">© 2025 El Poder de la Palabra · Workshop Brilla</p>
</footer>

<script>
    (function () {
        var els = document.querySelectorAll('.reveal');
        if (!('IntersectionObserver' in window)) {
            els.forEach(function (el) { el.classList.add('reveal-visible'); });
            return;
        }

        var observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('reveal-visible');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.12 });

        els.forEach(function (el) { observer.observe(el); });
    })();

    (function () {
        var slides = document.querySelectorAll('.facilitator-slide');
        if (!slides.length) return;

        var index = 0;
        var intervalMs = 5200;

        window.setInterval(function () {
            slides[index].classList.remove('is-active');
            index = (index + 1) % slides.length;
            slides[index].classList.add('is-active');
        }, intervalMs);
    })();

    (function () {
        var el = document.querySelector('.yt-lite');
        if (!el) return;

        function loadVideo() {
            if (el.dataset.loaded) return;

            var id = el.getAttribute('data-videoid');
            if (!id) return;

            var iframe = document.createElement('iframe');
            iframe.src = 'https://www.youtube-nocookie.com/embed/' + id + '?autoplay=1&rel=0&modestbranding=1&playsinline=1';
            iframe.title = 'Video Brilla';
            iframe.loading = 'lazy';
            iframe.referrerPolicy = 'strict-origin-when-cross-origin';
            iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
            iframe.allowFullscreen = true;
            iframe.style.width = '100%';
            iframe.style.height = '100%';
            iframe.style.border = '0';

            el.innerHTML = '';
            el.appendChild(iframe);
            el.dataset.loaded = '1';
            el.classList.add('is-loaded');
        }

        el.addEventListener('click', loadVideo);
        el.addEventListener('keydown', function (e) {
            var key = e.key || e.code;
            if (key === 'Enter' || key === ' ' || key === 'Spacebar') {
                e.preventDefault();
                loadVideo();
            }
        });
    })();

    (function () {
        var row = document.querySelector('.days-row');
        if (!row) return;

        var cards = Array.prototype.slice.call(row.querySelectorAll('.day-card'));
        if (!cards.length) return;

        var dotsWrap = row.parentElement ? row.parentElement.querySelector('.days-dots') : null;
        if (!dotsWrap) return;

        dotsWrap.innerHTML = '';

        var dots = [];
        function setActive(index) {
            for (var i = 0; i < dots.length; i++) {
                if (i === index) dots[i].classList.add('is-active');
                else dots[i].classList.remove('is-active');
            }
        }

        cards.forEach(function (card, index) {
            var btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'days-dot' + (index === 0 ? ' is-active' : '');
            btn.setAttribute('aria-label', 'Ir al Día ' + (index + 1));
            btn.addEventListener('click', function () {
                row.scrollTo({ left: card.offsetLeft, behavior: 'smooth' });
                setActive(index);
            });
            dotsWrap.appendChild(btn);
            dots.push(btn);
        });

        if (!('IntersectionObserver' in window)) return;

        var ratios = new Array(cards.length);
        for (var j = 0; j < ratios.length; j++) ratios[j] = 0;

        var io = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                var idx = cards.indexOf(entry.target);
                if (idx === -1) return;
                ratios[idx] = entry.isIntersecting ? entry.intersectionRatio : 0;
            });

            var best = 0;
            var bestIdx = 0;
            for (var k = 0; k < ratios.length; k++) {
                if (ratios[k] > best) {
                    best = ratios[k];
                    bestIdx = k;
                }
            }
            setActive(bestIdx);
        }, { root: row, threshold: [0.2, 0.35, 0.5, 0.65, 0.8] });

        cards.forEach(function (card) { io.observe(card); });
    })();
</script>

</body>
</html>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64