Sistema de diseño — Audio personal sin ruido

Tokens base

La identidad se apoya en pocas variables repetibles: fondo oscuro sobrio, dos acentos fríos para señalizar sin teatralizar, radios medios y tipografía de sistema para lectura limpia.

Color

--bg, --panel, --line, --accent, --accent-2, --danger, --warn, --ok.

Espacio y forma

--radius, --radius-sm, --shadow, contenedores con aire suficiente para bloques técnicos y tablas.

Lectura

--max para ancho general, --reading para líneas largas y system-ui para una lectura directa sin prometer una fuente no cargada.

Componentes fijos del sitio

Son las piezas que se repiten porque ayudan a decidir mejor, no porque “queden bien”.

Badges funcionales

Etiquetas cortas para decir cosas como “No requiere amp”, “USB-C directo”, “Clamp alto” o “Qué descartar”. Nunca sustituyen al texto principal.

No requiere amp USB-C directo Clamp alto

Callouts de decisión

Tres estados editoriales que se repiten: descarte, coste total e incertidumbre confirmada como tal.

Qué no comprar

No añadas escritorio fijo si tu uso sigue siendo móvil y el problema real era solo la falta de jack.

Coste total real

El producto principal puede pedir además adaptador, dongle o un tipo de volumen más fino.

Tabla comparativa

La tabla es el componente central del nicho. Siempre va dentro de contenedor desplazable para que su ancho no dicte el ancho de la página.

Duda	Bloque principal	Qué evita	Salida editorial
¿Me vale mi portátil?	Matriz de compatibilidad por fuente	Comprar un DAC/amp por reflejo	Compra mínima viable o descarte claro
¿Necesito más potencia?	Escalera de gasto útil	Confundir volumen con cadena bien resuelta	Subir gasto o parar ahí
¿Qué pierdo si voy a lo barato?	Tabla de coste total	Mirar solo precio de catálogo	Conector, margen, confort o accesorio extra

Reglas responsive no negociables

Este bloque existe por un problema real detectado el 05/10: el sitio desbordaba en móvil. Desde ahora la defensa no depende de “mirarlo luego”, sino de reglas mecánicas repetibles.

1. Las tablas no mandan sobre la página

Toda table vive dentro de .tabla-scroll con overflow-x: auto y max-width: 100%. El min-width de la tabla sigue existiendo, pero contenido dentro de su propio scroll.

2. Los grids encogen de verdad

Las rejillas usan minmax(0, 1fr), no 1fr a secas. Además, sus hijos directos declaran min-width: 0 para que el contenido largo no empuje el layout.

3. Medios y cadenas largas

img, svg y video quedan fluidos; pre tiene scroll interno; enlaces y código usan overflow-wrap: anywhere. El scroll horizontal del documento queda como red de seguridad, no como arreglo principal.

.tabla-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-2 > * {
  min-width: 0;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

Qué debe alojar este sistema

Compatibilidad por fuente: móvil, portátil, consola, dongle y escritorio.
Coste total real: adaptadores, micrófono, tipo de conector y cadena mínima.
Descarte visible: cuándo no comprar un accesorio extra.
Bloques de incertidumbre: “sin confirmar” si falta una compatibilidad concreta.