/* ==========================================================
   BIOMAS · arte interativa
   As cores vêm de dados/<bioma>/bioma.json → "tema" e são
   aplicadas nas variáveis abaixo. Os valores aqui são o padrão.
   ========================================================== */
:root {
  --fundo: #0d1310;
  --superficie: #151e19;
  --superficie2: #1d2a23;
  --texto: #ece6d6;
  --texto-suave: #a7ad9f;
  --destaque: #e8553a;
  --secundaria: #9cc26b;
  --agua: #3b8c84;
  --papel: #f3efe4;
  --tinta: #26221d;
  --linha: color-mix(in srgb, var(--texto) 14%, transparent);
  --vidro: color-mix(in srgb, var(--fundo) 72%, transparent);
  --escala: 1;
  --raio: 18px;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --topo: env(safe-area-inset-top, 0px);
  --base: env(safe-area-inset-bottom, 0px);
  --altura-barra: calc(64px + var(--base));
  color-scheme: dark;
}
body.contraste {
  --fundo: #000; --superficie: #0b0b0b; --superficie2: #1a1a1a;
  --texto: #fff; --texto-suave: #e6e6e6; --destaque: #ffd23f; --secundaria: #7dffb0;
  --linha: #ffffff80; --vidro: #000000e6; --papel: #fff; --tinta: #000;
}

* { box-sizing: border-box; }
html { font-size: calc(100% * var(--escala)); -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo); color: var(--texto);
  font-family: var(--sans); line-height: 1.5;
  overflow: hidden; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
