/* * BASE — reset mínimo, elementos semánticos, foco y movimiento reducido. * * Aquí no se estiliza ningún componente ni ninguna sección: solo lo que aplica a los * elementos HTML por sí mismos. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: var(--text-1); font-weight: var(--weight-400); /* * 1.5, no 1.625. Es el interlineado base del prototipo (lo ponía el preflight de * Tailwind sobre ) y aquí se perdió: todo lo que NO declara su interlineado * —las preguntas del acordeón, los nombres de fase, los resultados de la auditoría, * los enlaces— salía un 8% más alto que en el diseño aprobado, y la página entera * acababa 20 px más larga. Los textos que sí llevan 1.625 lo declaran uno a uno, * igual que el `leading-relaxed` del prototipo. */ line-height: 1.5; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; } /* Los seis niveles y el párrafo son intercambiables: el tamaño lo pone siempre la clase. Así el panel puede cambiar la etiqueta de un texto sin mover un píxel. */ h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: var(--weight-400); } p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img, video, svg, picture { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { margin: 0; padding: 0; background: none; border: 0; cursor: pointer; } ::selection { background: var(--primary); color: var(--primary-foreground); } /* --- Foco: visible siempre, nunca eliminado --- */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; } .em-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 100; padding: var(--space-8) var(--space-16); background: var(--ink); color: var(--paper); border-radius: 4px; transform: translateY(-200%); transition: transform var(--transicion-rapida); } .em-skip-link:focus-visible { transform: translateY(0); } /* Texto solo para lectores de pantalla. El recorte de 1px es el patrón del core: se mantiene en el flujo del documento, así que se sigue leyendo en voz alta. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Tipografía de marca --- */ .em-display { font-weight: var(--weight-500); letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; } /* Sin `line-height` propio: hereda el 1.5 del cuerpo, igual que el `label-xs` del prototipo. Con 1.4 la caja de cada etiqueta salía 1 px más baja y las filas que se apoyan en ella (los números de la lista, las fichas de recursos) se desalineaban. */ .em-label { font-family: var(--font-mono); font-size: var(--text-0-6875); letter-spacing: 0.14em; text-transform: uppercase; } /* * Movimiento reducido: red de seguridad para todo el tema. * * Los reveals siguen mostrándose (el observer sigue disparando), simplemente no viajan. * Es el único sitio del tema donde se admite !important: tiene que ganar a cualquier * transición declarada en un estilo inline, y las hay (los trazos SVG). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } }