/* ==========================================================================
   PULSO NR-1 · BLOG · DNA Claude Design aplicado
   Baseado em: Mio/21_Design_System_Lab/aprendizado-continuo/dna-claude-design-assimilado-2026-04-19
   ========================================================================== */

:root {
  /* Paleta NR-1 locked */
  --bg: #0a0a0f;
  --bg-deep: #06060a;
  --bg-elevated: #12121a;
  --pink: #ff0080;
  --purple: #9f00ff;
  --cyan: #00d4ff;
  --amber: #ffb400;
  --lime: #84cc16;

  /* Tinturas de texto */
  --ink-100: #ffffff;
  --ink-80: rgba(255, 255, 255, 0.80);
  --ink-60: rgba(255, 255, 255, 0.60);
  --ink-40: rgba(255, 255, 255, 0.40);
  --ink-20: rgba(255, 255, 255, 0.20);
  --ink-10: rgba(255, 255, 255, 0.10);
  --ink-5: rgba(255, 255, 255, 0.05);

  /* Gradientes narrativos */
  --grad-primary: linear-gradient(180deg, #ff0080 0%, #9f00ff 100%);
  --grad-urgent: linear-gradient(135deg, #ff0080 0%, #ffb400 100%);
  --grad-cold: linear-gradient(135deg, #00d4ff 0%, #9f00ff 100%);
  --grad-esg: linear-gradient(135deg, #9f00ff 0%, #00d4ff 100%);

  /* Cor por pilar */
  --pilar-p1: #00d4ff; /* Compliance/Jurídico — cyan */
  --pilar-p2: #ffb400; /* Finanças — amber */
  --pilar-p3: linear-gradient(90deg, #ff0080 0%, #9f00ff 100%); /* ESG — gradient */
  --pilar-p4: #00d4ff; /* Metodologia — cyan */
  --pilar-p5: linear-gradient(90deg, #ff0080 0%, #9f00ff 100%); /* Gestão — gradient */

  /* Tipografia */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', monospace;

  /* Ritmo */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Reading width */
  --read-width: 720px;
  --page-width: 1200px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink-100);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient glow — radiais pink topo + purple base */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 0, 128, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 110%, rgba(159, 0, 255, 0.15) 0%, transparent 55%);
  z-index: 0; pointer-events: none;
}

/* Grão 3px mix-blend overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

main, header, footer, section, article, nav {
  position: relative; z-index: 2;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 4px; }

img { max-width: 100%; display: block; }

/* ==========================================================================
   TOP NAV (site-wide)
   ========================================================================== */
.topnav {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--ink-10);
}

.topnav .brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topnav .brand small {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-40);
  display: block;
  text-transform: uppercase;
  margin-top: 2px;
  background: none;
  -webkit-text-fill-color: var(--ink-40);
}

.topnav nav {
  display: flex; gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.topnav nav a:hover { color: var(--ink-100); text-decoration: none; }

/* ==========================================================================
   EYEBROW (corner mark) — dot pink + mono label
   ========================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 16px var(--pink), 0 0 32px rgba(255, 0, 128, 0.4);
}

.eyebrow.cyan::before { background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.eyebrow.amber::before { background: var(--amber); box-shadow: 0 0 16px var(--amber); }
.eyebrow.purple::before { background: var(--purple); box-shadow: 0 0 16px var(--purple); }

/* ==========================================================================
   BLOG HERO (index)
   ========================================================================== */
.blog-hero {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-24) var(--space-8) var(--space-16);
  text-align: left;
}

.blog-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: var(--space-6) 0;
  max-width: 900px;
}

.blog-hero h1 em {
  font-style: normal;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blog-hero p {
  font-size: 20px;
  color: var(--ink-60);
  max-width: 640px;
  line-height: 1.55;
}

/* ==========================================================================
   CATEGORIA FILTROS
   ========================================================================== */
.category-bar {
  max-width: var(--page-width);
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-8);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}

.cat-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--ink-20);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-80);
  transition: all 0.2s;
}

.cat-pill:hover {
  border-color: var(--pink);
  color: var(--ink-100);
  text-decoration: none;
}

.cat-pill.active {
  background: var(--grad-primary);
  border-color: transparent;
  color: var(--ink-100);
}

.cat-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}
.cat-pill .dot.p1, .cat-pill .dot.p4 { background: var(--cyan); }
.cat-pill .dot.p2 { background: var(--amber); }
.cat-pill .dot.p3, .cat-pill .dot.p5 { background: var(--pink); }

/* ==========================================================================
   BLOG GRID (index)
   ========================================================================== */
.blog-grid {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--space-8) var(--space-24);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.blog-card {
  background: var(--bg-elevated);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex; flex-direction: column;
  gap: var(--space-4);
  min-height: 340px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.blog-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  border-radius: inherit;
  mask: linear-gradient(#000, transparent 70%);
  -webkit-mask: linear-gradient(#000, transparent 70%);
}

.blog-card:hover {
  border-color: var(--ink-20);
  transform: translateY(-3px);
  text-decoration: none;
}

.blog-card:hover::before { opacity: 0.08; }

.blog-card.coming {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.blog-card .card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-60);
  display: inline-flex; align-items: center; gap: var(--space-2);
}

.blog-card .card-tag::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink);
}
.blog-card.p1 .card-tag::before, .blog-card.p4 .card-tag::before { background: var(--cyan); }
.blog-card.p2 .card-tag::before { background: var(--amber); }

