/* ============================================================
   Chat da seção "Tem dúvidas?" — visual do BQM para o chat embutido
   (vitoria/chat-6x1.js, gerado no repo chat-6x1). O JS só monta o HTML;
   tudo o que se vê está aqui: a janela (.cx-*) e as respostas
   (.resp-*, .bl-* para os blocos, .fontes-*, .acao, .seguir).

   --c é a "unidade de pixel" da janela: ~1px da tela no artboard,
   para as medidas do chat ficarem legíveis como num app de conversa
   sem sair da escala em rem do design.md.
   ============================================================ */

.vt-chat {
  --c: 0.0168rem;
  --wa: #1fa855;
}

/* títulos, botões, rótulos: Anybody (o texto das respostas herda PP Neue Machina) */
.cx-nome strong, .cx-nova, .cx-sugestoes-rotulo, .cx-sugestoes button, .resp-identidade,
.bl-titulo, .cite, .bl-numeros strong, .bl-passo-n, .bl-marco-quando, .bl-caixa-rotulo,
.fontes-cab, .fonte-n, .fonte-contexto, .acao, .voto-pergunta, .seguir-rotulo, .seguir-lista button,
.bl-estudo-cab, .bl-estudo-links a, .bl-tabela thead th, .bl-comparacao-criterio, .bl-estudo-limites strong,
.relato .btn {
  font-family: 'Anybody', sans-serif;
}

/* ---------- Janela ---------- */

.cx {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--preto);
  border: 0.03rem solid var(--preto);
  border-radius: 0.5rem;
  box-shadow: 0.16rem 0.16rem 0 var(--amarelo);
  font-size: calc(var(--c) * 15);
  line-height: 1.45;
}

.cx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cx-topo {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--c) * 12);
  padding: calc(var(--c) * 12) calc(var(--c) * 14) calc(var(--c) * 12) calc(var(--c) * 16);
  background: var(--azul);
  color: var(--creme);
  border-bottom: 0.03rem solid var(--preto);
}

.cx-avatar {
  flex: none;
  width: auto;
  height: calc(var(--c) * 34);
}

.cx-nome {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.cx-nome strong {
  font-size: calc(var(--c) * 18);
  font-weight: 900;
  font-stretch: 72%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cx-nome span {
  font-size: calc(var(--c) * 12.5);
  opacity: 0.8;
}

/* ponto verde de "online" antes da descrição */
.cx-nome span::before {
  content: '';
  display: inline-block;
  width: calc(var(--c) * 7);
  height: calc(var(--c) * 7);
  margin-right: calc(var(--c) * 5);
  border-radius: 50%;
  background: #3ddc6f;
  vertical-align: 0.08em;
}

.cx-nova {
  flex: none;
  margin-left: auto;
  padding: calc(var(--c) * 6) calc(var(--c) * 12);
  background: transparent;
  color: var(--creme);
  border: 0.02rem solid rgba(251, 248, 234, 0.6);
  border-radius: 2rem;
  font-size: calc(var(--c) * 12);
  font-weight: 900;
  font-stretch: 82%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cx-nova:hover {
  background: var(--amarelo);
  border-color: var(--preto);
  color: var(--preto);
}

.cx-topo :focus-visible { outline-color: var(--amarelo); }

/* a conversa rola aqui dentro; a página fica parada */
.cx-corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--c) * 14);
  padding: calc(var(--c) * 16) calc(var(--c) * 16) calc(var(--c) * 20);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 19, 18, 0.35) transparent;
}

.cx-corpo:focus-visible { outline-offset: -0.04rem; }

.cx-balao {
  align-self: flex-start;
  max-width: 90%;
  padding: calc(var(--c) * 11) calc(var(--c) * 14);
  background: var(--creme);
  border: 0.02rem solid var(--preto);
  border-radius: calc(var(--c) * 16) calc(var(--c) * 16) calc(var(--c) * 16) calc(var(--c) * 4);
}

.cx-sugestoes-rotulo,
.seguir-rotulo {
  display: block;
  color: var(--azul);
  font-size: calc(var(--c) * 11.5);
  font-weight: 900;
  font-stretch: 90%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cx-sugestoes ul,
.seguir-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--c) * 8);
  margin-top: calc(var(--c) * 8);
}

