Diseñando la Zona Pública y la Experiencia del Usuario

¡Bienvenidos a TuCodigoCotidiano!

Hoy arrancamos oficialmente una nueva serie práctica: “Construyendo un Portal Escolar desde Cero”.

En esta Parte 1 vamos a concentrarnos en la cara pública del colegio: la sección abierta para cualquier visitante. No veremos bases de datos, paneles administrativos ni lógica avanzada aún; el objetivo de hoy es maquetar una Landing Page clara, rápida y útil, enfocada en resolver las preguntas más frecuentes de los padres —Admisiones, Contacto y Soporte— sin pedirles que inicien sesión.

¿El reto? Diseñar una interfaz moderna usando HTML, CSS y JavaScript, optimizada para móviles y capaz de guiar al usuario directo a lo que necesita. Es el primer paso para construir un ecosistema escolar sólido, accesible y profesional.

¡Vamos al código! 🚀

Estructura del proyecto: páginas, estilos y scripts

Antes de seguir escribiendo HTML y CSS “a mano”, vale la pena detenernos un momento a mirar cómo está organizado el proyecto en carpetas. Esta estructura no es un detalle menor: es lo que permite que el Portal Escolar crezca sin volverse un caos de archivos sueltos. En la raíz tenemos las cuatro páginas públicas principales (inicio.html, admisiones.html, contacto.html y soporte.html), una carpeta css/ donde viven los estilos globales, los módulos reutilizables y las hojas específicas de cada página, y una carpeta js/ con el script principal que se encarga de inyectar la barra de navegación y comportamientos comunes.

Dentro de css/ seguimos una separación muy clara: los archivos de la raíz (variables.css, estilos-globales.css, utilidades.css, pie-de-pagina.css) definen el “lenguaje visual” compartido por todo el portal; la subcarpeta modules/ contiene componentes reutilizables (botones, encabezado, tarjetas, noticias, formularios, FAQ); y la carpeta pages/ guarda los ajustes finos para cada sección concreta (inicio.css, admisiones.css, contacto.css, soporte.css). Gracias a esta organización, puedes localizar rápido dónde modificar algo (un botón, el header, el hero de una página) sin tener que perseguir estilos mezclados en un solo archivo gigantesco.

│   admisiones.html
│   contacto.html
│   inicio.html
│   soporte.html
│
├───css
│   │   estilos-globales.css
│   │   pie-de-pagina.css
│   │   utilidades.css
│   │   variables.css
│   │
│   ├───modules
│   │       botones.css
│   │       encabezado.css
│   │       faq.css
│   │       formularios.css
│   │       noticias.css
│   │       tarjetas-rol.css
│   │
│   └───pages
│           admisiones.css
│           contacto.css
│           inicio.css
│           soporte.css
│
└───js
        main.js

1. inicio.html: la Landing pública del Portal Escolar

El archivo inicio.html es la “puerta de entrada” al Portal Escolar: la primera vista que ven estudiantes, acudientes y docentes antes de iniciar sesión. Aquí combinamos un hero institucional, tres tarjetas de rol muy claras y un bloque de Circulares + Trámites rápidos pensado para padres ocupados que solo necesitan descargar algo o leer un comunicado reciente.

A nivel técnico, esta página se apoya en el mismo sistema de diseño que el resto del portal (variables, estilos globales, módulos y scripts compartidos), pero añade una hoja de estilos específica para la home. En este bloque vamos a desarmar la estructura HTML: desde el <head> y el atributo data-page, hasta el layout del héroe, las tarjetas por rol y la sección de noticias y accesos directos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I.E. Innovación Colombia - Portal Oficial</title>

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

    <!-- CSS global -->
    <link rel="stylesheet" href="css/variables.css">
    <link rel="stylesheet" href="css/estilos-globales.css">
    <link rel="stylesheet" href="css/utilidades.css">
    <link rel="stylesheet" href="css/pie-de-pagina.css">

    <!-- Módulos -->
    <link rel="stylesheet" href="css/modules/encabezado.css">
    <link rel="stylesheet" href="css/modules/botones.css">
    <link rel="stylesheet" href="css/modules/tarjetas-rol.css">
    <link rel="stylesheet" href="css/modules/noticias.css">
    <link rel="stylesheet" href="css/modules/formularios.css">
    <link rel="stylesheet" href="css/modules/faq.css">

    <!-- Página específica -->
    <link rel="stylesheet" href="css/pages/inicio.css">

    <script src="js/main.js" defer></script>
</head>
<body data-page="inicio">

    <!-- Navegación (inyectada por JS) -->
    <header id="navbar-root"></header>

    <main class="fade-in">
        <!-- HERO -->
        <header class="hero">
            <div class="hero-badge">🎓 Formando líderes desde 1995</div>
            <h2>Tu colegio, ahora más conectado</h2>
            <p>Accede a tus notas, observador y comunicados desde cualquier lugar.</p>
        </header>

        <!-- ROLES -->
        <section class="role-container">
            <article class="role-card card-student">
                <div class="icon-box bg-student">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"></path><path d="M6 12v5c3 3 9 3 12 0v-5"></path></svg>
                </div>
                <h3>Soy Estudiante</h3>
                <p>Consulta tus notas y horarios.</p>
                <span class="btn-role">Ingresar</span>
            </article>

            <article class="role-card card-parent">
                <div class="icon-box bg-parent">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                </div>
                <h3>Soy Acudiente</h3>
                <p>Monitorea el progreso de tus hijos.</p>
                <span class="btn-role">Ver Seguimiento</span>
            </article>

            <article class="role-card card-teacher">
                <div class="icon-box bg-teacher">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
                </div>
                <h3>Soy Docente</h3>
                <p>Gestiona planillas y reportes.</p>
                <span class="btn-role">Gestionar</span>
            </article>
        </section>

        <!-- NOTICIAS / TRÁMITES -->
        <section class="news-section">
            <div class="news-column">
                <div class="section-title">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
                    Circulares Recientes
                </div>
                <div class="news-list">
                    <article class="news-item">
                        <div class="date-badge">
                            <span class="day">27</span>
                            <span class="month">NOV</span>
                        </div>
                        <div class="news-content">
                            <span class="tag-urgent">Importante</span>
                            <h4>Entrega de Informes</h4>
                            <p>Se realizará este viernes. Asistencia obligatoria.</p>
                        </div>
                    </article>
                    <article class="news-item">
                        <div class="date-badge">
                            <span class="day">25</span>
                            <span class="month">NOV</span>
                        </div>
                        <div class="news-content">
                            <h4>Feria de la Ciencia</h4>
                            <p>Invitamos a participar en los stands de robótica.</p>
                        </div>
                    </article>
                </div>
            </div>

            <aside class="quick-access">
                <h3>Trámites</h3>
                <a href="#" class="qa-btn">Descargar Paz y Salvo</a>
                <a href="#" class="qa-btn">Manual de Convivencia</a>
                <a href="admisiones.html" class="qa-btn">Requisitos Matrícula</a>
            </aside>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <h3>Institución Educativa Innovación Colombia</h3>
        <p>Calle 10 # 45-67, Municipio, Colombia | Tel: (604) 123 4567</p>
        <div class="legal">
            <a href="#">Política de Datos</a>
            <a href="#">Términos y Condiciones</a>
        </div>
        <p class="footer-tag">Diseñado para TuCodigoCotidiano</p>
    </footer>

</body>
</html>

📄 1) Estructura general del documento HTML 📖 Leer explicación

El archivo sigue la estructura estándar de un documento HTML5:

1. <!DOCTYPE html> indica al navegador que use el modo estándar de HTML5.
2. <html lang="es"> define el idioma principal del documento como español. Esto ayuda a accesibilidad, lectores de pantalla y SEO.
3. Dentro de <head> se declaran metadatos, fuentes, hojas de estilo y scripts.
4. Dentro de <body> se encuentran todos los elementos visibles: cabecera, contenido principal y pie de página.

Además, el <body> tiene un atributo data-page="inicio". Ese data-attribute sirve como “bandera” para el JavaScript: el script puede leer ese valor y aplicar comportamientos específicos para la página de inicio (activar menú, resaltar navegación, cargar módulos, etc.).

Piensa en este HTML como el “esqueleto” semántico: no define estilos ni lógica directamente, solo estructura y significado de cada sección.

🎨 2) <head>: meta, fuentes, CSS global y módulos 📖 Leer explicación

La sección <head> está organizada en bloques claros:

Metadatos básicos
<meta charset="UTF-8"> asegura que el documento use UTF-8 (tildes y caracteres especiales).
<meta name="viewport" content="width=device-width, initial-scale=1.0"> hace que el diseño responda correctamente en móviles (1px lógico = 1 unidad de CSS según el ancho del dispositivo).

Título de la página
<title>I.E. Innovación Colombia - Portal Oficial</title> define lo que se ve en la pestaña del navegador y en resultados de búsqueda.

Fuente externa
El <link> a Google Fonts carga la familia Inter con varios pesos. Esto permite un diseño tipográfico consistente en todo el sitio:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

CSS global
Estas hojas se cargan primero porque afectan a todo el proyecto:

css/variables.css: variables de color, tipografía, spacing, etc.
css/estilos-globales.css: estilos generales de body, h1, p, layout base.
css/utilidades.css: clases utilitarias reutilizables (márgenes, textos, helpers).
css/pie-de-pagina.css: estilos comunes del footer en todo el sitio.

CSS de módulos
Luego se cargan estilos orientados a componentes:

css/modules/encabezado.css: barra de navegación / header global.
css/modules/botones.css: estilos para botones reutilizables.
css/modules/tarjetas-rol.css: tarjetas “Soy Estudiante / Acudiente / Docente”.
css/modules/noticias.css: listado de circulares, tarjetas de noticias.
css/modules/formularios.css: estilos base para formularios (inputs, labels, etc.).
css/modules/faq.css: acordeones o bloques de preguntas frecuentes.

CSS específico de página
css/pages/inicio.css contiene ajustes que solo aplican a la página de inicio: layout del héroe, distribución de columnas, espaciado particular, etc.

Script principal
<script src="js/main.js" defer></script> carga el JavaScript principal con defer, lo que significa:

El script se descarga en paralelo al HTML.
La ejecución se difiere hasta que el DOM está parseado.
Evita bloquear el renderizado inicial de la página.

El orden tiene intención: primero “fundamentos” (variables, global), luego módulos reutilizables, luego estilos específicos de la página, y finalmente el JavaScript que añade comportamiento.

🧭 3) <body> y layout principal: header, main y footer 📖 Leer explicación

El <body data-page="inicio"> organiza la página en tres zonas semánticas:

1. <header id="navbar-root">
Este header está vacío en HTML y se rellena desde js/main.js. El id="navbar-root" sirve como “ancla” para que JavaScript monte ahí la barra de navegación (por ejemplo, con document.getElementById('navbar-root')).

2. <main class="fade-in">
Contiene el contenido principal de la página y usa la clase fade-in, que probablemente aplica una animación de entrada suave al cargar. Dentro de <main> se organizan tres bloques:

Héroe (<header class="hero">): se usa <header> semántico dentro de main para el bloque principal de contenido, con un badge (.hero-badge), título <h2> y un párrafo descriptivo.
Roles (<section class="role-container">): agrupa tres <article> con clase role-card, uno por cada tipo de usuario (estudiante, acudiente, docente). Cada tarjeta incluye:
- .icon-box con un <svg> (icono vectorial).
- <h3> como título del rol.
- <p> con una descripción corta.
- <span class="btn-role"> que actúa como botón visual.
Noticias / Trámites (<section class="news-section">): layout de dos columnas:
- .news-column con un título (.section-title + svg) y una lista de .news-item para circulares.
- <aside class="quick-access"> con enlaces de acceso rápido (trámites frecuentes). El uso de <aside> indica contenido relacionado pero no central al flujo principal.

3. <footer>
El pie de página incluye:

<h3> con el nombre de la institución.
<p> con dirección y teléfono.
<div class="legal"> con enlaces a “Política de Datos” y “Términos y Condiciones”.
<p class="footer-tag"> como firma de diseño (“Diseñado para TuCodigoCotidiano”).

La combinación header + main + footer mejora la accesibilidad (navegación por regiones) y hace el HTML más fácil de entender para otros desarrolladores y motores de búsqueda.

🧱 4) Componentes clave: hero, tarjetas de rol, noticias y trámites 📖 Leer explicación

