/* Keep the full home cover painted in iOS Safari, including browser-bar changes. */
.hero-home{background:#253441 url('./assets/estadio.webp') 58% 64%/cover no-repeat;position:relative;isolation:isolate}
.hero-home>.hero-bg,.hero-home>video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;z-index:0;pointer-events:none}
.hero-home::after{z-index:1;pointer-events:none}
.hero-home>.hero-content{position:relative;z-index:2;min-width:0}
@media(max-width:700px){.hero-home{min-height:calc(100vh - var(--actual-header-height,var(--header-height)));min-height:calc(100lvh - var(--actual-header-height,var(--header-height)))}}
@media(prefers-reduced-motion:reduce){.hero-home>video{display:none}}

/* Leave background beneath floating mobile browser controls and the safe area. */
@media(max-width:700px){.hero-home{min-height:100vh;min-height:calc(100lvh + env(safe-area-inset-bottom,0px));padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}}
/* Center content in the usable first screen; extend only the background on iOS. */
:root{--nav-height:76px}
.site-header .header-inner{min-height:var(--nav-height)}
@media(max-width:1100px){:root{--nav-height:62px}.site-header .logo img{max-height:54px;width:auto}.site-header .site-nav{top:var(--nav-height)}}
@media(max-width:700px){
 .hero-home{display:block;min-height:0;padding:0 20px}
 .hero-home>.hero-content{box-sizing:border-box;min-height:calc(100vh - var(--actual-header-height,var(--header-height)));min-height:calc(100svh - var(--actual-header-height,var(--header-height)));display:flex;flex-direction:column;justify-content:center;padding:28px 0}
 @supports(-webkit-touch-callout:none){.hero-home{padding-bottom:calc(var(--actual-header-height,var(--header-height)) + env(safe-area-inset-bottom,0px))}}
}

@media(max-width:700px){@supports(-webkit-touch-callout:none){.safari-cover .hero-home{padding-bottom:calc(var(--actual-header-height,var(--header-height)) + env(safe-area-inset-bottom,0px) + 4px)}}}