/* ==========================================================================
   Liane Bestetti Advogados Associados — protótipo da homepage
   Design system: design/02-design-system.md
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --verde: #00510E;
  --verde-profundo: #003A0A;
  --verde-tint: #EBF0E9;   /* levemente aquecido para conversar com o dourado terroso */
  /* Dourado oficial extraído do logotipo (#98762B) */
  --dourado: #98762B;
  --dourado-btn: #8C6C26;      /* botão: 4,9:1 com texto branco (AA) */
  --dourado-btn-hover: #7C601F;
  --dourado-escuro: #6E541B;   /* texto dourado sobre fundo claro: 6,7:1 */
  --dourado-claro: #C9A24D;    /* dourado sobre fundos verdes escuros */
  --marfim: #FAF8F3;
  --branco: #FFFFFF;
  --cinza-apoio: #EFEDE7;
  --cinza-borda: #E4E1D9;
  --grafite: #26251F;
  --cinza-texto: #6B6960;
  --erro: #9B2C20;

  --serif: "Lora", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --container: 1200px;
  --radius: 4px;
  --sombra: 0 2px 12px rgba(38, 37, 31, 0.07);
  --transicao: 180ms ease;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--grafite);
  background: var(--marfim);
}
img { max-width: 100%; height: auto; display: block; }
ul { padding: 0; margin: 0; }
address { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(28px, 3vw, 36px); }
h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(18px, 1.6vw, 20px); color: var(--cinza-texto); max-width: 34em; }

.overline {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cinza-texto);
  margin: 0 0 20px;
}
.overline-rule { display: inline-block; width: 46px; height: 3px; background: var(--dourado); }
.overline-center { justify-content: center; }
.overline-rule-solo { display: block; width: 46px; height: 3px; background: var(--dourado); margin: 0 auto 24px; }

/* ---------- Utilitários ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 768px; }
.section { padding: 96px 0; }
.section-tint { background: var(--verde-tint); }
.section-apoio { background: var(--cinza-apoio); }
.section-head { margin-bottom: 48px; }
.section-head-center { text-align: center; }
.section-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--verde); color: var(--branco); padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:is(a, button, summary):focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-radius: 2px;
}

.pendente { font-size: 0.8em; color: var(--erro); letter-spacing: 0.02em; }

/* ---------- Botões e links ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  padding: 14px 28px; border-radius: var(--radius);
  text-decoration: none; text-align: center;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
/* Com o dourado oficial (mais escuro), o texto branco tem melhor contraste
   que o grafite: 4,9:1 contra 3,6:1. */
.btn-primary { background: var(--dourado-btn); color: var(--branco); }
.btn-primary:hover { background: var(--dourado-btn-hover); }
.btn-secondary { background: transparent; color: var(--verde); border-color: var(--verde); }
.btn-secondary:hover { background: var(--verde-tint); }
.btn-lg { padding: 16px 36px; }
.btn-block { display: block; width: 100%; }

a { color: var(--verde); }
a:hover { color: var(--verde-profundo); }

.link-arrow {
  display: inline-block;
  color: var(--verde); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px;
}
.link-arrow::after { content: " →"; text-decoration: none; }
.link-arrow:hover { color: var(--verde-profundo); }

/* ---------- Placeholders de imagem (fotos pendentes) ---------- */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: var(--verde-tint); border: 1px solid var(--cinza-borda);
  position: relative;
}
.ph::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--dourado);
}
.ph-mono {
  font-family: var(--serif); font-size: 40px; color: var(--verde);
  border: 1.5px solid var(--verde); padding: 8px 14px;
}
.ph-caption { font-size: 13px; color: var(--cinza-texto); text-align: center; line-height: 1.4; }
.ph-hero { aspect-ratio: 1 / 1; }
.ph-tall { aspect-ratio: 11 / 9; }
.ph-retrato { aspect-ratio: 3 / 4; }
.ph-post { aspect-ratio: 16 / 9; }
.ph-post-sm { aspect-ratio: 16 / 9; }
.ph-post::before, .ph-post-sm::before { display: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--marfim);
  border-bottom: 1px solid var(--cinza-borda);
  transition: box-shadow var(--transicao);
}
.site-header.is-scrolled { box-shadow: var(--sombra); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 88px;
}
.site-header.is-scrolled .header-inner { height: 72px; }

/* PNG com transparência: sem necessidade de blend mode */
.brand img { width: 200px; height: auto; }

.main-nav ul { display: flex; gap: 28px; list-style: none; }
.main-nav a {
  font-size: 16px; color: var(--grafite); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  color: var(--verde); border-bottom-color: var(--dourado);
}

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-phone {
  display: none;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  color: var(--verde); border: 1.5px solid var(--verde); border-radius: 50%;
}
.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none; padding: 10px; cursor: pointer;
}
.menu-toggle-bars { display: flex; flex-direction: column; gap: 5px; }
.menu-toggle-bars span { display: block; height: 2px; background: var(--grafite); }

/* Menu mobile */
.mobile-menu[hidden] { display: none; }
.mobile-menu {
  position: fixed; inset: 64px 0 0 0; z-index: 40;
  background: var(--marfim);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px 24px; overflow-y: auto;
}
.mobile-menu ul { list-style: none; }
.mobile-menu li + li { border-top: 1px solid var(--cinza-borda); }
.mobile-menu a:not(.btn) {
  display: block; padding: 16px 4px;
  font-size: 20px; font-weight: 600; color: var(--grafite); text-decoration: none;
}
.mobile-menu a:not(.btn):hover { color: var(--verde); }
.mobile-menu-footer { margin-top: 32px; }
.mobile-menu-phones { text-align: center; margin: 16px 0 0; }
body.menu-aberto { overflow: hidden; }

/* ==========================================================================
   Hero — slider de fotos produzidas (1500x460)
   ========================================================================== */
.hero-slider {
  position: relative;
  /* altura generosa: ocupa a maior parte da primeira dobra, deixando a
     faixa de apoio visível como convite à rolagem */
  height: clamp(600px, calc(100vh - 88px), 820px);
  overflow: hidden;
  background: var(--verde-profundo);
}
.slides, .slide { position: absolute; inset: 0; }
.slide {
  opacity: 0;
  transition: opacity 1100ms ease;
}
.slide.is-active { opacity: 1; }
.slide img, .slide picture {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* Movimento lento de aproximação: dá vida à foto sem virar animação chamativa */
.slide img { transform: scale(1.04); transition: transform 7s linear; }
.slide.is-active img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .slide img, .slide.is-active img { transform: none; }
}

/* Foto editorial (seções institucionais): filete dourado à esquerda */
.foto-editorial {
  width: 100%;
  border-left: 4px solid var(--dourado);
}

/* Retrato de perfil profissional */
.foto-retrato {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover; object-position: center top;
  border-bottom: 4px solid var(--dourado);
}

/* Foto de equipe */
.foto-equipe { margin: 0 auto 64px; max-width: 900px; }
.foto-equipe img { width: 100%; border-bottom: 4px solid var(--dourado); }
.foto-equipe figcaption {
  font-size: 14px; color: var(--cinza-texto);
  padding-top: 12px;
}

/* ==========================================================================
   Galeria do escritório
   ========================================================================== */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}
.galeria-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--verde-profundo);
}
.galeria-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.galeria-item:hover img { transform: scale(1.04); }
.galeria-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 16px 12px;
  font-size: 14px; font-weight: 600; color: var(--branco);
  background: linear-gradient(180deg, rgba(0, 28, 6, 0) 0%, rgba(0, 28, 6, 0.75) 100%);
}
/* Destaque ocupa 2x2 no grid */
.galeria-destaque { grid-column: span 2; grid-row: span 2; }
.galeria-destaque figcaption { font-size: 16px; padding: 36px 20px 16px; }