Aunque el detalle visual está en el CSS, el HTML ya refleja una intención clara de componentes:

Hero
<header class="hero"> agrupa:

.hero-badge: pequeño bloque destacado (texto + emoji) encima del título.
<h2>: mensaje principal de la página.
<p>: subtítulo que explica el beneficio.

Tarjetas de rol
Dentro de .role-container cada <article class="role-card card-XXX"> representa un tipo de usuario:

La combinación role-card + card-student|card-parent|card-teacher permite aplicar estilos base y variantes por rol (colores, iconos, etc.).
.icon-box + .bg-student|bg-parent|bg-teacher aíslan el fondo/icono de la tarjeta.
.btn-role es un “call to action” visual, probablemente estilizado como botón.

Noticias
Cada .news-item divide el contenido en dos bloques:

.date-badge con .day y .month, ideal para un diseño tipo “calendar badge”.
.news-content con un posible .tag-urgent, título <h4> y texto de la circular.

Trámites (aside)
El bloque <aside class="quick-access"> presenta enlaces de acción rápida con clase .qa-btn. Es una buena práctica separar estos accesos de la columna principal de noticias: semánticamente es contenido complementario.

Para un desarrollador, lo importante es ver que cada pieza (hero, tarjetas, noticias, trámites) tiene clases claras y nombres consistentes. Eso facilita mantener el CSS modular y reutilizar componentes en otras páginas (por ejemplo, las mismas role-card en un panel de login).

💡 5) Recomendaciones para extender o reutilizar este HTML 📖 Leer explicación

✔ Mantén el patrón CSS global → módulos → páginas: si agregas nuevas secciones (biblioteca, cafetería, etc.), crea nuevos módulos en css/modules/ y solo ajusta detalles en css/pages/nueva-pagina.css.

✔ Aprovecha data-page: si creas otra página (por ejemplo admisiones.html), cambia data-page a "admisiones" para que el mismo js/main.js pueda activar estados de menú o comportamientos específicos.

✔ Mantén la semántica: usa <section>, <article>, <aside>, <header> y <footer> para bloques con significado; y reserva <div> para agrupaciones puramente visuales.

✔ Si luego integras este HTML con un framework (React, Vue, etc.), esta estructura semántica te servirá como guía natural para crear componentes (Hero, RoleCard, NewsList, QuickAccess, Footer, etc.).

El HTML que tienes ya está bastante “listo para producción”: es semántico, modular y fácil de estilizar. Las mejoras futuras deberían venir más del CSS/JS y de la integración con APIs, no de la estructura básica.

2. inicio.css: el Hero principal de la página de inicio

Así como inicio.html define la estructura visible del Portal Escolar, el archivo inicio.css se encarga de darle personalidad a la cabecera visual del sitio: el bloque .hero. Aquí es donde definimos el fondo degradado institucional, la jerarquía tipográfica (título, subtítulo e insignia) y la curva inferior que separa el hero del resto del contenido. En otras palabras, este CSS convierte un simple encabezado en una bienvenida moderna y memorable para estudiantes, acudientes y docentes.

En este apartado vamos a desglosar las reglas que afectan a .hero, .hero h2, .hero p y .hero-badge, además de la media query que ajusta el diseño en pantallas pequeñas. La idea es que entiendas cómo combinar degradados, paddings, radios de borde y tamaños de fuente para construir un hero institucional reutilizable, que luego puedas adaptar a otras landings educativas cambiando únicamente colores y textos.

.hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--white);
    padding: 4rem 5% 6rem;
    text-align: center;
    position: relative;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    margin-bottom: 2rem;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 800;
}

.hero p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.hero-badge {
    background: rgba(255,255,255,0.2);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: inline-block;
}

@media (max-width: 768px) {
    .hero {
        padding: 3rem 5% 5rem;
        border-radius: 0 0 30px 30px;
    }

    .hero h2 {
        font-size: 1.8rem;
    }
}

🎨 1) Bloque principal .hero: fondo, espaciado y bordes 📖 Leer explicación

.hero {
Abre la regla para el contenedor principal del héroe: el bloque con el fondo degradado, el título y el texto de bienvenida.

background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
Crea un fondo de degradado diagonal:

135deg: el degradado va en diagonal (de esquina superior izquierda a inferior derecha).
var(--primary) en el 0% y var(--secondary) en el 100%: usas dos variables de color definidas en variables.css.

color: var(--white);
Fija el color de texto por defecto dentro del hero a blanco (o lo que defina --white), para asegurar contraste sobre el fondo degradado.

padding: 4rem 5% 6rem;
Controla el espacio interno:

Arriba: 4rem.
Lados: 5% del ancho de la pantalla (responsivo).
Abajo: 6rem, un poco más para que el hero “respire” mejor.

text-align: center;
Centra el texto y elementos inline/inline-block (como el badge) horizontalmente.

position: relative;
Prepara el contenedor por si más adelante necesitas posicionar hijos con position: absolute relativos al hero (por ejemplo, decoraciones o ilustraciones).

border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
Redondea solo las esquinas inferiores, generando ese efecto de “banda” con bordes curvos que separa el hero del resto de la página.

margin-bottom: 2rem;
Añade espacio extra debajo del hero para separarlo visualmente de la sección de roles.

}

La combinación de degradado + texto centrado + esquinas inferiores redondeadas crea un bloque muy reconocible para el portal: es la cabecera visual que ves nada más entrar.

✍️ 2) Tipografía y jerarquía: .hero h2, .hero p y .hero-badge 📖 Leer explicación

.hero h2 {
Estilos para el título principal dentro del hero.

font-size: 2.5rem;
Lo hace grande y protagonista. Usar rem permite escalar según el tamaño base de fuente.

margin-bottom: 1rem;
Separa el título del párrafo de subtítulo.

font-weight: 800;
Peso muy negrita, aprovechando la familia Inter con pesos altos para remarcar el mensaje principal.

}

.hero p {
Estilos para los párrafos dentro del hero.

font-size: 1.1rem;
Algo mayor que el cuerpo estándar para mejorar la legibilidad del subtítulo.

opacity: 0.9;
Baja ligeramente la intensidad del blanco para que el texto no “queme” sobre el degradado.

max-width: 600px;
Limita el ancho del bloque de texto para que las líneas no sean demasiado largas.

margin: 0 auto 2rem;
Combina:

Arriba: 0.
Lados: auto para centrar el párrafo.
Abajo: 2rem de separación con lo que venga después.

}

.hero-badge {
Estilos para la pequeña insignia encima del título (el texto con el emoji 🎓).

background: rgba(255,255,255,0.2);
Fondo blanco semitransparente (20%) que funciona como “cápsula” sobre el degradado sin taparlo del todo.

padding: 5px 15px;
Espacio interno vertical y horizontal que hace que el badge se vea cómodo y legible.

border-radius: 20px;
Redondea todas las esquinas para dar forma de píldora.

font-size: 0.9rem;
Un tamaño un poco menor que el texto principal, marcando que es un elemento secundario.

margin-bottom: 1rem;
Separa el badge del título.

display: inline-block;
Permite que el badge:

Respete margin-bottom y padding.
Se ajuste al ancho de su contenido sin ocupar todo el ancho del hero.

}

Con estas reglas se construye una jerarquía clara: badge pequeño → titular fuerte → subtítulo suave y centrado. Es un patrón que puedes reutilizar en muchas otras landings.

📱 3) Media query: ajustes responsivos para móviles 📖 Leer explicación

@media (max-width: 768px) {
Todo lo que está dentro se aplica solo cuando el ancho de la pantalla es de 768px o menos (tablets y móviles).

.hero {
Reescribe parte de los estilos del hero para pantallas pequeñas.

padding: 3rem 5% 5rem;
Reduce el espacio vertical:

Arriba: de 4rem a 3rem.
Abajo: de 6rem a 5rem.

Así el hero no ocupa demasiada altura en móviles.

border-radius: 0 0 30px 30px;
Ajusta los radios inferiores para que sean un poco más pequeños (30px) y explicita todas las esquinas:

Arriba izquierda: 0.
Arriba derecha: 0.
Abajo derecha: 30px.
Abajo izquierda: 30px.

}

.hero h2 {
Ajustes específicos para el título en pantallas pequeñas.

font-size: 1.8rem;
Reduce el tamaño para evitar que el texto se coma demasiadas líneas o se vea desproporcionado en móviles.

}

Esta sección muestra un patrón típico de diseño responsivo: defines un estilo base para escritorio y luego haces pequeños ajustes para pantallas más pequeñas, sin cambiar el layout por completo.

3. admisiones.html: página de Admisiones 2026

Después de la página de inicio, la vista de admisiones.html es una de las más importantes del portal: es donde las familias consultan qué documentos necesitan y cuánto cuesta el proceso. Esta página no solo tiene que verse bien, también debe ser clara, ordenada y fácil de escanear.

En esta sección vamos a analizar la estructura HTML completa de admisiones.html: cómo reutiliza los estilos globales y de módulos, cómo organiza la información en tarjetas (.info-card), cómo presenta los costos en un bloque legible y cómo cierra con una llamada a la acción para la pre-inscripción en línea. Esta vista sigue la misma filosofía que inicio.html: HTML semántico, clases bien nombradas y un layout que luego el CSS convierte en una experiencia profesional.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admisiones 2026 - I.E. Innovación Colombia</title>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/variables.css">
    <link rel="stylesheet" href="css/estilos-globales.css">
    <link rel="stylesheet" href="css/utilidades.css">
    <link rel="stylesheet" href="css/pie-de-pagina.css">

    <link rel="stylesheet" href="css/modules/encabezado.css">
    <link rel="stylesheet" href="css/modules/botones.css">
    <link rel="stylesheet" href="css/modules/tarjetas-rol.css">
    <link rel="stylesheet" href="css/modules/noticias.css">
    <link rel="stylesheet" href="css/modules/formularios.css">
    <link rel="stylesheet" href="css/modules/faq.css">

    <link rel="stylesheet" href="css/pages/admisiones.css">

    <script src="js/main.js" defer></script>
</head>
<body data-page="admisiones">

    <header id="navbar-root"></header>

    <main class="fade-in">
        <section class="admissions-header">
            <h2>Admisiones 2026</h2>
            <p>Únete a nuestra familia educativa. Consulta los requisitos y costos para el próximo año lectivo.</p>
        </section>

        <section class="admissions-content">
            
            <div class="admissions-grid">
                
                <div class="info-card">
                    <h3>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M16 13H8"></path><path d="M16 17H8"></path><path d="M10 9H8"></path></svg>
                        Requisitos Obligatorios
                    </h3>
                    <ul class="checklist">
                        <li>Registro Civil de Nacimiento (Original).</li>
                        <li>Fotocopia Tarjeta de Identidad (Ampliada al 150%).</li>
                        <li>Certificados de notas (Desde 5º primaria).</li>
                        <li>Paz y Salvo colegio anterior.</li>
                        <li>Certificado de afiliación a EPS.</li>
                        <li>3 Fotos tamaño documento (Fondo azul).</li>
                        <li>Retiro del SIMAT (Si viene de colegio público).</li>
                    </ul>
                </div>

                <div class="info-card">
                    <h3>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"></rect><line x1="2" y1="10" x2="22" y2="10"></line></svg>
                        Costos Educativos 2026
                    </h3>
                    <div class="prices-box">
                        <div class="price-row">
                            <span class="price-concept">Formulario de Inscripción</span>
                            <span class="price-value">$ 55.000</span>
                        </div>
                        <div class="price-row">
                            <span class="price-concept">Seguro Estudiantil (Anual)</span>
                            <span class="price-value">$ 32.000</span>
                        </div>
                        <div class="price-row">
                            <span class="price-concept">Carnetización</span>
                            <span class="price-value">$ 15.000</span>
                        </div>
                        <div class="price-row total-row">
                            <span class="price-concept total-label">Total Matrícula</span>
                            <span class="price-value total-value">$ 102.000</span>
                        </div>
                    </div>
                    <p class="prices-note">* Los colegios oficiales no cobran pensión mensual (Gratuidad educativa).</p>
                </div>
            </div>

            <div class="cta-box">
                <h3>¿Listo para empezar?</h3>
                <p>Puedes iniciar el proceso de pre-inscripción en línea para agilizar tu visita a secretaría.</p>
                <a href="#" class="btn-primary">Llenar Formulario de Pre-Inscripción</a>
            </div>
        </section>
    </main>

    <footer>
        <h3>Institución Educativa Innovación Colombia</h3>
        <p>Calle 10 # 45-67, Municipio, Colombia | Tel: (604) 123 4567</p>
        <div class="legal">
            <a href="#">Política de Datos</a>
            <a href="#">Términos y Condiciones</a>
        </div>
        <p class="footer-tag">Diseñado para TuCodigoCotidiano</p>
    </footer>

</body>
</html>

📄 1) Estructura general y reutilización del layout base 📖 Leer explicación

