/* ============================================================================
   Bissoli Advogados — Design system do site público
   ----------------------------------------------------------------------------
   Direção: editorial moderno e sóbrio. Muito branco, Fraunces nos títulos,
   Inter no corpo, roxo em blocos sólidos, dourado em filetes finos, fotos em
   preto-e-branco que ganham cor no hover.

   Bootstrap 5 entra SÓ como grid (.row/.col-*) e utilitários de espaçamento.
   Todos os componentes abaixo são próprios.

   Sumário
     01. Variáveis
     02. Reset e base
     03. Tipografia
     04. Layout (.wrap, .secao, título de seção com filete)
     05. Botões
     06. Header e navegação
     07. Menu off-canvas
     08. Hero interno
     09. Cards (post, advogado, área)
     10. Badges, tags e meta
     11. Breadcrumb
     12. Paginação
     13. Formulários
     14. Bloco .prose (HTML vindo do TinyMCE)
     15. Compartilhar
     16. CTA de contato
     17. Footer
     18. Botão flutuante de WhatsApp
     19. Blocos de página (hero da home, números, perfil do advogado,
         barra do blog, artigo, card do autor, página de contato e o
         bloco reutilizável do formulário)
     20. Animação de entrada e utilitários
   ========================================================================== */

/* == 01. Variáveis ======================================================== */

:root {
  /* Paleta (spec §7) */
  --brand:      #372B67;
  --brand-dark: #241C45;
  --brand-soft: #4E3F8C;
  --accent:     #C8A96A;
  --ink:        #1A1726;
  --muted:      #6B6880;
  --line:       #E6E4EE;
  --bg-soft:    #F7F6FA;
  --white:      #FFFFFF;
  --whatsapp:   #25D366;
  --logo:       #56318C; /* cor do arquivo do logo — só na marca */

  /* Tipografia */
  --font-titulo: "Fraunces", Georgia, "Times New Roman", "Noto Serif", serif;
  --font-corpo:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida — mobile-first, cresce até ~1440px */
  --fs-xs:      clamp(0.75rem,   0.735rem + 0.08vw, 0.8125rem);
  --fs-sm:      clamp(0.8125rem, 0.79rem  + 0.12vw, 0.875rem);
  --fs-base:    clamp(1rem,      0.975rem + 0.13vw, 1.0625rem);
  --fs-lg:      clamp(1.0625rem, 1.02rem  + 0.24vw, 1.1875rem);
  --fs-h4:      clamp(1.125rem,  1.06rem  + 0.32vw, 1.3125rem);
  --fs-h3:      clamp(1.3125rem, 1.19rem  + 0.6vw,  1.625rem);
  --fs-h2:      clamp(1.625rem,  1.36rem  + 1.3vw,  2.5rem);
  --fs-h1:      clamp(2rem,      1.6rem   + 2vw,    3.25rem);
  --fs-display: clamp(2.375rem,  1.7rem   + 3.2vw,  4.25rem);

  /* Ritmo */
  --secao-y:  clamp(3.5rem, 2.4rem + 5vw, 7rem);
  --wrap-max: 1200px;
  --wrap-x:   clamp(1.125rem, 0.6rem + 2.4vw, 2.5rem);

  /* Forma */
  --raio:    4px;
  --raio-lg: 8px;
  --sombra:      0 1px 2px rgba(26, 23, 38, .04), 0 4px 16px rgba(26, 23, 38, .045);
  --sombra-alta: 0 8px 20px rgba(26, 23, 38, .07), 0 24px 48px rgba(55, 43, 103, .10);

  /* Movimento */
  --t-rapida: .22s cubic-bezier(.4, 0, .2, 1);
  --t-media:  .38s cubic-bezier(.4, 0, .2, 1);
  --t-lenta:  .7s  cubic-bezier(.22, .61, .36, 1);

  /* Header */
  --header-h:    84px;
  --header-h-sm: 62px;
}

/* == 02. Reset e base ===================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-sm) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--font-corpo);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg, video, iframe { max-width: 100%; }
img, svg, video { height: auto; display: block; }

a { color: var(--brand); text-decoration: none; transition: color var(--t-rapida); }
a:hover { color: var(--brand-soft); }

button { font: inherit; }

::selection { background: var(--brand); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Pular para o conteúdo — só aparece na navegação por teclado */
.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1200;
  background: var(--brand);
  color: var(--white);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--raio) 0;
}
.pular-conteudo:focus { left: 0; color: var(--white); }

/* == 03. Tipografia ======================================================= */

h1, h2, h3, h4, h5, h6, .titulo {
  font-family: var(--font-titulo);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.texto-display { font-size: var(--fs-display); line-height: 1.06; }
.texto-lead    { font-size: var(--fs-lg); color: var(--muted); line-height: 1.75; }
.texto-sm      { font-size: var(--fs-sm); }
.texto-xs      { font-size: var(--fs-xs); }
.texto-muted   { color: var(--muted); }
.texto-brand   { color: var(--brand); }
.texto-accent  { color: var(--accent); }

/* Sobrelinha: rótulo curto acima do título, em caixa alta espaçada */
.sobrelinha {
  display: block;
  font-family: var(--font-corpo);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .85rem;
}

/* == 04. Layout =========================================================== */

/* Container do site. Convive com .row/.col-* do Bootstrap. */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-x);
}
.wrap-estreito { max-width: 820px; }

.secao       { padding-block: var(--secao-y); }
.secao-sm    { padding-block: calc(var(--secao-y) * .6); }
.secao-soft  { background: var(--bg-soft); }
.secao-brand { background: var(--brand); color: rgba(255, 255, 255, .82); }
.secao-brand h1, .secao-brand h2, .secao-brand h3, .secao-brand h4 { color: var(--white); }
.secao-brand .texto-lead { color: rgba(255, 255, 255, .74); }

