/* ==========================================================================
   PL Advogados · site.css
   Componentes: cabecalho, hero, secoes, cartoes, equipe, rodape.
   ========================================================================== */

/* ========================================================== CABECALHO == */

/* Sem backdrop-filter. Sobre 82% de branco o desfoque era quase invisivel, e no
   estado rolado, a 96%, sumia de vez -- pagava-se uma camada de composicao por
   quadro de scroll por um efeito que ninguem via. Fundo solido tambem e o gesto
   coerente com a recusa a pilula nos botoes: o vidro e idioma de app. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px -12px rgba(30, 43, 57, .35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* ------------------------------------------------------------- marca -- */

/* So a assinatura vive aqui dentro. inline-flex para nao herdar o espaco de
   descida da linha de base, que deixaria uma folga sob a imagem. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Assinatura oficial, arquivo de 728x296. Os atributos width/height do HTML
   guardam a proporcao e evitam salto de layout; aqui so vale a largura exibida.
   Sao dois arquivos porque um PNG nao herda currentColor: logo-brown sobre
   fundo claro, logo-white sobre fundo escuro. */
.brand__logo {
  width: 124px;
  height: auto;
}

@media (min-width: 961px) {
  .brand__logo { width: 156px; }
}

/* No rodape a assinatura tem coluna inteira e pode respirar mais. */
.brand--on-ink .brand__logo { width: 184px; }

/* -------------------------------------------------------- navegacao -- */

.nav { display: flex; align-items: center; gap: var(--sp-6); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: var(--brass-hair);
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { flex: 0 0 auto; }

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border-radius: var(--radius);
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: background-color var(--dur-fast) var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Fica abaixo do cabecalho: a gaveta vive dentro do contexto de empilhamento
   do header, entao o scrim precisa de um z-index menor para nao cobri-la. */
.nav-scrim {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 30;
  background: rgba(16, 25, 35, .52);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.nav-scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    z-index: var(--z-drawer);
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-5);
    padding: var(--sp-6) var(--gutter) var(--sp-8);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
  }

  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__list li + li { border-top: 1px solid var(--line); }

  .nav__link {
    min-height: 54px;
    font-size: var(--fs-md);
    font-family: var(--font-display);
    font-weight: 600;
  }

  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--brass-text); }

  .nav__cta { align-self: stretch; }
  .nav__cta .btn { width: 100%; }
}

/* ================================================================ HERO == */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink-3);
  color: var(--text-on-ink);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(16, 25, 35, .96) 0%, rgba(16, 25, 35, .88) 42%, rgba(30, 43, 57, .62) 100%),
    radial-gradient(120% 90% at 85% 10%, rgba(195, 165, 117, .16), transparent 60%);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Um pouco menor que antes: o cabecalho subiu 16px no desktop e a barra
     .stats precisa continuar se insinuando na dobra. */
  min-height: clamp(540px, 72vh, 760px);
  padding-block: var(--sp-10) var(--sp-8);
  max-width: 62rem;
}

.hero .eyebrow { color: var(--brass-lt); }

/* O titulo da home e uma frase inteira por decisao editorial. O teto de --fs-h1
   baixou de 60 para 52px justamente por causa dele; ver a nota da escala. */
.hero h1 {
  color: #fff;
  max-width: 26ch;
  font-weight: 500;
  line-height: 1.1;
}

.hero h1 em {
  font-style: italic;
  color: var(--greige);
}

/* O hero da home nao tem mais paragrafo de apoio desde que foi enxugado; as
   regras de .hero__lead saíram com ele. O equivalente das paginas internas e
   .page-hero__lead, mais abaixo. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* Faixa de qualificadores.
   Era um slot de indicador -- serifa de 36px em latao sobre fundo quase preto,
   tres colunas separadas por filete -- e o conteudo nunca foi numero: "Atuacao
   empresarial", "Empresas de diferentes portes". A forma prometia dado e o texto
   entregava adjetivo, e o descompasso fazia deste o bloco mais fraco da home.
   Agora o peso e tipografico e honesto: sans em 600, cor de texto normal, e a
   marca de latao do sistema abrindo cada coluna. O fundo tambem clareou; ver a
   nota sobre o ritmo de fundos da home no topo de .spotlight. */
