/* =============================================
   DIAGNÓSTICO — tela imersiva, pergunta a pergunta
   Creme + tinta, sem enfeite. As opções são linhas
   editoriais; a seleção é um bloco de tinta.
   ============================================= */

html, body { height: 100%; }
.dx {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
}
/* Resultado sobre tinta: além do fundo, os tokens de leitura viram os de
   .on-ink (sem remapear --bg, que o modal e os hovers claros ainda usam).
   O modal do gate volta ao claro com .on-paper no próprio <dialog>. */
.dx:has(.dx-result.is-active) {
  background: var(--ink);
  --fg: var(--on-ink);
  --fg-soft: var(--on-ink-60);
  --fg-faint: var(--on-ink-35);
  --hair: var(--on-ink-line);
  --hair-strong: rgba(252, 247, 232, 0.4);
  color: var(--on-ink);
}

/* ---------- barra topo ---------- */
.dx-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--gutter);
  background: transparent;
}
.dx:has(.dx-result.is-active) .dx-bar { color: var(--cream); }
.dx:has(.dx-result.is-active) .dx-brand__x { color: var(--on-ink-60); }
.dx:has(.dx-result.is-active) .dx-close:focus-visible { outline-color: var(--cream); }
.dx-brand { font-weight: var(--fw-semibold); font-size: var(--fz-body); letter-spacing: -0.01em; }
.dx-brand__x { color: var(--fg-faint); font-weight: var(--fw-regular); }
/* fechar no padrão de botão (18/08): lima com obsidian, hover invertido */
.dx-close {
  display: inline-flex; align-items: center; gap: 0;
  border: 0; border-radius: var(--radius-full);
  padding: 10px; background: var(--accent); color: var(--accent-text);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              gap var(--t-base) var(--ease), padding var(--t-base) var(--ease);
}
.dx-close__icon { width: 20px; height: 20px; flex: none; }
.dx-close__txt {
  max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap;
  font-size: var(--fz-small); line-height: 1; font-weight: var(--fw-medium);
  transition: max-width var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .dx-close:hover { background: var(--ink); color: var(--bg); gap: var(--sp-2); padding-right: 16px; }
  .dx-close:hover .dx-close__txt { max-width: 90px; opacity: 1; }
}
.dx-close:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* progresso fino da v2, colado na base da barra */
/* A barra vive acima do conteúdo da pergunta ativa, na largura do
   conteúdo (decisão da Aline, 18/08). O JS move o elemento pra dentro
   do painel ativo; fora de uma pergunta (intro, resultado) não aparece. */
.dx-progress { display: none; }
.dx-panel__inner > .dx-progress {
  display: block; grid-column: 1 / -1;
  height: 2px; margin-bottom: clamp(28px, 5vh, 48px);
  background: var(--hair);
}
.dx-progress span {
  display: block; height: 100%; width: 0%;
  background: var(--fg);
  transition: width var(--t-slow) var(--ease-out);
}


/* ---------- palco ---------- */
.dx-stage { position: relative; overflow: hidden; overflow: clip; display: flex; }
.page-enter main.dx-stage { min-height: 0; }
.dx-panel {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center;
  padding: var(--sp-12) var(--gutter);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.dx-panel.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  position: relative; flex: 1 1 auto; min-height: 100%;
}
.dx-panel__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; }

