/* Diagnóstico WrightGate.
 *
 * Assenta em styles.css (paleta, botões, tipografia) e em app.css (a moldura
 * das páginas que não são a viagem da homepage). Aqui está só o que é desta
 * ferramenta.
 *
 * DUAS REGRAS QUE NÃO SE MUDAM SEM PENSAR DUAS VEZES:
 *
 * 1. `min-width: 0` em todo o item de grelha que possa levar texto longo. O
 *    tamanho mínimo automático de um item de grelha é o do conteúdo e não
 *    zero, e é a razão pela qual uma página passa a rolar de lado no telefone
 *    sem que nada pareça largo de mais no computador.
 *
 * 2. Nada de valores contínuos por atributo `style`. A CSP deste site é
 *    `style-src 'self'` sem `unsafe-inline`. O anel e as barras são SVG e os
 *    valores vão em atributos de apresentação, que são geometria e não estilo.
 */

/* ------------------------------------------------------------- moldura */

/* `.page-main` centra o seu único filho, e esta página tem secções de largura
   inteira. Volta a ser um bloco normal, e o espaço do cabeçalho passa a ser
   dado pelo herói. */
.dg-main {
  display: block;
  padding: 0 0 0;
  width: 100%;
  min-width: 0;
}

.dg-secao { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.dg-secao > .container { min-width: 0; }
.dg-alt { background: rgba(248, 247, 248, 0.022); border-block: 1px solid var(--line); }

.dg-secao-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.dg-secao-head h2 { margin-bottom: 0.5rem; }
.dg-secao-head .lead { margin: 0.9rem 0 0; }

/* ---------------------------------------------------------------- herói */

.dg-heroi {
  padding: calc(var(--header-h) + clamp(3rem, 9vw, 6rem)) 0 clamp(2.5rem, 6vw, 4rem);
}
.dg-heroi-in { max-width: 54rem; min-width: 0; }
.dg-heroi h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.dg-heroi .lead { max-width: 44rem; font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.65; }
.dg-heroi .row-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

.dg-selos {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
}
.dg-selos li {
  color: var(--muted);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.dg-selos li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-bright);
  flex: 0 0 auto;
}

/* ------------------------------------------------------------ ferramenta */

.dg-ferramenta { padding-top: 0; scroll-margin-top: calc(var(--header-h) + 1rem); }

.dg-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  max-width: 46rem;
  margin-inline: auto;
  min-width: 0;
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42);
}
.dg-capa { text-align: center; }
.dg-capa h2 { margin-bottom: 0.7rem; }
.dg-capa p { color: var(--muted); max-width: 34rem; margin: 0 auto 1.8rem; }

.dg-head { margin-bottom: 1.9rem; }
.dg-head h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 0.4rem; }
.dg-head h2:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 6px; border-radius: 6px; }
.dg-kicker {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue-bright);
  margin: 0 0 0.7rem;
}
.dg-sub { color: var(--muted); margin: 0; font-size: 0.96rem; }

/* --------------------------------------------------------------- barra */

.dg-barra { margin-bottom: 1.8rem; }
.dg-barra svg { display: block; width: 100%; height: 3px; overflow: visible; }
.dg-barra-fundo { fill: rgba(248, 247, 248, 0.09); }
.dg-barra-frente { fill: var(--blue); transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

/* ------------------------------------------------------------ perguntas */

.dg-grupo { border: 0; padding: 0; margin: 0 0 2.1rem; min-width: 0; }
.dg-grupo legend {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--text);
  padding: 0;
  margin-bottom: 0.35rem;
  line-height: 1.35;
}
.dg-ajuda { color: var(--muted); font-size: 0.87rem; margin: 0 0 0.9rem; }
.dg-grupo legend + .dg-opcoes { margin-top: 0.9rem; }

