/* Celular (até 600 px). Recriado em 20/10 (pedido dela), página por página, revisado
   com o seletor Desktop · Tablet · Mobile do artefato. Só ajustes de layout desta faixa;
   o desktop não muda. */
@media (max-width: 600px) {

  /* ---------- Site todo ---------- */
  /* logo do menu menor (ocupava um terço da largura) */
  .logo img { height: 26px; }
  /* rodapé: os selos quebram de linha em vez de vazar da tela */
  .footer-cert-badges { flex-wrap: wrap; gap: 14px; }
  .footer-cert-badges img { max-width: 100%; height: auto; }

  /* ---------- Home ---------- */
  /* as quebras de linha manuais do texto do hero são do desktop */
  .hero-lead br { display: none; }
  .hero-lead { font-size: 16px; padding: 0 4px; }
  /* 20/10 (pedido dela): a faixa de logos aparecia cortada embaixo ao abrir a página (o
     hero tinha 760 px fixos). Agora o hero ocupa a altura visível da tela menos a faixa,
     então os logos já aparecem inteiros no primeiro carregamento; as linhas se ajustam
     sozinhas ao espaço (js/web-threads.js) */
  .hero { min-height: max(520px, calc(100svh - var(--marquee-h))); padding-top: 104px; }
  /* em telas baixas a setinha de rolar encostava no botão: some quando não há espaço */
  .hero .scroll-indicator.is-crowded { visibility: hidden; }
}

/* =====================================================================================
   23/10 (pedido dela): revisão dos espaçamentos no celular, primeira rodada. SÓ NAS
   PÁGINAS EM PORTUGUÊS no começo; desde 23/10 nas três línguas (as regras que valem
   para tablet e celular estão no fim do tablet.css).
   ===================================================================================== */
