/* ChelyOS · identidade Papel e Cobalto (manual v1.2). Só fundo papel; cobalto é o acento de 10%. */
:root {
  --papel: #F7F6F2;
  --tinta: #15161A;
  --cobalto: #2B44FF;
  --cobalto-forte: #1F33D6;
  --cobalto-tint: #E6E9FF;
  --surface: #FFFFFF;
  --muted: #5C5B57;
  --stone: #D9D6CE;
  --borda-forte: #8C8A84;
  --erro: #B42318;

  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --raio: 12px;
  --gutter: clamp(16px, 5vw, 48px);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--cobalto);
}

::selection { background: var(--cobalto-tint); color: var(--tinta); }

a { color: var(--cobalto-forte); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--cobalto); text-decoration-thickness: 2px; }

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

html { scrollbar-color: var(--borda-forte) transparent; scrollbar-width: thin; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
}
.topo-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1120px; margin: 0 auto; padding: 18px var(--gutter);
}
.logo { display: block; height: 26px; width: auto; }
.contador {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  opacity: 0; transition: opacity 300ms var(--ease);
}
.progresso { height: 3px; background: var(--stone); opacity: 0; transition: opacity 300ms var(--ease); }
.progresso-barra {
  height: 100%; background: var(--cobalto);
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--ease);
}
body[data-fase="perguntas"] .contador,
body[data-fase="perguntas"] .progresso { opacity: 1; }

/* ---------- Palco ---------- */
.palco {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(28px, 6vh, 72px) var(--gutter) 48px;
  min-height: calc(100dvh - 64px - 64px);
}

.tela { display: none; }
.tela.ativa { display: block; animation: entra 520ms var(--ease) both; }
.tela.saindo { display: block; animation: sai 160ms ease-in both; }

@keyframes entra {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes sai {
  to { opacity: 0; transform: translateY(-10px); }
}

.coluna { max-width: 680px; }

h1, h2, legend { text-wrap: balance; }

.pergunta {
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.5rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -0.025em;
  margin: 0 0 10px; padding: 0;
}
.pergunta:focus { outline: none; }
.dica { color: var(--muted); margin: 0 0 28px; font-size: 1rem; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ---------- Abertura ---------- */
.abertura {
  display: grid; gap: clamp(24px, 4vw, 64px); align-items: center;
  grid-template-columns: 1fr;
}
.abertura-y .y { display: block; width: 64px; height: auto; }
.abertura h1 {
  font-size: clamp(2.125rem, 1.3rem + 3.6vw, 4.25rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;
  margin: 0 0 22px; max-width: 14ch;
}
.abertura h1 em { font-style: normal; color: var(--cobalto); }
.abertura .lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--muted); max-width: 46ch; margin: 0 0 32px; }
.meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.02em;
}
.meta li { display: flex; align-items: center; gap: 8px; }
.meta li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalto); }

@media (min-width: 900px) {
  .abertura { grid-template-columns: 1.5fr 1fr; }
  .abertura-y { order: 2; justify-self: end; width: min(100%, 340px); }
  .abertura-y .y { width: 100%; }
  .abertura h1 { max-width: 15ch; }
}

/* ---------- Símbolo y animado ---------- */
.y .braco-e, .y .braco-d, .y .haste, .y .nucleo { transform-box: fill-box; }
.y.monta .braco-e { animation: braco-e 900ms var(--ease) both; }
.y.monta .braco-d { animation: braco-d 900ms var(--ease) both; }
.y.monta .nucleo { animation: nucleo 500ms var(--ease) 520ms both; transform-origin: center; }
.y.monta .haste { animation: haste 700ms var(--ease) 420ms both; transform-origin: bottom; }
@keyframes braco-e { from { transform: translate(-28%, -28%); opacity: 0; } }
@keyframes braco-d { from { transform: translate(28%, -28%); opacity: 0; } }
@keyframes nucleo { from { transform: scale(0.4); opacity: 0; } }
@keyframes haste { from { transform: scaleY(0); } }

/* ---------- Opções ---------- */
.opcoes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.opcao { position: relative; display: block; }
.opcao input { position: absolute; top: 50%; left: 16px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.opcao-corpo {
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--stone); border-radius: var(--raio);
  cursor: pointer; user-select: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease);
}
.opcao:hover .opcao-corpo { border-color: var(--borda-forte); }
.opcao-corpo:active { transform: scale(0.992); }
.opcao input:focus-visible + .opcao-corpo { outline: 2px solid var(--cobalto); outline-offset: 2px; }
.opcao input:checked + .opcao-corpo {
  border-color: var(--cobalto); background: var(--cobalto-tint);
  box-shadow: inset 0 0 0 1px var(--cobalto);
}

.tecla {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--stone); background: var(--papel);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--muted);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.opcao input:checked + .opcao-corpo .tecla { background: var(--cobalto); border-color: var(--cobalto); color: var(--papel); }
.opcao-texto { flex: 1; line-height: 1.35; }
.junto { white-space: nowrap; }
.marca { flex: none; width: 20px; height: 20px; color: var(--cobalto); opacity: 0; transform: scale(0.6); transition: opacity 160ms ease, transform 260ms var(--ease); }
.opcao input:checked + .opcao-corpo .marca { opacity: 1; transform: none; }

