/* =========================================================== Base — reset, type scale, layout primitives, buttons Mobile-first: this file is authored for the narrow viewport. =========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* in-page anchors must clear the fixed bar */ scroll-padding-top: calc(var(--bar-h) + var(--space-4)); } body { margin: 0; padding-top: var(--bar-h); background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Mobile browsers size the layout viewport to the widest content, whatever overflow says on , so a few stray pixels let the page pan sideways and wobble on touch. Clip horizontally on the content wrappers themselves. `clip` (unlike `hidden`) creates no scroll container, so sticky elements and the inner horizontal scrollers keep working. */ main, .site-footer { overflow-x: clip; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.018em; margin: 0 0 var(--space-3); color: var(--color-text); text-wrap: balance; } h1 { font-size: var(--fs-4xl); font-weight: 700; } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-xl); } p { margin: 0 0 var(--space-4); } p:last-child { margin-bottom: 0; } a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--a-600); } img, svg, iframe { max-width: 100%; } img { height: auto; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } strong { font-weight: 700; color: var(--color-text); } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--a-200); color: var(--n-950); } /* --- Accessibility helpers -------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 200; transform: translateY(-160%); background: var(--color-cta); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--r-pill); font-weight: 600; text-decoration: none; transition: transform var(--dur) var(--ease-out); } .skip-link:focus { transform: translateY(0); color: #fff; } /* --- Layout ----------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 820px; } .container--bleed-right { padding-right: 0; } .section { padding-block: var(--space-8); } .section--tint { background: var(--color-tint); } .section--seo { background: var(--color-bg); } .section--intro { padding-bottom: var(--space-6); } .section--dark { background: var(--color-dark); color: var(--color-on-dark); overflow: hidden; } .section--dark h2, .section--dark h3 { color: var(--color-on-dark); } .band { padding-block: var(--space-6); } @media (min-width: 768px) { .section { padding-block: var(--space-9); } } /* Two-column splits: one column on mobile, always */ .split { display: grid; gap: var(--space-6); } @media (min-width: 1024px) { .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: start; } .split--spec { grid-template-columns: 1.15fr 0.85fr; } .split--compare { grid-template-columns: 0.85fr 1.15fr; align-items: center; } .split--local { grid-template-columns: 1.2fr 0.8fr; } } /* --- Kicker ------------------------------------------------ */ .kicker { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); /* 8.6:1 on light — measured, not eyeballed */ } .kicker::before { content: ""; width: 26px; height: 2px; flex: none; background: currentColor; border-radius: 2px; } .kicker--on-dark { color: var(--color-accent-on-dark); } /* --- Buttons ----------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; /* ≥ 44px touch target */ padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--r-pill); background: var(--color-surface); color: var(--color-text); font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .btn .icon { width: 19px; height: 19px; flex: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.985); } .btn--accent { background: var(--color-cta); color: #fff; box-shadow: var(--shadow-cta); } .btn--accent:hover { background: var(--color-cta-hover); color: #fff; } .btn--glass { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); color: #fff; backdrop-filter: blur(8px); } .btn--glass:hover { background: rgba(255,255,255,.18); color: #fff; } .btn--outline { border-color: var(--color-border-strong); color: var(--color-text); } .btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); } .btn--whatsapp { background: var(--wa-700); color: #fff; } .btn--whatsapp:hover { background: #0F7A41; color: #fff; } .btn--lg { min-height: 54px; padding: var(--space-4) var(--space-6); font-size: var(--fs-base); } .btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); } .btn--block { width: 100%; } /* --- Small parts ------------------------------------------- */ .icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; flex: none; } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--color-accent); } .dot--accent { background: var(--color-accent); } .dot--accent-2 { background: var(--color-cta); } .lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--color-text); } @media (min-width: 768px) { .lead { font-size: var(--fs-xl); } } .prose p + p { margin-top: var(--space-4); } .prose p { color: var(--color-muted); } .note { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-5); color: var(--color-muted); font-size: var(--fs-sm); } .note .icon { width: 18px; height: 18px; color: var(--color-accent); margin-top: 3px; } .center-cta { margin-top: var(--space-7); text-align: center; } .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: 600; text-decoration: none; color: var(--color-accent); } .link-arrow .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); } .link-arrow:hover .icon { transform: translateX(4px); } .section--dark .link-arrow { color: var(--color-accent-on-dark); }