/* =====================================================================
   RAIO-X METABOLICO NATUA  ·  estilo
   Tokens de 06-DESIGN/DESIGN-SYSTEMS/Natua-Design-System.
   Raio maximo 8px de proposito: a marca e clinica, nao spa.
   ===================================================================== */

:root {
  --forest-950: #06130F;
  --forest-900: #0A1E17;
  --forest-800: #123126;
  --forest-700: #1D4A38;
  --forest-600: #2A664D;
  --forest-500: #3D8264;
  --forest-100: #DCE9E2;
  --forest-50:  #EEF5F1;

  --gold-700: #7B6326;
  --gold-600: #947A34;
  --gold-500: #B99B4A;
  --gold-400: #CEB66F;
  --gold-100: #F0E7CB;
  --gold-50:  #F8F3E6;

  --mineral-0:   #FFFFFF;
  --mineral-50:  #F9F7F2;
  --mineral-100: #F2EEE6;
  --mineral-200: #E3DED4;
  --mineral-400: #A9A79F;
  --mineral-600: #686D68;
  --mineral-800: #2D3531;
  --mineral-900: #18201D;

  --coral-700: #7E3030;
  --coral-500: #B54D4D;
  --coral-100: #F4DEDA;

  --sinal-baixo:   #3D8264;
  --sinal-medio:   #CEB66F;
  --sinal-alto:    #C4813F;
  --sinal-critico: #B54D4D;

  --display: "Playfair Display", Georgia, serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--mineral-50);
  color: var(--mineral-900);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  /* Trava a origem do overflow horizontal: qualquer filho que estoure
     rola dentro do proprio container, nunca leva a pagina junto. */
  overflow-x: hidden;
}

img { max-width: 100%; }

/* ------------------------------------------------------------------ */
/* Estrutura                                                           */
/* ------------------------------------------------------------------ */
.tela { display: none; }
.tela.ativa { display: block; }

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 22px;
  /* min-width:0 impede que um filho largo (tabela, lista) estique o
     container. E a armadilha do aprendizado 025. */
  min-width: 0;
}
.wrap-estreito { max-width: 720px; }
.wrap-centro { text-align: center; }
.wrap-hero { padding-top: 46px; padding-bottom: 64px; }

.bloco { padding: 60px 0; }
.bloco-claro { background: var(--mineral-100); }
.bloco-escuro { background: var(--forest-950); color: var(--forest-50); }
.bloco-rodape { background: var(--mineral-200); padding: 44px 0 64px; }

/* ------------------------------------------------------------------ */
/* Tipografia base                                                     */
/* ------------------------------------------------------------------ */
.etiqueta {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-500);
  border-left: 2px solid var(--gold-500);
  padding-left: 10px;
  margin-bottom: 22px;
}
.etiqueta-escura { color: var(--gold-700); border-color: var(--gold-700); }

.titulo-secao {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 6.4vw, 40px);
  line-height: 1.18;
  margin: 0 0 12px;
  letter-spacing: -.01em;
}
.titulo-claro { color: var(--mineral-0); }

.titulo-bloco {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 5.4vw, 32px);
  line-height: 1.22;
  margin: 0 0 14px;
}
.italico { font-style: italic; color: var(--gold-700); }

.apoio {
  font-size: 15px;
  color: var(--mineral-600);
  line-height: 1.72;
  margin: 0 0 26px;
}
.apoio-claro { color: var(--forest-100); }

.prosa p {
  font-size: 16.5px;
  line-height: 1.82;
  margin: 0 0 20px;
  color: var(--mineral-800);
}
.prosa p:first-child { font-size: 19px; color: var(--mineral-900); }

.erro {
  color: var(--coral-700);
  font-size: 14px;
  min-height: 20px;
  margin: 4px 0 10px;
}

/* ------------------------------------------------------------------ */
/* Botoes                                                              */
/* ------------------------------------------------------------------ */
.btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 2px;
  padding: 17px 24px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.btn-principal { background: var(--forest-950); color: var(--gold-100); }
.btn-principal:hover { background: var(--forest-800); }
.btn-principal:disabled { opacity: .6; cursor: default; }
.bloco-escuro .btn-principal,
#tela-analise .btn-principal { background: var(--gold-500); color: var(--forest-950); }
.bloco-escuro .btn-principal:hover { background: var(--gold-400); }

