* { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; } a { color: inherit; } button { font-family: inherit; cursor: pointer; } button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .grad-text { background: linear-gradient(90deg, var(--accent-ink) 0%, var(--accent-ink) 45%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* * Evita el parpadeo al recargar estando en el Panel admin: el script del * marca antes de que se pinte el body, y estas reglas ya * aplican el estado correcto apenas existen los elementos. */ html.pending-admin-view #viewStore { display: none; } html.pending-admin-view #viewAdmin { display: block; } /* * Mientras el JS todavía no fijó la vista y el scroll correctos, la página * queda invisible — así nunca se llega a ver nada a medio camino. */ html.js-loading body { visibility: hidden; }