/* ==========================================================================
   Mapa do Visto — folha de estilo única
   Paleta: Direção 1 "Carimbo" (mkt/identidade-visual/briefing.md §3)
   Tipografia: Sora (títulos) + Inter (texto), Google Fonts, suporte a pt-BR
   Mobile-first · dark mode via prefers-color-scheme · sem frameworks
   ========================================================================== */

:root {
  --cor-primaria: #0F2A44;
  --cor-primaria-escura: #0B1C2E;
  --cor-acao: #2563EB;
  --cor-acao-hover: #1D4ED8;
  --cor-acao-texto: #FFFFFF;
  --cor-compativel: #15803D;
  --cor-compativel-fundo: #DCFCE7;
  --cor-aviso: #D97706;
  --cor-aviso-fundo: #FEF3C7;
  --cor-incompativel: #B91C1C;
  --cor-incompativel-fundo: #FEE2E2;
  --cor-info: #1D4ED8;
  --cor-info-fundo: #DBEAFE;
  --cor-fundo: #F5F7FA;
  --cor-superficie: #FFFFFF;
  --cor-superficie-alt: #EEF2F7;
  --cor-texto: #1F2937;
  --cor-texto-suave: #4B5563;
  --cor-texto-invertido: #FFFFFF;
  --cor-texto-invertido-suave: #CBD5E1;
  --cor-linha: #CBD5E1;
  --cor-linha-suave: #E2E8F0;
  --cor-estrela: #F2B705;
  --cor-foco: #F2B705;

  --fonte-titulo: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raio: 12px;
  --raio-grande: 20px;
  --sombra: 0 1px 2px rgba(15, 42, 68, 0.06), 0 8px 24px rgba(15, 42, 68, 0.08);
  --largura-max: 1100px;
  --largura-texto: 720px;
  --gutter: max(16px, 4vw);
  --alvo-minimo: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-primaria: #0F2A44;
    --cor-primaria-escura: #081524;
    --cor-acao: #60A5FA;
    --cor-acao-hover: #93C5FD;
    --cor-acao-texto: #0B1C2E;
    --cor-compativel: #4ADE80;
    --cor-compativel-fundo: rgba(74, 222, 128, 0.14);
    --cor-aviso: #FBBF24;
    --cor-aviso-fundo: rgba(251, 191, 36, 0.14);
    --cor-incompativel: #F87171;
    --cor-incompativel-fundo: rgba(248, 113, 113, 0.14);
    --cor-info: #93C5FD;
    --cor-info-fundo: rgba(147, 197, 253, 0.14);
    --cor-fundo: #0B1C2E;
    --cor-superficie: #132B45;
    --cor-superficie-alt: #0F2439;
    --cor-texto: #E6EDF5;
    --cor-texto-suave: #B6C2D1;
    --cor-linha: #2A4664;
    --cor-linha-suave: #1E3652;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

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

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

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

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: inherit;
}

h1 {
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--cor-acao);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--cor-acao-hover);
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

small,
.pequeno {
  font-size: 0.875rem;
  line-height: 1.5;
}

.suave {
  color: var(--cor-texto-suave);
}

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

.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;
}

.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.pular-conteudo:focus {
  left: 8px;
}

[hidden] {
  display: none !important;
}

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

.container--texto {
  max-width: var(--largura-texto);
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: 600 1rem/1.2 var(--fonte-texto);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  -webkit-tap-highlight-color: transparent;
}

.botao:active {
  transform: translateY(1px);
}