/* Cabeçalho de seção — o filete dourado curto é a assinatura da marca */
.secao-cabecalho { margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); max-width: 720px; }
.secao-cabecalho.centro { margin-inline: auto; text-align: center; }
.secao-cabecalho h1, .secao-cabecalho h2 { margin-bottom: 0; }

.filete {
  display: block;
  width: 52px;
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: 1.15rem 0 1.35rem;
  opacity: 1;
}
.secao-cabecalho.centro .filete { margin-inline: auto; }
.filete-centro { margin-inline: auto; }

.divisor { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Foto preto-e-branco que ganha cor no hover */
.foto-bw { overflow: hidden; background: var(--bg-soft); }
.foto-bw img {
  width: 100%;
  filter: grayscale(1) contrast(1.02);
  transition: filter var(--t-lenta), transform var(--t-lenta);
}
.foto-bw:hover img,
.foto-bw:focus-within img { filter: grayscale(0); transform: scale(1.045); }

/* Proporções fixas para imagens de card */
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-4-5   { aspect-ratio: 4 / 5; }
.ratio-1-1   { aspect-ratio: 1 / 1; }
.ratio-16-10 img, .ratio-4-5 img, .ratio-1-1 img {
  width: 100%; height: 100%; object-fit: cover;
}

/* == 05. Botões =========================================================== */

.btn-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-corpo);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
  padding: .95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  text-align: center;
  transition: background var(--t-rapida), color var(--t-rapida),
              border-color var(--t-rapida), transform var(--t-rapida),
              box-shadow var(--t-rapida);
}
.btn-b:active { transform: translateY(1px); }

.btn-primario { background: var(--brand); color: var(--white); border-color: var(--brand); }
.btn-primario:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(55, 43, 103, .22);
}

.btn-contorno { background: transparent; color: var(--brand); border-color: var(--line); }
.btn-contorno:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-soft); }

.btn-claro { background: var(--white); color: var(--brand); border-color: var(--white); }
.btn-claro:hover { background: var(--accent); border-color: var(--accent); color: var(--brand-dark); }

.btn-contorno-claro {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .38);
}
.btn-contorno-claro:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 255, 255, .05);
}

.btn-accent { background: var(--accent); color: var(--brand-dark); border-color: var(--accent); }
.btn-accent:hover { background: #B9975A; border-color: #B9975A; color: var(--brand-dark); }

.btn-zap { background: var(--whatsapp); color: #fff; border-color: var(--whatsapp); }
.btn-zap:hover { background: #1FB356; border-color: #1FB356; color: #fff; }

.btn-sm    { padding: .6rem 1.15rem; font-size: var(--fs-xs); }
.btn-bloco { width: 100%; }

/* Link com seta — pede leitura sem pesar como botão */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--brand);
}
.link-seta::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width var(--t-rapida);
}
.link-seta:hover::after { width: 34px; }

/* == 05b. Micro-interações de hover ======================================= *
 * Regras agrupadas aqui de propósito: o hover é uma camada de comportamento
 * que atravessa botões, cards e links, e mantê-la junta evita que a próxima
 * variante de botão nasça sem o mesmo afeto. Tudo é desligado no bloco de
 * `prefers-reduced-motion` no fim do arquivo.                               */

/* Botões: elevação sutil. A transição já declarava `transform`, mas nenhuma
   regra chegava a aplicá-lo — o botão mudava de cor sem se mover.           */
.btn-b:hover { transform: translateY(-2px); }
.btn-b:active { transform: translateY(1px); }

/* O contorno claro ganha um brilho em vez de sombra: sobre fundo escuro a
   sombra roxa não aparece.                                                  */
.btn-contorno-claro:hover { box-shadow: 0 8px 20px rgba(200, 169, 106, .18); }
.btn-accent:hover  { box-shadow: 0 8px 20px rgba(200, 169, 106, .3); }
.btn-zap:hover     { box-shadow: 0 8px 20px rgba(37, 211, 102, .28); }
.btn-contorno:hover, .btn-claro:hover { box-shadow: var(--sombra); }

/* Card inteiro como alvo: passar o mouse em qualquer ponto do card amplia e
   colore a foto. Antes só funcionava com o cursor exatamente sobre a imagem,
   que é justamente onde o usuário não está quando lê o título.              */
.card-b:hover .foto-bw img,
.card-b:focus-within .foto-bw img {
  filter: grayscale(0);
  transform: scale(1.045);
}

/* O filete de "Saiba mais" avança junto com o card, sem exigir mira no link. */
.card-b:hover .link-seta::after,
.card-b:focus-within .link-seta::after { width: 34px; }

/* Card de post: a imagem escurece de leve para o texto sobreposto respirar. */
.card-post:hover .card-post-midia img { filter: grayscale(0) brightness(.97); }

/* O card de advogado usa `.foto-bw` como os demais, então já é coberto pela
   regra acima — não precisa de exceção própria.                            */

/* Paridade de teclado: quem navega por Tab recebe a mesma elevação que o
   mouse, além do anel de foco.                                              */
