┌──────────────────────────────────────────────┐
│  NAVBAR       fijo arriba, colapsa en móvil  │  ← Módulo 4
├──────────────────────────────────────────────┤
│  HERO         titular + subtítulo + botones  │  ← Módulos 1 y 2
├──────────────────────────────────────────────┤
│  CIFRAS       franja con números + colores   │  ← Módulo 3
├──────────────────────────────────────────────┤
│  PROGRAMAS    rejilla de 3 tarjetas          │  ← Módulo 5
├──────────────────────────────────────────────┤
│  TESTIMONIOS  carrusel de testimonios        │  ← Módulo 7
├──────────────────────────────────────────────┤
│  PREGUNTAS    acordeón (collapse)            │  ← Módulo 7
├──────────────────────────────────────────────┤
│  INSCRIPCIÓN  modal que se abre con botón    │  ← Módulo 7
├──────────────────────────────────────────────┤
│  CONTACTO     formulario con validación      │  ← Módulo 6
├──────────────────────────────────────────────┤
│  FOOTER       multi-columna + créditos       │  ← Módulo 9
└──────────────────────────────────────────────┘
         ▲ TODO con modo oscuro (Módulo 8)

rutouni/
├── index.html          ← la página (por ahora)
├── css/
│   └── estilos.css     ← tus estilos personalizados (Módulo 8)
└── img/                ← imágenes del proyecto (opcional)

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="RutaUni: preuniversitario virtual para estudiantes de grado 10 y 11 en Colombia. Acompañamiento para el Icfes y el ingreso a la universidad.">
    <title>RutaUni · Acompáñamos tu entrada a la universidad</title>

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

    <!-- Bootstrap Icons (opcional, pero muy útil para la navegación) -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <!-- Bootstrap 5.3.8 · JS (el bundle ya incluye Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Tu hoja de estilos personalizada (vacía por ahora) -->
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>

    <!-- ============ ZONA DONDE VIVIRÁ TU CONTENIDO ============ -->

    <p class="p-5 text-center">¡Hola! Bootstrap 5.3.8 está funcionando 🎉</p>

    <!-- ============ FIN DE LA ZONA DE CONTENIDO ============ -->

</body>
</html>

/* ============================================
   RutaUni · Estilos personalizados
   Lo escribiremos en el Módulo 8
   ============================================ */

    <!-- ============ ZONA DONDE VIVIRÁ TU CONTENIDO ============ -->

    <!-- ===== HERO / PORTADA ===== -->
    <header class="bg-primary text-white py-5">
        <div class="container">
            <div class="row align-items-center g-4">

                <div class="col-12 col-lg-7">
                    <span class="badge bg-warning text-dark mb-3">Cohortes 2026 abiertas</span>
                    <h1 class="display-3 fw-bold">Tu entrada a la universidad empieza aquí</h1>
                    <p class="lead my-4">
                        Acompañamiento virtual para estudiantes de grado 10 y 11: preparación
                        para el Icfes, técnicas de estudio y orientación profesional.
                    </p>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="#inscripcion" class="btn btn-light btn-lg">Quiero inscribirme</a>
                        <a href="#programas" class="btn btn-outline-light btn-lg">Ver programas</a>
                    </div>
                </div>

                <div class="col-12 col-lg-5">
                    <div class="card bg-white text-dark border-0 shadow">
                        <div class="card-body text-center p-4">
                            <i class="bi bi-mortarboard-fill display-4 text-primary"></i>
                            <h2 class="h4 mt-3">Ruta Saber 11</h2>
                            <p class="mb-0">12 semanas · 3 sesiones semanales · 100 % online</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </header>

    <!-- ============ FIN DE LA ZONA DE CONTENIDO ============ -->

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pruebas de grid</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
</head>
<body class="p-4">

    <h2 class="mb-3">A. Control de columnas (col-*)</h2>
    <div class="row g-2 mb-4">
        <div class="col-3"><div class="bg-primary text-white text-center p-3">col-3</div></div>
        <div class="col-3"><div class="bg-primary text-white text-center p-3">col-3</div></div>
        <div class="col-3"><div class="bg-primary text-white text-center p-3">col-3</div></div>
        <div class="col-3"><div class="bg-primary text-white text-center p-3">col-3</div></div>
    </div>

    <h2 class="mb-3">B. Responsive: 1 → 2 → 4 columnas</h2>
    <div class="row g-2 mb-4">
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="bg-success text-white text-center p-3">col-12 col-sm-6 col-lg-3</div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="bg-success text-white text-center p-3">col-12 col-sm-6 col-lg-3</div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="bg-success text-white text-center p-3">col-12 col-sm-6 col-lg-3</div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="bg-success text-white text-center p-3">col-12 col-sm-6 col-lg-3</div>
        </div>
    </div>

    <h2 class="mb-3">C. Anchos fijos con auto (offset)</h2>
    <div class="row g-2 mb-4">
        <div class="col-8 offset-2">
            <div class="bg-warning text-dark text-center p-3">col-8 offset-2 (centrada)</div>
        </div>
    </div>

    <h2 class="mb-3">D. Gutters: separaciones entre columnas</h2>
    <div class="row g-0 mb-4">
        <div class="col-6"><div class="bg-info p-3">g-0 (sin espacio)</div></div>
        <div class="col-6"><div class="bg-info p-3">g-0 (sin espacio)</div></div>
    </div>
    <div class="row g-5">
        <div class="col-6"><div class="bg-dark text-white p-3">g-5 (mucho espacio)</div></div>
        <div class="col-6"><div class="bg-dark text-white p-3">g-5 (mucho espacio)</div></div>
    </div>

    <h2 class="mb-3">E. Alineación vertical (align-items-*)</h2>
    <div class="row align-items-center g-2 mb-4" style="min-height: 140px;">
        <div class="col-4"><div class="bg-secondary text-white text-center p-3">align-items-center</div></div>
        <div class="col-4"><div class="bg-secondary text-white text-center p-5">Más alto</div></div>
        <div class="col-4"><div class="bg-secondary text-white text-center p-3">centrados ↕</div></div>
    </div>

    <h2 class="mb-3">F. Orden (order-*)</h2>
    <div class="row g-2">
        <div class="col-4 order-3"><div class="bg-danger text-white text-center p-3">Primero en el HTML, order-3</div></div>
        <div class="col-4 order-1"><div class="bg-danger text-white text-center p-3">Segundo en el HTML, order-1</div></div>
        <div class="col-4 order-2"><div class="bg-danger text-white text-center p-3">Tercero en el HTML, order-2</div></div>
    </div>

</body>
</html>

    <style>
        .container { background-color: rgba(255, 0, 0, .08); outline: 2px dashed rgba(255,0,0,.4); }
    </style>

0 = 0        1 = .25rem     2 = .5rem     3 = 1rem     4 = 1.5rem     5 = 3rem

    <!-- ===== CIFRAS DESTACADAS ===== -->
    <section class="py-5 bg-body-tertiary">
        <div class="container">
            <div class="row g-4 text-center">

                <div class="col-12 col-sm-6 col-lg-3">
                    <h2 class="display-4 fw-bold text-primary mb-0">+3.200</h2>
                    <p class="text-secondary mb-0">estudiantes causados en 14 ciudades</p>
                </div>

                <div class="col-12 col-sm-6 col-lg-3">
                    <h2 class="display-4 fw-bold text-success mb-0">94 %</h2>
                    <p class="text-secondary mb-0">mejoraron su puntaje en el simulacro</p>
                </div>

                <div class="col-12 col-sm-6 col-lg-3">
                    <h2 class="display-4 fw-bold text-warning mb-0">48</h2>
                    <p class="text-secondary mb-0">docentes de planta</p>
                </div>

                <div class="col-12 col-sm-6 col-lg-3">
                    <h2 class="display-4 fw-bold text-danger mb-0">12</h2>
                    <p class="text-secondary mb-0">semanas por cohorte</p>
                </div>

            </div>
        </div>
    </section>

<h2 class="mb-3">G. Escala de titulares (display)</h2>
<p class="display-1">display-1</p>
<p class="display-2">display-2</p>
<p class="display-3">display-3</p>
<p class="display-4">display-4</p>
<p class="display-5">display-5</p>
<p class="display-6">display-6</p>

<h2 class="mb-3">H. Escala de texto (fs)</h2>
<p class="fs-1">fs-1 · Texto muy grande</p>
<p class="fs-2">fs-2</p>
<p class="fs-3">fs-3</p>
<p class="fs-4">fs-4</p>
<p class="fs-5">fs-5</p>
<p class="fs-6">fs-6</p>

<h2 class="mb-3">I. Encabezados HTML con clases</h2>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

<h2 class="mb-3">J. Formato de texto</h2>
<p class="lead">lead: párrafo destacado, más grande y claro</p>
<p class="fw-bold">fw-bold</p>
<p class="fw-semibold">fw-semibold</p>
<p class="fw-normal">fw-normal</p>
<p class="fw-light">fw-light</p>
<p class="fst-italic">fst-italic</p>
<p class="text-decoration-underline">text-decoration-underline</p>
<p class="text-decoration-line-through">text-decoration-line-through</p>
<p><a href="#">Enlace normal</a> · <a class="link-primary" href="#">link-primary</a> ·
   <a class="link-danger" href="#">link-danger</a></p>
<p><mark class="bg-warning">mark</mark> · <small>small</small> · <abbr title="Significado">abbr</abbr></p>

<h2 class="mb-3">K. Colores y fondos</h2>
<div class="row g-2">
    <div class="col-6 col-md-3"><div class="bg-primary text-white p-3">bg-primary</div></div>
    <div class="col-6 col-md-3"><div class="bg-secondary p-3">bg-secondary</div></div>
    <div class="col-6 col-md-3"><div class="bg-success text-white p-3">bg-success</div></div>
    <div class="col-6 col-md-3"><div class="bg-danger text-white p-3">bg-danger</div></div>
    <div class="col-6 col-md-3"><div class="bg-warning text-dark p-3">bg-warning</div></div>
    <div class="col-6 col-md-3"><div class="bg-info text-dark p-3">bg-info</div></div>
    <div class="col-6 col-md-3"><div class="bg-light border p-3">bg-light</div></div>
    <div class="col-6 col-md-3"><div class="bg-dark text-white p-3">bg-dark</div></div>
</div>

<h2 class="mb-3">L. Colores sutiles (funcionan en modo oscuro)</h2>
<div class="row g-2">
    <div class="col-6 col-md-3"><div class="bg-primary-subtle text-primary-emphasis p-3">primary-subtle</div></div>
    <div class="col-6 col-md-3"><div class="bg-success-subtle text-success-emphasis p-3">success-subtle</div></div>
    <div class="col-6 col-md-3"><div class="bg-warning-subtle text-warning-emphasis p-3">warning-subtle</div></div>
    <div class="col-6 col-md-3"><div class="bg-danger-subtle text-danger-emphasis p-3">danger-subtle</div></div>
</div>

<h2 class="mb-3">M. Utilidades de display, flex y sombras</h2>
<div class="row g-2 mb-3">
    <div class="col-md-4 d-none d-md-block"><div class="bg-light border p-3">Solo visible desde md</div></div>
    <div class="col-md-4 d-lg-none"><div class="bg-light border p-3">Oculto desde lg en adelante</div></div>
    <div class="col-md-4"><div class="bg-light border p-3">Siempre visible</div></div>
</div>
<div class="d-flex justify-content-between align-items-center border p-3 mb-3">
    <span>justify-content-between</span>
    <span class="d-none d-sm-inline">align-items-center</span>
    <span>gap-3</span>
</div>
<div class="d-flex flex-column flex-sm-row gap-2 mb-3">
    <div class="bg-primary text-white p-2 flex-fill">flex-fill</div>
    <div class="bg-primary text-white p-2 flex-fill">flex-fill</div>
    <div class="bg-primary text-white p-2 flex-fill">flex-fill</div>
</div>
<div class="row g-3">
    <div class="col-md-4"><div class="shadow p-3">shadow</div></div>
    <div class="col-md-4"><div class="shadow-sm p-3">shadow-sm</div></div>
    <div class="col-md-4"><div class="shadow-lg p-3">shadow-lg</div></div>
</div>
<div class="border rounded rounded-3 rounded-top-0 p-3 mt-3">
    border · rounded · rounded-3 · rounded-top-0
</div>

getComputedStyle(document.documentElement).getPropertyValue('--bs-primary')

                <div class="col-12 col-lg-7">
                    <span class="badge bg-warning text-dark mb-3">Cohortes 2026 abiertas</span>
                    <h1 class="display-3 fw-bold lh-1">Tu entrada a la universidad empieza aquí</h1>
                    <p class="lead my-4 text-white-50">
                        Acompañamiento virtual para estudiantes de grado 10 y 11: preparación
                        para el Icfes, técnicas de estudio y orientación profesional.
                    </p>
                    <div class="d-flex flex-wrap gap-2 mb-4">
                        <a href="#inscripcion" class="btn btn-light btn-lg px-4">Quiero inscribirme</a>
                        <a href="#programas" class="btn btn-outline-light btn-lg px-4">Ver programas</a>
                    </div>
                    <ul class="list-unstyled d-flex flex-wrap gap-4 small mb-0">
                        <li><i class="bi bi-check-circle-fill text-warning"></i> Clases en vivo y grabadas</li>
                        <li><i class="bi bi-check-circle-fill text-warning"></i> Plan de estudio semanal</li>
                        <li><i class="bi bi-check-circle-fill text-warning"></i> Sin costo de matrícula</li>
                    </ul>
                </div>

    <!-- ===== NAVBAR ===== -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top shadow-sm">
        <div class="container">

            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <i class="bi bi-compass fs-3 text-info"></i>
                <span class="fw-bold">RutaUni</span>
            </a>

            <button class="navbar-toggler" type="button"
                    data-bs-toggle="collapse" data-bs-target="#menuPrincipal"
                    aria-controls="menuPrincipal" aria-expanded="false" aria-label="Abrir el menú">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="menuPrincipal">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center gap-lg-2">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Inicio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#programas">Programas</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#testimonios">Testimonios</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#preguntas">Preguntas</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contacto">Contacto</a>
                    </li>
                    <li class="nav-item ms-lg-2">
                        <a href="#inscripcion" class="btn btn-info text-dark fw-semibold px-3">
                            Inscríbirme
                        </a>
                    </li>
                </ul>

                <form class="d-none d-lg-block ms-lg-3" role="search">
                    <input class="form-control form-control-sm" type="search"
                           placeholder="Buscar" aria-label="Buscar en el sitio">
                </form>
            </div>

        </div>
    </nav>

/* Desplazamiento suave al usar anclas (respeta la preferencia del sistema) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem; /* deja espacio para que el navbar fijo no tape el título */
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Programas</a>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Opción 1</a></li>
    </ul>
</li>

    <!-- ===== PROGRAMAS (TARJETAS) ===== -->
    <section class="py-5" id="programas">
        <div class="container">

            <div class="row mb-5">
                <div class="col-12 col-lg-8">
                    <span class="badge text-bg-primary mb-2">Programas</span>
                    <h2 class="fw-bold">Elige tu ruta de preparación</h2>
                </div>
                <div class="col-12 col-lg-4">
                    <p class="text-secondary mb-0">
                        Todos los programas son virtuales, con asesoras de planta
                        y horarios compatibles con el colegio.
                    </p>
                </div>
            </div>

            <div class="row g-4">

                <div class="col-12 col-md-6 col-lg-4 d-flex">
                    <article class="card h-100 w-100 shadow-sm border-0">
                        <div class="card-body d-flex flex-column p-4">
                            <span class="badge text-bg-success align-self-start mb-3">Más solicitado</span>
                            <h3 class="card-title h4">Ruta Saber 11</h3>
                            <p class="card-text flex-grow-1 text-secondary">
                                Intensivo de 12 semanas en matemáticas, lectura crítica,
                                química e inglés, con simulacros semanales.
                            </p>
                            <ul class="list-group list-group-flush mb-3">
                                <li class="list-group-item px-0">3 sesiones semanales en vivo</li>
                                <li class="list-group-item px-0">Materiales incluidos</li>
                                <li class="list-group-item px-0">Grupo de máximo 25 estudiantes</li>
                            </ul>
                            <div class="d-flex justify-content-between align-items-center mt-auto">
                                <span class="h4 mb-0">$380.000 <small class="text-secondary">/ mes</small></span>
                                <button class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#modalInscripcion">Inscribirme</button>
                            </div>
                        </div>
                    </article>
                </div>

                <div class="col-12 col-md-6 col-lg-4 d-flex">
                    <article class="card h-100 w-100 shadow-sm border-0">
                        <div class="card-body d-flex flex-column p-4">
                            <span class="badge text-bg-info align-self-start mb-3">Nuevo</span>
                            <h3 class="card-title h4">Lectura y escritura</h3>
                            <p class="card-text flex-grow-1 text-secondary">
                                Taller de 8 semanas para mejorar el componente comunicativo
                                del Icfes y aprender a escribir ensayos y ensayos de opinión.
                            </p>
                            <ul class="list-group list-group-flush mb-3">
                                <li class="list-group-item px-0">Talleres de escritura creativa</li>
                                <li class="list-group-item px-0">Corrección personalizada</li>
                                <li class="list-group-item px-0">2 sesiones semanales</li>
                            </ul>
                            <div class="d-flex justify-content-between align-items-center mt-auto">
                                <span class="h4 mb-0">$240.000 <small class="text-secondary">/ mes</small></span>
                                <button class="btn btn-outline-primary" data-bs-toggle="modal"
                                        data-bs-target="#modalInscripcion">Inscribirme</button>
                            </div>
                        </div>
                    </article>
                </div>

                <div class="col-12 col-md-6 col-lg-4 d-flex">
                    <article class="card h-100 w-100 shadow-sm border-0">
                        <div class="card-body d-flex flex-column p-4">
                            <span class="badge text-bg-warning text-dark align-self-start mb-3">Cupo limitado</span>
                            <h3 class="card-title h4">Orientación universitaria</h3>
                            <p class="card-text flex-grow-1 text-secondary">
                                Acompañamiento para elegir carrera y preparar tu carta de
                                motivación y las pruebas de admisión de cada universidad.
                            </p>
                            <ul class="list-group list-group-flush mb-3">
                                <li class="list-group-item px-0">6 sesiones individuales</li>
                                <li class="list-group-item px-0">Mapa de universidades de Colombia</li>
                                <li class="list-group-item px-0">1 sesión semanal</li>
                            </ul>
                            <div class="d-flex justify-content-between align-items-center mt-auto">
                                <span class="h4 mb-0">$180.000 <small class="text-secondary">/ mes</small></span>
                                <button class="btn btn-outline-primary" data-bs-toggle="modal"
                                        data-bs-target="#modalInscripcion">Inscribirme</button>
                            </div>
                        </div>
                    </article>
                </div>

            </div>
        </div>
    </section>

    <!-- ===== ALERTA / AVISO ===== -->
    <div class="container py-4">
        <div class="alert alert-info d-flex align-items-start gap-3 shadow-sm" role="alert">
            <i class="bi bi-info-circle-fill fs-4"></i>
            <div class="flex-grow-1">
                <h2 class="h5 alert-heading mb-1">¡Inscripciones abiertas para la cohorte de febrero!</h2>
                <p class="mb-0">
                    Los cupos se asignan por orden de pago. Escribe a
                    <a href="#contacto" class="alert-link">admisiones@rutuni.edu.co</a>
                    para recibir la ficha de matrícula.
                </p>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
        </div>
    </div>

<h2 class="my-4">Botones: variantes</h2>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

<h2 class="my-4">Botones: con borde (outline)</h2>
<button class="btn btn-outline-primary">Outline primary</button>
<button class="btn btn-outline-secondary">Outline secondary</button>
<button class="btn btn-outline-success">Outline success</button>

<h2 class="my-4">Botones: tamaños y estado</h2>
<button class="btn btn-primary btn-lg">Grande</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-sm">Pequeño</button>
<button class="btn btn-primary" disabled>Deshabilitado</button>
<button class="btn btn-primary" aria-disabled="true" tabindex="-1">Deshabilitado accesible</button>

<h2 class="my-4">Botones: con icono y ancho completo</h2>
<button class="btn btn-success"><i class="bi bi-whatsapp me-2"></i>Escribir por WhatsApp</button>
<button class="btn btn-outline-secondary w-100 my-2">Ancho completo</button>
<a href="#" class="btn btn-primary">También soy un enlace</a>

<h2 class="my-4">Badges</h2>
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">4 mensajes</span>
<span class="badge rounded-pill text-bg-dark">Píldora</span>
<span class="badge bg-primary-subtle text-primary-emphasis">Sutil</span>

col-12 col-md-6 col-lg-4 d-flex   ← la columna es un flex container
  └── card h-100 w-100            ← la tarjeta ocupa el alto completo
        └── card-body d-flex flex-column
              ├── card-text flex-grow-1   ← el texto ocupa el espacio sobrante
              └── mt-auto          ← el pie se empuja hacia abajo

<div class="card h-100 w-100 shadow-sm border-0">
    <img src="..." class="card-img-top" alt="Aula virtual con estudiantes">
    <div class="card-body">...</div>
    <div class="card-footer text-secondary">Martes y jueves, 4:00 p. m.</div>
</div>

document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', evento => {
        evento.preventDefault();          // no dejamos enviar todavía
        form.querySelectorAll('[required]').forEach(campo => {
            campo.classList.toggle('is-invalid', !campo.checkValidity());
            campo.classList.toggle('is-valid', campo.checkValidity());
        });
    });
});

    <!-- ===== CONTACTO ===== -->
    <section class="py-5 bg-body-tertiary" id="contacto">
        <div class="container">
            <!-- gutter adaptativo: g-4 en móvil (no desborda) y g-5 desde lg -->
            <div class="row g-4 g-lg-5">

                <div class="col-12 col-lg-5">
                    <span class="badge text-bg-secondary mb-2">Contacto</span>
                    <h2 class="fw-bold mb-3">¿Tienes dudas? Escríbenos</h2>
                    <p class="text-secondary mb-4">
                        Nuestro equipo de admisiones responde en menos de 24 horas hábiles
                        y en horario extendido para zonas rurales.
                    </p>

                    <ul class="list-unstyled d-grid gap-3">
                        <li class="d-flex gap-3">
                            <i class="bi bi-envelope-fill text-primary fs-5"></i>
                            <div>
                                <strong>Correo</strong><br>
                                <a href="mailto:admisiones@rutuni.edu.co">admisiones@rutuni.edu.co</a>
                            </div>
                        </li>
                        <li class="d-flex gap-3">
                            <i class="bi bi-telephone-fill text-primary fs-5"></i>
                            <div>
                                <strong>Teléfono</strong><br>
                                <a href="tel:+573001234567">+57 300 123 4567</a>
                            </div>
                        </li>
                        <li class="d-flex gap-3">
                            <i class="bi bi-geo-alt-fill text-primary fs-5"></i>
                            <div>
                                <strong>Sede</strong><br>
                                Medellín (ant.), con clases online a todo Colombia
                            </div>
                        </li>
                    </ul>

                    <div class="mt-4">
                        <a href="https://wa.me/573001234567" class="btn btn-success" rel="noopener">
                            <i class="bi bi-whatsapp me-2"></i>Escríbenos por WhatsApp
                        </a>
                    </div>
                </div>

                <div class="col-12 col-lg-7">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4 p-lg-5">

                            <form id="formularioContacto" novalidate>
                                <div class="row g-3">

                                    <div class="col-12 col-md-6">
                                        <label for="nombre" class="form-label">
                                            Nombre completo <span class="text-danger" aria-hidden="true">*</span>
                                        </label>
                                        <input type="text" class="form-control" id="nombre"
                                               name="nombre" placeholder="Ej. Valentina Gómez"
                                               autocomplete="name" required minlength="3">
                                        <div class="invalid-feedback">
                                            Escribe tu nombre (mínimo 3 letras).
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label for="correo" class="form-label">
                                            Correo electrónico <span class="text-danger" aria-hidden="true">*</span>
                                        </label>
                                        <input type="email" class="form-control" id="correo"
                                               name="correo" placeholder="tu@correo.com"
                                               autocomplete="email" required>
                                        <div class="invalid-feedback">
                                            Revisa el correo: debe tener el formato nombre@dominio.com
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label for="telefono" class="form-label">Teléfono (opcional)</label>
                                        <input type="tel" class="form-control" id="telefono"
                                               name="telefono" placeholder="+57 300 123 4567"
                                               autocomplete="tel" pattern="[0-9+ ]{7,15}">
                                        <div class="invalid-feedback">
                                            Entre 7 y 15 caracteres: solo números, espacios y el signo +.
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label for="grado" class="form-label">
                                            Grado en el que estás <span class="text-danger" aria-hidden="true">*</span>
                                        </label>
                                        <select class="form-select" id="grado" name="grado" required>
                                            <option value="" selected disabled>Elegir una opción</option>
                                            <option value="9">Grado 9</option>
                                            <option value="10">Grado 10</option>
                                            <option value="11">Grado 11</option>
                                            <option value="otro">Otro / graduated</option>
                                        </select>
                                        <div class="invalid-feedback">Selecciona tu grado actual.</div>
                                    </div>

                                    <div class="col-12">
                                        <label for="programa" class="form-label">
                                            Programa de interés <span class="text-danger" aria-hidden="true">*</span>
                                        </label>
                                        <select class="form-select" id="programa" name="programa" required>
                                            <option value="" selected disabled>Elegir un programa</option>
                                            <option>Ruta Saber 11</option>
                                            <option>Lectura y escritura</option>
                                            <option>Orientación universitaria</option>
                                        </select>
                                        <div class="invalid-feedback">Elige el programa que te interesa.</div>
                                    </div>

                                    <div class="col-12">
                                        <label for="mensaje" class="form-label">
                                            Mensaje <span class="text-danger" aria-hidden="true">*</span>
                                        </label>
                                        <textarea class="form-control" id="mensaje" name="mensaje"
                                                  rows="4" placeholder="Cuéntanos tu caso..."
                                                  required minlength="20"></textarea>
                                        <div class="form-text">Mínimo 20 caracteres.</div>
                                        <div class="invalid-feedback">
                                            Escribe al menos 20 caracteres para que podamos ayudarte bien.
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="acepto" required>
                                            <label class="form-check-label" for="acepto">
                                                Acepto el tratamiento de mis datos y las
                                                <a href="#" class="link-primary">condiciones del programa</a>.
                                            </label>
                                            <div class="invalid-feedback">
                                                Debes aceptar para poder enviar la solicitud.
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-lg-6">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" role="switch"
                                                   id="whatsapp" checked>
                                            <label class="form-check-label" for="whatsapp">
                                                Prefiero que me escriban por WhatsApp
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-12 col-lg-6">
                                        <label for="ciudad" class="form-label">Ciudad</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                            <input type="text" class="form-control" id="ciudad"
                                                   name="ciudad" placeholder="Medellín"
                                                   list="listaCiudades">
                                            <datalist id="listaCiudades">
                                                <option value="Bogotá"></option>
                                                <option value="Medellín"></option>
                                                <option value="Cali"></option>
                                                <option value="Bucaramanga"></option>
                                            </datalist>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="d-flex flex-wrap gap-2 pt-2">
                                            <button type="submit" class="btn btn-primary btn-lg px-4">
                                                <i class="bi bi-send me-2"></i>Enviar solicitud
                                            </button>
                                            <button type="reset" class="btn btn-outline-secondary btn-lg">
                                                Limpiar
                                            </button>
                                        </div>
                                        <p class="form-text mt-3">
                                            Los campos marcados con <span class="text-danger">*</span> son obligatorios.
                                        </p>
                                    </div>

                                </div>
                            </form>

                            <!-- Mensaje de éxito (oculto por defecto, lo muestra el JS) -->
                            <div class="alert alert-success d-none" id="avisoExito" role="status" tabindex="-1">
                                <h3 class="h5 alert-heading"><i class="bi bi-check-circle me-2"></i>¡Recibimos tu mensaje!</h3>
                                <p class="mb-0" id="textoExito">
                                    Te responderemos a tu correo en menos de 24 horas hábiles.
                                </p>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

