---
version: "1.0"
name: "Arc"
description: "Sistema visual de Arc (The Browser Company): un navegador que se pinta de crema #FFFCEC y azul eléctrico #3139FB, sin un solo gris de producto. Las bandas cambian de color y se cortan con un borde festoneado, las tarjetas son crema sobre crema con una sombra de 2px que apenas existe, y los CTAs son la parte más trabajada del sitio: una píldora de cristal negro (rgba(0,0,0,.85) + backdrop-blur) de radio 22px para la acción principal, y botones sólidos de radio 10px que crecen un 2% al pasar el ratón. Tipografía geométrica de terminales blandos (Marlin Soft SQ) con tracking negativo de -0.04em en display, mono en versalitas para los metadatos. Light mode, cálido, juguetón."
colors:
  primary: "#3139FB"
  primary-deep: "#2702C2"
  primary-hover-veil: "#170394"
  primary-lavender: "#C6C8F9"
  canvas-cream: "#FFFCEC"
  canvas-cream-soft: "#FFFADD"
  background: "#FFFCEC"
  surface: "#FFFFFF"
  surface-cream: "#FFFCEC"
  surface-inverse: "#3139FB"
  surface-glass: "#000000"
  ink: "#000000"
  text-primary: "#000000"
  text-secondary: "#696969"
  text-muted: "#A6A6A6"
  text-on-primary: "#FFFCEC"
  text-on-primary-soft: "#FFFADD"
  text-on-glass: "#FFFFFF"
  text-on-deep: "#FFFFFF"
  border: "#3139FB"
  border-soft: "#0000001A"
  border-on-primary: "#FFFFFF2E"
  success: "#12B76A"
  success-bg: "#E6F8EF"
  info: "#3139FB"
  info-bg: "#E7E8FF"
  error: "#F0384A"
  error-bg: "#FFE6E9"
  warning: "#F5A524"
  warning-bg: "#FFF3E0"
typography:
  display-xl:
    fontFamily: "Marlin Soft SQ"
    substitute: "Plus Jakarta Sans"
    fontSize: "45.51px"
    fontWeight: 700
    lineHeight: "0.93"
    letterSpacing: "-0.04em"
  display-lg:
    fontFamily: "Marlin Soft SQ"
    fontSize: "40px"
    fontWeight: 700
    lineHeight: "0.975"
    letterSpacing: "-0.04em"
  display-md:
    fontFamily: "Exposure / Marlin Soft SQ"
    fontSize: "36px"
    fontWeight: 700
    lineHeight: "1.0"
    letterSpacing: "-0.02em"
  headline:
    fontFamily: "Marlin Soft SQ"
    fontSize: "28px"
    fontWeight: 700
    lineHeight: "1.10"
    letterSpacing: "-0.05em"
  cta:
    fontFamily: "ABC Oracle"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "1.20"
    letterSpacing: "normal"
  lead:
    fontFamily: "ABC Oracle"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: "1.20"
    letterSpacing: "normal"
  body:
    fontFamily: "Inter"
    fontSize: "17px"
    fontWeight: 500
    lineHeight: "1.50"
    letterSpacing: "normal"
  ui:
    fontFamily: "Marlin Soft SQ"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "1.0"
    letterSpacing: "-0.02em"
  button:
    fontFamily: "Marlin"
    fontSize: "14px"
    fontWeight: 600
    lineHeight: "29px"
    letterSpacing: "-0.01em"
  mono-caps:
    fontFamily: "ABC Favorit Mono"
    substitute: "Space Mono"
    fontSize: "12px"
    fontWeight: 700
    lineHeight: "1.0"
    letterSpacing: "0.05em"
    textTransform: "uppercase"
  caption:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 600
    lineHeight: "1.0"
    letterSpacing: "0.033em"
rounded:
  xs: "4px"
  sm: "8px"
  control: "10px"
  card: "16px"
  cta: "22px"
  full: "100%"
spacing:
  base: "2px"
  xs: "6px"
  sm: "8px"
  md: "10px"
  lg: "16px"
  xl: "20px"
  2xl: "26px"
  3xl: "32px"
  4xl: "64px"
  section: "128px"
  page-padding: "32px"
  max-width: "1280px"
  navbar-height: "64px"
components:
  cta-glass:
    backgroundColor: "rgba(0, 0, 0, 0.85)"
    textColor: "#FFFFFF"
    typography: "{typography.cta}"
    rounded: "{rounded.cta}"
    height: "76px"
    padding: "8px 22px 8px 8px"
    gap: "16px"
    backdropFilter: "blur(3.05px)"
    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.25)"
  button-solid:
    backgroundColor: "{colors.primary-deep}"
    textColor: "#FFFFFF"
    typography: "{typography.button}"
    rounded: "{rounded.control}"
    height: "45px"
    padding: "8px 24px"
    gap: "10px"
    boxShadow: "0 5px 5px rgba(0, 0, 0, 0.1)"
  button-invert:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.button}"
    rounded: "{rounded.control}"
    height: "45px"
    padding: "8px 24px"
    boxShadow: "0 5px 5px rgba(0, 0, 0, 0.1)"
  nav-item:
    backgroundColor: "transparent"
    textColor: "#FFFFFF"
    typography: "{typography.ui}"
    rounded: "{rounded.sm}"
    padding: "8px 10px"
    gap: "6px"
    borderColor: "transparent"
  card:
    backgroundColor: "{colors.canvas-cream}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: "20px"
    gap: "20px"
    boxShadow: "0 2px 2px rgba(0, 0, 0, 0.1)"
    overflow: "hidden"
  handle-badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.mono-caps}"
    rounded: "{rounded.sm}"
    padding: "4px 16px"
    borderColor: "{colors.primary}"
    borderWidth: "2px"
  keycap:
    backgroundColor: "{colors.primary-lavender}"
    rounded: "{rounded.sm}"
    borderColor: "#FFFFFF"
    borderWidth: "4px"
    boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)"
---

# DESIGN.md - Arc