.card-b:focus-within { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.btn-b:focus-visible { transform: translateY(-2px); }

/* Elementos menores: deslocamento proporcional ao tamanho.                  */
.paginacao a:hover { transform: translateY(-2px); }
.btn-share:hover   { transform: translateY(-2px); }
.tag-b:hover       { transform: translateY(-1px); }
.badge-b:hover, a.badge-brand:hover { transform: translateY(-1px); }

.paginacao a, .btn-share, .tag-b, .badge-b, a.badge-brand {
  transition: background var(--t-rapida), color var(--t-rapida),
              border-color var(--t-rapida), transform var(--t-rapida),
              box-shadow var(--t-rapida);
}

/* == 06. Header =========================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-media), background var(--t-media);
}
.site-header.is-scrolled { box-shadow: 0 2px 18px rgba(26, 23, 38, .07); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h-sm);
  transition: height var(--t-media);
}
.site-header.is-scrolled .header-inner { height: 56px; }

@media (min-width: 992px) {
  .header-inner { height: var(--header-h); }
  .site-header.is-scrolled .header-inner { height: 66px; }
  html { scroll-padding-top: calc(var(--header-h) + 1.5rem); }
}

/* Marca — logo oficial embutido por src/logo.php em currentColor: a cor sai
   daqui. Roxo do logo (--logo) sobre fundo claro; branco (.marca-clara)
   sobre fundo escuro — o roxo do logo some no --brand-dark. */
.marca {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  color: var(--logo);
  transition: opacity var(--t-rapida), color var(--t-rapida);
}
.marca:hover { color: var(--logo); opacity: .82; }
.marca-logo {
  display: block;
  width: auto;
  height: 42px;
  transition: height var(--t-media);
}
.site-header.is-scrolled .marca-logo { height: 38px; }
@media (min-width: 992px) {
  .marca-logo { height: 50px; }
  .site-header.is-scrolled .marca-logo { height: 42px; }
}
.marca-clara,
.marca-clara:hover { color: var(--white); }
.offcanvas-topo .marca-logo { height: 40px; }
.marca-rodape { display: flex; } /* bloco: o selo da OAB vem embaixo, não ao lado */
.marca-rodape .marca-logo { height: 92px; }

/* Navegação desktop */
.nav-principal { display: none; }
@media (min-width: 992px) {
  .nav-principal {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, .4rem + 1.6vw, 2.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }
}
.nav-principal a {
  position: relative;
  display: inline-block;
  padding: .35rem 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}
.nav-principal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--t-media);
}
.nav-principal a:hover { color: var(--brand); }
.nav-principal a:hover::after,
.nav-principal a[aria-current="page"]::after { width: 100%; }
.nav-principal a[aria-current="page"] { color: var(--brand); font-weight: 600; }

.header-acoes { display: flex; align-items: center; gap: .75rem; }
.header-cta { display: none; }
@media (min-width: 992px) { .header-cta { display: inline-flex; } }

/* Botão hambúrguer */
.btn-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--raio);
  color: var(--brand);
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.btn-menu:hover { border-color: var(--brand); background: var(--bg-soft); }
@media (min-width: 992px) { .btn-menu { display: none; } }

/* == 07. Menu off-canvas ================================================== */

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(26, 23, 38, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-media), visibility var(--t-media);
}
.menu-backdrop.aberto { opacity: 1; visibility: visible; }

.offcanvas-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1100;
  width: min(360px, 88vw);
  height: 100vh;
  height: 100dvh;
  background: var(--brand-dark);
  color: rgba(255, 255, 255, .82);
  padding: 1.5rem var(--wrap-x) 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--t-media);
  display: flex;
  flex-direction: column;
}
.offcanvas-menu.aberto { transform: none; }

.offcanvas-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.btn-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--raio);
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.btn-fechar:hover { border-color: var(--accent); background: rgba(255, 255, 255, .06); }

.offcanvas-links { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.offcanvas-links li + li { border-top: 1px solid rgba(255, 255, 255, .09); }
.offcanvas-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-family: var(--font-titulo);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--white);
}
.offcanvas-links a:hover,
.offcanvas-links a[aria-current="page"] { color: var(--accent); }

.offcanvas-rodape { margin-top: auto; padding-top: 2rem; }
.offcanvas-contato {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .66);
}
.offcanvas-contato li { padding: .3rem 0; }
.offcanvas-contato a { color: rgba(255, 255, 255, .66); }
.offcanvas-contato a:hover { color: var(--accent); }

body.menu-aberto { overflow: hidden; }

/* == 08. Hero interno ===================================================== */

.hero-interno {
  position: relative;
  background: var(--brand-dark);
  color: rgba(255, 255, 255, .8);
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  overflow: hidden;
}
.hero-interno::after {
  /* filete dourado na base, esvaindo para a direita */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0 24%, rgba(200, 169, 106, 0) 100%);
}
.hero-interno-bg { position: absolute; inset: 0; z-index: 0; }
.hero-interno-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: .22;
}
.hero-interno-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--brand-dark) 12%, rgba(36, 28, 69, .72) 100%);
}
.hero-interno .wrap { position: relative; z-index: 1; }
.hero-interno h1 { color: var(--white); margin-bottom: 0; }
.hero-interno-sub {
  max-width: 62ch;
  margin: 1.35rem 0 0;
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, .72);
}

/* == 09. Cards ============================================================ */