.stats {
  position: relative;
  background: var(--paper-alt);
  border-block: 1px solid var(--line);
}

.stats__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  padding-block: var(--sp-7);
}

/* A marca cobre so o primeiro trecho do filete: o resto da linha continua na cor
   neutra, de modo que o latao marca o inicio da coluna sem virar sublinhado. */
.stats__item {
  position: relative;
  padding-top: var(--sp-4);
  border-top: var(--brass-hair) solid var(--line);
}

.stats__item::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--brass-mark);
  height: var(--brass-hair);
  background: var(--brass);
}

.stats__value {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.stats__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 760px) {
  .stats__list { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ================================================ CABECALHO INTERNO == */

.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--ink-3);
  color: var(--text-on-ink);
  overflow: hidden;
}

.page-hero__media { position: absolute; inset: 0; z-index: -2; }

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(16, 25, 35, .95) 10%, rgba(30, 43, 57, .78) 100%);
}

.page-hero__inner {
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
  max-width: 54rem;
}

.page-hero h1 { color: #fff; font-weight: 500; }
.page-hero .eyebrow { color: var(--brass-lt); }

.page-hero__lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--muted-on-ink);
  max-width: 44rem;
}

/* Mesmo tratamento do hero da home quando o texto tem dois paragrafos. */
.page-hero__lead + .page-hero__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
}

.breadcrumb {
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "\203A"; color: var(--brass); }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ====================================================== BLOCO SPLIT == */

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: stretch;
}

/* A trilha estreita e sempre a da foto, e por isso as proporcoes se invertem
   junto com o bloco: sem .split--reverse a coluna de texto vem primeiro no DOM e
   pega a primeira trilha; com ele, o order: -1 poe a figura na frente e a
   primeira trilha passa a ser a da foto. Antes so o caso direto estava certo, e
   os blocos invertidos davam a coluna larga para a imagem. */
.split--reverse {
  grid-template-columns: .95fr 1.05fr;
}

.split--reverse .split__media { order: -1; }

/* Aqui morava .split--portrait, um teto de 420 px para a coluna da foto. Ele
   existia como remendo: as fotos de ambiente eram todas horizontais, em meia
   pagina rendiam 326 px de altura contra 466 a 1025 px de texto ao lado, e com
   align-items: center sobrava vazio em cima E embaixo -- a foto nao encostava em
   nada e lia como um retangulo pequeno solto em meia pagina branca. Estreitar a
   coluna atenuava o efeito numa foto vertical; nao resolvia o resto.

   Agora a proporcao e 4:5 em todas elas, decidida no arquivo e recortada a mao,
   e o remendo saiu. A figura estica pela altura da linha da grade e a moldura
   gruda dentro dela: onde a foto e a mais alta dos dois lados, a linha tem a
   altura dela e o sticky nunca engata; onde o texto e mais alto -- as duas listas
   longas de areas-de-atuacao -- a foto acompanha a leitura em vez de flutuar no
   meio. Uma regra para os oito blocos, sem caso especial. */
@media (min-width: 961px) {
  .split__media .framed {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
  }
}

/* Grudar nao e animacao, mas e movimento contra a rolagem, que e o que incomoda
   quem pede menos movimento. Solta. Fica aqui, e nao no bloco de movimento
   reduzido de base.css, porque aquele arquivo carrega antes e com a mesma
   especificidade o sticky venceria. */