/* Scrim para legibilidade do texto sobre qualquer foto */
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center;
}
.hero-overlay .container { width: 100%; }
.hero-overlay {
  /* scrim mais leve e concentrado à esquerda: a foto respira à direita
     e o texto continua com contraste AA sobre o lado escuro */
  background:
    linear-gradient(90deg,
      rgba(0, 28, 6, 0.80) 0%,
      rgba(0, 28, 6, 0.55) 38%,
      rgba(0, 28, 6, 0.12) 66%,
      rgba(0, 28, 6, 0) 82%),
    linear-gradient(180deg,
      rgba(0, 28, 6, 0.25) 0%,
      rgba(0, 28, 6, 0) 30%);
}
.hero-content { max-width: 660px; }
.hero-content h1 {
  color: var(--branco); margin-bottom: 20px;
  font-size: clamp(34px, 4vw, 56px);
  text-shadow: 0 1px 24px rgba(0, 20, 4, 0.35);
}
.hero-content .lead { color: #DCE7DD; }
/* Hero da home: as três áreas empilhadas como título */
.hero-areas { display: flex; flex-direction: column; gap: 6px; }
.hero-areas span { display: block; }
.overline-clara { color: #CBD9CD; }
.hero-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 32px 0 0; }
.link-arrow-claro { color: var(--branco); }
.link-arrow-claro:hover { color: #DCE7DD; }

/* Controles do slider */
.slider-controls {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3;
}
.slider-controls-inner { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.slider-arrow {
  width: 44px; height: 44px;
  background: rgba(0, 32, 7, 0.45);
  color: var(--branco);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background-color var(--transicao);
}
.slider-arrow:hover { background: rgba(0, 32, 7, 0.75); }
.slider-dots { display: flex; gap: 10px; }
.slider-dot {
  width: 12px; height: 12px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--branco);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transicao);
}
.slider-dot[aria-selected="true"] { background: var(--dourado-claro); border-color: var(--dourado-claro); }
.slider-dot:hover { background: rgba(255, 255, 255, 0.6); }

/* Faixa de apoio sob o hero */
.hero-meta-band { border-bottom: 1px solid var(--cinza-borda); background: var(--marfim); }
.hero-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 18px;
  font-size: 15px;
}
.hero-meta span { color: var(--cinza-texto); }

/* ==========================================================================
   Institucional (split 2 colunas)
   ========================================================================== */
.split {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 64px; align-items: center;
}
.split-content h2 { margin-bottom: 20px; }
.split-content .btn { margin-top: 12px; }

/* ==========================================================================
   Áreas de atuação
   ========================================================================== */
.areas-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.card-area {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-top: 3px solid transparent;
  border-radius: var(--radius);
  padding: 36px 32px;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}
.card-area:hover { box-shadow: var(--sombra); border-top-color: var(--dourado); }
/* Áreas de ênfase (Família e Sucessões): filete dourado permanente */
.card-area-enfase { border-top-color: var(--dourado); }
.card-area h3 { margin-bottom: 8px; }
.card-area h3 a { color: var(--grafite); text-decoration: none; }
.card-area h3 a::after { content: ""; position: absolute; inset: 0; } /* card inteiro clicável */
.card-area { position: relative; }
.card-area:hover h3 a { color: var(--verde); }
.card-area > p { color: var(--cinza-texto); font-size: 15px; }
.card-area ul { list-style: none; margin: 8px 0 4px; }
.card-area li {
  padding: 7px 0 7px 20px; position: relative;
  font-size: 15.5px; border-bottom: 1px solid var(--cinza-apoio);
}
.card-area li:last-child { border-bottom: 0; }
.card-area li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 8px; height: 2px; background: var(--dourado);
}
.card-more { font-size: 14px; color: var(--cinza-texto); margin: 4px 0 0; }
.card-area .link-arrow { margin-top: auto; padding-top: 20px; align-self: flex-start; position: relative; z-index: 1; }
.card-area:hover .link-arrow { color: var(--verde-profundo); }

/* ==========================================================================
   Como podemos ajudar
   ========================================================================== */
.ajudar-list {
  list-style: none;
  columns: 2; column-gap: 64px;
  margin: 0 0 40px; max-width: 980px;
}
.ajudar-list li {
  break-inside: avoid;
  padding: 14px 0 14px 32px; position: relative;
  font-size: 18px;
  border-bottom: 1px solid var(--cinza-borda);
}
.ajudar-list li::before {
  content: ""; position: absolute; left: 0; top: 26px;
  width: 18px; height: 2px; background: var(--dourado);
}

/* ==========================================================================
   Advogadas
   ========================================================================== */
.perfil {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: 64px; align-items: center;
  padding: 56px 0;
}
.perfil + .perfil { border-top: 1px solid var(--cinza-borda); }
.perfil-invertido { grid-template-columns: 7fr 5fr; }
.perfil-invertido .perfil-media { order: 2; }
.perfil-invertido .perfil-content { order: 1; }
.perfil-media { max-width: 440px; width: 100%; }
.perfil-invertido .perfil-media { margin-left: auto; }
.perfil h3 { font-size: 28px; margin-bottom: 4px; }
.perfil-cargo {
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dourado-escuro);
  margin-bottom: 20px;
}
.perfil-content p:not(.perfil-cargo) { color: var(--cinza-texto); max-width: 56em; }

