*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--text);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4 {
margin: 0 0 var(--sp-4);
line-height: var(--lh-tight);
letter-spacing: -0.022em;
font-weight: 800;
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.014em; }
h4 { font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: -0.01em; }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15em; }
li + li { margin-top: var(--sp-2); }
a { color: var(--accent-700); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--text); }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }
strong, b { font-weight: 700; }
:focus-visible {
outline: 3px solid var(--accent-700);
outline-offset: 2px;
border-radius: 4px;
}
::selection { background: var(--accent); color: #fff; }
.contenedor {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--sp-5);
}
@media (min-width: 60rem) { .contenedor { padding-inline: var(--sp-6); } }
.seccion { padding-block: var(--section-y); }
.seccion--compacta { padding-block: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.seccion--oscura {
background: var(--ink-900);
color: var(--text-inv);
}
.seccion--oscura h2, .seccion--oscura h3 { color: var(--text-inv); }
.seccion--oscura p { color: var(--text-inv-2); }
.seccion--oscura a { color: var(--neon); }
.seccion--gris { background: var(--paper-2); }
.prosa { max-width: var(--maxw-prose); }
.solo-lectores {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.saltar {
position: absolute;
left: var(--sp-4);
top: -4rem;
z-index: 200;
background: var(--ink-900);
color: var(--text-inv);
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-1);
transition: top var(--dur) var(--ease);
}
.saltar:focus { top: var(--sp-4); color: var(--text-inv); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}