/* ============================================================================
   Altreider Advogados — Estilos próprios da Landing Page
   ----------------------------------------------------------------------------
   CSS3 puro. Complementa o Tailwind com componentes/efeitos que não cabem bem
   em utilitários (gradientes artísticos, máscaras, acordeões, etc.).
   Nenhum dado sensível ou lógica de negócio aqui — apenas apresentação.
   ========================================================================== */

/* ── Base ───────────────────────────────────────────────────────────────── */
html,
body { background: #231812; }              /* marrom da marca */
html  { scroll-behavior: smooth; }
::selection { background: #B89947; color: #231812; }

/* ── Tipografia auxiliar ────────────────────────────────────────────────── */
.font-serif-it { font-family: 'Raleway', sans-serif; font-style: italic; font-weight: 300; }
.text-balance  { text-wrap: balance; }

/* ── Filete dourado decorativo ──────────────────────────────────────────── */
.hairline { background: linear-gradient(90deg, transparent, rgba(184,153,71,.45), transparent); }

/* ── Grade sutil com máscara radial (hero / diferenciais) ───────────────── */
.pattern-grid {
  background-image:
    linear-gradient(rgba(184,153,71,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,153,71,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ── Hero: fundo artístico sobre base marrom ────────────────────────────── */
.hero-art {
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(184,153,71,.18), transparent 60%),
    radial-gradient(50% 50% at 20% 80%, rgba(184,115,51,.16), transparent 60%),
    linear-gradient(135deg, #231812 0%, #2E2017 50%, #231812 100%);
}

/* ── Cards com elevação no hover ────────────────────────────────────────── */
.card-hover { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.65);
  border-color: rgba(184,153,71,.5);
}

/* ── Header fixo: transparente → sólido ao rolar ────────────────────────── */
.site-header.is-scrolled {
  background: rgba(35,24,18,.85);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(184,153,71,.15);
}

/* ── Menu mobile ────────────────────────────────────────────────────────── */
.mobile-menu      { display: none; }
.mobile-menu.open { display: flex; }

/* ── Wrapper de ícones ──────────────────────────────────────────────────── */
.icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* ── Banner Vila Velha ──────────────────────────────────────────────────── */
.banner-fade {
  background: linear-gradient(180deg, #231812 0%, rgba(35,24,18,0) 16%, rgba(35,24,18,0) 84%, #231812 100%);
}
/* Mantém a imagem do banner sempre visível por inteiro (substitui style inline) */
.banner-16x9 { aspect-ratio: 16 / 9; }

/* ── Subtópico expansível (acordeões das Áreas de Atuação) ──────────────── */
.subtopic > summary { list-style: none; }
.subtopic > summary::-webkit-details-marker { display: none; }
.subtopic > summary::marker { content: ""; }
/* Revela o conteúdo suavemente ao abrir */
.subtopic-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.subtopic[open] .subtopic-body { grid-template-rows: 1fr; }
.subtopic-body > div { overflow: hidden; }

/* ── Hover singelo e elegante para links dourados ───────────────────────── */
.gold-link { color: #B89947; transition: all .3s ease; }
.gold-link:hover { color: #CBAA53; }

/* ── Banner interno de destaque (mini-landing no card Tributário) ───────── */
.tax-highlight {
  border: 1px solid rgba(184,153,71,.35);
  background: linear-gradient(135deg, rgba(184,153,71,.08), rgba(184,153,71,.02));
  transition: all .3s ease;
}
.tax-highlight:hover {
  border-color: rgba(203,170,83,.55);
  box-shadow: 0 12px 40px -18px rgba(184,153,71,.45);
}

/* ── Cor Champanhe exclusiva para ícones decorativos ────────────────────── */
/* Regra global: todos os ícones Font Awesome recebem champanhe */
i.icon { color: #DCCBA4 !important; }
/* Exceção 1: ícones sobre fundo dourado sólido (CTAs, headers) ficam escuros */
[class~="bg-gold"] i.icon { color: #231812 !important; }
/* Exceção 2: hover do card de contato vira fundo dourado → ícone escuro */
.group:hover .group-hover\:bg-gold i.icon { color: #231812 !important; }
/* Exceção 3: setas dentro de links dourados acompanham a cor do texto */
.gold-link i.icon { color: currentColor !important; }

/* ============================================================================
   Página de Política de Privacidade (politica-de-privacidade.html)
   ----------------------------------------------------------------------------
   Tipografia de documento legal, com a mesma identidade escura da landing raiz.
   Classes exclusivas desta página — não afetam as demais.
   ========================================================================== */

/* Índice lateral: links discretos que acendem em dourado */
.policy-toc {
  display: block;
  padding: .4rem .75rem;
  border-left: 1px solid rgba(184,153,71,.18);
  color: rgba(248,249,250,.6);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.policy-toc:hover {
  color: #CBAA53;
  border-left-color: rgba(184,153,71,.7);
  background: rgba(184,153,71,.05);
}

/* Corpo do texto legal */
.policy-prose { color: rgba(248,249,250,.72); }
.policy-prose p {
  font-size: .975rem;
  line-height: 1.85;
  margin-top: 1rem;
}
.policy-prose p:first-of-type { margin-top: .5rem; }
.policy-prose a { word-break: break-word; }

/* Âncora com deslocamento para não ficar sob o header fixo */
.policy-section { scroll-margin-top: 6.5rem; }

/* Títulos de seção */
.policy-h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  color: #F8F9FA;
  font-size: 1.6rem;
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(184,153,71,.18);
}
@media (min-width: 768px) { .policy-h2 { font-size: 1.9rem; } }

/* Numeração dourada em mono ao lado do título */
.policy-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .8rem;
  letter-spacing: .1em;
  color: #B89947;
  border: 1px solid rgba(184,153,71,.4);
  border-radius: .5rem;
  padding: .25rem .5rem;
  flex: none;
  transform: translateY(-.15rem);
}

/* Cartão de destaque (dados de contato / controlador) */
.policy-card {
  margin-top: 1.25rem;
  border: 1px solid rgba(184,153,71,.28);
  background: linear-gradient(135deg, rgba(184,153,71,.07), rgba(184,153,71,.015));
  border-radius: 1rem;
  padding: 1.5rem 1.6rem;
  color: rgba(248,249,250,.8);
}
.policy-card ul { list-style: none; }

/* Linha em destaque (ex.: nome do Encarregado) */
.policy-highlight {
  margin-top: 1rem;
  font-family: 'Raleway', sans-serif;
  font-size: 1.2rem;
  color: #CBAA53;
  border-left: 2px solid rgba(184,153,71,.6);
  padding-left: 1rem;
}