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

/* ---------- grades compartilhadas ---------- */
@media(max-width:1000px){
  .grade-graficos{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .grade-graficos{grid-template-columns:1fr}
  .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}

  .nav-links a:not(.nav-cta){
    font-family:'Sora';font-size:25px;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:15.5px;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)}

  section{padding:56px 0}

  .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){
  .container{padding:0 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{opacity:1!important;transform:none!important}
}