<section class="idioma-program-detail idioma-kids-detail">
  <a class="idioma-back-link" href="index.php/academico/ingles"><i class="fa fa-arrow-left" aria-hidden="true"></i> Volver a programas de inglés</a>

  <header class="idioma-kids-hero">
    <div class="idioma-kids-hero__content">
      <span class="idioma-kids-eyebrow"><i class="fa fa-child" aria-hidden="true"></i> Kids Starter · 5 y 6 años</span>
      <h1>El inicio perfecto en el mundo del inglés</h1>
      <p>Un programa lúdico y semi-intensivo para que los niños empiecen su recorrido en inglés con actividades visuales, juegos, canciones e historias que despiertan curiosidad sin abrumarlos.</p>
      <div class="idioma-kids-actions">
        <a class="idioma-kids-action idioma-kids-action--primary" href="#brochure-kids-5-6"><i class="fa fa-eye" aria-hidden="true"></i> Ver brochure interactivo</a>
        <a class="idioma-kids-action" href="index.php/inscripciones"><i class="fa fa-pencil" aria-hidden="true"></i> Inscribirme</a>
        <a class="idioma-kids-action" href="index.php/nosotros/contacto"><i class="fa fa-comments" aria-hidden="true"></i> Solicitar asesoría</a>
      </div>
    </div>

    <div class="idioma-kids-stats" aria-label="Datos básicos del programa">
      <div class="idioma-kids-stat"><span>Edad</span><strong>5 a 6 años</strong></div>
      <div class="idioma-kids-stat"><span>Intensidad</span><strong>3 horas semanales</strong></div>
      <div class="idioma-kids-stat"><span>Modalidad</span><strong>Semi-intensivo</strong></div>
      <div class="idioma-kids-stat"><span>Nivel inicial</span><strong>Kids Starter</strong></div>
    </div>
  </header>

  <section id="brochure-kids-5-6" class="idioma-brochure idioma-brochure--magazine idioma-brochure--kids idioma-brochure--fit" data-idioma-brochure data-view="auto" aria-label="Brochure interactivo de Inglés 5 a 6 años">
    <div class="idioma-brochure__topbar">
      <div class="idioma-brochure__brand">
        <span>Brochure Informativo: 5 a 6 años</span>
        <strong data-brochure-title>Kids Starter</strong>
      </div>
      <div class="idioma-brochure__tools" aria-label="Controles del brochure">
        <button type="button" data-brochure-action="contents" title="Ver índice"><i class="fa fa-bars" aria-hidden="true"></i></button>
        <button type="button" data-brochure-action="info" title="Información del brochure"><i class="fa fa-info" aria-hidden="true"></i></button>
        <button type="button" data-brochure-action="listen" title="Escuchar página"><i class="fa fa-volume-up" aria-hidden="true"></i></button>
        <button type="button" data-brochure-action="share" title="Compartir"><i class="fa fa-share-alt" aria-hidden="true"></i></button>
        <button type="button" data-brochure-action="zoom-out" title="Reducir"><i class="fa fa-search-minus" aria-hidden="true"></i></button>
        <button type="button" data-brochure-action="zoom-reset" title="Restablecer tamaño"><i class="fa fa-compress" aria-hidden="true"></i></button>
        <button type="button" data-brochure-action="zoom-in" title="Ampliar"><i class="fa fa-search-plus" aria-hidden="true"></i></button>
        <button type="button" data-brochure-action="fullscreen" title="Pantalla completa"><i class="fa fa-expand" aria-hidden="true"></i></button>
      </div>
      <span class="idioma-brochure__status" data-brochure-status role="status" aria-live="polite"></span>
    </div>

    <div class="idioma-brochure__rail" aria-label="Navegación rápida">
      <button type="button" data-brochure-action="contents" title="Menú"><i class="fa fa-bars" aria-hidden="true"></i></button>
      <button type="button" data-brochure-action="prev" title="Página anterior"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
      <span data-brochure-counter>1 / 6</span>
      <button type="button" data-brochure-action="next" title="Página siguiente"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
    </div>

    <aside class="idioma-brochure__info" aria-label="Información del brochure">
      <button type="button" data-brochure-action="close-panels" title="Cerrar"><i class="fa fa-times" aria-hidden="true"></i></button>
      <span>Centro de Idiomas Unillanos</span>
      <h3>Kids Starter 5 y 6 años</h3>
      <p>Brochure interactivo construido con la información del PDF del programa: edad, intensidad, metodología, beneficios, logros y línea de aprendizaje.</p>
      <a href="index.php/inscripciones">Iniciar inscripción</a>
    </aside>

    <div class="idioma-brochure__shell">
      <aside class="idioma-brochure__contents" aria-label="Índice del brochure">
        <h3>Contenido</h3>
        <button type="button" class="idioma-brochure__thumb" data-brochure-thumb data-brochure-target="0"><span class="idioma-brochure__thumb-preview">01</span><span class="idioma-brochure__thumb-label">Portada: Kids Starter</span></button>
        <button type="button" class="idioma-brochure__thumb" data-brochure-thumb data-brochure-target="1"><span class="idioma-brochure__thumb-preview">02</span><span class="idioma-brochure__thumb-label">Qué es Kids Starter</span></button>
        <button type="button" class="idioma-brochure__thumb" data-brochure-thumb data-brochure-target="2"><span class="idioma-brochure__thumb-preview">03</span><span class="idioma-brochure__thumb-label">3 horas semanales</span></button>
        <button type="button" class="idioma-brochure__thumb" data-brochure-thumb data-brochure-target="3"><span class="idioma-brochure__thumb-preview">04</span><span class="idioma-brochure__thumb-label">Por qué elegirnos</span></button>
        <button type="button" class="idioma-brochure__thumb" data-brochure-thumb data-brochure-target="4"><span class="idioma-brochure__thumb-preview">05</span><span class="idioma-brochure__thumb-label">Logros al finalizar</span></button>
        <button type="button" class="idioma-brochure__thumb" data-brochure-thumb data-brochure-target="5"><span class="idioma-brochure__thumb-preview">06</span><span class="idioma-brochure__thumb-label">Línea de aprendizaje</span></button>
      </aside>

      <div class="idioma-brochure__stage">
        <div class="idioma-brochure__viewport">
          <div class="idioma-brochure__book" data-brochure-book>
            <article class="idioma-brochure-page idioma-brochure-page--cover" data-brochure-page data-title="Portada: Kids Starter">
              <div class="idioma-brochure-page__inner">
                <div class="idioma-brochure-page__logos">
                  <img src="images/logos/logo-unillanos-red.png" alt="Universidad de los Llanos">
                  <img src="images/logos/logo-centro-idiomas-clean.png" alt="Centro de Idiomas">
                </div>
                <span class="idioma-brochure-page__kicker">Para los más pequeños</span>
                <h2>Kids Starter<br><strong>5 y 6 años</strong></h2>
                <p><strong>El inicio perfecto en el mundo del inglés.</strong> Una primera experiencia visual, cercana y divertida para aprender jugando.</p>
                <div class="idioma-compact-facts" aria-label="Datos destacados">
                  <button type="button" data-brochure-target="2"><strong>3 h</strong><span>semanales</span></button>
                  <button type="button" data-brochure-target="3"><strong>Semi</strong><span>intensivo</span></button>
                  <button type="button" data-brochure-target="5"><strong>A1</strong><span>inicio ruta</span></button>
                </div>
                <button type="button" class="idioma-brochure-page__link" data-brochure-target="1">Explorar el brochure <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
              </div>
              <figure class="idioma-brochure-page__visual">
                <img src="images/idiomas/brochures/kids-5-6/children/kid-phone.png" alt="Niña sonriendo durante una actividad de inglés">
              </figure>
            </article>

            <article class="idioma-brochure-page idioma-brochure-page--learning" data-brochure-page data-title="Qué es Kids Starter">
              <div class="idioma-brochure-page__inner">
                <div class="idioma-brochure-page__logos">
                  <img src="images/logos/logo-unillanos-red.png" alt="Universidad de los Llanos">
                  <img src="images/logos/logo-centro-idiomas-clean.png" alt="Centro de Idiomas">
                </div>
                <span class="idioma-brochure-page__kicker">1. Kids Starter</span>
                <h2>Primer contacto con el inglés</h2>
                <p>Los niños de <strong>5 y 6 años</strong> empiezan con actividades lúdicas que los familiarizan con sonidos y palabras del idioma.</p>
                <div class="idioma-info-panel">
                  <strong>Cómo aprenden</strong>
                  <span>Juego, canciones, cuentos y experiencias visuales cortas.</span>
                </div>
                <div class="idioma-compact-list">
                  <span><i class="fa fa-check" aria-hidden="true"></i> Participación visual</span>
                  <span><i class="fa fa-check" aria-hidden="true"></i> Vocabulario cercano</span>
                  <span><i class="fa fa-check" aria-hidden="true"></i> Aprendizaje natural</span>
                </div>
                <button type="button" class="idioma-brochure-page__link" data-brochure-target="2">Ver intensidad <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
              </div>
              <figure class="idioma-brochure-page__visual idioma-brochure-page__visual--small">
                <img src="images/idiomas/brochures/kids-5-6/children/kid-smile.png" alt="Niño sonriendo en una experiencia lúdica de inglés">
              </figure>
            </article>

            <article class="idioma-brochure-page idioma-brochure-page--hours" data-brochure-page data-title="3 horas semanales">
              <div class="idioma-brochure-page__inner">
                <div class="idioma-brochure-page__logos">
                  <img src="images/logos/logo-unillanos-red.png" alt="Universidad de los Llanos">
                  <img src="images/logos/logo-centro-idiomas-clean.png" alt="Centro de Idiomas">
                </div>
                <span class="idioma-brochure-page__kicker">Intensidad recomendada</span>
                <h2>3 horas semanales sin abrumarlos</h2>
                <p>La intensidad permite adaptarse a una lengua extranjera mientras disfrutan actividades que promueven juego, creatividad y confianza.</p>
                <div class="idioma-focus-strip">
                  <div><strong>3 h</strong><span>por semana</span></div>
                  <div><strong>5-6</strong><span>años</span></div>
                  <div><strong>Play</strong><span>aprendizaje natural</span></div>
                </div>
                <button type="button" class="idioma-brochure-page__link" data-brochure-target="3">Ver beneficios <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
              </div>
              <div class="idioma-mini-orbit" aria-hidden="true">
                <span>ABC</span><span>PLAY</span><span>SONG</span>
              </div>
            </article>

            <article class="idioma-brochure-page idioma-brochure-page--why" data-brochure-page data-title="Por qué elegirnos">
              <div class="idioma-brochure-page__inner">
                <div class="idioma-brochure-page__logos">
                  <img src="images/logos/logo-unillanos-red.png" alt="Universidad de los Llanos">
                  <img src="images/logos/logo-centro-idiomas-clean.png" alt="Centro de Idiomas">
                </div>
                <span class="idioma-brochure-page__kicker">Acompañamiento</span>
                <h2>¿Por qué elegirnos?</h2>
                <p>El curso ofrece herramientas esenciales para iniciar el aprendizaje del inglés durante el desarrollo cognitivo y psicomotor.</p>
                <div class="idioma-benefit-stack">
                  <button type="button" data-brochure-target="4"><i class="fa fa-smile-o" aria-hidden="true"></i><strong>Diversión guiada</strong><span>Aprenden con experiencias amables.</span></button>
                  <button type="button" data-brochure-target="4"><i class="fa fa-heart" aria-hidden="true"></i><strong>Ritmo adecuado</strong><span>Progresan sin presión.</span></button>
                  <button type="button" data-brochure-target="5"><i class="fa fa-map-signs" aria-hidden="true"></i><strong>Ruta clara</strong><span>Saben hacia dónde continúan.</span></button>
                </div>
              </div>
            </article>

            <article class="idioma-brochure-page idioma-brochure-page--outcome" data-brochure-page data-title="Logros al finalizar">
              <div class="idioma-brochure-page__inner">
                <div class="idioma-brochure-page__logos">
                  <img src="images/logos/logo-unillanos-red.png" alt="Universidad de los Llanos">
                  <img src="images/logos/logo-centro-idiomas-clean.png" alt="Centro de Idiomas">
                </div>
                <span class="idioma-brochure-page__kicker">Al completar nuestro curso</span>
                <h2>Logros al finalizar</h2>
                <p>El estudiante reconoce vocabulario básico de su entorno diario y fortalece las bases para continuar su formación.</p>
                <div class="idioma-outcome-grid">
                  <span><i class="fa fa-users" aria-hidden="true"></i> Familia</span>
                  <span><i class="fa fa-briefcase" aria-hidden="true"></i> Profesiones</span>
                  <span><i class="fa fa-sort-numeric-asc" aria-hidden="true"></i> Números</span>
                  <span><i class="fa fa-font" aria-hidden="true"></i> Letras</span>
                </div>
                <button type="button" class="idioma-brochure-page__link" data-brochure-target="5">Ver ruta de aprendizaje <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
              </div>
            </article>

            <article class="idioma-brochure-page idioma-brochure-page--route" data-brochure-page data-title="Línea de aprendizaje">
              <div class="idioma-brochure-page__inner">
                <div class="idioma-brochure-page__logos">
                  <img src="images/logos/logo-unillanos-red.png" alt="Universidad de los Llanos">
                  <img src="images/logos/logo-centro-idiomas-clean.png" alt="Centro de Idiomas">
                </div>
                <span class="idioma-brochure-page__kicker">Ruta de formación</span>
                <h2>Línea de aprendizaje</h2>
                <p>Estás iniciando en Kids Starter. Desde aquí el estudiante avanza paso a paso hasta niveles superiores.</p>
                <div class="idioma-learning-route" aria-label="Ruta de aprendizaje">
                  <div class="idioma-learning-route__line" aria-hidden="true"></div>
                  <button type="button" class="idioma-learning-route__step is-current" data-brochure-target="0"><span>1</span><strong>Kids Starter</strong><small>Estás aquí · A1</small></button>
                  <button type="button" class="idioma-learning-route__step"><span>2</span><strong>Pre-Beginners</strong><small>Siguiente · A1</small></button>
                  <button type="button" class="idioma-learning-route__step"><span>3</span><strong>Beginners</strong><small>A1</small></button>
                  <button type="button" class="idioma-learning-route__step"><span>4</span><strong>Breakthrough</strong><small>A2</small></button>
                  <button type="button" class="idioma-learning-route__step"><span>5</span><strong>Teens Waystage</strong><small>B1</small></button>
                  <button type="button" class="idioma-learning-route__step"><span>6</span><strong>Threshold</strong><small>B1</small></button>
                  <button type="button" class="idioma-learning-route__step"><span>7</span><strong>Vantage</strong><small>B2</small></button>
                  <button type="button" class="idioma-learning-route__step"><span>8</span><strong>Advanced</strong><small>C1</small></button>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>

    <div class="idioma-brochure__footer">
      <div class="idioma-brochure__progress" aria-hidden="true"><span data-brochure-progress></span></div>
      <div class="idioma-brochure__nav" aria-label="Navegación del brochure">
        <button type="button" data-brochure-action="prev" title="Página anterior"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
        <span class="idioma-brochure__counter" data-brochure-counter>1 / 6</span>
        <button type="button" data-brochure-action="next" title="Página siguiente"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
      </div>
      <div class="idioma-brochure__dots" aria-label="Ir a página">
        <button type="button" class="idioma-brochure__dot" data-brochure-dot data-brochure-target="0" aria-label="Página 1"></button>
        <button type="button" class="idioma-brochure__dot" data-brochure-dot data-brochure-target="1" aria-label="Página 2"></button>
        <button type="button" class="idioma-brochure__dot" data-brochure-dot data-brochure-target="2" aria-label="Página 3"></button>
        <button type="button" class="idioma-brochure__dot" data-brochure-dot data-brochure-target="3" aria-label="Página 4"></button>
        <button type="button" class="idioma-brochure__dot" data-brochure-dot data-brochure-target="4" aria-label="Página 5"></button>
        <button type="button" class="idioma-brochure__dot" data-brochure-dot data-brochure-target="5" aria-label="Página 6"></button>
      </div>
    </div>
  </section>
</section>