/* ==========================================================================
   Diagnóstico do Desejo
   Construído sobre o Lo Re Design System. Os blocos :root abaixo são os
   tokens do sistema, copiados sem alteração. Nada de cor, fonte, espaço,
   raio ou tempo é inventado aqui: tudo sai de um token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS DO DESIGN SYSTEM
   -------------------------------------------------------------------------- */

:root {
  /* Base palette · from Lo Re "Paleta de Cores" */
  --preto-cafe: #130f0b;
  --chocolate: #281d16;
  --cacau: #4d3525;
  --mocha: #8e7257;
  --bronze-areia: #a68c6e;
  --marfim: #f3f0e3;

  /* Derived neutrals */
  --marfim-100: #faf8f1;
  --marfim-200: #f3f0e3;
  --marfim-300: #e9e4d2;
  --marfim-400: #ded7c0;
  --linha: #d5ccb4;

  /* Gold · sampled from the wax-seal mark */
  --ouro: #a8813f;
  --ouro-claro: #c6a263;
  --ouro-escuro: #7e5e28;

  /* Semantic · surfaces */
  --surface-page: var(--marfim-200);
  --surface-page-alt: var(--marfim-100);
  --surface-card: var(--marfim-100);
  --surface-raised: #ffffff;
  --surface-deep: var(--chocolate);
  --surface-deepest: var(--preto-cafe);
  --surface-subtle: var(--marfim-300);

  /* Semantic · text */
  --text-body: var(--chocolate);
  --text-strong: var(--preto-cafe);
  --text-muted: #6b4c33;
  --text-faint: #7e5e28;
  --text-inverse: var(--marfim-200);
  --text-accent: var(--ouro);

  /* Semantic · lines & accents */
  --border-hairline: var(--linha);
  --border-strong: var(--bronze-areia);
  --accent: var(--ouro);
  --accent-soft: rgba(168, 129, 63, 0.12);
  --gradient-ouro: linear-gradient(180deg, #e7cd8c 0%, #c6a263 38%, #a8813f 72%, #8a6730 100%);
  --focus-ring: rgba(168, 129, 63, 0.45);

  /* Semantic · status */
  --status-danger: #8c3a2b;

  /* Tipografia */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Pinyon Script", "Bodoni Moda", cursive;
  --font-heading: "Cormorant Garamond", "Bodoni Moda", Georgia, serif;
  --font-body: var(--font-sans);

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --size-display-l: clamp(44px, 5vw, 76px);
  --size-display-m: clamp(34px, 3.6vw, 52px);
  --size-display-s: 28px;
  --lh-display: 1.04;
  --ls-display: -0.01em;

  --size-body-l: 21px;
  --size-body-m: 19px;
  --size-body-s: 17px;
  --size-body-xs: 15px;
  --lh-body: 1.65;
  --lh-body-tight: 1.45;
  --ls-body: 0.005em;

  --size-label: 14px;
  --size-label-s: 12.5px;
  --ls-label: 0.18em;
  --ls-label-wide: 0.32em;
  --lh-label: 1.2;

  --initial-scale: 1.45;
  --initial-kern: -0.02em;
  --measure: 66ch;

  /* Espaço · base 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --gutter: var(--space-5);
  --container-narrow: 760px;
  --field-height: 48px;
  --control-height: 52px;
  --hairline: 1px;

  /* Raio · quase quadrado por padrão: editorial, não app */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-pill: 999px;

  /* Sombra · marrom-quente e quase invisível; as linhas é que separam */
  --shadow-xs: 0 1px 2px rgba(19, 15, 11, 0.05);
  --shadow-sm: 0 2px 8px rgba(19, 15, 11, 0.06);

  /* Movimento */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
  --transition-base: all var(--dur-base) var(--ease-standard);

  /* Larguras do quiz */
  --largura: 640px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* --------------------------------------------------------------------------
   BASE DO DESIGN SYSTEM
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--size-body-s);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   O PAPEL
   Duas camadas fixas, sem imagem externa: um grão de papel monocromático por
   cima de tudo (SVG de ruído gerado por filtro, opacidade baixíssima) e dois
   halos dourados difusos atrás de tudo — o mesmo dispositivo do ArtBreak,
   espalhado pela página. Nada de gradiente em elemento desenhado: é o fundo.
   -------------------------------------------------------------------------- */

body { position: relative; isolation: isolate; }

/* Halos dourados, fixos, atrás do conteúdo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 46% at 88% 6%, rgba(168, 129, 63, 0.13), rgba(168, 129, 63, 0) 72%),
    radial-gradient(ellipse 52% 40% at 6% 96%, rgba(168, 129, 63, 0.08), rgba(168, 129, 63, 0) 72%);
}

/* Grão de papel, fixo, por cima do conteúdo, sem interceptar toques */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.21  0 0 0 0 0.15  0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  margin: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

::selection { background: var(--accent-soft); color: var(--text-strong); }

/* Eyebrow · o dispositivo de assinatura da marca */
.mono {
  font-family: var(--font-sans);
  font-size: var(--size-label-s);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Capitular caligráfica dourada */
.lore-initial::first-letter {
  font-family: var(--font-script);
  font-size: calc(1em * var(--initial-scale));
  line-height: 1;
  letter-spacing: var(--initial-kern);
  padding-right: 0.02em;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   ELEMENTOS DE MARCA
   -------------------------------------------------------------------------- */

/* ArtBreak: a figura montada sobre a linha entre duas seções, com o halo
   dourado atrás — é o componente ArtBreak do design system.
   A figura fica FORA do fluxo (absoluta, centrada na linha): a caixa do
   bloco tem altura zero, e a margem dá exatamente o espaço que a metade
   da figura precisa para não encostar no texto. */
.art-break {
  position: relative;
  height: 0;
  margin: calc(var(--space-6) + 70px) 0;
  border-top: var(--hairline) solid rgba(166, 140, 110, 0.5);
}

.art-figura {
  position: absolute;
  top: 0;
  display: inline-flex;
  transform: translateY(-50%);
}

.art-break.is-direita .art-figura { right: 0; }
.art-break.is-esquerda .art-figura { left: 0; }

.art-figura::before {
  content: "";
  position: absolute;
  inset: -18% -24%;
  background: radial-gradient(closest-side, rgba(168, 129, 63, 0.22), rgba(168, 129, 63, 0) 72%);
}

.art-figura img {
  position: relative;
  display: block;
  width: auto;
  height: 140px;
}

.art-break.is-esquerda .art-figura img { transform: scaleX(-1); }

/* O carimbo de cera na ponte do laboratório */
.ponte-carimbo {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-4);
  filter: drop-shadow(0 14px 30px rgba(19, 15, 11, 0.22));
}

/* Assinatura */
.assinatura { margin: var(--space-7) 0 0; }

.assinatura-nome {
  font-family: var(--font-script);
  font-size: 60px;
  line-height: 0.9;
  color: var(--accent);
  margin-top: var(--space-3) !important;
}

/* Rodapé */
.rodape {
  margin: var(--space-9) 0 0;
  padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--border-hairline);
  text-align: center;
}

.rodape-marca {
  display: block;
  width: 52px;
  height: auto;
  margin: 0 auto var(--space-4);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   ESTRUTURA
   -------------------------------------------------------------------------- */

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

.tela { padding: var(--space-6) 0 var(--space-5); }

.progresso {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 2px;
  background: var(--surface-subtle);
}

#progresso-preenchido {
  position: relative;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-base) var(--ease-standard);
}

