/* ==========================================================================
   pagina.css — O QUE A LP /estruturacao ACRESCENTA AO DESIGN SYSTEM v4
   --------------------------------------------------------------------------
   Terceira folha, carregada depois de tokens.css e lp.css. Ela NÃO edita o
   design system: tokens.css e lp.css são cópias byte a byte da v4
   (projetos/lp-estruturacao-funil/design-system/v4), para que uma correção
   lá desça para cá por cópia, sem merge. Quando esta página precisa de outro
   valor, ela SOBRESCREVE — e a sobrescrita vence por ordem de folha, porque
   tem a mesma especificidade da regra original.

   Consequência prática, que vale para o arquivo inteiro: uma regra-base deste
   arquivo (sem @container) vence também as @container do lp.css de mesma
   especificidade. Sempre que uma regra daqui mexe numa propriedade que o
   lp.css muda por largura, o valor de desktop precisa ser redeclarado numa
   @container DESTE arquivo. Esses pontos estão marcados com "REDECLARA".

   AS REGRAS DA v4 VALEM AQUI SEM EXCEÇÃO:
     1. nenhum valor chumbado — todo px, ms, peso e cor sai de um token; os
        tokens desta página estão no :root logo abaixo;
     2. NENHUM SUBLINHADO, em nenhum elemento e em nenhum estado — nem
        text-decoration, nem borda inferior, nem traço desenhado;
     3. a responsividade é por CONTAINER (@container pagina), não por
        viewport. As @media deste arquivo perguntam capacidade do aparelho
        (hover), com DUAS exceções de largura, as duas por precisarem da
        mesma régua de algo que não enxerga o container: a troca entre o
        botão da barra e o disco do WhatsApp (blocos 3 e 16; o disco mora
        fora do .lp) e a moldura da dobra (bloco 5; a imagem troca num
        <picture>, que só conhece a viewport).

   MAPA
     0. O glifo que faltava (≈)
     1. Tokens
     2. Ritmo da página — margem lateral e respiro vertical fluidos
     3. Barra do topo
     4. Botões de largura total no celular
     5. Dobra partida
     6. Seção com fundo de imagem + título-promessa
     7. Os 4 motivos (cards)
     8. A faixa de 4 campos (ficha)
     9. Linha do tempo (etapas)
    10. Cases em antes/depois
    11. Pessoas
    12. FAQ
    13. Print e chamada final
    14. Rodapé
    15. Rótulos em caixa alta — um tamanho só
    16. Botão flutuante do WhatsApp
    17. Toque sem hover
    18. Verificação — nenhum sublinhado
    19. O vento entre as seções
   ========================================================================== */


