/* === estilo.css - EOD Advocacia Empresarial (versão consolidada) === */

/* ----------------------------------
   Fonts
---------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&family=Merriweather:wght@400;700&family=Epilogue:wght@400;700&display=swap');

/* ----------------------------------
   Variáveis
---------------------------------- */
:root{
  --azul: #232342;
  --dourado: #CBA17B;
  --texto: #222222;
  --fundo: #f4f4f4;
  --max-width: 1100px;
  --focus: rgba(203,161,123,0.18);
}

/* ----------------------------------
   Reset / base
---------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Lora','Merriweather', Georgia, serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Container utilitário */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* ----------------------------------
   Header / Navegação
---------------------------------- */
.header { background: var(--azul); position: sticky; top: 0; z-index: 1300; color: #fff; }
.top-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; gap: 12px; position: relative; }

/* Logo (oculto visualmente, mantido para SEO) */
.logo-img {
  display: none !important;
  width: 0; height: 0; overflow: hidden; visibility: hidden;
}
.logo-text {
  font-family: 'Epilogue', Arial, sans-serif; font-weight: 700; text-transform: uppercase; color: #fff;
  font-size: 1.15rem; display: none !important;
}

/* Menu desktop */
.menu { position: relative; margin-left: auto; }
.menu-toggle { display: none; background: transparent; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; padding: 6px; }
.menu-list { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; align-items: center; }
.menu-list li { margin: 0; padding: 0; list-style: none; }
.menu-list a { color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; font-family: 'Epilogue',Arial,sans-serif; padding: 6px 8px; text-transform: uppercase; white-space: nowrap; }

/* Hover dourado */
.menu-list a:hover,
.menu-list a:focus,
.menu-list a:active {
  color: var(--dourado) !important;
  text-decoration: none !important;
}

/* ----------------------------------
   Banner (mantido como está)
---------------------------------- */
.main-banner { 
  width: 100%;
  padding: 40px 0;                 /* base (mobile/tablet) */
  background-image: url('banner.png');
  background-size: cover;          /* cobre a área e elimina faixas */
  background-position: center;
  background-repeat: no-repeat;

  display: flex; justify-content: center; align-items: center;
  z-index: 0;
}

/* ----------------------------------
   Conteúdo geral / headings / texto
---------------------------------- */
.content { padding: 28px 0; color: var(--texto); }
h1, h2, h3 { color: var(--azul); }
h2 { font-family:'Merriweather','Lora',serif; text-align:center; font-size:2rem; margin:0 0 18px 0; line-height:1.15; }
p { font-size: 1rem; margin: 0 0 1rem 0; text-align: justify; }
strong { font-weight: 700; }

