/* ═══════════════════════════════════════════════════════════════════════════ COMPONENTES DE ÉPOCA · base.css — LA ESTRUCTURA Contrato: design-system/05-contrato-componentes-epoca.md (manda sobre el gusto) QUÉ ES ESTE FICHERO El esqueleto de los 8 componentes `c-*`: caja, layout, jerarquía tipográfica, estados (reposo/hover/foco/activo/deshabilitado), foco visible y movimiento reducido. Nada más. QUÉ **NO** ES Una piel. Aquí no hay ni un pigmento, ni un relieve, ni una fibra de papel, ni un remache, ni un cristal. Eso vive en epoca-1.css … epoca-5.css. ── LA REGLA ABSOLUTA ────────────────────────────────────────────────────── Ni un color, ni un radio, ni una duración, ni una familia escritos a mano. TODO sale de `var(--e-*)`. Un literal aquí dentro es un bug, no una decisión. La única excepción es el bloque §1 (`:root`), que ES el sitio donde viven los valores: es la época 5 de emergencia para que una página sin `data-epoca` no se quede desnuda. ── POR QUÉ FUNCIONA EL CAMBIO DE ÉPOCA (especificidad) ──────────────────── Base usa selectores de UNA clase → (0,1,0) o (0,2,0) con pseudoclase. Cada época usa `html[data-epoca="N"] .c-*` → (0,2,0) o más, y además se carga DESPUÉS. Resultado: la piel siempre gana sin necesitar `!important`. Orden de carga obligatorio: base.css → epoca-1 … epoca-5. ── LA TRAMPA QUE ESTE FICHERO EVITA (criterio de aceptación §5) ─────────── `--e-aire` recorre 12px → 40px. Si los paddings salieran de él en crudo, un panel mediría casi el triple en la cabina que en la cueva y CUALQUIER subpágina se rompería al cambiar de era. Por eso hay dos escalas distintas (§1.2): · lo que ocupa la caja POR DENTRO → escala comprimida (`--e-pad-*`) · lo que separa las cajas ENTRE SÍ → `--e-aire` en crudo (lo pone la página) Así el carácter se siente y la geometría no se desmadra: la variación de alto entre la época 1 y la 5 se queda en ~15%, por debajo del ±20% del contrato. ── CAVEAT DE LAS ESCALAS DERIVADAS ──────────────────────────────────────── `--e-pad-caja` y compañía se declaran en `:root`, o sea SOBRE ``, y ahí sustituyen el `--e-aire` que gane la cascada en ese mismo elemento. Como cada época declara sus tokens en `html[data-epoca="N"]` (el mismo ``), todo cuadra. Lo que NO funciona es redeclarar `--e-aire` en un contenedor interior esperando que los paddings cambien: las derivadas ya se resolvieron arriba. Regla: los tokens de época se declaran en ``. Punto. ── REGISTRO DE CAMBIOS ──────────────────────────────────────────────────── TIRADA 10 · 2026-08-13 (contrato 23) — todo ADITIVO salvo dos listas de selectores que CRECEN sin cambiar ni un valor: · §1.3 token nuevo `--e-peligro` (defecto = el rojo frío de la Cabina) · §4 `.c-panel__cuerpo strong` → `:is(b, strong)` [lista, no valor] · §13.5 regla nueva `.c-pie__enlaces a[aria-current]` · §16.2 la investigación de lo que el navegador deja tocar de la casilla · §16.4 `.c-cabecera__lead strong` → `:is(b, strong)` [lista, no valor] · §16.14 … §16.20 las seis variantes de paridad y su pasada a 390px Ni un valor existente editado, ni un selector retirado: lo de antes de esta tirada se comporta exactamente igual, y así está medido (0 píxeles de diferencia en los dos muestrarios, en las cinco épocas, a 1400 y a 700). ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── 1 · :root — TOKENS DE EMERGENCIA + ESCALAS DERIVADAS ─────────────────────────────────────────────────────────────────────────── */ /* 1.1 · La época 5 (Cabina) como red de seguridad. Valores tomados de la demo VALIDADA por Bernat (`demo-cabina/demo.html`) y de la paleta de la época 5 del contrato 01 §1. Si la página trae `data-epoca`, estos 18 tokens los pisa la hoja de esa época y aquí no queda nada vivo. */ :root{ /* — color — */ --e-fondo: #06070A; /* grafito profundo FRÍO */ --e-fondo-2: #0B0D12; --e-sup: #11141A; /* superficie */ --e-tinta: #EEF1F6; --e-tinta-2: #A9B2C0; /* el gris más apagado que aún es texto */ --e-linea: rgba(238,241,246,.14); /* el filo */ --e-acento: #FF6A1F; /* la brasa: el naranja que no cambia nunca */ --e-acento-nucleo: #FFC08A; /* núcleo claro de todo resplandor */ --e-halo: rgba(255,106,31,.45); --e-ok: #FFC08A; /* — carácter — */ --e-radio: 14px; --e-grosor: 1px; --e-aire: clamp(28px, 5vw, 40px); --e-vel: 130ms; --e-tracking: -.035em; /* — tipos — */ --e-display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; --e-cuerpo: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; --e-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* 1.2 · ESCALAS DERIVADAS — no son tokens de época, son la geometría del sistema. Una época puede redeclararlas si de verdad lo necesita, pero no le hace falta: salen solas de su `--e-aire`. La forma `A + aire·k` es deliberada: el término fijo es el suelo que impide que la cueva quede impracticable y el factor `k` es lo que se nota del carácter sin romper el ±20% de alto. */ --e-pad-caja: calc(15px + var(--e-aire) * .22); /* padding interior de un bloque */ --e-pad-corto: calc(9px + var(--e-aire) * .12); /* padding de cabeceras y pies */ --e-gap: calc(6px + var(--e-aire) * .22); /* separación entre piezas hermanas */ --e-alto-ctrl: calc(38px + var(--e-aire) * .22); /* alto mínimo de botón e input */ /* 1.3 · EXTENSIONES CON DEFECTO — declaradas aquí para que existan SIEMPRE. Cada época puede redeclararlas; ninguna está obligada. */ --e-curva: cubic-bezier(.22,.61,.36,1); /* una sola curva; el carácter lo pone --e-vel */ --e-nada: transparent; /* el vacío de los degradados y las mezclas */ --e-peso-display: 600; /* ⚠ familia de un solo peso (Anton) → ponla a 400 */ --e-peso-fuerte: 700; /* cifras de instrumento */ /* EL AVISO DEL MATERIAL (tirada 10, 2026-08-13). No es un segundo acento: es el color con el que cada época dice «esto se pierde». Lo usan `--peligro` (§16.14) y el signo negativo de `--moneda` (§16.18), y NADA más. Aquí vale el rojo FRÍO de la Cabina, que es la red de seguridad de §1.1; cada época lo redeclara con el rojo que ya tenía: é1 `--e1-error`, é2 `--e2-grieta`, é4 `--e4-oxido`, é5 `--e5-alerta`. La 3 es la excepción y está explicada donde toca: su rojo es de CONTEXTO (minio sobre el taller, rúbrica dentro de una hoja), así que no puede resolverse en `` — `epoca-3.css` lo redeclara sobre las propias piezas. */ --e-peligro: #FF6B7A; /* 1.4 · GEOMETRÍA DEL ARMAZÓN (§13) — la medida del MUNDO, no la de las piezas. Estas cuatro son del contrato 07 §B y NO se derivan del carácter: el ancho de lectura no cambia porque cambie la era. Lo que sí respira con `--e-aire` es la barra, y con el mismo freno de §1.2 (término fijo + factor pequeño). Medido en las 5 épocas: barra 49,1 → 56,4px (+15%) y pie 52,3 → 58,7px (+12%), con margen de sobra bajo el ±20% del contrato para que las pieles puedan añadir su propio filete sin salirse. */ --e-marco: 1180px; /* el ancho de la sala */ --e-marco-estrecho: 760px; /* `c-marco--estrecho`: la columna de leer */ --e-marco-pad: clamp(20px, 3vw, 32px); /* 32→20px, contrato 07 §B */ --e-alto-barra: calc(46px + var(--e-aire) * .26); --e-capa-barra: 30; /* z-index de la barra pegajosa */ /* LA RESERVA DEL ANCLA (§13.6). Una barra pegajosa se come el destino de cualquier `href="#loquesea"`: el navegador para el scroll en el borde de la PÁGINA, no en el borde de lo que se ve, y el titular de la sección aterriza debajo de la barra. El sumando fijo no es holgura estética: es que la piel de una época puede SALIRSE de la caja de la barra (la cornisa de la cueva cuelga 11px con el canto roto, y por esas mellas se ve pasar el texto). Se mide contra el borde de abajo REAL, no contra `--e-alto-barra`. Medido a 1440px: barra 49,1→56,4px · reserva 65,1→72,4px · el peor caso (época 1, con sus 11px de saliente) deja 5px de aire limpio. */ --e-ancla: calc(var(--e-alto-barra) + 16px); } /* 1.5 · RED DE SEGURIDAD DEL MUNDO. Los tokens de emergencia no sirven de nada si nadie pinta el fondo: sin `data-epoca` la página sería tinta clara sobre blanco. Se pinta el CANVAS, no `.c-sala`, y solo cuando no hay época: así ninguna piel tiene que competir con esta línea (las épocas 2, 4 y 5 pintan `` y dejan el body transparente — si esto fuera un fondo opaco en la sala, se las taparía). */ html:not([data-epoca]){ background: var(--e-fondo); } /* ─────────────────────────────────────────────────────────────────────────── 2 · RESET MÍNIMO Y FOCO Lo justo para que cinco mundos partan del mismo cero. El fondo de la PÁGINA no se pinta aquí (es cosa de la página o de la piel de época). ─────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after{ box-sizing: border-box; } /* Foco visible SIEMPRE, del grosor de la época pero nunca por debajo de 2px: la belleza de un mundo no puede costar la navegación por teclado. */ :focus-visible{ outline: 2px solid var(--e-acento); /* atajo simple por si un motor no resuelve el max() */ outline-width: max(2px, var(--e-grosor)); outline-offset: 3px; } ::selection{ background: var(--e-halo); color: var(--e-tinta); } /* ─────────────────────────────────────────────────────────────────────────── 3 · BOTÓN · .c-boton · --brasa (lo encendido) / --fantasma (lo disponible) ─────────────────────────────────────────────────────────────────────────── */ .c-boton{ position: relative; /* gancho de época */ isolation: isolate; /* garantiza que un ::before z-index:-1 caiga ENCIMA del fondo del botón y DEBAJO del texto */ display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--e-gap) * .55); min-height: var(--e-alto-ctrl); padding-block: calc(var(--e-pad-corto) * .55); padding-inline: calc(var(--e-pad-caja) * 1.05); max-width: 100%; border: var(--e-grosor) solid var(--e-linea); border-radius: var(--e-radio); background: none; color: var(--e-tinta); font-family: var(--e-display); font-weight: var(--e-peso-display); font-size: 15px; line-height: 1.15; letter-spacing: var(--e-tracking); text-align: center; text-decoration: none; /* sirve igual sobre */ cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform var(--e-vel) var(--e-curva), background var(--e-vel) linear, border-color var(--e-vel) linear, box-shadow var(--e-vel) linear, color var(--e-vel) linear, filter var(--e-vel) linear; } /* — variante BRASA: lo único encendido de la pantalla — El texto va con `--e-fondo` a propósito: en las cuatro épocas oscuras eso es tinta negra sobre naranja, y en la 3 (papel) es papel sobre el sello rojo. Un solo token resuelve las dos direcciones de contraste. */ .c-boton--brasa{ background: var(--e-acento); border-color: var(--e-acento); color: var(--e-fondo); box-shadow: 0 10px 30px -14px var(--e-halo); } .c-boton--brasa:hover{ background: var(--e-acento-nucleo); border-color: var(--e-acento-nucleo); box-shadow: 0 14px 38px -12px var(--e-halo); transform: translateY(-2px); } /* — variante FANTASMA: presente, no encendida — */ .c-boton--fantasma{ background: none; border-color: var(--e-linea); color: var(--e-tinta); } .c-boton--fantasma:hover{ background: color-mix(in oklab, var(--e-tinta) 8%, var(--e-nada)); border-color: color-mix(in oklab, var(--e-tinta) 40%, var(--e-linea)); } /* — TAMAÑO Y OCUPACIÓN: geometría, no pigmento — Los dos salen del marcado CONGELADO de la segunda tirada (contrato 08 §2): la ficha de precio pide `c-boton--brasa c-boton--bloque` y la tabla pide `c-boton--fantasma c-boton--sm`. Sin ellos aquí, cada componente nuevo se inventaría su propio tamaño de botón dentro de su fichero y el sistema tendría ocho botones pequeños distintos. Son estructura: van en base, una vez. Ni la variante ni la piel cambian — solo la caja. */ .c-boton--bloque{ display: flex; width: 100%; } .c-boton--sm{ min-height: calc(var(--e-alto-ctrl) * .72); padding-block: calc(var(--e-pad-corto) * .34); padding-inline: calc(var(--e-pad-caja) * .6); font-size: 13px; } /* — estados comunes — */ .c-boton:focus-visible{ outline-color: var(--e-acento); } .c-boton--brasa:focus-visible{ outline-color: var(--e-tinta); } /* naranja sobre naranja no se ve */ .c-boton:active{ transform: translateY(0) scale(.985); } .c-boton:disabled, .c-boton[aria-disabled="true"]{ opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: saturate(.4); } /* ─────────────────────────────────────────────────────────────────────────── 4 · PANEL · .c-panel (+ __cabecera __cuerpo __pie __meta, --destacado) La caja donde vive todo lo demás: pared / estela / hoja / chapa / cristal. ─────────────────────────────────────────────────────────────────────────── */ .c-panel{ position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; /* no desborda dentro de una rejilla */ border: var(--e-grosor) solid var(--e-linea); border-radius: var(--e-radio); background: var(--e-sup); color: var(--e-tinta); transition: transform var(--e-vel) var(--e-curva), border-color var(--e-vel) linear, box-shadow var(--e-vel) linear; } .c-panel:hover{ border-color: color-mix(in oklab, var(--e-tinta) 22%, var(--e-linea)); } .c-panel__cabecera, .c-panel__pie{ position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: var(--e-gap); flex-wrap: wrap; padding: var(--e-pad-corto) var(--e-pad-caja); } .c-panel__cabecera{ border-bottom: var(--e-grosor) solid var(--e-linea); } .c-panel__pie{ margin-top: auto; border-top: var(--e-grosor) solid var(--e-linea); } .c-panel__cuerpo{ flex: 1 1 auto; padding: var(--e-pad-caja); font-family: var(--e-cuerpo); font-size: 15px; line-height: 1.55; color: var(--e-tinta-2); } .c-panel__cuerpo > * + *{ margin-top: calc(var(--e-gap) * .7); } /* `b` Y `strong`, no solo `strong` (tirada 10, 2026-08-13). El marcado real de la web usa los dos indistintamente para el mismo énfasis, y con solo `strong` cubierto el `` se quedaba en `--e-tinta-2` mientras su hermano subía a `--e-tinta`: dos pesos y dos tintas distintas para la misma intención, medido en é2, é4 y é5 (en é1 y é3 la piel ya cubría los dos y coincidían). Cero cambios de valor: la lista de selectores es lo único que crece. */ .c-panel__cuerpo :is(b, strong){ color: var(--e-tinta); } /* la etiqueta de instrumento: mono en micro-mayúsculas. El tracking NO puede heredar el de titulares (la cabina lo tiene NEGATIVO y en micro-mayúsculas eso es ilegible): se le pone suelo con max(). */ .c-panel__meta{ font-family: var(--e-mono); font-size: 10.5px; font-weight: 500; line-height: 1.4; letter-spacing: max(.06em, var(--e-tracking)); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--e-tinta-2); } /* — el panel encendido: uno por pantalla — */ .c-panel--destacado{ border-color: color-mix(in oklab, var(--e-acento) 55%, var(--e-linea)); box-shadow: 0 0 0 max(1px, var(--e-grosor)) var(--e-halo), 0 26px 70px -34px var(--e-halo); } .c-panel--destacado .c-panel__cabecera, .c-panel--destacado .c-panel__pie{ border-color: color-mix(in oklab, var(--e-acento) 35%, var(--e-linea)); } .c-panel--destacado .c-panel__meta{ color: var(--e-acento); } /* ─────────────────────────────────────────────────────────────────────────── 5 · CAMPO · .c-campo (+ __etiqueta __input __ayuda, --error) Rejilla de 3 filas con NOMBRE, para que una época pueda colocar un ::before exactamente encima del input sin pedir un `
` nuevo (§10.3). ─────────────────────────────────────────────────────────────────────────── */ .c-campo{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "etiqueta" "campo" "ayuda"; min-width: 0; } .c-campo__etiqueta{ grid-area: etiqueta; margin-bottom: calc(var(--e-gap) * .38); font-family: var(--e-cuerpo); font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--e-tinta); } .c-campo__input{ grid-area: campo; width: 100%; min-width: 0; min-height: var(--e-alto-ctrl); padding-block: calc(var(--e-pad-corto) * .55); padding-inline: calc(var(--e-pad-caja) * .72); border: var(--e-grosor) solid var(--e-linea); border-radius: var(--e-radio); background: var(--e-fondo-2); color: var(--e-tinta); font-family: var(--e-cuerpo); font-size: 15px; line-height: 1.4; -webkit-appearance: none; appearance: none; transition: border-color var(--e-vel) linear, background var(--e-vel) linear, box-shadow var(--e-vel) linear; } .c-campo__input::placeholder{ color: var(--e-tinta-2); opacity: 1; } .c-campo__input:hover{ border-color: color-mix(in oklab, var(--e-tinta) 28%, var(--e-linea)); } .c-campo__input:focus{ border-color: var(--e-acento); } .c-campo__input:focus-visible{ outline-color: var(--e-acento); } .c-campo__input:disabled{ opacity: .5; cursor: not-allowed; background: var(--e-fondo); } .c-campo__ayuda{ grid-area: ayuda; margin-top: calc(var(--e-gap) * .38); font-family: var(--e-cuerpo); font-size: 12.5px; line-height: 1.45; color: var(--e-tinta-2); } /* — error: no hay token de error en el contrato y no hace falta — `--e-acento` ya ES el rojo de rúbrica en la imprenta y la brasa en las demás: el color de "mírame" de cada época. */ .c-campo--error .c-campo__input{ border-color: var(--e-acento); box-shadow: 0 0 0 max(1px, var(--e-grosor)) var(--e-halo); } .c-campo--error .c-campo__ayuda{ color: var(--e-acento); } /* ─────────────────────────────────────────────────────────────────────────── 6 · DISTINTIVO · .c-distintivo (+ --acento --ok) ─────────────────────────────────────────────────────────────────────────── */ .c-distintivo{ position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: calc(var(--e-gap) * .35); padding-block: calc(var(--e-pad-corto) * .28); padding-inline: calc(var(--e-pad-corto) * .72); border: var(--e-grosor) solid var(--e-linea); border-radius: var(--e-radio); background: color-mix(in oklab, var(--e-tinta) 5%, var(--e-nada)); color: var(--e-tinta-2); font-family: var(--e-mono); font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: max(.06em, var(--e-tracking)); text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; } .c-distintivo--acento{ border-color: color-mix(in oklab, var(--e-acento) 60%, var(--e-linea)); background: color-mix(in oklab, var(--e-acento) 10%, var(--e-nada)); color: var(--e-acento); } .c-distintivo--ok{ border-color: color-mix(in oklab, var(--e-ok) 55%, var(--e-linea)); background: color-mix(in oklab, var(--e-ok) 9%, var(--e-nada)); color: var(--e-ok); } /* ─────────────────────────────────────────────────────────────────────────── 7 · INSTRUMENTO · .c-instrumento (+ __cifra __etiqueta) El dato desnudo. La cifra manda; la etiqueta la nombra. ─────────────────────────────────────────────────────────────────────────── */ .c-instrumento{ position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--e-gap) * .28); min-width: 0; padding: var(--e-pad-caja); border: var(--e-grosor) solid var(--e-linea); border-radius: var(--e-radio); background: var(--e-sup); transition: border-color var(--e-vel) linear, transform var(--e-vel) var(--e-curva); } .c-instrumento:hover{ border-color: color-mix(in oklab, var(--e-tinta) 22%, var(--e-linea)); } .c-instrumento__cifra{ font-family: var(--e-mono); font-weight: var(--e-peso-fuerte); font-size: clamp(28px, 3.4vw, 38px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--e-tinta); } .c-instrumento__etiqueta{ font-family: var(--e-mono); font-size: 10.5px; font-weight: 500; line-height: 1.4; letter-spacing: max(.06em, var(--e-tracking)); text-transform: uppercase; color: var(--e-tinta-2); } /* ─────────────────────────────────────────────────────────────────────────── 8 · PROGRESO · .c-progreso > __pista > __relleno · style="--valor:33" El relleno se mueve con `--valor`. El movimiento del dato es MÁS LENTO que el de la interfaz a propósito: se lee, no se dispara. ─────────────────────────────────────────────────────────────────────────── */ .c-progreso{ position: relative; display: block; min-width: 0; } .c-progreso__pista{ position: relative; isolation: isolate; overflow: hidden; /* el relleno no se sale del carril */ /* el carril es lo más fino del sistema: con un factor mayor, 12px→40px de aire lo engordaba un 36% y se saltaba el ±20% del contrato. Medido: +17%. */ height: calc(9px + var(--e-aire) * .06); border-radius: var(--e-radio); background: color-mix(in oklab, var(--e-tinta) 16%, var(--e-nada)); } .c-progreso__relleno{ position: relative; isolation: isolate; height: 100%; width: calc(var(--valor, 0) * 1%); max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--e-acento), var(--e-acento-nucleo)); transition: width calc(var(--e-vel) * 4) var(--e-curva); } /* ─────────────────────────────────────────────────────────────────────────── 9 · NAVEGACIÓN · .c-nav > .c-nav__item (.is-activa / [aria-current="page"]) El subrayado de la activa va por `box-shadow: inset`, NO por ::after: los dos pseudos del item quedan libres para la piel de época. ─────────────────────────────────────────────────────────────────────────── */ .c-nav{ display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--e-gap) * .5); min-width: 0; } .c-nav__item{ position: relative; isolation: isolate; display: inline-flex; align-items: center; padding-block: calc(var(--e-pad-corto) * .5); padding-inline: calc(var(--e-pad-corto) * .85); border-radius: var(--e-radio); background: none; color: var(--e-tinta-2); font-family: var(--e-cuerpo); font-size: 14.5px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: color var(--e-vel) linear, background var(--e-vel) linear, box-shadow var(--e-vel) linear; } .c-nav__item:hover{ color: var(--e-tinta); background: color-mix(in oklab, var(--e-tinta) 7%, var(--e-nada)); } .c-nav__item:active{ transform: translateY(1px); } .c-nav__item.is-activa, .c-nav__item[aria-current="page"]{ color: var(--e-tinta); box-shadow: inset 0 calc(max(2px, var(--e-grosor)) * -1) 0 0 var(--e-acento); } /* ─────────────────────────────────────────────────────────────────────────── 10 · CABECERA DE SECCIÓN · .c-cabecera (+ __kicker __titulo) ─────────────────────────────────────────────────────────────────────────── */ .c-cabecera{ position: relative; isolation: isolate; display: grid; gap: calc(var(--e-gap) * .42); min-width: 0; } .c-cabecera__kicker{ margin-block: 0; /* fuera el `margin:1em 0` del navegador: es un

y la cabecera es rejilla, donde eso NO colapsa (mismo defecto que abajo, ver la nota del titular) */ font-family: var(--e-mono); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: max(.07em, var(--e-tracking)); text-transform: uppercase; color: var(--e-acento); } .c-cabecera__titulo{ position: relative; isolation: isolate; /* fuera el margen de agente de usuario del h1/h2/h3 que haga de titular. La cabecera es una REJILLA (§10 arriba) y ahí los márgenes NO colapsan: sin este reset, el `margin-block` del navegador (0,67em en un h1, 0,83em en un h2 — es decir 26,8px / 33,2px con el titular a 40px) entraba entero arriba Y abajo de la fila, partiendo la retícula en cualquier página que use este componente. Es el mismo defecto que `epoca-3.css` §8 ya documentaba para el kicker (arriba); hasta ahora `views/epoca/modules.ejs` lo compensaba a mano en su