/* =====================================================================
   consultoria-geoprocessamento-mineracao/page.css
   CSS ISOLADO E NOVO, EXCLUSIVO DESTA PÁGINA.

   Não altera nem duplica o styles-20260830.css compartilhado — apenas
   adiciona componentes que ainda não existem no site (breadcrumb,
   checklist de problemas/entregas, FAQ em <details>, decoração do hero
   em CSS puro, seção de duas colunas, grupos de aplicações, etapas do
   processo e cards de público-alvo). Usa somente as variáveis de design
   (cores, fontes, raios) já definidas em styles-20260830.css, carregado
   antes deste arquivo. Nenhum arquivo de imagem é criado ou referenciado
   por este CSS.

   Se esta página for aprovada para publicação, este arquivo pode ser
   enviado como está para a mesma pasta da página
   (/consultoria-geoprocessamento-mineracao/page.css) — nenhuma outra
   página do site depende dele.
   ===================================================================== */

/* Breadcrumb */
.breadcrumb {
  font-size: 0.85rem;
  padding-block: 14px;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumb a { text-decoration: underline; color: var(--forest-700); }
.breadcrumb a:hover { color: var(--gold-700); }
.breadcrumb li[aria-current="page"] { color: var(--ink-600); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--ink-600); opacity: 0.6; }

/* Checklist de duas colunas (seção "O problema") */
.checklist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 28px;
  margin-top: 1.6rem;
}
@media (min-width: 720px) {
  .checklist-grid { grid-template-columns: 1fr 1fr; }
}
.checklist-grid li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-700);
}
.checklist-grid li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--gold-500);
}

/* Grade de entregas (seção "O que pode ser entregue") */
.deliverables-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 1.6rem;
}
@media (min-width: 640px) {
  .deliverables-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .deliverables-grid { grid-template-columns: repeat(3, 1fr); }
}
.deliverables-grid .card { padding: 1.2rem 1.4rem; }
.deliverables-grid .card p { margin: 0; color: var(--ink-900); font-size: 0.96rem; }

/* FAQ nativo (details/summary — mesmo padrão já usado no menu mobile do site) */
.faq-list { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  padding: 0.2rem 1.2rem;
}
.faq-item summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  color: var(--ink-900);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  float: right;
  font-weight: 700;
  color: var(--gold-700);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { color: var(--ink-700); padding-bottom: 14px; margin: 0; }

/* =====================================================================
   Refinamento — Hero: elemento decorativo CSS-only (sem imagem nova)
   Anéis concêntricos em dourado translúcido, ocupando o espaço à direita
   do hero. Desenho diferente do hero-bg da homepage (que usa contornos
   topográficos em SVG), mantendo a mesma cor/opacidade de marca.
   ===================================================================== */
.hero-gp { overflow: hidden; }
.hero-gp-inner { position: relative; z-index: 1; }
.hero-gp-copy { max-width: 640px; }

.hero-decor {
  position: absolute;
  top: 50%; right: -60px;
  width: 420px; height: 420px;
  transform: translateY(-50%);
  pointer-events: none;
  display: none;
}
.hero-decor span {
  position: absolute; border-radius: 50%;
  border: 1.5px solid var(--gold-500);
  opacity: 0.16;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.hero-decor span:nth-child(1) { width: 420px; height: 420px; }
.hero-decor span:nth-child(2) { width: 300px; height: 300px; opacity: 0.22; }
.hero-decor span:nth-child(3) { width: 180px; height: 180px; opacity: 0.3; }
.hero-decor span:nth-child(4) { width: 70px; height: 70px; opacity: 0.4; background: var(--gold-500); border: none; }
@media (min-width: 900px) {
  .hero-decor { display: block; }
}

/* =====================================================================
   Refinamento — "Geoprocessamento aplicado": duas colunas no desktop
   ===================================================================== */
.split-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 900px) {
  .split-section { grid-template-columns: 1.5fr 1fr; }
}
.split-aside {
  background: var(--cream-50);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius-md);
  padding: 1.6rem;
}
.split-aside-title {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--forest-700); margin-bottom: 0.9rem;
}
.start-list { display: flex; flex-direction: column; gap: 10px; }
.start-list li {
  position: relative; padding-left: 24px; color: var(--ink-700); font-weight: 500;
}
.start-list li::before {
  content: ""; position: absolute; left: 0; top: 0.4em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-500);
}

/* =====================================================================
   Refinamento — "Aplicações em projetos de mineração": grupos em cards
   ===================================================================== */
.applications-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 1.6rem;
}
@media (min-width: 640px) {
  .applications-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1150px) {
  .applications-grid { grid-template-columns: repeat(4, 1fr); }
}
.card-title--sm { font-size: 0.98rem; }
.application-card .tag-list { margin-top: 0.8rem; }

/* =====================================================================
   Refinamento — "Do dado à decisão": 4 etapas em cards (dark section)
   ===================================================================== */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 1.8rem;
  list-style: none;
}
@media (min-width: 720px) {
  .process-steps { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1150px) {
  .process-steps { grid-template-columns: repeat(4, 1fr); }
}
.process-step {
  background: rgba(248,245,238,0.05);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-md);
  padding: 1.4rem;
}
.process-step-number {
  display: block; font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700;
  color: var(--gold-500); margin-bottom: 0.5rem;
}
.process-step-title { color: var(--cream-50); font-size: 1.05rem; margin-bottom: 0.4em; }
.process-step p { color: var(--cream-200); margin: 0; font-size: 0.94rem; }

/* =====================================================================
   Refinamento — "Para quem é a consultoria": cards compactos
   ===================================================================== */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 1.6rem;
}
@media (min-width: 640px) {
  .audience-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .audience-grid { grid-template-columns: repeat(3, 1fr); }
}
.audience-card { display: flex; align-items: center; padding: 1.2rem 1.4rem; }
.audience-card p { margin: 0; color: var(--ink-900); font-size: 0.96rem; font-weight: 500; }