.botao:disabled,
.botao[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.botao--primario {
  background: var(--cor-acao);
  color: var(--cor-acao-texto);
  border-color: var(--cor-acao);
}

.botao--primario:hover {
  background: var(--cor-acao-hover);
  border-color: var(--cor-acao-hover);
  color: var(--cor-acao-texto);
}

.botao--secundario {
  background: transparent;
  color: var(--cor-acao);
  border-color: var(--cor-acao);
}

.botao--secundario:hover {
  background: var(--cor-acao);
  color: var(--cor-acao-texto);
}

.botao--claro {
  background: var(--cor-texto-invertido);
  color: var(--cor-primaria);
  border-color: var(--cor-texto-invertido);
}

.botao--claro:hover {
  background: #e6edf5;
  border-color: #e6edf5;
  color: var(--cor-primaria);
}

.botao--contorno-claro {
  background: transparent;
  color: var(--cor-texto-invertido);
  border-color: rgba(255, 255, 255, 0.6);
}

.botao--contorno-claro:hover {
  border-color: var(--cor-texto-invertido);
  background: rgba(255, 255, 255, 0.08);
  color: var(--cor-texto-invertido);
}

.botao--grande {
  min-height: 56px;
  padding: 14px 28px;
  font-size: 1.05rem;
}

.botao--bloco {
  width: 100%;
}

.botao--texto {
  background: transparent;
  border-color: transparent;
  color: var(--cor-acao);
  padding-inline: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Cabeçalho e marca
   -------------------------------------------------------------------------- */
.cabecalho {
  background: var(--cor-primaria);
  color: var(--cor-texto-invertido);
}

.cabecalho__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-block: 10px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  min-height: var(--alvo-minimo);
}

.marca__simbolo {
  width: 36px;
  height: 36px;
  flex: none;
}

.marca__do {
  font-weight: 400;
}

.nav {
  display: none;
  gap: 4px;
  align-items: center;
}

.nav a {
  color: var(--cor-texto-invertido-suave);
  text-decoration: none;
  padding: 10px 12px;
  min-height: var(--alvo-minimo);
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  font-weight: 500;
}

.nav a:hover {
  color: var(--cor-texto-invertido);
  background: rgba(255, 255, 255, 0.08);
}

.cabecalho .botao {
  min-height: var(--alvo-minimo);
  padding: 8px 16px;
  font-size: 0.95rem;
}

@media (min-width: 760px) {
  .nav {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  padding-block: 40px 56px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.hero__conteudo {
  position: relative;
  max-width: 760px;
}

.hero__rotulo {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-estrela);
  margin-bottom: 12px;
}

.hero__titulo {
  color: var(--cor-texto-invertido);
  margin-bottom: 16px;
}

.hero__sub {
  font-size: 1.1rem;
  color: var(--cor-texto-invertido-suave);
  max-width: 640px;
  margin-bottom: 24px;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.hero__micro {
  font-size: 0.875rem;
  color: var(--cor-texto-invertido-suave);
  margin-bottom: 24px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cor-texto-invertido);
  white-space: nowrap;
}

.hero__confianca {
  font-size: 0.85rem;
  color: var(--cor-texto-invertido-suave);
  margin: 0;
}

@media (min-width: 760px) {
  .hero {
    padding-block: 72px 88px;
  }
  .hero__sub {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */
.secao {
  padding-block: 56px;
}

.secao--alt {
  background: var(--cor-superficie-alt);
}

.secao--escura {
  background: var(--cor-primaria);
  color: var(--cor-texto-invertido);
}

.secao__cabecalho {
  max-width: var(--largura-texto);
  margin-bottom: 32px;
}

.secao__rotulo {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-acao);
  margin-bottom: 8px;
}

.secao--escura .secao__rotulo {
  color: var(--cor-estrela);
}

.secao__intro {
  font-size: 1.05rem;
  color: var(--cor-texto-suave);
}

.secao--escura .secao__intro {
  color: var(--cor-texto-invertido-suave);
}

@media (min-width: 760px) {
  .secao {
    padding-block: 80px;
  }
}

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha-suave);
  border-radius: var(--raio-grande);
  padding: 24px;
  box-shadow: var(--sombra);
}

.grade {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .grade--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grade--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grade--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .grade--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Como funciona */
.passo {
  position: relative;
  padding-top: 28px;
}

.passo__numero {
  position: absolute;
  top: -18px;
  left: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cor-acao);
  color: var(--cor-acao-texto);
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

.passo h3 {
  margin-top: 4px;
}

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

/* Listas com marcador */
.lista-marcada {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-marcada li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}

.lista-marcada li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--cor-compativel-fundo);
  color: var(--cor-compativel);
}

.lista-marcada--nao li::before {
  content: '✕';
  background: var(--cor-incompativel-fundo);
  color: var(--cor-incompativel);
}

/* Etapas do app */
.etapa__rotulo {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-acao);
  margin-bottom: 8px;
}

.etapa__status {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.etapa__status--ok {
  background: var(--cor-compativel-fundo);
  color: var(--cor-compativel);
}

.etapa ul {
  margin-bottom: 0;
}

/* Honestidade */
.honesto {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--raio-grande);
  padding: 20px;
}