.cx-sugestoes button,
.seguir-lista button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--c) * 10);
  width: 100%;
  padding: calc(var(--c) * 10) calc(var(--c) * 14) calc(var(--c) * 10) calc(var(--c) * 16);
  background: #fff;
  color: var(--azul);
  border: 0.022rem solid var(--azul);
  border-radius: 2rem;
  font-size: calc(var(--c) * 15.5);
  font-weight: 900;
  font-stretch: 76%;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cx-sugestoes button svg,
.seguir-lista button svg { flex: none; transition: transform 0.2s ease; }

.cx-sugestoes button:hover,
.seguir-lista button:hover {
  background: var(--amarelo);
  border-color: var(--preto);
  color: var(--preto);
}

.cx-sugestoes button:hover svg,
.seguir-lista button:hover svg { transform: translateX(calc(var(--c) * 3)); }

.cx-pergunta {
  align-self: flex-end;
  max-width: 85%;
  padding: calc(var(--c) * 10) calc(var(--c) * 14);
  background: var(--azul);
  color: var(--creme);
  border-radius: calc(var(--c) * 16) calc(var(--c) * 16) calc(var(--c) * 4) calc(var(--c) * 16);
  animation: cx-entra 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cx-pergunta p { overflow-wrap: anywhere; white-space: pre-wrap; }

@keyframes cx-entra {
  from { opacity: 0; transform: translateY(calc(var(--c) * 8)); }
}

/* campo de pergunta */
.cx-compositor {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--c) * 8);
  padding: calc(var(--c) * 10) calc(var(--c) * 12) calc(var(--c) * 6);
  border-top: 0.02rem solid rgba(19, 19, 18, 0.15);
}

.cx-compositor textarea {
  flex: 1;
  min-width: 0;
  min-height: calc(var(--c) * 46);
  max-height: calc(var(--c) * 160);
  padding: calc(var(--c) * 12) calc(var(--c) * 18);
  background: #fff;
  color: var(--preto);
  border: 0.024rem solid var(--preto);
  border-radius: calc(var(--c) * 23);
  /* 16px é o mínimo para o iPhone não dar zoom ao tocar no campo: única medida em px */
  font: 500 max(calc(var(--c) * 15.5), 16px) / 1.35 'PP Neue Machina', sans-serif;
  resize: none;
}

.cx-compositor textarea::placeholder { color: var(--preto); opacity: 0.5; }

.cx-compositor textarea:focus {
  outline: 0.03rem solid var(--azul);
  outline-offset: 0.02rem;
}

.cx-enviar {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--c) * 46);
  height: calc(var(--c) * 46);
  background: var(--amarelo);
  color: var(--preto);
  border: 0.024rem solid var(--preto);
  border-radius: 50%;
  box-shadow: calc(var(--c) * 3) calc(var(--c) * 3) 0 var(--preto);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.cx-enviar:not(:disabled):hover {
  transform: translate(calc(var(--c) * -1), calc(var(--c) * -1));
  box-shadow: calc(var(--c) * 4) calc(var(--c) * 4) 0 var(--preto);
}

.cx-enviar:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.cx-parar { background: var(--azul); color: var(--creme); }

.cx-aviso {
  flex: none;
  padding: 0 calc(var(--c) * 12) calc(var(--c) * 8);
  color: rgba(19, 19, 18, 0.55);
  font-size: calc(var(--c) * 11);
  text-align: center;
}

/* ---------- Resposta ---------- */