/* Agrupamento da página Equipe (Sócias / Advogados) */
.grupo-titulo {
  font-size: 15px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dourado-escuro);
}
.grupo-advogados { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--cinza-borda); }
.grupo-advogados + .perfil { border-top: 0; padding-top: 0; }

/* ==========================================================================
   Carrossel (equipe na home / espaço em Quem somos)
   ========================================================================== */
.equipe-split {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px; align-items: center;
}
.equipe-intro h2 { margin-bottom: 20px; }
.equipe-intro p { color: var(--cinza-texto); margin-bottom: 24px; }

.carrossel { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.carrossel-viewport { overflow: hidden; flex: 1 1 0; min-width: 0; }
.carrossel-track {
  display: flex; gap: var(--carrossel-gap, 16px);
  list-style: none; margin: 0; padding: 0;
  transition: transform var(--transicao);
}
.carrossel-item {
  flex: 0 0 var(--carrossel-item-w, 33.333%);
  min-width: 0;
}
.carrossel-item figure { margin: 0; }
.carrossel-item img, .carrossel-item .ph {
  width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover; display: block;
}
/* Fotos de ambiente são horizontais: mantêm o enquadramento original */
.carrossel-paisagem .carrossel-item img { aspect-ratio: 4 / 3; }

/* Carrossel alto: mistura fotos verticais e horizontais na mesma moldura.
   O quadro 4/5 é alto o bastante para a vertical perder pouco, e o
   object-fit recorta as horizontais sem alterar os arquivos. */
.carrossel-alto { gap: 0; }
.carrossel-alto .carrossel-seta {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  background: rgba(0, 32, 7, 0.72);
  box-shadow: 0 2px 10px rgba(0, 20, 4, 0.25);
}
.carrossel-alto .carrossel-seta:hover { background: var(--verde-profundo); }
/* Sobre a foto, o estado desabilitado precisa continuar legível */
.carrossel-alto .carrossel-seta[disabled] { opacity: 0.55; }
.carrossel-alto .carrossel-seta[disabled]:hover { background: rgba(0, 32, 7, 0.72); }
.carrossel-alto .carrossel-seta-prev { left: 0; }
.carrossel-alto .carrossel-seta-next { right: 0; }
.carrossel-alto .carrossel-item img {
  aspect-ratio: 4 / 3;
  /* A vertical é enquadrada a partir do topo: preserva mesa, estante e janelas,
     descartando sobretudo o piso vazio do primeiro plano. */
  object-position: center 22%;
  border-left: 4px solid var(--dourado);
}
.carrossel-alto .carrossel-item figcaption {
  font-family: var(--serif); font-size: 15px;
  letter-spacing: 0.04em; text-transform: none;
  color: var(--cinza-texto);
}
.carrossel-item figcaption {
  margin-top: 12px; text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--verde-profundo);
}
.carrossel-seta {
  flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; cursor: pointer;
  background: var(--verde); color: #fff; border: 0;
  transition: background var(--transicao);
}
.carrossel-seta:hover { background: var(--verde-profundo); }
.carrossel-seta[disabled] { opacity: 0.35; cursor: default; }
.carrossel-seta[disabled]:hover { background: var(--verde); }

/* ==========================================================================
   Experiência e confiança
   ========================================================================== */
.experiencia { padding: 72px 0; }
.experiencia-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;
}
.pilar { border-top: 3px solid var(--dourado); padding-top: 20px; }
.pilar h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.pilar p { font-size: 15px; color: var(--cinza-texto); margin: 0; }

/* ==========================================================================
   Notícias e artigos
   ========================================================================== */
.noticias-grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: 48px;
  align-items: start;
}
.post-destaque .post-body { padding-top: 24px; }
.post-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--cinza-texto);
  margin-bottom: 12px;
}
.badge {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--verde-tint); color: var(--verde);
  padding: 4px 10px; border-radius: 2px;
}
.badge-alt { background: var(--cinza-apoio); color: var(--cinza-texto); }
.post-destaque h3 { font-size: 24px; }
.post-destaque h3 a, .post-card h3 a { color: var(--grafite); text-decoration: none; }
.post-destaque h3 a:hover, .post-card h3 a:hover { color: var(--verde); text-decoration: underline; }
.post-resumo { color: var(--cinza-texto); }