/* O tique na ponta da barra a cada avanço */
#progresso-preenchido::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: var(--radius-xs);
  opacity: 0;
}

#progresso-preenchido.is-pulsando::after { animation: tique 520ms var(--ease-standard); }

@keyframes tique {
  0% { opacity: 1; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   TIPOGRAFIA DO QUIZ
   -------------------------------------------------------------------------- */

.eyebrow { margin: 0 0 var(--space-3); }
.eyebrow.is-vermelho { color: var(--status-danger); }
.eyebrow.is-dourado { color: var(--ouro-escuro); }
.eyebrow.is-marrom { color: var(--cacau); }

.corpo { font-size: var(--size-body-s); margin: 0 0 1em; max-width: var(--measure); }
.corpo:last-child { margin-bottom: 0; }

.instrucao {
  font-style: italic;
  color: var(--text-muted);
  font-size: var(--size-body-xs);
  margin: 0 0 var(--space-3);
}

.subtitulo {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--size-body-l);
  line-height: var(--lh-body-tight);
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  max-width: var(--measure);
}

strong { font-weight: var(--weight-semibold); }

.rodape-nota { margin: var(--space-4) 0 0; }

/* Abertura · título em Bodoni Moda com a capitular dourada */
/* --------------------------------------------------------------------------
   A ABERTURA · uma capa de revista
   Cabeçalho em versalete, o retrato grande com o halo dourado atrás, o título
   em Bodoni num corpo em que os fios ainda aparecem, e o botão na dobra.
   -------------------------------------------------------------------------- */

.tela-abertura { padding-top: var(--space-4); }

.hero-eyebrow {
  text-align: center;
  padding-bottom: var(--space-3);
  border-bottom: var(--hairline) solid var(--border-hairline);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--ls-label-wide);
}

.hero-figura {
  position: relative;
  width: min(100%, 300px);
  margin: 0 auto var(--space-3);
}

/* O halo do sistema (o mesmo do ArtBreak), atrás do retrato */
.hero-halo {
  position: absolute;
  inset: 4% -12% -4% -12%;
  background: radial-gradient(closest-side, rgba(168, 129, 63, 0.22), rgba(168, 129, 63, 0) 72%);
}

.hero-figura img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.abertura-texto { display: flex; flex-direction: column; }

/* Título em sans (a --font-sans do sistema, peso 600): as serifadas — Bodoni
   e Cormorant — ficaram finas demais para ler sobre o papel. O par fica
   sans no título, Cormorant itálico no deck. A capitular caligráfica
   dourada (Pinyon Script) fica só no "A" inicial, a pedido. */
.titulo-abertura {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

/* No celular o botão sobe para logo depois do título (ordem visual;
   a ordem no HTML continua a do briefing). Subtítulo e parágrafo viram o
   deck, abaixo do botão, em corpo legível. */
.abertura-texto .titulo-abertura { order: 1; }
.abertura-texto .retomada { order: 2; }
.abertura-texto .hero-botao { order: 3; margin-top: 0; }
.abertura-texto .hero-nota { order: 4; }
.abertura-texto .subtitulo { order: 5; margin-top: var(--space-7); }
.abertura-texto .corpo { order: 6; }
.abertura-texto .link-discreto { order: 7; }

.tela-abertura .subtitulo {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: 20px;
  line-height: 1.4;
  color: var(--text-body);
  margin-bottom: var(--space-4);
}

.tela-abertura .corpo { font-size: var(--size-body-s); }

/* A nota sob o botão: uma linha discreta; se quebrar, quebra equilibrada */
.hero-nota {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: center;
  text-wrap: balance;
  margin: var(--space-3) 0 0;
}

/* Entrada orquestrada: cabeçalho, retrato, título, botão */
.hero-eyebrow, .hero-figura, .abertura-texto > * {
  animation: subir 640ms var(--ease-entrance) both;
}
.hero-eyebrow { animation-delay: 0ms; }
.hero-figura { animation-delay: 120ms; }
.abertura-texto .titulo-abertura { animation-delay: 260ms; }
.abertura-texto .hero-botao { animation-delay: 420ms; }
.abertura-texto .hero-nota { animation-delay: 520ms; }
.abertura-texto .subtitulo { animation-delay: 600ms; }
.abertura-texto .corpo { animation-delay: 680ms; }

@keyframes subir {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-figura, .abertura-texto > * { animation: none; }
}

.grafico-abertura { margin: 0 0 var(--space-6); }

/* Perguntas · Cormorant Garamond */
.titulo-pergunta {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: var(--size-display-s);
  line-height: 1.15;
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  margin: 0 0 var(--space-5);
}

/* --------------------------------------------------------------------------
   OPÇÕES · Card outlined do sistema, clicável
   -------------------------------------------------------------------------- */

.opcoes { display: flex; flex-direction: column; gap: var(--space-2); }

.opcao {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--size-body-s);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body-tight);
  color: var(--text-body);
  background: var(--surface-raised);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-xs);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: var(--transition-base);
}

.opcao:hover {
  border-color: var(--text-body);
  box-shadow: var(--shadow-xs);
}

.opcao:focus-visible { border-color: var(--text-body); }

.opcao.is-escolhida {
  background: var(--surface-deep);
  border-color: var(--surface-deep);
  color: var(--text-inverse);
}

/* O traço de confirmação: um "v" de hairline que se desenha */
.opcao { position: relative; padding-right: 48px; }

.opcao-marca {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 14px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform 220ms var(--ease-entrance);
}

.opcao.is-escolhida .opcao-marca { transform: translateY(-70%) rotate(-45deg) scale(1); }

/* --------------------------------------------------------------------------
   BOTÕES · Button do sistema, tamanho lg
   -------------------------------------------------------------------------- */

.btn-primario,
.btn-ouro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-6);
  margin: var(--space-5) 0 0;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

/* variant primary */
.btn-primario {
  background: var(--surface-deep);
  color: var(--text-inverse);
  border: var(--hairline) solid var(--surface-deep);
}

.btn-primario:hover {
  background: var(--surface-deepest);
  border-color: var(--surface-deepest);
}

/* variant gold · a assinatura do carimbo de cera, só nos CTAs do laboratório */
.btn-ouro {
  background: var(--gradient-ouro);
  color: var(--preto-cafe);
  border: var(--hairline) solid var(--ouro-claro);
  font-weight: var(--weight-semibold);
  box-shadow: 0 10px 30px rgba(168, 129, 63, 0.28);
}

.btn-ouro:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 38px rgba(168, 129, 63, 0.38);
}