/* ==========================================================================
   0. UM GLIFO QUE FALTAVA — o sinal de aproximadamente
   --------------------------------------------------------------------------
   A linha de tese do case 1 usa "≈" três vezes, e "≈" (U+2248) NÃO ESTÁ no
   subset latin da Inter que o design system serve. Sem esta face, o navegador
   pinta só esse caractere com a fonte do sistema e o sinal sai com peso e
   desenho diferentes do resto da linha. A correção é de PRODUÇÃO, não de
   texto: o "≈" da copy continua sendo "≈". 620 bytes, um glifo só, subsetado
   do Inter-Regular do kit de marca.
   font-weight 100 900 num arquivo estático é deliberado: o sinal só aparece
   na ficha dos cases (.ficha-caso dd, peso 400 — era a .case__spec antes de
   ela virar ficha), e declarar a faixa evita um segundo arquivo.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-aprox.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2248;
}


/* ==========================================================================
   1. TOKENS DESTA PÁGINA
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     A. RITMO DA PÁGINA
     ------------------------------------------------------------------------
     O design system tinha a escala de TIPO fluida (cqi) e a escala de ESPAÇO
     fixa: 80px de seção, 128px de seção de ar e 64px de cabeça em qualquer
     largura. No celular o texto encolhia e o ar em volta dele não — a 360px
     eram ~200px de vazio a cada troca de seção, 1/3 de uma tela. É a causa
     técnica do "parece desktop espremido".

     Os quatro tokens abaixo usam a MESMA unidade da escala de tipo (cqi),
     com piso de celular e teto IGUAL ao valor que o desktop já tinha: acima
     de ~1150px de container nada muda, por construção.

     A margem lateral também não tinha token: era --esp-5/--esp-8 escrito à
     mão em quatro lugares (seção, dobra, barra, rodapé), cada um com o seu
     breakpoint, e a barra já tinha divergido (48px só a partir de 64rem).
     Agora é um valor só para a página inteira, e fluido: 20px num aparelho
     de 320, 22 num de 390, ~36 num tablet de 768, 48 a partir de ~1110.
     ------------------------------------------------------------------------ */
  --margem-pagina: clamp(1.25rem, 0.5rem + 3.6cqi, 3rem);        /* 20 → 48px */
  --secao-respiro: clamp(var(--esp-8), 7cqi, var(--esp-10));     /* 48 → 80px  — padding-block da .secao */
  --secao-respiro-ar: clamp(var(--esp-9), 11cqi, var(--esp-12)); /* 64 → 128px — padding-block da .secao--ar */
  --cabeca-respiro: clamp(var(--esp-7), 5.6cqi, var(--esp-9));   /* 40 → 64px  — cabeça da seção → corpo */
  --hero-respiro: clamp(var(--esp-6), 5cqi, var(--esp-9));       /* 32 → 64px  — padding-block da dobra */

  /*  FAIXA — o respiro das listas de "tabela contínua" (fio em cima, padding
      próprio, encostada na seguinte): .case e .faq__item. É o mesmo degrau
      que a .etapa do lp.css já usa (32px no celular, 48 no desktop). */
  --faixa-respiro: clamp(var(--esp-6), 3.8cqi, var(--esp-8));    /* 32 → 48px */
  --col-faq: 18rem;                   /* a cabeça do FAQ, ao lado da lista */
  --chamada-arte-veu: 0.5;            /* a pintura atrás da chamada final */

  /* ------------------------------------------------------------------------
     O VENTO ENTRE AS SEÇÕES (bloco 19)
     ------------------------------------------------------------------------
     A faixa acompanha o ritmo da página: 48px no celular, 96 no computador,
     pela mesma unidade das outras medidas daqui. O RITMO multiplica todas as
     velocidades do desenho — 1.7 é o "vivo", escolhido pelo Thiago em 23/09
     contra o "calmo" (1.0). A força é a opacidade de base dos riscos.
     ------------------------------------------------------------------------ */
  --vento-alt: clamp(4rem, 6cqi, 6rem);    /* 64 → 96px (o piso subiu de 48:
                                              com 48 a onda não tinha curva e
                                              a faixa virava um borrão) */
  --vento-cor: var(--cor-terracota);
  --vento-forca: .68;
  --vento-ritmo: 1.7;

  /* ------------------------------------------------------------------------
     B. BARRA DO TOPO
     ------------------------------------------------------------------------
     A logo tinha subido de 28 para 44px a pedido do dono, e nada mais foi
     reajustado: no celular ela era ESMAGADA pelo flex (69×44 em vez de
     135×44, fora de proporção) e o botão ao lado era cortado por dentro.
     Duas alturas:
       32px no celular, onde a barra fica só com a logo (bloco 3);
       32 → 44px de 48rem em diante, fluido, até o tamanho do desktop.
     Havia uma terceira, 28px abaixo de 368px, que só existia para a logo e
     o botão caberem lado a lado num celular de 320; o botão saiu da barra
     no celular e ela perdeu o motivo. */
  --logo-nav-m: 2rem;                                      /* 32px */
  --logo-nav-g: clamp(2rem, 0.56rem + 3cqi, 2.75rem);      /* 32 → 44px, contínuo a partir de 768 */

  /* ------------------------------------------------------------------------
     C. DOBRA PARTIDA
     ------------------------------------------------------------------------
     A dobra é um retângulo partido ao meio: papel com o texto à esquerda,
     escuro com o print à direita (régua da EPIC). Os tokens do pergaminho
     saíram daqui em 23/09 — --moldura-*, --rolo-topo/base/costura,
     --janela-margem e --arte-altura-p. O que ficou do pergaminho foram os
     TEMPOS, renomeados: a troca de print não enrola mais, apaga e acende.
     ------------------------------------------------------------------------ */
  --tipo-manchete: clamp(1.75rem, 1.1rem + 3cqi, 3.5rem);  /* 28 → 56px — dobra em coluna única */

  /*  A MANCHETE EM DUAS COLUNAS. Na dobra com pergaminho a coluna do texto
      tinha 514px e o teto era 48px; na dobra partida ela tem 699 e o mesmo
      teto deixava a metade clara com mais vazio do que texto. A régua sobe
      até 54px, e quem escolhe a rampa é a CLÁUSULA em peso sólido, que não
      pode quebrar em duas linhas: a 1024 a coluna útil tem 403px e a
      cláusula pede 353 em 36px — por isso o piso de 36 segura até ~1100, e
      só depois o tipo cresce. Conferido de 1024 a 1920: uma linha sempre. */
  /*  Teto de 46px desde 24/09: a manchete nova (a promessa, "A gente coloca
      o teu escritório…") é mais longa que a pergunta de antes, e a 54px ia
      a seis linhas. */
  --tipo-manchete-dividida: clamp(2.25rem, 6.04cqi - 1.9rem, 2.875rem);  /* 36 → 46px */

  /*  Folga do recorte da máscara da manchete, acima e abaixo da caixa de
      linha. Com altura de linha 0.94 a tinta da Dupincel passa da caixa:
      o til do "ã" sobe ~0.13em acima dela, a cedilha e a haste do "p"
      descem ~0.12em abaixo. 0.25em cobre os dois com sobra. */
  --mascara-folga: 0.25em;

  /*  A METADE ESCURA. O fundo é o piso da própria pintura, medido nela:
      rgb(16, 9, 0). Declarado à parte porque ele aparece antes de a imagem
      carregar, e um preto qualquer daria um salto de cor na chegada. */
  --hero-noite: #100904;

  /*  UM respiro para as duas metades, para o miolo das duas ter a mesma
      altura útil e o que está dentro delas nascer na mesma faixa. */
  --hero-respiro-d: clamp(1.5rem, 3.4cqi, 3.5rem);   /* 24 → 56px */

  /*  A ALTURA DA DOBRA. 44rem, e não a tela inteira: a dobra não precisa
      encostar no pé, e cada rem a menos é vazio a menos embaixo do botão. A
      1440×900 ela termina 108px antes da dobra do navegador — essa faixa da
      próxima seção aparecendo é convite para rolar. */
  --hero-alt-d: 44rem;                /* 704px */
  --hero-barra: 5.5rem;               /* 88px — a barra do topo no desktop */

  /*  A JANELA DOS PRINTS. Os três prints do computador têm a mesma forma
      (1808/1708, 1810/1710, 2000/1892 — todos ~1,058), então a janela tem a
      forma deles e nenhum sobra papel em volta. No celular ela é ALTA: é a
      forma que a janela do pergaminho tinha (705×1028 da imagem dele), e é
      nela que as paradas da câmera (data-camera, medidas no print) foram
      calibradas. Mudar esta proporção é recalibrar o passeio. */
  --print-prop: 1808 / 1708;
  --print-prop-p: 705 / 1028;
  --fig-print: 34rem;                 /* 544px — a largura do print no computador */

  /*  O canto do print. A página é de fio reto (--raio-caixa: 0) e o botão
      tem 2px; o print da dobra pede um pouco mais, porque flutua sobre a
      pintura em vez de estar encaixado numa moldura. 6px é o teto do "um
      pouquinho" (pedido do Thiago, 23/09): daí para cima vira card de
      aplicativo, e não uma tela de verdade. */
  --print-raio: 0.375rem;             /* 6px */

  /*  A LEGENDA DO PRINT (24/09). Fica acima da janela, sobre a pintura, e é
      um vidro escuro: a cena por trás tem folha clara e galho, e texto creme
      solto sobre ela perdia leitura onde passava uma folha. O fundo é a
      própria --hero-noite com transparência, então o vidro é da cena e não
      um bloco estranho a ela. A reserva é o espaço que a metade escura abre
      em cima para ela caber: três linhas no celular, duas no computador. */
  --legenda-fundo: rgb(16 9 4 / 0.66);
  --legenda-fio: rgb(var(--cor-fundo-rgb) / 0.16);
  --legenda-desfoque: 0.5rem;          /* 8px */
  --legenda-ponto: 0.5rem;             /* 8px — o ponto terracota que abre a frase */
  --legenda-reserva: 5.5rem;           /* 88px no celular */
  --legenda-reserva-d: 4.5rem;         /* 72px a partir de 40rem */
  /*  Os prints são PNG com margem transparente em volta dos cartões (a
      sombra mora nela): ~3,5% de cada lado e ~3% em cima. A legenda recua
      o mesmo tanto para as bordas dela caírem nas dos cartões, e desce para
      dentro da margem de cima para não ficar longe deles. */
  --legenda-recuo: 3.5%;
  --legenda-assento: 0.25rem;          /* 4px para dentro da janela */

  /*  Permanência de cada print aberto antes de enrolar. Não é --mov-*:
      aqueles são de transição; este é de leitura. Subiu de 4,5 para 6s
      quando a troca virou o pergaminho enrolando e desenrolando: com o
      movimento maior, trocar mais rápido deixava a dobra agitada. */
  --print-espera: 6000ms;
  /*  O cronograma fica quase o dobro (24/09, pedido do Gustavo): são três
      pessoas, oito semanas e três marcos para assimilar, contra uma ideia só
      em cada print do chat. O print escolhe o token pelo data-espera. */
  --print-espera-cronograma: 11000ms;

  /*  A TROCA DE PRINT. Era o pergaminho enrolando e desenrolando; virou
      apagar e acender, e os tempos encolheram na mesma proporção — 1,3s e
      1,9s de rolo eram movimento de peça grande, e um apagar lento parece
      página travando. Os nomes mudaram junto (--rolo-* → --troca-*): o
      pagina.js lê estes tokens, então o JS e a transição não têm como
      discordar. A curva é a --mov-suave do sistema: apagar e acender não
      precisam de curva própria. */
  --troca-fecha: 450ms;               /* apaga */
  --troca-abre: 550ms;                /* acende */
  --troca-entrada: 400ms;             /* espera antes do primeiro print, na chegada */

  /*  E o PASSEIO do celular (ver .hero__print--camera): quanto tempo cada
      parada fica e quanto dura a deslizada até a seguinte. */
  --camera-parada: 2500ms;
  --camera-desliza: 1400ms;
  --camera-curva: cubic-bezier(0.5, 0, 0.3, 1);

  /* ------------------------------------------------------------------------
     D. SEÇÃO COM FUNDO DE IMAGEM (seção 3) E TÍTULO-PROMESSA
     ------------------------------------------------------------------------
     O véu é o creme da marca em opacidade — não é cor nova, e não é preto:
     escurecer criaria um segundo bloco escuro na página.
     No desktop (64rem+) o véu é leve: o ramo fica no canto e o título cai
     sobre creme liso, então o véu só assenta a imagem na página. No celular
     e no tablet o ramo passa atrás do título, e o véu é quase opaco. */
  --veu-fundo: 0.25;
  --veu-fundo-p: 0.85;
  /*  O vídeo do ramo ocupa o canto superior direito, não a seção inteira: em
      largura cheia o ramo começava sob o fim do título. O fundo do vídeo é o
      creme da página, então a borda dele não aparece. */
  --fundo-video-largura: 72%;
  --fundo-video-prop: 16 / 9;

  /*  O título-promessa da seção 3 era --tipo-h1 (36px de piso): em 375px
      ocupava 5 linhas e, com 128px de ar em cima e embaixo, 412px de tela
      para uma frase. O piso cai para 32px; o teto continua o do h1. */
  --tipo-promessa: clamp(2rem, 1.1rem + 3.9cqi, 4.5rem);   /* 32 → 72px */

  /* ------------------------------------------------------------------------
     E. CORPO DE TEXTO
     ------------------------------------------------------------------------
     O argumento dos 4 motivos, as respostas do FAQ e as bios usavam
     --tipo-corpo-p (14px) em --cor-texto-2 — o degrau que o tokens.css
     reserva a "nota, caption e helper text". O argumento central da página
     era o texto mais fraco dela. Sobe para o corpo (16px); o cinza fica,
     para a hierarquia título > texto continuar. 14px volta só onde a coluna
     é estreita demais para 16 (os 4 cards lado a lado). */
  --tipo-texto: var(--tipo-corpo);    /* 16px */

  /* ------------------------------------------------------------------------
     F. CARDS (seção 2)
     ------------------------------------------------------------------------ */
  --card-pad-p: var(--esp-5);         /* 24px — respiro vertical do card-faixa no celular */
  /*  Centra o ícone de 20px na primeira linha do título (20px × 1.2 = 24px). */
  --card-icone-ajuste: calc((var(--tipo-h5) * var(--altura-titulo) - var(--icone-m)) / 2);

  /* ------------------------------------------------------------------------
     G. A PILHA DAS ETAPAS (seção 4)
     ------------------------------------------------------------------------
     A seção prende na tela e a rolagem abre uma etapa de cada vez. São CINCO
     estados — a pilha fechada mais as quatro etapas — e cada um custa um
     passo de rolagem. 55svh deixa o passo curto: a etapa troca antes de a
     rolagem dar sensação de travamento.

     --pilha-curso é o tamanho do trilho em passos: um por etapa, mais MEIO
     no começo e UM no fim — o do fim é a pilha se FECHANDO de novo, antes de
     a seção sair da tela (pedido de 23/09). Sem ele, o que subia da tela era
     uma etapa aberta no meio do caminho; com ele, o capítulo fecha o livro
     antes de virar a página, e quem rola de volta reabre a 04.
     para a pilha fechada. Antes a pilha fechada custava um passo inteiro, e
     a queixa era essa — chegava na seção, rolava, rolava de novo, e só então
     a etapa 1 abria. Com meio passo ela abre quase na chegada.

     Se entrar uma quinta etapa, este número vira 5,5: o JS conta as etapas
     por conta própria e os dois têm de contar a mesma coisa. */
  --pilha-curso: 5.5;
  --pilha-passo: 38svh;
  --pilha-abre: 520ms;
  /*  Silêncio da roda que encerra um gesto (pagina.js, bloco 4): giros mais
      próximos que isso são o mesmo gesto e abrem uma etapa só. */
  --pilha-quieto: 150ms;

  /*  A ALTURA DE UMA ETAPA FECHADA, no computador. É medida, não gosto: a
      moldura útil do palco a 1440×900 tem 732px, a cabeça come 84, e as
      quatro fechadas dão 504 — sobra folga em vez de aperto, e o nome cabe em
      36px em vez dos 24 de antes ("as 4 etapas maiores"). A altura é em svh
      porque quem aperta aqui é a ALTURA da tela, não a largura: a 768 de
      altura, quatro faixas de 144 mais a cabeça não caberiam.
      Este número é também o que faz a etapa fechada COLHER até zero sem
      salto: min-height e max-height são os dois iguais a ele, então a
      transição sai exata. */
  --bloco-alt: clamp(5.5rem, 14svh, 9rem);   /* 88 → 144px, pela ALTURA da tela */

  /*  E a faixa fechada quando ALGUMA etapa está aberta: as três que sobram
      têm de ocupar pouco, para a aberta caber. 56px é o mínimo que segura o
      ícone de 32 com respiro. */
  --bloco-fechada: 3.5rem;            /* 56px = 12 + 32 do ícone + 12 */

  --marca-item: var(--esp-3);         /* 12px — o fio curto que abre cada item */

  /*  A faixa do quadro da campanha, depois da pilha. 400px não é estética: o
      print tem 408px de CSS de largura na origem, e exibi-lo perto disso
      mantém a letra da interface no tamanho em que foi capturada. Abaixo de
      48rem ele passa a ocupar a coluna inteira (min(100%, …)) e cai para
      ~350px, onde a letra ainda fica em 11px. */
  --fig-campanha: 25rem;              /* 400px */
  --fig-campanha-prop: 1225 / 845;

  /* ------------------------------------------------------------------------
     H. CASES, PESSOAS, FAQ
     ------------------------------------------------------------------------ */
  --col-virada: 22rem;                /* teto de cada lado do antes/depois */

  /* ------------------------------------------------------------------------
     A VIRADA DOS CASES (seção 5)
     ------------------------------------------------------------------------
     O fio do "depois" cresce em 420ms — um pouco MAIS LENTO que a contagem
     do número (1,1s de contagem contra 0,42s de fio, mas o fio começa junto
     e termina antes do número assentar): são dois tempos do mesmo gesto.
     A seta desliza devagar (650ms para 12px, a pedido do Thiago em 23/09:
     "deve deslizar mais devagar"); rápida demais ela virava um tique.
     ------------------------------------------------------------------------ */
  --virada-fio: 0.1875rem;            /* 3px — a marca na entrada do painel */
  --virada-fio-tempo: 420ms;
  --virada-seta-anda: 0.75rem;        /* 12px */
  --virada-seta-tempo: 650ms;
  --virada-seta-espera: 250ms;
  --conta-dur: 1100ms;                /* a subida do numero, lida pelo pagina.js */
  --pessoa-foto-prop: 5 / 4;           /* o retrato no cartão (o arquivo é quadrado): quase inteiro */
  --pessoa-cartao: 28rem;             /* 448px — a largura de cada cartão no computador */
  --pessoa-foto-foco: 30%;            /* altura do recorte: o rosto fica no terço de cima */

  /* ------------------------------------------------------------------------
     I. BOTÃO FLUTUANTE DO WHATSAPP
     ------------------------------------------------------------------------
     56px de disco: acima dos 44px de toque da WCAG 2.5.5 e dos 48 do .btn.
     A camada fica acima da barra do topo (z-index 50 no lp.css). */
  --zap-tam: 3.5rem;                  /* 56px */
  --zap-camada: 60;
  --zap-desloca: var(--esp-5);        /* 24px — de onde o disco sobe ao aparecer */

  /*  A ÚNICA SOMBRA DA PÁGINA. O design system proíbe sombra como recurso de
      hierarquia entre elementos do mesmo plano — card, seção, faixa — e isso
      continua valendo: tokens.css e lp.css seguem sem sombra nenhuma. O
      disco é o único elemento fora do plano (position: fixed, por cima do
      conteúdo em qualquer rolagem): nele a elevação é um fato, e a sombra é
      o sinal honesto desse fato. Foi pedida pelo dono, que é o autor da
      regra. Sem hex novo: os canais do texto na opacidade tênue do sistema.
      Não usar este token em nenhum outro elemento. */
  --zap-sombra:
    0 var(--fio) var(--esp-1) rgb(var(--cor-texto-rgb) / var(--op-tenue)),
    0 var(--esp-2) var(--esp-5) rgb(var(--cor-texto-rgb) / var(--op-tenue));
}


