/* =========================================================================
   Diagnóstico de Fiscalização Anatel — GBX ISP Consult

   O diagnóstico nasceu em marinho + laranja, seguindo o modelo de site que
   o cliente tinha aprovado. Só que o site nunca virou marinho: continuou
   índigo + amarelo, e em 04/09 ganhou um redesign inteiro. O resultado era
   uma placa quase preta com botão laranja largada no meio de uma página
   índigo de cantos macios — parecia outro site. Agora o diagnóstico segue
   a identidade que está no ar.

   Cada token lê primeiro a variável do TEMA e só cai no valor fixo se o
   plugin estiver rodando sem ele (prévia, outro tema). Assim, quando a
   marca mudar de novo, o diagnóstico vai junto sem ninguém lembrar dele.

   Escrito para o celular primeiro: é lá que o diagnóstico vai ser respondido.
   ========================================================================= */

.gbxd{
  /* --- superfícies --- */
  --gbxd-marinho:   var(--gbx-marca,   #201751);
  --gbxd-marinho-2: var(--gbx-marca-2, #2A1F68);
  --gbxd-marinho-3: var(--gbx-indigo-2,#3B2C93);
  --gbxd-papel:     var(--gbx-ink,     #FFFFFF);
  --gbxd-papel-2:   var(--gbx-ink-2,   #F6F7FA);

  /* --- destaque: o amarelo da marca ---
     Sobre o índigo profundo ele dá 10,4:1; e o botão amarelo com texto
     escuro dá 11,5:1. O laranja escurecido que existia aqui só existia
     porque o laranja original reprovava em contraste — problema que
     deixou de existir junto com o laranja. */
  --gbxd-marca:       var(--gbx-accent,   #FFC800);
  --gbxd-marca-h:     var(--gbx-accent-2, #E0AE00);
  --gbxd-marca-forte: var(--gbx-indigo,   #2C1F70);
  --gbxd-sobre-marca: #14162A;

  /* --- texto --- */
  --gbxd-texto:   var(--gbx-text,   #14162A);
  --gbxd-texto-2: var(--gbx-text-2, #4C5169);
  --gbxd-sobre-escuro:   var(--gbx-marca-text,   #EFEFF7);
  --gbxd-sobre-escuro-2: var(--gbx-marca-text-2, #ADB2CE);

  /* --- semáforo do resultado --- */
  --gbxd-alto:  #1E7A54;
  --gbxd-bom:   #2E6FB8;
  --gbxd-medio: #9A6700;
  --gbxd-baixo: #B3261E;

  --gbxd-linha: var(--gbx-line, #E2E5EE);

  /* Forma: a mesma escala do tema. O 6px de antes é o que fazia o bloco
     parecer recortado com tesoura no meio de uma página arredondada. */
  --gbxd-r-sm: var(--gbx-r-sm, 10px);
  --gbxd-r:    var(--gbx-r,    14px);
  --gbxd-r-lg: var(--gbx-r-lg, 20px);
  --gbxd-r-xl: var(--gbx-r-xl, 28px);
  --gbxd-r-pill: 999px;

  /* Botão de contorno: cada SUPERFÍCIE declara o seu par. O padrão é o fundo
     claro; as superfícies escuras estão num bloco só, logo abaixo. Não
     escreva exceção por nome de seção — foi assim que o botão sumiu antes. */
  --gbxd-btn2-cor:     var(--gbxd-texto);
  --gbxd-btn2-cor-h:   var(--gbxd-marca-forte);
  --gbxd-btn2-borda:   #7F87A0;   /* 3:1 contra o branco */
  --gbxd-btn2-borda-h: var(--gbxd-marca-forte);

  /* O anel de foco e informacao de interface e pede 3:1 contra o que esta
     ao lado. Amarelo sobre branco da 1,6:1 — em fundo claro o anel e
     indigo; as superficies escuras trocam por amarelo mais abaixo, e por
     isso esta linha tem de vir ANTES delas: mesma especificidade, quem vem
     depois ganha. */
  --gbxd-foco: var(--gbxd-marca-forte);
  --gbxd-sombra: 0 2px 10px rgba(20,22,42,.07);
  --gbxd-sombra-2: 0 18px 44px -18px rgba(20,22,42,.28);

  --gbxd-fonte: var(--gbx-font-head, "Manrope", "Segoe UI", system-ui, sans-serif);
  --gbxd-corpo: var(--gbx-font-body, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --gbxd-mono:  var(--gbx-font-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);

  font-family: var(--gbxd-corpo);
  color: var(--gbxd-texto);
  line-height: 1.6;
}

.gbxd *,
.gbxd *::before,
.gbxd *::after{ box-sizing: border-box; }

/* ---------- Blindagem contra o `.gbx-prose` do tema ----------
   O shortcode sai dentro do the_content(), e o tema embrulha o conteúdo num
   `.gbx-prose` que estiliza elementos crus: blockquote, ul, li, img, h2,
   strong. Como aquilo é `.gbx-prose li` (classe + elemento = 0,1,1) e o que
   escrevemos aqui era `.gbxd-ficha li` (0,1,1) declarado ANTES, o tema
   ganhava — a citação virava caixa branca no meio do bloco escuro.
   Prefixar com `.gbxd` sobe para 0,2,1 e devolve o controle ao plugin,
   sem `!important` e sem depender de ordem de carregamento. */
.gbxd .gbxd-citacao{
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-style: normal;
}
.gbxd .gbxd-ficha,
.gbxd .gbxd-opcoes,
.gbxd .gbxd-pontos,
.gbxd .gbxd-sistema-lista{ list-style: none; }
.gbxd .gbxd-ficha li,
.gbxd .gbxd-pontos li{ margin: 0; padding-left: 0; }
.gbxd .gbxd-ficha li::marker,
.gbxd .gbxd-pontos li::marker{ content: ""; }
.gbxd .gbxd-autoridade__foto img{ margin: 0; }

/* ---------- Alinhamento com a régua do site ----------
   O tema põe o conteúdo da página num contêiner de 880px; o cabeçalho e as
   seções da home alinham em 1200px. O diagnóstico ficava recuado 160px de
   cada lado — parecia post de blog, não página institucional. Aqui a página
   do diagnóstico recupera a largura padrão, e a régua passa a ser a do tema:
   por isso o wrap interno deixa de impor largura e recuo próprios, senão
   seriam duas margens somadas e o bloco nunca casaria com o logotipo. */
body.gbxd-pagina .gbx-container--narrow{
  max-width: var(--gbx-container, 1200px);
}
body.gbxd-pagina .gbx-prose--wide,
body.gbxd-pagina .gbx-prose{ max-width: none; }

.gbxd-wrap{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
body.gbxd-pagina .gbxd-wrap{ max-width: none; padding: 0; }

/* As placas escuras passam a ocupar a régua inteira de 1200 e recebem o
   mesmo recuo interno do tema (24px). Assim a BORDA da placa fica na régua
   e o TEXTO cai exatamente na linha do logotipo e do menu — que é o que
   faz a página parecer documento de empresa e não caixa solta no meio do
   branco. O recuo negativo é em pixels do próprio tema, nunca em `vw`:
   `100vw` conta a barra de rolagem e cria estouro horizontal. */
body.gbxd-pagina .gbxd-intro,
body.gbxd-pagina .gbxd-quiz,
body.gbxd-pagina .gbxd-captura,
body.gbxd-pagina .gbxd-resultado{
  margin-inline: calc(var(--gbx-gutter, 24px) * -1);
  padding-inline: var(--gbx-gutter, 24px);
}
.gbxd-wrap--estreito{ max-width: 760px; }
/* A tela de perguntas continua estreita de propósito: uma pergunta por vez
   lê melhor em medida curta, e o cliente disse que essa parte está boa. */
body.gbxd-pagina .gbxd-wrap--estreito{ max-width: 760px; margin-inline: auto; }

/* ---------- 1. Abertura ---------- */

.gbxd-intro{
  /* cor sólida primeiro: se o gradiente não pintar, o texto claro ainda tem
     fundo escuro embaixo. */
  background-color: var(--gbxd-marinho);
  background-image: linear-gradient(180deg, var(--gbxd-marinho-2) 0%, var(--gbxd-marinho) 100%);
  color: var(--gbxd-sobre-escuro);
  padding: 48px 0 56px;
}

/* Era mono MAIUSCULA com .12em de entreletras — o mesmo rotulo que saiu do
   tema no redesign, pela mesma razao: e o detalhe que faz um bloco parecer
   gerado. Ponto na frente e o nome escrito normalmente. */
.gbxd-chapeu{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--gbxd-corpo);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--gbxd-marca);
  margin: 0 0 12px;
}
.gbxd-chapeu::before{
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: var(--gbxd-r-pill);
  background: currentColor;
}
/* Em fundo claro o amarelo nao le: ali o rotulo e indigo. */
.gbxd-captura .gbxd-chapeu,
.gbxd-quiz .gbxd-chapeu,
.gbxd-resultado .gbxd-chapeu{ color: var(--gbxd-marca-forte); }

.gbxd-titulo{
  font-family: var(--gbxd-fonte);
  font-size: clamp(1.75rem, 5.5vw, 2.6rem);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 16px;
  color: #fff;
  text-wrap: balance;
}
.gbxd-titulo--m{
  font-size: clamp(1.4rem, 4.5vw, 1.9rem);
  color: var(--gbxd-texto);
}

.gbxd-sub{
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 0 0 32px;
  color: var(--gbxd-sobre-escuro-2);
}
.gbxd-captura .gbxd-sub{ color: var(--gbxd-texto-2); }

/* ---------- Abertura: decisao primeiro, prosa depois ---------- */
.gbxd-abertura{ display: grid; gap: 28px; }
.gbxd-abertura .gbxd-sub{ margin-bottom: 24px; }
.gbxd-abertura .gbxd-acoes{ margin-top: 0; }

/* A ficha responde "quanto do meu tempo" sem o visitante ter de perguntar.
   Prefixada com `.gbxd` porque o `.gbx-prose ul` do tema (0,1,1) vence
   `.gbxd-ficha` (0,1,0) e zerava o recuo — e o @media não salva, porque
   media query não acrescenta especificidade nenhuma. */
.gbxd .gbxd-ficha{
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid;
  gap: 16px 22px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.gbxd-ficha strong{
  display: block;
  font-family: var(--gbxd-fonte);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--gbxd-marca);
}
.gbxd-ficha span{
  display: block;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--gbxd-sobre-escuro-2);
  margin-top: 3px;
}

/* O tema estiliza `blockquote` com fundo de papel e barra à esquerda — sobre
   o índigo do diagnóstico aquilo virava uma caixa branca no meio do bloco
   escuro, com cara de defeito. Aqui a citação é tipografia, não caixa: por
   isso o fundo, a borda e o recuo do tema são zerados na mão. */
.gbxd-citacao{
  margin: 0 0 14px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--gbxd-fonte);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: #fff;
  text-wrap: balance;
}
.gbxd-citacao::before{
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: var(--gbxd-r-pill);
  background: var(--gbxd-marca);
  margin-bottom: 14px;
}
.gbxd-autoridade__assina{
  font-size: .9rem;
  color: var(--gbxd-marca);
  margin: 0 0 14px;
}
.gbxd-autoridade__assina strong{ color: var(--gbxd-marca); }
.gbxd-acoes--fim{ margin-top: 28px; }

.gbxd-autoridade{
  display: grid;
  gap: 24px;
  margin-top: 36px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--gbxd-marca);
  border-radius: var(--gbxd-r-lg);
  padding: 24px;
}
.gbxd-autoridade__foto img{
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: var(--gbxd-r);
  filter: saturate(.92);
}
.gbxd-autoridade__texto h2{
  font-family: var(--gbxd-fonte);
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 14px;
  color: #fff;
}
.gbxd-autoridade__texto p{
  margin: 0 0 12px;
  color: var(--gbxd-sobre-escuro-2);
  font-size: .98rem;
}
.gbxd-autoridade__texto strong{ color: #fff; }

.gbxd-acoes{ margin-top: 32px; }
.gbxd-nota{
  font-size: .85rem;
  color: var(--gbxd-sobre-escuro-2);
  margin: 12px 0 0;
}

/* ---------- 2. Botões ---------- */

.gbxd-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 28px;
  font-family: var(--gbxd-fonte);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--gbxd-r-sm);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
/* Amarelo com texto escuro: 11,5:1, e o mesmo par do botao principal do
   site. O laranja escurecido so existia porque o laranja do modelo
   reprovava em contraste — sumiu junto com ele. */
.gbxd-btn--1{
  background: var(--gbxd-marca);
  color: var(--gbxd-sobre-marca);
}
.gbxd-btn--1:hover,
.gbxd-btn--1:focus-visible{ background: var(--gbxd-marca-h); color: var(--gbxd-sobre-marca); }

/* Toda superfície escura do diagnóstico, num lugar só. Seção nova escura?
   Acrescente aqui — e o botão continua legível sozinho. */
.gbxd-intro,
.gbxd-cta,
.gbxd-nota-geral,
.gbxd-cartao--transicao{
  --gbxd-btn2-cor:     #FFFFFF;
  --gbxd-btn2-cor-h:   var(--gbxd-marca);
  --gbxd-btn2-borda:   rgba(255,255,255,.66);   /* 3,4:1 sobre o indigo */
  --gbxd-btn2-borda-h: var(--gbxd-marca);
  --gbxd-foco:         var(--gbxd-marca);
}

.gbxd-btn--2{
  background: transparent;
  color: var(--gbxd-btn2-cor);
  border-color: var(--gbxd-btn2-borda);
}
.gbxd-btn--2:hover,
.gbxd-btn--2:focus-visible{
  border-color: var(--gbxd-btn2-borda-h);
  color: var(--gbxd-btn2-cor-h);
}

.gbxd-btn--largo{ width: 100%; }
.gbxd-btn:disabled{ opacity: .6; cursor: default; }

.gbxd :focus-visible{
  outline: 3px solid var(--gbxd-foco);
  outline-offset: 2px;
}

/* ---------- 3. O diagnóstico ---------- */

/* As placas de secao (abertura, perguntas, captura, resultado) eram
   retangulos de canto reto no meio de uma pagina de cantos macios — era
   o que mais denunciava que o diagnostico vinha de outro projeto. */
.gbxd-intro,
.gbxd-quiz,
.gbxd-captura,
.gbxd-resultado{
  border-radius: var(--gbxd-r-xl);
  overflow: hidden;
}
.gbxd-quiz{
  background: var(--gbxd-papel-2);
  padding: 32px 0 48px;
  min-height: 70vh;
}

.gbxd-fases{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 28px;
}
.gbxd-fase__nome{
  display: block;
  font-family: var(--gbxd-corpo);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: #5A6478;          /* 5,42:1 sobre o papel — #6B7688 dava 4,28 */
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gbxd-fase.is-atual .gbxd-fase__nome{ color: var(--gbxd-marca-forte); font-weight: 600; }  /* 13,6:1 */
.gbxd-fase.is-feita .gbxd-fase__nome{ color: var(--gbxd-texto); }
.gbxd-fase__trilho{
  display: block;
  height: 4px;
  background: #DCE1E8;
  border-radius: var(--gbxd-r-pill);
  overflow: hidden;
}
.gbxd-fase__barra{
  display: block;
  height: 100%;
  background: var(--gbxd-marca-forte);
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}
.gbxd-fase.is-feita .gbxd-fase__barra{ background: var(--gbxd-alto); }

.gbxd-palco{ min-height: 260px; }

.gbxd-cartao{
  background: var(--gbxd-papel);
  border: 1px solid var(--gbxd-linha);
  border-radius: var(--gbxd-r-lg);
  box-shadow: var(--gbxd-sombra);
  padding: 28px 22px;
}
.gbxd-cartao--destaque{
  border-color: var(--gbxd-marca-forte);
  border-top: 4px solid var(--gbxd-marca-forte);
  box-shadow: var(--gbxd-sombra-2);
}

.gbxd-selo-texto{
  font-family: var(--gbxd-corpo);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--gbxd-marca-forte);
  margin: 0 0 12px;
}

.gbxd-pergunta{
  font-family: var(--gbxd-fonte);
  font-size: clamp(1.25rem, 4.2vw, 1.6rem);
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 12px;
  text-wrap: pretty;
}
.gbxd-auxiliar{
  font-size: .92rem;
  color: var(--gbxd-texto-2);
  margin: 0 0 8px;
}

.gbxd-opcoes{
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.gbxd-opcao{
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 18px 20px;
  background: var(--gbxd-papel);
  border: 2px solid #C3CBD6;
  border-radius: var(--gbxd-r);
  font-family: var(--gbxd-fonte);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gbxd-texto);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.gbxd-opcao:hover:not(:disabled){
  border-color: var(--gbxd-marinho);
  background: #F2F5F9;
}
.gbxd-opcao.is-escolhida{
  border-color: var(--gbxd-marca-forte);
  background: var(--gbxd-marca-forte);
  color: #fff;
}
.gbxd-opcao.is-anterior{
  border-style: dashed;
  border-color: var(--gbxd-marca-forte);
}
.gbxd-opcao:disabled{ cursor: default; }

.gbxd-cartao--transicao{
  text-align: center;
  background: var(--gbxd-marinho);
  border-color: var(--gbxd-marinho-3);
  color: var(--gbxd-sobre-escuro);
  padding: 40px 24px;
}
.gbxd-cartao--transicao h2{
  font-family: var(--gbxd-fonte);
  font-size: 1.4rem;
  color: #fff;
  margin: 0 0 12px;
}
.gbxd-cartao--transicao p{
  color: var(--gbxd-sobre-escuro-2);
  max-width: 46ch;
  margin: 0 auto 24px;
}
.gbxd-selo{
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,200,0,.16);
  border: 2px solid var(--gbxd-marca);
  color: var(--gbxd-marca);
  font-size: 1.4rem;
}

.gbxd-rodape{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  min-height: 24px;
}
.gbxd-voltar{
  background: none;
  border: 0;
  padding: 12px 0;
  min-height: 44px;        /* alvo de toque */
  font-size: .9rem;
  color: var(--gbxd-texto-2);
  cursor: pointer;
  text-decoration: underline;
}
.gbxd-voltar:hover{ color: var(--gbxd-marca-forte); }

.gbxd-salvo{
  font-family: var(--gbxd-corpo);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--gbxd-alto);
  opacity: 0;
  transition: opacity .3s ease;
}
.gbxd-salvo.is-visivel{ opacity: 1; }

.gbxd-erro{
  margin-top: 16px;
  padding: 12px 16px;
  background: #FCEDEC;
  border-left: 3px solid var(--gbxd-baixo);
  border-radius: var(--gbxd-r-sm);
  color: #7A1B15;
  font-size: .95rem;
}

/* ---------- 4. Captura ---------- */

.gbxd-captura{ background: var(--gbxd-papel); padding: 48px 0 56px; }

.gbxd-resumo{
  background: var(--gbxd-papel-2);
  border-left: 3px solid var(--gbxd-marca-forte);
  border-radius: var(--gbxd-r-sm);
  padding: 16px 20px;
  margin: 0 0 28px;
}
.gbxd-resumo__lista{ margin: 0; padding-left: 20px; }
.gbxd-resumo__lista li{ margin: 4px 0; }
.gbxd-resumo__ok{ margin: 0; color: var(--gbxd-alto); }

.gbxd-campos{ display: grid; gap: 16px; }
.gbxd-campo{ margin: 0; }
.gbxd-campo label{
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--gbxd-texto);
}
.gbxd-campo input,
.gbxd-campo select{
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--gbxd-texto);
  background: var(--gbxd-papel);
  border: 1px solid #A9B2C0;
  border-radius: var(--gbxd-r-sm);
}
.gbxd-campo input:focus,
.gbxd-campo select:focus{ border-color: var(--gbxd-marinho); }

.gbxd-consent{
  margin: 16px 0 0;
  font-size: .88rem;
  color: var(--gbxd-texto-2);
}
.gbxd-consent label{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
  padding: 4px 0;
}
/* 24px e o alvo minimo (WCAG 2.5.8); 20 reprovava. */
.gbxd-consent input{ width: 24px; height: 24px; margin: 0; flex: 0 0 auto; }

.gbxd-form .gbxd-btn{ margin-top: 24px; }

/* ---------- 5. Resultado ---------- */

.gbxd-resultado{ background: var(--gbxd-papel-2); padding: 48px 0 64px; }

.gbxd-nota-geral{
  display: grid;
  gap: 20px;
  align-items: center;
  background: var(--gbxd-marinho);
  color: var(--gbxd-sobre-escuro);
  border-radius: var(--gbxd-r-lg);
  padding: 28px 24px;
  margin-bottom: 24px;
}
.gbxd-indice{
  font-family: var(--gbxd-fonte);
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: #fff;
}
.gbxd-indice__n{ font-size: 3.4rem; font-weight: 700; line-height: 1; }
.gbxd-indice__d{ font-size: 1.1rem; color: var(--gbxd-sobre-escuro-2); }
.gbxd-indice.is-alto .gbxd-indice__n{ color: #6FE3AE; }
.gbxd-indice.is-bom .gbxd-indice__n{ color: #8FC4FF; }
.gbxd-indice.is-medio .gbxd-indice__n{ color: #FFC65C; }
.gbxd-indice.is-baixo .gbxd-indice__n{ color: #FF9A92; }

.gbxd-nota-geral__texto h2{
  font-family: var(--gbxd-fonte);
  font-size: 1.3rem;
  color: #fff;
  margin: 0 0 8px;
}
.gbxd-nota-geral__texto p{ margin: 0; color: var(--gbxd-sobre-escuro-2); }

.gbxd-contas{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 32px;
}
.gbxd-conta{
  background: var(--gbxd-papel);
  border: 1px solid var(--gbxd-linha);
  border-top: 3px solid var(--gbxd-linha);
  border-radius: var(--gbxd-r);
  padding: 14px 12px;
  text-align: center;
}
.gbxd-conta--critico{ border-top-color: var(--gbxd-baixo); }
.gbxd-conta--nao{ border-top-color: var(--gbxd-medio); }
.gbxd-conta--nao-sei{ border-top-color: var(--gbxd-bom); }
.gbxd-conta strong{
  display: block;
  font-family: var(--gbxd-fonte);
  font-size: 1.9rem;
  line-height: 1.1;
}
.gbxd-conta span{ font-size: .78rem; color: var(--gbxd-texto-2); }

.gbxd-h3{
  font-family: var(--gbxd-fonte);
  font-size: 1.15rem;
  margin: 32px 0 16px;
}

.gbxd-areas{ display: grid; gap: 14px; }
.gbxd-area__topo{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .92rem;
  margin-bottom: 6px;
}
.gbxd-area__topo strong{ font-family: var(--gbxd-mono); }
.gbxd-area__trilho{
  height: 8px;
  background: #DCE1E8;
  border-radius: var(--gbxd-r-pill);
  overflow: hidden;
}
.gbxd-area__barra{ height: 100%; border-radius: var(--gbxd-r-pill); }
.gbxd-area__barra.is-alto{ background: var(--gbxd-alto); }
.gbxd-area__barra.is-bom{ background: var(--gbxd-bom); }
.gbxd-area__barra.is-medio{ background: var(--gbxd-medio); }
.gbxd-area__barra.is-baixo{ background: var(--gbxd-baixo); }

.gbxd-pontos{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gbxd-ponto{
  background: var(--gbxd-papel);
  border: 1px solid var(--gbxd-linha);
  border-left: 3px solid var(--gbxd-medio);
  border-radius: var(--gbxd-r);
  padding: 16px 18px;
}
.gbxd-ponto.is-critico{ border-left-color: var(--gbxd-baixo); }
.gbxd-ponto h4{
  font-family: var(--gbxd-fonte);
  font-size: 1.02rem;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gbxd-ponto__sinal{
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gbxd-baixo);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.gbxd-ponto p{ margin: 0 0 6px; font-size: .93rem; color: var(--gbxd-texto-2); }
.gbxd-ponto__resposta{ font-size: .85rem !important; }

.gbxd-ressalva{
  margin: 28px 0 0;
  padding: 14px 16px;
  background: #EEF2F7;
  border-radius: var(--gbxd-r);
  font-size: .85rem;
  color: var(--gbxd-texto-2);
}

.gbxd-cta{
  margin-top: 36px;
  background: var(--gbxd-marinho);
  color: var(--gbxd-sobre-escuro);
  border-radius: var(--gbxd-r-lg);
  padding: 32px 24px;
}
.gbxd-cta h3{
  font-family: var(--gbxd-fonte);
  font-size: 1.3rem;
  color: #fff;
  margin: 0 0 10px;
}
.gbxd-cta p{ margin: 0 0 24px; color: var(--gbxd-sobre-escuro-2); }
.gbxd-cta__botoes{ display: grid; gap: 12px; }

.gbxd-versao{
  margin: 24px 0 0;
  font-family: var(--gbxd-mono);
  font-size: .72rem;
  color: #5A6478;
  text-align: center;
}

/* ---------- 6. Movimento ---------- */

.gbxd-entra{ animation: gbxd-entra .28s cubic-bezier(.16,1,.3,1) both; }
.gbxd-sai{ animation: gbxd-sai .18s ease-in both; }

@keyframes gbxd-entra{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}
@keyframes gbxd-sai{
  from{ opacity: 1; transform: none; }
  to{ opacity: 0; transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce){
  .gbxd-entra, .gbxd-sai{ animation: none; }
  .gbxd-fase__barra{ transition: none; }
}

/* ---------- 7. Telas maiores ---------- */

@media (min-width: 700px){
  .gbxd-intro{ padding: 72px 0 80px; }
  /* Em tela larga a chamada e a ficha andam lado a lado: o botao sobe para a
     primeira dobra e a ficha deixa de ser mais um bloco empilhado. */
  .gbxd-abertura{ grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 72px; align-items: start; }
  /* O respiro entre a régua e o texto era de 28px e o cliente leu como
     "colado na linha". Numa lista em que cada item tem um número grande em
     cima, o recuo precisa ser maior que a entrelinha para a coluna existir
     como coluna, e não como texto encostado num traço. */
  .gbxd .gbxd-ficha{ border-top: 0; border-left: 1px solid rgba(255,255,255,.14); padding: 6px 0 6px 48px; grid-template-columns: 1fr; gap: 30px; }
  .gbxd-autoridade{
    grid-template-columns: 260px 1fr;
    gap: 32px;
    padding: 32px;
  }
  .gbxd-cartao{ padding: 40px 36px; }
  /* auto-fit, não repeat(3): a pergunta de perfil só tem SIM e NÃO, e com
     três colunas fixas os dois botões ficavam encolhidos à esquerda. */
  .gbxd-opcoes{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .gbxd-campos{ grid-template-columns: 1fr 1fr; }
  .gbxd-campo--curto{ max-width: 140px; }
  .gbxd-campo--largo{ grid-column: 1 / -1; }
  .gbxd-nota-geral{ grid-template-columns: auto 1fr; gap: 32px; padding: 36px 32px; }
  .gbxd-cta__botoes{ grid-auto-flow: column; justify-content: start; }
  .gbxd-fase__nome{ font-size: .82rem; }
}

@media (min-width: 900px){
  .gbxd-quiz{ padding: 48px 0 72px; }
  .gbxd-cartao{ padding: 48px 44px; }
}


/* ---------- 8. Rodada de 06/09: contador, imagem por área, semáforo ----------
   O cliente trocou a barra por fase por «Pergunta 08 de 30» com a barra
   embaixo, pediu imagem por assunto ao lado da pergunta e um resultado em
   semáforo (regular · atenção · crítico) com o índice em porcentagem. */

.gbxd-contador{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 16px; font-family: var(--gbxd-mono);
}
.gbxd-contador__n{ font-size: .86rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gbxd-marca-forte); }
.gbxd-contador__fase{ font-size: .78rem; color: #5A6478; }

.gbxd-progresso{
  height: 6px; margin: 18px 0 0; border-radius: var(--gbxd-r-pill);
  background: #DCE1E8; overflow: hidden;
}
.gbxd-progresso > span{
  display: block; height: 100%; width: 0; border-radius: var(--gbxd-r-pill);
  background: var(--gbxd-marca-forte); transition: width .45s cubic-bezier(.22,.61,.36,1);
}

.gbxd-nao-oficial{
  margin: 18px 0 0; font-size: .8rem; line-height: 1.5; max-width: 60ch;
  color: var(--gbxd-sobre-escuro-2);
}
.gbxd-nao-oficial--quiz{ color: #5A6478; text-align: center; max-width: none; margin-top: 22px; }

/* cartão com imagem: em cima no celular, ao lado a partir de 700px */
.gbxd-cartao--com-imagem{ padding: 0; overflow: hidden; }
.gbxd-cartao--com-imagem .gbxd-cartao__corpo{ padding: 28px 22px; }
.gbxd-cartao__figura{ position: relative; margin: 0; background: #E6EAF1; }
.gbxd-cartao__figura img{ display: block; width: 100%; height: 190px; object-fit: cover; }
.gbxd-cartao__figura figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
  padding: 26px 14px 10px;
  background: linear-gradient(180deg, rgba(20,22,42,0) 0%, rgba(20,22,42,.78) 100%);
  color: #fff; font-size: .78rem;
}
.gbxd-cartao__figura figcaption span{ font-weight: 600; letter-spacing: .02em; }
.gbxd-cartao__figura figcaption small{ font-size: .66rem; opacity: .85; }

/* semáforo */
.gbxd-semaforo{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px;
}
.gbxd-semaforo--resumo{ margin: 0; }
.gbxd-sem{
  display: grid; grid-template-columns: 14px auto; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center; padding: 14px 14px 12px;
  background: var(--gbxd-papel); border: 1px solid var(--gbxd-linha); border-radius: var(--gbxd-r);
}
.gbxd-sem i{ grid-row: 1 / span 2; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.gbxd-sem strong{ font-family: var(--gbxd-fonte); font-size: 1.7rem; line-height: 1.05; color: var(--gbxd-texto); }
.gbxd-sem span{ font-size: .8rem; color: var(--gbxd-texto-2); }
.gbxd-sem--verde{ color: var(--gbxd-alto); border-top: 3px solid var(--gbxd-alto); }
.gbxd-sem--amarelo{ color: var(--gbxd-medio); border-top: 3px solid var(--gbxd-medio); }
.gbxd-sem--vermelho{ color: var(--gbxd-baixo); border-top: 3px solid var(--gbxd-baixo); }

/* índice em porcentagem */
.gbxd-indice{ flex-direction: column; align-items: flex-start; gap: 4px; }
.gbxd-indice__r{ font-family: var(--gbxd-corpo); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gbxd-sobre-escuro-2); }
.gbxd-indice__n small{ font-size: 1.6rem; font-weight: 600; margin-left: 2px; }

/* chamada comercial logo abaixo do índice */
.gbxd-chamada{
  display: grid; gap: 14px; align-items: center;
  margin: 0 0 32px; padding: 20px 22px;
  background: #FFF7D6; border: 1px solid #F1DD8A; border-left: 5px solid var(--gbxd-marca); border-radius: var(--gbxd-r);
}
.gbxd-chamada p{ margin: 0; font-family: var(--gbxd-fonte); font-weight: 600; font-size: 1.05rem; color: var(--gbxd-texto); }
.gbxd-chamada .gbxd-btn{ justify-self: start; }

@media (min-width: 700px){
  .gbxd-cartao--com-imagem{ display: grid; grid-template-columns: 42% minmax(0, 1fr); padding: 0; }
  .gbxd-cartao--com-imagem .gbxd-cartao__corpo{ padding: 40px 36px; }
  .gbxd-cartao__figura img{ height: 100%; min-height: 320px; }
  .gbxd-cartao--com-imagem .gbxd-opcoes{ grid-template-columns: 1fr; }
  .gbxd-chamada{ grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 900px){
  .gbxd-cartao--com-imagem{ padding: 0; }
  .gbxd-cartao--com-imagem .gbxd-cartao__corpo{ padding: 44px 40px; }
}
@media (max-width: 480px){
  .gbxd-semaforo{ grid-template-columns: 1fr; }
}
/* piso de 13px medido no QA de 06/09 */
.gbxd-nao-oficial,.gbxd-contador__fase,.gbxd-cartao__figura figcaption,.gbxd-sem span{ font-size: .82rem; }
.gbxd-cartao__figura figcaption small{ font-size: .8rem; }