/* ============================================================
   Case study pages — reaproveita os tokens de styles.css
   ============================================================ */
.case-doc { background: var(--bg); }

/* Top bar com volta pro site */
.case-topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-glass); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.case-topbar-inner {
  max-width: 980px; margin: 0 auto; padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.case-back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--text-dim); text-decoration: none;
}
.case-back:hover { color: var(--color-secondary); }
.case-back svg { width: 16px; height: 16px; }
.case-topbar .nav-cta { /* herda do styles.css */ }

/* Container */
.case-wrap { max-width: 860px; margin: 0 auto; padding: var(--space-16) var(--space-6) var(--space-24); }

/* Hero do case */
.case-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-secondary);
}
.case-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.08;
  color: var(--color-primary); margin: var(--space-3) 0 var(--space-4);
  max-width: 18ch;
}
.case-lead { font-size: 18px; line-height: 1.6; color: var(--text-dim); max-width: 62ch; margin: 0; }

.case-figure {
  margin: var(--space-12) 0;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-card); background: var(--bg-card);
}
.case-figure picture { display: block; }
.case-figure img { display: block; width: 100%; height: auto; }
.case-figure figcaption {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border);
}

/* Faixa de métricas-âncora */
.case-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4); margin: var(--space-12) 0;
}
.case-metric {
  padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-card);
}
.case-metric .v { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--color-primary); letter-spacing: -.02em; }
.case-metric .k { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

/* Blocos da narrativa */
.case-block { margin: var(--space-12) 0; }
.case-block h2 {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-secondary);
  margin: 0 0 var(--space-3);
}
.case-block p { font-size: 17px; line-height: 1.7; color: var(--text); max-width: 65ch; margin: 0 0 var(--space-4); }
.case-block ul { margin: 0; padding-left: var(--space-5); color: var(--text); }
.case-block li { font-size: 16px; line-height: 1.6; margin-bottom: var(--space-2); max-width: 62ch; }

/* Marcador de "preencher" — visível em dev, fácil de achar */
.todo {
  background: var(--amber); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-sm); letter-spacing: .03em;
}
.case-block p .todo-text { color: var(--text-muted); font-style: italic; }

/* Stack usado */
.case-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.case-stack span {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px;
}

/* CTA do rodapé do case */
.case-cta {
  margin-top: var(--space-20); padding: var(--space-12) var(--space-8);
  background: var(--color-secondary-soft); border: 1px solid var(--color-secondary-border);
  border-radius: var(--r-lg); text-align: center;
}
.case-cta h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--color-primary); margin: 0 0 var(--space-5); letter-spacing: -.02em; }
.case-cta .btn { display: inline-flex; }

@media (max-width: 600px) {
  .case-wrap { padding: var(--space-10) var(--space-5) var(--space-16); }
  .case-title { font-size: clamp(2rem, 8vw, 2.5rem); }
}