/* ============================================================
   GO. Advocacia — comportamento de navegacao e responsividade
   Carregado depois do <style> inline de cada pagina.
   ============================================================ */

:root {
  --go-bg: #1B2028;
  --go-panel: #12161C;
  --go-ink: #F1EFE9;
  --go-gold: #C79A5F;
  --go-brown: #7F5C33;
  --go-line: rgba(241, 239, 233, 0.14);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Foco visivel em teclado — o site nao tinha nenhum. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--go-gold);
  outline-offset: 3px;
}

/* ---------- Menus suspensos ----------
   Antes: abriam SO no hover, o que os tornava inalcancaveis no toque.
   Agora: hover apenas onde ha ponteiro fino; alem disso abrem por
   clique na seta (.is-open) e por foco de teclado.               */

[data-nav-item] [data-nav-menu] { display: none; }

/* .is-open e a unica fonte de verdade: com :focus-within o menu ficava
   preso aberto depois do clique na seta (o foco permanecia nela). */
[data-nav-item].is-open > [data-nav-menu] { display: block; }

@media (hover: hover) and (pointer: fine) {
  [data-nav-item]:hover > [data-nav-menu] { display: block; }
}

/* Seta ▾ vira alvo de toque de verdade */
[data-nav-caret] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  margin: -6px -4px -6px 0;
  cursor: pointer;
  transition: transform 0.18s ease;
}

[data-nav-item].is-open [data-nav-caret] { transform: rotate(180deg); }

/* ---------- Botao do menu movel ---------- */

[data-nav-toggle] {
  display: none;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--go-gold);
  color: var(--go-ink);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 16px;
  cursor: pointer;
}

[data-nav-toggle] span {
  display: block;
  width: 18px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

/* ---------- Gaveta de navegacao (movel) ---------- */

[data-nav-drawer] {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--go-panel);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 48px;
}

[data-nav-drawer].is-open { display: block; }

body.go-nav-locked { overflow: hidden; }

[data-drawer-head] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(20px, 5vw, 32px);
  border-bottom: 1px solid var(--go-line);
  position: sticky;
  top: 0;
  background: var(--go-panel);
}

[data-drawer-close] {
  background: transparent;
  border: 1px solid var(--go-line);
  color: var(--go-ink);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 22px;
  line-height: 1;
  padding: 8px 14px;
  cursor: pointer;
}

[data-drawer-group] { border-bottom: 1px solid rgba(241, 239, 233, 0.08); }

[data-drawer-group] > b {
  display: block;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--go-gold);
  padding: 22px clamp(20px, 5vw, 32px) 8px;
}

[data-drawer-group] a {
  display: block;
  padding: 14px clamp(20px, 5vw, 32px);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  color: var(--go-ink);
  text-decoration: none;
}

[data-drawer-group] a:active { background: var(--go-brown); }