.btn-vazado {
  background: transparent;
  color: var(--gold-400);
  border: 1px solid var(--gold-600);
  margin-top: 12px;
}
.btn-vazado:hover { background: rgba(185, 155, 74, 0.12); }
.btn-escuro { color: var(--forest-800); border-color: var(--forest-700); }
.btn-escuro:hover { background: rgba(29, 74, 56, 0.08); }

/* ------------------------------------------------------------------ */
/* 1. Landing                                                          */
/* ------------------------------------------------------------------ */
.faixa-topo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--mineral-200);
}
.marca {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .01em;
}
.marca em { font-style: italic; color: var(--gold-700); }
.marca-sub {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mineral-400);
}

.hero-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 15vw, 84px);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 4px 0 22px;
}
.hero-italico { font-style: italic; color: var(--gold-700); }

/* Linha de Diagnostico: assinatura visual da marca. */
.linha-diagnostico {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 28px;
  height: 9px;
}
.linha-diagnostico span {
  height: 1px;
  background: var(--gold-500);
  position: relative;
  flex: 1;
  max-width: 74px;
}
.linha-diagnostico span::after {
  content: "";
  position: absolute;
  right: -3px; top: -2.5px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--gold-500);
}
.linha-diagnostico span:last-child::after { background: var(--forest-800); }

.hero-lead {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--mineral-800);
  max-width: 620px;
  margin: 0 0 16px;
}
.hero-lead strong { font-weight: 500; color: var(--forest-800); }

.hero-sub {
  font-size: 15px;
  font-style: italic;
  font-family: var(--display);
  color: var(--gold-700);
  max-width: 560px;
  margin: 0 0 34px;
}

.hero-provas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 34px 0 30px;
}
.hero-provas div {
  flex: 1 1 120px;
  min-width: 0;
  background: var(--mineral-0);
  border: 1px solid var(--mineral-200);
  border-radius: 2px;
  padding: 16px 14px;
}
.hero-provas strong {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  color: var(--forest-800);
  line-height: 1.1;
}
.hero-provas span {
  display: block;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mineral-400);
  margin-top: 4px;
}

.hero-assinatura {
  border-top: 1px solid var(--mineral-200);
  padding-top: 20px;
  margin-top: 6px;
}
.hero-assinatura p { margin: 0 0 4px; font-size: 14px; color: var(--mineral-600); }
.hero-assinatura strong { color: var(--forest-800); font-weight: 500; }

.hero-nota {
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--mineral-400);
  margin-top: 26px;
  max-width: 560px;
}

/* ------------------------------------------------------------------ */
/* 2. Identificacao e captura                                          */
/* ------------------------------------------------------------------ */
#tela-intro .wrap, #tela-captura .wrap { padding-top: 52px; padding-bottom: 72px; }

.campo { margin: 0 0 24px; border: 0; padding: 0; min-width: 0; }
.campo label, .campo legend {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mineral-600);
  margin: 0 0 10px;
  padding: 0;
}
.campo input[type=text],
.campo input[type=email],
.campo input[type=tel] {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--mineral-900);
  background: var(--mineral-0);
  border: 1px solid var(--mineral-200);
  border-radius: 2px;
  padding: 15px 16px;
}
.campo input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(185, 155, 74, 0.16);
}

.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilulas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pilulas label { display: block; min-width: 0; }
.pilulas input { position: absolute; opacity: 0; pointer-events: none; }
.pilulas span {
  display: block;
  text-align: center;
  font-size: 14px;
  padding: 13px 12px;
  background: var(--mineral-0);
  border: 1px solid var(--mineral-200);
  border-radius: 2px;
  cursor: pointer;
  transition: all .16s ease;
}
.pilulas input:checked + span {
  background: var(--forest-950);
  border-color: var(--forest-950);
  color: var(--gold-100);
}
.pilulas input:focus-visible + span { box-shadow: 0 0 0 3px rgba(185, 155, 74, 0.4); }

.caixa-segura {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--forest-50);
  border-left: 2px solid var(--forest-600);
  padding: 16px 18px;
  margin: 0 0 28px;
}
.caixa-segura .cadeado { font-size: 15px; line-height: 1.5; }
.caixa-segura p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--forest-800); }

/* ------------------------------------------------------------------ */
/* 3. Quiz                                                             */
/* ------------------------------------------------------------------ */
#tela-quiz .wrap { padding-top: 30px; padding-bottom: 72px; }