El archivo admisiones.html sigue exactamente el mismo patrón estructural que inicio.html, lo que es ideal para un proyecto escalable:

<!DOCTYPE html> → activa el modo estándar de HTML5.
<html lang="es"> → indica que el contenido principal está en español (accesibilidad y SEO).
<head> … </head> → metadatos, fuentes, CSS global, módulos y CSS específico de página.
<body data-page="admisiones"> → contenido visible y “bandera” para el JavaScript.

La cabecera del documento cambia el título para esta vista:

<title>Admisiones 2026 - I.E. Innovación Colombia</title>

Eso hace que la pestaña del navegador refleje el contexto correcto (ya no “Portal Oficial” genérico, sino “Admisiones 2026”), lo que también ayuda en buscadores y al compartir enlaces.

Igual que en la página de inicio, se cargan:

Fuente Inter desde Google Fonts.
CSS global: variables.css, estilos-globales.css, utilidades.css, pie-de-pagina.css.
CSS de módulos reutilizables: encabezado, botones, tarjetas, noticias, formularios, FAQ.
CSS específico de página: css/pages/admisiones.css, donde ajustas layout y estilos propios de esta vista.
Script principal: <script src="js/main.js" defer></script>.

Piensa en admisiones.html como otra “pantalla” que se monta sobre el mismo sistema de diseño: cambian los bloques de contenido, pero la base visual y el comportamiento global permanecen.

🧭 2) Body, navbar y cabecera de la página de Admisiones 📖 Leer explicación

El <body data-page="admisiones"> mantiene el mismo patrón que en la página de inicio, pero con un valor de data-page distinto:

<body data-page="admisiones">

Ese atributo permite que js/main.js detecte en qué sección estás y, por ejemplo:

Marcar en la navbar el enlace “Admisiones” como activo.
Aplicar comportamientos específicos solo en esta vista (scroll, validaciones, etc.).

Justo después tienes la cabecera:

<header id="navbar-root"></header>

Igual que en inicio.html, está vacía a propósito: JavaScript la “inyecta” en tiempo de carga. De esta forma, la misma barra de navegación se reutiliza en todas las páginas del portal sin duplicar HTML.

La sección principal de introducción a Admisiones se define así:

<section class="admissions-header">
    <p>Admisiones 2026</p>
    <p>Únete a nuestra familia educativa...</p>
</section>

Este bloque cumple un papel similar al .hero de inicio, pero con un tono más informativo: título claro (Admisiones 2026) y un párrafo que contextualiza la página (“consulta los requisitos y costos…”). El estilo exacto (tipografía, espaciado, colores) se controla en admisiones.css.

🧱 3) Contenido principal: grid de requisitos y costos 📖 Leer explicación

El grueso de la información vive dentro de:

<section class="admissions-content">
    <div class="admissions-grid">
        ...
    </div>
    ...
</section>

.admissions-content actúa como contenedor general (márgenes, ancho máximo, separación vertical); .admissions-grid organiza las tarjetas en columnas (normalmente 2 en escritorio, 1 en móvil).

Tarjeta 1: Requisitos Obligatorios

La primera tarjeta (.info-card) se centra en los documentos que debe traer la familia:

<div class="info-card">
    <p>
        Requisitos Obligatorios
    </p>
    <ul class="checklist">
        <li>Registro Civil de Nacimiento...</li>
        ...
    </ul>
</div>

<p> incluye un icono SVG + el título “Requisitos Obligatorios”, reforzando visualmente el propósito de la tarjeta.
<ul class="checklist"> lista los ítems en forma de lista con viñetas personalizables vía CSS (checks, iconos, etc.).
Cada <li> es un requisito concreto (registro civil, fotocopia, certificados, paz y salvo…).

Usar una lista ordenada de este tipo permite que los padres escaneen rápidamente qué necesitan sin leer párrafos largos.

Tarjeta 2: Costos Educativos 2026

La segunda tarjeta también usa .info-card, pero su interior cambia para adaptarse a una tabla de precios:

<div class="info-card">
    <p>
        <svg ...>...</svg>
        Costos Educativos 2026
    </p>
    <div class="prices-box">
        <div class="price-row">
            <span class="price-concept">Formulario de Inscripción</span>
            <span class="price-value">$ 55.000</span>
        </div>
        ...
        <div class="price-row total-row">
            <span class="price-concept total-label">Total Matrícula</span>
            <span class="price-value total-value">$ 102.000</span>
        </div>
    </div>
    <p class="prices-note">* Los colegios oficiales no cobran pensión mensual...</p>
</div>

.prices-box envuelve todas las filas de precios.
Cada .price-row alinea concepto + valor (ideal para usar display: flex en el CSS).
.total-row, .total-label y .total-value permiten destacar visualmente el total (negritas, fondo distinto, etc.).
.prices-note muestra una aclaración importante en formato de nota al pie.

Este patrón de “tarjeta con lista” + “tarjeta con filas de precios” es muy reutilizable: puedes aplicarlo a otros procesos (matrículas, certificaciones, servicios adicionales, etc.) simplemente cambiando los textos.

🚀 4) Llamada a la acción: caja de pre-inscripción en línea 📖 Leer explicación

Después de mostrar requisitos y costos, la página cierra el flujo con una llamada a la acción clara:

<div class="cta-box">
    <p>¿Listo para empezar?</p>
    <p>Puedes iniciar el proceso de pre-inscripción en línea...</p>
    <a href="#" class="btn-primary">
        Llenar Formulario de Pre-Inscripción
    </a>
</div>

.cta-box agrupa el bloque final (normalmente con fondo destacado, borde o sombra en el CSS).
<p> formula una pregunta directa al usuario (“¿Listo para empezar?”).
<p> explica el beneficio: agilizar la visita a secretaría.
<a class="btn-primary"> actúa como botón principal, siguiendo el sistema de diseño de botones.css.

Cuando conectes esto a un backend, ese href="#" debería apuntar a:

Una página interna con el formulario.
O un enlace externo (por ejemplo, un formulario en línea del colegio).

Esta CTA convierte una página informativa en un flujo de acción: no solo informas al padre, sino que le das un paso siguiente concreto y medible.

🔁 5) Footer compartido: identidad y enlaces legales 📖 Leer explicación

El <footer> es prácticamente el mismo que en inicio.html:

<footer>
    <p>Institución Educativa Innovación Colombia</p>
    <p>Calle 10 # 45-67, Municipio, Colombia | Tel: (604) 123 4567</p>
    <div class="legal">
        <a href="#">Política de Datos</a>
        <a href="#">Términos y Condiciones</a>
    </div>
    <p class="footer-tag">Diseñado para TuCodigoCotidiano</p>
</footer>

Refuerza el nombre de la institución y sus datos de contacto.
Incluye enlaces legales obligatorios en cualquier portal real (datos personales, términos de uso).
.footer-tag firma el diseño y conecta con tu marca TuCodigoCotidiano.

Al reutilizar el mismo footer en todo el portal, mantienes coherencia visual y evitas duplicar contenido: basta con un solo módulo CSS bien hecho para toda la escuela.

4. admisiones.css: rejilla de requisitos, costos y llamada a la acción

Una vez definida la estructura HTML de admisiones.html, este bloque de CSS es el que transforma esa maqueta en una vista limpia y fácil de escanear. Aquí se define la cabecera de la página de Admisiones, la rejilla de dos columnas para requisitos y costos, el estilo de las tarjetas (.info-card), la lista de chequeo con iconos de “✓” y la caja de precios con su fila de total destacado.

Además, este estilo introduce la caja de llamada a la acción (.cta-box) con un degradado similar al héroe de inicio, y remata con un pequeño ajuste responsivo: cuando la pantalla es más estrecha, la rejilla se convierte en una sola columna para que todo siga siendo legible en móvil. En esta sección vamos a desmenuzar cada parte del CSS: cómo se organizan los contenedores, cómo se construyen las tarjetas y cómo se resalta el botón de “Pre-Inscripción” para guiar al padre al siguiente paso.

.admissions-header {
    background-color: var(--white);
    padding: 3rem 5%;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.admissions-header h2 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.admissions-header p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.admissions-content {
    max-width: 1100px;
    margin: 4rem auto; 
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.admissions-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2rem;
}

.admissions-grid .info-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0,0,0,0.03);
    height: 100%; 
}

.admissions-grid h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.admissions-grid h3 svg {
    flex-shrink: 0;
    color: var(--secondary); 
}

.checklist {
    list-style: none;
    margin-top: 1rem;
}

.checklist li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: #ecfdf5;
    color: #059669;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.prices-box {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px dashed #cbd5e1;
}

.price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
}

.price-value {
    font-weight: 700;
    color: var(--primary);
}

.total-row {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #cbd5e1;
    font-size: 1.1rem;
}

.prices-note {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 1rem;
    font-style: italic;
}

.cta-box {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    color: var(--white);
    box-shadow: 0 10px 25px -5px rgba(0, 51, 102, 0.2);
}

.cta-box h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.cta-box p {
    margin-bottom: 2rem;
    opacity: 0.9;
    font-size: 1.05rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-box .btn-primary {
    background: var(--white);
    color: var(--primary);
    padding: 15px 40px;
    font-size: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: none;
}

.cta-box .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

@media (max-width: 900px) {
    .admissions-grid {
        grid-template-columns: 1fr;
    }
}

🧭 1) Cabecera de Admisiones y contenedor principal 📖 Leer explicación

.admissions-header { ... }
Define la franja superior de la página de Admisiones: título + párrafo introductorio.

background-color: var(--white);
Fondo blanco limpio para que el bloque se vea neutro y no compita visualmente con el hero de la página de inicio.

padding: 3rem 5%;
Espaciado interno:

Arriba/abajo: 3rem para que el título y el texto “respiren”.
Lados: 5% del ancho del viewport, así se adapta bien en distintas resoluciones.

text-align: center;
Centra el título y el párrafo, reforzando la idea de “bloque de introducción”.

border-bottom: 1px solid #e5e7eb;
Dibuja una línea sutil debajo de la cabecera para separarla del contenido principal. El color es un gris muy claro tipo “borde de tarjeta”.

.admissions-header h2 { ... }
Estilos para el título “Admisiones 2026”.

font-size: 2rem; → tamaño grande pero no tan enorme como un hero.
color: var(--primary); → usa el color principal de la paleta del proyecto.
margin-bottom: 0.5rem; → pequeña separación respecto al párrafo.

.admissions-header p { ... }
Estilos para el texto descriptivo bajo el título.

color: var(--text-light); → tono más suave que el texto normal.
max-width: 600px; → limita el ancho para mejorar la lectura en escritorio.
margin: 0 auto; → centra el párrafo dentro de la cabecera.

.admissions-content { ... }
Contenedor principal del contenido de la página: tarjetas + CTA.

max-width: 1100px;
Fija un ancho máximo para que el contenido no se extienda demasiado en pantallas grandes.

margin: 4rem auto;

Arriba/abajo: 4rem de separación con otros bloques.
Lados: auto, lo que centra el contenedor.

padding: 0 5%;
Añade un poco de aire lateral extra, especialmente útil en móviles.

display: flex;
flex-direction: column;
gap: 3rem;
Organiza los hijos (la rejilla + la caja CTA) como una columna con un espacio de 3rem entre ellos.

En resumen: este bloque define la “intro” de Admisiones y el contenedor donde viven las tarjetas de requisitos/costos y la llamada a la acción final.

🧱 2) Rejilla de tarjetas e info-card reutilizables 📖 Leer explicación

.admissions-grid { ... }
Define la rejilla de dos columnas donde se muestran “Requisitos Obligatorios” y “Costos Educativos 2026”.

display: grid;
Activa CSS Grid para organizar las tarjetas.

grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
Crea dos columnas:

Primera columna: 1.2fr (un poco más ancha, ideal para la checklist).
Segunda columna: 1fr (un poco más estrecha, suficiente para la tabla de precios).
minmax(0, ...) evita problemas de overflow cuando el contenido se hace grande.

