/* ══════════════════════════════════════════════════════════════
   Brasil GEO — Design System v2.0 (Salesforce / Lucida Style)
   Clean, professional, no emojis, no gradients, Lucide Icons
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --color-brand: #0176d3;
  --color-brand-dark: #014486;
  --color-brand-light: #e8f4fd;
  --color-brand-lighter: #f0f8ff;
  --color-success: #2e844a;
  --color-success-light: #ecf5ee;
  --color-warning: #dd7a01;
  --color-warning-light: #fdf4e8;
  --color-error: #ba0517;
  --color-text: #181818;
  --color-text-secondary: #444746;
  --color-text-muted: #706e6b;
  --color-text-weak: #939393;
  --color-text-inverse: #ffffff;
  --color-bg: #ffffff;
  --color-bg-alt: #f3f3f3;
  --color-bg-section: #fafaf9;
  --color-border: #d8d8d8;
  --color-border-light: #e5e5e5;
  --color-border-focus: var(--color-brand);
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
  --max-width: 780px;
  --max-width-wide: 1120px;
  --spacing-page: 2.5rem;
  --transition: 0.2s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

/* ── Typography ── */
h1, h2, h3, h4 { color: var(--color-text); font-weight: 700; line-height: 1.3; }

h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.5px;
  margin-bottom: 0.75rem;
}
h2 {
  font-size: 1.35rem;
  margin-top: 2.75rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--color-brand-light);
  position: relative;
}
h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--color-brand);
}
h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.625rem;
  color: var(--color-text);
}

p { margin-bottom: 1.125rem; }
strong, b { color: var(--color-text); font-weight: 600; }
em { font-style: italic; }

a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--transition);
  border-bottom: 1px solid transparent;
}
a:hover {
  color: var(--color-brand-dark);
  border-bottom-color: var(--color-brand);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-alt);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

/* ── Layout ── */
.geo-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-page);
}
.geo-page-wide {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: var(--spacing-page);
}

/* ── Navigation ── */
.geo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0.875rem var(--spacing-page);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.geo-nav-brand {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-brand);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border-bottom: none;
}
.geo-nav-brand:hover { color: var(--color-brand-dark); border-bottom: none; }
.geo-nav-links {
  display: flex;
  gap: 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.geo-nav-links a {
  color: var(--color-text-muted);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.geo-nav-links a:hover {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

/* ── Article meta ── */
.meta, .geo-meta {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border-light);
}
.meta a, .geo-meta a { font-weight: 500; }

/* ── Answer Capsule (citação direta para LLMs — pós Google I/O 2026) ──
   Parágrafo auto-contido de 1-2 frases logo após o H1/meta. Formato preferido
   por LLMs para extração (Search Engine Land 2026: 72,4% das páginas citadas
   pelo ChatGPT contêm capsule curto). Sem links internos no capsule. */
.answer-capsule {
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-brand-lighter);
  border-left: 4px solid var(--color-brand);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}
.answer-capsule strong { font-weight: 700; }

/* ── Blockquote ── */
blockquote {
  border-left: 3px solid var(--color-brand);
  padding: 1rem 1.5rem;
  margin: 1.75rem 0;
  background: var(--color-brand-lighter);
  color: var(--color-text-secondary);
  font-style: normal;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.95rem;
}
blockquote p:last-child { margin-bottom: 0; }

/* ── Tables ── */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
th {
  background: var(--color-bg-alt);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
}
td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
  vertical-align: top;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-bg-section); }

/* ── Lists ── */
ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1.125rem;
}
li {
  margin-bottom: 0.5rem;
  color: var(--color-text-secondary);
}
li::marker { color: var(--color-brand); }

/* ── Cards ── */
.geo-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition);
}
.geo-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand);
  transform: translateY(-1px);
}