/* ==========================================================================
   2. RITMO DA PÁGINA — margem lateral e respiro vertical
   --------------------------------------------------------------------------
   Um consumidor por componente e nenhuma @container: o valor fluido faz o
   trabalho que as queries do lp.css faziam em degrau. Cada regra aqui tem a
   mesma especificidade da original e vence por ordem de folha — inclusive
   as versões de 48rem e 64rem do lp.css.
   ========================================================================== */

.secao { padding: var(--secao-respiro) var(--margem-pagina); }
.secao--ar { padding-block: var(--secao-respiro-ar); }
.secao__cabeca { margin-bottom: var(--cabeca-respiro); }

/*  A dobra partida não lê --hero-margem: cada metade tem o próprio respiro
    (--hero-respiro-d) e a clara usa --margem-pagina direto, para o texto
    cair no mesmo prumo do logo e dos títulos das seções. */

.rodape { padding: var(--secao-respiro) var(--margem-pagina); }


/* ==========================================================================
   3. BARRA DO TOPO
   --------------------------------------------------------------------------
   Três defeitos medidos, com uma causa cada:
   (a) LOGO DEFORMADA — o <img> e a âncora eram itens flex com flex-shrink 1:
       o flex tirava largura da logo para caber o botão, e a altura ficava.
       flex: none nos dois devolve a proporção de 392:128 em qualquer largura.
   (b) BOTÃO CORTADO — o .btn tem overflow: hidden (é o que prende o
       preenchimento que desliza no hover); espremido, ele cortava o próprio
       rótulo por dentro ("EDIR DIAGNÓSTICO"). Com flex: none ele nunca é
       menor que o próprio conteúdo, e o tamanho da logo por faixa garante
       que os dois cabem.
   (c) BARRA DE 121px — o padding da barra (16+16) SOMAVA com o respiro da
       logo (22+22 numa logo de 44). O respiro da marca é zona livre, não
       padding extra: aqui ele passa a ser atendido pela própria barra.
   ========================================================================== */

.nav {
  --logo-alt-nav: var(--logo-nav-m);
  gap: var(--esp-4);
  padding-inline: var(--margem-pagina);
  /*  Altura da barra = o que a zona livre da marca exige, e nem um px a
      mais. A logo precisa de metade da própria altura livre em volta
      (--logo-respiro, do brand-guide); o botão de 44px já centraliza a logo
      numa faixa maior que ela. O padding só cresce quando a logo passa a
      exigir mais do que o botão já dá — o que acontece no desktop, com a
      logo de 44px. Resultado: 68px no celular, 88 no desktop (eram 121). */
  padding-block: max(
    var(--esp-3),
    calc(var(--logo-alt-nav) * var(--logo-respiro) - (var(--btn-alt-p) - var(--logo-alt-nav)) / 2)
  );
}

/*  A zona livre à esquerda é a margem da página (≥ 20px, mais que os 16px
    que a logo de 32 exige); em cima e embaixo é o padding da barra. O
    padding próprio da âncora saía somado a tudo isso e empurrava a logo 22px
    para dentro da margem — a manchete e os títulos começavam num x, a logo
    noutro. */
.nav__marca {
  flex: none;
  padding: 0;
  /*  A logo tem 32px de altura no celular; o link dela, não: ele cresce
      até 44px (a altura do botão pequeno, o alvo de toque do sistema) sem
      mover a logo. É ele que dá a altura da barra no celular, onde a barra
      fica sem botão. */
  min-height: var(--btn-alt-p);
}
.nav__logo { flex: none; height: var(--logo-alt-nav); width: auto; }

.nav .btn { flex: none; }

@container pagina (min-width: 48rem) {
  .nav { --logo-alt-nav: var(--logo-nav-g); gap: var(--esp-5); }
}

/*  UM BOTÃO FIXO POR TELA. A página tinha dois ao mesmo tempo, o da barra
    (sticky) e o disco do WhatsApp (bloco 16), levando para o mesmo lugar.
    Cada tela fica com um:
      · CELULAR — o disco. Fica onde o polegar alcança, e o botão da barra
        ficava no ponto mais difícil de alcançar com uma mão. Sem botão, a
        barra não tem por que ficar presa: sobe com a página e devolve a
        altura dela à leitura.
      · A PARTIR DE 48rem — o botão da barra, sticky como na v4. Botão no
        topo é o padrão de tela grande; disco flutuante com mouse lê como
        janela de chat de suporte.
    A copy prevê "logo + 1 botão" na barra: no celular ela fica só com a
    logo. Nenhuma palavra muda, e o rótulo continua no desktop.

    @media, e não @container, de propósito: o disco mora fora do .lp e só
    enxerga a viewport. O container mede a viewport menos a barra de
    rolagem e o fio da moldura; se a barra trocasse por @container e o
    disco por @media, sobraria uma faixa de ~17px de largura em que nenhum
    dos dois botões existe. A mesma régua nos dois lados fecha essa faixa. */
.nav { position: static; }
.nav .btn { display: none; }

@media (min-width: 48rem) {
  .nav { position: sticky; }
  .nav .btn { display: inline-flex; }
}


/* ==========================================================================
   4. BOTÕES DE LARGURA TOTAL NO CELULAR
   --------------------------------------------------------------------------
   Esta era a CAUSA do scroll horizontal em 320, 360 e 375px: o botão da
   dobra tinha largura mínima de 321px (rótulo de 26 caracteres em caixa
   alta, tracking de .14em, 32px de padding de cada lado, tudo sob
   white-space: nowrap), e a coluna de um aparelho de 320 tem 280.

   No celular os dois CTAs da página ocupam a coluna inteira — é o alvo mais
   fácil de acertar com o polegar, e é o padrão de CTA primário em tela
   estreita. O rótulo pode quebrar em duas linhas equilibradas, e isso só
   acontece onde ele não cabe numa (em 320px); de 360 em diante é uma linha.
   ========================================================================== */

.hero__acoes .btn,
.chamada__acoes .btn {
  width: 100%;
  padding-inline: var(--esp-4);
  white-space: normal;
  text-align: center;
  text-wrap: balance;
}

@container pagina (min-width: 40rem) {
  .hero__acoes .btn,
  .chamada__acoes .btn {
    width: auto;
    padding-inline: var(--btn-pad-x);
    white-space: nowrap;
  }
}


/* ==========================================================================
   5. DOBRA PARTIDA — papel com o texto à esquerda, escuro com o print à direita
   --------------------------------------------------------------------------
   No celular são duas faixas, uma embaixo da outra: texto (com o botão) e
   escuro (com o print). A partir de 64rem viram duas colunas iguais, e a
   dobra vira o retângulo partido.

   AS DUAS METADES CENTRAM O QUE TÊM DENTRO. Houve uma versão em que as duas
   alinhavam no topo, para a manchete e a borda de cima do print caírem na
   mesma linha: no papel resolvia (um silêncio só, no pé), no olho o print
   ficava pendurado no alto e a pintura toda sobrava embaixo dele. Centrado,
   o print ganha pintura pelos quatro lados — ~95px acima e abaixo, ~77 nas
   laterais, que é onde moram os galhos da cena.
   ========================================================================== */

.hero--dividida {
  /*  Desfaz a grade de duas linhas do lp.css (corpo + prova), que esta dobra
      não usa: aqui as duas caixas são irmãs e dividem a largura. */
  display: grid;
  grid-template-rows: auto;
  min-height: 0;
}

.hero__claro {
  background: var(--cor-fundo);
  display: grid;
  align-content: center;
  padding: var(--hero-respiro-d) var(--margem-pagina);
}

/*  O texto é UM bloco: manchete, frase e botão são um argumento só
    (promessa → explicação → ação), e o vazio fica em volta deles, nunca
    entre eles. Mas "junto" não é "colado": 32px entre a manchete e a frase e
    48 entre a frase e o botão. A distância cresce na ordem da leitura — a
    frase explica a manchete (fica perto), o botão é a conclusão dela (fica
    um passo atrás). */
.hero--dividida .hero__corpo {
  gap: var(--esp-6);
  align-content: center;
  padding: 0;
  max-width: 36rem;
}

.hero--dividida .hero__acoes { margin-top: var(--esp-4); }

.hero--dividida .hero__manchete {
  /*  A trava de 19ch da v4 existia para deixar vazio o rag de uma manchete
      de largura inteira. Aqui quem define a medida é a coluna. */
  max-width: none;
  font-size: var(--tipo-manchete);
}

/*  A manchete tem duas caixas de máscara (a animação sobe uma de cada vez) e
    a segunda é a cláusula em peso sólido, que começa sempre numa linha
    nova. Dentro de cada caixa a quebra é automática, e balance é o que
    impede "esse mês" ou "indicação?" sozinhos numa linha. */
.hero--dividida .hero__manchete .mascara__linha { text-wrap: balance; }

/*  A cláusula em peso sólido — "sem ser por indicação?" — herda .enfase do
    lp.css. Nada é acrescentado aqui.

    O RECORTE DA MÁSCARA. A .mascara do lp.css recorta com overflow: hidden,
    ou seja, na caixa de linha exata — e com altura de linha 0.94 a tinta
    passa dela. Medido a 56px: a haste do "p" de "por" e a cedilha de
    "indicação" saíam cortadas retas na borda de baixo da segunda caixa.
    clip-path com margem negativa recorta a mesma coisa que importa (a linha
    escondida embaixo, antes de subir) e deixa a tinta dos acentos e das
    descendentes respirar. A linha que sobe começa com opacidade 0, então a
    faixa de folga não revela nada antes da hora. */