.honesto h3 {
  color: var(--cor-texto-invertido);
  font-size: 1.05rem;
}

.honesto p {
  color: var(--cor-texto-invertido-suave);
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* FAQ */
.faq {
  max-width: var(--largura-texto);
}

.faq__item {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha-suave);
  border-radius: var(--raio);
  margin-bottom: 10px;
}

.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  min-height: 56px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1rem;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '+';
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cor-superficie-alt);
  color: var(--cor-acao);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
}

.faq__item[open] summary::after {
  content: '−';
}

.faq__item > div {
  padding: 0 18px 18px;
  color: var(--cor-texto-suave);
}

.faq__item > div p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Formulário
   -------------------------------------------------------------------------- */
.formulario {
  max-width: 560px;
}

.campo {
  margin-bottom: 18px;
}

.campo__rotulo {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.campo__ajuda {
  display: block;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  margin-top: 6px;
}

.campo__erro {
  display: block;
  font-size: 0.875rem;
  color: var(--cor-incompativel);
  margin-top: 6px;
  font-weight: 500;
}

.campo input[type='text'],
.campo input[type='email'],
.campo input[type='tel'],
.campo input[type='number'],
.campo input[type='search'],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1.5px solid var(--cor-linha);
  border-radius: var(--raio);
}

.campo input:focus,
.campo select:focus {
  border-color: var(--cor-acao);
  outline: 3px solid rgba(37, 99, 235, 0.25);
  outline-offset: 0;
}

.campo [aria-invalid='true'] {
  border-color: var(--cor-incompativel);
}

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

fieldset.campo legend {
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0;
}

.opcoes-radio {
  display: grid;
  gap: 8px;
}

.opcao-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  min-height: 48px;
  border: 1.5px solid var(--cor-linha);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  cursor: pointer;
}

.opcao-radio:has(input:checked) {
  border-color: var(--cor-acao);
  box-shadow: inset 0 0 0 1px var(--cor-acao);
}

.opcao-radio input {
  margin-top: 4px;
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--cor-acao);
}

.consentimento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.925rem;
  cursor: pointer;
}

.consentimento input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--cor-acao);
}

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.formulario__nota {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  margin-top: 12px;
}

.mensagem {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--raio);
  border: 1px solid transparent;
  font-size: 0.975rem;
}

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

.mensagem--sucesso {
  background: var(--cor-compativel-fundo);
  border-color: var(--cor-compativel);
}

.mensagem--erro {
  background: var(--cor-incompativel-fundo);
  border-color: var(--cor-incompativel);
}

.mensagem--info {
  background: var(--cor-info-fundo);
  border-color: var(--cor-info);
}

.mensagem__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--cor-primaria-escura);
  color: var(--cor-texto-invertido-suave);
  padding-block: 40px;
  font-size: 0.9rem;
}

.rodape .marca {
  color: var(--cor-texto-invertido);
  margin-bottom: 12px;
}

.rodape__aviso {
  max-width: var(--largura-texto);
  margin-bottom: 16px;
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.rodape__links a {
  color: var(--cor-texto-invertido);
  min-height: var(--alvo-minimo);
  display: inline-flex;
  align-items: center;
}

.rodape__copy {
  margin: 0;
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Questionário
   -------------------------------------------------------------------------- */
.q-app {
  max-width: 720px;
  padding-block: 24px 64px;
}

.q-cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha-suave);
  border-radius: var(--raio-grande);
  padding: 24px 20px;
  box-shadow: var(--sombra);
}

@media (min-width: 600px) {
  .q-cartao {
    padding: 32px;
  }
}

.q-intro h1 {
  margin-bottom: 12px;
}

.q-intro__lista {
  margin-bottom: 20px;
}

.q-intro__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* Progresso por bloco */
.q-topo {
  margin-bottom: 16px;
}

.q-blocos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.q-bloco {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--cor-acao) calc(var(--fracao, 0) * 100%),
    var(--cor-linha) calc(var(--fracao, 0) * 100%)
  );
  transition: background 0.3s ease;
}

.q-bloco--atual {
  box-shadow: 0 0 0 2px var(--cor-superficie), 0 0 0 4px var(--cor-acao);
}

.q-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.q-meta strong {
  color: var(--cor-texto);
  font-weight: 600;
}

