/*
  Questionário de marcos (a peça de origem da Tana, agora dentro do site). Soma-se ao novo.css:
  mesmo cabeçalho, mesma grade, mesmo rodapé, mesma escala de espaçamento (4/8/16/24/32/48/64/96/128).
  Muda só o que contrariava o DESIGN.md: sem CAPS espaçado, sem pílula, sem círculo numerado,
  nada abaixo de 14 px, sem foto. Mantém: o fluxo de 3 telas, os textos e o h1 grande com a linha
  final em itálico terracota.
*/

.view[hidden] { display: none !important; }
.sec .h1-quest { font-size: var(--t-h1-quest); line-height: 1.04; letter-spacing: -0.03em; max-width: none; }

/* linha de topo: fólio do questionário à esquerda, etapa à direita (faixa de cabeçalho, não é uma seção de conteúdo) */
main > .calc-linha.sec { padding-block: 16px 0; row-gap: 0; }
.calc-linha p { display: flex; justify-content: space-between; gap: 16px; max-width: none; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); font: 500 0.875rem/1.4 var(--font-body); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.calc-linha p span:last-child { color: var(--color-accent); }

@media (min-width: 1024px) { .calc-abertura { align-items: start; } }
.calc-abertura__texto { display: grid; gap: 24px; align-content: start; }
.calc-abertura__texto .folio { margin-bottom: 0; }
.nota-privacidade { color: var(--color-text-muted); font-size: 1rem; }
.folha .campo + .campo { margin-top: 0; }
.folha .ajuda { margin: 0; }
.rodape-folha { color: var(--color-text-muted); font-size: 0.875rem; text-align: left; }

/* etapa (tela 2) */
.etapa { display: grid; gap: 16px; align-content: start; padding-top: 16px; border-top: 2px solid var(--color-text); }
.etapa__rotulo { font: 500 1.375rem/1.2 var(--font-body); color: var(--color-accent); }
.etapa__idade { color: var(--color-text-muted); font-size: 1rem; }
.etapa p:empty { display: none; }
.etapa__nota { font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); }

/* progresso: régua de 2 px, raio 0 */
.progresso { position: sticky; top: 0; z-index: 10; background: var(--color-bg); padding-top: 8px; }
.progresso p { max-width: none; font-size: 0.875rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.progresso__trilho { height: 2px; background: var(--color-border); border-radius: 0; overflow: hidden; }
.progresso__enche { height: 100%; width: 100%; background: var(--color-accent); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 350ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .progresso__enche { transition: none; } }

/* grupos de perguntas */
#question-groups { display: grid; gap: var(--cab); align-content: start; }
.q-grupo { display: grid; gap: 0; align-content: start; }
.q-grupo__cab { display: flex; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.q-grupo__cab .folio__n { font: 400 var(--t-num)/1 var(--font-display); color: var(--color-text-muted); }
.q-grupo__cab h2 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); }
.q-grupo__cab .q-grupo__n { margin-left: auto; font-size: 0.875rem; color: var(--color-text-muted); white-space: nowrap; }
.pergunta { border: 0; padding: 24px 0; margin: 0; min-width: 0; border-bottom: 1px solid var(--color-border); }
.pergunta legend { padding: 0; margin: 0 0 16px; float: left; width: 100%; font: 500 1.0625rem/1.5 var(--font-body); }
.pergunta legend + * { clear: both; }
.q-indice { margin-right: 8px; font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.q-ajuda { display: block; margin-top: 4px; font-weight: 400; font-size: 0.9375rem; color: var(--color-text-muted); }
.opcoes { display: grid; gap: 8px; }
.opcao { position: relative; display: flex; align-items: center; min-height: 48px; padding: 8px 16px; border: 1px solid var(--color-text-muted); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font-size: 1rem; line-height: 1.3; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao span::before { content: ""; display: inline-block; width: 0; height: 2px; margin-right: 0; vertical-align: middle; background: var(--color-accent); }
.opcao input:checked + span::before { width: 16px; margin-right: 8px; }
.opcao:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); color: var(--color-accent); font-weight: 500; }
.opcao:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (min-width: 640px) {
  .opcoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pergunta legend { width: calc((100% - 11 * 24px) / 12 * 7 + 6 * 24px); margin: 0; padding-right: 24px; }
  .pergunta legend + .opcoes { clear: none; margin-left: 24px; }
}
.calc-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.botao-inline { display: none; }
@media (min-width: 640px) { .botao-inline { display: inline-flex; } }
.botao--texto { width: auto; min-width: 0; background: transparent; border-color: transparent; color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.25em; padding-inline: 0; }

