/* Tablet (601–1024 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 (min-width: 601px) and (max-width: 1024px) {

  /* ---------- Home ---------- */
  /* números: 2 × 2 em vez de uma coluna só */
  .bn-card--s12, .bn-card--s8 { grid-column: span 10; }
  .hero-lead { font-size: 17px; }
}

/* =====================================================================================
   23/10 (pedido dela): revisão dos espaçamentos no tablet e no celular, primeira rodada.
   Primeiro só nas páginas em português; desde 23/10 (aprovado por ela) vale nas três línguas.
   ===================================================================================== */

/* ---------- Tablet e celular (até 1024 px) ---------- */
@media (max-width: 1024px) {
  /* nada pode passar da largura da tela: cards no meio da entrada (vindos de fora) e o
     celular da BFM alargavam a página, e o navegador do celular afastava o zoom (na BFM o
     seletor de idioma sumia para fora da tela) */
  html, body { overflow-x: clip; }

  /* tablet e celular não usam o modo de uma seção por tela (js/fullpage.js só liga com tela
     acima de 860 px E mouse). Duas regras de tela cheia continuavam valendo fora dele e
     esticavam as seções, deixando vazios: */
  /* a seção "presa" da home (números, produtos, depoimentos) tinha 145% da altura da tela
     no tablet deitado (acima de 860 px) */
  .section[data-pin-reveal] { min-height: 0; }
  .pin-stage { position: static; height: auto; display: block; }
  /* o hero do Teste Agora ocupava a tela inteira, com o texto no meio e muito vazio em
     volta: agora ele tem a altura do conteúdo (com lugar para a setinha embaixo) */
  .exp-hero { min-height: 0; padding: calc(var(--header-h) + 56px) 0 112px; }

  /* Insights: os 5 pilares centralizados (o último card ficava sozinho à esquerda) */
  .ins-pillars__grid:not(.sc-cards) { display: flex; flex-wrap: wrap; justify-content: center; }
  .ins-pillars__grid:not(.sc-cards) > * { width: calc((100% - 34px) / 3); }

  /* Insights: o título da chamada final perdia o espaço depois do ponto ("PJ.Devolvemos");
     cada frase volta a começar numa linha */
  .ins-cta__title br { display: inline; }

  /* BFM: o texto da chamada final passava por cima dos laços de vidro; um fundo escuro
     suave atrás do texto e os laços um pouco mais apagados */
  .bfm-cta__glass { opacity: .55; }
  .bfm-cta__content::before {
    content: ''; position: absolute; z-index: -1; inset: -40px -24px; pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.88) 35%, rgba(0,0,0,0) 75%);
  }

  /* Institucional: ano alinhado com o título do marco (estava centralizado) */
  .inst-tl { text-align: left; }
  /* Institucional: os valores do DNA ocupam a largura toda (as quebras de linha manuais do
     desktop deixavam uma coluna estreita à esquerda) */
  .inst-value br { display: none; }
  .inst-dna__fallback { max-width: 640px; margin: 0 auto; }
  /* Institucional: menos vazio entre DNA, vídeo, Liderança e Hub de Imprensa */
  .inst-history { margin-top: 104px; }
  .inst-dna { margin-top: 112px; }
  .inst-video { padding: 80px 0; }
  .inst-lead-sec { margin-top: 48px; padding-bottom: 48px; }
  /* (comentário dela, 23/10: "aumentar um pouco o espaço entre seções") */
  .inst-about { padding-top: 56px; }
  /* texto do "Quem somos?" em 4 linhas, longe das bordas (comentário dela, 23/10) */
  .inst-about .inst-lead { max-width: 520px; }
}

/* ---------- Hero das páginas de produto (Insights, Score, BFM), até 1024 px ----------
   23/10 (pedido dela): "texto e botão primeiro, centralizados, e a animação depois".
   Insights: a animação dos dados numa faixa embaixo do botão. Score: a linha do score
   embaixo do botão, com o pico no centro e o número logo abaixo (js/score-line.js, modo
   "below"; a seção cresce sozinha para caber). BFM: o painel embaixo do texto. */
