/* Calculadora de diagnóstico. A base (cores, letras, régua, frase) vem de ../estilo.css. */

[hidden] { display: none !important; }

.so-leitor {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.so-impressao { display: none; }

.diag { padding: 40px 0 120px; }
.sem-js .diag-app { display: none; }
.diag-sem-js { padding: 60px 0; max-width: 760px; }
.diag-sem-js h1 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 8px; }
.diag-sem-js .abre { margin-bottom: 30px; }

.diag h1 { font-size: clamp(38px, 5.6vw, 72px); max-width: 18ch; }
.diag h2 { max-width: 22ch; }
.diag .abre { margin: 24px 0 0; }
.tela > .rotulo { margin-bottom: 22px; }
.tela h1:focus, .tela h2:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .tela:not([hidden]) { animation: tela-surge .35s ease both; }
}
@keyframes tela-surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Etapas: régua com quatro trechos */
.passos {
  list-style: none;
  margin: 0 0 72px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  font-family: var(--sem);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.passos li {
  position: relative;
  padding-top: 14px;
  background:
    linear-gradient(var(--linha), var(--linha)) top / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--linha) 0 1px, transparent 1px 8px) top / 100% 5px no-repeat;
}
.passos li.feito { color: var(--tinta-2); }
.passos li.feito, .passos li[aria-current] {
  background:
    linear-gradient(var(--tinta), var(--tinta)) top / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--tinta-3) 0 1px, transparent 1px 8px) top / 100% 5px no-repeat;
}
.passos li[aria-current] { color: var(--barro); }
.passos li[aria-current]::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--barro);
}

/* Botões */
.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 48px;
}
.botao, .botao-contorno, .botao-texto {
  font-family: var(--sem);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.botao {
  background: var(--tinta);
  color: var(--papel);
  border: 1px solid var(--tinta);
  padding: 15px 28px;
}
.botao:hover:not(:disabled) { background: var(--barro); border-color: var(--barro); }
.botao:disabled { background: transparent; color: var(--tinta-3); border-color: var(--linha); cursor: not-allowed; }
.botao-contorno {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--tinta);
  padding: 14px 24px;
}
.botao-contorno:hover { border-color: var(--barro); color: var(--barro); }
.botao-texto {
  background: none;
  border: 0;
  padding: 4px 0 5px;
  color: var(--tinta-2);
  font-weight: 400;
  font-size: 14px;
  border-bottom: 1px solid var(--linha);
}
.botao-texto:hover { color: var(--barro); border-bottom-color: var(--barro); }
.botao:focus-visible, .botao-contorno:focus-visible, .botao-texto:focus-visible,
.diag summary:focus-visible, .diag a:focus-visible {
  outline: 2px solid var(--barro);
  outline-offset: 4px;
}
.aviso {
  font-family: var(--sem);
  font-size: 13px;
  color: var(--barro);
  margin: 0;
}
.aviso:empty { display: none; }

/* 1 · Frase */
.diag-frase { margin-top: 56px; max-width: 900px; }
.diag-frase p { margin: 0; }
.diag-frase select { max-width: 100%; }

/* Os dois números opcionais da abertura: linha sublinhada, sem caixa */
.aberto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 56px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--linha);
  max-width: 900px;
}
.aberto-campo { min-width: 0; }
.aberto-campo label { display: block; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.4; color: var(--tinta); }
.aberto-opc { font-family: var(--sem); font-size: 13px; color: var(--tinta-3); white-space: nowrap; }
.aberto .aberto-valor { justify-content: flex-start; margin-top: 12px; font-size: clamp(30px, 3.4vw, 40px); }
.aberto .aberto-valor .valor-num { width: 9ch; text-align: left; }
.aberto .aberto-nota, .aberto .aberto-privado { font-family: var(--sem); font-size: 13px; line-height: 1.55; color: var(--tinta-3); margin: 10px 0 0; max-width: 46ch; }
.aberto .aberto-privado { grid-column: 1 / -1; margin: 0; color: var(--tinta-2); max-width: none; }
.aberto .p-teto { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--tinta-2); }
.aberto .p-teto:empty { margin: 0; }
.aberto-campo details { font-family: var(--sem); font-size: 14px; color: var(--tinta-2); margin-top: 12px; }
.aberto-campo summary {
  cursor: pointer;
  list-style: none;
  padding: 2px 0 3px;
  border-bottom: 1px solid var(--linha);
  display: inline-block;
}
.aberto-campo summary::-webkit-details-marker { display: none; }
.aberto-campo summary::before { content: '+'; color: var(--barro); margin-right: 8px; }
.aberto-campo details[open] summary::before { content: '–'; }
.aberto-campo summary:hover { color: var(--barro); }
.aberto-campo summary:focus-visible { outline: 2px solid var(--barro); outline-offset: 4px; }
.aberto .aberto-campo details p { font-size: 14px; color: var(--tinta-2); margin: 10px 0 0; padding-left: 14px; border-left: 1px solid var(--barro); line-height: 1.6; }

/* Respostas guardadas neste aparelho: a pergunta de retomar e o apagar */
.memoria-aviso {
  font-family: var(--sem);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  margin: 28px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--barro);
  max-width: 60ch;
}
.memoria-aviso:empty { display: none; }
.retomar {
  margin-top: 44px;
  padding: 26px 0 22px;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--linha);
  max-width: 900px;
}
.diag .retomar-titulo { margin: 0; max-width: none; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.25; color: var(--tinta); }
.retomar-texto, .retomar-nota { font-family: var(--sem); font-size: 15px; line-height: 1.55; color: var(--tinta-2); margin: 10px 0 0; max-width: 62ch; }
.retomar-nota { margin: 0; }
.retomar-nota:empty { display: none; }
.retomar-acoes { margin-top: 24px; }
.retomar-apagar { margin: 18px 0 0; }
.retomar-apagar .botao-texto, .r-memoria .botao-texto { font-size: 13px; color: var(--tinta-2); }

/* 2 · Áreas: lista editorial com marcação */
.areas { border: 0; margin: 56px 0 0; padding: 0; min-width: 0; }
.areas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 900px;
  border-top: 1px solid var(--tinta);
}
.areas-lista li { border-bottom: 1px solid var(--linha); }
.area {
  position: relative;
  display: grid;
  grid-template-columns: 44px 26px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 14px;
  padding: 22px 0;
  cursor: pointer;
}
.area input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.area-num { font-family: var(--sem); font-size: 13px; color: var(--tinta-3); }
.area-marca {
  width: 15px;
  height: 15px;
  border: 1px solid var(--tinta);
  align-self: center;
  position: relative;
  transition: background-color .15s, border-color .15s;
}
.area-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.area-nome { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; }
.area-desc { font-family: var(--sem); font-size: 14px; color: var(--tinta-3); line-height: 1.5; }
.area:hover .area-nome { color: var(--barro); }
.area input:checked ~ .area-marca { background: var(--barro); border-color: var(--barro); }
.area input:checked ~ .area-texto .area-nome { color: var(--barro); font-style: italic; }
.area input:focus-visible ~ .area-marca { outline: 2px solid var(--barro); outline-offset: 4px; }

/* 3 · Perguntas */
.area-lembrete {
  font-family: var(--sem);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--barro);
  max-width: 60ch;
}
.perguntas { margin-top: 56px; max-width: 980px; border-top: 1px solid var(--tinta); }
.pergunta { padding: 34px 0 30px; border-bottom: 1px solid var(--linha); }
.p-texto {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  margin: 0;
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.4;
  max-width: 40ch;
}
.p-num { font-family: var(--sem); font-size: 13px; color: var(--barro); padding-top: 6px; }
.p-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center;
  gap: 40px;
  margin: 22px 0 0 34px;
}
.p-conta, .p-fonte {
  font-family: var(--sem);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-2);
  margin: 14px 0 0 34px;
}
.p-conta { min-height: 1.55em; }
.p-conta span { display: block; }

/* Pergunta de escolha: duas opções com marca e sublinhado */
.opcoes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 44px;
  margin: 22px 0 0 34px;
}
.opcao {
  position: relative;
  display: inline-grid;
  grid-template-columns: 15px auto;
  align-items: baseline;
  gap: 0 12px;
  cursor: pointer;
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.4;
}
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opcao-marca { width: 15px; height: 15px; border: 1px solid var(--tinta); align-self: center; transition: background-color .15s, border-color .15s; }
.opcao-rotulo { padding-bottom: 2px; border-bottom: 1.5px solid var(--linha); }
.opcao:hover .opcao-rotulo { color: var(--barro); }
.opcao input:checked ~ .opcao-marca { background: var(--barro); border-color: var(--barro); }
.opcao input:checked ~ .opcao-rotulo { color: var(--barro); font-style: italic; border-bottom-color: var(--barro); }
.opcao input:focus-visible ~ .opcao-marca { outline: 2px solid var(--barro); outline-offset: 4px; }
.opcoes .valor-tipico { flex-basis: 100%; text-align: left; margin-top: 0; }
.p-fonte { color: var(--tinta-3); font-size: 13px; margin-top: 6px; }
.p-ajuda {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 32px;
  margin: 18px 0 0 34px;
}
.p-ajuda details { font-family: var(--sem); font-size: 14px; color: var(--tinta-2); max-width: 560px; }
.p-ajuda summary {
  cursor: pointer;
  list-style: none;
  padding: 2px 0 3px;
  border-bottom: 1px solid var(--linha);
  display: inline-block;
}
.p-ajuda summary::-webkit-details-marker { display: none; }
.p-ajuda summary::before { content: '+'; color: var(--barro); margin-right: 8px; }
.p-ajuda details[open] summary::before { content: '–'; }
.p-ajuda summary:hover { color: var(--barro); }
.p-ajuda details p { margin: 10px 0 0; padding-left: 14px; border-left: 1px solid var(--barro); line-height: 1.6; }

/* Régua de arrastar: linha fina, tracinhos de régua e marcador em barro */
.regua { position: relative; padding: 0; }
.regua input[type="range"] {
  --pos: 50%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px; /* área de toque */
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.regua input[type="range"]::-webkit-slider-runnable-track {
  height: 20px;
  background:
    linear-gradient(var(--barro), var(--barro)) left 9px / var(--pos) 2px no-repeat,
    linear-gradient(var(--tinta-3), var(--tinta-3)) left 9.5px / 100% 1px no-repeat,
    linear-gradient(var(--tinta-3), var(--tinta-3)) right 10px / 1px 9px no-repeat,
    repeating-linear-gradient(to right, var(--tinta-3) 0 1px, transparent 1px 10%) left 10px / 100% 9px no-repeat,
    repeating-linear-gradient(to right, var(--linha) 0 1px, transparent 1px 2%) left 10px / 100% 5px no-repeat;
}
.regua input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  background: var(--barro);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 3px var(--papel);
}
.regua input[type="range"]::-moz-range-track {
  height: 20px;
  background:
    linear-gradient(var(--tinta-3), var(--tinta-3)) left 9.5px / 100% 1px no-repeat,
    linear-gradient(var(--tinta-3), var(--tinta-3)) right 10px / 1px 9px no-repeat,
    repeating-linear-gradient(to right, var(--tinta-3) 0 1px, transparent 1px 10%) left 10px / 100% 9px no-repeat,
    repeating-linear-gradient(to right, var(--linha) 0 1px, transparent 1px 2%) left 10px / 100% 5px no-repeat;
}
.regua input[type="range"]::-moz-range-progress { height: 2px; background: var(--barro); }
.regua input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--barro);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 3px var(--papel);
}
.regua input[type="range"]:focus { outline: none; }
.regua input[type="range"]:focus-visible { outline: 2px solid var(--barro); outline-offset: 6px; }
.regua input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.calmo .regua input[type="range"]:active::-webkit-slider-thumb { transform: none; }

/* O valor grande, que também aceita número digitado (vem antes da régua no HTML: o Tab para nele primeiro) */
.p-linha .valor { grid-column: 2; grid-row: 1; }
.p-linha .regua { grid-column: 1; grid-row: 1; }
.valor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 8px;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.1;
  color: var(--tinta);
}
.valor-pre, .valor-pos { font-size: .42em; color: var(--tinta-2); }
.valor-pos { font-family: var(--sem); font-size: 14px; }
.valor-num {
  font: inherit;
  font-weight: 300;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--barro);
  border-radius: 0;
  padding: 0 2px;
  margin: 0;
  min-width: 2.6ch;
  text-align: right;
}
.valor-num:focus { outline: none; border-bottom-width: 2px; color: var(--barro); }
/* Botões discretos de um passo, ao lado do número */
.valor-passos { display: inline-flex; gap: 6px; margin-left: 4px; align-self: center; }
.passo {
  font: inherit;
  font-family: var(--sem);
  font-size: 22px;
  line-height: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--tinta-2);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 0;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.passo:hover { color: var(--barro); border-color: var(--barro); }
.passo:focus-visible { outline: 2px solid var(--barro); outline-offset: 3px; }
.passo[aria-disabled="true"] { color: var(--tinta-3); border-color: var(--linha); opacity: .55; cursor: default; }
.valor-tipico {
  flex-basis: 100%;
  font-family: var(--sem);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-top: 6px;
  text-align: right;
  visibility: hidden;
}
.valor-tipico.on { visibility: visible; }

/* 4 · Resultado */
.resultado { max-width: 1080px; }
.r-perfil { font-style: italic; color: var(--tinta-2); margin: 0 0 18px; }
.r-total {
  margin: 30px 0 0;
  font-size: clamp(60px, 11vw, 136px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tinta);
}
.r-total small { font-size: .2em; letter-spacing: 0; color: var(--tinta-2); }
/* Faixa: dois números no lugar de um, menores para caber a 390 px; "entre" e "e" em tamanho de leitura */
.r-total-faixa { font-size: clamp(42px, 7.4vw, 96px); line-height: 1.08; }
.r-total-faixa small { font-size: max(.28em, 15px); }
.r-faixa { margin: 14px 0 0; font-family: var(--sem); font-size: 15px; line-height: 1.55; color: var(--tinta-2); max-width: 60ch; }
.r-faixa:empty { display: none; }
/* O antes e depois, logo abaixo do total, e a linha curta de cada área */
.r-antes { margin: 18px 0 0; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.5; color: var(--tinta-2); max-width: 60ch; }
.r-antes strong { font-weight: 400; color: var(--tinta); }
.r-antes:empty { display: none; }
.r-area-ajustar { margin: 14px 0 0; }
.r-area-antes { font-family: var(--sem); font-size: 13px; line-height: 1.5; color: var(--tinta-2); margin: 6px 0 0; max-width: 32ch; }
.r-divide, .r-dias { margin: 22px 0 0; font-size: clamp(19px, 1.9vw, 22px); color: var(--tinta-2); max-width: 56ch; }
.r-divide strong, .r-dias strong { font-weight: 400; color: var(--tinta); }
.r-dias { margin-top: 8px; }
.r-tipicas, .r-fat, .r-alerta, .r-dias, .r-dono { max-width: 60ch; }
.r-tipicas:empty, .r-fat:empty, .r-alerta:empty, .r-dias:empty, .r-dono:empty { display: none; }
.r-tipicas { font-family: var(--sem); font-size: 15px; line-height: 1.55; color: var(--tinta-2); margin: 14px 0 0; }
.r-fat, .r-dono { margin: 8px 0 0; font-size: clamp(19px, 1.9vw, 22px); color: var(--tinta-2); }
.r-fat strong, .r-dono strong { font-weight: 400; color: var(--tinta); }
.r-confianca { margin: 14px 0 22px; font-style: italic; font-size: 17px; line-height: 1.55; color: var(--tinta-2); max-width: 62ch; }
.r-alerta {
  font-family: var(--sem);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  margin: 14px 0 6px;
  padding-left: 14px;
  border-left: 2px solid var(--barro);
}

/* O plano: três linhas, rótulo à esquerda e texto à direita */
.r-plano { list-style: none; margin: 48px 0 40px; padding: 0; border-top: 1px solid var(--tinta); max-width: 980px; }
.r-plano li {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 6px 40px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linha);
}
.r-plano-rotulo {
  font-family: var(--sem);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--barro);
  margin: 0;
  padding-top: 6px;
}
.r-plano-texto { margin: 0; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.5; color: var(--tinta); max-width: 52ch; }
.r-plano-acao { grid-column: 2; margin: 6px 0 0; }
.r-memoria { margin-top: 30px; font-family: var(--sem); font-size: 13px; line-height: 1.55; color: var(--tinta-2); max-width: 62ch; }
.r-memoria p { margin: 0 0 8px; }

.r-areas { list-style: none; margin: 72px 0 0; padding: 0; }
.r-areas > li {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  padding: 30px 0 40px;
  border-top: 1px solid var(--tinta);
}
.r-area-topo h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 300; }
.r-area-total { margin: 8px 0 0; font-size: 26px; color: var(--barro); }
.r-area-total small { font-family: var(--sem); font-size: 13px; color: var(--tinta-3); }
.r-area-corpo {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px 40px;
}
.r-parte-rotulo {
  font-family: var(--sem);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.r-parte-rotulo span { white-space: nowrap; font-family: var(--serifa); font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta); }
.r-conta { font-family: var(--sem); font-size: 13.5px; line-height: 1.55; color: var(--tinta-2); margin: 8px 0 0; }
.r-fonte { color: var(--tinta-3); }

/* As respostas da área, com a marca do valor típico */
.r-respostas { grid-column: 1 / -1; }
.r-respostas ul { list-style: none; margin: 0; padding: 0; }
.r-respostas li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha);
  font-family: var(--sem);
  font-size: 13.5px;
  line-height: 1.5;
}
.r-resp-texto { color: var(--tinta-2); min-width: 0; }
.r-resp-valor { color: var(--tinta); text-align: right; flex-shrink: 0; max-width: 50%; }
.r-tipico { font-style: italic; color: var(--barro); }

/* Esta semana, O número, Melhorou se */
.r-passos { grid-column: 1 / -1; margin: 0; }
.r-passos div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 9px 0;
  border-top: 1px solid var(--linha);
}
.r-passos div:first-child { border-top-color: var(--barro); }
.r-passos dt {
  font-family: var(--sem);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--barro);
  padding-top: 4px;
}
.r-passos dd { margin: 0; font-style: italic; color: var(--tinta); max-width: 60ch; }

.r-como {
  margin: 64px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--linha);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
}
.r-como h3 { font-size: 22px; }
.r-como ol { grid-column: span 2; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.r-como li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 14px 34px;
  color: var(--tinta-2);
  font-size: 17px;
}
.r-como li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 3px;
  font-family: var(--sem);
  font-size: 13px;
  color: var(--barro);
}
.r-como li strong { font-weight: 400; color: var(--tinta); }
.r-como > p { grid-column: 2 / span 2; margin: 6px 0 0 34px; font-style: italic; color: var(--tinta-2); font-size: 17px; }

/* 5 · Convite */
.convite.secao { padding: 96px 0 0; margin-top: 96px; }
.contato-form { margin-top: 40px; max-width: 980px; }
.contato-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
}
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label {
  font-family: var(--sem);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.campo input {
  font: inherit;
  font-size: 22px;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--tinta-3);
  border-radius: 0;
  padding: 6px 2px;
  width: 100%;
  min-width: 0;
}
.campo input::placeholder { color: var(--linha); }
.campo input:focus { outline: none; border-bottom-color: var(--barro); }
.campo input[aria-invalid] { border-bottom-color: var(--barro); }
.campo-nota, .aceite, .erro, .contato-form .acoes { grid-column: 1 / -1; }
.campo-nota { font-family: var(--sem); font-size: 13px; color: var(--tinta-3); margin: 12px 0 0; }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.aceite {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0 10px;
  margin-top: 32px;
  font-family: var(--sem);
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta-2);
  cursor: pointer;
  max-width: 720px;
}
.aceite input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.aceite .caixa { width: 15px; height: 15px; border: 1px solid var(--tinta); margin-top: 4px; }
.aceite input:checked + .caixa { background: var(--barro); border-color: var(--barro); }
.aceite input:focus-visible + .caixa { outline: 2px solid var(--barro); outline-offset: 4px; }
.aceite input[aria-invalid] + .caixa { border-color: var(--barro); }
.aceite a { color: var(--tinta); text-decoration-color: var(--barro); text-underline-offset: 3px; }
.erro { font-family: var(--sem); font-size: 14px; color: var(--barro); margin: 18px 0 0; }
.erro:empty { display: none; }
.contato-form .acoes { margin-top: 32px; }

/* 6 · Envio */
.envio:empty { display: none; }
.envio { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--tinta); max-width: 760px; }
.envio-msg { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; margin: 0 0 24px; }
.envio-erro a { color: var(--barro); text-underline-offset: 4px; }

.diag-rodape .rodape-linha a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linha); }
.diag-rodape .rodape-linha a:hover { color: var(--barro); }

/* Tablet */
@media (max-width: 960px) {
  .r-areas > li, .r-como { grid-template-columns: 1fr; row-gap: 22px; }
  .r-area-corpo, .r-como ol { grid-column: auto; }
  .r-como > p { grid-column: auto; margin-left: 0; }
  .p-linha { gap: 28px; grid-template-columns: minmax(0, 1fr) 220px; }
}

/* Celular */
@media (max-width: 640px) {
  .diag { padding: 16px 0 90px; }
  .passos { margin-bottom: 48px; gap: 8px; font-size: 10.5px; letter-spacing: .08em; }
  .diag-frase { margin-top: 40px; }
  .areas, .perguntas { margin-top: 40px; }
  .area { grid-template-columns: 30px 22px minmax(0, 1fr); gap: 0 10px; padding: 18px 0; }
  .area-texto { flex-direction: column; gap: 2px; }
  .p-texto { grid-template-columns: 26px minmax(0, 1fr); }
  .p-linha { grid-template-columns: 1fr; gap: 10px; margin-left: 0; }
  .p-linha .valor, .p-linha .regua { grid-column: 1; grid-row: auto; }
  .p-linha .valor { justify-content: flex-start; }
  .valor-tipico { text-align: left; }
  .p-conta, .p-fonte, .p-ajuda, .opcoes { margin-left: 0; }
  .opcoes { flex-direction: column; gap: 14px; }
  .aberto { grid-template-columns: 1fr; margin-top: 36px; }
  .r-plano li, .r-passos div { grid-template-columns: 1fr; }
  .r-plano-rotulo { padding-top: 0; }
  .r-plano-acao { grid-column: auto; }
  .retomar { margin-top: 36px; }
  .r-area-antes { max-width: none; }
  .r-respostas li { flex-direction: column; gap: 2px; }
  .r-resp-valor { text-align: left; max-width: none; }
  .r-area-corpo { grid-template-columns: 1fr; }
  .r-areas { margin-top: 56px; }
  .contato-form { grid-template-columns: 1fr; row-gap: 22px; }
  .campo-nota { margin-top: 0; }
  .aceite { margin-top: 12px; }
  .acoes { gap: 18px 22px; margin-top: 36px; }
  .convite.secao { padding-top: 72px; margin-top: 72px; }
}

/* Baixar em PDF: só o resultado, sem botões */
/* O PDF ("Baixar em PDF"): A4 retrato. Na impressão sai só #impressao; nada do site.
   Página 1: o diagnóstico. Se não couber, "Suas respostas" continua na página seguinte,
   sem partir uma linha. A folha de acompanhamento sempre começa numa página nova. */
@page { size: A4 portrait; margin: 25mm 20mm; }
@media print {
  html, body { background: #fff; }
  body { font-family: var(--sem); font-weight: 400; font-size: 9pt; line-height: 1.4; color: var(--tinta); }
  body > :not(#impressao) { display: none !important; }
  .impressao.imp-pronta { display: block !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Cada parte ocupa ao menos uma página inteira, para o rodapé ficar no pé (297 - 50 mm de margem, com folga). */
  .imp-pagina { display: flex; flex-direction: column; min-height: 245mm; }
  .imp-folha { break-before: page; height: 245mm; }
  .imp-anexo { break-before: page; }
  .imp-pagina[hidden] { display: none !important; }
  .imp-anexo .imp-sub { display: none; }
  .imp-anexo .imp-respostas-bloco { margin-top: 4pt; }
  .imp-pe {
    margin-top: auto; padding-top: 4pt; border-top: 1px solid var(--linha);
    font-size: 8pt; color: var(--tinta-2); letter-spacing: .02em; break-inside: avoid;
  }

  .imp-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16pt; padding-bottom: 6pt; border-bottom: 1px solid var(--tinta); margin-bottom: 6pt; }
  .imp-logo { flex: none; width: 32mm; height: auto; display: block; }
  .imp-topo-texto { text-align: right; }
  .imp-titulo { font-family: var(--serifa); font-weight: 400; font-size: 14pt; line-height: 1.2; margin: 0; }
  .imp-perfil { margin: 1pt 0 0; color: var(--tinta-2); font-size: 8pt; }

  .imp-tipicas { margin: 0; color: var(--tinta-2); font-size: 8.5pt; }
  .imp-tipicas:empty { display: none; }
  .imp-total { font-family: var(--serifa); font-weight: 300; font-size: 26pt; line-height: 1.05; margin: 0 0 4pt; letter-spacing: -.01em; }
  .imp-total small { font-family: var(--sem); font-weight: 400; font-size: 9pt; letter-spacing: 0; color: var(--tinta-2); }
  .imp-total-faixa > small { display: block; margin-top: 3pt; }
  .imp-faixa { margin: 0 0 4pt; color: var(--tinta-2); font-size: 8.5pt; }
  .imp-faixa:empty { display: none; }

  .imp-antes, .imp-alerta { margin: 0 0 4pt; font-size: 8.5pt; }
  .imp-antes strong { font-weight: 500; }
  .imp-alerta { color: var(--barro); }
  .imp-antes:empty, .imp-alerta:empty { display: none; }
  .imp-plano { list-style: none; margin: 0 0 8pt; padding: 0; border-top: 1px solid var(--linha); break-inside: avoid; }
  .imp-plano li { display: grid; grid-template-columns: 48mm 1fr; gap: 8pt; padding: 2pt 0; border-bottom: 1px solid var(--linha); }
  .imp-plano p { margin: 0; }
  .imp-plano-rotulo { white-space: nowrap; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .08em; color: var(--barro); padding-top: 1pt; }

  .imp-tabela { width: 100%; border-collapse: collapse; }
  .imp-tabela th, .imp-tabela td { text-align: left; vertical-align: top; padding: 2.5pt 6pt 2.5pt 0; border-bottom: 1px solid var(--linha); font-weight: 400; }
  .imp-tabela thead th { white-space: nowrap; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); border-bottom: 1px solid var(--tinta-2); }
  .imp-tabela tr { break-inside: avoid; }

  .imp-areas { margin-bottom: 10pt; font-size: 8.5pt; }
  .imp-areas tbody th, .imp-areas tbody td, .imp-areas tfoot th, .imp-areas tfoot td { padding-top: 1.2pt; padding-bottom: 1.2pt; }
  .imp-areas td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; width: 32mm; }
  .imp-areas td.imp-dif { width: 26mm; color: var(--tinta-2); }
  .imp-areas td:last-child, .imp-areas th:last-child { padding-right: 0; }
  .imp-areas thead th:not(:first-child) { text-align: right; }
  .imp-areas tfoot th, .imp-areas tfoot td { font-weight: 500; border-top: 1px solid var(--tinta-2); border-bottom: 0; }

  .imp-sub { font-family: var(--serifa); font-weight: 400; font-size: 11pt; margin: 0 0 4pt; break-after: avoid; }
  /* Suas respostas: uma tabela por área. Nunca parte uma linha; o nome da área se repete na continuação. */
  .imp-respostas { font-size: 7.5pt; line-height: 1.25; margin-bottom: 8pt; }
  .imp-respostas.imp-duas-colunas { columns: 2; column-gap: 8mm; }
  .imp-resp { margin-bottom: 5pt; }
  .imp-resp thead th { font-size: 8.5pt; text-transform: none; letter-spacing: 0; color: var(--tinta); font-weight: 500; padding: 0 0 1pt; }
  .imp-resp td { padding-top: 1pt; padding-bottom: 1pt; }
  .imp-resp td:last-child { width: 30mm; padding-right: 0; }
  .imp-duas-colunas .imp-resp td:last-child { width: 25mm; }
  .imp-resp em { color: var(--barro); }
  .imp-duas-colunas .imp-resp-curta { break-inside: avoid; }

  .imp-confianca { margin: 0 0 6pt; color: var(--tinta-2); font-size: 8.5pt; break-inside: avoid; }
  .imp-instrucao { margin: 0 0 10pt; color: var(--tinta-2); }
  .imp-folha-tabela { margin-bottom: 14pt; table-layout: fixed; }
  .imp-folha-tabela thead th:first-child { width: 40%; }
  .imp-folha-tabela tbody th, .imp-folha-tabela tbody td { height: 19mm; }
  .imp-folha-tabela td { border-left: 1px solid var(--linha); }
  .imp-folha-area { display: block; font-weight: 500; }
  .imp-folha-numero { display: block; margin-top: 2pt; color: var(--tinta-2); font-size: 8pt; }
  .imp-pauta { flex: 1; overflow: hidden; min-height: 0; }
  .imp-pauta span { display: block; height: 8mm; border-bottom: 1px solid var(--linha); }
  .imp-folha .imp-pe { margin-top: 8pt; }
}

.p-teto { font-family: var(--sem); font-size: 14px; line-height: 1.55; color: var(--tinta-2); margin: 6px 0 0 34px; }
.p-teto:empty { margin: 0; min-height: 0; }
@media (max-width: 640px) { .p-teto { margin-left: 0; } }