/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: 'Helvetica Neue', sans-serif;
}

/* BLOCO 2: TOPO DO SITE */
.top-header {
  background-color: #ffffff;
  padding: 8px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.top-header .container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.logo img {
  height: auto;
  width: 180px;
  max-width: 100%;
}

.contact-info {
  display: flex;
  gap: 20px;
}

.contact-link {
  color: #54595f;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-link i {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .top-header .container {
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .logo img {
    width: 300px;
    margin-bottom: 4px;
  }

  .contact-info {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 64px;
    margin-top: 4px;
  }

  .contact-link .text {
    display: none;
  }

  .contact-info a:first-child {
    margin-bottom: 0;
  }
}

/* BLOCO 1: BANNER PRINCIPAL */
.hero-banner {
  background-image: url('../images/banner.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 1000px;
}

.hero-title {
  font-size: 3.8rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
  line-height: 1.2;
  color: #ffffff;
}

.divider {
  width: 100%;
  max-width: 1400px;
  height: 3px;
  background-color: #bfa75e;
  margin: 20px auto;
  border-radius: 4px;
}

.hero-subtitle {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 2rem;
  line-height: 1.4;
}

.btn-wrapper {
  display: inline-block;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  background-color: #009E16;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.btn-whatsapp i {
  font-size: 1.2rem;
}

.btn-wrapper:hover .btn-whatsapp,
.btn-whatsapp.active {
  background-color: #007a11;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (max-width: 768px) {
  .hero-banner {
    min-height: 68vh;
  }

  .hero-overlay {
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 1.3rem;
  }

  .btn-whatsapp {
    font-size: 0.95rem;
    padding: 10px 20px;
  }

  .divider {
    max-width: 360px;
  }
}

/* BLOCO 3: ÁREAS DE ATUAÇÃO */
.atuacao-container {
  background-color: #f2f2f2;
  padding: 60px 20px;
  text-align: center;
}

.atuacao-titulo {
  font-size: 2.1rem;
  margin-bottom: 40px;
  color: #000;
  text-align: center;
}

.atuacao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  max-width: 1250px;
  margin: 0 auto;
}

.atuacao-item {
  background: transparent;
  padding: 10px;

  /* estado inicial (desktop) */
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.7s ease, opacity 0.7s ease; /* ajuste de velocidade */
}

.atuacao-item.active {
  /* estado final */
  opacity: 1;
  transform: translateY(0);
}

.atuacao-item img {
  width: 112px;
  height: auto;
  margin-bottom: 16px;
}

.atuacao-item h3 {
  color: #54595f;
  font-size: 1.25rem;
  margin-bottom: 14px;
}

.atuacao-item p {
  text-align: justify;
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 347px;
  margin: 0 auto;
  color: #54595f;
}

.atuacao-item p strong {
  font-weight: bold;
}

.atuacao-botao-wrapper {
  margin-top: 50px;
}

@media (max-width: 768px) {
  .atuacao-grid {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    scroll-snap-type: none;
    gap: 40px;
    padding-bottom: 10px;
  }

  .atuacao-item img {
    width: 120px;
  }

  .atuacao-titulo {
    font-size: 1.55rem;
    margin-bottom: 30px;
  }

  .atuacao-item p {
    font-size: 0.96rem;
  }

  .atuacao-botao-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }

  /* Mobile: entra da esquerda */
@media (max-width: 768px) {
  .atuacao-item {
    transform: translateX(-60px);
    transition: transform 0.85s ease, opacity 0.85s ease; /* mobile um pouco mais suave */
  }
  .atuacao-item.active {
    transform: translateX(0);
  }
}

}

