/* Diagnóstico Tá Disposto? (tela cheia) e o anel de nota, que o hero também usa */

.anel { position: relative; aspect-ratio: 1; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.anel-fundo { fill: none; stroke: var(--papel-3); stroke-width: 11; }
.anel-valor {
  fill: none; stroke: var(--azul); stroke-width: 11; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v, 0));
  transition: stroke-dashoffset 1.5s var(--ease);
}
.anel-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-display); font-variation-settings: "wdth" 70; font-weight: 800;
  letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums;
}
.anel[data-faixa="critico"] .anel-valor { stroke: var(--alerta); }
.anel[data-faixa="atencao"] .anel-valor { stroke: var(--atencao); }
.anel[data-faixa="forte"] .anel-valor { stroke: var(--verde); }
.js .hero-card .anel-valor { stroke-dashoffset: 100; }
.pronto .hero-card .anel-valor { stroke-dashoffset: calc(100 - var(--v)); transition-delay: .9s; }

html.qz-aberto, html.qz-aberto body { overflow: hidden; }

.qz {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column;
  background: var(--papel);
  opacity: 0; transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.qz[hidden] { display: none; }
.qz.aberto { opacity: 1; transform: none; }

.qz-topo {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--lado); padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--linha);
}
.qz-quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qz-quem img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--branco), 0 0 0 3px var(--linha); }
.qz-quem strong {
  display: block; font-family: var(--f-display); font-variation-settings: "wdth" 84; font-weight: 750; font-size: 16.5px;
  color: var(--tinta); line-height: 1.15; white-space: nowrap;
}
.qz-quem strong .serifa { font-size: 1.12em; color: var(--azul); font-variation-settings: normal; }
.qz-quem div > span { display: block; font-size: 13px; color: var(--apagado); }
.qz-fechar {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); transition: background-color .2s, transform .2s;
}
.qz-fechar:hover { background: var(--papel-2); transform: rotate(90deg); }
.qz-fechar svg { width: 20px; height: 20px; }