.posts-recentes { display: flex; flex-direction: column; gap: 28px; }
.post-card {
  display: grid; grid-template-columns: 150px 1fr; gap: 4px 20px;
  align-items: start;
}
.post-card .ph-post-sm { grid-row: 1 / 3; }
.post-card .post-meta { margin-bottom: 4px; }
.post-card h3 { font-size: 17px; font-family: var(--sans); font-weight: 600; line-height: 1.4; margin: 0; }

/* ==========================================================================
   CTA de conversão
   ========================================================================== */
.cta-final {
  background: var(--verde);
  color: var(--branco);
  padding: 96px 0;
  text-align: center;
}
.cta-final h2 { color: var(--branco); }
.cta-final p { color: #DCE7DD; max-width: 38em; margin-left: auto; margin-right: auto; }
.cta-final .btn { margin: 20px 0 28px; }
.cta-phones { font-size: 18px; }
.cta-phones a { color: var(--branco); font-weight: 600; text-decoration: none; }
.cta-phones a:hover { text-decoration: underline; }
.cta-phones span { margin: 0 12px; color: #DCE7DD; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-item { border-bottom: 1px solid var(--cinza-borda); }
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px;
  font-size: 17px; font-weight: 600;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--serif); font-size: 24px; color: var(--verde);
  flex-shrink: 0;
  transition: transform var(--transicao);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--verde); }
.faq-answer { padding: 0 4px 20px; color: var(--cinza-texto); max-width: 60em; }
.faq-answer p { margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--verde-profundo);
  color: #DCE7DD;
  border-top: 2px solid var(--dourado);
  padding: 72px 0 0;
  font-size: 15px;
}
.footer-grid {
  display: grid; grid-template-columns: 4fr 2fr 3fr 3fr;
  gap: 48px;
  padding-bottom: 56px;
}
.footer-logo-img {
  width: 220px; max-width: 100%; height: auto;
  margin-bottom: 20px;
}
.footer-desc { color: #BFD2C2; max-width: 30em; }
.footer-col h3 {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dourado-claro); margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #DCE7DD; text-decoration: none; }
.footer-col a:hover { color: var(--branco); text-decoration: underline; }
.footer-phones { margin-top: 12px; }
.footer-phones a { font-weight: 600; }
.footer-legal {
  border-top: 1px solid #1C5227;
  padding-top: 24px; padding-bottom: 24px;
  font-size: 13px; color: #BFD2C2;
}
.footer-legal a { color: #BFD2C2; }
.footer-legal p { margin: 0; }

/* ==========================================================================
   WhatsApp
   ========================================================================== */
.link-whatsapp {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none;
}
.link-whatsapp:hover { text-decoration: underline; }
.link-whatsapp svg { flex-shrink: 0; }

/* Botão flutuante — discreto, canto inferior direito */
.whatsapp-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--verde); color: var(--branco);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(38, 37, 31, 0.22);
  transition: background-color var(--transicao), transform var(--transicao);
}
.whatsapp-flutuante:hover {
  background: var(--verde-profundo); color: var(--branco);
  transform: translateY(-2px);
}

/* ==========================================================================
   Páginas internas
   ========================================================================== */
.page-header {
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
  padding: 56px 0;
}
.breadcrumb {
  font-size: 14px; color: var(--cinza-texto);
  margin: 0 0 20px;
}
.breadcrumb a { color: var(--cinza-texto); }
.breadcrumb a:hover { color: var(--verde); }
.page-header h1 { font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 12px; }
.page-header .lead { margin-bottom: 0; }

