/* Pátria Amada · página de entrada (redesign de 16/10/2026). Contrato: docs/entrada/DESIGN.md.
   O que aprendemos dos jogos do Vectorpark (sem copiar nada): cada cena é UMA cor que enche a tela; os objetos usam a mesma
   cor em três tons chapados (claro, base, escuro), sem contorno nem degradê; um único acento pequeno; título enorme e claro no
   canto, subtítulo fino; grão de papel por cima de tudo. Pedido do sócio: só amarelo, verde e azul, em tons diferentes.
   Os tons de cada cor saem de VP.tons() (app/vp.js); os valores abaixo foram gerados por ela, para o CSS e o canvas baterem. */

:root {
  --fonte: "Jost", "Futura", system-ui, -apple-system, "Segoe UI", sans-serif;
  --creme: #f7f0d6;
  --branco: #fffaf0;
  --sol: #f2c22e; --sol-escuro: #c29340; --sol-tinta: #44250a;
  --mola: cubic-bezier(.3, 1.55, .5, 1);
  --suave: cubic-bezier(.2, .7, .2, 1);
  --chao: clamp(104px, 15svh, 168px);   /* altura da faixa de chão do planeta (herói e final) */
}
/* cores das cenas (gerado por VP.tons) */
[data-cor="noite"] { --fundo: #1d2a6b; --claro: #365896; --escuro: #171541; --sombra: #0b0726; --tinta: #f7f0d6; }
[data-cor="mata"] { --fundo: #1d6a46; --claro: #5d9568; --escuro: #004231; --sombra: #00251b; --tinta: #f7f0d6; }
[data-cor="ceu"] { --fundo: #1b72ae; --claro: #45a4d7; --escuro: #224774; --sombra: #14294a; --tinta: #f7f0d6; }
[data-cor="ouro"] { --fundo: #e3a72f; --claro: #ffde6f; --escuro: #b07c3b; --sombra: #875e33; --tinta: #452410; --titulo: #452410; }
[data-cor="folha"] { --fundo: #2f7740; --claro: #6ea262; --escuro: #094c2f; --sombra: #002d1b; --tinta: #f7f0d6; }
[data-cor="petroleo"] { --fundo: #16607a; --claro: #478ea1; --escuro: #13394f; --sombra: #061f2f; --tinta: #f7f0d6; }
[data-cor="sol"] { --fundo: #f2c22e; --claro: #ffef6d; --escuro: #c29340; --sombra: #9a743c; --tinta: #44250a; --titulo: #44250a; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.entrada { margin: 0; background: #1d2a6b; color: var(--creme); font: 400 18px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* grão de papel: por cima de tudo (fundo, objetos e letras), como nas telas dos jogos de referência */
body.entrada::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .32; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.1 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- topo ---------- */
.topo { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px clamp(16px, 4vw, 44px); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* logo do app (o mesmo de comum.js/estilo.css, estilo Tarsila): PÁTRIA verde em cima, AMADA sol embaixo, com o traço amarelo */
.marca-simbolo { width: 40px; height: 40px; flex: none; display: block; }
.marca-nome { display: inline-flex; flex-direction: column; gap: 3px; font: 900 19px/1 "Nunito", var(--fonte); letter-spacing: .05em; }
.marca-nome .m1 { color: #5fbf7a; text-shadow: 0 2px 0 #23703f; }
.marca-nome .m2 { position: relative; align-self: flex-start; color: #f7c548; text-shadow: 0 2px 0 #c86a12; }
/* sem sublinhado no AMADA e logo reto (pedido do sócio, 16/10/2026) */
.topo-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 15px;
  text-decoration: none; color: var(--creme); box-shadow: inset 0 0 0 2px rgba(247, 240, 214, .45); }
.topo-link:hover { box-shadow: inset 0 0 0 2px var(--creme); }

/* ---------- botões: bloco chapado com um "lado" mais escuro (a espessura), sem sombra borrada; a mola vem do vp.js ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.bt { --lado: 5px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px;
  border-radius: 999px; font: 600 18px/1 var(--fonte); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: box-shadow .12s var(--suave); }
.bt i { font-size: 1.1em; }
.bt-sol { background: var(--sol); color: var(--sol-tinta); box-shadow: 0 var(--lado) 0 var(--sol-escuro); }
.bt-tinta { background: var(--tinta); color: var(--fundo); box-shadow: 0 var(--lado) 0 var(--sombra); }
.bt-vazado { color: var(--tinta); box-shadow: inset 0 0 0 2.5px currentColor; --lado: 0px; }
.bt.apertado { --lado: 1px; }
.bt:focus-visible, .topo-link:focus-visible, .cena-conteudo a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }

/* ---------- cena (cada seção) ---------- */
/* overflow: clip (e não hidden) para o palco grudado (position: sticky) funcionar na tela larga; hidden fica de reserva */
.cena { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: var(--fundo); color: var(--tinta);
  padding: clamp(64px, 9vw, 128px) clamp(16px, 5vw, 72px); }
.cena-num { margin: 0 0 10px; font-weight: 500; font-size: 15px; letter-spacing: .28em; opacity: .75; }
.cena-titulo { margin: 0; font: 700 clamp(48px, 8.6vw, 124px)/.9 var(--fonte); letter-spacing: -.028em; color: var(--titulo, var(--branco));
  text-shadow: .03em .04em 0 color-mix(in srgb, var(--sombra) 50%, transparent); text-wrap: balance; }
.cena-sub { margin: .3em 0 0; max-width: 17em; font: 300 clamp(24px, 3.3vw, 42px)/1.12 var(--fonte); letter-spacing: -.01em; text-wrap: balance; }
.cena-palco { position: relative; min-height: clamp(300px, 72vw, 460px); margin: 28px calc(-1 * clamp(16px, 5vw, 72px)); touch-action: pan-y; }
.cena-palco > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cena-conteudo { position: relative; z-index: 2; max-width: 40em; }
.cena-nota { font-size: 19px; margin: 0 0 18px; }

/* listas do conteúdo: linhas separadas por um traço no tom escuro (chapado), título forte e texto curto */
.cena-conteudo ul, .cena-conteudo ol { list-style: none; margin: 0; padding: 0; }
.colunas p { margin: 0 0 14px; font-size: 19px; }
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; margin-top: 26px !important; }
.numeros b { display: block; font: 700 clamp(52px, 9vw, 76px)/.95 var(--fonte); letter-spacing: -.03em; color: var(--titulo, var(--branco)); }
.numeros span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.35; }
.paineis > li, .passos > li, .combinados > li, .linha-tempo > li, .degraus > li { border-top: 2px solid color-mix(in srgb, var(--escuro) 75%, transparent); }
.paineis a { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 16px 0; text-decoration: none; }
.paineis a::after { content: "→"; grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 24px; transition: translate .3s var(--mola); }
.paineis a:hover::after { translate: 6px 0; }
.paineis b, .passos b, .combinados b, .linha-tempo b, .degraus b { display: block; font-weight: 600; font-size: 21px; line-height: 1.2; }
.paineis span, .combinados span { font-size: 16px; opacity: .9; }
.passos > li, .combinados > li, .linha-tempo > li { padding: 16px 0; }
.passos p, .linha-tempo p { margin: 4px 0 0; font-size: 16px; }
.passos { counter-reset: passo; }
.passos > li { display: grid; grid-template-columns: 2.2em 1fr; column-gap: 8px; }
.passos > li::before { counter-increment: passo; content: counter(passo); grid-row: 1 / span 2; font: 700 30px/1 var(--fonte); color: var(--escuro); }
.linha-tempo small { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; box-shadow: inset 0 0 0 1.5px currentColor; }
.linha-tempo .feito small { background: var(--tinta); color: var(--fundo); box-shadow: none; }
.linha-tempo .agora small { background: var(--sol); color: var(--sol-tinta); box-shadow: none; }
.degraus > li { padding: 16px 0; }
.degraus .valor { display: block; font: 700 34px/1 var(--fonte); letter-spacing: -.02em; margin-bottom: 4px; }
.degraus ul { margin-top: 6px !important; }
.degraus ul li { position: relative; padding-left: 18px; font-size: 16px; }
.degraus ul li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--escuro); }

/* aparecer ao rolar (o vp.js põe .visto) */
.js [data-surge] { opacity: 0; transform: translateY(20px); }
.js [data-surge].visto { opacity: 1; transform: none; transition: opacity .5s var(--suave), transform .8s var(--mola); transition-delay: var(--atraso, 0s); }
@media (prefers-reduced-motion: reduce) { .js [data-surge] { opacity: 1; transform: none; } }

/* telas largas: o palco fica de um lado e o texto do outro, alternando de seção para seção; o palco acompanha a rolagem */
@media (min-width: 900px) {
  .cena:not(.heroi):not(.final) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "texto palco" "conteudo palco";
    column-gap: clamp(32px, 5vw, 80px); align-items: start; }
  .cena:not(.heroi):not(.final):nth-of-type(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "palco texto" "palco conteudo"; }
  .cena .cena-texto { grid-area: texto; }
  .cena .cena-conteudo { grid-area: conteudo; margin-top: 36px; }
  .cena .cena-palco { grid-area: palco; position: sticky; top: 6vh; height: 88vh; min-height: 0; margin: 0; }
  .cena-titulo { font-size: clamp(56px, 6.4vw, 112px); }
}

/* ---------- herói: céu de constelações em toda a tela, planeta embaixo, a Cuca andando nele ---------- */
.heroi { min-height: 100svh; padding-top: 104px; padding-bottom: calc(var(--chao) + 40px); }
.heroi .ceu, .final .ceu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; touch-action: pan-y; }
.planeta { position: absolute; z-index: 1; left: 50%; width: max(220vw, 2200px); aspect-ratio: 1; translate: -50% 0; top: calc(100% - var(--chao));
  border-radius: 50%; background: var(--escuro); pointer-events: none; }
.palco-cuca { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: calc(var(--chao) + 440px); display: block; pointer-events: none; }
.heroi-texto { position: relative; z-index: 3; max-width: 660px; pointer-events: none; }
.heroi-texto .botoes { pointer-events: auto; }
.heroi .cena-titulo { font-size: clamp(64px, 19vw, 150px); }
.heroi .cena-titulo span { display: block; }   /* Pátria em cima de Amada (pedido do sócio) */
.heroi-linha { margin: 10px 0 0; font-size: 18px; opacity: .85; }
.heroi-dica { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 46px; margin: 0; text-align: center; font-size: 14px; opacity: .7; pointer-events: none; }
.dica-ceu { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, calc(-100% - 16px)); max-width: min(280px, 80vw);
  padding: 9px 13px; border-radius: 14px; background: var(--creme); color: #1d2a6b; font: 500 14px/1.3 var(--fonte); text-align: center;
  box-shadow: 0 4px 0 #171541; opacity: 0; transition: opacity .18s; }
.dica-ceu.ver { opacity: 1; }
.dica-ceu b { display: block; font-weight: 700; font-size: 16px; }
.dica-ceu small { display: block; font-size: 13px; opacity: .8; }

.final { min-height: 86svh; padding-bottom: calc(var(--chao) + 160px); }
.final .cena-texto { position: relative; z-index: 3; pointer-events: none; max-width: 44vw; }
.final .botoes { pointer-events: auto; }
.final .cena-titulo { max-width: 7em; }
@media (max-width: 899px) { .final .cena-texto { max-width: none; } }

.rodape { background: #2d4590;   /* azul mais claro que o morro (#171541), para dar contraste (pedido do sócio) */
   color: var(--creme); padding: 28px clamp(16px, 5vw, 72px) 40px; font-size: 15px; }
.rodape p { margin: 0 0 6px; }
.rodape .miudo { font-size: 13px; opacity: .7; }

@media (min-width: 900px) {
  .heroi-texto { max-width: 44vw; }
}

/* cursor-criatura (app/cursor.js): só com mouse; a camada fica por cima de tudo, abaixo do grão */
html.cursor-bicho, html.cursor-bicho * { cursor: none !important; }
.cursor-camada { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 99; pointer-events: none; }

/* a divisa entre as seções vira água (app/onda.js): camada fixa por cima das seções, abaixo do topo, do cursor e do grão */
.onda-camada { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 6; pointer-events: none; }
/* segurar a Cuca ou um objeto no celular não pode virar seleção de texto nem abrir o menu do toque longo */
.heroi, .final, .cena-palco { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.heroi a, .final a { -webkit-touch-callout: default; }
/* doação por Pix na seção Apoie (app/pix.js) */
.pix { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 22px 0 0; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--escuro) 12%, transparent); }
.pix[hidden] { display: none; }
.pix-qr { width: 148px; flex: none; background: #fff; border-radius: 12px; padding: 6px; }
.pix-qr svg { display: block; width: 100%; height: auto; }
.pix-texto { flex: 1; min-width: 200px; }
.pix-texto b { display: block; font-weight: 600; font-size: 21px; }
.pix-texto p { margin: 6px 0; font-size: 16px; }
.pix-miudo { font-size: 13px !important; opacity: .8; word-break: break-all; }
.pix-aviso { font-size: 14px !important; font-weight: 600; word-break: break-all; }

/* qualidade-a: links do rodape com area de toque maior (tinham 22 px de altura) */
.rodape a { display: inline-block; padding: 7px 0; }
/* Quatro · painel do Apoie (app/apoio.js): quanto já entrou e a regra da porcentagem */
.apoio-painel { margin: 0 0 18px; }
.ap-total b { font: 700 34px/1 var(--fonte); }
.ap-total span { font-size: 16px; }
.ap-barra { position: relative; height: 16px; margin: 10px 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--escuro) 22%, transparent); overflow: hidden; }
.ap-barra i { position: absolute; inset: 0 auto 0 0; background: var(--escuro); border-radius: 999px; }
.ap-marca { position: absolute; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--fundo) 70%, transparent); }
.ap-miudo { font-size: 14px; margin: 0; opacity: .85; }
.ap-regra { font-size: 16px; margin: 8px 0 0; }
.apoio-mais { margin: 14px 0 0; font-weight: 600; }
.apoio-mais a { color: inherit; }