/* ===================================================================
   SANTOS ALMEIDA — Advocacia e Assessoria Jurídica
   Folha de estilos principal do site.
   Paleta extraída da marca: azul-marinho + dourado, sobre fundo claro.
   =================================================================== */

/* --- 1. Variáveis de identidade visual ------------------------------ */
:root {
  /* Cores da marca (extraídas do logo, sem nenhuma alteração) */
  --azul-marinho: #22304f;      /* cor principal: cabeçalhos, texto de destaque */
  --azul-marinho-escuro: #182238; /* variação mais escura, uso pontual */
  --dourado: #b8922f;           /* cor de apoio: detalhes, links, bordas */
  --dourado-escuro: #8a6a1f;    /* dourado mais escuro, para texto legível sobre fundo claro */

  /* Neutros */
  --creme: #faf8f3;             /* fundo alternado das seções de conteúdo */
  --marmore: #e7e5e0;            /* cinza-mármore: fundo do cabeçalho, herói e rodapé —
                                     combina com o logo original sem exigir alterar suas cores */
  --marmore-borda: #cfccc2;      /* linha de acabamento sobre o mármore */
  --branco: #ffffff;
  --texto: #2b2b2b;             /* texto principal sobre fundo claro */
  --texto-suave: #5a5a5a;       /* texto secundário */
  --borda: #e2ddd0;             /* linhas e divisórias sutis */

  /* Tipografia — apenas fontes do sistema (sem carregamento externo) */
  --fonte-titulo: Georgia, 'Times New Roman', Cambria, serif;
  --fonte-corpo: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Espaçamento e layout */
  --largura-maxima: 1120px;
  --raio: 3px;
}

/* --- 2. Reinício básico --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--marmore); }
body {
  margin: 0;
  font-family: var(--fonte-corpo);
  color: var(--texto);
  background: var(--branco);
  line-height: 1.65;
  font-size: 17px;
}
img { max-width: 100%; display: block; }
a { color: var(--azul-marinho); text-decoration-color: var(--dourado); }
a:hover { color: var(--dourado); }
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--azul-marinho);
  line-height: 1.25;
  font-weight: 400;
}
.container {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 24px;
}
:focus-visible {
  outline: 3px solid var(--dourado);
  outline-offset: 2px;
}
.pular-para-conteudo {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--branco);
  padding: 12px 20px;
  z-index: 1000;
  border: 2px solid var(--dourado);
}
.pular-para-conteudo:focus { left: 12px; top: 12px; }

/* --- 3. Cabeçalho e navegação ---------------------------------------- */
.cabecalho {
  background: var(--marmore);
  border-bottom: 3px solid var(--dourado);
  position: sticky;
  top: 0;
  z-index: 100;
}
.cabecalho .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
}
.cabecalho .logo img { height: 42px; width: auto; }
.cabecalho .logo { flex-shrink: 0; }

.menu-principal {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-principal a {
  color: var(--texto);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: .02em;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.menu-principal a:hover,
.menu-principal a[aria-current="page"] {
  color: var(--azul-marinho);
  border-bottom-color: var(--dourado);
}

.botao-menu-mobile {
  display: none;
  background: none;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 8px 10px;
  cursor: pointer;
}
.botao-menu-mobile span,
.botao-menu-mobile span::before,
.botao-menu-mobile span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--azul-marinho);
  position: relative;
  transition: all .2s;
}
.botao-menu-mobile span::before { content: ""; position: absolute; top: -7px; }
.botao-menu-mobile span::after { content: ""; position: absolute; top: 7px; }

/* --- 4. Seção "herói" (abertura da home) ------------------------------ */
/* Fundo cinza-mármore: sóbrio, combina com o azul-marinho e o dourado da
   logo original sem exigir alterar nenhuma cor do arquivo da marca. Mesmo
   tom do cabeçalho, para não haver costura entre os dois. */
.hero {
  background: var(--marmore);
  border-bottom: 3px solid var(--dourado);
  color: var(--azul-marinho);
  padding: 88px 0 80px;
  text-align: center;
}
.hero .selo {
  width: 148px;
  margin: 0 auto 12px;
}
.hero h1 {
  max-width: 780px;
  margin: 0 auto 18px;
}