/* ----------------------------------
   Seção Fundadora (home)
---------------------------------- */
.section-fundadora { padding: 22px 0; }
.fundadora-info { display: flex; gap: 28px; align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; width: 100%; }
.fundadora-foto { order: 1; flex: 0 0 280px; max-width: 34%; min-width: 160px; height: auto; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.fundadora-texto { order: 2; flex: 1 1 auto; min-width: 0; text-align: justify; }
.fundadora-texto p { margin-bottom: 0.8rem; }

/* ----------------------------------
   Áreas de atuação (home)
---------------------------------- */
.section-atuacao h3 { color: var(--dourado); font-family:'Merriweather','Lora',serif; font-size:1.25rem; margin:12px 0 8px 0; }
.section-atuacao ul { margin-left: 1.2rem; padding-left: 0.6rem; }
.section-atuacao ul li { margin-bottom: 0.45rem; font-size: 1rem; }

/* ----------------------------------
   Cards/Lista de artigos (home ou seção Artigos)
---------------------------------- */
.artigo-item { background: #fff; padding: 18px; border-radius: 8px; margin-bottom: 18px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.artigo-item h3 { margin: 0 0 8px 0; font-size: 1.25rem; color: var(--azul); }
.btn-artigo { background: var(--dourado); color: #fff; padding: 10px 16px; border-radius: 6px; text-decoration: none; font-weight: 700; }

/* ----------------------------------
   Formulário de contato
---------------------------------- */
.section-contato form { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.form-group label { font-weight: 700; color: var(--azul); font-size: 1rem; }
.form-group input, .form-group textarea { padding: 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 1rem; width: 100%; font-family: inherit; }
.form-group textarea { min-height: 120px; resize: vertical; }
.section-contato button { background: var(--dourado); color: var(--azul); padding: 12px; border-radius: 6px; border: none; font-weight: 700; cursor: pointer; font-size: 1.05rem; }

/* ----------------------------------
   Footer
---------------------------------- */
.footer { background: var(--azul); color: #fff; text-align: center; padding: 20px 16px; margin-top: 24px; }
.footer .slogan { color: var(--dourado); margin-bottom: 8px; font-style: italic; }
.footer a { color: #fff !important; text-decoration: none !important; }

/* Centralização garantida no rodapé */
.footer, footer {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important;
}

/* ----------------------------------
   Acessibilidade
---------------------------------- */
a:focus, button:focus { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ----------------------------------
   Responsivo: Mobile
---------------------------------- */
@media (max-width: 768px) {
  .top-bar { padding: 12px 16px; justify-content: center; }
  .logo-text { font-size: 1rem; }
  .menu-toggle { display: inline-block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 1320; }
  .menu-list { display: none; }

  /* Painel do menu (aberto com .open) */
  .menu.open .menu-list {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: calc(100% + 8px); right: 12px; left: auto;
    min-width: 220px; max-width: calc(100vw - 24px);
    background: var(--azul);
    padding: 6px 0; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    z-index: 1315; margin: 0; list-style: none;
  }
  .menu.open .menu-list li { margin: 0; padding: 0; display: block; width: 100%; list-style: none; }
  .menu.open .menu-list a {
    display: block !important; padding: 12px 20px !important; color: #fff !important;
    text-align: left !important; white-space: nowrap !important; letter-spacing: 0.02em; line-height: 1.35;
  }
  .menu.open .menu-list a:hover,
  .menu.open .menu-list a:focus,
  .menu.open .menu-list a:active { color: var(--dourado) !important; }

  /* Fundadora */
  .fundadora-info { flex-direction: column; align-items: center; gap: 10px; }
  .fundadora-foto { width: 160px; max-width: 60%; min-width: 120px; align-self: center; }

  /* Corpo */
  h2 { font-size: 1.4rem; }
  p { font-size: 0.98rem; line-height: 1.5; text-align: left; }

  /* Espaçamento lateral global no mobile */
  body { padding-left: 15px; padding-right: 15px; text-align: justify; }
}

/* ----------------------------------
   Responsivo: Tablets (médios)
---------------------------------- */
@media (min-width: 769px) and (max-width: 1049px) {
  .top-bar { justify-content: flex-start !important; gap: 12px !important; }
  .menu { margin-left: 0 !important; }
  .menu-list { gap: 8px !important; flex-wrap: nowrap !important; margin-left: 0 !important; }
  .menu-list li { margin: 0 !important; padding: 0 !important; }
  .menu-list a { padding: 6px 2px !important; font-size: 0.9rem !important; }
}

/* ----------------------------------
   Responsivo: Desktop
---------------------------------- */
@media (min-width: 1050px) {
  html { font-size: 19px; }
  .top-bar { justify-content: flex-start; }
  .menu { margin-left: auto; order: 3; }
  .menu-list { gap: 32px; flex-wrap: nowrap; white-space: nowrap; }
  .menu-list li { display: inline-block; margin-left: 18px; }
  .menu-list a { white-space: nowrap; font-size: 1.05rem; padding: 8px 12px; }
  p, li, .fundadora-texto p, .section-atuacao ul li, .artigo-item p { font-size: 1.05rem; line-height: 1.7; }

  /* Ajuste de altura do banner somente em desktop */
  .main-banner { padding: 170px 0; }
}

/* Intermediário grande (ex.: 13.3" 1440x900) */
@media (min-width: 1050px) and (max-width: 1440px) {
  .main-banner { padding: 130px 0; background-position: center center; }
}

/* Ajustes banner para tablets */
@media (max-width: 1024px) {
  .main-banner { padding: 48px 0; background-position: center center; }
}

/* Ajustes banner para mobile (reforço) */
@media (max-width: 768px) {
  .main-banner { padding: 60px 0; background-position: center center; }
}

/* Proteções */
.header *, .top-bar * { float: none !important; clear: none !important; }
.header { z-index: 1300; }

/* ----------------------------------
   BLOG — INDEX (cards) 
---------------------------------- */

/* Grid principal dos previews */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 20px 0 36px 0;
  align-items: stretch;
}

/* Card individual */
.preview {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(35,35,66,0.06);
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column; height: 100%;
}

/* Imagem do card (tag <img>) */
.preview img {
  width: 100%; height: 180px; object-fit: cover; display: block;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* Título do card */
.preview h3 {
  font-family: 'Epilogue', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 14px 16px 6px 16px;
  color: var(--azul);
  line-height: 1.25; letter-spacing: 0.01em;
}
.preview h3 a { color: inherit; text-decoration: none; }
.preview h3 a:hover, .preview h3 a:focus { color: var(--dourado); text-decoration: underline; text-underline-offset: 3px; }

/* Descrição */
.preview p {
  font-family: 'Lora', Georgia, serif;
  margin: 0 16px 16px 16px;
  color: #444;
  font-size: 1rem;
  line-height: 1.6;
  flex-grow: 1;
  text-align: left;
}

/* Botão/Link de leitura */
.preview .btn-artigo, .preview a.read-more {
  display: inline-block;
  margin: 12px 16px 18px 16px;
  background: var(--azul);
  color: #fff !important;
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Hover geral do card */
.preview:hover, .preview:focus-within { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(35,35,66,0.12); }

/* Responsivo dos cards */
@media (max-width: 480px) {
  .preview img { height: 140px; }
  .preview h3 { font-size: 1rem; margin: 12px; }
  .preview p { margin: 0 12px 12px 12px; font-size: 0.97rem; }
  .blog-grid { gap: 14px; }
}
@media (min-width: 481px) and (max-width: 899px) {
  .preview img { height: 160px; }
  .preview h3 { font-size: 1.03rem; }
}

/* Foco visível nos links do card */
.preview a:focus { outline: 3px solid rgba(203,161,123,0.14); outline-offset: 3px; }

/* ----------------------------------
   BLOG — ARTIGOS (páginas individuais)
   (Somente classes usadas nos artigos)
---------------------------------- */

/* Largura e tipografia do corpo do artigo */
article.post {
  /* largura responsiva (nunca passa de 960px) */
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 20px 0;

  /* tipografia base unificada entre os 3 artigos */
  color: #343a40;
  line-height: 1.72;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem);
}

/* Título do artigo */
article.post h1 {
  color: var(--azul);
  line-height: 1.22;
  font-weight: 800;
  margin: 0 0 14px 0;
  font-size: clamp(1.85rem, 1.3rem + 1.45vw, 2.40rem);
}

/* Autor + data (dourado) com respiro */
article.post .autor-data {
  margin: 12px 0 22px 0;
  color: var(--dourado);
  font-size: 0.98rem;
  letter-spacing: .2px;
  font-weight: 500;
  font-family: 'Epilogue', Arial, sans-serif;
}
article.post .autor-data a,
article.post .autor-data strong {
  color: var(--dourado);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--dourado) 55%, transparent);
}
article.post .autor-data a:hover { color: var(--azul); border-bottom-color: var(--azul); }

/* Imagem de capa do artigo */
article.post .cover img{
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 1200 / 630;   /* mantém proporção visual */
  object-fit: cover;
  margin: 18px auto 18px;
  border-radius: 12px;
}

/* Subtítulos (sem barras, sem numeração) */
article.post h2 {
  color: var(--azul);
  font-weight: 800;
  line-height: 1.28;
  margin: 30px 0 10px 0;
  font-size: clamp(1.28rem, 1.05rem + 0.8vw, 1.70rem);
}
article.post h3 {
  color: var(--azul);
  font-weight: 700;
  line-height: 1.28;
  margin: 22px 0 8px 0;
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.38rem);
}

/* Listas dentro do artigo */
article.post ul, article.post ol { padding-left: 1.2rem; margin: 10px 0 16px; }
article.post li { margin: 6px 0; }

/* Navegação Anterior/Próximo no rodapé do artigo */
.post-nav{
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e7eb;
}
.post-nav a{
  color: var(--azul);
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}
.post-nav a:hover{ color: var(--dourado); text-decoration: underline; }
.post-nav .prev-post { margin-right: auto; }
.post-nav .next-post { margin-left: auto; }

/* Microajustes */
@media (max-width: 768px){
  .container{ padding: 0 12px; }
  article.post{ line-height: 1.7; }
  article.post .cover img{ border-radius: 10px; }
}
@media (min-width: 1400px){
  article.post{ font-size: clamp(1.06rem, 0.95rem + 0.45vw, 1.22rem); }
}

/* === Fim do arquivo === */
/* ==== HOTFIX: capas dos cards do blog visíveis em qualquer markup ==== */

/* 1) Quando a capa é um <img> dentro do card */
.preview > img,
.preview img.preview-img,     /* se usar class preview-img no <img> */
.preview .thumb img,          /* se houver um wrapper .thumb */
.preview .cover img {         /* fallback: alguns snippets usam .cover */
  display: block !important;
  width: 100% !important;
  height: 200px !important;   /* ajuste fino: 180–220px se preferir */
  object-fit: cover !important;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  opacity: 1 !important;
  visibility: visible !important;
}

/* 2) Quando a capa é um bloco com background-image */
.preview-img:not(img),       /* <a/div class="preview-img" style="background-image:..."> */
.preview .thumb,             /* wrapper que recebe o background */
.preview .cover {            /* fallback */
  display: block !important;
  width: 100% !important;
  height: 210px !important;  /* ajuste fino: combine com o valor acima */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 3) Garante que nenhuma regra genérica esconda imagens do card */
.preview img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Navegação entre artigos (Anterior / Próximo) */
.post-nav{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:40px 0 8px;
  padding-top:20px;
  border-top:1px solid #e5e7eb;
}

.post-nav a{
  flex:1 1 0;
  max-width:48%;             /* limita a largura de cada lado */
  display:block;             /* permite comportamento de bloco */
  font-weight:700;
  color:#232342;
  text-decoration:none;
  line-height:1.35;
  white-space:normal;        /* garante quebra de linha */
  overflow-wrap:anywhere;    /* quebra palavras longas, se preciso */
  word-break:normal;         /* mantém quebra “natural” */
}

.post-nav a:hover{
  color:#CBA17B;
  text-decoration:underline;
}

/* opcional: deixando o tamanho agradável em telas pequenas */
@media (max-width: 600px){
  .post-nav a{
    max-width:100%;
    font-size:clamp(0.98rem, 0.92rem + 0.4vw, 1.02rem);
  }
}
/* ===== Ajustes visuais finais ===== */

/* Espaçamento entre a navegação de artigos/páginas e a próxima seção */
.post-nav,
.pagination {
  margin-bottom: 60px; /* dá respiro entre o bloco e a seção seguinte */
}

/* Garante distância extra entre seções consecutivas */
section + section {
  margin-top: 60px;
}

/* Espaço adicional antes do formulário de contato (Fale Conosco) */
#fale-conosco,
#contato {
  padding-top: 45px;
}
/* ===== Navegação por âncoras (menu) ===== */
html { scroll-behavior: smooth; }

/* Altura do cabeçalho fixo (ajuste se mudar o header) */
:root { --header-offset: 96px; } /* 96px costuma ficar perfeito para desktop; teste 88–112px se precisar */

/* Garante que o título da seção não seja cortado ao chegar pela âncora */
section[id] { scroll-margin-top: var(--header-offset); }

/* --- Espaço entre a seção "Áreas de Atuação" e "Artigos Publicados" --- */
.section-área de atuação{
  margin-bottom: 80px; /* você pode ajustar: 60px, 80px, 100px conforme preferir */
}

/* --- Espaço entre "Áreas de Atuação" e "Artigos Publicados" --- */
.section-atuacao {
  margin-bottom: 100px; /* ajuste conforme desejar: 80px, 100px, 120px */
}

/* --- Espaço entre "Nossos Valores" e "Artigos Publicados" --- */
.section-valores {
  margin-bottom: 100px; /* cria um respiro entre os blocos */
}
/* ====== Espaçamentos Responsivos entre Seções ====== */

/* 1️⃣ Espaço entre “Nossos Valores” e “Artigos Publicados” */
.section-valores {
  margin-bottom: clamp(28px, 3vw, 76px);
  /* 28px em telas pequenas, 3vw em médias, até 96px em grandes */
}

/* 2️⃣ Espaço entre “Áreas de Atuação” e “Artigos Publicados” */
.section-atuacao {
  margin-bottom: clamp(28px, 3vw, 80px);
  /* cresce suavemente conforme a largura da tela */
}

/* 3️⃣ Ajuste adicional para suavizar o fluxo em dispositivos menores */
@media (max-width: 640px) {
  .section-valores,
  .section-atuacao {
    margin-bottom: 56px; /* mantém boa proporção no mobile */
  }
}
/* ===== PATCH EOD (adicione no final do arquivo) ===== */

/* 1) Header visível sem mexer no layout existente */
.header{
  position: sticky; /* fica preso no topo quando rola */
  top: 0;
  z-index: 9999;      /* acima do conteúdo */
}

/* 2) Âncoras não cortam o título ao clicar no menu
      (usa um valor seguro; não depende de JS nem muda seu layout) */
section[id]{
  scroll-margin-top: 96px; /* ajuste fino do offset do menu */
}

/* 3) Espaçamentos RESPONSIVOS entre blocos (sem afetar o resto) */
#nossos-valores{
  /* margem extra abaixo, adaptando ao tamanho de tela */
  margin-bottom: clamp(48px, 6vw, 120px);
}

.section-atuacao{
  /* garante respiro acima e abaixo da área de atuação */
  margin-top: clamp(40px, 5vw, 100px);
  margin-bottom: clamp(40px, 5vw, 100px);
}

#blog-previews{
  /* respiro antes dos cards do blog e antes do contato */
  margin-top: clamp(48px, 6vw, 120px);
  padding-bottom: clamp(32px, 5vw, 96px);
}

/* 4) Espaço extra entre BLOG e “Fale Conosco” (quando não houver muito conteúdo) */
#blog-previews + .section-contato{
  margin-top: clamp(40px, 6vw, 120px);
}