gap: 2rem;
Espacio horizontal y vertical entre las tarjetas, para que no se peguen.

.admissions-grid .info-card { ... }
Estilos base para cada tarjeta de contenido dentro de la rejilla.

background: var(--white); → fondo blanco tipo “tarjeta”.
padding: 2.5rem; → espacio interno amplio, estilo card de dashboard moderno.
border-radius: 16px; → esquinas redondeadas y suaves.
box-shadow: var(--shadow); → sombra definida en tus variables globales, da sensación de “caja elevada”.
border: 1px solid rgba(0,0,0,0.03); → borde muy sutil para mejorar el contraste con el fondo.
height: 100%; → hace que las tarjetas llenen la altura disponible y queden alineadas.

.admissions-grid h3 { ... }
Títulos dentro de cada tarjeta.

display: flex;
align-items: center;
gap: 12px;
Coloca el icono SVG y el texto del h3 en una misma fila, centrados verticalmente, con un espacio de 12px entre ellos.

font-size: 1.3rem; → tamaño medio–grande para destacar el título.
color: var(--primary); → usa el color principal del colegio.
margin-bottom: 1.5rem; → separación clara del contenido que viene debajo.
font-weight: 700; → negrita fuerte.

.admissions-grid h3 svg { ... }
Estilos para los iconos al lado de los títulos.

flex-shrink: 0; → evita que el icono se deforme cuando el texto es largo.
color: var(--secondary); → aplica el color secundario del tema, creando contraste entre icono y título.

Aquí se ve claramente el patrón de “tarjeta reutilizable”: un contenedor blanco con sombra, título con icono y contenido interno que puede ser una lista, una tabla de precios, etc.

✅ 3) Checklist con iconos y caja de precios con total destacado 📖 Leer explicación

.checklist { ... }
Estilos para la lista de requisitos (documentos obligatorios).

list-style: none; → elimina las viñetas por defecto del navegador.
margin-top: 1rem; → separa la lista del título h3.

.checklist li { ... }
Cada elemento de la lista.

position: relative;
Necesario para poder posicionar el pseudo-elemento ::before de forma absoluta dentro del li.

padding-left: 2rem;
Deja espacio a la izquierda para el icono circular del check.

margin-bottom: 0.8rem; → separación vertical entre cada requisito.
font-size: 0.95rem; → ligeramente más pequeño que el texto normal.
color: var(--text-dark); → buen contraste con el fondo blanco.

.checklist li::before { ... }
Crea el “check” verde dentro de un círculo, sin usar ninguna imagen.

content: "✓"; → el símbolo de check.
position: absolute; + left: 0; + top: 0; → lo coloca en la esquina superior izquierda del li.
width y height de 24px → tamaño del círculo.
background: #ecfdf5; → verde muy suave.
color: #059669; → verde intenso para el símbolo.
border-radius: 50%; → lo convierte en un círculo perfecto.
display: flex; + align-items / justify-content: center; → centra el “✓” dentro del círculo.
font-size: 0.8rem; + font-weight: bold; → el check se ve compacto pero claro.

.prices-box { ... }
Contenedor de la tabla de precios.

background: #f8fafc; → gris azulado suave, que marca el bloque como “información financiera”.
border-radius: 12px; → esquinas redondeadas.
padding: 1.5rem; → espacio interior cómodo.
border: 1px dashed #cbd5e1; → borde punteado que da sensación de “resumen” o “recibo”.

.price-row { ... }
Filas de concepto + valor.

display: flex;
justify-content: space-between;
Alinea el concepto a la izquierda y el valor a la derecha, ocupando todo el ancho disponible.

margin-bottom: 0.8rem; → separación entre filas.
font-size: 0.95rem; → tamaño ligeramente compacto, similar al de la checklist.

.price-value { ... }
Estilos para la cantidad en dinero.

font-weight: 700; → negrita para que el valor resalte.
color: var(--primary); → usa el color principal del colegio para mantener la identidad visual.

.total-row { ... }
Estilos adicionales para la fila de total.

margin-top: 1rem; + padding-top: 1rem;
Separa visualmente el total de las demás filas.

border-top: 1px solid #cbd5e1;
Dibuja una línea superior que refuerza la idea de “sumatoria final”.

font-size: 1.1rem;
Aumenta ligeramente el tamaño para que el total destaque sobre los otros valores.

.prices-note { ... }
Nota aclaratoria al pie (“Los colegios oficiales no cobran pensión…”).

font-size: 0.8rem; → más pequeña que el texto normal.
color: var(--text-light); → tono suave para indicar que es un texto secundario.
margin-top: 1rem; → separación con la caja de precios.
font-style: italic; → da aspecto de nota legal o comentario aclaratorio.

Con estos estilos, la sección de Admisiones muestra claramente qué se debe llevar y cuánto cuesta, sin saturar al usuario con tablas complicadas.

🚀 4) Caja de llamada a la acción y comportamiento responsivo 📖 Leer explicación

.cta-box { ... }
Es la caja final que invita a llenar el formulario de pre-inscripción.

background: linear-gradient(135deg, var(--primary), var(--secondary));
Degradado diagonal usando los colores principales del proyecto, similar al hero de la página de inicio.

border-radius: 20px; → esquinas amplias redondeadas.
padding: 3rem; → mucho aire interno para que la caja se sienta importante y cómoda.
text-align: center; → centra título, texto y botón.
color: var(--white); → texto blanco para máximo contraste con el degradado.
box-shadow: 0 10px 25px -5px rgba(0, 51, 102, 0.2); → sombra marcada que hace que la CTA parezca “flotar” por encima de la página.

.cta-box h3 { ... }
font-size: 1.5rem; → tamaño intermedio, suficiente para destacar sin competir con el hero.
margin-bottom: 0.5rem; → espacio con el texto descriptivo.

.cta-box p { ... }
Texto que explica el beneficio de la pre-inscripción en línea.

margin-bottom: 2rem; → deja espacio para el botón.
opacity: 0.9; → baja un poco la intensidad del blanco, haciéndolo más suave de leer.
font-size: 1.05rem; → ligeramente más grande que el texto base.
max-width: 600px; + margin-left/right: auto; → limita el ancho y centra el párrafo.

.cta-box .btn-primary { ... }
Botón principal dentro de la CTA.

background: var(--white); → fondo blanco que contrasta fuerte con el degradado.
color: var(--primary); → texto del botón en el color principal del colegio.
padding: 15px 40px; → botón amplio, fácil de pulsar.
font-size: 1rem; → tamaño cómodo de lectura.
box-shadow: 0 5px 15px rgba(0,0,0,0.2); → sombra propia del botón, lo hace resaltar aún más.
border: none; → sin borde HTML por defecto.

.cta-box .btn-primary:hover { ... }
Efecto al pasar el mouse.

transform: translateY(-3px); → el botón “sube” 3px, sensación de botón interactivo.
box-shadow: 0 8px 20px rgba(0,0,0,0.3); → sombra más profunda para remarcar el hover.

@media (max-width: 900px) { ... }
Regla responsiva para pantallas pequeñas y tablets.

.admissions-grid { grid-template-columns: 1fr; }
Cuando el ancho de la pantalla es de 900px o menos:

La rejilla de Admisiones pasa de 2 columnas a 1 sola columna.
Las tarjetas se apilan verticalmente, ocupando todo el ancho disponible.
Se mejora la legibilidad y se evita que los textos queden demasiado apretados.

Con esta última sección, la página de Admisiones se mantiene usable y clara tanto en escritorio como en móvil, sin tener que duplicar HTML: todo lo hace el CSS.

5. contacto.html: página de PQRS y canal directo con la institución

Además de informar sobre admisiones y noticias, todo portal escolar serio necesita un canal claro para recibir peticiones, quejas, reclamos y sugerencias (PQRS). Ese es el papel de contacto.html: una vista donde cualquier acudiente, estudiante o visitante pueda encontrar los datos de la institución y enviar un mensaje sin necesidad de crear usuario ni iniciar sesión.

En este apartado vamos a revisar la estructura completa de la página de contacto: cómo reutiliza la navbar y el footer global, cómo organiza la información institucional en una columna con iconos (ubicación, teléfono, correo y horario), cómo reserva un espacio para el mapa y cómo construye un formulario sencillo pero profesional para el envío de mensajes. La idea es que entiendas el patrón “dos columnas: información + formulario” y puedas adaptarlo a cualquier colegio o entidad pública.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contacto - I.E. Innovación Colombia</title>

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

    <!-- CSS global -->
    <link rel="stylesheet" href="css/variables.css">
    <link rel="stylesheet" href="css/estilos-globales.css">
    <link rel="stylesheet" href="css/utilidades.css">
    <link rel="stylesheet" href="css/pie-de-pagina.css">

    <!-- Módulos -->
    <link rel="stylesheet" href="css/modules/encabezado.css">
    <link rel="stylesheet" href="css/modules/botones.css">
    <link rel="stylesheet" href="css/modules/tarjetas-rol.css">
    <link rel="stylesheet" href="css/modules/noticias.css">
    <link rel="stylesheet" href="css/modules/formularios.css">
    <link rel="stylesheet" href="css/modules/faq.css">

    <!-- Página específica -->
    <link rel="stylesheet" href="css/pages/contacto.css">

    <script src="js/main.js" defer></script>
</head>
<body data-page="contacto">

    <!-- Navegación (inyectada por JS) -->
    <header id="navbar-root"></header>

    <main class="fade-in">
        <section class="contact-header">
            <h2>Contáctanos</h2>
            <p>Estamos aquí para escucharte. Envíanos tus peticiones, quejas, reclamos o felicitaciones (PQRS).</p>
        </section>

        <section class="contact-content">
            <div class="contact-grid">
                <!-- Columna Info -->
                <div class="contact-info">
                    <div class="info-card contact-card" style="height: 100%;">
                        <h3>Información Institucional</h3>
                        
                        <div class="contact-info-list">
                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                                </div>
                                <div class="contact-text">
                                    <h4>Ubicación</h4>
                                    <p>Calle 10 # 45-67<br>Barrio El Centro, Municipio</p>
                                </div>
                            </div>
                            
                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                                </div>
                                <div class="contact-text">
                                    <h4>Teléfono Secretaría</h4>
                                    <p>(604) 123 4567</p>
                                </div>
                            </div>

                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
                                </div>
                                <div class="contact-text">
                                    <h4>Correo Electrónico</h4>
                                    <p>secretaria@ieinnovacion.edu.co</p>
                                </div>
                            </div>

                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                                </div>
                                <div class="contact-text">
                                    <h4>Horario de Atención</h4>
                                    <p>Lunes a Viernes<br>7:00 AM - 12:00 PM y 2:00 PM - 4:00 PM</p>
                                </div>
                            </div>
                        </div>

                        <!-- Placeholder Mapa -->
                        <div class="map-preview">
                            Vista Previa del Mapa (Google Maps)
                        </div>
                    </div>
                </div>

                <!-- Columna Formulario -->
                <div class="contact-form">
                    <h3>Envíanos un mensaje</h3>
                    <form onsubmit="event.preventDefault(); alert('Mensaje simulado enviado correctamente');">
                        <div class="form-group">
                            <label class="form-label">Nombre Completo</label>
                            <input type="text" class="form-input" placeholder="Ej: María Rodríguez" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Correo Electrónico</label>
                            <input type="email" class="form-input" placeholder="ejemplo@correo.com" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Tipo de Solicitud</label>
                            <select class="form-select">
                                <option>Seleccione una opción...</option>
                                <option>Solicitud de Certificados</option>
                                <option>Información de Matrículas</option>
                                <option>Coordinación de Convivencia</option>
                                <option>Queja o Reclamo</option>
                                <option>Otro</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Mensaje</label>
                            <textarea class="form-textarea" placeholder="Escribe aquí los detalles de tu solicitud..."></textarea>
                        </div>

                        <button type="submit" class="btn-primary btn-full">Enviar Mensaje</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <h3>Institución Educativa Innovación Colombia</h3>
        <p>Calle 10 # 45-67, Municipio, Colombia | Tel: (604) 123 4567</p>
        <div class="legal">
            <a href="#">Política de Datos</a>
            <a href="#">Términos y Condiciones</a>
        </div>
        <p class="footer-tag">Diseñado para TuCodigoCotidiano</p>
    </footer>

</body>
</html>

🧭 1) Estructura general del documento y reutilización del layout 📖 Leer explicación