@media (prefers-reduced-motion: reduce) {
  .split__media .framed { position: static; }
}

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }

  /* Empilhada em largura cheia, um 4:5 passaria de uma tela inteira no tablet:
     na largura de conteudo de 704 px daria 880 px de altura. Os 420 px sao o
     mesmo teto que o antigo .split--portrait usava, e por medicao: com 460 a foto
     chegava a 77% da altura da janela em 560 e 960 px de largura, que e onde as
     duas dimensoes se apertam ao mesmo tempo. Com 420 fica em 70%. */
  .split__media {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* Figura com moldura deslocada em latao */
.framed {
  position: relative;
  isolation: isolate;
}

/* Contorno do mesmo tamanho da foto, deslocado na diagonal. Parte dele fica
   atras da imagem, de modo que so o "L" externo aparece. */
.framed::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  z-index: -1;
}

/* A proporcao e propriedade do arquivo, nunca do CSS: o recorte de cada foto foi
   escolhido a mao, porque um object-fit cego decapitaria a aguia da balanca e
   partiria o aperto de maos pelo meio. Estas duas linhas sao rede de seguranca --
   com o padrao auto nada e recortado e o cover fica inerte, e um arquivo futuro
   fora de forma pode declarar --framed-ratio sem distorcer. */
.framed img {
  width: 100%;
  aspect-ratio: var(--framed-ratio, auto);
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.framed--tl::before { inset: -18px 18px 18px -18px; }

/* A moldura encurta no celular, e a variante --tl conserva a diagonal invertida:
   as duas regras dividiam o mesmo inset e o --tl perdia a inversao aqui. */
@media (max-width: 560px) {
  .framed::before { inset: 12px -12px -12px 12px; }
  .framed--tl::before { inset: -12px 12px 12px -12px; }
}

/* ===================================================== AREA (LARGA) == */

/* A pagina de areas eram quatro .split identicos em sequencia: numeral, titulo,
   lead, checklist e foto emoldurada, alternando so o lado da imagem. Na quarta
   repeticao a moldura deslocada tinha virado papel de parede, e a pagina lia
   como um template rodando quatro vezes.

   Este e o bloco alternativo. O texto de abertura ocupa a largura inteira, a
   checklist se divide em duas colunas e a foto entra como faixa larga no pe.
   Intercalado com o .split, ele quebra a repeticao sem tirar uma palavra nem uma
   imagem: a moldura passa a aparecer duas vezes na pagina, e volta a ser gesto. */
.area-wide__head { max-width: 52rem; margin-bottom: var(--sp-7); }

.area-wide .checklist {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-7);
}

/* Ressalva juridica no pe do bloco: recua um degrau de tamanho e de cor para
   nao competir com a lista, mas continua acima do limite de contraste. */
.area-wide__note {
  max-width: 62ch;
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.area-wide__media { margin-top: var(--sp-8); }

.area-wide__media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (max-width: 760px) {
  .area-wide .checklist { grid-template-columns: 1fr; }
  .area-wide__media img { aspect-ratio: 3 / 2; }
}

/* ========================================================== PILARES == */

/* Sem a caixa, as colunas precisam de mais ar entre si: o que separa um pilar do
   vizinho agora e o intervalo, nao a borda. */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-7) var(--sp-6);
}

/* Quatro pilares sem icone, em texto mais longo: duas colunas leem melhor que
   quatro. Substitui o .cards--2 de "Como atuamos", cujos cartoes prometiam um
   clique que nao existia. */
.pillars--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 760px) { .pillars--2 { grid-template-columns: 1fr; } }

/* O pilar e informativo, nao leva a lugar nenhum -- e por isso nao se eleva no
   hover, que fica reservado aos blocos clicaveis (.card, .member,
   .contact-card). Mas essa regra era invisivel: parado, o pilar tinha o mesmo
   fundo, a mesma borda, o mesmo raio e o mesmo padding do .card, e o visitante
   que aprendera "estas caixas sobem" encontrava caixas que nao subiam e lia como
   defeito. A distincao passou para o repouso, e a leitura agora e direta:
   caixa fechada = clicavel; filete no topo = so informa. */