/* ============================================================
   RutaUni · Validación del formulario de contacto
   ============================================================ */
(function () {
    'use strict';

    const formulario = document.getElementById('formularioContacto');
    const avisoExito = document.getElementById('avisoExito');
    const textoExito = document.getElementById('textoExito');

    if (!formulario) return;

    // Marca un campo como válido o inválido según las reglas nativas del navegador
    function validarCampo(campo) {
        const esValido = campo.checkValidity();
        campo.classList.toggle('is-invalid', !esValido);
        campo.classList.toggle('is-valid', esValido);
        return esValido;
    }

    // Al salir del campo ("blur"), muéstralo como válido o inválido
    formulario.querySelectorAll('input, select, textarea').forEach(campo => {
        campo.addEventListener('blur', () => {
            if (campo.value !== '' || campo.required) {
                validarCampo(campo);
            }
        });

        // Mientras escribe, si ya se corrigió el error, quítalo
        campo.addEventListener('input', () => {
            if (campo.classList.contains('is-invalid')) {
                validarCampo(campo);
            }
        });
    });

    formulario.addEventListener('submit', function (evento) {
        evento.preventDefault(); // en un proyecto real: aquí iría el fetch() al servidor

        const campos = Array.from(formulario.querySelectorAll('input, select, textarea'));
        const resultados = campos.map(validarCampo);
        const primerError = campos[resultados.indexOf(false)];

        if (resultados.includes(false)) {
            primerError.focus();       // lleva el foco al primer problema
            return;
        }

        // Todo correcto: en producción, aquí se enviarían los datos al servidor
        const nombre = formulario.nombre.value.trim().split(' ')[0];
        textoExito.textContent =
            `Gracias, ${nombre}. Te responderemos a tu correo en menos de 24 horas hábiles.`;

        formulario.classList.add('d-none');
        avisoExito.classList.remove('d-none');
        avisoExito.focus();             // anuncia el mensaje a quien usa lector de pantalla
    });
})();

    <script src="js/mi-script.js"></script>

