/* ============================================================================
   Reforma de conversão — agosto de 2026

   Carrega depois de styles.css e rebrand.css, e só contém o que a reforma
   mudou. Fica separado de propósito: se alguma peça converter pior no teste,
   basta tirar a regra daqui em vez de garimpar dentro dos outros dois arquivos.

   Resumo do que mudou de estrutura:
     - o verificador de aparelho subiu da seção 05 para a dobra
     - o vídeo da HUB desceu da dobra para a seção "tá, e como faz?"
     - o menu do cabeçalho saiu
     - entraram três blocos: privacidade, o que esperar do cadastro e reversão
       de risco
   ========================================================================== */

/* ---------- Cabeçalho sem menu ----------

   No lugar dos quatro links de saída, os dois selos que respondem "é golpe?"
   antes de a pessoa ler a primeira linha. */
.header-trust {
  display: flex;
  gap: 14px;
  margin: 0 0 0 auto;
  font: 500 10px var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #08753c;
}
.header-trust span { display: inline-flex; align-items: center; gap: 6px; }
.header-trust span::before {
  content: "";
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--acid);
}

.header-instructions-cta {
  min-height: 42px;
  margin-left: 22px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--acid);
  color: var(--ink);
  font: 700 13px/1 var(--body);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.header-instructions-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
  background: #00ee75;
}

.header-instructions-cta:active {
  transform: translate(0, 0);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---------- Dobra ----------

   A headline nova é mais longa que a antiga, então o tamanho cai um pouco para
   caber sem virar um bloco de seis linhas. O em perdeu o white-space: nowrap
   que vinha de styles.css: com "R$ 25,00" ele até cabia, mas qualquer variante
   de teste um pouco mais longa estourava a tela de 320px. */
.hero h1 { font-size: clamp(42px, 4.3vw, 60px); }
.hero h1 em { white-space: normal; }
.hero-lead strong { font-weight: 700; }

.hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
.hero-cta-nota {
  max-width: 340px;
  margin: 0;
  font: 500 11px/1.45 var(--mono);
  color: #655f52;
}

/* Aprovado, a nota deixa de ser letra miúda e vira o veredito. É o que sustenta
   o clique no botão logo acima dela, principalmente no celular, onde o painel
   inteiro fica abaixo da primeira tela. */
.hero-cta-nota[data-resultado="compativel"] {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--acid);
  background: rgba(15, 217, 107, .1);
  color: #08753c;
  font-weight: 600;
}
.hero-cta-nota[data-resultado="compativel"]::before {
  content: "✓";
  font-size: 13px;
  line-height: 1.2;
}
.hero-cartao b { background: transparent; border: 1px solid var(--ink); }

/* Informação de remuneração: próxima do título, mas sem parecer uma promessa.
   O bloco é compacto para a ressalva ser lida como parte da informação. */
.hub-rate-card {
  max-width: 610px;
  margin: 14px 0 16px;
  padding: 13px 15px;
  border: 1px solid var(--ink);
  border-left: 4px solid var(--acid);
  background: rgba(247, 243, 232, .82);
}