/* BLOCO 4: ADVOGADOS */
.advogados-container {
  background-color: #000000;
  padding: 100px 20px 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.advogado-bloco {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  max-width: 1240px;
  width: 100%;
  margin-left: auto;
  margin-right: 20px;
  margin-bottom: 40px;
  gap: 24px;
}

.advogado-coluna {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 47%;
  gap: 28px;
}

.advogado-coluna.esquerda {
  margin-left: 32px;
}

.foto-advogado {
  width: 162px;
  height: 217px;
  object-fit: cover;
  border-radius: 0;

  /* estado inicial */
  opacity: 0;
  transform: translateX(-80px) scale(.96);

  box-shadow: 0 8px 28px rgba(0,0,0,.6);
  transition: transform 1.2s ease-out, opacity 1.2s ease-out; /* velocidade mais lenta */
  margin-top: 0;
}

.foto-advogado.active {
  /* estado final */
  opacity: 1;
  transform: translateX(0) scale(1);
}

.texto-advogado {
  text-align: justify;
  max-width: 316px;
  padding-top: 10px;
}

.advogado-coluna.esquerda .texto-advogado {
  margin-left: 6px;
}

.advogado-coluna:not(.esquerda) .foto-advogado {
  margin-right: 6px;
}

.titulo-advogado {
  font-size: 1.36rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 12px;
}

.oab {
  font-size: 1rem;
  font-weight: bold;
  color: #bfa75e;
  margin-bottom: 8px;
  position: relative;
}

.linha-oab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.advogado-coluna.esquerda .linha-oab .separador {
  transform: translateY(-0.3em);
}

.advogado-coluna:not(.esquerda) .linha-oab {
  margin-top: 8px;
  margin-bottom: 8px;
}

.advogado-coluna:not(.esquerda) .separador {
  margin-top: 2px;
  transform: translateY(-0.3em);
}

.separador {
  flex-grow: 1;
  height: 2px;
  background-color: #bfa75e;
  border-radius: 2px;
}

.descricao-advogado {
  font-size: 0.97rem;
  color: #ffffff;
  line-height: 1.6;
}

.btn-advogado {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

@media (max-width: 768px) {
  .advogado-bloco {
    flex-direction: column;
    align-items: center;
    gap: 120px;
    flex-wrap: wrap;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .advogado-coluna {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 auto !important;
    gap: 20px;
  }

  /* 🟩 Coluna da Dra. Jerusa: texto alinhado à esquerda da imagem */
  .advogado-coluna.esquerda {
    align-items: center !important;
    text-align: left !important;
    margin-bottom: 48px;
  }

  .advogado-coluna.esquerda .foto-advogado {
    margin: 0 auto !important;
  }

  .advogado-coluna.esquerda .texto-advogado {
    text-align: justify;
    width: 88vw;
    max-width: 360px;
    margin: 0 auto;
    padding-left: 0;
  }

  .advogado-coluna.esquerda .linha-oab {
    justify-content: flex-start;
    width: 88vw;
    max-width: 360px;
    margin: 0 auto 8px auto;
  }

  /* 🟦 Coluna da direita (FAÇA VALER...): título centralizado */
  .advogado-coluna:not(.esquerda) {
    align-items: center !important;
    text-align: center !important;
  }

  .advogado-coluna:not(.esquerda) .foto-advogado {
    margin: 0 auto !important;
  }

  .advogado-coluna:not(.esquerda) .texto-advogado {
    margin: 0 auto;
    text-align: justify;
    max-width: 88vw;
  }

  .advogado-coluna:not(.esquerda) .titulo-advogado {
  text-align: center;
  width: 88vw;
  max-width: 360px;
  margin: 0 auto 19px auto; /* ⬅️ espaçamento entre título e linha */
  }

  .advogado-coluna:not(.esquerda) .linha-oab {
  justify-content: center;
  width: 88vw;
  max-width: 360px;
  margin: 0 auto;
 }

  .advogado-coluna:not(.esquerda) .descricao-advogado {
  margin-top: 13px; /* ⬅️ espaçamento abaixo da linha de separação */
 }

  .foto-advogado {
    width: 88vw;
    max-width: 360px;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 56px;
  }

  /* Tamanhos dos títulos */
  .advogado-coluna.esquerda .titulo-advogado {
    font-size: 1.65rem;
  }

  .advogado-coluna:not(.esquerda) .titulo-advogado {
    font-size: 1.59rem;
  }

  .oab {
    font-size: 1.15rem;
  }

  .descricao-advogado {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .separador {
    display: block;
    background-color: #bfa75e;
    height: 2px;
    border-radius: 2px;
    flex-grow: 1;
  }

  .btn-advogado {
    margin-top: 20px;
  }
  
  } /* fecha @media (max-width: 768px) */

@media (max-width: 1024px) and (orientation: landscape) {
  html, body {
    overflow-x: hidden;
  }

  .advogado-coluna {
    flex-direction: row !important;
    justify-content: center;
    gap: 32px;
  }

  .foto-advogado {
    max-width: 160px;
    height: auto;
  }

  .texto-advogado {
    font-size: 1rem;
    line-height: 1.5;
    text-align: justify;
    max-width: 48vw;
  }

  .titulo-advogado {
    font-size: 1.35rem;
  }

  .descricao-advogado {
    font-size: 1rem;
  }

  .btn-advogado {
    margin-top: 40px;
  }
}

/* ===== BLOCO 5 — Depoimento (ESQ) + Fale Conosco (DIR) ===== */

/* Container base: centralizado, 1 coluna no mobile */
#bloco5.depoimento-fale-container{
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr;   /* empilhado no mobile */
  gap: 40px;
  align-items: stretch;

  max-width: 1240px;
  margin: 0 auto;
  padding: 100px 20px;

  /* ANULA qualquer fundo que venha de regras antigas */
  background: none !important;
}

/* Fundo com imagem + overlay branco SÓ na metade ESQUERDA do container */
#bloco5.depoimento-fale-container::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)),
    url('../images/fundo-depoimento.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* mostra apenas a metade ESQUERDA */
  clip-path: inset(0 50% 0 0);
  z-index: 0;
}
/* conteúdo acima do overlay */
#bloco5.depoimento-fale-container > *{ position: relative; z-index: 1; }

/* Desktop: 2 colunas 50/50 (Depoimento | Fale Conosco) */
@media (min-width: 1025px){
  #bloco5.depoimento-fale-container{
    grid-template-columns: 1fr 1fr !important;
  }
  #bloco5 .depoimento-esquerda{ grid-column: 1; }
  #bloco5 .faleconosco-direita{ grid-column: 2; }
}

/* ===== ESQUERDA: bloco de depoimento (fica sobre o overlay) ===== */
#bloco5 .depoimento-esquerda{
  background: transparent !important;      /* overlay já dá o “cartão” de fundo */
  padding: 40px;
  border-radius: 8px;
  max-width: 600px;                         /* como no seu backup */
}

#bloco5 .logo-google{
  display: block !important;
  margin: 0 auto 20px !important;
  width: auto; height: auto; max-width: 110px; max-height: 35px;
}

#bloco5 .estrelas{
  display: flex; justify-content: center; gap: 6px; margin-bottom: 12px;
}

#bloco5 .avaliacoes-texto{
  text-align: center;
  font-size: 1rem;
  color: #000;
  margin: 8px 0 24px 0;
}

/* Cartão do depoimento: perfil → estrelinhas → texto; ícone “G” à direita */
#bloco5 .caixa-depoimento{
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "perfil-info perfil-logo"
    "estrelas     perfil-logo"
    "texto        texto";
  column-gap: 12px;
  row-gap: 10px;
}

