.hero-pin{position:relative;height:100svh;overflow:hidden}
.hero{position:absolute;inset:0;overflow:hidden;transform-origin:50% 0;will-change:transform}
.hero .bg{position:absolute;inset:0}
.hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;opacity:0;transition:opacity 1.1s ease}
.hero .bg img.on{opacity:1}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.15) 60%,rgba(0,0,0,.7) 100%);pointer-events:none}
.hero .top{position:absolute;z-index:2;top:110px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between}
.hero .bottom{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(20px,4vh,44px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hero h1{font-size:clamp(60px,12.4vw,220px);white-space:nowrap;line-height:.8;font-weight:900;font-variation-settings:'wdth' 80;letter-spacing:-.02em;text-transform:uppercase}
.hero h1 .ch{display:inline-block;transform:translateY(105%);transition:transform 1.2s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*45ms + .2s)}
body.ready .hero h1 .ch{transform:none}
.hero .thumbs button{opacity:0;transform:translateY(40px);transition:width .7s cubic-bezier(.7,0,.2,1),outline-color .3s,opacity 1s .6s,transform 1s cubic-bezier(.16,1,.3,1) .6s}
body.ready .hero .thumbs button{opacity:1;transform:none}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.02em}
.hero .sub{max-width:360px;font-size:15px;line-height:1.45;color:#ddd;margin-top:18px}
.thumbs{display:flex;gap:10px;height:clamp(150px,24vh,250px);flex-shrink:0}
.thumbs button{position:relative;width:clamp(44px,4.2vw,64px);height:100%;border-radius:12px;overflow:hidden;outline:1.5px solid transparent;outline-offset:3px}
.thumbs button.on{width:clamp(130px,13vw,200px);outline-color:rgba(255,255,255,.8)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs span{position:absolute;left:10px;bottom:9px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .4s}
.thumbs button.on span{opacity:1}
.badge{position:absolute;z-index:2;right:var(--pad);top:50%;width:118px;height:118px;transform:translateY(-50%)}
.badge svg{width:100%;height:100%;animation:spin 14s linear infinite}
.badge text{font-family:var(--mono);font-size:10.5px;letter-spacing:3.2px;fill:var(--fg);text-transform:uppercase}
.badge b{position:absolute;inset:0;margin:auto;width:12px;height:12px;border-radius:50%;background:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1000px){
.badge{display:none}
.hero .bottom{flex-direction:column;align-items:flex-start}
.thumbs{height:110px}
.thumbs button.on{width:110px}
}
@media (max-width:560px){
.hero .top .mono:last-child{display:none}
}
/* --- antes injetado pelo app.js --- */
.hero .pretitle{margin-bottom:18px}
.hero h1.enter .ch{transform:translateY(105%)!important;transition:none!important}
.hero .bg{background:#05061a;overflow:hidden}
.hero .bg img{will-change:opacity}
.hero .sub,.hero .top{display:none!important}
.hero .bottom>div:first-child{padding-bottom:clamp(24px,6vh,64px)}
.hero .pretitle{display:inline-block;vertical-align:middle;margin-right:14px}
.hcta{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;margin-bottom:18px}
.hbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:99px;background:#fff;color:#0a0a0a;font:600 12.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;transition:background .25s,color .25s}
.hbtn svg{width:13px;height:13px}
.hbtn:hover{background:var(--accent);color:#fff}
.hplay{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s}
.hplay svg{width:14px;height:14px}
.hplay:hover,.hplay.pl{background:var(--accent);border-color:var(--accent)}
@media (max-width:700px){.hero .pretitle{display:block;margin-right:0}.hcta{margin-bottom:14px}}
/* --- acessibilidade: foco de teclado visível nas miniaturas e botões do hero --- */
.thumbs button:focus-visible{outline-color:#b8a4ff;outline-width:2px}
.hbtn:focus-visible,.hplay:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* --- editor: mostra em qual idioma o texto do hero está sendo editado --- */
body.editing .hero [data-k]{position:relative}
body.editing .hero [data-k]::after{position:absolute;left:calc(100% + 8px);top:50%;translate:0 -50%;padding:2px 6px;border-radius:4px;background:var(--accent);color:#fff;font:600 10px var(--mono);letter-spacing:.06em;pointer-events:none;white-space:nowrap}
html[lang|="pt"] body.editing .hero [data-k]::after{content:'PT'}
html[lang="en"] body.editing .hero [data-k]::after{content:'EN'}
html[lang="es"] body.editing .hero [data-k]::after{content:'ES'}