const mensaje = document.getElementById('mensaje');
const contador = document.getElementById('contador');
mensaje.addEventListener('input', () => {
    contador.textContent = `${mensaje.value.length}/500`;
});

<!-- Disparador: en cualquier parte de la página -->
<button class="btn" data-bs-toggle="modal" data-bs-target="#miModal">Abrir</button>

<!-- Componente: en cualquier lugar (idealmente antes de </body>) -->
<div class="modal fade" id="miModal" tabindex="-1" aria-labelledby="miModalLabel" aria-hidden="true">
  ...
</div>

const miModal = new bootstrap.Modal(document.getElementById('miModal'));
miModal.show();
miModal.hide();

    <!-- ===== TESTIMONIOS (CARRUSEL) ===== -->
    <section class="py-5" id="testimonios">
        <div class="container">
            <h2 class="fw-bold text-center mb-5">Lo que dicen nuestros estudiantes</h2>

            <div id="carruselTestimonios" class="carousel slide" data-bs-ride="carousel"
                 data-bs-interval="6000" data-bs-touch="true">

                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carruselTestimonios"
                            data-bs-slide-to="0" class="active" aria-current="true"
                            aria-label="Testimonio 1"></button>
                    <button type="button" data-bs-target="#carruselTestimonios"
                            data-bs-slide-to="1" aria-label="Testimonio 2"></button>
                    <button type="button" data-bs-target="#carruselTestimonios"
                            data-bs-slide-to="2" aria-label="Testimonio 3"></button>
                </div>

                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-8">
                                <figure class="text-center p-4 bg-body-tertiary rounded-4">
                                    <blockquote class="blockquote fs-5 mb-4">
                                        "Subí 120 puntos en el simulacro. Lo que más me sirvió
                                        fue aprender a organizar el tiempo, no solo los temas."
                                    </blockquote>
                                    <figcaption class="d-flex align-items-center justify-content-center gap-3">
                                        <i class="bi bi-person-circle-fill fs-2 text-primary"></i>
                                        <span class="text-start">
                                            <strong>Mariana Ospina</strong><br>
                                            <small class="text-secondary">Grado 11 · Medellín</small>
                                        </span>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                    </div>

                    <div class="carousel-item">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-8">
                                <figure class="text-center p-4 bg-body-tertiary rounded-4">
                                    <blockquote class="blockquote fs-5 mb-4">
                                        "Los profesores responden los mensajes el mismo día. Eso
                                        no lo había visto en ningún otro preuniversitario."
                                    </blockquote>
                                    <figcaption class="d-flex align-items-center justify-content-center gap-3">
                                        <i class="bi bi-person-circle-fill fs-2 text-success"></i>
                                        <span class="text-start">
                                            <strong>Kevin Restrepo</strong><br>
                                            <small class="text-secondary">Grado 11 · Pereira</small>
                                        </span>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                    </div>

                    <div class="carousel-item">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-8">
                                <figure class="text-center p-4 bg-body-tertiary rounded-4">
                                    <blockquote class="blockquote fs-5 mb-4">
                                        "Con la orientación profesional decidí estudiar ingeniería. Estaba
                                        entre tres opciones y terminé escogiendo la correcta."
                                    </blockquote>
                                    <figcaption class="d-flex align-items-center justify-content-center gap-3">
                                        <i class="bi bi-person-circle-fill fs-2 text-warning"></i>
                                        <span class="text-start">
                                            <strong>Sofía Cárdenas</strong><br>
                                            <small class="text-secondary">Grado 10 · Bogotá</small>
                                        </span>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>

                <button class="carousel-control-prev" type="button"
                        data-bs-target="#carruselTestimonios" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Testimonio anterior</span>
                </button>
                <button class="carousel-control-next" type="button"
                        data-bs-target="#carruselTestimonios" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Testimonio siguiente</span>
                </button>
            </div>
        </div>
    </section>

    <!-- ===== PREGUNTAS FRECUENTES (ACORDEÓN) ===== -->
    <section class="py-5 bg-body-tertiary" id="preguntas">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-4 mb-4 mb-lg-0">
                    <span class="badge text-bg-secondary mb-2">FAQ</span>
                    <h2 class="fw-bold">Preguntas frecuentes</h2>
                    <p class="text-secondary">
                        ¿No encuentras tu duda? Escríbenos y te respondemos en menos de
                        24 horas hábiles.
                    </p>
                    <a href="#contacto" class="btn btn-outline-primary mt-2">Ir al formulario de contacto</a>
                </div>

                <div class="col-12 col-lg-8">
                    <div class="accordion" id="acordeonPreguntas">

                        <div class="accordion-item">
                            <h3 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#pregunta1" aria-expanded="true"
                                        aria-controls="pregunta1">
                                    ¿Necesito tener un buen puntaje para entrar?
                                </button>
                            </h3>
                            <div id="pregunta1" class="accordion-collapse collapse show"
                                 data-bs-parent="#acordeonPreguntas">
                                <div class="accordion-body">
                                    No. La primera semana es de diagnóstico para conocer tu punto
                                    de partida y armar un plan personalizado. Solo condicionamos
                                    la carga horaria semanal que puedas comprometer.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#pregunta2" aria-expanded="false"
                                        aria-controls="pregunta2">
                                    ¿Las clases son en vivo o grabadas?
                                </button>
                            </h3>
                            <div id="pregunta2" class="accordion-collapse collapse"
                                 data-bs-parent="#acordeonPreguntas">
                                <div class="accordion-body">
                                    Son en vivo por videollamada y además quedan grabadas durante
                                    6 meses. Si no puedes asistir, puedes enviar tu pregunta por
                                    el chat del curso y la responden al día siguiente.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#pregunta3" aria-expanded="false"
                                        aria-controls="pregunta3">
                                    ¿Qué pasa si no alcanzo a entregar un trabajo?
                                </button>
                            </h3>
                            <div id="pregunta3" class="accordion-collapse collapse"
                                 data-bs-parent="#acordeonPreguntas">
                                <div class="accordion-body">
                                    Tienes hasta 48 horas para entregar después de la fecha límite.
                                    Cada asesor puede activar dos extensiones por cohorte,
                                    siempre que avises con tiempo.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#pregunta4" aria-expanded="false"
                                        aria-controls="pregunta4">
                                    ¿Ofrecen beca o descuentos?
                                </button>
                            </h3>
                            <div id="pregunta4" class="accordion-collapse collapse"
                                 data-bs-parent="#acordeonPreguntas">
                                <div class="accordion-body">
                                    Sí. Hay dos modalidades: beca por rendimiento académico
                                    (top 10 del cohorte) y descuento del 20 % para estudiantes
                                    de municipios con difícil acceso a internet.
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== MODAL DE INSCRIPCIÓN ===== -->
    <div class="modal fade" id="modalInscripcion" tabindex="-1"
         aria-labelledby="tituloModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h2 class="modal-title h4" id="tituloModal">Solicitar cupo</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Cerrar"></button>
                </div>

                <div class="modal-body">
                    <p class="text-secondary">
                        Completa tus datos y nuestro equipo te contacta en menos de 24 horas
                        para confirmar el cupo y enviarte la ficha de matrícula.
                    </p>

                    <form id="formularioModal" novalidate>
                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <label for="modalNombre" class="form-label">Nombre completo</label>
                                <input type="text" class="form-control" id="modalNombre" required>
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="modalCorreo" class="form-label">Correo</label>
                                <input type="email" class="form-control" id="modalCorreo" required>
                            </div>
                            <div class="col-12">
                                <label for="modalPrograma" class="form-label">Programa</label>
                                <select class="form-select" id="modalPrograma" required>
                                    <option value="" selected disabled>Elegir un programa</option>
                                    <option>Ruta Saber 11</option>
                                    <option>Lectura y escritura</option>
                                    <option>Orientación universitaria</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label for="modalNota" class="form-label">¿Cuánto llevas transformado?</label>
                                <input type="range" class="form-range" id="modalNota"
                                       min="0" max="100" value="50" step="5">
                            </div>
                        </div>
                    </form>

                    <div class="alert alert-primary d-flex gap-2 mb-0 mt-3" role="note">
                        <i class="bi bi-info-circle-fill"></i>
                        <div class="small">
                            Al enviar aceptas que te contactemos por teléfono o correo.
                            No compartimos tus datos con terceros.
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" form="formularioModal" class="btn btn-primary">
                        <i class="bi bi-send me-2"></i>Enviar solicitud
                    </button>
                </div>

            </div>
        </div>
    </div>

    /* --- Abrir el modal de inscripción desde JavaScript --- */
    const modalElement = document.getElementById('modalInscripcion');
    const modalInscripcion = new bootstrap.Modal(modalElement);

    // Interceptar los botones "Inscribirme" de las tarjetas
    document.querySelectorAll('button[data-bs-target="#modalInscripcion"]').forEach(boton => {
        boton.addEventListener('click', evento => {
            evento.preventDefault();  // evitamos que Bootstrap abra el modal sin control
            modalInscripcion.show(); // lo abrimos nosotros
        });
    });

    // Si el formulario del modal se envía, cerramos y avisamos
    const formularioModal = document.getElementById('formularioModal');
    formularioModal.addEventListener('submit', evento => {
        evento.preventDefault();
        if (!formularioModal.checkValidity()) {
            formularioModal.classList.add('was-validated');
            return;
        }
        modalInscripcion.hide();
        alert('¡Gracias! Te contactaremos en menos de 24 horas.');
        formularioModal.reset();
    });

    modalElement.addEventListener('shown.bs.modal', () => {
        document.getElementById('modalNombre').focus();
    });

