/* DUARCH v3 — "O Breu e a Linha".
   A página é a escuridão (o Breu). Tudo o que aparece é desenhado pela Linha branca que o contém.
   Layout: abertura em tela cheia, cenas que prendem no scroll (pacto, mil anos), portas tipográficas no fim. */
:root {
  --breu: #050506;        /* a escuridão: fundo */
  --breu-2: #0c0c0f;      /* superfícies */
  --breu-3: #15161b;      /* superfícies elevadas */
  --aco: #262931;         /* bordas finas, metal da armadura */
  --aco-2: #474c58;       /* bordas fortes */
  --nevoa: #8e939f;       /* texto secundário */
  --linha: #f4f4f6;       /* a Linha: texto e traço */
  --brilho: rgba(244, 244, 246, .5);
  --f-rei: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --f-voz: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-breu: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --topo: 72px;
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gut-d: max(20px, env(safe-area-inset-right, 0px));
  --corte: 12px;
  /* nomes antigos usados pelos componentes que vieram da v2 (o Breu 3D e os jogos) */
  --tinta: var(--linha); --contra: var(--breu); --suave: var(--nevoa); --fundo: var(--breu); --fundo-2: var(--breu-2); --linha-forte: var(--aco-2);
  color-scheme: dark;
}
/* forma invertida: quando o DUARCH libera tudo, o Breu fica branco e a Linha fica preta */
:root[data-tema="claro"] { --breu: #f2f1ec; --breu-2: #e9e7e0; --breu-3: #dedbd2; --aco: #cfccc2; --aco-2: #9c988c; --nevoa: #5d5b55; --linha: #0b0b0c; --brilho: rgba(11, 11, 12, .28); color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo) + 16px); }
body { margin: 0; background: var(--breu); color: var(--linha); font: 400 17px/1.65 var(--f-voz); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, canvas, svg, video { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--linha); color: var(--breu); }
:focus-visible { outline: 2px solid var(--linha); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-d); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.suave { color: var(--nevoa); }
.pular { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--linha); color: var(--breu); padding: 10px 14px; font-weight: 700; text-decoration: none; }
.pular:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }

/* ---------- tipografia ---------- */
h1, h2, h3 { font-family: var(--f-rei); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .9; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(64px, 11vw, 168px); }
h2 { font-size: clamp(46px, 7vw, 104px); }
h3 { font-size: clamp(28px, 3vw, 40px); line-height: .95; }
p { margin: 0; }
.rotulo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--nevoa); }
.rotulo::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.vazado { color: transparent; -webkit-text-stroke: 1.5px var(--linha); }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--nevoa); max-width: 58ch; }
.lead b { color: var(--linha); font-weight: 600; }
/* a voz do Breu: ele narra em itálico antigo */
.voz { font-family: var(--f-breu); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: .005em; color: var(--linha); text-wrap: pretty; }
.voz.pequena { font-size: clamp(20px, 1.8vw, 24px); }
.assina { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--nevoa); }
.assina svg { width: 22px; height: 26px; }