.quiz-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  max-width: 720px;
  margin: 0 auto;
}
.quiz-voltar {
  background: none;
  border: 0;
  padding: 6px 2px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mineral-600);
  cursor: pointer;
}
.quiz-voltar::before { content: "\2039  "; }
.quiz-voltar:hover { color: var(--forest-800); }
.quiz-contador {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--mineral-400);
}
.quiz-progresso { height: 2px; background: var(--mineral-200); }
.quiz-progresso span {
  display: block;
  height: 100%;
  width: 7%;
  background: var(--gold-500);
  transition: width .34s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-tema {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 14px;
}
.quiz-pergunta {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 4.9vw, 28px);
  line-height: 1.38;
  margin: 0 0 30px;
  letter-spacing: -.005em;
}
.quiz-nome { font-style: italic; color: var(--gold-700); }

.quiz-opcoes { display: flex; flex-direction: column; gap: 10px; }
.opcao {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--mineral-0);
  border: 1px solid var(--mineral-200);
  border-radius: 2px;
  padding: 17px 18px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--mineral-900);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease, color .18s ease;
  min-width: 0;
}
.opcao:hover { border-color: var(--forest-500); }
.opcao-letra {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--mineral-400);
  padding-top: 3px;
}
.opcao-texto { min-width: 0; }
.opcao.escolhida {
  background: var(--forest-950);
  border-color: var(--forest-950);
  color: var(--gold-50);
}
.opcao.escolhida .opcao-letra { color: var(--gold-500); }
.opcao.apagada { opacity: .38; }

.quiz-significado {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s ease, margin .3s ease;
  margin-top: 0;
}
.quiz-significado.visivel {
  max-height: 900px;
  opacity: 1;
  margin-top: 20px;
}
.significado-topo {
  background: var(--gold-500);
  color: var(--forest-950);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 18px;
}
.significado-corpo {
  background: var(--gold-50);
  border: 1px solid var(--gold-100);
  border-top: 0;
  padding: 18px;
  font-size: 15px;
  line-height: 1.74;
  color: var(--mineral-800);
}

.btn-proxima { margin-top: 24px; display: none; }
.btn-proxima.visivel { display: block; }

/* ------------------------------------------------------------------ */
/* 4. Analise                                                          */
/* ------------------------------------------------------------------ */
#tela-analise {
  background: var(--forest-950);
  color: var(--forest-50);
  min-height: 100vh;
  min-height: 100dvh;
  display: none;
}
#tela-analise.ativa { display: flex; align-items: center; }
#tela-analise .wrap { padding-top: 40px; padding-bottom: 40px; }

.anel {
  width: 62px; height: 62px;
  margin: 0 auto 28px;
  border: 1px solid rgba(185, 155, 74, 0.28);
  border-radius: 999px;
  position: relative;
}
.anel span {
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-top-color: var(--gold-500);
  border-radius: 999px;
  animation: girar 1.1s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .anel span { animation-duration: 3s; }
  .quiz-progresso span, .barra-preenche { transition: none; }
}

.analise-passos {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  text-align: left;
  max-width: 400px;
  margin-inline: auto;
}
.analise-passos li {
  font-size: 14.5px;
  line-height: 1.6;
  padding: 10px 0 10px 28px;
  position: relative;
  color: rgba(238, 245, 241, 0.32);
  transition: color .3s ease;
}
.analise-passos li::before {
  content: "";
  position: absolute;
  left: 4px; top: 18px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(238, 245, 241, 0.22);
  transition: background .3s ease;
}
.analise-passos li.atual { color: var(--gold-400); }
.analise-passos li.atual::before { background: var(--gold-500); }
.analise-passos li.pronto { color: rgba(238, 245, 241, 0.72); }
.analise-passos li.pronto::before { background: var(--forest-500); }

/* ------------------------------------------------------------------ */
/* 5. Relatorio                                                        */
/* ------------------------------------------------------------------ */
.res-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 6.4vw, 42px);
  line-height: 1.16;
  margin: 0 0 16px;
  letter-spacing: -.015em;
}
.res-veredito {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--forest-100);
  max-width: 640px;
  margin: 0 0 36px;
}
.res-veredito strong { color: var(--gold-400); font-weight: 500; }

