/* ==========================================================================
   06 — RESPONSIVO COMPARTILHADO
   Só o que vale em toda página: nav, rodapé, contêiner, movimento reduzido.
   Breakpoint de seção mora no arquivo da página, em pages/, que carrega
   depois deste e por isso vence na cascata.
   ========================================================================== */

/* ---------- monitor grande ----------
   1180px numa tela de 1920 ou 2560 vira uma tira estreita no meio, com
   vazio dos dois lados. O contêiner cresce em degraus para o texto ocupar a
   tela sem passar da medida de leitura confortável. */
@media(min-width:1500px){
  :root{--maxw:1320px}
}
@media(min-width:1900px){
  :root{--maxw:1440px}
}

/* ---------- ultrawide ----------
   Num 3440 de 34 polegadas, 1440px de conteúdo ocupam 42% da tela: sobra
   um metro de preto de cada lado e o site parece pequeno dentro do monitor,
   não amplo. 1680 leva para perto da metade, que é onde a composição volta
   a ter escala sem a linha de texto passar da medida de leitura.

   O tamanho do título nesta faixa mora em pages/home.css, não aqui: este
   arquivo carrega antes do arquivo de página, então numa disputa de mesma
   especificidade quem vence é sempre a página. */
@media(min-width:2300px){
  :root{--maxw:1680px}
}

/* ---------- grades compartilhadas ---------- */
@media(max-width:900px){
  /* alternar lados exige duas colunas. Em coluna única a alternância vira
     só texto pulando de alinhamento, então some junto. */
  .card-grafico,
  .card-grafico:nth-child(even){grid-template-columns:1fr;gap:20px}
  .card-grafico:nth-child(even) .grafico-img{order:0}
  /* em coluna única não há lado para espelhar: tudo à esquerda */
  .card-grafico figcaption,
  .card-grafico:nth-child(even) figcaption{max-width:none;text-align:left;margin-left:0}
  .grafico-setor{margin-bottom:12px}
  .grafico-numero{margin-bottom:14px}
  .grafico-frase{font-size:var(--fs-corpo)}
  /* em coluna única o painel ocupa a largura toda: 480px no meio de uma
     tela de 390 deixaria uma faixa vazia dos dois lados */
  .grafico-img{max-width:none}
  .grade-graficos{gap:44px}
}

@media(max-width:760px){
  .grade-artigos{grid-template-columns:1fr}
}

/* ---------- tablet e celular ---------- */
@media(max-width:900px){

  /* Menu mobile: painel inteiro, não gaveta parcial.

     A gaveta de 75% deixava a logo cortada ao meio na faixa que sobrava,
     com muito espaço morto dentro e nenhum lugar óbvio de fechar. Painel
     inteiro resolve os três de uma vez, e é o que o tamanho do menu pede:
     com cinco itens, tipografia grande lê melhor que lista miúda centrada.

     Fundo sólido de propósito: backdrop-filter em painel opaco não
     acrescenta nada, custa composição no celular e renderiza errado em
     parte dos navegadores, deixando o conteúdo de trás vazar por cima. */
  .nav-links{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;
    flex-direction:column;justify-content:center;align-items:stretch;
    gap:0;padding:104px 28px 40px;
    background:#08080a;
    transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
  .nav-links.open{transform:none}

  /* a barra volta a ser duas pontas: marca e botão de menu */
  #nav{display:flex;justify-content:space-between}
  /* o CTA da barra sai; quem serve o painel é o que está dentro dele */
  .nav-acoes{display:none}
  .nav-links .nav-cta{display:inline-flex}
  /* o ponto de seção não faz sentido em lista vertical de tela cheia */
  .nav-links a:not(.nav-cta)::after{content:none}

  .nav-links a:not(.nav-cta){
    font-family:var(--ff-ui);font-size:var(--fs-d4);font-weight:600;color:var(--ink);
    letter-spacing:-.01em;padding:19px 0;
    border-bottom:1px solid rgba(255,255,255,.07)}
  /* o sublinhado animado do desktop não faz sentido em item de lista grande */
  .nav-links a:not(.nav-cta)::after{content:none}

  /* no painel o CTA é o fim da lista, então merece peso de botão de verdade */
  .nav-links .nav-cta{margin-top:32px;justify-content:center;
    padding:17px 24px;font-size:var(--fs-corpo);font-weight:600;
    color:#1a1405;background:var(--gold-grad);border:none;
    box-shadow:0 10px 30px rgba(212,175,55,.28)}
  .nav-links .nav-cta svg{width:17px;height:17px}

  /* logo e botão ficam acima do painel: a pessoa não perde a marca nem a
     saída quando o menu abre */
  .brand,
  .burger{position:relative;z-index:var(--z-burger)}
  .burger{display:flex}

  /* hambúrguer vira X. Sem isto não existe affordance de fechar. */
  .burger span{transform-origin:center}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* O respiro de seção no celular sai da mesma fonte que no desktop.

     Havia um `section{padding:56px 0}` cru aqui, herdado de quando o valor
     era fixo. Ele passava por cima dos três compassos: no celular todas as
     seções voltavam a ter a mesma distância entre si, e o ritmo que o
     desktop tem se perdia exatamente na tela onde a maioria lê.

     Os tokens já descem sozinhos (52px no padrão em 390px de tela), então
     não há o que sobrescrever. Quem quiser mexer no respiro do celular mexe
     no piso do clamp, em 01-tokens.css, e mexe nos dois lugares de uma vez. */

  .bloco-destaque{padding:34px 26px}

  .rodape-topo{grid-template-columns:1fr;gap:38px}
  .rodape-marca .tagline,
  .rodape-marca .cobertura{max-width:none}
}

/* ---------- celular estreito ---------- */
@media(max-width:600px){
  /* Redefine o token em vez de sobrescrever o padding do .container.

     A barra fixa calcula o recuo lateral dela com max(--gutter, ...) para
     alinhar a logo com a primeira letra do conteúdo. Trocando só o padding
     do contêiner, o conteúdo ia para 20px e a barra ficava em 28px: a logo
     deixava de estar no mesmo eixo do título, que é a única coisa que essa
     conta existe para garantir. Mudando o token, os dois andam juntos. */
  :root{--gutter:20px}
  .rodape-base{flex-direction:column;text-align:center}
  .btn{width:100%}
  .carrossel-trilha > *{flex-basis:88%}
}

/* ---------- respeito a quem pediu menos movimento ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,
  .hero-kicker,
  .hero h1 .line > span,
  .hero .lead,
  .hero-acao,
  .hero-marca,
  .hero-marca-assinatura,
  .hero-numeros{opacity:1!important;transform:none!important}
}