Igual que en las otras vistas del portal, la página de contacto comienza con la estructura estándar de un documento HTML5:

<!DOCTYPE html> indica al navegador que debe usar el modo estándar.
<html lang="es"> declara que el contenido principal está en español.
Dentro de <head> se definen metadatos, fuentes, hojas de estilo y scripts.
<body data-page="contacto"> contiene el HTML visible y marca esta vista como “contacto”.

El título del documento se ajusta a esta sección del portal:

<title>Contacto - I.E. Innovación Colombia</title>

Esto hace que la pestaña del navegador y los resultados de búsqueda reflejen claramente que se trata de la página de contacto / PQRS del colegio.

En cuanto a estilos, se sigue el mismo patrón modular del resto del proyecto:

Fuente Inter desde Google Fonts.
CSS global (variables.css, estilos-globales.css, utilidades.css, pie-de-pagina.css).
CSS por módulos reutilizables (encabezado, botones, tarjetas, noticias, formularios, FAQ).
CSS específico de página en css/pages/contacto.css para ajustar layout y detalles de esta vista.
Script principal js/main.js cargado con defer para no bloquear el renderizado.

En resumen, contacto.html no “inventa” una estructura nueva: reutiliza la misma base que inicio.html y admisiones.html, cambiando solo el contenido y la hoja de estilos específica.

🧱 2) Cabecera de contacto y layout en dos columnas 📖 Leer explicación

El <body data-page="contacto"> empieza con la barra de navegación compartida:

<header id="navbar-root"></header>

Este header se rellena desde JavaScript, igual que en las demás páginas, lo que garantiza que el menú siempre sea el mismo y se pueda marcar el enlace de “Contacto” como activo usando data-page.

Dentro de <main class="fade-in"> se organizan dos secciones:

.contact-header: la cabecera textual de la página (“Contáctanos” + frase PQRS).
.contact-content: el bloque principal con la información y el formulario.

La cabecera se ve así en HTML:

<section class="contact-header">
  <p>Contáctanos</p>
  <p>Estamos aquí para escucharte. Envíanos tus peticiones, quejas, reclamos o felicitaciones (PQRS).</p>
</section>

Este bloque introduce claramente el propósito de la página: servir como canal formal de comunicación entre la comunidad y la institución.

A continuación viene el layout en dos columnas dentro de .contact-content:

<section class="contact-content">
  <div class="contact-grid">
    <div class="contact-info">...</div>
    <div class="contact-form">...</div>
  </div>
</section>

.contact-grid agrupa las dos columnas:

Columna izquierda .contact-info: datos de ubicación, teléfono, correo, horario y mapa.
Columna derecha .contact-form: formulario de PQRS y solicitudes.

Este patrón “información + formulario” es típico en landings profesionales y ayuda al usuario a decidir si llama, escribe un correo o completa el formulario en línea.

📍 3) Columna izquierda: información institucional y vista previa del mapa 📖 Leer explicación

La columna de información está envuelta en una tarjeta reutilizable:

<div class="contact-info">
  <div class="info-card contact-card" style="height: 100%;">
    <p>Información Institucional</p>
    ...
  </div>
</div>

Aquí se aprovecha la clase .info-card que ya usaste en Admisiones, añadiendo una clase específica .contact-card y un style="height: 100%;" para que la tarjeta ocupe toda la altura disponible y se alineen las dos columnas.

Dentro de la tarjeta, .contact-info-list agrupa los distintos métodos de contacto:

<div class="contact-info-list">
  <div class="contact-item"> ... Ubicación ... </div>
  <div class="contact-item"> ... Teléfono Secretaría ... </div>
  <div class="contact-item"> ... Correo Electrónico ... </div>
  <div class="contact-item"> ... Horario de Atención ... </div>
</div>

Cada .contact-item sigue un patrón consistente:

.contact-icon: un icono SVG semántico (pin de mapa, teléfono, sobre, reloj).
.contact-text: un <h4> descriptivo (“Ubicación”, “Teléfono Secretaría”, etc.) y un <p> con los datos.

De esta forma, el usuario puede escanear rápidamente:

Dónde está ubicado el colegio (dirección y barrio).
A qué número llamar a Secretaría.
Cuál es el correo oficial de contacto.
En qué horario atiende la institución.

Finalmente, se reserva un espacio para el mapa:

<div class="map-preview">
  Vista Previa del Mapa (Google Maps)
</div>

Por ahora es solo un placeholder de texto, pero en una versión futura puedes reemplazarlo por:

Un <iframe> real de Google Maps.
O un mapa embebido de otro proveedor (OpenStreetMap, Leaflet, etc.).

Esta columna funciona como “tarjeta de presentación” de la institución: en un vistazo tienes dirección, contacto y horario sin necesidad de ir al footer o a otras páginas.

📨 4) Columna derecha: formulario de PQRS y envío de mensajes 📖 Leer explicación

La segunda columna contiene el formulario que permite enviar un mensaje a la institución:

<div class="contact-form">
  <p>Envíanos un mensaje</p>
  <form onsubmit="event.preventDefault(); alert('Mensaje simulado enviado correctamente');">
    ...
  </form>
</div>

El onsubmit del formulario por ahora bloquea el envío real y muestra un alert de prueba. En un proyecto en producción, aquí conectarías con un backend (PHP, Node, Django, etc.) o con un servicio externo de manejo de formularios.

Los campos se organizan en bloques .form-group, reutilizando las clases de tu módulo formularios.css:

Nombre Completo – <input type="text">, obligatorio (required).
Correo Electrónico – <input type="email">, también obligatorio.
Tipo de Solicitud – <select> con opciones de certificados, matrículas, convivencia, queja o reclamo, etc.
Mensaje – <textarea> para que la persona explique su caso con detalle.

El botón final sigue el estilo global de botones:

<button type="submit" class="btn-primary btn-full">
  Enviar Mensaje
</button>

.btn-primary aplica el color y estilo principal del sistema de diseño, mientras que .btn-full probablemente indica que el botón ocupa todo el ancho del formulario (según tu CSS global).

Con esta estructura, la institución no solo publica un correo o un teléfono: ofrece un canal guiado para que las PQRS lleguen con la información mínima necesaria (nombre, correo, tipo de solicitud y mensaje).

🔁 5) Footer compartido y consistencia del portal 📖 Leer explicación

La página cierra con el mismo footer reutilizado en todo el portal:

<footer>
  <p>Institución Educativa Innovación Colombia</p>
  <p>Calle 10 # 45-67, Municipio, Colombia | Tel: (604) 123 4567</p>
  <div class="legal">
    <a href="#">Política de Datos</a>
    <a href="#">Términos y Condiciones</a>
  </div>
  <p class="footer-tag">Diseñado para TuCodigoCotidiano</p>
</footer>

Aquí se refuerza:

La identidad de la institución (nombre, dirección y teléfono).
Los enlaces legales obligatorios (protección de datos, términos de uso).
Tu marca como autor del diseño (TuCodigoCotidiano).

Gracias a esta estructura, contacto.html se siente como una parte coherente del mismo ecosistema: misma tipografía, mismos colores, misma navbar y footer, pero con un contenido adaptado al flujo de PQRS.

6. contacto.css: diseño del bloque de contacto y distribución en dos columnas

El HTML de contacto.html define la estructura de la página, pero es este bloque de CSS el que la convierte en una vista profesional: cabecera clara, dos columnas bien balanceadas (información + formulario), tarjetas con sombra, iconos alineados y un recuadro que simula la vista previa del mapa. Aquí definimos cómo se ve y se comporta toda la sección de contacto, tanto en escritorio como en pantallas pequeñas.

En esta parte vamos a desglosar cada regla: primero la franja superior .contact-header, luego el contenedor principal .contact-content y la rejilla .contact-grid, después la tarjeta de información institucional (con .contact-item y .map-preview) y, por último, el bloque del formulario y el ajuste responsivo con @media. La idea es que puedas reutilizar este patrón en cualquier página de contacto institucional.