.card-b {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--raio-lg);
  overflow: hidden;
  transition: transform var(--t-media), box-shadow var(--t-media),
              border-color var(--t-media);
}
.card-b:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-alta);
  border-color: transparent;
}
.card-b-corpo { padding: clamp(1.25rem, 1rem + .8vw, 1.75rem); flex: 1 1 auto; }
.card-b-rodape {
  padding: 1rem clamp(1.25rem, 1rem + .8vw, 1.75rem) clamp(1.25rem, 1rem + .8vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  margin-top: auto;
}

/* --- Card de post --- */
/* Corpo e rodapé ficam num bloco só: na variante horizontal a mídia é a
   primeira coluna e este bloco é a segunda, empilhando os dois por dentro. */
.card-post-texto {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.card-post .card-post-titulo {
  font-size: var(--fs-h4);
  line-height: 1.3;
  margin: .7rem 0 .6rem;
}
.card-post .card-post-titulo a { color: var(--ink); }
.card-post:hover .card-post-titulo a { color: var(--brand); }
.card-post-resumo { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.card-post-autor {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--muted);
}
.card-post-autor img { flex: 0 0 auto; }
.card-post-autor img {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--t-media);
}
.card-post:hover .card-post-autor img { filter: none; }

/* Variante horizontal — post em destaque no topo do blog */
@media (min-width: 768px) {
  .card-post-destaque { flex-direction: row; align-items: stretch; }
  .card-post-destaque .card-post-midia {
    flex: 0 0 52%;
    max-width: 52%;
    aspect-ratio: auto;   /* acompanha a altura da coluna de texto */
  }
  .card-post-destaque .card-post-texto { justify-content: center; }
  .card-post-destaque .card-b-corpo {
    flex: 0 0 auto;
    padding: clamp(1.75rem, 1rem + 2.4vw, 3rem) clamp(1.75rem, 1rem + 2.4vw, 3rem) 0;
  }
  .card-post-destaque .card-b-rodape {
    padding: 1.5rem clamp(1.75rem, 1rem + 2.4vw, 3rem) clamp(1.75rem, 1rem + 2.4vw, 3rem);
  }
  .card-post-destaque .card-post-titulo { font-size: var(--fs-h3); }
  .card-post-destaque .card-post-resumo { font-size: var(--fs-base); }
}

/* --- Card de advogado --- */
.card-advogado .card-advogado-nome { font-size: var(--fs-h4); margin: 0 0 .2rem; }
.card-advogado .card-advogado-nome a { color: var(--ink); }
.card-advogado:hover .card-advogado-nome a { color: var(--brand); }
.card-advogado-cargo {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .75rem;
}
.card-advogado-bio { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.card-advogado-oab {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--muted);
  padding-top: .55rem;
  border-top: 1px solid var(--line);
  margin-top: .9rem;
}

/* --- Card de área --- */
.card-area {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--raio-lg);
  color: var(--ink);
  overflow: hidden;
  transition: transform var(--t-media), box-shadow var(--t-media),
              border-color var(--t-media), background var(--t-media);
}
.card-area::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-media);
}
.card-area:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-alta);
  border-color: transparent;
  color: var(--ink);
}
.card-area:hover::before { transform: scaleY(1); }
.card-area-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin-bottom: 1.25rem;
  border-radius: var(--raio);
  background: var(--bg-soft);
  color: var(--brand);
  font-size: 1.35rem;
  transition: background var(--t-media), color var(--t-media);
}
.card-area:hover .card-area-icone { background: var(--brand); color: var(--accent); }
.card-area-nome   { font-size: var(--fs-h4); margin: 0 0 .65rem; }
.card-area-resumo { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 1.25rem; flex: 1 1 auto; }

/* == 10. Badges, tags e meta ============================================== */

.badge-b {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 2px;
  background: var(--bg-soft);
  color: var(--brand);
}
.badge-brand  { background: var(--brand);  color: var(--white); }
.badge-accent { background: var(--accent); color: var(--brand-dark); }
a.badge-b:hover      { background: var(--line); color: var(--brand); }
a.badge-brand:hover  { background: var(--brand-soft); color: var(--white); }

.lista-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.tag-b {
  display: inline-block;
  font-size: var(--fs-xs);
  padding: .35rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  transition: border-color var(--t-rapida), color var(--t-rapida), background var(--t-rapida);
}
.tag-b:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-soft); }
/* Chip selecionado — filtro de categoria/tag ativo */
.tag-b.ativo { background: var(--brand); border-color: var(--brand); color: var(--white); }
.tag-b.ativo:hover { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--white); }
.tag-b-conta {
  display: inline-block;
  margin-left: .4rem;
  font-size: .85em;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

.meta-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  list-style: none;
  margin: 0;
  padding: 0;
}
.meta-linha > * { display: inline-flex; align-items: center; gap: .35rem; }
.meta-linha .sep { color: var(--line); }

/* == 11. Breadcrumb ======================================================= */

.breadcrumb-b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.breadcrumb-b li { display: inline-flex; align-items: baseline; gap: .55rem; }
.breadcrumb-b li + li::before { content: "/"; color: var(--line); }
.breadcrumb-b a { color: var(--muted); }
.breadcrumb-b a:hover { color: var(--brand); }
.breadcrumb-b [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* Sobre fundo escuro (dentro do hero interno) */
.hero-interno .breadcrumb-b { margin-bottom: 1.6rem; }
.hero-interno .breadcrumb-b,
.hero-interno .breadcrumb-b a { color: rgba(255, 255, 255, .6); }
.hero-interno .breadcrumb-b a:hover { color: var(--accent); }
.hero-interno .breadcrumb-b li + li::before { color: rgba(255, 255, 255, .28); }
.hero-interno .breadcrumb-b [aria-current="page"] { color: rgba(255, 255, 255, .92); }

/* == 12. Paginação ======================================================== */

.paginacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  list-style: none;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
  padding: 0;
}
.paginacao a, .paginacao span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 .75rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  transition: border-color var(--t-rapida), background var(--t-rapida), color var(--t-rapida);
}
.paginacao a:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-soft); }
.paginacao .ativo { background: var(--brand); border-color: var(--brand); color: var(--white); }
.paginacao .reticencias { border-color: transparent; color: var(--muted); min-width: 24px; padding: 0; }

/* == 13. Formulários ====================================================== */

.form-b .campo { margin-bottom: 1.15rem; }
.form-b label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .45rem;
}
.form-b label .obrig { color: var(--accent); }