.q-contador {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cor-compativel-fundo);
  color: var(--cor-compativel);
  font-size: 0.875rem;
  font-weight: 600;
}

.q-contador::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.q-titulo {
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  margin-bottom: 8px;
}

.q-titulo:focus {
  outline: none;
}

.q-ajuda {
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.q-opcoes {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}

.q-opcoes--duas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.q-opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  text-align: left;
  font: 500 1rem/1.4 var(--fonte-texto);
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1.5px solid var(--cor-linha);
  border-radius: var(--raio);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.q-opcao:hover {
  border-color: var(--cor-acao);
}

.q-opcao--marcada,
.q-opcao[aria-pressed='true'] {
  border-color: var(--cor-acao);
  background: var(--cor-info-fundo);
  box-shadow: inset 0 0 0 1px var(--cor-acao);
}

.q-opcao input {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  accent-color: var(--cor-acao);
}

.q-opcao__texto {
  flex: 1;
}

.q-opcoes--duas .q-opcao {
  justify-content: center;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.q-numero {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 260px;
}

.q-numero input {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  font: 600 1.4rem/1 var(--fonte-texto);
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1.5px solid var(--cor-linha);
  border-radius: var(--raio);
  text-align: center;
}

.q-numero input:focus {
  border-color: var(--cor-acao);
}

.q-sufixo {
  color: var(--cor-texto-suave);
  font-weight: 500;
}

.q-select {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  font: 500 1rem/1.3 var(--fonte-texto);
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1.5px solid var(--cor-linha);
  border-radius: var(--raio);
}

.q-busca {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1.5px solid var(--cor-linha);
  border-radius: var(--raio);
}

.q-lista-paises {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--cor-linha-suave);
  border-radius: var(--raio);
  padding: 6px;
  display: grid;
  gap: 4px;
}

.q-lista-paises .q-opcao {
  min-height: 48px;
  padding: 10px 12px;
  border-color: transparent;
}

.q-lista-paises .q-opcao:hover {
  border-color: var(--cor-acao);
}

.q-selecionados {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.q-selecionados strong {
  color: var(--cor-texto);
}

.q-erro {
  color: var(--cor-incompativel);
  font-weight: 500;
  margin: 8px 0 0;
}

.q-acoes {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.q-acoes .botao--primario {
  flex: 1;
  max-width: 320px;
}

.q-atalho {
  margin: 14px 0 0;
  font-size: 0.9rem;
  text-align: center;
}

.q-rodape-legal {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  text-align: center;
}

.carregando {
  text-align: center;
  color: var(--cor-texto-suave);
  padding: 40px 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Resultado
   -------------------------------------------------------------------------- */
.aviso-legal {
  border-radius: var(--raio);
  padding: 14px 16px;
  font-size: 0.9rem;
  border: 1px solid var(--cor-linha);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
}

.aviso-legal--curto {
  margin-bottom: 20px;
  border-left: 4px solid var(--cor-aviso);
}

.aviso-legal--completo {
  margin-top: 32px;
}

.aviso-legal h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--cor-texto);
}

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

.r-resumo {
  color: var(--cor-texto-suave);
  margin-bottom: 20px;
}

.alerta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: var(--raio);
  border: 1px solid;
  font-size: 0.95rem;
}

.alerta__nivel {
  grid-column: 1;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  align-self: start;
  white-space: nowrap;
}

.alerta__texto {
  grid-column: 2;
  margin: 0;
}

.alerta__data {
  grid-column: 2;
  font-size: 0.78rem;
  opacity: 0.8;
}

.alerta--critico {
  background: var(--cor-incompativel-fundo);
  border-color: var(--cor-incompativel);
}

.alerta--critico .alerta__nivel {
  background: var(--cor-incompativel);
  color: #fff;
}

.alerta--atencao {
  background: var(--cor-aviso-fundo);
  border-color: var(--cor-aviso);
}

.alerta--atencao .alerta__nivel {
  background: var(--cor-aviso);
  color: #fff;
}

.alerta--info {
  background: var(--cor-info-fundo);
  border-color: var(--cor-info);
}

.alerta--info .alerta__nivel {
  background: var(--cor-info);
  color: #fff;
}

.alerta--pequeno {
  font-size: 0.875rem;
  padding: 10px 12px;
  margin-bottom: 8px;
}

@media (prefers-color-scheme: dark) {
  .alerta--critico .alerta__nivel,
  .alerta--atencao .alerta__nivel,
  .alerta--info .alerta__nivel {
    color: var(--cor-primaria-escura);
  }
}

.r-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 14px;
}

