/* ==========================================================================
   Camada de acabamento, no vocabulario de interface da Apple.
   ==========================================================================

   Ela entra DEPOIS de `clone.css` e so sobrescreve. O motivo de ser um arquivo
   separado e simples: `clone.css` e a reconstrucao do layout capturado, com o
   registro de cada decisao dele. Misturar as duas coisas faria a proxima pessoa
   perder o que era layout original e o que e refinamento.

   As quatro ideias que organizam tudo aqui:

     1. RESPOSTA. O toque acende na descida do dedo, nunca na subida. Latencia e
        o unico defeito de interface que nao tem conserto visual.
     2. MANIPULACAO DIRETA. O que se arrasta gruda no dedo, 1:1, e obedece a
        velocidade de quem soltou.
     3. INTERRUPCAO. Nenhuma animacao tranca a entrada. Toda mola parte do valor
        que esta na tela, e nao do valor logico.
     4. CONTENCAO. Movimento continuo e enfeite. Tudo aqui roda uma vez e para.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fundacao: cor legivel, tipo com metrica por tamanho, foco visivel
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* O cinza do corpo de texto era `#798282`, 3,4:1 no branco. Abaixo de 4,5:1
     a leitura para de ser opcional e vira esforco, e a maior parte do
     argumento desta pagina esta escrita nesse cinza (lead, descricao de
     agente, texto dos numeros, respostas das perguntas). Sobe para 5,9:1 e
     continua sendo claramente secundario. */
  --g500: #5e6666;

  /* Curvas.
     `--mola` e o padrao criticamente amortecido: chega e para, sem passar do
     ponto. `--mola-solta` tem um resto de inercia e SO entra onde houve um
     gesto com impulso antes (arrastar, soltar). Passar do ponto num menu que
     so apareceu le como brinquedo. */
  --mola: cubic-bezier(.16, 1, .3, 1);
  --mola-solta: cubic-bezier(.34, 1.4, .64, 1);
  --d-toque: .1s;

  /* Altura da barra fixa, para o ancoramento parar abaixo dela. */
  --barra: 72px;
  --barra-baixo: 0px;
}

/* Um `#planos` no menu levava o titulo da secao para DEBAIXO da navbar fixa:
   o navegador alinha a ancora no topo do viewport, e o topo do viewport esta
   coberto por 72 px de barra. `scroll-padding-top` e a correcao do container,
   entao vale para toda ancora da pagina de uma vez, inclusive as do teclado. */
html {
  scroll-padding-top: calc(var(--barra) + 12px);
}

/* Corpo de texto: entrelinha de leitura, nao de interface.
   1.4 e a medida de rotulo curto; paragrafo de cinco linhas em 1.4 vira bloco.
   O tamanho passa a sair de `rem` para acompanhar quem aumentou a fonte do
   sistema, em vez de ignorar o ajuste. */
body {
  font-size: clamp(15px, .95rem + .1vw, 16px);
  line-height: 1.55;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* Metrica por TAMANHO, e nao um valor unico para toda a escala.
   Letra grande le com os espacos abertos demais e precisa de tracking
   negativo; letra pequena precisa do contrario. Um `letter-spacing` fixo
   esta errado em alguma ponta da escala, sempre. */
h1 {
  letter-spacing: -.045em;
  line-height: .92;
  font-optical-sizing: auto;
  text-wrap: balance;
}
h2 {
  letter-spacing: -.038em;
  line-height: .95;
  font-optical-sizing: auto;
  text-wrap: balance;
}
h3 { letter-spacing: -.018em; }
.lead { line-height: 1.6; letter-spacing: -.002em; text-wrap: pretty; }
p { text-wrap: pretty; }

/* O rotulo em caixa alta e o unico lugar onde o tracking POSITIVO ajuda: a
   caixa alta nao tem ascendente nem descendente para separar os glifos. */
.num__lbl, .cadeia__t { letter-spacing: .07em; }

/* --- Foco visivel ---------------------------------------------------------

   A pagina inteira nao tinha um unico estilo de foco. Quem navega por teclado
   percorria dezenas de alvos sem nenhuma pista de onde estava. O anel abaixo
   usa `:focus-visible`, entao ele aparece para o teclado e nao aparece atras
   do clique de mouse, que e exatamente o comportamento esperado. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible, .seta:focus-visible, .idioma__btn:focus-visible {
  outline-offset: 3px;
  border-radius: var(--r-pill);
}
.faq summary:focus-visible { outline-offset: -4px; border-radius: 10px; }

/* --------------------------------------------------------------------------
   2. Resposta: o toque acende na descida do dedo
   --------------------------------------------------------------------------

   O realce do Android/iOS (aquele retangulo cinza atras do link) sai, e no
   lugar dele entra um estado de pressao desenhado por nos. Sai porque ele
   chega ATRASADO no toque e fica preso depois dele; entra o nosso porque
   feedback que so acontece no fim do gesto le como "nao registrou".

   A regra de tempo: entrar na pressao e INSTANTANEO (sem transicao), sair e
   que tem curva. Uma transicao na entrada atrasa a unica coisa que precisava
   ser imediata. */
* { -webkit-tap-highlight-color: transparent; }

.btn, .selo, .seta, .plano, .agente, .num,
.faq summary, .drop__menu a, .idioma__menu button,
.rodape__cols a, .navbar__nav > a, .marca, .whats {
  touch-action: manipulation;
}

.btn { transition: transform .34s var(--mola), box-shadow .34s var(--mola), background-color .2s ease, border-color .2s ease, opacity .2s ease; }
.btn:active { transform: scale(.96); transition-duration: var(--d-toque); }
.btn--lg:active { transform: scale(.97); }

.selo:active, .agente:active, .plano:active, .num:active {
  transform: scale(.985);
  transition-duration: var(--d-toque);
}
.seta:active:not(:disabled) { transform: scale(.9); transition-duration: var(--d-toque); }
.faq summary:active h3 { opacity: .55; transition-duration: var(--d-toque); }
.marca:active, .whats:active { transform: scale(.94); transition-duration: var(--d-toque); }
.drop__menu a:active, .idioma__menu button:active, .rodape__cols a:active { opacity: .5; }

/* --------------------------------------------------------------------------
   3. Materiais: a barra e um vidro sobre o conteudo, e nao uma faixa opaca
   --------------------------------------------------------------------------

   O conteudo passa POR BAIXO dela, desfocado. E o que da a camada de
   profundidade: a barra flutua, e o que esta atras continua existindo.

   A divisoria de 1 px vira um desvanecimento. Uma linha dura anuncia "aqui
   termina a barra"; o desvanecimento anuncia "aqui ha algo por cima", que e a
   informacao verdadeira, e so aparece quando ha mesmo conteudo por baixo. */
.navbar {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 0;
  transition: background .4s var(--mola);
}
.navbar.is-stuck { background: rgba(255, 255, 255, .8); }
.navbar::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%; height: 22px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity .4s var(--mola);
}
.navbar.is-stuck::after { opacity: 1; }

