<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Carrusel y Offcanvas en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 680px;">
    <!-- Botón para activar el Offcanvas -->
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h4 class="fw-bold mb-0">Demostración de Componentes</h4>
      <button class="btn btn-outline-dark rounded-pill px-3 fw-semibold shadow-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#menuOffcanvas">
        ☰ Menú Lateral (Offcanvas)
      </button>
    </div>

    <!-- Carrusel de Diapositivas -->
    <div id="carruselEjemplo" class="carousel slide rounded-4 overflow-hidden shadow-sm mb-4" data-bs-ride="carousel">
      <div class="carousel-inner">
        <!-- Diapositiva 1 -->
        <div class="carousel-item active">
          <div class="p-5 text-center text-white" style="background: linear-gradient(135deg, #1e40af, #3b82f6); min-height: 200px;">
            <h3 class="fw-bold mb-2">1. Academia Kilopolis</h3>
            <p class="mb-0">Aprende tecnologías frontend y backend con metodologías ágiles.</p>
          </div>
        </div>

        <!-- Diapositiva 2 -->
        <div class="carousel-item">
          <div class="p-5 text-center text-white" style="background: linear-gradient(135deg, #059669, #10b981); min-height: 200px;">
            <h3 class="fw-bold mb-2">2. Editor en Tiempo Real</h3>
            <p class="mb-0">Ejecuta HTML5, CSS3, JavaScript y Bootstrap 5 sin instalar dependencias.</p>
          </div>
        </div>

        <!-- Diapositiva 3 -->
        <div class="carousel-item">
          <div class="p-5 text-center text-white" style="background: linear-gradient(135deg, #7c3aed, #a855f7); min-height: 200px;">
            <h3 class="fw-bold mb-2">3. Tutoría Sócrates AI</h3>
            <p class="mb-0">Resuelve dudas de código con pedagogía socrática personalizada.</p>
          </div>
        </div>
      </div>

      <!-- Controles Anterior / Siguiente -->
      <button class="carousel-control-prev" type="button" data-bs-target="#carruselEjemplo" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Anterior</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carruselEjemplo" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Siguiente</span>
      </button>
    </div>
  </div>

  <!-- Panel Deslizante Lateral (Offcanvas) -->
  <div class="offcanvas offcanvas-start shadow" tabindex="-1" id="menuOffcanvas" aria-labelledby="offcanvasTitulo">
    <div class="offcanvas-header bg-dark text-white p-3">
      <h5 class="offcanvas-title fw-bold" id="offcanvasTitulo">🏛️ Menú Kilopolis</h5>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
    </div>
    <div class="offcanvas-body p-4">
      <p class="text-secondary small">
        Este panel se despliega suavemente desde el lateral izquierdo mediante <code>.offcanvas-start</code>.
      </p>
      <ul class="list-group list-group-flush mb-4">
        <li class="list-group-item"><a class="text-decoration-none text-dark fw-semibold">Mis Cursos</a></li>
        <li class="list-group-item"><a class="text-decoration-none text-dark fw-semibold">Sandbox Interactivo</a></li>
        <li class="list-group-item"><a class="text-decoration-none text-dark fw-semibold">Certificados</a></li>
      </ul>
      <button class="btn btn-primary w-100 rounded-pill" data-bs-dismiss="offcanvas">
        Cerrar Menú
      </button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>