.btn-primario:active,
.btn-ouro:active { transform: translateY(1px); }

.btn-primario[disabled] { opacity: 0.38; cursor: not-allowed; }

/* variant ghost */
.link-discreto {
  display: inline-flex;
  align-items: center;
  margin: var(--space-5) 0 0;
  padding: var(--space-2) var(--space-1);
  background: transparent;
  border: var(--hairline) solid transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--size-label-s);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard);
}

.link-discreto:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   FORMULÁRIO · Field + Input do sistema
   -------------------------------------------------------------------------- */

.form { margin: var(--space-5) 0 0; }

.campo { display: block; margin: 0 0 var(--space-4); }

.campo-rotulo { display: block; margin: 0 0 var(--space-2); }

.campo input {
  display: block;
  width: 100%;
  height: var(--field-height);
  padding: 0 var(--space-4);
  background: var(--surface-raised);
  color: var(--text-body);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: var(--size-body-m);
  font-weight: var(--weight-light);
  outline: none;
  transition: var(--transition-base);
}

.campo input:focus {
  border-color: var(--text-body);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.erro {
  color: var(--status-danger);
  font-size: var(--size-body-xs);
  margin: 0 0 var(--space-3);
}

/* --------------------------------------------------------------------------
   BLOCOS DO RESULTADO · Card outlined
   -------------------------------------------------------------------------- */

.bloco {
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-xs);
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
}

.bloco.is-chumbo { border-color: var(--border-strong); }
.bloco.is-vermelho { border-color: var(--status-danger); }
.bloco.is-marrom { border-color: var(--cacau); }
.bloco.is-dourado { border-color: var(--ouro); }

.bloco.is-ponte {
  position: relative;
  border-color: var(--cacau);
  background: var(--surface-page-alt);
  margin-top: var(--space-7);
  text-align: center;
}

.bloco.is-ponte .corpo { text-align: left; }
.bloco.is-ponte .btn-ouro { margin-inline: auto; }

/* A descoberta é a abertura do resultado: sem caixa, título de capa */
.descoberta {
  padding: var(--space-3) 0 var(--space-6);
  margin: 0 0 var(--space-6);
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.titulo-descoberta {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: clamp(30px, 4.2vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  margin: 0 0 var(--space-5);
}

.descoberta .corpo { font-size: var(--size-body-m); }

.titulo-bloco {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 26px;
  line-height: 1.15;
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}

.linha-extra {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--size-body-l);
  line-height: var(--lh-body-tight);
  color: var(--cacau);
  margin: var(--space-4) 0 0;
}

.confianca { margin: var(--space-4) 0 0; }

.linha-data {
  color: var(--cacau);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--ls-label);
}

/* --------------------------------------------------------------------------
   GRÁFICO
   -------------------------------------------------------------------------- */

.grafico-wrap { margin: 0 0 var(--space-5); }

/* No resultado, as figuras ganham uma faixa própria, de borda a borda */
.tela-resultado .grafico-wrap .g-territorio { fill: var(--surface-raised); }
.tela-resultado .grafico-wrap .g-territorio.is-ativo { fill: var(--accent-soft); }
.tela-resultado .grafico-wrap .g-nucleo { stroke: var(--surface-raised); }

.tela-resultado .grafico-wrap {
  background: var(--surface-page-alt);
  border-top: var(--hairline) solid var(--border-hairline);
  border-bottom: var(--hairline) solid var(--border-hairline);
  margin: var(--space-7) calc(50% - 50vw) var(--space-7);
  padding: var(--space-7) max(var(--gutter), calc(50vw - 560px));
}

/* A faixa é a primeira coisa do resultado: cola no topo, sem margem acima,
   para o gráfico caber na primeira tela sem rolar. */
.tela-resultado { padding-top: 0; }
.tela-resultado .grafico-wrap:first-child { margin-top: 0; border-top: 0; padding-top: var(--space-6); }

.grafico {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
}

/* Os quatro territórios. O vão de 2px entre eles é a linha de corte em 5:
   o fundo separando, em vez de um tracejado desenhado por cima. */
.g-territorio { fill: var(--surface-page-alt); }
.g-territorio.is-ativo { fill: var(--accent-soft); }

.g-eixo { stroke: var(--border-strong); stroke-width: 1; }

/* Linhas-guia do ponto até os dois eixos */
.g-projecao line {
  stroke: var(--ouro);
  stroke-width: 1;
  opacity: 0.45;
}

.g-marca { stroke: var(--ouro-escuro); stroke-width: 2; }

.g-tick {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  fill: var(--text-muted);
  opacity: 0.7;
}

.g-valor {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  fill: var(--ouro-escuro);
}

.g-rotulo {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  fill: var(--text-muted);
}

.g-quad {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 15px;
  fill: var(--text-muted);
}