/* Superficie grande le como material mais espesso: desfoque maior e sombra
   mais funda que uma pastilha pequena. Os dois menus da barra sao superficies
   pequenas, entao o vidro delas e leve. */
.drop__menu, .idioma__menu {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  border-color: rgba(0, 0, 0, .07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 24px 60px -24px rgba(0, 0, 0, .28);
}

/* O menu nasce DE ONDE foi chamado, e nao do meio do nada: a origem da escala
   fica no canto do botao que o abriu. E a mesma regra do gaveteiro que abre do
   lado da gaveta. */
.drop__menu { transform-origin: 18px top; animation: material-entra .34s var(--mola); }
.idioma__menu { transform-origin: right top; animation: material-entra .28s var(--mola); }

/* Material CHEGA, nao aparece: o desfoque e a escala entram juntos, entao a
   superficie le como vidro se formando, e nao como retangulo com opacidade. */
@keyframes material-entra {
  from { opacity: 0; transform: translateY(-6px) scale(.96); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* --------------------------------------------------------------------------
   4. O menu do celular: uma folha que se arrasta
   --------------------------------------------------------------------------

   Ate aqui o celular NAO TINHA NAVEGACAO. `.navbar__nav` so aparece a partir
   de 1025 px, entao quem chegava pelo telefone (a maioria) nao tinha como
   chegar em Agentes, Aprendizagem ou Planos sem rolar a pagina inteira
   procurando. Nao e um detalhe de estilo, e a pergunta "onde eu posso ir?"
   ficando sem resposta.

   A folha sobe de baixo porque e ali que o polegar alcanca. Ela se arrasta
   para fechar, com a fisica no `apple.js`: o painel gruda no dedo, resiste na
   borda de cima, e ao soltar a mola herda a velocidade da mao. Nao ha estado
   trancado, da para pegar a folha no meio do voo e mandar de volta. */

.menu-btn { display: none; }

.folha[hidden] { display: none; }
.folha {
  position: fixed; inset: 0; z-index: 200;
  display: grid; align-items: end;
}
.folha__veu {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .42);
  /* A opacidade e escrita pelo JS a cada quadro do arraste: o veu acompanha a
     folha em vez de piscar no fim. */
  opacity: var(--veu, 0);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.folha__painel {
  position: relative;
  max-height: min(86dvh, 720px);
  display: flex; flex-direction: column;
  padding: 0 0 max(14px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: rgba(252, 252, 252, .92);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .9) inset, 0 -18px 60px rgba(0, 0, 0, .3);
  transform: translate3d(0, var(--y, 100%), 0);
  will-change: transform;
  /* Rolagem da lista nao vaza para a pagina atras. */
  overscroll-behavior: contain;
}

/* A pega. Ela nao e enfeite: e o que diz que a folha se arrasta, antes de
   alguem tentar. A area tocavel dela e a faixa inteira do cabecalho. */
.folha__pega {
  flex: none;
  display: grid; place-items: center;
  padding: 10px 0 6px;
  cursor: grab;
  touch-action: none;
}
.folha__pega::before {
  content: "";
  width: 38px; height: 5px; border-radius: 360px;
  background: rgba(0, 0, 0, .18);
  transition: background .2s ease, width .3s var(--mola);
}
.folha.is-arrastando .folha__pega { cursor: grabbing; }
.folha.is-arrastando .folha__pega::before { background: rgba(0, 0, 0, .3); width: 46px; }

.folha__topo {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 2px 20px 12px;
  touch-action: none;
}
.folha__titulo { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--g500); }
.folha__x {
  display: grid; place-items: center;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .06); color: var(--g700);
  cursor: pointer;
  transition: transform .3s var(--mola), background .2s ease;
}
.folha__x:active { transform: scale(.9); transition-duration: var(--d-toque); }

.folha__corpo {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 14px 6px;
}
.folha__grupo { padding-bottom: 6px; }
.folha__lbl {
  padding: 12px 8px 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--g500);
}
.folha__item {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 10px;
  border-radius: 14px;
  font-size: 16px; color: var(--ink);
  transition: background .18s ease, transform .3s var(--mola);
}
.folha__item:active { background: rgba(0, 0, 0, .06); transform: scale(.985); transition-duration: var(--d-toque); }
.folha__item .av { width: 34px; height: 34px; }
.folha__item span { margin-left: auto; font-size: 13px; color: var(--g500); }
.folha__acoes {
  flex: none;
  display: grid; gap: 10px;
  padding: 12px 20px 4px;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
.folha__acoes .btn { width: 100%; }

/* A cascata de entrada dos itens. Ela roda so na abertura por clique: durante
   o arraste nao ha entrada, ha o dedo. */
.folha.is-abrindo .folha__item,
.folha.is-abrindo .folha__lbl {
  animation: folha-item .5s var(--mola) both;
  animation-delay: calc(var(--n, 0) * 22ms + 90ms);
}
@keyframes folha-item {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5. A barra de acao do celular
   --------------------------------------------------------------------------

   O botao principal vive no alto da pagina e sai da tela na primeira rolagem.
   Numa pagina de 12.000 px isso significa que, em 95% da leitura, nao havia
   como agir sem voltar ao topo.

   A barra aparece quando o botao do hero sai de vista e SOME quando a secao
   final aparece, que ja tem o proprio botao: dois apelos identicos na mesma
   tela competem entre si e nenhum ganha. */
.barra-acao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .07);
  transform: translate3d(0, 100%, 0);
  transition: transform .46s var(--mola);
}
.barra-acao.is-in { transform: none; }
.barra-acao .btn { flex: 1; min-height: 48px; }
.barra-acao__zap {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--whats); color: #fff;
  transition: transform .3s var(--mola);
}
.barra-acao__zap:active { transform: scale(.92); transition-duration: var(--d-toque); }