.ico { width: 1.35em; height: 1.35em; flex: none; }
.ico-p { width: 1em; height: 1em; }
:focus-visible { outline: 3px solid var(--secundaria); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pular {
  position: fixed; left: 12px; top: calc(12px + var(--topo)); z-index: 999;
  background: var(--papel); color: var(--tinta); padding: .7rem 1rem; border-radius: 10px;
  transform: translateY(-200%); transition: transform .2s;
}
.pular:focus { transform: none; }

/* ---------- Palco 360 ---------- */
.palco { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; overflow: hidden; }
.palco:active { cursor: grabbing; }
.panorama-canvas { position: absolute; inset: 0; display: block; transition: opacity .45s ease, filter .45s ease; }
.palco.transicao .panorama-canvas { opacity: 0; filter: blur(6px); }
body.abertura-ativa .panorama-canvas { filter: blur(3px) brightness(.55) saturate(.8); }
.veu { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--fundo) 55%, transparent) 100%); }
.teia { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.teia path { fill: none; stroke: var(--secundaria); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .75; animation: fluxo 2.4s linear infinite; }
@keyframes fluxo { to { stroke-dashoffset: -16; } }
.pontos { position: absolute; inset: 0; pointer-events: none; }

/* Ponto de ser vivo */
.ponto {
  --rev: 0;
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  pointer-events: auto; display: grid; place-items: center; border-radius: 50%;
  will-change: transform;
}
.ponto .nucleo { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff7e0; box-shadow: 0 0 12px 4px #fff2c780, 0 0 30px 10px color-mix(in srgb, var(--destaque) 45%, transparent); transition: transform .3s; }
.ponto .onda { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #fff4d6; opacity: 0; animation: onda 2.6s ease-out infinite; }
.ponto .rotulo {
  position: absolute; top: 52px; white-space: nowrap; font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  background: var(--vidro); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: .2rem .6rem; border-radius: 99px; border: 1px solid var(--linha); pointer-events: none;
}
.ponto.oculto { opacity: calc(.12 + var(--rev) * .88); }
.ponto.oculto .nucleo { transform: scale(calc(.55 + var(--rev) * .6)); }
.ponto.oculto .onda { animation-duration: calc(3.4s - var(--rev) * 1.4s); }
.ponto.descoberto .nucleo { width: 14px; height: 14px; background: var(--secundaria); box-shadow: 0 0 0 4px color-mix(in srgb, var(--secundaria) 30%, transparent); }
.ponto.descoberto .onda { display: none; }
.ponto:hover .nucleo, .ponto:focus-visible .nucleo { transform: scale(1.5); }
.ponto.destacado .onda { border-color: var(--destaque); border-width: 3px; animation-duration: 1.1s; }
.ponto.destacado { opacity: 1 !important; }
.ponto.destacado .nucleo { animation: piscaNucleo 1.2s ease-in-out infinite; }
/* botão de ajuda: os pontos clicáveis piscam 1 vez */
.ponto.piscar { animation: piscaPonto 1.2s ease-in-out 1; }
.ponto.piscar .nucleo { animation: piscaNucleo 1.2s ease-in-out 1; }
.portal.piscar .anel { animation: piscaNucleo 1.2s ease-in-out 1; }
@keyframes piscaPonto { 40%, 60% { opacity: 1; } }
@keyframes piscaNucleo { 40%, 60% { transform: scale(2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--destaque) 60%, transparent), 0 0 34px 12px #fff4d6; } }
@keyframes onda { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
body.facilitado .ponto.oculto { opacity: 1; }
body.facilitado .ponto.oculto .nucleo { transform: scale(1.2); }
body.contraste .ponto .nucleo { background: #fff; box-shadow: 0 0 0 4px #000, 0 0 0 7px var(--destaque); }

/* Portal entre cenas */
.portal {
  position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  margin: -34px 0 0 -60px; width: 120px;
}
.portal .anel { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: color-mix(in srgb, var(--agua) 35%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid color-mix(in srgb, var(--texto) 60%, transparent); }
.portal .anel::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--texto) 50%, transparent); animation: gira 14s linear infinite; }
.portal .anel .ico { width: 22px; height: 22px; }
.portal .rotulo { font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.2; background: var(--vidro); padding: .25rem .6rem; border-radius: 99px; border: 1px solid var(--linha); }
.portal:hover .anel, .portal:focus-visible .anel { background: color-mix(in srgb, var(--agua) 70%, transparent); }
@keyframes gira { to { transform: rotate(360deg); } }

/* Seta de pista na borda da tela */
.seta-pista { position: absolute; left: 0; top: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; pointer-events: none; display: grid; place-items: center; }
.seta-pista::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--destaque) 85%, transparent); box-shadow: 0 4px 20px #0008; animation: pulso 1.2s ease-in-out infinite; }
.seta-pista svg { position: relative; width: 26px; height: 26px; color: #fff; }
@keyframes pulso { 50% { transform: scale(1.12); } }

/* Dica inicial */
.dica { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  background: var(--vidro); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--linha);
  padding: 1rem 1.4rem; border-radius: var(--raio); max-width: min(80vw, 320px); transition: opacity .5s; }
.dica p { margin: .5rem 0 0; font-weight: 700; }
.dica-mao { display: block; width: 40px; height: 40px; margin: 0 auto; background: currentColor; animation: arrasta 2s ease-in-out infinite;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13V5.5a1.5 1.5 0 0 1 3 0V11m0-1.5a1.5 1.5 0 0 1 3 0V11m0-.5a1.5 1.5 0 0 1 3 0V15a6 6 0 0 1-6 6h-1a6 6 0 0 1-5-2.7L3.3 15a1.5 1.5 0 0 1 2.4-1.8L8 15.5"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13V5.5a1.5 1.5 0 0 1 3 0V11m0-1.5a1.5 1.5 0 0 1 3 0V11m0-.5a1.5 1.5 0 0 1 3 0V15a6 6 0 0 1-6 6h-1a6 6 0 0 1-5-2.7L3.3 15a1.5 1.5 0 0 1 2.4-1.8L8 15.5"/></svg>') center/contain no-repeat; }
@keyframes arrasta { 0%, 100% { transform: translateX(-22px); } 50% { transform: translateX(22px); } }

/* ---------- HUD ---------- */
.hud-topo { position: fixed; z-index: 20; top: calc(12px + var(--topo)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.hud-topo > * { pointer-events: auto; }
.chip-cena, .progresso, .redondo {
  background: var(--vidro); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--linha); box-shadow: 0 6px 24px #0005;
}
.chip-cena { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .5rem; text-align: left; padding: .55rem .9rem .55rem 1rem; border-radius: 16px; min-height: 48px; max-width: 70vw; }
.chip-bioma { grid-column: 1; font-family: var(--serif); font-style: italic; font-size: .78rem; color: var(--secundaria); line-height: 1.1; }
.chip-nome { grid-column: 1; font-weight: 700; font-size: .95rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-cena .ico-p { grid-column: 2; grid-row: 1 / 3; opacity: .7; }
.chip-conta { display: inline-flex; align-items: center; gap: 3px; margin-left: .5rem; padding: .05rem .45rem; border-radius: 99px; font-size: .74rem; font-weight: 700; background: color-mix(in srgb, var(--texto) 14%, transparent); vertical-align: 1px; }
.chip-conta.completa { background: var(--secundaria); color: var(--fundo); }
.chip-conta .ico { width: 12px; height: 12px; stroke-width: 3; }
.cena-item.completa small { color: var(--secundaria); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.portal.completa .anel { opacity: .75; }
.portal.completa .rotulo::after { content: ' ✓'; color: var(--secundaria); }
.progresso { display: flex; align-items: center; gap: .45rem; padding: .35rem .85rem .35rem .4rem; border-radius: 99px; min-height: 48px; }
.progresso svg { width: 38px; height: 38px; transform: rotate(-90deg); }
.anel-fundo { fill: none; stroke: var(--linha); stroke-width: 3.5; }
.anel { fill: none; stroke: var(--secundaria); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 106.8; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.progresso b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.progresso small { color: var(--texto-suave); font-size: .85rem; }
.progresso.pulou { animation: pulou .7s; }
@keyframes pulou { 30% { transform: scale(1.15); } }

.hud-lateral { position: fixed; z-index: 20; right: 12px; bottom: calc(var(--altura-barra) + 16px); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.redondo { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
.redondo.pequeno { width: 44px; height: 44px; }
.redondo:hover { background: var(--superficie2); }
.redondo[aria-pressed="true"] { background: var(--secundaria); color: var(--fundo); border-color: transparent; }
.zoom { display: flex; flex-direction: column; gap: 6px; }
@media (pointer: coarse) { .zoom { display: none; } }

.barra {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: var(--altura-barra); padding: 6px 10px var(--base);
  display: flex; justify-content: center; gap: 4px;
  background: linear-gradient(to top, var(--fundo) 30%, color-mix(in srgb, var(--fundo) 70%, transparent));
  border-top: 1px solid var(--linha);
}
.aba { position: relative; flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px; font-size: .78rem; font-weight: 700; color: var(--texto-suave); }
.aba .ico { width: 24px; height: 24px; }
.aba.ativa { color: var(--texto); }
.aba.ativa .aba-ico { background: color-mix(in srgb, var(--secundaria) 22%, transparent); color: var(--secundaria); }
.aba-ico { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 99px; transition: background .2s; }
.aba-ponto { position: absolute; top: 6px; left: calc(50% + 14px); width: 9px; height: 9px; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 0 2px var(--fundo); }

/* Avisos (toasts) */
.avisos { position: fixed; z-index: 90; top: calc(72px + var(--topo)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.aviso { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border-radius: 14px; background: var(--superficie2); border: 1px solid var(--linha); box-shadow: 0 10px 30px #0007; animation: entra .4s cubic-bezier(.2,.9,.3,1.2); pointer-events: auto; }
.aviso .ico { color: var(--secundaria); width: 26px; height: 26px; }
.aviso.conquista { background: linear-gradient(120deg, color-mix(in srgb, var(--destaque) 30%, var(--superficie2)), var(--superficie2)); }
.aviso.conquista .ico { color: var(--destaque); }
.aviso b { display: block; }
.aviso small { color: var(--texto-suave); }
.aviso.saindo { opacity: 0; transform: translateY(-8px); transition: .3s; }
@keyframes entra { from { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* ---------- Botões e campos ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: .7rem 1.3rem; border-radius: 14px; font-weight: 700; border: 1px solid var(--linha); background: var(--superficie2); transition: transform .15s, background .2s; }
.botao:active { transform: scale(.98); }
.botao.principal { background: var(--destaque); color: #fff; border-color: transparent; box-shadow: 0 8px 28px color-mix(in srgb, var(--destaque) 40%, transparent); }
.botao.principal:hover { filter: brightness(1.08); }
.botao.pequeno { min-height: 42px; padding: .45rem .9rem; font-size: .9rem; border-radius: 12px; }
.botao.claro { background: transparent; }
.campo { width: 100%; min-height: 52px; padding: .8rem 1rem; border-radius: 14px; border: 1.5px solid var(--linha); background: color-mix(in srgb, var(--fundo) 60%, transparent); font-size: 1.05rem; text-align: center; }
.campo:focus { outline: none; border-color: var(--secundaria); }
.link { display: inline-flex; align-items: center; gap: .4rem; color: var(--texto-suave); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.link:hover { color: var(--texto); }

/* ---------- Abertura ---------- */
.abertura { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: calc(24px + var(--topo)) 20px calc(24px + var(--base)); overflow-y: auto;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--fundo) 85%, transparent) 70%); transition: opacity .7s; }
.abertura.saindo { opacity: 0; pointer-events: none; }
.abertura-conteudo { width: min(100%, 460px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.ab-projeto { margin: 0; text-transform: uppercase; letter-spacing: .32em; font-size: .78rem; color: var(--texto-suave); }
.ab-titulo { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(3.6rem, 18vw, 6.5rem); line-height: .95; margin: .5rem 0 .3rem; letter-spacing: -.02em; font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.ab-subtitulo { margin: 0 0 1.4rem; font-family: var(--serif); font-size: 1.15rem; color: var(--secundaria); }
.ab-descricao { margin: 0 0 1.6rem; color: var(--texto-suave); max-width: 38ch; }
.ab-volta { margin: -.6rem 0 1.4rem; padding: .7rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--secundaria) 15%, transparent); color: var(--texto); }
.ab-rotulo { font-size: .9rem; color: var(--texto-suave); margin-bottom: .45rem; }
.abertura .campo { margin-bottom: 1rem; }
.abertura .botao.principal { width: 100%; font-size: 1.05rem; }
.ab-rodape { margin-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.2rem; }
.idiomas { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: color-mix(in srgb, var(--fundo) 60%, transparent); border: 1px solid var(--linha); }
.idiomas button { min-height: 38px; min-width: 46px; padding: 0 .8rem; border-radius: 99px; font-size: .85rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; }
.idiomas button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }
.ab-biomas { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; width: 100%; margin-bottom: 1.4rem; }
.ab-biomas button { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; border: 2px solid transparent; background: var(--superficie); text-align: left; }
.ab-biomas button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.ab-biomas button span { position: absolute; left: 10px; bottom: 8px; font-family: var(--serif); font-size: 1.2rem; font-style: italic; text-shadow: 0 2px 8px #000; }
.ab-biomas button[aria-pressed="true"] { border-color: var(--secundaria); }

/* ---------- Camadas (ficha, caderno, menu) ---------- */
.camada { position: fixed; inset: 0; z-index: 50; }
.fundo-camada { position: absolute; inset: 0; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: aparece .3s; }
@keyframes aparece { from { opacity: 0; } }
.folha { position: absolute; background: var(--superficie); outline: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.puxador { position: sticky; top: 0; z-index: 3; display: flex; justify-content: center; padding: 10px 0 4px; background: inherit; touch-action: none; }
.puxador::before { content: ''; width: 44px; height: 5px; border-radius: 9px; background: var(--linha); }

/* Painéis laterais / inferiores (menu, cenas) */
.painel .folha { left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: 24px 24px 0 0; padding: 0 20px calc(24px + var(--base)); animation: sobe .38s cubic-bezier(.2,.9,.3,1); }
@keyframes sobe { from { transform: translateY(100%); } }
@media (min-width: 760px) {
  .painel .folha { left: auto; top: 0; width: 420px; max-height: none; border-radius: 24px 0 0 24px; padding-top: 20px; animation-name: lado; }
  .painel .folha .puxador { display: none; }
}
@keyframes lado { from { transform: translateX(100%); } }
.cab-painel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .4rem 0 1rem; }
.cab-painel h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.7rem; }
.secao { padding: 1rem 0; border-top: 1px solid var(--linha); }
.secao h3 { margin: 0 0 .75rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--texto-suave); }
.opcao { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; min-height: 52px; }
.opcao p { margin: 0; }
.opcao small { display: block; color: var(--texto-suave); font-size: .85rem; }
.chave { position: relative; flex: none; width: 54px; height: 32px; border-radius: 99px; background: var(--superficie2); border: 1px solid var(--linha); transition: background .2s; }
.chave::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--texto-suave); transition: transform .2s, background .2s; }
.chave[aria-checked="true"] { background: var(--secundaria); }
.chave[aria-checked="true"]::after { transform: translateX(22px); background: var(--fundo); }
.segmentos { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--fundo); border: 1px solid var(--linha); }
.segmentos button { min-width: 48px; min-height: 40px; border-radius: 10px; font-weight: 700; color: var(--texto-suave); }
.segmentos button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }
.lista-cenas { display: grid; gap: 10px; }
.cena-item { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 16px; border: 1px solid var(--linha); text-align: left; background: var(--fundo); }
.cena-item img { width: 96px; height: 64px; object-fit: cover; border-radius: 10px; }
.cena-item b { display: block; font-size: 1.02rem; }
.cena-item small { color: var(--texto-suave); }
.cena-item[aria-current="true"] { border-color: var(--secundaria); }
.confirmar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5rem; }
.creditos-sobre { color: var(--texto-suave); font-size: .92rem; }

/* ---------- Ficha ---------- */
.ficha .folha {
  left: 0; right: 0; bottom: 0; top: calc(28px + var(--topo)); border-radius: 26px 26px 0 0;
  animation: sobe .45s cubic-bezier(.2,.9,.3,1); padding-bottom: calc(24px + var(--base));
  transition: transform .25s;
}
.ficha-topo { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 8px; background: var(--superficie); }
.ficha-topo .grupo { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--secundaria); font-weight: 700; }
.ficha-topo .navs { display: flex; gap: 6px; }
.ficha-topo .redondo { width: 44px; height: 44px; box-shadow: none; }
.ficha-topo .redondo:disabled { opacity: .3; cursor: default; }
.ficha-corpo { display: grid; gap: 1.4rem; padding: 0 20px; }
.obra { margin: 0; }
.moldura { position: relative; border-radius: 6px; background: var(--papel); padding: 12px; box-shadow: 0 1px 0 #fff3 inset, 0 24px 60px #000a; }
.moldura .janela { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px #0001; cursor: zoom-in; }
.moldura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 1.6s ease, transform 6s ease; }
.moldura .img-foto { object-fit: cover; }
.moldura .img-arte { mix-blend-mode: multiply; opacity: 0; }
.obra[data-modo="arte"] .img-arte { opacity: 1; }
.obra[data-modo="arte"] .img-foto { opacity: 0; }
.moldura .img-foto2 { object-fit: cover; opacity: 0; }
.obra[data-modo="foto2"] .img-foto2 { opacity: 1; }
.obra[data-modo="foto2"] .img-foto { opacity: 0; }
.obra[data-modo="foto"] .img-foto { transform: scale(1.04); }
.moldura .assinatura { position: absolute; left: 50%; bottom: -1px; transform: translate(-50%, 50%); background: var(--tinta); color: var(--papel); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; padding: .2rem .8rem; border-radius: 3px; white-space: nowrap; }
.carregando-img { position: absolute; inset: 0; display: grid; place-items: center; color: #0006; font-size: .85rem; }
.obra-acoes { display: flex; justify-content: space-between; align-items: center; margin-top: 1.1rem; gap: 8px; }
.alternar { display: flex; padding: 4px; border-radius: 99px; background: var(--fundo); border: 1px solid var(--linha); }
.alternar button { min-height: 38px; padding: 0 1rem; border-radius: 99px; font-weight: 700; font-size: .9rem; color: var(--texto-suave); }
.alternar button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }
.ficha-texto { padding-bottom: .5rem; }
.faixa { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 99px; font-size: .8rem; font-weight: 700; margin: 0 .4rem .7rem 0; }
.faixa .ico { width: 1.1em; height: 1.1em; }
.faixa.nova { background: var(--destaque); color: #fff; animation: entra .5s; }
.faixa.expo { background: color-mix(in srgb, var(--agua) 40%, transparent); }
.ficha h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.02; letter-spacing: -.01em; }
.cientifico { margin: .3rem 0 0; font-family: var(--serif); font-style: italic; color: var(--texto-suave); font-size: 1.1rem; }
.haicai { margin: 1.6rem 0 .4rem; padding: 1.1rem 0 0; text-align: center; position: relative; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 5vw, 1.5rem); line-height: 1.45; }
.haicai::before { content: ''; position: absolute; top: 0; left: 50%; width: 48px; height: 2px; margin-left: -24px; background: var(--destaque); border-radius: 2px; }
.haicai span { display: block; transition: opacity .9s ease, transform .9s ease; }
.haicai.revelando span { opacity: 0; transform: translateY(10px); }
.haicai.revelando span.visivel { opacity: 1; transform: none; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.4rem; }
.bloco { margin: 0 0 1.1rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--fundo); border: 1px solid var(--linha); }
.bloco h3 { margin: 0 0 .35rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: var(--secundaria); }
.bloco p { margin: 0; }
.relacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.relacoes li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.relacoes small { color: var(--texto-suave); }
.relacoes button { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; }
.relacoes .bloqueado { color: var(--texto-suave); font-style: italic; display: inline-flex; gap: .35rem; align-items: center; }
.creditos { font-size: .82rem; color: var(--texto-suave); margin-top: 1rem; }
.pular-anim { position: absolute; right: 10px; top: 10px; z-index: 3; background: #000a; color: #fff; font-size: .78rem; font-weight: 700; padding: .35rem .7rem; border-radius: 99px; }

@media (min-width: 900px) {
  .ficha .folha { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(1120px, 94vw); max-height: 90vh; border-radius: 26px; animation: aparece .35s; padding-bottom: 28px; }
  .ficha .puxador { display: none; }
  .ficha-topo { padding: 16px 20px 10px; }
  .ficha-corpo { grid-template-columns: 1.1fr 1fr; gap: 2.4rem; padding: 0 32px; align-items: start; }
  .obra { position: sticky; top: 76px; }
}

/* ---------- Caderno de campo ---------- */
.papel {
  --texto: var(--tinta); --texto-suave: color-mix(in srgb, var(--tinta) 65%, transparent); --linha: color-mix(in srgb, var(--tinta) 16%, transparent);
  color: var(--tinta); color-scheme: light;
  background-color: var(--papel);
  background-image: linear-gradient(color-mix(in srgb, var(--agua) 10%, transparent) 1px, transparent 1px);
  background-size: 100% 32px;
}
#caderno .folha { inset: 0; padding: calc(16px + var(--topo)) 16px calc(var(--altura-barra) + 24px); animation: aparece .3s; }
/* Telas largas: o caderno fica na lateral e o cenário continua à vista; clicar no cenário fecha o caderno */
#caderno .fundo-camada { background: #0003; backdrop-filter: none; -webkit-backdrop-filter: none; cursor: pointer; }
@media (min-width: 760px) { #caderno .folha { right: auto; width: min(680px, 62vw); border-radius: 0 24px 24px 0; } }
.cad-interno { width: min(100%, 1040px); margin: 0 auto; }
.cad-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.cad-cab h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: clamp(2rem, 8vw, 3rem); line-height: 1; }
.cad-cab .redondo { background: #fff8; box-shadow: none; }
.cad-quem { margin: .5rem 0 0; color: var(--texto-suave); }
.barra-prog { margin: 1.2rem 0 .4rem; height: 10px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.barra-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--agua), var(--secundaria)); border-radius: 99px; transition: width .8s; }
.cad-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.filtros { display: flex; gap: 6px; overflow-x: auto; padding: 1rem 0 .6rem; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; }
.filtros button { flex: none; min-height: 40px; padding: 0 1rem; border-radius: 99px; border: 1px solid var(--linha); font-weight: 700; font-size: .88rem; background: #fff6; }
.filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; list-style: none; margin: .4rem 0 2rem; padding: 0; }
@media (min-width: 700px) { .grade { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; } }
.carta { position: relative; width: 100%; text-align: left; background: #fffdf7; border-radius: 6px; padding: 8px 8px 12px; box-shadow: 0 1px 2px #0002, 0 8px 22px -10px #0004; transition: transform .2s; }
.carta:hover { transform: translateY(-3px) rotate(-.4deg); }
.carta .img { aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.carta img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.carta b { display: block; margin-top: .5rem; font-family: var(--serif); font-weight: 500; font-size: 1.05rem; line-height: 1.15; }
.carta small { color: var(--texto-suave); font-size: .78rem; }
.carta .selo-expo { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--agua); color: #fff; display: grid; place-items: center; transform: rotate(-12deg); box-shadow: 0 2px 6px #0004; }
.carta .selo-expo .ico { width: 20px; height: 20px; }
.carta.oculta { background: transparent; box-shadow: none; border: 1.5px dashed var(--linha); }
.carta.oculta .img { background: transparent; font-family: var(--serif); font-size: 3rem; color: var(--linha); }
.carta.oculta b { color: var(--texto-suave); font-style: italic; font-size: .95rem; }
.carta-pista { grid-column: 1 / -1; background: #fffdf7; border-radius: 10px; padding: 1rem; border-left: 4px solid var(--destaque); box-shadow: 0 8px 22px -12px #0005; }
.carta-pista p { margin: 0 0 .8rem; font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.papel .botao { background: #fff; }
.papel .botao.principal { background: var(--tinta); color: var(--papel); box-shadow: none; }
.conquistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; list-style: none; padding: 0; margin: .4rem 0 2rem; }
.conquista { display: flex; gap: .8rem; align-items: center; padding: .8rem; border-radius: 12px; background: #fff8; border: 1px solid var(--linha); }
.conquista .med { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--linha); color: var(--texto-suave); }
.conquista.feita .med { background: var(--destaque); color: #fff; }
.conquista b { display: block; font-size: .95rem; line-height: 1.2; }
.conquista small { color: var(--texto-suave); font-size: .8rem; line-height: 1.25; display: block; }
.conquista:not(.feita) { opacity: .7; }
.cad-titulo2 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin: 1.2rem 0 .4rem; }
.cartao-area { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 2rem; }
.cartao-preview { width: 100%; max-width: 360px; border-radius: 12px; box-shadow: 0 10px 30px #0004; }
#caderno ~ .barra, body.caderno-aberto .barra { background: var(--fundo); }

/* ---------- Visor em tela cheia ---------- */
.visor { background: #000; z-index: 80; }
.visor-conteudo { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; touch-action: pinch-zoom pan-x pan-y; }
.visor-conteudo img { max-width: none; width: 100%; height: auto; max-height: none; }
.visor-conteudo img.papel-claro { background: var(--papel); }
.visor-conteudo video { width: 100%; max-height: 100%; }
.visor-fechar { position: absolute; top: calc(12px + var(--topo)); right: 12px; z-index: 2; }
@media (min-width: 760px) { .visor-conteudo img { width: auto; max-width: 96vw; max-height: 94vh; } }

/* ---------- Carregando ---------- */
.carregando { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 1.2rem; background: var(--fundo); transition: opacity .6s; text-align: center; padding: 20px; }
.carregando.fora { opacity: 0; pointer-events: none; }
.carregando p { color: var(--texto-suave); font-family: var(--serif); font-style: italic; font-size: 1.1rem; margin: 0; }
.raizes-anim { display: flex; align-items: flex-end; gap: 7px; height: 48px; }
.raizes-anim i { width: 4px; height: 100%; border-radius: 4px; background: var(--secundaria); transform-origin: top; animation: raiz 1.4s ease-in-out infinite; }
.raizes-anim i:nth-child(2) { animation-delay: .12s; } .raizes-anim i:nth-child(3) { animation-delay: .24s; }
.raizes-anim i:nth-child(4) { animation-delay: .36s; } .raizes-anim i:nth-child(5) { animation-delay: .48s; }
@keyframes raiz { 0%, 100% { transform: scaleY(.25); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
.erro-carregar { max-width: 34ch; }

/* ---------- Movimento reduzido ---------- */
body.sem-movimento *, body.sem-movimento *::before, body.sem-movimento *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
body.sem-movimento .ponto .onda { display: none; }

/* Ordem das camadas */
#caderno { z-index: 50; }
#ficha { z-index: 52; }
#menu, #cenas { z-index: 64; }
body.caderno-aberto:not(.ficha-aberto):not(.menu-aberto):not(.cenas-aberto) .barra { z-index: 51; }
body.abertura-ativa .pontos, body.abertura-ativa .teia { display: none; }
.dica { top: auto; bottom: calc(var(--altura-barra) + 90px); transform: translateX(-50%); }
.segmentos { flex-wrap: wrap; }
.segmentos button { padding: 0 .8rem; flex: 1; }

a.botao { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* Voltar à página inicial */
.hud-topo .btn-inicio { flex: none; color: var(--texto); text-decoration: none; }
.hud-topo .chip-cena { margin-right: auto; }
.ab-inicio { position: absolute; top: calc(16px + var(--topo)); left: 16px; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem .45rem .7rem;
  border-radius: 99px; border: 1px solid var(--linha); background: color-mix(in srgb, var(--superficie) 70%, transparent); color: var(--texto); text-decoration: none; font-weight: 700; font-size: .9rem; backdrop-filter: blur(6px); }
.ab-inicio:hover { background: var(--superficie2); }
.ico-inicio, .ico-inicio svg { display: inline-grid; width: 20px; height: 20px; }

/* ---------- Ficha técnica, selos, teia e balão (nov/2026) ---------- */
.ficha-topo .contador { font-size: .8rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; padding: 0 .3rem; white-space: nowrap; align-self: center; }
.cientifico small { display: block; font-family: var(--sans); font-style: normal; font-size: .85rem; margin-top: .1rem; }
.selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 1rem 0 1.2rem; }
.selo { font-size: .82rem; padding: .28rem .7rem; border-radius: 12px; line-height: 1.35; border: 1px solid var(--linha); background: var(--fundo); }
.selo b { color: var(--texto-suave); font-weight: 400; margin-right: .35rem; }
.selo.eco { font-weight: 700; background: color-mix(in srgb, var(--secundaria) 16%, transparent); border-color: color-mix(in srgb, var(--secundaria) 45%, transparent); }
.ficha-tec { margin: .3rem 0 0; display: grid; gap: .7rem; }
.ficha-tec div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem; padding-top: .7rem; border-top: 1px solid var(--linha); }
.ficha-tec div:first-child { border-top: 0; padding-top: 0; }
.ficha-tec dt { font-weight: 700; font-size: .88rem; color: var(--texto-suave); }
.ficha-tec dd { margin: 0; }
@media (max-width: 520px) { .ficha-tec div { grid-template-columns: 1fr; gap: .1rem; } }
.relacoes .rel-link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; }
.relacoes .rel-oculto { text-decoration: none; font-weight: 400; font-style: italic; color: var(--texto-suave); display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .75rem; border-radius: 99px; border: 1px dashed var(--linha); }
.relacoes .rel-oculto:hover, .relacoes .rel-oculto[aria-expanded="true"] { color: var(--texto); border-color: var(--secundaria); }
.rel-pista { flex-basis: 100%; display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: 12px; background: var(--superficie2); font-size: .93rem; }
.rel-pista .ico { width: 18px; height: 18px; color: var(--secundaria); margin-top: .15rem; }
.rel-pista em { display: block; font-style: normal; font-size: .82rem; color: var(--texto-suave); margin-top: .25rem; }
/* balão: aparece ao passar o mouse, com foco do teclado ou com a classe .forcar (toque) */
.balao { position: relative; }
.balao::after { content: attr(data-balao); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); width: max-content; max-width: 220px; white-space: normal; text-align: center; background: var(--papel); color: var(--tinta); font: 700 .8rem/1.25 var(--sans); font-style: normal; padding: .45rem .7rem; border-radius: 10px; box-shadow: 0 8px 24px #0007; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 5; }
.balao::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--papel); border-bottom: 0; opacity: 0; transition: opacity .2s; z-index: 5; }
.balao:hover::after, .balao:focus-visible::after, .balao.forcar::after { opacity: 1; transform: translate(-50%, 0); }
.balao:hover::before, .balao:focus-visible::before, .balao.forcar::before { opacity: 1; }
@media (hover: none) { .balao:hover::after, .balao:hover::before { opacity: 0; } .balao.forcar::after, .balao.forcar::before { opacity: 1; } }
.outros-nomes { margin: .35rem 0 0; font-size: .9rem; color: var(--texto-suave); }
.cientifico span i, .cientifico small i { font-style: italic; }
.cientifico span { font-style: normal; }