/* Lockup do nome da marca: "SANTOS ALMEIDA" em destaque + linha menor abaixo,
   reproduzindo a hierarquia usada na logo (não em uma única frase corrida).
   A largura da linha menor é ajustada por script (site.js) para ocupar o
   mesmo comprimento da linha maior, como no arquivo original da logo. */
.nome-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.nome-marca .nome-principal {
  color: var(--azul-marinho);
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.nome-marca .nome-subtitulo {
  font-family: var(--fonte-corpo);
  color: var(--dourado-escuro);
  font-size: clamp(.85rem, 1.6vw, 1.05rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
}
.hero p.linha-apoio {
  color: var(--texto-suave);
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto 42px;
}

/* Hierarquia de botões: o CTA principal (contato) vem preenchido, para ficar
   claramente em primeiro plano; o secundário (navegação de apoio) fica só
   com contorno, para não competir com a ação principal da tela. */
.botao {
  display: inline-block;
  text-decoration: none;
  padding: 13px 34px;
  border-radius: var(--raio);
  font-size: 15px;
  letter-spacing: .03em;
  border: 1px solid var(--azul-marinho);
  transition: background .2s, color .2s, border-color .2s;
}
.botao--principal {
  background: var(--azul-marinho);
  color: var(--branco);
}
.botao--principal:hover { background: var(--azul-marinho-escuro); border-color: var(--azul-marinho-escuro); }

.botao--secundario {
  background: transparent;
  color: var(--azul-marinho);
}
.botao--secundario:hover { background: var(--azul-marinho); color: var(--branco); }

/* --- 5. Seções gerais -------------------------------------------------- */
section { padding: 72px 0; }
section.creme { background: var(--creme); }
.titulo-secao {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}
.titulo-secao h2 { font-size: 1.9rem; margin-bottom: 12px; }
.titulo-secao p { color: var(--texto-suave); font-size: 16px; }

.apresentacao {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.apresentacao p {
  font-size: 18px;
  color: var(--texto-suave);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* --- 5.1 Perfil do advogado responsável (foto + texto) -------------------- */
.perfil-advogado {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto;
}
.perfil-advogado .foto {
  flex: 0 0 200px;
  width: 200px;
  border-radius: var(--raio);
  border: 3px solid var(--branco);
  outline: 1px solid var(--borda);
  box-shadow: 0 6px 18px rgba(27, 34, 56, .1);
}
.perfil-advogado .texto { flex: 1; }
.perfil-advogado .texto h2 { margin-top: 0; }

/* Dificulta o salvamento casual da foto (clique-direito, arrastar, seleção).
   Não impede print de tela — isso nenhuma técnica de site consegue. */
.foto-protegida {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}
@media (max-width: 640px) {
  .perfil-advogado { flex-direction: column; align-items: center; text-align: center; }
  .perfil-advogado .foto { flex-basis: auto; width: 180px; }
}

/* --- 6. Grade de áreas de atuação --------------------------------------- */
.grade-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}
.cartao-area {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--dourado);
  padding: 28px 24px;
  border-radius: var(--raio);
}
.cartao-area h3 {
  font-size: 1.15rem;
  margin: 0 0 12px;
}
.cartao-area p {
  color: var(--texto-suave);
  font-size: 15px;
  margin: 0 0 16px;
}
.cartao-area a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dourado);
  text-decoration: none;
}
.cartao-area a::after {
  content: "→";
  transition: transform .15s;
}
.cartao-area a:hover { color: var(--dourado-escuro); }
.cartao-area a:hover::after { transform: translateX(3px); }
.ver-todas { text-align: center; margin-top: 40px; }

/* --- 7. Como funciona o atendimento -------------------------------------- */
.etapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  counter-reset: etapa;
}
.etapa { text-align: center; padding: 0 12px; }
.etapa .numero {
  width: 46px;
  height: 46px;
  border: 1px solid var(--dourado);
  color: var(--azul-marinho);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
}
.etapa h3 { font-size: 1.05rem; margin: 0 0 8px; }
.etapa p { color: var(--texto-suave); font-size: 14.5px; margin: 0; }

/* --- 8. Chamada final ---------------------------------------------------- */
.chamada-final {
  text-align: center;
  border-top: 1px solid var(--borda);
}
.chamada-final p { max-width: 640px; margin: 0 auto 36px; color: var(--texto-suave); }

/* --- 9. Rodapé ------------------------------------------------------------ */
/* Mesmo cinza-mármore do cabeçalho e do herói, com uma régua dourada no
   topo: um par visual sóbrio para abrir e fechar a página, sem alterar
   nenhuma cor do logo. */
