/* ============================================================================
   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; }