.hero--dividida .hero__manchete .mascara {
  overflow: visible;
  clip-path: inset(calc(var(--mascara-folga) * -1) calc(var(--mascara-folga) * -2));
}

/* A metade escura ------------------------------------------------------- */

.hero__escuro {
  position: relative;
  overflow: hidden;
  display: grid;
  /*  Coluna declarada, e não implícita: com trilho `auto` a largura de 100%
      do que está dentro fica CÍCLICA (o trilho depende do item e o item, do
      trilho). E align-content: center, e não o `normal` (que é stretch),
      porque stretch reparte a sobra de altura entre as linhas da grade e
      empurra o print para baixo. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  align-content: center;
  padding: var(--hero-respiro-d);
  background: var(--hero-noite);
}

/*  A pintura, atrás de tudo dentro desta metade. <img> e não fundo de CSS
    porque é conteúdo pesado que o navegador tem de poder priorizar. */
.hero__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/*  A figura é só a forma da janela: tudo dentro dela é absoluto. */
.hero__figura {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: var(--print-prop-p);
}

/*  A janela: os prints ficam empilhados nela; só um tem
    .hero__print--ativo por vez, e a troca é seca porque acontece com a
    janela apagada. SEM FUNDO desde 24/09: os três prints são PNG
    transparentes (cartões com a própria sombra), e é a pintura que aparece
    em volta deles — o papel branco de antes virava moldura. */
.hero__prints {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity var(--troca-abre) var(--mov-suave);
}

/*  A legenda: presa ACIMA da janela (bottom: 100%), para a forma da janela
    não mudar. O espaço sai do
    respiro de cima da metade escura, que cresce com --legenda-reserva. Ela
    apaga junto com a janela na troca. Vazia (cronograma), não aparece. */
.hero__legenda {
  position: absolute;
  z-index: 2;
  bottom: calc(100% - var(--legenda-assento));
  left: var(--legenda-recuo);
  right: var(--legenda-recuo);
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-2) var(--esp-3);
  color: var(--cor-fundo);
  font-size: var(--tipo-corpo-p);
  font-weight: var(--peso-medio);
  line-height: var(--altura-titulo);
  /*  pretty, e não balance: a caixa tem a largura dos cartões, e balance
      deixaria as duas linhas curtas com um vazio grande à direita dela. */
  text-wrap: pretty;
  background: var(--legenda-fundo);
  border: var(--fio) solid var(--legenda-fio);
  border-radius: var(--print-raio);
  -webkit-backdrop-filter: blur(var(--legenda-desfoque));
  backdrop-filter: blur(var(--legenda-desfoque));
  transition: opacity var(--troca-abre) var(--mov-suave);
}

.hero__legenda::before {
  content: "";
  flex: none;
  width: var(--legenda-ponto);
  height: var(--legenda-ponto);
  border-radius: 50%;
  background: var(--cor-terracota);
  /*  o ponto senta na altura das minúsculas da primeira linha, não no pé */
  transform: translateY(-0.1em);
}

.hero__legenda:empty,
.hero__legenda--vazia { opacity: 0; }

.hero__figura--trocando .hero__legenda {
  opacity: 0;
  transition-duration: var(--troca-fecha);
}

.hero__escuro { padding-top: calc(var(--hero-respiro-d) + var(--legenda-reserva)); }

/*  APAGADO: é o estado em que o print troca. A figura nasce assim no HTML e
    o pagina.js tira a classe na chegada; sem JS, o <noscript> do <head>
    acende a janela e ela fica no primeiro print. */
.hero__figura--trocando .hero__prints {
  opacity: 0;
  transition-duration: var(--troca-fecha);
}

.hero__print {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

/*  PASSEIO NO CELULAR. Print que não cabe na janela alta sem virar miniatura
    de letra ilegível: o card do CRM, que é largo (7:5), e a conversa inteira,
    que é o contrário — três vezes mais alta que a janela. Em vez de encolher,
    a janela passeia pelo print em tamanho de gente: para em cada parte que
    interessa e desliza de uma para a outra (pagina.js, bloco 1). As
    paradas vêm do HTML (data-camera), porque são medidas da imagem. Aqui o
    print só perde a caixa de 100%: quem posiciona é a transformação do JS.
    Sem JS ou com "menos movimento", fica a primeira parada. */
@media (max-width: 39.99rem) {
  .hero__print--camera {
    width: auto;
    height: auto;
    max-width: none;
    object-fit: none;
    transform-origin: 0 0;
  }
}

.hero__print--ativo {
  z-index: 1;
  opacity: 1;
}

/*  Sem JS a alternância não acontece: o primeiro print fica. */
.sem-js .hero__print:first-child { opacity: 1; }

/*  A janela LARGA a partir de 40rem, que é a régua do <picture> dos prints
    no HTML: a versão de computador de cada print entra nesta mesma largura,
    e a janela tem de trocar de forma junto com ela. @media, e não
    @container, pelo mesmo motivo — o <picture> só conhece a viewport. */
@media (min-width: 40rem) {
  .hero__figura {
    aspect-ratio: var(--print-prop);
    /*  Teto de largura já aqui, e não só no desktop: num tablet de 768 a
        metade escura ainda ocupa a largura inteira, e sem teto o print
        engolia a pintura — sobrava um anel de 26px. Com 544 ele fica
        centrado e a cena aparece em volta. */
    width: min(100%, var(--fig-print));
  }

  .hero__legenda { font-size: var(--tipo-corpo); }
  .hero__escuro { padding-top: calc(var(--hero-respiro-d) + var(--legenda-reserva-d)); }
}

@container pagina (min-width: 64rem) {
  .hero--dividida {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: min(var(--hero-alt-d), calc(100svh - var(--hero-barra)));
  }

  .hero--dividida .hero__manchete { font-size: var(--tipo-manchete-dividida); }

  /*  O texto encosta na margem da página pelo lado de fora e respira do lado
      da emenda: é o vazio que separa as duas metades. */
  .hero__claro { padding-right: var(--esp-9); }

  /*  34rem = 544px, e não a coluna inteira (601): em largura cheia a pintura
      só apareceria no anel do respiro, e os galhos da cena ficariam
      escondidos atrás do print. Assim sobram ~78px de pintura de cada lado,
      que é justamente onde eles moram. A letra das mensagens do print fica
      em 9,0px — acima dos 8,4 que ela tinha dentro do pergaminho. */
  .hero__figura { max-height: 100%; }
}


/* ==========================================================================
   6. SEÇÃO COM FUNDO DE IMAGEM (seção 3) E TÍTULO-PROMESSA
   ========================================================================== */

/*  O ramo é conteúdo, então vem do HTML: um <video> atrás do texto, em TODA
    largura (decisão do Thiago, 22/09 — no celular as folhas também balançam).
    O quadro parado continua existindo como poster do próprio vídeo, que é o
    que aparece sem JS, com menos movimento, em economia de dados ou antes de
    o vídeo chegar perto da tela. Muda só o enquadramento: no celular ele cobre
    a seção inteira, e a partir de 64rem encolhe para o canto superior direito,
    longe do título. Não é background-image de propósito: a URL teria de morar
    no CSS ou numa variável, e URL relativa dentro de variável é resolvida a
    partir da pasta do CSS (assets/css/assets/img/…, 404) — e cada navegador
    faz isso de um jeito. */
.secao--fundo {
  position: relative;
  isolation: isolate;
}

.secao__video {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;                          /* atrás do véu (-1), que fica atrás do conteúdo */
  object-fit: cover;
  object-position: right top;           /* o ramo mora no canto superior direito */
  pointer-events: none;
}

.secao__video {
  width: 100%;
  height: 100%;
}

.secao--fundo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cor-fundo);
  opacity: var(--veu-fundo-p);
}

/*  64rem, e não 48: entre 48 e 64rem o título-promessa ainda corre a
    largura inteira em duas linhas, e o ramo caía em cima de "digital" e
    "dias". Até 64rem a seção se comporta como no celular. */
@container pagina (min-width: 64rem) {
  .secao--fundo::before { opacity: var(--veu-fundo); }
  .secao__video {
    width: var(--fundo-video-largura);
    height: auto;
    aspect-ratio: var(--fundo-video-prop);
  }
}

.secao__titulo--promessa { font-size: var(--tipo-promessa); }


/* ==========================================================================
   7. OS 4 MOTIVOS (seção 2)
   --------------------------------------------------------------------------
   No celular o card da v4 era uma caixa de 32px de padding com fios nas
   quatro bordas: a 360px o texto começava 33px à direita do título da
   seção, a seção tinha três eixos esquerdos (título, texto, ícone), e 43% da
   altura de cada card era moldura. Abaixo de 48rem o card vira FAIXA — o
   mesmo idioma de .etapa, .virada e .faq nesta página: fio entre um e
   outro, texto na margem da seção, ícone na linha do título.

   Colunas: 1 até 48rem · 2×2 de 48 a 78rem · 4 lado a lado a partir de
   78rem. As 2 colunas que o lp.css abre em 40rem não se sustentam com estes
   textos (cards de 230px de conteúdo, mais altos que a pilha de 1 coluna);
   as 4 colunas a 1024px deixavam 134px para o texto — parágrafos de 12
   linhas. 78rem (1248px) é o menor container em que cada card de 4 tem
   ~290px, e cabe num notebook de 1280 com barra de rolagem.

   REDECLARA: .grade-cards--quatro .card (0,2,0) vence .card (0,1,0) do
   lp.css em TODA largura, inclusive o padding de 48px que ele dá a 64rem.
   Por isso o padding de cada faixa de largura está escrito aqui.
   ========================================================================== */

.grade-cards--quatro {
  border-inline: 0;
}

.grade-cards--quatro .card {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--esp-3);
  row-gap: var(--esp-3);
  padding: var(--card-pad-p) 0;
}

/*  O traço do card existe para responder ao hover (32 → 64px). No toque não
    há hover, e a linha própria custava 36px por card. */
.grade-cards--quatro .card__traco { display: none; }

/*  O ícone vira o marcador do título, na mesma linha, centrado na primeira
    linha dele; o texto desce para a largura inteira. */
.grade-cards--quatro .card__topo {
  grid-row: 1;
  grid-column: 1;
  align-self: start;
  margin-top: var(--card-icone-ajuste);
}

.grade-cards--quatro .card__titulo { grid-row: 1; grid-column: 2; }

.grade-cards--quatro .card__texto {
  grid-column: 1 / -1;
  max-width: var(--largura-leitura);
  font-size: var(--tipo-texto);
}

/*  O lp.css abre 2 colunas em 40rem; aqui continua 1. */
@container pagina (min-width: 40rem) {
  .grade-cards--quatro { grid-template-columns: minmax(0, 1fr); }
}