/* ---------- botões com cantos cortados, como as placas da armadura ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { --c: var(--corte); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; background: none; color: var(--linha); font: 700 14px/1 var(--f-voz); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color .2s;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.btn::before, .btn::after { content: ""; position: absolute; z-index: -1; clip-path: inherit; transition: background .2s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.btn::before { inset: 0; background: var(--linha); }
.btn::after { inset: 1.5px; background: var(--breu); clip-path: polygon(calc(var(--c) - 1px) 0, 100% 0, 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, 0 100%, 0 calc(var(--c) - 1px)); }
.btn:hover::after, .btn:focus-visible::after { background: var(--breu-3); }
.btn.cheio { color: var(--breu); }
.btn.cheio::after { background: var(--linha); }
.btn.cheio:hover::after, .btn.cheio:focus-visible::after { background: transparent; }
.btn.cheio:hover, .btn.cheio:focus-visible { color: var(--breu); }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn svg.traco { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:focus-visible { outline: none; } .btn:focus-visible::before { background: var(--linha); box-shadow: 0 0 0 3px var(--linha); }
.btn.pequeno { min-height: 42px; padding: 0 18px; font-size: 12px; --c: 9px; }
.icone { width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid var(--aco-2); background: transparent; color: var(--linha); cursor: pointer; transition: border-color .2s, background .2s; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); padding: 0; }
.icone:hover { border-color: var(--linha); background: var(--breu-3); }
.icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- topo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; height: calc(var(--topo) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); transition: background .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; }
.topo.solido { background: color-mix(in srgb, var(--breu) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--aco); }
.topo .wrap { height: var(--topo); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 800 24px/1 var(--f-rei); letter-spacing: .22em; text-transform: uppercase; }
.logo svg { width: 30px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: transform .7s cubic-bezier(.2, 1.4, .4, 1); }
.logo.gira svg { transform: rotate(360deg) scale(1.2); }
.nav-topo { display: flex; gap: 28px; }
.nav-topo a { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--nevoa); position: relative; padding: 6px 0; transition: color .2s; }
.nav-topo a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linha); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.nav-topo a:hover, .nav-topo a[aria-current="page"] { color: var(--linha); }
.nav-topo a:hover::after, .nav-topo a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.acoes-topo { display: flex; gap: 10px; align-items: center; }
.tema-btn .sol { display: none; } :root[data-tema="claro"] .tema-btn .sol { display: block; } :root[data-tema="claro"] .tema-btn .lua { display: none; }
@media (max-width: 1020px) { .nav-topo { display: none; } }
/* sobre a abertura (sempre escura), o topo fica claro mesmo na forma invertida */
body.com-abertura .topo:not(.solido) { color: #f4f4f6; }
body.com-abertura .topo:not(.solido) .nav-topo a { color: rgba(244, 244, 246, .7); } body.com-abertura .topo:not(.solido) .nav-topo a:hover { color: #fff; }
body.com-abertura .topo:not(.solido) .nav-topo a::after { background: #fff; }
body.com-abertura .topo:not(.solido) .icone { border-color: rgba(244, 244, 246, .4); color: #f4f4f6; } body.com-abertura .topo:not(.solido) .icone:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

/* ---------- menu ---------- */
.menu { position: fixed; inset: 0; z-index: 70; background: var(--breu); display: grid; grid-template-rows: auto 1fr auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; overflow: auto; }
.menu::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 60%, color-mix(in srgb, var(--linha) 7%, transparent), transparent 60%); pointer-events: none; }
.menu.aberto { opacity: 1; visibility: visible; transition: opacity .3s; }
.menu .menu-topo { display: flex; justify-content: space-between; align-items: center; height: var(--topo); }
.menu nav { align-self: center; position: relative; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu li a { display: flex; align-items: baseline; gap: 22px; text-decoration: none; font: 800 clamp(48px, 9vw, 110px)/1 var(--f-rei); text-transform: uppercase; letter-spacing: .01em; padding: 4px 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), color .2s; color: var(--linha); }
.menu li a small { font: 500 12px/1 var(--mono); letter-spacing: .16em; color: var(--nevoa); min-width: 9ch; }
.menu li a:hover, .menu li a:focus-visible { transform: translateX(14px); outline: none; }
.menu li a:hover span, .menu li a[aria-current="page"] span { color: transparent; -webkit-text-stroke: 1.5px var(--linha); }
.menu .menu-breu { position: absolute; right: 4%; bottom: -10px; width: clamp(120px, 16vw, 210px); opacity: .9; }
.menu .rodape-menu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px; border-top: 1px solid var(--aco); color: var(--nevoa); font-size: 14px; position: relative; }
.menu .rodape-menu a { color: var(--linha); }
@media (max-width: 700px) { .menu li a small { display: none; } .menu .menu-breu { display: none; } }

/* ---------- progresso: a Linha desce com você ---------- */
.linha-progresso { position: fixed; left: 0; top: 0; bottom: 0; width: 2px; z-index: 45; pointer-events: none; }
.linha-progresso i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--linha); transform-origin: top; transform: scaleY(var(--p, 0)); box-shadow: 0 0 12px var(--brilho); }

/* ---------- chegada das páginas internas ---------- */
main { display: block; }
.chegada { padding-top: calc(var(--topo) + env(safe-area-inset-top, 0px) + clamp(40px, 8vw, 110px)); padding-bottom: clamp(48px, 7vw, 96px); position: relative; }
.chegada .rotulo { margin-bottom: 22px; }
.chegada h1 { margin-bottom: 26px; }
.secao { padding-block: clamp(70px, 10vw, 150px); position: relative; }
.secao + .secao { padding-top: 0; }
.cabeca { display: grid; gap: 18px; margin-bottom: clamp(34px, 5vw, 64px); max-width: 900px; }
.grade-fundo { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--aco) 1px, transparent 1px), linear-gradient(90deg, var(--aco) 1px, transparent 1px); background-size: 96px 96px; opacity: .35; mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 70%); }

