/* Now Pay · style.css · só estiliza; o movimento vem dos kits (tokens do §E em kits.css) */
:root {
  --bg: #06111F; --fg: #ECEEF2; --acento: #E9B44C; --mudo: rgba(236,238,242,.64);
  --sup: #0B1B33; --linha: rgba(236,238,242,.12); --fita: #1E8CE1;
  --display: "Space Grotesk", system-ui, sans-serif; --texto: "Inter", system-ui, sans-serif;
  --secao: clamp(64px, 10vw, 140px); --margem: 6vw; --vh: 1vh; --seg: calc(var(--vh) * 300); --nav: 64px;
}
@supports (height: 100dvh) { :root { --vh: 1dvh; } }   /* o esqueleto mede em dvh; vh é só a reserva */
* { box-sizing: border-box; }
html { background: var(--bg); }
body { font-family: var(--texto); font-size: 1rem; line-height: 1.55; color: var(--fg); }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
em.am-acento { font-style: normal; }
.num { font-variant-numeric: tabular-nums; }
.pular { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--acento); color: var(--bg); padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.pular:focus { top: 12px; }

/* tipografia */
.sobrancelha { font: 500 .75rem/1.2 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: var(--acento); margin-bottom: 20px; }
h1, h2, .titulo { font-family: var(--display); font-weight: 500; letter-spacing: -.035em; line-height: 1.03; color: var(--fg); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 4.7vw, 4.7rem); }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.9rem); }
.titulo { font-size: clamp(2.2rem, 4.4vw, 4.5rem); }
.titulo--2 { font-size: clamp(1.7rem, 2.6vw, 2.7rem); letter-spacing: -.025em; line-height: 1.08; }
.sub { margin-top: 20px; font-size: 1.125rem; line-height: 1.5; color: rgba(236,238,242,.86); max-width: 34rem; }
.apoio { margin-top: 24px; font-size: 1.0625rem; color: var(--mudo); max-width: 36rem; }
.frase { font: 500 clamp(1.5rem, 2.3vw, 2.3rem)/1.18 var(--display); letter-spacing: -.025em; max-width: 34rem; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 32px; padding: 16px 26px; border-radius: 12px; background: var(--acento); color: #06111F; font: 600 .9375rem/1 var(--texto); letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px -10px rgba(233,180,76,.55); transition: transform var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); }
.btn:hover { transform: translateY(-2px); background: #F3C566; }
.btn:focus-visible, .elo:focus-visible, .nav a:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.btn--nav { margin: 0; padding: 12px 18px; border-radius: 10px; font-size: .875rem; }
.elo { font: 500 .9375rem/1 var(--texto); border-bottom: 1px solid var(--acento); padding-bottom: 4px; }
.acoes { display: flex; align-items: center; gap: 28px; margin-top: 32px; }
.acoes .btn { margin-top: 0; }

/* nav: placa própria, nunca transparente sobre texto */
.nav { --bg: #06111F; --fg: #ECEEF2; position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav); padding: 0 var(--margem); display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(6,17,31,.9); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--linha); }
.nav__marca { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1; font: 600 1rem/1 var(--display); letter-spacing: .08em; white-space: nowrap; }
.nav__acoes { flex-shrink: 0; }
.nav__marca img { height: 40px; width: auto; }
.nav__marca .nav__letreiro { height: 17px; }                  /* o letreiro é recorte do arquivo do logo, nunca redigitado */
.nav__links { display: flex; gap: 32px; font: 500 .875rem/1 var(--texto); color: rgba(236,238,242,.8); }
.nav__links a { padding: 8px 0; transition: color var(--dur-micro) var(--ease-out); }
.nav__links a:hover { color: var(--acento); }
.nav__acoes { display: flex; align-items: center; gap: 24px; }
.nav__conta { font: 500 .875rem/1 var(--texto); white-space: nowrap; }

/* a fita lateral: o fio que cresce com a página (D1) */
.fita-lateral { position: fixed; right: 0; top: var(--nav); bottom: 0; width: 4px; z-index: 90; pointer-events: none; background: rgba(236,238,242,.05); }
.fita-lateral i { display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--fita) 0%, var(--fita) 55%, var(--acento) 100%); }

/* ===== o palco contínuo (blocos 1, 2, 3) e as cenas ===== */
.jornada { position: relative; height: calc(var(--seg) * 3 + var(--vh) * 100); }
.marco { position: absolute; left: 0; width: 1px; height: calc(var(--seg) + var(--vh) * 100); pointer-events: none; }
.marco--1 { top: 0; } .marco--2 { top: var(--seg); } .marco--3 { top: calc(var(--seg) * 2); }
.cena { height: calc(var(--seg) + var(--vh) * 100); z-index: 3; }
.cena--4 { height: calc(var(--seg) + var(--vh) * 150); }
.palco { background: var(--bg); }
.plano { position: absolute; inset: 0; background-size: cover; background-position: center; }
.plano canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.plano canvas.on { opacity: 1; }
/* P03: a cena do celular fica apagada sobre o hero e acende a 97% do trilho 1, no quadro idêntico (main.js) */
.plano--acende { opacity: 0; will-change: opacity; }
.veu { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,17,31,.9) 0%, rgba(6,17,31,.62) 34%, rgba(6,17,31,0) 60%), linear-gradient(0deg, rgba(6,17,31,.55) 0%, rgba(6,17,31,0) 42%), linear-gradient(180deg, rgba(6,17,31,.6) 0, rgba(6,17,31,0) 140px); }
.cone { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: conic-gradient(from 196deg at 78% -8%, rgba(255,236,196,0) 0deg, rgba(255,236,196,.2) 16deg, rgba(255,236,196,0) 34deg); }
.apagao { position: absolute; inset: 0; pointer-events: none; background: #040B15; opacity: 0; }
.guias { position: absolute; inset: calc(var(--nav) + 20px) 28px 20px 28px; pointer-events: none; }
.guias i, .cruzes i { position: absolute; width: 13px; height: 13px; opacity: .5;
  background: linear-gradient(var(--fg), var(--fg)) center/100% 1px no-repeat, linear-gradient(var(--fg), var(--fg)) center/1px 100% no-repeat; }
.guias i:nth-child(1), .cruzes i:nth-child(1) { left: 0; top: 0; } .guias i:nth-child(2), .cruzes i:nth-child(2) { right: 0; top: 0; }
.guias i:nth-child(3), .cruzes i:nth-child(3) { left: 0; bottom: 0; } .guias i:nth-child(4), .cruzes i:nth-child(4) { right: 0; bottom: 0; }

.beat { position: absolute; left: var(--margem); bottom: 11vh; width: min(41rem, 44vw); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.beat--hero, #b-cartao { opacity: 1; pointer-events: auto; }
.beat--fim { bottom: 14vh; }
#b-fluida .frase { max-width: 26rem; }
.fim__logo { display: block; height: clamp(72px, 13vh, 128px); width: auto; margin-bottom: 24px; transform-origin: left bottom; will-change: transform; }

/* no desktop os beats não repetem a mesma composição: o do aplicativo sobe para o alto com o título maior,
   o do cartão vai para a zona vazia da direita, com um véu próprio */
@media (min-width: 821px) {
  #b-app { bottom: auto; top: calc(var(--nav) + 12vh); width: min(52rem, 52vw); }
  #b-app h2 { font-size: clamp(3rem, 6.2vw, 6.4rem); letter-spacing: -.04em; line-height: .98; }
  #b-cartao { left: auto; right: calc(var(--margem) + 2vw); width: min(30rem, 34vw); }
  #b-cartao::before { content: ""; position: absolute; inset: -18% -24%; z-index: -1; background: radial-gradient(closest-side, rgba(6,17,31,.78), rgba(6,17,31,0)); }
  /* a maquininha: o beat mora na zona vazia do f0066, no alto à esquerda, acima da curva da fita, com o véu da Ficha */
  #b-maq { bottom: auto; top: calc(var(--nav) + 8vh); width: min(36rem, 40vw); }
  #b-maq::before { content: ""; position: absolute; inset: -20% -30% -20% calc(var(--margem) * -1); z-index: -1; background: linear-gradient(90deg, rgba(6,17,31,.86) 0%, rgba(6,17,31,.6) 55%, rgba(6,17,31,0) 100%); }
}

/* ===== o leque das três telas (C19) ===== */
.leque-wrap { position: absolute; inset: 0; padding: var(--nav) var(--margem) 0; display: grid; grid-template-columns: 36% 1fr; align-items: center; opacity: 0; pointer-events: none; }
.leque-texto { position: relative; z-index: 2; opacity: 0; }
.legendas { margin-top: 36px; display: grid; gap: 16px; max-width: 26rem; }
.legendas li { padding-left: 18px; border-left: 2px solid var(--linha); font-size: .9375rem; line-height: 1.45; color: var(--mudo); opacity: .28; transition: opacity var(--dur-reveal) var(--ease-out), border-color var(--dur-reveal) var(--ease-out); }
.legendas li b { display: block; color: var(--fg); font-weight: 600; margin-bottom: 2px; }
.legendas li.on { opacity: 1; border-color: var(--acento); }
.nota { margin-top: 28px; font-size: .75rem; letter-spacing: .02em; color: rgba(236,238,242,.6); }
.leque-palco { position: relative; height: 100%; }
.leque-esc { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform; }
.leque { position: relative; width: 21em; height: 44em; font-size: .8rem; }
.fone { inset: 0; border-radius: 3.1em; padding: .55em; background: linear-gradient(160deg, #3a4250, #12161d 40%, #2a303b);
  box-shadow: 1.2em 2.6em 4.5em -1.2em rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.3); }
.fone--lado { opacity: 0; }
.fone--lado .tela { filter: brightness(.8); }
.tela { position: relative; height: 100%; border-radius: 2.6em; overflow: hidden; padding: 1.2em 1.4em 5.2em; background: linear-gradient(180deg, #061427 0%, #0A1F3D 100%); color: #ECEEF2; display: flex; flex-direction: column; font-family: var(--texto); line-height: 1.3; }
.tela__status { display: flex; justify-content: space-between; align-items: center; font-size: .95em; font-weight: 600; margin-bottom: 1.4em; }
.tela__status i { width: 2.4em; height: .9em; border-radius: .3em; border: 1px solid rgba(236,238,242,.6); }
.tela__topo { display: flex; align-items: center; gap: .6em; margin-bottom: 1.8em; }
.tela__topo img { height: 2.8em; width: auto; }
.tela__topo .tela__letreiro { height: 1.15em; }
.tela__mudo { font-size: 1em; color: rgba(236,238,242,.66); }
.saldo { display: flex; align-items: center; justify-content: space-between; font: 600 2.2em/1.2 var(--display); letter-spacing: -.02em; margin: .15em 0 .8em; }
.saldo svg { width: .8em; height: .8em; fill: none; stroke: rgba(236,238,242,.7); stroke-width: 1.6; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin-bottom: 1.6em; }
.tres div { display: grid; justify-items: center; gap: .5em; padding: .9em .2em; border-radius: 1em; background: rgba(236,238,242,.06); border: 1px solid rgba(233,180,76,.35); font-size: .95em; font-weight: 500; }
.tres svg { width: 1.7em; height: 1.7em; fill: none; stroke: var(--acento); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.linha-mov { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6em; font-size: 1.05em; }
.linha-mov span { font-size: .85em; color: var(--acento); }
.mov { display: grid; gap: .15em; }
.mov li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8em; padding: .7em 0; border-bottom: 1px solid rgba(236,238,242,.08); }
.mov b { display: block; font-size: 1em; font-weight: 500; } .mov small { font-size: .82em; color: rgba(236,238,242,.6); }
.mov em { font-style: normal; font-size: .95em; font-weight: 500; white-space: nowrap; } .mov em.pos { color: var(--acento); }
.pt { width: 1.9em; height: 1.9em; border-radius: .6em; background: rgba(236,238,242,.08); border: 1px solid rgba(236,238,242,.14); } .pt--e { border-color: rgba(233,180,76,.6); }
.menu { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 1.1em .6em 1.7em; background: rgba(4,12,24,.92); border-top: 1px solid rgba(236,238,242,.1); font-size: .85em; text-align: center; color: rgba(236,238,242,.6); }
.menu .on { color: var(--acento); font-weight: 600; }
.tela--acesso { align-items: stretch; }
.tela__logo { height: 7.5em; width: auto; align-self: center; margin: .6em 0 1.6em; }
.cartela { flex: 1; margin: 0 -.5em; padding: 1.6em 1.2em; border-radius: 1.4em; background: rgba(236,238,242,.05); border: 1px solid rgba(236,238,242,.1); display: flex; flex-direction: column; }
.tela__titulo { font: 600 1.9em/1.1 var(--display); letter-spacing: -.02em; margin-bottom: .3em; }
.campo { margin-top: .9em; padding: .95em 1em; border-radius: .9em; border: 1px solid rgba(236,238,242,.16); color: rgba(236,238,242,.6); font-size: .95em; }
.tela__botao { margin-top: 1.1em; padding: 1.05em; border-radius: .9em; background: var(--acento); color: #06111F; font-weight: 600; text-align: center; font-size: 1em; }
.aviso { margin-top: 1.1em; padding: .9em 1em; border-radius: .9em; border: 1px solid rgba(236,238,242,.12); font-size: .85em; color: rgba(236,238,242,.74); }
.aviso b { display: block; color: var(--acento); margin-bottom: .2em; }
.tela__link { margin-top: auto; padding-top: 1em; text-align: center; color: var(--acento); font-weight: 600; font-size: .95em; }
.tela--extrato .tela__titulo { margin-bottom: .8em; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-bottom: 1.3em; }
.duo div { padding: .9em 1em; border-radius: 1em; background: rgba(236,238,242,.06); border: 1px solid rgba(236,238,242,.1); }
.duo b { display: block; font: 600 1.35em/1.3 var(--display); }
.tela__rotulo { font-size: .8em; letter-spacing: .14em; text-transform: uppercase; color: rgba(236,238,242,.6); margin: .5em 0 .1em; }

/* o fio da fita (P18): só scaleY */
.fio { width: 6px; border-radius: 3px; transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--fita) 0%, var(--fita) 60%, var(--acento) 100%); box-shadow: 0 0 18px rgba(30,140,225,.35); }
.fio--leque { position: absolute; left: calc(50% - 3px); bottom: 0; height: calc(50% - 17.6rem - 10px); }
.fio-rota { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 9px rgba(30,140,225,.35)); }
.fio-rota path { fill: none; stroke-width: 6; stroke-linecap: butt; }
.fio--trilho { position: absolute; left: var(--margem); background: var(--fita);
  top: calc((var(--vh) * 100 - var(--nav) - var(--ph)) / -2 - var(--nav)); height: calc((var(--vh) * 100 - var(--nav) - var(--ph)) / 2 + var(--nav) + var(--ph) * var(--ly)); }
.fio--seg { margin-top: 40px; height: max(22vh, calc(100vh - var(--nav) - 9vh - 27rem)); }   /* o fio desce a coluna fixa até o pé da tela */

/* ===== capítulos ===== */
.capitulo { position: relative; padding: var(--secao) var(--margem); background: var(--bg); }
.cruzes { position: absolute; inset: 28px; pointer-events: none; border: 1px solid rgba(236,238,242,.06); }
.cruzes i { margin: -7px; }
.sobre { text-align: center; padding-top: calc(var(--secao) * .5 + 6vh);   /* o título aparece junto com o sobrancelha, logo depois da dobra do fio */ padding-bottom: calc(var(--sobe) + 7vh); --sobe: 22vh;
  background: radial-gradient(60% 50% at 50% 0%, rgba(30,140,225,.12), rgba(6,17,31,0) 70%), linear-gradient(180deg, var(--bg) 0, var(--bg) calc(100% - var(--sobe)), rgba(6,17,31,0) 100%); }
.sobre .cruzes { bottom: calc(var(--sobe) + 28px); }
.sobre__miolo { max-width: 60rem; margin: 0 auto; }
.sobre .titulo { max-width: 48rem; margin: 0 auto; }
.manifesto { margin: 56px auto 0; max-width: 52rem; text-align: left; font: 500 clamp(1.5rem, 2.5vw, 2.5rem)/1.22 var(--display); letter-spacing: -.02em; }
.sobre .apoio { margin: 40px auto 0; max-width: 52rem; padding-right: min(18rem, 30%); text-align: left; }   /* só o título fica centrado */

/* ===== bloco 5 · os gestos da fita ===== */
/* a linha da fita passa a --ly da altura do painel (--ph); o texto alterna abaixo e acima dela */
/* o invólucro tem 400: a seção .gestos (280) faz a viagem inteira, que termina em 'bottom bottom' (AM.trilho), e depois
   fica presa pelo próprio pé (sticky) nos 120 finais, enquanto a cena 3 sobe por cima da quinta ficha parada (P12) */
.pico { position: relative; z-index: 1; height: calc(var(--vh) * 400); margin-top: calc(var(--sobe) * -1); --sobe: 22vh; }
.gestos { position: sticky; top: calc(var(--vh) * -180); z-index: 1; background: var(--bg); height: calc(var(--vh) * 280); --d: 0; --t: 1; --fw: 38vw; --ph: min(calc(var(--vh) * 80), 48rem); --ly: .5; }
.gestos .am-htrilho__palco { background: linear-gradient(180deg, var(--bg) 0%, #081729 50%, var(--bg) 100%); padding-top: var(--nav); }
.gestos .am-htrilho__faixa { gap: 0; padding: 0; align-items: stretch; }
.painel, .ficha { position: relative; flex: 0 0 auto; padding: 0 3vw; display: flex; flex-direction: column; justify-content: flex-start; height: var(--ph); }
.ficha > .sobrancelha { margin-top: calc(var(--ph) * var(--ly) + var(--fw) * .21 + 2vh); }
.ficha--cima > .sobrancelha { margin-top: 1vh; }
.painel--abre { width: 46vw; padding-left: calc(var(--margem) + 3vw); justify-content: flex-start; }
.abre__topo { position: absolute; left: calc(var(--margem) + 3vw); right: 3vw; bottom: calc(var(--ph) * (1 - var(--ly)) + var(--fw) * .045 + 4vh); }
.painel--abre .titulo { max-width: 34rem; }
.painel--abre .apoio { max-width: 30rem; margin-top: calc(var(--ph) * var(--ly) + var(--fw) * .045 + 4vh); }
.painel--fecha { width: 40vw; align-items: flex-start; padding-right: var(--margem); padding-top: calc(var(--ph) * var(--ly) + var(--fw) * .045 + 4vh); }
.painel--fecha .btn { margin-top: 24px; }
.ficha { width: var(--fw); border-left: 1px solid var(--linha); }
.ficha h3 { font: 500 clamp(1.5rem, 2.2vw, 2.2rem)/1.08 var(--display); letter-spacing: -.025em; }
.ficha p:last-child { margin-top: 14px; color: var(--mudo); max-width: 26rem; }
.ficha .sobrancelha { margin-bottom: 14px; }
.gesto { position: absolute; left: 0; top: calc(var(--ph) * var(--ly) - var(--fw) * .25); width: var(--fw); height: calc(var(--fw) * 220 / 480); overflow: visible; }
.tira { position: absolute; top: calc(var(--ph) * var(--ly) - var(--fw) * .045); height: calc(var(--fw) * .09); transform-origin: left; transform: scaleX(calc(1 - var(--d)));
  background: linear-gradient(90deg, #E9B44C 0%, #F8DE96 22%, #B8842A 46%, #F1C56B 72%, #E9B44C 100%); box-shadow: 0 18px 22px -6px rgba(0,0,0,.5); }
.tira::after { content: ""; position: absolute; inset: calc(var(--fw) * .0085) 0; box-shadow: inset 0 2px 0 rgba(255,255,255,.3);
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 40%, rgba(3,16,31,0) 60%, rgba(3,16,31,.42) 100%), linear-gradient(90deg, #1E8CE1 0%, #63B7F6 22%, #1466B0 46%, #3FA2EE 72%, #1E8CE1 100%); }
.painel--abre .tira { left: var(--margem); right: 0; transform: scaleX(var(--t)); }
.painel--fecha .tira { left: 0; right: 62%; }
.painel--fecha .tira::after { display: none; }
.gesto path, .gesto rect { fill: none; stroke-linecap: butt; stroke-linejoin: round; vector-effect: none; }
/* a fita tem corpo: borda ouro, face azul, dorso em sombra, faixa de luz no alto e filete de brilho */
.g-sombra { stroke: rgba(0,0,0,.55); stroke-width: 38; stroke-dasharray: 1; stroke-dashoffset: var(--d); transform: translate(0, 30px); filter: blur(12px); }
.g-ouro { stroke-width: 43; stroke-dasharray: 1; stroke-dashoffset: var(--d); }
.g-azul { stroke-width: 35; stroke-dasharray: 1; stroke-dashoffset: var(--d); }
.g-dorso { stroke: rgba(3,16,31,.42); stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: var(--d); transform: translate(0, 11px); }
.g-alto { stroke: rgba(255,255,255,.2); stroke-width: 9; stroke-dasharray: 1; stroke-dashoffset: var(--d); transform: translate(0, -8px); }
.g-face { stroke-width: 35; opacity: calc(1 - var(--d)); }   /* a face ouro aparece na volta do laço */
.gesto .g-face--dorso { stroke: rgba(60,36,4,.4); stroke-width: 10; transform: translate(0, 11px); }
.g-brilho { stroke: rgba(255,250,236,.85); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: var(--d); transform: translate(0, -17px); }   /* o filete de luz na borda de cima da face azul */
.g-luz { stroke: rgba(255,246,224,.5); stroke-width: 31; stroke-dasharray: .07 .93; opacity: calc(1 - var(--d)); mix-blend-mode: screen; filter: blur(3px); animation: pulso 3s linear infinite paused; }   /* C12: o pulso, visível */
.gesto { filter: drop-shadow(0 14px 12px rgba(0,0,0,.42)); }   /* a sombra deslocada do metal sobre a mesa */
.viva .g-luz { animation-play-state: running; }               /* o pulso só corre com o trilho em tela (main.js) */
@keyframes pulso { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* a largura: a fita abre de frente para quem olha, com fios de cetim em leque */
.g-largo { transform-origin: 240px 120px; transform: scaleY(calc(.24 + .76 * (1 - var(--d)))); opacity: calc((1 - var(--d)) * 3); }
.gesto .g-largo__o, .gesto .g-largo__a, .gesto .g-largo__v { stroke: none; }
.gesto .g-largo__s { fill: rgba(0,0,0,.55); filter: blur(12px); }
.gesto .g-largo__f { stroke: rgba(255,255,255,.16); stroke-width: 1.2; }
.gesto .g-largo__b { stroke: rgba(255,255,255,.5); stroke-width: 2; }
.gesto .g-tela { fill: rgba(11,27,51,.72); stroke: rgba(236,238,242,.55); stroke-width: 2; }
.gesto .g-tela__brilho { stroke: var(--fita); stroke-width: 35; opacity: calc((1 - var(--d)) * .55); }
/* a virada: primeiro chega a face azul, depois a torção, depois segue a face ouro */
.ficha--virada .g-esq { stroke-dashoffset: clamp(0, calc((var(--d) - .55) / .45), 1); }
.ficha--virada .g-dir { stroke-dashoffset: clamp(0, calc(var(--d) / .4), 1); }
.gesto .g-vira { opacity: clamp(0, calc((.58 - var(--d)) / .14), 1); }
.gesto .g-vira path { stroke: none; }
.gesto .g-vira__luz { stroke: rgba(255,255,255,.6); stroke-width: 2; }
.gesto .g-vira__breu { stroke: rgba(3,16,31,.5); stroke-width: 3; }

/* ===== cenas 3 e 4 ===== */
.cena--3 { margin-top: calc(var(--vh) * -100); }
.cena--4 { margin-top: calc(var(--vh) * -100); z-index: 5; background: var(--bg); }   /* P01: a cena sobe por cima da prancha de Segmentos, as duas coincidem */
.quadro { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* o cartão empresarial: o arquivo do logo e a palavra, assentados no cartão do primeiro quadro por matrix3d (main.js) */
.cartao-marca { position: absolute; left: 0; top: 0; width: 856px; height: 540px; transform-origin: 0 0; opacity: 0; }
.cartao-marca__emblema { position: absolute; left: 58px; top: 44px; height: 112px; width: auto; }
.cartao-marca__letreiro { position: absolute; left: 190px; top: 80px; height: 40px; width: auto; }
.cartao-marca b { position: absolute; left: 64px; bottom: 54px; font: 500 30px/1 var(--display); letter-spacing: .24em; color: #D9B15C; }
.tela-maq { position: absolute; left: 0; top: 0; width: 300px; height: 620px; transform-origin: 0 0; opacity: 0; display: flex; flex-direction: column; align-items: center; padding: 52px 30px 0; gap: 22px; }
.tela-maq img { height: 112px; width: auto; margin-bottom: 26px; }
.tela-maq span { width: 100%; padding: 26px 0; text-align: center; border-radius: 18px; border: 2px solid rgba(233,180,76,.6); background: rgba(6,17,31,.42); font: 600 30px/1 var(--display); letter-spacing: .01em; color: var(--fg); }
.tela-maq span:first-of-type { background: var(--acento); color: #06111F; border-color: var(--acento); }
.am-dados svg path { stroke: var(--acento); stroke-width: 2; }
.am-dado { --bg: #06111F; --fg: #ECEEF2; font: 600 .8125rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; margin-top: -19px; border-radius: 8px; border-color: rgba(233,180,76,.5); white-space: nowrap; }
.prancha { position: absolute; inset: 0; background: var(--bg); }
.prancha--cena { background: rgba(6,17,31,.78); }   /* papel vegetal: os anéis já se adivinham sob o traço */
.prancha svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr { fill: none; stroke: rgba(236,238,242,.7); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tr ellipse { fill: none; }
.tr--fita { stroke: var(--acento); stroke-width: 2; }
.tr--fino { stroke: rgba(236,238,242,.16); stroke-width: 1; stroke-dasharray: 4 8; }
.prancha--faixa { position: relative; inset: auto; height: calc(var(--vh) * 100); margin: var(--secao) calc(var(--margem) * -1) calc(var(--secao) * -1); border-top: 1px solid var(--linha); overflow: hidden; }
.prancha__legenda { position: absolute; left: 50%; bottom: 14%; margin: 0; color: var(--mudo); }

/* ===== bloco 7 · Segmentos ===== */
.segmentos { z-index: 4; }
.segmentos__grade { max-width: 84rem; margin: 0 auto; gap: 7vw; }
.segmentos .am-split__fixa { top: calc(var(--nav) + 9vh); }
.segmentos__rola { padding-top: 8px; }
.eixos { margin-top: 72px; display: grid; gap: 0; }
.eixos li { padding: 44px 0 48px; border-top: 1px solid var(--linha); }
.eixos li .sobrancelha { display: block; margin-bottom: 16px; }
.eixos h4 { font: 500 clamp(1.5rem, 2.3vw, 2.3rem)/1.1 var(--display); letter-spacing: -.025em; max-width: 30rem; }
.eixos p { margin-top: 14px; color: var(--mudo); max-width: 30rem; font-size: 1.0625rem; }

/* ===== rodapé: a placa que sobe (P12) ===== */
.rodape { z-index: 6; margin-top: -40vh; background: var(--sup); padding: 0 var(--margem) 48px; box-shadow: 0 -30px 60px -20px rgba(0,0,0,.55); }
.rodape__fita { height: 6px; margin: 0 calc(var(--margem) * -1); background: linear-gradient(90deg, var(--fita) 0%, var(--fita) 48%, var(--acento) 52%, var(--acento) 100%); }
.rodape__topo { display: grid; grid-template-columns: auto 1fr; gap: 6vw; align-items: center; padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--linha); }
.rodape__logo { width: clamp(180px, 22vw, 320px); height: auto; }
.rodape__frase { font: 500 clamp(1.5rem, 2.4vw, 2.4rem)/1.16 var(--display); letter-spacing: -.025em; max-width: 40rem; }
.rodape__colunas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 48px 0; border-bottom: 1px solid var(--linha); }
.rodape__colunas li { padding: 6px 0; font-size: .9375rem; color: rgba(236,238,242,.84); }
.rodape__colunas a { border-bottom: 1px solid transparent; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.rodape__colunas a:hover { color: var(--acento); border-color: var(--acento); }
.rodape__colunas .redes { padding: 6px 0; font-size: .75rem; letter-spacing: .04em; color: rgba(236,238,242,.6); }   /* rótulos sem endereço: não parecem links */
.rodape__legal { padding-top: 40px; display: grid; gap: 12px; max-width: 44rem; font-size: .8125rem; line-height: 1.6; color: rgba(236,238,242,.62); }
.rodape__direitos { margin-top: 12px; color: rgba(236,238,242,.8); }

/* sem movimento: o trilho vira lista e os beats ficam à vista */
.pico:has(.sem-trilho) { height: auto; }
.sem-trilho.gestos { position: relative; top: auto; height: auto; --ph: 34rem; }
.sem-trilho .am-htrilho__palco { position: static; height: auto; padding: var(--secao) 0; }
.sem-trilho .am-htrilho__faixa { flex-wrap: wrap; row-gap: 64px; }
.sem-trilho .painel, .sem-trilho .ficha { width: 50vw; }
.sem-trilho .fio--trilho { top: 0; height: calc(var(--ph) * var(--ly)); }

/* ===== celular ===== */
@media (max-width: 820px) {
  :root { --seg: calc(var(--vh) * 200); --margem: 20px; --nav: 56px; }
  .nav__links, .nav__conta { display: none; }
  .nav__marca img { height: 34px; } .nav__marca .nav__letreiro { height: 15px; }
  .btn--nav { padding: 11px 14px; font-size: .8125rem; }
  .fita-lateral { width: 3px; }
  .guias { display: none; }
  /* o quadro ocupa 86dvh e o texto encosta na base da imagem (56dvh): sem faixa escura vazia entre os dois */
  .plano { inset: 0 auto auto 0; height: 86dvh; width: calc(86dvh * 16 / 9); transform: translate3d(calc((100vw - 86dvh * 16 / 9) * var(--foco, .7)), 0, 0); will-change: transform; }
  .veu { background: linear-gradient(180deg, rgba(6,17,31,.55) 0, rgba(6,17,31,0) 90px, rgba(6,17,31,0) 44dvh, rgba(6,17,31,.84) 56dvh, rgba(6,17,31,.9) 76dvh, var(--bg) 86dvh, var(--bg) 100%); }
  .cone { display: none; }
  .beat { left: 20px; right: 20px; width: auto; top: 56dvh; bottom: auto; }
  .beat--hero, .beat--fim { top: auto; bottom: 5dvh; }
  #b-fluida .frase { max-width: none; }
  .fim__logo { height: 64px; margin-bottom: 16px; }
  .prancha__legenda { top: 12%; bottom: auto; }
  h1 { font-size: clamp(2.1rem, 9.4vw, 2.7rem); } h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .titulo { font-size: clamp(2rem, 8.8vw, 2.6rem); } .titulo--2 { font-size: 1.6rem; }
  .sub { font-size: 1rem; margin-top: 14px; } .frase { font-size: 1.5rem; }
  .btn { margin-top: 22px; }
  .sobrancelha { margin-bottom: 14px; font-size: .6875rem; }
  .leque-wrap { display: block; padding: calc(var(--nav) + 18px) 20px 0;   /* véu azul-noite sob o título: o ouro nunca cai no azul claro da tela */
    background: linear-gradient(180deg, rgba(6,17,31,.86) 0, rgba(6,17,31,.86) calc(var(--nav) + 96px), rgba(6,17,31,0) calc(var(--nav) + 160px)); }
  .leque-texto { position: static; }
  .leque-texto h2 { font-size: 1.7rem; }
  .ficha > .sobrancelha, .ficha--cima > .sobrancelha { margin-top: calc(var(--ph) * var(--ly) + var(--fw) * .21 + 12px); }
  .painel--fecha { padding-top: calc(var(--ph) * var(--ly) + var(--fw) * .045 + 24px); }
  .legendas { position: absolute; left: 20px; right: 20px; top: calc(var(--nav) + 112px + 44 * min(.7rem, 1.2dvh) + 16px); margin: 0; display: block; max-width: none; }   /* logo abaixo do aparelho */
  .legendas li { position: absolute; left: 0; right: 0; top: 0; opacity: 0; font-size: .875rem; }
  .legendas li.on { opacity: 0; } .legendas li.atual { opacity: 1; border-color: var(--acento); }
  .nota { position: absolute; left: 20px; right: 20px; bottom: 14px; margin: 0; font-size: .6875rem; }
  .leque-palco { position: absolute; left: 0; right: 0; top: calc(var(--nav) + 112px); bottom: 0; height: auto; }
  .leque-esc { place-items: start center; transform-origin: 50% 30%; }
  .leque { font-size: min(.7rem, 1.2dvh); }
  .fio--leque { display: none; }
  .cruzes { inset: 12px; }
  .sobre { --sobe: 0px; padding: calc(var(--secao) + 40px) 20px var(--secao) 44px; text-align: left; }
  .sobre .cruzes { bottom: 12px; }
  .manifesto { margin-top: 36px; font-size: 1.5rem; }
  .pico { height: auto; margin-top: 0; }
  .gestos { position: relative; top: auto; height: auto; padding: 0 0 calc(var(--secao) * .6); --fw: 82vw; --ph: 30rem; --ly: .36; }
  .gestos .am-htrilho__palco { display: block; padding-top: 0; background: none; }
  .gestos .am-htrilho__faixa { padding: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .painel, .ficha { padding: 0 20px; }
  .painel--abre { width: 88vw; padding-left: 44px; } .ficha { width: 82vw; } .painel--fecha { width: 82vw; padding-right: 20px; }
  .abre__topo { left: 44px; right: 16px; bottom: calc(var(--ph) * (1 - var(--ly)) + var(--fw) * .045 + 18px); }
  .painel--abre .titulo { font-size: 1.8rem; }
  .painel--abre .apoio { margin-top: calc(var(--ph) * var(--ly) + var(--fw) * .045 + 20px); font-size: 1rem; }
  .painel--abre .tira { left: 20px; }
  .fio--trilho { left: 20px; top: 0; height: calc(var(--ph) * var(--ly)); }
  .cena--3 { margin-top: 0; }
  .am-dado { font-size: .6875rem; padding: 9px 11px; margin-top: -15px; }
  .segmentos__grade { gap: 48px; } .fio--seg { height: 72px; margin-top: 28px; }
  .eixos { margin-top: 40px; } .eixos li { padding: 32px 0; }
  .rodape { margin-top: -24vh; }
  .rodape__topo { grid-template-columns: 1fr; gap: 28px; }
  .rodape__colunas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .nav { gap: 12px; }
  .nav__marca { gap: 8px; } .nav__marca img { height: 30px; } .nav__marca .nav__letreiro { height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-luz { animation: none; opacity: 0; }
  .beat { transition: opacity .4s; }
}