<button class="btn btn-outline-light d-lg-none" type="button"
        data-bs-toggle="offcanvas" data-bs-target="#menuLateral" aria-controls="menuLateral">
    <i class="bi bi-list"></i>
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="menuLateral" aria-labelledby="menuLateralLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="menuLateralLabel">RutaUni</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
    </div>
    <div class="offcanvas-body">
        <ul class="nav flex-column gap-2">
            <li class="nav-item"><a class="nav-link" href="#programas">Programas</a></li>
        </ul>
    </div>
</div>

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
    new bootstrap.Tooltip(el);
});

:root {
    --bs-primary: #6f42c1;
}

@media (prefers-color-scheme: dark) {
    /* aquí puedes aplicar ajustes propios si los necesitas */
}

.card {
    border-radius: 1rem;

    .card-title {
        color: var(--bs-primary);
    }
}

/* ============================================================
   RutaUni · Estilos personalizados
   Cargados DESPUÉS de Bootstrap, por eso ganan en empate
   ============================================================ */

/* ---------- 1. Identidad de color ---------- */
:root {
    /* Paleta de la marca (búscala en https://coolors.co para crear la tuya) */
    --rutuni-azul: #1f3a8a;
    --rutuni-lima: #a3e635;
    --rutuni-naranja: #f97316;

    /* Le decimos a Bootstrap que use nuestros colores */
    --bs-primary: var(--rutuni-azul);
    --bs-link-color: var(--rutuni-azul);
    --bs-link-hover-color: #16306f;

    /* Fuente: usamos la del sistema, sin descargas externas */
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto,
                            "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Fondo del sitio y textos largos ---------- */
body {
    background-color: var(--bs-body-bg);

    /* En móvil los textos largos (correos, URLs) se parten antes de provocar
       un desplazamiento horizontal de toda la página. Ojo: `anywhere`, no
       `break-word`, porque es el único que reduce también el ancho mínimo
       de las celdas de una rejilla. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------- 3. Texturas y detalles propios ---------- */
.rounded-4 {
    border-radius: 1.25rem !important;
}

.text-rutuni-lima {
    color: var(--rutuni-lima) !important;
}

.bg-rutuni-lima {
    background-color: var(--rutuni-lima);
    color: #1a2e05;
}

/* Degradado para el hero, usado con la clase .hero-degradado */
.hero-degradado {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(163, 230, 53, .25), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(249, 115, 22, .30), transparent 40%),
        linear-gradient(135deg, var(--rutuni-azul) 0%, #2b1a6b 100%);
}

/* Tarjetas con un detalle superior de color */
.tarjeta-programa {
    border-top: 4px solid var(--rutuni-azul);
    transition: transform .2s ease, box-shadow .2s ease;
}

.tarjeta-programa:hover,
.tarjeta-programa:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, .12);
}

