/* proposta no espírito da Apple: a cena e o conteúdo são os da Home nova 2; aqui mudam letra, materiais, respiro e mola */

:root{
  --azul-acao:oklch(0.58 0.19 252);
  --azul-acao-2:oklch(0.64 0.18 250);
  --azul-link:oklch(0.52 0.19 254);
  --vidro:oklch(1 0 0/.08);
  --vidro-borda:oklch(1 0 0/.16);
  --vidro-luz:oklch(1 0 0/.28);
  --vidro-claro:oklch(1 0 0/.62);
  --branco:oklch(0.995 0.002 240);
}
/* mola criticamente amortecida (sem repique): o que já usava a saída da casa passa a assentar como objeto físico */
@supports (transition-timing-function:linear(0,1)){
  :root{--saida:linear(0,.055,.173,.31,.442,.559,.657,.737,.801,.85,.888,.917,.939,.955,.967,.976,.983,.987,.991,.993,1)}
}

/* letra: semibold calmo; tracking aperta conforme cresce, corpo fica perto de zero */
h1,h2{font-weight:600;letter-spacing:-.035em;line-height:1.04}
h1{font-size:clamp(40px,11vw,96px)}
h2{font-size:clamp(36px,7.4vw,72px)}
h3{font-weight:600;letter-spacing:-.022em;line-height:1.12}
.rot{font:600 17px/1.35 Satoshi,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;text-transform:none}
body{letter-spacing:-.005em}

/* botões em pílula, como o "Adquirir agora" do site atual: a ação é branco-gelo com um halo; nas seções claras ela vira cinza. A secundária é vidro e, apertada, acende como a aba escolhida da 02 */
.btn{min-height:50px;padding:0 24px;font-weight:600;font-size:var(--t-btn);letter-spacing:-.015em;transition:transform .12s ease-out,filter .25s,background-color .25s,box-shadow .25s}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:none;filter:brightness(1.08)}}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn.pri{background:oklch(0.975 0.004 250);color:oklch(0.16 0.01 250);box-shadow:inset 0 1px 0 oklch(1 0 0),0 0 0 5px oklch(1 0 0/.16),0 12px 26px -14px oklch(0 0 0/.55)}
.btn.fan{background:color-mix(in oklch,currentColor 9%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 color-mix(in oklch,currentColor 22%,transparent),inset 0 0 0 1px color-mix(in oklch,currentColor 14%,transparent)}
.btn.fan:active{background:oklch(0.975 0.004 250);color:var(--tinta);box-shadow:inset 0 1px 0 oklch(1 0 0)}
@media (hover:hover) and (pointer:fine){.btn.fan:hover{box-shadow:inset 0 1px 0 color-mix(in oklch,currentColor 30%,transparent),inset 0 0 0 1px color-mix(in oklch,currentColor 24%,transparent)}}
.lk{color:var(--azul-link);font-weight:600;box-shadow:none}
@media (hover:hover) and (pointer:fine){.lk:hover{box-shadow:none;text-decoration:underline;text-underline-offset:4px}}
.lk:after{width:7px;height:7px;border-width:1.8px 1.8px 0 0}

/* barra do menu em vidro: o conteúdo passa por baixo, a borda de cima pega a luz */
.topo nav{background:oklch(0.16 0.008 250/.78);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 0 oklch(1 0 0/.18),inset 0 0 0 1px oklch(1 0 0/.08),0 12px 32px -18px oklch(0 0 0/.6)}
.links{font-weight:500}
.mn-p{background:oklch(0.17 0.01 250/.82);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 1px 0 oklch(1 0 0/.14),0 0 0 1px oklch(1 0 0/.08),0 30px 60px -20px oklch(0 0 0/.8)}
.entrar .mn-b{background:var(--branco);font-weight:600;box-shadow:0 8px 24px -12px oklch(0 0 0/.5)}
.topo .marca,.topo .entrar,.topo .hamb{flex:none}
@media (max-width:319px){.topo .marca img + img{display:none}}

/* mais respiro e cortes limpos entre seções, alternando escuro e claro */
.cam,.sec{padding-block:clamp(96px,14vh,168px)}
.s1{background:radial-gradient(ellipse 80% 50% at 50% 100%,oklch(0.3 0.06 245/.55),transparent 70%),oklch(0.11 0.012 255)}
/* a primeira dobra divide a altura com os aparelhos: o título cresce, mas sem roubar o lugar deles */
.s1{padding-top:clamp(84px,11svh,112px)}
.s1 h1{max-width:10.5em;font-size:clamp(32px,min(10vw,6.4svh),96px)}
.s1 .apoio{margin-top:20px;font-size:var(--t-apoio);font-weight:500;letter-spacing:-.015em;color:oklch(0.72 0.015 250)}
.s2{padding-top:clamp(96px,14vh,168px);background:var(--nevoa)}
.s3{background:var(--branco)}
.s4{background:oklch(0.11 0.012 255)}
.s5{background:var(--chumbo)}
.s6{background:oklch(0.07 0.01 255)}

/* taxas em cartões de vidro: material leve sobre o céu, números em semibold tabular */
.tira{gap:10px}
.tira > div{padding:14px 12px 16px;border-radius:20px;background:var(--vidro);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);box-shadow:inset 0 1px 0 var(--vidro-luz),inset 0 0 0 1px var(--vidro-borda),0 18px 40px -24px oklch(0 0 0/.7)}
.tira dt{font-weight:500;color:oklch(0.78 0.015 250)}
.tira dd{font-weight:600;letter-spacing:-.035em}
.taxas .rot{font-size:15px}