#bloco5 .perfil-info{
  grid-area: perfil-info;
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* tira o space-between */
  gap: 12px;
  margin-bottom: 0;
}
#bloco5 .perfil-dados{ display:flex; align-items:center; gap:12px; }
#bloco5 .perfil-dados img{ width:40px; height:40px; border-radius:50%; }
#bloco5 .nome{ font-weight:bold; color:#000; line-height:1.2; }
#bloco5 .data{ font-size:.85rem; color:#555; line-height:1.2; }

#bloco5 .perfil-logo{
  grid-area: perfil-logo;
  align-self: start;
  justify-self: end;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
}
#bloco5 .perfil-logo svg{ width: 100%; height: 100%; display:block; }

#bloco5 .estrelas-depoimento{
  grid-area: estrelas;
  display: flex; gap: 4px; justify-content: flex-start;
  margin: 6px 0 10px 0 !important;
  margin-left: 0 !important; /* remove o recuo antigo de 52px */
}

#bloco5 .texto-depoimento{
  grid-area: texto;
  font-size: .96rem; line-height: 1.5; text-align: justify; color: #333;
  margin-top: 4px;
}

/* Tamanhos fixos das estrelas (grandes e pequenas) */
#bloco5 .estrela, #bloco5 img[src$="star.svg"]{
  width: 30px !important; height: 30px !important; display:inline-block !important; object-fit: contain !important;
}
#bloco5 .estrela-menor, #bloco5 img[src$="star-small.svg"]{
  width: 16px !important; height: 16px !important; display:inline-block !important; object-fit: contain !important;
}
#bloco5 .estrelas img, #bloco5 .estrelas-depoimento img{ max-width: none !important; }

/* ===== DIREITA: FALE CONOSCO (na parte branca) ===== */
#bloco5 .faleconosco-direita{
  background: transparent !important; /* “solto”, sem cartão */
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: 516px;                   /* como no seu backup */
}

#bloco5 .faleconosco-direita h2{ font-size: 2rem; margin-bottom: 12px; color: #000; }

#bloco5 .faleconosco-direita .linha{
  width: 100%; max-width: 418px; height: 2px; background: #bfa75e; margin-bottom: 16px;
}

#bloco5 .faleconosco-direita p{
  font-size: 1rem; color: #333; margin-bottom: 24px; line-height: 1.5; max-width: 516px;
}

#bloco5 .contato-logo{
  width: 232px; height: auto; display: block; margin-bottom: 24px; max-width: 100%;
}

#bloco5 .faleconosco-form{ display: flex; flex-direction: column; gap: 16px; }
#bloco5 .faleconosco-form input,
#bloco5 .faleconosco-form textarea{
  padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem;
  width: 100%; max-width: 486px;
}
#bloco5 .faleconosco-form .linha-inputs{ display: flex; gap: 16px; }
#bloco5 .faleconosco-form .linha-inputs input{ width: 100%; max-width: 215px; }
#bloco5 .faleconosco-form textarea{ min-height: 108px; resize: vertical; }
#bloco5 .faleconosco-form button{
  background: #000; color: #fff; border: none; padding: 12px 0; border-radius: 4px; font-weight: bold;
  cursor: pointer; width: 100%; max-width: 486px; transition: background-color .3s ease;
}
#bloco5 .faleconosco-form button:hover{ background: #333; }

/* ===== Mobile: empilhado ===== */
@media (max-width: 1024px){
  #bloco5 .faleconosco-direita .linha,
  #bloco5 .faleconosco-form input,
  #bloco5 .faleconosco-form textarea,
  #bloco5 .faleconosco-form button{ max-width: 100% !important; }
  #bloco5 .faleconosco-form .linha-inputs{ flex-direction: column; }
  #bloco5 .faleconosco-form .linha-inputs input{ max-width: 100%; }
}

/* === ANIMAÇÕES SAFE (B3/B4) — gate em body.reveal-ready + .will-animate === */

/* Transições padrão */
.atuacao-item,
.foto-advogado {
  transition: transform .6s ease, opacity .6s ease;
  will-change: transform, opacity;
}

/* Esconde só quando o JS sinaliza que está pronto (fallback seguro) */
body.reveal-ready .atuacao-item.will-animate {
  opacity: 0;
  transform: translateY(50px);
}

/* Mobile: entra da esquerda */
@media (max-width: 768px) {
  body.reveal-ready .atuacao-item.will-animate {
    transform: translateX(-60px);
  }
}

