/* ========================================================================== Base — reset moderado, semántica y accesibilidad de partida. Todo lo que aquí se define es una garantía de accesibilidad transversal: no debe deshacerse en capas superiores sin sustituirlo por algo equivalente. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* NO se fija font-size en : el sitio hereda el tamaño de fuente que la persona haya configurado en su navegador (WCAG 1.4.4). */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--surface-light); color: var(--text-on-light); font-family: var(--font-text); font-size: var(--step-0); line-height: var(--leading-body); font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* --- Tipografía de bloque ------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); text-wrap: balance; } h1 { font-size: var(--step-4); font-weight: 700; } h2 { font-size: var(--step-3); font-weight: 700; } h3 { font-size: var(--step-2); font-weight: 600; } h4 { font-size: var(--step-1); font-weight: 600; line-height: var(--leading-snug); } p, li { max-width: var(--measure); } p { margin: 0 0 var(--space-4); text-wrap: pretty; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; } small { font-size: var(--step--1); } ul, ol { padding-left: 1.25em; margin: 0 0 var(--space-4); } li + li { margin-top: var(--space-2); } /* --- Enlaces ------------------------------------------------------------- El subrayado NO se quita nunca en texto corrido: el color no puede ser el único medio para identificar un enlace (WCAG 1.4.1). -------------------------------------------------------------------------- */ a { color: var(--link-on-light); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.18em; transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); } a:hover { color: var(--brand-bright); text-decoration-thickness: 2px; } /* --- Foco visible -------------------------------------------------------- Anillo de dos tonos (núcleo brillante + halo cálido) para que se vea tanto sobre superficie clara como sobre azul noche. WCAG 2.4.11 y 2.4.13. -------------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); box-shadow: 0 0 0 calc(var(--focus-width) + var(--focus-offset)) var(--focus-halo); } .on-dark :focus-visible, .theme-dark :focus-visible { outline-color: var(--brand-warm); box-shadow: 0 0 0 calc(var(--focus-width) + var(--focus-offset)) var(--brand-night); } /* --- Salto al contenido --------------------------------------------------- */ .skip-link { position: absolute; left: var(--space-4); top: var(--space-4); z-index: var(--z-skip); transform: translateY(-200%); background: var(--brand-blue); color: var(--brand-white); padding: var(--space-3) var(--space-5); border-radius: var(--radius); text-decoration: none; font-weight: 600; transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translateY(0); color: var(--brand-white); } /* --- Solo para lectores de pantalla --------------------------------------- */ .visually-hidden:not(:focus):not(:active) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Medios --------------------------------------------------------------- */ img, svg, video { max-width: 100%; height: auto; display: block; } /* Ojo: NO poner un color de fondo global a . Se hizo al principio como marcador mientras cargaban las fotos, y convertía cualquier PNG con transparencia —las ilustraciones de C.A.T. y CATY— en un recuadro de color. El marcador se aplica solo donde hay fotografías opacas de verdad. */ .person__photo { background: var(--surface-light-alt); } /* --- Objetivos táctiles (WCAG 2.5.8: mínimo 24×24 CSS px) ------------------ */ a, button, input, select, textarea, summary, [role='button'], [role='tab'] { min-height: 24px; } /* --- Temas de sección ----------------------------------------------------- .theme-dark invierte los tokens de texto/enlace para las secciones sobre azul noche, en un único punto y no color a color. -------------------------------------------------------------------------- */ .theme-dark { background: var(--surface-dark); color: var(--text-on-dark); --text-on-light: var(--brand-warm); --text-on-light-muted: var(--brand-sky); --link-on-light: var(--brand-sky); } .theme-dark a { color: var(--link-on-dark); } .theme-dark a:hover { color: var(--brand-warm); } .theme-ice { background: var(--surface-light-alt); color: var(--text-on-light); } /* --- Movimiento reducido -------------------------------------------------- Un solo punto de control: las duraciones viven en tokens, así que anularlas aquí desactiva TODA la animación del sitio, incluida la del gato. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- Modo de alto contraste forzado (Windows) ------------------------------ */ @media (forced-colors: active) { .btn { border: 1px solid ButtonText; } :focus-visible { outline: 3px solid Highlight; } }