@media (max-width: 1024px) {
  .ins-hero { min-height: 0; display: block; padding: calc(var(--header-h) + 56px) 0 0; }
  .ins-hero__content { text-align: center; padding: 0 24px; }
  .ins-hero__title { margin: 0 auto; }
  .ins-hero__lead { margin: 24px auto 0; max-width: 520px; }
  .ins-hero__content .glow-button { margin-top: 32px; }
  /* Insights */
  /* (comentário dela, 23/10: "não ficou bom"): a faixa tinha uma borda reta no alto, a setinha
     ficava em cima das linhas e a seção seguinte vinha colada. Agora a faixa esfuma em cima e
     embaixo (além das laterais) e a setinha tem o próprio espaço embaixo dela */
  /* (comentário dela, 23/10: "animação muito longe do botão"): faixa mais baixa, começando
     logo embaixo do botão (o meio das linhas fica ~150 px abaixo dele) */
  /* (comentário dela: "ainda longe do botão e mega achatado"): a abertura das linhas é
     proporcional à altura da faixa, então a faixa voltou a ser alta (440 px) e agora começa
     colada no botão, com o esfumado do alto bem curto */
  .ins-hero:not(.sc-hero) { padding-bottom: 420px; }
  .ins-hero:not(.sc-hero) .ins-hero__bg { top: auto; bottom: 60px; height: 440px; }
  .ins-hero__bg:has(> #data-enrichment) {
    -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 17%, #000 100%), linear-gradient(to bottom, transparent, #000 8%, #000 82%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 2%, #000 17%, #000 100%), linear-gradient(to bottom, transparent, #000 8%, #000 82%, transparent);
            mask-composite: intersect;
  }
  .ins-hero:not(.sc-hero) .ins-hero__bg::after { display: none; }
  /* Score: a altura vem do script; o número centrado sob o pico da linha */
  .sc-hero.ins-hero { padding-bottom: 0; }
  .sc-hero .sc-line.is-phone .sc-line__right { left: min(var(--apex-x, 50%), calc(100% - 175px)); top: calc(var(--peak, 55%) + var(--sc-gap, 26px)); transform: translateX(-50%); }
  /* tablet (comentário dela: "subiu demais e muito para a direita"): o bloco todo (número +
     "de 1000 / faixa") fica centrado no vão embaixo do arco, na horizontal pelo pico e na
     vertical um pouco abaixo do meio do arco */
}
@media (min-width: 601px) and (max-width: 1024px) {
  .sc-hero .sc-line.is-phone .sc-line__right {
    top: calc(var(--peak, 55%) - var(--sc-hump, 0px) * .3);
    transform: translate(calc(-50% - var(--aside-shift, 0px)), -50%);
  }
  .sc-hero .sc-line.is-phone .sc-line__above { display: block; position: relative; }
  .sc-hero .sc-line.is-phone .sc-line__score { min-width: 3ch; text-align: center; }
  .sc-hero .sc-line.is-phone .sc-line__aside { position: absolute; left: calc(100% + .8rem); bottom: calc(var(--sl-num) * .06); transform: none; }
}
/* (o hero da BFM vale no tablet e no celular: ele tinha ficado só no bloco do tablet, e no
   celular o texto voltava a ficar à esquerda; comentário dela, 23/10) */
@media (max-width: 1024px) {
  /* BFM */
  .bfm-hero { padding: calc(var(--header-h) + 56px) 0 96px; }
  .bfm-hero__grid { grid-template-columns: 1fr; gap: 48px; transform: none; }
  .bfm-hero__content { left: 0; text-align: center; }
  .bfm-hero h1 { margin: 0 auto 24px; }
  .bfm-hero .bfm-lead { margin: 0 auto 32px; }
  .bfm-hero__visual { justify-self: center; width: 100%; max-width: 720px; margin-right: 0; }
}

/* Insights, chamada final (comentário dela, 23/10: "a animação antes do texto e do botão, e
   o degradê menos marcado"): até 1024 px a animação fica numa faixa no alto da seção, com o
   título, o texto e o botão embaixo dela; a faixa esfuma nos quatro lados (antes o retângulo
   dela aparecia em cima e embaixo). A linha passa pelo meio da faixa (js/insights-hero.js) */