.hub-rate-main { min-width: 0; }
.hub-rate-source {
  margin: 0 0 4px;
  color: #08753c;
  font: 700 10px/1.25 var(--mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}
.hub-rate-source span {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  display: inline-block;
  border-radius: 50%;
  background: var(--acid);
}
.hub-rate-value {
  margin: 0 0 7px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  row-gap: 2px;
  color: var(--ink);
  line-height: 1;
}
.hub-rate-value strong { font: 700 clamp(36px, 4vw, 48px)/.85 var(--display); letter-spacing: -.06em; }
.hub-rate-value span { font: 700 17px/1 var(--mono); }
.hub-rate-value b { font: 650 13px/1.35 var(--body); letter-spacing: 0; }
.hub-rate-main > p:not(.hub-rate-source):not(.hub-rate-value) { margin: 0; color: #4f5049; font-size: 13px; line-height: 1.42; }
.hub-rate-main > p strong { color: var(--ink); font-weight: 650; }
.hub-rate-main > a {
  width: max-content;
  min-height: 28px;
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #08753c;
  border-bottom: 1px solid currentColor;
  font: 700 11px/1 var(--mono);
}

/* ---------- Ponte para o passo a passo ----------

   Entra logo depois da primeira explicação, quando a pessoa já entendeu a
   proposta mas ainda não precisou atravessar a página inteira. */
.instructions-bridge {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 34px clamp(28px, 4vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
  gap: clamp(30px, 6vw, 86px);
  align-items: center;
  border: 1px solid var(--ink);
  background:
    radial-gradient(circle at 88% 25%, rgba(15, 217, 107, .24), transparent 28%),
    #151714;
  color: #f7f2e7;
  box-shadow: 8px 8px 0 var(--acid);
}

.instructions-bridge::after {
  content: "02";
  position: absolute;
  right: 24px;
  bottom: -35px;
  color: rgba(255, 255, 255, .045);
  font: 800 170px/.8 var(--body);
  pointer-events: none;
}

.instructions-bridge-copy,
.instructions-bridge-action { position: relative; z-index: 1; }

.instructions-bridge-kicker {
  margin: 0 0 12px;
  color: var(--acid);
  font: 700 12px/1.3 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.instructions-bridge h2 {
  max-width: 720px;
  margin: 0;
  color: #fffaf0;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.05em;
}

.instructions-bridge-copy > p:last-child {
  max-width: 62ch;
  margin: 18px 0 0;
  color: #c5c6bf;
  font-size: 16px;
  line-height: 1.58;
}

.instructions-bridge-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 11px;
}

.instructions-bridge-action .button {
  width: 100%;
  min-height: 56px;
  justify-content: space-between;
  border-color: #fffaf0;
  font-size: 15px;
}

.instructions-bridge-action small {
  color: #aeb0a9;
  font: 500 12px/1.4 var(--mono);
  text-align: center;
}

/* ---------- Faixa de checagem, encostada na dobra ----------

   Largura inteira em vez de cartão numa coluna. Como cartão, ele ou tomava o
   lugar do vídeo ou deixava meia tela vazia ao lado. Como faixa, filtra o
   tráfego no mesmo lugar do rolamento e ainda fecha a linha. */
.checagem {
  width: var(--page);
  margin: 0 auto;
  padding: 0 0 18px;
}
.checagem .device-panel { width: 100%; }

.device-band {
  display: grid;
  /* A coluna de ações é fixa e estreita de propósito: cada pixel que ela toma é
     um pixel a menos para os cinco dados, que são o que a pessoa lê. */
  grid-template-columns: minmax(230px, .8fr) minmax(0, 2fr) 250px;
  align-items: stretch;
}
.device-band > * + * { border-left: 1px solid #414141; }

/* O resultado é o título da vez: responde a pergunta que o botão acabou de
   fazer, logo acima. */
.device-band .device-result {
  min-height: 0;
  padding: 22px 24px;
  border-bottom: 0;
  grid-template-columns: 60px 1fr;
  gap: 18px;
}
.device-band .device-result-icon { width: 52px; height: 70px; }
.device-band .device-result h2 {
  margin: 6px 0 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.04em;
}

/* Os cinco dados deitam em linha e o rótulo sobe para cima do valor: em pé,
   cada um comia uma faixa de 55px de altura e a barra virava um cartão de novo. */
.device-band .device-data {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.device-band .device-data div {
  min-height: 0;
  display: block;
  padding: 22px 16px;
  border-bottom: 0;
}
.device-band .device-data div + div { border-left: 1px solid #414141; }
.device-band .device-data dd {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}

.device-acoes { display: grid; align-content: stretch; }
.device-acoes .device-official { height: 100%; padding: 16px 22px; }
.device-acoes .device-refresh {
  width: auto;
  margin: 0;
  border: 0;
  border-top: 1px solid #414141;
}
.checagem .device-privacy { margin: 14px 24px; }

/* ---------- Ancoragem de tempo, na seção 01 ----------

   Não existe preço para ancorar, porque não existe compra. A âncora é a hora
   que hoje paga zero. */
.ancora {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--acid);
  background: rgba(15, 217, 107, .08);
  font-size: 16px;
  line-height: 1.55;
}
.ancora b { display: block; margin-top: 6px; font-weight: 700; }

/* ---------- "Antes de clicar, o que te espera de verdade" ----------

   O cadastro real tem 27 telas, verificação de identidade com selfie e um
   segundo aplicativo. Este bloco conta isso antes.

   Ocupa da segunda coluna até o fim, e não só a terceira: preso na terceira ele
   deixava meia largura da seção vazia à esquerda, que é o buraco que mais
   aparecia na página. Os quatro itens deitam em linha pelo mesmo motivo. */
.processo {
  grid-column: 2 / -1;
  margin-top: 34px;
  padding: 26px 28px 28px;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
}
.processo h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.processo > p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #4a4638; }
.processo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.processo li {
  padding: 14px 18px 14px 0;
  font-size: 13px;
  line-height: 1.55;
  color: #4a4638;
}
.processo li + li { border-left: 1px solid var(--line); padding-left: 18px; }
.processo li b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 700; }

/* O CTA da seção também subia preso na terceira coluna. */
.steps-cta { grid-column: 2 / -1; }

/* A fila do kit é a única escassez real que este projeto tem: a posição vem da
   tela da própria HUB. Nada aqui é inventado nem reinicia a cada visita. */
.processo-fila {
  margin: 16px 0 0;
  font: 500 12px/1.55 var(--mono);
  color: #08753c;
}

/* ---------- Bloco de privacidade ----------

   Era a única das cinco objeções principais que a página não tocava em lugar
   nenhum, e vem logo depois de a pessoa ver que vai gravar dentro de casa.

   Duas colunas de conteúdo de verdade: título à esquerda, as três respostas à
   direita. Com o texto solto numa coluna só, sobravam 420px de nada. */
.privacidade {
  padding-top: 64px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 5vw;
  align-items: start;
  border-top: 1px solid var(--line);
}
.privacidade-marca {
  width: 72px;
  aspect-ratio: 1;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--acid);
  font-family: var(--display);
  font-size: 36px;
  font-weight: 500;
}
.privacidade h2 {
  font-family: var(--display);
  font-size: clamp(36px, 3.9vw, 54px);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .96;
}
.privacidade-copy {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.privacidade-copy li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: #4a4638;
}
.privacidade-copy b { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 700; }

/* ---------- Seção 05 ----------

   O painel subiu para a faixa da dobra, e a coluna da direita passou a ser a
   lista de modelos, que antes ficava espremida embaixo do texto. */
.device-specs { align-self: center; }
.device-specs .phone-needs { margin-top: 0; }
.device-voltar { margin-top: 26px; }
.device-voltar a {
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font: 500 12px var(--mono);
  color: #08753c;
}

/* ---------- Reversão de risco ----------

   Sem compra não existe garantia no sentido clássico. O risco que essa pessoa
   sente é tempo perdido, e é esse que precisa ser zerado antes do último
   botão. */
.risco {
  padding-top: 60px;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 5vw;
  align-items: center;
  border-top: 1px solid var(--line);
}
.risco h2 {
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .9;
}
.risco-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.risco-lista li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.55;
}
.risco-lista li::before {
  content: "✓";
  color: #08753c;
  font-weight: 700;
}

/* ---------- Seções 01 e 02: fechar o vazio ----------

   As duas herdaram do rebrand uma primeira coluna larga que só carrega o número
   da seção, mais 5vw de intervalo entre cada coluna. Num monitor de 1280 isso
   era perto de 330px gastos em nada antes de a primeira palavra começar.

   A coluna do número passa a ter a largura do número, e o intervalo cai para
   3vw. Na 02 a introdução também sai da coluna do meio, que ficou quase vazia
   quando o vídeo voltou para a dobra, e vira cabeçalho em cima da lista de
   passos: assim não sobra uma coluna alta e oca ao lado dos quatro itens. */
.why {
  grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 3vw;
}
.why-body { max-width: 520px; }

.steps { grid-template-columns: 132px minmax(0, 1fr); gap: 3vw; }
.steps-intro,
.step-list,
.processo,
.steps-cta { grid-column: 2; }
.steps-intro { max-width: 760px; margin-bottom: 6px; }
.steps-intro h2 { margin-bottom: 6px; }

/* ---------- Respiro vertical ----------

   O rebrand deixou 88px em cima e embaixo de quase toda seção. Somado à altura
   de cada bloco, a página virava uma sequência de vazios entre pedaços de
   conteúdo. Em 62px as seções continuam separadas sem obrigar a pessoa a rolar
   por nada. */
.why,
.steps,
.task-section,
.good-fit,
.device-section,
.safety,
.faq {
  padding-top: 62px;
  padding-bottom: 62px;
}
.hero { padding-bottom: 42px; }

@media (max-width: 980px) {
  /* styles.css já passava estas três seções para duas colunas nesta faixa, mas
     rebrand.css redefine as colunas sem media query e carrega depois, então a
     regra antiga nunca chegava a valer. O conteúdo era empurrado para a segunda
     coluna e a terceira ficava vazia: era daí que vinham os buracos de 280px a
     310px do lado direito em tela de tablet e de notebook pequeno. */
  .why { grid-template-columns: 110px minmax(0, 1fr); }
  .why-body { max-width: none; }
  .steps { grid-template-columns: 110px minmax(0, 1fr); }
  .safety { grid-template-columns: 110px minmax(0, 1fr); }
  .safety-copy { grid-column: 2; }

  /* A faixa de checagem não cabe deitada nesta largura: os cinco dados em linha
     ficariam com menos de 100px cada. Vira bloco, com os dados em duas colunas. */
  .device-band { grid-template-columns: 1fr; }
  .device-band > * + * { border-left: 0; border-top: 1px solid #414141; }
  .device-band .device-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-band .device-data div + div { border-left: 0; }
  .device-band .device-data div:nth-child(even) { border-left: 1px solid #414141; }
  .device-band .device-data div:not(:nth-last-child(-n+2)) { border-bottom: 1px solid #414141; }
  .device-acoes { grid-auto-flow: column; min-width: 0; }
  .device-acoes .device-refresh { border-top: 0; border-left: 1px solid #414141; }

  .privacidade { grid-template-columns: 1fr; gap: 26px; }
  .risco { grid-template-columns: 1fr; gap: 24px; }
  .device-specs { align-self: start; }
}

@media (max-width: 620px) {
  /* No celular o cabeçalho já é apertado, e os mesmos dois selos aparecem
     inteiros logo abaixo do botão. */
  .header-trust { display: none; }

  .site-header { gap: 8px; }
  .header-instructions-cta {
    min-height: 40px;
    margin-left: auto;
    padding: 0 11px;
    gap: 7px;
    font-size: 12px;
    box-shadow: 2px 2px 0 var(--ink);
  }

  /* O corpo maior da headline não cabia em 375px sem quebrar a frase do valor
     em pedaços. Em 36px, com o realce no mesmo tamanho do resto da linha, ela
     fecha em quatro linhas e "R$ 25,00 a hora" fica inteira em uma delas. */
  body .hero h1 { font-size: clamp(30px, 9.6vw, 36px); }
  body .hero h1 em { font-size: 1em; }

  .hero-actions { width: 100%; }
  body .hero-actions .button { width: 100%; }
  .hero-cta-nota { max-width: none; text-align: center; }

  .hub-rate-card { margin: 12px 0 15px; padding: 12px 13px; }
  .hub-rate-value { margin-bottom: 6px; }
  .hub-rate-main > p:not(.hub-rate-source):not(.hub-rate-value) { font-size: 13px; line-height: 1.45; }
  .hub-rate-main > a { margin-top: 8px; }

  .instructions-bridge {
    min-height: 0;
    padding: 28px 22px 30px;
    grid-template-columns: 1fr;
    gap: 26px;
    box-shadow: 5px 5px 0 var(--acid);
  }
  .instructions-bridge::after { right: 8px; bottom: -18px; font-size: 110px; }
  .instructions-bridge h2 { font-size: clamp(32px, 10vw, 42px); }
  .instructions-bridge-copy > p:last-child { font-size: 15px; }
  .instructions-bridge-action .button { min-height: 54px; }

  .checagem { padding-bottom: 10px; }
  .device-band .device-data { grid-template-columns: 1fr; }
  .device-band .device-data div:nth-child(even) { border-left: 0; }
  .device-band .device-data div:not(:last-child) { border-bottom: 1px solid #414141; }
  .device-acoes { grid-auto-flow: row; }
  .device-acoes .device-refresh { border-top: 1px solid #414141; border-left: 0; }

  /* styles.css já joga estas seções para uma coluna aqui, mas as regras deste
     arquivo (a base e a de 980px) também valem nesta largura e, carregando
     depois, ganham das de lá. Sem repor as duas coisas (as colunas da grade E o
     grid-column de cada filho), a lista de passos ficava com 191px de largura
     num celular de 375, e a seção inteira passava de 5.000px de altura. */
  .steps { grid-template-columns: 1fr; }
  .steps-intro,
  .step-list,
  .processo,
  .steps-cta { grid-column: 1; }

  .safety { grid-template-columns: 1fr; }
  .safety-copy { grid-column: 1; }

  .processo { padding: 22px 20px 24px; }
  .processo h3 { font-size: 21px; }
  .processo ul { grid-template-columns: 1fr; }
  .processo li { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .processo li + li { border-left: 0; padding-left: 0; }

  .privacidade { padding-top: 48px; padding-bottom: 48px; }
  .privacidade-marca { width: 58px; margin-bottom: 16px; font-size: 28px; }
  .privacidade-copy li { font-size: 15px; }

  .risco { padding-top: 46px; padding-bottom: 46px; }

  /* ---------- Legibilidade no celular ----------

     A maior parte do tráfego chega por anúncio no celular, e boa parte do
     público tem mais de 35 anos. Corpo de 11 a 13px em fundo claro é onde essa
     pessoa desiste de ler, e era o tamanho que sobrava nos blocos novos e nos
     rótulos herdados. Piso de 15px para texto que precisa ser lido, 13px para
     rótulo curto, e altura de linha folgada nos dois casos. */
  .hero-cta-nota { font-size: 14px; line-height: 1.5; }
  .visual-note { font-size: 12px; line-height: 1.55; }

  .processo > p { font-size: 15px; line-height: 1.65; }
  .processo li { font-size: 15px; line-height: 1.6; }
  .processo li b { font-size: 15px; }
  .processo-fila { font-size: 14px; line-height: 1.6; }

  .privacidade-copy li { font-size: 16px; line-height: 1.62; }
  .risco-lista li { font-size: 16px; line-height: 1.6; }

  .device-band .device-data dt { font-size: 13px; }
  .device-band .device-data dd { font-size: 15px; line-height: 1.45; }
  .device-band .device-result small { font-size: 13px; }
  .device-band .device-result h2 { font-size: 24px; }
  .checagem .device-privacy { font-size: 14px; line-height: 1.6; }
  .device-acoes .device-official,
  .device-acoes .device-refresh { font-size: 14px; }

  .device-voltar a { font-size: 14px; }
  .header-trust { font-size: 13px; }
  .footer-bottom p { font-size: 14px; line-height: 1.6; }

  /* Alvo de toque: os links do rodapé tinham 23px de altura e a seta de rolagem
     29px. Dedo não acerta isso, e no rodapé estão a política de privacidade e o
     link de começar. Piso de 44px, que é o mínimo recomendado. */
  .footer-links a,
  .scroll-hint {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Dentro da lista de modelos: o "Onde todo mundo erra" é a linha que evita a
     confusão do Galaxy FE, e estava saindo em 10px. */
  .modelos-pegadinha strong { font-size: 14px; }
  .modelo-nome small { font-size: 14px; line-height: 1.5; }
  .clips-titulo,
  .clips-fonte { font-size: 14px; line-height: 1.5; }
  .microcopy { line-height: 1.5; }
}

/* A primeira tela é conteúdo principal, não uma animação decorativa. Deixá-la
   invisível até o IntersectionObserver executar atrasava o LCP e podia exibir
   um quadro vazio em celulares lentos. As revelações abaixo da dobra continuam. */
.hero > .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* As condições precisam continuar visíveis no celular. A versão anterior
   escondia justamente a ressalva sobre disponibilidade e aprovação. */
@media (max-width: 620px) {
  body .hero-lead-extra {
    display: block;
    margin-top: 12px;
    color: #4f514b;
    font-size: 14px;
    line-height: 1.58;
  }

  body .hero-copy .microcopy { display: block; }
}