/* Revela quando o observer ativar */
body.reveal-ready .atuacao-item.will-animate.active,
body.reveal-ready .atuacao-item.will-animate.animate-in {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* BLOCO 4: fotos entram da esquerda com leve scale */
body.reveal-ready .foto-advogado.will-animate {
  opacity: 0;
  transform: translateX(-80px) scale(.96);
}
body.reveal-ready .foto-advogado.will-animate.active,
body.reveal-ready .foto-advogado.will-animate.animate-in {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* === Bloco 5 (lado esquerdo) – CENTRALIZAR conteúdo na metade esquerda (desktop) === */
@media (min-width: 1025px) {
  :root { --bloco5-nudge: 48px; } /* ajuste fino: aumente/diminua até “encaixar” */

  #bloco5 .depoimento-esquerda{
    display: flex;
    flex-direction: column;
    max-width: 600px;
    width: auto;
    justify-self: end !important;        /* puxa para perto do divisor central */
    align-items: center;                  /* centraliza logo/estrelas/texto/cartão */
    margin-left: 0 !important;
    margin-right: var(--bloco5-nudge) !important; /* <<< mexa aqui (36–64px costuma resolver) */
  }

  /* garante que nada puxe pro lado */
  #bloco5 .depoimento-esquerda .logo-google,
  #bloco5 .depoimento-esquerda .estrelas,
  #bloco5 .depoimento-esquerda .avaliacoes-texto,
  #bloco5 .depoimento-esquerda .caixa-depoimento{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* cartão ocupa toda a largura do bloco centralizado */
  #bloco5 .depoimento-esquerda .caixa-depoimento { width: 100%; }
}

/* Bloco 5 – overlay cobre do lado ESQUERDO da tela até o centro (DESKTOP) */
@media (min-width: 1025px) {
  #bloco5.depoimento-fale-container {
    position: relative;
    overflow: visible; /* garante que o ::before possa “sair” do container */
  }

  #bloco5.depoimento-fale-container::before {
    /* em vez de inset:0 + clip-path, usamos left/right para atingir o viewport */
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw); /* começa na borda esquerda do viewport */
    right: 50%;             /* termina no centro do container/seção */
    clip-path: none;        /* remove o recorte que deixava faixa branca */

    /* mantém seu fundo como estava */
    background:
      linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)),
      url('../images/fundo-depoimento.jpg');
    background-size: cover;
    background-position: left center; /* puxa a imagem para a esquerda */
    background-repeat: no-repeat;
    z-index: 0;
  }
}

/* Bloco 5 – centralizar VERTICALMENTE o conteúdo da coluna ESQUERDA (DESKTOP) */
@media (min-width: 1025px) {
  /* Faz o item da esquerda ficar centralizado no alto/baixo da linha do grid */
  #bloco5 .depoimento-esquerda {
    align-self: center;   /* ← o pulo do gato */
  }

  /* Garante que a coluna da direita continue ancorada no topo */
  #bloco5 .faleconosco-direita {
    align-self: start;
  }
}

/* Bloco 5 – afasta o painel da DIREITA do divisor central (DESKTOP) */
@media (min-width: 1025px) {
  #bloco5 .faleconosco-direita {
    margin-left: clamp(36px, 4vw, 56px);
  }
}

@media (min-width: 1025px) {
  #bloco5 .faleconosco-form .linha-inputs {
    display: flex;            /* já está assim, mas reforçamos */
    gap: 16px;
  }
  #bloco5 .faleconosco-form .linha-inputs input {
    flex: 1 1 0;              /* cada um ocupa metade do espaço */
    max-width: none;          /* sobrescreve o 215px */
    width: 100%;              /* garante preenchimento total */
  }
}

/* Desktop: unificar larguras do formulário */
@media (min-width: 1025px) {
  /* defina aqui o “máximo” do painel direito (ajuste se quiser) */
  #bloco5 .faleconosco-direita {
    max-width: 600px; /* ex.: 560–640px também funciona bem */
  }

  /* todo o form passa a ter essa mesma largura */
  #bloco5 .faleconosco-form {
    max-width: 600px; /* mantenha igual ao de cima */
  }

  /* todos os campos ocupam 100% da largura do form */
  #bloco5 .faleconosco-form input,
  #bloco5 .faleconosco-form textarea,
  #bloco5 .faleconosco-form button {
    width: 100%;
    max-width: none;  /* remove o limite antigo (486px) */
  }

  /* mantém E-mail e Telefone dividindo o espaço igualmente */
  #bloco5 .faleconosco-form .linha-inputs {
    display: flex;    /* garante flex no desktop */
    gap: 16px;
  }
  #bloco5 .faleconosco-form .linha-inputs input {
    flex: 1 1 0;
    max-width: none;
  }
}

/* Desktop: reduzir o espaço entre Título ↔ linha ↔ parágrafo */
@media (min-width: 1025px) {
  #bloco5 .faleconosco-direita h2 {
    margin-bottom: 8px;   /* era 12px */
  }
  #bloco5 .faleconosco-direita .linha {
    /* encosta um pouco mais no título e no texto */
    margin-top: 6px;      /* se quiser, pode deixar 0 */
    margin-bottom: 10px;  /* era 16px */
  }
  #bloco5 .faleconosco-direita p {
    margin-top: 0;        /* garante que não há espaço adicional acima do texto */
  }
}

/* Bloco 5 — Banner "contato": entra como se caísse (vertical→horizontal) */
#bloco5 .contato-logo{
  opacity: 0;
  /* começa fora, “em pé”, levemente menor */
  transform: translateX(-160px) rotate(-90deg) scale(.96);
  transform-origin: left center; /* gira a partir do lado esquerdo */
  will-change: transform, opacity;
}

/* quando o JS adicionar .active, roda a animação e mantém o estado final */
#bloco5 .contato-logo.active{
  animation: contatoFall 1.6s cubic-bezier(.2,.8,.2,1.05) both;
}

/* Aviso inline do formulário (status) */
#bloco5 .form-status{
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  font-size: .95rem;
  border-radius: 6px;
  border: 1px solid transparent;
}
#bloco5 .form-status.show{ display:block; }
#bloco5 .form-status.success{
  background: #e7f6ed;   /* verde clarinho */
  color: #0f5132;
  border-color: #badbcc;
}
#bloco5 .form-status.error{
  background: #fde2e1;   /* vermelho clarinho */
  color: #842029;
  border-color: #f5c2c7;
}

/* Efeito de sublinhado no botão ENVIAR (hover/focus/toque) */
#bloco5 .faleconosco-form button.hover-on,
#bloco5 .faleconosco-form button:hover,
#bloco5 .faleconosco-form button:focus-visible{
  text-decoration: underline;
  text-decoration-color: #bfa75e;   /* dourado */
  text-underline-offset: 6px;       /* afastamento do texto */
  text-decoration-thickness: 2px;   /* espessura */
}

