/* ============================================================
   ALMA — style.css
   Folha de estilos principal do site institucional

   COMO USAR ESTE ARQUIVO:
   - Todas as cores estão nas variáveis CSS em :root (linha ~30)
     Para mudar a cor do site inteiro, altere só --accent ali.
   - Não escreva cores hardcoded (#fff, rgb...) fora de :root.
     Use sempre as variáveis: var(--accent), var(--bg-base), etc.
   - Fontes estão em --font-sans e --font-mono.
     Para trocar a fonte, mude só o @import e as variáveis.

   ESTRUTURA DO ARQUIVO:
   1.  Variáveis (cores, fontes, tamanhos)
   2.  Reset & base
   3.  Scrollbar
   4.  Tipografia
   5.  Layout utilitários (.container, .section, etc.)
   6.  Botões
   7.  Notice bar (faixa do topo)
   8.  Navbar
   9.  Hero (seção inicial da index)
   10. Features (grade de recursos)
   11. About (seção sobre)
   12. Download (cards de download)
   13. Team (equipe)
   14. Docs cards
   15. Footer
   16. Páginas internas (page-hero, breadcrumb, prose, etc.)
   17. Animações (fade-up)
   18. Responsive (mobile)
   ============================================================ */

/* Fonte importada do Google Fonts.
   Se o servidor não tiver acesso à internet,
   baixe as fontes e sirva localmente. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');


/* ============================================================
   1. VARIÁVEIS
   Para mudar a identidade visual do site, mexa AQUI.
   ============================================================ */
:root {
  /* Fundos — do mais escuro ao mais claro */
  --bg-base:        #0a0f0a;   /* fundo geral da página */
  --bg-surface:     #111811;   /* painéis, navbar, footer */
  --bg-card:        #172017;   /* cards internos */
  --bg-hover:       #1e281e;   /* hover de cards */

  /* Cor de destaque — VERDE oficial do ALMA */
  --accent:         #4ade80;          /* verde principal */
  --accent-dim:     #1a6632;          /* verde escuro (scrollbar, etc.) */
  --accent-glow:    rgba(74,222,128,0.10);  /* brilho suave */
  --accent-border:  rgba(74,222,128,0.22);  /* bordas com cor */

  --green-bright:   #86efac;   /* verde claro para hover */

  /* Texto */
  --text-primary:   #e8f0e8;   /* texto principal */
  --text-secondary: #8fa88f;   /* texto secundário / parágrafos */
  --text-dim:       #3d4f3d;   /* texto muito apagado / labels */

  /* Bordas */
  --border:         rgba(255,255,255,0.06);  /* borda padrão sutil */
  --border-accent:  rgba(74,222,128,0.22);   /* borda com acento verde */

  /* Fontes */
  --font-sans: 'IBM Plex Sans', sans-serif;  /* textos corridos, UI */
  --font-mono: 'IBM Plex Mono', monospace;   /* código, labels, terminal */

  /* Bordas arredondadas */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Altura da navbar — usada para padding-top nas páginas */
  --nav-h: 60px;

  /* Transição padrão */
  --trans: 0.2s ease;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--green-bright); }
img { display: block; max-width: 100%; }
ul { list-style: none; }


/* ============================================================
   3. SCROLLBAR PERSONALIZADA
   ============================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; }


/* ============================================================
   4. TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-primary);
}
/* clamp(mínimo, preferido, máximo) — escala responsiva automática */
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.1rem; }
p  { color: var(--text-secondary); font-weight: 300; }

/* Estilo de código inline: `assim` */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-card);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  color: var(--accent);
  border: 1px solid var(--border);
}


/* ============================================================
   5. LAYOUT UTILITÁRIOS
   ============================================================ */

/* .container — centraliza e limita a largura do conteúdo */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* .section — espaçamento vertical padrão entre seções */
.section   { padding: 80px 0; }

/* .section-label — texto pequeno verde acima dos títulos (ex: "Sobre o projeto") */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.section-title { margin-bottom: 16px; }
.section-desc  { max-width: 580px; margin-bottom: 48px; font-size: 1.05rem; }

/* .divider — linha horizontal de separação entre seções */
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }


/* ============================================================
   6. BOTÕES
   Variantes: .btn-primary (verde), .btn-outline, .btn-ghost
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500;
  cursor: pointer; transition: all var(--trans); border: none; text-decoration: none;
}

/* Botão cheio verde — ação principal (ex: "Baixar agora") */
.btn-primary { background: var(--accent); color: #000; }
.btn-primary:hover {
  background: var(--green-bright); color: #000;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(74,222,128,0.28);
}

/* Botão contornado — ação secundária */
.btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

/* Botão fantasma — links "ver mais →" */
.btn-ghost { background: transparent; color: var(--accent); padding: 8px 0; }
.btn-ghost:hover { color: var(--green-bright); }
.btn-ghost .arrow { transition: transform var(--trans); }
.btn-ghost:hover .arrow { transform: translateX(4px); }


/* ============================================================
   7. NOTICE BAR
   Faixa fina no topo absoluto da página.
   Para esconder, remova o elemento #noticeBar no HTML.
   ============================================================ */
.notice-bar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
}
.notice-bar a { color: var(--accent); }


/* ============================================================
   8. NAVBAR
   Fixada no topo, com blur de fundo.
   .scrolled é adicionada via JS quando o usuário rola a página.
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h); z-index: 1000;
  background: rgba(10,15,10,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background var(--trans);
}
.navbar.scrolled { background: rgba(10,15,10,0.97); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }

/* Logo — ponto verde pulsante + nome */
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-primary); font-family: var(--font-mono);
  font-weight: 500; font-size: 1.05rem; letter-spacing: 0.05em;
}
.nav-logo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: pulse 2.5s infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; box-shadow: 0 0 8px var(--accent); }
  50%      { opacity:0.5; box-shadow: 0 0 16px var(--accent); }
}

/* Links de navegação */
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: var(--text-secondary); font-size: 0.875rem;
  padding: 6px 14px; border-radius: var(--radius-sm); transition: all var(--trans);
}
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); background: var(--bg-surface); }

.nav-cta { display: flex; align-items: center; gap: 12px; }

/* Tag de versão (ex: "v5") */
.nav-version {
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim);
  border: 1px solid var(--border); padding: 3px 8px; border-radius: var(--radius-sm);
}

/* Botão hamburguer — só aparece em mobile (ver seção responsive) */
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--text-primary); border-radius: 2px; transition: all 0.3s ease;
}
/* Animação do X ao abrir o menu */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   9. HERO
   Layout de 2 colunas: texto à esquerda, terminal à direita.
   Em mobile (< 960px), o terminal some e fica 1 coluna.
   ============================================================ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 420px; /* texto | terminal */
  align-items: center;
  gap: 48px;
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
}

/* Grade de fundo decorativa */
.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(74,222,128,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  /* mask-image cria o efeito de desvanecer nas bordas */
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
  pointer-events: none;
}

/* Brilho radial suave no fundo */
.hero-glow {
  position: absolute; top: 25%; left: 20%;
  width: 500px; height: 300px;
  background: radial-gradient(ellipse, rgba(74,222,128,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; }

/* Badge "Open Source · Local-first · Python" */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-surface); border: 1px solid var(--border-accent);
  border-radius: 20px; padding: 5px 14px;
  font-family: var(--font-mono); font-size: 0.77rem; color: var(--accent);
  margin-bottom: 28px;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero-title { margin-bottom: 22px; }
.hero-title .accent { color: var(--accent); } /* palavra em verde no título */
.hero-subtitle { font-size: 1.1rem; margin-bottom: 38px; max-width: 520px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 52px; }

/* Estatísticas ("100% Local", "MIT Licença", etc.) */
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.stat-num { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500; color: var(--text-primary); }
.stat-label { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }

/* Terminal — coluna direita do hero */
.hero-terminal {
  position: relative; z-index: 1; align-self: center;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: fadeSlideIn 0.7s ease 0.2s both;
}
@keyframes fadeSlideIn {
  from { opacity:0; transform: translateX(20px); }
  to   { opacity:1; transform: translateX(0); }
}

/* Barra de título do terminal (bolinhas coloridas) */
.terminal-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dot.red    { background: #ff5f57; }
.terminal-dot.yellow { background: #febc2e; }
.terminal-dot.green  { background: #28c840; }
.terminal-title { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); margin-left: 8px; }

/* Corpo do terminal — preenchido via JS (main.js) */
.terminal-body {
  padding: 20px; font-family: var(--font-mono); font-size: 0.82rem; line-height: 2;
  min-height: 220px; max-height: 290px; overflow-y: auto;
}

/* Classes de cor para as linhas do terminal */
.t-prompt { color: var(--accent); }       /* linha de comando */
.t-out    { color: var(--text-secondary); } /* saída normal */
.t-ok     { color: var(--green-bright); }  /* sucesso */
.t-dim    { color: var(--text-dim); }      /* info apagada */

/* Cursor piscante no fim da animação */
.t-cursor {
  display: inline-block; width: 8px; height: 14px;
  background: var(--accent); vertical-align: middle;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }


/* ============================================================
   10. FEATURES (grade de recursos)
   Gap de 1px + background cria o efeito de grade com bordas.
   ============================================================ */
.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.feature-card { background: var(--bg-surface); padding: 32px; transition: background var(--trans); }
.feature-card:hover { background: var(--bg-hover); }
.feature-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--accent-glow); border: 1px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; font-size: 1.1rem;
}
.feature-card h3 { margin-bottom: 10px; font-size: 0.98rem; font-weight: 500; }
.feature-card p  { font-size: 0.875rem; line-height: 1.65; }


/* ============================================================
   11. ABOUT (seção sobre)
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-text p { margin-bottom: 20px; }
.about-list { display: flex; flex-direction: column; gap: 14px; }
.about-list-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--trans);
}
.about-list-item:hover { border-color: var(--border-accent); }
.about-list-icon { font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.about-list-item h4 { font-size: 0.9rem; font-weight: 500; margin-bottom: 4px; }
.about-list-item p  { font-size: 0.82rem; margin: 0; }


/* ============================================================
   12. DOWNLOAD
   ============================================================ */
.download-section { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 32px; }
.download-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px;
  transition: all var(--trans); cursor: pointer;
}
.download-card:hover { border-color: var(--border-accent); background: var(--bg-hover); transform: translateY(-2px); }