.contact-header {
    background-color: var(--white);
    padding: 3rem 5%;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.contact-header h2 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.contact-header p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.contact-content {
    max-width: 1100px;
    margin: 3rem auto;
    padding: 0 5%;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
}

.info-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.contact-card h3 {
    margin-bottom: 1.5rem;
    color: var(--primary);
}

.contact-info-list {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: #eff6ff;
    color: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-text h4 {
    font-size: 0.95rem;
    color: var(--text-light);
}

.contact-text p {
    font-weight: 600;
    color: var(--text-dark);
}

.map-preview {
    width: 100%;
    height: 200px;
    background: #e5e7eb;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 0.9rem;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" opacity="0.1"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke="black" stroke-width="2"/><circle cx="12" cy="10" r="3" stroke="black" stroke-width="2"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ddd;
}

.contact-form {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.contact-form h3 {
    color: var(--primary);
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

🧭 1) Cabecera de contacto y contenedor principal 📖 Leer explicación

.contact-header { ... }
Define la franja superior de la página de contacto, donde se muestra el título “Contáctanos” y el texto que explica que es un canal para PQRS.

background-color: var(--white);
Fondo blanco neutro que mantiene la cabecera limpia y coherente con el resto del portal.

padding: 3rem 5%;
Añade espacio interno:

Arriba/abajo: 3rem para que el bloque respire.
Lados: 5% del ancho del viewport, útil en pantallas grandes y pequeñas.

text-align: center;
Centra el título y el párrafo de introducción, reforzando la idea de “sección principal”.

border-bottom: 1px solid #e5e7eb;
Dibuja una línea sutil de separación respecto al contenido de abajo, usando un gris claro tipo “borde de tarjeta”.

.contact-header h2 { ... }
Estilos específicos para el título de la sección.

font-size: 2rem; → tamaño grande, similar a otras secciones principales.
color: var(--primary); → usa el color principal del colegio para mantener la identidad visual.
margin-bottom: 0.5rem; → separa el título del texto descriptivo.

.contact-header p { ... }
Estilos para el subtítulo que menciona las PQRS.

color: var(--text-light); → tono más suave para indicar que es texto secundario.
max-width: 600px; → limita el ancho del párrafo para mejorar la lectura en escritorio.
margin: 0 auto; → centra el bloque de texto dentro de la cabecera.

.contact-content { ... }
Contenedor principal que envuelve tanto la columna de información como el formulario.

max-width: 1100px;
Limita el ancho máximo del contenido para que no se expanda demasiado en monitores grandes.

margin: 3rem auto;

Arriba/abajo: 3rem de separación con la cabecera y el footer.
Lados: auto para centrar el bloque en la página.

padding: 0 5%;
Añade un pequeño acolchado lateral, especialmente útil en pantallas medianas y móviles.

Con estas reglas, el usuario entra a la página de contacto, ve un título claro, un texto de contexto y luego un bloque central bien delimitado donde sabe que encontrará información y formulario.

🧱 2) Rejilla de dos columnas e información institucional (iconos + mapa) 📖 Leer explicación

.contact-grid { ... }
Define la distribución en dos columnas: izquierda para la información institucional y derecha para el formulario.

display: grid;
Activa CSS Grid para organizar ambas columnas.

grid-template-columns: 1fr 1.5fr;
Establece dos columnas con proporción:

Primera columna: 1fr, ideal para la tarjeta de información.
Segunda columna: 1.5fr, un poco más ancha para el formulario.

gap: 3rem;
Añade espacio generoso entre las dos columnas, lo que mejora la legibilidad y evita que el layout se vea apretado.

.info-card { ... }
Estilos base para cualquier tarjeta de información (se reutiliza en contacto y otras vistas).

background: var(--white); → fondo blanco, estilo “card”.
padding: 2rem; → espacio interno cómodo para títulos y contenido.
border-radius: var(--radius); → esquinas redondeadas según tu sistema de diseño.
box-shadow: var(--shadow); → sombra definida en tus variables globales, que hace que la tarjeta parezca elevarse ligeramente sobre el fondo.

.contact-card h3 { ... }
Ajusta el título “Información Institucional” dentro de la tarjeta.

margin-bottom: 1.5rem; → deja espacio antes de la lista de datos.
color: var(--primary); → usa el color principal del colegio para destacar el título.

.contact-info-list { ... }
Bloque que agrupa los diferentes métodos de contacto (dirección, teléfono, correo, horario).

margin-bottom: 2rem;
Separa la lista del bloque inferior (el mapa).

.contact-item { ... }
Cada fila de información (un icono + un texto).

display: flex; → coloca icono y texto en una misma línea.
gap: 15px; → espacio entre el icono y el bloque de texto.
margin-bottom: 20px; → separación vertical entre elementos (ubicación, teléfono, etc.).

.contact-icon { ... }
Contenedor cuadrado para el icono SVG.

width y height: 40px; → tamaño fijo del recuadro.
background: #eff6ff; → azul muy suave que contrasta con el contenido.
color: var(--primary); → aplica el color principal al icono SVG.
border-radius: 8px; → esquinas ligeramente redondeadas.
display: flex; + align-items / justify-content: center; → centra el SVG dentro del recuadro.
flex-shrink: 0; → evita que el icono se comprima si el texto es muy largo.

.contact-text h4 { ... } y .contact-text p { ... }
Separan visualmente la “etiqueta” (Ubicación, Teléfono…) del dato en sí.

h4 usa font-size: 0.95rem; y color: var(--text-light); para verse como texto auxiliar.
p usa font-weight: 600; y color: var(--text-dark); para que el dato (dirección, número) resalte.

.map-preview { ... }
Tarjeta que simula una vista previa del mapa.

width: 100%; y height: 200px; → tamaño fijo del recuadro.
background: #e5e7eb; y luego background-color: #ddd; → fondo gris claro, estilo “placeholder”.
border-radius: var(--radius); → coherente con las demás tarjetas.
display: flex; + align-items / justify-content: center; → centra el texto “Vista Previa del Mapa”.
color: var(--text-light); y font-size: 0.9rem; → texto secundario dentro del recuadro.

Lo más interesante es el background-image:

Se genera un pequeño icono de ubicación mediante un SVG embebido en un data:image/svg+xml. Ese icono se coloca en el centro con:

background-repeat: no-repeat;
background-position: center;

Aunque por ahora no hay mapa real, este placeholder da al usuario una pista visual clara de que aquí, en producción, verá la ubicación del colegio en un mapa interactivo.

📨 3) Tarjeta del formulario y comportamiento responsivo en móviles 📖 Leer explicación

.contact-form { ... }
Estilos para la tarjeta que contiene el formulario de “Envíanos un mensaje”.

background: var(--white); → fondo blanco, igual que las otras tarjetas.
padding: 2.5rem; → un poco más de espaciado que .info-card, ya que el formulario suele necesitar aire adicional para inputs y labels.
border-radius: var(--radius); → esquinas coherentes con el resto del sistema.
box-shadow: var(--shadow); → le da volumen y lo resalta como bloque de acción.

.contact-form h3 { ... }
Estilos para el subtítulo “Envíanos un mensaje”.

color: var(--primary); → refuerza la identidad del colegio en el encabezado del formulario.
margin-bottom: 20px; → separa el título del primer campo del formulario.

Finalmente, el bloque responsivo:

@media (max-width: 768px) { ... }
Regla que solo se aplica en tablets pequeñas y móviles (ancho ≤ 768px).

Dentro de ella:

.contact-grid {
  grid-template-columns: 1fr;
}

Esto significa que:

La rejilla deja de tener dos columnas y pasa a una sola columna.
Primero se mostrará la tarjeta de información y debajo el formulario (o viceversa, según el HTML).
Se evita que los bloques queden demasiado estrechos en móviles, mejorando la usabilidad.

Este último detalle garantiza que la página de contacto sea verdaderamente usable desde el celular: el usuario no tiene que hacer zoom ni lidiar con columnas apretadas, solo desplazar en vertical.

7. soporte.html: Centro de Ayuda y tickets de soporte técnico

Además de contactar a la institución por asuntos administrativos, un portal escolar moderno necesita un Centro de Ayuda para resolver dudas técnicas de la plataforma: problemas con contraseñas, notas que no se ven, certificados que no cargan, etc. Ese es el rol de soporte.html: una página tipo “help center” que combina un buscador, una lista de preguntas frecuentes (FAQ) y un formulario para crear tickets de soporte.

En este apartado vamos a desglosar la estructura HTML completa: cómo se reutiliza el layout global del portal, cómo se arma la cabecera del centro de ayuda, qué función cumple el buscador rápido, cómo se construyen los acordeones de FAQ con onclick y, finalmente, cómo se maqueta el formulario de ticket con un canal de atención urgente vía WhatsApp. La idea es que puedas reutilizar este patrón de “soporte técnico” en cualquier colegio o institución educativa.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centro de Ayuda - I.E. Innovación Colombia</title>

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

    <!-- CSS global -->
    <link rel="stylesheet" href="css/variables.css">
    <link rel="stylesheet" href="css/estilos-globales.css">
    <link rel="stylesheet" href="css/utilidades.css">
    <link rel="stylesheet" href="css/pie-de-pagina.css">

    <!-- Módulos -->
    <link rel="stylesheet" href="css/modules/encabezado.css">
    <link rel="stylesheet" href="css/modules/botones.css">
    <link rel="stylesheet" href="css/modules/tarjetas-rol.css">
    <link rel="stylesheet" href="css/modules/noticias.css">
    <link rel="stylesheet" href="css/modules/formularios.css">
    <link rel="stylesheet" href="css/modules/faq.css">

    <!-- Página específica -->
    <link rel="stylesheet" href="css/pages/soporte.css">

    <script src="js/main.js" defer></script>
</head>
<body data-page="soporte">

    <!-- Navegación (inyectada por JS) -->
    <header id="navbar-root"></header>

    <main class="fade-in">
        <section class="support-header">
            <h2>Centro de Ayuda</h2>
            <p>¿Tienes problemas con la plataforma? Encuentra soluciones rápidas o contacta al equipo técnico.</p>
        </section>

        <section class="support-search">
            <input type="text" placeholder="¿En qué podemos ayudarte? (Ej: Recuperar contraseña)">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
        </section>

        <section class="support-content">
            <div class="faq-section">
                <!-- Columna FAQ -->
                <div class="faq-list">
                    <h3>Preguntas Frecuentes</h3>
                    
                    <div class="faq-item" onclick="toggleFaq(this)">
                        <div class="faq-question">
                            Olvidé mi contraseña, ¿cómo la recupero?
                            <svg class="rotate-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                        </div>
                        <div class="faq-answer">
                            <p>En la pantalla de inicio de sesión, haz clic en "¿Olvidaste tu contraseña?". Ingresa tu correo registrado y te enviaremos un enlace para restablecerla. Si no tienes correo registrado, debes solicitarlo en secretaría.</p>
                        </div>
                    </div>

                    <div class="faq-item" onclick="toggleFaq(this)">
                        <div class="faq-question">
                            No puedo ver las notas del último periodo
                            <svg class="rotate-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                        </div>
                        <div class="faq-answer">
                            <p>El sistema cierra la visualización de notas durante la semana de comisiones de evaluación. Una vez finalice la entrega de informes, podrás consultarlas nuevamente.</p>
                        </div>
                    </div>

                    <div class="faq-item" onclick="toggleFaq(this)">
                        <div class="faq-question">
                            ¿Cómo descargo el certificado de estudios?
                            <svg class="rotate-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
                        </div>
                        <div class="faq-answer">
                            <p>Ingresa con tu usuario, ve al menú "Trámites" y selecciona "Certificados". Ten en cuenta que los certificados oficiales requieren estampilla y deben tramitarse presencialmente o por la sección de Pagos en Línea.</p>
                        </div>
                    </div>
                </div>

                <!-- Columna Ticket -->
                <div class="ticket-form">
                    <div class="ticket-card">
                        <h3 style="margin-bottom: 10px;">¿Sigues con problemas?</h3>
                        <p class="ticket-subtitle">Envía un reporte directo al ingeniero de sistemas del colegio.</p>
                        
                        <form onsubmit="event.preventDefault(); alert('Reporte técnico enviado');">
                            <div class="form-group">
                                <label class="form-label">Tu Rol</label>
                                <select class="form-select">
                                    <option>Estudiante</option>
                                    <option>Acudiente</option>
                                    <option>Docente</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Describe el error</label>
                                <textarea class="form-textarea" placeholder="Ej: Me sale error 404 al intentar subir la tarea de matemáticas..." style="min-height: 80px;"></textarea>
                            </div>
                            <button class="btn-primary btn-full">Crear Ticket de Soporte</button>
                        </form>

                        <div class="ticket-urgent">
                            <p>¿Es urgente?</p>
                            <a href="#" class="btn-whatsapp">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
                                Chat Soporte Técnico
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <h3>Institución Educativa Innovación Colombia</h3>
        <p>Calle 10 # 45-67, Municipio, Colombia | Tel: (604) 123 4567</p>
        <div class="legal">
            <a href="#">Política de Datos</a>
            <a href="#">Términos y Condiciones</a>
        </div>
        <p class="footer-tag">Diseñado para TuCodigoCotidiano</p>
    </footer>

</body>
</html>

🧭 1) Estructura general y cabecera del Centro de Ayuda 📖 Leer explicación

Igual que en las demás páginas del portal, soporte.html sigue la estructura base de un documento HTML5:

<!DOCTYPE html> → activa el modo estándar de HTML5.
<html lang="es"> → declara el idioma principal del documento como español.
<head> → contiene metadatos, fuentes, hojas de estilo globales y específicas, y el script principal.
<body data-page="soporte"> → envuelve todo el contenido visible y marca esta vista como “soporte”.

El título del documento refleja claramente el propósito de la vista:

<title>Centro de Ayuda - I.E. Innovación Colombia</title>

Esto es lo que se verá en la pestaña del navegador y en los resultados de búsqueda cuando alguien comparta o busque esta URL.

En cuanto a estilos, se mantiene la misma filosofía modular:

Fuente Inter desde Google Fonts.
CSS global: variables.css, estilos-globales.css, utilidades.css, pie-de-pagina.css.
Módulos reutilizables: encabezado, botones, tarjetas, noticias, formularios y FAQ.
CSS específico de página: css/pages/soporte.css, donde ajustas colores, layout y microdetalles de esta vista.
<script src="js/main.js" defer> → JavaScript principal, cargado sin bloquear el renderizado.

El cuerpo empieza con la navbar compartida:

<header id="navbar-root"></header>

Este header se rellena desde JavaScript, igual que en inicio.html, admisiones.html y contacto.html. El atributo data-page="soporte" permite que el script marque el enlace de “Centro de Ayuda” como activo.

Dentro de <main class="fade-in"> el primer bloque es la cabecera del centro de ayuda:

<section class="support-header">
  <p>Centro de Ayuda</p>
  <p>¿Tienes problemas con la plataforma? Encuentra soluciones rápidas o contacta al equipo técnico.</p>
</section>

.support-header presenta el título y un breve texto que explica el objetivo de la página: resolver problemas técnicos antes de que se conviertan en filas en secretaría.

Hasta aquí, la vista de soporte reusa la misma “columna vertebral” que el resto del portal: estructura HTML5 clara, módulos de CSS compartidos y un encabezado semántico para la sección.

🔍 2) Buscador rápido de ayuda y contenedor principal 📖 Leer explicación

Justo debajo de la cabecera aparece un pequeño módulo de búsqueda:

<section class="support-search">
  <input type="text" placeholder="¿En qué podemos ayudarte? (Ej: Recuperar contraseña)">
  <svg width="20" height="20" ...>...</svg>
</section>

Este bloque cumple varias funciones:

Contextualizar al usuario: “¿En qué podemos ayudarte?” le indica que puede escribir su problema.
Dar ejemplos: el placeholder sugiere búsquedas típicas como “Recuperar contraseña”.
Crear un patrón visual familiar: input + icono de lupa, como cualquier centro de ayuda moderno.

Aunque en este MVP el buscador no está conectado a una base de conocimiento real, el HTML ya está preparado para que luego puedas:

Filtrar dinámicamente las FAQs existentes.
Hacer llamadas a un backend que devuelva artículos de soporte.

El resto del contenido se agrupa en:

<section class="support-content">
  <div class="faq-section">
    ...
  </div>
</section>

.support-content actúa como contenedor principal del Centro de Ayuda, y .faq-section organiza el layout interno en dos columnas:

.faq-list → columna izquierda con las Preguntas Frecuentes.
.ticket-form → columna derecha con el formulario de ticket + contacto urgente.

Este patrón “buscador + dos columnas (FAQ + ticket)” es el corazón de la experiencia de soporte: primero intentas resolver solo, y si no funciona, escalas al equipo técnico.

