/* ============================================================
   Site institucional VGV — o que é só do site (menu, áreas,
   posts, rodapé). A base visual vem de main.css + lp.css,
   os mesmos das LPs, para a marca ficar idêntica nos dois domínios.
   ============================================================ */

/* ---------- CABEÇALHO ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--vgv-borda);
}
.topo__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 72px;
}
.topo__logo img { display: block; height: 38px; width: auto; }
.topo__nav { display: flex; align-items: center; gap: 1.75rem; }
.topo__nav a {
  color: var(--vgv-preto);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
}
.topo__nav a:hover,
.topo__nav a[aria-current="page"] { border-bottom-color: var(--vgv-dourado); }
.topo__nav .btn { padding: 0.6rem 1.1rem; font-size: 0.875rem; border-bottom: 0; }
.topo__nav .btn:hover { border-bottom: 0; }

/* Menu do celular sem JS: <details> */
.topo__menu { display: none; }
.topo__menu summary {
  list-style: none;
  cursor: pointer;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--vgv-borda);
  border-radius: 6px;
}
.topo__menu summary::-webkit-details-marker { display: none; }
.topo__menu-painel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--vgv-borda);
  padding: 0.5rem 1rem 1.25rem;
  display: flex; flex-direction: column;
}
.topo__menu-painel a {
  color: var(--vgv-preto);
  text-decoration: none;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--vgv-borda);
  font-weight: 500;
}
.topo__menu-painel .btn { margin-top: 1rem; justify-content: center; border-bottom: 0; color: #fff; }

/* Hero do site fica um pouco mais baixo que o das LPs (há cabeçalho acima) */
.hero.hero--site { min-height: 78vh; }
/* lp.css pinta .hero de preto; o hero claro precisa vencer essa regra */
.hero.hero--claro {
  background:
    radial-gradient(circle at 92% 8%, rgba(194, 154, 61, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 8% 96%, rgba(159, 120, 48, 0.10) 0%, transparent 38%),
    var(--vgv-bege);
  color: var(--vgv-preto);
}
.hero.hero--claro .hero__title { color: var(--vgv-preto); }
.hero.hero--claro .hero__lead { color: var(--vgv-cinza-texto); }
.hero--site .hero__content { padding: var(--space-lg) 0; }
.hero__lead { font-size: 1.125rem; line-height: 1.55; max-width: 680px; margin: 0 0 var(--space-md); }
.section--dark .hero__lead { color: #D6D6D6; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.hero__trust { font-size: var(--fs-pequeno); color: var(--vgv-cinza-claro); }
.hero--claro .hero__trust { color: var(--vgv-cinza-suave); }
.btn--claro { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.55); }
.btn--claro:hover { background: #fff; color: var(--vgv-preto); }

/* ---------- ÁREAS (home) ---------- */
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.area {
  background: #fff;
  border: 1px solid var(--vgv-borda);
  border-top: 3px solid var(--vgv-dourado);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex; flex-direction: column;
}
.area__eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vgv-dourado-mostarda); font-weight: 600; }
.area h3 { font-family: var(--vgv-font-titulo); font-size: 1.6rem; margin: 0.35rem 0 0.75rem; }
.area p { color: var(--vgv-cinza-texto); margin: 0 0 1rem; text-align: justify; hyphens: auto; }
.area ul { list-style: none; margin: 0 0 1.5rem; padding: 0; columns: 2; column-gap: 1.5rem; }
.area li { position: relative; padding-left: 1rem; font-size: 0.9rem; line-height: 1.45; margin-bottom: 0.5rem; break-inside: avoid; color: var(--vgv-cinza-texto); }
.area li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--vgv-dourado); }
.area .btn { margin-top: auto; align-self: flex-start; }

/* ---------- LISTA DE SERVIÇOS (página de área) ---------- */
.servico ul { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.servico li { position: relative; padding-left: 1rem; font-size: 0.875rem; color: var(--vgv-cinza-texto); margin-bottom: 0.35rem; }
.servico li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--vgv-dourado); }
.servico__tag { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--vgv-azul-lavanda); color: var(--vgv-preto); padding: 0.2rem 0.55rem; border-radius: 3px; margin-bottom: 0.6rem; }
.outros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.outros div { border-top: 1px solid var(--vgv-borda); padding-top: 0.8rem; }
.outros strong { display: block; font-size: 0.975rem; margin-bottom: 0.25rem; }
.outros span { font-size: 0.875rem; color: var(--vgv-cinza-texto); }

/* ---------- CONTATO ---------- */
.contatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.contato { background: #fff; border: 1px solid var(--vgv-borda); border-radius: var(--radius-md); padding: var(--space-md); }
.contato__t { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vgv-dourado-mostarda); font-weight: 600; }
.contato__v { font-family: var(--vgv-font-titulo); font-size: 1.35rem; margin: 0.35rem 0 0.25rem; }
.contato p { font-size: 0.9rem; color: var(--vgv-cinza-texto); margin: 0 0 1rem; }

/* ---------- ARTIGOS (cards) ---------- */
.artigos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.artigo-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--vgv-borda); border-radius: var(--radius-md); padding: var(--space-md); transition: transform .2s, box-shadow .2s; }
.artigo-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.artigo-card__meta { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vgv-dourado-mostarda); font-weight: 600; }
.artigo-card h3 { font-family: var(--vgv-font-titulo); font-size: 1.2rem; line-height: 1.3; margin: 0.5rem 0; }
.artigo-card p { font-size: 0.9rem; color: var(--vgv-cinza-texto); margin: 0 0 1rem; }
.artigo-card__cta { margin-top: auto; font-weight: 600; color: var(--vgv-dourado-mostarda); font-size: 0.9rem; }