/* aparece ao rolar (só quando o JS está ativo; sem JS tudo fica visível) */
html.anima .surge { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
html.anima .surge.visto { opacity: 1; transform: none; }

/* =========================================================== INÍCIO */
.abertura { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: #050506; color: #f4f4f6; isolation: isolate; }
.abertura canvas.nevoa { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
.abertura .estatico { position: absolute; inset: 0; z-index: -2; background: #050506 url(../img/v3-retrato.webp) 72% 40% / auto 108% no-repeat; opacity: .5; filter: brightness(.55); }
.abertura .conteudo { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: max(44px, calc(env(safe-area-inset-bottom, 0px) + 28px)); display: grid; gap: 22px; }
.abertura .marca { width: min(620px, 86vw); height: auto; display: block; filter: drop-shadow(0 0 30px rgba(255, 255, 255, .18)); }
.abertura .frase { font-family: var(--f-breu); font-style: italic; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; max-width: 22ch; color: #f4f4f6; }
.abertura .frase span { color: rgba(244, 244, 246, .55); }
.abertura .btn { --linha: #f4f4f6; --breu: #050506; --breu-3: #15161b; }
.abertura .rodape-abertura { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.abertura .dica-luz { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 244, 246, .5); display: flex; gap: 10px; align-items: center; }
.abertura .dica-luz i { width: 9px; height: 9px; border-radius: 50%; background: #f4f4f6; box-shadow: 0 0 14px #fff; animation: respira 2.4s ease-in-out infinite; }
.abertura .rolar { position: absolute; right: var(--gut-d); top: 50%; writing-mode: vertical-rl; font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 244, 246, .5); display: flex; align-items: center; gap: 14px; }
.abertura .rolar::after { content: ""; width: 1px; height: 70px; background: linear-gradient(#f4f4f6, transparent); animation: desce 2.2s ease-in-out infinite; }
.sussurro { position: absolute; z-index: 2; font-family: var(--f-breu); font-style: italic; font-size: clamp(18px, 1.5vw, 22px); color: rgba(244, 244, 246, .85); pointer-events: none; opacity: 0; transition: opacity 1.2s; white-space: nowrap; text-shadow: 0 0 18px rgba(255, 255, 255, .35); }
.sussurro.on { opacity: 1; }
@keyframes respira { 50% { opacity: .35; transform: scale(.7); } }
@keyframes desce { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 760px) { .abertura .rolar { display: none; } .abertura .estatico { background-position: 62% 30%; background-size: auto 92%; } }

/* faixa de marquise: a Linha corre */
.faixa-linha { border-block: 1px solid var(--aco); overflow: hidden; padding-block: 18px; background: var(--breu); }
.faixa-linha .trilho { display: flex; width: max-content; gap: 48px; animation: corre 38s linear infinite; }
.faixa-linha span { font: 800 clamp(28px, 3.4vw, 48px)/1 var(--f-rei); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }
.faixa-linha span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.2px var(--linha); }
.faixa-linha svg { width: 30px; height: 24px; fill: var(--linha); }
@keyframes corre { to { transform: translateX(-50%); } }

/* cena do pacto: o DUARCH, o Breu e a Linha que liga os dois */
.pacto-cena { position: relative; height: 330vh; }
.pacto-palco { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; overflow: hidden; }
.pacto-palco .lado-duarch { position: relative; height: 100%; display: grid; place-items: end center; }
.pacto-palco .lado-duarch img { width: min(100%, 92svh); height: auto; max-height: 92svh; object-fit: contain; object-position: bottom; filter: grayscale(.15) contrast(1.05); -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); transform: translateY(calc(var(--p, 0) * -30px)); }
.pacto-palco .lado-breu { position: relative; height: 100%; display: grid; align-content: center; gap: 28px; padding-right: var(--gut-d); }
.pacto-palco .breu-3d { position: relative; width: min(300px, 70%); aspect-ratio: 1 / 1.05; margin-left: 8%; }
.pacto-passos { position: relative; min-height: 300px; }
.pacto-passo { position: absolute; inset: 0 auto auto 0; display: grid; gap: 14px; max-width: 520px; opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s; }
.pacto-passo.on { opacity: 1; transform: none; }
.pacto-passo h3 { font-size: clamp(40px, 4.4vw, 68px); }
.pacto-passo .num { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--nevoa); }
svg.fio { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
svg.fio path { fill: none; stroke: var(--linha); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--brilho)); }
svg.fio circle { fill: var(--linha); filter: drop-shadow(0 0 8px var(--brilho)); }
.pacto-pontos { display: flex; gap: 10px; }
.pacto-pontos i { width: 34px; height: 2px; background: var(--aco-2); transition: background .3s; }
.pacto-pontos i.on { background: var(--linha); }
@media (max-width: 860px) {
  .pacto-cena { height: auto; }
  .pacto-palco { position: relative; height: auto; grid-template-columns: 1fr; padding-block: 60px 40px; }
  .pacto-palco .lado-duarch { height: auto; order: 2; }
  .pacto-palco .lado-duarch img { height: auto; width: 100%; max-height: 70svh; }
  .pacto-palco .lado-breu { padding-inline: var(--gut) var(--gut-d); }
  .pacto-passos { min-height: 0; display: grid; gap: 34px; }
  .pacto-passo { position: static; opacity: 1; transform: none; }
  .pacto-palco .breu-3d { width: 200px; margin: 0; }
  .pacto-pontos, svg.fio { display: none; }
}

/* mil anos: capítulos que andam para o lado */
.anos-cena { position: relative; height: 420vh; }
.anos-palco { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); padding-top: calc(var(--topo) + 22px); }
.anos-topo { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-bottom: 26px; }
.anos-topo h2 { font-size: clamp(40px, 5.2vw, 84px); }
.anos-topo .contador { font: 800 clamp(64px, 8vw, 120px)/.8 var(--f-rei); color: transparent; -webkit-text-stroke: 1.2px var(--linha); font-variant-numeric: tabular-nums; }
.anos-trilho { min-height: 0; height: 100%; align-items: center; display: flex; gap: clamp(18px, 2vw, 30px); padding-left: var(--gut); padding-bottom: 34px; will-change: transform; transform: translateX(var(--x, 0)); }
.capitulo { flex: none; width: min(74vw, 940px); height: min(100%, 600px); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); border: 1px solid var(--aco); background: var(--breu-2); position: relative; overflow: hidden; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.capitulo figure { margin: 0; position: relative; overflow: hidden; background: #050506; }
.capitulo figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.2) brightness(.85); transform: scale(1.06); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.capitulo:hover figure img { transform: scale(1); }
.capitulo .texto { padding: clamp(22px, 3vw, 44px); display: grid; align-content: space-between; gap: 18px; min-height: 0; overflow: hidden; }
.capitulo .romano { font: 800 clamp(70px, 8vw, 130px)/.8 var(--f-rei); color: transparent; -webkit-text-stroke: 1.2px var(--aco-2); }
.capitulo h3 { margin-bottom: 14px; }
.capitulo .voz { font-size: clamp(20px, 1.9vw, 27px); }
@media (max-width: 860px) {
  .anos-cena { height: auto; }
  .anos-palco { position: relative; height: auto; padding-top: 70px; overflow: visible; }
  .anos-trilho { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; padding-right: var(--gut-d); scrollbar-width: none; }
  .anos-trilho::-webkit-scrollbar { display: none; }
  .anos-trilho { height: auto; align-items: stretch; }
  .capitulo { width: 86vw; height: auto; grid-template-columns: 1fr; grid-template-rows: 52vw auto; scroll-snap-align: start; }
  .capitulo .texto { align-content: start; } .capitulo .romano { font-size: 56px; }
  .anos-topo h2 { font-size: clamp(40px, 5.2vw, 84px); }
.anos-topo .contador { display: none; }
}

/* mundos: os jogos e o canal */
.mundos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.mundo { --rx: 0deg; --ry: 0deg; position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 460px; text-decoration: none; color: #f4f4f6; background: #050506; overflow: hidden; border: 1px solid var(--aco); transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.mundo:hover, .mundo:focus-visible { border-color: var(--linha); outline: none; }
.mundo.grande { grid-column: span 7; } .mundo.medio { grid-column: span 5; } .mundo.cheio { grid-column: span 12; min-height: 380px; }
.mundo img.fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1), filter .5s; filter: brightness(.6); }
.mundo:hover img.fundo { transform: scale(1.05); filter: brightness(.8); }
.mundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(5, 5, 6, .92)); pointer-events: none; }
.mundo .info { position: relative; z-index: 1; padding: clamp(20px, 2.6vw, 34px); display: grid; gap: 10px; grid-row: 2; }
.mundo .info h3 { font-size: clamp(40px, 4.4vw, 68px); }
.mundo .info p { color: rgba(244, 244, 246, .72); max-width: 46ch; }
.mundo .selo { position: absolute; top: 18px; left: 22px; z-index: 1; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #f4f4f6; border: 1px solid rgba(244, 244, 246, .45); padding: 6px 10px; background: rgba(5, 5, 6, .5); backdrop-filter: blur(6px); }
.mundo .ir { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
.mundo .ir svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s; }
.mundo:hover .ir svg { transform: translateX(6px); }
.mundo.yt .info { max-width: 720px; }
@media (max-width: 900px) { .mundo.grande, .mundo.medio, .mundo.cheio { grid-column: span 12; } .mundo { min-height: 380px; } }

/* portas: links tipográficos enormes */
.portas { border-top: 1px solid var(--aco); }
.porta { display: grid; grid-template-columns: minmax(130px, .3fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; padding-block: clamp(18px, 2.4vw, 30px); border-bottom: 1px solid var(--aco); text-decoration: none; position: relative; overflow: hidden; }
.porta::before { content: ""; position: absolute; inset: 0; background: var(--linha); transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.7, 0, .2, 1); z-index: -1; }
.porta { isolation: isolate; }
.porta small { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--nevoa); transition: color .3s; }
.porta b { font: 800 clamp(48px, 8vw, 120px)/.9 var(--f-rei); text-transform: uppercase; transition: color .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.porta svg { width: clamp(30px, 4vw, 56px); height: clamp(30px, 4vw, 56px); fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .5s cubic-bezier(.2, .8, .2, 1), color .3s; }
.porta:hover::before, .porta:focus-visible::before { transform: scaleY(1); transform-origin: top; }
.porta:hover, .porta:focus-visible { color: var(--breu); outline: none; }
.porta:hover small, .porta:focus-visible small { color: var(--breu); }
.porta:hover b { transform: translateX(16px); }
.porta:hover svg { transform: rotate(-45deg); }
@media (max-width: 640px) { .porta { grid-template-columns: minmax(0, 1fr) auto; } .porta small { grid-column: 1 / -1; order: -1; } }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--aco); padding-block: 56px calc(30px + env(safe-area-inset-bottom, 0px)); position: relative; overflow: hidden; }
.rodape .gigante { font: 800 clamp(90px, 21vw, 330px)/.78 var(--f-rei); text-transform: uppercase; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px var(--aco-2); margin: 0 0 30px; user-select: none; white-space: nowrap; }
.rodape-grade { display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; align-items: center; }
.redes-mini { display: flex; gap: 22px; flex-wrap: wrap; }
.redes-mini a { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--nevoa); transition: color .2s; }
.redes-mini a:hover { color: var(--linha); }
.rodape small { color: var(--nevoa); font-size: 13px; }
.rodape small a { color: var(--linha); }
.segredos { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 0; cursor: help; color: var(--nevoa); }
.segredos svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.segredos svg.on { fill: var(--linha); stroke: var(--linha); }
.segredos span { font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.link-instalar { background: none; border: 0; color: var(--linha); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font: inherit; font-size: 13px; padding: 0; }

/* ---------- o Breu que te acompanha (telepatia) ---------- */
.companheiro { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.companheiro .comp-breu { pointer-events: auto; position: relative; width: 124px; height: 140px; transition: opacity .45s, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.companheiro.vazio .comp-breu { opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; }
.companheiro.vazio .bolha { opacity: 0 !important; pointer-events: none; }
.companheiro .comp-breu .balao-3d { display: none; }
.companheiro .guiar { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: none; border: 0; padding: 0; color: var(--linha); font: 700 11px/1 var(--f-voz); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.companheiro .guiar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.companheiro .guiar:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .companheiro .comp-breu { width: 80px; height: 92px; } }
.companheiro .bolha { pointer-events: auto; max-width: min(290px, calc(100vw - 110px)); background: var(--breu-2); border: 1px solid var(--linha); color: var(--linha); padding: 11px 15px 12px; font-family: var(--f-breu); font-style: italic; font-size: 19px; line-height: 1.25; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; margin-bottom: 26px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.companheiro .bolha small { display: block; font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--nevoa); margin-bottom: 6px; }
.companheiro.fala .bolha { opacity: 1; transform: none; }
@keyframes flutua { 50% { translate: 0 -7px; } }
/* o Breu em SVG: corpo de Breu, Linha de Linha */
.breu-svg .corpo { fill: var(--breu); stroke: var(--linha); stroke-width: 4.5; stroke-linejoin: round; }
.breu-svg .olho { fill: var(--linha); transform-box: fill-box; transform-origin: center; animation: pisca 5.5s infinite; }
@keyframes pisca { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.breu-svg.claro .corpo { fill: #050506; stroke: #f4f4f6; } .breu-svg.claro .olho { fill: #f4f4f6; }

/* ---------- o Breu que voa entre os pousos (pacto, ficha) e o canto da tela ---------- */
.breu-voo { position: fixed; left: 0; top: 0; width: 124px; height: 140px; z-index: 54; opacity: 0; pointer-events: none; transition: opacity .7s ease; will-change: left, top, width, height; }
.breu-voo.on { opacity: 1; pointer-events: auto; }
.breu-voo .duarch-canvas { filter: drop-shadow(0 0 16px var(--brilho)); }
.pouso-breu { position: relative; width: min(340px, 80%); aspect-ratio: 1 / 1.1; }

/* ---------- Breu 3D (vem da v2) ---------- */
.palco-duarch .duarch-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.duarch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; touch-action: manipulation; }
.balao-3d { position: absolute; left: 50%; top: 0; transform: translate(-50%, calc(-100% + 4px)) scale(.92); opacity: 0; pointer-events: none; background: var(--linha); color: var(--breu); font: italic 500 19px/1.25 var(--f-breu); padding: 9px 16px; white-space: nowrap; max-width: min(92vw, 420px); transition: opacity .2s, transform .2s; z-index: 2; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.balao-3d.on { opacity: 1; transform: translate(-50%, calc(-100% - 6px)) scale(1); }

/* ---------- aviso e janela ---------- */
.aviso { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); z-index: 90; transform: translate(-50%, 20px); opacity: 0; background: var(--linha); color: var(--breu); padding: 12px 20px; font-weight: 700; font-size: 14px; display: flex; gap: 10px; align-items: center; transition: opacity .25s, transform .25s; pointer-events: none; max-width: calc(100vw - 32px); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.aviso.on { opacity: 1; transform: translate(-50%, 0); }
.aviso svg { width: 18px; height: 14px; fill: currentColor; flex: none; }
dialog.janela { border: 1px solid var(--linha); background: var(--breu-2); color: var(--linha); padding: 30px; width: min(480px, calc(100vw - 32px)); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
dialog.janela::backdrop { background: rgba(0, 0, 0, .75); backdrop-filter: blur(4px); }
dialog.janela h2 { font-size: 46px; margin: 0 0 14px; }
dialog.janela p, dialog.janela ol { color: var(--nevoa); margin: 0 0 20px; }
dialog.janela ol { padding-left: 20px; display: grid; gap: 8px; }
dialog.janela b { color: var(--linha); }

/* ---------- blocos comuns das páginas internas ---------- */
.bloco { border: 1px solid var(--aco); background: var(--breu-2); padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 14px; align-content: start; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--nevoa); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nevoa); }
.status.vivo { color: var(--linha); } .status.vivo::before { background: #7ee2a8; box-shadow: 0 0 10px #7ee2a8; }
.lista-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.lista-tags li { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--aco-2); padding: 6px 10px; color: var(--nevoa); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.anima .surge { opacity: 1; transform: none; }
}

/* o Breu na abertura: grande, ao lado do DUARCH, seguindo o cursor com a cabeça */
.breu-heroi { position: absolute; left: 33%; top: 9%; width: clamp(210px, 22vw, 340px); aspect-ratio: 1 / 1.12; pointer-events: none; }
@media (max-width: 760px) { .breu-heroi { left: 3%; top: 9%; width: 132px; } }
@media (max-width: 600px) { .breu-voo .balao-3d { left: 0; transform: translate(0, -6px) scale(.92); white-space: normal; width: max-content; max-width: min(70vw, 260px); font-size: 16px; } .breu-voo .balao-3d.on { transform: translate(0, -14px) scale(1); } }
.breu-voo .balao-3d { font-size: 18px; }