.g-quad.is-ativo {
  fill: var(--text-strong);
  font-weight: var(--weight-semibold);
  font-size: 17px;
}

.grafico.is-vazio .g-quad { opacity: 0.55; }

.g-ponto {
  transform: translate(var(--cx), var(--cy));
  transition: transform var(--dur-slow) var(--ease-entrance);
}

.g-ponto.is-posicionado { transform: translate(var(--gx), var(--gy)); }

.g-halo {
  fill: var(--ouro);
  opacity: 0.18;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulso 2.4s ease-in-out infinite;
}

/* Anel de 2px na cor da superfície: o ponto continua legível onde cruza as
   linhas-guia e a borda do território. */
.g-nucleo {
  fill: var(--ouro);
  stroke: var(--surface-page-alt);
  stroke-width: 2.5;
}

.g-voce {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-label);
  fill: var(--text-strong);
}

@keyframes pulso {
  0%, 100% { transform: scale(1); opacity: 0.18; }
  50% { transform: scale(1.22); opacity: 0.06; }
}

.legenda-grafico { text-align: center; margin: var(--space-3) 0 0; }

/* --------------------------------------------------------------------------
   OS QUATRO CAPITAIS
   Uma prancha gravada: fio de cabelo, papel e tipografia. Sem gradiente,
   sem sombra, sem verniz — qualquer volume aqui inventa tons que não
   existem na paleta.
   -------------------------------------------------------------------------- */

.capitais-fig { margin: var(--space-7) 0 0; }

.capitais-svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
}

/* O trilho: onde ficaria a nota 10 */
.c-trilho { fill: var(--marfim-300); }

/* A coluna: ouro chapado, subindo do chão */
.c-coluna {
  fill: var(--ouro);
  y: 266px;
  height: 0;
  transition:
    height 700ms var(--ease-entrance),
    y 700ms var(--ease-entrance);
  transition-delay: calc(var(--i) * 130ms);
}

.capitais-svg.is-montado .c-coluna {
  height: var(--h);
  y: calc(266px - var(--h));
}

.c-chao { stroke: var(--cacau); stroke-width: 1.5; }

/* As réguas de 4 e 8 atravessam as quatro colunas */
.c-regua {
  stroke: var(--bronze-areia);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.c-escala {
  font-family: var(--font-sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: var(--text-muted);
}

/* As chaves que agrupam cultural+social e econômico+simbólico */
.c-chave {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
}

.c-grupo {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  fill: var(--cacau);
}

.c-nota,
.c-nome {
  opacity: 0;
  transition: opacity 400ms ease-out;
  transition-delay: calc(140ms + var(--i) * 130ms);
}

.capitais-svg.is-montado .c-nota,
.capitais-svg.is-montado .c-nome { opacity: 1; }

/* Os quatro números na sans, como o valor nos eixos do quadrante e a linha de
   coordenadas da manchete: linha de base reta e a vírgula inconfundível. No
   Bodoni a cauda da vírgula é um fio de cabelo e some no celular — "2,5" lia
   como "2.5". */
.c-nota {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  fill: var(--text-strong);
}

/* A média do par: o filete que vira a coordenada do ponto no quadrante */
.c-media-linha { stroke: var(--ouro-escuro); stroke-width: 1.5; }

/* O valor da média na chave do par, em ouro escuro */
.c-grupo-media { fill: var(--ouro-escuro); font-variant-numeric: tabular-nums; }

/* A manchete da faixa das figuras */
.figuras-cabeca { text-align: center; margin: 0 0 var(--space-6); }

.figuras-cabeca .eyebrow { margin-bottom: var(--space-2); }

.figuras-titulo {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-style: italic;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}

.figuras-coord {
  color: var(--ouro-escuro);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* Espaçamento menor que o do eyebrow: com --ls-label os nomes longos
   ("ECONÔMICO", "SIMBÓLICO") encostam um no outro. */
.c-nome {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .c-coluna { height: var(--h); y: calc(266px - var(--h)); transition: none; }
  .c-nota, .c-nome { opacity: 1; transition: none; }
}

/* --------------------------------------------------------------------------
   LISTA DOS QUATRO CAPITAIS
   -------------------------------------------------------------------------- */

.capitais {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  border-top: var(--hairline) solid var(--border-hairline);
}

.capital {
  padding: var(--space-4) 0;
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.capital-nome { display: block; color: var(--cacau); margin: 0 0 var(--space-1); }

.capital-def {
  display: block;
  color: var(--text-muted);
  font-size: var(--size-body-xs);
  line-height: var(--lh-body-tight);
  margin: 0 0 var(--space-1);
}

.capital-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-body-xs);
  font-weight: var(--weight-semibold);
}

/* Ouro escuro no texto: o --ouro puro não alcança AA em corpo pequeno. */
.capital-status.is-visivel { color: var(--ouro-escuro); }
.capital-status.is-naopublico { color: var(--cacau); }
.capital-status.is-ausente { color: var(--status-danger); }

/* A forma é o canal principal do status; a cor só reforça. */
.glifo { width: 14px; height: 14px; flex: none; }
.glifo.is-visivel { fill: var(--ouro-escuro); }
.glifo.is-naopublico { fill: var(--cacau); stroke: var(--cacau); }
.glifo.is-ausente { fill: none; stroke: var(--status-danger); }

.capital-lastro {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  margin: var(--space-1) 0 0;
}

/* --------------------------------------------------------------------------
   A CARTA
   -------------------------------------------------------------------------- */

.carta { margin: var(--space-7) 0; }

.carta p {
  font-size: var(--size-body-m);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0 0 1em;
  max-width: var(--measure);
}

.carta p:last-child { margin-bottom: 0; }

.carta .destaque {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--size-body-l);
  line-height: var(--lh-body-tight);
  color: var(--text-strong);
  border-left: var(--hairline) solid var(--accent);
  padding-left: var(--space-4);
  margin: 1.2em 0;
}

.carta-linha {
  font-size: var(--size-body-m);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-5);
  max-width: var(--measure);
}