/* .featured = card destacado (Linux — recomendado) */
.download-card.featured { border-color: var(--border-accent); background: linear-gradient(135deg, var(--bg-card), rgba(74,222,128,0.04)); }

.dl-os   { font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent); margin-bottom: 8px; }
.dl-name { font-size: 1rem; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.dl-ver  { font-family: var(--font-mono); font-size: 0.77rem; color: var(--text-dim); margin-bottom: 16px; }
.dl-meta { display: flex; gap: 16px; font-size: 0.77rem; color: var(--text-dim); font-family: var(--font-mono); }

/* Caixa de nota com borda esquerda colorida */
.download-note {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--radius-md);
  padding: 16px 20px; font-size: 0.875rem; color: var(--text-secondary);
}


/* ============================================================
   13. TEAM (equipe)
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.team-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px; text-align: center;
  transition: all var(--trans);
}
.team-card:hover { border-color: var(--border-accent); transform: translateY(-3px); }

/* Avatar com iniciais */
.team-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent-glow); border: 2px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-family: var(--font-mono);
  font-size: 1.1rem; font-weight: 500; color: var(--accent);
}
.team-name  { font-size: 0.95rem; font-weight: 500; margin-bottom: 6px; }
.team-role  { font-size: 0.77rem; color: var(--accent); font-family: var(--font-mono); margin-bottom: 8px; }
.team-bio   { font-size: 0.82rem; line-height: 1.6; }


/* ============================================================
   14. DOCS CARDS (na index)
   ============================================================ */
.docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.docs-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px;
  transition: all var(--trans); display: flex; flex-direction: column; gap: 10px;
}
.docs-card:hover { border-color: var(--border-accent); background: var(--bg-hover); }
.docs-tag {
  font-family: var(--font-mono); font-size: 0.7rem; padding: 2px 8px;
  border-radius: 10px; background: var(--bg-card);
  border: 1px solid var(--border); color: var(--text-dim); width: fit-content;
}
.docs-card h3 { font-size: 0.95rem; }
.docs-card p  { font-size: 0.82rem; margin: 0; }


/* ============================================================
   15. FOOTER
   ============================================================ */
.footer { background: var(--bg-surface); border-top: 1px solid var(--border); padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-brand p { font-size: 0.875rem; margin-top: 12px; max-width: 260px; line-height: 1.6; }
.footer-col h4 {
  font-size: 0.75rem; font-family: var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 0.875rem; color: var(--text-secondary); }
.footer-col ul li a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 0.77rem; color: var(--text-dim); font-family: var(--font-mono);
  flex-wrap: wrap; gap: 12px;
}
.footer-license { display: flex; align-items: center; gap: 16px; }
.footer-license a { color: var(--text-dim); }
.footer-license a:hover { color: var(--accent); }


/* ============================================================
   16. PÁGINAS INTERNAS
   Usado em sobre.html, docs.html, download.html, etc.
   ============================================================ */

/* Hero simples das páginas internas (sem terminal) */
.page-hero {
  padding: calc(var(--nav-h) + 56px) 0 56px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  position: relative; overflow: hidden;
}
/* Grade de fundo decorativa (mesma da index, mais sutil) */
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(74,222,128,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }
.page-hero p  { font-size: 1.05rem; max-width: 540px; }

/* Breadcrumb: Início / Docs / Comandos */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-dim); margin-bottom: 20px;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--accent); }