.form-b input[type="text"],
.form-b input[type="email"],
.form-b input[type="tel"],
.form-b input[type="search"],
.form-b select,
.form-b textarea,
.input-b {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  padding: .85rem 1rem;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.form-b textarea { min-height: 150px; resize: vertical; line-height: 1.65; }
.form-b input:focus,
.form-b select:focus,
.form-b textarea:focus,
.input-b:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(55, 43, 103, .1);
}
.form-b ::placeholder { color: #A7A4B8; }

/* Honeypot — invisível para gente, preenchido por bot */
.hp-campo {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-aviso {
  padding: .9rem 1.15rem;
  border-radius: var(--raio);
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.form-aviso-ok   { border-color: #BFE3CB; background: #F1F9F4; color: #1D6B3A; }
.form-aviso-erro { border-color: #F0C9C9; background: #FDF3F3; color: #9B2C2C; }

/* Barra de busca do blog */
.busca-b { display: flex; gap: .5rem; }
.busca-b input { flex: 1 1 auto; min-width: 0; }

/* == 14. Bloco .prose ===================================================== */
/* Estiliza o HTML que sai do TinyMCE. É o que faz o artigo ficar legível. */

.prose {
  font-size: var(--fs-lg);
  line-height: 1.8;
  color: #2C2838;
  max-width: 72ch;
}
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child  { margin-bottom: 0; }

.prose p { margin: 0 0 1.5em; }

.prose h2 { font-size: var(--fs-h2); margin: 2.2em 0 .1em; line-height: 1.2; }
.prose h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--accent);
  margin: .55rem 0 .9rem;
}
.prose h3 { font-size: var(--fs-h3); margin: 1.9em 0 .55em; }
.prose h4 { font-size: var(--fs-h4); margin: 1.7em 0 .5em; }

.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--brand-soft); text-decoration-color: var(--brand-soft); }

.prose strong { font-weight: 650; color: var(--ink); }
.prose em { font-style: italic; }
.prose mark { background: rgba(200, 169, 106, .28); color: inherit; padding: 0 .2em; }

.prose ul, .prose ol { margin: 0 0 1.5em; padding-left: 1.35em; }
.prose li { margin-bottom: .55em; padding-left: .25em; }
.prose li::marker { color: var(--accent); font-weight: 600; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin: .6em 0 .2em; }

.prose blockquote {
  margin: 2em 0;
  padding: .35em 0 .35em 1.6em;
  border-left: 3px solid var(--accent);
  font-family: var(--font-titulo);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--brand);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite {
  display: block;
  margin-top: .8rem;
  font-family: var(--font-corpo);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.prose img { width: 100%; height: auto; margin: 2em 0; border-radius: var(--raio-lg); }
.prose figure { margin: 2em 0; }
.prose figure img { margin: 0; }
.prose figcaption {
  margin-top: .75rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}

.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.75em 0; }

.prose table {
  width: 100%;
  margin: 2em 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prose table th, .prose table td {
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prose table th {
  background: var(--bg-soft);
  font-family: var(--font-corpo);
  font-weight: 600;
  color: var(--brand);
}
.prose table tr:nth-child(even) td { background: rgba(247, 246, 250, .55); }
/* Tabela larga rola dentro do próprio bloco, nunca empurra a página */
.prose .tabela-scroll, .prose .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.prose pre {
  overflow-x: auto;
  padding: 1.15rem 1.35rem;
  background: var(--brand-dark);
  color: #EDEBF5;
  border-radius: var(--raio);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--bg-soft);
  padding: .12em .4em;
  border-radius: 3px;
}
.prose pre code { background: transparent; padding: 0; color: inherit; }

.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--raio-lg); margin: 2em 0; }

/* == 15. Compartilhar ===================================================== */

.compartilhar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.compartilhar-rotulo {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: .35rem;
}
.btn-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-rapida), border-color var(--t-rapida),
              background var(--t-rapida), transform var(--t-rapida);
}
.btn-share:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--bg-soft);
  transform: translateY(-2px);
}
.btn-share.copiado { color: var(--whatsapp); border-color: var(--whatsapp); }
.copiar-aviso { font-size: var(--fs-xs); color: var(--whatsapp); opacity: 0; transition: opacity var(--t-rapida); }
.copiar-aviso.visivel { opacity: 1; }

/* == 16. CTA de contato =================================================== */

.cta-contato {
  position: relative;
  background: var(--brand);
  color: rgba(255, 255, 255, .8);
  padding-block: clamp(3rem, 2.2rem + 4vw, 5.5rem);
  overflow: hidden;
}
.cta-contato::before {
  /* monograma decorativo, bem discreto */
  content: "B";
  position: absolute;
  right: -.06em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-titulo);
  font-size: clamp(14rem, 30vw, 26rem);
  line-height: .8;
  color: rgba(255, 255, 255, .04);
  pointer-events: none;
  user-select: none;
}
.cta-contato .wrap { position: relative; z-index: 1; }
.cta-contato h2 { color: var(--white); margin-bottom: 0; }
.cta-contato-texto {
  max-width: 58ch;
  margin: 1.15rem 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: var(--fs-lg);
}
.cta-contato-acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* == 17. Footer =========================================================== */

.site-footer {
  background: var(--brand-dark);
  color: rgba(255, 255, 255, .62);
  font-size: var(--fs-sm);
}
.site-footer a { color: rgba(255, 255, 255, .62); }
.site-footer a:hover { color: var(--accent); }

.footer-topo { padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem); }

.footer-titulo {
  position: relative;
  font-family: var(--font-corpo);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1.35rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-titulo::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 32px; height: 1px;
  background: var(--accent);
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { display: inline-block; transition: transform var(--t-rapida), color var(--t-rapida); }
.footer-links a:hover { transform: translateX(3px); }

.footer-sobre { margin: 1.5rem 0 0; max-width: 42ch; line-height: 1.75; }
.footer-oab {
  display: inline-block;
  margin-top: 1.15rem;
  padding: .35rem .75rem;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--accent);
  border: 1px solid rgba(200, 169, 106, .35);
  border-radius: 2px;
}

.footer-contato { list-style: none; margin: 0; padding: 0; }
.footer-contato li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: .85rem;
  line-height: 1.6;
}
.footer-contato svg { flex: 0 0 auto; margin-top: .28em; color: var(--accent); }

.footer-social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  font-size: 1rem;
  transition: border-color var(--t-rapida), color var(--t-rapida),
              background var(--t-rapida), transform var(--t-rapida);
}
.footer-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 255, 255, .05);
  transform: translateY(-2px);
}

.footer-base {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.5rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .45);
}
.footer-base-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}

/* == 18. Botão flutuante de WhatsApp ====================================== */
/* Botão + balão de conversa, comandados pelo site.js (módulo "WhatsApp").
   Sequência: o botão entra com um "pop" e pulsa algumas vezes — o pulso para
   sozinho, não fica piscando para sempre. Em seguida o balão abre e fica
   aberto em todas as páginas — na primeira da visita, com três pontinhos de
   "digitando…" antes da mensagem. O selo "1" fica no botão enquanto ela está
   aberta. O X fecha só na página atual. Sem JS, só o botão aparece. O botão é
   uma pílula com o rótulo "Fale conosco" sempre visível.                    */