.assinatura p { margin-bottom: 0.2em; }

/* --------------------------------------------------------------------------
   PROVA
   -------------------------------------------------------------------------- */

.prova-bloco { margin: var(--space-7) 0; }

.provas { display: flex; flex-direction: column; gap: var(--space-5); margin: 0 0 var(--space-5); }

.provas:empty { display: none; margin: 0; }

.prova { margin: 0; }
.prova[hidden] { display: none; }

.prova img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}

.prova figcaption { margin: var(--space-2) 0 0; }

/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */

.rodape-pagina {
  text-align: center;
  margin: 0;
  letter-spacing: var(--ls-label-wide);
}

/* --------------------------------------------------------------------------
   DESKTOP
   -------------------------------------------------------------------------- */

@media (min-width: 680px) {
  .tela { padding: var(--space-7) 0 var(--space-6); }
  .art-figura img { height: 200px; }
  .art-break { margin: calc(var(--space-6) + 100px) 0; }
  .ponte-carimbo { width: 120px; height: 120px; }
  .btn-primario, .btn-ouro { width: auto; min-width: 340px; padding: var(--space-3) var(--space-7); }
  .bloco { padding: var(--space-6); }
  body { font-size: var(--size-body-m); }
  .corpo { font-size: var(--size-body-m); }
}

@media (prefers-reduced-motion: reduce) {
  .g-anel { animation: none; }
  .g-ponto { transform: translate(var(--gx), var(--gy)); }
}

/* --------------------------------------------------------------------------
   MOVIMENTO
   A tinta aparecendo no papel. Nada aqui muda cor, volume ou forma — só
   quando cada coisa entra.
   -------------------------------------------------------------------------- */

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

/* Perguntas deslizam em vez de cortar */
.tela-pergunta.is-entrando-frente { animation: entrarFrente 320ms var(--ease-entrance) both; }
.tela-pergunta.is-entrando-tras { animation: entrarTras 320ms var(--ease-entrance) both; }
.tela-pergunta.is-saindo { animation: sair 220ms ease-in forwards; }

@keyframes entrarFrente {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes entrarTras {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

@keyframes sair {
  to { opacity: 0; transform: translateX(-24px); }
}

/* Revelação no scroll: qualquer .rv sobe e aparece quando entra na tela */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 560ms var(--ease-entrance),
    transform 560ms var(--ease-entrance);
  transition-delay: var(--d, 0ms);
}

.rv.is-visivel { opacity: 1; transform: none; }

/* O título da descoberta, datilografado */
.titulo-descoberta .tw { white-space: pre-wrap; }

/* O gráfico se desenha. Só no resultado: o da abertura já nasce pronto. */
.grafico:not(.is-vazio) .g-territorio {
  opacity: 0;
  transition: opacity 500ms ease;
}
.grafico:not(.is-vazio) .g-territorio:nth-of-type(2) { transition-delay: 80ms; }
.grafico:not(.is-vazio) .g-territorio:nth-of-type(3) { transition-delay: 160ms; }
.grafico:not(.is-vazio) .g-territorio:nth-of-type(4) { transition-delay: 240ms; }
.grafico.is-vivo .g-territorio { opacity: 1; }

.grafico:not(.is-vazio) .g-eixo {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 800ms var(--ease-standard) 200ms;
}
.grafico.is-vivo .g-eixo { stroke-dashoffset: 0; }

.grafico:not(.is-vazio) .g-projecao line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 600ms var(--ease-standard) 1000ms;
}
.grafico.is-vivo .g-projecao line { stroke-dashoffset: 0; }

