/*
 * BIBLIOTECA DA VIDA — CAMADA DE APARÊNCIA
 *
 * Carregada por último, depois de style.css e guia.css. Só ajusta aparência:
 * brilho e batida do centro da roda, cores da roda, hierarquia tipográfica.
 * Nenhuma regra de layout estrutural e nenhuma funcionalidade dependem deste
 * arquivo — removê-lo de index.html devolve o visual anterior.
 *
 * As duas famílias continuam sendo as mesmas ('Vida Serif' = URW Bookman
 * Light, 'Vida Sans' = Nimbus Sans). Ambas têm um peso só, e o site usa
 * font-synthesis:none, então negrito não existe: a hierarquia aqui é feita
 * com tamanho, cor, espaçamento e um contorno mínimo (-webkit-text-stroke),
 * que engrossa a letra sem o negrito falso.
 */

/* ============================================================ centro vivo */

.hub-brilho,
.hub-nucleo {
  pointer-events: none;
  transform-box: view-box;
  transform-origin: 300px 300px;
  will-change: transform, opacity;
}

.hub-brilho {
  opacity: .8;
  animation: batida 4.6s cubic-bezier(.36, .15, .28, 1) infinite;
}

.hub-nucleo {
  opacity: .9;
  animation: batida-nucleo 4.6s cubic-bezier(.36, .15, .28, 1) infinite;
}

/* Sístole, diástole, pausa longa: duas batidas próximas e depois descanso. */
@keyframes batida {
  0%   { transform: scale(1);     opacity: .72; }
  7%   { transform: scale(1.075); opacity: 1;   }
  14%  { transform: scale(1.015); opacity: .80; }
  21%  { transform: scale(1.055); opacity: .94; }
  32%  { transform: scale(1);     opacity: .72; }
  100% { transform: scale(1);     opacity: .72; }
}

@keyframes batida-nucleo {
  0%   { transform: scale(1);     opacity: .85; }
  7%   { transform: scale(1.045); opacity: 1;   }
  14%  { transform: scale(1.01);  opacity: .88; }
  21%  { transform: scale(1.03);  opacity: .97; }
  32%  { transform: scale(1);     opacity: .85; }
  100% { transform: scale(1);     opacity: .85; }
}

/* O botão "Pausar movimento" que já existe também para o coração. */
.motion-paused .hub-brilho,
.motion-paused .hub-nucleo,
.paused .hub-brilho,
.paused .hub-nucleo { animation-play-state: paused; }

/* O centro responde ao toque e ao mouse sem depender só do brilho. */
.wheel-hub { cursor: pointer; }

/* A pergunta no centro da roda.
 * 'Vida Display' e' a TeX Gyre Pagella Italic recortada (assets/fonte-display.css,
 * creditos em licencas-fonte-display.txt).
 * O contorno escuro garante a leitura no pico da batida, quando o centro clareia. */
.wheel-pergunta {
  font-family: 'Vida Display', Georgia, serif;
  font-size: 23px;
  letter-spacing: .35px;
  fill: #e9f6ee;
  /* O contorno e' so' para a leitura sobre o brilho. Fino de proposito: era
   * ele, e nao o peso da fonte, que estava engrossando a letra. */
  paint-order: stroke;
  stroke: #0d211c;
  stroke-width: 2px;
  stroke-opacity: .28;
  stroke-linejoin: round;
  transition: fill .3s ease;
}

/* A opacidade da troca e' controlada quadro a quadro por assets/centro.js, e
 * nao por transicao aqui: e' o que garante que a troca sempre termine visivel,
 * mesmo com varios pedidos seguidos (o mouse varrendo as areas). */

/* Regua invisivel usada para medir o texto na fonte real antes de desenhar. */
.wheel-regua {
  font-family: 'Vida Display', Georgia, serif;
  font-size: 100px;
  visibility: hidden;
  pointer-events: none;
}

