:root { --navy: #061723; --lime: #c7ff24; --white: #fff; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body { background: var(--navy); color: var(--white); font-family: "Manrope", Arial, sans-serif; }
.hero { position: relative; isolation: isolate; width: 100%; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.hero-image, .hero-overlay { position: absolute; inset: 0; }
.hero-image { z-index: -3; background: url("assets/campanha/bravaro-arena-teaser-container-v2.png") center 54% / cover; transform: scale(1.015); animation: settle 1.6s cubic-bezier(.2,.7,.2,1) both; }
.hero-overlay { z-index: -2; background: linear-gradient(90deg, rgba(2,15,25,.94) 0%, rgba(2,15,25,.64) 37%, rgba(2,15,25,.16) 72%, rgba(2,15,25,.08) 100%), linear-gradient(0deg, rgba(2,15,25,.76) 0%, transparent 48%); }
.hero-header { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding: clamp(1.5rem,4vw,3.2rem) clamp(1.35rem,5vw,6rem); }
.brand { display: flex; flex-direction: column; align-items: flex-start; font-family: "Permanent Marker", "Comic Sans MS", cursive; font-size: clamp(2.15rem,4.5vw,5rem); line-height: .64; letter-spacing: -.045em; text-transform: uppercase; transform: rotate(-3deg); filter: drop-shadow(0 .22rem .15rem rgba(0,0,0,.35)); }
.brand span { color: var(--white); }
.brand strong { margin-left: 1.35em; color: var(--lime); font-size: .9em; font-weight: 400; }
.status { display: inline-flex; align-items: center; gap: .6rem; margin-top: .3rem; font-size: clamp(.65rem,.8vw,.8rem); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.status i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 .4rem rgba(199,255,36,.16), 0 0 1.2rem rgba(199,255,36,.5); }
.hero-content { position: absolute; left: clamp(1.35rem,15vw,18rem); bottom: clamp(2.7rem,8vh,6.8rem); width: min(52rem,calc(100% - 2.7rem)); animation: reveal .9s .15s cubic-bezier(.2,.7,.2,1) both; }
.eyebrow { margin: 0 0 1.25rem; color: var(--lime); font-size: clamp(.68rem,1vw,.9rem); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 0; font-family: "Montserrat", Arial, sans-serif; font-size: clamp(3.45rem,7.3vw,8.8rem); font-weight: 900; letter-spacing: -.075em; line-height: .85; text-transform: uppercase; text-shadow: 0 .12em .4em rgba(0,0,0,.22); }
.hero-copy { margin: clamp(1.35rem,3vh,2.3rem) 0 0; font-size: clamp(1rem,1.45vw,1.45rem); line-height: 1.5; }
.hero-copy strong { color: var(--lime); }
@keyframes settle { from { opacity: .2; transform: scale(1.08); } to { opacity: 1; transform: scale(1.015); } }
@keyframes reveal { from { opacity: 0; transform: translateY(1.8rem); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .hero-image { background-position: 58% center; } .hero-overlay { background: linear-gradient(90deg,rgba(2,15,25,.9) 0%,rgba(2,15,25,.42) 75%,rgba(2,15,25,.15) 100%),linear-gradient(0deg,rgba(2,15,25,.88) 0%,transparent 62%); } .hero-content { left: clamp(1.35rem,7vw,4rem); } }
@media (max-width: 600px) { .hero { min-height: 620px; } .hero-header { padding-top: 1.4rem; } .brand { font-size: clamp(2rem,10vw,3rem); } .status { margin-top: 0; } .hero-image { background-position: 65% center; } .hero-overlay { background: linear-gradient(180deg,rgba(2,15,25,.32) 0%,transparent 30%),linear-gradient(0deg,rgba(2,15,25,.96) 2%,rgba(2,15,25,.46) 62%,rgba(2,15,25,.08) 100%); } .hero-content { bottom: clamp(2rem,6vh,3.8rem); width: calc(100% - 2.7rem); } h1 { font-size: clamp(3.3rem,15.5vw,5rem); } .eyebrow { max-width: 18rem; line-height: 1.6; } }
@media (max-height: 650px) and (min-width: 700px) { .brand { font-size: clamp(2rem,3.5vw,3.2rem); } .hero-content { bottom: 2rem; } h1 { font-size: clamp(3.3rem,7vw,5.7rem); } .hero-copy { margin-top: 1rem; } }
@media (prefers-reduced-motion: reduce) { .hero-image, .hero-content { animation: none; } }