.grafico:not(.is-vazio) .g-tick,
.grafico:not(.is-vazio) .g-rotulo,
.grafico:not(.is-vazio) .g-quad,
.grafico:not(.is-vazio) .g-valor,
.grafico:not(.is-vazio) .g-marca {
  opacity: 0;
  transition: opacity 450ms ease 600ms;
}
.grafico:not(.is-vazio) .g-valor,
.grafico:not(.is-vazio) .g-marca { transition-delay: 1300ms; }
.grafico.is-vivo .g-tick,
.grafico.is-vivo .g-rotulo,
.grafico.is-vivo .g-quad,
.grafico.is-vivo .g-valor,
.grafico.is-vivo .g-marca { opacity: 1; }

/* O ponto chega e assenta */
.g-ponto.is-posicionado .g-nucleo {
  transform-box: fill-box;
  transform-origin: center;
  animation: pousar 520ms var(--ease-entrance) 380ms both;
}

@keyframes pousar {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* O destaque da carta desenha o filete dourado */
.carta .destaque {
  position: relative;
  border-left: 0;
}

.carta .destaque::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--hairline);
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 700ms var(--ease-entrance) 250ms;
}

.carta .destaque.is-visivel::before { transform: scaleY(1); }

/* O carimbo de cera carimba */
.ponte-carimbo {
  opacity: 0;
  transform: scale(1.35) rotate(-5deg);
}

.ponte-carimbo.is-carimbado { animation: carimbar 560ms var(--ease-entrance) forwards; }

@keyframes carimbar {
  0% { opacity: 0; transform: scale(1.35) rotate(-5deg); }
  70% { opacity: 1; transform: scale(0.96) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --------------------------------------------------------------------------
   A TELA DE ANÁLISE
   Quatro cenas em tela cheia, uma de cada vez, com as figuras do resultado
   em tamanho real. Um fio dourado corre no topo durante a análise inteira.
   -------------------------------------------------------------------------- */

.tela-analise {
  position: relative;
  min-height: calc(100vh - 2px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) 0;
  transition: opacity 360ms ease;
}

.tela-analise.is-saindo { opacity: 0; }

.tela-analise .eyebrow { text-align: center; margin-bottom: var(--space-6); }

.analise-cabeca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

/* Um anel de hairline com um quarto dourado, girando: o sinal de que
   algo está sendo feito. Chapado, sem brilho. */
.analise-anel {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: var(--hairline) solid var(--border-hairline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: girar 1.1s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.analise-pct {
  min-width: 3.2em;
  text-align: left;
  color: var(--ouro-escuro);
  font-variant-numeric: tabular-nums;
}

/* O fio que corre no topo pela duração inteira da análise */
.analise-trilho {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--surface-subtle);
}

.analise-trilho i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 6000ms linear; /* a duração real é cravada por JS */
}

.analise-trilho i.is-correndo { width: 100%; }

/* As cenas ocupam o mesmo lugar; só a ativa aparece */
.cenas { display: grid; }

.cena {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 420ms var(--ease-entrance),
    transform 420ms var(--ease-entrance);
  pointer-events: none;
}

.cena.is-ativa { opacity: 1; transform: none; }

.cena-titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(30px, 4.2vw, 42px);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  text-align: center;
  margin: 0 0 var(--space-6);
}

.cena-figura { max-width: 520px; margin: 0 auto; }
.cena-figura .capitais-fig { margin: 0; }
.cena-figura .capitais-svg { max-width: 460px; }

/* Cena 1 · as 14 respostas, lidas uma a uma */
.leitura {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 400px;
  margin: 0 auto;
}

.leitura i {
  display: block;
  width: 20px;
  height: 20px;
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
  transition-delay: calc(var(--i) * 55ms);
}

.leitura.is-lendo i { background: var(--ouro); border-color: var(--ouro); }

/* Cena 4 · as linhas da carta sendo escritas */
.escrita { max-width: 420px; margin: 0 auto; }

.escrita i {
  display: block;
  height: var(--hairline);
  width: var(--w);
  margin: 18px 0;
  background: var(--cacau);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--ease-entrance);
  transition-delay: calc(var(--i) * 150ms);
}

.escrita i:last-child { background: var(--accent); }

.escrita.is-escrevendo i { transform: scaleX(1); }

