/* ==========================================================================
   NEXUS ADVOCACIA ESTRATÉGICA — FOLHA DE ESTILOS COMPARTILHADA
   Usada nas 4 páginas do site (index, desbloqueio-salario,
   direito-trabalhista, direito-civel). Mobile-first: os estilos base valem
   para telas pequenas; breakpoints em 600px e 900px ampliam o layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIÁVEIS
   -------------------------------------------------------------------------- */
:root {
  /* cores fornecidas pelo cliente — não alterar */
  --cor-fundo: #0A0A0A;
  --cor-dourado: #C9A227;
  --cor-dourado-claro: #E0C087;
  --cor-prata: #C3BAAF;
  --cor-texto: #F5F5F5;
  --cor-texto-secundario: #B8B8B8;

  /* cores derivadas, necessárias para os componentes abaixo */
  --cor-texto-sobre-dourado: #0A0A0A; /* texto escuro obrigatório sobre fundo dourado sólido */
  --cor-fundo-elevado: #141414;       /* leve elevação sobre o fundo: cards, faixas */
  --cor-borda-sutil: rgba(245, 245, 245, 0.08);
  --sombra-cartao: 0 4px 24px rgba(0, 0, 0, 0.4);
  --cor-glow-dourado: rgba(201, 162, 39, 0.12);       /* glow suave atrás do hero */
  --cor-glow-dourado-sutil: rgba(201, 162, 39, 0.05); /* camada extra discreta nos cards */

  /* tipografia */
  --fonte-titulos: 'Playfair Display', serif;
  --fonte-corpo: 'Montserrat', sans-serif;

  /* espaçamento (escala modular, rem) */
  --espaco-xs: 0.5rem;
  --espaco-sm: 1rem;
  --espaco-md: 1.5rem;
  --espaco-lg: 2.5rem;
  --espaco-xl: 4rem;
  --espaco-2xl: 6rem;

  /* layout */
  --largura-maxima: 1200px;
  --raio-borda: 8px;
  --raio-borda-lg: 16px;
  --altura-header: 64px; /* redefinida em @media (min-width: 900px) mais abaixo */
  --transicao-padrao: 200ms ease;
  --z-cabecalho: 100;
  --z-flutuante: 90; /* abaixo do header, pra não sobrepor o menu mobile aberto */
}

/* Breakpoints usados neste arquivo (custom properties não funcionam dentro
   de @media, por isso ficam documentados aqui como referência única):
   - 600px: grade de cards passa de 1 para 2 colunas; rodapé vira 3 colunas
   - 900px: navegação expande (sai do menu hambúrguer); header fica mais alto */

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

ul[class], ol[class] {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. BASE E TIPOGRAFIA
   -------------------------------------------------------------------------- */
body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
}

/* compensa a altura do header fixo ao pular para uma âncora — vale tanto
   para navegação nativa (links entre páginas) quanto para o scroll suave
   feito via JS, então basta esta única regra em CSS */
[id] {
  scroll-margin-top: var(--altura-header);
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulos);
  line-height: 1.2;
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  color: var(--cor-dourado-claro);
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  color: var(--cor-dourado);
}

h3 {
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
  font-weight: 600;
  color: var(--cor-dourado);
}

p {
  color: var(--cor-texto);
}

strong {
  color: var(--cor-dourado-claro);
  font-weight: 600;
}

::selection {
  background: var(--cor-dourado);
  color: var(--cor-texto-sobre-dourado);
}

:focus-visible {
  outline: 2px solid var(--cor-dourado-claro);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. LAYOUT / PRIMITIVAS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.secao {
  padding-block: clamp(3rem, 8vw, 6rem);
}

.secao__cabecalho {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--espaco-xl);
  text-align: center;
}

.secao__cabecalho p {
  color: var(--cor-texto-secundario);
  margin-top: var(--espaco-sm);
}

/* bloco de texto corrido (parágrafos): largura confortável de leitura */
.texto-conteudo {
  max-width: 760px;
}

.texto-conteudo p + p {
  margin-top: var(--espaco-md);
}

.grade-cartoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-lg);
}

@media (min-width: 600px) {
  .grade-cartoes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grade-cartoes {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* modificador usado só na grade de 4 cards de Áreas de Atuação — seletor
   composto (.grade-cartoes.grade-cartoes--2x2) pra vencer por
   especificidade a regra de 3 colunas acima, que continua servindo sozinha
   a grade de 3 preços da página de desbloqueio */
@media (min-width: 900px) {
  .grade-cartoes.grade-cartoes--2x2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   5. ACESSIBILIDADE — UTILITÁRIOS
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular-conteudo {
  position: absolute;
  top: -100%;
  left: var(--espaco-sm);
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  background: var(--cor-dourado);
  color: var(--cor-texto-sobre-dourado);
  font-weight: 600;
  border-radius: var(--raio-borda);
  transition: top var(--transicao-padrao);
}

.pular-conteudo:focus {
  top: var(--espaco-sm);
}

/* --------------------------------------------------------------------------
   6. CABEÇALHO E NAVEGAÇÃO
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecalho);
  background-color: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda-sutil);
  /* acompanha a troca de cor ao rolar entre seções (ver seção 16) */
  transition: background-color 400ms ease;
}

.cabecalho__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--altura-header);
  gap: var(--espaco-md);
}

