/* Proposta 03: filmes reais, texto sobreposto e transições entre cenas. */
.header{color:#fff6ea;border-color:#ffffff30;background:linear-gradient(#151d18a6,transparent)}
.header .button{background:#fff6ea;color:#28241e!important}
.header a:focus-visible,.hero a:focus-visible,.hero button:focus-visible{outline-color:#fff6ea}
.hero{background:#19241d;color:#fff6ea;height:100svh;min-height:800px;max-height:1200px;display:block}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#19241d}
.hero-media img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%;max-width:none}
.hero-video{opacity:0;transition:opacity .9s ease;will-change:opacity}
.hero-video.is-active{opacity:1}
.hero:after{inset:0;height:auto;background:linear-gradient(90deg,#111c16eb 0%,#111c16ba 32%,#111c1620 76%),linear-gradient(0deg,#111c16d9,transparent 27%);z-index:-1}
.hero-copy{width:65%;padding:155px 0 115px 5%;height:100%}
.hero .eyebrow{color:#fff6ea;font-size:10px;letter-spacing:.14em;white-space:normal}
.hero .sun,.hero-location span{color:#ffa475}
.hero h1{font-size:clamp(76px,7.4vw,116px);margin:28px 0 25px;line-height:.9;letter-spacing:-.055em}
.hero h1 em{color:#ffab7f}
.hero .lead{color:#fff6ea;font-size:15px;max-width:395px;line-height:1.7;text-shadow:0 1px 12px #111c16}
.hero-copy .button{background:#f5662e;color:#1c211b!important;font-size:13px;min-height:58px;padding:18px 23px;gap:30px}
.hero-copy .button:hover{background:#ffab7f}
.hero .reassurance{color:#fff6ea;font-size:11px}.hero .reassurance span{color:#ffab7f}
.hero .hero-location{font-size:11px;color:#fff6ea;margin-top:20px}
.hero-footer{background:#111c165c;color:#fff6ea;border-color:#ffffff35;backdrop-filter:blur(8px);min-height:88px;padding:17px 5%;font-size:9px}
.film-controls{display:flex;align-items:center;gap:24px}.film-controls[hidden]{display:none}
.film-scenes{display:flex;gap:8px}
.scene{width:38px;min-height:44px;border:0;padding:0;background:transparent;cursor:pointer;display:grid;align-items:center}
.scene:before{content:'';height:2px;background:#ffffff66;grid-area:1/1}
.scene span{height:3px;background:#ffab7f;grid-area:1/1;transform:scaleX(0);transform-origin:left}
.scene.is-selected span{transform:scaleX(var(--progress,0))}
.film-toggle{color:#fff6ea;background:transparent;border:1px solid #ffffff60;min-height:44px;padding:8px 13px;font-size:10px;cursor:pointer;display:flex;align-items:center;gap:14px;white-space:nowrap}
.film-toggle:hover{background:#ffffff14}
.conversion:before{background-image:url('assets/01-arena.jpg');background-position:center 46%}
@media(min-width:1700px){.hero-copy{padding-top:185px}.hero h1{font-size:130px}}
@media(max-width:1150px) and (min-width:761px){.hero{min-height:800px}.hero-copy{width:75%;padding-top:155px}.hero h1{font-size:90px}.hero-footer>span{display:none}}
@media(max-width:760px){
 .header{padding:16px 22px;min-height:82px}.header .button-small{background:#fff6ea}
 .hero{min-height:790px;height:100svh;max-height:none;background:#19241d}
 .hero:after{inset:0;height:auto;background:linear-gradient(90deg,#111c16c9,#111c1670),linear-gradient(0deg,#111c16d9,transparent 35%)}
 .hero-copy{padding:135px 24px 130px;width:100%;height:auto}
 .hero h1{font-size:clamp(64px,16vw,104px);line-height:.91;margin:29px 0 25px}
 .hero .eyebrow{font-size:8px;letter-spacing:.08em}.hero .sun{font-size:25px}
 .hero .lead{font-size:14px;max-width:360px;line-height:1.65;margin-bottom:24px}
 .hero-copy .button{width:auto;font-size:11px;gap:18px;padding:17px 18px;min-height:54px}
 .hero .reassurance{font-size:10px;line-height:1.6;align-items:flex-start}
 .hero .hero-location{font-size:10px;margin-top:20px}
 .hero-footer{padding:13px 24px;min-height:94px;flex-wrap:wrap;gap:6px 14px}
 .hero-footer>a{font-size:8px}.film-controls{width:100%;justify-content:space-between;gap:10px}
 .film-scenes{gap:7px}.scene{width:30px}.film-toggle{font-size:10px;padding:8px 11px}
}
@media(max-width:360px){.hero{min-height:770px}.hero-copy{padding:124px 20px 135px}.hero h1{font-size:55px}.hero .eyebrow{font-size:7px}.hero .lead{font-size:13px}.hero-copy .button{font-size:10px;gap:12px}.hero .reassurance{font-size:9px}.hero-footer{padding-left:20px;padding-right:20px}}
@media(prefers-reduced-motion:reduce){.hero-video{transition:none}}