[data-drawer-cta] {
  display: block;
  margin: 26px clamp(20px, 5vw, 32px) 0;
  padding: 16px 20px;
  text-align: center;
  background: var(--go-brown);
  color: var(--go-ink) !important;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* ---------- Ponto de quebra ----------
   O site nao tinha nenhuma media query. Abaixo de 900px o menu
   horizontal empilhava em tres fileiras e engolia a tela.        */

@media (max-width: 900px) {
  [data-nav-root] { display: none !important; }
  [data-nav-toggle] { display: inline-flex; }
  [data-nav-bar] { flex-wrap: nowrap !important; }
  [data-nav-bar] img { height: 58px !important; }
}

@media (max-width: 560px) {
  [data-nav-bar] { padding-top: 16px !important; padding-bottom: 16px !important; }
  [data-nav-bar] img { height: 48px !important; }
  [data-nav-toggle] { padding: 10px 13px; font-size: 12px; }
}

/* ---------- Formulario de contato ---------- */

[data-form-status] {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 14px 16px;
  border-left: 2px solid var(--go-gold);
  background: rgba(199, 154, 95, 0.08);
}

[data-form-status][data-state="erro"] {
  border-left-color: #C2564B;
  background: rgba(194, 86, 75, 0.1);
}

[data-form-status][hidden] { display: none; }

form[data-contato] button[disabled] { opacity: 0.55; cursor: progress; }

/* Campo-armadilha anti-robo: fora da tela, nunca focavel por humano. */
[data-honeypot] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ============================================================
   Tema claro — paginas internas (body[data-tema="claro"])
   A home segue escura; tudo que e navegacao precisa saber
   em qual dos dois fundos esta pousado.
   ============================================================ */

body[data-tema="claro"] [data-nav-toggle] {
  color: var(--go-bg);
  border-color: var(--go-brown);
}

body[data-tema="claro"] [data-nav-toggle]:hover {
  background: var(--go-brown);
  color: var(--go-ink);
}

/* A gaveta continua escura de proposito: sobreposta ao conteudo,
   ela se le como camada, nao como parte da pagina. */

body[data-tema="claro"] a:focus-visible,
body[data-tema="claro"] button:focus-visible {
  outline-color: var(--go-brown);
}

/* Faixas marrons de chamada: o texto delas nao tem cor propria, herda do
   wrapper da pagina. Com a pagina clara, herdava azul-escuro sobre marrom
   (2,7:1). O botao interno, que tem fundo proprio, fica de fora. */

body[data-tema="claro"] [style*="background:#7F5C33"] { color: var(--go-ink); }

body[data-tema="claro"] [style*="background:#7F5C33"] *:not([style*="background:"]) {
  color: var(--go-ink) !important;
}

/* ============================================================
   Home — correcoes de celular e leitura das quatro frentes
   ============================================================ */

/* As quatro frentes ficavam numa fila com overflow-x: no celular
   apareciam duas e as outras duas sumiam sem nenhum sinal. Agora as
   quatro estao sempre visiveis e numeradas. */

[data-frentes] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 !important;
  align-items: stretch;
}

[data-frentes] button {
  white-space: normal !important;
  text-align: left;
  padding: 0 20px 16px 0 !important;
  line-height: 1.3;
  transition: color 0.15s ease;
}

[data-frentes] button::before {
  content: attr(data-frente);
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 14px;
  color: var(--go-gold);
  margin-bottom: 12px;
}

[data-frentes] button:hover { color: var(--go-ink) !important; }

@media (max-width: 760px) {
  [data-frentes] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px !important;
  }
  [data-frentes] button { font-size: 14px !important; padding-right: 14px !important; }
}

/* "Sobre mim": as duas colunas somavam 456px de minimo dentro de uma
   area de 350px no celular — o texto saia pela direita da tela. */