@container pagina (min-width: 48rem) {
  .grade-cards--quatro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-inline: var(--fio) solid var(--cor-borda);
  }

  /*  De volta ao desenho do design system: traço + ícone numa linha, título
      e texto embaixo. */
  .grade-cards--quatro .card {
    grid-template-columns: none;
    column-gap: 0;
    row-gap: var(--esp-4);
    padding: var(--esp-6);
  }

  .grade-cards--quatro .card__traco { display: block; }

  .grade-cards--quatro .card__topo,
  .grade-cards--quatro .card__titulo,
  .grade-cards--quatro .card__texto {
    grid-row: auto;
    grid-column: auto;
  }

  .grade-cards--quatro .card__topo { align-self: auto; margin-top: 0; }
}

@container pagina (min-width: 78rem) {
  .grade-cards--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grade-cards--quatro .card { padding: var(--esp-8); }

  /*  Em quatro colunas de ~290px, 16px dariam 30 caracteres por linha. */
  .grade-cards--quatro .card__texto { font-size: var(--tipo-corpo-p); }
}


/* ==========================================================================
   8. A FAIXA DE 4 CAMPOS (seção 3)
   --------------------------------------------------------------------------
   A .ficha do lp.css é de 2 colunas na base. No celular isso eram colunas
   de 127 a 182px, com "cliente qualificado esperando você escolher se fecha
   com ele ou não" em cinco linhas e o texto das células da direita colado
   no fio divisor. No celular ela é uma lista: um campo por linha, rótulo
   sobre o valor. 2×2 no tablet, 4 lado a lado a partir de 64rem.

   A faixa fica sobre a imagem de fundo da seção, e as células são opacas
   (a copy pede a imagem atrás do título, não atrás da faixa). Por isso ela
   é uma CAIXA fechada: fio nos quatro lados e o mesmo respiro interno em
   todas as células. Quem se alinha à margem da seção é a borda da caixa,
   não o texto — com o texto encostado na margem, a primeira e a última
   célula ficavam com o texto colado na borda da caixa.

   REDECLARA: .secao .ficha (0,2,0) vence a .ficha de 48rem do lp.css
   (0,1,0) em toda largura; as colunas de cada faixa estão todas aqui.
   ========================================================================== */

.secao .ficha {
  grid-template-columns: minmax(0, 1fr);
  border-inline: var(--fio) solid var(--cor-borda);
}

.secao .ficha__campo {
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
}

@container pagina (min-width: 40rem) {
  .secao .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secao .ficha__campo { padding: var(--esp-5); }
}

@container pagina (min-width: 64rem) {
  .secao .ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ==========================================================================
   9. A PILHA DAS ETAPAS (seção 4)
   --------------------------------------------------------------------------
   No lugar da linha do tempo (quatro faixas roladas de cima a baixo), a
   seção PRENDE na tela: chega fechada, mostrando só os quatro nomes, e cada
   passo de rolagem abre uma etapa. A linha do tempo contava bem uma etapa de
   cada vez, mas nunca mostrava as quatro juntas — quem chegava aqui via o
   miolo da etapa 1 e seguia rolando sem saber o tamanho do caminho.

   O que se anima é HTML, não um clipe: o texto fica nítido em qualquer tela,
   continua legível para o Google e para o leitor de tela, e não pesa um byte
   a mais.

   A rolagem é PASSO, não scrub. O JS só troca a classe .bloco--aberta por
   faixa de progresso; quem faz o movimento são as transições daqui. É o que
   permite a queda limpa: sem JS (.sem-js) ou com "menos movimento"
   (.sem-pilha, posta pelo próprio JS), o trilho perde a altura, o palco
   solta e as quatro etapas ficam abertas — a lista de sempre, sem nada
   escondido.

   A abertura anima grid-template-rows de 0fr para 1fr: é a única forma de ir
   "até a altura do conteúdo" sem chumbar altura no CSS nem medir nada no JS.

   Dentro da etapa aberta, as duas listas (BankAI · Tua parte) seguem
   visíveis ao mesmo tempo: a desproporção entre elas é o argumento da seção,
   e é por isso que "Tua parte" existe até na etapa 3, onde o advogado não
   faz nada.
   ========================================================================== */

.pilha { position: relative; }

.pilha__cabeca { margin-bottom: var(--esp-6); }
.pilha__blocos { display: grid; }

/*  Cada peça da pilha é uma faixa com fio, como era a linha do tempo. A
    aberta recebe o creme — o mesmo recurso que o design system usa no hover
    da .etapa para dizer "esta aqui". O creme sangra para os lados além do
    texto (padding para dentro, margem negativa para fora), senão a cor
    encosta na primeira letra. */
.bloco {
  padding: var(--esp-4);
  margin-inline: calc(var(--esp-4) * -1);
  border-bottom: var(--fio) solid var(--cor-borda);
  transition: background var(--mov-medio) var(--mov-suave);
}

.bloco:first-child { border-top: var(--fio) solid var(--cor-borda); }
.bloco--aberta { background: var(--cor-fundo); }

.bloco__barra { display: flex; align-items: baseline; gap: var(--esp-2); }

/*  O ícone abre a faixa: é ele que faz a pilha fechada ler como quatro PEÇAS
    e não como quatro linhas de texto. Acompanha o nome na cor — apagado com
    a etapa fechada, accent quando ela abre —, em vez de quatro laranjas
    acesos ao mesmo tempo.
    align-self: center porque a linha alinha pela base, e a base de um SVG é
    a borda de baixo dele: pela base, o ícone fica pendurado. */
.bloco__icone {
  align-self: center;
  color: var(--cor-texto-2);
  transition: color var(--mov-medio) var(--mov-suave);
}

.bloco--aberta .bloco__icone { color: var(--cor-accent); }

/*  Fechada, a etapa fica no cinza de apoio; aberta, ganha o preto do texto.
    text-wrap: balance porque no celular o nome mais longo quebra em duas
    linhas, e sem ele o "ar" fica sozinho na segunda. */
.bloco__nome {
  color: var(--cor-texto-2);
  font-size: var(--tipo-h5);
  font-weight: var(--peso-semi);
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-h3);
  text-wrap: balance;
  transition: color var(--mov-medio) var(--mov-suave);
}

.bloco--aberta .bloco__nome { color: var(--cor-texto); }

/*  O numeral fecha a faixa, do outro lado. Entre o ícone e o nome ele
    separava o par que se lê junto. */
.bloco__num {
  flex: none;
  margin-left: auto;
  align-self: center;
  color: var(--cor-accent);
  font-size: var(--tipo-micro);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-cod);
}

.bloco__miolo {
  display: grid;
  gap: var(--esp-3);
  padding-top: var(--esp-4);
}

/*  A PARTIR DE 64rem A SEÇÃO PRENDE.
    -------------------------------------------------------------------------
    Abaixo disso ela é a lista de sempre, com tudo aberto. No computador a
    pilha prende e abre uma etapa de cada vez, na largura inteira da seção
    (o painel de imagens da direita saiu em 24/09: a seção é só texto).     */
@container pagina (min-width: 64rem) {
  /*  Quem separa da seção anterior aqui é o próprio palco, não o respiro da
      .secao — que abaixo de 64rem continua valendo. */
  .secao--presa { padding-top: 0; }

  .pilha { height: calc(100svh + var(--pilha-curso) * var(--pilha-passo)); }

  .pilha__palco {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /*  Três linhas: cabeça, pilha e o fecho da etapa 04. A do meio é 1fr — é
        ela que recebe a sobra de altura, e é a lista que a reparte (ver
        .pilha__blocos, mais abaixo). */
    grid-template-rows: auto 1fr auto;
    /*  start, e não center: centrado, o vazio da pilha fechada se repartia em
        dois, e os ~300px que sobravam EM CIMA empurravam o título para o meio
        da tela. Alinhado no alto, o título nasce logo abaixo da barra e o
        vazio fica todo embaixo, onde ele é respiro e não buraco. */
    align-content: start;

    /*  O respiro de cima tem de passar da BARRA, que é sticky a partir de
        48rem e mede 88px no computador (a conta está no bloco 3 deste
        arquivo). Com menos que isso o título nasce por baixo dela — foi o
        que aconteceu na primeira montagem do painel. 96px é o degrau do
        sistema logo acima de 88. Com o título no alto (align-content: start) os
      96px ficavam a 8px da barra — perto demais para uma respiração; 128 dá
      os 40px de folga que o resto da página usa entre barra e título. */
    padding-block: var(--esp-12) var(--esp-6);
  }

  .pilha__cabeca,
  .pilha__blocos { grid-column: 1; }

  /*  A SOBRA DE ALTURA VAI PARA ENTRE AS ETAPAS, não para o pé do palco.
      Antes ela ficava toda embaixo, e com uma etapa de conteúdo curto aberta
      sobravam ~310px de branco no fim da tela. Com space-between, a primeira
      etapa continua encostada no topo, a última encosta no fecho, e o vazio vira
      respiro entre as faixas. Ele muda de tamanho conforme a etapa aberta,
      que é justamente o que impede o buraco. */
  .pilha__blocos { align-content: space-between; }

  /*  A pilha aperta no computador, e de propósito. É aritmética: com o nome
      em h3 e faixa de 32px, o conteúdo
      media 817px contra 732 livres abaixo da barra, e o título era comido por
      ela. Assim cabe até em 1280×800. */
  /*  DOIS TAMANHOS, E AS QUATRO SEMPRE À VISTA.

      Fechada a pilha, cada etapa é uma faixa ALTA com o nome grande, e as
      quatro ocupam a largura inteira da seção. Aberta uma delas, as faixas
      encolhem para 56px e o nome volta ao tamanho de trabalho — as outras
      três continuam ali, fechadas, porque são
      elas que dizem onde a pessoa está no caminho.

      (Houve uma versão em que as outras colhiam até zero, para a aberta ficar
      sozinha na tela. O Thiago olhou e pediu o contrário: a pilha inteira à
      vista, com uma aberta. Ficou a segunda.)                              */
  .bloco {
    display: grid;
    align-content: center;
    min-height: var(--bloco-fechada);
    /*  12px em cima e embaixo: com o ícone de 32, a faixa fechada fecha em
        56px, que é --bloco-fechada. A aberta recupera o respiro no pé. */
    padding: var(--esp-3) var(--esp-5);
    margin-inline: calc(var(--esp-5) * -1);
    transition:
      background var(--mov-medio) var(--mov-suave),
      min-height var(--pilha-abre) var(--mov-saida),
      padding-block var(--pilha-abre) var(--mov-saida);
  }

  .bloco--aberta { align-content: start; padding-bottom: var(--esp-5); }

  /*  PILHA FECHADA: faixa alta, nome grande, largura inteira. O seletor pede
      [data-etapa="0"], e não a ausência dele: sem JS não há atributo nenhum,
      e lá quem manda é a queda limpa, mais abaixo. */
  .pilha[data-etapa="0"] .bloco,
  .pilha[data-etapa="5"] .bloco { min-height: var(--bloco-alt); }
  .pilha[data-etapa="0"] .bloco__nome,
  .pilha[data-etapa="5"] .bloco__nome { font-size: var(--tipo-h3); }
  .pilha[data-etapa="0"] .bloco__icone,
  .pilha[data-etapa="5"] .bloco__icone { width: var(--icone-gg); height: var(--icone-gg); }

  .bloco__barra { gap: var(--esp-3); }
  /*  O tamanho de trabalho, com alguma etapa aberta. O grande mora na regra
      da pilha fechada, logo acima. */
  .bloco__nome { font-size: var(--tipo-h4); }
  .bloco__icone { width: var(--icone-g); height: var(--icone-g); }
  .bloco__miolo { padding-top: var(--esp-4); }

  .bloco__detalhe {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--pilha-abre) var(--mov-saida);
  }

  .bloco--aberta .bloco__detalhe { grid-template-rows: 1fr; }
  .bloco__dentro { overflow: hidden; }

  /*  O conteúdo entra depois da altura, senão aparece espremido no meio do
      caminho. */
  .bloco__miolo { opacity: 0; transition: opacity var(--mov-medio) var(--mov-suave); }
  .bloco--aberta .bloco__miolo { opacity: 1; transition-delay: calc(var(--pilha-abre) / 2); }

  /*  A frase do fecho só entra quando a etapa 04 abre: antes disso ela
      contaria o fim antes do meio. Fica embaixo da pilha, e some junto com a
      etapa. */
  /*  O fecho não RESERVA espaço enquanto não é a vez dele: com opacity: 0 ele
      continuava ocupando 79px no pé do palco, e essa altura fazia falta para
      as etapas se espalharem. display: none devolve os 79px às faixas. O
      preço é a frase entrar sem transição — no mesmo instante em que a etapa
      04 abre, o que é aceitável. */
  .pilha__palco .fecho { grid-column: 1; display: none; }
  /*  opacity e transform explícitos: a frase tem a classe .revela, e o
      observador do lp.js nunca a viu — ela estava em display: none quando ele
      passou. Sem isto ela entra invisível e deslocada. */
  .pilha[data-etapa="4"] .fecho { display: block; opacity: 1; transform: none; }

  /*  A queda limpa vale aqui dentro: é só a partir de 64rem que há o que
      desfazer. */
  .sem-js .pilha,
  .sem-pilha .pilha { height: auto; }

  .sem-js .pilha__palco,
  .sem-pilha .pilha__palco {
    position: static;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    padding-block: 0;
  }

  /*  A queda desfaz a faixa de altura fixa junto com o resto: sem JS, as
      quatro etapas são a lista de sempre, abertas, uma embaixo da outra. */
  .sem-js .bloco,
  .sem-pilha .bloco {
    display: block;
    position: static;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .sem-js .bloco__detalhe,
  .sem-pilha .bloco__detalhe { grid-template-rows: 1fr; }

  .sem-js .bloco__miolo,
  .sem-pilha .bloco__miolo { opacity: 1; }

  .sem-js .bloco__nome,
  .sem-pilha .bloco__nome { color: var(--cor-texto); }

  .sem-js .bloco__icone,
  .sem-pilha .bloco__icone { color: var(--cor-accent); }

  .sem-js .secao--presa,
  .sem-pilha .secao--presa { padding-top: var(--esp-10); }
}

