/* ========================================================================== base.css — Modern reset + element defaults + utilities Depends on tokens.css for all custom properties. ========================================================================== */ /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Sin text-rendering: optimizeLegibility. Aplicado a todo el documento retrasa el primer pintado en textos largos y aporta poco con estas tipografias; el navegador ya activa las ligaduras habituales. */ } /* --- Media ---------------------------------------------------------------- */ img, svg, picture, video, canvas { display: block; max-width: 100%; height: auto; } svg { fill: currentColor; } /* --- Forms ---------------------------------------------------------------- */ input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } /* --- Typography ----------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--leading-tight); font-weight: var(--weight-semibold); text-wrap: balance; color: var(--color-primary); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } p, li { text-wrap: pretty; } a { color: var(--color-cta); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { padding-left: 1.25rem; } :where(ul, ol).list-reset { list-style: none; padding-left: 0; } strong, b { font-weight: var(--weight-bold); } /* --- Layout helpers ------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } /* --- Accessibility utilities ---------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 0; z-index: var(--z-modal); padding: var(--space-3) var(--space-5); background-color: var(--color-cta); color: var(--color-cta-ink); font-family: var(--font-heading); font-weight: var(--weight-semibold); border-radius: 0 0 var(--radius) 0; transform: translateY(-120%); transition: transform var(--dur) var(--ease); } .skip-link:focus { transform: translateY(0); text-decoration: none; } /* --- Focus ---------------------------------------------------------------- */ /* Usa --color-cta, no --color-accent: el celeste/pastel de accent daba 1.58:1 en Aloy y 2.65:1 en el tema pro, bajo el 3:1 que exige WCAG 2.4.11 para el indicador de foco. Es justo lo que necesita quien navega con teclado. */ :focus-visible { outline: 3px solid var(--color-cta); outline-offset: 2px; border-radius: var(--radius); } /* Remove default outline only when focus-visible is supported and not active */ :focus:not(:focus-visible) { outline: none; } /* --- Reveal-on-scroll ----------------------------------------------------- */ /* CRITICO: el estado oculto cuelga de .js-enabled (que main.js pone en ). Si el JS no carga o falla, [data-reveal] nunca se oculta y la pagina se ve entera. Antes opacity:0 era incondicional y sin JS quedaba en blanco. */ [data-reveal] { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .js-enabled [data-reveal] { opacity: 0; transform: translateY(1.25rem); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Staggered children via inline --reveal-delay or nth-child utility */ [data-reveal][style*="--reveal-delay"] { transition-delay: var(--reveal-delay, 0ms); } /* --- Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Debe igualar la especificidad de .js-enabled [data-reveal] (0,2,0) para poder ganarle; con solo [data-reveal] perdia y no se mostraba nada. */ .js-enabled [data-reveal] { opacity: 1; transform: none; transition-delay: 0ms; } }