/* ---------- 4. Modo oscuro ---------- */
[data-bs-theme="dark"] {
    --rutuni-azul: #93c5fd;
    --rutuni-lima: #bef264;
    --rutuni-naranja: #fdba74;

    --bs-link-color: #93c5fd;
    --bs-link-hover-color: #bfdbfe;
}

/* En modo oscuro el degradado del hero se oscurece */
[data-bs-theme="dark"] .hero-degradado {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(163, 230, 53, .15), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(249, 115, 22, .18), transparent 40%),
        linear-gradient(135deg, #101a3d 0%, #1a1030 100%);
}

/* Respetamos la preferencia del sistema si el visitante no ha elegido nada */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        color-scheme: dark;
    }
}

/* ---------- 5. Impresión ---------- */
@media print {
    .navbar,
    footer,
    .btn {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}

    <header class="hero-degradado text-white py-5" id="inicio">

                <button class="btn btn-outline-light btn-sm ms-lg-3" type="button" id="botonTema">
                    <i class="bi bi-moon-stars-fill" id="iconoTema" aria-hidden="true"></i>
                    <span class="visually-hidden">Cambiar entre tema claro y oscuro</span>
                </button>

/* --- Modo claro / oscuro con memoria --- */
(function () {
    'use strict';

    const botonTema = document.getElementById('botonTema');
    const iconoTema = document.getElementById('iconoTema');
    const clave = 'rutuni-tema';

    function aplicarTema(tema) {
        document.documentElement.setAttribute('data-bs-theme', tema);
        if (iconoTema) {
            iconoTema.className = tema === 'dark' ? 'bi bi-sun-fill' : 'bi bi-moon-stars-fill';
        }
        try {
            localStorage.setItem(clave, tema);
        } catch (e) {
            /* modo privado: seguimos funcionando sin guardar */
        }
    }

    // 1. Al cargar: usar lo guardado, o la preferencia del sistema
    let temaGuardado = null;
    try {
        temaGuardado = localStorage.getItem(clave);
    } catch (e) { /* sin almacenamiento */ }

    const sistemaPrefiereOscuro = window.matchMedia('(prefers-color-scheme: dark)').matches;
    aplicarTema(temaGuardado || (sistemaPrefiereOscuro ? 'dark' : 'light'));

    // 2. Al hacer clic: alternar
    if (botonTema) {
        botonTema.addEventListener('click', () => {
            const actual = document.documentElement.getAttribute('data-bs-theme');
            aplicarTema(actual === 'dark' ? 'light' : 'dark');
        });
    }
})();

    <link rel="stylesheet" href="css/vendor/bootstrap.min.css">
    <script src="js/vendor/bootstrap.bundle.min.js"></script>

    <script>
        try {
            var t = localStorage.getItem('rutuni-tema');
            if (!t) t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
            document.documentElement.setAttribute('data-bs-theme', t);
        } catch (e) {}
    </script>

.footer-borde {
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--rutuni-lima), var(--rutuni-naranja), var(--rutuni-azul)) 1;
}