/* Estado base: sem animação */
#bloco5 .faleconosco-form button{
  animation: none;
  transition: color .25s ease, transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

/* Ativo (hover, foco ou touch via .hover-on): pulsar + cor do texto bfa75e */
#bloco5 .faleconosco-form button.hover-on,
#bloco5 .faleconosco-form button:hover,
#bloco5 .faleconosco-form button:focus-visible{
  color: #bfa75e;
  animation: pulse 1.1s ease-in-out infinite; /* usa o mesmo @keyframes pulse já existente */
}

/* Sublinhado usa a mesma cor bfa75e quando ativo */
#bloco5 .faleconosco-form button:hover::after,
#bloco5 .faleconosco-form button:focus-visible::after,
#bloco5 .faleconosco-form button.hover-on::after{
  transform: scaleX(1);
  background: #bfa75e;
}

@keyframes contatoFall{
  0%{
    opacity: 0;
    transform: translateX(-160px) rotate(-90deg) scale(.96);
  }
  70%{
    opacity: 1;
    /* leve overshoot pra dar sensação de “cair e assentar” */
    transform: translateX(10px) rotate(4deg) scale(1.02);
  }
  100%{
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
  }
}

/* Respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce){
  #bloco5 .contato-logo{
    animation: none !important;   /* sem keyframes */
    transform: none !important;   /* sem giro/translate */
    opacity: 0 !important;        /* começa escondido */
    transition: opacity .5s ease !important; /* fade suave */
  }
  #bloco5 .contato-logo.active{
    opacity: 1 !important;        /* revela no .active */
  }
}

/* === MOBILE (≤1024px) — Bloco 5 empilhado, com fundo no depoimento e espaçamento amplo === */
@media (max-width: 1024px) {

  /* Empilha e remove o fundo único do container */
  #bloco5.depoimento-fale-container{
    display: block !important;
    padding: 60px 20px;
  }
  #bloco5.depoimento-fale-container::before{
    content: none !important;
  }

  /* Depoimento: conteúdo normal, mas o fundo vai para o ::before (full-bleed) */
  #bloco5 .depoimento-esquerda{
    position: relative;
    isolation: isolate;                  /* cria contexto p/ o ::before */
    background: none !important;         /* tiramos o bg daqui */
    border-radius: 8px;
    padding: clamp(36px, 6vw, 56px) clamp(18px, 5vw, 28px);
    min-height: clamp(460px, 60vh, 580px);  /* ↑ mais altura do bloco */
    max-width: 700px;
    margin: 0 auto clamp(140px, 16vw, 220px) !important;  /* ↓ pouco espaço até o Fale Conosco */
  }

  /* Fundo full-bleed (100vw), cobrindo as laterais no mobile */
  #bloco5 .depoimento-esquerda::before{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;            /* ocupa a tela inteira na horizontal */
    top: 0;
    bottom: 0;
    z-index: -1;             /* fica atrás do conteúdo */
    background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    url('../images/fundo-depoimento.jpg') left 22% center / cover no-repeat;
  }

  /* Centralizações internas */
  #bloco5 .logo-google,
  #bloco5 .estrelas,
  #bloco5 .avaliacoes-texto{
    margin-left: auto;
    margin-right: auto;
  }
  #bloco5 .caixa-depoimento{ margin-top: 16px; }

  /* Fale Conosco como bloco separado e mais abaixo */
  #bloco5 .faleconosco-direita{
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
    max-width: 700px;
    margin: 0 auto;
    padding-top: clamp(80px, 10vw, 140px);
    margin-top: 0 !important; /* abre espaço extra */
  }

  /* Banner "contato" — ocupar a mesma largura dos campos (mobile) */
  #bloco5 .faleconosco-direita .contato-logo{
    width: 100% !important;     /* igual aos inputs/textarea/botão */
    max-width: none !important; /* ignora os 232px do desktop */
    height: auto;               /* mantém a proporção */
    display: block;
    margin: 0 auto clamp(20px, 4vw, 28px); /* respiro embaixo opcional */
  }

  /* Garante que o banner exista (animação via JS continua valendo) */
  #bloco5 .contato-logo{
    display: block !important;
  }

  /* Garante que o banner exista (animação via JS continua valendo) */
#bloco5 .contato-logo{
  display: block !important;
}

/* Mobile: deixa o efeito do banner "contato" mais lento */
#bloco5 .contato-logo.active{
  animation-duration: 2.3s; /* ajuste aqui: 2.0–2.6s */
  /* opcional:
  animation-timing-function: cubic-bezier(.18,.9,.22,1.05);
  */
}
} /* ← esta é a ÚNICA chave que fecha o @media (max-width: 1024px) aberto acima */