/* --------------------------------------------------------------------------
   6. Celular: as correcoes de layout
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .menu-btn {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-right: -8px;
    border: 0; border-radius: 50%;
    background: none; color: var(--ink); cursor: pointer;
    transition: transform .3s var(--mola), background .2s ease;
  }
  .menu-btn:active { transform: scale(.9); background: rgba(0, 0, 0, .05); transition-duration: var(--d-toque); }
  /* As duas barras do icone viram um X quando a folha esta aberta. O simbolo
     conta o estado, entao ele nao pode ser um desenho parado. */
  .menu-btn span {
    display: block; width: 19px; height: 1.8px; border-radius: 2px;
    background: currentColor;
    transition: transform .42s var(--mola), opacity .2s ease;
  }
  .menu-btn span + span { margin-top: 5px; }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span + span { transform: translateY(-3.4px) rotate(-45deg); }
}

@media (max-width: 767px) {
  :root { --barra: 60px; --barra-baixo: 74px; }

  /* O botao sai da barra de cima porque ele passa a morar na barra de baixo,
     ao alcance do polegar, a leitura inteira. Sobra largura para a marca
     respirar em 390 px. */
  .navbar__fim .btn { display: none; }
  .navbar__in { gap: 12px; }

  .barra-acao { display: flex; }
  /* O balao do WhatsApp entra na barra; dois alvos flutuantes no mesmo canto
     e um cobrindo o outro. */
  .whats { display: none; }
  /* Espaco para a barra nao cobrir o fim do rodape. */
  body { padding-bottom: var(--barra-baixo); }

  /* Os dois botoes do hero com a MESMA largura. Larguras diferentes numa pilha
     nao leem como hierarquia, leem como descuido: quem decide a importancia
     aqui e a cor, nao o tamanho da caixa. */
  .hero__btns { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero__btns .btn { width: 100%; }

  /* "Sem cartao de credito" estava em `--g300`, 1,9:1 no branco, praticamente
     invisivel. E a frase que responde a objecao numero um de quem le "teste
     gratis"; escreve-la em cinza ilegivel e o mesmo que nao escrever. */
  .hero__sem-cartao { color: var(--g500); }

  /* Ritmo vertical. 88 px de respiro entre secoes foi desenhado numa tela de
     1440; no celular ele vira tela vazia, e tela vazia numa pagina de rolagem
     longa le como "acabou". */
  .sec { padding-block: clamp(56px, 13vw, 88px); }
  .hero { padding-block: 32px 4px; }
}

/* Fora do celular a frase tambem estava clara demais. */
.hero__sem-cartao { color: var(--g500); }

/* O "nao incluso" dos planos estava em `--g300`: informacao de compra escrita
   num cinza que nao se le. Continua sendo o item apagado da lista, mas agora
   da para saber o que nao vem. */
.features li.off { color: #6f7878; }
.features li.off::before { color: #b6bcbc; }

/* Legenda dos selos: mesmo problema, corpo pequeno e cinza claro. */
.selo span span { opacity: 1; color: var(--g500); }
.agente__nota, .conexao p { opacity: 1; color: var(--g500); }
.cadeia__n { opacity: 1; color: var(--g500); }
.cadeia__p { opacity: 1; color: var(--g700); }
.cadeia__t { opacity: 1; color: var(--g500); }
.tag-breve { opacity: 1; color: var(--g500); border-color: currentColor; }
.fontes span { opacity: 1; }

/* --------------------------------------------------------------------------
   7. O painel do "powered by": os numeros saem de cima da foto
   --------------------------------------------------------------------------

   Os tres numeros flutuavam SOBRE a foto do time, e para eles serem legiveis
   ali a foto levava um veu radial escuro no miolo. Os dois lados perdiam:

     - no desktop, uma elipse preta no meio de uma foto de gente. Foi o defeito
       que o dono fotografou da propria tela: "os numeros estao bugados".
     - em 390 px a foto tem 219 px de altura, e o veu, medido em porcentagem,
       cobria a imagem INTEIRA. Sobrava uma mancha preta com tres textos verdes
       minusculos, e sumiam os rostos, que sao o motivo de a foto estar ali.

   Ajustar o veu so escolheria qual dos dois lados perde. O arranjo e que
   estava errado: texto sobre foto so funciona quando a foto foi COMPOSTA com
   um vazio para ele, e esta nao foi, ela e um retrato de equipe com gente
   ocupando a largura toda.

   Entao a foto fica inteira, sem veu, e os numeros descem para uma faixa
   escura logo abaixo. Cada um ganha o fundo de que precisa em vez de disputar
   o mesmo, e o verde deixa de precisar de duas sombras para se sustentar. */
.pw::after { display: none; }
.pw__grade {
  position: static;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: clamp(8px, 2vw, 20px);
  padding: clamp(18px, 3vw, 28px) clamp(14px, 3vw, 26px);
  background: #0d1211;
}
.pw__num b { text-shadow: none; font-size: clamp(26px, 4.4vw, 40px); }
/* "mil" entra como o "/mes" do preco: subordinado ao numero, e nao do mesmo
   corpo. Escrito no mesmo tamanho, o espaco entre "+50" e "mil" abre um vao
   de dez pixels no meio do dado. */
.pw__num b small { font-size: .5em; font-weight: 500; letter-spacing: 0; opacity: .85; }
.pw__num span {
  margin-top: 7px; text-shadow: none;
  font-size: clamp(10px, 1.1vw, 11.5px); letter-spacing: .05em;
  color: rgba(255, 255, 255, .68);
}

/* A atribuicao. Ela e do mesmo tamanho do resto da letra miuda da pagina, e
   nao menor: tres numeros grandes numa pagina do Nexo leem como numeros DO
   Nexo, e o Nexo ainda nao subiu. Quem carrega o numero e a Nevoa, e a linha
   que diz isso precisa ser lida, nao tolerada. */
.pw__fonte {
  margin-top: 14px;
  font-size: 12.5px; line-height: 1.5; color: var(--g500);
  max-width: 58ch;
}
.pw__fonte b { color: var(--g700); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. O carrossel: o gesto ja e nativo, falta so dizer que ha mais
   --------------------------------------------------------------------------

   A rolagem por toque do proprio navegador ja da tudo o que uma boa
   manipulacao direta pede: acompanha o dedo 1:1, projeta a inercia do arremesso
   e para no ponto de encaixe. Reescrever isso em JavaScript seria trocar a
   fisica do sistema por uma pior.

   O que faltava era a informacao de PROGRESSO: seis cartoes, e a tela mostra
   um. A barra abaixo e desenhada pela propria rolagem (`animation-timeline`),
   sem um unico quadro de JavaScript. Onde o navegador nao conhece a
   propriedade, ela simplesmente nao aparece. */
.trilho-progresso {
  display: none;
  height: 3px; border-radius: 3px;
  margin: 18px var(--gutter) 0;
  background: rgba(0, 0, 0, .08);
  overflow: hidden;
}
.trilho-progresso::after {
  content: "";
  display: block; height: 100%;
  /* A largura e a fracao visivel do trilho, e a posicao e o quanto ja rolou.
     As duas variaveis sao escritas pelo JS no proprio elemento. */
  width: calc(var(--fatia, .34) * 100%);
  margin-left: calc(var(--p, 0) * (100% - var(--fatia, .34) * 100%));
  border-radius: inherit; background: var(--ink);
}
/* A barra so existe depois que o JS mede o trilho: sem medida, ela seria um
   toco parado, que le pior que barra nenhuma. */
.trilho-progresso.is-medida { display: block; }
@media (min-width: 768px) { .trilho-progresso { max-width: 320px; } }

/* No toque a seta continua existindo (nem todo mundo descobre que arrasta),
   mas ela e a segunda opcao, entao nao precisa do peso do preto solido. */
@media (pointer: coarse) {
  .seta--on { background: var(--paper); color: var(--ink); border-color: var(--g300); }
}

/* --------------------------------------------------------------------------
   9. As perguntas: a resposta cresce, nao pula
   --------------------------------------------------------------------------

   `<details>` abre com um salto seco: a altura vai de zero ao total em um
   quadro, e a lista inteira abaixo pula junto. `interpolate-size` deixa o
   navegador interpolar `height: auto`, que era exatamente a peca que faltava
   para isso ser animavel sem JavaScript medindo altura.

   Onde a propriedade nao existe, o comportamento e o de antes. Nada quebra. */
:root { interpolate-size: allow-keywords; }

.faq details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size .42s var(--mola),
    content-visibility .42s allow-discrete,
    opacity .3s ease;
}
.faq details[open]::details-content {
  block-size: auto;
  opacity: 1;
}
.faq summary { transition: opacity .2s ease; }
.faq summary h3 { transition: opacity var(--d-toque) ease; }

/* --------------------------------------------------------------------------
   10. Hover: so onde ha ponteiro
   --------------------------------------------------------------------------

   `:hover` no toque GRUDA: o estado fica aceso ate a pessoa tocar em outro
   lugar, e a pagina parece ter um item selecionado que ninguem selecionou.
   Varias regras do `clone.css` ja tratavam disso caso a caso; aqui a barreira
   e geral. */
@media (hover: none) {
  .agente:hover, .plano:hover, .num:hover, .selo:hover,
  .btn--dark:hover, .cta-banner .btn--branco:hover, .whats:hover {
    transform: none;
    box-shadow: none;
  }
  .btn--dark:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
  .num:hover .num__val { transform: none; }
}

/* No ponteiro, a reacao ganha a curva da mola em vez da rampa curta: 180 ms
   linear-ish le como "trocou de estado", a mola le como "reagiu". */
@media (hover: hover) {
  .agente, .plano, .selo {
    transition:
      transform .42s var(--mola),
      box-shadow .42s var(--mola),
      border-color .24s ease,
      background-color .24s ease;
  }
  .btn--dark:hover { transform: translateY(-1px) scale(1.012); }
  .selo:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .3); }
}

/* --------------------------------------------------------------------------
   11. Acessibilidade: tres sinais independentes, tres respostas diferentes
   --------------------------------------------------------------------------

   Movimento reduzido NAO e "sem retorno visual". A pessoa continua precisando
   saber que o toque foi registrado; o que incomoda e o deslocamento grande, o
   paralaxe e o que passa do ponto. Entao o que sai daqui e o TRANSFORM, e o
   que fica e a opacidade e a cor.

   O `clone.css` desliga `transition` inteira com `!important`, o que tambem
   apaga o retorno de toque. Aqui ele volta, so nas propriedades que nao
   deslocam nada. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .btn:active, .selo:active, .agente:active, .plano:active, .num:active,
  .seta:active, .marca:active, .menu-btn:active, .folha__item:active,
  .folha__x:active, .barra-acao__zap:active {
    transform: none;
    opacity: .6;
    transition: opacity .12s ease !important;
  }
  .folha__painel, .barra-acao {
    transition: opacity .2s ease !important;
  }
  .folha.is-abrindo .folha__item, .folha.is-abrindo .folha__lbl { animation: none; }
  .trilho-progresso::after { animation: none; }
  .navbar::after { transition: opacity .2s ease !important; }
}

/* Transparencia reduzida: o vidro vira superficie solida. Manter o desfoque
   aqui e ignorar um pedido explicito de quem tem dificuldade de ler sobre
   fundo que se move. */
@media (prefers-reduced-transparency: reduce) {
  .navbar, .navbar.is-stuck { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--g200); }
  .navbar::after { display: none; }
  .drop__menu, .idioma__menu, .folha__painel, .barra-acao {
    background: #fff;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .folha__veu { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Contraste alto: fundo quase solido e borda definida, porque o que sustenta a
   separacao deixa de ser a sombra suave e passa a ser a aresta. */
@media (prefers-contrast: more) {
  :root { --g500: #4a5252; --g300: #9aa0a0; }
  .navbar, .drop__menu, .idioma__menu, .folha__painel, .barra-acao {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .5);
  }
  .navbar { border-width: 0 0 1px; }
  .btn--ghost { border-color: var(--ink); }
  .selo, .num, .plano, .agente { border-color: rgba(0, 0, 0, .38); }
}

/* --------------------------------------------------------------------------
   12. Detalhes que so aparecem quando faltam
   -------------------------------------------------------------------------- */

/* Alvo de 44 px no seletor de idioma e no menu, medido com o `padding` e nao
   com a fonte: aumentar a letra empurraria a barra inteira. */
@media (pointer: coarse) {
  .folha__item { min-height: 52px; }
  .folha__x { width: 44px; height: 44px; }
}

/* A imagem do hero entra uma vez e para, e o `will-change` sai depois disso.
   Camada promovida custa memoria de GPU proporcional a area, e essa e a maior
   imagem da pagina. */
.heroi img { will-change: auto; }

/* A pagina nao rola atras da folha aberta.

   O caminho obvio, `overflow: hidden` no `<html>`, foi TESTADO aqui e tem dois
   defeitos. O primeiro e medido: a altura do documento muda 55 px no instante
   em que a regra entra (o `overflow` cria um contexto de formatacao novo e as
   margens deixam de colapsar), e o navegador mexe na rolagem para compensar.
   O segundo e conhecido: o Safari do iPhone simplesmente ignora `overflow`
   nesses dois elementos para o gesto de toque, e a pagina rola atras da folha.

   Fixar o corpo com o deslocamento negativo da rolagem atual resolve os dois:
   a posicao visual e identica, porque o `top` compensa exatamente o que a
   fixacao tirou, e o toque nao tem mais o que rolar. Ao fechar, o JS devolve a
   rolagem ao pixel de onde ela saiu, entao ninguem perde o lugar da leitura. */
html.folha-aberta body {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}

/* O `<dialog>` nativo nao entra aqui de proposito: ele traz um `::backdrop`
   que nao aceita a opacidade variavel que o arraste escreve quadro a quadro. */

/* ==========================================================================
   13. O que a auditoria de celular achou depois
   ==========================================================================

   Tudo abaixo saiu de uma leitura das medidas reais em 360, 390 e 430 px, e
   nao de impressao. Onde ha um numero no comentario, ele foi medido. */

/* --- A faixa de numeros nao cabe em tres colunas num telefone -------------

   Em 360 px sobram 320 px para o `.wrap`, e tres colunas com folga dao 92 px
   cada. "TAREFAS AUTOMATIZADAS" em caixa alta nao entra em 92 px: cada celula
   virava uma torre de quatro linhas de 10 px sobre fundo quase preto.

   Uma coluna, numero e rotulo na MESMA linha, le de relance. Tres torres nao. */
@media (max-width: 767px) {
  .pw__grade {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 18px;
    text-align: left;
  }
  .pw__num {
    display: grid; grid-template-columns: auto 1fr;
    align-items: baseline; gap: 12px;
  }
  .pw__num b { font-size: 30px; }
  /* As quebras foram desenhadas para a coluna estreita do desktop; aqui elas
     so partem a frase no meio. */
  .pw__num span br { display: none; }
  .pw__num span { margin-top: 0; font-size: 12px; letter-spacing: .04em; }
}

/* --- Entrelinha: o acento do portugues precisa de altura ------------------

   `line-height: .92` foi desenhado para 78 px. No telefone o `clamp()` bate no
   piso (h1 = 42 px, h2 = 32 px), e a entrelinha apertada chega justamente no
   tamanho onde ela nao sobrevive: em "A solucao / completa para / seu negocio"
   o acento do "o" de negocio sobe 2,9 px ACIMA da linha de base anterior,
   enquanto a perna do "p" de "completa" desce 8,4 px abaixo dela. Os dois
   ocupam a mesma coluna. Em ingles isso nao acontece; em portugues, sempre.

   O tracking afrouxa junto, pela mesma razao: -.045em e medida de 78 px. */
@media (max-width: 767px) {
  h1 { line-height: 1.02; letter-spacing: -.035em; }
  h2 { line-height: 1.06; letter-spacing: -.03em; }
  .cita { line-height: 1.25; }

  /* As quebras manuais foram medidas numa tela de 1440 px. Em 320 px de
     coluna elas produzem linha de uma palavra so: "Aproveita a condicao /
     limitada / para novos membros". `text-wrap: balance` nao resolve, porque
     o `<br>` vence a decisao do navegador. Sem eles, o balanceamento faz o
     trabalho que ele existe para fazer.

     ATENCAO, e o defeito que isto ja causou uma vez: cada `<br>` do HTML tem
     um ESPACO antes dele exatamente por causa desta regra. Apagar `<br>` sem
     o espaco cola as palavras vizinhas, e o titulo do hero virou
     "solucaocompleta parase u negocio" no primeiro teste. O espaco antes de
     uma quebra e ignorado no desktop, entao ele nao custa nada la. */
  h1 br, h2 br, .agente h3 br, .cta-banner h2 br { display: none; }
}

/* --- O corpo de texto que ficou pequeno demais ----------------------------

   A pagina tem um piso de 12,5 a 13,5 px para quase todo texto de substancia,
   herdado do desenho de desktop. No telefone esse piso e o tamanho de leitura
   principal, nao de legenda: a primeira resposta das perguntas tem 1.200
   caracteres, e a 13 px numa coluna de 320 px isso da 24 linhas. */
@media (max-width: 767px) {
  .faq p { font-size: 15px; line-height: 1.62; padding-bottom: 20px; }
  .faq summary h3 { font-size: 16px; }
  .faq summary { min-height: 60px; gap: 14px; }
  .num__txt { font-size: 14px; line-height: 1.55; margin-top: 14px; }
  .seg__p { font-size: 14px; }
  .features li { font-size: 14.5px; line-height: 1.45; }
  .plano__sub { font-size: 14px; }
  .cadeia__p { font-size: 15px; }
  .cadeia__n, .fontes, .selo span span, .agente__nota { font-size: 13px; }
  .agente__desc { font-size: 14.5px; }
}
/* 28 px separavam o numero da frase que o explica, e 10 px separavam o rotulo
   do numero: a hierarquia estava invertida, o argumento ficava longe do dado
   que ele justifica. */
.num__txt { margin-top: 16px; }

/* --- Dois controles que nao tinham contorno visivel -----------------------

   A borda do botao secundario e `--g200` (#eaeaea): 1,24:1 no branco e 1,06:1
   sobre o cinza do cartao de plano, ou seja, "Comecar" e "Fale com um
   consultor" eram texto solto, sem nenhuma aresta de controle. No celular nao
   existe hover para revelar depois. O criterio de contraste de componente
   pede 3:1, e este passa com folga sem escurecer o desenho.

   O mesmo vale para o "x" dos itens nao inclusos: ele era 1,8:1 e e o UNICO
   sinal que separa "vem no plano" de "nao vem". */
:root { --borda-btn: #868b8b; }
.btn--ghost { border-color: var(--borda-btn); }
.features li.off::before { color: #6f7878; }

/* --- Retorno de toque so no que responde ao toque -------------------------

   `.agente`, `.plano` e `.num` sao cartoes, nao controles: nada acontece ao
   toca-los. Um cartao que afunda sob o dedo e depois nao faz nada le como
   toque que falhou, e no telefone essa animacao e o unico canal de retorno
   que existe. Fica so no `.selo`, que e link de verdade. */
.agente:active, .plano:active, .num:active { transform: none; }

/* --- O carrossel: cartao de 700 px de altura num telefone de 844 -----------

   O retrato do agente e `width: 100%; aspect-ratio: 1`, ou seja, 263 px de
   lado dentro de um cartao de 295. Com o texto embaixo, o cartao passava de
   700 px: mais alto que a tela util. Num trilho que encaixa na horizontal,
   cartao mais alto que a tela significa que nunca da para ver um cartao
   inteiro, e a rolagem vertical no meio do encaixe faz perder o lugar.

   O retrato vira avatar redondo: o rosto continua reconhecivel (que e o
   motivo de ele existir, o mesmo do painel), e o cartao cabe na tela. */
@media (max-width: 767px) {
  .agente { padding: 16px 16px 22px; }
  .agente__figura {
    width: 84px; height: 84px; aspect-ratio: 1;
    border-radius: 50%; object-position: center 15%;
  }
  .agente__ape { margin-top: 14px; }
  .agente__lbl { margin-top: 18px; }

  /* As setas ficam no canto superior esquerdo, o quadrante menos alcancavel
     de uma mao so, e a da esquerda ja nasce desabilitada. No telefone quem
     navega o trilho e o dedo; o que falta e saber QUANTO falta, e disso cuida
     a barra de progresso. */
  .setas { display: none; }
  .trilho-progresso { margin-top: 14px; height: 4px; }

  /* A varredura branca atravessa uma caixa de 320 px de largura por ~660 de
     altura: em vez de linha de luz passando, o bloco inteiro pisca. */
  .seg__varre { display: none; }
  /* Sem a divisoria vertical do desktop, os tres itens de seguranca viravam
     tres paragrafos densos dentro de uma caixa unica, sem nada entre eles. */
  .seg__item + .seg__item { border-top: 1px solid rgba(0, 0, 0, .09); }
}

/* --- Ordem de leitura no telefone ----------------------------------------

   `.duas` empilha na ordem do DOM, que foi escrita para duas colunas. O
   resultado no telefone: no depoimento, o titulo prepara a citacao, vem um
   retrato de 427 px de altura, e so entao a citacao. A imagem separa a
   pergunta da resposta. */
@media (max-width: 899px) {
  .duas { display: flex; flex-direction: column; }
  .mentoria-foto { order: 2; }
  .duas--dep .retrato { order: 2; max-width: 260px; margin-inline: auto; }
}

/* --- Os planos empilhados abrem pelo cartao errado ------------------------

   Em tres colunas, Essential a esquerda esta certo. Empilhado, a primeira
   coisa que o comprador le e R$ 2.000 com tres de cinco itens riscados, o que
   e a pior abertura possivel de uma tabela de precos. O cartao que ancora a
   comparacao e o Business, que e o proprio "mais escolhido". */
@media (max-width: 767px) {
  .planos { display: flex; flex-direction: column; }
  .plano--destaque { order: -1; }
  /* Os 54 px de altura minima existem para alinhar tres subtitulos lado a
     lado. Em coluna unica nao ha o que alinhar, e eles viram buraco. */
  .plano__sub { min-height: 0; }
}

/* --- O rodape gastava 108 px dos 360 em recuo --------------------------- */
@media (max-width: 767px) {
  .rodape__cartao { margin-block: 40px 24px; padding: 26px 20px 0; }
  .rodape__cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .rodape__marca { margin-top: 40px; }
  .rodape__powered { padding-bottom: 16px; }
}

/* --- A barra de acao e a folha nao podem coexistir ------------------------

   O painel da folha e translucido, e a barra fica em `z-index: 90` logo
   abaixo dela: a pilula preta e o circulo verde da barra APARECIAM atras do
   proprio botao da folha, dois pares identicos sobrepostos. */
html.folha-aberta .barra-acao { transform: translate3d(0, 100%, 0); }

/* A aresta da barra era 1,2:1. Sobre as muitas secoes brancas da pagina a
   barra sumia e os dois controles pareciam soltos no meio do texto. */
.barra-acao {
  box-shadow: 0 -.5px 0 rgba(0, 0, 0, .14), 0 -12px 24px -18px rgba(0, 0, 0, .25);
}
.barra-acao .btn { font-size: 15px; }

/* Dois `backdrop-filter` de largura inteira compondo a cada quadro de rolagem
   custam quadro em aparelho intermediario. A barra de baixo passa sobre
   conteudo comum e nao precisa do vidro; a de cima fica, com raio menor. */
@media (max-width: 767px) {
  .navbar {
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
  }
  .barra-acao {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* --- O foco nao pode terminar debaixo da barra fixa ----------------------

   `scroll-padding-top` ja cuidava da barra de cima. Sem o par de baixo, andar
   de Tab leva o elemento focado para debaixo da barra de acao, e o anel de
   foco fica escondido. */
html { scroll-padding-bottom: calc(var(--barra-baixo) + 16px); }

/* --- A lista da folha continua depois do corte --------------------------- */
.folha__corpo {
  /* Cinco dos doze itens ficam abaixo da dobra do painel, e a borda do bloco
     de acoes logo abaixo lia como fim da lista. A mascara desmancha a ultima
     faixa, que e o sinal universal de "tem mais". */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  /* O gesto vertical dentro da lista e rolagem, nao arraste da folha. */
  touch-action: pan-y;
}
/* O painel ja e quase opaco (.92), entao o desfoque atras dele nao aparecia -
   e ele estava sendo recalculado a cada quadro do arraste, que e a operacao
   mais cara que existe no Safari do iPhone, no exato momento em que travar e
   mais imperdoavel. Sai o vidro, entra superficie solida. */
.folha__painel {
  background: #fcfcfc;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* `dvh` nao existe no Safari anterior ao 15.4, e sem o par em `vh` a regra
     inteira e descartada e o painel fica sem limite de altura. */
  max-height: min(86vh, 720px);
  max-height: min(86dvh, 720px);
  /* A folha sangra para baixo da borda da tela: sem isso, a resistencia
     elastica ao arrastar para cima descolava a folha do fundo e o veu
     aparecia por baixo dela. */
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  margin-bottom: -40px;
  padding-block-end: calc(max(14px, env(safe-area-inset-bottom)) + 40px);
}
.folha__veu {
  /* Arrastar sobre o veu nao pode rolar a pagina atras. */
  touch-action: none;
  overscroll-behavior: contain;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* O apelido volta para junto do nome. Empurrado para a borda direita, cada
   linha lia "Vendas e Atendimento ............ Vex", com um vao no meio. */
.folha__item span { margin-left: 0; opacity: .55; }
.folha__item { gap: 10px; }

/* --- O atalho para o conteudo -------------------------------------------

   Primeiro elemento focavel da pagina. Sem ele, chegar ao conteudo pelo
   teclado custa a barra inteira, e no telefone a folha soma mais doze alvos. */
.pular {
  position: absolute; left: 12px; top: 12px; z-index: 300;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font-size: 14px;
  transform: translateY(-160%);
  transition: transform .28s var(--mola);
}
.pular:focus-visible { transform: none; }

/* --- Promocao de camada que ninguem cancelava ---------------------------

   `will-change` na imagem do hero e nas ~14 palavras do titulo animado fica
   ligado para sempre, e cada uma custa memoria de GPU proporcional a area.
   As duas animacoes rodam UMA vez; depois disso a dica so cobra. */
.pal-h2.is-in .pal { will-change: auto; }
.heroi img { will-change: auto; }