.btn-marca {
    --bs-btn-bg: var(--rutuni-naranja);
    --bs-btn-border-color: var(--rutuni-naranja);
    --bs-btn-hover-bg: #ea580c;
    --bs-btn-hover-border-color: #ea580c;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

<body>

    <nav class="navbar ..."> ... </nav>          <!-- navbar del Módulo 4 -->

    <main id="contenido">

        <header class="hero-degradado text-white py-5" id="inicio"> ... </header>

        <section class="py-5 bg-body-tertiary" id="cifras"> ... </section>

        <section class="py-5" id="programas"> ... </section>

        <section class="py-5" id="testimonios"> ... </section>

        <section class="py-5 bg-body-tertiary" id="preguntas"> ... </section>

        <section class="py-5" id="contacto"> ... </section>

    </main>

    <footer class="footer-borde bg-body-tertiary py-5"> ... </footer>

    <div class="modal fade" id="modalInscripcion" ...> ... </div>

    <script src="js/mi-script.js"></script>

</body>

    <a href="#contenido" class="visually-hidden-focusable btn btn-primary position-absolute top-0 start-0 m-2">
        Saltar al contenido principal
    </a>

    <!-- ===== FOOTER ===== -->
    <footer class="footer-borde bg-body-tertiary py-5 mt-5" id="contacto-footer">
        <div class="container">
            <div class="row g-4">

                <div class="col-12 col-md-4">
                    <a class="d-inline-flex align-items-center gap-2 mb-3 text-decoration-none" href="#inicio">
                        <i class="bi bi-compass fs-3 text-primary"></i>
                        <span class="fw-bold fs-5">RutaUni</span>
                    </a>
                    <p class="text-secondary">
                        Preuniversitario virtual para estudiantes de grado 10 y 11 en
                        Colombia. Acompañamiento desde 2019.
                    </p>
                    <div class="d-flex gap-2">
                        <a href="#" class="btn btn-sm btn-outline-light rounded-circle" aria-label="Instagram de RutaUni">
                            <i class="bi bi-instagram" aria-hidden="true"></i>
                        </a>
                        <a href="#" class="btn btn-sm btn-outline-light rounded-circle" aria-label="TikTok de RutaUni">
                            <i class="bi bi-tiktok" aria-hidden="true"></i>
                        </a>
                        <a href="#" class="btn btn-sm btn-outline-light rounded-circle" aria-label="YouTube de RutaUni">
                            <i class="bi bi-youtube" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="col-6 col-md-2 offset-md-1">
                    <h2 class="h6 text-uppercase text-secondary">Programas</h2>
                    <ul class="list-unstyled d-grid gap-2">
                        <li><a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover" href="#programas">Ruta Saber 11</a></li>
                        <li><a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover" href="#programas">Lectura y escritura</a></li>
                        <li><a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover" href="#programas">Orientación universitaria</a></li>
                    </ul>
                </div>

                <div class="col-6 col-md-2">
                    <h2 class="h6 text-uppercase text-secondary">Recursos</h2>
                    <ul class="list-unstyled d-grid gap-2">
                        <li><a class="link-secondary" href="#preguntas">Preguntas frecuentes</a></li>
                        <li><a class="link-secondary" href="#contacto">admisiones@rutuni.edu.co</a></li>
                        <li><a class="link-secondary" href="#contacto">+57 300 123 4567</a></li>
                    </ul>
                </div>

                <div class="col-12 col-md-3">
                    <h2 class="h6 text-uppercase text-secondary">Horario de atención</h2>
                    <p class="text-secondary small mb-2">
                        Lunes a viernes, 7:00 a. m. – 8:00 p. m.<br>
                        Sábados, 8:00 a. m. – 2:00 p. m.
                    </p>
                    <p class="small mb-0">
                        <i class="bi bi-geo-alt me-1"></i>Medellín, Colombia · Cobertura nacional
                    </p>
                </div>

            </div>

            <hr class="my-4">

            <div class="row align-items-center g-3">
                <div class="col-12 col-md-6">
                    <p class="small text-secondary mb-0">
                        © 2026 RutaUni. Proyecto educativo de ejemplo.
                    </p>
                </div>
                <div class="col-12 col-md-6">
                    <ul class="list-inline d-flex flex-wrap justify-content-md-end gap-3 mb-0 small">
                        <li class="list-inline-item"><a class="link-secondary" href="#">Términos</a></li>
                        <li class="list-inline-item"><a class="link-secondary" href="#">Privacidad</a></li>
                        <li class="list-inline-item"><a class="link-secondary" href="#">Contáctanos</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

1. ¿Es una página de una sola sección o de varias?
   └─ Varias → <main> con <section id="...">

2. ¿Cómo se ve en CELULAR? (siempre se responde esto primero)
   └─ Mobile-first: clases sin prefijo

3. ¿Cuántas columnas tiene cada fila?
   └─ 1 → col-12 | 2 → col-12 col-md-6 | 3 → col-12 col-md-6 col-lg-4

4. ¿Cómo separo el contenido del borde de la pantalla?
   └─ <div class="container">

5. ¿Qué separaciones necesito?
   └─ En la fila: g-4. En los bloques: py-5 / mb-4

6. ¿Necesita interacción?
   └─ Modal / Collapse / Carousel / Offcanvas con data-bs-*

7. ¿Tiene textos e imágenes?
   └─ alt, <figure>, <figcaption>, .visually-hidden

8. ¿Se puede usar con el teclado?
   └─ Tab, Enter, Esc deben funcionar

<!DOCTYPE html>
<html lang="es" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="RutaUni: preuniversitario virtual para estudiantes de grado 10 y 11 en Colombia. Acompañamiento para el Icfes y el ingreso a la universidad.">
    <title>RutaUni · Acompáñamos tu entrada a la universidad</title>

    <!-- Bootstrap 5.3.8 · CSS -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Evita el destello de tema claro antes de aplicar el guardado -->
    <script>
        try {
            var t = localStorage.getItem('rutuni-tema');
            if (!t) t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
            document.documentElement.setAttribute('data-bs-theme', t);
        } catch (e) {}
    </script>

    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>

    <!-- Enlace de salto al contenido -->
    <a href="#contenido" class="visually-hidden-focusable btn btn-primary position-absolute top-0 start-0 m-2">
        Saltar al contenido principal
    </a>

    <!-- ===================== NAVBAR ===================== -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top shadow-sm">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#inicio">
                <i class="bi bi-compass fs-3 text-info"></i>
                <span class="fw-bold">RutaUni</span>
            </a>

            <button class="navbar-toggler" type="button"
                    data-bs-toggle="collapse" data-bs-target="#menuPrincipal"
                    aria-controls="menuPrincipal" aria-expanded="false" aria-label="Abrir el menú">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="menuPrincipal">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center gap-lg-2">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#inicio">Inicio</a></li>
                    <li class="nav-item"><a class="nav-link" href="#programas">Programas</a></li>
                    <li class="nav-item"><a class="nav-link" href="#testimonios">Testimonios</a></li>
                    <li class="nav-item"><a class="nav-link" href="#preguntas">Preguntas</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contacto">Contacto</a></li>
                    <li class="nav-item ms-lg-2">
                        <a href="#contacto" class="btn btn-info text-dark fw-semibold px-3"
                           data-bs-toggle="modal" data-bs-target="#modalInscripcion">Inscríbirme</a>
                    </li>
                </ul>

                <form class="d-none d-lg-block ms-lg-3" role="search">
                    <input class="form-control form-control-sm" type="search"
                           placeholder="Buscar" aria-label="Buscar en el sitio">
                </form>

                <button class="btn btn-outline-light btn-sm ms-lg-3" type="button" id="botonTema">
                    <i class="bi bi-moon-stars-fill" id="iconoTema" aria-hidden="true"></i>
                    <span class="visually-hidden">Cambiar entre tema claro y oscuro</span>
                </button>
            </div>
        </div>
    </nav>

    <main id="contenido">

        <!-- ===================== HERO ===================== -->
        <header class="hero-degradado text-white py-5" id="inicio">
            <div class="container">
                <div class="row align-items-center g-4">
                    <div class="col-12 col-lg-7">
                        <span class="badge bg-warning text-dark mb-3">Cohortes 2026 abiertas</span>
                        <h1 class="display-3 fw-bold lh-1">Tu entrada a la universidad empieza aquí</h1>
                        <p class="lead my-4 text-white-50">
                            Acompañamiento virtual para estudiantes de grado 10 y 11: preparación
                            para el Icfes, técnicas de estudio y orientación profesional.
                        </p>
                        <div class="d-flex flex-wrap gap-2 mb-4">
                            <a href="#contacto" class="btn btn-light btn-lg px-4"
                               data-bs-toggle="modal" data-bs-target="#modalInscripcion">
                                Quiero inscribirme
                            </a>
                            <a href="#programas" class="btn btn-outline-light btn-lg px-4">Ver programas</a>
                        </div>
                        <ul class="list-unstyled d-flex flex-wrap gap-4 small mb-0">
                            <li><i class="bi bi-check-circle-fill text-warning"></i> Clases en vivo y grabadas</li>
                            <li><i class="bi bi-check-circle-fill text-warning"></i> Plan de estudio semanal</li>
                            <li><i class="bi bi-check-circle-fill text-warning"></i> Sin costo de matrícula</li>
                        </ul>
                    </div>

                    <div class="col-12 col-lg-5">
                        <div class="card bg-white text-dark border-0 shadow">
                            <div class="card-body text-center p-4">
                                <i class="bi bi-mortarboard-fill display-4 text-primary"></i>
                                <h2 class="h4 mt-3">Ruta Saber 11</h2>
                                <p class="mb-0">12 semanas · 3 sesiones semanales · 100 % online</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- ===================== CIFRAS ===================== -->
        <section class="py-5 bg-body-tertiary" id="cifras">
            <div class="container">
                <div class="row g-4 text-center">
                    <div class="col-12 col-sm-6 col-lg-3">
                        <h2 class="display-4 fw-bold text-primary mb-0">+3.200</h2>
                        <p class="text-secondary mb-0">estudiantes formados en 14 ciudades</p>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <h2 class="display-4 fw-bold text-success mb-0">94 %</h2>
                        <p class="text-secondary mb-0">mejoraron su puntaje en el simulacro</p>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <h2 class="display-4 fw-bold text-warning mb-0">48</h2>
                        <p class="text-secondary mb-0">docentes de planta</p>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <h2 class="display-4 fw-bold text-danger mb-0">12</h2>
                        <p class="text-secondary mb-0">semanas por cohorte</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- ===================== AVISO ===================== -->
        <div class="container py-4">
            <div class="alert alert-info d-flex align-items-start gap-3 shadow-sm" role="alert">
                <i class="bi bi-info-circle-fill fs-4"></i>
                <div class="flex-grow-1">
                    <h2 class="h5 alert-heading mb-1">¡Inscripciones abiertas para la cohorte de febrero!</h2>
                    <p class="mb-0">
                        Los cupos se asignan por orden de pago. Escribe a
                        <a href="#contacto" class="alert-link">admisiones@rutuni.edu.co</a>
                        para recibir la ficha de matrícula.
                    </p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
            </div>
        </div>

        <!-- ===================== PROGRAMAS ===================== -->
        <section class="py-5" id="programas">
            <div class="container">
                <div class="row mb-5">
                    <div class="col-12 col-lg-8">
                        <span class="badge text-bg-primary mb-2">Programas</span>
                        <h2 class="fw-bold">Elige tu ruta de preparación</h2>
                    </div>
                    <div class="col-12 col-lg-4">
                        <p class="text-secondary mb-0">
                            Todos los programas son virtuales, con asesoras de planta
                            y horarios compatibles con el colegio.
                        </p>
                    </div>
                </div>

                <div class="row g-4">
                    <div class="col-12 col-md-6 col-lg-4 d-flex">
                        <article class="card h-100 w-100 shadow-sm border-0 tarjeta-programa">
                            <div class="card-body d-flex flex-column p-4">
                                <span class="badge text-bg-success align-self-start mb-3">Más solicitado</span>
                                <h3 class="card-title h4">Ruta Saber 11</h3>
                                <p class="card-text flex-grow-1 text-secondary">
                                    Intensivo de 12 semanas en matemáticas, lectura crítica,
                                    química e inglés, con simulacros semanales.
                                </p>
                                <ul class="list-group list-group-flush mb-3">
                                    <li class="list-group-item px-0">3 sesiones semanales en vivo</li>
                                    <li class="list-group-item px-0">Materiales incluidos</li>
                                    <li class="list-group-item px-0">Grupo de máximo 25 estudiantes</li>
                                </ul>
                                <div class="d-flex justify-content-between align-items-center mt-auto">
                                    <span class="h4 mb-0">$380.000 <small class="text-secondary">/ mes</small></span>
                                    <button class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#modalInscripcion">Inscribirme</button>
                                </div>
                            </div>
                        </article>
                    </div>

                    <div class="col-12 col-md-6 col-lg-4 d-flex">
                        <article class="card h-100 w-100 shadow-sm border-0 tarjeta-programa">
                            <div class="card-body d-flex flex-column p-4">
                                <span class="badge text-bg-info align-self-start mb-3">Nuevo</span>
                                <h3 class="card-title h4">Lectura y escritura</h3>
                                <p class="card-text flex-grow-1 text-secondary">
                                    Taller de 8 semanas para mejorar el componente comunicativo
                                    del Icfes y aprender a escribir ensayos de opinión.
                                </p>
                                <ul class="list-group list-group-flush mb-3">
                                    <li class="list-group-item px-0">Talleres de escritura creativa</li>
                                    <li class="list-group-item px-0">Corrección personalizada</li>
                                    <li class="list-group-item px-0">2 sesiones semanales</li>
                                </ul>
                                <div class="d-flex justify-content-between align-items-center mt-auto">
                                    <span class="h4 mb-0">$240.000 <small class="text-secondary">/ mes</small></span>
                                    <button class="btn btn-outline-primary" data-bs-toggle="modal"
                                            data-bs-target="#modalInscripcion">Inscribirme</button>
                                </div>
                            </div>
                        </article>
                    </div>

                    <div class="col-12 col-md-6 col-lg-4 d-flex">
                        <article class="card h-100 w-100 shadow-sm border-0 tarjeta-programa">
                            <div class="card-body d-flex flex-column p-4">
                                <span class="badge text-bg-warning text-dark align-self-start mb-3">Cupo limitado</span>
                                <h3 class="card-title h4">Orientación universitaria</h3>
                                <p class="card-text flex-grow-1 text-secondary">
                                    Acompañamiento para elegir carrera y preparar tu carta de
                                    motivación y las pruebas de admisión de cada universidad.
                                </p>
                                <ul class="list-group list-group-flush mb-3">
                                    <li class="list-group-item px-0">6 sesiones individuales</li>
                                    <li class="list-group-item px-0">Mapa de universidades de Colombia</li>
                                    <li class="list-group-item px-0">1 sesión semanal</li>
                                </ul>
                                <div class="d-flex justify-content-between align-items-center mt-auto">
                                    <span class="h4 mb-0">$180.000 <small class="text-secondary">/ mes</small></span>
                                    <button class="btn btn-outline-primary" data-bs-toggle="modal"
                                            data-bs-target="#modalInscripcion">Inscribirme</button>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </section>

        <!-- ===================== TESTIMONIOS ===================== -->
        <section class="py-5" id="testimonios">
            <div class="container">
                <h2 class="fw-bold text-center mb-5">Lo que dicen nuestros estudiantes</h2>

                <div id="carruselTestimonios" class="carousel slide" data-bs-ride="carousel"
                     data-bs-interval="6000" data-bs-touch="true">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carruselTestimonios" data-bs-slide-to="0"
                                class="active" aria-current="true" aria-label="Testimonio 1"></button>
                        <button type="button" data-bs-target="#carruselTestimonios" data-bs-slide-to="1"
                                aria-label="Testimonio 2"></button>
                        <button type="button" data-bs-target="#carruselTestimonios" data-bs-slide-to="2"
                                aria-label="Testimonio 3"></button>
                    </div>

                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="row justify-content-center">
                                <div class="col-12 col-lg-8">
                                    <figure class="text-center p-4 bg-body-tertiary rounded-4">
                                        <blockquote class="blockquote fs-5 mb-4">
                                            "Subí 120 puntos en el simulacro. Lo que más me sirvió fue
                                            aprender a organizar el tiempo, no solo los temas."
                                        </blockquote>
                                        <figcaption class="d-flex align-items-center justify-content-center gap-3">
                                            <i class="bi bi-person-circle-fill fs-2 text-primary"></i>
                                            <span class="text-start">
                                                <strong>Mariana Ospina</strong><br>
                                                <small class="text-secondary">Grado 11 · Medellín</small>
                                            </span>
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>

                        <div class="carousel-item">
                            <div class="row justify-content-center">
                                <div class="col-12 col-lg-8">
                                    <figure class="text-center p-4 bg-body-tertiary rounded-4">
                                        <blockquote class="blockquote fs-5 mb-4">
                                            "Los profesores responden los mensajes el mismo día. Eso no lo
                                            había visto en ningún otro preuniversitario."
                                        </blockquote>
                                        <figcaption class="d-flex align-items-center justify-content-center gap-3">
                                            <i class="bi bi-person-circle-fill fs-2 text-success"></i>
                                            <span class="text-start">
                                                <strong>Kevin Restrepo</strong><br>
                                                <small class="text-secondary">Grado 11 · Pereira</small>
                                            </span>
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>

                        <div class="carousel-item">
                            <div class="row justify-content-center">
                                <div class="col-12 col-lg-8">
                                    <figure class="text-center p-4 bg-body-tertiary rounded-4">
                                        <blockquote class="blockquote fs-5 mb-4">
                                            "Con la orientación profesional decidí estudiar ingeniería. Estaba
                                            entre tres opciones y terminé escogiendo la correcta."
                                        </blockquote>
                                        <figcaption class="d-flex align-items-center justify-content-center gap-3">
                                            <i class="bi bi-person-circle-fill fs-2 text-warning"></i>
                                            <span class="text-start">
                                                <strong>Sofía Cárdenas</strong><br>
                                                <small class="text-secondary">Grado 10 · Bogotá</small>
                                            </span>
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button class="carousel-control-prev" type="button"
                            data-bs-target="#carruselTestimonios" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Testimonio anterior</span>
                    </button>
                    <button class="carousel-control-next" type="button"
                            data-bs-target="#carruselTestimonios" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Testimonio siguiente</span>
                    </button>
                </div>
            </div>
        </section>

        <!-- ===================== PREGUNTAS ===================== -->
        <section class="py-5 bg-body-tertiary" id="preguntas">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-lg-4 mb-4 mb-lg-0">
                        <span class="badge text-bg-secondary mb-2">FAQ</span>
                        <h2 class="fw-bold">Preguntas frecuentes</h2>
                        <p class="text-secondary">
                            ¿No encuentras tu duda? Escríbenos y te respondemos en menos de 24 horas hábiles.
                        </p>
                        <a href="#contacto" class="btn btn-outline-primary mt-2">Ir al formulario de contacto</a>
                    </div>

                    <div class="col-12 col-lg-8">
                        <div class="accordion" id="acordeonPreguntas">
                            <div class="accordion-item">
                                <h3 class="accordion-header">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#pregunta1" aria-expanded="true" aria-controls="pregunta1">
                                        ¿Necesito tener un buen puntaje para entrar?
                                    </button>
                                </h3>
                                <div id="pregunta1" class="accordion-collapse collapse show"
                                     data-bs-parent="#acordeonPreguntas">
                                    <div class="accordion-body">
                                        No. La primera semana es de diagnóstico para conocer tu punto de partida
                                        y armar un plan personalizado. Solo condicionamos la carga horaria
                                        semanal que puedas comprometer.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h3 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#pregunta2" aria-expanded="false" aria-controls="pregunta2">
                                        ¿Las clases son en vivo o grabadas?
                                    </button>
                                </h3>
                                <div id="pregunta2" class="accordion-collapse collapse"
                                     data-bs-parent="#acordeonPreguntas">
                                    <div class="accordion-body">
                                        Son en vivo por videollamada y además quedan grabadas durante 6 meses.
                                        Si no puedes asistir, puedes enviar tu pregunta por el chat del
                                        curso y la responden al día siguiente.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h3 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#pregunta3" aria-expanded="false" aria-controls="pregunta3">
                                        ¿Qué pasa si no alcanzo a entregar un trabajo?
                                    </button>
                                </h3>
                                <div id="pregunta3" class="accordion-collapse collapse"
                                     data-bs-parent="#acordeonPreguntas">
                                    <div class="accordion-body">
                                        Tienes hasta 48 horas para entregar después de la fecha límite.
                                        Cada asesor puede activar dos extensiones por cohorte, siempre
                                        que avises con tiempo.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h3 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#pregunta4" aria-expanded="false" aria-controls="pregunta4">
                                        ¿Ofrecen beca o descuentos?
                                    </button>
                                </h3>
                                <div id="pregunta4" class="accordion-collapse collapse"
                                     data-bs-parent="#acordeonPreguntas">
                                    <div class="accordion-body">
                                        Sí. Hay dos modalidades: beca por rendimiento académico
                                        (top 10 del cohorte) y descuento del 20 % para estudiantes de
                                        municipios con difícil acceso a internet.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ===================== CONTACTO ===================== -->
        <section class="py-5" id="contacto">
            <div class="container">
                <div class="row g-4 g-lg-5">
                <aside class="col-12 col-lg-5">
                        <span class="badge text-bg-secondary mb-2">Contacto</span>
                        <h2 class="fw-bold mb-3">¿Tienes dudas? Escríbenos</h2>
                        <p class="text-secondary mb-4">
                            Nuestro equipo de admisiones responde en menos de 24 horas hábiles y en
                            horario extendido para zonas rurales.
                        </p>

                        <ul class="list-unstyled d-grid gap-3">
                            <li class="d-flex gap-3">
                                <i class="bi bi-envelope-fill text-primary fs-5"></i>
                                <div>
                                    <strong>Correo</strong><br>
                                    <a href="mailto:admisiones@rutuni.edu.co">admisiones@rutuni.edu.co</a>
                                </div>
                            </li>
                            <li class="d-flex gap-3">
                                <i class="bi bi-telephone-fill text-primary fs-5"></i>
                                <div>
                                    <strong>Teléfono</strong><br>
                                    <a href="tel:+573001234567">+57 300 123 4567</a>
                                </div>
                            </li>
                            <li class="d-flex gap-3">
                                <i class="bi bi-geo-alt-fill text-primary fs-5"></i>
                                <div>
                                    <strong>Sede</strong><br>
                                    Medellín (ant.), con clases online a todo Colombia
                                </div>
                            </li>
                        </ul>

                        <div class="mt-4">
                            <a href="https://wa.me/573001234567" class="btn btn-success" rel="noopener">
                                <i class="bi bi-whatsapp me-2"></i>Escríbenos por WhatsApp
                            </a>
                        </div>
                    </aside>

                    <div class="col-12 col-lg-7">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body p-4 p-lg-5">
                                <form id="formularioContacto" novalidate>
                                    <div class="row g-3">
                                        <div class="col-12 col-md-6">
                                            <label for="nombre" class="form-label">
                                                Nombre completo <span class="text-danger" aria-hidden="true">*</span>
                                            </label>
                                            <input type="text" class="form-control" id="nombre" name="nombre"
                                                   placeholder="Ej. Valentina Gómez" autocomplete="name"
                                                   required minlength="3">
                                            <div class="invalid-feedback">Escribe tu nombre (mínimo 3 letras).</div>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label for="correo" class="form-label">
                                                Correo electrónico <span class="text-danger" aria-hidden="true">*</span>
                                            </label>
                                            <input type="email" class="form-control" id="correo" name="correo"
                                                   placeholder="tu@correo.com" autocomplete="email" required>
                                            <div class="invalid-feedback">
                                                Revisa el correo: debe tener el formato nombre@dominio.com
                                            </div>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label for="telefono" class="form-label">Teléfono (opcional)</label>
                                            <input type="tel" class="form-control" id="telefono" name="telefono"
                                                   placeholder="+57 300 123 4567" autocomplete="tel"
                                                   pattern="[0-9+ ]{7,15}">
                                            <div class="invalid-feedback">
                                                Entre 7 y 15 caracteres: solo números, espacios y el signo +.
                                            </div>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label for="grado" class="form-label">
                                                Grado en el que estás <span class="text-danger" aria-hidden="true">*</span>
                                            </label>
                                            <select class="form-select" id="grado" name="grado" required>
                                                <option value="" selected disabled>Elegir una opción</option>
                                                <option value="9">Grado 9</option>
                                                <option value="10">Grado 10</option>
                                                <option value="11">Grado 11</option>
                                                <option value="otro">Otro</option>
                                            </select>
                                            <div class="invalid-feedback">Selecciona tu grado actual.</div>
                                        </div>

                                        <div class="col-12">
                                            <label for="programa" class="form-label">
                                                Programa de interés <span class="text-danger" aria-hidden="true">*</span>
                                            </label>
                                            <select class="form-select" id="programa" name="programa" required>
                                                <option value="" selected disabled>Elegir un programa</option>
                                                <option>Ruta Saber 11</option>
                                                <option>Lectura y escritura</option>
                                                <option>Orientación universitaria</option>
                                            </select>
                                            <div class="invalid-feedback">Elige el programa que te interesa.</div>
                                        </div>

                                        <div class="col-12">
                                            <label for="mensaje" class="form-label">
                                                Mensaje <span class="text-danger" aria-hidden="true">*</span>
                                            </label>
                                            <textarea class="form-control" id="mensaje" name="mensaje" rows="4"
                                                      placeholder="Cuéntanos tu caso..." required minlength="20"></textarea>
                                            <div class="form-text">Mínimo 20 caracteres.</div>
                                            <div class="invalid-feedback">
                                                Escribe al menos 20 caracteres para que podamos ayudarte bien.
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="acepto" required>
                                                <label class="form-check-label" for="acepto">
                                                    Acepto el tratamiento de mis datos y las
                                                    <a href="#" class="link-primary">condiciones del programa</a>.
                                                </label>
                                                <div class="invalid-feedback">
                                                    Debes aceptar para poder enviar la solicitud.
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12 col-lg-6">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                       id="whatsapp" checked>
                                                <label class="form-check-label" for="whatsapp">
                                                    Prefiero que me escriban por WhatsApp
                                                </label>
                                            </div>
                                        </div>

                                        <div class="col-12 col-lg-6">
                                            <label for="ciudad" class="form-label">Ciudad</label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                                <input type="text" class="form-control" id="ciudad" name="ciudad"
                                                       placeholder="Medellín" list="listaCiudades">
                                                <datalist id="listaCiudades">
                                                    <option value="Bogotá"></option>
                                                    <option value="Medellín"></option>
                                                    <option value="Cali"></option>
                                                    <option value="Bucaramanga"></option>
                                                </datalist>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="d-flex flex-wrap gap-2 pt-2">
                                                <button type="submit" class="btn btn-primary btn-lg px-4">
                                                    <i class="bi bi-send me-2"></i>Enviar solicitud
                                                </button>
                                                <button type="reset" class="btn btn-outline-secondary btn-lg">Limpiar</button>
                                            </div>
                                            <p class="form-text mt-3">
                                                Los campos marcados con <span class="text-danger">*</span> son obligatorios.
                                            </p>
                                        </div>
                                    </div>
                                </form>

                                <div class="alert alert-success d-none" id="avisoExito" role="status" tabindex="-1">
                                    <h3 class="h5 alert-heading"><i class="bi bi-check-circle me-2"></i>¡Recibimos tu mensaje!</h3>
                                    <p class="mb-0" id="textoExito">
                                        Te responderemos a tu correo en menos de 24 horas hábiles.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!-- ===================== FOOTER ===================== -->
    <footer class="footer-borde bg-body-tertiary py-5 mt-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-12 col-md-4">
                    <a class="d-inline-flex align-items-center gap-2 mb-3 text-decoration-none" href="#inicio">
                        <i class="bi bi-compass fs-3 text-primary"></i>
                        <span class="fw-bold fs-5">RutaUni</span>
                    </a>
                    <p class="text-secondary">
                        Preuniversitario virtual para estudiantes de grado 10 y 11 en Colombia.
                        Acompañamiento desde 2019.
                    </p>
                    <div class="d-flex gap-2">
                        <a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" aria-label="Instagram de RutaUni">
                            <i class="bi bi-instagram" aria-hidden="true"></i>
                        </a>
                        <a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" aria-label="TikTok de RutaUni">
                            <i class="bi bi-tiktok" aria-hidden="true"></i>
                        </a>
                        <a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" aria-label="YouTube de RutaUni">
                            <i class="bi bi-youtube" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <div class="col-6 col-md-2 offset-md-1">
                    <h2 class="h6 text-uppercase text-secondary">Programas</h2>
                    <ul class="list-unstyled d-grid gap-2">
                        <li><a class="link-secondary" href="#programas">Ruta Saber 11</a></li>
                        <li><a class="link-secondary" href="#programas">Lectura y escritura</a></li>
                        <li><a class="link-secondary" href="#programas">Orientación universitaria</a></li>
                    </ul>
                </div>

                <div class="col-6 col-md-2">
                    <h2 class="h6 text-uppercase text-secondary">Recursos</h2>
                    <ul class="list-unstyled d-grid gap-2">
                        <li><a class="link-secondary" href="#preguntas">Preguntas frecuentes</a></li>
                        <li><a class="link-secondary" href="mailto:admisiones@rutuni.edu.co">admisiones@rutuni.edu.co</a></li>
                        <li><a class="link-secondary" href="tel:+573001234567">+57 300 123 4567</a></li>
                    </ul>
                </div>

                <div class="col-12 col-md-3">
                    <h2 class="h6 text-uppercase text-secondary">Horario de atención</h2>
                    <p class="text-secondary small mb-2">
                        Lunes a viernes, 7:00 a. m. – 8:00 p. m.<br>
                        Sábados, 8:00 a. m. – 2:00 p. m.
                    </p>
                    <p class="small mb-0">
                        <i class="bi bi-geo-alt me-1"></i>Medellín, Colombia · Cobertura nacional
                    </p>
                </div>
            </div>

            <hr class="my-4">

            <div class="row align-items-center g-3">
                <div class="col-12 col-md-6">
                    <p class="small text-secondary mb-0">© 2026 RutaUni. Proyecto educativo de ejemplo.</p>
                </div>
                <div class="col-12 col-md-6">
                    <ul class="list-inline d-flex flex-wrap justify-content-md-end gap-3 mb-0 small">
                        <li class="list-inline-item"><a class="link-secondary" href="#">Términos</a></li>
                        <li class="list-inline-item"><a class="link-secondary" href="#">Privacidad</a></li>
                        <li class="list-inline-item"><a class="link-secondary" href="#">Contáctanos</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <!-- ===================== MODAL ===================== -->
    <div class="modal fade" id="modalInscripcion" tabindex="-1"
         aria-labelledby="tituloModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title h4" id="tituloModal">Solicitar cupo</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>

                <div class="modal-body">
                    <p class="text-secondary">
                        Completa tus datos y nuestro equipo te contacta en menos de 24 horas para
                        confirmar el cupo y enviarte la ficha de matrícula.
                    </p>

                    <form id="formularioModal" novalidate>
                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <label for="modalNombre" class="form-label">Nombre completo</label>
                                <input type="text" class="form-control" id="modalNombre" required>
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="modalCorreo" class="form-label">Correo</label>
                                <input type="email" class="form-control" id="modalCorreo" required>
                            </div>
                            <div class="col-12">
                                <label for="modalPrograma" class="form-label">Programa</label>
                                <select class="form-select" id="modalPrograma" required>
                                    <option value="" selected disabled>Elegir un programa</option>
                                    <option>Ruta Saber 11</option>
                                    <option>Lectura y escritura</option>
                                    <option>Orientación universitaria</option>
                                </select>
                            </div>
                        </div>
                    </form>

                    <div class="alert alert-primary d-flex gap-2 mb-0 mt-3" role="note">
                        <i class="bi bi-info-circle-fill"></i>
                        <div class="small">
                            Al enviar aceptas que te contactemos por teléfono o correo.
                            No compartimos tus datos con terceros.
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" form="formularioModal" class="btn btn-primary">
                        <i class="bi bi-send me-2"></i>Enviar solicitud
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/mi-script.js"></script>
</body>
</html>

/* ============================================================
   RutaUni · Estilos personalizados
   Se carga DESPUÉS de Bootstrap, por eso gana en los empates
   ============================================================ */

/* ---------- 1. Identidad de color ---------- */
:root {
    --rutuni-azul: #1f3a8a;
    --rutuni-lima: #a3e635;
    --rutuni-naranja: #f97316;

    --bs-primary: var(--rutuni-azul);
    --bs-link-color: var(--rutuni-azul);
    --bs-link-hover-color: #16306f;

    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto,
                            "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Detalles propios ---------- */

/* En móvil los textos largos (correos, URLs) se parten antes de provocar un
   desplazamiento horizontal de toda la página. Ojo: `anywhere`, no
   `break-word`, porque es el único que reduce también el ancho mínimo de las
   celdas de una rejilla. */
body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rounded-4 {
    border-radius: 1.25rem !important;
}

.hero-degradado {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(163, 230, 53, .25), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(249, 115, 22, .30), transparent 40%),
        linear-gradient(135deg, var(--rutuni-azul) 0%, #2b1a6b 100%);
}

.tarjeta-programa {
    border-top: 4px solid var(--rutuni-azul);
    transition: transform .2s ease, box-shadow .2s ease;
}

.tarjeta-programa:hover,
.tarjeta-programa:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, .12);
}