/* ---------- intro ---------- */
.dx-intro__kicker { display: block; margin-bottom: var(--sp-8); }
/* título display em caixa baixa, tracking apertado do DS (Space Grotesk) */
/* igual ao hero da landing: display, regular (400), tracking -0.04em, lh 0.94 */
.dx-intro__title { font-family: var(--display); font-weight: var(--fw-regular); font-size: clamp(2rem, 6vw, 5.3rem); max-width: 18ch; line-height: 0.94; text-transform: none; letter-spacing: -0.04em; }
/* mesma família e ritmo de leitura do hero da landing */
.dx-intro__sub { margin-top: var(--sp-8); color: var(--fg-soft); font-family: var(--font); font-size: 24px; font-weight: var(--fw-regular); line-height: var(--lh-lead); max-width: 54ch; }
@media (max-width: 600px) {
  .dx-intro__sub { font-size: 18px; }
}
.dx-intro__meta { list-style: none; margin-top: var(--sp-12); display: flex; gap: var(--sp-12); flex-wrap: wrap; }
.dx-intro__meta li { display: flex; flex-direction: column; }
.dx-intro__meta b { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.dx-intro__meta span { font-size: var(--fz-meta); color: var(--fg-soft); margin-top: var(--sp-1); }
.dx-intro__cta { margin-top: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.dx-intro__resume { font-size: var(--fz-small); line-height: var(--lh-reading); color: var(--fg-faint); max-width: 40ch; }

/* ---------- pergunta ---------- */
.dx-q__layout { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 920px) { .dx-q__layout { grid-template-columns: 0.95fr 1.05fr; column-gap: var(--sp-24); row-gap: var(--sp-8); } }
/* controles morando no layout da pergunta: ocupam a largura da coluna
   das opções, voltar na esquerda e continuar na direita, rente às
   bordas da lista */
.dx-q__layout .dx-foot { max-width: none; margin: 0; padding: 0; }
.dx-q__layout .dx-foot .dx-nav { width: 100%; justify-content: space-between; }
@media (min-width: 920px) { .dx-q__layout .dx-foot { grid-column: 2; } }
.dx-q__index { font-size: var(--fz-meta); color: var(--fg-faint); }
.dx-q__index b { color: var(--fg); font-weight: var(--fw-semibold); }
/* assunto da pergunta como eyebrow: o badge "Neutra" do DS, igual ao
   .tag da landing (uppercase micro, borda fina, sem bolinha) */
.dx-q__dim {
  display: inline-flex; align-items: center;
  margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-3); line-height: 1.3;
  border: 1px solid var(--hair); border-radius: var(--radius-full);
  font-size: 14px; font-weight: var(--fw-regular);
  letter-spacing: 0; text-transform: none; color: var(--fg);
}
.dx-q__text {
  font-family: var(--display); font-weight: var(--fw-regular);
  font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: var(--lh-snug); letter-spacing: var(--ls-h);
  margin-top: var(--sp-5); max-width: 22ch; color: var(--fg);
}

/* opções: linhas editoriais, seleção vira bloco de tinta */
.dx-opts { display: flex; flex-direction: column; }
.dx-opt {
  display: flex; align-items: center; gap: var(--sp-5);
  width: 100%; text-align: left; font: inherit; font-size: var(--fz-body); color: var(--fg-soft);
  background: transparent; border: 0; border-bottom: 1px solid var(--hair);
  padding: var(--sp-5) var(--sp-3);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              padding var(--t-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .dx-opt:hover { color: var(--accent-text); background: var(--accent); border-color: var(--accent); padding-left: var(--sp-5); } }
.dx-opt:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.dx-opt.is-on { background: var(--ink); border-color: var(--ink); color: var(--cream); padding-left: var(--sp-5); }
.dx-opt__lvl {
  flex: none; min-width: 1.6em;
  font-family: var(--display); font-size: var(--fz-h3); line-height: 1;
  color: var(--fg-faint);
  transition: color var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .dx-opt:hover .dx-opt__lvl { color: var(--accent-text); } }
.dx-opt.is-on .dx-opt__lvl { color: var(--cream); }
.dx-opt__text { flex: 1; line-height: 1.4; }
.dx-opt__check {
  flex: none; width: 20px; height: 20px;
  opacity: 0; transform: scale(0.5);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.dx-opt__check svg { width: 100%; height: 100%; display: block; }
.dx-opt.is-on .dx-opt__check { opacity: 1; transform: scale(1); }

/* ---------- controles ---------- */
.dx-foot {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter) var(--sp-10);
  position: relative; z-index: 5;
}
.dx-nav { display: inline-flex; align-items: center; gap: var(--sp-3); }
/* botão padrão ditado pela Aline (18/08): fundo verde (lima) com fonte
   obsidian; hover inverte pra obsidian com fonte greige. Porte único,
   o mesmo do .btn da base (pílula 2.5rem, display, fz-small) */
.dx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.4375rem; padding-inline: 2rem; border-radius: var(--radius-full);
  font-family: var(--display); font-size: 1.25rem; font-weight: var(--fw-medium); line-height: 1;
  border: 0; background: var(--accent); color: var(--accent-text);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .dx-btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); } }
.dx-btn:active:not(:disabled) { transform: scale(0.98); }
.dx-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.dx-btn:disabled { opacity: 0.3; pointer-events: none; }

