:root{--paper:#F5EFDF;--paper-d:#E8DFC8;--ink:#261A18;--ink-s:#44342E;--terra:#B85737;--terra-d:#8E3E26;--azul:#3E5A78;--muted:#897765;--line:#C7B79B}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;font-size:15px;line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
::selection{background:var(--terra);color:var(--paper)}
.demo-banner{background:var(--ink);color:var(--paper);padding:0.65rem 1rem;font-size:0.78rem;text-align:center;letter-spacing:0.05em}
.demo-banner strong{color:var(--terra)}
.demo-banner a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--terra)}
.masthead{padding:1.5rem 2.5rem;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center;gap:2rem;position:sticky;top:0;background:var(--paper);z-index:9}
.brand .name{font-family:'Abril Fatface',serif;font-size:1.6rem;letter-spacing:0.01em;color:var(--terra-d);line-height:1}
.brand .name a{color:inherit}
.brand .sub{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.2em;color:var(--muted);margin-top:3px;font-weight:500}
.masthead nav{display:flex;gap:1.75rem;font-size:0.85rem;font-weight:500}
.masthead nav a{padding-bottom:2px;border-bottom:2px solid transparent;transition:all 0.2s}
.masthead nav a.active,.masthead nav a:hover{border-bottom-color:var(--terra);color:var(--terra-d)}
main{flex:1}
footer{padding:1.75rem 2.5rem;background:var(--paper-d);border-top:2px solid var(--ink);font-size:0.78rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem}
footer .orn{font-family:'Abril Fatface',serif;color:var(--terra);font-size:1.3rem}
footer a:hover{color:var(--terra-d)}
@media(max-width:780px){.masthead{flex-direction:column;gap:0.75rem;padding:1rem 1.25rem}.masthead nav{flex-wrap:wrap;gap:1rem}footer{padding:1.25rem;justify-content:center;text-align:center}}