html {
scroll-behavior: smooth;
/* El header es sticky (CL-WEB 0.1.3): sin esto, un enlace a un ancla
interna (#id) dejaría el contenido oculto detrás de la navegación. */
scroll-padding-top: calc(var(--header-height-scrolled) + 16px);
/* Salvaguarda contra scroll horizontal (el panel del menú móvil usa
position:fixed + transform para ocultarse fuera de pantalla). Se
declara únicamente aquí, no también en "body": tenerla duplicada en
ambos generaba dos contenedores de scroll anidados (overflow-y:auto
calculado automáticamente en los dos, por la regla de CSS que
convierte "visible" en "auto" cuando el otro eje es "hidden") y eso
rompía position:sticky en el header. */
overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-background);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-family-display);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-primary-deep);
text-wrap: balance;
}
h1 {
font-size: var(--font-size-2xl);
}
h2 {
font-size: var(--font-size-xl);
}
h3 {
font-size: var(--font-size-lg);
}
h4 {
font-size: var(--font-size-md);
}
p {
line-height: var(--line-height-normal);
color: var(--color-text-soft);
text-wrap: pretty;
}
p + p {
margin-top: var(--space-sm);
}
a {
transition: color var(--transition-fast);
}
a:not([class]) {
color: var(--color-primary);
text-underline-offset: 0.15em;
}
a:not([class]):hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
:focus-visible {
outline: 3px solid var(--color-primary-dark);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Sobre fondos oscuros el foco debe seguir siendo legible */
.on-dark :focus-visible,
.site-header :focus-visible {
outline-color: var(--color-accent);
}
::selection {
background-color: var(--color-accent);
color: var(--color-on-accent);
}
main {
display: block;
}
address {
font-style: normal;
}
/* Enlace para saltar al contenido principal */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-sm);
z-index: var(--z-skip-link);
background: var(--color-primary-dark);
color: var(--color-on-primary);
padding: var(--space-2xs) var(--space-sm);
border-radius: var(--radius-sm);
font-weight: var(--font-weight-semibold);
transition: top var(--transition-fast);
}
.skip-link:focus {
top: var(--space-sm);
}
/* Bloqueo de scroll cuando el menú móvil está abierto */
body.menu-open {
overflow: hidden;
}
/* ---- Microinteracción de aparición progresiva ----
Un script mínimo e inline en agrega la clase .js al elemento
de forma síncrona. Sólo entonces [data-reveal] inicia oculto y
main.js lo revela mediante IntersectionObserver. Sin JavaScript, la
clase .js nunca se agrega y todo el contenido permanece visible desde
el primer render — nada depende de JS para mostrarse. */
.js [data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.js [data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.js [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}