/* NaView: página de apresentação. Fonte base: Fredoka (a mesma do tema Alto-mar). */

@font-face { font-family: "Fredoka"; src: url("fonts/Fredoka[wdth,wght].ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("fonts/PressStart2P-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Bangers"; src: url("fonts/Bangers-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("fonts/Orbitron[wght].ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "VT323"; src: url("fonts/VT323-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Audiowide"; src: url("fonts/Audiowide-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --mar-fundo: #0e1638;
  --casco: #1e1b4b;
  --anil: #6366f1;
  --celeste: #38bdf8;
  --bandeira: #f59e0b;
  --espuma: #eef6ff;
  --tinta: #16204f;
  --tinta-suave: #44507f;
  --branco: #ffffff;

  --raio-p: 8px;
  --raio-m: 14px;
  --raio-g: 22px;
  --gutter: clamp(16px, 4vw, 40px);
  --largura: 1120px;

  --fonte: "Fredoka", "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--espuma);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.12; margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
code { font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: .92em; }

:focus-visible { outline: 3px solid var(--bandeira); outline-offset: 3px; border-radius: 4px; }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--bandeira); color: var(--casco); padding: 10px 16px; border-radius: var(--raio-p);
  font-weight: 600; text-decoration: none;
}
.pular:focus { top: 16px; }

.largura { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Botões ---------- */

.botao {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border-radius: 999px; border: 0;
  font: 600 1.0625rem/1 var(--fonte);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease-out, box-shadow .15s ease-out, background-color .15s;
}
.botao svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.botao-principal { background: var(--bandeira); color: var(--casco); box-shadow: 0 4px 0 #b45309; }
.botao-principal:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #b45309; }
.botao-principal:active { transform: translateY(3px); box-shadow: 0 1px 0 #b45309; }
.botao-leve { color: var(--h-texto); background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--h-texto) 45%, transparent); }
.botao-leve:hover { box-shadow: inset 0 0 0 2px var(--h-texto); }
.botao-contorno { color: var(--tinta); background: transparent; box-shadow: inset 0 0 0 2px var(--tinta); }
.botao-contorno:hover { background: var(--tinta); color: var(--espuma); }
.botao-grande { min-height: 60px; padding: 16px 30px; font-size: 1.25rem; }

/* ---------- Hero (muda de tema) ---------- */

.hero {
  /* Cores da janela de demonstração, iguais às de temas.py */
  --j-fundo: #111a44; --j-lateral: #0e1638; --j-barra: #0e1638; --j-sup: #1b2659;
  --j-dest: #38bdf8; --j-texto: #e0f2fe; --j-texto-barra: #e0f2fe; --j-texto-dest: #0b1430;
  --j-aba: #1b2659; --j-fonte: "Fredoka"; --j-tam: 13px; --j-borda: 1px solid rgba(255,255,255,.14); --j-raio: 12px;
  /* Cenário e texto do topo */
  --h-fundo: linear-gradient(180deg, #0e1638 0%, #1e1b4b 38%, #4c2f84 66%, #b4568c 84%, #f59e0b 100%);
  --h-texto: #f5f8ff; --h-sub: #cdd8f6; --h-fonte: "Fredoka"; --h-tam: clamp(2.3rem, 5.2vw, 4rem); --h-peso: 600;

  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh;
  padding-bottom: clamp(90px, 14vw, 170px);
  color: var(--h-texto);
  background: var(--h-fundo);
  transition: background .5s ease;
}

.hero[data-tema="pixel"] {
  --j-fundo: #8fd3ff; --j-lateral: #fff8e1; --j-barra: #e8402a; --j-sup: #ffffff;
  --j-dest: #e8402a; --j-texto: #1b1b1b; --j-texto-barra: #ffffff; --j-texto-dest: #ffffff;
  --j-aba: #fff8e1; --j-fonte: "Press Start 2P"; --j-tam: 8px; --j-borda: 3px solid #1b1b1b; --j-raio: 0;
  --h-fundo: linear-gradient(180deg, #5ec2ff 0%, #8fd3ff 70%, #b9e6ff 100%);
  --h-texto: #1b1b1b; --h-sub: #1b1b1b; --h-fonte: "Press Start 2P"; --h-tam: clamp(1.25rem, 2.6vw, 2rem); --h-peso: 400;
}
.hero[data-tema="hq"] {
  --j-fundo: #ffd600; --j-lateral: #ffffff; --j-barra: #e53935; --j-sup: #ffffff;
  --j-dest: #1e40af; --j-texto: #111111; --j-texto-barra: #ffffff; --j-texto-dest: #ffffff;
  --j-aba: #ffffff; --j-fonte: "Bangers"; --j-tam: 15px; --j-borda: 3px solid #111; --j-raio: 4px;
  --h-fundo: #ffd600;
  --h-texto: #111111; --h-sub: #111111; --h-fonte: "Bangers"; --h-tam: clamp(2.8rem, 6.4vw, 5rem); --h-peso: 400;
}
.hero[data-tema="espaco"] {
  --j-fundo: #070b1f; --j-lateral: #0b1029; --j-barra: #0b1029; --j-sup: #141a3d;
  --j-dest: #a78bfa; --j-texto: #e0e7ff; --j-texto-barra: #e0e7ff; --j-texto-dest: #0b1029;
  --j-aba: #141a3d; --j-fonte: "Orbitron"; --j-tam: 11px; --j-borda: 1px solid rgba(167,139,250,.35); --j-raio: 10px;
  --h-fundo: radial-gradient(ellipse at 70% 20%, #1c1650 0%, #070b1f 60%);
  --h-texto: #e0e7ff; --h-sub: #b8c2ef; --h-fonte: "Orbitron"; --h-tam: clamp(1.9rem, 4.2vw, 3.2rem); --h-peso: 700;
}
.hero[data-tema="neon"] {
  --j-fundo: #14052b; --j-lateral: #12041f; --j-barra: #12041f; --j-sup: #22093d;
  --j-dest: #ff2bd6; --j-texto: #fdf2ff; --j-texto-barra: #fdf2ff; --j-texto-dest: #ffffff;
  --j-aba: #22093d; --j-fonte: "Audiowide"; --j-tam: 11.5px; --j-borda: 1px solid rgba(255,43,214,.5); --j-raio: 10px;
  --h-fundo: linear-gradient(180deg, #0d0220 0%, #2a0845 55%, #5a0f6b 100%);
  --h-texto: #fdf2ff; --h-sub: #f0c8f5; --h-fonte: "Audiowide"; --h-tam: clamp(1.9rem, 4.2vw, 3.3rem); --h-peso: 400;
}
.hero[data-tema="terminal"] {
  --j-fundo: #050805; --j-lateral: #070b07; --j-barra: #0a120a; --j-sup: #0b140b;
  --j-dest: #33ff66; --j-texto: #33ff66; --j-texto-barra: #33ff66; --j-texto-dest: #001a00;
  --j-aba: #0b140b; --j-fonte: "VT323"; --j-tam: 17px; --j-borda: 1px solid rgba(51,255,102,.4); --j-raio: 2px;
  --h-fundo: #050805;
  --h-texto: #33ff66; --h-sub: #2bd957; --h-fonte: "VT323"; --h-tam: clamp(2.6rem, 6vw, 4.6rem); --h-peso: 400;
}

.topo-nav {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  max-width: var(--largura); margin: 0 auto; padding: 20px var(--gutter);
}
.marca { display: flex; align-items: center; gap: 10px; color: var(--h-texto); text-decoration: none; font: 600 1.375rem var(--fonte); }
.nav-baixar { color: var(--h-texto); font-weight: 600; text-decoration: none; padding: 10px 4px; border-bottom: 2px solid currentColor; }

.hero-grade {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  max-width: var(--largura); margin: 0 auto; padding: clamp(16px, 4vw, 48px) var(--gutter) 0;
}
.hero h1 { font-family: var(--h-fonte), var(--fonte); font-size: var(--h-tam); font-weight: var(--h-peso); max-width: 14ch; letter-spacing: -.01em; }
.hero[data-tema="pixel"] h1 { line-height: 1.5; letter-spacing: 0; }
.hero[data-tema="hq"] h1 { letter-spacing: .02em; -webkit-text-stroke: 0; text-shadow: 3px 3px 0 #e53935; }
.hero[data-tema="neon"] h1 { text-shadow: 0 0 18px rgba(255,43,214,.65); }
.hero[data-tema="terminal"] h1 { text-shadow: 0 0 10px rgba(51,255,102,.55); }
.hero[data-tema="terminal"] h1::after { content: "_"; animation: piscar 1s steps(1) infinite; }
.hero-sub { margin-top: 20px; font-size: 1.1875rem; color: var(--h-sub); max-width: 40ch; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-nota { margin-top: 16px; font-size: .9375rem; color: var(--h-sub); }

/* Cenário: só a camada do tema ativo aparece */
.cena { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.camada { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.hero[data-tema="mar"] .so-mar,
.hero[data-tema="neon"] .so-neon,
.hero[data-tema="espaco"] .so-espaco,
.hero[data-tema="pixel"] .so-pixel,
.hero[data-tema="hq"] .so-hq,
.hero[data-tema="terminal"] .so-terminal { opacity: 1; visibility: visible; transition: opacity .5s ease; }

.mar-sol { position: absolute; width: clamp(140px, 16vw, 210px); left: 26%; bottom: 20px; opacity: .95; }
.mar-farol { position: absolute; right: 3%; bottom: clamp(40px, 6vw, 80px); width: clamp(44px, 5vw, 70px); }
.mar-gaivota { position: absolute; width: 40px; opacity: .8; }
.mar-gaivota.g1 { top: 9%; left: 40%; }
.mar-gaivota.g2 { top: 13%; left: 45%; width: 26px; }
.mar-ondas-fundo, .mar-ondas-frente { position: absolute; left: 0; right: 0; background-repeat: repeat-x; background-size: 1000px 100%; }
.mar-ondas-fundo { bottom: 30px; height: 70px; background-image: url("arte/mar/ondas_fundo.svg"); }
.mar-ondas-frente { bottom: 0; height: 80px; background-image: url("arte/mar/ondas_frente.svg"); }
.mar-veleiro { position: absolute; left: 12%; bottom: 52px; width: clamp(56px, 7vw, 90px); transform-origin: 50% 90%; animation: balancar 4.5s ease-in-out infinite; }

.neon-sol { position: absolute; width: clamp(180px, 20vw, 260px); left: 24%; bottom: 90px; }
.neon-montanhas { position: absolute; left: 0; right: 0; bottom: 110px; width: 100%; height: 120px; object-fit: cover; }
.neon-grade { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; object-fit: cover; }

.espaco-estrelas { position: absolute; inset: 0; background: url("arte/espaco/estrelas.svg") repeat; background-size: 420px; opacity: .9; }
.espaco-nebulosa { position: absolute; width: 60%; right: -10%; top: -10%; opacity: .5; }
.espaco-planeta { position: absolute; width: clamp(160px, 20vw, 260px); left: 4%; bottom: 6%; }
.espaco-foguete { position: absolute; width: clamp(40px, 5vw, 64px); right: 8%; top: 16%; transform: rotate(20deg); }

.pixel-nuvem { position: absolute; image-rendering: pixelated; }
.pixel-nuvem.n1 { width: 140px; top: 14%; left: 40%; }
.pixel-nuvem.n2 { width: 100px; top: 8%; right: 6%; }
.pixel-grama { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: url("arte/pixel/grama.svg") repeat-x; background-size: 80px 50px; background-position: bottom; image-rendering: pixelated; }
.pixel-slime { position: absolute; width: 64px; left: 10%; bottom: 46px; image-rendering: pixelated; animation: pular 1.4s steps(2) infinite; }
.pixel-fantasma { position: absolute; width: 56px; right: 14%; bottom: 120px; image-rendering: pixelated; }

.hq-pontos { position: absolute; inset: 0; background: url("arte/hq/pontos.svg") repeat; background-size: 22px; opacity: .35; }
.hq-cidade { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 160px; object-fit: cover; object-position: bottom; }
.hq-explosao { position: absolute; width: clamp(150px, 18vw, 230px); right: 2%; top: 2%; opacity: .9; }

.terminal-linhas { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(51,255,102,.06) 0 1px, transparent 1px 4px); }

@keyframes balancar { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-4px); } }
@keyframes pular { 50% { transform: translateY(-14px); } }
@keyframes piscar { 50% { opacity: 0; } }

/* ---------- Janela de demonstração ---------- */

.demo { min-width: 0; }
.janela {
  font-family: var(--j-fonte), var(--fonte); font-size: var(--j-tam);
  color: var(--j-texto); background: var(--j-fundo);
  border: var(--j-borda); border-radius: var(--j-raio);
  box-shadow: 0 30px 60px -20px rgba(5, 8, 30, .55);
  overflow: hidden;
  transition: background .4s, color .4s;
}
.janela-barra { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 0; background: var(--j-barra); color: var(--j-texto-barra); }
.janela-logo { align-self: center; margin-bottom: 6px; }
.abas { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.aba {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  min-height: 36px; padding: 6px 12px;
  font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 0; border-radius: calc(var(--j-raio) * .7) calc(var(--j-raio) * .7) 0 0;
  opacity: .75; white-space: nowrap;
}
.aba:hover { opacity: 1; }
.aba[aria-selected="true"] { background: var(--j-aba); color: var(--j-texto); opacity: 1; }
.hero[data-tema="hq"] .aba[aria-selected="true"], .hero[data-tema="pixel"] .aba[aria-selected="true"] { color: #111; }
.bolinha { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); flex: 0 0 auto; }
.fechar { opacity: .55; margin-left: 2px; }
.janela-mais { align-self: center; margin-bottom: 6px; padding: 0 6px; opacity: .7; }

.janela-corpo { display: grid; grid-template-columns: 34% 1fr; min-height: clamp(250px, 26vw, 330px); }
.contatos { background: var(--j-lateral); padding: 10px; border-right: var(--j-borda); }
.hero[data-tema="pixel"] .contatos, .hero[data-tema="hq"] .contatos { color: #111; }
.busca { background: var(--j-sup); border-radius: calc(var(--j-raio) * .6); padding: 6px 8px; opacity: .8; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contatos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.contatos li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: calc(var(--j-raio) * .5); white-space: nowrap; overflow: hidden; }
.contatos li span:last-child { overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--cor); color: #fff; font-size: 11px; font-weight: 600; }
.hero[data-tema="pixel"] .avatar { border-radius: 0; font-size: 7px; }
.janela[data-ativo="0"] .ativo-0, .janela[data-ativo="1"] .ativo-1, .janela[data-ativo="2"] .ativo-2 { background: var(--j-dest); color: var(--j-texto-dest); }

.sessao { position: relative; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tela-remota {
  --papel: #3b82f6; position: relative; flex: 1; border-radius: 6px; overflow: hidden; min-height: 180px;
  background: linear-gradient(135deg, var(--papel), color-mix(in srgb, var(--papel) 55%, #0b1020));
  transition: background .3s;
}
.sessao[data-cliente="1"] .tela-remota { --papel: #10b981; }
.sessao[data-cliente="2"] .tela-remota { --papel: #f43f5e; }
.tr-janela { position: absolute; background: #f8fafc; border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.25); padding: 16px 10px 10px; display: grid; gap: 6px; align-content: start; transition: all .35s ease; }
.tr-janela::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: #cbd5e1; border-radius: 4px 4px 0 0; }
.tr-janela span { height: 6px; border-radius: 3px; background: #cbd5e1; }
.tr-janela span:nth-child(2) { width: 70%; }
.tr-janela span:nth-child(3) { width: 45%; }
.tr-a { left: 8%; top: 12%; width: 52%; height: 50%; }
.tr-b { left: 50%; top: 34%; width: 40%; height: 38%; }
.sessao[data-cliente="1"] .tr-a { left: 30%; top: 8%; width: 60%; height: 58%; }
.sessao[data-cliente="1"] .tr-b { left: 6%; top: 40%; width: 34%; height: 34%; }
.sessao[data-cliente="2"] .tr-a { left: 14%; top: 10%; width: 72%; height: 66%; }
.sessao[data-cliente="2"] .tr-b { left: 60%; top: 50%; width: 30%; height: 26%; }
.tr-tarefas { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: rgba(15,23,42,.75); display: flex; gap: 6px; align-items: center; padding: 0 8px; }
.tr-tarefas i { width: 10px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.55); }
.tr-tarefas b { margin-left: auto; width: 26px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.4); }
.sessao-legenda { font-size: .92em; opacity: .85; }

/* Cartas de tema */
.temas { margin-top: 22px; }
.temas-titulo { font-weight: 500; color: var(--h-sub); margin-bottom: 12px; }
.temas-lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.carta-tema {
  display: grid; gap: 6px; padding: 7px 7px 9px; text-align: left; cursor: pointer;
  background: #fbfaf5; color: #16204f; border: 0; border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--rar), 0 6px 14px -6px rgba(0,0,0,.45);
  font-family: var(--fonte);
  transition: transform .18s cubic-bezier(.3,1.6,.6,1);
}
.carta-tema:hover { transform: translateY(-4px) rotate(-1.5deg); }
.carta-tema[aria-pressed="true"] { transform: translateY(-8px); box-shadow: inset 0 0 0 3px var(--rar), 0 0 0 3px var(--h-texto), 0 12px 20px -8px rgba(0,0,0,.5); }
.ct-previa { display: block; aspect-ratio: 4 / 3; border-radius: 6px; background: linear-gradient(135deg, var(--a) 0 55%, var(--b) 55% 78%, var(--c) 78%); }
.ct-nome { font-weight: 600; font-size: .875rem; line-height: 1.15; }
.ct-rar { font-size: .75rem; font-weight: 600; color: color-mix(in srgb, var(--rar) 70%, #16204f); }

/* ---------- Dia a dia ---------- */

.dia { padding: clamp(64px, 9vw, 120px) 0; }
.dia h2, .colecao h2, .instalar h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); max-width: 22ch; }
.recursos { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; }
.recursos li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.recursos svg { width: 56px; height: 56px; fill: none; stroke: var(--anil); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.recursos h3 { font-size: 1.3rem; margin-bottom: 6px; }
.recursos p { color: var(--tinta-suave); max-width: 46ch; }

/* ---------- Coleção ---------- */

.colecao { padding: clamp(64px, 9vw, 120px) 0; background: #fff8e8; border-top: 3px dashed #f3d9a4; }
.colecao-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.colecao-texto p { margin-top: 16px; color: var(--tinta-suave); max-width: 48ch; }
.colecao-texto h2 + p { margin-top: 22px; }
.pets { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }
.pets li { width: 60px; height: 60px; display: grid; place-items: center; background: #ffffff; border-radius: 50%; box-shadow: inset 0 0 0 2px #f3d9a4; }
.pets img { width: 40px; height: 40px; image-rendering: pixelated; }

.bau-area { display: grid; justify-items: center; text-align: center; gap: 14px; }
.bau-palco { position: relative; width: min(340px, 100%); min-height: 300px; display: grid; place-items: center; }
.bau {
  display: grid; justify-items: center; gap: 12px; padding: 16px 20px 18px; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--raio-g); font: 600 1.125rem var(--fonte); color: var(--tinta);
}
.bau img { width: 220px; filter: drop-shadow(0 14px 10px rgba(80, 40, 0, .25)); transition: transform .2s cubic-bezier(.3,1.6,.6,1); }
.bau:hover img { transform: translateY(-4px) scale(1.03); }
.bau-rotulo { background: var(--tinta); color: var(--espuma); padding: 8px 18px; border-radius: 999px; }
.bau.tremendo img { animation: tremer .7s ease-in-out; }
@keyframes tremer {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-6deg) scale(1.04); } 30% { transform: rotate(6deg) scale(1.06); }
  45% { transform: rotate(-8deg) scale(1.08); } 60% { transform: rotate(8deg) scale(1.1); }
  80% { transform: scale(1.18); }
}

.carta-ganha {
  --rar: #9aa5b1;
  width: 230px; padding: 14px 14px 18px; border-radius: 16px; background: #ffffff;
  box-shadow: inset 0 0 0 4px var(--rar), 0 18px 30px -12px rgba(40, 20, 0, .35);
  display: grid; gap: 4px; justify-items: center;
  animation: surgir .45s cubic-bezier(.3,1.5,.6,1);
}
.carta-ganha[hidden] { display: none; }
.cg-arte { width: 100%; aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--rar) 18%, #ffffff); margin-bottom: 8px; overflow: hidden; }
.cg-arte img { width: 62%; image-rendering: pixelated; }
.cg-arte.tema { background: var(--previa); }
.cg-arte.tema img { display: none; }
.cg-rar { font-weight: 600; font-size: .875rem; color: color-mix(in srgb, var(--rar) 70%, #16204f); }
.cg-nome { font-weight: 600; font-size: 1.3rem; }
.cg-desc { font-size: .9375rem; color: var(--tinta-suave); }
@keyframes surgir { from { transform: scale(.4) rotate(-10deg); opacity: 0; } }
.bau-status { min-height: 1.5em; font-weight: 500; }
.bau-nota { font-size: .875rem; color: var(--tinta-suave); max-width: 34ch; }

/* ---------- Instalar ---------- */

.instalar { padding: clamp(64px, 9vw, 120px) 0; background: var(--mar-fundo); color: #e6eeff; }
.instalar h2 { color: #ffffff; }
.baixar-caixa { margin-top: 32px; display: grid; justify-items: start; gap: 14px; }
.baixar-meta { color: #b9c6ec; }
.baixar-meta code { color: #ffffff; }
.soma { max-width: 100%; color: #b9c6ec; }
.soma summary { cursor: pointer; font-weight: 500; color: #e6eeff; padding: 6px 0; }
.soma p { margin: 8px 0; }
.soma > pre { margin: 0 0 10px; padding: 10px 12px; background: #0a1030; border-radius: var(--raio-p); white-space: pre-wrap; overflow-wrap: anywhere; color: #fde68a; font-size: .875rem; }

.passos { list-style: none; counter-reset: passo; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.passos li { counter-increment: passo; position: relative; padding-top: 64px; min-width: 0; }
.passos li::before {
  content: counter(passo); position: absolute; top: 0; left: 0;
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bandeira); color: var(--casco); font-weight: 700; font-size: 1.375rem;
}
.passos h3 { font-size: 1.25rem; color: #ffffff; margin-bottom: 10px; }
.passos p { color: #b9c6ec; margin: 8px 0; }
.passos p code { color: #ffffff; }

.comando { display: flex; align-items: stretch; background: #0a1030; border-radius: var(--raio-p); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.comando pre { flex: 1; min-width: 0; margin: 0; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; color: #e6eeff; font-size: .875rem; line-height: 1.6; }
.copiar {
  flex: 0 0 auto; min-width: 84px; border: 0; cursor: pointer; border-radius: 0 var(--raio-p) var(--raio-p) 0;
  background: rgba(255,255,255,.08); color: #e6eeff; font: 600 .875rem var(--fonte);
}
.copiar:hover { background: rgba(255,255,255,.16); }
.copiar.copiado { background: var(--celeste); color: var(--casco); }

/* ---------- Rodapé ---------- */

.rodape { background: #091030; color: #b9c6ec; padding: 36px 0 44px; }
.rodape p { display: flex; align-items: center; gap: 10px; }
.rodape-miudo { margin-top: 12px; font-size: .8125rem; color: #8392c4; display: block !important; }

/* ---------- Telas menores ---------- */

@media (max-width: 960px) {
  .hero-grade { grid-template-columns: 1fr; }
  .hero h1 { max-width: 18ch; }
  .temas-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .colecao-grade { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .recursos { grid-template-columns: 1fr; gap: 32px; }
  .janela-corpo { grid-template-columns: 1fr; }
  .contatos { display: none; }
  .hero-acoes .botao { flex: 1 1 auto; justify-content: center; }
  .mar-farol, .mar-gaivota, .hq-explosao, .espaco-foguete, .pixel-fantasma { display: none; }
  .botao-grande { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}