/* ==========================================================================
   Família Cassoni · folha de estilos única
   Usada pela história (index.html) e pela árvore (arvore/index.html).

   Como está organizada
   1. Medidas e cores ........ as variáveis que todo o resto usa
   2. Base ................... página, coluna de leitura
   3. Tipos de item .......... um estilo para cada tipo, igual nas duas páginas
        rótulo · número de capítulo · títulos · subtítulo · texto corrido
        destaque · nota · nome de pessoa · moldura · cartão · botão · etiqueta
   4. Blocos da história ..... capa, os três, brasão, linha da família, fecho
   5. Árvore ................. a página da árvore completa
   6. Movimento, mapa, brasão em ouro, áudio, impressão

   Regra da casa: para mudar a aparência de um tipo de item, mude na seção 3.
   Os blocos das seções 4 e 5 só cuidam de posição e espaçamento.
   ========================================================================== */

/* ---------- 1. medidas e cores ---------- */
:root {
  --marfim: #f5eedd;
  --marfim-claro: #fbf7ec;
  --tinta: #26221b;
  --tinta-suave: #5b5344;
  --marinho: #14294b;
  --marinho-fundo: #0f2040;
  --ouro: #a67c2a;
  --ouro-claro: #d2ad5c;
  --rubro: #8e1f1a;
  --fio: rgba(166, 124, 42, .45);
  --pontilhado: 1px dotted rgba(91, 83, 68, .35);

  --titulo: "Cinzel", "Trajan Pro", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --texto: "EB Garamond", Georgia, "Times New Roman", serif;

  --rotulo-tam: .66em;
  --rotulo-esp: .26em;
  --nota-tam: .88em;
  --item-tam: 1.5em;
  --nome-tam: 1.16em;
}

/* ---------- 2. base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 0%, #fbf6e8 0%, rgba(251, 246, 232, 0) 60%),
    var(--marfim);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(19px, 0.55vw + 16.5px, 23px);
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
main { display: block; }
p, li { text-wrap: pretty; }
h1, h2, h3, .subtitulo, .nota, .destaque, .abertura p, .frase, .intro, .faixa p, .tres p, .gente, .irmaos, footer p { text-wrap: balance; }
.coluna { width: min(100% - 44px, 35em); margin: 0 auto; }
.coluna.larga { width: min(100% - 32px, 40em); }

/* ---------- 3. tipos de item ---------- */

/* rótulo: a linha pequena em maiúsculas douradas que nomeia o que vem abaixo */
.rotulo {
  font-family: var(--titulo);
  font-size: var(--rotulo-tam);
  font-weight: 500;
  letter-spacing: var(--rotulo-esp);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0;
}
/* centralizado, o rótulo compensa o espaço que sobra depois da última letra */
.rotulo.centro { text-align: center; padding-left: var(--rotulo-esp); }

/* número de capítulo */
.numero {
  font-family: var(--titulo);
  font-size: .8em;
  letter-spacing: .3em;
  color: var(--ouro);
  text-align: center;
  margin: 0;
  padding-left: .3em;
}
.numero::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: var(--ouro);
  margin: 14px auto 0;
}

/* títulos: h1 da capa, título de página, título de capítulo, título de item */
h1 {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(2rem, 7.2vw, 4.1rem);
  letter-spacing: .14em;
  line-height: 1.1;
  color: var(--marinho);
  margin: 44px 0 10px;
  padding-left: .14em;
}
h2, h1.titulo-pagina {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  letter-spacing: 0;
  line-height: 1.12;
  color: var(--marinho);
  text-align: center;
  margin: 18px 0 clamp(26px, 4vw, 42px);
  padding: 0;
}
h3, .titulo-item {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--item-tam);
  line-height: 1.15;
  color: var(--marinho);
  margin: 0 0 4px;
}

/* subtítulo: a linha em itálico logo abaixo de um título */
.subtitulo, .mapa figcaption {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06em;
  line-height: 1.4;
  color: var(--tinta-suave);
  text-align: center;
  margin: 0;
}

/* texto corrido */
.capitulo { padding: clamp(48px, 8vw, 96px) 0 0; }
.capitulo p { margin: 0 0 1.05em; hyphens: auto; }
.capitulo .primeiro::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 3.9em;
  line-height: .82;
  float: left;
  padding: .06em .1em 0 0;
  color: var(--rubro);
}

