---
titulo: Pie
resumen: «¿Quién hay detrás?» con el estudio, y una barra final con copyright,
  correo, enlaces legales, idioma y volver arriba.
estado: produccion
nivel: seccion
creado: 2026-10-11
actualizado: 2026-10-13
tokens:
  - line-2
  - ink-2
  - left
  - gutter
  - mono
relacionados:
  - patrones/estructura-de-seccion
  - componentes/boton
plataformas:
  web:
    estado: produccion
    superficies:
      - id: landing
        fuente: public/site/report.css
        clases:
          - footer
          - about
          - about-label
          - about-body
          - about-cols
          - footer-bar
          - fb-item
          - fb-legal
          - fb-lang
          - fb-top
id: patrones/pie
url: /designloop/patrones/pie
sync: ok
---

# Pie

«¿Quién hay detrás?» con el estudio, y una barra final con copyright, correo, enlaces legales, idioma y volver arriba.

## Ejemplo

```html preview superficie=landing
<footer class="footer" style="margin-top: 0">
  <section class="about">
    <h2 class="about-label">¿Quién hay detrás?</h2>
    <div class="about-body">
      <h3 class="display">Un estudio de una persona</h3>
      <div class="about-cols">
        <p>Designloop lo lleva Andrés Ochoa. Tiene más de 5 años de experiencia en diseño de producto, marca y frontend. Ha trabajado con Ogilvy, Grupo SM, CaixaBank, Grupo Volkswagen y Grupo Nestlé, en primeras versiones de productos y en la actualización de interfaces y sistemas existentes.</p>
        <p>Hablas directamente con quien hace el trabajo. Trabajamos con pocos equipos a la vez para conocer bien cada producto. Si no hay hueco, te lo decimos y te avisamos cuando lo haya.</p>
      </div>
      <a class="pill pill-accent" href="#">Hablemos</a>
    </div>
  </section>
  <div class="footer-bar">
    <span class="fb-item">© 2026 Designloop</span>
    <a class="fb-item" href="#">hola@designloop.app</a>
    <nav class="fb-legal" aria-label="Legal">
      <a class="fb-item" href="#">Condiciones</a>
      <a class="fb-item" href="#">Privacidad</a>
    </nav>
    <div class="fb-lang" role="group" aria-label="Idioma">
      <button class="fb-item" type="button" aria-pressed="false" lang="en">English</button>
      <button class="fb-item" type="button" aria-pressed="true" lang="es">Español</button>
    </div>
    <a class="fb-item fb-top" href="#">Volver arriba <span aria-hidden="true">↑</span></a>
  </div>
</footer>
```

## Piezas

| Clase | Qué hace |
| --- | --- |
| `.about` | Misma rejilla que los capítulos (`--left` y el resto), con una línea `--line-2` arriba. |
| `.about-label` | Etiqueta en mono y mayúsculas entre corchetes, como la barra superior. |
| `.about-cols` | Dos columnas de texto de 17 a 20 px en `--ink-2` (una en móvil). |
| `.footer-bar` | Barra en mono de 14 px y mayúsculas, con una línea `--line-2` arriba. «Volver arriba» se va a la derecha. |
| `.fb-item` | Enlaces y botones de la barra: sin fondo, subrayados al pasar el ratón. |
| `.fb-lang` | English / Español. El idioma activo queda subrayado (`aria-pressed="true"`). |

## Reglas

- El único contacto público es hola@designloop.app.
- Los enlaces legales llevan el idioma activo (`?lang=`).
- Cada grupo de enlaces lleva su `aria-label` («Legal», «Idioma»).

# 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 | c452be671a7c4f2a |
| `tokens.produccion.json` | Sincronizado | — |