/* Layout com sidebar (páginas de área) */
.area-layout {
  display: grid; grid-template-columns: 8fr 4fr;
  gap: 64px; align-items: start;
}
.area-conteudo h2 { margin-top: 40px; font-size: 26px; }
.area-conteudo h2:first-child { margin-top: 0; }
.area-conteudo ul { margin: 0 0 1em 0; padding-left: 0; list-style: none; }
.area-conteudo li {
  padding: 8px 0 8px 24px; position: relative;
  border-bottom: 1px solid var(--cinza-apoio);
}
.area-conteudo li::before {
  content: ""; position: absolute; left: 2px; top: 19px;
  width: 10px; height: 2px; background: var(--dourado);
}
.sidebar { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 24px; }
.sidebar-box {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius);
  padding: 28px;
}
.sidebar-box h2 {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cinza-texto); margin-bottom: 16px;
}
.sidebar-box ul { list-style: none; }
.sidebar-box li { margin-bottom: 10px; }
.sidebar-cta { background: var(--verde); border: 0; color: var(--branco); }
.sidebar-cta h2 { color: var(--dourado-claro); }
.sidebar-cta p { color: #DCE7DD; font-size: 15px; }
.sidebar-cta .btn { display: block; }
.sidebar-cta a[href^="tel"] { color: var(--branco); font-weight: 600; text-decoration: none; }

/* Blocos de valores (Sobre) */
.valores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }

/* Lista de temas em 2 colunas (índice de áreas) */
.titulo-area-link { color: inherit; text-decoration: none; }.titulo-area-link:hover { color: var(--verde); text-decoration: underline; text-underline-offset: 4px; }
.lista-temas { columns: 2; column-gap: 48px; max-width: 760px; list-style: none; margin-bottom: 24px; }
.lista-temas li {
  break-inside: avoid;
  padding: 8px 0 8px 24px; position: relative;
  border-bottom: 1px solid var(--cinza-apoio);
}
.lista-temas li::before {
  content: ""; position: absolute; left: 2px; top: 19px;
  width: 10px; height: 2px; background: var(--dourado);
}

/* Filtros do blog */
.filtros { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.filtro {
  font-size: 14px; font-weight: 600;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--cinza-borda);
  color: var(--grafite); text-decoration: none;
  background: var(--branco);
  transition: border-color var(--transicao), color var(--transicao);
}
.filtro:hover { border-color: var(--verde); color: var(--verde); }
.filtro-ativo { background: var(--verde); border-color: var(--verde); color: var(--branco); }
.filtro-ativo:hover { color: var(--branco); }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.archive-grid .post-card { display: block; }
.archive-grid .post-card .ph-post-sm { margin-bottom: 16px; }
.archive-grid .post-card h3 { font-size: 19px; }
.paginacao { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.paginacao a, .paginacao span {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  font-weight: 600; text-decoration: none;
  border: 1px solid var(--cinza-borda); border-radius: var(--radius);
  color: var(--grafite);
}
.paginacao .pagina-atual { background: var(--verde); border-color: var(--verde); color: var(--branco); }
.paginacao a:hover { border-color: var(--verde); color: var(--verde); }

/* Formulário de contato */
.contato-layout {
  display: grid; grid-template-columns: 7fr 5fr;
  gap: 64px; align-items: start;
}
.form-campo { margin-bottom: 24px; }
.form-campo label {
  display: block;
  font-weight: 600; font-size: 15px;
  margin-bottom: 8px;
}
.form-campo input, .form-campo textarea {
  width: 100%;
  font-family: var(--sans); font-size: 16px; color: var(--grafite);
  background: var(--branco);
  border: 1px solid var(--cinza-borda); border-radius: var(--radius);
  padding: 12px 14px;
}
.form-campo input:focus, .form-campo textarea:focus {
  outline: 2px solid var(--verde); outline-offset: 0;
  border-color: var(--verde);
}
.form-campo textarea { min-height: 160px; resize: vertical; }
.form-aviso { font-size: 14px; color: var(--cinza-texto); margin-bottom: 24px; }
.contato-info h2 {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cinza-texto); margin: 32px 0 12px;
}
.contato-info h2:first-child { margin-top: 0; }
.contato-info a[href^="tel"] { font-weight: 600; text-decoration: none; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1100px) {
  .main-nav ul { gap: 18px; }
  .hero-grid, .split { gap: 48px; }
}