/* relatório */
.rel-quote { font: 400 clamp(1.875rem, 1rem + 2.2vw, 3rem)/1.12 var(--font-display); color: var(--color-text); letter-spacing: -0.01em; text-wrap: balance; }
.sec p.rel-quote { max-width: none; }
.rel-conta { font: 500 1.75rem/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.rel-resumo { display: grid; gap: 24px; align-content: start; }
.rel-explica { display: grid; gap: 16px; align-content: start; padding-top: 16px; border-top: 2px solid var(--color-text); font-size: 1.0625rem; line-height: 1.55; }
.rel-explica p { color: var(--color-text); }
.rel-areas { display: grid; gap: 48px 24px; }
.rel-area { display: grid; gap: 16px; align-content: start; padding-top: 16px; border-top: 1px solid var(--color-text); }
.rel-area h3 { font-size: var(--t-h3); }
.rel-area__conta { font: 500 1.125rem/1.4 var(--font-body); font-variant-numeric: tabular-nums; }
.rel-area h4 { margin-top: 8px; }
.rel-area ul { display: grid; gap: 0; }
.rel-area li { position: relative; padding: 8px 0 8px 24px; border-top: 1px solid var(--color-border); font-size: 1rem; line-height: 1.5; max-width: none; }
.rel-area li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 16px; height: 2px; background: var(--color-text); }
.rel-nota { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: 0.9375rem; }
.rel-pequeno { font-size: 0.9375rem; color: var(--color-text-muted); }
.rel-aviso { background: var(--color-surface); border-top: 2px solid var(--color-text); padding: 24px; display: grid; gap: 16px; }
.rel-proximo { border-top: 1px solid var(--color-text); padding-top: 24px; display: grid; gap: 16px; align-content: start; }
.rel-proximo h2 { font-size: var(--t-h2); }
.rel-aviso h2 { font-size: var(--t-h3); }
.sec .rel-aviso p { max-width: 44rem; }
.rel-metodo { display: grid; gap: 24px; align-content: start; color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.55; }
.rel-metodo strong { color: var(--color-text); font-weight: 500; }
.rel-tinta h2 { font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); color: #FAF7F1; }
.rel-tinta p { color: #FAF7F1; }
.rel-tinta__links { display: grid; gap: 8px; align-content: center; justify-items: start; }
.rel-tinta__texto { display: grid; gap: 16px; align-content: center; }
@media (min-width: 1024px) {
  .rel-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023px) { .rel-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: no-preference) {
  .assenta { opacity: 1; transform: none; transition: opacity 350ms var(--ease), transform 350ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); @starting-style { opacity: 0; transform: translateY(8px); } }
  ::view-transition-group(root) { animation-duration: 250ms; animation-timing-function: var(--ease); }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

@media print {
  html, body { background: white; color: #222; }
  .topo, .barra, .guarda, .rodape, .calc-linha, #profile-view, #questions-view, .rel-tinta, #contact-slot, .calc-acoes { display: none !important; }
  #report-view { display: block !important; }
  .assenta { opacity: 1 !important; transform: none !important; }
}

@media (min-width: 640px) { #barra { display: none; } .com-barra { padding-bottom: 0; } }

#regression-slot > .sec { padding-block: var(--h); row-gap: var(--cab); }
#contact-slot:empty { display: none; }