/* Movimento reduzido: tudo já nasce no lugar */
@media (prefers-reduced-motion: reduce) {
  .tela-pergunta.is-entrando-frente,
  .tela-pergunta.is-entrando-tras,
  .tela-pergunta.is-saindo { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .grafico:not(.is-vazio) .g-territorio, .grafico:not(.is-vazio) .g-tick,
  .grafico:not(.is-vazio) .g-rotulo, .grafico:not(.is-vazio) .g-quad,
  .grafico:not(.is-vazio) .g-valor, .grafico:not(.is-vazio) .g-marca { opacity: 1; transition: none; }
  .grafico:not(.is-vazio) .g-eixo, .grafico:not(.is-vazio) .g-projecao line { stroke-dashoffset: 0; transition: none; }
  .g-ponto.is-posicionado .g-nucleo { animation: none; }
  .carta .destaque::before { transform: scaleY(1); transition: none; }
  .ponte-carimbo { opacity: 1; transform: none; animation: none; }
  #progresso-preenchido.is-pulsando::after { animation: none; }
  .opcao-marca { transition: none; }
  .cena, .analise-trilho i, .leitura i, .escrita i { transition: none; }
  .analise-anel { animation: none; }
  .leitura i { background: var(--ouro); border-color: var(--ouro); }
  .escrita i { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   DESKTOP · a partir de 960px
   No celular a página é uma coluna. Aqui ela vira uma revista: abertura em
   duas colunas, perguntas centradas na tela, figuras do resultado lado a
   lado e o texto na medida de leitura (--container-narrow do sistema).
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
  .container { max-width: 1120px; }

  /* Abertura: capa de tela cheia. Cabeçalho atravessa o topo; texto à
     esquerda, centrado na altura; o retrato à direita, ancorado no rodapé da
     dobra e passando um pouco da borda da coluna. */
  .tela-abertura {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "cabeca cabeca" "texto figura";
    column-gap: var(--space-7);
    align-items: center;
    min-height: calc(100vh - 2px);
    padding: var(--space-5) 0 0;
  }

  .tela-abertura .hero-eyebrow {
    grid-area: cabeca;
    text-align: left;
    margin-bottom: var(--space-6);
  }

  .tela-abertura .abertura-texto {
    grid-area: texto;
    max-width: 620px;
    padding-bottom: var(--space-8);
  }

  .tela-abertura .hero-figura {
    grid-area: figura;
    align-self: end;
    justify-self: end;
    width: 620px;
    max-width: none;
    margin: 0 -80px 0 0;
  }

  /* No desktop cabe tudo: a ordem visual volta a ser a do briefing */
  .abertura-texto .titulo-abertura { order: 1; }
  .abertura-texto .subtitulo { order: 2; margin-top: 0; }
  .abertura-texto .corpo { order: 3; }
  .abertura-texto .retomada { order: 4; }
  .abertura-texto .hero-botao { order: 5; margin-top: var(--space-5); }
  .abertura-texto .hero-nota { order: 6; text-align: left; margin-left: var(--space-2); }
  .abertura-texto .link-discreto { order: 7; }

  .titulo-abertura { font-size: clamp(38px, 3.3vw, 48px); line-height: 1.06; }
  .tela-abertura .subtitulo { font-size: 22px; }
  .tela-abertura .corpo { font-size: var(--size-body-m); }
  .tela-abertura .hero-botao { width: auto; min-width: 360px; }

  /* Perguntas e identificação: uma coluna de leitura no centro da tela */
  .tela-pergunta,
  .tela-identificacao,
  .tela-analise {
    max-width: 720px;
    margin: 0 auto;
    min-height: calc(100vh - 2px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8) 0;
  }

  .titulo-pergunta { font-size: 34px; }

  /* Resultado: texto na medida de leitura, figuras mais largas */
  .tela-resultado > .descoberta,
  .tela-resultado > .bloco,
  .tela-resultado > .carta,
  .tela-resultado > .capitais,
  .tela-resultado > .prova-bloco,
  .tela-resultado > .assinatura,
  .tela-resultado > .art-break,
  .tela-resultado > .rodape,
  .tela-resultado > .btn-ouro {
    max-width: var(--container-narrow);
    margin-inline: auto;
  }

  .tela-resultado > .btn-ouro { display: flex; }

  /* As duas figuras lado a lado, com a legenda embaixo das duas */
  .tela-resultado .grafico-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "h h" "a b" "c c";
    column-gap: var(--space-8);
    align-items: center;
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }

  .tela-resultado .grafico-wrap > .figuras-cabeca { grid-area: h; margin-bottom: var(--space-7); }
  .tela-resultado .grafico-wrap > .grafico { grid-area: a; max-width: 480px; }
  .tela-resultado .grafico-wrap > .capitais-fig { grid-area: b; margin: 0; }
  .tela-resultado .grafico-wrap > .legenda-grafico { grid-area: c; margin-top: var(--space-5); }
  .capitais-svg { max-width: 520px; }
}