/* ==========================================================================
   GoTRUST — Raio-X Digital
   Carregado DEPOIS de styles.css: reaproveita as variáveis, o header, o
   rodapé e os botões da landing page. Aqui só o que é do formulário.
   Mobile primeiro — a maior parte do tráfego chega de Instagram e WhatsApp.
   ========================================================================== */

/* --- moldura -------------------------------------------------------------- */
.rx { padding: 28px 0 72px; }
.rx-wrap { max-width: 620px; margin: 0 auto; padding: 0 20px; }

/* Cada tela é um passo. Só uma fica visível por vez. */
.rx-screen { animation: rx-in .22s ease both; }
@keyframes rx-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rx-screen { animation: none; }
}

/* --- barra de progresso --------------------------------------------------- */
.rx-progress { margin-bottom: 34px; }
.rx-track {
  height: 6px; border-radius: 99px; background: var(--line); overflow: hidden;
}
.rx-fill {
  display: block; height: 100%; width: 0;
  background: var(--green-deep); border-radius: 99px;
  transition: width .28s ease;
}
.rx-count {
  margin: 10px 0 0; font-size: .84rem; font-weight: 600;
  letter-spacing: .04em; color: var(--navy-muted);
}

/* --- pergunta ------------------------------------------------------------- */
.rx-kicker {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green-deep); margin: 0 0 12px;
}
.rx-q { font-size: clamp(1.4rem, 5.2vw, 1.85rem); font-weight: 700; margin: 0 0 8px; }
.rx-help { font-size: .95rem; color: var(--navy-muted); margin: 0 0 22px; }

/* --- opções --------------------------------------------------------------- */
.rx-options { display: grid; gap: 10px; margin: 24px 0 0; }
.rx-opt {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--paper); font-size: 1.02rem; line-height: 1.4; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.rx-opt:hover { border-color: var(--navy-muted); }
.rx-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Marcador desenhado à mão para ficar igual em iOS e Android. */
.rx-mark {
  flex: 0 0 22px; width: 22px; height: 22px; border: 2px solid #c2c9d6;
  border-radius: 50%; position: relative; transition: border-color .14s ease;
}
.rx-opt.multi .rx-mark { border-radius: 6px; }
.rx-opt input:checked ~ .rx-mark { border-color: var(--green-deep); }
.rx-opt input:checked ~ .rx-mark::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: inherit; background: var(--green-deep);
}
.rx-opt:has(input:checked) { border-color: var(--green-deep); background: var(--green-tint); }
.rx-opt:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }

/* --- navegação ------------------------------------------------------------ */
.rx-nav { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rx-back {
  background: none; border: 0; padding: 6px 0; font: inherit; font-size: .95rem;
  color: var(--navy-muted); cursor: pointer; text-decoration: underline;
}
.rx-back:hover { color: var(--navy); }

/* --- contato -------------------------------------------------------------- */
.rx-consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .93rem; line-height: 1.5; color: var(--navy-soft);
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 15px 17px;
  cursor: pointer; margin-bottom: 20px;
}
.rx-consent input { margin: 3px 0 0; accent-color: var(--green-deep); flex: 0 0 auto;
                    width: 18px; height: 18px; }
.rx-error { color: #9b2222; font-size: .89rem; margin: 6px 0 0; font-weight: 500; }
.rx-full { width: 100%; }

/* --- resultado ------------------------------------------------------------ */
.rx-result-head { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 26px; }
.rx-result-head h1 { font-size: clamp(1.5rem, 5.5vw, 2rem); margin-bottom: .35em; }
.rx-badge {
  display: inline-block; background: var(--green-tint); color: #1d5a19;
  border-radius: 99px; padding: 5px 14px; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px;
}
.rx-dor { font-size: 1.12rem; color: var(--navy-soft); margin: 0; }

.rx-block { margin-bottom: 34px; }
.rx-block > h2 {
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-muted); margin-bottom: 16px;
}

.rx-findings { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.rx-finding {
  border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: var(--radius); padding: 18px 20px; background: var(--paper);
}
.rx-finding p { margin: 0; }
.rx-finding .rx-tag {
  display: block; font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy-muted); margin-bottom: 6px;
}

/* --- frase-caminho e nota da empresa enxuta ------------------------------- */
.rx-caminho {
  margin: 14px 0 0; font-size: 1.02rem; font-weight: 600; color: var(--navy);
  border-left: 4px solid var(--green); padding-left: 15px;
}
.rx-enxuta {
  background: var(--green-tint); border: 1px solid #bcdcb8;
  border-radius: var(--radius); padding: 18px 20px;
}
.rx-enxuta p { margin: 0; font-size: .97rem; color: #1d5a19; }

/* --- radar ---------------------------------------------------------------- */
/* SVG desenhado pelo raio-x.js. O viewBox cuida da escala: a figura acompanha
   a largura da tela sem media query, e os rótulos vão junto. */
.rx-radar { margin: 0 0 18px; }
.rx-radar svg { display: block; width: 100%; height: auto; overflow: visible; }
.rx-web    { fill: none; stroke: var(--line); stroke-width: 1; }
.rx-spoke  { stroke: var(--line); stroke-width: 1; }
.rx-area   { fill: rgba(59,170,53,.22); stroke: var(--green-deep); stroke-width: 2;
             stroke-linejoin: round; }
.rx-dot    { fill: var(--green-deep); }
.rx-axis-label {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  fill: var(--navy-soft);
}
.rx-axis-value { font-weight: 700; fill: var(--green-deep); }

/* --- legenda por categoria ------------------------------------------------ */
.rx-legend {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.rx-legend li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  background: var(--paper); padding: 12px 16px; font-size: .96rem;
}
.rx-legend strong { font-size: 1.05rem; color: var(--navy); }
.rx-legend-note { font-size: .86rem; color: var(--navy-muted); margin: 12px 0 0; }

.rx-cta { border-top: 1px solid var(--line); padding-top: 28px; }
.rx-cta .btn { margin: 4px 0 14px; }
.rx-cta-note { font-size: .93rem; color: var(--navy-muted); margin: 0; }

/* --- avisos --------------------------------------------------------------- */
.rx-saving { font-size: .86rem; color: var(--navy-muted); margin-top: 22px; }

@media (min-width: 700px) {
  .rx { padding: 44px 0 96px; }
  .rx-wrap { padding: 0 24px; }
}