❓ 3) Columna izquierda: Preguntas Frecuentes con acordeón interactivo 📖 Leer explicación

La columna de FAQs se ve así en HTML:

<div class="faq-list">
  <p>Preguntas Frecuentes</p>

  <div class="faq-item" onclick="toggleFaq(this)">
    <div class="faq-question">
      Olvidé mi contraseña, ¿cómo la recupero?
      <svg class="rotate-icon" ...>...</svg>
    </div>
    <div class="faq-answer">
      <p>En la pantalla de inicio de sesión...</p>
    </div>
  </div>

  ... más <div class="faq-item"> ...
</div>

Cada .faq-item representa una pregunta frecuente con su respuesta oculta/visible:

onclick="toggleFaq(this)" → cuando el usuario hace clic en el bloque, se llama a una función JS que seguramente alterna clases (por ejemplo .open) para desplegar o colapsar la respuesta.
.faq-question → contiene el texto de la pregunta y un icono SVG con forma de flecha.
.faq-answer → envuelve el párrafo con la explicación detallada del procedimiento.

Se muestran tres ejemplos de preguntas típicas de un portal escolar:

Recuperar contraseña: explica el flujo con “¿Olvidaste tu contraseña?” y el uso del correo registrado.
Notas del último periodo: aclara por qué a veces no se ven (semana de comisiones, cierre temporal).
Descargar certificado de estudios: diferencia entre certificados en línea y los oficiales con estampilla.

El icono SVG dentro de .faq-question tiene la clase .rotate-icon, que suele utilizarse en el CSS para girar la flecha cuando el acordeón está abierto (indicando que la respuesta se desplegó).

Con este patrón de acordeón, puedes añadir más preguntas sin cambiar la estructura: solo duplicas un .faq-item, cambias el texto y el Centro de Ayuda crece de forma orgánica.

🧩 4) Columna derecha: ticket de soporte técnico y canal urgente (WhatsApp) 📖 Leer explicación

La segunda columna está pensada para cuando la FAQ no fue suficiente:

<div class="ticket-form">
  <div class="ticket-card">
    <p>¿Sigues con problemas?</p>
    <p class="ticket-subtitle">Envía un reporte directo al ingeniero de sistemas del colegio.</p>

    <form onsubmit="event.preventDefault(); alert('Reporte técnico enviado');">
      ...
    </form>

    <div class="ticket-urgent">
      <p>¿Es urgente?</p>
      <a href="#" class="btn-whatsapp">
        <svg ...>...</svg>
        Chat Soporte Técnico
      </a>
    </div>
  </div>
</div>

.ticket-card agrupa todo: título, subtítulo, formulario y bloque de urgencias.

El formulario en sí es muy simple, pero suficiente para un primer ticket:

Tu Rol – <select class="form-select"> con opciones Estudiante, Acudiente, Docente.
Describe el error – <textarea class="form-textarea"> con un placeholder que da un ejemplo concreto.
Botón – <button class="btn-primary btn-full">Crear Ticket de Soporte</button>.

El atributo onsubmit="event.preventDefault(); alert('Reporte técnico enviado');" evita recargar la página y muestra una alerta simulada. En un proyecto real, aquí mandarías los datos a un backend que:

Guarde el ticket en una base de datos.
Envíe un correo al ingeniero de sistemas.
Genere un código de seguimiento para el usuario.

Debajo del formulario aparece el bloque de urgencias:

<div class="ticket-urgent">
  <p>¿Es urgente?</p>
  <a href="#" class="btn-whatsapp">
    <svg ...>...</svg>
    Chat Soporte Técnico
  </a>
</div>

Aquí se sugiere un canal de comunicación inmediata (WhatsApp) para casos críticos, usando un botón con icono SVG similar al logo de WhatsApp y la clase .btn-whatsapp, que luego se estiliza en CSS (color verde, layout de botón, etc.).

Esta columna convierte el Centro de Ayuda en algo accionable: si la FAQ no resuelve el problema, el usuario no se queda atascado; puede crear un ticket formal o abrir un chat urgente.

🔁 5) Footer compartido y coherencia con el resto del portal 📖 Leer explicación

La página cierra con el mismo footer reutilizado en todas las vistas del portal:

<footer>
  <p>Institución Educativa Innovación Colombia</p>
  <p>Calle 10 # 45-67, Municipio, Colombia | Tel: (604) 123 4567</p>
  <div class="legal">
    <a href="#">Política de Datos</a>
    <a href="#">Términos y Condiciones</a>
  </div>
  <p class="footer-tag">Diseñado para TuCodigoCotidiano</p>
</footer>

De esta forma, el Centro de Ayuda se siente como una parte coherente del mismo ecosistema:

Repite los datos de contacto oficiales.
Mantiene los enlaces legales visibles en todas las páginas.
Refuerza tu marca TuCodigoCotidiano como autor del diseño y del tutorial.

Con toda esta estructura, soporte.html deja de ser “solo una página más” y se convierte en el núcleo de la experiencia de soporte técnico del portal escolar.

8. soporte.css: cabecera degradada y buscador flotante del Centro de Ayuda

El archivo soporte.css es el que convierte el Centro de Ayuda en una sección visualmente potente: un hero degradado para el título, un buscador flotante que parece “salir” de la cabecera y un layout en dos columnas para las FAQs y el formulario de tickets. Aquí no cambiamos el HTML, solo le damos forma, profundidad y buen comportamiento responsivo.

En este apartado vamos a desglosar las reglas clave: primero la franja .support-header con su degradado y bordes redondeados, luego el bloque .support-search que simula una barra de búsqueda tipo “card flotante” y finalmente el contenedor .support-content con la grilla .faq-section en escritorio y móviles. La idea es que puedas reutilizar este patrón para cualquier centro de ayuda o sección de soporte.

.support-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--white);
    padding: 4rem 5% 6rem; 
    text-align: center;
    border-bottom: none;
    position: relative;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.support-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--white);
    letter-spacing: -0.5px;
}

.support-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 300;
    line-height: 1.6;
}

.support-search {
    margin: -3.5rem auto 4rem; 
    max-width: 700px;
    position: relative;
    z-index: 10;
    padding: 0 20px;
}

.support-search input {
    width: 100%;
    padding: 22px 60px 22px 30px;
    border-radius: 50px;
    border: 1px solid rgba(0,0,0,0.05);
    background: var(--white);
    box-shadow: 0 20px 40px -10px rgba(0, 51, 102, 0.15);
    font-size: 1.05rem;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.support-search input:focus {
    transform: translateY(-2px);
    box-shadow: 0 25px 50px -10px rgba(0, 51, 102, 0.25);
    outline: none;
    border-color: var(--secondary);
}

.support-search input::placeholder {
    color: #9ca3af;
}

.support-search svg {
    position: absolute;
    right: 45px; 
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary);
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.support-content {
    max-width: 1200px;
    margin: 0 auto 5rem;
    padding: 0 5%;
}

.faq-section {
    display: grid;
    grid-template-columns: 1.6fr 1fr; 
    gap: 3rem;
    align-items: start; 
}

@media (max-width: 900px) {
    .faq-section {
        grid-template-columns: 1fr; 
        gap: 3rem;
    }
    
    .support-header {
        padding: 3rem 5% 5rem;
        border-radius: 0 0 20px 20px;
    }

    .support-header h2 {
        font-size: 2rem;
    }
    
    .ticket-card {
        position: static !important; 
    }
}

🌈 1) Cabecera del Centro de Ayuda: hero degradado y texto principal 📖 Leer explicación

.support-header { ... }
Define el bloque superior del Centro de Ayuda: el fondo degradado donde viven el título “Centro de Ayuda” y su descripción.

background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
Crea un degradado diagonal muy similar al hero de inicio.html:

135deg → el degradado va en diagonal (esquina superior izquierda → esquina inferior derecha).
var(--primary) en el 0% y var(--secondary) en el 100% → reutiliza los colores principales del proyecto.

color: var(--white);
Fija el color de texto por defecto en blanco dentro del hero, garantizando buen contraste.

padding: 4rem 5% 6rem;
Espaciado interno del hero:

Arriba: 4rem.
Lados: 5% del ancho del viewport.
Abajo: 6rem, un poco extra para dejar sitio al buscador flotante que se superpone.

text-align: center;
Centra el título y el párrafo, reforzando el aspecto de “hero” informativo.

border-bottom: none;
A diferencia de otras secciones, aquí no hay línea inferior: el corte visual lo dan los bordes redondeados y el buscador que se superpone.

position: relative;
Hace que la cabecera sirva como referencia para cualquier elemento posicionado de forma absoluta encima o cerca de ella (por ejemplo, decoraciones o sombras).

border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
Redondea solo las esquinas inferiores, generando un efecto de “banda” curva que envuelve la parte superior de la página y se integra con el buscador flotante.

.support-header h2 { ... }
Estilos del título principal del Centro de Ayuda.

font-size: 2.5rem; → título grande y protagonista.
font-weight: 800; → peso muy negrita, usando la familia Inter.
margin-bottom: 1rem; → separación respecto al párrafo.
color: var(--white); → asegura que el título se lea bien sobre el degradado.
letter-spacing: -0.5px; → ligera condensación del texto, dando un aspecto más compacto y moderno.

.support-header p { ... }
Estilos para el subtítulo: “¿Tienes problemas con la plataforma?...”.

color: rgba(255, 255, 255, 0.9); → blanco ligeramente translúcido, menos intenso que el título.
font-size: 1.1rem; → un poco mayor que el cuerpo estándar, cómodo de leer.
max-width: 600px; → limita el ancho del texto para evitar líneas muy largas en escritorio.
margin: 0 auto; → centra el párrafo.
font-weight: 300; → peso fino que contrasta con el título en 800.
line-height: 1.6; → interlineado generoso para mejorar la legibilidad.

Con este bloque, el Centro de Ayuda gana un hero propio, diferenciándose visualmente de Admisiones o Contacto, pero manteniendo la misma paleta y estilo tipográfico del portal.

🔍 2) Barra de búsqueda flotante: card con sombra y foco animado 📖 Leer explicación

.support-search { ... }
Este bloque posiciona la barra de búsqueda justo “debajo” del hero, con un efecto de tarjeta flotante.

margin: -3.5rem auto 4rem;
Usa un margen negativo superior para solapar el buscador con la cabecera:

-3.5rem arriba → hace que la tarjeta suba y se meta en la zona del hero.
auto a los lados → centra el bloque.
4rem abajo → deja espacio con el contenido de soporte (.support-content).

max-width: 700px; → ancho máximo de la barra de búsqueda (similar a un card grande).
position: relative; → necesario para posicionar el icono de la lupa dentro de este contenedor.
z-index: 10; → asegura que la barra quede por encima del hero y otras capas.
padding: 0 20px; → margen lateral interno para que no toque el borde en pantallas estrechas.

.support-search input { ... }
Estilos del campo de texto principal del buscador.

width: 100%; → ocupa todo el ancho disponible del contenedor.
padding: 22px 60px 22px 30px; → mucho padding para darle aspecto de “pill grande”:

Izquierda: 30px (texto cómodo).
Derecha: 60px (reserva espacio para el icono de la lupa).

border-radius: 50px; → extremos totalmente redondeados, estilo pill.
border: 1px solid rgba(0,0,0,0.05); → borde muy suave para separar del fondo.
background: var(--white); → fondo blanco, tipo tarjeta.
box-shadow: 0 20px 40px -10px rgba(0, 51, 102, 0.15); → sombra pronunciada que refuerza el efecto flotante.
font-size: 1.05rem; → fácil de leer.
color: var(--text-dark); → buen contraste para el texto.
transition: all 0.3s ease; → permite animar suavemente los cambios en foco.

.support-search input:focus { ... }
Efectos cuando el usuario hace clic en la barra.

transform: translateY(-2px); → la tarjeta “sube” ligeramente, dando feedback visual.
box-shadow: 0 25px 50px -10px rgba(0, 51, 102, 0.25); → sombra más profunda, imitando mayor elevación.
outline: none; → elimina el borde azul por defecto del navegador.
border-color: var(--secondary); → cambia el color del borde, reforzando el estado activo.

.support-search input::placeholder { ... }
Estilo del texto de ejemplo (“¿En qué podemos ayudarte?...”).

color: #9ca3af; → gris medio, lo suficiente para que se entienda como sugerencia y no como texto real.

.support-search svg { ... }
Posiciona el icono de lupa dentro del contenedor.