.visto {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha-suave);
  border-radius: var(--raio-grande);
  padding: 20px;
  box-shadow: var(--sombra);
}

.visto__cabecalho {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.visto__posicao {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cor-primaria);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.9rem;
}

.visto__identidade {
  flex: 1;
  min-width: 0;
}

.visto__sigla {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}

.visto__nome {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.nivel {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.nivel::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.nivel--alta {
  background: var(--cor-compativel-fundo);
  color: var(--cor-compativel);
}

.nivel--media {
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.nivel--baixa {
  background: var(--cor-superficie-alt);
  color: var(--cor-texto-suave);
}

.visto__pontos {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  margin: 0 0 8px 44px;
}

.visto__resumo {
  margin: 0 0 10px;
}

.visto__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding: 0;
  list-style: none;
}

.etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cor-superficie-alt);
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  font-weight: 600;
}

.visto__dados {
  display: grid;
  gap: 4px 16px;
  grid-template-columns: auto 1fr;
  font-size: 0.9rem;
  margin: 0 0 12px;
}

.visto__dados dt {
  color: var(--cor-texto-suave);
  font-weight: 500;
}

.visto__dados dd {
  margin: 0;
}

.visto__detalhes {
  border-top: 1px solid var(--cor-linha-suave);
  padding-top: 10px;
  margin-top: 6px;
}

.visto__detalhes summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--cor-acao);
  min-height: var(--alvo-minimo);
  display: flex;
  align-items: center;
  list-style: none;
}

.visto__detalhes summary::-webkit-details-marker {
  display: none;
}

.visto__detalhes summary::before {
  content: '▸';
  margin-right: 8px;
  transition: transform 0.15s ease;
}

.visto__detalhes[open] summary::before {
  transform: rotate(90deg);
}

.visto__detalhes h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 12px 0 6px;
  color: var(--cor-texto-suave);
}

.lista-pontos {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.925rem;
}

.lista-pontos li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
}

.lista-pontos li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.lista-pontos--fortes li::before {
  content: '+';
  color: var(--cor-compativel);
}

.lista-pontos--fracos li::before {
  content: '−';
  color: var(--cor-incompativel);
}

.lista-pontos--neutra li::before {
  content: '•';
  color: var(--cor-texto-suave);
}

.r-descartados {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
}

.descartado {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha-suave);
  border-left: 4px solid var(--cor-incompativel);
  border-radius: var(--raio);
  padding: 14px 16px;
}

.descartado__titulo {
  font-weight: 600;
  margin-bottom: 4px;
}

.descartado__titulo .visto__nome {
  display: inline;
  margin-left: 6px;
}

.descartado ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.r-cta {
  margin-top: 32px;
}

.r-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.r-vazio {
  padding: 16px;
  border-radius: var(--raio);
  background: var(--cor-aviso-fundo);
  border: 1px solid var(--cor-aviso);
}

/* --------------------------------------------------------------------------
   Páginas de texto (privacidade, termos)
   -------------------------------------------------------------------------- */
.pagina-texto {
  padding-block: 40px 64px;
}

.pagina-texto h1 {
  margin-bottom: 8px;
}

.pagina-texto .atualizado {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.caixa-placeholder {
  background: var(--cor-aviso-fundo);
  border: 1px solid var(--cor-aviso);
  border-radius: var(--raio);
  padding: 18px 20px;
  margin-bottom: 24px;
}

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

/* --------------------------------------------------------------------------
   Página de testes do motor
   -------------------------------------------------------------------------- */
.testes {
  padding-block: 32px 64px;
}

.testes table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--cor-superficie);
  border-radius: var(--raio);
  overflow: hidden;
}

.testes th,
.testes td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cor-linha-suave);
  vertical-align: top;
}

.testes .ok {
  color: var(--cor-compativel);
  font-weight: 700;
}

.testes .falhou {
  color: var(--cor-incompativel);
  font-weight: 700;
}

.testes pre {
  white-space: pre-wrap;
  font-size: 0.8rem;
  margin: 4px 0 0;
}