.rodape {
  background: var(--marmore);
  border-top: 3px solid var(--dourado);
  color: var(--texto);
  padding: 48px 0 28px;
  font-size: 14px;
}
/* A logo fica em linha própria, generosa, acima das colunas de texto — assim
   seu tamanho não depende de caber dentro da largura de uma coluna. */
.rodape .logo-rodape-topo { margin-bottom: 24px; }
.rodape .logo-rodape-topo img { height: 46px; width: auto; }

.rodape .grade-rodape {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 210px));
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}
.rodape h4 {
  color: var(--azul-marinho);
  font-family: var(--fonte-corpo);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.rodape a { color: var(--texto); }
.rodape a:hover { color: var(--dourado-escuro); }
.rodape .linha-base {
  border-top: 1px solid var(--marmore-borda);
  padding-top: 20px;
  font-size: 12.5px;
  color: var(--texto-suave);
}
.rodape .linha-base p { margin: 4px 0; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* --- 11. Cabeçalho das páginas internas (herói reduzido) ------------------- */
.hero--pagina { padding: 52px 0 44px; }
.trilha {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dourado-escuro);
  margin: 0 0 10px;
}
.trilha a { color: var(--dourado-escuro); text-decoration: none; }
.trilha a:hover { color: var(--azul-marinho); }

/* --- 12. Texto corrido (artigos, áreas, o escritório) ---------------------- */
.conteudo-texto { max-width: 760px; margin: 0 auto; }
.conteudo-texto h2 { font-size: 1.5rem; margin: 44px 0 16px; }
.conteudo-texto h2:first-child { margin-top: 0; }
.conteudo-texto h3 { font-size: 1.2rem; margin: 30px 0 12px; }
.conteudo-texto p {
  margin: 0 0 18px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.conteudo-texto ul { margin: 0 0 24px; padding-left: 22px; }
.conteudo-texto li { margin-bottom: 9px; }
.conteudo-texto strong { color: var(--azul-marinho); }
.conteudo-texto ol { margin: 0 0 24px; padding-left: 22px; }
.conteudo-texto ol li { margin-bottom: 14px; }

.tabela-comparativa {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font-size: 14.5px;
}
.tabela-comparativa th,
.tabela-comparativa td {
  border: 1px solid var(--borda);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.tabela-comparativa th {
  background: var(--creme);
  color: var(--azul-marinho);
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 15px;
}
.tabela-comparativa td { color: var(--texto-suave); }

/* Link com seta, no mesmo estilo do "Saiba mais" dos cards — reaproveitado
   em outros pontos do site que precisem de uma chamada discreta. */
.link-com-seta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dourado);
  text-decoration: none;
}
.link-com-seta::after { content: "→"; transition: transform .15s; }
.link-com-seta:hover { color: var(--dourado-escuro); }
.link-com-seta:hover::after { transform: translateX(3px); }

/* Lista de referências bibliográficas ao final de um artigo. Fica dentro de
   um <details>, recolhida por padrão, para não alongar a página — só expande
   se o leitor clicar em "Ver referências bibliográficas". */
.detalhes-referencias { margin: 8px 0 40px; }
.detalhes-referencias summary {
  cursor: pointer;
  list-style: none;
}
.detalhes-referencias summary::-webkit-details-marker { display: none; }
.detalhes-referencias[open] summary::after { transform: rotate(90deg); }
.detalhes-referencias .lista-referencias { margin-top: 20px; }

.lista-referencias {
  font-size: 13px;
  color: var(--texto-suave);
  padding-left: 20px;
}
.lista-referencias li { margin-bottom: 10px; }
.lista-referencias a { color: var(--azul-marinho); word-break: break-word; }
.lista-referencias a:hover { color: var(--dourado-escuro); }

/* Caixa de aviso/observação — usada em avisos legais e notas de rodapé de
   texto (política de privacidade, artigos, formulário de contato). */
.aviso {
  background: var(--creme);
  border-left: 3px solid var(--dourado);
  padding: 18px 22px;
  font-size: 14.5px;
  color: var(--texto-suave);
  border-radius: var(--raio);
  margin: 8px 0 24px;
}
.aviso p { margin: 0; font-size: inherit; color: inherit; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.aviso p + p { margin-top: 10px; }

.artigo-meta {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 28px;
}

/* --- 13. Formulário de contato --------------------------------------------- */
.formulario { max-width: 680px; margin: 0 auto; }
.campo { margin-bottom: 22px; }
.campo label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-marinho);
  margin-bottom: 6px;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  color: var(--texto);
  background: var(--branco);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--dourado);
  outline-offset: 1px;
  border-color: var(--dourado);
}
.campo-obrigatorio::after { content: " *"; color: var(--dourado-escuro); }
.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--texto-suave);
}
.campo-checkbox input { width: auto; margin-top: 4px; }
.campo-checkbox label { font-weight: 400; color: var(--texto-suave); margin: 0; }
.formulario .botao { border: none; cursor: pointer; }