.etapa__colunas {
  display: grid;
  gap: var(--esp-6);
}

.etapa__coluna { display: grid; gap: var(--esp-3); align-content: start; }

/*  A coluna da BankAI recebe o accent no rótulo; a do escritório fica no
    cinza. É a única cor da seção, e ela diz de quem é o trabalho. */
.etapa__coluna-rotulo { color: var(--cor-texto-2); }
.etapa__coluna-rotulo--nos { color: var(--cor-accent); }

.etapa__lista { display: grid; gap: var(--esp-3); }

/*  O item abre com um fio curto: o mesmo fio de 1px que separa as seções,
    reduzido a marcador. */
.etapa__item {
  position: relative;
  padding-left: var(--esp-5);
  color: var(--cor-texto);
  font-size: var(--tipo-corpo-p);
  line-height: var(--altura-corpo);
}

.etapa__item::before {
  content: '';
  position: absolute;
  left: 0;
  /*  Meia altura de linha: o fio cruza a altura-x da primeira linha. */
  top: calc(var(--tipo-corpo-p) * var(--altura-corpo) / 2);
  width: var(--marca-item);
  height: var(--fio);
  background: var(--cor-borda-forte);
}

/*  "Nada. Essa é com a gente." é uma ausência escrita: não leva marcador. */
.etapa__item--vazio { padding-left: 0; color: var(--cor-texto-2); }
.etapa__item--vazio::before { content: none; }

/*  As duas listas lado a lado. Some daqui e a etapa aberta cresce ~120px, o
    que estoura a tela presa no computador — foi assim que esta regra deu
    falta quando um recorte anterior a levou junto. */
@container pagina (min-width: 40rem) {
  .etapa__colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-8); }
}

/*  O que acontece depois que o tráfego liga. A imagem que ficava aqui virou
    a prova da etapa 02, dentro da pilha.

    O TRAÇO SAIU (23/09) e a frase encostou na pilha. Ela é o fecho da etapa
    04, não um bloco novo: lida logo depois dela, sem fio anunciando e sem um
    vão de respiro de seção no meio. E ela mudou de lugar no HTML — passou
    para DENTRO do palco, porque fora dele ela só aparecia depois de o trilho
    inteiro terminar, com a tela vazia do palco no meio do caminho. */
.fecho { margin-top: var(--esp-5); }

.depois {
  display: grid;
  gap: var(--esp-3);
  max-width: var(--largura-leitura);
}

.depois__texto {
  color: var(--cor-texto);
  font-size: var(--tipo-corpo);
  line-height: var(--altura-corpo);
}


/* ==========================================================================
   10. CASES EM ANTES / DEPOIS (seção 5)
   --------------------------------------------------------------------------
   OS NÚMEROS AGORA SÃO CIFRA (23/09). A montagem anterior os deixava dentro
   das frases, e está registrado aqui por quê: "no case 2 o número não abre a
   frase, e extrair exigiria reordenar palavras de copy fechada". Foi
   exatamente isso que se fez — a copy dos dois "depois" é nova, e precisa do
   aval do Gustavo.

   E os dois casos não recebem o mesmo tratamento, por honestidade:
     · o caso 1 compara TOTAL com TOTAL (8 do offline → 25 somando os dois),
       então a cifra é um par, com seta;
     · o caso 2 não pode ser par. O "antes" é "2 a 3 por mês, todos do
       offline" e o "depois" é "4 vindos do digital" — os 4 são NOVOS, não
       substituem os 2 a 3. "2 → 4" diria que o total dobrou, o que a copy
       não diz. Lá a cifra é uma só, contando de zero, que é quanto o digital
       trazia antes.

   Além da cifra, a seção ganhou: o número de ordem do caso, o painel do
   "depois" com o creme e o fio de accent (que CRESCE quando o caso entra na
   tela), a seta que desliza, e a linha corrida de números virando ficha com
   rótulos. Quem liga tudo é uma classe só, .caso--ligado, posta pelo
   pagina.js (bloco 6) — o CSS faz o resto.
   ========================================================================== */

/*  Um mecanismo só entre dois cases: o fio e o respiro do próprio .case,
    como .etapa e .faq. Havia três (gap de 64 + padding de 48 + 48) e eles
    abriam 161px de vazio no meio da seção de prova. */
.casos { display: grid; gap: 0; border-bottom: var(--fio) solid var(--cor-borda); }

.case--virada {
  display: grid;
  gap: var(--esp-5);
  align-items: start;
  padding-block: var(--faixa-respiro);
}

.virada {
  display: grid;
  gap: var(--fio);
  border-block: var(--fio) solid var(--cor-borda);
  background: var(--cor-borda);
}

.virada__lado {
  display: grid;
  gap: var(--esp-2);
  align-content: start;
  padding: var(--esp-5) 0;
  background: var(--cor-fundo);
}

.secao--clara .virada__lado { background: var(--cor-superficie); }

.virada__rotulo { color: var(--cor-texto-2); }
.virada__rotulo--depois { color: var(--cor-accent); }

.virada__texto {
  max-width: var(--col-virada);
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo);
  line-height: var(--altura-corpo);
}

.virada__rotulo--depois + .virada__texto {
  color: var(--cor-texto);
  font-size: var(--tipo-corpo-g);
  font-weight: var(--peso-medio);
  line-height: var(--altura-solta);
}

/*  SÓ PARA A VOZ: o texto que o leitor de tela precisa e a tela não. A seta
    é decoração (aria-hidden), e sem esta palavra a cifra seria lida como
    "8 25 contratos por mês". O recorte de 1px é a forma que não some do
    fluxo de leitura — display: none e visibility: hidden sumiriam. */
.so-voz {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*  O número de ordem do caso. Numa seção que é toda texto, é onde o olho
    pousa — o mesmo papel que o numeral tem na pilha da seção 4. */
.case__cabeca { display: flex; align-items: baseline; gap: var(--esp-4); }

.case__num {
  flex: none;
  font-size: var(--tipo-micro);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-cod);
  color: var(--cor-accent);
}

/*  O PAINEL DO "DEPOIS". Antes os dois lados eram iguais e só o texto dizia
    qual é o argumento. Agora o depois tem o creme (o mesmo da etapa aberta
    da seção 4) e a marca de accent na entrada.

    A marca é um pseudo-elemento, e não uma borda, porque ela CRESCE: borda
    não se anima de cima para baixo. Escala no eixo Y com origem no alto. */
.virada__lado:last-child {
  position: relative;
  background: var(--cor-fundo);
  padding-left: var(--esp-5);
}

.secao--clara .virada__lado:last-child { background: var(--cor-fundo); }

.virada__lado:last-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--virada-fio);
  background: var(--cor-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--virada-fio-tempo) var(--mov-saida);
}

.caso--ligado .virada__lado:last-child::before { transform: scaleY(1); }

/*  A CIFRA. O "de" pequeno e cinza, o "para" grande e escuro, a unidade em
    corpo de texto ao lado. A régua é a do design system (--tipo-cifra), que
    esta página não usava em lugar nenhum até aqui. */
.salto {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin: 0;
}

.salto__de {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display-leve);
  font-size: var(--tipo-cifra-p);
  line-height: 1;
  color: var(--cor-texto-2);
  font-variant-numeric: tabular-nums lining-nums;
}

.salto__seta {
  color: var(--cor-borda-forte);
  font-size: var(--tipo-corpo);
  opacity: 0;
  transform: translateX(calc(var(--virada-seta-anda) * -1));
  transition:
    opacity var(--virada-seta-tempo) var(--mov-suave) var(--virada-seta-espera),
    transform var(--virada-seta-tempo) var(--mov-saida) var(--virada-seta-espera);
}