.pillar {
  padding-top: var(--sp-5);
  border-top: var(--brass-hair) solid var(--line);
}

.pillar__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius);
  background: var(--greige);
  color: var(--brass-text);
}

.pillar__icon svg { width: 22px; height: 22px; }

.pillar h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.pillar p { font-size: var(--fs-sm); color: var(--muted); }

/* Sobre .paper-alt o ladrilho greige do icone quase desaparece; o branco devolve
   o contraste sem introduzir cor nova. */
.section--alt .pillar__icon { background: var(--paper); border: 1px solid var(--greige-2); }

/* Lista de subtopicos.
   O marcador era um icone de check. Mas estes itens nao sao beneficios inclusos
   -- "Acoes revisionais", "Analise das garantias" sao assuntos que compoem a
   area. O check promete "voce recebe isto" e o texto entrega "isto faz parte do
   tema", e o gesto vinha de tabela de plano, fora de lugar num escritorio que
   recusou ate a pilula nos botoes. Agora o marcador e a marca do sistema, a
   mesma do .eyebrow, e some do HTML um <svg> repetido 29 vezes. */
.checklist { display: grid; gap: var(--sp-4); }

.checklist li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--fs-sm);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Meia entrelinha, para o filete pousar no meio da primeira linha do texto. */
  top: calc(1.65em / 2);
  width: calc(var(--brass-mark) / 2);
  height: var(--brass-hair);
  background: var(--brass);
}

.checklist strong { color: var(--ink); }

/* =================================================== AREAS (CARTOES) == */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}

.cards--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 760px) {
  .cards--2 { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--brass-rail);
  background: var(--brass);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur) var(--ease);
}

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--greige-2);
}

.card:hover::before,
.card:focus-within::before { transform: scaleY(1); }

/* O numeral usava --brass, que sobre branco rende 3,88:1 e so passava porque
   24px em peso 500 conta como texto grande -- exatamente em cima da fronteira.
   --brass-text rende 6,2:1 e obedece a regra do proprio sistema: latao puro e
   para filete, nunca para glifo. .step__num ja fazia assim. */
.card__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--brass-text);
  line-height: 1;
}

.card h3 { font-size: var(--fs-h3); }
.card p { font-size: var(--fs-sm); color: var(--muted); }
.card .link-arrow { margin-top: auto; padding-top: var(--sp-2); }

/* Cartao com link cobrindo todo o bloco */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ================================================= SINAIS DE ALERTA == */

/* Colunas fixas, e nao auto-fit, para que os itens fechem linhas cheias
   em vez de deixar celulas vazias no fim da grade. Como o fundo da grade
   e a cor das linhas, celula vazia vira um bloco visivel. Por isso os
   modificadores abaixo: use .signals--2 quando forem quatro itens e
   .signals--wide-last quando a contagem for impar. */
.signals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-ink);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius);
  overflow: hidden;
}

.signals--2 { grid-template-columns: repeat(2, 1fr); }
.signals--wide-last .signal:last-child { grid-column: 1 / -1; }

@media (max-width: 960px) { .signals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .signals { grid-template-columns: 1fr; } }

.signal {
  background: var(--ink);
  padding: var(--sp-6);
  transition: background-color var(--dur) var(--ease);
}

.signal:hover { background: var(--ink-2); }

.signal__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--brass-lt);
  letter-spacing: .1em;
}

.signal p {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: #E7ECF2;
  line-height: 1.55;
}

/* Onze <strong style="color:#fff"> saem do HTML por causa desta linha. */
.signal p strong { color: var(--text-on-ink); }

/* =========================================================== ETAPAS == */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  counter-reset: step;
}

.step { position: relative; padding-top: var(--sp-6); }

.step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--brass-rail);
  background: var(--greige-2);
}