.painel-nivel {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(185, 155, 74, 0.22);
  border-radius: 2px;
  padding: 26px 24px;
}
.painel-lado { flex: 1 1 200px; min-width: 0; }
.painel-divisor { width: 1px; background: rgba(185, 155, 74, 0.22); align-self: stretch; }
.painel-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 10px;
}
.painel-numero {
  font-family: var(--display);
  font-size: 62px;
  line-height: 1;
  color: var(--mineral-0);
}
.painel-numero em { font-size: 22px; font-style: normal; color: var(--mineral-400); margin-left: 2px; }
.painel-eixo {
  font-family: var(--display);
  font-size: clamp(22px, 5vw, 28px);
  line-height: 1.2;
  color: var(--mineral-0);
  padding-top: 6px;
}
.painel-legenda {
  display: block;
  font-size: 13px;
  color: var(--mineral-400);
  margin-top: 8px;
}
.painel-nota {
  font-size: 12.5px;
  line-height: 1.64;
  color: var(--mineral-400);
  margin: 22px 0 0;
}

.escala { margin-top: 26px; }
.escala-trilho {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3D8264 0%, #8FA05A 25%, #CEB66F 50%, #C4813F 75%, #B54D4D 100%);
  position: relative;
}
.escala-marcador {
  position: absolute;
  top: -5px;
  width: 16px; height: 16px;
  margin-left: -8px;
  border-radius: 999px;
  background: var(--mineral-0);
  border: 3px solid var(--forest-950);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: left .6s cubic-bezier(0.4, 0, 0.2, 1);
}
.escala-legenda {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 12px;
}
.escala-legenda span {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mineral-400);
  text-align: center;
  min-width: 0;
  word-break: break-word;
}
.escala-legenda span.ativo { color: var(--gold-400); font-weight: 600; }

/* Perfil, as 8 barras */
.perfil { display: flex; flex-direction: column; gap: 12px; }
.barra-linha {
  display: grid;
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
}
.barra-rotulo {
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--mineral-800);
  min-width: 0;
  overflow-wrap: break-word;
}
.barra-trilho {
  display: block;
  height: 8px;
  background: var(--mineral-200);
  border-radius: 999px;
  overflow: hidden;
  min-width: 0;
}
.barra-preenche {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .8s cubic-bezier(0.4, 0, 0.2, 1);
}
.barra-valor {
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  color: var(--mineral-800);
  font-variant-numeric: tabular-nums;
}

/* Detalhamento por eixo */
.eixo-detalhe {
  border-top: 1px solid var(--mineral-200);
  padding: 32px 0 8px;
}
.eixo-detalhe:first-child { border-top: 0; padding-top: 8px; }
.eixo-detalhe-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 20px;
}
.eixo-detalhe-pos {
  font-family: var(--display);
  font-size: 15px;
  color: var(--gold-700);
  padding-top: 4px;
}
.eixo-detalhe-topo h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 4.6vw, 25px);
  line-height: 1.24;
  margin: 0;
}
.eixo-detalhe-frase {
  font-size: 13.5px;
  font-style: italic;
  color: var(--mineral-600);
  margin: 4px 0 0;
}
.eixo-detalhe-valor {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.eixo-bloco { margin-bottom: 18px; }
.eixo-bloco h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 7px;
}
.eixo-bloco p { margin: 0; font-size: 15.5px; line-height: 1.76; color: var(--mineral-800); }
.eixo-bloco ul { margin: 0; padding-left: 18px; }
.eixo-bloco li { font-size: 15px; line-height: 1.68; color: var(--mineral-800); margin-bottom: 5px; }

.eixo-exames { background: var(--forest-50); border-left: 2px solid var(--forest-600); padding: 16px 18px; }
.eixo-exames h4 { color: var(--forest-700); }
.eixo-nota { font-size: 12.5px !important; color: var(--mineral-600) !important; margin-top: 10px !important; }
.eixo-erro { background: var(--coral-100); border-left: 2px solid var(--coral-500); padding: 16px 18px; }
.eixo-erro h4 { color: var(--coral-700); }

/* Exames consolidados */
.exames { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.exame-grupo {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(185, 155, 74, 0.2);
  border-radius: 2px;
  padding: 18px;
  min-width: 0;
}
.exame-grupo h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 10px;
}
.exame-grupo ul { margin: 0; padding-left: 16px; }
.exame-grupo li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--forest-100);
  margin-bottom: 7px;
  overflow-wrap: break-word;
}

/* Plano de 7 dias */
.plano { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.plano li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: var(--mineral-0);
  border: 1px solid var(--mineral-200);
  border-radius: 2px;
  padding: 16px 18px;
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--mineral-800);
}
.plano-n {
  font-family: var(--display);
  font-size: 15px;
  color: var(--gold-700);
  padding-top: 2px;
}