@media (max-width: 1024px) {
  .ins-cta:has(> #data-convergence) { padding: 400px 0 96px; }
  /* (comentário dela: "continua distante"): o vão vinha do fim da seção dos pilares somado ao
     alto vazio da faixa; a seção sobe por cima desse espaço */
  .ins-cta:has(> #data-convergence) { margin-top: -150px; }
  .ins-cta > :is(#data-convergence, .ins-canvas-text, .ins-canvas-fx) {
    top: 0; bottom: auto; height: 480px;
  }
  .ins-cta > :is(#data-convergence, .ins-canvas-text, .ins-canvas-fx) {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
            mask-composite: intersect;
  }
  .ins-cta:has(> #data-convergence)::after { display: none; }
  .ins-cta .ins-cta__text { margin-top: 24px; }
  .ins-cta__content .glow-button { margin-top: 32px; }
}
@media (max-width: 600px) {
  .ins-cta:has(> #data-convergence) { padding-top: 335px; margin-top: -150px; }
  .ins-cta > :is(#data-convergence, .ins-canvas-text, .ins-canvas-fx) { height: 400px; }
}

/* hero das páginas de produto com os mesmos tamanhos do hero da home (comentário dela,
   23/10: "use tamanhos de fonte iguais aos da hero da home"): tablet em pé 34 px no título
   e 17 px no texto, numa coluna tão larga quanto a da home; no celular 28 e 16 px */
@media (min-width: 601px) and (max-width: 860px) {
  :is(.ins-hero__title, .bfm-hero h1) { font-size: 34px; line-height: 1.3; letter-spacing: 1.2px; }
  :is(.ins-hero__lead, .bfm-hero .bfm-lead) { font-size: 17px; max-width: 600px; }
}
@media (max-width: 600px) {
  :is(.ins-hero__title, .bfm-hero h1) { font-size: 28px; line-height: 1.3; letter-spacing: 1.2px; }
  :is(.ins-hero__lead, .bfm-hero .bfm-lead) { font-size: 16px; }
}

/* Score, "Encontre oportunidades, entenda os riscos" (comentário dela, 23/10): sem a linha
   animada no fundo no tablet e no celular (com os cards em 2 × 2 ela passava no meio deles) */
@media (max-width: 1024px) {
  .sc-score .sc-vec { display: none; }
  /* chamada final (comentário dela: "colada na seção de cima"): o texto sobe 150 px no
     desktop para não cobrir as placas de vidro; aqui elas ficam embaixo, então ele volta ao
     lugar (no celular já era assim, mobile.css) */
  .sc-cta .ins-cta__content { top: 0; }
  /* as placas de vidro passam a ter a própria faixa embaixo do botão (antes ocupavam a seção
     inteira e passavam por trás do texto) */
  .sc-cta { min-height: 0; padding: 96px 0 400px; display: block; }
  /* FAQ um pouco mais perto do fim das placas (comentário dela, 23/10) */
  .sc-cta + .bfm-faq { margin-top: -60px; }
  .sc-cta .sc-cta__glass { top: auto; bottom: 0; height: 440px; }
  /* esfuma o alto e o pé da faixa, para as placas não terem borda */
  .sc-cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 440px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, #000, transparent 18%, transparent 78%, #000); }
}

/* BFM, chamada final (comentário dela, 23/10: "pode subir a seção"): ~120 px a menos entre
   as bolinhas do carrossel e o título (os laços de vidro continuam na seção inteira) */
@media (max-width: 1024px) {
  .bfm-cta { margin-top: -110px; }
  /* FAQ um pouco mais perto (pedido dela, 23/10) */
  .bfm-cta + .bfm-faq { margin-top: -80px; }
  /* (comentário dela): com o FAQ subindo, a seção de cima (laços de vidro) passava por cima
     do título; o FAQ fica na frente */
  .bfm-faq { position: relative; z-index: 2; }
}

/* Teste Agora, hero (comentário dela, 23/10): texto e botão centralizados e sem a névoa
   animada (ocupava muito espaço) no tablet e no celular */
@media (max-width: 1024px) {
  .exp-hero :is(.exp-fog, .exp-fog-hint, .exp-hero__bg) { display: none; }
  .exp-dados { display: none; }   /* 28/10: the last screen's data rows go with the fog */
  .exp-hero__content { text-align: center; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
  .exp-hero__lead { margin-left: auto; margin-right: auto; }
}

/* Teste Agora (comentário dela, 23/10): ao clicar em "Começar" o círculo do 1 para logo
   abaixo da barra do topo (antes ficava ~140 px abaixo dela). Vale para os 3 passos */
@media (max-width: 1024px) {
  :is(#passo-1, #passo-2, #passo-3) { scroll-margin-top: 12px; }
}

/* Teste Agora, passo 3 (comentário dela, 23/10: "pontuação dentro do arco, arco menor"):
   quando o score empilha (uma coluna), o arco fica com no máximo 280 px, centrado, e a
   pontuação sobe para dentro dele */
@media (max-width: 1024px) {
  body #passo-3 .exp-score__body { grid-template-columns: 1fr; gap: 28px; }
  body #passo-3 .exp-gauge { width: min(280px, 100%); margin: 0 auto; padding-bottom: 0; }
  body #passo-3 .exp-gauge__read { bottom: 8px; }
  body #passo-3 .exp-gauge__num { font-size: 44px; }
}

/* Institucional, "Nossa história" (pedido dela, 23/10): no tablet e no celular a timeline vira
   vertical: uma linha pontilhada no meio da tela, cada marco com a bolinha do ícone na linha e
   o ano + texto alternando de lado (esquerda, direita, esquerda...). Cada marco aparece quando
   entra na tela (js/inst-timeline.js põe .is-in): primeiro a bolinha, depois o texto vindo do
   lado dele. Substitui o layout em lista das telas pequenas. */
@media (max-width: 1024px) {
  .inst-tl {
    display: block; position: relative; width: 100%; max-width: 680px; margin: 48px auto 0; padding: 0;
  }
  .inst-tl::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px;
    background: repeating-linear-gradient(to bottom, #6f6f6f 0 5px, transparent 5px 10px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  }
  .inst-tl::after, .inst-tl__line, .inst-tl__stem { display: none !important; }
  .inst-tl__item {
    position: relative; height: auto; display: grid; grid-template-columns: 1fr 64px 1fr;
    grid-template-rows: auto auto; align-items: start; padding: 0 0 44px;
  }
  .inst-tl__item:last-child { padding-bottom: 0; }
  .inst-tl .inst-tl__year,
  .inst-tl .inst-tl__icon,
  .inst-tl .inst-tl__text {
    position: static; left: auto; right: auto; bottom: auto; top: auto; margin: 0; scale: none; translate: none;
  }
  .inst-tl .inst-tl__icon { grid-column: 2; grid-row: 1 / span 2; justify-self: center; margin-top: 4px; }
  .inst-tl .inst-tl__year { grid-row: 1; display: block; font-size: 30px; line-height: 1.1; margin-bottom: 6px; }
  .inst-tl .inst-tl__text { grid-row: 2; }
  .inst-tl .inst-tl__text h3 { white-space: normal; }
  .inst-tl .inst-tl__text p { text-wrap: balance; }
  /* 1º, 3º e 5º marcos à esquerda (alinhados à linha), 2º e 4º à direita. O 1º filho da
     lista é a linha antiga (escondida), então o 1º marco é :nth-child(2), par */
  .inst-tl__item:nth-child(odd) :is(.inst-tl__year, .inst-tl__text) { grid-column: 3; text-align: left; }
  .inst-tl__item:nth-child(even) :is(.inst-tl__year, .inst-tl__text) { grid-column: 1; text-align: right; }
  /* entrada */
  .inst-tl .inst-tl__icon { opacity: 0 !important; transform: scale(.4) !important; transition: opacity .35s ease, transform .5s cubic-bezier(.3, 1.5, .5, 1) !important; }
  .inst-tl .inst-tl__year,
  .inst-tl .inst-tl__text { opacity: 0 !important; transition: opacity .6s ease .2s, transform .7s cubic-bezier(.2, .8, .2, 1) .2s !important; }
  .inst-tl__item:nth-child(even) :is(.inst-tl__year, .inst-tl__text) { transform: translateX(-24px) !important; }
  .inst-tl__item:nth-child(odd) :is(.inst-tl__year, .inst-tl__text) { transform: translateX(24px) !important; }
  .inst-tl .inst-tl__item.is-in .inst-tl__icon { opacity: 1 !important; transform: none !important; }
  .inst-tl .inst-tl__item.is-in :is(.inst-tl__year, .inst-tl__text) { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .inst-tl :is(.inst-tl__icon, .inst-tl__year, .inst-tl__text) { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 600px) {
  .inst-tl__item { grid-template-columns: 1fr 48px 1fr; padding-bottom: 36px; }
  .inst-tl .inst-tl__year { font-size: 24px; }
  .inst-tl .inst-tl__text h3 { font-size: 14px; line-height: 19px; }
  .inst-tl .inst-tl__text p { font-size: 12px; }
}

/* Institucional, DNA animado no tablet em pé e no celular (comentário dela, 23/10): a hélice 3D
   do desktop roda numa faixa no lugar da imagem parada, e os 4 valores continuam listados
   embaixo (os rótulos presos à hélice ficam só no desktop). No tablet deitado já era o desktop */
@media (max-width: 860px) {
  .inst-dna__stage.is-dna { height: auto; }
  .inst-dna__stage.is-dna .dna-bg { position: relative; inset: auto; height: 440px; }
  
  .inst-dna__stage.is-dna .inst-dna__fallback { display: grid; margin-top: 8px; visibility: visible; }
  .inst-dna__stage.is-dna .inst-dna__img { display: none; }
}
/* tablet em pé (comentário dela: "os aspectos do DNA nas laterais da hélice, igual ao
   desktop"): os valores voltam a ficar presos à hélice, nos dois lados; a lista some */
@media (min-width: 601px) and (max-width: 860px) {
  .inst-dna__stage.is-dna { height: 620px; }
  .inst-dna__stage.is-dna .dna-bg { position: absolute; inset: 0; height: auto; }
  .inst-dna__stage.is-dna .inst-dna__fallback { display: none; }
}
@media (max-width: 600px) {
  /* 23/10 (escolha dela, opção 1): no celular os valores ficam presos à hélice, como no
     desktop, só com o título; tocar num valor abre o texto dele (js no institucional.html) */
  .inst-dna__stage.is-dna { height: 520px; }
  .inst-dna__stage.is-dna .dna-bg { position: absolute; inset: 0; height: auto; }
  .inst-dna__stage.is-dna .inst-dna__fallback { display: none; }
  .inst-dna__stage.is-dna .dna-label { font-size: 0; line-height: 1.45; pointer-events: auto; cursor: pointer; width: 114px; max-width: none; white-space: normal; }
  .inst-dna__stage.is-dna .dna-group.right .dna-label { width: 112px; }
  /* (comentário dela): mais respiro entre o título e a barra verde (o recuo era em em, e a
     fonte do rótulo é 0) e a ponta de baixo da hélice mais curta, sumindo antes */
  .inst-dna__stage.is-dna .dna-group.left .dna-label { padding-right: 10px; }
  .inst-dna__stage.is-dna .dna-group.right .dna-label { padding-left: 10px; }
  .inst-dna__stage.is-dna .dna-bg { -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--dna-cut, 64%) - 30px), transparent calc(var(--dna-cut, 64%) + 40px)); mask-image: linear-gradient(to bottom, #000 calc(var(--dna-cut, 64%) - 30px), transparent calc(var(--dna-cut, 64%) + 40px)); }
  .inst-dna__stage.is-dna { z-index: 2; }
  /* (comentário dela: "cortou muito antes"): a seção seguinte subia por cima da hélice e a
     cobria; a hélice fica na frente e o vão até o vídeo é menor */
  .inst-dna { position: relative; z-index: 2; }
  .inst-dna__stage.is-dna .dna-label:not(.is-text) br { display: none; }
  .inst-dna__stage.is-dna .dna-label strong { font-size: 13px; line-height: 1.25; margin: 0; }
  .inst-dna__stage.is-dna .dna-label:not(.is-text) strong br { display: inline; }
  .inst-dna__stage.is-dna .dna-label.is-text { font-size: 10px; }
  .inst-dna__stage.is-dna .dna-label.is-text strong { margin-bottom: 4px; }
  /* texto aberto sobre um fundo preto a 86% (era 70%; pedido dela: menos transparente), para ler por cima da hélice (pedido dela, 24/10) */
  .inst-dna__stage.is-dna .dna-label.is-text { background: rgba(0, 0, 0, .86); border-radius: 4px; padding-top: 8px; padding-bottom: 8px; z-index: 5; position: absolute; }
  .inst-dna__stage.is-dna .dna-group.left .dna-label.is-text { padding-left: 10px; }
  .inst-dna__stage.is-dna .dna-group.right .dna-label.is-text { padding-right: 10px; }
  /* um "+" verde avisa que dá para abrir */
  .inst-dna__stage.is-dna .dna-label strong::after { content: ' +'; color: #50EA9A; }
  .inst-dna__stage.is-dna .dna-label.is-text strong::after { content: ' −'; }
}

/* Institucional, Hub de Imprensa (comentário dela, 23/10): botões e contato centralizados;
   no tablet em pé o "Celero na mídia" mostra duas notícias por vez (no celular, uma) */
@media (max-width: 1024px) {
  .pr .pr-actions { justify-content: center; }
  .pr-actions .pr-contact { flex-basis: 100%; justify-content: center; margin-left: 0; }
}
@media (min-width: 601px) and (max-width: 860px) {
  .pr-carousel .pr-news li { flex-basis: calc((100% - 20px) / 2); }
}

/* a seção do problema empilha (até 960 px, regra do pages.css), mas na Score e na BFM as
   medidas do desktop eram mais específicas e continuavam valendo: altura fixa (os números
   passavam por cima do título seguinte), brilho e celular deslocados (na BFM o celular
   saía da tela pela direita) */
@media (max-width: 960px) {
  :is(.sc-pain, .bfm-pain2) .ins-pain__stage { height: auto; }
  :is(.sc-pain, .bfm-pain2) .ins-pain__glow { left: 50%; }
  .bfm-pain2 .ins-pain__laptop { left: 0; }
  :is(.sc-pain, .bfm-pain2) .ins-pain__facts { height: auto; width: auto; max-width: 480px; }
  /* (comentário dela, 23/10: "os dados muito para a esquerda"): o bloco tinha 480 px e os
     textos, mais curtos, ficavam encostados à esquerda dele; agora o bloco tem a largura do
     texto mais comprido e fica no centro */
  .ins-pain__facts { width: fit-content; max-width: min(480px, 100%); }
  /* na Insights os textos quebram em duas linhas curtas: coluna mais estreita, para o
     bloco ficar do tamanho delas */
  .ins-pain:not(.sc-pain):not(.bfm-pain2) .ins-pain__facts { max-width: min(380px, 100%); }
}

@media (max-width: 860px) {
  .ins-pillars__grid:not(.sc-cards) > * { width: calc((100% - 17px) / 2); }
}

/* ---------- Menu do celular e do tablet em pé (até 860 px) ----------
   23/10 (comentário dela: "muito sem graça e tudo desalinhado"). Antes era a lista do
   desktop empilhada: espaços diferentes entre os itens (uns são botões, outros links), a
   página aparecendo por trás e nenhum botão de contato. Agora: tela preta com brilho verde
   e a linha neon do site no topo, itens grandes com divisória e seta verde, submenus que
   abrem girando a seta, entrada em sequência, o ícone vira um X e "Entrar em contato" no
   pé. O botão de contato (li.nav-cta) foi acrescentado no HTML e não aparece no desktop. */
.nav-cta { display: none; }
@media (max-width: 860px) {
  html:has(.primary-nav.is-open) { overflow: hidden; }
  .primary-nav {
    display: flex; flex-direction: column; padding: 12px 0 0; backdrop-filter: none; overscroll-behavior: contain;
    /* altura explícita: com a página rolada a barra ganha o vidro (backdrop-filter), o que faz
       o menu (fixed) se medir pela barra e não pela tela; com top + bottom ele ficava com
       altura zero e não abria (comentário dela, 23/10) */
    top: var(--header-h); bottom: auto; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    background:
      radial-gradient(90% 45% at 0% 100%, rgba(80, 234, 154, .16), transparent 70%),
      radial-gradient(60% 30% at 100% 0%, rgba(80, 234, 154, .07), transparent 70%),
      #000;
  }
  .primary-nav::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(to right, transparent, #50ea9a 30%, #baffe0 50%, #50ea9a 70%, transparent);
    box-shadow: 0 0 12px rgba(80, 234, 154, .6);
  }
  .primary-nav > ul { flex: 1; justify-content: flex-start; gap: 0; padding: 0 24px 32px; }
  .primary-nav > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    opacity: 0; transform: translateY(14px);
    transition: opacity .35s var(--ease), transform .45s cubic-bezier(.2, .8, .2, 1);
  }
  .primary-nav.is-open > ul > li { opacity: 1; transform: none; }
  .primary-nav.is-open > ul > li:nth-child(1) { transition-delay: .05s; }
  .primary-nav.is-open > ul > li:nth-child(2) { transition-delay: .1s; }
  .primary-nav.is-open > ul > li:nth-child(3) { transition-delay: .15s; }
  .primary-nav.is-open > ul > li:nth-child(4) { transition-delay: .2s; }
  .primary-nav.is-open > ul > li:nth-child(5) { transition-delay: .28s; }
  /* links e botões com a mesma altura e o mesmo alinhamento */
  .primary-nav .nav-link {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 20px 0; margin: 0; font-size: 16px; line-height: 1.2; letter-spacing: 1.95px; text-align: left;
  }
  /* seta verde à direita (no lugar do sublinhado do desktop) */
  .primary-nav .nav-link::after {
    content: ''; position: static; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; background: none;
    border-top: 2px solid #50ea9a; border-right: 2px solid #50ea9a;
    transform: rotate(45deg); transition: transform .3s var(--ease);
  }
  .primary-nav .dropdown-trigger::after { transform: rotate(135deg); margin-top: -10px; }
  .primary-nav .has-dropdown.is-open > .dropdown-trigger::after { transform: rotate(-45deg); margin-top: 2px; }
  .primary-nav .has-dropdown.is-open > .dropdown-trigger { color: #50ea9a; }
  /* submenu */
  .primary-nav .dropdown-menu { padding: 0 0 18px; }
  .primary-nav .dropdown-menu li a {
    display: flex; align-items: center; gap: 12px; padding: 10px 0; border-radius: 0;
    font-size: 15px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #bdbdbd;
  }
  .primary-nav .dropdown-menu li a::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #50ea9a;
    box-shadow: 0 0 8px rgba(80, 234, 154, .8);
  }
  .primary-nav .dropdown-menu li a:hover { background: none; color: #fff; }
  /* contato no pé */
  .primary-nav .nav-cta { display: block; padding-top: 40px; border-bottom: 0; }
  .primary-nav .nav-cta .glow-button { display: flex; width: 100%; }
  .primary-nav .nav-cta .glow-button > span { flex: 1; display: flex; justify-content: center; padding-top: 16px; padding-bottom: 16px; }
  /* ícone: três linhas viram um X */
  .nav-toggle span { transform-origin: center; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #50ea9a; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { background: #50ea9a; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .primary-nav > ul > li { transition: none; }
}

/* ---------- Tablet em pé (601–860 px) ---------- */
@media (min-width: 601px) and (max-width: 860px) {
  /* Home: cards de produto numa coluna mais estreita (ocupavam a largura toda) */
  .solutions-grid { max-width: 560px; }
  /* Home (comentário dela, 23/10: "olha quanto espaço vazio"): o hero tinha 820 px fixos,
     com o texto no alto e as linhas lá embaixo. Agora é mais baixo; as linhas se ajustam
     sozinhas logo abaixo do botão (js/web-threads.js) */
  .hero { min-height: 620px; padding-top: 128px; }
}

/* ---------- Tablet deitado (861–1024 px): menu do desktop, mas sem o modo tela cheia ---------- */
@media (min-width: 861px) and (max-width: 1024px) {
  /* o menu não cabia: o seletor de idioma ficava cortado na borda direita */
  .header-inner { gap: 20px; }
  .primary-nav > ul { gap: 22px; }
  .header-actions { gap: 18px; }
  .nav-link, .btn-nav { letter-spacing: 1.4px; }
}

/* ---------- Só tablet (601–1024 px) ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  /* respiro entre as seções: 56 px (eram 96 px, o do desktop) */
  .section { padding: 56px 0; }
  /* (comentário dela, 23/10): o "Quem somos?" da home termina no semicírculo, colado no
     rodapé; a regra acima tinha devolvido o respiro embaixo dele */
  .section.about { padding-bottom: 0; }

  /* Home: os números não cabiam nos cards de meia largura ("+R$300Bi", "+10 ANOS" cortados) */
  .bn-number { font-size: 7.2vw; }

  /* Institucional: timeline e valores do DNA no centro da tela */
  .inst-tl { max-width: 600px; }
  .inst-dna__fallback { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .inst-dna__img { grid-column: 1 / -1; max-width: 420px; margin: 0 auto; }
}