.caso--ligado .salto__seta { opacity: 1; transform: none; }

.salto__para {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display-solido);
  font-size: var(--tipo-cifra);
  line-height: 1;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums lining-nums;
}

.salto__unidade {
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo);
  line-height: var(--altura-corpo);
}

/*  A FICHA DE CADA CASO, no lugar da linha corrida de números: mesmos dados,
    com rótulo. No celular é uma coluna; de 40rem em diante, quatro campos
    lado a lado. O fio entre eles é o gap sobre o fundo de borda — o mesmo
    mecanismo da .virada e da faixa da seção 3. */
.ficha-caso {
  display: grid;
  gap: var(--fio);
  margin: var(--esp-5) 0 0;
  background: var(--cor-borda);
  border: var(--fio) solid var(--cor-borda);
}

.ficha-caso > div {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
  background: var(--cor-fundo);
}

.secao--clara .ficha-caso > div { background: var(--cor-superficie); }

.ficha-caso dt {
  font-size: var(--tipo-micro);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-cod);
  text-transform: uppercase;
  color: var(--cor-texto-2);
}

.ficha-caso dd {
  margin: 0;
  color: var(--cor-texto);
  font-size: var(--tipo-corpo);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: var(--altura-corpo);
}

/*  MENOS MOVIMENTO: a seção nasce no fim — número final, fio inteiro, seta no
    lugar. O tokens.css zera as transições do sistema, mas estas são escritas
    aqui e precisam ser ditas. */
@media (prefers-reduced-motion: reduce) {
  .virada__lado:last-child::before { transform: none; transition: none; }
  .salto__seta { opacity: 1; transform: none; transition: none; }
}

/*  E SEM JS a classe .caso--ligado nunca chega: sem esta queda, o fio ficaria
    invisivel e a seta tambem — o numero estaria certo e a virada, muda. */
.sem-js .virada__lado:last-child::before { transform: none; transition: none; }
.sem-js .salto__seta { opacity: 1; transform: none; transition: none; }

@container pagina (min-width: 40rem) {
  .virada { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .virada__lado { padding-inline: var(--esp-5); }
  .virada__lado:first-child { padding-inline-start: 0; }

  .ficha-caso { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*  REDECLARA: a grade de duas colunas do .case do lp.css (64rem), com os
    eixos separados — 64px entre cabeçalho e virada, 24 entre a virada e a
    linha de dados que pertence a ela. O gap uniforme do lp.css soltava a
    linha 64px abaixo da virada. */
@container pagina (min-width: 64rem) {
  .case--virada {
    grid-template-columns: minmax(0, var(--col-case)) minmax(0, 1fr);
    column-gap: var(--esp-9);
    row-gap: var(--esp-5);
  }

  .case--virada .case__cabeca { padding-right: var(--esp-6); }
  /*  A ficha ocupa a coluna da direita, como a linha de números que ela
      substituiu. */
  .ficha-caso { grid-column: 2; }
}


/* ==========================================================================
   11. PESSOAS (seção 6)
   --------------------------------------------------------------------------
   No celular o retrato ocupa a coluna inteira: com 208px fixos ele deixava
   um vão de 62 a 172px à direita, que crescia com o aparelho. A seção existe
   porque advogado conservador compra de gente; a cara é o elemento que
   carrega isso — e por isso o retrato cresceu de 208 para 320px em 23/09:
   numa coluna de ~630 ele tinha tamanho de avatar de lista, e a seção que
   mais depende de rosto era a que menos mostrava rosto.

   Sem hover: uma bio não é interativa. O hover que havia aqui também
   sobrescrevia a transição da .revela (mesmo seletor de uma classe, folha
   posterior) e os dois cards entravam num corte seco, sem subir.
   ========================================================================== */

/*  LADO A LADO, EM CARTÃO (24/09, pedido do Gustavo, no modelo da EPIC):
    retrato em cima na largura do cartão, nome e função logo abaixo, e a bio
    em letra menor. Houve uma versão de uma pessoa por linha quando as bios
    cresceram; o Gustavo preferiu o par lado a lado — e a letra menor é o que
    faz a bio longa caber na coluna sem virar uma torre de texto. */
.pessoas {
  display: grid;
  gap: var(--esp-5);
}

.pessoa {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  overflow: hidden;
  border: var(--fio) solid var(--cor-borda);
  border-radius: var(--print-raio);
  background: var(--cor-fundo);
}

.secao--clara .pessoa { background: var(--cor-superficie); }

/*  O retrato é quadrado no arquivo e sai 5:4 no cartão, perdendo só uma
    faixa fina. O recorte sobe um pouco (object-position) para o rosto não
    perder a testa. */
.pessoa__foto {
  display: block;
  width: 100%;
  aspect-ratio: var(--pessoa-foto-prop);
  object-fit: cover;
  object-position: center var(--pessoa-foto-foco);
  background: var(--cor-borda);
}

.pessoa__corpo {
  display: grid;
  gap: var(--esp-1);
  align-content: start;
  padding: var(--esp-5);
}

.pessoa__nome {
  font-size: var(--tipo-h5);
  font-weight: var(--peso-semi);
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-h3);
}

.pessoa__funcao { color: var(--cor-accent); }

.pessoa__texto {
  margin-top: var(--esp-3);
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo-p);
  line-height: var(--altura-corpo);
}

/*  O CARTÃO TEM LARGURA PRÓPRIA (24/09): esticado em meia seção (~640px),
    o retrato ficava do tamanho da tela e o recorte 4:3 aproximava demais o
    rosto — "estamos muito grandes na tela". Com 448px e 5:4 a foto sai quase
    inteira. */
@container pagina (min-width: 48rem) {
  .pessoas {
    grid-template-columns: repeat(2, minmax(0, var(--pessoa-cartao)));
    /*  O par fica no CENTRO da seção (Gustavo, 24/09): à esquerda, os dois
        cartões estreitos deixavam um vazio grande do lado direito. */
    justify-content: center;
  }
}

@container pagina (min-width: 64rem) {
  .pessoa__corpo { padding: var(--esp-6); }
}


/* ==========================================================================
   12. FAQ (seção 8) — perguntas recolhidas, cabeça ao lado da lista
   --------------------------------------------------------------------------
   Era lista aberta em toda a largura, com a pergunta à esquerda e a resposta
   à direita a partir de 64rem. Esta é a última seção, DEPOIS do CTA final:
   aberta, virava uma parede de texto que puxava a atenção para longe dele.
   Recolhida, a página termina limpa.

   A primeira tentativa foi centrada, como na EPIC, e ficou fraca: uma coluna
   estreita boiando em muito branco, e a única coisa centrada de uma página
   que é toda alinhada à esquerda. Agora o título fica numa coluna à esquerda
   e a lista ao lado — o mesmo par "rótulo → conteúdo" das outras seções —, e
   a pergunta cresce de 18 para 20px no computador, porque ali ela é o único
   texto da linha.

   <details>/<summary> nativo: zero JS, zero estado nosso. Abre no clique e
   no teclado, o leitor de tela anuncia o estado sem ARIA escrito à mão, e o
   Ctrl+F do navegador abre sozinho a pergunta fechada que casa com a busca —
   era esse o risco de esconder resposta, e ele não existe mais.

   A cruz é desenhada com dois fios de 1px (o mesmo fio que separa as seções,
   virado marcador) e gira 45° ao abrir, virando um X. Sem fonte de ícone,
   sem asset, sem caractere que dependa de tipografia. */

.faq-bloco { display: grid; gap: var(--esp-6); }

@container pagina (min-width: 64rem) {
  .faq-bloco {
    grid-template-columns: minmax(0, var(--col-faq)) minmax(0, 1fr);
    gap: var(--esp-9);
    align-items: start;
  }

  /*  A cabeça para de empurrar 64px para baixo: aqui ela é vizinha da lista,
      não um cabeçalho em cima dela. */
  .faq__cabeca { margin-bottom: 0; }
}

.faq {
  display: grid;
  max-width: var(--largura-leitura);
  border-top: var(--fio) solid var(--cor-borda);
}

.faq__item { border-bottom: var(--fio) solid var(--cor-borda); }

/*  list-style: none tira o triângulo do <details>; o ::-webkit-details-marker
    é o mesmo triângulo no Safari, que ignora o list-style. */
.faq__pergunta {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  /*  Respiro menor que o da faixa aberta (que era 32→48px de cada lado): o
      pedido era uma seção MENOR, e recolhida ela é uma linha, não um bloco.
      24px de cada lado ainda deixam a linha bem acima dos 44px de alvo de
      toque, com a pergunta em duas linhas ou uma. */
  padding-block: var(--esp-5);
  cursor: pointer;
  list-style: none;
  color: var(--cor-texto);
  font-size: var(--tipo-h6);
  font-weight: var(--peso-semi);
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-h3);
}

.faq__pergunta::-webkit-details-marker { display: none; }

@container pagina (min-width: 64rem) {
  .faq__pergunta { font-size: var(--tipo-h5); }
}

/*  A cruz, no fim da linha. Dois gradientes de 1px cruzados: um deitado e um
    em pé. flex: none para ela não encolher quando a pergunta quebra. */
.faq__pergunta::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: var(--esp-5);
  height: var(--esp-5);
  background:
    linear-gradient(var(--cor-accent) 0 0) center / 100% var(--fio) no-repeat,
    linear-gradient(var(--cor-accent) 0 0) center / var(--fio) 100% no-repeat;
  transition: transform var(--mov-medio) var(--mov-suave);
}

.faq__item[open] .faq__pergunta::after { transform: rotate(45deg); }

.faq__resposta {
  padding-bottom: var(--esp-5);
  color: var(--cor-texto-2);
  font-size: var(--tipo-texto);
  line-height: var(--altura-corpo);
}

/*  A abertura só desliza onde o navegador sabe animar altura automática. Sem
    isso o <details> abre de uma vez, que é o comportamento nativo e está
    correto — o @supports é melhoria, não dependência. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size var(--mov-medio) var(--mov-suave),
      content-visibility var(--mov-medio) allow-discrete;
  }

  .faq__item[open]::details-content { block-size: auto; }
}


/* ==========================================================================
   13. CHAMADA FINAL (seção 7)
   ========================================================================== */

.chamada__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-4); }

