/* ============================================================================
   DIAGNÓSTICO — tema claro
   ============================================================================

   O bloco é branco sobre papel quente, com um filete dourado no topo. Fundo
   claro não é só escolha estética: sobre branco dá para usar cor de verdade
   nos acentos, e é a cor que faz cada etapa parecer diferente da anterior. No
   tema escuro anterior, todo acento acabava virando um tom de bege.

   IDENTIDADE POR ETAPA
   --------------------
   Cada pergunta pertence a um grupo temático — Caso, Partes, Provas, Prazo,
   Valores, Histórico, Objetivo, Urgência, Contato — e cada grupo tem sua
   própria cor. O JS escreve `data-grupo` no bloco e estas regras trocam três
   tokens: `--ac` (texto e ícone), `--ac-bg` (fundo suave) e `--ac-bd` (borda).
   Nada mais muda. O resultado é que avançar parece mudar de assunto, e não
   preencher mais um campo — ao custo de um atributo no DOM.

   As cores são dessaturadas de propósito. Um escritório de advocacia não pode
   parecer aplicativo de tarefas: cada tom foi escolhido para passar em 4,5:1
   sobre branco e ainda assim parecer sóbrio.

   Mobile primeiro. Alvos de toque de 48px, e o formulário desenhado para
   caber na primeira tela sem rolagem.
   ========================================================================== */

#diag{
  /* superfícies */
  --dg-card:#fff;
  --dg-soft:#faf8f4;
  --dg-soft-2:#f4f1ea;

  /* texto — todos verificados sobre branco */
  --dg-tx:#1b1815;      /* 15,2:1 */
  --dg-tx-2:#4a453e;    /*  8,9:1 */
  --dg-tx-3:#6b645b;    /*  5,6:1 */

  /* linhas */
  --dg-line:#e7e1d6;
  --dg-line-2:#d8d0c1;

  /* dourado da casa */
  --dg-gold:#a8935f;      /* preenchimentos e ícones */
  --dg-gold-tx:#7a6737;   /* 5,4:1 — o dourado que pode virar texto */
  --dg-gold-bg:#f9f4e8;

  /* acento da etapa: sobrescrito por [data-grupo] */
  --ac:#7a6737;
  --ac-bg:#f9f4e8;
  --ac-bd:#ecdfc2;

  --dg-err:#a8331d;
  --dg-ok:#1f6b52;

  position:relative;
  color:var(--dg-tx);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#diag *{box-sizing:border-box}

/* ── PALETA POR ETAPA ─────────────────────────────────────────────────────
   Cada tom passa em 4,5:1 sobre branco como texto e serve de fundo suave. */
#diag[data-grupo="Caso"]       {--ac:#7d6329; --ac-bg:#fbf4e4; --ac-bd:#ecdcba}
#diag[data-grupo="Partes"]     {--ac:#1c5f6f; --ac-bg:#e9f3f6; --ac-bd:#c2dfe7}
#diag[data-grupo="Provas"]     {--ac:#1f6b52; --ac-bg:#e8f4ef; --ac-bd:#bfe2d3}
#diag[data-grupo="Prazo"]      {--ac:#a0472a; --ac-bg:#fcede7; --ac-bd:#f2cec1}
#diag[data-grupo="Urgência"]   {--ac:#a0472a; --ac-bg:#fcede7; --ac-bd:#f2cec1}
#diag[data-grupo="Valores"]    {--ac:#3b4a86; --ac-bg:#eceef8; --ac-bd:#ccd2ec}
#diag[data-grupo="Histórico"]  {--ac:#584978; --ac-bg:#f0edf6; --ac-bd:#d5cde5}
#diag[data-grupo="Objetivo"]   {--ac:#7d6329; --ac-bg:#fbf4e4; --ac-bd:#ecdcba}
#diag[data-grupo="Função"]     {--ac:#1c5f6f; --ac-bg:#e9f3f6; --ac-bd:#c2dfe7}
#diag[data-grupo="Jornada"]    {--ac:#a0472a; --ac-bg:#fcede7; --ac-bd:#f2cec1}
#diag[data-grupo="Saúde"]      {--ac:#1f6b52; --ac-bg:#e8f4ef; --ac-bd:#bfe2d3}
#diag[data-grupo="Dano"]       {--ac:#a0472a; --ac-bg:#fcede7; --ac-bd:#f2cec1}
#diag[data-grupo="Vínculo"]    {--ac:#1c5f6f; --ac-bg:#e9f3f6; --ac-bd:#c2dfe7}
#diag[data-grupo="Operação"]   {--ac:#3b4a86; --ac-bg:#eceef8; --ac-bd:#ccd2ec}
#diag[data-grupo="Patrimônio"] {--ac:#3b4a86; --ac-bg:#eceef8; --ac-bd:#ccd2ec}
#diag[data-grupo="Contrato"]   {--ac:#584978; --ac-bg:#f0edf6; --ac-bd:#d5cde5}
#diag[data-grupo="Relato"]     {--ac:#4a453e; --ac-bg:#f4f1ea; --ac-bd:#e0d9cc}
#diag[data-grupo="Contato"]    {--ac:#1f6b52; --ac-bg:#e8f4ef; --ac-bd:#bfe2d3}

