/* pw7os.com (pedido 154): a apresentação pública do PW7 OS. Identidade nova: Nimbus, preto e branco, azul #0951C7, cantos
   arredondados, 7OS. Cada seção define as suas cores (claro, cinza, escuro); as cenas SVG usam essas variáveis. As cenas só
   animam quando entram na tela (.rodando, pelo pw7os.js); sem isso, e com "reduzir movimento", mostram o estado final. */
@font-face { font-family: "Nimbus"; src: url("/assets/fontes/nimbus-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nimbus"; src: url("/assets/fontes/nimbus-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fontes/geist-mono-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --marca: #0951c7;
  --marca-clara: #6f9bff;
  --ok: #1f9d55;
  --raio: 14px;
  --sans: "Nimbus", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --suave-mov: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--sans); background: #000; color: #f5f5f7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
.lead, .texto-largo { text-wrap: pretty; }
.pular { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 8px 14px; border-radius: 999px; }
.pular:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--marca-clara); outline-offset: 3px; border-radius: 6px; }

/* cores por seção */
.claro { --bg: #ffffff; --fg: #0a0a0b; --mudo: #6e6e73; --linha: #e6e6ea; --papel: #ffffff; --suave: #f3f3f5; --janela: #ffffff; --tinta: #1d1d1f; --tinta-leve: #d9d9de; --destaque-txt: var(--marca); background: var(--bg); color: var(--fg); }
.claro.cinza { --bg: #f6f6f7; --janela: #ffffff; }
.escuro { --bg: #000000; --fg: #f5f5f7; --mudo: #8e8e93; --linha: rgb(255 255 255 / .12); --papel: #111113; --suave: #1c1c1f; --janela: #0b0b0c; --tinta: #e8e8ea; --tinta-leve: #3a3a3f; --destaque-txt: var(--marca-clara); background: var(--bg); color: var(--fg); }

/* topo fixo em pílula */
.topo { position: fixed; inset: 14px 0 auto; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.pilula { pointer-events: auto; width: 100%; max-width: 1080px; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 18px; border-radius: 999px;
  background: rgb(20 20 22 / .72); border: 1px solid rgb(255 255 255 / .1); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); }
.marca img { width: 62px; height: auto; }
.links { list-style: none; display: flex; gap: 6px; margin: 0 auto; padding: 0; }
.links a { display: block; padding: 8px 12px; border-radius: 999px; font-size: 14px; color: #c7c7cc; text-decoration: none; transition: color .2s, background .2s; }
.links a:hover { color: #fff; background: rgb(255 255 255 / .06); }
.acoes { display: flex; gap: 6px; margin-left: auto; }
.links + .acoes { margin-left: 0; }
.so-estreito { display: none; }

.botao { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font: 500 14.5px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: transform .2s var(--suave-mov), background .2s, color .2s, border-color .2s; }
.botao:active { transform: scale(.97); }
.botao.grande { height: 50px; padding: 0 24px; font-size: 16px; }
.botao.claro { background: #fff; color: #0a0a0b; }
.botao.claro:hover { background: #e9e9ec; }
.botao.escuro { background: #0a0a0b; color: #fff; }
.botao.escuro:hover { background: #2a2a2e; }
.botao.fantasma { color: #f5f5f7; border: 1px solid rgb(255 255 255 / .18); }
.botao.fantasma:hover { border-color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .05); }
.ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* abertura */
.abertura { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 120px 20px 72px; text-align: center; }
.fundo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fundo .luz { position: absolute; inset: 0; transform-origin: 100% 0; background: radial-gradient(ellipse 34% 48% at 97% 2%, rgb(70 120 255 / .5), transparent 72%), radial-gradient(ellipse 46% 42% at 104% 44%, rgb(70 120 255 / .22), transparent 70%); animation: respira-luz 26s ease-in-out infinite; }
.fundo .planeta { position: absolute; width: 250vmax; height: 250vmax; left: calc(20vw - 125vmax); top: -20vh; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #0a0a0b 0%, #0a0a0b 99.2%, rgb(70 120 255 / .35) 100%); box-shadow: 0 0 120px rgb(70 120 255 / .18); animation: respira-planeta 26s ease-in-out infinite; }
@media (max-width: 640px) { .fundo .planeta { width: 284vh; height: 284vh; left: calc(-60vw - 142vh); top: -2vh; } }
@keyframes respira-luz { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes respira-planeta { 0%, 100% { opacity: .82; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1.2vh); } }
.abertura-conteudo { position: relative; max-width: 880px; display: flex; flex-direction: column; align-items: center; }
.cortex-ola { margin-bottom: 18px; }
.selo { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .04); font-size: 13.5px; color: #c7c7cc; }
.selo span { padding: 4px 10px; border-radius: 999px; background: #fff; color: #0a0a0b; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
h1 { margin-top: 22px; font-size: clamp(38px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -.035em; font-weight: 400; }
.apagado { color: color-mix(in srgb, currentColor 46%, transparent); }
.lead { margin-top: 22px; max-width: 620px; font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: color-mix(in srgb, currentColor 72%, transparent); }
.botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.rodape-abertura { margin-top: 40px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #6e6e73; }

/* blocos */
section { scroll-margin-top: 84px; }
.largura { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.rotulo { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border: 1px solid var(--linha); border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mudo); }
.rotulo i { width: 8px; height: 8px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); }
h2 { margin-top: 18px; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -.03em; font-weight: 400; }
h3 { font-size: 18px; letter-spacing: -.01em; font-weight: 700; }
.texto p:not(.rotulo), .texto-largo, .tres p, .numerada p { font-size: 17px; line-height: 1.6; color: color-mix(in srgb, var(--fg) 70%, transparent); }
.texto p:not(.rotulo) { margin-top: 16px; max-width: 470px; }
.texto .rotulo { margin-top: 0; }
.texto-largo { margin-top: 18px; max-width: 720px; }
.centro { margin-left: auto; margin-right: auto; text-align: center; }

.indice { padding: 120px 0 72px; }
.mapa { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linha); }
.mapa li { border-bottom: 1px solid var(--linha); }
.mapa li:not(:nth-child(4n)) { border-right: 1px solid var(--linha); }
.mapa a { display: flex; align-items: baseline; gap: 12px; padding: 22px 18px; font-size: 19px; text-decoration: none; transition: background .2s; }
.mapa a:hover { background: var(--suave); }
.mapa span { font-family: var(--mono); font-size: 11px; color: var(--mudo); }

.recurso { padding: 104px 0; }
.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 64px; align-items: center; }
.duas.invertida { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.itens { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.itens li { padding: 7px 12px; border-radius: 999px; background: var(--suave); font-size: 13.5px; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.cabeca-centro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cabeca-centro h2 { max-width: 820px; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.tres > div { padding-top: 18px; border-top: 1px solid var(--linha); }
.tres p { margin-top: 8px; font-size: 15.5px; }
.numerada { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--linha); }
.numerada li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--linha); }
.numerada li > span { font-family: var(--mono); font-size: 11px; color: var(--mudo); padding-top: 4px; }
.numerada p { margin-top: 4px; font-size: 15.5px; }

.faixa-cta { padding: 0; }
.faixa { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 30px; padding-bottom: 30px; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.faixa p { font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -.015em; }
.faixa p.faixa-sub { margin-top: 6px; font-size: 15px; letter-spacing: 0; color: var(--mudo); }

.grade-pontos { background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / .07) 1px, transparent 0); background-size: 22px 22px; }
.cortex-secao { overflow: hidden; }
.cortex-grande { margin-bottom: 22px; }

.fecho { position: relative; overflow: hidden; padding: 150px 0; text-align: center; }
.fecho .planeta { top: 32vh; }
.fecho-conteudo { position: relative; display: flex; flex-direction: column; align-items: center; }
.fecho h2 { font-size: clamp(36px, 5.4vw, 64px); }

.rodape { background: #000; color: #8e8e93; border-top: 1px solid rgb(255 255 255 / .08); }
.rodape-linha { display: flex; align-items: center; gap: 28px; padding-top: 30px; padding-bottom: 30px; font-size: 14px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }
.rodape a { text-decoration: none; color: #c7c7cc; }
.rodape a:hover { color: #fff; }

/* ---------------------------------------------------------------- cenas */
.cena { margin: 0; color: var(--fg); }
.cena svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 48px rgb(0 0 0 / .08)); }
.escuro .cena svg { filter: drop-shadow(0 24px 60px rgb(0 0 0 / .6)); }
.cena.larga { margin-top: 48px; }
.cena.media { margin: 48px auto 0; max-width: 900px; }
.cena text { font-family: var(--sans); fill: var(--fg); }
.cena .mono { font-family: var(--mono); letter-spacing: .08em; }
.cena .mudo, .cena .mudo text { fill: var(--mudo); }
.cena .mono text { font-family: var(--mono); letter-spacing: .08em; }
.cena text[fill="#fff"] { fill: #fff; }
.cena .forte { fill: var(--fg); font-weight: 700; }
.janela { fill: var(--janela); stroke: var(--linha); }
.linha { stroke: var(--linha); fill: none; }
.tracejada { stroke-dasharray: 3 4; }
.papel { fill: var(--papel); stroke: var(--linha); }
.fundo-suave { fill: var(--suave); }
.tinta { fill: var(--tinta); opacity: .86; }
.tinta-leve { fill: var(--tinta-leve); }
.tinta-inversa { fill: rgb(255 255 255 / .85); }
.balao-escuro { fill: #0a0a0b; }
.escuro .balao-escuro { fill: var(--marca); }
.destaque { fill: var(--marca); }
.destaque-borda { stroke: var(--marca); stroke-width: 1.2; }
.tracejada-borda { stroke-dasharray: 4 3; }
.destaque-txt { fill: var(--destaque-txt) !important; font-weight: 600; }
.ok { fill: var(--ok); }
.ok-suave { fill: color-mix(in srgb, var(--ok) 14%, transparent); }
.ok-txt { fill: var(--ok) !important; font-weight: 600; }
.traco-branco { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.traco-ok { fill: none; stroke: var(--ok); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.traco { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.caixa { fill: none; stroke: var(--tinta-leve); stroke-width: 1.2; }
.check { fill: none; stroke: var(--marca); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.assina { fill: none; stroke: var(--marca); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.assinado { fill: var(--ok) !important; font-weight: 600; }
.enche { fill: var(--marca); transform-box: fill-box; transform-origin: left center; }
.anda-funil { transform: translateX(164px); }
.gravando { fill: #e5484d; }
.onda rect, .ondas-voz rect { fill: var(--marca); transform-box: fill-box; transform-origin: center; }
.digita { fill: var(--tinta); opacity: .7; transform-box: fill-box; transform-origin: left center; }
.barras rect, .barras-caixa rect { fill: color-mix(in srgb, var(--marca) 26%, transparent); transform-box: fill-box; transform-origin: center bottom; }
.barras rect:nth-child(n+10), .barras-caixa rect:nth-child(n+7) { fill: var(--marca); }
.curva { fill: none; stroke: var(--marca); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.subida { fill: color-mix(in srgb, var(--ok) 16%, transparent); }
.ponto { fill: var(--mudo); }
.avatar { fill: var(--tinta-leve); }
.nao-lida { fill: var(--marca); }
.lido { fill: none; stroke: #9ec1ff; stroke-width: 1.2; stroke-linecap: round; }
.ao-vivo { fill: var(--ok); }
.fio { fill: none; stroke: var(--marca); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.no-caixa { transition: stroke .3s; }
.no .no-caixa { stroke: var(--marca); stroke-width: 1.4; }
.aba-marca { fill: var(--suave); stroke: var(--linha); }
.abas text { fill: var(--fg); }
.painel { opacity: 0; }
.painel[style*="--i:0"] { opacity: 1; }

/* em movimento: só quando a cena está na tela e a pessoa não pediu menos movimento */
@media (prefers-reduced-motion: no-preference) {
  .rodando { --T: 8s; }

  /* comercial */
  .rodando .anda-funil { animation: anda-funil var(--T) var(--suave-mov) infinite both; }
  .rodando .selo-ok { animation: aparece-tarde var(--T) var(--suave-mov) infinite both; transform-box: fill-box; transform-origin: center; }
  .rodando .assina { animation: desenha-assina var(--T) ease-in-out infinite both; }
  .rodando .assinado { animation: surge-assinado var(--T) ease infinite both; }
  .rodando .enche { animation: enche var(--T) var(--suave-mov) infinite both; }

  /* operação */
  .rodando .tarefa .check { animation: marca var(--T) var(--suave-mov) calc(var(--i) * .9s) infinite both; }
  .rodando .tarefa .risca { animation: apaga var(--T) ease calc(var(--i) * .9s) infinite both; }
  .rodando .onda rect { animation: onda .9s ease-in-out infinite; }
  .rodando .onda rect:nth-child(2n) { animation-delay: -.3s; } .rodando .onda rect:nth-child(3n) { animation-delay: -.55s; } .rodando .onda rect:nth-child(5n) { animation-delay: -.15s; }
  .rodando .reuniao .digita { animation: digita var(--T) linear calc(var(--i) * .5s) infinite both; }
  .rodando .resumo { animation: sobe-meio var(--T) var(--suave-mov) infinite both; }
  .rodando .resumo .topico { animation: sobe-meio var(--T) var(--suave-mov) calc(.25s + var(--i) * .25s) infinite both; }

  /* marketing */
  .rodando .barras rect { animation: cresce var(--T) var(--suave-mov) calc(var(--i) * .06s) infinite both; }
  .rodando .grafico .curva { animation: desenha var(--T) ease-in-out infinite both; }
  .rodando .balao-eu { animation: entra-cedo var(--T) var(--suave-mov) infinite both; }
  .rodando .digitando { animation: so-digitando var(--T) ease infinite both; }
  .rodando .digitando .ponto { animation: pula 1s ease-in-out calc(var(--i) * .15s) infinite; }
  .rodando .balao-ia { animation: entra-meio var(--T) var(--suave-mov) infinite both; }

  /* atendimento */
  .rodando .msg-chega { animation: entra-cedo var(--T) var(--suave-mov) infinite both; }
  .rodando .nao-lida { animation: pisca 1.2s ease-in-out infinite; }
  .rodando .sugestao { animation: entra-meio var(--T) var(--suave-mov) infinite both; }
  .rodando .msg-sai { animation: entra-tarde var(--T) var(--suave-mov) infinite both; }
  .rodando .lido { animation: aparece-tarde var(--T) ease infinite both; }

  /* financeiro */
  .rodando .fatura .pendente { animation: sai-pendente var(--T) ease calc(var(--i) * .7s) infinite both; }
  .rodando .fatura .pago { animation: entra-pago var(--T) var(--suave-mov) calc(var(--i) * .7s) infinite both; transform-box: fill-box; transform-origin: center; }
  .rodando .barras-caixa rect { animation: cresce var(--T) var(--suave-mov) calc(var(--i) * .08s) infinite both; }
  .rodando .nf-ok { animation: aparece-tarde var(--T) var(--suave-mov) infinite both; transform-box: fill-box; transform-origin: left center; }

  /* automações */
  .rodando .no .no-caixa { animation: acende var(--T) ease calc(var(--i) * .9s) infinite both; }
  .rodando .no .no-ok { animation: ok-no var(--T) var(--suave-mov) calc(var(--i) * .9s) infinite both; transform-box: fill-box; transform-origin: left center; }
  .rodando .fio { animation: fio var(--T) ease calc(var(--i) * .9s + .45s) infinite both; }
  .rodando .ao-vivo { animation: pisca 1.4s ease-in-out infinite; }

  /* cortex */
  .rodando .ondas-voz rect { animation: voz var(--T) ease-in-out infinite both; }
  .rodando .ondas-voz rect:nth-child(2n) { animation-delay: -.2s; } .rodando .ondas-voz rect:nth-child(3n) { animation-delay: -.45s; }
  .rodando .fala { animation: entra-cedo var(--T) ease infinite both; }
  .rodando .resposta { animation: entra-meio var(--T) var(--suave-mov) infinite both; }
  .rodando .resposta .digita { animation: digita-meio var(--T) linear calc(var(--i) * .35s) infinite both; }
  .rodando .resposta .mini { animation: entra-tarde var(--T) var(--suave-mov) infinite both; }
  .rodando .confirma { animation: entra-fim var(--T) var(--suave-mov) infinite both; }
  .rodando .botao-confirma { animation: chama 1.6s ease-in-out infinite; }

  /* área do cliente: 4 abas em 12 s */
  .rodando .aba-marca { animation: abas 12s var(--suave-mov) infinite both; }
  .rodando .painel { animation: painel 12s ease calc(var(--i) * 3s) infinite both; }
}

@keyframes anda-funil { 0%, 10% { transform: translateX(0); } 22%, 34% { transform: translateX(82px); } 46%, 92% { transform: translateX(164px); } 100% { transform: translateX(164px); opacity: 0; } }
@keyframes aparece-tarde { 0%, 48% { opacity: 0; transform: scale(.4); } 54% { opacity: 1; transform: scale(1.12); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes desenha-assina { 0%, 54% { stroke-dashoffset: 1; } 74%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes surge-assinado { 0%, 74% { opacity: 0; } 78%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes enche { 0%, 40% { transform: scaleX(0); } 80%, 94% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes marca { 0%, 6% { stroke-dashoffset: 1; } 14%, 90% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 1; } }
@keyframes apaga { 0%, 8% { opacity: .86; } 16%, 90% { opacity: .25; } 98%, 100% { opacity: .86; } }
@keyframes onda { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes digita { 0%, 4% { transform: scaleX(0); } 22%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes digita-meio { 0%, 38% { transform: scaleX(0); } 52%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sobe-meio { 0%, 46% { opacity: 0; transform: translateY(8px); } 54%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cresce { 0%, 4% { transform: scaleY(.04); } 26%, 94% { transform: scaleY(1); } 100% { transform: scaleY(.04); } }
@keyframes desenha { 0%, 14% { stroke-dashoffset: 1; } 48%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes entra-cedo { 0%, 6% { opacity: 0; transform: translateY(6px); } 12%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes so-digitando { 0%, 16% { opacity: 0; } 20%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes entra-meio { 0%, 36% { opacity: 0; transform: translateY(8px); } 44%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes entra-tarde { 0%, 52% { opacity: 0; transform: translateY(8px); } 60%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes entra-fim { 0%, 70% { opacity: 0; transform: translateY(8px); } 78%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pisca { 50% { opacity: .25; } }
@keyframes pula { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2.5px); } }
@keyframes sai-pendente { 0%, 30% { opacity: 1; } 36%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes entra-pago { 0%, 32% { opacity: 0; transform: scale(.7); } 38% { opacity: 1; transform: scale(1.08); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes acende { 0%, 8% { stroke: var(--linha); stroke-width: 1; } 14%, 90% { stroke: var(--marca); stroke-width: 1.6; } 100% { stroke: var(--linha); stroke-width: 1; } }
@keyframes ok-no { 0%, 12% { opacity: 0; transform: scale(.6); } 18%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes fio { 0%, 6% { stroke-dashoffset: 1; } 14%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes voz { 0%, 30% { transform: scaleY(.3); } 5%, 15%, 25% { transform: scaleY(1); } 10%, 20% { transform: scaleY(.45); } 34%, 100% { transform: scaleY(.15); } }
@keyframes chama { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
@keyframes abas { 0%, 22% { transform: translateX(0); width: 78px; } 25%, 47% { transform: translateX(80px); width: 92px; } 50%, 72% { transform: translateX(176px); width: 86px; } 75%, 97% { transform: translateX(264px); width: 76px; } 100% { transform: translateX(0); width: 78px; } }
@keyframes painel { 0% { opacity: 0; transform: translateY(6px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }

/* celular */
@media (max-width: 960px) {
  .links { display: none; }
  .links + .acoes { margin-left: auto; }
  .duas, .duas.invertida { grid-template-columns: 1fr; gap: 40px; }
  .duas.invertida .cena { order: 2; }
  .mapa { grid-template-columns: repeat(2, 1fr); }
  .mapa li:not(:nth-child(4n)) { border-right: 0; }
  .mapa li:nth-child(odd) { border-right: 1px solid var(--linha); }
  .tres { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .topo { inset: 10px 0 auto; padding: 0 10px; }
  .pilula { padding: 6px 6px 6px 14px; gap: 8px; }
  .marca img { width: 54px; }
  .botao { height: 36px; padding: 0 14px; font-size: 14px; }
  .so-largo { display: none; } .so-estreito { display: inline; }
  .botao.grande { height: 48px; width: 100%; justify-content: center; }
  .botoes { width: 100%; max-width: 360px; }
  .abertura { padding: 104px 16px 56px; }
  .largura { padding: 0 16px; }
  .indice { padding: 88px 0 56px; }
  .recurso { padding: 72px 0; }
  .mapa a { padding: 16px 12px; font-size: 16px; }
  .faixa { flex-direction: column; align-items: flex-start; }
  .rodape-linha { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rodape nav { margin-left: 0; }
  .fecho { padding: 104px 0; }
  .cena.larga, .cena.media { margin-top: 32px; }
}

/* topo depois da abertura; cenas largas no celular rolam de lado dentro da própria caixa (a página não rola) */
.pilula.solido { background: rgb(12 12 13 / .9); }
@media (max-width: 640px) {
  .cena.larga, .cena.media { overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 8px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
  .cena.larga::-webkit-scrollbar, .cena.media::-webkit-scrollbar { display: none; }
  .cena.larga svg { width: 640px; max-width: none; }
  .cena.media svg { width: 560px; max-width: none; }
}