/* 02: as abas viram um seletor segmentado de vidro claro */
.abas{gap:2px}
.abas button{min-height:44px;padding:0 18px;background:transparent;font-weight:600;font-size:15px;color:var(--tinta-2)}
@media (hover:hover) and (pointer:fine){.abas button:hover{background:oklch(1 0 0/.5);color:var(--tinta)}}
.abas button[aria-selected="true"]{background:var(--branco);color:var(--tinta);box-shadow:0 1px 0 oklch(1 0 0/.9) inset,0 6px 16px -8px oklch(0.2 0.03 250/.45),0 0 0 .5px oklch(0.2 0.03 250/.08)}
/* empilhada, na mesma ordem da cena: título e abas no eixo, o aparelho, e o texto num cartão de vidro embaixo dele */
.s2 .cab{text-align:center}
.s2 .cab h2{margin-inline:auto}
html:not(.viva) .abas{width:fit-content;max-width:100%;margin-inline:auto;padding:4px;border-radius:999px;background:oklch(1 0 0/.5);box-shadow:inset 0 0 0 1px oklch(1 0 0/.5)}
.est{grid-template-columns:minmax(0,1fr)}
.est .face{order:0}
html:not(.viva) .est-tx{justify-self:center;width:100%;max-width:640px;padding:26px 24px 18px;border-radius:28px;background:linear-gradient(160deg,oklch(1 0 0/.82),oklch(1 0 0/.55));-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);box-shadow:inset 0 1px 0 oklch(1 0 0/.95),inset 0 0 0 1px oklch(1 0 0/.6),0 30px 50px -34px oklch(0.25 0.05 250/.35)}
html:not(.viva) .est-tx ul{max-width:none}
/* o cartão: título, subtítulo cinza, benefícios com check e a ação */
.est-tx h3{margin:0;max-width:none;font-weight:600;letter-spacing:-.03em}
.est-tx .sub{margin-top:8px;max-width:46em;font-size:15px;line-height:1.45;color:var(--tinta-2)}
.est-tx .ok{margin-top:20px;max-width:none}
.est-tx .ok li{position:relative;padding:0 0 0 28px;margin-bottom:10px;box-shadow:none;font-size:var(--t-corpo);line-height:1.45;color:var(--tinta-2)}
.est-tx .ok li:before{content:"";position:absolute;left:0;top:.08em;width:18px;height:18px;border-radius:50%;background:oklch(0.92 0.045 245)}
.est-tx .ok li:after{content:"";position:absolute;left:6.5px;top:calc(.08em + 4.5px);width:4px;height:7.5px;border:solid oklch(0.48 0.16 252);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.est-tx .ok li b{display:inline;min-width:0;font-weight:600;color:var(--tinta)}
.est-tx .obs{margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--tinta-2)}
.est-tx .btn{display:flex;width:max-content;margin:18px 0 0 auto;min-height:46px}
/* o mesmo botão claro da abertura; no cartão claro o anel escuro e a sombra o destacam */
.est-tx .btn.pri{box-shadow:inset 0 1px 0 oklch(1 0 0),0 0 0 1px oklch(0.2 0.02 250/.1),0 0 0 5px oklch(0.2 0.02 250/.05),0 12px 26px -14px oklch(0.2 0.03 250/.45)}