/* Mobile: manter o título em uma única linha */
@media (max-width: 768px){
  .hero-title{
    white-space: nowrap;       /* não quebrar */
    overflow-wrap: normal;     /* não forçar quebra */
    word-break: keep-all;      /* evita quebras estranhas */
    font-size: clamp(22px, 6.4vw, 32px);  /* reduz só no mobile */
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
}

/* Telas bem pequenas */
@media (max-width: 360px){
  .hero-title{
    font-size: clamp(18px, 5.5vw, 26px); /* um tiquinho menor */
  }
  /* opcional: reduz leve o padding lateral do banner p/ caber melhor */
  .hero-content{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Landscape (celular/tablet deitado) */
@media (max-width: 1024px) and (orientation: landscape){
  .hero-title{
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    font-size: clamp(20px, 4.6vw, 34px); /* ajuste fino aqui */
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
}

/* Landscape com pouca altura (aparelhos bem “baixos”) */
@media (orientation: landscape) and (max-height: 420px){
  .hero-title{
    /* usa a ALTURA como base pra segurar em 1 linha */
    font-size: clamp(18px, 3.9vh, 28px);
  }
  /* opcional: dá um gás no espaço lateral */
  .hero-content{
    padding-left: 14px; padding-right: 14px;
  }
}

/* Landscape (celular/tablet deitado) — título maior e hierarquia melhor */
@media (max-width: 1024px) and (orientation: landscape){
  .hero-content{
    padding-left: clamp(8px, 2.2vw, 20px);
    padding-right: clamp(8px, 2.2vw, 20px); /* dá um respiro e abre espaço pro título */
  }

  .hero-title{
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    /* ↑ Aumentei o tamanho; ajuste a 2ª casa (vw) se ainda couber numa linha */
    font-size: clamp(22px, 5.4vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.01em;
  }

  .divider{
    height: 2px;
    width: min(520px, 82%);
    margin: clamp(8px, 1.6vh, 14px) auto;
  }

  .hero-subtitle{
    /* ↓ um pouco pra reforçar a hierarquia com o título maior */
    font-size: clamp(12px, 2.1vw, 18px);
    line-height: 1.35;
  }
}

/* Landscape super baixo (ex.: celulares “esticados” deitados) */
@media (orientation: landscape) and (max-height: 420px){
  .hero-title{
    font-size: clamp(20px, 5.0vw, 40px);
  }
  .hero-subtitle{
    font-size: clamp(12px, 1.9vw, 16px);
  }
}

/* ===========================
   BLOCO 6: RODAPÉ FINAL
   =========================== */
.site-footer{
  background: #ffffff; /* igual ao rodapé superior */
}
.footer-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 36px 20px;
}
.footer-grid{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.footer-left{ flex: 0 0 40%; }
.footer-right{ flex: 1; }

.footer-logo{
  width: 200px;
  max-width: 100%;
  height: auto;
  display: block;
}

.footer-phrase{
  color: #54595F;
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.45;
}

.footer-contacts{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #54595F;            /* mesma cor dos ícones do rodapé superior */
  font-weight: 500;
}
.footer-link i{
  font-size: 1.1rem;
  color: #54595F;            /* mesma cor nos ícones */
}
.footer-link .label{ font-weight: 600; }
.footer-phone-row{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.save-contact{
  display: inline-block;
  font-size: 0.95rem;
  text-decoration: underline;
  color: #54595F;
}
@media (max-width: 1024px){
  .save-contact{ display: none; } /* esconder no mobile */
}

/* Mobile: empilhar, centralizar e aumentar conforto do toque */
@media (max-width: 768px){
  .footer-grid{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .footer-left{ flex: none; }
  .footer-logo{ width: 260px; max-width: 80vw; margin: 0 auto; }
  .footer-phrase{ max-width: 640px; margin-left: auto; margin-right: auto; }
  .footer-contacts{ align-items: center; }
  .footer-link{ font-weight: 600; min-height: 44px; } /* tap target confortável */
}

/* Sub-footer */
.sub-footer{
  background: #F2F2F2;
}
.sub-footer .sub-footer-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 20px;
  text-align: center;
}
.sub-footer p{
  margin: 0;
  color: #54595F;
  font-size: 0.95rem;
}

/* === RODAPÉ FINAL — ajustes DESKTOP (alinhamento como o rodapé superior) === */
@media (min-width: 1025px){
  /* Logo maior e sem frase no desktop */
  .footer-phrase { display: none; }
  .footer-logo { width: clamp(260px, 18vw, 360px); height: auto; }

  /* Grid do rodapé: itens centralizados na mesma altura */
  .footer-grid { align-items: center; }

  /* Contatos alinhados ao canto direito */
  .footer-right { display: flex; justify-content: flex-end; }
  .footer-contacts { align-items: flex-end; text-align: right; }
  .footer-phone-row { justify-content: flex-end; }
}

/* === RODAPÉ FINAL — ajustes DESKTOP conforme solicitado === */
@media (min-width: 1025px){
  /* 1) Logo ainda maior no desktop */
  .footer-logo{
    width: clamp(320px, 22vw, 440px);
    height: auto;
  }

  /* 2) Ocultar a frase institucional no desktop (mantém no mobile) */
  .footer-phrase{
    display: none !important;
  }

  /* 3) Alinhar logo (esq) e bloco de contatos (dir) na mesma altura */
  .footer-grid{
    align-items: center;
  }

  /* 4) Contatos no canto direito, mas itens alinhados da ESQUERDA p/ DIREITA */
  .footer-right{
    display: flex;
    justify-content: flex-end;    /* bloco fica do lado direito */
  }
  .footer-contacts{
    align-items: flex-start;      /* textos começam à esquerda */
    text-align: left;             /* direcionalidade esquerda → direita */
  }
  .footer-phone-row{
    justify-content: flex-start;  /* mantém alinhamento à esquerda dentro do bloco */
  }
}

/* 5) Remover “Salvar contato (.vcf)” em todas as telas */
.save-contact{
  display: none !important;
}

/* === RODAPÉ FINAL — mais espaço interno acima/abaixo do conteúdo === */
.site-footer .footer-container{
  /* sobe o respiro interno no topo e um pouco no rodapé */
  padding-top: clamp(56px, 6vw, 100px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

/* Desktop: um tiquinho a mais, mantendo o mobile como está */
@media (min-width: 1025px){
  .site-footer .footer-container{
    padding-top: 80px;    /* ajuste fino do “respiro” */
    padding-bottom: 56px;
  }
}

/* === Rodapé Final — MOBILE: esconder frase e aumentar a logo === */

/* Esconde a frase no mobile/tablet */
@media (max-width: 1024px){
  .footer-phrase{
    display: none !important;
  }
}

/* Aumenta a logo no celular para ficar proporcional ao primeiro item (E-mail) */
@media (max-width: 768px){
  .footer-logo{
    width: clamp(300px, 78vw, 380px) !important;  /* antes: ~260px */
    max-width: 86vw !important;
    height: auto;
    margin-bottom: 14px;                           /* respiro antes dos contatos */
  }
  .footer-contacts{ gap: 14px; }                   /* leve conforto entre linhas */
}

/* === Botão flutuante WhatsApp (desktop + mobile) === */
.whatsapp-float{
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  right: calc(16px + env(safe-area-inset-right));
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;              /* cor pedida */
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  z-index: 9999;
  animation: wpp-float 3.2s ease-in-out infinite;  /* leve efeito de flutuar */
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.whatsapp-float i{ font-size: 28px; line-height: 1; }
.whatsapp-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.30);
  filter: brightness(1.03);
}

/* Tooltip (mostra no hover – desktop) */
.whatsapp-float .wpp-tooltip{
  position: absolute;
  right: 74px;                 /* aparece à esquerda do botão */
  bottom: 50%;
  transform: translateY(50%);
  background: #000;
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .9rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.whatsapp-float:hover .wpp-tooltip{
  opacity: 1;
  transform: translateY(50%) translateX(-2px);
}

/* Animação de flutuar */
@keyframes wpp-float{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce){
  .whatsapp-float{ animation: none; }
}

/* Mobile: oculta tooltip para não poluir a tela */
@media (max-width: 768px){
  .whatsapp-float .wpp-tooltip{ display: none; }
}

/* === WhatsApp flutuante — ícone maior e sem animação === */
.whatsapp-float i{
  font-size: 38px;   /* antes ~28px; ajuste fino se quiser 34–40px */
  line-height: 1;
}

/* remove o “balanço” automático; mantém só o sombreamento */
.whatsapp-float{
  animation: none !important;
}

/* (Opcional) deixar 100% estático até no hover */
 /* se quiser sem levantar no hover, descomente:
.whatsapp-float:hover{
  transform: none !important;
}
*/

/* Botão flutuante — reduzir levemente o fundo (círculo) */
.whatsapp-float{
  width: 54px;   /* antes: 64px */
  height: 54px;  /* antes: 64px */
}

/* (Opcional) em telas muito pequenas, reduzir um pouco mais o círculo
   e o ícone para manter respiro */
@media (max-width: 360px){
  .whatsapp-float{
    width: 52px;
    height: 52px;
  }
  .whatsapp-float i{
    font-size: 40px;   /* você está usando 44px; ajusta só nos devices bem pequenos */
  }
}

/* Desktop: manter o título do banner em uma linha */
@media (min-width: 992px) {
  .hero-title {
    white-space: nowrap;
    /* Se precisar de um ajuste fino de tamanho no desktop, descomente a linha abaixo e escolha o valor ideal */
    /* font-size: 48px; */
  }
}

/* Desktop: centralizar o .advogado-bloco sem mexer no layout interno */
@media (min-width: 992px) {
  .advogados-container .advogado-bloco {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* === Centralização precisa do bloco dos advogados em telas muito largas (zoom-out) === */
@media (min-width: 1400px) {
  /* 1) O container vira um "centro" para conteúdo inline */
  .advogados-container { 
    text-align: center; 
  }

  /* 2) O bloco de duas colunas vira inline-flex e encolhe ao conteúdo,
        permitindo centralizar com text-align do pai. 
        Também desfaz qualquer hack anterior de left/transform/width. */
  .advogados-container .advogado-bloco {
    display: inline-flex;
    width: auto !important;
    margin: 0;                        /* centraliza via text-align do pai */
    left: auto !important;            /* neutraliza hack anterior */
    right: auto !important;
    transform: none !important;
    /* NÃO alteramos gap/margens internas para preservar seu layout */
    justify-content: flex-start;      /* evita "space-between" empurrando para as bordas */
  }

  /* 3) Garante que as colunas preservem as margens originais (sem zerar) e o texto continue alinhado como antes */
  .advogados-container .advogado-coluna {
    margin-left: initial;
    margin-right: initial;
    text-align: initial;
  }
}

/* ====== MOBILE EM LANDSCAPE (celular deitado) ======
   Mantém o MESMO layout da vertical (ordem/posicionamento),
   apenas ajustando tamanhos para preencher melhor a tela.
   Não afeta desktop nem mobile em pé. */
@media (orientation: landscape) and (max-height: 500px) {

  /* --- ÁREAS DE ATUAÇÃO: 1 por linha, sem carrossel, igual à vertical --- */
  .atuacao-grid {
    display: grid;                  /* garante grid (como na vertical) */
    grid-template-columns: 1fr;     /* 1 card por linha */
    gap: 16px;
    padding: 0 16px;
    overflow: visible;              /* remove qualquer rolagem horizontal antiga */
  }

  .atuacao-item {
    width: 100%;
    max-width: 820px;               /* ocupa bem a largura, mas confortável */
    margin: 0 auto;                 /* centraliza o card */
    text-align: center;
  }

  .atuacao-item img {
    width: clamp(110px, 28vh, 180px);  /* cresce em landscape, respeitando a pouca altura */
    height: auto;
    margin-bottom: 8px;
  }

  .atuacao-item h3 {
    font-size: clamp(18px, 3.6vw, 22px);
    line-height: 1.2;
    margin: 6px 0;
  }

  .atuacao-item p {
    font-size: clamp(14px, 2.4vw, 16px);
    line-height: 1.45;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 6px;
  }

  .atuacao-botao-wrapper {
    padding: 8px 16px 12px;
  }
}

/* === MOBILE LANDSCAPE: Advogados igual à vertical (foto em cima, texto abaixo) === */
@media (orientation: landscape) and (max-height: 500px) {

  /* container padrão, nada de grid/flex aqui */
  .advogados-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* trata o conjunto como um fluxo de blocos, centralizado */
  .advogados-container .advogado-bloco {
    display: block !important;
    width: 100% !important;
    max-width: 980px;          /* largura confortável, igual para foto e texto */
    margin: 0 auto !important;
  }

  /* cada "coluna" vira um bloco empilhado (vertical), igual ao mobile em pé */
  .advogados-container .advogado-coluna {
    display: block !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto 20px !important;
    float: none !important;     /* apaga qualquer float */
    position: static !important;
  }

  /* FOTO: bem grande, mesma largura do bloco; height natural */
  .advogados-container .foto-advogado {
    display: block !important;
    width: 100% !important;     /* ocupa toda a largura do bloco */
    max-width: 980px !important;
    height: auto !important;    /* mantém proporção original */
    margin: 0 auto 10px !important;
    float: none !important;
    object-fit: contain !important; /* não corta a foto */
  }

  /* TEXTO: mesma largura da foto, logo abaixo */
  .advogados-container .texto-advogado {
    display: block !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto 8px !important;
    padding: 0 6px;             /* só um respiro interno */
    float: none !important;
    /* não forço alinhamento para copiar o da vertical (se for centralizado lá, ficará aqui também) */
  }

  /* === MOBILE LANDSCAPE (até 500px de altura) — ADVOGADOS
     Layout idêntico ao da vertical (foto em cima, texto abaixo),
     com foto grande, separadores corretos e espaços maiores. === */
@media (orientation: landscape) and (max-height: 500px) {

  /* Se abrir direto em landscape, não esconder elementos animáveis */
  .advogados-container .will-animate { opacity: 1 !important; transform: none !important; }

  /* Régua comum de largura (foto e texto) */
  .advogados-container { padding-left: 12px; padding-right: 12px; }
  .advogados-container .advogado-bloco {
    display: block !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
  }
  .advogados-container .advogado-coluna {
    display: block !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto clamp(80px, 12vh, 140px) !important; /* espaço entre os dois “cards” */
    float: none !important;
    position: static !important;
  }

  /* Foto grande, mesma largura do bloco; mais respiro abaixo */
  .advogados-container .foto-advogado {
    display: block !important;
    width: 100% !important;
    max-width: 980px !important;
    height: auto !important;                 /* mantém proporção */
    margin: 0 auto clamp(28px, 5vh, 56px) !important; /* espaço entre foto e infos */
    float: none !important;
    object-fit: contain !important;          /* não corta a imagem */
  }

  /* Texto abaixo da foto, com acolchoado inferior suave */
  .advogados-container .texto-advogado {
    display: block !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto 0 !important;
    padding: 0 8px clamp(12px, 2.5vh, 24px) !important;
  }

  /* Títulos: Dra à esquerda (como na vertical); “FAÇA VALER…” centralizado */
  .advogados-container .advogado-coluna.esquerda .titulo-advogado {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .advogados-container .advogado-coluna:not(.esquerda) .titulo-advogado {
    text-align: center !important;
    margin: 0 auto 8px !important;
    max-width: 980px;
    font-size: clamp(20px, 4.6vw, 26px);
    line-height: 1.2;
  }

  /* Linha da OAB: do fim do texto até a borda direita da “régua” (foto/texto) */
  .advogados-container .linha-oab {
    display: flex !important;
    align-items: baseline !important;          /* alinha pela linha de base do “OAB” */
    gap: 6px;
    width: 100% !important;
    max-width: 980px !important;
    margin: 6px auto 12px !important;
    padding: 0 !important;
  }
  .advogados-container .linha-oab .oab {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  .advogados-container .linha-oab .separador {
    flex: 1 1 auto !important;                 /* ocupa TODO o restante da linha */
    position: relative !important;
    top: 2px !important;                       /* desce 2px para alinhar visualmente */
    height: 2px !important;
    margin: 0 !important;
    /* Anula qualquer limitação herdada */
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Separador do “FAÇA VALER…”: mesma régua da imagem/texto, centralizado */
  .advogados-container .advogado-coluna:not(.esquerda) .separador {
    display: block !important;
    height: 2px !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 12px auto !important;
  }
}

/* === MOBILE LANDSCAPE: mais espaço entre FOTO ↓ e TÍTULO ↑ (ambos os cards) === */
@media (orientation: landscape) and (max-height: 500px) {
  /* regra geral (dois cards) */
  .advogados-container .advogado-coluna .foto-advogado{
    margin-bottom: clamp(56px, 10vh, 128px) !important;
  }

  /* se quiser ainda mais no card da Dra. (primeiro) */
  .advogados-container .advogado-coluna.esquerda .foto-advogado{
    margin-bottom: clamp(64px, 12vh, 140px) !important;
  }

  /* evita que o <h3> adicione margem extra para cima (controle total pelo img) */
  .advogados-container .titulo-advogado{
    margin-top: 0 !important;
  }
}