/* Árvore genealógica: diagrama das gerações e página de cada pessoa. */

fontana-topo[tamanho="grande"] { --topo-folga-titulo: var(--arvore-rotulo-vazio); }
fontana-topo[tamanho="grande"] h1 { font-size: var(--texto-h1-arvore-cabe); padding-top: var(--arvore-rotulo-vazio); }
/* O brasão fica alinhado ao topo da caixa, como no export (o título desce pelo rótulo vazio). */
fontana-topo[tamanho="grande"] h1::before { margin-top: calc(-1 * var(--arvore-rotulo-vazio)); }

/* ============ Diagrama ============ */
.arvore {
  background: var(--cor-papel);
  border: var(--linha-fina) solid var(--cor-borda-azul-leve);
  padding: var(--arvore-respiro);
}
.arvore__geracao {
  text-align: center; margin: 0;
  font-size: var(--texto-arvore-rotulo); letter-spacing: var(--tracking-card); text-transform: uppercase;
  color: var(--cor-ouro-texto); font-weight: 400;
}
.arvore__nota { text-align: center; font-size: var(--texto-arvore-nota); color: var(--cor-texto-suave); margin: var(--espaco-2) 0 0; }
.arvore__conector { width: var(--linha-fina); height: var(--arvore-conector); background: var(--cor-conector); margin: 0 auto; }
.arvore__conector--ramos { margin-top: 1.625rem; }
.arvore__conector--netos { margin-top: 2.125rem; }
.arvore__grade {
  margin: var(--espaco-4-5) var(--arvore-recuo) 0;
  display: grid; gap: var(--arvore-espaco-grade);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-coluna), 100%), 1fr));
  padding: 0; list-style: none;
}
.arvore__grade--ramos { --min-coluna: 12.5rem; }
.arvore__grade--filhos { --min-coluna: 11.875rem; }
.arvore__grade--netos { --min-coluna: 13.125rem; align-items: start; }

/* Casal da 1ª geração */
.casal { display: flex; justify-content: center; margin-top: var(--espaco-4); }
.casal__cartao {
  position: relative;
  border: var(--linha-fina) solid var(--cor-borda-azul); background: var(--cor-branco);
  padding: 1.25rem 1.625rem; max-width: 41.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--espaco-titulo-secao);
}
.casal__cartao:hover { border-color: var(--cor-ouro); }
.casal__pessoa { text-align: center; min-width: 0; }
.casal__pessoa .cartao-arvore__meta { line-height: normal; }
.casal__traco { width: 2.125rem; height: var(--linha-fina); background: var(--cor-ouro); }
.casal__acao { flex: 1 1 100%; text-align: center; margin-top: var(--espaco-1); }

.cartao-arvore__nome {
  font-size: var(--texto-arvore-nome); font-weight: 600; letter-spacing: var(--tracking-titulo);
  color: var(--cor-azul-noite); line-height: 1.25;
}
.cartao-arvore__meta { font-size: var(--texto-arvore-meta); color: var(--cor-texto-suave); margin-top: 0.3125rem; line-height: 1.35; }
.link-bio {
  font-family: var(--fonte-titulo); font-size: var(--texto-arvore-rotulo); letter-spacing: var(--tracking-nav);
  text-transform: uppercase; color: var(--cor-celeste);
}
.link-bio:hover { color: var(--cor-azul-noite); }
/* Link que cobre o cartão inteiro, para o clique funcionar em qualquer ponto */
.link-bio--cobre::after { content: ''; position: absolute; inset: 0; }

/* Cartão selecionável (ramo e filho): botão com aria-pressed */
.ramo { display: flex; flex-direction: column; align-items: stretch; min-width: 0; height: 100%; }
.cartao-arvore {
  width: 100%; height: 100%; min-width: 0;
  font: inherit; text-align: center; cursor: pointer;
  border: var(--linha-fina) solid var(--cor-borda-azul); background: var(--cor-branco);
  padding: var(--espaco-4) 0.875rem; color: inherit;
}
.cartao-arvore:hover { border-color: var(--cor-ouro); }
.cartao-arvore[aria-pressed="true"] { background: var(--cor-azul-escudo); border-color: var(--cor-azul-noite); }
.cartao-arvore[aria-pressed="true"] .cartao-arvore__nome { color: var(--cor-branco); }
.cartao-arvore[aria-pressed="true"] .cartao-arvore__meta { color: var(--cor-invertido-branco-78); }
.cartao-arvore[aria-pressed="true"] .cartao-arvore__local { color: var(--cor-invertido-branco-60); }
.cartao-arvore__conjuge { font-size: var(--texto-arvore-conjuge); color: var(--cor-texto-suave); margin-top: var(--espaco-1-5); line-height: 1.35; }
.cartao-arvore[aria-pressed="true"] .cartao-arvore__conjuge { color: var(--cor-invertido-branco-78); }
.cartao-arvore__local { font-size: var(--texto-arvore-meta); color: var(--cor-texto-suave); margin-top: var(--espaco-2); line-height: 1.35; }
.ramo .link-bio { margin-top: var(--espaco-2); text-align: center; }