@media (max-width: 700px) {
  [data-sobre-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  [data-sobre-grid] > div:first-child { max-width: 300px; }
}

/* Linhas de contato: rotulo fixo de 104px + e-mail longo + seta nao
   cabiam lado a lado; o endereco vazava para fora da tela. */

@media (max-width: 700px) {
  [data-contato-linha] {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px 14px !important;
  }
  [data-contato-linha] > span:first-child { grid-column: 1 / -1; }
  [data-contato-linha] > span { word-break: break-word; }
}

/* ============================================================
   Home — as cinco perguntas
   Eram cinco <details> separados por um filete de 1px, com um "+"
   que nao mudava ao abrir. Liam-se como um paragrafo unico.
   ============================================================ */

[data-perguntas] summary {
  cursor: pointer;
  list-style: none;
  padding: 26px 0 !important;
  align-items: baseline !important;
  transition: color 0.15s ease;
}

[data-perguntas] summary::-webkit-details-marker { display: none; }

/* O numero deixa a contagem visivel sem precisar somar as linhas. */
[data-perguntas] summary[data-pergunta]::before {
  content: attr(data-pergunta);
  font-family: 'Fraunces', serif;
  font-size: 14px;
  color: var(--go-brown);
  margin-right: 18px;
  flex: none;
}

[data-perguntas] summary:hover { color: var(--go-brown); }

/* O "+" gira e vira "×" — o unico sinal de que a linha abriu. */
[data-perguntas] summary > span {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease;
  flex: none;
}

[data-perguntas] details[open] summary > span { transform: rotate(45deg); }

[data-perguntas] details[open] summary { color: var(--go-brown); }

[data-perguntas] details[open] { background: rgba(27, 32, 40, 0.028); }

[data-perguntas] details[open] > p { padding-left: 46px; }

@media (max-width: 560px) {
  [data-perguntas] summary { font-size: 16px !important; gap: 14px !important; }
  [data-perguntas] summary[data-pergunta]::before { margin-right: 12px; }
  [data-perguntas] details[open] > p { padding-left: 0; }
}

/* ============================================================
   Home — cartoes de artigo
   Separados por 1px, empilhados no celular viravam um bloco so.
   ============================================================ */

@media (max-width: 700px) {
  [data-cartoes-artigo] {
    gap: 14px !important;
    background: transparent !important;
  }
  [data-cartoes-artigo] > a {
    border: 1px solid rgba(241, 239, 233, 0.16);
    min-height: 0 !important;
  }
}

/* ============================================================
   Telas estreitas: colunas de largura minima fixa
   minmax(300px,1fr) exige 300px de coluna, mas a 320px de tela
   sobram 280px de area util — o conteudo era recortado a direita.
   ============================================================ */

@media (max-width: 380px) {
  [style*="minmax(200px"],
  [style*="minmax(220px"],
  [style*="minmax(240px"],
  [style*="minmax(260px"],
  [style*="minmax(280px"],
  [style*="minmax(300px"],
  [style*="minmax(320px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ============================================================
   Cartoes de artigo — cada texto vira um bloco fechado
   Antes: separados por um filete de 1px, liam-se como um bloco so
   e nao se percebia quantos eram nem que eram clicaveis.
   ============================================================ */

[data-cartoes] {
  gap: 16px !important;
  background: transparent !important;
}

[data-cartoes] > a {
  border: 1px solid rgba(241, 239, 233, 0.2);
  border-radius: 4px;
  position: relative;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

[data-cartoes] > a:hover {
  border-color: var(--go-gold);
  transform: translateY(-2px);
}

/* Chamada explicita: o cartao inteiro ja e um link, mas sem um rotulo
   visivel ninguem repara nisso ao rolar a pagina. */
[data-cartoes] > a::after {
  content: "Ler o artigo →";
  display: inline-block;
  margin-top: 18px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--go-gold);
}

/* Na lista de artigos o cartao e uma grade de duas colunas: a chamada
   precisa ficar embaixo do texto, nao numa terceira coluna. */
[data-cartoes-lista] > a {
  padding: 30px 26px !important;
}

[data-cartoes-lista] > a::after {
  grid-column: 2;
  margin-top: 4px;
}

@media (max-width: 700px) {
  [data-cartoes-lista] > a {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  [data-cartoes-lista] > a::after { grid-column: 1; }
}

/* Na home os cartoes vivem sobre o fundo escuro; na lista, sobre creme. */
body[data-tema="claro"] [data-cartoes] > a { border-color: rgba(27, 32, 40, 0.2); }
body[data-tema="claro"] [data-cartoes] > a:hover { border-color: var(--go-brown); }

/* Na lista de artigos os cartoes sao escuros sobre pagina creme: a borda
   escura desapareceria dentro deles. Quem separa ali e o respiro. */
body[data-tema="claro"] [data-cartoes] > a[style*="background:#1B2028"] {
  border-color: rgba(241, 239, 233, 0.18);
}

body[data-tema="claro"] [data-cartoes] > a[style*="background:#1B2028"]:hover {
  border-color: var(--go-gold);
}

/* ============================================================
   Menu do topo — o inline vinha com 13px, pequeno demais para
   leitura confortavel. Os submenus herdam o mesmo tamanho.
   ============================================================ */

[data-nav-root] { font-size: 15px !important; }

[data-nav-root] [data-nav-menu] a { font-size: 15px; padding: 15px 22px !important; }

[data-nav-root] [data-nav-item] > a { letter-spacing: 0.005em; }

/* A seta acompanha, sem virar protagonista. */
[data-nav-caret] { font-size: 10px !important; }

@media (max-width: 1120px) {
  [data-nav-root] { font-size: 14px !important; gap: 18px !important; }
}

/* Com o numero, o summary passou a ter tres filhos e o space-between
   original jogava a pergunta para o centro. Alinha a esquerda e manda
   o sinal de abrir para a borda direita. */
[data-perguntas] summary { justify-content: flex-start !important; }
[data-perguntas] summary > span { margin-left: auto; }

/* A lista de artigos ja traz um "LER ↗" no proprio cartao; a chamada
   gerada por CSS so faz sentido na home, onde nao existe nenhuma. */
[data-cartoes-lista] > a::after { content: none !important; }

[data-cartoes-lista] > a span[style*="color:#C79A5F"]:last-child,
[data-cartoes-lista] > a > span:last-child {
  letter-spacing: 0.08em;
}

/* ============================================================
   Formato dos botoes — pilula
   O site inteiro usava cantos vivos. As cores continuam as mesmas:
   marrom solido, contorno dourado e creme sobre faixa marrom.
   Os seletores miram so <a> e <button>: as FAIXAS marrons de secao
   usam o mesmo fundo e nao podem virar pilula.
   ============================================================ */

a[style*="background:#7F5C33"],
button[style*="background:#7F5C33"],
a[style*="border:1px solid #A67C4A"],
a[style*="background:#F1EFE9; color:#1B2028; padding"],
form[data-contato] button[type="submit"] {
  border-radius: 999px !important;
}

/* O contorno ganha um fio a mais para nao sumir na curva. */
a[style*="border:1px solid #A67C4A"] {
  transition: background 0.18s ease, border-color 0.18s ease;
}

a[style*="border:1px solid #A67C4A"]:hover {
  background: rgba(166, 124, 74, 0.14);
}

/* Controles de navegacao acompanham o mesmo formato. */
[data-nav-toggle],
[data-drawer-close],
[data-drawer-cta] {
  border-radius: 999px;
}

/* Paineis dos submenus: canto vivo ao lado de botao redondo destoa.
   O overflow evita que o fundo do item no hover volte a quadrar a quina. */
[data-nav-menu] > div {
  border-radius: 10px;
  overflow: hidden;
}

/* Cartoes acompanham, num raio maior que o de 4px inicial. */
[data-cartoes] > a { border-radius: 10px; }

/* A foto do "Sobre mim" e as molduras seguem retas de proposito:
   arredondar imagem de retrato institucional envelhece rapido. */

/* Bloco "Na imprensa" — citacao de terceiro, nao artigo assinado. */
[data-imprensa-item] {
  transition: border-color 0.18s ease, transform 0.18s ease;
}

[data-imprensa-item]:hover {
  border-color: var(--go-brown) !important;
  transform: translateY(-2px);
}

/* ============================================================
   Arredondamento geral
   O site foi desenhado todo em canto vivo. Aqui as grades que se
   separavam por um filete de 1px viram cartoes com respiro e raio,
   e os links sublinhados viram botoes de contorno.
   ============================================================ */

[data-grade] {
  gap: 14px !important;
  background: transparent !important;
}

[data-grade] > a,
[data-grade] > div {
  border-radius: 10px;
  border: 1px solid rgba(241, 239, 233, 0.14);
}

body[data-tema="claro"] [data-grade] > a,
body[data-tema="claro"] [data-grade] > div {
  border-color: rgba(27, 32, 40, 0.16);
}

/* Cartoes escuros sobre pagina creme precisam de fio claro. */
body[data-tema="claro"] [data-grade] > a[style*="background:#1B2028"],
body[data-tema="claro"] [data-grade] > div[style*="background:#1B2028"] {
  border-color: rgba(241, 239, 233, 0.18);
}

[data-grade] > a { transition: border-color 0.18s ease, transform 0.18s ease; }
[data-grade] > a:hover { border-color: var(--go-gold); transform: translateY(-2px); }

/* Links sublinhados viram botao de contorno, no mesmo formato dos demais. */
a[style*="border-bottom:1px solid rgba(199,154,95,0.4)"],
a[style*="border-bottom:1px solid rgba(199,154,95,0.45)"] {
  border-bottom: none !important;
  border: 1px solid rgba(199, 154, 95, 0.55) !important;
  border-radius: 999px !important;
  padding: 11px 20px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

a[style*="border-bottom:1px solid rgba(199,154,95,0.4)"]:hover,
a[style*="border-bottom:1px solid rgba(199,154,95,0.45)"]:hover {
  background: rgba(199, 154, 95, 0.14);
  border-color: var(--go-gold) !important;
}

/* Molduras de imagem e caixas de conteudo. */
div[style*="aspect-ratio:4/5"],
div[style*="aspect-ratio:16/10"],
div[style*="aspect-ratio:3/2"] {
  border-radius: 10px;
}

div[style*="border:1px solid rgba(241,239,233,0.14); padding:clamp"],
div[style*="border:1px solid rgba(27,32,40,0.16); padding:clamp"] {
  border-radius: 14px;
}

/* Caixa do formulario e a pergunta aberta. */
form[data-contato] { border-radius: 14px; }
[data-perguntas] details[open] { border-radius: 10px; }

/* Campos do formulario: o sublinhado continua reto de proposito —
   virar pilula transformaria campo de texto em botao aos olhos. */

/* ============================================================
   Rodape — quatro colunas, redes e barra legal
   Markup unico nas 17 paginas; a cor vem do tema.
   ============================================================ */

[data-rodape] { border-top: 1px solid rgba(241, 239, 233, 0.12); }
body[data-tema="claro"] [data-rodape] { border-top-color: rgba(27, 32, 40, 0.14); }

[data-rodape-topo] {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px clamp(20px, 4vw, 40px) 44px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: 48px;
}

@media (max-width: 960px) {
  [data-rodape-topo] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}

@media (max-width: 560px) {
  [data-rodape-topo] { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 48px; }
}

[data-rodape-marca] img { height: 44px; width: auto; display: block; margin: 0 0 18px -4px; }

[data-logo-claro] { display: none !important; }
body[data-tema="claro"] [data-logo-escuro] { display: none !important; }
body[data-tema="claro"] [data-logo-claro] { display: block !important; }

[data-rodape-marca] p {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(241, 239, 233, 0.7);
  margin: 0 0 22px;
}

body[data-tema="claro"] [data-rodape-marca] p { color: rgba(27, 32, 40, 0.75); }

[data-rodape-social] { display: flex; gap: 10px; }

[data-rodape-social] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(241, 239, 233, 0.22);
  color: #F1EFE9;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

[data-rodape-social] a:hover {
  background: var(--go-brown);
  border-color: var(--go-brown);
  color: #F1EFE9;
}

body[data-tema="claro"] [data-rodape-social] a { border-color: rgba(27, 32, 40, 0.24); color: #1B2028; }
body[data-tema="claro"] [data-rodape-social] a:hover { color: #F1EFE9; }

[data-rodape-col] { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }

[data-rodape-col] b {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(241, 239, 233, 0.62);
  margin-bottom: 4px;
}

body[data-tema="claro"] [data-rodape-col] b { color: rgba(27, 32, 40, 0.64); }

[data-rodape-col] a { color: var(--go-gold); text-decoration: none; }
[data-rodape-col] a:hover { color: #F1EFE9; }
body[data-tema="claro"] [data-rodape-col] a { color: #6A4B29; }
body[data-tema="claro"] [data-rodape-col] a:hover { color: #1B2028; }

[data-rodape-legal] {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 40px) 46px;
  display: flex;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(241, 239, 233, 0.62);
}

body[data-tema="claro"] [data-rodape-legal] { color: rgba(27, 32, 40, 0.64); }

/* Filete alinhado ao conteudo, nao a borda da caixa. */
[data-rodape-legal]::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(20px, 4vw, 40px);
  right: clamp(20px, 4vw, 40px);
  height: 1px;
  background: rgba(241, 239, 233, 0.12);
}

body[data-tema="claro"] [data-rodape-legal]::before { background: rgba(27, 32, 40, 0.14); }

[data-rodape-legal] span:last-child { max-width: 640px; }

/* Em tela estreita a pilula de contorno com white-space:nowrap nao cabia. */
@media (max-width: 430px) {
  a[style*="border-bottom:1px solid rgba(199,154,95,0.4)"],
  a[style*="border-bottom:1px solid rgba(199,154,95,0.45)"] {
    white-space: normal !important;
    padding: 10px 16px !important;
  }
}

/* Terceira variante de contorno dourado — os botoes "Ver a pagina
   completa" das areas de atuacao, que ficaram de fora da primeira
   passada por usarem rgba(199,154,95,0.5) em vez de #A67C4A. */
a[style*="border:1px solid rgba(199,154,95,0.5)"] {
  border-radius: 999px !important;
  transition: background 0.18s ease, border-color 0.18s ease;
}

a[style*="border:1px solid rgba(199,154,95,0.5)"]:hover {
  background: rgba(199, 154, 95, 0.14);
  border-color: var(--go-gold) !important;
}

/* Hover dos itens de submenu.
   O site gera uma classe .hNNN por link para isso; o item "Valores e
   princípios", inserido depois, nao tinha classe e ficava sem o realce.
   Esta regra vale para todos e dispensa a numeracao. */
[data-nav-menu] a:hover {
  background: var(--go-brown);
  color: var(--go-ink) !important;
}


/* ============================================================
   Hero — imagem de fundo sorteada por visita
   Duas camadas absolutas dentro do container do hero: a imagem
   embaixo, o veu em cima, o conteudo acima das duas (z-index:2).
   Sem animacao: o hero e vitrine, nao carrossel.
   O CSS base aponta para a variante A, entao sem JS o hero
   continua com imagem.
   ============================================================ */

[data-hero-imagem],
[data-hero-veu] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

[data-hero-imagem] {
  background-image: url('/assets/hero-a-arquitetura.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

html[data-hero="b"] [data-hero-imagem] {
  background-image: url('/assets/hero-b-mesa.webp');
}

/* O veu e quem garante o contraste, qualquer que seja a foto sorteada. */
[data-hero-veu] {
  background: linear-gradient(90deg,
    rgba(27, 32, 40, 0.92) 0%,
    rgba(27, 32, 40, 0.87) 42%,
    rgba(27, 32, 40, 0.86) 100%);
}

/* Em tela estreita o corte 16:9 com cover joga fora justamente o espaco
   negativo onde o texto respira. As variantes -mobile sao 4:5. */
@media (max-width: 720px) {
  [data-hero-imagem] {
    background-image: url('/assets/hero-a-arquitetura-mobile.webp');
    background-position: center top;
  }
  html[data-hero="b"] [data-hero-imagem] {
    background-image: url('/assets/hero-b-mesa-mobile.webp');
  }
  /* Texto sobre foto em tela pequena precisa de mais veu: a coluna
     ocupa a largura inteira, nao so o terco esquerdo. */
  [data-hero-veu] {
    background: linear-gradient(180deg,
      rgba(27, 32, 40, 0.90) 0%,
      rgba(27, 32, 40, 0.93) 55%,
      rgba(27, 32, 40, 0.88) 100%);
  }
}

/* ============================================================
   Secao de contato — imagem bem mais contida
   A secao e densa de texto (paragrafos, rotulos dourados, campos
   de formulario), entao a foto entra baixa e sob veu vertical.
   ============================================================ */

[data-contato-imagem],
[data-contato-veu] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

[data-contato-imagem] {
  background-image: url('/assets/escritorio-anoitecer.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.24;
}

[data-contato-veu] {
  background: linear-gradient(180deg,
    rgba(18, 22, 28, 0.90) 0%,
    rgba(18, 22, 28, 0.96) 45%,
    rgba(18, 22, 28, 0.92) 100%);
}