.info-contato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
}
.info-contato .bloco h3 { font-size: 1rem; margin: 0 0 8px; }
.info-contato .bloco p { color: var(--texto-suave); font-size: 15px; margin: 0; }

/* Botão do WhatsApp — mostra o ícone e o nome do app, sem expor o número
   na tela (evita ligações não filtradas; a conversa começa sempre por
   mensagem de texto). O link continua abrindo a mesma conversa de sempre. */
.botao-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  font-size: inherit;
}
.botao-whatsapp svg { flex-shrink: 0; width: 20px; height: 20px; }
.botao-whatsapp:hover { color: var(--dourado-escuro); }
.rodape .botao-whatsapp { color: var(--texto); font-weight: 400; }
.rodape .botao-whatsapp:hover { color: var(--dourado-escuro); }

/* --- 14. Notícias ------------------------------------------------------------ */
.aviso-topo {
  background: var(--creme);
  border-bottom: 1px solid var(--borda);
  padding: 18px 0;
  text-align: center;
}
.aviso-topo p {
  margin: 0;
  font-size: 14px;
  color: var(--texto-suave);
  max-width: 720px;
  margin: 0 auto;
}
.lista-noticias { max-width: 780px; margin: 0 auto; }
.item-noticia {
  padding: 22px 0;
  border-bottom: 1px solid var(--borda);
}
.item-noticia h3 { font-size: 1.08rem; margin: 0 0 6px; }
.item-noticia h3 a { color: var(--azul-marinho); text-decoration: none; }
.item-noticia h3 a:hover { color: var(--dourado-escuro); }
.item-noticia .fonte-data {
  font-size: 13px;
  color: var(--texto-suave);
  letter-spacing: .02em;
}
.estado-vazio {
  text-align: center;
  color: var(--texto-suave);
  padding: 20px 0;
}

/* --- 15. Índice de artigos --------------------------------------------------- */
.lista-artigos { max-width: 780px; margin: 0 auto; list-style: none; padding: 0; }
.lista-artigos li {
  padding: 22px 0;
  border-bottom: 1px solid var(--borda);
}
.lista-artigos h3 { font-size: 1.1rem; margin: 0 0 6px; }
.lista-artigos h3 a { color: var(--azul-marinho); text-decoration: none; }
.lista-artigos h3 a:hover { color: var(--dourado-escuro); }
.lista-artigos .data { font-size: 13px; color: var(--texto-suave); }

/* --- 16. Pop-up de confirmação (formulário de contato) --------------------- */
.popup-fundo {
  position: fixed;
  inset: 0;
  background: rgba(24, 34, 56, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
.popup-fundo[hidden] { display: none; }
.popup-caixa {
  background: var(--branco);
  border-top: 3px solid var(--dourado);
  border-radius: var(--raio);
  padding: 36px 32px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(24, 34, 56, .25);
}
.popup-caixa h2 { margin: 0 0 12px; font-size: 1.4rem; }
.popup-caixa p { color: var(--texto-suave); margin: 0 0 24px; }

/* --- 10. Responsivo (celular) --------------------------------------------- */
@media (max-width: 860px) {
  .menu-principal {
    display: none;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--marmore);
    border-bottom: 1px solid var(--marmore-borda);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 18px;
  }
  .menu-principal.aberto { display: flex; }
  .menu-principal a { display: block; padding: 12px 0; border-bottom: 1px solid var(--borda); }
  .botao-menu-mobile { display: block; }
  .hero { padding: 64px 0 56px; }
  section { padding: 52px 0; }
  .rodape .grade-rodape { grid-template-columns: 1fr; justify-content: normal; }
}