.step::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--brass-mark);
  height: var(--brass-rail);
  background: var(--brass);
}

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
  color: var(--brass-text);
  margin-bottom: var(--sp-2);
}

.step h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ================================================== SOCIO / IMPRENSA == */

/* O fundo escuro deveria significar "pare aqui". A home usava cinco deles --
   hero, stats, dois spotlight e a faixa de CTA -- e o que era enfase virou o
   outro passo de uma alternancia mecanica: nada na pagina se destacava porque
   tudo se destacava igual. Sao tres agora, e cada um marca um momento: a
   abertura (hero), o alerta (sinais) e o fechamento (cta-band). A barra .stats
   clareou e o bloco do fundador passou a fundo claro -- o retrato ja e preto e
   branco e funciona nos dois. O .spotlight segue em uso em o-escritorio.html e
   analises-e-imprensa.html, onde e o unico bloco escuro da pagina. */
.spotlight {
  background: var(--ink-3);
  color: var(--text-on-ink);
}

.spotlight h2,
.spotlight h3 { color: #fff; }

.spotlight .eyebrow { color: var(--brass-lt); }

.spotlight p { color: var(--muted-on-ink); }
.spotlight .checklist strong { color: var(--text-on-ink); }
.spotlight .checklist li::before { background: var(--brass-lt); }

/* Chamava-se .spotlight__grid, mas o nome passou a mentir quando o bloco do
   fundador saiu do fundo escuro na home: a grade nunca dependeu do .spotlight.
   A primeira coluna acompanha o teto do .portrait-frame, para nao sobrar vazio
   entre o retrato e o texto. */
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

/* Variante com foto no lugar do retrato: aqui o texto e o conteudo principal
   e a imagem e vertical, entao as proporcoes se invertem. A coluna da foto
   fica estreita porque uma imagem 2:3 esticada ate meia pagina deixaria a
   secao alta demais para o texto que a acompanha. */
.feature-grid--media {
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
}

@media (max-width: 960px) {
  .feature-grid { grid-template-columns: 1fr; }

  /* Empilhado, a foto vertical ocuparia a largura toda e tomaria mais de uma
     tela; mantem a mesma faixa da versao em duas colunas, centralizada. */
  .feature-grid--media .split__media {
    max-width: 340px;
    margin-inline: auto;
  }
}

/* Teto de 320 px pelo mesmo motivo do .team-grid: a fonte tem 200 px de lado
   e ampliar alem disso deixa o retrato visivelmente mole. */
.portrait-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
}

/* O fundo do quadro so aparece enquanto a imagem carrega. Sobre secao clara o
   --ink-2 piscava como um bloco escuro; o greige e o mesmo placeholder que o
   .member__photo ja usa nos cartoes da equipe. */
.portrait-frame--light { background: var(--greige); }

.portrait-frame img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.portrait-frame:hover img,
.portrait-frame:focus-within img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.02);
}

.role-tag {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-4);
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-lt);
}

/* ============================================================ EQUIPE == */

/* Cartoes com teto de largura para que os retratos, cuja fonte e de 200 px,
   nao sejam ampliados demais. Flex em vez de grid porque, com grid, a ultima
   linha incompleta encostava a esquerda: justify-content centraliza o conjunto
   de colunas, nao os itens soltos da ultima linha. Com sete integrantes isso
   deixava um cartao orfao no canto. O numero de cartoes por linha nao muda,
   os dois calculos partem do mesmo teto de 260 px mais o gap. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
}

.member {
  flex: 0 1 260px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.member:hover,
.member:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--greige-2);
}

.member__photo {
  position: relative;
  background: var(--greige);
}

.member__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--dur-slow) var(--ease);
}

.member:hover .member__photo img,
.member:focus-within .member__photo img { filter: grayscale(0) contrast(1); }

.member__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1 1 auto;
}

.member h3 { font-size: var(--fs-md); line-height: 1.25; }

.member__role {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-text);
}

.member__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.member__link svg { width: 18px; height: 18px; color: var(--brass); }
.member__link:hover { color: var(--brass-text); }

/* =============================================================== FAQ == */