/*  A PINTURA DA CHAMADA. Ela saiu da dobra em 23/09 (atrapalhava o texto) e
    voltou aqui, onde a metade direita estava vazia — mesmo recurso da seção
    3, o ramo atrás do título-promessa.

    DUAS COISAS QUE NÃO SÃO ÓBVIAS.

    1. ESPELHADA. No arquivo a folha cresce para a direita; espelhada, ela
       aponta para DENTRO da página, na direção do texto, em vez de empurrar
       o olho para a borda.

    2. A LARGURA É O DOBRO DO QUE SE VÊ. Medido no arquivo: a tinta forte
       ocupa só x 0..1209 dos 2400px — metade dele é papel vazio. Espelhada,
       essa metade vazia fica à esquerda e passa por trás do texto sem
       aparecer (o papel dela é o creme da página). Por isso a caixa tem 96%
       da seção para a tinta ocupar ~670px: com os 50% "naturais" ela saía do
       tamanho de um selo.

    O TETO é a ponta da folha de cima, que chega perto da última linha do
    texto de apoio. Passar disso é repetir o defeito que a tirou da dobra. */
.chamada__arte { display: none; }

@container pagina (min-width: 64rem) {
  /*  No celular a seção é uma coluna só: a pintura cairia por baixo do texto,
      e é justamente isso que não pode. Ela existe só onde há metade vazia. */
  #diagnostico { position: relative; isolation: isolate; overflow: hidden; }

  /*  A ALTURA DA SEÇÃO MANDA (24/09). Com o print da Clara fora, a seção
      encolheu para ~600px e a folha, pela largura de 96%, saía com 750 —
      cortada em cima e embaixo. Agora ela tem a altura da seção e a largura
      sai da proporção do arquivo: a folha aparece inteira. */
  .chamada__arte {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    width: auto;
    height: 100%;
    transform: scaleX(-1);
    opacity: var(--chamada-arte-veu);
    pointer-events: none;
  }
}


/* ==========================================================================
   14. RODAPÉ
   --------------------------------------------------------------------------
   O .rodape do lp.css tem uma linha de texto e uma fileira de links. O texto
   de apoio desta página tem duas linhas; a do Provimento 205/2021 precisa de
   medida maior que a --largura-estreita do componente.
   ========================================================================== */

.rodape__aviso {
  max-width: var(--largura-leitura);
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo-p);
  line-height: var(--altura-corpo);
}

/*  O link do Instagram media 241×20px: menos da metade da área de toque
    mínima. A caixa cresce até 44px (a mesma do botão pequeno da barra) sem
    o texto mudar de lugar. */
.rodape__link { min-height: var(--btn-alt-p); }

/*  A última linha leva o aviso à esquerda e o "Voltar ao topo" à direita.
    Quando não cabem lado a lado (celular), o link desce para baixo do aviso. */
.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-5);
}
.rodape__topo { flex: none; }


/* ==========================================================================
   15. RÓTULOS EM CAIXA ALTA — um tamanho só
   --------------------------------------------------------------------------
   A página tinha dois tamanhos para o mesmo papel: --tipo-micro (12px) no
   período da etapa e na função das pessoas, --tipo-nano (11px) nos campos
   da ficha, nas colunas da etapa e no antes/depois. O tokens.css define
   micro como "label uppercase" e nano como "caption / spec". Todo rótulo
   passa a micro — no celular, 11px em caixa alta é o limite da leitura.
   ========================================================================== */

.ficha__rotulo,
.etapa__coluna-rotulo,
.virada__rotulo,
.pessoa__funcao {
  font-size: var(--tipo-micro);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-label);
  line-height: var(--altura-solta);
  text-transform: uppercase;
}


/* ==========================================================================
   16. BOTÃO FLUTUANTE DO WHATSAPP
   --------------------------------------------------------------------------
   Fica FORA do .lp no HTML, e isso é de propósito: o .lp declara
   container-type, e motores anteriores a 2024 tratam o container como bloco
   contenedor de position: fixed — o botão rolaria junto com a página. Fora
   dele o problema não existe em motor nenhum. Por consequência ele não
   alcança @container pagina, e não precisa: tem um tamanho e uma margem.

   COR: o accent. O verde da marca do WhatsApp com o glifo branco mede
   1,99:1 e o disco verde sobre o creme 1,70:1 — os dois reprovam o piso de
   3:1 da WCAG 1.4.11 — e quebraria a regra de um accent só. Branco sobre o
   accent mede 5,61:1; o disco sobre o creme, 4,80:1.

   ONDE EXISTE: só no celular. A partir de 48rem o botão fixo é o da barra
   (bloco 3), e os dois trocam de lugar na mesma régua de @media.

   QUANDO APARECE: o pagina.js recolhe o disco enquanto o botão da dobra, a
   chamada final ou o rodapé estão na tela — os dois primeiros já são CTA,
   e o rodapé é o único lugar em que ele ficaria PARADO sobre texto. A
   sentinela da dobra é o botão, não a dobra inteira: num celular pequeno o
   botão da dobra cai abaixo da primeira tela, e o disco segura a ação até
   ele aparecer. Sem JS ele fica sempre visível, a mesma degradação do resto
   da página.
   ========================================================================== */

.zap {
  position: fixed;
  right: calc(var(--margem-pagina) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--margem-pagina) + env(safe-area-inset-bottom, 0px));
  z-index: var(--zap-camada);
  display: grid;
  place-items: center;
  width: var(--zap-tam);
  height: var(--zap-tam);
  border-radius: var(--raio-pilula);   /* disco: o formato SIGNIFICA redondo, como o numeral da etapa */
  background: var(--cor-accent);
  color: var(--cor-superficie);
  box-shadow: var(--zap-sombra);
  transition:
    background var(--mov-medio) var(--mov-suave),
    opacity var(--mov-medio) var(--mov-suave),
    transform var(--mov-medio) var(--mov-saida);
}

/*  O glifo tem 32px num disco de 56 (57% do diâmetro): é a proporção em que
    ele lê como a marca, e não como um ícone solto no meio de um círculo. */
.zap .ico { width: var(--icone-g); height: var(--icone-g); }

.zap:active { transform: translateY(var(--desloca-ativo)); }

.zap--recolhido {
  opacity: 0;
  transform: translateY(var(--zap-desloca));
  pointer-events: none;
}

/*  O disco nasce recolhido no HTML, para não piscar sobre a dobra enquanto o
    JS carrega. Sem JS nada o mostraria: a trava .sem-js (que o lp.js tira no
    primeiro instante) devolve o disco a quem está sem script. */
.sem-js .zap--recolhido {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (hover: hover) {
  /*  O mesmo destino do .btn--primario: escurece. Sem escala, sem brilho,
      e a sombra não cresce. */
  .zap:hover { background: var(--cor-accent-hover); }
}

/*  A partir daqui o botão fixo é o da barra. display: none também tira o
    disco do teclado e do leitor de tela, sem depender do JS. */
@media (min-width: 48rem) {
  .zap { display: none; }
}


/* ==========================================================================
   17. TOQUE SEM HOVER
   --------------------------------------------------------------------------
   Em tela de toque o navegador aplica :hover no primeiro toque e só tira
   no próximo toque FORA do elemento. O lp.css declara os hovers de card e
   de etapa sem perguntar se o aparelho tem hover: no celular, tocar numa
   etapa para rolar deixava a faixa creme e o disco laranja até o próximo
   toque — parecia um botão quebrado. Aqui eles voltam ao estado de repouso
   quando o aparelho principal não faz hover. Notebook com tela de toque e
   mouse continua com hover, que é o esperado.
   ========================================================================== */

@media (hover: none) {
  .card:hover { background: var(--cor-fundo); }
  .secao--clara .card:hover { background: var(--cor-superficie); }
  .card:hover .card__traco { width: var(--esp-6); }
}


/* ==========================================================================
   19. O VENTO ENTRE AS SEÇÕES
   --------------------------------------------------------------------------
   ONDE ELE ENTRA. Em duas emendas, não em todas — em sete seguidas ele virava
   papel de parede e parava de dizer "virou o assunto". São as ENTRADAS DAS
   SEÇÕES CREME da prova (5) e do pedido (7). A da promessa (3) saiu em 24/09,
   pedido do Gustavo: ela já abre com o vídeo do ramo, que é o diferencial
   daquela passagem. O branco é onde se
   trabalha — o problema, o como, as pessoas, as perguntas — e lá o fio basta.
   A emenda da seção 3 para a 4 ficou de fora também por outro motivo: em cima
   dela balança o ramo de bordo, e vento de folha logo abaixo de um vídeo de
   folhas é a mesma coisa duas vezes.

   A emenda entre duas seções deixa de ser um fio reto e vira o rastro do
   vento: acima dele a cor da seção de cima, abaixo a da seção de baixo. Quem
   desenha é o pagina.js (bloco 5), num canvas, quadro a quadro — a forma de
   cada risco muda o tempo todo, e isso CSS não faz: transform move e estica a
   camada inteira, mas a forma continua a mesma para sempre.

   A FAIXA NÃO OCUPA ESPAÇO NOVO. Ela tem meia altura de margem negativa em
   cima e meia embaixo: fica montada em cima da emenda, metade dentro do
   respiro de uma seção, metade dentro do da outra. Sem isso a página
   cresceria ~670px, e o respiro entre seções já é dado pelo padding delas.
   O que ela invade é padding, onde não mora conteúdo.

   SEM JS a faixa mostra exatamente o que a página mostrava antes: as duas
   cores se encontrando numa linha reta, com o fio do sistema em cima dela.
   É o próprio fundo da faixa, em dois passos. Quando o canvas desenha o
   primeiro quadro, o JS marca .vento--pronto e o fundo vira chapado — daí em
   diante quem pinta é ele.
   ========================================================================== */

.vento {
  position: relative;
  z-index: 1;                       /* paira sobre o respiro das duas seções */
  height: var(--vento-alt);
  margin-block: calc(var(--vento-alt) / -2);
  background:
    linear-gradient(to bottom,
      var(--vento-cima) calc(50% - var(--fio)),
      var(--cor-borda) calc(50% - var(--fio)) 50%,
      var(--vento-baixo) 50%);
}

.vento--pronto { background: var(--vento-cima); }
.vento > canvas { display: block; width: 100%; height: 100%; }

/*  As duas direções da emenda. Seção clara é branca; as outras, creme. */
.vento--branco { --vento-cima: var(--cor-fundo); --vento-baixo: var(--cor-superficie); }
.vento--creme  { --vento-cima: var(--cor-superficie); --vento-baixo: var(--cor-fundo); }

/*  A seção que vem depois do vento não leva fio: o vento É a emenda. */
.vento + .secao,
.vento + .rodape { border-top: 0; }



/* ==========================================================================
   18. VERIFICAÇÃO — NENHUM SUBLINHADO
   --------------------------------------------------------------------------
   A regra do Gustavo é do sistema, e este bloco é o cinto de segurança dela
   nesta página: se algum estilo futuro tentar sublinhar qualquer coisa, aqui
   ele é desfeito. Não substitui a disciplina de não escrever o sublinhado.
   ========================================================================== */

a, a:hover, a:focus, a:focus-visible, a:active,
.faq__pergunta, .pessoa__nome, .case__quem, .etapa__titulo {
  text-decoration: none;
}