/* base.css — reset, bare element styles, focus, and the reduced-motion guard. */ /* ---- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Anchor jumps must land below the sticky bar, not behind it. */ scroll-padding-top: calc(var(--nav-h) + var(--sp-4)); } img, svg, video { max-width: 100%; display: block; } /* Varios componentes se ocultan con el atributo hidden y a la vez declaran un display propio (grid, flex). Sin esto, el display gana y hidden no oculta. */ [hidden] { display: none !important; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } /* ---- Base elements ------------------------------------------------------ */ body { background: var(--c-bg); color: var(--c-text); font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); /* Instrument Serif ships one weight. Never let the browser fake a bold. */ font-synthesis: none; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--ff-display); font-weight: 400; /* the display face has no other weight */ line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-wrap: balance; } h1 { font-size: var(--fs-hero); } h2 { font-size: var(--fs-title); } h3 { font-size: var(--fs-subtitle); line-height: var(--lh-snug); } p { text-wrap: pretty; } a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--c-accent-strong); } strong { font-weight: 600; } /* ---- Focus -------------------------------------------------------------- */ /* Defined once, globally, so it can never be missing. Fase 12 audits for it. */ :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; } /* ---- Helpers ------------------------------------------------------------ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .contenedor { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .salto-contenido { position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 100; padding: var(--sp-2) var(--sp-4); background: var(--c-card); color: var(--c-accent); border-radius: var(--r-md); box-shadow: var(--shadow-card); transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-out); } .salto-contenido:focus { transform: translateY(0); } /* ---- Reduced motion ----------------------------------------------------- */ /* Set up here from the start rather than retrofitted. NOTE for Fase 8: this guard zeroes transition and animation durations, which means a reveal implemented as "opacity 0 by default, transition to 1" would leave content permanently invisible. The reveal module must therefore ALSO check the media query in JS and reveal everything immediately when it matches, and the hidden state must be gated behind the .js-activo class on so a page without JavaScript shows all of its content. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; /* También el delay: el fundido de pasos esconde con un retardo de visibility, y sin esto el grupo saliente se quedaría visible ese rato. */ transition-delay: 0s !important; animation-delay: 0s !important; scroll-behavior: auto !important; } }