.faq { display: grid; gap: var(--sp-3); max-width: 52rem; }

.faq__item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.faq__item[open] { border-color: var(--greige-2); box-shadow: var(--shadow-sm); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  min-height: 56px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur) var(--ease);
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: var(--paper-alt); }

.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: var(--brass-rail);
  background: var(--brass);
  transform: translateY(-50%);
  transition: transform var(--dur) var(--ease);
}

.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translateY(-50%) rotate(0); }

.faq__answer {
  padding: 0 var(--sp-6) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.faq__answer p + p { margin-top: var(--sp-3); }

/* ========================================================= FAIXA CTA == */

.cta-band {
  position: relative;
  isolation: isolate;
  background: linear-gradient(120deg, var(--ink) 0%, var(--ink-3) 100%);
  color: var(--text-on-ink);
  text-align: center;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 120% at 50% 0%, rgba(195, 165, 117, .18), transparent 62%);
}

.cta-band .eyebrow { color: var(--brass-lt); }

.cta-band h2 { color: #fff; max-width: 24ch; margin-inline: auto; font-weight: 500; }
.cta-band p { max-width: 52ch; margin: var(--sp-4) auto 0; color: var(--muted-on-ink); }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* ========================================================== CONTATO == */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.contact-card:hover,
.contact-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--greige-2);
}

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-3);
  border-radius: var(--radius);
  background: var(--greige);
  color: var(--brass-text);
}

.contact-card__icon svg { width: 22px; height: 22px; }

.contact-card h3 { font-size: var(--fs-md); }

.contact-card__value {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

.contact-card__note { font-size: var(--fs-xs); color: var(--muted); }

/* O unico cartao de contato com botao proprio: alinha a esquerda para nao
   esticar na largura da coluna. */
.contact-card__cta { margin-top: var(--sp-4); align-self: flex-start; }

.address-block { margin-bottom: var(--sp-7); }

.address-block__lines {
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: 1.7;
}

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--greige);
  box-shadow: var(--shadow-sm);
}

.map-frame iframe {
  width: 100%;
  height: clamp(320px, 42vw, 460px);
  border: 0;
  filter: grayscale(.35) contrast(1.04);
}

/* O que aparece no lugar do mapa ate alguem pedir por ele. O iframe do Google
   grava cookies de terceiro no primeiro carregamento, entao ele so entra na
   pagina por acao do visitante ou com consentimento ja registrado. */
.map-facade {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-3);
  min-height: clamp(320px, 42vw, 460px);
  padding: var(--sp-6);
  text-align: center;
  background:
    linear-gradient(160deg, var(--greige) 0%, var(--paper-alt) 100%);
}

.map-facade__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--greige-2);
  color: var(--brass-text);
}

.map-facade__icon svg { width: 24px; height: 24px; }

.map-facade address {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}

/* --muted aqui reprovava. A contabilidade do sistema cobria --muted sobre
   --paper (5,0:1) e sobre --paper-alt (4,54:1), mas este texto pousa no gradiente
   da fachada, cuja ponta e --greige: 4,00:1 em 13px. --text rende 8,8:1. */
.map-facade__note {
  max-width: 42ch;
  font-size: var(--fs-xs);
  color: var(--text);
}

/* ======================================================== FORMULARIO == */

/* Primeiro e unico formulario do site. Ate aqui nao havia uma regra sequer de
   input em nenhum dos dois CSS, entao este bloco define o componente inteiro.
   Ele vive numa .section--alt, ou seja sobre --paper-alt: os campos sao
   --paper para se destacarem do fundo, e a borda usa --greige-2 em vez de
   --line porque --line quase some contra o proprio --paper-alt. */