/* 5) Links de navegação longos nos artigos quebram linha com elegância */
.post-nav a{
  display:inline-block;
  max-width:48%;
  line-height:1.4;
  word-wrap:break-word;
}
/* ===== PATCH FIXO MENU EOD (coloque no final do arquivo) ===== */

/* Garante que o cabeçalho fique visível em TODAS as seções */
.header, .top-bar {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: #0b0b33; /* mantém a cor institucional */
}

/* Remove qualquer ocultamento acidental */
body, html {
  overflow-x: hidden;
}

/* Quando rolar, mantém espaço de respiro */
section[id] {
  scroll-margin-top: 110px; /* compensa a altura do menu fixo */
}

/* Espaçamentos adaptáveis entre seções — responsivos */
.section-valores,
.section-atuacao,
#blog-previews {
  margin-top: clamp(48px, 6vw, 120px);
  margin-bottom: clamp(48px, 6vw, 120px);
}

/* Títulos das seções sempre com distância confortável */
.section-valores h2,
.section-atuacao h2,
#blog-previews h2 {
  margin-top: 0;
  padding-top: clamp(24px, 4vw, 60px);
}

/* Evita colar a seção “Fale Conosco” ao blog */
#blog-previews + .section-contato {
  margin-top: clamp(48px, 7vw, 140px);
}
/* ==== UNIFICA O FUNDO DO MENU COM O BANNER (remove a “faixa”) ==== */
:root{
  --brand-navy: #232342; /* azul institucional do herói */
}