@media (max-width: 991px) {
  .section { padding: 72px 0; }
  .areas-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .experiencia-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .galeria-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .galeria-destaque { grid-column: span 2; grid-row: span 1; }
  .noticias-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .perfil { grid-template-columns: 5fr 7fr; gap: 40px; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .container { padding: 0 20px; }

  /* Header mobile */
  .header-inner { height: 64px; }
  .site-header.is-scrolled .header-inner { height: 64px; }
  .brand img { width: 150px; }
  .main-nav, .header-cta { display: none; }
  .header-phone { display: inline-flex; }
  .menu-toggle { display: block; }

  /* Hero slider: no mobile a foto 1500x460 é cortada nas laterais
     (object-fit: cover). Ideal: recortes verticais via <picture>. */
  .hero-slider { height: clamp(560px, calc(100vh - 64px), 720px); }
  .hero-overlay {
    align-items: flex-end;
    padding-bottom: 96px;
    background: linear-gradient(180deg,
      rgba(0, 32, 7, 0.20) 0%,
      rgba(0, 32, 7, 0.55) 45%,
      rgba(0, 32, 7, 0.88) 100%);
  }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .link-arrow { text-align: center; }
  .slider-controls { bottom: 16px; }
  .slider-controls-inner { justify-content: center; }
  .hero-meta { flex-direction: column; gap: 4px; }

  /* Institucional: texto primeiro */
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-media { order: 2; }
  .split-content { order: 1; }

  .ajudar-list { columns: 1; }
  .ajudar .btn { display: block; }

  .perfil { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .perfil-invertido .perfil-media { order: 1; }
  .perfil-invertido .perfil-content { order: 2; }
  .ph-retrato, .perfil-media { max-width: 320px; }

  .galeria-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .galeria-destaque { grid-column: span 1; }
  .foto-equipe { margin-bottom: 32px; }

  .post-card { grid-template-columns: 110px 1fr; }

  .cta-final { padding: 72px 0; }
  .cta-final .btn { display: block; }
  .cta-phones a { display: inline-block; padding: 6px 0; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }

  /* Páginas internas */
  .area-layout, .contato-layout { grid-template-columns: 1fr; gap: 40px; }
  .sidebar { position: static; }
  .valores-grid { grid-template-columns: 1fr; gap: 28px; }
  .equipe-split { grid-template-columns: 1fr; gap: 32px; }
  .lista-temas { columns: 1; }
  .archive-grid { grid-template-columns: 1fr; }
  .page-header { padding: 40px 0; }
}

@media (max-width: 479px) {
  .experiencia-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Aviso de golpe (bloco temporário — ver comentário no HTML)
   ========================================================================== */
.aviso-golpe { background: var(--erro); color: var(--branco); }
.aviso-golpe-off { display: none !important; }

.aviso-golpe-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px 20px; flex-wrap: wrap;
}
.aviso-golpe-titulo {
  margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600;
  letter-spacing: 0.01em;
}
.aviso-golpe-icone { margin-right: 8px; font-size: 18px; }
.aviso-golpe-resumo { font-weight: 400; }

.aviso-golpe-btn {
  flex-shrink: 0;
  background: var(--branco); color: var(--erro);
  border: 0; border-radius: var(--radius);
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 9px 18px; cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.aviso-golpe-btn:hover { background: #F6E9E7; }
.aviso-golpe-btn::after { content: " ▾"; }
.aviso-golpe-btn[aria-expanded="true"]::after { content: " ▴"; }
.aviso-golpe :is(a, button):focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; }

.aviso-golpe-detalhe { background: #7E231A; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.aviso-golpe-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 28px 20px 32px;
}
.aviso-golpe-col h2 {
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  color: var(--branco); margin: 0 0 12px; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.aviso-golpe-col ul { list-style: none; margin: 0; padding: 0; }
.aviso-golpe-col li {
  position: relative; padding: 6px 0 6px 20px;
  font-size: 15.5px; line-height: 1.5;
}
.aviso-golpe-col li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 8px; height: 2px; background: var(--dourado-claro);
}
.aviso-golpe-col a { color: var(--branco); font-weight: 600; }
.aviso-golpe-col a:hover { color: #F6E9E7; }

.aviso-golpe-logo {
  margin: 16px 0 0; padding: 16px 20px;
  background: var(--branco); border-radius: var(--radius);
  display: inline-block; max-width: 100%;
}
.aviso-golpe-logo img { display: block; width: 200px; height: auto; }
.aviso-golpe-logo figcaption {
  margin-top: 8px; font-size: 13px; color: var(--cinza-texto);
}

@media (max-width: 860px) {
  .aviso-golpe-barra { padding: 10px 20px; gap: 12px; }
  .aviso-golpe-titulo { font-size: 15px; }
  .aviso-golpe-btn { width: 100%; }
  .aviso-golpe-grid { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px 28px; }
}