/* 3ª geração. O cartão é um bloco visual; dentro dele, o botão (nome) cobre a
   área inteira com ::after para selecionar, e o link "Abrir biografia" fica
   por cima (z-index). Assim não há link dentro de botão e os dois funcionam
   pelo teclado. */
.filho {
  position: relative; min-width: 0; height: 100%;
  border: var(--linha-fina) solid var(--cor-borda-azul); background: var(--cor-branco);
  padding: 1.375rem 1.125rem; display: flex; flex-direction: column; align-items: center; gap: var(--espaco-2);
  text-align: center;
}
.filho:hover { border-color: var(--cor-ouro); }
.filho--fixo { padding: var(--espaco-4) var(--espaco-3); gap: 0.5625rem; }
.filho--fixo:hover { border-color: var(--cor-borda-azul); }
.filho__selecionar { display: block; width: 100%; font: inherit; line-height: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.filho__selecionar::after { content: ''; position: absolute; inset: 0; }
.filho__selecionar:focus-visible { outline: none; }
.filho:has(.filho__selecionar:focus-visible) { outline: var(--foco-contorno); outline-offset: var(--foco-afastamento); }
.filho .link-bio { position: relative; z-index: 1; margin-top: var(--espaco-1); }
.filho--selecionado { background: var(--cor-azul-escudo); border-color: var(--cor-azul-noite); }
.filho--selecionado .cartao-arvore__nome { color: var(--cor-branco); }
.filho--selecionado .cartao-arvore__meta, .filho--selecionado .cartao-arvore__rodape { color: var(--cor-invertido-branco-78); }
.filho--selecionado .cartao-arvore__rodape { border-top-color: var(--cor-invertido-branco-25); }
.filho--selecionado .link-bio { color: var(--cor-texto-invertido); }
.cartao-arvore__rodape {
  width: 100%; border-top: var(--linha-fina) solid var(--cor-divisoria-azul); padding-top: 0.5625rem;
  font-size: var(--texto-arvore-meta); color: var(--cor-texto-suave); line-height: 1.35;
}

/* 4ª geração */
.bloco-netos { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bloco-netos__cabeca {
  width: 100%; border: var(--linha-fina) solid var(--cor-borda-azul); background: var(--cor-areia);
  padding: 0.625rem var(--espaco-3); text-align: center; min-width: 0;
}
.bloco-netos__rotulo { font-size: var(--texto-arvore-conjuge); font-weight: 600; letter-spacing: var(--tracking-titulo); color: var(--cor-azul-noite); line-height: 1.25; }
.bloco-netos__contagem { font-size: var(--texto-arvore-meta); color: var(--cor-celeste); margin-top: var(--espaco-1); }
.bloco-netos__haste { width: var(--linha-fina); height: var(--arvore-conector-curto); background: var(--cor-conector); }
.bloco-netos__lista {
  width: 100%; margin: 0; padding: 0 0 0 var(--espaco-2); list-style: none;
  display: flex; flex-direction: column; gap: var(--espaco-1-5);
  /* Trilho vertical à esquerda, como no export */
  background: linear-gradient(var(--cor-conector), var(--cor-conector)) no-repeat var(--espaco-2) 0 / var(--linha-fina) 100%;
}
.no { display: flex; align-items: center; min-width: 0; }
.no::before { content: ''; width: var(--arvore-traco); height: var(--linha-fina); background: var(--cor-conector); flex: 0 0 var(--arvore-traco); margin-left: var(--linha-fina); }
.no__cartao {
  position: relative; flex: 1; min-width: 0;
  border: var(--linha-fina) solid var(--cor-borda-azul); background: var(--cor-branco);
  padding: 0.4375rem 0.5625rem; line-height: 1.25; font: inherit; text-align: left; color: inherit;
}
button.no__cartao { cursor: pointer; }
.no__nome { font-size: var(--texto-arvore-nome); font-weight: 600; letter-spacing: var(--tracking-titulo); color: var(--cor-azul-noite); line-height: 1.3; }
.no__conjuge { font-size: var(--texto-arvore-no); color: var(--cor-texto-suave); line-height: 1.3; }
.no--otavio .no__cartao { border-color: var(--cor-ouro); }
.no--otavio .no__nome, .no--quinta .no__nome { color: var(--cor-celeste); }
.no--aberto { flex-wrap: wrap; }
.no__bio { flex-basis: 100%; padding-left: calc(var(--arvore-traco) + var(--linha-fina) + 0.5625rem); margin-top: var(--espaco-2); }
.no--quinta { margin-left: var(--arvore-recuo-quinta); }
.no--quinta .no__cartao { border: var(--linha-fina) dashed var(--cor-tracejado); }

/* ============ Página da pessoa ============ */
.pessoa { background: var(--cor-papel); border: var(--linha-fina) solid var(--cor-borda-azul-leve); padding: var(--pessoa-respiro); }
.pessoa .migalha { font-size: var(--texto-arvore-meta); }
.pessoa__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); gap: var(--pessoa-colunas); align-items: start; }
.pessoa__retrato { margin: 0; }
.pessoa__texto { min-width: 0; }
.moldura {
  position: relative; overflow: hidden; margin: 0;
  border: var(--linha-fina) solid var(--cor-borda-azul); background: var(--cor-areia);
}
.pessoa__retrato .moldura { height: var(--pessoa-retrato); }
.pessoa__retrato figcaption { font-size: var(--texto-arvore-meta); color: var(--cor-texto-suave); margin-top: 0.625rem; }
.pessoa__nome {
  margin: 0; font-size: var(--texto-arvore-pessoa); font-weight: 600; letter-spacing: var(--tracking-titulo);
  color: var(--cor-azul-noite); line-height: 1.15;
}
.pessoa__resumo { font-size: var(--texto-arvore-nome); color: var(--cor-texto-suave); margin: 0.625rem 0 0; line-height: 1.5; }
.pessoa__pills { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 1.25rem 0 0; padding: 0; list-style: none; }
.pessoa__pills li { border: var(--linha-fina) solid var(--cor-borda-azul); background: var(--cor-branco); padding: var(--espaco-2) var(--espaco-3); font-size: var(--texto-arvore-conjuge); color: var(--cor-texto); }
.pessoa__bio { margin-top: 1.625rem; display: flex; flex-direction: column; gap: var(--espaco-titulo-secao); }
.pessoa__bio p { font-size: var(--texto-arvore-bio); line-height: 1.65; color: var(--cor-texto); margin: 0; }
.pessoa__fato { margin-top: var(--espaco-5); border: var(--linha-fina) solid var(--cor-ouro-fato); background: var(--cor-branco); padding: var(--espaco-4-5) 1.25rem; }
.pessoa__fato p { font-size: var(--texto-arvore-nome); line-height: 1.6; color: var(--cor-texto); margin: 0; }
.pessoa__rotulo { font-size: var(--texto-arvore-rotulo); letter-spacing: var(--tracking-card); text-transform: uppercase; color: var(--cor-ouro-texto); margin: 0 0 var(--espaco-2); font-weight: 400; }
.pessoa__ligacoes { margin-top: 1.625rem; border-top: var(--linha-fina) solid var(--cor-divisoria-azul); padding-top: 1.25rem; }
.pessoa__ligacoes .pessoa__rotulo { margin-bottom: var(--espaco-3); }
.ligacoes { margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.ligacoes__linha { display: grid; grid-template-columns: var(--pessoa-rotulo-ligacao) minmax(0, 1fr); gap: var(--espaco-3); font-size: var(--texto-arvore-link); }
.ligacoes dt { color: var(--cor-texto-suave); }
/* Em tela estreita a coluna fixa de 130 px deixava ~70 px para o texto e
   "documentados" vazava para fora da página. Empilha rótulo e valor. */
@media (max-width: 30rem) {
  .ligacoes__linha { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.ligacoes dd { margin: 0; color: var(--cor-texto-suave); }
.pessoa__secao { margin-top: var(--espaco-post-bloco); border-top: var(--linha-fina) solid var(--cor-divisoria-azul); padding-top: var(--espaco-5); }
.pessoa__secao-cabeca { display: flex; flex-wrap: wrap; gap: 0.625rem 1.25rem; align-items: baseline; justify-content: space-between; }
.pessoa__secao-cabeca .pessoa__rotulo { margin: 0; }
.pessoa__secao-nota { font-size: var(--texto-arvore-conjuge); color: var(--cor-texto-suave); margin: 0; }
.pessoa__filhos { margin: var(--espaco-titulo-secao) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14.375rem, 100%), 1fr)); gap: var(--espaco-3); }
.pessoa__filhos li { position: relative; border: var(--linha-fina) solid var(--cor-borda-azul); background: var(--cor-branco); padding: var(--espaco-3) 0.875rem; min-width: 0; }
.pessoa__filhos li.tem-link { border-color: var(--cor-borda-azul); }
.pessoa__filhos li.destaque { border-color: var(--cor-ouro); }
.pessoa__filhos .cartao-arvore__nome a { color: var(--cor-celeste); }
.pessoa__filhos .cartao-arvore__nome a::after { content: ''; position: absolute; inset: 0; }
.album { margin: var(--espaco-titulo-secao) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); gap: 1.75rem 0.875rem; }
.album .moldura { height: var(--altura-album); }
.pessoa__secao .pessoa__rotulo--sozinho { margin-bottom: var(--espaco-titulo-secao); }
.irmaos { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.irmaos a, .irmaos span {
  display: inline-block; border: var(--linha-fina) solid var(--cor-borda-azul); background: var(--cor-branco);
  padding: 0.625rem 0.875rem; font-size: var(--texto-arvore-meta); color: var(--cor-azul-noite);
}
.irmaos a:hover { border-color: var(--cor-celeste); color: var(--cor-celeste); }

.pagina--larga { max-width: var(--largura-arvore); }