*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text-strong);letter-spacing:var(--ls-display);margin:0}
h1{font-size:var(--type-h1-size);line-height:var(--lh-display)}
h2{font-size:var(--type-h2-size);line-height:var(--lh-tight)}
h3,h4,h5{font-family:var(--font-subhead);font-weight:var(--fw-bold);color:var(--text-strong);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);margin:0}
h3{font-size:var(--type-h3-size)}
h4{font-size:var(--type-h4-size)}
p{margin:0}
img{max-width:100%;height:auto}
/* picture no genera caja: el <img> queda como hijo directo del layout,
   así los width en % se resuelven contra el contenedor real. */
picture{display:contents}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
::selection{background:var(--cyan-200);color:var(--blue-900)}