/* Diagnóstico app */
.diag-head { padding: 150px 0 56px; }
@media (max-width: 760px) { .diag-head { padding: 116px 0 40px; } }

/* Hub */
.hub { display: grid; border-top: 1px solid var(--line-soft); }
.hub-row {
  display: grid; grid-template-columns: 160px 1fr auto; grid-template-rows: auto auto; gap: 8px 32px;
  padding: 36px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink);
  transition: padding-left .3s;
}
.hub-row:hover { color: var(--ink); padding-left: 10px; }
.hub-row .label { grid-row: 1 / 3; padding-top: 10px; }
.hub-title { font-size: clamp(24px, 3vw, 36px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; }
.hub-status { grid-column: 2; }
.hub-go { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--iris-soft); white-space: nowrap; }
@media (max-width: 760px) {
  .hub-row { grid-template-columns: 1fr; }
  .hub-row .label, .hub-status, .hub-go { grid-column: 1; grid-row: auto; padding-top: 0; }
}

.locked { padding: 48px 0; border-top: 1px solid var(--line-soft); }

/* Cross table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cross { width: 100%; min-width: 560px; border-collapse: collapse; }
.cross th, .cross td { text-align: left; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cross thead th { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
.cross tbody th { font-weight: 400; font-size: 18px; }
.cell-v { display: block; font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.cell-bar { display: block; height: 4px; border-radius: 2px; background: var(--line-soft); margin: 8px 0; max-width: 180px; position: relative; overflow: hidden; }
.cell-bar i { position: absolute; inset: 0 auto 0 0; background: var(--iris-soft); border-radius: 2px; }
.cell-gap { font-size: 12px; color: var(--ash); }

/* Question screen */
.q-screen { min-height: 100svh; padding: 110px 0 64px; }
.q-wrap { max-width: 860px; }
.q-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.q-exit { min-height: 40px; font-size: 12px; color: var(--ash); }
.progress { height: 3px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--iris); transition: width .4s cubic-bezier(.16,1,.3,1); }
.q-title { margin: 14px 0 36px; max-width: 760px; }
.opts { display: grid; gap: 10px; }
.opt {
  display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 14px;
  width: 100%; text-align: left; min-height: 60px;
  padding: 14px 20px; border-radius: 18px;
  border: 1px solid var(--line); background: transparent;
  font-size: clamp(16px, 1.5vw, 18px); font-weight: 300; line-height: 1.4; color: var(--ink);
  transition: border-color .2s, background .2s, transform .15s;
}
.opt:hover { border-color: var(--iris-soft); background: rgba(128, 82, 255, 0.06); }
.opt:active { transform: scale(.995); }
.opt.selected { border-color: var(--iris); background: rgba(128, 82, 255, 0.16); }
.opt-n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ash);
}
.opt.selected .opt-n { background: var(--iris); border-color: var(--iris); color: #fff; }
.q-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

/* Forms */
.form { display: grid; gap: 22px; max-width: 560px; margin-top: 36px; }
.field { display: grid; gap: 10px; }
.field-label { font-size: 14px; font-weight: 400; color: var(--mist); }
.field-box {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 16px; padding: 0 18px;
  transition: border-color .2s;
}
.field-box:focus-within { border-color: var(--iris-soft); }
.field-box .unit { color: var(--ash); font-size: 16px; }
.field input {
  flex: 1; min-width: 0; height: 56px; background: transparent; border: 0; outline: 0;
  color: var(--ink); font: inherit; font-size: 17px; font-weight: 300;
}
.field input::placeholder { color: #5f5f5f; }
.field input[aria-invalid="true"] { color: #ffd0d0; }
.field-err { font-size: 13px; color: var(--danger); min-height: 0; }
.field-err:empty { display: none; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--mist); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--iris); }

/* Result */
.result-head { padding-bottom: 24px; }
.kpis { display: flex; flex-wrap: wrap; gap: 28px 64px; margin-top: 48px; }
.kpis > div { display: grid; gap: 6px; }
.kpi-v { font-size: clamp(44px, 6vw, 72px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-v.up { color: var(--good); }
.kpi-v.down { color: var(--saffron); }

.result-chart { padding-top: 96px; padding-bottom: 24px; }
.result-radar { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .result-radar { grid-template-columns: 1fr; } }
.legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 24px; font-size: 14px; color: var(--mist); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg-you, .lg-ref { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.lg-you { background: rgba(128, 82, 255, 0.35); border: 2px solid var(--iris-soft); }
.lg-ref { background: rgba(255, 184, 41, 0.1); border: 2px dashed var(--saffron); }

.money, .priority { padding-top: 96px; }
.money-anchor { margin-top: 18px; font-size: clamp(56px, 10vw, 128px); font-weight: 400; letter-spacing: -0.05em; line-height: 1; color: var(--saffron); font-variant-numeric: tabular-nums; }
.money-anchor span { font-size: clamp(20px, 2.4vw, 32px); letter-spacing: -0.02em; color: var(--mist); }
.money-text { margin-top: 12px; max-width: 900px; }
.scenarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0 clamp(32px, 5vw, 80px); margin-top: 48px; }
.scenario { display: grid; gap: 8px; padding: 26px 0; border-top: 1px solid var(--line-soft); }
.scenario strong { font-size: clamp(28px, 3.4vw, 42px); font-weight: 400; letter-spacing: -0.03em; color: var(--ink); }
.money-source { margin-top: 12px; max-width: 760px; padding-left: 14px; border-left: 2px solid var(--iris); }
.dims-res { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 5vw, 80px); padding-top: 96px; }
@media (max-width: 860px) { .dims-res { grid-template-columns: 1fr; } }
.dim-res { padding: 36px 0; border-top: 1px solid var(--line-soft); }
.dim-res.is-first .h3 { color: var(--iris-soft); }
.dim-res-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.dim-score { font-size: 36px; font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dim-score small { font-size: 15px; color: var(--ash); margin-left: 2px; }
.dim-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.tag { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 9999px; border: 1px solid var(--line); }
.tag.tone-good { color: var(--good); border-color: rgba(63, 209, 168, .4); }
.tag.tone-mid { color: var(--mist); }
.tag.tone-bad { color: var(--saffron); border-color: rgba(255, 184, 41, .4); }
.gap { font-size: 13px; color: var(--ash); }
.gap.up { color: var(--good); }
.gap.down { color: var(--saffron); }
.move { margin-top: 18px; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--ink); }
.move .label { display: block; margin-bottom: 6px; font-size: 11px; }

.result-cta { padding-top: 120px; }
.other-fns { padding: 96px var(--gutter) 120px; }