/* ---------- resultado ---------- */
.dx-panel.dx-result { padding: 0; align-items: stretch; }
.dx-result > .dx-panel__inner { max-width: none; }
.dx-result__hero {
  position: relative; overflow: hidden;
  min-height: clamp(620px, 76svh, 860px);
  display: flex; align-items: center;
  background: var(--ink); color: var(--cream);
}
/* sem brilho atrás do radar (18/08, decisão da Aline): fundo grafite chapado */
.dx-result__inner,
.dx-result__content {
  width: min(calc(100% - var(--gutter) - var(--gutter)), var(--maxw));
  margin-inline: auto;
}
.dx-result__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(var(--sp-10), 6vw, var(--sp-24)); align-items: center;
}
.dx-result__eyebrow {
  margin-bottom: var(--sp-8); color: rgba(252, 247, 232, 0.7);
  font-size: var(--fz-small); font-weight: var(--fw-regular);
}
.dx-result__lockup { display: grid; gap: var(--sp-6); }
.dx-result__levelname {
  font-family: var(--display); font-weight: var(--fw-regular);
  font-size: clamp(3.3rem, 7vw, 7rem); line-height: 0.9; letter-spacing: -0.05em;
  color: var(--cream); text-wrap: balance;
}
.dx-result__grade { display: flex; flex-direction: column; gap: var(--sp-1); color: rgba(252, 247, 232, 0.7); }
.dx-result__grade > span { font-size: var(--fz-small); }
.dx-result__grade strong { font-family: var(--display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: var(--fw-light); line-height: 1; color: var(--accent); }
.dx-result__grade b { font: inherit; }
.dx-result__viz { display: grid; place-items: center; min-width: 0; }
.dx-radar { width: clamp(620px, 48vw, 720px); max-width: 100%; margin-inline: auto; }
/* radar encostado à direita do container no layout de duas colunas
   (18/08, decisão da Aline); no mobile segue centralizado */
@media (min-width: 920px) {
  .dx-result__viz { justify-items: end; }
  .dx-radar { margin-inline: auto 0; }
}
.dx-radar svg { width: 100%; height: auto; overflow: visible; }
.dx-radar__grid { fill: none; stroke: rgba(252, 247, 232, 0.18); stroke-width: 1; }
.dx-radar__axis { stroke: rgba(252, 247, 232, 0.12); stroke-width: 1; }
.dx-radar__shape {
  fill: color-mix(in srgb, var(--accent) 68%, transparent);
  stroke: var(--cream); stroke-width: 2; stroke-linejoin: round;
}
.dx-radar__dot { fill: var(--cream); }
.dx-radar__label { font-family: var(--font); font-size: 12px; fill: rgba(252, 247, 232, 0.72); }
.dx-radar__label.is-low { fill: var(--accent); font-weight: var(--fw-medium); }

.dx-result__content { padding-block: clamp(var(--sp-12), 7vw, var(--sp-24)) var(--sp-20); }
.dx-result__modules { display: grid; grid-template-columns: 0.9fr 1fr 1.35fr; gap: clamp(var(--sp-8), 4vw, var(--sp-16)); }
.dx-result__module { min-width: 0; border-top: 1px solid var(--hair-strong); padding-top: var(--sp-5); }
.dx-result__module-label,
.dx-weaknesses__label,
.dx-initial-action__label { color: var(--fg-soft); font-size: var(--fz-small); font-weight: var(--fw-regular); margin-bottom: var(--sp-5); }
.dx-result__desc {
  color: var(--fg); max-width: 54ch;
  font-family: var(--font); font-size: 22px; font-weight: var(--fw-regular); line-height: var(--lh-lead);
}
.dx-result__desc:not([hidden]) + .dx-result__disclaimer { margin-top: var(--sp-5); }
.dx-result__disclaimer { color: var(--fg-soft); font-size: var(--fz-small); line-height: var(--lh-reading); max-width: 42ch; }
.dx-weaknesses ul { display: grid; list-style: none; }
.dx-weaknesses li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--hair);
  color: var(--fg); font-family: var(--display); font-size: var(--fz-h3); line-height: 1.2;
}
.dx-weaknesses li:first-child { padding-top: 0; }
.dx-weaknesses__score { flex: none; color: var(--fg-soft); font-family: var(--font); font-size: var(--fz-small); font-weight: var(--fw-regular); }
.dx-initial-action [data-initial-action-text] { color: var(--fg); max-width: 36ch; font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.28; letter-spacing: var(--ls-h); }
.dx-result__actions { margin-top: var(--sp-16); display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.dx-result__secondary {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  border: 0; padding-block: var(--sp-2);
  background: transparent; color: inherit;
  font-family: var(--display); font-size: var(--fz-body); font-weight: var(--fw-medium);
}
.dx-result__secondary::after {
  content: ""; position: absolute; right: 0; bottom: var(--sp-2);
  width: 100%; height: 1px; background: currentColor;
  transition: width 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) { .dx-result__secondary:hover::after { width: 0; } }

@media (max-width: 919px) {
  .dx-result__hero { min-height: auto; padding-block: var(--sp-16); }
  .dx-result__inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  .dx-result__head { max-width: 42rem; }
  .dx-result__eyebrow { margin-bottom: var(--sp-5); }
  .dx-radar { width: min(100%, 680px); }
  .dx-result__modules { grid-template-columns: 1fr; gap: var(--sp-10); }
}
@media (max-width: 600px) {
  .dx-result__hero { padding-block: var(--sp-12); }
  .dx-result__levelname { font-size: clamp(3rem, 16vw, 5rem); }
  .dx-result__grade strong { font-size: 2.2rem; }
  .dx-result__content { padding-block: var(--sp-12) var(--sp-16); }
  .dx-result__desc { font-size: 18px; }
  .dx-result__actions { align-items: flex-start; flex-direction: column; margin-top: var(--sp-12); gap: var(--sp-5); }
  .dx-result__actions .btn__label { padding-inline: 1.25rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dx-result__hero *, .dx-radar * { animation: none !important; transition: none !important; }
}

/* rota recomendada */
.dx-route { margin-top: var(--sp-12); background: var(--ink); color: var(--cream); padding: var(--sp-10); }
.dx-route__label { font-size: var(--fz-meta); color: rgba(252, 247, 232, 0.55); margin-bottom: var(--sp-4); }
.dx-route__who {
  font-family: var(--display); letter-spacing: var(--ls-h);
  font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 0.95;
  margin-bottom: var(--sp-4);
}
/* mesma família e ritmo de leitura do hero da landing */
.dx-route__why {
  color: rgba(252, 247, 232, 0.75); max-width: 54ch;
  font-family: var(--font); font-size: 24px; font-weight: var(--fw-regular); line-height: var(--lh-lead);
}
@media (max-width: 600px) {
  .dx-route__why { font-size: 18px; }
}

/* leitura por dimensão: nome, selo nas críticas, frase e nota */
.dx-read { list-style: none; margin-top: var(--sp-16); border-top: 1px solid var(--fg); }
.dx-read li {
  display: grid; gap: var(--sp-2) var(--sp-8);
  padding-block: var(--sp-6); border-bottom: 1px solid var(--hair);
}
@media (min-width: 820px) {
  .dx-read li { grid-template-columns: 240px 1fr 80px; align-items: start; }
  .dx-read__val { text-align: right; }
}
.dx-read__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.dx-read__dim { font-family: var(--display); font-weight: var(--fw-regular); font-size: var(--fz-h3); line-height: 1.2; }
.dx-read li.is-low .dx-read__dim { font-weight: var(--fw-medium); }
.dx-read__flag {
  display: inline-flex; align-items: center; padding: 3px var(--sp-3);
  border-radius: var(--radius-full); background: var(--accent); color: var(--accent-text);
  font-size: var(--fz-tiny); font-weight: var(--fw-medium);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.dx-read__txt { color: var(--fg-soft); max-width: 62ch; line-height: var(--lh-reading); }
.dx-read__val { font-family: var(--display); font-size: var(--fz-h3); color: var(--fg-faint); }
.dx-read__val b { color: var(--fg); font-weight: var(--fw-regular); font-size: 1.35em; }

/* ---------- captura de lead ---------- */
.dx-lead {
  margin-top: var(--sp-20);
  border-top: 1px solid var(--fg);
  padding-top: clamp(28px, 4vw, 56px);
}
.dx-lead__head { max-width: 56ch; }
.dx-lead__title { font-family: var(--display); font-weight: var(--fw-regular); font-size: var(--fz-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-h); }
.dx-lead__sub { color: var(--fg-soft); margin-top: var(--sp-4); line-height: var(--lh-reading); }
.dx-lead__form { margin-top: var(--sp-10); display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 820px) { .dx-lead__form { grid-template-columns: 1fr 1fr 1fr; align-items: end; } }
.dx-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.dx-field__label { font-size: var(--fz-small); color: var(--fg-soft); font-weight: var(--fw-medium); }
.dx-field__label em { font-style: normal; color: var(--fg-faint); font-weight: var(--fw-regular); }
.dx-field__input {
  border: 0; border-bottom: 1px solid var(--hair-strong); background: transparent;
  padding: var(--sp-3) 0; font-size: var(--fz-lead); color: var(--fg); border-radius: 0;
  transition: border-color var(--t-base) var(--ease);
}
.dx-field__input:focus { outline: none; border-color: var(--fg); }
/* select reaproveita o traço do input; a seta é a mesma linguagem
   (stroke, round linecap) do X do modal, em tinta fixa porque o gate
   sempre roda sobre .on-paper (claro) */
.dx-field__select {
  appearance: none; cursor: pointer; padding-right: var(--sp-8);
  background-repeat: no-repeat; background-position: right center; background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='rgba(39,38,41,0.55)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dx-field__select:invalid, .dx-field__select option[value=""] { color: var(--fg-faint); }
/* inválido sem cor fora da paleta: o fio engrossa em tinta plena */
.dx-field__input.is-invalid { border-color: var(--fg); box-shadow: 0 1px 0 0 var(--fg); }
.dx-field__error { color: var(--fg); font-size: var(--fz-small); font-weight: var(--fw-semibold); }
.dx-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--sp-3); max-width: 62ch; }
.dx-consent input { flex: none; width: 20px; height: 20px; margin-top: 0.2em; accent-color: var(--accent); cursor: pointer; }
.dx-consent label { color: var(--fg-soft); font-size: var(--fz-small); line-height: var(--lh-reading); cursor: pointer; }
.dx-lead__privacy { color: var(--fg-soft); font-size: var(--fz-small); line-height: var(--lh-reading); }
.dx-lead__privacy { grid-column: 1 / -1; margin-top: calc(var(--sp-6) * -1); }
.dx-lead__privacy a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
/* honeypot fora da vista, invisível pra gente e irresistível pra robô */
.dx-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dx-lead__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-2); }