.preco .off{font:600 12px/1.5 Satoshi,sans-serif;background:oklch(0.9 0.06 250);color:oklch(0.38 0.15 254)}
.preco strong{font-weight:600}

/* cena do computador: títulos maiores e mais calmos; a faixa de taxas vira uma fileira de cartões de vidro */
.viva .s1 .tx{top:92px}
.viva .s1 h1{font-size:74px;letter-spacing:-.04em;line-height:1.02}
.viva .s1 .apoio{font-size:23px;margin-top:12px}
.viva .taxas{left:150px;top:742px}
.viva .s1 .tira{gap:0 10px;margin-top:10px}
.viva .s1 .tira > div{padding:9px 16px 11px;border-radius:18px;background:var(--vidro)}
.viva .s1 .tira dt{font-size:13px}
.viva .s1 .tira dd{font-size:32px}
.viva .s1 .nota{margin-top:12px}
.viva .s1 .btns{right:150px;top:783px;gap:10px}
.viva .s2 .cab h2{font-size:60px}
.viva .abas{padding:4px;border-radius:999px;isolation:isolate}
/* o trilho de vidro acompanha as abas: some e volta com o bloco, que a cena liga por .on */
.viva .abas:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:oklch(1 0 0/.42);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 0 oklch(1 0 0/.7),inset 0 0 0 1px oklch(1 0 0/.4),0 14px 30px -20px oklch(0.2 0.03 250/.5);opacity:0;transition:opacity .45s}
.viva .abas.on:before{opacity:1}
/* o texto da solução fica num cartão de vidro claro, como um painel sobre a luz; o aparelho passa por trás dele sem sumir */
.viva .vidro{background:linear-gradient(160deg,oklch(1 0 0/.66),oklch(1 0 0/.34));-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 1px 0 oklch(1 0 0/.95),inset 0 0 0 1px oklch(1 0 0/.55),0 40px 70px -40px oklch(0.25 0.05 250/.4),0 2px 6px -2px oklch(0.25 0.05 250/.08)}
.viva .s5 h2{font-size:60px}

/* chegada: o vidro materializa (desfoque e escala juntos), não só aparece */
@keyframes materializa{from{opacity:0;transform:translateY(28px) scale(.96);filter:blur(10px)}}
.intro .tira > div{animation-name:materializa}

@media (max-width:859px){
  .tira > div{padding:10px 10px 12px;border-radius:18px}
}
@media (prefers-reduced-transparency:reduce){
  .topo nav,.mn-p{background:oklch(0.17 0.01 250);-webkit-backdrop-filter:none;backdrop-filter:none}
  .tira > div,.viva .abas:before,.btn.fan,.viva .vidro,.est-tx{-webkit-backdrop-filter:none;backdrop-filter:none}
  .viva .vidro,html:not(.viva) .est-tx{background:oklch(0.985 0.004 240)}
  .tira > div,.viva .s1 .tira > div{background:oklch(0.24 0.02 250)}
  .viva .abas:before{background:oklch(0.97 0.006 240)}
}

/* a tela da maquininha já vem na foto (nova venda, igual à da abertura): o visor de "aprovado" sai */
.visor{display:none}
/* a maquininha da abertura fica em pé; na cena quem inclina é a .voa, até o ângulo da 02 */
.ha-peca[data-id="maquininha"] .ha-img{rotate:6deg}

.s3 .ic{position:absolute;width:0;height:0;overflow:hidden}
/* nome e preço no eixo de cada maquininha */
.s3 .mod-tx{text-align:center}
.s3 .preco{justify-items:center}
.pontos{display:none}

/* empilhada (celular e tablet): as três maquininhas num anel. A da frente fica no meio, grande, e as outras duas sempre
   uma de cada lado, atrás e menores; o cena.js gira o anel (transform de cada .mod) com o dedo, os pontos e as setas.
   Embaixo, a ficha da que está na frente: nome, preço, ação e o que vem nela, com os itens próprios do modelo primeiro */
