/* ============================================================
   index.css · ajustes exclusivos da home. estrutura comum
   vem de site.css; aqui só caem regras que não existem nas
   subpáginas.
   ============================================================ */

.eyebrow { margin-bottom: var(--s-4); }

/* linha de metadados reaproveitada fora do hero */
.resumo-meta { margin-top: var(--s-5); }
.linha-meta span { color: var(--muted); }
.resumo-meta a {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--line-strong);
}
.resumo-meta a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* a árvore e o painel entram sem regra própria: layout em site.css */

/* a lista 01–04 fica colada à prosa do meu papel */
#meu-papel .etapas { margin-top: var(--s-6); }
#meu-papel .etapas a {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--accent);
  text-decoration: none;
}
#meu-papel .etapas a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- mentoria ---------- */
.mentoria-topicos {
  margin-top: var(--s-6);
  list-style: none;
  display: grid; gap: var(--s-4) var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--measure);
}
.mentoria-topicos li { display: flex; flex-direction: column; gap: 6px; }
.mentoria-topicos strong { font-weight: 400; font-size: var(--fs-3); color: var(--fg); }
.mentoria-topicos span { font-size: var(--fs-2); color: var(--muted); line-height: 1.5; }
.mentoria-topicos + .prosa { margin-top: var(--s-6); }
.mentoria-acoes {
  margin-top: var(--s-6);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-5);
}
.mentoria-acoes .btn-linha { padding-left: 0; padding-right: 0; }
.mentoria-nota {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-1); color: var(--muted);
}

@media (max-width: 760px) {
  .mentoria-topicos { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .mentoria-acoes { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .mentoria-acoes .btn-solido { margin-bottom: var(--s-2); }
}

/* selo "no ar" das folhas da árvore */
.no-ar {
  margin-left: auto;
  font-size: var(--fs-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- projetos principais (home) ----------
   As mesmas regras de .stack-grid/.stack-cell que a página Sobre usa
   (css/paginas.css, carregado só nas subpáginas). Aqui a home não
   carrega paginas.css, então o componente é redefinido aqui para
   ficar idêntico ao da página Sobre. */
.stack-grid {
  display: grid; gap: var(--s-5) var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: var(--s-6);
}
.stack-cell { padding: var(--s-4) 0; display: flex; flex-direction: column; gap: var(--s-2); }
.stack-cell h3 {
  font-family: var(--font-display); font-size: var(--fs-3); font-weight: 400;
  color: var(--fg);
}
.stack-cell ul {
  margin-top: var(--s-2); list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
}
.stack-cell li {
  font-family: var(--font-mono); font-size: var(--fs-0); color: var(--muted);
}
.pp-desc { font-size: var(--fs-2); color: var(--muted); max-width: 42ch; }
.pp-links {
  margin-top: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-1); color: var(--accent);
}
.pp-links a { color: var(--accent); text-decoration: none; }
.pp-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pp-nota {
  margin-top: auto; padding-top: var(--s-2);
  font-size: var(--fs-0); color: var(--muted); max-width: 46ch;
}

/* ---------- o que construí: grade de domínios ---------- */
.dominios {
  margin-top: var(--s-5);
  list-style: none;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.dominios li {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.dominios strong { font-weight: 400; font-size: var(--fs-3); color: var(--fg); }
.dominios span { font-size: var(--fs-2); color: var(--muted); }
.dominios-links { font-family: var(--font-mono); font-size: var(--fs-1); line-height: 1.7; color: var(--muted); }
.dominios a {
  font-family: var(--font-mono); font-size: var(--fs-1);
  color: var(--accent); text-decoration: none;
}
.dominios a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- como uso agentes ---------- */
/* Mesma linguagem das outras seções: prosa corrida e linhas de papel
   (nome à esquerda, descrição à direita). Sem caixas nem bordas. */
.agentes {
  margin-top: var(--s-6);
  list-style: none;
  display: grid; gap: var(--s-4);
  max-width: var(--measure);
}
.agentes li {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
}
.agente-id { display: flex; flex-direction: column; gap: 4px; }
.agente-nome { font-weight: 400; font-size: var(--fs-3); color: var(--fg); }
.agente-amb {
  font-size: var(--fs-0); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.agente-uso { font-size: var(--fs-2); color: var(--muted); line-height: 1.5; }
.agentes-orq { margin-top: var(--s-6); }

@media (max-width: 560px) {
  .stack-grid, .dominios { grid-template-columns: 1fr; }
  .agentes li { grid-template-columns: 1fr; gap: 6px; }
}