/* Progresso em blocos */
.qz-progresso { flex: none; padding: 14px var(--lado) 0; }
.qz-progresso[hidden] { display: none; }
.qz-blocos { max-width: 760px; margin: 0 auto; display: flex; gap: 6px; }
.qz-bloco { min-width: 0; }
.qz-bloco i { display: block; height: 4px; border-radius: 4px; background: var(--papel-3); overflow: hidden; }
.qz-bloco i::before {
  content: ""; display: block; height: 100%; width: calc(var(--f, 0) * 100%); background: var(--tinta);
  border-radius: inherit; transition: width .5s var(--ease);
}
.qz-bloco.atual i::before { background: var(--azul); }
.qz-bloco span {
  display: block; margin-top: 7px; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; color: var(--apagado-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s;
}
.qz-bloco.atual span { color: var(--azul); }
.qz-bloco.feito span { color: var(--tinta); }
@media (max-width: 640px) {
  .qz-bloco span { display: none; }
  .qz-bloco.atual span { display: block; overflow: visible; }
}

/* Palco */
.qz-palco { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.qz-tela {
  max-width: 680px; margin: 0 auto; padding: clamp(28px, 6vh, 64px) var(--lado) calc(40px + env(safe-area-inset-bottom));
  animation: qz-entra .5s var(--ease) both;
}
.qz-tela.volta { animation-name: qz-volta; }
@keyframes qz-entra { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes qz-volta { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

/* Intro */
.qz-intro { text-align: center; padding-top: clamp(32px, 9vh, 96px); }
.qz-intro-foto { width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--branco), 0 0 0 5px var(--linha), var(--sombra-g); }
.qz-intro h2 {
  margin-top: 28px; font-family: var(--f-display); font-variation-settings: "wdth" 74; font-weight: 800;
  font-size: clamp(40px, 7vw, 64px); line-height: .95; letter-spacing: -.025em; color: var(--tinta);
}
.qz-intro h2 .serifa { display: block; font-size: 1.1em; color: var(--azul); font-variation-settings: normal; letter-spacing: -.01em; }
.qz-intro p.qz-intro-sub { margin: 20px auto 0; max-width: 30em; font-size: 17.5px; color: var(--apagado); }
.qz-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 34px; padding: 0; list-style: none; }
.qz-chips li { padding: 7px 13px; border-radius: 999px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); font-size: 13.5px; font-weight: 600; color: var(--texto); }
.qz-intro .bt { min-width: 240px; }
.qz-priv { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 18px; font-size: 13.5px; color: var(--apagado-2); }
.qz-priv svg { width: 15px; height: 15px; }

/* Pergunta */
.qz-cont { font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado-2); }
.qz-cont b { color: var(--azul); font-weight: 700; }
.qz-perg {
  margin-top: 12px; font-family: var(--f-display); font-variation-settings: "wdth" 84; font-weight: 720;
  font-size: clamp(27px, 4.4vw, 40px); line-height: 1.08; letter-spacing: -.02em; color: var(--tinta);
}
.qz-perg:focus { outline: none; }
.qz-ajuda { margin-top: 10px; font-size: 15.5px; color: var(--apagado); }
.qz-opcoes { display: grid; gap: 10px; margin-top: 28px; }
.qz-op {
  position: relative; display: grid; grid-template-columns: 32px 1fr 24px; align-items: center; gap: 14px;
  width: 100%; min-height: 62px; padding: 12px 16px; border: 0; border-radius: var(--raio);
  background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha);
  text-align: left; color: var(--tinta);
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.qz-op:hover { box-shadow: inset 0 0 0 1.5px var(--linha-forte); }
.qz-op:active { transform: scale(.99); }
.qz-tecla {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); font-family: var(--f-mono); font-size: 13px; color: var(--apagado);
  transition: background-color .2s, color .2s;
}
.qz-op-txt { display: flex; flex-direction: column; min-width: 0; }
.qz-op-txt strong { font-weight: 620; font-size: 16.5px; line-height: 1.3; }
.qz-op-txt small { margin-top: 2px; font-size: 13.5px; color: var(--apagado); }
.qz-marca {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--linha-forte); color: #fff; transition: background-color .2s, box-shadow .2s;
}
.qz-marca svg { width: 14px; height: 14px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s var(--ease); }
.qz-op[aria-pressed="true"] { background: var(--azul-nevoa); box-shadow: inset 0 0 0 2px var(--azul); }
.qz-op[aria-pressed="true"] .qz-tecla { background: var(--azul); color: #fff; box-shadow: none; }
.qz-op[aria-pressed="true"] .qz-marca { background: var(--azul); box-shadow: none; }
.qz-op[aria-pressed="true"] .qz-marca svg { opacity: 1; transform: none; }

.qz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
.qz-voltar {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 6px; border: 0; background: none;
  font-weight: 600; font-size: 15px; color: var(--apagado);
}
.qz-voltar:hover { color: var(--tinta); }
.qz-voltar svg { width: 18px; height: 18px; }
.qz-dica { font-size: 12.5px; color: var(--apagado-2); }
.qz-dica kbd { font-family: var(--f-mono); font-size: 11.5px; padding: 1px 5px; border-radius: 5px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); }
@media (hover: none) { .qz-dica { display: none; } }
@media (max-width: 520px) {
  .qz-op { grid-template-columns: 1fr 24px; min-height: 58px; padding: 12px 14px; }
  .qz-tecla { display: none; }
}