/* destaque: a frase que fecha ou marca um capítulo */
.destaque {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.35;
  text-align: center;
  color: var(--marinho);
  margin: clamp(30px, 5vw, 52px) auto !important;
  padding: clamp(20px, 3vw, 30px) 0;
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
  max-width: 24em;
  hyphens: none !important;
}

/* nota: a observação pequena em itálico */
.nota {
  font-family: var(--texto);
  font-style: italic;
  font-size: var(--nota-tam);
  line-height: 1.45;
  color: var(--tinta-suave);
  margin: 0;
  hyphens: none;
}

/* nome de pessoa */
.nome {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--nome-tam);
  line-height: 1.2;
  color: var(--marinho);
}

/* moldura: fundo claro, fio de ouro e um segundo fio por fora */
.moldura, .cartao, .mapa svg, .tocador, .botao {
  background: var(--marfim-claro);
  border: 1px solid var(--ouro);
  outline: 1px solid var(--fio);
  outline-offset: 5px;
}

/* cartão: um documento transcrito (livro de matrícula, certidão) */
.cartao {
  margin: clamp(30px, 5vw, 50px) 0;
  padding: clamp(22px, 4vw, 38px) clamp(18px, 4vw, 42px);
}
.cartao .cartao-titulo { text-align: center; padding-left: var(--rotulo-esp); margin: 0 0 6px; hyphens: none; }
.cartao .cartao-data { margin: 0 0 20px; hyphens: none; }
.cartao .cartao-nota {
  text-align: center;
  margin: clamp(26px, 4vw, 36px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--fio);
}
/* linhas do cartão: uma por registro, separadas por pontilhado */
.cartao ol { list-style: none; margin: 0; padding: 0; }
.cartao li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: var(--pontilhado);
}
.cartao li:last-child { border-bottom: 0; }
.cartao .papel { font-style: italic; color: var(--tinta-suave); font-size: .9em; }
.cartao .idade { margin-left: auto; white-space: nowrap; font-variant-numeric: oldstyle-nums; }
.cartao .estrela { color: var(--ouro); font-size: .8em; margin-right: 2px; }
/* cartão em duas colunas (ele e ela) */
.certidao { display: grid; gap: 26px; }
.certidao p { margin: 0; padding: 6px 0; border-bottom: var(--pontilhado); font-size: .94em; line-height: 1.45; hyphens: none; }
.certidao p.rotulo { font-size: var(--rotulo-tam); border: 0; padding: 0; }
.certidao p.nome { font-size: 1.22em; border: 0; padding: 0 0 4px; }
.certidao p.oficio { border: 0; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 1.08em; color: var(--marinho); }
@media (min-width: 620px) {
  .certidao { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); gap: 0; }
  /* as linhas de ele e ela ficam na mesma altura, mesmo quando um dos textos quebra */
  .certidao > div { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
  .certidao > div:first-child { padding-right: clamp(16px, 3vw, 30px); }
  .certidao > div + div { padding-left: clamp(16px, 3vw, 30px); border-left: 1px solid var(--fio); }
}

/* botão */
.botao {
  display: inline-block;
  font-family: var(--titulo);
  font-size: .74em;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--marinho);
  outline-offset: 4px;
  padding: 14px 24px 13px;
  cursor: pointer;
}
.botao:hover, .botao:focus-visible { background: #fff; color: var(--rubro); }

/* etiqueta: a marca pequena que abre e fecha um ramo */
.etiqueta {
  display: inline-block;
  font-family: var(--titulo);
  font-size: .6em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ouro);
  border: 1px solid var(--fio);
  padding: 3px 9px 2px;
  white-space: nowrap;
}

/* ---------- 4. blocos da história ---------- */

