/* ============================================================ base.css — Primitivas del sitio (FASE 1). Reset suave · tipografía por tokens · .section · .rule · foco. Los componentes viven en app.css. ============================================================ */ /* Reset suave -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background-color: var(--c-bg); color: var(--c-text); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Tipografía por tokens ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin-top: 0; font-family: var(--font-heading); color: var(--c-heading); line-height: 1.15; } code, kbd, samp, pre, .mono { font-family: var(--font-mono); } a { color: var(--c-brand); } /* Sección: padding vertical responsive ------------------------- */ .section { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); } @media (min-width: 768px) { .section { padding-top: var(--section-py); padding-bottom: var(--section-py); } } /* Línea divisora fina (separa secciones o bloques) ------------- */ .rule { border: 0; border-top: var(--border-thin); margin: 0; } /* Foco visible solo por teclado (accesibilidad) --------------- */ :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 1px; } :focus:not(:focus-visible) { outline: none; } /* Reveal en scroll (Fase 9) — solo con JS activo (.js en ). Sin JS, las secciones se ven normal (nunca quedan ocultas). */ .js .section { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .js .section.is-visible { opacity: 1; transform: none; } /* Números de métricas: ancho de dígito estable al contar (evita saltos) */ .metric-num { font-variant-numeric: tabular-nums; } /* WCAG: sin movimiento → mostrar todo en su estado final, sin animar */ @media (prefers-reduced-motion: reduce) { .js .section { opacity: 1; transform: none; transition: none; } } /* Skip-link: oculto hasta recibir foco por teclado ------------ */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 1080; padding: 0.5rem 1rem; background: var(--c-accent); color: #fff; text-decoration: none; } .skip-link:focus { left: 0.5rem; top: 0.5rem; }