/* Shared identity components. Values come from generated tokens.css. */
html { background: var(--fondo); color: var(--tinta); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--tinta); color: var(--sobre-tinta); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.brand-logo { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; padding-block: var(--space-2); }
.brand-logo img { display: block; height: 26px; width: auto; max-width: 100%; filter: none; }
.logo-placeholder { display: none; border: 1px dashed var(--tinta-tenue); color: var(--tinta-tenue); font: var(--etiqueta-font-size)/var(--etiqueta-line-height) var(--mono); padding: var(--space-2); white-space: nowrap; }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important;}}

/* Encaje: restrained modular identity. No italic or coloured headings. */
h1, h2 { font-weight: 700; color: var(--tinta); letter-spacing: -.035em; }
h2 { letter-spacing: -.025em; }
h1 em, h2 em, h3 em { font: inherit; color: inherit; }
.eyebrow, .etiqueta, .card-eyebrow, .app-category, .nav-label, .workspace, .instance { text-transform: lowercase; letter-spacing: 0; font-weight: 400; }
.encaje-modules { display: grid; grid-template-columns: repeat(3, 16px); gap: 5px; width: max-content; margin-block: var(--space-6); }
.encaje-modules i { display: block; width: 16px; height: 16px; border-radius: var(--radius-sm); background: var(--modulo-claro); }
.encaje-modules i:nth-child(5) { background: var(--verde); }
.encaje-modules i:nth-child(3), .encaje-modules i:nth-child(7) { background: var(--modulo-medio); }
.encaje-modules i:last-child { background: var(--modulo-oscuro); }
.hero-isometric { width: 100%; max-width: 540px; height: auto; }