/* ============================================================================
   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}}