---
titulo: Capítulo
resumen: "Cada sección de la landing es un capítulo: el texto queda fijo a la
  izquierda y sus placas u hojas pasan por la derecha."
estado: produccion
nivel: seccion
creado: 2026-10-11
actualizado: 2026-10-13
tokens:
  - left
  - gap
  - top
  - gutter
  - ease
relacionados:
  - componentes/placa
  - componentes/cabecera
plataformas:
  web:
    estado: produccion
    superficies:
      - id: landing
        fuente: public/site/report.css
        clases:
          - report
          - chapter
          - chapter-text
          - chapter-media
          - display
          - sub
          - mono-text
          - actions
          - steps
          - step-title
          - step-n
          - step-body
          - is-current
id: patrones/estructura-de-seccion
url: /designloop/patrones/estructura-de-seccion
sync: ok
---

# Capítulo

Cada sección de la landing es un capítulo: el texto queda fijo a la izquierda y sus placas u hojas pasan por la derecha.

## Ejemplo

Textos del capítulo «Si eres fundador». Las placas se sustituyen por placas vacías.

```html preview superficie=landing
<div class="report" style="padding-top: 24px">
  <section class="chapter is-active">
    <div class="chapter-text">
      <h2 class="display">Si eres fundador</h2>
      <ol class="steps">
        <li class="is-current"><h3 class="step-title"><span class="step-n">01</span><span>MVP</span></h3><div class="step-body"><p>Damos forma a tu idea, definimos la primera versión y diseñamos y construimos el frontend.</p></div></li>
        <li><h3 class="step-title"><span class="step-n">02</span><span>Marca</span></h3><div class="step-body"><p>Sentamos las bases de tu marca con una identidad visual y un logotipo que puedas usar desde el principio.</p></div></li>
      </ol>
    </div>
    <div class="chapter-media">
      <figure class="plate"><span class="meta meta-tl">01 — <span>MVP</span></span></figure>
      <figure class="plate"><span class="meta meta-tl">02 — <span>Marca</span></span></figure>
    </div>
  </section>
</div>
```

## Piezas

| Clase | Qué hace |
| --- | --- |
| `.report` | La rejilla de todos los capítulos: columna de texto (`--left`) y columna de placas, separadas 26 px. |
| `.chapter` | `display: contents`: su texto y sus placas entran en la rejilla común. |
| `.chapter-text` | Fijo a `--top` de la parte de arriba. Los textos de todos los capítulos ocupan el mismo sitio; solo se ve el activo. |
| `.chapter-media` | Placas y hojas en columna, separadas `--gap`. |
| `.display` | Titular del capítulo: Inter Tight 500, de 40 a 64 px. |
| `.sub` | Entradilla: de 20 a 28 px, `--ink-2`. |
| `.mono-text` | Nota en mono y mayúsculas, 15 px, `--ink-2`. |
| `.actions` | Fila de píldoras con 8 px de separación. |
| `.steps`, `.step-title`, `.step-n`, `.step-body` | Lista numerada de pasos. En pantallas anchas solo el paso de la placa que está en el centro (`.is-current`) se ve abierto; el resto queda en `--ink-3` y plegado. |

## Comportamiento

- El capítulo activo es el que tiene placas cruzando el centro de la pantalla. Los demás se desenfocan y bajan 14 px; el nuevo entra enfocándose (0,55 s, `--ease`).
- Por debajo de 960 px los capítulos se apilan, nada queda fijo y todos los pasos se ven abiertos.

## Capítulos de la landing

| Capítulo | Media |
| --- | --- |
| Si eres fundador | Cuatro placas: MVP, marca, sistema de diseño, pitch deck. |
| Si eres empresa | Cuatro placas: sistemas para IA, formas de trabajo, capacidad extra, nuevas funcionalidades. |
| Tu plan mensual | [Precios](/designloop/patrones/precios): dos hojas. |
| Cómo funciona | [Cómo funciona](/designloop/patrones/como-funciona): tres placas que se pueden usar. |
| Así trabajamos con tu equipo | [Beneficios](/designloop/patrones/beneficios): una hoja. |
| Preguntas | [Preguntas frecuentes](/designloop/patrones/preguntas-frecuentes): una hoja. |
| ¿Qué quieres construir? | [Formulario final](/designloop/patrones/formulario-final): una hoja oliva. |

# Web

Estado: En producción. Sin implementación documentada.

# iOS

Estado: Sin iniciar. Sin implementación documentada.

# Android

Estado: Sin iniciar. Sin implementación documentada.

# Enlace con producción

| Fuente | Estado | Huella |
| --- | --- | --- |
| `public/site/report.css` | Sincronizado | 4032934708102e94 |
| `tokens.produccion.json` | Sincronizado | — |