html:not(.viva) .s3{display:flex;flex-direction:column;--s:min(72vw,360px)}
html:not(.viva) .s3 .tx{display:contents}
html:not(.viva) .s3 .rot{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
html:not(.viva) .s3 .modelos{order:1;position:relative;height:calc(var(--s) * .96);margin:28px calc(var(--gut) * -1) 0;overflow:clip;touch-action:pan-y;-webkit-user-select:none;user-select:none}
html:not(.viva) .s3 .mod{position:absolute;left:50%;bottom:0;width:var(--s);margin-left:calc(var(--s) / -2);transform-origin:50% 100%}
/* o toque vale só no corpo da maquininha: o quadrado do desenho sobra dos lados e cobriria a de trás */
html:not(.viva) .s3 .mod{pointer-events:none}
html:not(.viva) .s3 .mq{pointer-events:auto;clip-path:inset(0 16% 0 19%);-webkit-tap-highlight-color:transparent}
html:not(.viva) .s3 .mq svg{pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 96%);mask-image:linear-gradient(180deg,#000 74%,transparent 96%)}
html:not(.viva) .s3 .mod-tx{display:none}
/* poça de sombra parada no meio: é onde a da frente pisa */
html:not(.viva) .s3 .modelos:after{content:"";position:absolute;left:50%;bottom:4px;width:calc(var(--s) * .7);height:26px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,oklch(0.25 0.03 250/.16),transparent);pointer-events:none}
html:not(.viva) .pontos{display:flex;order:2;justify-content:center;margin-top:4px}
.pontos button{display:grid;place-items:center;width:44px;height:40px;padding:0;border:0;background:none;cursor:pointer}
.pontos button:before{content:"";width:6px;height:6px;border-radius:3px;background:oklch(0.22 0.025 250/.22);transition:width .35s var(--saida),background-color .25s}
.pontos button[aria-current="true"]:before{width:20px;background:var(--tinta)}
html:not(.viva) .s3 .ficha{display:flex;flex-direction:column;order:3;margin-top:14px;color:var(--tinta)}
html:not(.viva) .s3 .vez{display:grid}
html:not(.viva) .s3 .vez > *{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .12s,visibility 0s .12s}
html:not(.viva) .s3[data-ver="0"] .vez > :nth-child(1),
html:not(.viva) .s3[data-ver="1"] .vez > :nth-child(2),
html:not(.viva) .s3[data-ver="2"] .vez > :nth-child(3){opacity:1;visibility:visible;transition:opacity .25s .08s,visibility 0s}
html:not(.viva) .s3 .ficha h3{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
html:not(.viva) .s3 .ficha .sub{margin-top:2px;font-size:15px;color:var(--tinta-2)}
html:not(.viva) .s3 .ficha .de{margin-top:16px;font-size:14px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
html:not(.viva) .s3 .ficha .off{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:99px;font:600 12px/1.5 Satoshi,sans-serif;background:oklch(0.9 0.06 250);color:oklch(0.38 0.15 254);vertical-align:1px}
html:not(.viva) .s3 .parc{margin-top:2px;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.2;font-variant-numeric:tabular-nums}
html:not(.viva) .s3 .ficha .av{font-size:14px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
html:not(.viva) .s3 .f-acao{order:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:22px}
html:not(.viva) .s3 .pedir{min-height:48px;padding:0 22px;font-size:16px;box-shadow:inset 0 1px 0 oklch(1 0 0),0 0 0 1px oklch(0.2 0.02 250/.12),0 0 0 5px oklch(0.2 0.02 250/.05),0 12px 26px -14px oklch(0.2 0.03 250/.5)}
html:not(.viva) .s3 .pedir .chev{display:none}
html:not(.viva) .s3 .f-lk{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:16px;font-weight:600}
html:not(.viva) .s3 .f-lk .chev{color:inherit;width:7px;height:7px;border:solid currentColor;border-width:1.75px 1.75px 0 0;transform:rotate(45deg)}
html:not(.viva) .s3 .f-bens{order:2;display:flex;flex-direction:column;gap:12px;margin-top:30px;font-size:16px;line-height:1.4}
html:not(.viva) .s3 .f-bens > div{display:contents}
html:not(.viva) .s3 .f-bens .vez{order:-1}
html:not(.viva) .s3 .f-bens ul{display:grid;gap:12px}
html:not(.viva) .s3 .f-bens li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
html:not(.viva) .s3 .f-bens svg{width:20px;height:20px;margin-top:.05em;color:var(--azul-acao)}
@media (min-width:640px){
  html:not(.viva) .s3 .ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:48px;max-width:860px}
  html:not(.viva) .s3 .ficha > .vez{grid-area:1/1}
  html:not(.viva) .s3 .f-acao{grid-area:2/1;align-self:start}
  html:not(.viva) .s3 .f-bens{grid-area:1/2/3;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  html:not(.viva) .s3 .vez > *,.pontos button:before{transition:none}
}
.viva .est-tx .ok.duas li{margin-bottom:8px}
html:not(.viva) .est{padding-bottom:40px}

/* escala de títulos da página de pagamentos no ar: 64 na abertura, 48 nas seções, peso médio e entrelinha 1,1 */
h1,h2{font-weight:500;letter-spacing:-.02em;line-height:1.1}
h1,.s1 h1{font-size:var(--t-h1);letter-spacing:normal}
h2{font-size:var(--t-h2)}
h3,.est-tx h3{font-weight:500}
.viva .s1 h1{font-size:64px;letter-spacing:normal;line-height:1.1}
.viva .s2 .cab h2,.viva .s3 h2,.viva .s4 h2,.viva .s5 h2,.viva .s6 h2{font-size:48px}
.s6 h2,.viva .s6 h2{line-height:1.1}

/* empilhada, a mesma regra da cena: todos os aparelhos da 02 com uma altura só; a largura sai da proporção de cada um.
   O teto em vw deixa o notebook, o mais largo com a base, dentro da tela do celular */
html:not(.viva) .s2{--alt:min(400px,52vw)}
html:not(.viva) .f0{width:calc(var(--alt) * 1094 / 2035)}
html:not(.viva) .f1,html:not(.viva) .fa{width:calc(var(--alt) * 236 / 480)}
html:not(.viva) .f2{width:calc(var(--alt) * 500 / 351)}
html:not(.viva) .f3{width:calc((var(--alt) - 16px) * 1992 / 1400 + 16px)}
html:not(.viva) .f4{width:calc((var(--alt) - 16px) * 1740 / 1050 + 16px)}

/* escala única da página empilhada: cada seção lê estes tamanhos e, no celular, todos descem juntos.
   O teto é o do computador (título 48, apoio 17, benefícios 15); a abertura fica um degrau acima dos títulos de seção */
:root{--t-h1:clamp(38.4px,9vw,64px);--t-h2:clamp(38.4px,6.4vw,48px);--t-apoio:clamp(17px,min(2.6vw,2.6svh),26px);--t-corpo:15px;--t-btn:17px}
@media (max-width:599px){
  :root{--t-h1:40px;--t-apoio:16px;--t-btn:16px}
}
/* título de seção no celular: uma medida só, que cada seção lê por --t-h2 */
:root{--t-h2-cel:32px}
@media (max-width:859px){
  :root{--t-h2:var(--t-h2-cel)}
}
html:not(.viva) .rot{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
html:not(.viva) .s1{min-height:100svh}

/* abertura no celular: o título manda, os aparelhos de borda a borda apoiam, as taxas informam sem competir com o título, a ação fecha.
   Espremidos na sobra da altura, os aparelhos viravam miniatura; as taxas em 40 px gritavam mais que o título.
   O piso dos aparelhos e as caixinhas das taxas são baixos para a ação caber na primeira tela, mesmo com a barra do navegador */
@media (max-width:599px){
  .s1 h1{margin-top:8px;line-height:1.08}
  .s1 .apoio{margin-top:12px;line-height:1.45}
  .dobra{grid-template-rows:auto minmax(40vw,1fr) auto auto}
  .grupo{margin:16px calc(var(--gut) * -1) 0}
  .s1 .taxas{margin-top:16px}
  .tira > div{padding:7px 10px 8px;border-radius:14px}
  .tira dd{margin-top:2px;font-size:22px}
  .s1 .btns{margin-top:18px}
}

/* 02 empilhada: o texto lê num eixo só, à esquerda, como as seções seguintes; o aparelho fica no meio, como objeto.
   As abas rolam de lado e o fio que some na borda avisa que há mais; a caixa das soluções acompanha a altura da escolhida */
html:not(.viva) .s2 .cab{text-align:left}
html:not(.viva) .s2 .cab h2{margin-inline:0}
html:not(.viva) .s2 .cab .rot{display:block;margin-bottom:12px;color:var(--tinta-2)}
html:not(.viva) .abas{margin-inline:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
html:not(.viva) .ests{align-items:flex-start;overflow-y:hidden;transition:height .45s var(--saida)}
html:not(.viva) .est-tx{justify-self:stretch;max-width:none}
html:not(.viva) .est-tx .btn{margin:20px 0 0}
@media (max-width:599px){
  html:not(.viva) .abas{margin-top:24px}
  html:not(.viva) .est-tx{padding:22px 20px 20px;border-radius:24px}
  html:not(.viva) .est-tx .btn{width:100%}
}