html, body {
  margin: 0; /* evita 1px de gap do user agent */
}

.header,
.top-bar {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: var(--brand-navy) !important; /* cor idêntica ao banner */
  border-bottom: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Corrige o banner: mantém a imagem original e apenas iguala a cor */
.main-banner {
  background-color: var(--brand-navy) !important; /* não apaga a imagem */
  min-height: clamp(260px, 36vw, 520px); /* altura responsiva */
  margin-top: 0;
}

/* Remove linha ou sombra decorativa sob o header */
.header::after,
.top-bar::after {
  content: none !important;
}

/* Garante que títulos de seções não fiquem encobertos pelo menu */
section[id] {
  scroll-margin-top: 110px;
}

/* Espaçamentos adaptáveis entre as seções */
.section-valores,
.section-atuacao,
#blog-previews {
  margin-top: clamp(48px, 6vw, 120px);
  margin-bottom: clamp(48px, 6vw, 120px);
}

/* Títulos das seções sempre com respiro visual */
.section-valores h2,
.section-atuacao h2,
#blog-previews h2 {
  margin-top: 0;
  padding-top: clamp(24px, 4vw, 60px);
}

/* Evita colar o “Fale Conosco” ao blog */
#blog-previews + .section-contato {
  margin-top: clamp(48px, 7vw, 140px);
}
/* ==== Banner responsivo (altura e render do logo) ==== */
.main-banner{
  /* altura responsiva enxuta */
  min-height: clamp(160px, 22vw, 340px) !important;

  /* garante que o logo sempre caiba e fique centralizado */
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important; /* mostra o logo inteiro */
  /* se seu banner usar imagem “full” em vez de logo puro, troque por: background-size: cover; */
}