.resp { animation: cx-entra 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

.resp-identidade {
  display: flex;
  align-items: center;
  gap: calc(var(--c) * 7);
  color: var(--azul);
  font-size: calc(var(--c) * 11.5);
  font-weight: 900;
  font-stretch: 90%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.resp-marca {
  display: grid;
  place-items: center;
  width: calc(var(--c) * 18);
  height: calc(var(--c) * 18);
  border-radius: 50%;
  background: var(--azul);
}

.resp-marca span {
  width: calc(var(--c) * 8);
  height: calc(var(--c) * 8);
  border-radius: 50%;
  background: var(--amarelo);
}

.resp-texto { margin-top: calc(var(--c) * 8); }

/* cursor piscando enquanto a resposta chega */
.resp.digitando .resp-texto::after {
  content: '';
  display: inline-block;
  width: calc(var(--c) * 8);
  height: calc(var(--c) * 16);
  margin-top: calc(var(--c) * 4);
  background: var(--azul);
  animation: cx-pisca 0.9s steps(2) infinite;
}

@keyframes cx-pisca { 50% { opacity: 0; } }

.resposta-composicao {
  display: flex;
  flex-direction: column;
  gap: calc(var(--c) * 10);
}

.resposta-bloco strong { font-weight: 800; }

/* a primeira frase responde direto: um pouco maior */
.resp-texto > .resposta-composicao > .resposta-bloco-paragrafo:first-child p {
  font-size: calc(var(--c) * 16.5);
  line-height: 1.35;
}

.resposta-bloco ul,
.resposta-bloco ol { padding-left: calc(var(--c) * 20); }
.resposta-bloco li + li { margin-top: calc(var(--c) * 5); }
.resposta-bloco li::marker { color: var(--azul); font-weight: 800; }

/* blocos em lista (cards, números, passos, linha do tempo) não herdam o recuo das listas comuns */
.resposta-bloco :is(.bl-cards, .bl-numeros, .bl-passos, .bl-linha) { padding: 0; }
.resposta-bloco :is(.bl-cards, .bl-numeros, .bl-passos, .bl-linha) > li { margin: 0; }

.bl-titulo {
  display: flex;
  align-items: center;
  gap: calc(var(--c) * 7);
  margin-top: calc(var(--c) * 4);
  color: var(--azul);
  font-size: calc(var(--c) * 17);
  font-weight: 900;
  font-stretch: 70%;
  line-height: 1.05;
  text-transform: uppercase;
}

.bl-titulo-icone { display: inline-flex; color: var(--verde); }

/* citação: número amarelo que abre a fonte */
.cite-grupo {
  display: inline-flex;
  gap: calc(var(--c) * 2);
  margin-left: calc(var(--c) * 3);
  vertical-align: super;
  line-height: 1;
}

.cite {
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--c) * 17);
  height: calc(var(--c) * 17);
  padding: 0 calc(var(--c) * 4);
  background: var(--amarelo);
  color: var(--preto);
  border: 0.015rem solid var(--preto);
  border-radius: 2rem;
  font-size: calc(var(--c) * 10.5);
  font-weight: 900;
  font-stretch: 85%;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cite:hover { background: var(--azul); color: var(--creme); }

.bl-sem-fonte {
  display: inline-block;
  margin-left: calc(var(--c) * 6);
  font-size: calc(var(--c) * 10.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* cards */
.bl-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--c) * 170), 1fr));
  gap: calc(var(--c) * 8);
}

.bl-cards > li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: calc(var(--c) * 4) calc(var(--c) * 8);
  padding: calc(var(--c) * 11) calc(var(--c) * 12);
  background: var(--creme);
  border: 0.018rem solid var(--preto);
  border-radius: calc(var(--c) * 12);
}

.bl-card-icone { display: inline-flex; color: var(--azul); }
.bl-cards > li > strong { font-size: calc(var(--c) * 14.5); line-height: 1.25; }
.bl-cards > li > span:not(.bl-card-icone) { grid-column: 1 / -1; font-size: calc(var(--c) * 13.5); line-height: 1.4; }

/* números */
.bl-numeros {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--c) * 140), 1fr));
  gap: calc(var(--c) * 8);
}

.bl-numeros > li {
  display: flex;
  flex-direction: column;
  gap: calc(var(--c) * 4);
  padding: calc(var(--c) * 11) calc(var(--c) * 13) calc(var(--c) * 12);
  background: var(--azul);
  color: var(--creme);
  border: 0.018rem solid var(--preto);
  border-radius: calc(var(--c) * 12);
}

