/* ---------- O motion da LP inteira (13/10, o pedido: animação em toda parte, as transições de cada dobra e a fluidez) ----------
   1. As dobras se empilham (no computador, onde cada uma cabe na tela): a dobra presa no alto recua um pouco e escurece enquanto a
      próxima sobe por cima dela, com as curvas. Quem mede o "quanto a próxima já cobriu" é o motion.js (--cobre, de 0 a 1).
   2. As entradas acompanham a rolagem (onde o navegador anima pela rolagem): o bloco sobe e aparece na medida em que entra,
      em cascata (--i), em vez de pular de uma vez. Sem esse recurso, fica a entrada de antes (o .visto do dobras.js).
   3. Os títulos sobem de trás de uma linha (a máscara que abre de baixo para cima).
   4. Os cartões inclinam de leve sob o mouse, com mola (o motion.js), e os números do mapa contam ao entrar.
   No movimento reduzido, nada disso: tudo parado e completo. */

.dobra-sombra{display:none}
.marco{display:block;height:0;pointer-events:none}
/* o ritmo das passagens: uma marcada, uma seca, intercaladas (o pedido de 13/10)
   topo → estados: FOLHA · estados → como: SECO · como → conta: FOLHA · conta → clientes: SECO · clientes → grupo: FOLHA ·
   grupo → parceiros: a PLACA que se abre · parceiros → perguntas: SECO · perguntas → fecho: a CURVA do pôr do sol.
   No computador, a dobra antes de uma folha ou da curva fica presa e recua enquanto a outra sobe; antes de um corte seco, ela só segue. */
@media (min-width:1001px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  #sim,#como,#clientes,#ajuda{position:sticky;top:var(--pega,0px);transform-origin:50% 0;scale:calc(1 - var(--cobre,0) * .055)}
  #sim > .dobra-sombra,#como > .dobra-sombra,#clientes > .dobra-sombra,#ajuda > .dobra-sombra{display:block;position:absolute;inset:0;z-index:30;pointer-events:none;background:#010a13;opacity:calc(var(--cobre,0) * .62)}
}
/* a folha: os cantos de cima arredondados e a sombra que cai na dobra de baixo (no telefone, ela encosta por cima da anterior) */
[data-entra=folha]{border-radius:32px 32px 0 0;box-shadow:0 -26px 60px -22px rgb(1 10 19 / .7)}
/* na noite sobre a noite, a borda da folha ganha um filete de luz para se ler */
#estados[data-entra=folha],#grupo[data-entra=folha]{box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 -26px 60px -22px rgb(0 0 0 / .85)}
#sua-conta[data-entra=folha]{box-shadow:0 -1px 0 rgb(10 28 43 / .08),0 -26px 60px -22px rgb(1 10 19 / .45)}
@media (max-width:1000px){[data-entra=folha]{margin-top:-30px;border-radius:28px 28px 0 0}.dobra{padding-bottom:56px}}
/* o corte seco: sem curva, sem brilho e sem sombra; a dobra só começa */
[data-entra=seco]{margin-top:0!important;border-radius:0!important;box-shadow:none!important}
.como[data-entra=seco]::before{display:none}
.como[data-entra=seco],.clientes[data-entra=seco]{padding-top:clamp(72px,9vw,120px)}
@media (min-width:1001px) and (min-height:600px){.como[data-entra=seco],.clientes[data-entra=seco]{padding-top:var(--livre-topo)}}
/* a placa amarela termina reta, para a passagem às perguntas ser seca */
.parceiros{background:var(--n0)}
.parceiros__placa{clip-path:inset(0 0 round 0)}
@supports (animation-timeline: view()){
  @keyframes p-abre{from{clip-path:inset(0 var(--gutter) round 40px)}to{clip-path:inset(0 0 round 0)}}
}
@media (min-width:1001px) and (min-height:600px){.parceiros__placa{padding-bottom:var(--livre-pe)}}
@media (max-width:560px){.parceiros__placa{padding-bottom:72px}}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .js .revela{opacity:1;transform:none;transition:none;
      animation:m-entra linear both;animation-timeline:view();animation-range:entry calc(var(--i,0) * 5%) entry calc(62% + var(--i,0) * 5%)}
    @keyframes m-entra{from{opacity:0;translate:0 42px;scale:.985}}
    /* o título: abre de baixo para cima, como se subisse de trás de uma linha */
    .js .sec h2.revela,.js .fecho h2.revela{animation-name:m-titulo}
    @keyframes m-titulo{from{opacity:.2;translate:0 .5em;clip-path:inset(0 0 100% 0)}to{clip-path:inset(-15% -5% -30% -5%)}}
  }
}