.campo-outro { margin-top: 12px; display: none; }
.campo-outro.visivel { display: block; animation: entra 360ms var(--ease) both; }

/* ---------- Campos ---------- */
.campos { display: grid; gap: 18px; }
.campo label { display: block; font-weight: 700; font-size: 0.9375rem; margin-bottom: 6px; }
.campo label .opcional { font-weight: 400; color: var(--muted); }
.campo input {
  width: 100%; height: 52px; padding: 0 16px;
  font: inherit; font-size: 1.0625rem; color: var(--tinta);
  background: var(--surface); border: 1px solid var(--stone); border-radius: var(--raio);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.campo input::placeholder { color: #75736E; }
.campo input:hover { border-color: var(--borda-forte); }
.campo input:focus { outline: none; border-color: var(--cobalto); box-shadow: 0 0 0 3px var(--cobalto-tint); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.campo .erro, .erro-geral { color: var(--erro); font-size: 0.875rem; margin: 6px 0 0; }
.campo .erro:empty, .erro-geral:empty { display: none; }
.campo .info { color: var(--muted); font-size: 0.875rem; margin: 6px 0 0; }
.campo .info:empty { display: none; }
.campo .info.ok { color: var(--tinta); }
.campo .info.ok::before { content: "✓ "; color: var(--cobalto); font-weight: 700; }
.campo .info button { font: inherit; color: var(--cobalto); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

.campo label.consentimento { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-weight: 400; font-size: 0.9375rem; color: var(--muted); line-height: 1.45; cursor: pointer; }
.consentimento input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 1px 0 0;
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--borda-forte); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease;
}
.consentimento input::after {
  content: ''; width: 11px; height: 6px; border: solid var(--papel); border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 200ms var(--ease);
}
.consentimento input:checked { background: var(--cobalto); border-color: var(--cobalto); }
.consentimento input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.consentimento input[aria-invalid="true"] { border-color: var(--erro); }

.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Ações ---------- */
.acoes { display: flex; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  font: inherit; font-weight: 700; font-size: 1rem; letter-spacing: -0.005em;
  color: var(--papel); background: var(--cobalto);
  border: 0; border-radius: var(--raio); cursor: pointer;
  box-shadow: 0 1px 2px rgba(21, 22, 26, 0.12), 0 6px 18px -8px rgba(43, 68, 255, 0.55);
  transition: background-color 160ms ease, transform 160ms var(--ease), box-shadow 160ms ease;
}
.botao:hover { background: var(--cobalto-forte); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { background: var(--stone); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.botao[aria-busy="true"] { cursor: progress; }
.botao svg { width: 18px; height: 18px; }
.botao.grande { min-height: 58px; padding: 0 30px; font-size: 1.0625rem; }

.voltar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px;
  font: inherit; font-size: 0.9375rem; color: var(--muted); background: none; border: 0; cursor: pointer; border-radius: 8px;
}
.voltar:hover { color: var(--tinta); }
.voltar svg { width: 18px; height: 18px; }

.atalho { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.02em; }
.atalho kbd { font-family: inherit; padding: 2px 6px; border: 1px solid var(--stone); border-radius: 5px; background: var(--surface); }
@media (hover: none) { .atalho, .tecla { display: none; } }

.girando { animation: gira 800ms linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Resultado ---------- */
.resultado .y { width: 56px; height: auto; margin-bottom: 20px; }
.resultado h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 28px; }
.painel {
  background: var(--surface); border: 1px solid var(--stone); border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
}
.painel h2 { font-size: 0.9375rem; font-weight: 700; color: var(--muted); margin: 0 0 10px; letter-spacing: 0; }
.area { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; margin: 0; }
.focos { margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--stone); }
.focos ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.focos li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--tinta); }
.focos li svg { width: 20px; height: 20px; color: var(--cobalto); margin-top: 2px; }

.proximo { margin-top: 28px; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.proximo .icone { width: 44px; height: 44px; border-radius: 50%; background: var(--cobalto); color: var(--papel); display: grid; place-items: center; }
.proximo .icone svg { width: 22px; height: 22px; }
.proximo h2 { font-size: 1.125rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
.proximo p { margin: 0; color: var(--muted); }
.proximo strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.enquanto { margin-top: 28px; color: var(--muted); font-size: 0.9375rem; }

/* ---------- Rodapé ---------- */
.rodape {
  max-width: 1120px; margin: 0 auto; padding: 20px var(--gutter) 28px;
  display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--muted);
}
.rodape a { color: var(--muted); }
.rodape-legal { flex-basis: 100%; margin: 0; padding-top: 12px; border-top: 1px solid var(--stone); line-height: 1.6; }
.rodape-legal summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; margin: -10px 0 -2px; cursor: pointer; list-style: none; }
.rodape-legal summary::-webkit-details-marker { display: none; }
.rodape-legal summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.rodape-legal[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.rodape-legal p { margin: 8px 0 0; }
@media (prefers-reduced-motion: no-preference) { .rodape-legal summary::after { transition: transform 150ms var(--ease); } }

/* ---------- Política ---------- */
.documento { max-width: 720px; }
.documento h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 12px; }
.documento h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; margin: 40px 0 10px; }
.documento p, .documento li { max-width: 68ch; }
.documento ul { padding-left: 1.2em; }
.documento li { margin: 6px 0; }
.documento .atualizado { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}