/* ---------- POST ---------- */
.post-topo { background: var(--vgv-bege); padding: var(--space-lg) 0 var(--space-md); }
.migalha { font-size: 0.8125rem; color: var(--vgv-cinza-suave); margin-bottom: 1rem; }
.migalha a { color: var(--vgv-cinza-suave); text-decoration: none; }
.migalha a:hover { color: var(--vgv-preto); }
.post-topo h1 { font-family: var(--vgv-font-titulo); font-size: clamp(1.75rem, 2.2vw + 1rem, 2.6rem); line-height: 1.18; margin: 0 0 1rem; max-width: 820px; }
.post-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--vgv-cinza-texto); }
.post-meta img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; }
.post-meta strong { color: var(--vgv-preto); }

.prose { max-width: 720px; margin: 0 auto; padding: var(--space-md) 0 var(--space-lg); font-size: 1.0625rem; line-height: 1.75; color: #2B2B2B; }
.prose p { margin: 0 0 1.15rem; }
.prose h2 { font-family: var(--vgv-font-titulo); font-size: 1.6rem; line-height: 1.25; margin: 2.5rem 0 1rem; scroll-margin-top: 90px; }
.prose h3 { font-family: var(--vgv-font-titulo); font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.prose a { color: #8A6A28; text-underline-offset: 3px; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.45rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--vgv-borda); padding: 0.6rem 0.5rem; text-align: left; vertical-align: top; }
.prose th { background: var(--vgv-preto); color: #fff; font-weight: 600; font-size: 0.8125rem; }
.prose details { border-top: 1px solid var(--vgv-borda); padding: 0.8rem 0; }
.prose details summary { cursor: pointer; font-weight: 600; }

/* Blocos que a skill artigo-blog-seo gera */
.vgv-tldr { background: var(--vgv-bege); border-left: 3px solid var(--vgv-dourado); border-radius: 6px; padding: 1.2rem 1.4rem; margin: 0 0 1.75rem; }
.vgv-tldr ul { margin: 0; padding-left: 1.1rem; font-size: 0.975rem; }
.vgv-tldr__label, .vgv-toc__label, .vgv-cta__label { font-size: 0.75rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vgv-dourado-mostarda); font-weight: 700; margin: 0 0 0.6rem !important; }
.vgv-toc { border: 1px solid var(--vgv-borda); border-radius: 6px; padding: 1.1rem 1.4rem; margin: 0 0 2rem; }
.vgv-toc ol { margin: 0; padding-left: 1.2rem; font-size: 0.95rem; }
.vgv-toc a { color: var(--vgv-preto); text-decoration: none; }
.vgv-toc a:hover { color: #8A6A28; }
.vgv-cta { background: var(--vgv-preto); color: #E8E8E8; border-radius: 8px; padding: 1.4rem 1.6rem; margin: 2rem 0; }
.vgv-cta .vgv-cta__text { margin: 0; font-size: 0.975rem; }
.vgv-leia-tambem { border-top: 1px solid var(--vgv-borda); margin-top: 2.5rem; padding-top: 1rem; }
.vgv-fontes { border-top: 1px solid var(--vgv-borda); margin-top: 2rem; padding-top: 1rem; font-size: 0.875rem; color: var(--vgv-cinza-texto); }
.prose { overflow-wrap: anywhere; }
.vgv-faq dl { margin: 0; }
.vgv-faq dt { font-weight: 600; color: var(--vgv-preto); border-top: 1px solid var(--vgv-borda); padding-top: 1rem; margin-top: 1rem; }
.vgv-faq dd { margin: 0.4rem 0 0; color: var(--vgv-cinza-texto); }
.prose table { display: block; overflow-x: auto; }

.autor-box { display: flex; gap: 1.25rem; align-items: flex-start; max-width: 720px; margin: 0 auto var(--space-lg); padding: 1.4rem; border: 1px solid var(--vgv-borda); border-radius: 8px; }
.autor-box img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top; flex: 0 0 auto; }
.autor-box strong { font-family: var(--vgv-font-titulo); font-size: 1.15rem; }
.autor-box p { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--vgv-cinza-texto); }

/* ---------- RODAPÉ ---------- */
.rodape { background: var(--vgv-preto); color: #BFBFBF; padding: var(--space-lg) 0 var(--space-md); }
.rodape__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-md); }
.rodape__logo { width: 240px; height: auto; margin-bottom: 1rem; }
.rodape p { margin: 0 0 0.5rem; font-size: 0.875rem; line-height: 1.6; }
.rodape h4 { color: #fff; font-family: var(--vgv-font-corpo); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.9rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 0.5rem; font-size: 0.875rem; }
.rodape a { color: #D6D6D6; text-decoration: none; }
.rodape a:hover { color: var(--vgv-dourado); }
.rodape__base { border-top: 1px solid #333; margin-top: var(--space-md); padding-top: var(--space-sm); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.75rem; color: #8A8A8A; }

/* ---------- MOBILE (no fim do arquivo) ---------- */
@media (max-width: 960px) {
  .topo__nav { display: none; }
  .topo__menu { display: block; }
  .areas, .contatos, .artigos { grid-template-columns: 1fr; }
  .outros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .topo__logo img { height: 32px; }
  .area ul { columns: 1; }
  .outros { grid-template-columns: 1fr; }
  .rodape__grid { grid-template-columns: 1fr; }
  .prose { font-size: 1rem; }
  .prose h2 { font-size: 1.35rem; }
  .autor-box { flex-direction: column; }
}