/* A single unaltered artwork spans the header and hero. */
body{position:relative}
#masthead-background{position:absolute;top:0;left:0;width:100%;height:640px;z-index:0;pointer-events:none;background:#e8e8e8 url('assets/grafismo-masthead.png') center top/cover no-repeat}
main{position:relative;z-index:1}
.header{background:transparent;transition:background-color .2s}
.header:before,.reference-hero:before,.reference-hero:after{display:none!important;content:none!important}
.reference-hero{background:transparent}
.header.is-scrolled{background:#f5f5f5f7;box-shadow:0 1px 0 #0000000d}
.desktop-nav{background:#fffffff0;border-radius:5px;padding:0 16px}
.header-actions{background:#fffffff0;border-radius:5px;padding:4px 7px}
.hero-message{padding:24px;background:#f6f6f6f2;border-radius:7px}
@media(max-width:900px){.hero-message{padding:21px}}
@media(max-width:720px){.hero-message{padding:22px}.header-actions{gap:8px}}
@media(max-width:540px){.hero-message{padding:20px}.reference-hero h1{font-size:35px}.hero-buttons{flex-wrap:wrap}.hero-buttons .button{font-size:12px}}
@media(max-width:360px){.hero-message{padding:17px}.reference-hero h1{font-size:31px}.hero-buttons .button{font-size:12px;padding:11px 9px}}
@media print{#masthead-background{display:none}.desktop-nav,.header-actions,.hero-message{background:white}}

#masthead-background{overflow:hidden;background:#e8e8e8}
#masthead-background:before{content:"";position:absolute;inset:-80px 0;background:#e8e8e8 url('assets/grafismo-masthead.png') center/cover no-repeat;transform:translate3d(0,var(--masthead-shift,0px),0);will-change:transform}
@media(prefers-reduced-motion:reduce){#masthead-background:before{transform:none;will-change:auto}html{scroll-behavior:auto}}