/* Ajustes finos por breakpoint (opcional, deixa bem previsível) */
@media (min-width: 1400px){
  .main-banner{ min-height: 300px !important; }
}
@media (max-width: 1024px){
  .main-banner{ min-height: 240px !important; }
}
@media (max-width: 640px){
  .main-banner{ min-height: 180px !important; }
}
/* ==== Banner responsivo ajustado (altura moderada e proporcional) ==== */
.main-banner{
  background-color: var(--brand-navy) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;

  /* Altura ajustada — agora mais enxuta */
  min-height: clamp(120px, 18vw, 220px) !important;

  /* Alinha o conteúdo caso exista texto ou logo dentro do banner */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

/* Ajustes extras de segurança para telas muito grandes ou pequenas */
@media (min-width: 1600px){
  .main-banner{ min-height: 240px !important; }
}
@media (max-width: 1024px){
  .main-banner{ min-height: 180px !important; }
}
@media (max-width: 640px){
  .main-banner{ min-height: 140px !important; }
}
/* ==== Ajustes finais de responsividade e espaçamento (EOD Advocacia) ==== */

/* Banner: altura proporcional, adaptável a telas diferentes */
.main-banner {
  background-color: var(--brand-navy) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;

  min-height: clamp(80px, 10vw, 150px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

@media (min-width: 1600px) {
  .main-banner { min-height: 220px !important; }
}
@media (max-width: 1024px) {
  .main-banner { min-height: 160px !important; }
}
@media (max-width: 640px) {
  .main-banner { min-height: 130px !important; }
}

/* Corrige corte do menu hamburguer no mobile */
.menu-toggle {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  padding: 6px 8px !important;
  font-size: 1.4rem !important;
  z-index: 9999 !important;
}

/* Evita sobreposição do menu ao rolar */
.header, .top-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ===== Espaçamentos entre seções ===== */
.section-fundadora,
.section-valores,
.section-atuacao,
#blog-previews {
  margin-top: clamp(30px, 3vw, 60px);
  margin-bottom: clamp(20px, 2vw, 40px);
}

/* Distância extra entre valores → atuação → artigos */
.section-valores {
  margin-bottom: clamp(40px, 4w, 70px);
}
.section-atuacao {
  margin-top: clamp(20px, 2vw, 50px);
  margin-bottom: clamp(30px, 3vw, 60px);
}

/* Melhora visual da rolagem para âncoras (não corta título sob o menu) */
html {
  scroll-padding-top: 100px;
}
@media (max-width: 768px) {
  html {
    scroll-padding-top: 80px;
  }
}
/* ==== AJUSTE FINAL — Espaçamentos refinados e responsivos EOD ==== */

/* Mantém o banner e menu exatamente como estão */
.main-banner {
  background-color: var(--brand-navy) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  min-height: clamp(100px, 15vw, 200px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

/* Corrige corte do menu hamburguer no mobile */
.menu-toggle {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  padding: 6px 8px !important;
  font-size: 1.4rem !important;
  z-index: 9999 !important;
}

/* ===== Espaçamentos entre seções (versão otimizada) ===== */

/* Espaço entre blocos principais */
.section-fundadora,
.section-valores,
.section-atuacao,
#blog-previews {
  margin-top: clamp(20px, 2vw, 40px);
  margin-bottom: clamp(24px, 3vw, 50px);
}

/* Transição suave entre “Nossos Valores” → “Áreas de Atuação” */
.section-valores {
  margin-bottom: clamp(30px, 3vw, 56px);
}

/* Transição suave entre “Áreas de Atuação” → “Artigos Publicados” */
.section-atuacao {
  margin-top: clamp(24px, 2.5vw, 50px);
  margin-bottom: clamp(28px, 3vw, 56px);
}

/* Espaço adequado antes do “Fale Conosco” */
#blog-previews + .section-contato {
  margin-top: clamp(36px, 4vw, 80px);
}

/* Melhora da rolagem das âncoras */
html {
  scroll-padding-top: 96px;
}

@media (max-width: 768px) {
  html { scroll-padding-top: 80px; }
  .section-fundadora,
  .section-valores,
  .section-atuacao,
  #blog-previews {
    margin-top: 20px;
    margin-bottom: 36px;
  }
}
/* ==== EOD — Compactação dos espaçamentos entre seções (override) ==== */
/* Cole NO FIM do arquivo */

section + section{
  /* espaço padrão entre qualquer seção consecutiva */
  margin-top: clamp(16px, 1.6vw, 28px) !important;
}

/* Nossos Valores */
#nossos-valores,
.section-valores{
  margin-top: clamp(12px, 1.2vw, 24px) !important;
  margin-bottom: clamp(18px, 1.8vw, 32px) !important;
}
.section-valores h2{
  margin-bottom: 10px !important;
}

/* Áreas de Atuação */
#areas-de-atuacao,
.section-atuacao{
  margin-top: clamp(14px, 1.4vw, 20px) !important;
  margin-bottom: clamp(20px, 2vw, 30px) !important;
}
.section-atuacao h2{
  margin-bottom: 10px !important;
}

/* Artigos publicados (grid do blog na home) */
#blog-previews{
  margin-top: clamp(10px, 1.6vw, 20px) !important;
  margin-bottom: clamp(12px, 2.2vw, 30px) !important;
}
#blog-previews h2{
  margin-bottom: 10px !important;
}

