/* Páginas públicas do MacDocker (entrada, cadastro, acesso, termos). Sem CDN. */
:root {
  --fundo: #070b16; --painel: #030712; --cartao: #0b1220; --borda: #1f2937; --borda2: #374151;
  --texto: #f3f4f6; --texto2: #9ca3af; --texto3: #6b7280; --azul: #3b82f6; --azul2: #60a5fa;
  --verde: #10b981; --amarelo: #f59e0b; --vermelho: #f87171; --roxo: #a78bfa;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; color: var(--texto);
  font: 15px/1.5 -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  background: radial-gradient(900px 600px at 0% 0%, rgba(59,130,246,.18), transparent 60%),
              radial-gradient(900px 600px at 100% 100%, rgba(167,139,250,.14), transparent 60%), var(--fundo); }
a { color: var(--azul2); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: "SF Mono", Menlo, monospace; font-size: 13px; }
.topo { display: flex; align-items: center; gap: 16px; padding: 18px 32px; border-bottom: 1px solid var(--borda); background: rgba(3,7,18,.6); }
.logo { font-size: 21px; font-weight: 700; color: var(--azul); white-space: nowrap; }
.logo small { font-size: 11px; color: var(--texto3); font-weight: 400; margin-left: 6px; }
.selo-beta { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #052e16; background: var(--verde); border-radius: 99px; padding: 2px 9px; }
.topo nav { margin-left: auto; display: flex; gap: 18px; font-size: 13px; }
.topo nav a { color: var(--texto2); }
main { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 48px 32px; }
.rodape { text-align: center; padding: 18px; border-top: 1px solid var(--borda); color: var(--texto3); font-size: 12px; }
.rodape a { color: var(--texto2); margin: 0 8px; }

/* Topo fixo e menu da página inicial */
.topo.fixo { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(3,7,18,.82); }
.menu-pub { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.menu-pub a { color: var(--texto2); padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.menu-pub a:hover { color: var(--texto); background: rgba(255,255,255,.05); text-decoration: none; }
.menu-pub a.botao { color: #fff; margin-left: 6px; }
.botao.peq { padding: 6px 14px; font-size: 13px; }
a.botao { display: inline-block; text-decoration: none; text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main [id], #cartao { scroll-margin-top: 76px; }
/* Rolagem suave em todos os links de âncora do menu e da vitrine (#gpu, #xcode, #isolamento, #roadmap, #planos, #cartao), como no botão Entrar */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Vitrine: as artes de divulgação em HTML; só as capturas do painel são imagens */
.vit { margin-top: 96px; }
.vit-k { font-size: 13px; letter-spacing: .14em; font-weight: 800; color: var(--azul2); margin-bottom: 12px; }
.vit-h { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -1.6px; font-weight: 850; }
.vit-h em { font-style: normal; background: linear-gradient(90deg, #60a5fa, #a78bfa 60%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vit-sub { color: #c3cfea; font-size: 18px; line-height: 1.45; margin-top: 18px; }
.vit-sub.largo { max-width: 940px; }
.vit-sub b { color: #fff; }
.vit-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.vit-2col.roadmap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.vit-2col.roadmap .vit-tela { margin-top: 56px; }

.janela { border-radius: 14px; overflow: hidden; border: 1px solid rgba(148,163,184,.35); background: #0b1220;
  box-shadow: 0 30px 90px rgba(37,99,235,.28), 0 10px 40px rgba(0,0,0,.55); }
.janela .barra { height: 30px; background: #0f1729; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid rgba(148,163,184,.2); }
.janela .barra span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.janela .barra span:nth-child(2) { background: #febc2e; } .janela .barra span:nth-child(3) { background: #28c840; }
.janela .barra u { min-width: 0; margin-left: 10px; text-decoration: none; font-size: 12px; color: #7d8db3; background: #0a1020; border-radius: 6px; padding: 2px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.janela img { display: block; width: 100%; height: auto; }

.vit-tela { position: relative; }
.vit-flut { position: absolute; padding: 14px 18px; border-radius: 14px; background: rgba(9,14,28,.95); border: 1px solid rgba(96,165,250,.55);
  box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 0 5px rgba(59,130,246,.10); }
.vit-flut .cinza { color: #7d8db3; font-weight: 500; }
.vit-flut.terminal { left: -24px; bottom: -34px; white-space: nowrap; font: 13.5px/1.6 "SF Mono", Menlo, monospace; border-color: rgba(52,211,153,.6); }
.vit-flut.terminal b { color: #34d399; }
.vit-tela.xcode { margin-top: 56px; margin-right: 12%; }
.vit-flut.selo-ok { right: -14%; top: -30px; font-size: 18px; font-weight: 700; border-color: rgba(52,211,153,.7); z-index: 2; white-space: nowrap; }
.vit-flut.selo-ok b { color: #34d399; }
.vit-flut.selo-ok .cinza { font-size: 14px; }

.vit-vs { display: flex; gap: 14px; margin-top: 26px; }
.vit-vs div { flex: 1; padding: 16px 18px; border-radius: 14px; font-size: 16px; line-height: 1.35; }
.vit-vs strong { display: block; font-size: 13px; letter-spacing: .12em; margin-bottom: 6px; }
.vit-vs .nao { background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.4); color: #fecaca; }
.vit-vs .sim { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.5); color: #c9fbe8; }

.vit-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.vit-chips span { font-size: 15px; font-weight: 650; padding: 9px 16px; border-radius: 12px; background: rgba(59,130,246,.14); border: 1px solid rgba(96,165,250,.45); color: #dbe7ff; }
.vit-chips span.verde { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.5); color: #c9fbe8; }

.vit-iso { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: 30px; align-items: start; }
.vit-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vit-tiles div { padding: 18px 18px; border-radius: 16px; background: rgba(15,23,42,.72); border: 1px solid rgba(148,163,184,.25); }
.vit-tiles b { display: block; font-size: 28px; font-weight: 850; letter-spacing: -.5px; line-height: 1.1; }
.vit-tiles b.azul { color: var(--azul2); } .vit-tiles b.verde { color: #34d399; } .vit-tiles b.roxo { color: var(--roxo); }
.vit-tiles p { color: #c3cfea; font-size: 14.5px; line-height: 1.35; margin-top: 6px; }
.vit-tiles strong { color: #fff; }

.vit-lista { list-style: none; display: grid; gap: 10px; margin-top: 24px; }
.vit-lista li { display: flex; gap: 14px; align-items: center; padding: 10px 16px; border-radius: 14px; background: rgba(15,23,42,.72); border: 1px solid rgba(148,163,184,.22); }
.vit-lista span { font-size: 24px; width: 32px; text-align: center; }
.vit-lista p { font-size: 17px; font-weight: 650; }
.vit-lista small { display: block; font-size: 13.5px; font-weight: 450; color: var(--texto2); }

.destaques { position: relative; }
.destaques .breve { position: absolute; border: 2px dashed var(--roxo); border-radius: 10px; box-shadow: 0 0 0 4px rgba(167,139,250,.18), 0 0 34px rgba(167,139,250,.45); }
.destaques .breve b { position: absolute; top: -12px; right: 8px; font-size: 11px; letter-spacing: .1em; font-weight: 800; background: var(--roxo); color: #1a1033; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.cta-vitrine { margin-top: 14px; color: var(--texto2); font-size: 15px; text-align: center; }
.cta-vitrine a { font-weight: 600; margin-left: 6px; }
.vit .cta-vitrine { margin-top: 48px; }

/* Planos */
.planos { margin-top: 80px; }
.planos .k { font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--azul2); margin-bottom: 10px; }
.planos h2 { font-size: 34px; letter-spacing: -1px; }
.sub-planos { color: #c3cfea; margin: 8px 0 22px; max-width: 760px; }
.tabela-planos { overflow-x: auto; border: 1px solid var(--borda); border-radius: 16px; background: var(--painel); }
.tabela-planos table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.tabela-planos th, .tabela-planos td { padding: 12px 16px; border-bottom: 1px solid var(--borda); text-align: center; vertical-align: middle; }
.tabela-planos tbody th { text-align: left; font-weight: 500; color: var(--texto2); width: 26%; }
.tabela-planos thead th { padding: 18px 14px; vertical-align: top; background: var(--cartao); }
.tabela-planos thead b { display: block; font-size: 17px; margin-bottom: 6px; }
.tabela-planos thead .tag { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px; border-radius: 99px; }
.tabela-planos .preco { display: block; margin-top: 10px; font-size: 18px; font-weight: 700; }
.tabela-planos .preco { white-space: nowrap; }
.tabela-planos .preco small { font-size: 12px; font-weight: 500; color: var(--texto2); }
.tabela-planos .preco small.de { display: block; font-size: 11.5px; margin-bottom: 2px; }
.tabela-planos sup { color: var(--amarelo); font-weight: 700; margin-left: 1px; }
.tabela-planos .sim { color: #6ee7b7; font-weight: 700; font-size: 16px; }
.tabela-planos tfoot td { border-bottom: 0; padding: 16px 12px; }
.tabela-planos tfoot .botao { width: 100%; font-size: 13px; padding: 9px 10px; }
.tabela-planos .fechado { color: var(--texto3); font-size: 12.5px; }
.dica-rolar { display: none; font-size: 12.5px; color: var(--texto3); margin-bottom: 8px; }
.nota-planos { margin-top: 14px; font-size: 13.5px; color: var(--texto2); max-width: 900px; }
.nota-planos::first-letter { color: var(--amarelo); font-weight: 700; }

/* Entrada: apresentação + cartão de login/cadastro */
.entrada { display: grid; grid-template-columns: 1fr 470px; gap: 56px; align-items: start; }
.chamada .k { font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--azul2); margin-bottom: 14px; }
.chamada h1 { font-size: 46px; line-height: 1.05; letter-spacing: -1.5px; font-weight: 800; }
.chamada h1 em { font-style: normal; background: linear-gradient(90deg, #60a5fa, #a78bfa 60%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chamada > p { color: #c3cfea; font-size: 17px; margin: 18px 0 26px; max-width: 560px; }
.pontos { display: grid; gap: 12px; max-width: 560px; }
.pontos div { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: rgba(15,23,42,.6); border: 1px solid var(--borda); }
.pontos span { font-size: 22px; line-height: 1.2; }
.pontos b { display: block; font-size: 15px; }
.pontos small { color: var(--texto2); font-size: 13px; }

.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.45); overflow: hidden; }
.abas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--borda); }
.abas button { background: none; border: 0; color: var(--texto2); font: inherit; font-weight: 600; padding: 15px; cursor: pointer; }
.abas button.ativo { color: #dbeafe; box-shadow: inset 0 -2px 0 var(--azul); background: rgba(59,130,246,.07); }
.corpo-c { padding: 24px 26px 26px; }
.corpo-c h2 { font-size: 19px; margin-bottom: 4px; }
.corpo-c .sub { color: var(--texto2); font-size: 13.5px; margin-bottom: 18px; }
.oculto { display: none !important; }

.opcoes { display: grid; gap: 10px; margin-bottom: 18px; }
.opcao { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--borda2); border-radius: 12px; padding: 12px 14px; cursor: pointer; background: var(--cartao); }
.opcao input { width: auto; margin-top: 4px; accent-color: var(--azul); }
.opcao b { display: block; font-size: 14.5px; }
.opcao small { color: var(--texto2); font-size: 12.5px; }
.opcao .tag { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 1px 7px; border-radius: 99px; margin-left: 6px; vertical-align: 1px; }
.tag.v { background: rgba(16,185,129,.15); color: #6ee7b7; } .tag.a { background: rgba(245,158,11,.14); color: #fcd34d; } .tag.r { background: rgba(167,139,250,.16); color: #ddd6fe; }
.opcao:has(input:checked) { border-color: var(--azul); background: rgba(59,130,246,.08); }
.opcao.fechada { opacity: .5; cursor: not-allowed; }
a.opcao { color: var(--texto); }
a.opcao:hover { text-decoration: none; border-color: var(--azul); background: rgba(59,130,246,.08); }

label.rot { display: block; font-size: 12.5px; color: var(--texto2); margin: 12px 0 5px; }
input, select, textarea { font: inherit; font-size: 14px; color: var(--texto); background: var(--cartao); border: 1px solid var(--borda2); border-radius: 9px; padding: 9px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); }
textarea { resize: vertical; min-height: 64px; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--texto2); margin: 16px 0 4px; }
.aceite input { width: auto; margin-top: 3px; accent-color: var(--azul); }

.provedores { display: grid; gap: 10px; margin-top: 16px; }
.provedor { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 11px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; border: 1px solid var(--borda2); width: 100%; }
.provedor svg { width: 20px; height: 20px; }
.provedor.github { background: #1f2937; color: #fff; } .provedor.google { background: #fff; color: #1f2937; border-color: #fff; } .provedor.apple { background: #000; color: #fff; }
.provedor:hover { filter: brightness(1.12); }
.provedor:disabled { opacity: .4; cursor: not-allowed; }
.nota-dev { font-size: 11px; color: var(--texto3); text-align: center; margin-top: -4px; }

.alerta { margin-bottom: 16px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; display: flex; gap: 10px; }
.alerta.erro { background: rgba(127,29,29,.35); border: 1px solid #991b1b; color: #fecaca; }
.alerta.ok { background: rgba(6,78,59,.35); border: 1px solid #047857; color: #a7f3d0; }
.alerta.dev { background: rgba(120,53,15,.3); border: 1px solid #92400e; color: #fde68a; font-size: 12px; }
.miudo { color: var(--texto3); font-size: 12px; margin-top: 16px; text-align: center; }

.botao { background: var(--azul); color: #fff; border: 0; border-radius: 9px; padding: 10px 18px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.botao:hover { background: #2563eb; }
.botao.contorno { background: transparent; border: 1px solid var(--azul); color: var(--azul2); }
.botao.cinza { background: #1f2937; color: var(--texto); }
.botao:disabled { opacity: .45; cursor: not-allowed; }

/* Página de acesso (conta pendente, expirada, suspensa) */
.acesso { max-width: 640px; margin: 0 auto; }
.acesso .cartao { padding: 30px 32px; }
.acesso .icone { font-size: 44px; margin-bottom: 10px; }
.acesso h1 { font-size: 24px; margin-bottom: 8px; }
.acesso p { color: #c3cfea; }
.acesso .dados { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; font-size: 13.5px; margin: 20px 0; padding: 14px 16px; border-radius: 12px; background: var(--cartao); border: 1px solid var(--borda); }
.acesso .dados dt { color: var(--texto3); }
.acesso .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Documentos legais */
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { font-size: 32px; letter-spacing: -.5px; margin-bottom: 6px; }
.legal .versao { color: var(--texto3); font-size: 13px; margin-bottom: 28px; }
.legal h2 { font-size: 19px; margin: 32px 0 10px; padding-top: 6px; border-top: 1px solid var(--borda); }
.legal h3 { font-size: 15.5px; margin: 18px 0 6px; }
.legal p, .legal li { color: #d1d9ec; font-size: 15px; }
.legal p { margin-bottom: 10px; }
.legal ul, .legal ol { padding-left: 22px; margin-bottom: 12px; }
.legal li { margin-bottom: 5px; }
.legal table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 8px 10px; border: 1px solid var(--borda); vertical-align: top; color: #d1d9ec; }
.legal th { background: var(--cartao); color: var(--texto); }
.legal .resumo { background: rgba(59,130,246,.08); border: 1px solid rgba(96,165,250,.35); border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; }
.legal .preencher { background: rgba(245,158,11,.18); color: #fde68a; border-radius: 4px; padding: 0 4px; }
.legal .indice { columns: 2; font-size: 14px; margin-bottom: 8px; }

@media (max-width: 960px) {
  .vit { margin-top: 64px; }
  .vit-2col, .vit-2col.roadmap, .vit-iso { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .vit-2col.roadmap .vit-tela, .vit-tela.xcode { margin-top: 24px; margin-right: 0; }
  .vit-flut { position: static; margin-top: 12px; }
  .vit-flut.terminal { white-space: normal; overflow-wrap: anywhere; }
  .vit-flut.selo-ok { white-space: normal; margin: 0 0 12px; display: inline-block; }
  .entrada { grid-template-columns: 1fr; gap: 32px; }
  .chamada h1 { font-size: 36px; }
  .chamada > p { margin-bottom: 0; }
  .pontos { display: none; }          /* celular: o cadastro logo abaixo da chamada */
}
@media (max-width: 860px) {
  /* celular e tablet: o menu vira uma faixa rolável abaixo da marca */
  .topo.fixo { flex-wrap: wrap; row-gap: 8px; }
  .menu-pub { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .menu-pub::-webkit-scrollbar { display: none; }
  .menu-pub a.botao { margin-left: auto; }
  /* o seletor de idioma sai da faixa rolável e fica na primeira linha, ao lado da marca (decisão 048) */
  .menu-pub .idiomas { position: absolute; top: 14px; right: 16px; margin: 0; }
}
@media (max-width: 600px) {
  .topo { padding: 14px 16px; } .topo nav:not(.menu-pub) { display: none; }
  .topo .logo small { display: none; }          /* a versão cede lugar ao seletor de idioma */
  .vit-sub { font-size: 16px; }
  .vit-vs { flex-direction: column; }
  .vit-tiles b { font-size: 22px; }
  .vit-flut.terminal { font-size: 11.5px; }
  .vit-flut.selo-ok { font-size: 15px; }
  .planos { margin-top: 52px; } .planos h2 { font-size: 26px; }
  .dica-rolar { display: block; }
  .tabela-planos tbody th { width: 150px; min-width: 150px; }
  main [id], #cartao { scroll-margin-top: 104px; }
  main { padding: 28px 16px; }
  .corpo-c { padding: 20px 18px; }
  .linha2 { grid-template-columns: 1fr; }
  .chamada h1 { font-size: 30px; }
  .legal .indice { columns: 1; }
  .acesso .cartao { padding: 24px 20px; } .acesso .dados { grid-template-columns: 1fr; }
}

/* Troca de idioma (decisão 048): links reais para a mesma página no outro idioma */
.idiomas { display: inline-flex; align-items: center; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; margin-left: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.idiomas a, .idiomas span { padding: 5px 9px; color: var(--texto2); border-radius: 0; }
.idiomas span[aria-current] { background: rgba(255,255,255,.09); color: var(--texto); }
.idiomas a:hover { background: rgba(255,255,255,.05); }
.sugestao-idioma { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 9px 16px; background: #0b1b3a; border-bottom: 1px solid var(--borda); font-size: 13.5px; color: var(--texto); }
.sugestao-idioma[hidden] { display: none; }
.sugestao-idioma a { font-weight: 700; }
.sugestao-idioma button { background: none; border: 0; color: var(--texto2); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }