/*
  Folha de estilo do Raio-X de Presença Digital (redesenho de 30/09/2026).

  Minimalista e sólida: fundo cinza grafite sem degradê, blocos um tom
  acima, vermelho da marca só onde carrega sentido. Fontes da marca:
  League Spartan (títulos), Montserrat (texto, no lugar da Mont) e
  Quicksand (rótulos e dados de apoio). Para usar a Mont, basta trocar
  --corpo quando os arquivos da fonte estiverem no site.

  Sem build: CSS puro servido estaticamente.
*/

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;600;700&family=Montserrat:wght@400;500;600&family=Quicksand:wght@500;600;700&display=swap');

:root {
  --fundo: #3b3f45;
  --superficie: #454950;
  --superficie-2: #4d5159;
  --linha: rgba(255, 255, 255, .10);
  --texto: #f4f4f5;
  --suave: #bfc2c8;
  --fraco: #8f939a;
  --acento: #d62828;
  --erro: #ff8a8a;
  --titulo: 'League Spartan', 'Montserrat', sans-serif;
  --corpo: 'Montserrat', system-ui, sans-serif;
  --apoio: 'Quicksand', 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

button { font: inherit; color: inherit; appearance: none; -webkit-appearance: none; }

html, body { overflow-x: hidden; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.container { max-width: 780px; margin: 0 auto; padding: 0 20px 64px; }

#telaIntro, #telaQuiz { max-width: 600px; margin: 0 auto; }

.tela { display: none; }
.tela.ativa { display: block; animation: tela-entra .3s ease; }

@keyframes tela-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.logo-tela { display: block; height: 40px; width: auto; margin: 32px auto 12px; }
body[data-tela="telaResultado"] .logo-tela { display: none; }

svg.ic {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }

/* ---------- Botões ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border: 0; border-radius: 12px;
  background: var(--acento); color: #fff;
  font-family: var(--corpo); font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .1s ease;
}
.botao:hover:not(:disabled) { background: #c11f1f; }
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:disabled { opacity: .4; cursor: not-allowed; }
.botao svg.ic { width: 20px; height: 20px; }

.botao-sec { background: transparent; color: var(--texto); border: 1px solid rgba(255, 255, 255, .22); }
.botao-sec:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }

/* ---------- Entrada ---------- */

.titulo-display {
  font-family: var(--titulo); font-weight: 700; font-size: 40px; line-height: 1.05;
  letter-spacing: -.01em; margin-top: 24px;
}
.intro-texto { color: var(--suave); margin: 14px 0 28px; }

.aviso-dados {
  margin: 0 0 22px; padding: 14px 16px;
  border-left: 3px solid var(--acento); background: var(--superficie);
  border-radius: 0 12px 12px 0; font-size: 13.5px; line-height: 1.55;
}

.campo { margin-bottom: 18px; }
.campo label {
  display: block; margin-bottom: 7px;
  font-family: var(--apoio); font-weight: 700; font-size: 13px; color: var(--suave);
}
.campo input, .campo select {
  width: 100%; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px;
  color: var(--texto); font-family: var(--corpo); font-size: 16px;
  transition: border-color .2s;
}
.campo input::placeholder { color: var(--fraco); }
.campo input:focus, .campo select:focus { border-color: rgba(255, 255, 255, .4); }
.campo [aria-invalid="true"] { border-color: var(--erro); }
.campo select option { color: #111; background: #fff; }
.campo .erro { display: none; margin-top: 6px; font-size: 12.5px; color: var(--erro); }
.campo .erro.visivel { display: block; }
.campo .sugestao { margin-top: 6px; font-size: 12.5px; color: var(--suave); }
.campo .sugestao button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--texto); text-decoration: underline; font: inherit;
}
.nota-privacidade { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--fraco); }

.aviso-retomada { background: var(--superficie); border-radius: 14px; padding: 18px; margin: 24px 0; }
.aviso-retomada p { font-size: 14px; margin-bottom: 12px; }
.aviso-retomada .botao { padding: 10px 18px; font-size: 14px; margin-right: 8px; }

/* ---------- Perguntas ---------- */

.progresso { height: 4px; margin-top: 16px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.progresso-preenchimento { height: 100%; background: var(--acento); transition: width .35s ease; }
.progresso-texto { margin: 10px 0 24px; font-family: var(--apoio); font-weight: 600; font-size: 13px; color: var(--suave); }

.pergunta-texto { font-family: var(--titulo); font-weight: 600; font-size: 24px; line-height: 1.25; margin-bottom: 18px; }
.rotulo { font-family: var(--apoio); font-weight: 700; font-size: 13px; color: var(--suave); margin-bottom: 14px; }

.opcao {
  display: flex; align-items: center; width: 100%; min-height: 56px;
  padding: 15px 18px; margin-bottom: 10px; text-align: left;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px;
  color: var(--texto); font-family: var(--corpo); font-size: 15px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.opcao:hover:not(:disabled):not(.mais) { border-color: rgba(255, 255, 255, .3); }
.opcao.mais { border-color: var(--acento); background: rgba(214, 40, 40, .16); box-shadow: inset 0 0 0 1px var(--acento); }
.opcao:disabled { cursor: default; }

.barra-quiz { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.barra-quiz .botao { margin-left: auto; }
.botao-voltar { width: auto; min-height: 0; margin: 0; padding: 10px 18px; font-size: 13px; }

@keyframes entraPergunta { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.entrando { animation: entraPergunta .18s ease-out; }

/* ---------- Resultado: cabeçalho e capa ---------- */

.topo { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.topo-rotulo { font-family: var(--apoio); font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--suave); }
.topo img { display: block; height: 34px; width: auto; }

.capa {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  min-height: 440px; margin: 28px 0 56px; padding: 72px 48px 56px;
  background: var(--superficie); border-radius: 18px;
}
/* Cantos de enquadramento, como no visor de um raio-x */
.capa::before, .capa::after {
  content: ''; position: absolute; top: 24px; width: 44px; height: 44px;
  border-style: solid; border-color: rgba(255, 255, 255, .28);
}
.capa::before { left: 24px; border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; }
.capa::after { right: 24px; border-width: 2px 2px 0 0; border-radius: 0 6px 0 0; }
.capa-marca { position: absolute; top: 44px; left: 48px; font-family: var(--apoio); font-weight: 600; font-size: 13px; color: var(--suave); }
.capa-para { font-family: var(--apoio); font-weight: 600; font-size: 14px; color: var(--suave); margin-bottom: 6px; }
.capa-nome { overflow-wrap: anywhere; font-family: var(--titulo); font-weight: 700; font-size: 58px; line-height: 1; letter-spacing: -.01em; }
.capa-meta { font-family: var(--apoio); font-weight: 600; font-size: 17px; color: var(--suave); margin-top: 12px; }
.capa-linha { width: 56px; height: 3px; margin: 34px auto 22px; background: var(--acento); border-radius: 2px; }
.capa-titulo { font-family: var(--titulo); font-weight: 600; font-size: 28px; line-height: 1.1; }
.capa-data { font-family: var(--apoio); font-weight: 500; font-size: 14px; color: var(--fraco); margin-top: 8px; }

/* ---------- Resultado: seções ---------- */

.secao { margin-bottom: 56px; }
.secao-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.secao-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--superficie); border-radius: 12px; color: var(--texto); }
.secao-num { font-family: var(--apoio); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--acento); }
.secao-titulo { font-family: var(--titulo); font-weight: 600; font-size: 26px; line-height: 1.1; }

.resultado { background: var(--superficie); border-radius: 18px; padding: 32px; }
.res-linha { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; }
.res-rotulo { font-family: var(--apoio); font-weight: 600; font-size: 13px; color: var(--suave); margin-bottom: 4px; }
.res-nivel { font-family: var(--titulo); font-weight: 700; font-size: 46px; line-height: 1; }
.res-pontos { text-align: right; }
.res-pontos b { font-family: var(--titulo); font-weight: 700; font-size: 36px; line-height: 1; }
.res-pontos span { margin-left: 4px; font-family: var(--apoio); font-weight: 600; font-size: 16px; color: var(--suave); }

.regua { margin: 30px 0 8px; }
.regua-barra, .regua-nomes { display: grid; grid-template-columns: var(--colunas); gap: 4px; }
.regua-barra { position: relative; }
.regua-barra i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.regua-barra i.atual { background: var(--acento); }
.regua-marca { position: absolute; top: -6px; width: 4px; height: 20px; border-radius: 2px; background: var(--texto); transform: translateX(-50%); }
.regua-nomes { margin-top: 10px; }
.regua-nomes span { font-family: var(--apoio); font-weight: 600; font-size: 12px; color: var(--suave); }
.regua-nomes span.atual { color: var(--texto); }
.regua-nomes small { display: block; font-weight: 500; font-size: 11px; }

.res-intro { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--suave); }

.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); border-radius: 18px; overflow: hidden; }
.tabela th {
  padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--linha);
  font-family: var(--apoio); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fraco);
}
.tabela td { padding: 16px 20px; border-bottom: 1px solid var(--linha); vertical-align: middle; font-size: 14px; }
.tabela tr:last-child td { border-bottom: 0; }
.dim { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.dim svg.ic { color: var(--suave); }
.medidor { display: flex; gap: 3px; margin-top: 6px; }
.medidor i { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.medidor i.on { background: var(--texto); }
.medidor.baixo i { background: rgba(214, 40, 40, .35); }
.medidor.baixo i.on { background: var(--acento); }
.leit { color: var(--suave); }

.destaque { background: var(--superficie); border-radius: 18px; padding: 30px 32px; border-left: 4px solid var(--acento); }
.destaque p { font-weight: 500; font-size: 19px; line-height: 1.6; }

.ordem { margin: -8px 0 16px; font-family: var(--apoio); font-weight: 600; font-size: 13px; color: var(--fraco); }
.passos { display: grid; gap: 12px; }
.passo { display: grid; grid-template-columns: 56px 1fr; gap: 18px; background: var(--superficie); border-radius: 16px; padding: 24px; }
.passo-ic { position: relative; width: 56px; height: 56px; display: grid; place-items: center; background: var(--superficie-2); border-radius: 14px; }
.passo-ic svg.ic { width: 26px; height: 26px; }
.passo-ic b {
  position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--acento); color: #fff; font-family: var(--titulo); font-weight: 700; font-size: 13px;
}
.passo h3 { font-family: var(--titulo); font-weight: 600; font-size: 19px; line-height: 1.25; margin-bottom: 6px; }
.passo p { font-size: 14px; color: var(--suave); }

.alerta { display: flex; gap: 16px; margin-top: 12px; padding: 22px 24px; border: 1px solid var(--linha); border-radius: 16px; }
.alerta > svg.ic { color: var(--acento); margin-top: 2px; }
.alerta b { display: block; margin-bottom: 4px; font-family: var(--titulo); font-weight: 600; font-size: 16px; }
.alerta p { font-size: 14px; color: var(--suave); }

.resumo { margin-bottom: 18px; font-size: 16px; color: var(--suave); }
.resumo strong { color: var(--texto); font-weight: 600; }
.uma { display: flex; gap: 18px; padding: 28px 30px; background: var(--texto); color: #26292d; border-radius: 18px; }
.uma > svg.ic { width: 28px; height: 28px; color: var(--acento); }
.uma small { display: block; margin-bottom: 6px; font-family: var(--apoio); font-weight: 700; font-size: 13px; color: #5d6168; }
.uma p { font-family: var(--titulo); font-weight: 500; font-size: 21px; line-height: 1.35; }

.assina { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linha); }
.assina p { max-width: 420px; font-size: 14px; color: var(--suave); }
.assina .assina-nome { margin-top: 14px; font-family: var(--titulo); font-weight: 600; font-size: 20px; color: var(--texto); }
.assina .assina-cargo { font-family: var(--apoio); font-weight: 600; font-size: 13px; color: var(--fraco); }
.assina img { height: 30px; width: auto; }

.acoes { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 8px; padding: 30px; background: var(--superficie); border-radius: 18px; }
.acoes h3 { max-width: 380px; font-family: var(--titulo); font-weight: 600; font-size: 21px; line-height: 1.25; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.nota-email { margin-top: 16px; text-align: center; font-family: var(--apoio); font-weight: 500; font-size: 13px; color: var(--fraco); }

.capa-logo-imp, .so-impressao { display: none; }

/* ---------- Celular ---------- */

@media (max-width: 560px) {
  .titulo-display { font-size: 32px; }
  .capa { min-height: 380px; padding: 64px 24px 40px; }
  .capa-marca { top: 40px; left: 40px; }
  .capa-nome { font-size: 40px; }
  .capa-titulo { font-size: 23px; }
  .resultado { padding: 24px; }
  .res-nivel { font-size: 36px; }
  .res-pontos b { font-size: 30px; }
  .res-pontos { text-align: left; }
  .regua-nomes { column-gap: 8px; }
  .regua-nomes span { font-size: 10px; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: 16px 18px; border-bottom: 1px solid var(--linha); }
  .tabela tr:last-child { border-bottom: 0; }
  .tabela td { padding: 0; border: 0; }
  .tabela td + td { margin-top: 8px; }
  .destaque { padding: 24px; }
  .destaque p { font-size: 17px; }
  .passo { grid-template-columns: 1fr; padding: 22px; }
  .acoes { padding: 24px; }
  .botoes { width: 100%; }
  .botoes .botao { flex: 1 1 100%; }
}

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

/* ---------- Impressão ("Salvar em PDF") ----------
   Documento claro para leitura, com capa e contracapa cinza de página
   inteira. Some tudo que é tela: cabeçalho, ações, entrada e perguntas. */

@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  @page :first { margin: 0; }

  :root {
    --texto: #1d1f22; --suave: #50545b; --fraco: #7a7e85; --linha: #e3e4e6;
    --superficie: #f3f3f4; --superficie-2: #e8e9eb;
  }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body { background: #fff; font-size: 11.5px; line-height: 1.55; min-height: 0; }
  .container { max-width: none; padding: 0; }

  .logo-tela, .topo, .acoes, .nota-email, .nao-imprimir, .tela:not(#telaResultado) { display: none !important; }
  #telaResultado { display: block !important; animation: none; }

  .capa {
    height: 297mm; min-height: 0; margin: 0; padding: 22mm 20mm; border-radius: 0;
    background: #3b3f45; color: #f4f4f5; break-after: page;
  }
  .capa .capa-para, .capa .capa-meta, .capa .capa-marca { color: #bfc2c8; }
  .capa .capa-data { color: #8f939a; }
  .capa-marca { top: 22mm; left: 20mm; }
  .capa-logo-imp { display: block; position: absolute; top: 20mm; right: 20mm; height: 12mm; width: auto; }
  .capa-nome { font-size: 52px; }

  .secao { margin-bottom: 7mm; }
  .secao-cab { margin-bottom: 4mm; gap: 10px; break-after: avoid; break-inside: avoid; }
  .resultado, .destaque, .passo, .alerta, .uma, .tabela tr, .assina { break-inside: avoid; }
  .res-nivel { font-size: 36px; }
  .res-pontos b { font-size: 28px; }
  .regua-barra i { background: #dcdde0; }
  .regua-barra i.atual { background: var(--acento); }
  .regua-marca { background: #1d1f22; }
  .medidor i { background: #dcdde0; }
  .medidor i.on { background: #1d1f22; }
  .medidor.baixo i { background: #f2c4c4; }
  .medidor.baixo i.on { background: var(--acento); }
  .destaque p { font-size: 15px; }
  .secao-ic { width: 34px; height: 34px; border-radius: 9px; }
  .secao-titulo { font-size: 21px; }
  .resultado { padding: 18px 22px; }
  .regua { margin: 18px 0 4px; }
  .res-intro { margin-top: 14px; padding-top: 12px; font-size: 12px; }
  .tabela th { padding: 9px 14px; }
  .tabela td { padding: 8px 14px; font-size: 12px; }
  .dim { gap: 9px; }
  .dim svg.ic { width: 18px; height: 18px; }
  .medidor { margin-top: 4px; }
  .destaque { padding: 16px 22px; }
  .ordem { margin: -4px 0 8px; break-after: avoid; }
  .passos { gap: 8px; }
  .passo { grid-template-columns: 40px 1fr; gap: 14px; padding: 12px 16px; }
  .passo-ic { width: 40px; height: 40px; border-radius: 10px; }
  .passo-ic svg.ic { width: 20px; height: 20px; }
  .passo-ic b { width: 20px; height: 20px; font-size: 11px; top: -6px; left: -6px; }
  .passo h3 { font-size: 15px; margin-bottom: 3px; }
  .passo p { font-size: 12px; }
  .alerta { margin-top: 8px; padding: 12px 16px; }
  .alerta p { font-size: 12px; }

  /* Contracapa: fecha o documento com uma página cheia, espelhando a capa */
  .contracapa {
    page: contracapa; break-before: page; display: flex; flex-direction: column;
    height: 297mm; margin: 0; padding: 24mm 20mm 22mm; background: #3b3f45; color: #f4f4f5;
    --texto: #f4f4f5; --suave: #bfc2c8; --fraco: #8f939a; --linha: rgba(255, 255, 255, .12); --superficie: #454950;
  }
  .contracapa .resumo { font-size: 15px; }
  .contracapa .uma { margin-top: 4mm; background: #f4f4f5; color: #26292d; }
  .contracapa .uma p { font-size: 22px; }
  .contracapa .assina { margin-top: auto; }
  .so-impressao { display: block; }
  .cta-imp { margin-top: 8mm; padding: 6mm 7mm; border-radius: 4mm; background: var(--acento); color: #fff; font-weight: 600; font-size: 14px; line-height: 1.5; }
}

@page contracapa { margin: 0; }