/* os cartões que inclinam (o motion.js põe o --rx/--ry e a classe enquanto o mouse está em cima) */
.inclina{transition:transform .6s cubic-bezier(.2,.9,.25,1.05),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.inclina.inclinando{transition:transform .12s linear;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
@media (prefers-reduced-motion:reduce){.inclina.inclinando{transform:none}}

/* os botões de sol: o brilho que atravessa ao passar o mouse e o aperto ao clicar (o mesmo do CTA da barra) */
.botao{position:relative;overflow:hidden}
.botao--sol::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .5) 50%,transparent 70%);translate:-120% 0;transition:translate .8s var(--ease)}
.botao--sol:hover::after{translate:120% 0}
.botao:active{scale:.97;transition:scale .12s var(--ease)}
/* o grupo: a empresa sob o mouse acende o ramo dela (o motion.js põe o data-foco na árvore) */
.arvore[data-foco] .ramos-luz path{opacity:.35;transition:opacity .4s var(--ease),stroke-width .4s var(--ease)}
.arvore[data-foco="1"] .ramos-luz path:nth-child(1),.arvore[data-foco="2"] .ramos-luz path:nth-child(2),.arvore[data-foco="3"] .ramos-luz path:nth-child(3){opacity:1;stroke-width:4}
.arvore[data-foco="1"] .ramos-pulso path:nth-child(1),.arvore[data-foco="2"] .ramos-pulso path:nth-child(2),.arvore[data-foco="3"] .ramos-pulso path:nth-child(3){animation:g-pulso 1.4s cubic-bezier(.5,0,.4,1) infinite}
@media (prefers-reduced-motion:reduce){.botao--sol::after{display:none}.botao:active{scale:1}}

/* ---------- a fluidez (13/10): uma curva só para o site todo, e o fundo vivo ----------
   A curva: sai rápido e assenta devagar, sem tranco no fim (a mesma da rolagem macia do fluido.js). */
:root{--ease:cubic-bezier(.22,1,.36,1)}
/* o fundo vivo: 2 luzes que derivam devagar atrás do conteúdo (só com a dobra na tela: o fluido.js põe o .vivo) */
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.aurora::before,.aurora::after{content:"";position:absolute;width:62vmax;height:62vmax;border-radius:50%;will-change:transform;animation-play-state:paused}
.aurora::before{left:-14vmax;top:-22vmax;background:radial-gradient(circle,var(--aur-a),transparent 62%);animation:aur-a 28s cubic-bezier(.45,0,.55,1) infinite alternate paused}
.aurora::after{right:-18vmax;bottom:-28vmax;background:radial-gradient(circle,var(--aur-b),transparent 62%);animation:aur-b 34s cubic-bezier(.45,0,.55,1) infinite alternate paused}
.aurora.vivo::before,.aurora.vivo::after{animation-play-state:running}
@keyframes aur-a{to{transform:translate(20vmax,16vmax) scale(1.18)}}
@keyframes aur-b{to{transform:translate(-18vmax,-14vmax) scale(1.12)}}
.sec--noite .aurora{--aur-a:rgb(255 198 26 / .075);--aur-b:rgb(67 224 102 / .06)}
.sec--papel .aurora{--aur-a:rgb(255 198 26 / .16);--aur-b:rgb(255 255 255 / .55)}
@media (prefers-reduced-motion:reduce){.aurora{display:none}}

/* ---------- os títulos das dobras: menos apertados e menos pesados (13/10, o pedido: "as letras grudadas/pesadas" no "Parceiro") ----------
   de 800 com -0,035em para 700 com -0,018em; o título do topo (o h1, aprovado) fica como está */
.sec h2,.fecho h2{font-weight:700;letter-spacing:-.018em}
.parceiros h2{letter-spacing:-.014em}
.parceiros h2 em{font-weight:700}