.dg-opcoes { display: grid; gap: 0.55rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .dg-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* As de escolha múltipla ficam mais estreitas: são listas de etiquetas
     curtas e três por linha lêem-se de um relance. */
  .dg-opcoes.is-multipla { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
}

.dg-op {
  display: grid;
  gap: 0.2rem;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(248, 247, 248, 0.035);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  min-width: 0;
  /* 44px de alvo de toque, que é o mínimo para um polegar. */
  min-height: 46px;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.dg-op:hover { border-color: rgba(248, 247, 248, 0.26); background: rgba(248, 247, 248, 0.06); }
.dg-op:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
.dg-op.is-on {
  border-color: rgba(25, 110, 218, 0.85);
  background: rgba(25, 110, 218, 0.16);
  box-shadow: inset 0 0 0 1px rgba(25, 110, 218, 0.35);
}
.dg-op-r { font-weight: 500; line-height: 1.35; }
.dg-op-n { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.dg-op.is-on .dg-op-n { color: #B9C7DD; }

/* ------------------------------------------------------------ formulário */

.dg-linha { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .dg-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dg-campo { display: grid; gap: 0.45rem; margin-bottom: 1rem; min-width: 0; }
.dg-campo > span {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8FA2BE;
  font-weight: 600;
}
.dg-campo > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.dg-campo input {
  width: 100%;
  min-width: 0;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(4, 6, 10, 0.55);
  color: var(--text);
  font: inherit;
  /* 16px impede o iOS de dar zoom ao focar, que desalinha a página toda. */
  font-size: 16px;
}
.dg-campo input:focus { outline: none; border-color: rgba(25, 110, 218, 0.8); box-shadow: 0 0 0 3px rgba(25, 110, 218, 0.18); }
.dg-campo input::placeholder { color: #8A9AB5; }

.dg-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  margin: 0.6rem 0 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.dg-check input { width: 20px; height: 20px; margin-top: 0.15rem; accent-color: var(--blue); }
.dg-check a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 0.18em; }

.dg-erro {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 11px;
  border: 1px solid rgba(255, 120, 120, 0.4);
  background: rgba(255, 90, 90, 0.1);
  color: #FFC9C9;
  font-size: 0.9rem;
}
.dg-acts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.7rem; }
.dg-acts .btn-primary { flex: 1 1 14rem; }
.dg-nota { color: var(--muted); font-size: 0.83rem; margin: 1.1rem 0 0; line-height: 1.55; }

.dg-espreita {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.6rem;
  border-radius: 14px;
  border: 1px dashed rgba(25, 110, 218, 0.45);
  background: rgba(25, 110, 218, 0.08);
}
.dg-espreita-n { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--text); }
.dg-espreita-t { color: var(--muted); font-size: 0.88rem; }

/* ------------------------------------------------------------ resultado */

.dg-res {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 56rem;
  margin-inline: auto;
  min-width: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.dg-res-topo {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  align-items: center;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 40rem) {
  .dg-res-topo { grid-template-columns: minmax(0, 1fr) auto; }
}
.dg-res-id { min-width: 0; }
.dg-res-id h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 0.35rem; word-break: break-word; }
.dg-res-id h2:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 6px; border-radius: 6px; }

.dg-anel { position: relative; width: 132px; height: 132px; justify-self: start; }
.dg-anel svg { width: 100%; height: 100%; display: block; }
.dg-anel-fundo { stroke: rgba(248, 247, 248, 0.09); }
.dg-anel-frente {
  stroke: var(--blue-bright);
  /* Parte de vazio: o deslocamento comeca com a circunferencia inteira e o
     codigo baixa-o ate ao valor da pontuacao. Ver a nota em app.js sobre
     porque o `dasharray` leva a circunferencia toda e nao o par cheio/vazio. */
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 10px rgba(59, 139, 240, 0.35));
}
.dg-anel-txt {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1;
}
.dg-anel-txt strong { font-family: var(--font-head); font-size: 2.5rem; font-weight: 700; }
.dg-anel-txt span { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }

.dg-veredicto {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  margin: 1.8rem 0 1rem;
}
@media (min-width: 34rem) { .dg-veredicto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dg-vd {
  padding: 1rem 1.15rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(248, 247, 248, 0.035);
  min-width: 0;
}
.dg-vd-k { display: block; color: #8FA2BE; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.35rem; }
.dg-vd-v { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; }
.dg-vd-alto { border-color: rgba(25, 110, 218, 0.6); background: rgba(25, 110, 218, 0.12); }
.dg-vd-alto .dg-vd-v { color: #9EC9FF; }

.dg-porque { color: #D3D9E4; line-height: 1.7; margin: 0 0 2.4rem; }

.dg-bloco { margin: 0 0 2.6rem; }
.dg-bloco h3 {
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8FA2BE;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/* dimensões */
.dg-dims { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.dg-dim { min-width: 0; }
.dg-dim-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.dg-dim-topo h4 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; margin: 0; }
.dg-dim-v { font-family: var(--font-head); font-weight: 700; color: var(--text); font-size: 1.05rem; }
.dg-dim-barra { display: block; width: 100%; height: 6px; margin: 0.55rem 0 0.6rem; }
.dg-dim-fundo { fill: rgba(248, 247, 248, 0.08); }
.dg-dim-frente { fill: var(--blue); transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.dg-dim p { color: var(--muted); font-size: 0.94rem; line-height: 1.65; margin: 0; }

/* números */
.dg-cartoes {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.dg-cartao {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 1.1rem;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: rgba(248, 247, 248, 0.035);
  min-width: 0;
}
.dg-cartao-v { font-family: var(--font-head); font-size: 1.85rem; font-weight: 700; line-height: 1.1; color: #9EC9FF; }
.dg-cartao-r { font-weight: 600; font-size: 0.92rem; }
.dg-cartao-n { color: var(--muted); font-size: 0.8rem; line-height: 1.5; }

/* gargalos */
.dg-gargalos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: g; }
.dg-gargalos li {
  position: relative;
  padding: 1.1rem 1.2rem 1.1rem 1.2rem;
  border-radius: 15px;
  border: 1px solid var(--line);
  border-left: 3px solid rgba(25, 110, 218, 0.75);
  background: rgba(248, 247, 248, 0.03);
  min-width: 0;
}
.dg-gargalos h4 { font-family: var(--font-head); font-size: 1.06rem; font-weight: 600; margin: 0 0 0.4rem; }
.dg-gargalos p { color: var(--muted); font-size: 0.94rem; line-height: 1.65; margin: 0; }

/* recomendações */
.dg-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.dg-recs li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.dg-recs li:last-child { border-bottom: 0; padding-bottom: 0; }
.dg-rec-n { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: rgba(59, 139, 240, 0.55); line-height: 1.2; }
.dg-rec-txt { min-width: 0; }
.dg-rec-txt h4 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.45rem; }
.dg-rec-txt > p { color: var(--muted); font-size: 0.95rem; line-height: 1.68; margin: 0 0 0.8rem; }
.dg-rec-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.8rem; color: #8FA2BE; margin: 0; }
.dg-rec-meta strong { color: var(--text); font-weight: 600; }
.dg-rec-area {
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(248, 247, 248, 0.04);
}

/* limites e apelo */
.dg-limites {
  padding: 1.3rem 1.4rem;
  border-radius: 16px;
  border: 1px dashed rgba(248, 247, 248, 0.2);
  background: rgba(248, 247, 248, 0.022);
  margin-bottom: 2.4rem;
}
.dg-limites h3 { font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8FA2BE; margin-bottom: 0.9rem; }
.dg-limites ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.dg-limites li { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.4rem; }
.dg-limites p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; margin: 0; }

.dg-cta {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: 18px;
  border: 1px solid rgba(25, 110, 218, 0.42);
  background: linear-gradient(160deg, rgba(25, 110, 218, 0.16), rgba(25, 110, 218, 0.05));
}
.dg-cta h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); text-transform: none; letter-spacing: -0.01em; color: var(--text); margin-bottom: 0.6rem; }
.dg-cta > p { color: #D3D9E4; line-height: 1.65; margin: 0 0 1.4rem; }
.dg-cta-acts { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.dg-rodape-acts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }

/* --------------------------------------------------- secções de conteúdo */

.dg-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.dg-passos li { min-width: 0; }
.dg-passo-n { font-family: var(--font-head); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; color: rgba(59, 139, 240, 0.75); }
.dg-passos h3 { font-size: 1.1rem; margin: 0.6rem 0 0.45rem; }
.dg-passos p { color: var(--muted); font-size: 0.94rem; line-height: 1.65; margin: 0; }

.dg-grelha { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.dg-grelha-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.dg-bloco-card {
  padding: 1.4rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(248, 247, 248, 0.03);
  min-width: 0;
}
.dg-bloco-card h3 { font-size: 1.08rem; margin-bottom: 0.5rem; }
.dg-bloco-card p { color: var(--muted); font-size: 0.94rem; line-height: 1.65; margin: 0 0 0.6rem; }
.dg-bloco-card p:last-child { margin-bottom: 0; }
.dg-bloco-card a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 0.18em; }

.dg-exemplos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dg-exemplos li {
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.3rem 2rem;
  grid-template-columns: 1fr;
  min-width: 0;
}
@media (min-width: 48rem) { .dg-exemplos li { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
.dg-exemplos li:last-child { border-bottom: 1px solid var(--line); }
.dg-exemplos h3 { font-size: 1.06rem; margin: 0; }
.dg-exemplos p { color: var(--muted); font-size: 0.95rem; line-height: 1.68; margin: 0; }

.dg-metodo { display: grid; gap: 1.6rem 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.dg-metodo > div { min-width: 0; }
.dg-metodo h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.dg-metodo p { color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin: 0; }

.dg-faq-wrap { max-width: 48rem; }
.dg-faq { display: grid; gap: 0; }
.dg-faq details { border-top: 1px solid var(--line); }
.dg-faq details:last-child { border-bottom: 1px solid var(--line); }
.dg-faq summary {
  cursor: pointer;
  padding: 1.15rem 2rem 1.15rem 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  position: relative;
  list-style: none;
  min-height: 44px;
}
.dg-faq summary::-webkit-details-marker { display: none; }
.dg-faq summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue-bright);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}
.dg-faq details[open] summary::after { content: "\2212"; }
.dg-faq summary:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 6px; }
.dg-faq details p { color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin: 0 0 1.2rem; max-width: 44rem; }

.dg-cta-final { text-align: center; }
.dg-cta-final h2 { max-width: 34rem; margin-inline: auto; }
.dg-cta-final .lead { max-width: 40rem; margin: 0 auto 2rem; }
.dg-cta-final .row-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.legal-ident-line {
  color: #7C90B0;
  font-size: 0.78rem;
  line-height: 1.7;
  margin: 3rem auto 0;
  max-width: 44rem;
}
.legal-ident-line a { color: inherit; }

/* Enquanto o diagnóstico decorre, o marketing por baixo sai da frente: quem
   já começou a responder não precisa de voltar a ser convencido, e a página
   passa a ter um caminho só. */
.dg-a-decorrer .dg-heroi,
.dg-a-decorrer .dg-secao:not(.dg-ferramenta),
.dg-a-decorrer .dg-cta-final { display: none; }
.dg-a-decorrer .dg-ferramenta { padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: 4rem; }

/* -------------------------------------------------------- consentimento */

.consent {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 130%);
  width: min(44rem, 100% - 1.6rem);
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(8, 11, 18, 0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  opacity: 0;
}
.consent.is-in { transform: translate(-50%, 0); opacity: 1; }
.consent.is-out { transform: translate(-50%, 130%); opacity: 0; }
.consent-body { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.consent-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.consent-acts .btn { flex: 1 1 10rem; padding: 0.7rem 1.2rem; font-size: 0.95rem; }
.consent-link { color: #8FA2BE; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 0.18em; justify-self: start; }
@media (min-width: 40rem) {
  .consent { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .consent-body { grid-row: 1; }
  .consent-acts { grid-row: 1; grid-column: 2; }
  .consent-link { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- papel */

/* O resultado é a única coisa que vale a pena imprimir, e quem carrega em
   "Guardar em PDF" quer um documento e não uma captura do site. */
@media print {
  .site-header, .page-foot, .consent, .dg-rodape-acts, .dg-cta-acts { display: none !important; }
  body, .page { background: #fff !important; color: #111 !important; }
  .dg-res { border: 0; box-shadow: none; max-width: none; padding: 0; }
  .dg-res, .dg-card, .dg-vd, .dg-cartao, .dg-gargalos li, .dg-limites, .dg-cta { background: #fff !important; }
  .dg-res *, .dg-res h2, .dg-res h3, .dg-res h4 { color: #111 !important; }
  .dg-dim p, .dg-gargalos p, .dg-rec-txt > p, .dg-limites li, .dg-cartao-n { color: #444 !important; }
  /* SÓ A COR. O `stroke-dashoffset: 0` que aqui esteve desenhava o anel
     INTEIRO no papel, fosse qual fosse a pontuação: com o `dasharray` a valer
     a circunferência toda, deslocamento zero é o círculo fechado. O PDF que a
     pessoa guarda dizia 48 ao centro e mostrava 100 à volta. O valor certo vem
     do estilo em linha que o código escreve, e é esse que tem de passar. */
  .dg-anel-frente { stroke: #196EDA !important; filter: none; }
  .dg-dim-frente { fill: #196EDA !important; }
  .dg-dim-fundo, .dg-anel-fundo { fill: #DDD !important; stroke: #DDD !important; }
  .dg-cartao-v { color: #196EDA !important; }
  .dg-bloco, .dg-limites { break-inside: avoid; }
  .dg-recs li, .dg-gargalos li { break-inside: avoid; }
}

/* ------------------------------------------------------ movimento a menos */

@media (prefers-reduced-motion: reduce) {
  .dg-anel-frente { transition: none; }
  .dg-dim-frente, .dg-barra-frente, .dg-op, .consent { transition: none; }
  .consent { transform: translate(-50%, 0); opacity: 1; }
}