.blog-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink-100);
}

.blog-card p.excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 0;
  flex: 1;
}

.blog-card .card-meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-40);
  text-transform: uppercase;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-10);
}

/* ==========================================================================
   ARTICLE LAYOUT
   ========================================================================== */
.article-header {
  max-width: var(--read-width);
  margin: 0 auto;
  padding: var(--space-24) var(--space-6) var(--space-12);
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: var(--space-8);
}

.breadcrumb a { color: var(--ink-60); }
.breadcrumb a:hover { color: var(--pink); text-decoration: none; }
.breadcrumb span.sep { margin: 0 var(--space-2); color: var(--ink-20); }

.article-header h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: var(--space-6) 0;
  color: var(--ink-100);
}

.article-header .lead {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-80);
  max-width: 640px;
  margin: var(--space-6) 0;
}

.article-meta {
  display: flex; gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.article-meta .meta-item strong {
  color: var(--ink-100);
  font-weight: 600;
}

/* Article body */
.article-body {
  max-width: var(--read-width);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-80);
}

.article-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: var(--space-16) 0 var(--space-6);
  color: var(--ink-100);
}

.article-body h2::before {
  content: '';
  display: inline-block;
  width: 32px; height: 4px;
  background: var(--grad-primary);
  margin-bottom: var(--space-4);
}

.article-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  margin: var(--space-12) 0 var(--space-3);
  color: var(--ink-100);
}

.article-body p { margin: 0 0 var(--space-6); }

.article-body p strong {
  color: var(--ink-100);
  font-weight: 600;
}

.article-body a {
  color: var(--cyan);
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  transition: all 0.2s;
}
.article-body a:hover {
  color: var(--pink);
  border-bottom-color: var(--pink);
  text-decoration: none;
}

.article-body ul, .article-body ol {
  margin: 0 0 var(--space-6); padding-left: var(--space-8);
}

.article-body li { margin-bottom: var(--space-3); }

.article-body blockquote {
  border-left: 3px solid var(--pink);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-100);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  background: linear-gradient(90deg, rgba(255, 0, 128, 0.06), transparent 60%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.article-body code {
  font-family: var(--font-mono);
  font-size: 15px;
  background: var(--ink-10);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--cyan);
}

/* Stat card inline (reusa padrão carrossel) */
.stat {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-8);
  margin: var(--space-8) 0;
  text-align: center;
}

.stat .stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat .stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: var(--space-3);
}

.stat .stat-note {
  color: var(--ink-40);
  font-size: 14px;
  margin-top: var(--space-3);
}

/* Trap card (alerta) */
.trap {
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.08), rgba(255, 0, 128, 0.06));
  border: 1px solid rgba(255, 180, 0, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-8) 0;
}

.trap .trap-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  color: var(--amber);
  letter-spacing: -0.03em;
}

.trap h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  margin: var(--space-3) 0;
  color: var(--ink-100);
}

.trap p { margin: 0; color: var(--ink-80); }

/* Inline CTA */
.cta-inline {
  background: var(--bg-elevated);
  border: 1px solid var(--pink);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-12) 0;
  text-align: center;
  box-shadow: 0 0 40px rgba(255, 0, 128, 0.15);
}

.cta-inline h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  color: var(--ink-100);
  letter-spacing: -0.02em;
}

.cta-inline p { margin: 0 0 var(--space-6); color: var(--ink-60); }

.cta-btn {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  background: var(--grad-primary);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  box-shadow: 0 0 24px rgba(255, 0, 128, 0.4);
  transition: transform 0.15s;
}

.cta-btn:hover { transform: translateY(-2px); text-decoration: none; }

/* Source list */
.sources {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--ink-10);
  font-size: 14px;
  color: var(--ink-60);
}

.sources h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin: 0 0 var(--space-4);
}

.sources ol { padding-left: var(--space-6); }

.sources li { margin-bottom: var(--space-3); line-height: 1.5; }

/* ==========================================================================
   FOOTER CANÔNICO (3 colunas)
   ========================================================================== */
.site-footer {
  max-width: var(--page-width);
  margin: var(--space-24) auto 0;
  padding: var(--space-12) var(--space-8) var(--space-8);
  border-top: 1px solid var(--ink-10);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.site-footer .foot-left { justify-self: start; }
.site-footer .foot-center {
  justify-self: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: none;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-footer .foot-center small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-40);
  background: none;
  -webkit-text-fill-color: var(--ink-40);
  margin-top: 2px;
}

.site-footer .foot-right { justify-self: end; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .topnav { padding: var(--space-4); flex-direction: column; gap: var(--space-4); }
  .topnav nav { gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
  .blog-hero { padding: var(--space-16) var(--space-4) var(--space-8); }
  .blog-grid { padding: 0 var(--space-4) var(--space-16); }
  .article-header, .article-body { padding-left: var(--space-4); padding-right: var(--space-4); }
  .site-footer { grid-template-columns: 1fr; text-align: center; gap: var(--space-4); }
  .site-footer .foot-left, .site-footer .foot-right { justify-self: center; }
}