/* ── MOLDURA ─────────────────────────────────────────────────────────────── */
.dg-box{
  position:relative;
  border-radius:20px;
  background:var(--dg-card);
  border:1px solid var(--dg-line);
  box-shadow:0 1px 2px rgba(28,24,18,.04), 0 18px 44px -28px rgba(28,24,18,.30);
  overflow:hidden;
}
.dg-box::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg,var(--dg-gold),#d8c48a,var(--dg-gold));
}

/* ── CABEÇALHO: identidade da etapa ──────────────────────────────────────── */
.dg-head{
  display:flex; align-items:center; gap:10px;
  padding:15px 18px 13px;
  background:linear-gradient(100deg, var(--ac-bg), color-mix(in srgb, var(--ac-bg) 55%, #fff));
  border-bottom:1px solid var(--ac-bd);
  transition:background .35s, border-color .35s;
}
.dg-head__ic{
  width:34px; height:34px; border-radius:11px; flex:none;
  display:grid; place-items:center; font-size:14px;
  color:#fff;
  background:linear-gradient(140deg, color-mix(in srgb, var(--ac) 78%, #fff), var(--ac));
  box-shadow:0 5px 12px -6px color-mix(in srgb, var(--ac) 85%, transparent);
  transition:background .35s;
}
.dg-head__tx{display:flex; flex-direction:column; gap:1px; min-width:0}
.dg-head__k{
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ac); transition:color .35s;
}
.dg-head__s{font-size:12px; font-weight:600; color:var(--dg-tx-3)}
.dg-passo{
  margin-left:auto; flex:none;
  font-size:12px; font-weight:700; color:var(--dg-tx-2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.dg-prog{height:3px; background:var(--dg-soft-2)}
.dg-prog__f{
  height:100%; width:4%;
  background:linear-gradient(90deg, color-mix(in srgb, var(--ac) 62%, #fff), var(--ac));
  border-radius:0 3px 3px 0;
  transition:width .5s cubic-bezier(.22,1,.36,1), background .35s;
}

/* ── PALCO ───────────────────────────────────────────────────────────────── */
.dg-palco{padding:22px 18px 24px}

@keyframes dgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dg-in{animation:dgIn .3s cubic-bezier(.22,1,.36,1) both}

/* balão de reconhecimento */
.dg-eco{
  display:flex; gap:10px; align-items:flex-start;
  margin:0 0 15px; padding:11px 14px;
  font-size:13.5px; line-height:1.55; color:var(--dg-tx-2);
  background:var(--ac-bg);
  border:1px solid var(--ac-bd);
  border-radius:12px;
}
.dg-eco::before{
  content:'\f0eb'; font-family:FontAwesome; flex:none;
  font-size:13px; color:var(--ac); margin-top:1px;
}

/* ── ECO COM TOM: o acontecimento de cada etapa ────────────────────────────
   A resposta anterior devolve uma informação verdadeira sobre o caso, e o tom
   diz o que ela significa. Três estados, três cores, e nenhuma delas é o
   acento da etapa: o eco precisa se destacar do bloco inteiro no instante em
   que aparece, senão vira mais uma caixa bege entre caixas bege.

   Sem `tom` na árvore, o eco continua sendo a linha simples de antes. */
.dg-eco--ok, .dg-eco--alerta, .dg-eco--forte{
  gap:11px; padding:13px 15px;
  animation:dgEco .42s cubic-bezier(.16,1,.3,1) both;
}
.dg-eco--ok::before, .dg-eco--alerta::before, .dg-eco--forte::before{content:none}

.dg-eco__ic{
  width:26px; height:26px; border-radius:9px; flex:none;
  display:grid; place-items:center; font-size:12px; color:#fff;
  background:var(--et);
  box-shadow:0 4px 10px -5px var(--et);
}
.dg-eco__tx{display:block; min-width:0}
.dg-eco__tx b{
  display:block; margin-bottom:2px;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--et);
}

.dg-eco--ok    {--et:#1f6b52; background:#e8f4ef; border-color:#bfe2d3}
.dg-eco--alerta{--et:#a0472a; background:#fcede7; border-color:#f2cec1}
.dg-eco--forte {--et:#3b4a86; background:#eceef8; border-color:#ccd2ec}

@keyframes dgEco{from{opacity:0; transform:translateY(-6px) scale(.985)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){
  .dg-eco--ok, .dg-eco--alerta, .dg-eco--forte{animation:none}
}

.dg-q{margin:0 0 15px}
.dg-q__t{
  margin:0; font-size:20px; line-height:1.28; font-weight:750;
  letter-spacing:-.02em; color:var(--dg-tx);
}
.dg-q__a{margin:7px 0 0; font-size:13px; line-height:1.5; color:var(--dg-tx-3)}

/* ── CARDS (escolha única) ───────────────────────────────────────────────── */
/* --cols vem do JS: ele escolhe o numero de colunas que divide a lista sem
   deixar orfao, e manda o ultimo item ocupar a sobra quando ela existe. Uma
   lista de 7 opcoes em 3 colunas terminaria com um card solitario torto; com
   --span o ultimo se estica e a grade fecha simetrica. */
.dg-cards{display:grid; gap:10px; grid-template-columns:1fr}
.dg-card{
  position:relative; display:flex; align-items:center; gap:13px; width:100%;
  min-height:66px; padding:13px 44px 13px 14px;
  text-align:left; cursor:pointer; font:inherit; color:var(--dg-tx);
  background:var(--dg-card);
  border:1.5px solid var(--dg-line); border-radius:13px;
  transition:border-color .16s, background .16s, transform .1s, box-shadow .16s;
}
.dg-card:hover{border-color:var(--ac); background:var(--ac-bg)}
.dg-card:active{transform:scale(.99)}
.dg-card__ic{
  flex:none; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center; font-size:16px;
  color:var(--ac); background:var(--ac-bg); border:1px solid var(--ac-bd);
  transition:background .16s, color .16s, border-color .16s;
}
.dg-card__tx{display:flex; flex-direction:column; gap:2px; min-width:0}
.dg-card__tx b{font-size:14.5px; font-weight:650; line-height:1.3; color:var(--dg-tx)}
.dg-card__tx small{font-size:12px; line-height:1.4; color:var(--dg-tx-3)}
.dg-card__mk{
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  width:21px; height:21px; border-radius:50%;
  border:1.5px solid var(--dg-line-2); background:var(--dg-card);
  transition:border-color .16s, background .16s;
}
.dg-card__mk::after{
  content:''; position:absolute; left:6px; top:4px;
  width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.dg-card.is-on{
  border-color:var(--ac); background:var(--ac-bg);
  box-shadow:0 6px 18px -10px color-mix(in srgb, var(--ac) 55%, transparent);
}
.dg-card.is-on .dg-card__ic{
  background:linear-gradient(140deg, color-mix(in srgb, var(--ac) 78%, #fff), var(--ac));
  color:#fff; border-color:var(--ac);
}
.dg-card.is-on .dg-card__mk{background:var(--ac); border-color:var(--ac)}
.dg-card.is-on .dg-card__mk::after{transform:rotate(45deg) scale(1)}

@media(min-width:560px){ .dg-cards--2{grid-template-columns:1fr 1fr} }

/* ── CHIPS (múltipla escolha) ────────────────────────────────────────────── */
.dg-chips{display:flex; flex-wrap:wrap; gap:8px}
.dg-chip{
  display:inline-flex; align-items:center; gap:9px;
  min-height:48px; padding:10px 16px 10px 13px;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--dg-tx-2);
  background:var(--dg-card);
  border:1.5px solid var(--dg-line); border-radius:100px; cursor:pointer;
  transition:border-color .16s, background .16s, color .16s;
}
.dg-chip:hover{border-color:var(--ac); background:var(--ac-bg)}
.dg-chip__mk{
  width:17px; height:17px; border-radius:5px; flex:none; position:relative;
  border:1.5px solid var(--dg-line-2); background:var(--dg-card);
  transition:background .16s, border-color .16s;
}
.dg-chip__mk::after{
  content:''; position:absolute; left:4.5px; top:1px;
  width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.dg-chip.is-on{border-color:var(--ac); background:var(--ac-bg); color:var(--ac)}
.dg-chip.is-on .dg-chip__mk{background:var(--ac); border-color:var(--ac)}
.dg-chip.is-on .dg-chip__mk::after{transform:rotate(45deg) scale(1)}

/* ── FAIXAS (tempo, valor) ───────────────────────────────────────────────── */
.dg-faixa{display:grid; gap:10px; grid-template-columns:1fr 1fr}
.dg-fx{
  min-height:54px; padding:12px 14px;
  font:inherit; font-size:13.5px; font-weight:650; color:var(--dg-tx-2);
  background:var(--dg-card);
  border:1.5px solid var(--dg-line); border-radius:12px; cursor:pointer;
  text-align:center; line-height:1.3;
  transition:border-color .16s, background .16s, color .16s, transform .1s;
}
.dg-fx:hover{border-color:var(--ac); background:var(--ac-bg)}
.dg-fx:active{transform:scale(.985)}
.dg-fx.is-on{
  border-color:var(--ac); background:var(--ac-bg); color:var(--ac);
  box-shadow:0 6px 18px -10px color-mix(in srgb, var(--ac) 55%, transparent);
}

/* ── CAMPOS ──────────────────────────────────────────────────────────────── */
.dg-campo{position:relative}
.dg-ta,.dg-in,.dg-f__i{
  width:100%; font:inherit; font-size:15.5px; color:var(--dg-tx);
  background:var(--dg-soft);
  border:1.5px solid var(--dg-line); border-radius:12px;
  padding:13px 14px; resize:vertical;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.dg-ta::placeholder,.dg-in::placeholder,.dg-f__i::placeholder{color:#857d72}
.dg-ta:focus,.dg-in:focus,.dg-f__i:focus{
  outline:none; border-color:var(--ac); background:var(--dg-card);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ac) 14%, transparent);
}
.dg-conta{position:absolute; right:12px; bottom:11px; font-size:11px; color:var(--dg-tx-3); pointer-events:none}

.dg-form{display:grid; gap:13px}
.dg-f{display:flex; flex-direction:column; gap:6px}
.dg-f__l{font-size:12.5px; font-weight:700; color:var(--dg-tx-2)}
.dg-f__l em{font-style:normal; font-weight:600; color:var(--dg-tx-3); font-size:11.5px}
.dg-hp{position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0}

.dg-lgpd{
  display:flex; gap:11px; align-items:flex-start;
  font-size:12.5px; line-height:1.5; color:var(--dg-tx-2);
  padding:13px 15px; background:var(--dg-soft);
  border:1px solid var(--dg-line); border-radius:12px; cursor:pointer;
}
.dg-lgpd input{flex:none; width:19px; height:19px; accent-color:var(--ac); cursor:pointer}
.dg-lgpd a{color:var(--dg-gold-tx); text-decoration:underline; text-underline-offset:2px}

.dg-erro{
  margin:0; padding:11px 14px; font-size:13px; font-weight:600;
  color:var(--dg-err); background:#fceeea;
  border:1px solid #f0cfc6; border-radius:10px;
}

/* ── BOTÕES ──────────────────────────────────────────────────────────────── */
.dg-acoes{display:flex; flex-direction:column; gap:8px; margin-top:16px}
.dg-acoes--so{margin-top:12px}
.dg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:54px; padding:14px 24px; width:100%;
  font:inherit; font-size:15px; font-weight:700;
  border-radius:12px; border:1.5px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .1s, box-shadow .18s, background .18s;
}
.dg-btn--go{
  color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 82%, #fff), var(--ac));
  box-shadow:0 10px 22px -12px color-mix(in srgb, var(--ac) 80%, transparent);
}
.dg-btn--go:hover{box-shadow:0 14px 28px -12px color-mix(in srgb, var(--ac) 85%, transparent)}
.dg-btn--go:active{transform:scale(.99)}
.dg-btn--gh{
  color:var(--dg-tx-3); background:transparent; border-color:var(--dg-line);
  min-height:46px; font-weight:600; font-size:13.5px;
}
.dg-btn--gh:hover{color:var(--dg-tx-2); border-color:var(--dg-line-2)}
.dg-btn--wa{
  /* O verde de marca (#25D366) da 1,98:1 com texto branco. Este e o mais
     claro que passa em 4,5:1 e continua lendo como WhatsApp. */
  color:#fff; background:#127a3a;
  box-shadow:0 10px 22px -12px rgba(18,122,58,.75); margin-top:6px;
}
.dg-btn i{font-size:15px}
.dg-btn.is-load{pointer-events:none; opacity:.75}
.dg-btn.is-load i{animation:dgSpin .8s linear infinite}
@keyframes dgSpin{to{transform:rotate(360deg)}}

@keyframes dgShake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-4px)}}
.dg-shake{animation:dgShake .4s}

.dg-nota{margin:12px 0 0; font-size:11.5px; line-height:1.5; color:var(--dg-tx-3); text-align:center}

/* ── DESVIO ──────────────────────────────────────────────────────────────── */
.dg-desvio p{margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--dg-tx-2)}
.dg-desvio .dg-btn--gh{margin-top:9px}

/* ── RODAPÉ: voltar + trilha ─────────────────────────────────────────────── */
.dg-foot{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid var(--dg-line);
  background:var(--dg-soft);
}
/* O atributo `hidden` do HTML tem especificidade menor que a classe: sem
   esta linha o botao Voltar aparecia ja na primeira pergunta. */
#diag [hidden]{display:none !important}

.dg-voltar{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:10px 15px;
  font:inherit; font-size:12.5px; font-weight:650; color:var(--dg-tx-3);
  background:var(--dg-card); border:1px solid var(--dg-line);
  border-radius:100px; cursor:pointer; flex:none;
  transition:color .16s, border-color .16s;
}
.dg-voltar:hover{color:var(--dg-tx); border-color:var(--dg-line-2)}

.dg-trilha{display:flex; gap:6px; flex-wrap:wrap; min-width:0}
.dg-tr{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; min-height:44px;
  font:inherit; font-size:11.5px; font-weight:650; color:var(--dg-tx-3);
  background:var(--dg-card); border:1px solid var(--dg-line);
  border-radius:100px; cursor:pointer; max-width:100%;
  transition:color .16s, border-color .16s;
}
.dg-tr:hover{color:var(--dg-gold-tx); border-color:var(--dg-line-2)}
.dg-tr i{font-size:9px; color:var(--dg-ok); flex:none}
.dg-tr span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── TELA FINAL ──────────────────────────────────────────────────────────── */
.dg-fim{text-align:center}
.dg-fim__ic{
  display:grid; place-items:center; width:58px; height:58px; margin:2px auto 15px;
  border-radius:50%; font-size:23px; color:#fff;
  background:linear-gradient(140deg,#2c8a6a,var(--dg-ok));
  box-shadow:0 12px 28px -12px rgba(31,107,82,.7);
  animation:dgPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes dgPop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.dg-fim__t{margin:0 0 8px; font-size:21px; font-weight:750; line-height:1.3; letter-spacing:-.02em; color:var(--dg-tx)}
.dg-fim__p{margin:0 auto 18px; max-width:44ch; font-size:14.5px; line-height:1.62; color:var(--dg-tx-2)}

.dg-fim__box{
  text-align:left; padding:16px 17px; margin-bottom:16px;
  background:var(--dg-soft); border:1px solid var(--dg-line); border-radius:14px;
}
.dg-fim__lbl{
  display:block; margin-bottom:11px;
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--dg-gold-tx);
}
.dg-fim__dl{display:grid; gap:9px; margin:0}
.dg-fim__dl > div{display:flex; justify-content:space-between; gap:14px; align-items:baseline}
.dg-fim__dl dt{font-size:12.5px; color:var(--dg-tx-3); flex:none; max-width:46%}
.dg-fim__dl dd{margin:0; font-size:13px; font-weight:650; color:var(--dg-tx); text-align:right}

.dg-fim__ol{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:11px; text-align:left}
.dg-fim__ol li{display:flex; gap:12px; align-items:flex-start}
.dg-fim__ol li span{
  flex:none; width:25px; height:25px; border-radius:50%;
  display:grid; place-items:center; font-size:11.5px; font-weight:800;
  color:#fff; background:var(--dg-gold);
}
.dg-fim__ol li b{display:block; font-size:13.5px; font-weight:650; line-height:1.35; color:var(--dg-tx)}
.dg-fim__ol li small{display:block; margin-top:2px; font-size:12px; line-height:1.45; color:var(--dg-tx-3)}

/* ── FOCO ────────────────────────────────────────────────────────────────── */
#diag :focus-visible{outline:2.5px solid var(--ac); outline-offset:2px; border-radius:8px}

/* ── DESKTOP ─────────────────────────────────────────────────────────────── */
@media(min-width:760px){
  .dg-head{padding:18px 30px 16px}
  .dg-palco{padding:30px 30px 32px}
  .dg-foot{padding:15px 30px}
  .dg-q__t{font-size:25px}
  .dg-q__a{font-size:14px}
  .dg-acoes{flex-direction:row-reverse; justify-content:flex-end; align-items:center}
  .dg-btn{width:auto; min-width:220px}
  .dg-btn--gh{min-width:0}
  .dg-btn--wa{width:100%}
  .dg-fim__t{font-size:25px}

  /* as opcoes se distribuem em colunas: menos rolagem e a lista inteira
     visivel de uma vez */
  .dg-cards{grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
  .dg-cards > .dg-card:last-child{grid-column:span var(--span,1)}
  .dg-faixa{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
  .dg-faixa > .dg-fx:last-child{grid-column:span var(--span,1)}

  /* contato em duas colunas, com relato e consentimento atravessando */
  .dg-form{grid-template-columns:1fr 1fr; gap:16px 18px}
  .dg-form > .dg-lgpd,
  .dg-form > .dg-erro,
  .dg-form > .dg-btn,
  .dg-form > .dg-nota{grid-column:1 / -1}

  .dg-ta{min-height:150px}
}

@media(min-width:1060px){
  .dg-head{padding:20px 38px 18px}
  .dg-palco{padding:34px 38px 38px}
  .dg-foot{padding:16px 38px}
  .dg-q__t{font-size:27px}
  .dg-card{min-height:74px; padding:15px 46px 15px 16px}
  .dg-card__ic{width:42px; height:42px; font-size:17px}
  .dg-card__tx b{font-size:15.5px}
  .dg-card__tx small{font-size:12.5px}
  .dg-fx{min-height:60px; font-size:14px}
  .dg-chip{min-height:50px; font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  #diag *,#diag *::before,#diag *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}