/* ============================================================
   I.M. PEREIRA — IDENTIDADE VISUAL · ti.impereira.com
   artigos técnicos · post-mortems
   Base: documentacao/identidade/css/ti.css
   Fontes: JetBrains Mono (tudo) + Spectral itálico (citações)
   ============================================================ */

:root {
  --cor-fundo:            #060907;
  --cor-superficie:       #080C09;
  --cor-superficie-2:     #0D1410;
  --cor-acento:           #7EE787;
  --cor-acento-escuro:    #2E5E38;
  --cor-texto:            #CEF2D1;
  --cor-texto-suave:      rgba(206, 242, 209, 0.70);
  --cor-texto-apagado:    rgba(206, 242, 209, 0.45);
  --cor-borda:            rgba(255, 255, 255, 0.14);
  --cor-borda-acento:     rgba(126, 231, 135, 0.30);
  --cor-carmim:           #C41E3A;

  --fonte-mono:   'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
  --fonte-serifa: 'Spectral', 'Iowan Old Style', Georgia, serif;

  --texto-xs:   0.75rem;
  --texto-sm:   0.8125rem;
  --texto-base: 0.9375rem;
  --texto-lg:   1.25rem;
  --texto-xl:   1.75rem;
  --texto-2xl:  2.25rem;

  --espaco-1: 0.5rem;
  --espaco-2: 1rem;
  --espaco-3: 1.5rem;
  --espaco-4: 2.5rem;
  --espaco-5: 4rem;

  --transicao: all 0.2s ease;
}

* { box-sizing: border-box; }

html { background: var(--cor-fundo); }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-mono);
  font-weight: 400;
  font-size: var(--texto-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

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

::selection { background: var(--cor-acento); color: var(--cor-fundo); }

a { color: var(--cor-acento); text-decoration: none; transition: var(--transicao); }
a:hover { color: var(--cor-texto); }

h1, h2, h3 {
  font-family: var(--fonte-mono);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--cor-texto);
  margin: 0 0 var(--espaco-2);
}

h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); font-weight: 500; }

.rotulo {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-acento);
}

.meta {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-apagado);
}

blockquote {
  margin: var(--espaco-3) 0;
  font-family: var(--fonte-serifa);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0625rem;
  color: var(--cor-texto-suave);
  border-left: 1px dashed var(--cor-borda-acento);
  padding-left: var(--espaco-2);
}

pre, code { font-family: var(--fonte-mono); background: var(--cor-superficie-2); color: var(--cor-texto); }
code { padding: 2px 6px; font-size: 0.875em; }
pre { padding: var(--espaco-2); border: 1px solid var(--cor-borda-acento); overflow-x: auto; line-height: 1.6; }
pre code { padding: 0; background: none; }

/* ---- Barra de sessão / prompt ---- */
.barra-sessao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cor-borda-acento);
  font-size: 10px;
  color: var(--cor-texto-apagado);
}

.barra-sessao .status { color: var(--cor-acento); }

.prompt { font-size: 12px; color: var(--cor-texto-apagado); }
.prompt::before { content: "$ "; }

.assinatura { font-weight: 700; font-size: 32px; letter-spacing: 0.02em; color: var(--cor-texto); }
.cursor { color: var(--cor-acento); animation: piscar 1.1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* ---- Navegação em árvore de arquivos ---- */
.arvore {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  list-style: none;
  margin: var(--espaco-2) 0;
  padding: 0;
}

.arvore a { color: inherit; border: none; }
.arvore a:hover, .arvore a.ativo { color: var(--cor-acento); }
.arvore .badge { background: rgba(126, 231, 135, 0.15); color: var(--cor-acento); padding: 1px 6px; font-size: 9.5px; margin-left: 8px; }
.arvore a.link-ficcao:hover { color: var(--cor-carmim); }

/* ---- Cartão de artigo ---- */
.cartao-artigo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-2);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-acento);
  color: var(--cor-texto);
  transition: border-color 0.3s ease;
}

.cartao-artigo:hover { border-color: var(--cor-acento); color: var(--cor-texto); }

.cartao-artigo .cabecalho {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--cor-texto-apagado);
  text-transform: uppercase;
}

.cartao-artigo .titulo { font-weight: 500; font-size: var(--texto-base); color: var(--cor-texto); }

.cartao-artigo .resumo {
  font-family: var(--fonte-serifa);
  font-weight: 300;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.botao-primario {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 11.5px;
  color: var(--cor-fundo);
  background: var(--cor-acento);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: var(--transicao);
}

.botao-primario:hover { background: var(--cor-texto); color: var(--cor-fundo); }

.botao-secundario {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 11.5px;
  color: var(--cor-acento);
  background: transparent;
  border: 1px solid rgba(126, 231, 135, 0.4);
  padding: 9px 20px;
  cursor: pointer;
  transition: var(--transicao);
}

.botao-secundario:hover { border-color: var(--cor-acento); color: var(--cor-acento); }

.divisor { border: none; border-top: 1px dashed var(--cor-borda-acento); margin: var(--espaco-4) 0; }

.rodape-assinatura {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px dashed var(--cor-borda-acento);
  flex-wrap: wrap;
  gap: var(--espaco-2);
}

.rodape-assinatura .nome {
  font-family: var(--fonte-serifa);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--cor-texto-apagado);
}

.rodape-assinatura .redes { display: flex; gap: var(--espaco-2); }
.rodape-assinatura .redes a { color: var(--cor-texto-apagado); border: none; }
.rodape-assinatura .redes a:hover { color: var(--cor-acento); }
.rodape-assinatura svg { width: 16px; height: 16px; fill: currentColor; }

/* ---- Layout ---- */
.container { max-width: 860px; margin: 0 auto; padding: 0 var(--espaco-3); }
.secao { padding-top: var(--espaco-4); padding-bottom: var(--espaco-4); }

.section-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-texto-apagado);
  margin: var(--espaco-4) 0 var(--espaco-2);
}

.chamada { color: var(--cor-texto-suave); font-family: var(--fonte-serifa); font-style: italic; font-weight: 300; max-width: 40rem; }
.acoes { margin-top: var(--espaco-3); display: flex; gap: var(--espaco-2); flex-wrap: wrap; }

.capa-destaque img { max-width: 260px; border: 1px solid var(--cor-borda-acento); }

.grid-obras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--espaco-3);
}

.aviso { font-size: var(--texto-sm); color: var(--cor-texto-apagado); text-align: center; padding: var(--espaco-4) 0; }

.detalhe { display: flex; flex-direction: column; gap: var(--espaco-3); }
.detalhe .links-obra { display: flex; gap: var(--espaco-2); flex-wrap: wrap; margin-top: var(--espaco-2); }

.trailer { margin-top: var(--espaco-4); }
.trailer .video { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--cor-borda-acento); }
.trailer .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sobre { display: flex; gap: var(--espaco-4); align-items: flex-start; flex-wrap: wrap; }
.sobre .foto img { width: 160px; height: 160px; object-fit: cover; border: 1px solid var(--cor-borda-acento); }
.sobre .bio { flex: 1; min-width: 240px; }
.sobre .bio p { margin-bottom: var(--espaco-2); }

.sobre-resumo { color: var(--cor-texto-suave); font-family: var(--fonte-serifa); font-style: italic; max-width: 44rem; }
.sobre-resumo .mais { display: inline-block; margin-top: var(--espaco-2); font-family: var(--fonte-mono); font-style: normal; }

@media (max-width: 720px) {
  .sobre { flex-direction: column; }
}