position: absolute; → se posiciona relativo a .support-search.
right: 45px; → lo alinea a la derecha, dentro del padding del input.
top: 50%; + transform: translateY(-50%); → lo centra verticalmente en el input.
color: var(--secondary); → usa el color secundario del tema.
width y height: 24px; → tamaño visible del icono.
pointer-events: none; → evita que el icono interfiera con los clics del usuario (el foco va siempre al input).

Este bloque es el que da el toque “pro” al Centro de Ayuda: la barra de búsqueda se ve como un componente central, flotante, listo para que el usuario escriba su problema.

🧱 3) Contenido principal, grilla de FAQ + tickets y ajustes responsivos 📖 Leer explicación

.support-content { ... }
Contenedor principal donde viven la columna de Preguntas Frecuentes y la columna de tickets.

max-width: 1200px; → hace que el contenido no se extienda demasiado en pantallas grandes.
margin: 0 auto 5rem; → centra el bloque y deja 5rem de margen inferior antes del footer.
padding: 0 5%; → añade espacio lateral para que nada pegue al borde en móviles o resoluciones medianas.

.faq-section { ... }
Define el layout en dos columnas para las FAQs y el formulario de soporte.

display: grid; → activa CSS Grid.
grid-template-columns: 1.6fr 1fr; → dos columnas:

Columna 1 (1.6fr) → más ancha, ideal para la lista de FAQs (.faq-list).
Columna 2 (1fr) → más estrecha, suficiente para la tarjeta de ticket (.ticket-card).

gap: 3rem; → separación generosa entre ambas columnas.
align-items: start; → alinea los elementos al inicio, evitando que la tarjeta de tickets quede “flotando” centrada verticalmente cuando las FAQs son más largas.

Finalmente, la media query:

@media (max-width: 900px) {
  .faq-section {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .support-header {
    padding: 3rem 5% 5rem;
    border-radius: 0 0 20px 20px;
  }

  .support-header h2 {
    font-size: 2rem;
  }
  
  .ticket-card {
    position: static !important;
  }
}

Esta regla se aplica en pantallas de ancho menor o igual a 900px (tablets en vertical y móviles).

.faq-section { grid-template-columns: 1fr; } → las columnas se apilan en una sola columna, una encima de la otra, para evitar layouts estrechos.
gap: 3rem; → mantiene una separación vertical cómoda entre FAQs y ticket.
.support-header { padding: 3rem 5% 5rem; } → reduce ligeramente el alto del hero para no ocupar demasiada pantalla en móviles.
border-radius: 0 0 20px 20px; → hace las esquinas inferiores un poco menos redondeadas y explícita las cuatro esquinas (arriba 0, abajo 20px).
.support-header h2 { font-size: 2rem; } → baja el tamaño del título para que no se parta en demasiadas líneas.
.ticket-card { position: static !important; } → garantiza que la tarjeta de tickets no tenga posicionamiento especial en móviles, evitando superposiciones raras si en el futuro se le aplican estilos de posición.

Con este último bloque, el Centro de Ayuda se mantiene usable y elegante tanto en escritorio como en móvil: el hero no ocupa demasiada altura, el buscador sigue siendo protagonista y FAQ + tickets se leen cómodamente en una columna.

9. variables.css: paleta de colores y tokens de diseño globales

Antes de empezar a maquetar páginas específicas como inicio.html, admisiones.html o el Centro de Ayuda, necesitamos algo más fundamental: un lenguaje visual consistente. Eso es exactamente lo que define variables.css: una colección de design tokens (colores, sombras, radios de borde) que se usan en todo el portal.

En este archivo declaramos una paleta institucional para el colegio (colores primario, secundario y de acento), colores de texto, fondos, estados (éxito, error), una sombra base y el radio de las esquinas de las tarjetas. En lugar de “quemar” estos valores en cada componente, los centralizamos como variables CSS en :root, de modo que todo el diseño se pueda ajustar cambiando un solo archivo.

:root {
    --primary: #003366; 
    --secondary: #00509d; 
    --accent: #fdc500; 
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f3f4f6;
    --white: #ffffff;
    --success: #10b981;
    --danger: #ef4444;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --radius: 12px;
}

🎨 1) Selector :root y variables CSS como base del sistema de diseño 📖 Leer explicación

Todo el archivo empieza con:

:root {
    ...
}

:root es un selector especial en CSS que, en documentos HTML, apunta al elemento <html>. Es el lugar ideal para definir variables CSS globales (también llamadas custom properties), porque cualquier regla del proyecto puede leerlas luego con var(--nombre).

Dentro de :root declaras cada token de diseño con la sintaxis:

--nombre-de-la-variable: valor;

Más adelante, en otros archivos (por ejemplo inicio.css, admisiones.css, soporte.css) usarás:

color: var(--primary);
background-color: var(--bg-light);
box-shadow: var(--shadow);

Esto tiene varias ventajas:

Coherencia visual: todos los componentes usan exactamente los mismos tonos y sombras.
Mantenimiento sencillo: si el colegio cambia de identidad gráfica, solo editas variables.css.
Reutilización: los mismos tokens sirven para nuevas páginas o módulos sin redefinir colores.

Piensa en variables.css como la “paleta oficial” y los “ajustes globales” sobre los que se construye todo el portal escolar.

🌈 2) Paleta institucional: colores de marca, texto y fondo 📖 Leer explicación

Primero se define la paleta principal:

--primary: #003366; 
--secondary: #00509d; 
--accent: #fdc500;

--primary → #003366: azul oscuro, típico de instituciones educativas o universitarias. Es el color que verás en títulos, encabezados y botones principales.
--secondary → #00509d: azul más vivo. Se usa como complemento del primario (por ejemplo, en degradados, iconos o estados activos).
--accent → #fdc500: amarillo dorado de acento. Ideal para etiquetas, detalles llamativos o pequeños énfasis visuales (badges, hover especiales, etc.).

Luego vienen los colores de texto y fondo:

--text-dark: #1f2937;
--text-light: #6b7280;
--bg-light: #f3f4f6;
--white: #ffffff;

--text-dark → gris muy oscuro, cómodo para textos principales sobre fondo claro.
--text-light → gris medio, ideal para descripciones, subtítulos y textos secundarios.
--bg-light → gris muy suave para fondos de secciones, tarjetas o bloques alternos (por ejemplo, detrás de un formulario o un listado).
--white → blanco puro, usado como fondo de tarjetas, cabeceras internas y botones claros.

Finalmente, se definen dos colores de estado:

--success: #10b981;
--danger: #ef4444;

--success → verde intenso, típico de mensajes de éxito (envío correcto, validación OK, etc.).
--danger → rojo vivo para errores, alertas o estados críticos.

Gracias a estas variables, el colegio podría cambiar toda su paleta (por ejemplo, de azul a verde) sin tocar ni una sola regla de las páginas: bastaría con actualizar estos valores.

🧱 3) Sombra y radio: tokens para tarjetas y componentes elevados 📖 Leer explicación

Al final del bloque se definen dos tokens muy importantes para el “look & feel” del portal:

--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
          0 2px 4px -1px rgba(0, 0, 0, 0.06);
--radius: 12px;

--shadow es una sombra compuesta (dos sombras superpuestas) que se aplicará a muchas tarjetas:

0 4px 6px -1px rgba(0, 0, 0, 0.1) → sombra principal, suave, ligeramente desplazada hacia abajo.
0 2px 4px -1px rgba(0, 0, 0, 0.06) → sombra secundaria, más pequeña, que agrega sutileza.

Al usar box-shadow: var(--shadow); en componentes como .info-card, .contact-form o .ticket-card, obtienes un estilo de “card” consistente en todo el portal, con profundidad pero sin recargar.

--radius: 12px;
Define el radio de curvatura estándar para esquinas redondeadas. En lugar de escribir border-radius: 12px; en todas partes, usas:

border-radius: var(--radius);

De esta manera:

Todas las tarjetas y bloques comparten la misma curvatura.
Si quieres que el estilo del portal sea más “recto” (por ejemplo, 4px) o más “suave” (por ejemplo, 20px), basta con cambiar un solo número en variables.css.

Estos tokens (--shadow y --radius) son los que le dan esa sensación de “dashboard moderno” al portal: tarjetas flotantes, bordes suaves y un diseño homogéneo en todas las páginas.

10. utilidades.css: clases de ayuda para visibilidad y animaciones

Además de los estilos de layout y componentes, el proyecto necesita un pequeño set de utilidades reutilizables: clases muy cortas que puedes aplicar en cualquier página para ocultar elementos o añadir animaciones suaves al cargar. Eso es exactamente lo que aporta utilidades.css en esta primera versión.

En este archivo definimos una clase .hidden para ocultar bloques mediante CSS (ideal para toggles con JavaScript) y una clase .fade-in que aplica una animación de entrada basada en el @keyframes fadeIn. Verás estas utilidades repartidas por todo el portal: en el <main class="fade-in"> de cada página, en FAQs que se abren/cerran o en elementos que el JS muestra u oculta dinámicamente.

.hidden {
    display: none !important;
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

🙈 1) .hidden: utilidad para ocultar elementos desde CSS/JS 📖 Leer explicación

.hidden {
    display: none !important;
}

La clase .hidden es una utilidad mínima pero muy útil: cualquier elemento al que se la apliques quedará completamente oculto del flujo de la página.

display: none;
Indica al navegador que:

El elemento no se renderiza visualmente.
No ocupa espacio en el layout (como si no existiera).
No es accesible mediante navegación de tabulador.

!important
Asegura que esta regla tenga prioridad sobre cualquier otro display definido en módulos o páginas (por ejemplo, display: flex, display: grid, etc.). Es útil cuando quieres estar seguro de que, si marcas algo como .hidden desde JavaScript, se oculte sin importar sus estilos previos.

Ejemplo típico de uso:

<div id="alerta" class="hidden">Mensaje temporal</div>

Desde JavaScript podrías hacer:

document.getElementById('alerta').classList.remove('hidden');

Y la alerta aparecería automáticamente sin tener que tocar el CSS del componente.

.hidden es la herramienta básica para todo lo que sea “mostrar/ocultar” dinámicamente: menús móviles, mensajes de error, secciones de detalle, etc.

✨ 2) .fade-in y @keyframes fadeIn: animación de entrada suave 📖 Leer explicación

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

La clase .fade-in aplica una animación predefinida a cualquier elemento: basta con añadir la clase en el HTML para que el bloque aparezca con un efecto de desvanecimiento + desplazamiento suave.

animation: fadeIn 0.5s ease-in-out;
Desglosado:

fadeIn → es el nombre de la animación declarada en @keyframes más abajo.
0.5s → duración de medio segundo, suficientemente rápida para no estorbar la UX.
ease-in-out → la velocidad comienza y termina suave, con un poco más de movimiento en la mitad.

En HTML lo verás, por ejemplo, así:

<main class="fade-in">
    ...
</main>

Eso hace que todo el contenido principal de cada página “entre” de forma agradable al cargar o al hacer una navegación interna.

La animación en sí se define con:

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn describe cómo cambian las propiedades del elemento desde el inicio (from) hasta el final (to) de la animación:

Inicio (from):
- opacity: 0; → completamente transparente.
- transform: translateY(10px); → desplazado 10px hacia abajo.
Fin (to):
- opacity: 1; → totalmente visible.
- transform: translateY(0); → vuelve a su posición original.

El resultado visual: el bloque “sube” ligeramente mientras aparece, dando una sensación de entrada suave y moderna, muy típica de interfaces actuales.

Puedes reutilizar .fade-in en cualquier componente que quieras hacer más “vivo”: tarjetas de noticias, modales de soporte, alertas temporales, etc., sin duplicar animaciones en otros archivos.

🦶 X. pie-de-pagina.css: footer institucional compartido en todo el portal 📖 Leer explicación

El archivo pie-de-pagina.css define el aspecto del footer institucional que aparece al final de todas las páginas del portal: nombre del colegio, datos de contacto, enlaces legales y la firma “Diseñado para TuCodigoCotidiano”. La idea es que el pie de página se vea coherente, sobrio y legible, independientemente de la sección en la que esté el usuario.

En lugar de repetir estilos en cada página, centralizamos aquí el diseño del <footer>: fondo oscuro con texto claro, enlaces legales alineados en una sola línea y una pequeña etiqueta de autoría. Este módulo se combina con variables.css para respetar la paleta global del proyecto.