/* Conteúdo longo de texto (docs, sobre, licença, etc.) */
.prose { max-width: 740px; }
.prose h2 {
  font-size: 1.4rem; margin: 48px 0 16px;
  padding-top: 48px; border-top: 1px solid var(--border);
}
.prose h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.prose h3 { font-size: 1.05rem; margin: 28px 0 10px; }
.prose p  { font-size: 0.95rem; margin-bottom: 18px; line-height: 1.8; }
.prose ul { margin: 0 0 18px 20px; list-style: disc; }
.prose ul li { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 8px; line-height: 1.7; }

/* Bloco de código */
.prose pre {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px; overflow-x: auto;
  margin: 24px 0; font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--accent); line-height: 1.8;
}

/* Caixa de observação / aviso */
.prose .note {
  background: var(--accent-glow); border: 1px solid var(--border-accent);
  border-left: 3px solid var(--accent); border-radius: var(--radius-md);
  padding: 14px 18px; margin: 24px 0; font-size: 0.875rem; color: var(--text-secondary);
}

/* Layout com sidebar (docs.html, comandos.html) */
.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.docs-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); }
.docs-sidebar nav h4 {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 12px; margin-top: 24px;
}
.docs-sidebar nav h4:first-child { margin-top: 0; }
.docs-sidebar nav ul { display: flex; flex-direction: column; gap: 4px; }
.docs-sidebar nav ul li a {
  display: block; padding: 5px 10px; border-radius: var(--radius-sm);
  font-size: 0.875rem; color: var(--text-secondary); transition: all var(--trans);
}
.docs-sidebar nav ul li a:hover,
.docs-sidebar nav ul li a.active { color: var(--accent); background: var(--accent-glow); }

/* Tabela de referência de comandos */
.cmd-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.cmd-table th {
  text-align: left; font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.cmd-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 0.875rem; color: var(--text-secondary); vertical-align: top; }
.cmd-table td:first-child { font-family: var(--font-mono); color: var(--accent); white-space: nowrap; }
.cmd-table tr:hover td { background: var(--bg-hover); }

/* Itens do changelog */
.changelog-item { padding: 28px 0; border-bottom: 1px solid var(--border); }
.changelog-item:last-child { border-bottom: none; }
.version-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.version-tag {
  font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500;
  color: var(--accent); background: var(--accent-glow);
  border: 1px solid var(--border-accent); padding: 3px 10px; border-radius: var(--radius-sm);
}
.version-date { font-family: var(--font-mono); font-size: 0.77rem; color: var(--text-dim); }
.version-latest {
  font-family: var(--font-mono); font-size: 0.7rem;
  background: rgba(74,222,128,0.15); color: var(--accent);
  border: 1px solid var(--border-accent); padding: 2px 8px; border-radius: 10px;
}
.changelog-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.changelog-entry { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; }
.changelog-type { font-family: var(--font-mono); font-size: 0.68rem; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; margin-top: 2px; }
.type-new { background: rgba(74,222,128,0.12); color: var(--accent); border: 1px solid var(--border-accent); }
.type-fix { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.type-chg { background: rgba(139,148,158,0.1); color: var(--text-secondary); border: 1px solid var(--border); }

/* Formulário (bug.html) */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.82rem; font-family: var(--font-mono); color: var(--text-secondary); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px;
  font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-primary);
  transition: border-color var(--trans); outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--border-accent); background: var(--bg-hover);
}
.form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.form-group select option { background: var(--bg-card); }


/* ============================================================
   17. ANIMAÇÕES DE ENTRADA
   .fade-up é adicionado via HTML.
   O JS (main.js → IntersectionObserver) adiciona .visible
   quando o elemento entra na viewport.
   transitionDelay é calculado automaticamente em JS
   para criar o efeito cascata.
   ============================================================ */
.fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }


/* ============================================================
   18. RESPONSIVE / MOBILE
   Breakpoints: 960px (tablet) e 640px (mobile)
   ============================================================ */
@media (max-width: 960px) {
  /* Hero vira 1 coluna, terminal some */
  .hero { grid-template-columns: 1fr; }
  .hero-terminal { display: none; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Sidebar de docs vira topo */
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; }
}

@media (max-width: 640px) {
  .section { padding: 56px 0; }

  /* Esconde links e versão, mostra hamburguer */
  .nav-links, .nav-version { display: none; }
  .nav-toggle { display: flex; }

  /* Menu mobile — aparece abaixo da navbar quando aberto */
  .nav-links.mobile-open {
    display: flex; flex-direction: column;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
    padding: 12px; z-index: 999;
  }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-actions { flex-direction: column; }
}