.bl-numeros strong {
  color: var(--amarelo);
  font-size: calc(var(--c) * 34);
  font-weight: 900;
  font-stretch: 64%;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.bl-numeros .numero-sem-verificacao { color: var(--creme); opacity: 0.85; }
.bl-numeros > li > span { font-size: calc(var(--c) * 13); line-height: 1.35; }
.bl-numeros .cite { vertical-align: middle; }

/* passos */
.bl-passos { list-style: none; display: grid; gap: calc(var(--c) * 8); }

.bl-passos > li {
  display: grid;
  grid-template-columns: calc(var(--c) * 26) 1fr;
  gap: calc(var(--c) * 10);
  align-items: start;
}

.bl-passo-n {
  display: grid;
  place-items: center;
  width: calc(var(--c) * 26);
  height: calc(var(--c) * 26);
  border-radius: 50%;
  background: var(--azul);
  color: var(--creme);
  font-size: calc(var(--c) * 13);
  font-weight: 900;
}

/* linha do tempo */
.bl-linha { list-style: none; }

.bl-marco {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--c) * 16) 1fr;
  column-gap: calc(var(--c) * 12);
  padding-bottom: calc(var(--c) * 12);
}

.bl-marco:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(var(--c) * 7);
  top: calc(var(--c) * 18);
  bottom: 0;
  width: calc(var(--c) * 2);
  background: rgba(19, 19, 18, 0.2);
}

.bl-marco-ponto {
  grid-row: 1 / span 2;
  width: calc(var(--c) * 16);
  height: calc(var(--c) * 16);
  margin-top: calc(var(--c) * 1);
  border: 0.02rem solid var(--preto);
  border-radius: 50%;
  background: var(--verde);
}

.bl-marco-atual .bl-marco-ponto { background: var(--amarelo); box-shadow: 0 0 0 calc(var(--c) * 4) rgba(231, 194, 78, 0.35); }
.bl-marco-futuro .bl-marco-ponto { background: #fff; border-style: dashed; }

.bl-marco-quando {
  color: var(--azul);
  font-size: calc(var(--c) * 12);
  font-weight: 900;
  font-stretch: 85%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bl-marco-corpo strong { display: block; font-size: calc(var(--c) * 14.5); line-height: 1.3; }
.bl-marco-corpo span { display: block; font-size: calc(var(--c) * 13.5); line-height: 1.4; }

/* caixas: atenção, na prática, em resumo */
.bl-caixa {
  padding: calc(var(--c) * 11) calc(var(--c) * 14);
  background: var(--creme);
  border: 0.018rem solid var(--preto);
  border-left-width: calc(var(--c) * 5);
  border-radius: calc(var(--c) * 4) calc(var(--c) * 12) calc(var(--c) * 12) calc(var(--c) * 4);
}

.bl-atencao { background: #fdf3d3; border-left-color: var(--amarelo); }
.bl-exemplo { border-left-color: var(--azul); }
.bl-conclusao { background: var(--azul); color: var(--creme); border-left-color: var(--amarelo); }

.bl-caixa-rotulo {
  display: block;
  margin-bottom: calc(var(--c) * 4);
  color: var(--azul);
  font-size: calc(var(--c) * 11.5);
  font-weight: 900;
  font-stretch: 90%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bl-conclusao .bl-caixa-rotulo { color: var(--amarelo); }

/* detalhes (abre e fecha) */
.bl-detalhes {
  border: 0.018rem solid var(--preto);
  border-radius: calc(var(--c) * 12);
  overflow: hidden;
}

.bl-detalhes summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--c) * 10);
  padding: calc(var(--c) * 10) calc(var(--c) * 14);
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.bl-detalhes summary::-webkit-details-marker { display: none; }
.bl-detalhes summary svg { flex: none; transition: transform 0.25s ease; }
.bl-detalhes[open] summary svg { transform: rotate(180deg); }
.bl-detalhes summary:hover { background: var(--creme); }
.bl-detalhes-corpo { padding: 0 calc(var(--c) * 14) calc(var(--c) * 12); }

/* estudos */
.bl-estudos { display: grid; gap: calc(var(--c) * 10); }

.bl-estudo {
  padding: calc(var(--c) * 12) calc(var(--c) * 14);
  background: #fff;
  border: 0.018rem solid var(--preto);
  border-radius: calc(var(--c) * 12);
  box-shadow: calc(var(--c) * 4) calc(var(--c) * 4) 0 var(--amarelo);
}

.bl-estudo-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--c) * 6);
  color: var(--azul);
  font-size: calc(var(--c) * 12);
  font-weight: 900;
  font-stretch: 85%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bl-estudo-cab span { color: rgba(19, 19, 18, 0.6); }
