/* ============================================================ BASE — reset, document defaults, accessibility primitives Way Prieto · Masterclass "La Ciencia de Elegir un Alisado" ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* Sideways scrolling is locked at the root. Applying it to as well as is what actually holds on iOS Safari, where overflow set only on is not reliably propagated to the viewport. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Offset for the fixed header when jumping to an anchor. */ scroll-padding-top: 5rem; -webkit-tap-highlight-color: transparent; max-width: 100%; overflow-x: hidden; } /* `clip` is preferred where supported: unlike `hidden` it does not turn the root into a scroll container, so anchor scrolling stays intact. */ @supports (overflow: clip) { html { overflow-x: clip; } } body { position: relative; width: 100%; max-width: 100%; min-height: 100vh; min-height: 100svh; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; } /* Must outrank any component `display`, or a toggled-off tab panel would still paint. */ [hidden] { display: none !important; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } p, h1, h2, h3, h4, h5, h6, li { overflow-wrap: break-word; text-wrap: pretty; } h1, h2, h3, h4 { text-wrap: balance; font-weight: inherit; } ul, ol { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } address { font-style: normal; } table { border-collapse: collapse; } /* Focus: invisible for mouse users, unmistakable for keyboard users. The transparent outline is kept so the ring survives forced-colors. */ :focus-visible { outline: 2px solid var(--gold-300, #e3c883); outline-offset: 3px; border-radius: 4px; } @media (forced-colors: active) { :focus-visible { outline: 3px solid Highlight; } /* Gradient-clipped text has no fill in forced-colors — restore it. */ .gold-text, .price__num, .manifesto__q em { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; } .btn--gold { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; } .hero__scrim, .hero__grain, .price__glow { display: none; } } :focus:not(:focus-visible) { outline: none; } ::selection { background: rgba(201, 169, 97, 0.32); color: #fff; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link — first tab stop. */ .skip-link { position: fixed; top: 0; left: 50%; z-index: 999; translate: -50% -120%; padding: 0.75rem 1.25rem; border-radius: 0 0 12px 12px; background: var(--gold-400, #c9a961); color: #0a0704; font-weight: 650; font-size: 0.875rem; transition: translate 0.25s ease; } .skip-link:focus-visible { translate: -50% 0; outline-offset: -4px; } @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; scroll-behavior: auto !important; } }