/** * base.css — el suelo. Tipografía, ritmo y accesibilidad. * * Se encola DESPUÉS de Woodmart: a igual especificidad gana el último, y así * se le gana al tema padre sin un solo `!important`. (El plan original eran * capas de cascada; no funcionan aquí — el porqué está explicado en * `tokens.css`.) */ *, *::before, *::after { box-sizing: border-box; } body.svh { background: var(--svh-fondo); color: var(--svh-texto); font-family: var(--svh-fuente-cuerpo); font-size: var(--svh-txt-cuerpo); line-height: var(--svh-alto-linea); -webkit-font-smoothing: antialiased; } /* ── POR QUÉ `:where()` EN TODO ESTE BLOQUE ──────────────────── `:where()` tiene especificidad CERO. Sin él, una regla de suelo como `.svh a { color: … }` (0,1,1) le gana a un componente como `.svh-boton--principal` (0,1,0) — y el botón sale morado sobre morado, con el texto invisible. Pasó, se vio en la captura, y por eso está esto aquí: el suelo NUNCA debe ganarle a un componente. */ .svh :where(h1, h2, h3) { line-height: var(--svh-alto-linea-titulo); color: var(--svh-texto); text-wrap: balance; } /* V2 · los titulares llevan Satoshi (servida por nosotros) con el titular APRETADO del papel de Design §2 — decisión cerrada: peso 600 · interlineado 0,95 (va en --svh-alto-linea-titulo) · espaciado −0,05 em (al −0,08 las letras se tocaban: medido). Va dentro del mismo `:where()` de especificidad cero que el resto del suelo, así que ningún componente pierde contra esto. */ .svh :where(h1, h2, h3) { font-family: var(--svh-fuente-titulo); letter-spacing: var(--svh-titular-espaciado); /* 🔴 MEDIDO EN EL NAVEGADOR A 375 px EL 23/08/2026, no supuesto. El titular «Jose Valenzuela | @soyjosemiguelvalenzuela» medía **516 px de ancho dentro de una pantalla de 375** y se salía por la derecha, cortado. La causa: `@soyjosemiguelvalenzuela` es UNA palabra de 24 letras sin un solo hueco, y sin esto el navegador se niega a partirla — prefiere desbordar. Un arroba largo no es un caso raro: es lo normal en este directorio. */ overflow-wrap: anywhere; } /* En Satoshi el peso 600 resuelve al corte 700 real (ver fuentes.css): el mismo dibujo que pintaban las maquetas de Design. */ .svh :where(h1) { font-size: var(--svh-txt-h1); font-weight: var(--svh-titular-peso); } .svh :where(h2) { font-size: var(--svh-txt-titulo); font-weight: var(--svh-titular-peso); } @media (max-width: 600px) { .svh :where(h1) { font-size: var(--svh-txt-h1-movil); } } .svh :where(a) { color: var(--svh-marca); text-underline-offset: 3px; } .svh :where(img) { max-width: 100%; height: auto; } /* ── LOS ELEMENTOS QUE NUNCA DIJIMOS DE QUÉ COLOR SON (N-1) ──── 🔴 23/08/2026. `th`, `label` y `dt` los pinta nuestro HTML, pero su color no lo declaraba nadie: lo ponía Woodmart, en modo claro, y en oscuro quedaba #242424 sobre #0B0B0F = **1,27:1**. La causa de fondo ya está atacada en `tokens.css` (el puente que redefine sus variables). Esto es el cinturón además de los tirantes: **nuestro propio sistema declara el color de los elementos que nuestro propio HTML usa**, sin depender de que el tema padre siga llamando igual a sus variables el día que se actualice. Especificidad, medida y no supuesta: `.svh :where(...)` vale 0,1,0. Le gana a `table th` (0,0,2), a `label` (0,0,1) y a `dl dt` (0,0,2) — una clase pesa más que dos elementos — y PIERDE contra cualquier componente nuestro con clase + elemento (0,1,1), que es justo la regla de esta casa: el suelo nunca le gana a un componente. Cero `!important`. */ .svh :where(th, td, label, dt, dd, caption, legend, figcaption) { color: var(--svh-texto); } /* ── ACCESIBILIDAD ───────────────────────────────────────────── Criterio 2.4.11 (WCAG 2.2): el foco NO puede quedar tapado. La cabecera fija de Woodmart lo tapaba, y por eso está el `scroll-margin-top`: al llegar con el tabulador, el elemento se coloca por debajo de la cabecera en vez de detrás. */ /* 🔴 23/08/2026 — ESTA REGLA LLEVABA MUERTA DESDE EL PRIMER DÍA, Y NADIE LO VIO PORQUE ESTABA BIEN ESCRITA. Medido en `/creador/carniceria-victor-salvo/` con `getComputedStyle` y `:focus-visible` de verdad activo: el anillo que se pintaba en CUALQUIER enlace o botón de la web era `dotted 2px rgb(0,0,0)` con offset 0 — el de Woodmart, no el nuestro. Dentro del aviso de cookies, ese negro sobre el fondo oscuro de la caja daba **1,13:1** (el mínimo del criterio 2.4.11 de la WCAG 2.2 son 3:1). Quien navega con el teclado no veía dónde estaba. La causa NO era un empate de cascada. Woodmart trae, en `css/parts/base-deferred.css`: :is(a, button, input[type="submit"], input[type="checkbox"], input[type="button"], input[type="file"], [tabindex="0"]):focus-visible { outline: var(--wd-otl-width, 2px) var(--wd-otl-style, dotted) var(--wd-otl-color, var(--wd-otl-color-scheme, #000)) !important; outline-offset: var(--wd-otl-offset, calc(var(--wd-otl-width) * -1 / 2)); } Lleva **`!important`** (comprobado con `getPropertyPriority('outline')` → `"important"`). Contra eso no gana ninguna especificidad: probé un selector de tres clases y siguió perdiendo. Pero su valor está hecho ENTERO de variables. Así que no hay que pelear: se redefinen y **su propia regla pinta nuestro anillo**. Cero `!important` por nuestra parte, y arregla la web entera de una vez —portada, fichas, buscador, panel y aviso de cookies— en lugar de parchear pantalla a pantalla. Medido después: `solid 3px rgb(109,40,217)` con offset 2px, y **7,10:1** sobre el blanco de la página. ⚠️ `:root:root` Y NO `:root` A SECAS, Y ESTO TAMBIÉN ESTÁ MEDIDO. Con `:root` solo, tres de las cuatro variables funcionaban y la cuarta no: el anillo salía `dotted 3px` en vez de `solid 3px`. Motivo: Woodmart imprime un `