.contact-form > * + * { margin-top: var(--sp-5); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

.field__opt {
  font-weight: 400;
  color: var(--muted);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* A fonte vai declarada aqui porque o reset normaliza button e nao os campos:
   sem isto o navegador aplica a sua propria fonte de sistema dentro deles, e o
   formulario sai em Arial no meio de uma pagina inteira em Lato. */
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--greige-2);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.field textarea {
  min-height: 0;
  line-height: 1.6;
  resize: vertical;
}

.field input:hover,
.field textarea:hover { border-color: var(--brass); }

.field input:focus,
.field textarea:focus { border-color: var(--brass); }

/* O anel global usa --radius-sm, pensado para links e botoes. Nos campos ele
   fecharia mais que a propria caixa, e o canto sairia duplo. */
.field input:focus-visible,
.field textarea:focus-visible { border-radius: var(--radius); }

/* :user-invalid, e nao :invalid. :invalid marca de erro todo campo obrigatorio
   desde o carregamento, antes de a pessoa ter chegado nele. */
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #A33A2E;
  box-shadow: inset 0 0 0 1px #A33A2E;
}

/* Checkbox de consentimento: rotulo ao lado, nao acima. */
.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
}

.field--check input {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: 0 0 auto;
  /* Alinha o quadrado com a primeira linha do rotulo, que e menor que o corpo. */
  margin-top: 2px;
  padding: 0;
  accent-color: var(--brass);
}

.field--check label {
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.6;
}

.field--check a { color: var(--brass-text); text-decoration: underline; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

/* Vazio o elemento nao ocupa espaco, para nao abrir um buraco antes do envio. */
.form-status {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.form-status:empty { display: none; }
.form-status--ok { color: var(--brass-text); }
.form-status--erro { color: #A33A2E; }
.form-status a { color: inherit; text-decoration: underline; }

.form-note {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.contact-form [disabled] { opacity: .6; cursor: progress; }

/* =========================================================== IMPRENSA == */

.press-list { display: grid; gap: var(--sp-5); }

.press-item {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.press-item:hover { box-shadow: var(--shadow); border-color: var(--greige-2); }

.press-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.press-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-text);
}

.press-item__meta span + span::before {
  content: "\B7";
  margin-right: var(--sp-3);
  color: var(--greige-2);
}

.press-item h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.press-item p { font-size: var(--fs-sm); color: var(--muted); }

.press-item blockquote {
  margin: var(--sp-4) 0;
  padding-left: var(--sp-5);
  border-left: var(--brass-rail) solid var(--brass);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
}

@media (max-width: 760px) {
  .press-item { grid-template-columns: 1fr; }
}

/* Cartao neutro, usado em blocos de apoio */
.note-card {
  height: 100%;
  padding: var(--sp-6);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.note-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.note-card p { font-size: var(--fs-sm); color: var(--muted); }

/* =================================================== DOCUMENTO LEGAL == */

.legal > * + * { margin-top: var(--sp-4); }

/* Filete separando os artigos, para dar onde a vista descansar num texto
   longo e continuo. O primeiro nao leva, porque ja vem depois da tarja. */
.legal h2 {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-h3);
}

.legal h3 {
  margin-top: var(--sp-6);
  font-size: var(--fs-md);
}

.legal p,
.legal li { font-size: var(--fs-sm); }

/* O reset zera os marcadores no site inteiro. Aqui eles voltam: num texto
   normativo a enumeracao faz parte do sentido. */
.legal ul,
.legal ol { padding-left: var(--sp-5); }

.legal li {
  list-style: disc;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
}

.legal ol > li { list-style: decimal; }

.legal a {
  color: var(--brass-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal a:hover { color: var(--ink); }

.legal__meta {
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Resumo em destaque logo no inicio: quem so quiser a conclusao para aqui. */
.legal__summary {
  padding: var(--sp-6);
  background: var(--paper-alt);
  border-left: var(--brass-rail) solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.legal__summary p { font-size: var(--fs-base); }

.legal__table-wrap { overflow-x: auto; }

.legal table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.legal th,
.legal td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.legal th {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom-color: var(--greige-2);
}

/* ============================================================ RODAPE == */

.site-footer {
  background: var(--ink-3);
  color: var(--muted-on-ink);
  padding-block: var(--sp-9) var(--sp-6);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line-ink);
}

.footer-about p {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  max-width: 34ch;
}

.footer-col h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-lt);
  margin-bottom: var(--sp-4);
}

.footer-col ul { display: grid; gap: var(--sp-1); }

/* A coluna do escritorio poe o endereco antes da lista de contatos. */
.footer-col address + ul { margin-top: var(--sp-3); }

.footer-col a,
.footer-col address {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--fs-sm);
  color: var(--muted-on-ink);
  transition: color var(--dur) var(--ease);
}

.footer-col address { min-height: 0; display: block; line-height: 1.6; }
.footer-col a:hover { color: #fff; }

.footer-social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-ink);
  border-radius: var(--radius);
  color: var(--muted-on-ink);
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.footer-social a:hover {
  background: rgba(255, 255, 255, .08);
  border-color: var(--brass);
  color: #fff;
}

.footer-social svg { width: 20px; height: 20px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: #8895A4;
}

.footer-bottom__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-5);
}

/* .footer-col a nao alcanca este bloco, que ate agora so tinha spans. */
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted-on-ink);
  transition: color var(--dur) var(--ease);
}