.wa-widget {
  position: fixed;
  right: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  bottom: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .9rem;
  pointer-events: none; /* a área vazia do contêiner não pode bloquear cliques na página */
}
.wa-widget > * { pointer-events: auto; }

.wa-flutuante {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 58px;
  padding: 0 24px 0 16px;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .42), 0 2px 6px rgba(26, 23, 38, .12);
  transition: transform var(--t-rapida), box-shadow var(--t-rapida);
  /* `scale`, não `transform`: o fill da animação não pode travar o hover. */
  animation: wa-entrar .6s cubic-bezier(.34, 1.56, .64, 1) .8s both;
}
.wa-flutuante:hover,
.wa-flutuante:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(37, 211, 102, .5), 0 3px 8px rgba(26, 23, 38, .14);
}
.wa-flutuante svg { flex: 0 0 auto; width: 28px; height: 28px; }

/* Rótulo sempre visível — pílula "ícone + Fale conosco" em todas as telas
   (preferência do escritório). No celular a pílula fica mais baixa. */
.wa-flutuante-rotulo {
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
}
@media (max-width: 575.98px) {
  .wa-flutuante { gap: .5rem; height: 52px; padding: 0 20px 0 14px; }
  .wa-flutuante svg { width: 25px; height: 25px; }
}

/* Pulso: 3 vezes na entrada, mais 3 quando o balão abre — e para. */
.wa-flutuante::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--whatsapp);
  opacity: 0;
  pointer-events: none;
  animation: wa-pulso 2.2s ease-out 1.6s 3;
}
.wa-com-mensagem .wa-flutuante::before { animation: wa-pulso-mensagem 2.2s ease-out 3; }

/* Selo "1": só enquanto a mensagem do balão está aberta */
.wa-selo {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid #fff;
  border-radius: 11px;
  background: #E5484D;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  scale: 0;
  transition: scale .35s cubic-bezier(.34, 1.56, .64, 1);
}
.wa-com-mensagem .wa-selo { scale: 1; }

/* Balão */
.wa-balao {
  position: relative;
  max-width: min(290px, calc(100vw - 2.5rem));
  margin-right: 4px;
  padding: 1rem 2.5rem 1.05rem 1.15rem;
  border-radius: 16px 16px 4px 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(26, 23, 38, .18), 0 2px 8px rgba(26, 23, 38, .08);
  transform-origin: bottom right;
  opacity: 0;
  translate: 0 10px;
  scale: .94;
  transition: opacity .3s ease, translate .4s cubic-bezier(.22, .61, .36, 1),
              scale .4s cubic-bezier(.22, .61, .36, 1), padding .3s ease;
}
.wa-balao.aberto { opacity: 1; translate: none; scale: 1; }
.wa-balao::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--white);
  transform: rotate(45deg);
}
.wa-balao-autor {
  display: block;
  margin-bottom: .3rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}
.wa-balao-texto {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink);
}
.wa-balao-texto:hover { color: var(--ink); }
.wa-balao-texto:hover .wa-balao-autor { color: var(--brand-soft); }
.wa-balao-fechar {
  position: absolute;
  top: .55rem;
  right: .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.wa-balao-fechar:hover,
.wa-balao-fechar:focus-visible { background: var(--bg-soft); color: var(--ink); }

/* "Digitando…": três pontos antes da mensagem */
.wa-digitando { display: none; gap: 5px; align-items: center; height: 18px; }
.wa-digitando i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: wa-ponto 1s ease-in-out infinite;
}
.wa-digitando i:nth-child(2) { animation-delay: .15s; }
.wa-digitando i:nth-child(3) { animation-delay: .3s; }
.wa-balao.digitando { padding: .85rem 1.15rem; }
.wa-balao.digitando .wa-digitando { display: inline-flex; }
.wa-balao.digitando .wa-balao-texto,
.wa-balao.digitando .wa-balao-fechar { display: none; }

@keyframes wa-entrar {
  from { scale: .4; opacity: 0; }
  to   { scale: 1;  opacity: 1; }
}
@keyframes wa-pulso {
  0%        { transform: scale(1);         opacity: .6; }
  75%, 100% { transform: scale(1.14, 1.5); opacity: 0; }
}
/* Mesmo desenho com outro nome: trocar o nome é o que faz o pulso recomeçar. */
@keyframes wa-pulso-mensagem {
  0%        { transform: scale(1);         opacity: .6; }
  75%, 100% { transform: scale(1.14, 1.5); opacity: 0; }
}
@keyframes wa-ponto {
  0%, 60%, 100% { translate: 0 0;    opacity: .35; }
  30%           { translate: 0 -4px; opacity: 1; }
}

@media (max-width: 575.98px) {
  .wa-balao { max-width: min(260px, calc(100vw - 2.5rem)); }
}

/* == 19. Blocos de página ================================================= */

/* --- Hero da home -------------------------------------------------------- */
.hero-home {
  position: relative;
  background: var(--brand-dark);
  color: rgba(255, 255, 255, .8);
  overflow: hidden;
  isolation: isolate;
}
.hero-home::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(200, 169, 106, 0) 62%);
  z-index: 2;
}
.hero-home-bg { position: absolute; inset: 0; z-index: 0; }
.hero-home-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: .3;
}
.hero-home-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(102deg,
              var(--brand-dark) 6%, rgba(36, 28, 69, .88) 48%, rgba(36, 28, 69, .5) 100%);
}
/* Sem imagem: um gradiente sutil substitui a foto, nunca fica chapado */
.hero-home-liso::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -30%;
  height: 140%;
  background: radial-gradient(60% 60% at 22% 30%, rgba(78, 63, 140, .55), transparent 70%);
  z-index: 0;
}
.hero-home-inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding-block: clamp(3.75rem, 2.2rem + 9vw, 8rem);
}
.hero-home h1 {
  color: var(--white);
  font-size: var(--fs-display);
  line-height: 1.06;
  margin: 0;
}
.hero-home-sub {
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: rgba(255, 255, 255, .74);
  margin: 0;
  max-width: 60ch;
}
.hero-home-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);
}
.hero-home-selo {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.75rem;
  list-style: none;
  margin: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem) 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* --- Faixa de números ---------------------------------------------------- */