/* Contato */
.qz-gate { padding-top: clamp(28px, 6vh, 64px); }
.qz-previa {
  position: relative; display: flex; align-items: center; gap: 18px; padding: 18px; margin-bottom: 28px;
  border-radius: var(--raio-g); background: var(--tinta); color: #e8e6e0; overflow: hidden;
}
.qz-previa .anel { width: 82px; flex: none; filter: blur(5px); }
.qz-previa .anel-fundo { stroke: rgba(255, 255, 255, .12); }
.qz-previa .anel-num { color: #fff; font-size: 26px; }
.qz-previa strong { display: block; font-family: var(--f-display); font-variation-settings: "wdth" 84; font-weight: 720; font-size: 20px; color: #fff; }
.qz-previa span { display: block; margin-top: 4px; font-size: 14.5px; color: #9aa1b2; }
.qz-previa .qz-cadeado { position: absolute; left: 47px; top: 50%; translate: -50% -50%; width: 26px; height: 26px; color: #fff; }
.qz-gate h2 {
  font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 760;
  font-size: clamp(30px, 4.6vw, 42px); line-height: 1.04; letter-spacing: -.02em; color: var(--tinta);
}
.qz-gate > p { margin-top: 10px; color: var(--apagado); font-size: 16.5px; }
.qz-form { display: grid; gap: 14px; margin-top: 26px; }
.campo label { display: block; font-size: 14px; font-weight: 650; color: var(--tinta); margin-bottom: 7px; }
.campo input {
  width: 100%; height: 56px; padding: 0 16px; border: 0; border-radius: var(--raio);
  background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha-forte);
  font-size: 17px; color: var(--tinta); transition: box-shadow .2s;
}
.campo input::placeholder { color: var(--apagado-2); }
.campo input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--azul); }
.campo.erro input { box-shadow: inset 0 0 0 2px var(--alerta); }
.campo-erro { display: none; margin-top: 6px; font-size: 13.5px; color: var(--alerta); font-weight: 550; }
.campo.erro .campo-erro { display: block; }
.qz-aceite { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14.5px; color: var(--apagado); cursor: pointer; }
.qz-aceite input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--azul); }
.qz-aceite.erro { color: var(--alerta); }
.qz-form .bt { margin-top: 6px; width: 100%; }

