/* ===== HERO VOA (sequência de frames no scroll) — copiado do site 1, isolado com prefixo .hero-seq / hv- ===== */
.hero-seq{
  margin-bottom:-40svh;
  --c:#06B6D4;--cd:#0891B2;--bk:#0A0A0A;--wh:#F8FAFC;--bg:#F8FAFC;--mut:rgba(23,23,23,.68);--ease:cubic-bezier(.22,1,.36,1);
  --nav-h:72px; /* altura da barra fixa: ela cobre o topo do hero, então o conteúdo precisa descontar isso */
  position:relative;height:calc(100svh * 3.6);padding:0;
  font:400 17px/1.6 Manrope,system-ui,sans-serif;color:var(--bk);-webkit-font-smoothing:antialiased;
}
.hero-seq *,.hero-seq *::before,.hero-seq *::after{box-sizing:border-box}
:where(.hero-seq) a{color:inherit;text-decoration:none}
.hero-seq h1,.hero-seq h2{font-family:'Bodoni Moda',serif;font-weight:400;margin:0;text-transform:none;letter-spacing:normal}
.hero-seq em{font-style:italic;color:var(--cd)}
.hero-seq :focus-visible{outline:2px solid var(--cd);outline-offset:3px}
.hero-seq .hv-container{max-width:1240px;margin:0 auto;padding:0 32px}

.hs-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#0d4a78 url(fundo-voa.jpg) center/cover}
#seq{position:absolute;inset:0;width:100%;height:100%;display:block}
.hs-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,30,60,.34),rgba(4,30,60,.04) 48%,rgba(4,30,60,.26))}
/* Texto sobe: o bloco fica centrado entre a barra de navegação e a dica "Role para decolar",
   e deixa a dica inteira (texto + linha animada) visível já na primeira dobra. */
.hs-copy{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:calc(var(--nav-h) + 24px) 0 calc(var(--nav-h) + 136px);color:#fff;will-change:opacity,transform}
.hv-inner{position:relative;transform:none;opacity:1}

.hv-top{margin-bottom:10px}
.hv-tag{display:inline-flex;align-items:center;gap:10px;font:700 13px/1.6 Manrope,system-ui,sans-serif;letter-spacing:normal;background:rgba(10,10,10,.9);color:var(--wh);padding:7px 16px;border-radius:999px;margin:0}
.hv-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.hv-eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:13px;font-weight:700;color:#fff;margin:0 0 18px;text-shadow:0 2px 14px rgba(0,25,55,.55)}
.hv-bar{width:28px;height:2px;background:var(--c);display:inline-block}
.hv-h1{font-size:clamp(34px,min(5.4vw,9.2vh),84px);line-height:1;letter-spacing:-.02em;margin:0;text-shadow:0 2px 26px rgba(0,25,55,.6),0 1px 3px rgba(0,25,55,.35)}
.hv-accent{font-style:italic;color:inherit}
.hv-strike{position:relative;color:rgba(255,255,255,.7)}
.hv-strike::after{content:"";position:absolute;left:0;right:0;top:54%;height:3px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform 1.2s .9s var(--ease)}
.hv-h1.in .hv-strike::after{transform:scaleX(1)}
.hv-scribble{background:linear-gradient(var(--c),var(--c)) 0 92%/0 .14em no-repeat;transition:background-size 1.2s 1.3s var(--ease)}
.hv-h1.in .hv-scribble{background-size:100% .14em}
.hv-side p{max-width:560px;margin:0 auto;font-size:clamp(15px,2.2vh,18px);font-weight:500;color:#fff;text-shadow:0 2px 20px rgba(0,25,55,.55)}
.hv-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.hv-meta{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:16px;font-size:14px;font-weight:600;color:#fff}
.hv-avatars{display:flex}
.hv-avatars span{width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin-left:-8px;background:linear-gradient(135deg,var(--c),#0b3a52)}
.hv-avatars span:first-child{margin:0}

.hv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:999px;font:700 15px/1.6 Manrope,system-ui,sans-serif;letter-spacing:normal;text-transform:none;border:0;cursor:pointer;transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .3s}
.hv-btn-primary{background:var(--bk);color:var(--wh)}
.hv-btn-primary:hover{background:var(--c);color:var(--bk);transform:translateY(-3px)}
.hv-btn-ghost{background:none;box-shadow:inset 0 0 0 1.5px currentColor}
.hv-btn-ghost:hover{background:var(--bk);color:var(--wh);transform:translateY(-3px)}
.hv-arrow{transition:transform .3s}
.hv-btn:hover .hv-arrow{transform:translate(3px,-3px)}
.hs-copy .hv-btn-primary{background:#fff;color:var(--bk)}
.hs-copy .hv-btn-primary:hover{background:var(--c)}
.hs-copy .hv-btn-ghost{color:#fff}
.hs-copy .hv-btn-ghost:hover{background:#fff;color:var(--bk)}

.hs-fade{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none}
.hs-end{position:absolute;inset:72px 0 40svh 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:24px;opacity:0;pointer-events:none;color:var(--bk)}
.hs-end h2{font-size:clamp(30px,4.4vw,62px);line-height:1.05;margin:0}
.hs-end p{margin:0;color:var(--mut)}
/* bottom desconta a barra fixa (72px) que cobre o topo do palco: assim a dica aparece inteira ao entrar */
.hs-hint{position:absolute;bottom:calc(var(--nav-h) + clamp(20px,4svh,40px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 12px rgba(0,25,55,.7);animation:hintIn .9s .6s var(--ease) backwards}
.hs-hint::after{content:"";width:2px;height:46px;border-radius:2px;background:linear-gradient(#fff,transparent);animation:drip 2s infinite}
@keyframes hintIn{from{opacity:0;translate:0 14px}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hs-load{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.2)}
.hs-load i{display:block;height:100%;background:var(--c);transform:scaleX(0);transform-origin:left}
.hero-seq.ready .hs-load{opacity:0;transition:opacity .8s}
.hero-seq.rm{height:100svh}
.hero-seq.rm .hs-end,.hero-seq.rm .hs-fade{display:none}

@media(max-width:980px){.hero-seq{height:calc(100svh * 3.4)}}
@media(max-width:780px){
  .hero-seq .hv-container{padding:0 20px}
  .hs-hint{bottom:calc(var(--nav-h) + 18px)}
  .hs-copy{padding:calc(var(--nav-h) + 20px) 0 calc(var(--nav-h) + 18px + 74px + 22px)}
}
@media(max-width:700px){.hv-h1{font-size:clamp(38px,10.5vw,54px)}}
@media(max-height:700px){.hs-hint::after{height:30px}.hs-copy{padding-bottom:calc(var(--nav-h) + 110px)}}
@media(prefers-reduced-motion:reduce){.hero-seq *{animation:none!important;transition-duration:.01s!important}}

.voa-stats{position:relative;z-index:3;background:var(--bg,#F8FAFC)}
