05/Estructura
Encabezado de sección
Etiqueta numerada, título h2 y párrafo. Es la pieza que da el ritmo editorial a cada sección.
Básico
02/Servicios
Seis servicios.
Un solo equipo.
Cada proyecto se construye a la medida, con el mismo estándar de calidad.
HTML
<div class="cb-section-head">
<div class="cb-label"><b>02/</b>Servicios</div>
<h2 class="cb-h2">Seis servicios.<br>Un solo equipo.</h2>
<p class="cb-lead">Cada proyecto se construye a la medida, con el mismo estándar de calidad.</p>
</div>Centrado
03/Proceso
Hecho con cuidado. Pensado para durar.
El párrafo se centra solo con el modificador.
HTML
<div class="cb-section-head cb-section-head--center">
<div class="cb-label"><b>03/</b>Proceso</div>
<h2 class="cb-h2">Hecho con cuidado. <em>Pensado para durar.</em></h2>
<p class="cb-lead">El párrafo se centra solo con el modificador.</p>
</div>Sección completa
cb-section da el padding vertical de 110px (80px en móvil) y la línea inferior.
04/Contacto
¿Tienes un proyecto?
Cuéntanos qué necesitas.
HTML
<section class="cb-section">
<div class="cb-wrap">
<div class="cb-label"><b>04/</b>Contacto</div>
<h2 class="cb-h2">¿Tienes un proyecto?</h2>
<p class="cb-lead">Cuéntanos qué necesitas.</p>
</div>
</section>Clases y modificadores
| Clase | Descripción |
|---|---|
.cb-section | Sección con padding vertical y borde inferior. --flush quita el borde. |
.cb-wrap | Utilidad de contenedor: ancho --cb-max y gutter de 24px (16px en móvil). |
.cb-section-head--center | Centra el bloque y el párrafo. |
.cb-label | Etiqueta en mayúsculas. b va en color de acento; la línea se quita con --plain. |
.cb-h2 | Título con clamp(30px, 4.6vw, 54px) y tracking -0.05em. |
.cb-h3 | Título de tarjeta o bloque, 17px. |
Accesibilidad
- Respeta el orden de títulos: h1 en el hero, h2 por sección, h3 dentro de cada sección.