/* DOC 365 */
.fases { display: flex; flex-direction: column; gap: 0; }
.fase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--mineral-200);
}
.fase:first-child { border-top: 0; }
.fase-n {
  font-family: var(--display);
  font-size: 24px;
  color: var(--gold-500);
  line-height: 1;
  padding-top: 3px;
}
.fase h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 6px;
  line-height: 1.3;
}
.fase-dur {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mineral-400);
  margin-top: 3px;
}
.fase p { margin: 0; font-size: 15px; line-height: 1.72; color: var(--mineral-800); }

/* CTA */
.bloco-cta { padding: 64px 0; }
.bloco-cta .btn { max-width: 420px; margin-inline: auto; }
.cta-endereco {
  font-size: 12.5px;
  color: var(--mineral-400);
  margin: 26px 0 0;
  line-height: 1.7;
}

/* Rodape */
.aviso {
  font-size: 12.5px;
  line-height: 1.72;
  color: var(--mineral-600);
  margin: 26px 0 20px;
}
.assinatura {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--mineral-600);
  margin: 0 0 8px;
}
.bloco-rodape .btn { max-width: 420px; }

/* ------------------------------------------------------------------ */
/* Celular                                                             */
/* Medido a 390, 430 e 440. Ver README, secao de verificacao.          */
/* ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .bloco { padding: 46px 0; }
  .wrap-hero { padding-top: 32px; padding-bottom: 48px; }
  .painel-divisor { display: none; }
  .painel-nivel { padding: 22px 18px; gap: 18px; }
  .painel-numero { font-size: 52px; }
  .escala-legenda span { font-size: 9px; letter-spacing: 0; }
  .barra-linha { grid-template-columns: minmax(0, 84px) minmax(0, 1fr) 38px; gap: 9px; }
  .barra-rotulo { font-size: 11.5px; }
  .pilulas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-provas div { flex-basis: 100%; }
  .eixo-detalhe-topo { grid-template-columns: auto minmax(0, 1fr); }
  .eixo-detalhe-valor { grid-column: 2; font-size: 22px; }
}

/* ------------------------------------------------------------------ */
/* Impressao e PDF                                                     */
/* O botao "salvar em PDF" e window.print(). Sem estas regras o PDF     */
/* sai com fundo branco e texto claro, ou seja, ilegivel.              */
/* ------------------------------------------------------------------ */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 11pt; }
  .tela { display: none !important; }
  #tela-resultado { display: block !important; }
  .bloco { padding: 18px 0; break-inside: avoid; }
  .bloco-escuro { background: #fff !important; color: #18201D !important; }
  .bloco-escuro .etiqueta,
  .bloco-escuro .painel-rotulo,
  .bloco-escuro .exame-grupo h4 { color: #7B6326 !important; border-color: #7B6326 !important; }
  .bloco-escuro .titulo-claro,
  .bloco-escuro .painel-numero,
  .bloco-escuro .painel-eixo { color: #18201D !important; }
  .bloco-escuro .res-veredito,
  .bloco-escuro .apoio-claro,
  .exame-grupo li { color: #2D3531 !important; }
  /* Os destaques dourados sao gold-400 na tela escura, o que fica quase
     invisivel sobre branco. No PDF eles descem para gold-700. Contraste
     medido sobre branco (formula WCAG, conta em verificar.js):
     gold-400 #CEB66F = 1,99:1 (reprova) · gold-700 #7B6326 = 5,75:1
     (passa AA) · mineral-600 #686D68 = 5,28:1 (passa AA). */
  .bloco-escuro .res-veredito strong,
  .bloco-escuro .escala-legenda span.ativo,
  .bloco-escuro .painel-legenda { color: #7B6326 !important; }
  .bloco-escuro .painel-nota,
  .bloco-escuro .cta-endereco { color: #686D68 !important; }
  .painel-nivel,
  .exame-grupo { background: #F9F7F2 !important; border-color: #E3DED4 !important; }
  .btn, .bloco-cta .btn, .btn-vazado, #btn-imprimir { display: none !important; }
  .bloco-cta { break-before: avoid; }
  .eixo-detalhe, .fase, .plano li, .exame-grupo { break-inside: avoid; }
  .res-titulo, .titulo-bloco { break-after: avoid; }
  a[href^="http"]::after { content: ""; }
}