@media (min-width: 900px) {
  :root {
    --altura-header: 80px;
  }
}

.cabecalho__logo-link {
  display: block;
  flex-shrink: 0;
}

/* a logo já traz monograma + nome + assinatura; é exibida por inteiro,
   apenas reduzida — o próprio arquivo tem fundo preto sólido que se funde
   ao fundo da página, dispensando qualquer recorte ou moldura */
.cabecalho__logo-img {
  height: 40px;
  width: auto;
}

@media (min-width: 900px) {
  .cabecalho__logo-img {
    height: 52px;
  }
}

/* botão hambúrguer — visível apenas em telas estreitas */
.hamburguer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  /* empurra o botão pra direita: sem isso, o <nav> (com o menu suspenso em
     position:absolute) conta como um 3º item de largura zero no
     space-between do .cabecalho__container, e o hambúrguer fica flutuando
     no meio em vez de colado à borda. Margem automática consome o espaço
     livre antes do space-between atuar, então resolve independente disso.
     Sem efeito em telas largas, onde o botão já é display:none. */
  margin-inline-start: auto;
}

.hamburguer__linha {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--cor-dourado);
  transition: var(--transicao-padrao);
}

.hamburguer[aria-expanded="true"] .hamburguer__linha:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburguer[aria-expanded="true"] .hamburguer__linha:nth-child(2) {
  opacity: 0;
}

.hamburguer[aria-expanded="true"] .hamburguer__linha:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 900px) {
  .hamburguer {
    display: none;
  }
}

.nav-principal__lista {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda-sutil);
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s, background-color 400ms ease;
}

/* classe alternada via JS ao abrir/fechar o menu mobile */
.nav-principal__lista--aberta {
  max-height: 28rem;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.nav-principal__item {
  border-top: 1px solid var(--cor-borda-sutil);
}

.nav-principal__link {
  display: block;
  padding: var(--espaco-md) var(--espaco-lg);
  font-weight: 500;
  color: var(--cor-texto);
  transition: color var(--transicao-padrao);
}

.nav-principal__link:hover,
.nav-principal__link:focus-visible {
  color: var(--cor-dourado);
}

/* cobre tanto aria-current="page" (Início, só existe em index.html) quanto
   aria-current="true" (seção atual em destaque via scroll, setado por JS —
   o script nunca usa "false", só remove o atributo, então o seletor de
   presença é seguro pros dois casos) */
.nav-principal__link[aria-current] {
  color: var(--cor-dourado);
}

.nav-principal__item--cta {
  padding: var(--espaco-md) var(--espaco-lg);
}

.nav-principal__cta {
  width: 100%;
}

@media (min-width: 900px) {
  .nav-principal__lista {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--espaco-lg);
    max-height: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    background: none;
    border-bottom: none;
    transition: none;
  }

  .nav-principal__item,
  .nav-principal__item--cta {
    border-top: none;
    padding: 0;
  }

  .nav-principal__link {
    padding: var(--espaco-xs) 0;
  }

  .nav-principal__cta {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   7. BOTÕES
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-xs);
  padding: 0.9em 1.75em;
  border: 2px solid transparent;
  border-radius: var(--raio-borda);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: var(--transicao-padrao);
}

.botao--dourado {
  background-color: var(--cor-dourado);
  border-color: var(--cor-dourado);
  color: var(--cor-texto-sobre-dourado);
}

.botao--dourado:hover,
.botao--dourado:focus-visible {
  background-color: var(--cor-dourado-claro);
  border-color: var(--cor-dourado-claro);
  color: var(--cor-texto-sobre-dourado);
}

.botao--contorno {
  background-color: transparent;
  border-color: var(--cor-dourado);
  color: var(--cor-dourado);
}

.botao--contorno:hover,
.botao--contorno:focus-visible {
  background-color: var(--cor-dourado);
  color: var(--cor-texto-sobre-dourado);
}

.botao--bloco {
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. CARTÕES
   -------------------------------------------------------------------------- */
.cartao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  height: 100%;
  padding: var(--espaco-lg);
  background-color: var(--cor-fundo-elevado);
  background-image: radial-gradient(ellipse at 30% 0%, var(--cor-glow-dourado-sutil) 0%, transparent 70%);
  border: 1px solid var(--cor-borda-sutil);
  border-top: 2px solid var(--cor-dourado);
  border-radius: var(--raio-borda-lg);
  box-shadow: var(--sombra-cartao);
  transition: transform var(--transicao-padrao);
}

.cartao:hover {
  transform: translateY(-4px);
}

.cartao__icone {
  width: 40px;
  height: 40px;
  color: var(--cor-dourado);
}