/* capa */
.capa {
  min-height: min(100vh, 1080px);
  min-height: min(100svh, 1080px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 20px 40px;
}
.capa .rotulo { letter-spacing: .34em; padding-left: .34em; margin: 0 0 28px; }
.moldura {
  width: min(76vw, 500px);
  padding: 10px;
  outline-offset: 6px;
  box-shadow: 0 24px 60px -28px rgba(20, 41, 75, .55);
}
.moldura img { width: 100%; height: auto; }
.capa .subtitulo { font-size: clamp(1.25rem, 2.6vw, 1.75rem); }
.estrelas {
  display: block;
  width: min(240px, 60vw);
  height: auto;
  margin: 34px auto 0;
  fill: var(--ouro);
}

/* abertura */
.abertura {
  padding: clamp(40px, 8vw, 88px) 0 clamp(16px, 4vw, 40px);
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  line-height: 1.5;
  text-align: center;
  color: var(--marinho);
}
.abertura p { margin: 0; }

/* os três */
.tres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 18px;
  width: min(100% - 44px, 1000px);
  margin: clamp(30px, 5vw, 54px) auto;
}
.tres article {
  background: var(--marfim-claro);
  border: 1px solid var(--fio);
  border-top: 3px solid var(--ouro);
  padding: 28px 24px 26px;
  text-align: center;
}
.tres .rotulo { margin: 0 0 14px; min-height: 1.6em; hyphens: none; }
.tres p { margin: 0; font-size: .95em; line-height: 1.62; }
.tres p.rotulo { font-size: var(--rotulo-tam); line-height: 1.5; }

