/* O Código Interno — Rafa Medeiros.
   Dark premium: preto profundo, ciano contido, escala de temperatura sóbria.
   Diverge do DS onde precisa: tons de temperatura dessaturados, radius menor. */

:root {
  --background: oklch(0.12 0.012 240);
  --foreground: oklch(0.96 0.005 240);
  --brand: oklch(0.68 0.11 220);
  --brand-strong: oklch(0.55 0.10 222);
  --brand-foreground: oklch(0.12 0.012 240);
  --surface: oklch(0.155 0.014 240);
  --surface-2: oklch(0.19 0.016 240);
  --line: oklch(0.26 0.018 240);
  --muted-foreground: oklch(0.72 0.015 240);
  --destructive: oklch(0.6 0.18 25);

  /* Escala de temperatura, registro sóbrio (1 Nunca → 5 Sempre) */
  --temp-1: oklch(0.50 0.14 25);
  --temp-2: oklch(0.56 0.11 55);
  --temp-3: oklch(0.62 0.10 90);
  --temp-4: oklch(0.56 0.09 170);
  --temp-5: oklch(0.55 0.10 222);
  /* tons claros p/ número não-selecionado */
  --temp-1-ink: oklch(0.68 0.13 25);
  --temp-2-ink: oklch(0.72 0.11 55);
  --temp-3-ink: oklch(0.76 0.10 90);
  --temp-4-ink: oklch(0.72 0.09 170);
  --temp-5-ink: oklch(0.72 0.10 222);

  --radius: 0.625rem;          /* 10px — mais sóbrio que o DS */
  --radius-lg: 1rem;
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 84px;
}

* { box-sizing: border-box; border-color: var(--line); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -200px, oklch(0.17 0.02 230 / 0.55), transparent 70%),
    var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- Header ---- */
.topo {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid oklch(0.2 0.015 240);
  background: oklch(0.10 0.01 240 / 0.85);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.logo { height: 42px; width: auto; display: block; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

h1 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.lead { color: var(--muted-foreground); font-size: clamp(1rem, 1.5vw, 1.125rem); margin: 0 0 1.5rem; max-width: 58ch; }
.hint { color: oklch(0.6 0.015 240); font-size: 0.875rem; max-width: 52ch; }

/* ---- Intro: centrada vertical no desktop ---- */
#tela-intro {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}
#tela-intro[hidden] { display: none; }
.intro-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  padding: 1.5rem 0;
}

/* Legenda: barra de temperatura contínua */
.escala-legenda { max-width: 460px; margin-bottom: 1.75rem; }
.leg-bar {
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--temp-1-ink), var(--temp-2-ink), var(--temp-3-ink), var(--temp-4-ink), var(--temp-5-ink));
}
.leg-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.625rem;
  font-size: 0.78125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}
.leg-labels span { display: inline-flex; align-items: center; gap: 0.375rem; }
.dot { width: 7px; height: 7px; border-radius: 9999px; display: inline-block; }
.dot.d1 { background: var(--temp-1-ink); }
.dot.d2 { background: var(--temp-2-ink); }
.dot.d3 { background: var(--temp-3-ink); }
.dot.d4 { background: var(--temp-4-ink); }
.dot.d5 { background: var(--temp-5-ink); }

/* Badges */
.badges { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.badge {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  background: oklch(0.68 0.11 220 / 0.08);
  border: 1px solid oklch(0.68 0.11 220 / 0.25);
  border-radius: 9999px;
  padding: 0.3125rem 0.875rem;
}

/* Aviso (instrução importante da referência) */
.aviso {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1.75rem;
  max-width: 58ch;
}
.aviso p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--muted-foreground); }
.aviso strong { color: var(--foreground); font-weight: 600; }

.escala-intro { font-size: 0.9375rem; color: var(--muted-foreground); margin: 0 0 0.875rem; }

/* ---- Form ---- */
.intro-form {
  background: oklch(0.15 0.014 240 / 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 24px 64px oklch(0 0 0 / 0.45);
}

form label { display: block; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--muted-foreground); margin: 1.25rem 0 0.45rem; }
form label:first-child { margin-top: 0; }
input[type="text"], input[type="tel"], input[type="email"] {
  width: 100%;
  background: oklch(0.115 0.012 240);
  color: var(--foreground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  font: inherit;
  transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
input::placeholder { color: oklch(0.52 0.012 240); }
input:hover { border-color: oklch(0.34 0.02 240); }
input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px oklch(0.68 0.11 220 / 0.18); }

.consent { display: flex !important; gap: 0.625rem; align-items: flex-start; margin-top: 1.5rem !important; color: var(--muted-foreground); font-size: 0.8125rem !important; font-weight: 400 !important; cursor: pointer; line-height: 1.45; }
.consent input { margin-top: 0.2rem; accent-color: var(--brand); }

/* ---- Botões ---- */
.btn-primario, .btn-secundario {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  padding: 0.9375rem 1.75rem;
  cursor: pointer;
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), transform 0.12s var(--ease-out);
}
.btn-primario {
  background: var(--brand-strong);
  color: oklch(0.97 0.005 240);
  border: 1px solid oklch(0.62 0.11 220 / 0.5);
  width: 100%;
  margin-top: 1.75rem;
}
.btn-primario:hover { background: oklch(0.60 0.11 222); }
.btn-primario:active { transform: scale(0.99); }
.btn-secundario {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--line);
}
.btn-secundario:hover { background: var(--surface-2); border-color: oklch(0.34 0.02 240); }

