/* ============================================================ AlphaNetworks · base.css Reset, normalización, tipografía base y accesibilidad. Depende de: variables.css ============================================================ */ /* ── Reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 108px; /* compensa el header sticky (96px) + margen al navegar por anclas */ } body { font-family: var(--font-body); font-feature-settings: 'cv11','ss01','ss03'; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text); background: var(--grad-body); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Tipografía ─────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text); line-height: var(--lh-tight); letter-spacing: -.025em; text-wrap: balance; } /* Los pesos bajan (800/700 → 300/400) en los tamaños de display. El logotipo de AlphaNetworks está trazado en un geométrico delgado y ancho; los títulos en 800 apretado iban en contra de la propia letra de la marca. A 68px, el peso 300 se lee preciso; a 50px en 800 se leía gritado. El peso vuelve a subir en h3/h4, que son títulos de tarjeta y necesitan escanearse, no contemplarse. */ h1 { font-weight: var(--fw-regular); font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -.02em; } h2 { font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: 1.25; letter-spacing: -.015em; } h3 { font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; } h4 { font-weight: var(--fw-semibold); font-size: var(--fs-base); letter-spacing: -.01em; } h5 { font-weight: var(--fw-semibold); font-size: var(--fs-2xs); } p { line-height: var(--lh-base); text-wrap: pretty; } strong, b { font-weight: var(--fw-semibold); color: var(--text); } small { font-weight: var(--fw-medium); font-size: .82em; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } ul, ol { list-style: none; } img, svg, video, picture { max-width: 100%; display: block; } img { height: auto; } /* Heredar tipografía en controles de formulario */ input, button, select, textarea { font: inherit; color: inherit; } /* ── Accesibilidad ──────────────────────────────────────── */ /* Estado focus visible y consistente para teclado (no remover sin reemplazo) */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; } /* Texto solo para lectores de pantalla */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Enlace "saltar al contenido" (primer elemento del ) */ .skip-link { position: absolute; left: -999px; top: 0; z-index: var(--z-toast); background: var(--cyan); color: var(--on-cyan); padding: 10px 18px; border-radius: 0 0 var(--radius) 0; font-weight: var(--fw-bold); } .skip-link:focus { left: 0; } ::selection { background: var(--cyan); color: var(--on-cyan); } /* ── Movimiento reducido (respeta preferencia del sistema) ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }