# DESIGN.md — Sistema de diseño de tuprotesis.com

## Dirección de marca
Portal de referencia, potente y moderno: rigor clínico con estética tecnológica de primera división.
Azul profundo casi negro + **azul eléctrico** que destaca + blanco. Héroes oscuros con brillo eléctrico
y rejilla sutil; superficies claras y limpias para el contenido; micro-interacciones cuidadas.
La web que un traumatólogo enseña con orgullo y que una paciente de 68 años lee sin agobio.

## Tokens (CSS custom properties, en :root de public/css/main.css)
| Token | Valor | Uso |
|---|---|---|
| --azul-negro / --azul-900 | #060B18 / #0A1226 | Fondos oscuros: hero, footer, barra pro, admin top |
| --azul-800 / --azul-700 | #0E1E3D / #123162 | Botón secundario, tablas caption, capas oscuras |
| --primario | #1D4ED8 | Azul de marca: enlaces y texto (AA sobre blanco, 6.7:1) |
| --primario-fuerte | #2563EB | Hover de enlaces, acentos |
| --electrico | #2B6BFF | **El acento que destaca**: glows, bordes activos, degradados |
| --electrico-claro / --cian | #4C8DFF / #38BDF8 | Highlights y destellos decorativos (nunca texto pequeño) |
| --primario-suave | #EAF0FF | Fondos de respuesta-corta, factbox, chips |
| --grad-electrico | 135deg #2B6BFF→#1D4ED8→#1E3A8A | CTAs, filete superior de cards, logo |
| --grad-oscuro | 160deg #0C1A38→#0A1226→#070D1C | Héroes, footer, barra pro |
| --color-fondo / --color-superficie | #F4F7FD / #FFFFFF | Página / cards y tablas |
| --color-tinta / --color-tinta-suave | #0B1524 / #54617C | Texto principal / secundario (ambos AA) |
| --sobre-oscuro / --sobre-oscuro-suave | #EAF0FE / #A9BBDE | Texto sobre fondos oscuros (AA sobre navy) |
| --color-exito / --aviso / --error | #12805C / #B7791F / #D1332D | Estados |
| --radio / --radio-lg | 14px / 22px | Radios (héroes y paneles grandes usan lg) |
| --sombra-electrica | 0 10px 34px -10px rgb(43 107 255/.55) | Glow eléctrico de CTAs y elementos activos |

Los nombres antiguos (--color-primario, --color-acento, --color-acento-claro, --color-primario-suave)
se mantienen como alias hacia la nueva paleta, de modo que ninguna plantilla se rompe.

## Tipografía
- Display/headings: **"Space Grotesk"** (geométrica moderna, carácter tecnológico) con tracking negativo.
- Cuerpo y datos: **"Inter"** (tabular-nums en tablas). Base 15px móvil / 16px escritorio, line-height 1.62.
- H1: clamp(30px, 5.2vw, 50px) con letter-spacing -.03em. Ancho de lectura 70ch (.prosa).
- Carga Google Fonts con display=swap. El destello del H1 del hero (.destello) usa degradado cian→azul.

## Elemento firma
**La "respuesta corta"**: bloque bajo cada H1, fondo degradado azul suave, filete izquierdo eléctrico de 4px
y comilla con relleno degradado. Sobre hero oscuro se vuelve translúcida con filete cian. Es también el arma AEO.

## Estética premium (novedades)
- **Hero oscuro** autocontenido: degradado navy + dos glows radiales (azul y cian) + rejilla 44px, texto claro.
- **Header glass** sticky con blur; logo con rombo eléctrico y "prótesis" en degradado.
- **Cards** con filete superior eléctrico que aparece al hover y elevación con sombra en capas.
- **Botón primario** con degradado eléctrico y glow; fantasma se adapta a fondos oscuros dentro del hero.
- **Footer** oscuro con línea eléctrica superior. Admin con top oscuro y KPIs con glow sutil.
- prefers-reduced-motion respetado (desactiva transform/transition). Foco visible con anillo eléctrico.

## Componentes (HTML canónico en /admin/_styleguide)
1. Botones: .btn--primario / .btn--secundario / .btn--fantasma
2. Chip de faceta: .chip
3. Badges de estado: .badge--verificado / --declarado / --descatalogado / --demo
4. Card de ficha: .card (listados)
5. Tabla de datos: .tabla-datos con <caption> y fila de fuente
6. Factbox: .factbox (datos verificados + fuente)
7. Respuesta corta: .respuesta-corta (elemento firma)
8. Acordeón FAQ: details.faq (funciona sin JS)
9. Migas de pan: nav.migas (aria-label="Migas de pan")
10. Banner de alerta: .banner-alerta--informativa / --importante / --urgente
11. Formulario estándar: .campo + .campo__error (errores accesibles con aria-describedby)
12. Barra de contexto pro: .barra-pro
13. Paginación: nav.paginacion
14. Header (logo tipográfico + nav articulaciones) y Footer (legales, comité, metodología)

## Reglas
- Vista paciente y pro comparten tokens; la pro se distingue SOLO por .barra-pro y densidad.
- Responsive primero: diseñado a 380px y ensanchado. Sin overflow horizontal.
- prefers-reduced-motion respetado; animación solo en microinteracciones foco/hover.
- Prohibido <style> inline en vistas y CSS fuera de main.css.

## Ratios de contraste verificados (WCAG AA)
(los rellena scripts/check-contraste.js; ver BITACORA Loop 1)