.numeros {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
@media (min-width: 576px) { .numeros { grid-template-columns: repeat(3, 1fr); } }
.numero-item {
  background: var(--white);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2.15rem) 1rem;
  text-align: center;
}
.secao-soft .numero-item { background: var(--white); }
.numero-valor {
  display: block;
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  line-height: 1;
  color: var(--brand);
}
.numero-label {
  display: block;
  margin-top: .65rem;
  font-size: var(--fs-xs);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Bloco institucional (texto + imagem) -------------------------------- */
.bloco-midia {
  position: relative;
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.bloco-midia::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 84px; height: 4px;
  background: var(--accent);
  z-index: 1;
}
.bloco-texto > *:last-child { margin-bottom: 0; }

/* --- Valores do escritório ----------------------------------------------- */
.valor-item {
  position: relative;
  height: 100%;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem) 0 0;
  border-top: 2px solid var(--line);
  transition: border-color var(--t-media);
}
.valor-item:hover { border-top-color: var(--accent); }
.valor-numero {
  display: block;
  font-family: var(--font-titulo);
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: .7rem;
}
.valor-item h3 { font-size: var(--fs-h4); margin: 0 0 .6rem; }
.valor-item p  { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.75; }

/* --- Perfil do advogado --------------------------------------------------- */
.perfil-topo {
  position: relative;
  background: var(--brand-dark);
  color: rgba(255, 255, 255, .78);
  padding-block: clamp(2.25rem, 1.8rem + 3vw, 4.25rem);
  overflow: hidden;
}
.perfil-topo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(200, 169, 106, 0) 62%);
}
/* A trilha herda as cores claras do bloco roxo, como no hero interno. */
.perfil-topo .breadcrumb-b { margin-bottom: 1.6rem; }
.perfil-topo .breadcrumb-b,
.perfil-topo .breadcrumb-b a { color: rgba(255, 255, 255, .6); }
.perfil-topo .breadcrumb-b a:hover { color: var(--accent); }
.perfil-topo .breadcrumb-b li + li::before { color: rgba(255, 255, 255, .28); }
.perfil-topo .breadcrumb-b [aria-current="page"] { color: rgba(255, 255, 255, .92); }