.footer-bottom a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 960px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: span 2; }
}

@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-about { grid-column: span 1; }
}

/* ================================================ AVISO DE PRIVACIDADE == */

/* Fica ancorado no rodape da janela, nao cobre a pagina e nao rouba o foco.
   Some sozinho assim que o visitante escolhe, e a escolha vai para o
   localStorage. Ver o modulo de consentimento em assets/js/site.js. */
.cookie-notice {
  position: fixed;
  z-index: var(--z-drawer);
  right: var(--gutter);
  bottom: var(--gutter);
  left: var(--gutter);
  max-width: 44rem;
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-6);
  background: var(--ink-3);
  color: var(--muted-on-ink);
  border: 1px solid var(--line-ink);
  border-top: var(--brass-rail) solid var(--brass);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transform: translateY(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}

.cookie-notice.is-open {
  transform: none;
  opacity: 1;
  visibility: visible;
}

.cookie-notice p {
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.cookie-notice a {
  color: var(--brass-lt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-notice a:hover { color: #fff; }

.cookie-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

@media (max-width: 560px) {
  .cookie-notice__actions .btn { flex: 1 1 100%; }
}

/* ============================================================ ERRO 404 == */

.error-page {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: calc(100dvh - var(--header-h) - 200px);
  padding-block: var(--sp-10);
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 12vw, 9rem);
  font-weight: 500;
  line-height: 1;
  /* Decorativo, mas mantido acima de 3:1 sobre branco para texto grande. */
  color: #8E8D80;
}

.error-page h1 { margin-top: var(--sp-4); }
/* A margem dos botoes vem do .section-actions; margin-top no .btn empilharia
   um intervalo por botao dentro do flex. */
.error-page p { margin-top: var(--sp-4); color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* ================================================ AJUSTES DE IMPRESSAO == */

@media print {
  .site-header,
  .nav,
  .nav-toggle,
  .cta-band,
  .cookie-notice,
  .map-frame { display: none; }

  body { color: #000; background: #fff; }
  .hero, .page-hero, .spotlight, .site-footer { background: #fff; color: #000; }

  /* O rodape imprime sobre branco, e a assinatura dele e a versao branca.
     brightness(0) leva qualquer cor a preto preservando a transparencia, o que
     dispensa trocar o src so para a impressao. */
  .site-footer .brand__logo { filter: brightness(0); }
}