Estructura de sección

El esqueleto común de las secciones de la landing. Espaciado vertical, ancho máximo y cabecera con título y entradilla.

Todas las secciones de la landing después del hero (Plan, Cómo funciona, Beneficios, Qué incluye, Estudio, Preguntas y Cierre) comparten esta estructura.

html

<section class="section …" id="…" aria-labelledby="…-title">
  <div class="wrap">
    <div class="section-head">
      <h2 id="…-title">…</h2>
      <p>…</p>
    </div>
    …
  </div>
</section>

Cabecera alineada a la izquierda

html · landing

<section class="section" aria-labelledby="how-title">
  <div class="wrap">
    <div class="section-head">
      <h2 id="how-title">Cómo funciona</h2>
      <p>Añade peticiones, decide el orden y revisa las entregas desde tu portal.</p>
    </div>
  </div>
</section>

Cabecera centrada

html · landing

<section class="section" aria-labelledby="benefits-title">
  <div class="wrap">
    <div class="section-head is-center">
      <h2 id="benefits-title">Así trabajamos<br>con tu equipo</h2>
    </div>
  </div>
</section>

Piezas

Clase	Qué hace
`.section`	Espacio vertical de `clamp(88px, 9vw, 144px)` arriba y abajo.
`.wrap`	Ancho máximo `--max` (1200 px) más los márgenes `--gutter` a cada lado, centrado.
`.section-head`	Título y entradilla en rejilla con 18 px entre ellos, hasta 760 px de ancho y `clamp(40px, 5vw, 64px)` de margen inferior.
`.section-head p`	Entradilla en `--text-lg` y `--muted`, hasta 560 px.
`.is-center`	Centra la cabecera.

Reglas

Regla	Cómo se comprueba
Cada sección es un `<section>` con `aria-labelledby` apuntando a su `h2`.	Las 7 secciones de `index.html` lo cumplen.
Un solo `h2` por sección; los bloques internos usan `h3`.	Pasos, beneficios y preguntas usan `h3` o `summary`.
El contenido va siempre dentro de `.wrap`; fuera solo quedan capas decorativas.	En Qué incluye, el fondo animado (`sky-track`) va antes del `.wrap`.
La entradilla es una frase.	`howLede`, `faqLede`.
Cabecera centrada solo cuando la sección no tiene entradilla y su contenido es una rejilla simétrica.	Solo Beneficios usa `is-center`.

Antipatrones

Márgenes propios: una sección no fija su propio padding-block; hereda .section. La excepción documentada es .benefits (padding-top: 0), que continúa la sección anterior.
Entradilla larga: si necesita dos frases, la segunda va en el contenido.

Tokens que usa

--max--gutter--text-lg--muted

Enlace con producción

Superficie	Fuente	Estado	Huella	Revisada en
Landing	public/site/styles.css .section .section-head .wrap .is-center El archivo no existe en producción.	No está en producción	—	—

Producción en el commit 455e861 (2026-10-13). Sync del 2026-10-13.

Aviso: Clases de los ejemplos que no existen: section, wrap, section-head, is-center

Relacionados

patrones/estructura-de-seccion · Actualizado el 2026-10-11