---
titulo: Barra superior
resumen: Barra fija con la marca y dos acciones de texto entre corchetes, en
  mono y mayúsculas.
estado: produccion
funcion: navegacion
nivel: organismo
creado: 2026-10-11
actualizado: 2026-10-13
tokens:
  - bg
  - ink
  - mono
  - gutter
relacionados:
  - componentes/boton
  - patrones/estructura-de-seccion
plataformas:
  web:
    estado: produccion
    superficies:
      - id: landing
        fuente: public/site/report.css
        clases:
          - topbar
          - tb-nav
          - tb-link
id: componentes/cabecera
url: /designloop/componentes/cabecera
sync: ok
---

# Barra superior

Barra fija con la marca y dos acciones de texto entre corchetes, en mono y mayúsculas.

## Ejemplo

```html preview superficie=landing
<header class="topbar" style="position: static; width: 100%">
  <a class="tb-link" href="#" aria-label="Inicio de Designloop">Designloop</a>
  <nav class="tb-nav" aria-label="Navegación principal">
    <a class="tb-link" href="#">Reservar llamada</a>
    <a class="tb-link" href="#">Login</a>
  </nav>
</header>
```

En producción la barra es `position: fixed`; en el ejemplo se deja en su sitio.

## Piezas

| Clase | Qué hace |
| --- | --- |
| `.topbar` | Fija arriba, de borde a borde, con el margen `--gutter` a los lados (26 px arriba; 14 px por debajo de 960 px). No captura clics fuera de sus enlaces. |
| `.tb-nav` | Las acciones, separadas 18 px (10 px en móvil). |
| `.tb-link` | Texto en Roboto Mono de 16 px y mayúsculas, entre corchetes (`[ … ]`, generados en CSS y ocultos al lector de pantalla). Fondo `--bg` para leerse sobre lo que pasa por debajo. Al pasar el ratón se invierte: fondo `--ink`, texto `--bg`. |
| Marca | Primer `.tb-link`, lleva al principio de la página. En producción lleva además `tb-brand`, que no tiene estilos. |

## Reglas

- Solo dos acciones: reservar llamada y entrar al portal. Sin menú.
- Los corchetes son la marca de la barra: no se escriben en el texto.
- La barra se alinea con el borde de las placas: comparte `--gutter`.
- Por debajo de 370 px los corchetes pierden el espacio interior y el texto baja a 11 px.

## Accesibilidad

- La marca lleva `aria-label` («Inicio de Designloop»); la navegación, «Navegación principal».
- El enlace de salto («Saltar al contenido», `.skip-link`) aparece al tabular, antes de la barra.

# Enlace con producción

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