.cartao__texto {
  color: var(--cor-texto-secundario);
  flex-grow: 1;
}

.cartao__rodape {
  margin-top: auto;
  padding-top: var(--espaco-sm);
}

/* cartão de faixa de valor (página de desbloqueio de salário): mostra
   apenas o rótulo da faixa + botão, sem valor de honorário */
.cartao--preco {
  align-items: center;
  text-align: center;
}

.cartao--preco .cartao__titulo {
  color: var(--cor-dourado-claro);
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--espaco-2xl);
  text-align: center;
  /* glow dourado suave, só pra tirar o peso do preto chapado atrás do
     título principal de cada página */
  background-image: radial-gradient(ellipse at 50% 30%, var(--cor-glow-dourado) 0%, transparent 60%);
}

.hero__logo {
  height: 96px;
  width: auto;
  margin-inline: auto;
  margin-bottom: var(--espaco-lg);
}

@media (min-width: 900px) {
  .hero__logo {
    height: 130px;
  }
}

.hero__subtitulo {
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--espaco-md);
  color: var(--cor-texto-secundario);
  font-size: 1.125rem;
}

.hero__acoes {
  display: flex;
  justify-content: center;
  margin-top: var(--espaco-xl);
}

/* --------------------------------------------------------------------------
   10. LISTA DE DIFERENCIAIS (bullets com ícone)
   -------------------------------------------------------------------------- */
.lista-diferenciais {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  margin-top: var(--espaco-lg);
}

.lista-diferenciais__item {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-sm);
}

.lista-diferenciais__icone {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 0.15em;
  color: var(--cor-dourado);
}

/* --------------------------------------------------------------------------
   11. PASSOS ("como funciona" — página de desbloqueio de salário)
   -------------------------------------------------------------------------- */
.passos {
  counter-reset: passo;
  display: grid;
  gap: var(--espaco-lg);
  margin-top: var(--espaco-lg);
}

@media (min-width: 900px) {
  .passos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.passos__item {
  position: relative;
  padding-top: var(--espaco-xl);
}

.passos__item::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--fonte-titulos);
  font-size: 2rem;
  font-weight: 700;
  color: var(--cor-dourado);
}

.passos__titulo {
  margin-bottom: var(--espaco-xs);
}

.passos__texto {
  color: var(--cor-texto-secundario);
}

/* --------------------------------------------------------------------------
   12. FAIXA DE CTA FINAL (páginas de Direito Trabalhista e Cível)
   -------------------------------------------------------------------------- */
.faixa-cta {
  background-color: var(--cor-fundo-elevado);
  border-top: 1px solid var(--cor-borda-sutil);
  border-bottom: 1px solid var(--cor-borda-sutil);
  padding-block: var(--espaco-2xl);
  text-align: center;
}

.faixa-cta__titulo {
  margin-bottom: var(--espaco-lg);
}

/* --------------------------------------------------------------------------
   13. RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  background-color: var(--cor-fundo-elevado);
  border-top: 1px solid var(--cor-borda-sutil);
  padding-block: var(--espaco-xl);
}

.rodape__container {
  display: grid;
  gap: var(--espaco-lg);
  text-align: center;
}

@media (min-width: 600px) {
  .rodape__container {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }
}

.rodape__logo {
  height: 64px;
  width: auto;
  margin-inline: auto;
}

@media (min-width: 600px) {
  .rodape__logo {
    margin-inline: 0;
  }
}

.rodape__bloco p {
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-xs);
}

.rodape__bloco a:hover,
.rodape__bloco a:focus-visible {
  color: var(--cor-dourado);
}

.rodape__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-xs);
}

.rodape__whatsapp-icone {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.rodape__copyright {
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   14. BOTÃO FLUTUANTE DE WHATSAPP
   -------------------------------------------------------------------------- */
.whatsapp-flutuante {
  position: fixed;
  right: var(--espaco-md);
  bottom: var(--espaco-md);
  z-index: var(--z-flutuante);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cor-dourado);
  color: var(--cor-texto-sobre-dourado);
  border-radius: 50%;
  box-shadow: var(--sombra-cartao);
  transition: var(--transicao-padrao);
}

.whatsapp-flutuante:hover,
.whatsapp-flutuante:focus-visible {
  background-color: var(--cor-dourado-claro);
}

.whatsapp-flutuante svg {
  width: 28px;
  height: 28px;
}

/* --------------------------------------------------------------------------
   15. BLOCOS EM TELA CHEIA — usado nas seções do index.html (hero, Sobre,
   Especialidades: cada uma ocupa pelo menos uma tela de altura,
   descontando o header fixo). Nas 4 páginas avulsas (Trabalhista, Cível,
   Família, Desbloqueio) o espaçamento é o natural de .secao/.hero, sem
   forçar altura mínima — o efeito de "uma seção por tela" nelas deixava o
   espaçamento entre os textos grande demais.
   -------------------------------------------------------------------------- */
.bloco-tela-cheia {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--altura-header));
  min-height: calc(100dvh - var(--altura-header));
}