.footer-borde {
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--rutuni-lima), var(--rutuni-naranja), var(--rutuni-azul)) 1;
}

/* ---------- 3. Modo oscuro ---------- */
[data-bs-theme="dark"] {
    --rutuni-azul: #93c5fd;
    --rutuni-lima: #bef264;
    --rutuni-naranja: #fdba74;

    --bs-link-color: #93c5fd;
    --bs-link-hover-color: #bfdbfe;
}

[data-bs-theme="dark"] .hero-degradado {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(163, 230, 53, .15), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(249, 115, 22, .18), transparent 40%),
        linear-gradient(135deg, #101a3d 0%, #1a1030 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        color-scheme: dark;
    }
}

/* ---------- 4. Navegación suave entre anclas ---------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ---------- 5. Impresión ---------- */
@media print {
    .navbar,
    footer,
    .btn {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}

/* ============================================================
   RutaUni · Validación del formulario y modo oscuro
   ============================================================ */
(function () {
    'use strict';

    const formulario = document.getElementById('formularioContacto');
    const avisoExito = document.getElementById('avisoExito');
    const textoExito = document.getElementById('textoExito');

    if (formulario) {
        function validarCampo(campo) {
            const esValido = campo.checkValidity();
            campo.classList.toggle('is-invalid', !esValido);
            campo.classList.toggle('is-valid', esValido);
            return esValido;
        }

        formulario.querySelectorAll('input, select, textarea').forEach(campo => {
            campo.addEventListener('blur', () => {
                if (campo.value !== '' || campo.required) {
                    validarCampo(campo);
                }
            });

            campo.addEventListener('input', () => {
                if (campo.classList.contains('is-invalid')) {
                    validarCampo(campo);
                }
            });
        });

        formulario.addEventListener('submit', function (evento) {
            evento.preventDefault();

            const campos = Array.from(formulario.querySelectorAll('input, select, textarea'));
            const resultados = campos.map(validarCampo);
            const primerError = campos[resultados.indexOf(false)];

            if (resultados.includes(false)) {
                primerError.focus();
                return;
            }

            const nombre = formulario.nombre.value.trim().split(' ')[0];
            textoExito.textContent =
                `Gracias, ${nombre}. Te responderemos a tu correo en menos de 24 horas hábiles.`;

            formulario.classList.add('d-none');
            avisoExito.classList.remove('d-none');
            avisoExito.focus();
        });
    }

    /* --- Modal de inscripción --- */
    const modalElement = document.getElementById('modalInscripcion');

    if (modalElement) {
        const modalInscripcion = new bootstrap.Modal(modalElement);

        document.querySelectorAll('[data-bs-target="#modalInscripcion"]').forEach(boton => {
            boton.addEventListener('click', evento => {
                evento.preventDefault();
                modalInscripcion.show();
            });
        });

        const formularioModal = document.getElementById('formularioModal');
        formularioModal.addEventListener('submit', evento => {
            evento.preventDefault();

            if (!formularioModal.checkValidity()) {
                formularioModal.classList.add('was-validated');
                return;
            }

            modalInscripcion.hide();
            alert('¡Gracias! Te contactaremos en menos de 24 horas.');
            formularioModal.reset();
        });

        modalElement.addEventListener('shown.bs.modal', () => {
            document.getElementById('modalNombre').focus();
        });
    }

    /* --- Modo claro / oscuro con memoria --- */
    const botonTema = document.getElementById('botonTema');
    const iconoTema = document.getElementById('iconoTema');
    const clave = 'rutuni-tema';

    function aplicarTema(tema) {
        document.documentElement.setAttribute('data-bs-theme', tema);
        if (iconoTema) {
            iconoTema.className = tema === 'dark' ? 'bi bi-sun-fill' : 'bi bi-moon-stars-fill';
        }
        try {
            localStorage.setItem(clave, tema);
        } catch (e) { /* modo privado */ }
    }

    let temaGuardado = null;
    try {
        temaGuardado = localStorage.getItem(clave);
    } catch (e) { /* sin almacenamiento */ }

    const sistemaPrefiereOscuro = window.matchMedia('(prefers-color-scheme: dark)').matches;
    aplicarTema(temaGuardado || (sistemaPrefiereOscuro ? 'dark' : 'light'));

    if (botonTema) {
        botonTema.addEventListener('click', () => {
            const actual = document.documentElement.getAttribute('data-bs-theme');
            aplicarTema(actual === 'dark' ? 'light' : 'dark');
        });
    }
})();

rutouni/
├── index.html
├── css/
│   └── estilos.css
├── js/
│   └── mi-script.js
├── img/
└── pruebas-grid.html

const modal  = new bootstrap.Modal('#miModal');   // .show() .hide() .toggle()
const tooltip = new bootstrap.Tooltip('#miTip');   // .show() .hide()
const popover = new bootstrap.Popover('#miPop');
const toast   = new bootstrap.Toast('#miToast');   // .show()
const offcanvas = new bootstrap.Offcanvas('#menu');
const Collapse = bootstrap.Collapse.getOrCreateInstance('#panel'); // .show() .hide() .toggle()