.wheel-hub:hover .wheel-pergunta,
.wheel-hub:focus-visible .wheel-pergunta { fill: #ffffff; }

/* O anel do centro: linha fina e continua, so' no hover e no foco.
 * E' um <circle> proprio, irmao do texto e do nucleo, entao aparecer aqui nao
 * mexe na pergunta do centro, na batida do nucleo nem nas pecas da roda. So' a
 * opacidade do traco muda — nada de tamanho, posicao ou layout. */
.wheel-hub .wheel-hub-anel {
  fill: transparent;
  stroke: #9fe6c4;
  stroke-width: 1;
  stroke-opacity: 0;
  transition: stroke-opacity .3s ease;
}

.wheel-hub:hover .wheel-hub-anel,
.wheel-hub:focus-visible .wheel-hub-anel { stroke-opacity: .55; }

/* ============================================================== a roda */

.piece {
  fill-opacity: .74;
  stroke: #cdeede2e;
  stroke-width: 1;
  transition: fill-opacity .35s ease, filter .35s ease, stroke .35s ease;
}

.sector:hover .piece,
.sector:focus .piece {
  fill-opacity: .95;
  filter: brightness(1.16) saturate(1.1) drop-shadow(0 0 12px #bff2d84a);
  stroke: #e4fff1;
  stroke-width: 1.4;
}

/* Ícone de cada peça: mesmo miolo de linha fina para as dez áreas, só a
 * posição muda (calculada em assets/app.js). Fica um degrau mais sutil que o
 * rótulo, pra reforçar sem competir com o texto. */
.piece-icon {
  fill: none;
  stroke: #eafff5;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
  pointer-events: none;
  transition: opacity .35s ease, filter .35s ease;
}

.sector:hover .piece-icon,
.sector:focus .piece-icon {
  opacity: 1;
  filter: brightness(1.12);
}

/* Anéis e marcas finas em volta da roda: ornamento discreto, sem interferir
 * no clique nem no layout — ficam por fora do raio das peças (R = 280). */
.wheel-ring-inner,
.wheel-ring-outer,
.wheel-tick {
  pointer-events: none;
}

.wheel-ring-inner {
  stroke: #bff2d8;
  stroke-opacity: .16;
  stroke-width: 1;
  stroke-dasharray: 1 7;
}

.wheel-ring-outer {
  stroke: #bff2d8;
  stroke-opacity: .07;
  stroke-width: 1;
}

.wheel-tick {
  stroke: #bff2d8;
  stroke-opacity: .28;
  stroke-width: 1;
}

.sector text {
  font-size: 14.5px;
  letter-spacing: .3px;
  fill: #fdfffb;
  stroke: #0e201b6e;
  stroke-width: 1.1px;
  paint-order: stroke;
}

.sector .small {
  font-size: 10px;
  letter-spacing: 1.1px;
  fill: #d8f6e4;
  fill-opacity: .72;
  stroke: none;
}



/* ====================================================== hierarquia do texto
 *
 * O problema anterior era todo mundo na mesma faixa: 15–16px, mesma cor
 * esverdeada, sem peso. Aqui cada papel ganha um degrau próprio de tamanho,
 * de cor e de espaçamento.
 */

body { color: #dde9dd; }

/* Título de página: serifa grande, bem aberta, quase branca. */
.content h1 {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: clamp(36px, 4.4vw, 57px);
  line-height: 1.08;
  letter-spacing: -1.8px;
  color: #f4faf0;
  -webkit-text-stroke: .28px currentColor;
  margin: 0 0 16px;
}

/* Etiqueta acima do título: pequena, maiúscula, muito espaçada, em verde. */
.content .eyebrow,
.guia-indice {
  font-family: 'Vida Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: #86c9a4;
  margin: 0 0 13px;
}

/* Linha de apoio do título: maior que o corpo, mais clara que os cartões. */
.content .intro {
  font-size: 17.5px;
  line-height: 1.62;
  color: #cadfce;
  max-width: 640px;
  margin: 0 0 34px;
}

.section-title {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 29px;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: #eef5e6;
  -webkit-text-stroke: .22px currentColor;
  margin: 46px 0 18px;
}

.crumb {
  font-size: 12px;
  letter-spacing: .7px;
  color: #8ba79a;
  margin-bottom: 26px;
}

.crumb a { color: #a8ccb8; }

/* ---------------------------------------------------------------- cartões */

.card { padding: 24px 26px 26px; }

/* Rótulo do cartão: metadado, não conteúdo. Fica discreto e espaçado. */
.card small {
  display: block;
  font-family: 'Vida Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: #7cb99a;
  margin: 0 0 11px;
}

.card h2 {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: -.3px;
  color: #f1f7ec;
  -webkit-text-stroke: .2px currentColor;
  margin: 0 0 9px;
}

.card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #a5bbab;
  margin: 0;
}

.card:hover h2 { color: #ffffff; }

/* O cartão inteiro já é o link: a linha "Explorar" saiu de assets/app.js. */
.card .action { display: none; }

/* ------------------------------------------------------------- leitura */

.entry-body p,
.entry-section li,
.entry-section p { font-size: 16px; line-height: 1.78; color: #d5e3d6; }

.entry-section h2 {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 24px;
  letter-spacing: -.4px;
  color: #edf4e5;
  margin: 0 0 12px;
}

.entry-section h3 {
  font-family: 'Vida Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8fcfaa;
}

.entry-thought {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 21px;
  line-height: 1.5;
  color: #dcefdd;
}

.tag { font-size: 13px; letter-spacing: .3px; }

.context { font-size: 14.5px; line-height: 1.72; }

/* -------------------------------------------------------------- botões */

.search-form input { font-size: 16px; }
.search-form button,
.guia-botao,
.guia-secundario,
.motion {
  font-family: 'Vida Sans', sans-serif;
  letter-spacing: .3px;
  -webkit-text-stroke: .2px currentColor;
}

/* ------------------------------------------------- perguntas guiadas */

.guia-passo legend h2 {
  letter-spacing: -.6px;
  color: #f4faf0;
  -webkit-text-stroke: .24px currentColor;
}

/* Esta camada e' a ultima a carregar, entao e' aqui que o tamanho das opcoes
 * e' decidido de fato — mexer so' em guia.css nao tem efeito. */
.guia-opcao { font-size: 17px; color: #e2eee2; }
.guia-motivo { font-size: 14.5px; color: #aec5b2; }
.guia-numero { -webkit-text-stroke: .3px currentColor; }

/* ------------------------------------------------------------ rodapé */

.curation-note,
#footer-msg { letter-spacing: .2px; }

/* ------------------------------------------------- movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  .hub-brilho,
  .hub-nucleo { animation: none; opacity: .85; }
  .piece,
  .wheel-hub .wheel-hub-anel { transition: none; }
  /* O esmaecimento continua, mais curto — assets/centro.js encurta sozinho. */
}

/* -------------------------------------------------------------- mobile */

@media (max-width: 760px) {
  .content h1 { font-size: clamp(31px, 8.5vw, 40px); letter-spacing: -1.1px; }
  .content .intro { font-size: 16px; }
  .section-title { font-size: 24px; margin-top: 36px; }
  .card h2 { font-size: 19px; }
  .entry-body p, .entry-section li, .entry-section p { font-size: 15.5px; }
  .guia-opcao { font-size: 16px; }
}

/* =========================================== brilho por cima dos setores
 * A mesma luz do centro, fraca, desenhada depois das peças: é o que faz a
 * claridade parecer sair de dentro da roda em vez de ficar presa no buraco.
 */
.hub-brilho-cima {
  pointer-events: none;
  transform-box: view-box;
  transform-origin: 300px 300px;
  opacity: .32;
  animation: batida 4.6s cubic-bezier(.36, .15, .28, 1) infinite;
}

/* Onda que sai da borda do centro a cada batida: some antes de virar enfeite. */
.hub-pulso {
  pointer-events: none;
  transform-box: view-box;
  transform-origin: 300px 300px;
  opacity: 0;
  animation: onda 4.6s cubic-bezier(.22, .61, .36, 1) infinite;
}

@keyframes onda {
  0%   { transform: scale(1);    opacity: 0;   }
  6%   { transform: scale(1.02); opacity: .42; }
  26%  { transform: scale(1.22); opacity: 0;   }
  100% { transform: scale(1.22); opacity: 0;   }
}

.motion-paused .hub-pulso,
.paused .hub-pulso { animation-play-state: paused; }

.motion-paused .hub-brilho-cima,
.paused .hub-brilho-cima { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hub-brilho-cima { animation: none; opacity: .3; }
  .hub-pulso { animation: none; opacity: 0; }
}

/* ================================================= o foco no título
 * render() move o foco para o h1 a cada navegação, o que é bom para leitor
 * de tela — mas o retângulo de foco aparecia para quem navega com o mouse.
 * Quem usa teclado continua vendo a marcação.
 */
.content h1:focus { outline: none; }
.content h1:focus-visible { outline: 2px solid #c5e8d2; outline-offset: 8px; border-radius: 4px; }

/* ====================================== a cor da área tinge a página
 * --area e --area-luz são definidas por pintarArea() em assets/app.js a cada
 * navegação. Sem elas, tudo cai no verde padrão.
 */
.content .eyebrow { color: var(--area-luz, #86c9a4); }
.card small { color: var(--area-luz, #7cb99a); }
.entry-section h3 { color: var(--area-luz, #8fcfaa); }
.option { border-left-color: var(--area-luz, #6d865f); }
.entry-thought { border-left: 2px solid var(--area-luz, #6d865f); padding-left: 18px; }

/* v0.333 — “Perguntas para explorar” ganha identidade própria: um painel
 * discreto com um ponto de interrogação editorial ao fundo, para que essa
 * seção seja reconhecida de imediato como uma área de reflexão, separada da
 * explicação principal. Reaproveita as cores da área (--area-luz) e a fonte
 * serifada já usadas no resto da leitura — nenhum token novo.
 */
.entry-section-perguntas {
  position: relative;
  margin: 46px 0;
  padding: 30px clamp(22px, 4vw, 38px) 22px;
  border-radius: 30px 30px 30px 8px;
  background: linear-gradient(160deg, #1c3a3199, #16302799);
  border: 1px solid #6f998233;
  overflow: hidden;
}

.entry-section-perguntas::before {
  content: '?';
  position: absolute;
  top: -.32em;
  right: clamp(-14px, 2vw, 14px);
  font-family: 'Vida Serif', Georgia, serif;
  font-size: clamp(150px, 20vw, 230px);
  line-height: 1;
  color: var(--area-luz, #8fcfaa);
  opacity: .08;
  pointer-events: none;
  user-select: none;
}

.entry-section-perguntas h2 { position: relative; }

.perguntas-lista {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pergunta-item {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 15px 2px;
  border-top: 1px solid #6f998226;
}

.pergunta-item:first-child { border-top: none; padding-top: 4px; }

.pergunta-marca {
  flex-shrink: 0;
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 21px;
  line-height: 1.6;
  color: var(--area-luz, #8fcfaa);
  opacity: .6;
}

.pergunta-item p {
  margin: 0;
  font-family: 'Vida Serif', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: #e8f1ea;
}

@media (max-width: 760px) {
  .entry-section-perguntas {
    margin: 36px 0;
    padding: 24px 20px 16px;
    border-radius: 24px 24px 24px 8px;
  }
  .entry-section-perguntas::before { font-size: clamp(110px, 34vw, 160px); }
  .pergunta-item { padding: 13px 0; }
  .pergunta-item p { font-size: 16.5px; }
}

/* v0.334 — "Sobre" passa a viver ao lado do indicador de versão, no
 * cabeçalho, no mesmo estilo de selo (borda sutil, cantos arredondados,
 * mesmo preenchimento e tamanho do `.version`). O `gap` que já existe em
 * `.edition` cuida do espaçamento entre os dois selos, sem regra nova.
 * Ao contrário do indicador de versão, este selo continua visível no
 * celular: é navegação, não metadado — por isso não reaproveita a classe
 * `.version` (que some abaixo de 760px) e ganha sua própria regra mobile.
 */
.sobre-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid #6c9b8b55;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: #b6d5ca;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.sobre-link:hover,
.sobre-link:focus-visible {
  border-color: #9ddfb5;
  color: #eafff5;
  background: #1c3a3155;
}

@media (max-width: 760px) {
  .edition { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .sobre-link { font-size: 10px; padding: 4px 8px; }
}