/* Um pouco menos de “respiro” no container geral da página */
.content{
  padding-top: clamp(10px, 1vw, 13px) !important;
  padding-bottom: clamp(10px, 1.4vw, 20px) !important;
}
/* ==== EOD — Compactação FOCADA entre Fundadora / Valores / Áreas ==== */
/* Cole NO FIM do arquivo */

:root{ --gap-tight: clamp(8px, 0.9vw, 18px); }

/* 0) neutraliza margens internas que criam “barrigas” nas bordas das seções */
.section-fundadora > *:last-child,
.section-valores   > *:last-child,
.section-atuacao   > *:last-child{
  margin-bottom: 0 !important;
}
.section-valores   > *:first-child,
.section-atuacao   > *:first-child{
  margin-top: 0 !important;
}

/* 1) Fundadora -> Nossos Valores */
#fundadora,
.section-fundadora{
  margin-bottom: var(--gap-tight) !important;
  padding-bottom: clamp(6px, 0.8vw, 12px) !important;
}
#nossos-valores,
.section-valores{
  margin-top:  var(--gap-tight) !important;
}

/* 2) Nossos Valores -> Áreas de Atuação */
#nossos-valores,
.section-valores{
  margin-bottom: var(--gap-tight) !important;
  padding-bottom: clamp(6px, 0.8vw, 12px) !important;
}
#areas-de-atuacao,
.section-atuacao{
  margin-top:  var(--gap-tight) !important;
}

