/* a11y.css — accesibilidad global (ui-ux-pro-max §1 Accesibilidad). * Se carga al final del de TODAS las páginas. Solo reglas universales y * seguras: anillos de foco de teclado + respeto de "movimiento reducido". * No cambia colores, layout ni el foco con ratón (solo :focus-visible = teclado). */ /* §1 focus-states — anillo de foco visible al navegar con teclado (Tab). * :where() mantiene especificidad baja; !important garantiza que se vea aunque la * página haga outline:0 en :focus. El halo claro da contraste sobre fondos oscuros. */ :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid #0d4d33 !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(176, 240, 214, .85) !important; border-radius: 4px; } /* §5 readable-font-size — en móvil, los campos de texto a >=16px para que iOS no haga * auto-zoom al enfocar y el texto sea legible. Universal y de bajo riesgo. */ @media (max-width: 480px) { input, select, textarea { font-size: 16px; } } /* §1 reduced-motion — respeta a quien pide menos movimiento (vestibular, mareo). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* §6 base tipográfica global (impeccable · typeset). * Solo reglas UNIVERSALES y seguras: NO fijan tamaños de fuente (cada página * mantiene los suyos) ni tocan el layout. Aportan consistencia y legibilidad. */ /* No dejar que iOS infle el texto al rotar; respetar siempre el zoom del usuario. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Escala tipográfica fija de referencia (ratio ~1.2, base 16px). Tokens para que * páginas nuevas/refactor usen una escala común en vez de ~30 tamaños sueltos. */ :root { --text-2xs: .75rem; /* 12px · micro-etiquetas, legal */ --text-xs: .8125rem; /* 13px · metadatos */ --text-sm: .875rem; /* 14px · UI secundaria */ --text-base: 1rem; /* 16px · cuerpo (mínimo legible) */ --text-md: 1.125rem; /* 18px · texto destacado/subtítulo */ --text-lg: 1.3125rem; /* 21px · títulos de tarjeta */ --text-xl: 1.625rem; /* 26px · títulos de sección */ --text-2xl: 2rem; /* 32px · título de página */ --text-3xl: 2.5rem; /* 40px · display */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.6; } /* Render más nítido y con kerning correcto (cosmético; no afecta al layout). */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; } /* Reparto de líneas equilibrado en titulares y sin huérfanas en prosa. * Progresivo: los navegadores que no lo soportan lo ignoran sin efecto. */ h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; }