.nav-botoes { display: flex; gap: 0.75rem; margin-top: 2.25rem; max-width: 460px; margin-left: auto; margin-right: auto; padding-bottom: 5rem; }
.nav-botoes .btn-primario { width: auto; flex: 1; margin-top: 0; }

/* ---- Progresso ---- */
.progresso-wrap {
  position: sticky;
  top: var(--header-h);
  background: linear-gradient(oklch(0.12 0.012 240) 70%, transparent);
  padding: 1.25rem 0 1rem;
  z-index: 10;
}
.progresso-info { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); margin-bottom: 0.5625rem; }
#progresso-pct { color: var(--brand); font-variant-numeric: tabular-nums; }
.progresso-barra { height: 4px; background: var(--surface-2); border-radius: 9999px; overflow: hidden; }
#progresso-fill {
  height: 100%;
  width: 0;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--temp-1-ink), var(--temp-3-ink), var(--temp-5-ink));
  transition: width 0.45s var(--ease-out);
}

/* ---- Perguntas ---- */
#perguntas-container.entrando .pergunta-card { animation: subir 0.45s var(--ease-out) backwards; }
@keyframes subir {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.pergunta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 1rem 2.5rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 0.625rem;
  transition: border-color 0.2s var(--ease-out);
}
.pergunta-card.pendente { border-color: oklch(0.6 0.18 25 / 0.6); }
.pergunta-card h3 { font-size: 0.96875rem; font-weight: 450; line-height: 1.55; margin: 0; color: oklch(0.88 0.008 240); text-wrap: pretty; }

/* ---- Escala: controle segmentado contínuo ---- */
.opcoes {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: oklch(0.13 0.012 240);
}
.opcao {
  --fill: var(--temp-3);
  --ink: var(--temp-3-ink);
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.6875rem 0.25rem 0.5625rem;
  cursor: pointer;
  transition: background 0.16s var(--ease-out);
}
.opcao + .opcao { border-left: 1px solid var(--line); }
.opcao.op-1 { --fill: var(--temp-1); --ink: var(--temp-1-ink); }
.opcao.op-2 { --fill: var(--temp-2); --ink: var(--temp-2-ink); }
.opcao.op-3 { --fill: var(--temp-3); --ink: var(--temp-3-ink); }
.opcao.op-4 { --fill: var(--temp-4); --ink: var(--temp-4-ink); }
.opcao.op-5 { --fill: var(--temp-5); --ink: var(--temp-5-ink); }

.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao-num { font-weight: 600; font-size: 0.9375rem; color: var(--ink); transition: color 0.16s var(--ease-out); }
.opcao-label { font-size: 0.65625rem; font-weight: 500; letter-spacing: 0.02em; color: oklch(0.58 0.012 240); transition: color 0.16s var(--ease-out); }

.opcao:hover { background: color-mix(in oklch, var(--fill) 16%, transparent); }
.opcao:hover .opcao-label { color: var(--muted-foreground); }

.opcao:has(input:checked) {
  background: var(--fill);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 55%, transparent);
}
.opcao:has(input:checked) .opcao-num { color: oklch(0.98 0.005 240); }
.opcao:has(input:checked) .opcao-label { color: oklch(0.98 0.005 240 / 0.85); }

.opcao:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ---- Erros ---- */
.erro { color: var(--destructive); font-size: 0.875rem; font-weight: 500; margin-top: 1rem; text-align: center; }

/* ---- Resultado ---- */
#tela-resultado { padding: clamp(2rem, 5vw, 4rem) 0 5rem; animation: subir 0.55s var(--ease-out); }

.res-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.res-kicker {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.75rem;
}
#res-codigo {
  font-size: clamp(4rem, 10vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}
#res-nome {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 500;
  color: var(--muted-foreground);
  margin: 0.375rem 0 1.5rem;
}
.res-top3 { display: flex; justify-content: center; gap: 0.625rem; flex-wrap: wrap; }
.top3-item {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 0.4375rem 1rem;
}
.top3-item b { color: var(--foreground); font-weight: 600; margin-right: 0.25rem; }
.top3-item.top3-dominante {
  color: var(--foreground);
  border-color: oklch(0.68 0.11 220 / 0.45);
  background: oklch(0.68 0.11 220 / 0.08);
}

.res-grid {
  display: grid;
  grid-template-columns: minmax(300px, 480px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.res-figura { margin: 0; }
.res-figura img { width: 100%; height: auto; display: block; }
.res-chart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.res-chart h2 { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; color: var(--muted-foreground); }
.chart-wrap { position: relative; height: 320px; }
.res-redirect { text-align: center; margin-top: 2rem; }


/* ---- Mobile ---- */
@media (max-width: 880px) {
  #tela-intro { min-height: 0; }
  .intro-grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 0; }
  .pergunta-card { grid-template-columns: 1fr; gap: 0.875rem; padding: 1.125rem 1.125rem 1rem; }
  h1 { white-space: normal; }
  .res-grid { grid-template-columns: 1fr; }
  .res-figura { max-width: 340px; margin: 0 auto; }
  .logo { height: 32px; }
}
@media (max-width: 420px) {
  .opcao-label { display: none; }
  .opcao { padding: 0.75rem 0.25rem; }
  .logo { height: 24px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}