/* 3) Tiramos gordura dos títulos (muitas vezes é o que “estica” o vão) */
#nossos-valores h2,
.section-valores h2,
#areas-de-atuacao h2,
.section-atuacao h2{
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* 4) E se ainda houver algum “empuxo” vindo de listas e parágrafos na borda: */
#nossos-valores > p:last-child,
#nossos-valores > ul:last-child,
#nossos-valores > ol:last-child,
#areas-de-atuacao > p:first-child,
#areas-de-atuacao > ul:first-child,
#areas-de-atuacao > ol:first-child{
  margin-top: 0 !important;
}
/* === EOD — Compactação FINAL entre Fundadora / Valores / Áreas === */
/* cole no FIM do arquivo */

:root{
  --gap-xxs: clamp(8px, 0.7vw, 16px);
  --gap-xs:  clamp(10px, 1vw, 20px);
}

/* 0) derruba qualquer padding vertical nas três seções */
section.section-fundadora,
section#nossos-valores.section-valores,
section#areas-de-atuacao.section-atuacao{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 1) espaçamentos bem curtos entre elas */
section.section-fundadora{               /* Fundadora -> Valores */
  margin-bottom: var(--gap-xxs) !important;
}
section#nossos-valores.section-valores{
  margin-top:  var(--gap-xxs) !important;
  margin-bottom: var(--gap-xxs) !important;   /* Valores -> Áreas */
}
section#areas-de-atuacao.section-atuacao{
  margin-top:  var(--gap-xxs) !important;
  margin-bottom: var(--gap-xxs) !important;
}

/* 2) títulos sem “barriga” extra */
section#nossos-valores.section-valores h2,
section#areas-de-atuacao.section-atuacao h2{
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* 3) neutraliza o espaçamento global exagerado entre QUALQUER seção */
section + section{
  margin-top: var(--gap-xs) !important;  /* substitui os 60px */
}

/* 4) dá uma enxugada no respiro do wrapper geral */
.content{
  padding-top: var(--gap-xs) !important;
  padding-bottom: var(--gap-xs) !important;
}
/* === EOD — Ajuste final de espaçamento entre seções === */
/* Cole NO FIM do arquivo */

:root{
  --gap-fino: clamp(10px, 1vw, 22px);
  --gap-medio: clamp(16px, 2vw, 28px);
}

/* 1️⃣  Espaço entre “Quem Somos” e “Fundadora” */
#quem-somos,
.section-quem-somos{
  margin-bottom: var(--gap-medio) !important;
}
#fundadora,
.section-fundadora{
  margin-top: var(--gap-medio) !important;
}

/* 2️⃣  Reduz o espaço entre “Artigos Publicados” e “Fale Conosco” */
#blog-previews{
  margin-bottom: var(--gap-fino) !important;
}
#fale-conosco,
.section-contato{
  margin-top: var(--gap-fino) !important;
  padding-top: var(--gap-fino) !important;
}

/* 3️⃣  Evita que qualquer regra anterior volte a inflar margens */
section + section{
  margin-top: var(--gap-medio) !important;
}
/* === EOD — Ajuste cirúrgico de espaçamentos (final do arquivo) === */

/* 1) Respiro entre “Quem Somos” → “Fundadora”
   (funciona se o id estiver na section OU no h2) */
#quem-somos,
h2#quem-somos {
  margin-bottom: clamp(10px, 1.2vw, 20px) !important;
}

#fundadora,
.section-fundadora,
h2#fundadora {
  margin-top: clamp(16px, 1.8vw, 28px) !important;
  padding-top: clamp(6px, 0.6vw, 10px) !important;
}

/* 2) Aproximar “Artigos publicados” → “Fale Conosco” */
#blog-previews {
  margin-bottom: clamp(8px, 1vw, 14px) !important;
}

/* a sua regra antiga inflava o vão; reduzimos aqui */
.pagination {
  margin-bottom: clamp(8px, 1vw, 14px) !important;
}

#blog-previews + #fale-conosco,
#blog-previews + .section-contato,
#fale-conosco,
.section-contato {
  margin-top: clamp(8px, 1vw, 14px) !important;
  padding-top: clamp(6px, 0.6vw, 10px) !important;
}

/* 3) Corta qualquer “gordura” interna dos blocos nas bordas */
.section-fundadora > *:last-child,
.section-valores   > *:last-child,
.section-atuacao   > *:last-child {
  margin-bottom: 0 !important;
}
.section-fundadora > *:first-child,
.section-valores   > *:first-child,
.section-atuacao   > *:first-child {
  margin-top: 0 !important;
}
/* === EOD — CORREÇÃO FINAL E DEFINITIVA DOS ESPAÇAMENTOS === */

/* Remove totalmente as margens herdadas entre seções */
body section + section {
  margin-top: 0 !important;
}

/* Espaço ajustado entre “Quem Somos” e “Fundadora” */
#quem-somos,
.section-quem-somos {
  margin-bottom: 52px !important;
}

#fundadora,
.section-fundadora {
  margin-top: 42px !important;
  padding-top: 10px !important;
}

/* Reduz o vão entre “Artigos Publicados” e “Fale Conosco” */
#blog-previews,
.section-blog {
  margin-bottom: 30px !important;
  padding-bottom: 0 !important;
}