/* ── Buttons ── */
.geo-btn, .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  text-decoration: none;
  line-height: 1.4;
  border-bottom: none;
}
.geo-btn:hover, .cta:hover { text-decoration: none; border-bottom: none; }
.geo-btn-primary, .cta {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}
.geo-btn-primary:hover, .cta:hover {
  background: var(--color-brand-dark);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.geo-btn-outline {
  background: transparent;
  color: var(--color-brand);
  border: 1px solid var(--color-brand);
}
.geo-btn-outline:hover {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
}
.geo-btn-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
}
.geo-btn-success:hover {
  background: #256b3b;
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── Badge / Tag ── */
.geo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  border-bottom: none;
}
.geo-badge-brand { background: var(--color-brand-light); color: var(--color-brand); }
.geo-badge-success { background: var(--color-success-light); color: var(--color-success); }
.geo-badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.geo-badge-muted { background: var(--color-bg-alt); color: var(--color-text-muted); }

/* ── Divider ── */
.geo-divider, hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: 2.5rem 0;
}

/* ── Footer ── */
footer, .geo-footer {
  max-width: var(--max-width);
  margin: 3rem auto 0;
  padding: 1.5rem var(--spacing-page);
  border-top: 1px solid var(--color-border-light);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
footer a, .geo-footer a {
  color: var(--color-text-muted);
  border-bottom: none;
}
footer a:hover, .geo-footer a:hover { color: var(--color-brand); }

/* ── Icons ── */
.geo-icon { width: 1.25rem; height: 1.25rem; stroke-width: 2; vertical-align: middle; }
.geo-icon-lg { width: 1.5rem; height: 1.5rem; }
.geo-icon-brand { color: var(--color-brand); }
.geo-icon-success { color: var(--color-success); }
.geo-icon-muted { color: var(--color-text-muted); }

/* ── About / Author section ── */
.author-section {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-top: 2.5rem;
}
.author-section h2 { margin-top: 0; border-bottom: none; }
.author-section h2::after { display: none; }

/* ── CTA Section ── */
.cta-section {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  margin: 3rem 0;
}
.cta-section h2 {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.cta-section h2::after { display: none; }
.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ── Hero section (used in roadmap, sobre) ── */
.hero-section {
  background: var(--color-bg-section);
  padding: 4rem var(--spacing-page) 3rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border-light);
}
.hero-section h1 {
  max-width: 680px;
  margin: 0 auto 1rem;
}
.hero-section p {
  max-width: 580px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
}

/* ── Stats grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 2rem 0 3rem;
}
.stat-card { text-align: center; padding: 1.5rem 1rem; }
.stat-card .stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-brand);
  letter-spacing: -1px;
}
.stat-card .stat-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* ── Phase cards (roadmap) ── */
.phase { margin-bottom: 2rem; }
.phase-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.phase-num {
  width: 2rem; height: 2rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.pn-live { background: var(--color-success); }
.pn-build { background: var(--color-brand); }
.pn-plan { background: var(--color-text-muted); }
.phase-title { font-size: 1.2rem; font-weight: 700; color: var(--color-text); }

/* ── Feature grids ── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.feature-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fi-live { background: var(--color-success-light); color: var(--color-success); }
.fi-build { background: var(--color-brand-light); color: var(--color-brand); }
.fi-plan { background: var(--color-bg-alt); color: var(--color-text-muted); }
.feature-name { font-size: 0.875rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.15rem; }
.feature-desc { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.5; }

/* ── Print ── */
@media print {
  .geo-nav, .geo-footer, .cta-section { display: none; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; border-bottom: none; }
  h2::after { display: none; }
}

/* ── Alerts ── */
.geo-alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.geo-alert [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.geo-alert-info { background: var(--color-brand-light); color: var(--color-brand-dark); border-left: 3px solid var(--color-brand); }
.geo-alert-success { background: var(--color-success-light); color: #1a5c2e; border-left: 3px solid var(--color-success); }
.geo-alert-warning { background: var(--color-warning-light); color: #8a5000; border-left: 3px solid var(--color-warning); }
.geo-alert-error { background: #fde8e8; color: #8c0311; border-left: 3px solid var(--color-error); }

/* ── Form inputs ── */
.geo-input, .geo-textarea, .geo-select {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.geo-input:focus, .geo-textarea:focus, .geo-select:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(1, 118, 211, 0.12);
}
.geo-input::placeholder { color: var(--color-text-weak); }
.geo-textarea { min-height: 100px; resize: vertical; }
.geo-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.375rem; }
.geo-field { margin-bottom: 1.25rem; }
.geo-input-error { border-color: var(--color-error); }
.geo-field-error { font-size: 0.75rem; color: var(--color-error); margin-top: 0.25rem; }

/* ── Progress bar ── */
.geo-progress { height: 8px; background: var(--color-bg-alt); border-radius: 100px; overflow: hidden; }
.geo-progress-fill { height: 100%; border-radius: 100px; transition: width 0.6s ease; }
.geo-progress-fill--brand { background: var(--color-brand); }
.geo-progress-fill--success { background: var(--color-success); }
.geo-progress-fill--warning { background: var(--color-warning); }
.geo-progress-fill--error { background: var(--color-error); }

/* ── Skeleton loader ── */
@keyframes geo-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.geo-skeleton {
  background: linear-gradient(90deg, var(--color-bg-alt) 25%, #eaeaea 50%, var(--color-bg-alt) 75%);
  background-size: 400px 100%;
  animation: geo-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
.geo-skeleton-text { height: 1em; width: 80%; margin-bottom: 0.5rem; }
.geo-skeleton-heading { height: 1.5em; width: 60%; margin-bottom: 1rem; }
.geo-skeleton-card { height: 120px; }

/* ── Tabs ── */
.geo-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-border-light); margin-bottom: 1.5rem; }
.geo-tab {
  padding: 0.625rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  background: none;
  border-top: none; border-left: none; border-right: none;
}
.geo-tab:hover { color: var(--color-text); }
.geo-tab--active { color: var(--color-brand); border-bottom-color: var(--color-brand); }

/* ── Tooltip ── */
.geo-tooltip { position: relative; cursor: help; }
.geo-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.75rem;
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.geo-tooltip:hover::after { opacity: 1; }

/* ── Divider ── */
.geo-divider { border: none; border-top: 1px solid var(--color-border-light); margin: 2rem 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
  :root { --spacing-page: 1.25rem; }
  .geo-nav { position: relative; }
  .geo-nav-links { gap: 1rem; font-size: 0.8rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  table { font-size: 0.78rem; }
  th, td { padding: 0.5rem 0.625rem; }
  .features-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .geo-footer, footer { flex-direction: column; text-align: center; }
  .cta-section { padding: 2rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   DX1+DX3+DX4+DX5 — Taxonomia & Design System v3.0 (Abr 2026)
   Classes utilitárias para páginas de autoridade + acessibilidade
   ══════════════════════════════════════════════════════════════ */

/* ── Skip-link (WCAG 2.4.1 + screen-reader) ── */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}
.skip-to-content:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--color-brand);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* ── Focus-visible universal (WCAG 2.4.7) ── */
*:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline-offset: 3px;
}

/* ── Breadcrumb padrão ── */
.geo-breadcrumb {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.geo-breadcrumb a {
  color: var(--color-brand);
  text-decoration: none;
  border-bottom: none;
}
.geo-breadcrumb a:hover { text-decoration: underline; }
.geo-breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* ── Section label chip (badges "PUBLICAÇÕES ACADÊMICAS", etc) ── */
.geo-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--color-brand-lighter);
  border: 1px solid var(--color-brand-light);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-brand);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.geo-section-label--amber { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.geo-section-label--green { background: #dcfce7; border-color: #bbf7d0; color: #065f46; }
.geo-section-label--red { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.geo-section-label--purple { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }

/* ── Authority callout box (amber stripe com ORCID/DOI) ── */
.geo-authority-callout {
  margin: 16px 0 28px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-left: 5px solid #f59e0b;
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.6;
}
.geo-authority-callout .tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #92400e;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.geo-authority-callout p { color: #713f12; margin: 0 0 6px; }
.geo-authority-callout a {
  color: #92400e;
  font-weight: 700;
  border-bottom: none;
}
.geo-authority-callout a:hover { text-decoration: underline; }

/* ── Related pages box (aside crosslinks contextuais) ── */
.geo-related-pages {
  margin: 32px 0 0;
  padding: 20px 22px;
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}
.geo-related-pages h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.geo-related-pages ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.geo-related-pages li { margin: 0; }
.geo-related-pages a {
  display: block;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.4;
  border-left: 3px solid var(--color-brand);
  transition: all .15s;
}
.geo-related-pages a:hover {
  background: var(--color-brand-lighter);
  border-color: var(--color-brand);
  transform: translateY(-1px);
}
.geo-related-pages a strong {
  display: block;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 2px;
}
.geo-related-pages a span {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Tier badges (asset cards) ── */
.geo-tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.geo-tier--academic { color: #6d28d9; }
.geo-tier--social { color: var(--color-brand); }
.geo-tier--press { color: #dc2626; }
.geo-tier--pub { color: #15803d; }

/* ── Prose container (para páginas tipo entenda/conceitos com leitura longa) ── */
.geo-prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: 17px;
  line-height: 1.75;
  color: #1f2937;
}
.geo-prose h2 {
  font-size: clamp(22px, 3vw, 30px);
  margin: 40px 0 14px;
  padding: 0;
  border: 0;
}
.geo-prose h2::after { display: none; }
.geo-prose h3 {
  font-size: 19px;
  margin: 24px 0 8px;
}
.geo-prose p { margin: 0 0 16px; }
.geo-prose ul, .geo-prose ol { padding-left: 24px; margin: 8px 0 20px; }
.geo-prose li { margin-bottom: 6px; }

/* ── Dark mode (prefers-color-scheme) ── */
@media (prefers-color-scheme: dark) {
  :root[data-theme-mode="auto"] {
    --color-bg: #0b1220;
    --color-bg-alt: #111827;
    --color-bg-section: #1f2937;
    --color-text: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-weak: #6b7280;
    --color-border: #374151;
    --color-border-light: #1f2937;
    --color-brand-light: #1e3a5f;
    --color-brand-lighter: #0f2439;
  }
  :root[data-theme-mode="auto"] .geo-card,
  :root[data-theme-mode="auto"] .geo-btn-outline {
    background: #1f2937;
    color: #f9fafb;
  }
}

/* ── Print optimization ── */
@media print {
  .skip-to-content, .geo-nav, .bg-wa-fab, .brgeo-author-pill, .brgeo-auth-foot,
  footer, .geo-related-pages button, [role="banner"] { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .geo-authority-callout { break-inside: avoid; }
}

/* ── Reduced motion (WCAG 2.3.3) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   WAVE 1 — Fundacao de leitura, foco e tema escuro opt-in (jun/2026)
   Aprimoramentos aditivos guiados pelo curso frontends-com-vibecoding.
   So adicionam camada por cima; nao alteram regras existentes.
   ══════════════════════════════════════════════════════════════ */

/* Leitura: paragrafos justificados (preferencia editorial) + quebra
   tipografica moderna (text-wrap pretty/balance, baseline 2026). */
p {
  text-align: justify;
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
}
h1, h2, h3, h4 { text-wrap: balance; }

/* Contextos centrados/curtos nao herdam o justify nem a hifenizacao. */
.hero-section p,
.cta-section p,
.stat-card p,
.answer-capsule,
.geo-badge,
footer p, .geo-footer p,
[align="center"] p {
  text-align: inherit;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Ancoras: compensa a nav sticky para o titulo nao ficar sob o header. */
[id] { scroll-margin-top: 84px; }

/* Selecao e controles de formulario na cor de marca. */
::selection { background: var(--color-brand); color: #fff; }
input, textarea, select { accent-color: var(--color-brand); }

/* Imagens nunca estouram o container (responsivo, sem scroll horizontal). */
img { max-width: 100%; height: auto; }

/* ── Tema escuro EXPLICITO (opt-in via [data-theme="dark"] no <html>) ──
   Convive com o @media (prefers-color-scheme) ja existente: a pagina so
   escurece se optar pelo atributo (destrava o toggle real do curso). */
:root[data-theme="dark"] {
  --color-bg: #0b1220;
  --color-bg-alt: #111827;
  --color-bg-section: #1f2937;
  --color-text: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-text-muted: #9ca3af;
  --color-text-weak: #6b7280;
  --color-border: #374151;
  --color-border-light: #1f2937;
  --color-brand-light: #1e3a5f;
  --color-brand-lighter: #0f2439;
}
:root[data-theme="dark"] body {
  background: var(--color-bg) !important;
  color: var(--color-text-secondary) !important;
}
/* Rede de seguranca: paginas com <style> proprio cravam fundo claro no body/
   wrappers e quebram o dark. Forca os containers de pagina a herdar o tema. */
:root[data-theme="dark"] .geo-page,
:root[data-theme="dark"] .geo-main,
:root[data-theme="dark"] main { background: transparent !important; }
:root[data-theme="dark"] .geo-card,
:root[data-theme="dark"] .geo-btn-outline {
  background: #1f2937;
  color: #f9fafb;
}
:root[data-theme="dark"] code { background: #1f2937; color: #f9fafb; }
:root[data-theme="dark"] th { background: #1f2937; }
:root[data-theme="dark"] tr:hover td { background: #172033; }

/* ── Toggle de tema (botao no header, estilo Lucida) ── */
.geo-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.geo-theme-toggle:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.geo-theme-toggle svg { width: 18px; height: 18px; }
.geo-theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .geo-theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .geo-theme-toggle .icon-moon { display: inline; }

/* ══════════════════════════════════════════════════════════════
   ONDA 1 — Fundacao do Design System (jun/2026)
   Camada ADITIVA guiada pelo curso frontends-com-vibecoding
   (Modulo 3 CSS moderno, Modulo 7 movimento, Modulo 8 acessibilidade).
   Nada aqui regride regras anteriores: usa @supports/@media com
   fallback e estado base sempre visivel. Idempotente (bloco unico).
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Foco: remover o anel padrao SO no foco por mouse/toque ──
   O anel de alto contraste de :focus-visible ja existe acima e vale
   para os dois temas; aqui apenas suprimimos o outline quando o foco
   NAO e por teclado, sem nunca deixar o usuario de teclado sem pista. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* ── 2. Tipografia fluida em h2/h3 (h1 ja usa clamp) ──
   Escala suave preservando a hierarquia (h1 > h2 > h3). Os contextos
   com font-size proprio (.geo-prose h2, .cta-section h2) tem maior
   especificidade e continuam mandando; so o h2/h3 "cru" e afetado. */
h2 { font-size: clamp(1.2rem, 1.02rem + 0.9vw, 1.5rem); }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem); }
body { font-size: clamp(15.5px, 15px + 0.15vw, 16.5px); }

/* ── 3. Revelacao na rolagem (CSS puro, scroll-driven) ──
   ESTADO BASE VISIVEL: quem nao suporta animation-timeline ve tudo.
   So anima transform+opacity (compositor), so quando ha suporte E o
   usuario nao pediu menos movimento. As paginas adicionam a classe
   .reveal-on-scroll em secoes/cards. */
.reveal-on-scroll { opacity: 1; }
@keyframes geo-reveal-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-on-scroll {
      animation: geo-reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      will-change: opacity, transform;
    }
  }
}

/* ── 4. Hardening de movimento reduzido (reforco ao bloco global) ──
   Desliga explicitamente a revelacao e o scroll suave; o bloco
   *,*::before,*::after acima ja zera duracoes, isto cobre as bordas. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .reveal-on-scroll { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── 5. Container queries em grades de cards ──
   O container-type permite reempilhar pela largura REAL do bloco
   (nao da viewport). Fallback: o grid auto-fit/auto-fill ja existente
   segue valendo onde @container nao e suportado. Aditivo. */
.geo-related-pages,
.geo-card-grid { container-type: inline-size; }
.geo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
@container (max-width: 420px) {
  .geo-related-pages ul { grid-template-columns: 1fr; }
  .geo-card-grid { grid-template-columns: 1fr; }
}

/* ── 6. Estados com color-mix (com fallback solido ja definido) ──
   As cores solidas de hover acima permanecem como fallback. Onde
   color-mix(in oklch) e suportado, refinamos o tom de forma perceptiva
   e uniforme nos dois temas, sem novos tokens. */
@supports (background: color-mix(in oklch, red, blue)) {
  a:hover {
    color: color-mix(in oklch, var(--color-brand) 78%, var(--color-text));
  }
  .geo-btn-primary:hover, .cta:hover {
    background: color-mix(in oklch, var(--color-brand) 86%, black);
  }
  .geo-btn-outline:hover {
    background: color-mix(in oklch, var(--color-brand) 14%, transparent);
  }
}

/* ── 7. Impressao enxuta (complementa os @media print acima) ──
   Esconde cromos interativos injetados pelo runtime e zera sombras
   para economizar tinta e manter legibilidade. */
@media print {
  .geo-theme-toggle, .geo-totop, .geo-readbar,
  .skip-to-content, .back-to-top, .bg-wa-fab { display: none !important; }
  * { box-shadow: none !important; }
  .geo-card, .answer-capsule, blockquote, table { break-inside: avoid; }
  body { background: #fff; color: #000; }
}

/* ── 8. Estabilidade de layout (CLS) ──
   scrollbar-gutter evita o "pulo" horizontal quando a barra aparece;
   a regra de img (max-width/height:auto) ja existe e casa com os
   atributos width/height das tags para reservar espaco. */
html { scrollbar-gutter: stable; }
img { height: auto; }

/* ── 9. FAQ acessivel (<details>/<summary>) ──
   Marcador proprio (+/-), foco visivel, cursor e abertura suave que
   respeita prefers-reduced-motion. As paginas envolvem os blocos de
   FAQ em .geo-faq. Usa tokens, entao funciona no tema escuro. */
.geo-faq details {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.geo-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.geo-faq summary::-webkit-details-marker { display: none; }
.geo-faq summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-brand);
  flex-shrink: 0;
}
.geo-faq details[open] summary::after { content: '\2212'; }
.geo-faq summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.geo-faq details > *:not(summary) {
  padding: 0 1.125rem 1rem;
  margin: 0;
}
.geo-faq details > *:not(summary):first-of-type { padding-top: 0.25rem; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes geo-faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .geo-faq details[open] > *:not(summary) { animation: geo-faq-open 0.2s ease both; }
}

/* ── 10. Reforco de contraste no tema escuro para a camada nova ──
   Garante que os blocos acima fiquem >= 4.5:1 quando dark esta ativo. */
:root[data-theme="dark"] .geo-faq details { background: #1f2937; }
:root[data-theme="dark"] .geo-faq summary { color: #f9fafb; }

/* ══════════════════════════════════════════════════════════════
   ONDA 2 — View Transitions cross-document (MPA) — jun/2026
   Modulo 6 (View Transitions) + Modulo 8 (acessibilidade) do curso
   frontends-com-vibecoding. Camada 100% ADITIVA e progressive
   enhancement: navegadores sem suporte (a maioria fora de Chrome/Edge)
   simplesmente ignoram @view-transition e os pseudo-elementos, mantendo
   a navegacao normal. Nada aqui regride regras anteriores. Idempotente.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Transicao suave entre paginas (navegacao MPA same-origin) ──
   Faz o navegador animar a troca de documento com um cross-fade nativo.
   So vale onde @view-transition e suportado (Chrome/Edge atuais). */
@view-transition { navigation: auto; }

/* ── 2. Cross-fade sobrio e curto (so quando ha apetite por movimento) ──
   Encurta a transicao default do root para ~200ms, mantendo o tom
   discreto da identidade Lucida. Fica fora do reduced-motion de proposito. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 200ms;
    animation-timing-function: ease;
  }
}

/* ── 3. Guarda de movimento (WCAG 2.3.3) ──
   Quem pediu menos movimento nao recebe NENHUMA animacao de transicao
   de pagina; a troca acontece de forma instantanea e estavel. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}