@media (max-width: 600px) {
  /* Home: o "Quem somos?" termina no semicírculo, colado no rodapé (o respiro de 64 px das
     seções no celular deixava um vão; comentário dela, 23/10) */
  .section.about { padding-bottom: 0; }

  /* BFM, chamada final: texto numa coluna mais estreita, para os laços de vidro das laterais
     não passarem por cima dele (comentário dela, 23/10) */
  .bfm-cta p { max-width: 280px; }

  /* Home, hero (comentário dela, 23/10): texto e botão mais baixos, perto das linhas (que
     se ajustam sozinhas logo abaixo do botão, js/web-threads.js) */
  .hero { padding-top: clamp(104px, 22svh, 190px); }
  /* Home, números (comentário dela): sem a onda de dados no fundo e números menores, com
     folga das bordas dos cards */
  .bignumbers canvas.bn-wave { display: none; }
  .bn-number { font-size: 13.5vw; }
  /* Home, "Quem somos?" (comentário dela): o semicírculo maior, mesmo vazando da tela, e por
     isso mais perto do botão */
  .about-banner-sphere { width: 150%; }
  /* (comentário dela: metade da distância entre o botão e o semicírculo) */
  .about-banner { margin-top: -160px; }

  /* Score, hero (comentário dela, 23/10): só o arco, centrado, com o número logo abaixo e o
     "de 1000" e a faixa embaixo dele, também centrados (js/score-line.js, .is-arc) */
  .sc-hero .sc-line.is-arc {
    -webkit-mask-image: linear-gradient(to right, transparent var(--arc-l), #000 calc(var(--arc-l) + 28px), #000 calc(var(--arc-r) - 28px), transparent var(--arc-r));
            mask-image: linear-gradient(to right, transparent var(--arc-l), #000 calc(var(--arc-l) + 28px), #000 calc(var(--arc-r) - 28px), transparent var(--arc-r));
  }
  .sc-hero .sc-line.is-arc .sc-line__right { left: 50%; top: calc(var(--peak, 55%) - var(--sc-gap, 26px) * .4); transform: translateX(-50%); }
  .sc-hero .sc-line.is-arc .sc-line__above { display: flex; flex-direction: column; align-items: center; }
  .sc-hero .sc-line.is-arc .sc-line__aside { position: static; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 6px; transform: none; }

  /* Teste Agora, passo 2 (comentário dela, 23/10: "não aparece quase nada do extrato"): no
     celular cada lançamento vira um bloco em vez de uma linha de tabela com rolagem lateral:
     data e valor em cima, a descrição inteira embaixo (menor, quebrando linha) e a categoria
     por último, quando aparece */
  #passo-2 table thead { display: none; }
  #passo-2 table, #passo-2 table tbody { display: block; width: 100%; min-width: 0; }
  #passo-2 table tr {
    display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  #passo-2 table td { display: block; padding: 0; border: 0; white-space: normal; font-size: 13px; line-height: 1.35; }
  #passo-2 table td:nth-child(1) { grid-column: 1; grid-row: 1; color: #9aa59f; font-size: 12px; }
  #passo-2 table td.num { grid-column: 2; grid-row: 1; text-align: right; font-size: 13px; }
  #passo-2 table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  #passo-2 table td:nth-child(2) code { font-size: 12px; white-space: normal; word-break: break-word; }
  #passo-2 table td.cat { grid-column: 1 / -1; grid-row: 3; }
  #passo-2 table tr:not(.is-done) td.cat { display: none; }

  /* (depois de analisar, os números e os gráficos passavam da borda direita do card: as
     colunas cresciam até o tamanho do texto) */
  #passo-2 .exp-insights, #passo-2 .exp-insights > * { min-width: 0; max-width: 100%; }
  #passo-2 .exp-insights { grid-template-columns: minmax(0, 1fr); }
  #passo-2 .exp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body #passo-2 .exp-kpi strong { font-size: 19px; }
  #passo-2 .exp-kpi span, #passo-2 .exp-kpi small { font-size: 12px; }
  #passo-2 .exp-chart { gap: 4px; }
  #passo-2 .exp-bar { min-width: 0; }

  /* ---------- Teste Agora: cards redesenhados para o celular (comentário dela, 23/10:
     "todos os cards do Teste Agora precisam ser redesenhados para o mobile") ---------- */
  /* card: menos respiro interno, para o conteúdo ganhar largura */
  body :is(#passo-1, #passo-2, #passo-3) .exp-card { padding: 18px 16px; }
  body :is(#passo-1, #passo-2, #passo-3) .exp-label { font-size: 12px; letter-spacing: .06em; margin-bottom: 10px; }
  /* passo 1: os 6 exemplos em duas colunas (3 linhas), todos à vista (a fileira que deslizava
     para o lado escondia as opções; comentário dela) */
  body #passo-1 .exp-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex-wrap: nowrap; }
  body #passo-1 .exp-chip { height: auto; min-height: 36px; padding: 6px 8px; font-size: 12px; line-height: 1.25; white-space: normal; text-align: center; }
  /* passo 1: as etapas do enriquecimento ("Lendo o lançamento", "Identificando a
     contraparte"...) numa lista vertical; lado a lado elas passavam da borda direita
     (comentário dela) */
  body #passo-1 .exp-scan__steps { flex-direction: column; align-items: stretch; gap: 8px; }
  body #passo-1 .exp-scan__steps > li {
    flex: none; width: auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    text-align: left; font-size: 13px; line-height: 1.3;
  }
  body #passo-1 .exp-scan__steps > li br { display: none; }
  body #passo-1 .exp-scan__steps > li::before { flex: none; margin: 0; }

  /* passo 1: descrição e valor mais compactos */
  body #passo-1 .exp-raw { gap: 8px; margin-top: 14px; }
  body #passo-1 .exp-raw__field { padding: 10px 12px; }
  body #passo-1 .exp-raw__field:not(.exp-raw__field--amt) { padding-bottom: 26px; }
  body #passo-1 .exp-raw__k { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
  body #passo-1 .exp-raw__v { font-size: 13px; line-height: 1.45; }
  body #passo-1 .exp-raw__field--amt .exp-raw__v { font-size: 16px; font-weight: 700; }
  /* botões dos passos na largura toda */
  body :is(#passo-1, #passo-2) .exp-btn { display: flex; width: 100%; justify-content: center; }
  /* passo 1: resultado em duas colunas compactas */
  body #passo-1 .exp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  body #passo-1 .exp-field { padding: 8px 0; gap: 1px; }
  body #passo-1 .exp-field dt { font-size: 11px; }
  body #passo-1 .exp-field dd { font-size: 13px; line-height: 1.35; }
  /* passo 1: sem a área reservada para o resultado (deixava um vão embaixo do botão) */
  body #passo-1 .exp-result { min-height: 0; }
  body #passo-1 .exp-result:empty::before { display: none; }
  /* passo 2: os valores em cima das barras sem se sobrepor */
  body #passo-2 .exp-bar b { font-size: 9.5px; letter-spacing: -.01em; white-space: nowrap; }
  body #passo-2 .exp-bar em { font-size: 11px; }
  /* passo 3 antes da análise: um aviso baixo em vez de um card alto vazio */
  body #passo-3 .exp-card:has(#expLocked:not([hidden])) { min-height: 0; height: 120px; }
  #expScore .exp-locked:not([hidden]) { padding: 0 20px; font-size: 13px; }
  /* passo 3: cada fator com o nome numa linha e a barra + valor embaixo */
  body #passo-3 .exp-attrs li { grid-template-columns: minmax(0, 1fr) 40px; gap: 6px 10px; padding: 8px 0; font-size: 13px; }
  body #passo-3 .exp-attrs li > span { grid-column: 1 / -1; }
  body #passo-3 .exp-attrs li > em { text-align: right; }
  body #passo-3 .exp-attrs h3 { font-size: 13px; }
  /* passo 2: os 4 números menores e o resto das listas em 13 px */
  body #passo-2 .exp-kpi { padding: 10px 12px; }
  body #passo-2 :is(.exp-cats li, .exp-signals li) { font-size: 13px; }
  body #passo-2 .exp-cats li { grid-template-columns: minmax(0, 1fr) 80px 36px; gap: 8px; }

  /* páginas de produto (comentário dela, 23/10: "diminuir a distância entre seções"): menos
     respiro depois da seção do problema e em volta do "Como funciona" */
  .ins-pain { padding-bottom: 48px; }
  .ins-steps { padding: 40px 0 88px; }
  .ins-steps__track { margin-top: 48px; }
  /* 29/10 (her request): the step circles and their digits 20% smaller on phones (83/69px
     on the other screens): they were out of scale with the screen and the text under them */
  .ins-steps__num { width: 66px; height: 66px; font-size: 55px; }

  /* Institucional, mosaico de fotos (comentário dela, 23/10: "quase não dá pra ver"): mais que
     o dobro da altura; a faixa fica mais larga que a tela (o carrossel só mostra o meio dela)
     e esfuma menos nas laterais */
  .inst-mosaic { width: 240vw; max-width: none; margin-left: calc(50% - 120vw); margin-right: 0; }
  .inst-mosaic { -webkit-mask-image: linear-gradient(to right, transparent 29%, #000 36%, #000 64%, transparent 71%); mask-image: linear-gradient(to right, transparent 29%, #000 36%, #000 64%, transparent 71%); }

  /* Institucional, valores do DNA embaixo da hélice (comentário dela: "melhorar o
     posicionamento"): a barra verde da altura do texto (sobrava embaixo), espaço igual entre
     eles, título e texto mais próximos e o bloco centrado na tela */
  .inst-dna__fallback { display: grid; gap: 22px; max-width: 340px; margin-left: auto; margin-right: auto; }
  .inst-dna__stage .inst-value, .inst-dna__stage .inst-value--l, .inst-dna__stage .inst-value--r {
    position: static; height: auto; min-height: 0; margin: 0; padding: 2px 0 2px 14px; border: 0; border-left: 3px solid #62ECA4; text-align: left;
  }
  .inst-dna__stage .inst-value h3 { font-size: 17px; line-height: 22px; margin-bottom: 4px; }
  .inst-dna__stage .inst-value p { font-size: 13px; line-height: 1.5; }

  /* Insights: os pilares numa coluna só */
  .ins-pillars__grid:not(.sc-cards) > * { width: 100%; }

  /* Insights: o texto do hero ficava em cima da animação dos dados (título e texto sobre as
     linhas e os rótulos, e a setinha encostada no botão). Agora o texto vem primeiro, em
     bloco, e a animação fica numa faixa embaixo dele */
  .ins-hero:not(.sc-hero) { min-height: 0; padding-bottom: 350px; }
  .ins-hero:not(.sc-hero) .ins-hero__bg { top: auto; bottom: 50px; height: 370px; }

  /* Score: o título da chamada final encostava no último card (o texto sobe 150 px no
     desktop para não cobrir as placas de vidro; no celular elas ficam embaixo) */
  .sc-cta .ins-cta__content { top: 0; }

  /* Teste Agora: o botão "Enriquecer e analisar o fluxo de caixa" passava da borda do card */
  .exp-btn { max-width: 100%; white-space: normal; text-align: center; }
  .exp-btn span { white-space: normal; }

  /* Institucional: menos vazio entre as seções */
  .inst-history { margin-top: 88px; }
  .inst-dna { margin-top: 96px; }
  .inst-video { padding: 72px 0; }
  .inst-lead-sec { margin-top: 40px; }
}