> Sistema de diseño extraído de `https://arc.net` (home, julio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Colores, familias, tamaños, radios, sombras, transiciones y estados `:hover` medidos sobre el sitio en vivo con Puppeteer (viewport 1600x900). Arc no tokeniza el color en variables CSS: su `:root` sólo declara **ocho** propiedades, todas de layout (`--padding`, `--max-width`, `--navbar-height`, `--mobile-cta-height`, dos de safe-area y dos del banner de anuncios). Todo lo demás vive dentro de Stitches, que emite clases hasheadas (`.c-koCplY`, `.c-bCeQxv`, `.c-cYdlNN`) cuyas reglas se leyeron directamente de los `<style>` inyectados. Lo que el sitio no expone (semánticos con superficie, escalas completas de sombra) va marcado como *(derivado para completar el sistema)*.

---

## 1. Tema Visual y Atmósfera

Arc es un navegador que se niega a parecer software. La primera decisión del sistema, y la que lo explica casi entero, es que **no hay blanco de fondo y no hay gris de producto**. La superficie con más área del sitio es un crema, `#FFFCEC` (score 11.3M, contra 8.3M del blanco puro, que sólo aparece dentro de tarjetas y botones). Es papel, no pantalla. Y contra ese papel se estampa **un azul eléctrico saturado, `#3139FB`**, que ocupa 2.8M de área en bandas completas: la barra de navegación, la franja de testimonios, el pie. El sitio no "usa" el azul como acento; se **baña** en él por tramos.

La transición entre esas dos superficies es lo que da a Arc su firma inmediata: las bandas no se cortan en recto. Se cortan con un **borde festoneado**, una sierra de semicírculos que hace que la banda azul parezca un trozo de papel recortado con tijeras dentadas y pegado encima del crema. Es un gesto de manualidad puesto en el producto más técnico posible, y es exactamente la tesis de marca de The Browser Company: un navegador que se siente hecho a mano.

El resto del sistema es de una sobriedad casi brutal. **Todo el sitio tiene cinco recetas de sombra**, y ninguna pasa de 15px de blur:

```
0 2px 2px  rgba(0,0,0,.10)   <- la tarjeta
0 5px 5px  rgba(0,0,0,.10)   <- el botón en reposo
0 7px 15px rgba(0,0,0,.20)   <- el botón en hover
0 2px 6px  rgba(0,0,0,.10)   <- el botón en foco
0 2px 5px  rgba(0,0,0,.20)   <- la tecla del atajo
0 2px 8px  rgba(0,0,0,.25)   <- la píldora de cristal del CTA
```

Ninguna elevación finge una fuente de luz lejana. La tarjeta se apoya en la página con 2px, no flota. Lo que sí flota, y por eso es el objeto más elaborado de la interfaz, es el CTA principal: una **píldora de cristal negro** con `rgba(0,0,0,0.85)`, `backdrop-filter: blur(3.05px)`, radio 22px y un icono de app metido en un cuadrado a la izquierda, con el padding asimétrico (`8px 22px 8px 8px`) que eso obliga. Es un botón que se comporta como una ventana del sistema operativo, no como un `<button>`.

La tipografía tira en la misma dirección: **Marlin Soft SQ**, una geométrica de terminales blandos y bowls ligeramente escuadrados, que a peso 700 y con tracking negativo (`-0.04em`, es decir -1.82px sobre 45.5px) se aprieta hasta parecer un logo. Debajo, el cuerpo se relaja en Inter a 17px con `line-height` 1.5, y los metadatos suben a **mono en versalitas con tracking positivo de 0.05em**. Tres registros: display apretado, cuerpo neutro, metadato abierto.

**Palabras clave de personalidad**: crema, eléctrico, festoneado, artesanal, geométrico blando, sin grises, cálido

**Densidad del layout**: aireada (contenedor de 1280px con 32px de padding, secciones de 128px)

**Modo preferido**: claro (crema dominante; las bandas azules son un modo inverso completo, no un acento)

**Nivel de ornamentación**: medio-alto en los bordes (el festón, las teclas, los badges de handle), casi nulo en la elevación

**Audiencia visual objetivo**: gente que ya sabe lo que es un navegador y quiere que el suyo tenga opinión

---

## 2. Paleta de Colores y Roles Semánticos

Dos superficies grandes (crema y azul), un azul profundo para los botones, un lavanda para los objetos físicos, negro para la tinta y para el cristal. **No hay un solo gris azulado en el sistema.** El único gris que existe, `#696969`, es un gris neutro puro usado para texto secundario.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre él |
|--------|-------------|-----|-----|----------------|
| Azul Arc | `--color-primary` | `#3139FB` | El azul de marca: bandas completas, tinta sobre crema, bordes de badge de 2px, links | `#FFFCEC` (6.6:1) |
| Azul profundo | `--color-primary-deep` | `#2702C2` | Relleno del botón sólido de descarga (medido: `rgb(39, 2, 194)`) | `#FFFFFF` (11.2:1) |
| Velo de hover | `--color-primary-hover-veil` | `#170394` | El azul del hover del nav, servido al 50% de alfa: `rgba(23, 3, 148, 0.5)` | `#FFFFFF` |
| Lavanda | `--color-primary-lavender` | `#C6C8F9` | La tecla del atajo de teclado: el azul desaturado hasta ser un objeto físico | `#000000` (13.0:1) |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Crema | `--color-background` | `#FFFCEC` | **El fondo del sitio**. La superficie de mayor área (score 11.3M). Nunca `#FFFFFF` |
| Crema suave | `--color-surface-cream-soft` | `#FFFADD` | Texto y links sobre las bandas azules; el crema bajado un punto |
| Blanco | `--color-surface` | `#FFFFFF` | **Sólo dentro de objetos**: relleno de tarjeta de badge, botón invertido, borde de la tecla. Nunca es fondo de sección |
| Azul Arc | `--color-surface-inverse` | `#3139FB` | Bandas invertidas completas: navbar, testimonios, footer |
| Cristal | `--color-surface-glass` | `#000000` | Servido siempre con alfa: `rgba(0,0,0,0.85)` en reposo, `rgba(0,0,0,0.65)` en hover, con `backdrop-filter: blur(3px)` |

> **Regla del crema**: `#FFFCEC` es el fondo, `#FFFFFF` es un material. Si pintas una sección de blanco puro, el sistema deja de ser Arc y pasa a ser cualquier landing de SaaS. El blanco existe para que las tarjetas y los botones se recorten **contra** el crema, no para reemplazarlo.

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Tinta | `--color-text-primary` | `#000000` | Negro puro sobre crema. Arc no suaviza su negro |
| Secundario | `--color-text-secondary` | `#696969` | Bajadas de 17px sobre crema (real, `rgb(105,105,105)`) |
| Sobre azul | `--color-text-on-primary` | `#FFFCEC` | El crema **vuelve** como tinta encima del azul. Es el gesto que cierra el sistema |
| Sobre azul suave | `--color-text-on-primary-soft` | `#FFFADD` | Links y metadatos del footer sobre azul |
| Sobre cristal | `--color-text-on-glass` | `#FFFFFF` | El único sitio donde el texto es blanco puro: dentro de la píldora negra |
| Sobre azul profundo | `--color-text-on-deep` | `#FFFFFF` | Label del botón sólido |

### Contraste verificado

| Combinación | Ratio | Nivel |
|-------------|-------|-------|
| `#000000` sobre `#FFFCEC` | 20.4:1 | AAA |
| `#3139FB` sobre `#FFFCEC` | 6.6:1 | AA (texto normal) |
| `#3139FB` sobre `#FFFFFF` | 6.8:1 | AA (texto normal) |
| `#FFFCEC` sobre `#3139FB` | 6.6:1 | AA (texto normal) |
| `#FFFADD` sobre `#3139FB` | 6.4:1 | AA (texto normal) |
| `#FFFFFF` sobre `#2702C2` | 11.2:1 | AAA |
| `#2702C2` sobre `#FFFFFF` | 11.2:1 | AAA |
| `#696969` sobre `#FFFCEC` | 5.3:1 | AA (texto normal) |
| `#FFFFFF` sobre `rgba(0,0,0,0.85)` | ~14:1 | AAA (depende del fondo tras el blur) |
| `#000000` sobre `#C6C8F9` | 13.0:1 | AAA |
| `#3139FB` sobre `#C6C8F9` | 4.2:1 | AA sólo texto grande |

> **El azul aguanta**: a diferencia de la mayoría de azules de marca saturados, `#3139FB` pasa AA para texto normal en las dos direcciones (sobre crema y con crema encima). Eso es lo que permite a Arc invertir bandas enteras sin tocar la tipografía ni añadir un peso extra.

### Colores de estado

Arc no expone estados con superficie en su home: no hay toasts, banners ni validaciones a la vista. Los siguientes son *(derivados para completar el sistema)*, elegidos con el mismo criterio que el resto de la paleta (saturados, sin grises azulados, con fondo cálido):

| Estado | Variable CSS | Hex | Fondo | Texto |
|--------|-------------|-----|-------|-------|
| Éxito | `--color-success` | `#12B76A` *(derivado)* | `#E6F8EF` *(derivado)* | `#05603A` *(derivado)* |
| Info | `--color-info` | `#3139FB` (real, el azul de marca) | `#E7E8FF` *(derivado)* | `#2702C2` (real) |
| Error | `--color-error` | `#F0384A` *(derivado)* | `#FFE6E9` *(derivado)* | `#8E0C1B` *(derivado)* |
| Aviso | `--color-warning` | `#F5A524` *(derivado)* | `#FFF3E0` *(derivado)* | `#7A4A00` *(derivado)* |

---

## 3. Reglas de Tipografía

Arc carga **siete** familias distintas en `@font-face`, todas self-hosted y todas de licencia comercial: `Marlin`, `Marlin Soft Basic`, `Marlin Soft SQ`, `Sohne Breit`, `Sohne Breit Extrafett`, `EB Garamond`, `ABC Favorit Mono`, `ABC Oracle`, `Space Mono` e `Inter`. En uso real sobre el home, sin embargo, el sistema se reduce a cuatro roles muy limpios:

1. **Marlin Soft SQ** — el display. Geométrica de terminales blandos, bowls escuadrados. Pesos 400 / 500 / 700. Es la voz de la marca.
2. **ABC Oracle** — la voz del CTA y del lead. 24px y 20px, peso 400, tracking normal. Más ancha y más amable que la display.
3. **Inter / InterVariable** — el cuerpo. 17px / 500 / `line-height` 1.5.
4. **ABC Favorit Mono** — el metadato. 12px / 700 / `letter-spacing: 0.05em` / `text-transform: uppercase`.

### Nota sobre sustitución tipográfica

Original: **Marlin Soft SQ** -> HTML: **Plus Jakarta Sans** (Google substitute).
Original: **ABC Favorit Mono** -> HTML: **Space Mono** (Google substitute).

**Por qué Plus Jakarta Sans.** Marlin Soft SQ (Rene Bieder) es una geométrica de esqueleto circular con **terminales redondeados y bowls ligeramente escuadrados** — de ahí el sufijo "SQ". Su comportamiento crítico es a peso 700 con tracking negativo fuerte (-0.04em): las contraformas tienen que aguantar el apretón sin cerrarse. Se compararon cuatro candidatas de Google Fonts:

- **Outfit**: geométrica perfecta, pero las uniones son demasiado finas y a 700 el trazo se vuelve tubular; pierde la escuadra por completo.
- **Poppins**: círculo puro. Es la más fácil de reconocer como "geométrica de plantilla", exactamente la lectura que Arc evita. Además su altura de x es demasiado alta y a -0.04em choca.
- **Figtree**: amable y correcta, pero neutra; no tiene ninguna de las decisiones raras (la `a`, la `g`) que hacen que Marlin Soft se reconozca.
- **Plus Jakarta Sans**: **la elegida**. Esqueleto geométrico con bowls levemente escuadrados y cortes de terminal rectos, que es justo la mezcla de Marlin Soft SQ. Tiene 800 real, aguanta el tracking negativo sin que las contraformas colapsen y su `g` de un piso mantiene el registro amable de la original.

**Por qué Space Mono.** ABC Favorit Mono es una mono de esqueleto neo-grotesco. La coincidencia perfecta no existe en Google Fonts, pero hay un argumento mejor que la semejanza: **Arc ya sirve Space Mono en su propio `@font-face`** (`/fonts/SpaceMono-Regular.woff2` y `-Bold.woff2`). Usar Space Mono no es sustituir una fuente por una parecida; es usar una fuente que el propio sistema ya tiene cargada. En versalitas a 12px con tracking 0.05em, que es el único uso mono del sitio, sus rasgos más quirks (la `M`, la `W`) apenas se ven, y su peso 700 da exactamente el mismo color de página.

*ABC Oracle* (el CTA y el lead) no se sustituye por una segunda familia: en el HTML de la galería ese rol se sirve con Plus Jakarta Sans en peso 400 y tracking normal, que es la manera más honesta de reproducir el contraste real (display apretado vs. CTA relajado) sin meter un tercer archivo de fuente.

### Escala tipográfica

| Rol | Size real | Weight | Line-height | Tracking | Familia real |
|-----|-----------|--------|-------------|----------|--------------|
| display xl | `45.51px` | 700 | `42.25px` (0.93) | `-1.82px` (-0.04em) | Marlin Soft SQ |
| display lg | `40px` | 700 | `39px` (0.975) | `-1.6px` (-0.04em) | Marlin Soft SQ |
| display md | `36px` | 700 | `36px` (1.0) | `-0.72px` (-0.02em) | Exposure VAR |
| headline | `28px` | 700 | `30px` (1.07) | `-1.4px` (-0.05em) | Marlin Soft SQ |
| cta | `24px` | 400 | `28.8px` (1.2) | `normal` | ABC Oracle |
| lead | `20px` | 400 | `24px` (1.2) | `normal` | ABC Oracle |
| body | `17px` | 500 | `25.5px` (1.5) | `normal` | InterVariable |
| ui | `14px` | 500 | `normal` | `-0.28px` (-0.02em) | Marlin Soft SQ |
| button | `14px` | 600 | `29px` | `-0.14px` (-0.01em) | Marlin |
| mono caps | `12px` | 700 | `normal` | `0.6px` (0.05em) | ABC Favorit Mono |
| caption | `12px` | 600 | `normal` | `0.4px` | InterVariable |

### Pesos tipográficos

| Peso | Uso |
|------|-----|
| 400 | El CTA y el lead (ABC Oracle). La voz relajada |
| 500 | El cuerpo (Inter 17px) y los items de nav (Marlin Soft SQ 14px) |
| 600 | El label de los botones y las captions del footer |
| 700 | **Todo el display**, sin excepción, y la mono en versalitas |

No hay 300 ni 800 en uso. El sistema salta de 500 a 700 y ahí se detiene.

### Letter spacing

Ésta es la regla más específica de Arc, y la más fácil de romper:

| Registro | Tracking | Por qué |
|----------|----------|---------|
| Display (28-45px) | **-0.04em a -0.05em** | El display se aprieta hasta convertirse en un bloque. A 45px eso son -1.82px reales |
| UI (14px) | -0.02em | Levemente apretado, para que el nav lea como una barra y no como una lista |
| Button (14px) | -0.01em | Casi neutro |
| Body / CTA / Lead | `normal` | Cero. El texto de lectura no se toca |
| Mono caps (12px) | **+0.05em** | El único tracking positivo del sistema |

La inversión es total: el display se cierra, el metadato se abre, y el cuerpo se queda quieto en medio.

---

## 4. Estilos de Componentes

Ésta es la sección que importa. Arc entra en la galería por su UI, no por su paleta.

### CTA principal: la píldora de cristal (`.c-koCplY`)

El objeto más trabajado del sitio. No es un botón: es una ventana pequeña. Tiene dos tamaños reales, y el grande es el del hero.

```
/* Tamaño hero (el que se ve en la captura) */
Height: 76px                (fijo, no derivado del padding)
Width: max-content
Padding: 8px 22px 8px 8px   <- ASIMÉTRICO: 8px a la izquierda porque ahí va el icono
Gap: 16px
Border-radius: 22px
Background: rgba(0, 0, 0, 0.85)
Backdrop-filter: blur(3.0483298301696777px)   <- valor literal del sitio
Box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25)
Color: #FFFFFF
Font: ABC Oracle 400, 24px, line-height 28.8px, letter-spacing normal
Transition: background 0.2s ease-in-out
Margin: 26px auto 0

Contenido (en este orden):
  1. Icono de app: cuadrado de 60px con su propio radio (~16px), pegado al borde
  2. Label de 24px
  3. Flecha SVG de 19x24px

Hover:
  Background: rgba(0, 0, 0, 0.65)         <- el cristal se aclara, no se oscurece
  La flecha: transform: translateX(2px)   <- transition: transform 0.2s ease-in-out

/* Tamaño base */
Height: 58px
Padding: 8px 18px 8px 8px
Gap: 14px
Border-radius: 16px
```

> **Lo que hace especial a este CTA**: el hover **aclara** el cristal (de .85 a .65 de negro), que es lo contrario de lo que hace el 95% de los botones. Y el desplazamiento de 2px de la flecha se anima por separado, con su propia transición, no con la del botón. Son dos animaciones independientes en un solo gesto.

### Botón sólido (`.c-bCeQxv`, size large)

El botón de descarga. Radio 10px, sombra plana, y un hover que es puramente de escala.

**Primario sólido (`type-primaryLightA`)**
```
Background: #2702C2          (real: rgb(39, 2, 194))
Color: #FFFFFF
Border: none
Height: 45px                 (medido: 273x45)
Padding: 8px 24px
Gap: 10px
Border-radius: 10px
Font: Marlin 600, 14px, line-height 29px, letter-spacing -0.01em
Box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1)
Transition: transform 0.15s, box-shadow 0.15s ease-out
Text-align: center

Hover:
  Transform: scale(1.02)                        <- crece, no se levanta
  Box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2)     <- la sombra se estira y se dobla en opacidad

Focus:
  Transform: scale(1.02)                        <- mismo tratamiento que hover
  Box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1)      <- la sombra se APRIETA en foco

Focus-visible (regla global del sitio):
  Outline: 2px solid var(--colors-gray7)
  Outline-offset: 2px
  Box-shadow: none
```

**Invertido (`type-primaryLight`)**
```
Background: #FFFFFF
Color: #2702C2
Todo lo demás idéntico al sólido (radio 10, sombra 0 5px 5px, hover scale 1.02)
```

> **La firma del botón**: `transform: scale(1.02)` en lugar de `translateY(-1px)`. Arc no levanta sus botones del papel; los **agranda**, como si te acercaras. Y el `box-shadow` del foco es más pequeño que el del reposo (`0 2px 6px` contra `0 5px 5px`), lo cual es una decisión deliberada: el foco hunde, el hover eleva.

### Item de navegación (`.c-bsQNRu`)

Sobre la banda azul. Empieza sin fondo y con un borde transparente reservado.

```
Display: flex; align-items: center
Gap: 6px                     (icono + label)
Padding: 8px 10px
Border-radius: 8px
Border: 1px solid rgba(0, 0, 0, 0)      <- borde reservado, invisible
Background: transparent
Color: #FFFFFF
Font: Marlin Soft SQ 500, 14px, letter-spacing -0.02em
Transition: transform 0.15s, background 0.15s

Hover / Focus:
  Transform: scale(1.05)                        <- más agresivo que el botón (1.05 vs 1.02)
  Background: rgba(23, 3, 148, 0.5)             <- un azul MÁS oscuro que la banda, al 50%
  Border-color: transparent
```

> El hover del nav no aclara: **hunde**. Pinta un `#170394` al 50% encima del `#3139FB`, lo que produce un pozo azul oscuro. Es el gesto opuesto al del CTA de cristal, y funciona porque uno está sobre color y el otro sobre imagen.

### Tarjeta (`.c-cYdlNN`)

La tarjeta de testimonio. La anatomía completa:

```
Background: #FFFCEC          (crema: la tarjeta es del MISMO color que el papel)
Color: #3139FB               (el texto de la tarjeta es azul, no negro)
Border-radius: 16px          (1rem)
Border: none                 <- NO HAY BORDE
Padding: 20px                (contenedor interno; el shell no tiene padding propio)
Display: flex; flex-direction: column
Gap: 20px                    (1.25rem)
Box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1)
Overflow: hidden
Position: relative; z-index: 1

Jerarquía interna:
  1. Badge de handle (mono, versalitas, borde azul de 2px)
  2. Cita: Marlin Soft SQ 700, 28px, line-height 30px, tracking -0.05em, azul #3139FB
  3. Meta / atribución: mono 12px versalitas
```

> **Por qué esta tarjeta es interesante**: se apoya sobre la banda **azul**, y es crema. Es decir, la tarjeta es un recorte del papel de fondo pegado sobre el color. Por eso no necesita borde (el contraste crema/azul ya la recorta) y por eso su sombra es de sólo 2px de blur (no tiene que fingir altura: tiene que fingir **grosor de papel**). Si la pones sobre crema, deja de funcionar y hay que darle borde.

**Comportamiento en hover**: la tarjeta base del sitio **no tiene hover** (no es clicable). Si la haces clicable, la extensión coherente con el resto del sistema es *(derivado)*: `transform: scale(1.02)` (el mismo gesto del botón, nunca `translateY`) y `box-shadow: 0 5px 5px rgba(0,0,0,0.1)` (subir un escalón en la escala real de sombras del sitio, no inventar una nueva).

### Badge de handle (`.c-bQeGRQ`)

El componente pequeño más característico. Un chip mono con borde grueso.

```
Background: #FFFFFF
Color: #3139FB
Border: 2px solid #3139FB    <- DOS píxeles. El sistema no usa hairlines de 1px en badges
Border-radius: 8px           (0.5rem)
Padding: 4px 16px            (0.25rem 1rem)
Font: ABC Favorit Mono 700, 12px
Letter-spacing: 0.05em
Text-transform: uppercase
```

### Tecla de atajo (`.c-iRWeVN`)

El objeto más físico del sistema. Simula una tecla real.

```
Width / Height: 53px         (cuadrada)
Background: #C6C8F9          (lavanda)
Border: 4px solid #FFFFFF    <- el borde blanco grueso es lo que la convierte en tecla
Border-radius: 8px
Box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
Line-height: 45px
Font-weight: bold
Margin: 0 auto
User-select: none
Cursor: default
```

### Link de texto (`.c-iYqNMZ`)

```
Color: #3139FB
Font: InterVariable 700, 17px
Border-radius: 4px           <- sólo existe para el halo de foco
Hover / Focus:
  Text-decoration: underline
```

Sin cambio de color, sin fondo. Arc subraya y ya.

### Inputs de texto

No hay inputs en el home. La receta coherente con el sistema, *(derivada para completar el sistema)*:

```
Background: #FFFFFF
Border: 2px solid rgba(49, 57, 251, 0.25)    <- 2px, como el badge, no 1px
Border-radius: 10px                          <- el radio de control
Padding: 12px 16px
Font: Inter 500, 17px
Color: #000000
Placeholder: #A6A6A6

Focus:
  Border-color: #3139FB
  Box-shadow: 0 0 0 3px rgba(49, 57, 251, 0.18)
  Outline: none
```

---

## 5. Principios de Layout

### Escala de espaciado

Arc tokeniza muy poco, pero los valores reales medidos en sus componentes dibujan una escala consistente de base 2:

| Token | Valor | Dónde aparece de verdad |
|-------|-------|-------------------------|
| `--space-base` | `2px` | La unidad de los desplazamientos de hover (la flecha: `translateX(2px)`) |
| `--space-xs` | `6px` | Gap del item de nav (icono + label) |
| `--space-sm` | `8px` | Padding vertical de nav, botón y CTA. El valor más repetido del sistema |
| `--space-md` | `10px` | Padding horizontal del nav, gap del botón |
| `--space-lg` | `16px` | Gap del CTA grande, padding del badge |
| `--space-xl` | `20px` | Gap interno de la tarjeta (1.25rem) |
| `--space-2xl` | `26px` | Margen superior del CTA respecto al lead |
| `--space-3xl` | `32px` | **`--padding`: el padding lateral de página (token real del `:root`)** |
| `--space-4xl` | `64px` | **`--navbar-height` (token real del `:root`)** |
| `--space-section` | `128px` | El padding vertical de sección medido (128px / 128px) |

### Rejilla

| Token | Valor | Origen |
|-------|-------|--------|
| `--max-width` | `1280px` | **Real, del `:root`** |
| `--padding` | `32px` | **Real, del `:root`** |
| `--page-padding-left` | `max(env(safe-area-inset-left), var(--padding))` | **Real, del `:root`** |
| `--page-padding-right` | `max(env(safe-area-inset-right), var(--padding))` | **Real, del `:root`** |
| `--navbar-height` | `64px` | **Real, del `:root`** |
| `--mobile-cta-height` | `56px` | **Real, del `:root`** |
| `--announcement-banner-height` | `0px` | **Real, del `:root`** (el banner existe pero está apagado) |

Arc **no declara columnas**. No hay `grid-template-columns` tokenizado, no hay `--grid-gap`. El layout se resuelve con flex y con `max-width: 1280px` centrado. Es un sitio de bandas apiladas, no de rejilla.

### Contenedores

```css
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: max(env(safe-area-inset-left), 32px)
                  max(env(safe-area-inset-right), 32px);
}
```

### Filosofía de espaciado

El sitio es una pila de bandas a sangre completa (`width: 100%`), cada una con su color de fondo, y dentro de cada banda un contenedor de 1280px. El aire vive **entre** bandas (128px), no dentro de los componentes: los botones tienen 8px de padding vertical y las tarjetas 20px de gap. Arc es aireado a escala de página y compacto a escala de objeto.

---

## 6. Profundidad y Elevación

### Sistema de sombras

Arc tiene **seis recetas de sombra en todo el sitio**, y ese número es una decisión, no una carencia. Todas son negras (nunca teñidas), todas de blur corto, y ninguna usa spread positivo.

```css
--shadow-card:        0 2px 2px  rgba(0, 0, 0, 0.10);  /* .c-cYdlNN — la tarjeta */
--shadow-button:      0 5px 5px  rgba(0, 0, 0, 0.10);  /* .c-bCeQxv — reposo */
--shadow-button-hov:  0 7px 15px rgba(0, 0, 0, 0.20);  /* .c-bCeQxv — hover */
--shadow-button-foc:  0 2px 6px  rgba(0, 0, 0, 0.10);  /* .c-bCeQxv — foco */
--shadow-glass:       0 2px 8px  rgba(0, 0, 0, 0.25);  /* .c-koCplY — la píldora */
--shadow-keycap:      0 2px 5px  rgba(0, 0, 0, 0.20);  /* .c-iRWeVN — la tecla */
```

### Niveles de elevación

| Nivel | Sombra | Qué la usa |
|-------|--------|-----------|
| 0 | ninguna | Bandas, nav en reposo, links |
| 1 | `0 2px 2px rgba(0,0,0,.1)` | Tarjetas. Grosor de papel, no altura |
| 2 | `0 2px 5px rgba(0,0,0,.2)` / `0 2px 8px rgba(0,0,0,.25)` | Objetos físicos: la tecla, la píldora de cristal |
| 3 | `0 5px 5px rgba(0,0,0,.1)` | Botones en reposo |
| 4 | `0 7px 15px rgba(0,0,0,.2)` | Botones en hover. **El techo del sistema** |

> **Nota rara y deliberada**: el nivel de *foco* del botón (`0 2px 6px`) es **más bajo** que el de reposo (`0 5px 5px`). El foco hunde el botón contra el papel; el hover lo eleva. Casi nadie hace esto y es la razón por la que los botones de Arc se sienten mecánicos.

### Radios de borde

| Token | Valor | Uso real | Ocurrencias |
|-------|-------|----------|-------------|
| `--radius-xs` | `4px` | El halo de foco de los links | 1 |
| `--radius-sm` | `8px` | Item de nav, badge de handle, tecla | 9 (el más usado) |
| `--radius-control` | `10px` | **El botón**. El único elemento con 10px | 3 |
| `--radius-card` | `16px` | La tarjeta (1rem) y el CTA de cristal en tamaño base | — |
| `--radius-cta` | `22px` | **El CTA de cristal en tamaño hero**. Único en el sitio | 1 |
| `--radius-full` | `100%` | Avatares del festón, puntos | — |

La familia es corta y no es redonda: Arc **no usa píldoras** (`border-radius: 999px`) en ningún control. El radio máximo es 22px sobre 76px de alto, lo que deja el botón claramente rectangular. Eso lo separa de casi toda la competencia.

---

## 7. Lo que Sí y lo que No

### Sí hacer

- Usa **crema `#FFFCEC` como fondo**, no blanco. El blanco es un material para tarjetas y botones, no una superficie de página.
- Invierte bandas **completas** a azul `#3139FB` y pon la tinta en crema. El azul aguanta AA en las dos direcciones (6.6:1), así que no necesitas trucos.
- Corta las bandas con el **borde festoneado**. Es la firma del sitio y es lo primero que se reconoce.
- Anima los controles con **`scale()`, no con `translateY()`**: `1.02` en botones, `1.05` en items de nav.
- Mantén el **techo de sombra en `0 7px 15px rgba(0,0,0,.2)`**. No hay nada más elevado en todo el sistema.
- Dale a la tarjeta una sombra de **2px de blur** y ningún borde. Es papel recortado, no una superficie flotante.
- Usa **borde de 2px** en los badges. Los hairlines de 1px no existen en el vocabulario de Arc.
- Aprieta el display a **-0.04em / -0.05em** y abre la mono en versalitas a **+0.05em**.
- Cuando necesites cristal, usa `rgba(0,0,0,0.85)` + `backdrop-filter: blur(3px)` y **aclara en hover** (a `0.65`).

### No hacer

- No pongas **`#FFFFFF` como fondo de sección**. Es el error que borra la marca entera.
- No metas **grises azulados** (`#F1F5F9`, `#64748B` y compañía). El único gris del sistema es `#696969`, neutro puro.
- No conviertas los botones en **píldoras** (`border-radius: 999px`). El radio máximo del sistema es 22px sobre 76px de alto.
- No uses **`translateY(-2px)` en hover**. Arc escala. Cambiar el gesto cambia el carácter del producto.
- No inventes **sombras largas y difusas** (`0 20px 60px`). El sistema entero cabe entre 2px y 15px de blur.
- No pongas **tracking negativo en el cuerpo**: el body va a `normal`, siempre. El apretón es exclusivo del display.
- No uses **negro suavizado** (`#111`, `#1A1A1A`) para la tinta sobre crema. Arc usa `#000000` puro y el crema se lo permite (20.4:1).
- No hagas que el **hover del CTA de cristal oscurezca**. Aclara: `.85 -> .65`.
- No sustituyas el crema por **beige o marfil** (`#FAF9F6`, `#FFFDF7`). `#FFFCEC` tiene amarillo dentro, y esa temperatura es lo que hace que el azul eléctrico funcione.

---

## 8. Comportamiento Responsive

### Breakpoints

Arc no declara breakpoints en su `:root`. Los que se infieren del comportamiento medido:

| Breakpoint | Ancho | Comportamiento |
|-----------|-------|----------------|
| Mobile | `< 768px` | El nav colapsa; aparece un CTA fijo inferior de **`--mobile-cta-height: 56px`** (token real) |
| Tablet | `768px - 1024px` | Las tarjetas pasan de fila a columna |
| Desktop | `1024px - 1280px` | Contenedor fluido con 32px de padding |
| Wide | `> 1280px` | **`--max-width: 1280px`** (token real), centrado; el crema se extiende a sangre |

### Cambios por breakpoint

| Elemento | Desktop | Mobile |
|----------|---------|--------|
| CTA de cristal | 76px de alto, radio 22px, texto 24px | 58px de alto, radio 16px, gap 14px (**los dos tamaños son reales**) |
| Navbar | 64px de alto, items en fila | Colapsado; el CTA sale al dock inferior de 56px |
| Display | 45.51px | Escala fluida hacia abajo, manteniendo el tracking -0.04em |
| Padding de página | 32px | 32px con `env(safe-area-inset-*)` como suelo |
| Sección | 128px vertical | Reducido; el festón se mantiene |

> El único componente del sitio con **dos recetas completas y distintas** por tamaño es el CTA de cristal. Todo lo demás escala.

### Touch targets (mobile)

| Componente | Alto real | Cumple 44px |
|-----------|-----------|-------------|
| CTA de cristal (base) | 58px | Sí |
| CTA de cristal (hero) | 76px | Sí |
| Botón sólido | 45px | Sí, justo |
| Item de nav | 39px | **No** — en mobile hay que subirlo a 44px |
| Badge de handle | 28px | No aplica (no es interactivo) |

### Filosofía responsive

Bandas apiladas a sangre. Nada reordena, nada se recoloca: las bandas se estrechan y el contenido dentro pasa de fila a columna. El festón nunca desaparece.

---

## 9. Guía de Prompts para Agentes

### Prompt de inicialización de sesión

```
Diseña con el sistema visual de Arc (The Browser Company).

SUPERFICIES: el fondo es crema #FFFCEC, NUNCA blanco. El blanco #FFFFFF es un
material (relleno de tarjeta, botón invertido, borde de tecla), no una superficie
de página. Las bandas invertidas se pintan de azul eléctrico #3139FB completo, con
la tinta en crema #FFFCEC. Las bandas se cortan con un borde festoneado (sierra de
semicírculos), no en recto.

TINTA: negro puro #000000 sobre crema. Secundario #696969 (gris NEUTRO, jamás
azulado). Sobre azul, la tinta es crema #FFFCEC / #FFFADD.

COLOR: un solo azul de marca #3139FB. El botón sólido usa un azul más profundo,
#2702C2. El hover del nav pinta #170394 al 50% de alfa encima del azul.

TIPOGRAFÍA: geométrica de terminales blandos (Marlin Soft SQ -> Plus Jakarta Sans).
Display 700 con tracking -0.04em. Body 500 a 17px/1.5 con tracking normal (CERO).
Metadatos en mono, versalitas, 12px/700, tracking +0.05em.

FORMA: radios 8 / 10 / 16 / 22. NO uses píldoras. El botón es 10px, la tarjeta 16px,
el CTA de cristal 22px.

ELEVACIÓN: seis sombras en todo el sistema, ninguna pasa de 15px de blur.
Tarjeta 0 2px 2px rgba(0,0,0,.1). Botón 0 5px 5px rgba(0,0,0,.1), hover
0 7px 15px rgba(0,0,0,.2).

MOTION: los controles hacen scale(), NUNCA translateY(). Botón scale(1.02),
nav scale(1.05). Transiciones de 0.15s.
```

### Prompt: Crear nueva pantalla

```
Crea [pantalla] con el sistema de Arc.

- Fondo crema #FFFCEC a sangre completa.
- Si la pantalla necesita una sección de énfasis, inviértela a azul #3139FB entera y
  corta el borde con festón. La tinta ahí es crema.
- Contenedor de 1280px, padding lateral 32px, secciones de 128px.
- CTA principal: píldora de cristal rgba(0,0,0,.85), backdrop-blur(3px), radio 22px,
  altura 76px, padding asimétrico 8px 22px 8px 8px, con el icono pegado a la izquierda
  y una flecha a la derecha que se mueve 2px en hover.
- CTA secundario: botón sólido #2702C2, radio 10px, altura 45px, sombra 0 5px 5px.
- Tarjetas: crema #FFFCEC sobre la banda azul, radio 16px, gap 20px, sin borde,
  sombra 0 2px 2px. El texto de la tarjeta va en azul #3139FB, no en negro.
```

### Prompt: Añadir componente al UI kit

```
Añade [componente] al kit de Arc.

Antes de escribir CSS, contesta:
1. ¿Va sobre crema o sobre azul? Eso decide el color de la tinta y si necesita borde.
2. ¿Es un control? Entonces su radio es 8px (nav/badge) o 10px (botón), y su hover
   es scale(), no translate.
3. ¿Necesita elevación? Sólo puedes usar una de las seis sombras del sistema.
   Si ninguna encaja, el componente probablemente no necesita sombra.
4. ¿Lleva un borde? Si lo lleva, es de 2px, no de 1px.
5. ¿Lleva metadatos? Van en mono, versalitas, 12px/700, tracking +0.05em.
```

### Prompt: Revisión de consistencia

```
Revisa esta UI contra el sistema de Arc y marca:

- [ ] ¿Hay algún fondo de sección en #FFFFFF? (debe ser crema #FFFCEC)
- [ ] ¿Hay grises azulados? (sólo se permite #696969, neutro)
- [ ] ¿Algún control usa border-radius mayor de 22px o una píldora? (prohibido)
- [ ] ¿Algún hover usa translateY? (debe ser scale)
- [ ] ¿Alguna sombra pasa de 15px de blur? (el techo es 0 7px 15px)
- [ ] ¿El display lleva tracking -0.04em? ¿El body lleva tracking normal?
- [ ] ¿Los badges tienen borde de 2px?
- [ ] ¿La mono va en versalitas con +0.05em?
- [ ] ¿El CTA de cristal ACLARA en hover (.85 -> .65)?
```

### Prompt: Variante de campaña

```
Crea una variante de campaña de Arc manteniendo el sistema:

Lo que NO se toca: el crema #FFFCEC, el azul #3139FB, el festón, el scale() de los
hovers, la escala de sombras, el tracking del display.

Lo que se puede mover:
- La proporción de banda azul vs banda crema (una campaña puede ser mayoritariamente azul).
- El lavanda #C6C8F9 puede ampliarse de la tecla a otros objetos físicos.
- El CTA de cristal puede llevar otro icono de app en su cuadrado izquierdo.
- Los badges de handle pueden cambiar de contenido, no de receta (2px, mono, versalitas).
```

---

## 10. Movimiento (Motion)

El motion de Arc es corto, mecánico y basado en escala. No hay parallax, no hay reveals largos, no hay easing exótico.

**Nivel de motion**: bajo-medio. Todo el movimiento vive en los estados de control.

**Duraciones**: `0.15s` (transform y box-shadow de botones y nav), `0.2s` (background del CTA de cristal, y el desplazamiento de su flecha)

**Easings**: `ease-in-out` (el CTA de cristal y su flecha), y el easing por defecto del navegador para los `0.15s` (Stitches los declara sin función explícita: `transition: transform 0.15s, background 0.15s`)

**Propiedades animadas**: `transform` (sólo `scale` y `translateX`), `background`, `box-shadow`, `text-decoration`

**Patrones de motion**:
- **Scale, no lift**: el gesto central del sistema. Botón `scale(1.02)`, item de nav `scale(1.05)`. Nada se desplaza en Y.
- **Doble animación en el CTA**: el fondo del cristal cambia (`0.2s ease-in-out`) mientras la flecha se desplaza 2px por separado, con su propia transición del mismo tiempo. Un gesto, dos animaciones.
- **La sombra se dobla**: en hover el botón no sólo escala; su sombra pasa de `0 5px 5px /.1` a `0 7px 15px /.2` — se estira y dobla su opacidad a la vez.
- **El foco hunde**: `0 2px 6px /.1`, más pequeña que la de reposo.
- **Marquee**: la fila de logos/testimonios usa un marquee CSS con `animation-play-state` pausable en hover (`--pause-on-hover`).

```css
--ease-glass:     ease-in-out;
--duration-fast:  150ms;   /* transform, box-shadow, background de controles */
--duration-glass: 200ms;   /* el CTA de cristal y su flecha */

/* la receta completa del hover de botón */
.button {
  transition: transform 0.15s, box-shadow 0.15s ease-out;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.button:hover {
  transform: scale(1.02);
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.button:focus {
  transform: scale(1.02);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
```

> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)`. Con motion reducido, los `scale()` se anulan y el estado de hover se comunica sólo con el cambio de `background` y de `box-shadow`, que siguen siendo perfectamente legibles. El marquee se detiene.

---

## Anexo: Stack técnico detectado

- **Plataforma**: React con **Stitches** como CSS-in-JS. Las clases se emiten hasheadas (`.c-koCplY`, `.c-bCeQxv`, `.c-bsQNRu`, `.c-cYdlNN`, `.c-bQeGRQ`, `.c-iRWeVN`) y todas las reglas se inyectan en `<style>` dentro del documento (~236 KB de CSS inline). No hay hojas `.css` externas: por eso las reglas `:hover` sólo se leen del DOM, no de la red.
- **Sistema de tokens**: Stitches declara `--colors-brandBlue`, `--colors-brandOffwhite`, `--colors-gray7`, `--fonts-softSans`, `--fonts-referralSans`, `--fonts-body`, `--fonts-mono`, `--fontSizes-14`, `--fontWeights-500`. El `:root` del documento sólo tiene **8** variables, todas de layout: `--padding: 32px`, `--max-width: 1280px`, `--navbar-height: 64px`, `--mobile-cta-height: 56px`, `--announcement-banner-height: 0px`, `--announcement-banner-height-desktop: 0px`, y las dos de safe-area.
- **Tipografía**: 10 familias en `@font-face`, todas self-hosted (`/fonts/*.woff2`, algunas `.otf`): `Marlin` (800), `Marlin Soft Basic` (400), `Marlin Soft SQ` (400/500/700 + itálicas), `Sohne Breit` (400/700), `Sohne Breit Extrafett` (900), `EB Garamond` (400), `ABC Favorit Mono` (400/500/700 + itálicas), `ABC Oracle`, `Space Mono` (400/700), `Inter` + `InterVariable` (100-900). En uso real sobre el home sólo se ven cuatro: Marlin Soft SQ, ABC Oracle, InterVariable y ABC Favorit Mono.
- **Radios**: 8px (9 nodos), 10px (3), 4px (1), 22px (1), 16px (`1rem`, en la tarjeta y en el CTA base). Ningún `border-radius: 999px` en todo el sitio.
- **Sombras**: seis recetas, todas listadas arriba. Ninguna teñida, ninguna con spread, ninguna con blur mayor de 15px.
- **Bordes**: `2px solid #3139FB` (4 nodos, los badges) y `1px solid rgba(0,0,0,0)` (5 nodos, el borde reservado de los items de nav). El sistema **no tiene hairlines grises**.
- **Backdrop-filter**: sólo en el CTA de cristal, con el valor literal `blur(3.0483298301696777px)` — un número que delata que salió de un cálculo de diseño, no de una escala.
- **Motion**: transiciones CSS puras. `transform 0.15s`, `background 0.15s`, `box-shadow 0.15s ease-out`, `background 0.2s ease-in-out`. Un marquee con `animation-play-state: var(--pause-on-hover)`.
- **Focus global**: `a:focus-visible, button:focus-visible { outline: 2px solid var(--colors-gray7); outline-offset: 2px; box-shadow: none; }` — el sitio anula su propia sombra en foco-visible para que el outline mande.
- **(no detectado)**: variables CSS de color en el `:root`, sistema de rejilla con columnas, escala de sombras tokenizada, estados semánticos con superficie (success/error/warning), inputs de formulario, modo oscuro, librería de animación declarada en el HTML.