/* ---------- leitura detalhada ---------- */

/* Após o contato, a faixa de ações aparece com o fio de tinta. */
.dx-gate__unlocked:not([hidden]) {
  margin-top: var(--sp-20);
  border-top: 1px solid var(--fg);
  padding-top: clamp(28px, 4vw, 56px);
}

/* ---------- lightbox do formulário ---------- */
.dx-modal {
  border: 0; margin: auto;
  width: min(92vw, 620px);
  padding: clamp(28px, 4vw, 48px);
  background: var(--bg); color: var(--fg);
  box-shadow: 0 24px 60px rgba(39, 38, 41, 0.25);
}
.dx-modal::backdrop { background: rgba(39, 38, 41, 0.55); }
.dx-modal .dx-lead__form { grid-template-columns: 1fr; }
.dx-modal__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; background: transparent; color: var(--fg-soft); border-radius: var(--radius-full);
  transition: color var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .dx-modal__close:hover { color: var(--fg); } }
.dx-modal__close svg { width: 22px; height: 22px; }
.dx-lead__ok { color: var(--fg); font-size: var(--fz-lead); line-height: var(--lh-lead); max-width: 54ch; }
.dx-lead__err { color: var(--fg); font-size: var(--fz-small); font-weight: var(--fw-semibold); }
.dx-turnstile:not(:empty) { margin-top: var(--sp-4); }
.dx-gated-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-8); }


@media (max-width: 620px) {
  .dx-q__text { font-size: var(--fz-h3); }
}

@media (max-width: 560px) {
  body:has(.bz-consent) .dx-q.is-active {
    padding-bottom: calc(var(--sp-12) + 11rem);
  }
}

/* ---------- impressão: leitura detalhada ---------- */
@media print {
  .curtain, .dx-bar, .dx-foot, .dx-close, .dx-progress,
  .dx-result__actions, .dx-gate { display: none !important; }
  .dx-stage { overflow: visible !important; display: block !important; }
  .dx-panel { position: static !important; opacity: 1 !important; visibility: visible !important; padding: 0 !important; }
  .dx-panel:not(.dx-result) { display: none !important; }
  .dx-result__inner { display: block !important; }
  .dx-result__viz { margin-top: var(--sp-12); page-break-inside: avoid; }
  .dx-route { margin-top: var(--sp-12); }
  .dx-route[hidden] { display: block !important; }
  .dx-route, .dx-radar__shape { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body, .dx { background: var(--bg) !important; }
}