.bl-estudo-titulo { margin-top: calc(var(--c) * 4); font-size: calc(var(--c) * 15); font-weight: 800; line-height: 1.3; }
.bl-estudo-resumo, .bl-estudo-significado { margin-top: calc(var(--c) * 5); font-size: calc(var(--c) * 14); }

.bl-estudo-limites {
  margin-top: calc(var(--c) * 8);
  padding: calc(var(--c) * 8) calc(var(--c) * 10);
  background: var(--creme);
  border-radius: calc(var(--c) * 8);
  font-size: calc(var(--c) * 13);
}

.bl-estudo-limites strong {
  display: block;
  color: var(--verde);
  font-size: calc(var(--c) * 11);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bl-estudo-detalhes { margin-top: calc(var(--c) * 8); font-size: calc(var(--c) * 13); }

.bl-estudo-detalhes summary {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--c) * 6);
  color: var(--azul);
  font-weight: 800;
  cursor: pointer;
}

.bl-estudo-detalhes p { margin-top: calc(var(--c) * 6); }
.bl-estudo-detalhes p strong { display: block; }

.bl-estudo-links { display: flex; flex-wrap: wrap; gap: calc(var(--c) * 6); margin-top: calc(var(--c) * 10); }

.bl-estudo-links a {
  display: inline-flex;
  gap: calc(var(--c) * 4);
  padding: calc(var(--c) * 5) calc(var(--c) * 12);
  border: 0.018rem solid var(--azul);
  border-radius: 2rem;
  color: var(--azul);
  font-size: calc(var(--c) * 12);
  font-weight: 900;
  font-stretch: 85%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.bl-estudo-links a:hover { background: var(--amarelo); border-color: var(--preto); color: var(--preto); }

/* tabela: rola de lado; com até 3 colunas, no celular vira lista (abaixo) */
.bl-tabela-dica,
.bl-comparacao-vertical { display: none; }

.bl-tabela-rolagem {
  overflow-x: auto;
  border: 0.018rem solid var(--preto);
  border-radius: calc(var(--c) * 12);
  scrollbar-width: thin;
}

.bl-tabela {
  width: 100%;
  min-width: calc(var(--c) * 380);
  border-collapse: collapse;
  font-size: calc(var(--c) * 13.5);
  line-height: 1.35;
}

.bl-tabela th,
.bl-tabela td {
  padding: calc(var(--c) * 8) calc(var(--c) * 10);
  border-bottom: 0.015rem solid rgba(19, 19, 18, 0.15);
  text-align: left;
  vertical-align: top;
}

.bl-tabela thead th {
  background: var(--azul);
  color: var(--creme);
  font-size: calc(var(--c) * 12);
  font-weight: 900;
  font-stretch: 82%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bl-tabela tbody th { font-weight: 800; }
.bl-tabela tbody tr:last-child > * { border-bottom: 0; }
.bl-tabela tbody tr:nth-child(even) { background: var(--creme); }

/* "pensando": a semana de 7 dias carregando, com as duas folgas em amarelo */
.pensando {
  display: flex;
  align-items: center;
  gap: calc(var(--c) * 10);
  margin-top: calc(var(--c) * 8);
  color: rgba(19, 19, 18, 0.7);
  font-size: calc(var(--c) * 13.5);
}

.pensando-semana {
  display: inline-grid;
  grid-template-columns: repeat(7, calc(var(--c) * 6));
  gap: calc(var(--c) * 3);
}

.pensando-semana span {
  height: calc(var(--c) * 18);
  border-radius: calc(var(--c) * 2);
  background: var(--azul);
  animation: cx-pensa 1.1s ease-in-out infinite;
}

.pensando-semana span:nth-child(n + 6) { background: var(--amarelo); }

@keyframes cx-pensa {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

.resp-erro {
  margin-top: calc(var(--c) * 8);
  padding: calc(var(--c) * 9) calc(var(--c) * 12);
  background: #fdecec;
  border-left: calc(var(--c) * 4) solid #e21b1b;
  border-radius: calc(var(--c) * 4) calc(var(--c) * 10) calc(var(--c) * 10) calc(var(--c) * 4);
  font-size: calc(var(--c) * 13.5);
}

/* de onde vem a resposta */
.fontes {
  margin-top: calc(var(--c) * 12);
  border: 0.018rem solid var(--preto);
  border-radius: calc(var(--c) * 12);
  overflow: hidden;
}

.fontes-cab {
  display: flex;
  align-items: center;
  gap: calc(var(--c) * 8);
  width: 100%;
  padding: calc(var(--c) * 9) calc(var(--c) * 12);
  background: var(--creme);
  color: var(--azul);
  border: 0;
  font-size: calc(var(--c) * 12);
  font-weight: 900;
  font-stretch: 85%;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.fontes-cab:hover { background: #f4ecc9; }
.fontes-titulo { flex: 1; }

.fontes-conta {
  color: rgba(19, 19, 18, 0.65);
  font-family: 'PP Neue Machina', sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.fontes-seta { flex: none; transition: transform 0.3s ease; }
.fontes.aberta .fontes-seta { transform: rotate(180deg); }

.fontes-gaveta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.fontes.aberta .fontes-gaveta { grid-template-rows: 1fr; }
.fontes-gaveta-in { min-height: 0; overflow: hidden; }

.fontes-lista {
  list-style: none;
  display: grid;
  gap: calc(var(--c) * 6);
  padding: calc(var(--c) * 8) calc(var(--c) * 10) calc(var(--c) * 10);
}

.fontes-lista > li {
  display: grid;
  grid-template-columns: calc(var(--c) * 22) 1fr;
  gap: calc(var(--c) * 8);
  padding: calc(var(--c) * 6);
  border-radius: calc(var(--c) * 8);
  transition: background-color 0.4s ease;
}

.fontes-lista > li.destaque { background: #fdf3d3; }

.fonte-n {
  display: grid;
  place-items: center;
  width: calc(var(--c) * 22);
  height: calc(var(--c) * 22);
  background: var(--amarelo);
  border: 0.015rem solid var(--preto);
  border-radius: 50%;
  font-size: calc(var(--c) * 11);
  font-weight: 900;
}

.fonte-corpo strong { display: block; font-size: calc(var(--c) * 13.5); line-height: 1.3; }

.fonte-contexto {
  display: inline-block;
  margin-top: calc(var(--c) * 3);
  color: var(--verde);
  font-size: calc(var(--c) * 11);
  font-weight: 900;
  font-stretch: 85%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fonte-docs { list-style: none; margin-top: calc(var(--c) * 4); font-size: calc(var(--c) * 12.5); line-height: 1.4; }
.fonte-docs li + li { margin-top: calc(var(--c) * 3); }

.fonte-docs a {
  color: var(--azul);
  text-decoration: underline;
  text-decoration-thickness: 0.012rem;
  text-underline-offset: calc(var(--c) * 2);
}

.fonte-docs a:hover { background: var(--amarelo); color: var(--preto); }

.nota-demo {
  margin-top: calc(var(--c) * 8);
  padding: calc(var(--c) * 6) calc(var(--c) * 10);
  background: var(--creme);
  border-radius: calc(var(--c) * 8);
  font-size: calc(var(--c) * 12);
}

/* ações: WhatsApp, copiar, avaliação */
.resp-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--c) * 8);
  margin-top: calc(var(--c) * 12);
}

.acao {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--c) * 6);
  height: calc(var(--c) * 34);
  padding: 0 calc(var(--c) * 14);
  background: #fff;
  color: var(--preto);
  border: 0.02rem solid var(--preto);
  border-radius: 2rem;
  font-size: calc(var(--c) * 12.5);
  font-weight: 900;
  font-stretch: 80%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.acao:hover { background: var(--amarelo); }
.acao-wa { background: var(--wa); color: #fff; }
.acao-wa:hover { background: var(--azul); color: var(--creme); }

.resp-voto {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--c) * 6);
  margin-left: auto;
}

.voto-pergunta {
  font-size: calc(var(--c) * 11.5);
  font-weight: 900;
  font-stretch: 85%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.acao-icone {
  display: grid;
  place-items: center;
  width: calc(var(--c) * 34);
  height: calc(var(--c) * 34);
  background: #fff;
  color: var(--preto);
  border: 0.02rem solid var(--preto);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.acao-icone:hover { background: var(--amarelo); }

.acao-link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--preto);
  font: inherit;
  font-size: calc(var(--c) * 12.5);
  text-decoration: underline;
  text-underline-offset: calc(var(--c) * 2);
  cursor: pointer;
}

.voto-ok { color: var(--verde); font-size: calc(var(--c) * 13); font-weight: 800; }

.relato { display: grid; gap: calc(var(--c) * 6); margin-top: calc(var(--c) * 10); }
.relato label { font-size: calc(var(--c) * 13.5); font-weight: 800; }

.relato textarea {
  width: 100%;
  padding: calc(var(--c) * 8) calc(var(--c) * 12);
  border: 0.02rem solid var(--preto);
  border-radius: calc(var(--c) * 12);
  font: 500 max(calc(var(--c) * 14), 16px) / 1.4 'PP Neue Machina', sans-serif;
  resize: vertical;
}

/* o .btn do styles.css, na escala do chat */
.vt-chat .relato .btn {
  justify-self: start;
  padding: calc(var(--c) * 7) calc(var(--c) * 16);
  border-width: 0.02rem;
  box-shadow: calc(var(--c) * 3) calc(var(--c) * 3) 0 var(--verde);
  font-size: calc(var(--c) * 13);
  cursor: pointer;
}

.vt-chat .relato .btn:hover { background: var(--amarelo); }

.seguir { margin-top: calc(var(--c) * 14); }

/* ============================================================
   Celular: a janela ocupa quase a tela toda e a unidade cresce
   ============================================================ */

@media (max-width: 720px), (max-width: 1100px) and (orientation: portrait) {
  .vt-chat { --c: 0.021rem; }

  .cx { border-radius: 0.4rem; box-shadow: 0.1rem 0.1rem 0 var(--amarelo); }
  .cx-corpo { padding: calc(var(--c) * 14) calc(var(--c) * 13) calc(var(--c) * 18); }
  .cx-sugestoes button, .seguir-lista button { font-size: calc(var(--c) * 15); }
  .resp-voto { margin-left: 0; }

  /* com "Nova conversa" no topo não cabe a descrição: fica só o nome */
  .cx-conversando .cx-nome span { display: none; }

  /* tabela de até 3 colunas vira lista de critérios */
  .bl-comparacao[data-vertical] .bl-tabela-rolagem { display: none; }

  .bl-comparacao[data-vertical] .bl-comparacao-vertical {
    display: grid;
    gap: calc(var(--c) * 8);
  }

  .bl-comparacao-legenda { display: none; }

  .bl-comparacao-item {
    padding: calc(var(--c) * 10) calc(var(--c) * 12);
    border: 0.018rem solid var(--preto);
    border-radius: calc(var(--c) * 12);
  }

  .bl-comparacao-criterio {
    display: block;
    color: var(--azul);
    font-size: calc(var(--c) * 13);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .bl-comparacao-item dl > div {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: calc(var(--c) * 8);
    padding-top: calc(var(--c) * 6);
    margin-top: calc(var(--c) * 6);
    border-top: 0.015rem dashed rgba(19, 19, 18, 0.25);
    font-size: calc(var(--c) * 13);
  }

  .bl-comparacao-item dt { font-weight: 800; }

  .bl-comparacao:not([data-vertical]) .bl-tabela-dica {
    display: block;
    margin-bottom: calc(var(--c) * 6);
    color: rgba(19, 19, 18, 0.6);
    font-size: calc(var(--c) * 12);
  }
}