/* =========================================================
   LAYOUT: container, grade, header, rodapé
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-estreito > * { max-width: 62rem; }

.secao { padding-block: var(--secao-y); position: relative; }

/* Superfícies alternadas: escuro é o padrão, creme é o contraponto */
.secao-papel {
  background: var(--papel);
  color: var(--texto-escuro);
}
.secao-papel h1, .secao-papel h2, .secao-papel h3 { color: var(--texto-escuro); }
.secao-papel p { color: var(--texto-escuro-suave); }
.secao-fundo { background: var(--tinta-900); }

.grid { display: grid; gap: var(--e-8); grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); }
.grid-2 { display: grid; gap: var(--e-12); grid-template-columns: repeat(auto-fit, minmax(min(380px,100%), 1fr)); }
.pilha { display: flex; flex-direction: column; gap: var(--e-4); }
.linha { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; }

/* ---- Sobretítulo ---- */
.olho {
  display: flex; align-items: center; gap: var(--e-3);
  margin-bottom: var(--e-6);
  font-size: var(--txt-xs);
  font-weight: var(--peso-forte);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ambar);
}
.olho::before {
  content: ""; flex: 0 0 34px; height: 2px; background: currentColor;
}
.secao-papel .olho { color: var(--verde-escuro); }

.secao-cabecalho { max-width: 26ch; margin-bottom: var(--e-12); }
.secao-cabecalho.largo { max-width: 40ch; }
.secao-cabecalho + .secao-sub {
  max-width: 56ch; margin-top: calc(var(--e-12) * -1 + var(--e-6));
  margin-bottom: var(--e-12); color: var(--texto-claro-suave);
  font-size: var(--txt-lg);
}
.secao-papel .secao-sub { color: var(--texto-escuro-suave); }

/* ---- Header ---- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--tinta-900) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), background var(--transicao);
}
.header.rolou { border-bottom-color: var(--tinta-600); background: var(--tinta-900); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-6); min-height: 4.75rem;
}
.logo { display: block; }

.nav-lista {
  display: flex; align-items: center; gap: var(--e-8);
  list-style: none; padding: 0; margin: 0;
}
.nav-lista a:not(.btn) {
  color: var(--texto-claro-suave);
  text-decoration: none;
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  transition: color var(--transicao);
}
.nav-lista a:not(.btn):hover { color: var(--texto-claro); }

.menu-botao {
  display: none; background: none; border: 0; padding: var(--e-2);
  cursor: pointer; width: 44px; height: 44px;
}
.menu-botao span {
  display: block; width: 24px; height: 2px; background: var(--texto-claro);
  border-radius: 2px; transition: transform var(--transicao), opacity var(--transicao);
}
.menu-botao span + span { margin-top: 6px; }
.menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-botao { display: block; }
  .nav {
    position: fixed; inset: 4.75rem 0 auto 0;
    background: var(--tinta-900);
    border-bottom: 1px solid var(--tinta-600);
    padding: var(--e-6) var(--gutter) var(--e-8);
    transform: translateY(-120%);
    transition: transform var(--transicao-lenta);
  }
  .nav.aberto { transform: translateY(0); }
  .nav-lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-lista li { border-bottom: 1px solid var(--tinta-600); }
  .nav-lista a:not(.btn) { display: block; padding: var(--e-4) 0; font-size: var(--txt-lg); }
  .nav .btn { margin-top: var(--e-6); width: 100%; }
}

/* ---- Rodapé ---- */
.footer {
  background: var(--tinta-900);
  border-top: 1px solid var(--tinta-600);
  padding-block: var(--e-20) var(--e-10);
  font-size: var(--txt-sm);
  color: var(--texto-claro-suave);
}
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--texto-claro); }
.footer h4 { color: var(--texto-claro); font-size: var(--txt-sm);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--e-5); }
.footer ul { list-style: none; padding: 0; }
.footer li + li { margin-top: var(--e-3); }
/* Alvo de toque no rodape.
   Um link de 19px de altura passa no mouse e falha no dedo: a WCAG
   2.5.8 pede 24px e o padrao desta operacao pede 44px. O telefone e
   o e-mail estao nessa lista, entao errar aqui custa contato. O alvo
   cresce so onde a entrada e o dedo, para o rodape do desktop nao
   ficar frouxo, e a margem entre os itens zera porque o proprio
   padding ja separa. */
@media (pointer: coarse) {
  .footer ul a,
  .footer-base a { display: inline-block; padding-block: 13px; }
  .footer li + li { margin-top: 0; }
}

.footer-base {
  margin-top: var(--e-16); padding-top: var(--e-6);
  border-top: 1px solid var(--tinta-600);
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  justify-content: space-between; font-size: var(--txt-xs);
}