/* Calculando */
.qz-calc { text-align: center; padding-top: clamp(60px, 16vh, 160px); }
.qz-calc .anel { width: 120px; margin: 0 auto; }
.qz-calc .anel svg { animation: gira 1.1s linear infinite; }
.qz-calc .anel-valor { stroke-dashoffset: 72; transition: none; }
@keyframes gira { to { transform: rotate(270deg); } }
.qz-calc h2 { margin-top: 28px; font-family: var(--f-display); font-variation-settings: "wdth" 84; font-weight: 720; font-size: 26px; color: var(--tinta); }
.qz-calc ul { list-style: none; margin: 22px auto 0; padding: 0; display: inline-grid; gap: 10px; text-align: left; }
.qz-calc li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--apagado); opacity: 0; animation: aparece .4s var(--ease) forwards; }
.qz-calc li svg { width: 18px; height: 18px; color: var(--azul); }
.qz-calc li:nth-child(1) { animation-delay: .15s; }
.qz-calc li:nth-child(2) { animation-delay: .45s; }
.qz-calc li:nth-child(3) { animation-delay: .75s; }
.qz-calc li:nth-child(4) { animation-delay: 1.05s; }
.qz-calc li:nth-child(5) { animation-delay: 1.35s; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Resultado */
.qz-tela.qz-res { max-width: 780px; padding-top: clamp(20px, 4vh, 40px); }
.res-topo {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  padding: clamp(22px, 4vw, 36px); border-radius: 26px; background: var(--tinta); color: #e8e6e0;
}
.res-topo::after {
  content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 82, 224, .45), transparent); pointer-events: none;
}
.res-topo .anel { width: clamp(124px, 22vw, 168px); }
.res-topo .anel-fundo { stroke: rgba(255, 255, 255, .1); }
.res-topo .anel-num { color: #fff; font-size: clamp(42px, 7vw, 58px); }
.res-topo .anel-num small { display: block; font-size: .3em; font-weight: 600; color: #8f96a8; letter-spacing: .02em; margin-top: -.2em; text-align: center; }
.res-ola { font-size: 14.5px; color: #9aa1b2; }
.res-faixa { display: inline-block; margin-top: 10px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.res-perfil-rot { display: block; margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-claro); }
.res-perfil { margin-top: 4px; font-family: var(--f-serifa); font-style: italic; font-size: clamp(34px, 5.4vw, 48px); line-height: 1; color: #fff; }
.res-linha { margin-top: 10px; font-size: 16.5px; color: #c9ccd6; position: relative; z-index: 1; }
@media (max-width: 560px) {
  .res-topo { grid-template-columns: 1fr; justify-items: start; gap: 18px; }
}

.faixa-critico { background: var(--alerta-nevoa); color: var(--alerta); }
.faixa-atencao { background: var(--atencao-nevoa); color: var(--atencao); }
.faixa-bom { background: var(--azul-nevoa); color: var(--azul); }
.faixa-forte { background: var(--verde-nevoa); color: var(--verde); }

.res-bloco { margin-top: 40px; }
.res-bloco > h3 {
  font-family: var(--f-display); font-variation-settings: "wdth" 84; font-weight: 720; font-size: 24px;
  letter-spacing: -.012em; color: var(--tinta); margin-bottom: 16px;
}
.res-pilares { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.res-pilares li {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center;
  padding: 16px 18px; border-radius: var(--raio); background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha);
}
.rp-nome { font-weight: 680; font-size: 16.5px; color: var(--tinta); }
.rp-nome small { display: block; font-weight: 450; font-size: 13.5px; color: var(--apagado); margin-top: 1px; }
.rp-valor { display: flex; align-items: center; gap: 10px; }
.rp-valor b { font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 800; font-size: 26px; color: var(--tinta); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.rp-valor span { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rp-barra { grid-column: 1 / -1; height: 7px; border-radius: 7px; background: var(--papel-2); overflow: hidden; }
.rp-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--azul); transition: width 1.2s var(--ease); }
.rp-barra i.critico { background: var(--alerta); }
.rp-barra i.atencao { background: var(--atencao); }
.rp-barra i.forte { background: var(--verde); }
.res-pilares li.fraco { box-shadow: inset 0 0 0 1.5px var(--alerta); }
.rp-fraco { grid-column: 1 / -1; margin-top: -2px; font-size: 13px; font-weight: 650; color: var(--alerta); }

.res-texto p { font-size: 17px; color: var(--texto); }
.res-texto p + p { margin-top: 12px; }
.res-texto .res-pj { padding: 14px 16px; border-radius: var(--raio); background: var(--azul-nevoa); color: var(--azul-escuro); font-weight: 550; font-size: 15.5px; }

.res-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: rp; }
.res-passos li {
  counter-increment: rp; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 18px; border-radius: var(--raio); background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha);
}
.res-passos li::before {
  content: counter(rp); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  background: var(--tinta); color: var(--papel); font-family: var(--f-display); font-weight: 800; font-size: 18px;
}
.res-passos strong { display: block; font-size: 16.5px; color: var(--tinta); }
.res-passos p { margin-top: 4px; font-size: 15px; color: var(--apagado); line-height: 1.5; }

.res-hist { padding: 24px; border-radius: var(--raio-g); background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--linha); }
.res-hist .hist-tag { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.res-hist h4 { margin-top: 10px; font-family: var(--f-display); font-variation-settings: "wdth" 84; font-weight: 700; font-size: 22px; line-height: 1.12; color: var(--tinta); }
.res-hist p { margin-top: 10px; font-size: 15.5px; color: var(--apagado); }
.res-hist p.fecho { color: var(--tinta); font-weight: 620; }

.res-cta {
  margin-top: 40px; padding: clamp(24px, 4vw, 36px); border-radius: 26px; background: var(--azul); color: #fff; text-align: center;
  position: relative; overflow: hidden;
}
.res-cta img { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.res-cta h3 { margin-top: 16px; font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 780; font-size: clamp(28px, 4.4vw, 38px); line-height: 1.04; letter-spacing: -.02em; }
.res-cta p { margin: 12px auto 0; max-width: 30em; color: rgba(255, 255, 255, .84); font-size: 16.5px; }
.res-cta .bt { margin-top: 24px; width: min(100%, 420px); white-space: normal; text-align: center; min-height: 58px; font-size: 16.5px; }
.res-cta small { display: block; margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.res-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.res-acoes .bt svg { width: 17px; height: 17px; }
.res-aviso { margin-top: 22px; font-size: 12.5px; color: var(--apagado-2); text-align: center; max-width: 40em; margin-left: auto; margin-right: auto; }
.res-copiado { font-size: 13.5px; color: var(--verde); font-weight: 600; text-align: center; margin-top: 10px; min-height: 1.3em; }