.perfil-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1.3rem + 2.4vw, 3rem);
  align-items: start;
}
@media (min-width: 768px) {
  .perfil-grid { grid-template-columns: minmax(200px, 290px) 1fr; }
}
.perfil-foto {
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  max-width: 290px;
}
.perfil-topo h1 { color: var(--white); margin: 0; }
.perfil-cargo {
  font-size: var(--fs-lg);
  color: var(--accent);
  margin: .85rem 0 0;
}
.perfil-oab {
  display: inline-block;
  margin-top: 1.1rem;
  padding: .3rem .9rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.perfil-resumo {
  margin: 1.5rem 0 0;
  max-width: 62ch;
  line-height: 1.8;
  color: rgba(255, 255, 255, .74);
}
.perfil-contatos {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.75rem;
  font-size: var(--fs-sm);
}
.perfil-contatos li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.perfil-contatos svg { flex: 0 0 auto; color: var(--accent); }
.perfil-contatos a { color: rgba(255, 255, 255, .78); word-break: break-word; }
.perfil-contatos a:hover { color: var(--accent); }
.perfil-redes { margin-top: 1.5rem; }
.perfil-redes a { color: rgba(255, 255, 255, .62); }
.perfil-redes a:hover { color: var(--accent); }

.perfil-formacao {
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  background: var(--bg-soft);
  border-radius: var(--raio-lg);
  border-left: 3px solid var(--accent);
}
.perfil-formacao h2 { font-size: var(--fs-h3); margin: 0 0 1rem; }

/* --- Barra do blog (busca + filtro de categorias) ------------------------- */
.blog-barra-secao { padding-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.blog-barra {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .blog-barra {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .blog-barra .busca-b { flex: 0 0 340px; }
  /* A navegação ocupa a sobra e os chips quebram para a esquerda, sem
     deixar uma segunda linha alinhada à direita "pendurada". */
  .blog-barra > nav { flex: 1 1 auto; min-width: 0; }
}
.blog-categorias { align-items: center; }
.blog-resultado { margin: 1.25rem 0 0; color: var(--muted); }
.blog-resultado strong { color: var(--ink); }
.link-limpar { margin-left: .5rem; text-decoration: underline; text-underline-offset: 3px; }

/* --- Artigo --------------------------------------------------------------- */
.artigo-topo {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.75rem, 1.4rem + 2.4vw, 3.25rem);
}
.artigo-topo .breadcrumb-b { margin-bottom: 1.5rem; }
.artigo-topo .badge-b { margin-bottom: 1.1rem; }
.artigo-titulo {
  font-size: var(--fs-h1);
  line-height: 1.12;
  margin: 0;
  max-width: 24ch;
}
.artigo-resumo {
  margin: 1.35rem 0 0;
  max-width: 62ch;
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--muted);
}
.artigo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.artigo-autor { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.artigo-autor img {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.artigo-autor-nome {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}
a.artigo-autor-nome:hover { color: var(--brand); }
.artigo-autor-cargo {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.artigo-figura {
  margin: clamp(1.75rem, 1.4rem + 2vw, 3rem) 0 0;
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.artigo-figura img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.artigo-credito {
  margin: .7rem 0 0;
  padding-inline: .15rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.artigo-corpo .prose { max-width: none; }
.artigo-tags { margin: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem) 0 0; }
.artigo-corpo .compartilhar { margin-top: 1.75rem; }

/* --- Card do autor ao pé do artigo ---------------------------------------- */
.card-autor {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  align-items: start;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  background: var(--bg-soft);
  border-radius: var(--raio-lg);
  border-left: 3px solid var(--accent);
}
@media (min-width: 576px) {
  .card-autor { grid-template-columns: 132px 1fr; }
}
.card-autor-foto {
  width: 132px;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  overflow: hidden;
}
.card-autor-foto img { width: 100%; height: 100%; object-fit: cover; }
.card-autor-nome { font-size: var(--fs-h4); margin: 0 0 .2rem; }
.card-autor-nome a { color: var(--ink); }
.card-autor-nome a:hover { color: var(--brand); }
.card-autor-bio { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* --- Página de contato --------------------------------------------------- */
.contato-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);
}
@media (min-width: 992px) {
  .contato-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

.contato-lista { list-style: none; margin: 2rem 0 0; padding: 0; }
.contato-lista li {
  display: flex;
  gap: .9rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.contato-lista li:first-child { border-top: 0; padding-top: 0; }
.contato-lista svg { flex: 0 0 auto; margin-top: .3em; color: var(--accent); }
.contato-rotulo {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .1rem;
}
.contato-valor { color: var(--ink); overflow-wrap: anywhere; }
a.contato-valor:hover { color: var(--brand); }
.contato-redes { margin-top: 1.75rem; }
.contato-redes a { color: var(--muted); border-color: var(--line); }

.contato-mapa {
  border: 1px solid var(--line);
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
  line-height: 0;
}
.contato-mapa iframe { display: block; width: 100%; border: 0; min-height: 300px; }

/* --- Bloco reutilizável do formulário de contato -------------------------- */
/* Usado solto na página de contato e dentro da faixa roxa do CTA (.form-card). */
.form-contato-titulo { font-size: var(--fs-h3); margin: 0 0 .5rem; }
.form-contato-texto  { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 1.75rem; }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  padding: clamp(1.4rem, 1rem + 1.8vw, 2.5rem);
}

.form-contato .campo-duplo { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 576px) {
  .form-contato .campo-duplo { grid-template-columns: 1fr 1fr; }
}
.form-contato textarea { min-height: 130px; }
.form-contato [data-form-aviso] { margin-bottom: 1.25rem; }
.form-contato [data-form-aviso][hidden] { display: none; }

.form-contato-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.25rem;
  margin-top: .35rem;
}
.form-contato-acoes .btn-b { flex: 0 0 auto; }
.form-contato-nota {
  flex: 1 1 220px;
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--muted);
}
.form-contato button[disabled] { opacity: .6; cursor: progress; }

/* CTA com o formulário embutido: texto de um lado, cartão branco do outro */
.cta-com-form .cta-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  align-items: start;
}
@media (min-width: 992px) {
  .cta-com-form .cta-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}
.cta-com-form .cta-contato-texto { font-size: var(--fs-base); }
.cta-com-form .cta-contato-acoes { margin-top: 1.75rem; }
.cta-com-form .form-card { color: var(--ink); }
.cta-com-form .form-contato-nota { color: var(--muted); }

/* == 20. Animação de entrada e utilitários ================================ */

/* O estado inicial só vale quando o JS está ativo (classe `js` no <html>),
   para o conteúdo nunca ficar invisível sem JavaScript. */
/* Usa a propriedade `translate`, não `transform`. Os dois compõem de forma
   independente, então a entrada do elemento não briga com o `transform` do
   hover — com `transform` aqui, `.js .reveal.visivel` (0,3,0) vencia
   `.card-b:hover` (0,2,0) e o card nunca chegava a subir.
   A `transition` daqui substitui a do componente enquanto ele é .reveal —
   por isso o site.js tira as classes `reveal`/`visivel` quando a entrada
   termina, e o hover volta a animar com a transição do próprio card.        */
.js .reveal {
  opacity: 0;
  translate: 0 20px;
  transition: opacity var(--t-lenta), translate var(--t-lenta);
  will-change: opacity, translate;
}
.js .reveal.visivel { opacity: 1; translate: none; }
.js .reveal[data-delay="1"] { transition-delay: .09s; }
.js .reveal[data-delay="2"] { transition-delay: .18s; }
.js .reveal[data-delay="3"] { transition-delay: .27s; }
.js .reveal[data-delay="4"] { transition-delay: .36s; }
.js .reveal[data-delay="5"] { transition-delay: .45s; }

.so-leitor {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lista-limpa { list-style: none; margin: 0; padding: 0; }
.rolagem-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.vazio {
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) 1.5rem;
  text-align: center;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: var(--raio-lg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; translate: none; }

  /* Zerar só a duração faria o deslocamento acontecer de uma vez — um salto
     instantâneo é exatamente o que quem pede menos movimento quer evitar.
     As mudanças de cor, borda e sombra continuam, então o hover segue
     perceptível sem nada se mexer.                                          */
  .btn-b:hover, .btn-b:active, .btn-b:focus-visible,
  .card-b:hover, .card-b:focus-within,
  .paginacao a:hover, .btn-share:hover, .tag-b:hover,
  .badge-b:hover, a.badge-brand:hover,
  .footer-links a:hover, .wa-flutuante:hover, .wa-flutuante:focus-visible { transform: none; }
  .wa-flutuante, .wa-flutuante::before, .wa-com-mensagem .wa-flutuante::before,
  .wa-digitando i { animation: none; }
  .wa-balao { translate: none; scale: 1; }

  .card-b:hover .foto-bw img, .card-b:focus-within .foto-bw img,
  .foto-bw:hover img, .foto-bw:focus-within img { transform: none; }
}

@media print {
  .site-header, .site-footer, .wa-widget, .compartilhar,
  .offcanvas-menu, .menu-backdrop, .cta-contato { display: none !important; }
  body { color: #000; }
  .prose { max-width: none; font-size: 11pt; }
}