/* brasão */
.brasao {
  margin-top: clamp(64px, 10vw, 120px);
  padding: clamp(56px, 9vw, 104px) 0;
  background:
    radial-gradient(ellipse at 50% 0%, #1b3562 0%, rgba(27, 53, 98, 0) 62%),
    var(--marinho-fundo);
  color: #efe6d0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.brasao .numero, .brasao .rotulo { color: var(--ouro-claro); }
.brasao .numero::after { background: var(--ouro-claro); }
.brasao h2 { color: #f6eed9; }
.brasao h3 { color: var(--ouro-claro); }
.brasao .intro { text-align: center; max-width: 30em; margin: 0 auto; color: #d9cfb6; }
.brasao .moldura {
  margin: clamp(30px, 5vw, 50px) auto;
  width: min(84vw, 560px);
  border-color: var(--ouro-claro);
  outline-color: rgba(210, 173, 92, .4);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
.figuras {
  list-style: none;
  padding: 0;
  width: min(100% - 44px, 1000px);
  margin: clamp(26px, 4vw, 44px) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(22px, 3vw, 34px) clamp(26px, 4vw, 56px);
}
.figuras li { display: grid; grid-template-columns: clamp(84px, 22vw, 124px) 1fr; gap: 18px; align-items: start; }
.figuras li.faixa { grid-column: 1 / -1; grid-template-columns: 1fr; text-align: center; justify-items: center; }
.figuras li.solo { grid-column: 1 / -1; justify-self: center; width: min(100%, 472px); }
.recorte {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ouro-claro);
  border-radius: 3px;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .9);
}
.faixa .recorte { width: min(100%, 520px); }
.figuras p { margin: 0; font-size: .95em; line-height: 1.6; color: #e4dbc4; }
.faixa p { max-width: 30em; }

/* linha da família */
.linhagem { text-align: center; padding: clamp(56px, 9vw, 100px) 0 0; }
.geracao { position: relative; padding: 0 0 46px; }
.geracao::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 1px;
  height: 30px;
  background: var(--ouro);
}
.geracao:last-of-type { padding-bottom: 0; }
.geracao:last-of-type::after { display: none; }
.geracao .rotulo { margin: 0 0 6px; }
.geracao .gente {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  line-height: 1.3;
  color: var(--marinho);
  margin: 0;
}
.geracao .gente em { font-weight: 500; color: var(--tinta-suave); }
.geracao .nota { margin: 4px 0 0; }
.geracao .irmaos { font-family: var(--display); font-size: 1.12em; color: var(--tinta-suave); margin: 0; }
.geracao .irmaos strong { color: var(--marinho); font-weight: 600; }
.ver-arvore { margin: clamp(34px, 5vw, 48px) 0 0; }

/* fecho */
.fecho { text-align: center; padding: clamp(60px, 10vw, 120px) 0 clamp(40px, 6vw, 70px); }
.fecho .frase {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.35;
  color: var(--marinho);
  margin: 0 auto;
  max-width: 20em;
}
.fecho .assinatura { margin: 34px 0 0; }
footer {
  border-top: 1px solid var(--fio);
  padding: 26px 22px 40px;
  text-align: center;
  font-size: .74em;
  line-height: 1.6;
  color: var(--tinta-suave);
}
footer p { max-width: 46em; margin: 0 auto; }

/* ---------- 5. árvore ---------- */
.pagina-arvore { line-height: 1.5; }
.pagina-arvore a { color: var(--marinho); }
.volta { display: inline-block; text-decoration: none; padding: 12px 0; }
.pagina-arvore a.volta { color: var(--ouro); }
.pagina-arvore a.volta:hover, .pagina-arvore a.volta:focus-visible { color: var(--marinho); }
.topo-arvore { text-align: center; padding: 18px 0 clamp(28px, 5vw, 48px); }
.topo-arvore .volta { margin-bottom: clamp(18px, 4vw, 36px); }
.topo-arvore h1 { margin: 14px 0 12px; }
.topo-arvore .subtitulo { max-width: 26em; margin: 0 auto; }
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  align-items: center;
  justify-content: center;
  margin: clamp(22px, 4vw, 34px) 0 0;
  font-size: var(--nota-tam);
  color: var(--tinta-suave);
}
.legenda .estrela { color: var(--ouro); margin-right: .35em; }
.legenda .botao { font: inherit; font-family: var(--titulo); font-size: .8em; font-weight: 500; }

.arvore, .arvore ul { list-style: none; margin: 0; padding: 0; }
.arvore ul { margin-left: clamp(7px, 1.4vw, 14px); border-left: 1px solid var(--fio); }
.arvore li { position: relative; padding: 5px 0 5px clamp(15px, 2.6vw, 26px); }
.arvore ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.22em;
  width: clamp(10px, 1.9vw, 19px);
  height: 1px;
  background: var(--fio);
}
.arvore > li { padding-left: 0; }
.arvore .no { display: inline; }
.arvore .nome { color: var(--tinta); }
.arvore .anos { font-size: var(--nota-tam); color: var(--tinta-suave); white-space: nowrap; margin-left: .15em; }
.arvore .par { color: var(--tinta-suave); margin-left: .15em; }
.arvore .nota { display: block; }
.arvore .linha > .no .nome, .arvore .linha > details > summary .nome { color: var(--marinho); }
.arvore .linha > .no .nome::before {
  content: "★";
  color: var(--ouro);
  font-size: .62em;
  vertical-align: .22em;
  margin-right: .4em;
}
.arvore ul > li.linha::before { background: var(--ouro); height: 2px; }
.arvore details > summary { list-style: none; cursor: pointer; }
.arvore details > summary::-webkit-details-marker { display: none; }
.arvore .etiqueta { margin-left: .5em; vertical-align: .12em; }
.arvore .etiqueta::after { content: " +"; }
.arvore details[open] > summary .etiqueta::after { content: " −"; }
.arvore summary:hover .etiqueta, .arvore summary:focus-visible .etiqueta { border-color: var(--ouro); color: var(--marinho); }
.arvore details > ul { margin-top: 4px; }

.outros { padding: clamp(48px, 8vw, 84px) 0 0; }
.outros h2 { margin: 0 0 6px; }
.outros > .subtitulo { margin: 0 0 clamp(22px, 4vw, 36px); }
.ramo { padding: 0 0 clamp(22px, 4vw, 34px); }
.ramo .nota { margin: 0 0 8px; }
.rodape-arvore { text-align: center; padding: clamp(40px, 7vw, 76px) 0 clamp(36px, 6vw, 60px); }
.rodape-arvore .assinatura { color: var(--tinta-suave); margin: 14px 0 0; }
@media print {
  .pagina-arvore { background: #fff; font-size: 11.5pt; line-height: 1.35; }
  .pagina-arvore .coluna { width: 100%; }
  .pagina-arvore .volta, .pagina-arvore .botao, .pagina-arvore .etiqueta { display: none; }
  .topo-arvore { padding: 0 0 14pt; }
  .arvore li { padding-top: 2pt; padding-bottom: 2pt; }
  .arvore .no, .ramo { break-inside: avoid; }
  .outros { padding-top: 22pt; }
  .rodape-arvore { padding: 18pt 0 0; }
}

/* ---------- 6. movimento, mapa, brasão em ouro, áudio, impressão ---------- */
/* camada de movimento */
.progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20;
  background: linear-gradient(90deg, var(--ouro), var(--ouro-claro));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
/* entrada em cascata: o índice de cada filho vira o atraso */
.anima [data-cascata] > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: calc(var(--i, 0) * 110ms);
}
.anima [data-cascata].visivel > * { opacity: 1; transform: none; }
/* capa: brasão, nome e as sete estrelas acendem em sequência, uma vez só */
.anima .capa .sobretitulo, .anima .capa .moldura, .anima .capa h1, .anima .capa .lema {
  opacity: 0; transform: translateY(10px);
  animation: surge 1s ease forwards;
}
.anima .capa .moldura { animation-duration: 1.4s; animation-delay: .15s; }
.anima .capa h1 { animation-delay: .9s; }
.anima .capa .lema { animation-delay: 1.35s; }
.anima .capa .estrelas use {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: acende .6s ease forwards;
  animation-delay: calc(1.8s + var(--i) * 160ms);
}
.anima .fecho .estrelas use { opacity: 0; transform-box: fill-box; transform-origin: center; }
.anima .fecho.visivel .estrelas use { animation: acende .6s ease forwards; animation-delay: calc(.5s + var(--i) * 160ms); }
@keyframes surge { to { opacity: 1; transform: none; } }
@keyframes acende { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
/* linha da família: o fio cresce de geração em geração */
.anima .geracao > * { opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; }
.anima .geracao::after { transform: scaleY(0); transform-origin: 50% 0; transition: transform .7s ease .35s; }
.anima .geracao.visivel > * { opacity: 1; transform: none; }
.anima .geracao.visivel::after { transform: none; }
/* luz lenta sobre o azul */
.brasao { position: relative; overflow: clip; }
.brasao::before {
  content: ""; position: absolute; inset: -20% -10%; pointer-events: none;
  background: radial-gradient(closest-side at 30% 30%, rgba(210, 173, 92, .13), transparent 70%),
              radial-gradient(closest-side at 72% 68%, rgba(70, 110, 190, .16), transparent 70%);
  animation: deriva 26s ease-in-out infinite alternate;
}
.brasao > * { position: relative; }
@keyframes deriva { from { transform: translate3d(-4%, -2%, 0); } to { transform: translate3d(5%, 3%, 0); } }
/* resposta ao cursor */
.tres article, .figuras li, .cartao { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
@media (hover: hover) {
  .tres article:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(20, 41, 75, .55); border-color: var(--ouro); }
  .recorte { transition: transform .35s ease; }
  .figuras li:hover .recorte { transform: scale(1.04); }
}
/* brasão por partes: em tela larga o escudo fica fixo e a figura explicada se ilumina */
.foco { position: relative; overflow: hidden; }
.foco .luz { display: none; }
@media (min-width: 960px) {
  .palco {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px); align-items: start;
    width: min(100% - 44px, 1080px); margin: clamp(30px, 5vw, 50px) auto 0;
  }
  .palco .moldura { position: sticky; top: max(24px, calc(50vh - 280px)); width: 100%; margin: 0; }
  .palco .foco .luz {
    display: block; position: absolute; border: 1px solid var(--ouro-claro); border-radius: 3px;
    left: 0; top: 0; width: 100%; height: 100%;
    box-shadow: 0 0 0 2000px rgba(8, 16, 36, 0);
    transition: left .6s ease, top .6s ease, width .6s ease, height .6s ease, box-shadow .6s ease, opacity .4s ease;
    opacity: 0; pointer-events: none;
  }
  .palco.ligado .foco .luz { opacity: 1; box-shadow: 0 0 0 2000px rgba(8, 16, 36, .7); }
  .palco .figuras { display: block; width: auto; margin: 0; padding: 18vh 0 30vh; }
  .palco .figuras li, .palco .figuras li.faixa, .palco .figuras li.solo {
    display: block; width: auto; text-align: left; padding: 22px 0 22px 22px; margin: 0;
    border-left: 2px solid rgba(210, 173, 92, .22);
  }
  .palco .figuras .recorte { display: none; }
  .palco .figuras h3 { font-size: 1.7em; }
  .palco .figuras p { font-size: 1em; }
  .palco.ligado .figuras li { opacity: .38; transition: opacity .5s ease, border-color .5s ease; }
  .palco.ligado .figuras li.ativo { opacity: 1; border-left-color: var(--ouro-claro); }
  .anima .palco [data-cascata] > * { opacity: 1; transform: none; }
  .anima .palco.ligado .figuras li { opacity: .38; }
  .anima .palco.ligado .figuras li.ativo { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .anima [data-cascata] > *, .anima .geracao > *, .anima .capa .sobretitulo, .anima .capa .moldura, .anima .capa h1, .anima .capa .lema,
  .anima .capa .estrelas use, .anima .fecho .estrelas use { opacity: 1; transform: none; transition: none; animation: none; }
  .anima .geracao::after { transform: none; transition: none; }
  .brasao::before { animation: none; }
  .tres article, .figuras li, .cartao, .recorte, .palco .foco .luz { transition: none; }
  .tres article:hover { transform: none; }
}
@media print {
  .progresso, .brasao::before { display: none; }
  .anima [data-cascata] > *, .anima .geracao > *, .anima .capa *, .anima .fecho .estrelas use { opacity: 1 !important; transform: none !important; animation: none !important; }
  .anima .geracao::after { transform: none; }
}


/* ---------- mapa da travessia ---------- */
.mapa { margin: clamp(26px, 4vw, 44px) auto; width: min(100%, 560px); }
.mapa svg { display: block; width: 100%; height: auto; border: 1px solid var(--ouro); outline: 1px solid var(--fio); outline-offset: 5px; background: var(--marfim-claro); }
.mapa .mar { fill: #f7f1e1; }
.mapa .terra path { fill: #e3d6b6; stroke: var(--ouro); stroke-width: 1.2; stroke-linejoin: round; }
.mapa .rotulo-terra text { font-family: var(--titulo); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; fill: rgba(91, 83, 68, .7); text-anchor: middle; }
.mapa .rotulo-terra .oceano { font-family: var(--display); font-style: italic; font-size: 19px; letter-spacing: .04em; text-transform: none; fill: rgba(20, 41, 75, .38); }
.mapa .rota-trilho { fill: none; stroke: rgba(20, 41, 75, .18); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.mapa .rota { fill: none; stroke: var(--rubro); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mapa .porto circle { fill: var(--marinho); stroke: var(--marfim-claro); stroke-width: 2; }
.mapa .porto circle.menor { fill: var(--ouro); stroke-width: 1.5; }
.mapa .porto text { font-family: var(--display); font-weight: 600; font-size: 19px; fill: var(--marinho); paint-order: stroke; stroke: #f7f1e1; stroke-width: 4px; stroke-linejoin: round; }
.mapa .porto text.menor { font-size: 14px; font-weight: 500; font-style: italic; fill: var(--tinta-suave); }
.mapa .navio circle { fill: var(--ouro); stroke: var(--marinho); stroke-width: 2; }
.mapa .navio .halo { fill: rgba(166, 124, 42, .22); stroke: none; }
.mapa .navio { display: none; }
.mapa.vivo .navio { display: block; }
.mapa.vivo .chegada { opacity: .25; transition: opacity .6s ease; }
.mapa.vivo.chegou .chegada { opacity: 1; }
.mapa figcaption { margin-top: 16px; }
@media print { .mapa .navio { display: none !important; } .mapa .rota { stroke-dashoffset: 0 !important; } .mapa .chegada { opacity: 1 !important; } }

/* ---------- brasão em ouro e esmalte ---------- */
.medalha { position: relative; width: min(88vw, 560px); aspect-ratio: 1; margin: 0 auto; touch-action: pan-y; }
.medalha canvas, .foco canvas { display: block; width: 100%; height: 100%; }
.joia-bloco { text-align: center; padding: clamp(40px, 7vw, 90px) 0 0; }
.joia-bloco h3, .joia-cena h3 { color: var(--ouro-claro); }
.joia-bloco h3 { margin: 0 0 6px; }
.joia-bloco p { color: #d9cfb6; font-style: italic; margin: 0 auto clamp(10px, 2vw, 22px); max-width: 26em; }
.joia-faixa { margin-top: clamp(64px, 10vw, 120px); padding: clamp(40px, 7vw, 80px) 0 clamp(48px, 8vw, 96px);
  background: radial-gradient(ellipse at 50% 0%, #1b3562 0%, rgba(27, 53, 98, 0) 62%), var(--marinho-fundo);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.joia-faixa .joia-bloco { padding-top: 0; }
.joia-faixa + .fecho { padding-top: clamp(48px, 8vw, 90px); }
.moldura.com-joia { background: transparent; border-color: transparent; outline-color: transparent; box-shadow: none; padding: 0; }
.moldura.com-joia .foco img { opacity: 0; }
.moldura.com-joia .foco canvas { position: absolute; inset: 0; }
.moldura.com-joia .foco .luz { border-color: transparent; }
@media print { .joia-bloco, .joia-faixa { display: none; } .moldura.com-joia .foco img { opacity: 1; } }

/* versão B no computador: ao fim das explicações, o brasão de ouro toma todo o azul */
.joia-cena { display: none; }
@media (min-width: 960px) {
  .brasao > .joia-bloco { display: none; }
  .palco { position: relative; }
  .palco > .moldura { grid-column: 1; grid-row: 1; }
  .palco > .figuras { grid-column: 2; grid-row: 1; padding-bottom: 105vh; transition: opacity .7s ease; }
  .palco > .moldura { transition: opacity .7s ease; }
  .joia-cena {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    grid-column: 1 / -1; grid-row: 1; align-self: start;
    position: sticky; top: 0; height: 100vh; z-index: 2;
    opacity: 0; pointer-events: none; transition: opacity .9s ease;
  }
  .joia-cena h3 { font-size: 1.7em; }
  .joia-cena p { color: #d9cfb6; font-style: italic; margin: 0 0 6px; }
  .joia-cena .medalha { width: min(86vh, 96%, 860px); }
  .palco.joia .joia-cena { opacity: 1; pointer-events: auto; }
  .palco.joia > .moldura, .palco.joia > .figuras { opacity: 0; pointer-events: none; }
}
@media print { .joia-cena { display: none !important; } }

/* ---------- a história em áudio ---------- */
.ouvir { text-align: center; margin-top: clamp(44px, 7vw, 72px); }
.ouvir .rotulo { margin: 0 0 14px; }
.tocador { display: flex; align-items: center; gap: 18px; max-width: 30em; margin: 0 auto; padding: 14px 22px 12px 14px;
  background: var(--marfim-claro); border: 1px solid var(--ouro); outline: 1px solid var(--fio); outline-offset: 4px; border-radius: 999px; }
.tocar { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--marinho); color: var(--ouro-claro); transition: transform .25s ease, background .25s ease; }
.tocar:hover { background: #1d3a6a; transform: scale(1.04); }
.tocar:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.tocar svg { width: 24px; height: 24px; fill: currentColor; }
.tocar .i-pausa { display: none; }
.tocar[aria-pressed="true"] .i-tocar { display: none; }
.tocar[aria-pressed="true"] .i-pausa { display: inline; }
.trilha { flex: 1; min-width: 0; }
.trilha input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; }
.trilha input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ouro) var(--p, 0%), rgba(166, 124, 42, .25) var(--p, 0%)); }
.trilha input::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(166, 124, 42, .25); }
.trilha input::-moz-range-progress { height: 3px; background: var(--ouro); }
.trilha input::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--ouro); margin-top: -5px; border: 0; }
.trilha input::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--ouro); border: 0; }
.tempo { display: flex; justify-content: space-between; margin: 2px 0 0; font-size: .78em; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
@media print { .ouvir { display: none; } }

/* ---------- entrada suave ---------- */
.anima [data-surge] { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.anima [data-surge].visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anima [data-surge] { opacity: 1; transform: none; transition: none; }
}
@media print {
  body { background: #fff; font-size: 12pt; }
  .capa { min-height: 0; page-break-after: always; }
  .anima [data-surge] { opacity: 1; transform: none; }
  .capitulo, .cartao, .tres article, .figuras li { break-inside: avoid; }
}