.pagination {
  margin-bottom: 6px !important;
}

#fale-conosco,
.section-contato {
  margin-top: 40px !important;
  padding-top: 30px !important;
}

/* Neutraliza qualquer margem adicional residual */
#blog-previews + #fale-conosco,
#blog-previews + .section-contato {
  margin-top: 32px !important;
}
/* === FIX CIRÚRGICO — Fundadora ⇄ Nossos Valores e Blog ⇄ Fale Conosco === */

/* 1) Fundadora → Nossos Valores: tira o “colchão” e encosta com respiro curto */
.section-fundadora { 
  padding-bottom: 8px !important;         /* reduz o respiro da fundadora */
}
.section-fundadora *:last-child { 
  margin-bottom: 0 !important;             /* evita margem do último parágrafo/lista */
}
/* quando a seção seguinte for “Nossos Valores”, zera o espaçamento entre sections */
.section-fundadora + .section-valores {
  margin-top: 8px !important;              /* só 8px entre as seções */
  padding-top: 0 !important;               /* remove padding alto da próxima seção */
}
/* garante que o título não adicione “barriga” extra */
.section-valores > h2:first-child {
  margin-top: 0 !important;
}

/* 2) Artigos publicados → Fale Conosco: aproxima sem grudar */
#blog-previews { 
  margin-bottom: 10px !important;          /* menos espaço após os cards/paginação */
}
.pagination { 
  margin-bottom: 8px !important;           /* baixa o respiro da paginação */
}
#blog-previews + #fale-conosco,
#blog-previews + .section-contato {
  margin-top: 10px !important;             /* aproxima o formulário */
  padding-top: 6px !important;
}

/* 3) Neutraliza qualquer regra global que tente “reabrir” o vão nessa dupla */
.section-fundadora + section,
#blog-previews + section {
  margin-top: 0 !important;
}
/* === FIX DEFINITIVO: Fundadora ⇄ Nossos Valores (override por ID) === */

/* tira qualquer respiro sobrando no final da seção Fundadora */
#fundadora { 
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: flow-root; /* evita colapso de margens */
}
#fundadora .fundadora-texto > *:last-child { 
  margin-bottom: 0 !important; 
}
#fundadora .fundadora-info { 
  margin-bottom: 0 !important; 
}

/* encosta a seção Nossos Valores sem “barriga” no topo */
#nossos-valores {
  padding-top: 0 !important;
  margin-top: 0 !important;
  display: flow-root; /* evita colapso de margens com o h2 */
}
#nossos-valores > h2:first-child { 
  margin-top: 0 !important; 
}

/* regra cirúrgica só quando Nossos Valores vem logo após Fundadora */
#fundadora + #nossos-valores { 
  margin-top: 0 !important; 
  padding-top: 0 !important; 
}
/* ==== FIX: hamburger não fica cortado no mobile ==== */
@media (max-width: 768px){
  /* garante altura e respiro no topo (iOS safe-area) */
  .header{
    padding-top: max(env(safe-area-inset-top), 0px);
  }
  .top-bar{
    min-height: 56px;           /* 56–60px resolve em todas as telas */
    padding: 10px 16px;
  }
  /* botão com caixa própria (não “gruda” no topo) */
  .menu-toggle{
    display: inline-flex !important;
    align-items: center; 
    justify-content: center;
    width: 40px; 
    height: 40px;
    padding: 0;                 /* evita que o ícone estoure a altura */
    line-height: 1;
    position: absolute;
    right: max(16px, env(safe-area-inset-right)); 
    top: 50%;
    transform: translateY(-50%);
    z-index: 1320;
  }
}
/* ==== Banner principal (logo centralizado) ==== */
.main-banner {
  width: 100%;
  height: 90px; /* altura ajustada para desktop */
  background-color: #232342; /* cor institucional azul escuro */
  background-image: url('banner.png'); /* caminho correto */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /* preserva proporção do logo */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Versão mobile */
@media (max-width: 700px) {
  .main-banner {
    height: 30px;
    background-size: 70%; /* reduz o logo em telas pequenas */
  }
}
/* --- FIX DEFINITIVO ALTURA DO BANNER (coloque no FIM do arquivo) --- */
.main-banner{
  height: 250px !important;         /* desktop/notebook */
  min-height: 0 !important;         /* neutraliza min-height antigos */
  padding-top: 0 !important;        /* evita altura por padding */
  padding-bottom: 0 !important;
  background-size: contain !important;
  background-position: center center !important;
}

/* Mobile */
@media (max-width: 700px){
  .main-banner{
    height: 120px !important;        /* ajuste real de altura no mobile */
    min-height: 0 !important;       /* garante que nada expanda */
    background-size: 70% !important;
  }
}

/* Mobile pequeno (opcional) */
@media (max-width: 420px){
  .main-banner{
    height: 74px !important;
  }
}