/* ==========================================================================
   SpeakPro 360º Check-up: o estilo do teste

   Arquivo próprio, de propósito. O inst.css passa de 4.000 linhas com regra
   morta de versões antigas, e é onde quase todo bug de estilo deste projeto
   nasceu. Aqui só entra o que o teste usa, tudo com o prefixo ck-, e nada
   aqui vaza pras outras páginas: o body tem a classe .ck e todas as regras
   partem dela.

   Depende só do brand.css: tokens, botões, a caixa de vídeo e o skip-link.
   ========================================================================== */

.ck {
  background: var(--paper);
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Topo: logo, barra de andamento, WhatsApp
   -------------------------------------------------------------------------- */

.ck-topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: rgba(246, 246, 251, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.ck-topo__logo img { display: block; height: 32px; width: auto; }
.ck-topo__zap {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.ck-topo__zap:hover { color: var(--royal); }

/* a barra de andamento: o trilho é o próprio elemento, a parte feita é o ::before */
.ck-progresso {
  --pct: 0%;
  position: relative;
  height: 6px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  overflow: visible;
}
.ck-progresso::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct);
  border-radius: inherit;
  background: var(--electric);
  transition: width .35s ease;
}
.ck-progresso__txt {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey-2);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .ck-topo { grid-template-columns: auto 1fr; }
  .ck-topo__zap { display: none; }
  .ck-progresso__txt { display: none; }
}

/* --------------------------------------------------------------------------
   O miolo e cada passo
   -------------------------------------------------------------------------- */

.ck-main {
  flex: 1;
  width: min(100% - 32px, var(--wrap-narrow));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 0 clamp(40px, 6vw, 72px);
}

.ck-passo h1,
.ck-passo h2 {
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0 0 18px;
}
.ck-passo h1:focus,
.ck-passo h2:focus { outline: none; }
.ck-passo--resultado h2 { font-size: var(--t-xl); }

.ck-mark { color: var(--electric); }

.ck-chapeu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.ck-chapeu span {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  letter-spacing: .04em;
}

.ck-lead {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.ck-intro {
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

.ck-nota {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--grey-2);
  margin: 18px 0 0;
}
.ck-nota a { color: var(--royal); }

/* a lista dos seis blocos, na abertura */
.ck-blocos {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ck-blocos li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.ck-blocos b {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--electric);
  color: var(--white);
  font-size: .8125rem;
  font-weight: 800;
}
.ck-blocos span { font-weight: 700; color: var(--navy); font-size: var(--t-sm); line-height: 1.3; }
.ck-blocos small { display: block; margin-top: 3px; font-weight: 500; color: var(--ink-soft); font-size: var(--t-xs); }
@media (max-width: 560px) { .ck-blocos { grid-template-columns: 1fr; } }

/* o aviso de voz provisória */
.ck-aviso {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: #fff3eb;
  border: 1px solid rgba(255, 90, 0, .3);
  color: #7a3300;
  font-size: var(--t-xs);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Perguntas
   -------------------------------------------------------------------------- */

.ck-q {
  padding: clamp(18px, 3vw, 26px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.ck-q + .ck-q { margin-top: 14px; }

.ck-q__n {
  margin: 0 0 12px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.ck-q__pergunta {
  margin: 18px 0 12px;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--navy);
}
.ck-q__pergunta--grande { margin-top: 0; font-size: var(--t-md); }
.ck-q__ajuda { margin: -6px 0 12px; font-size: var(--t-xs); color: var(--grey-2); }

.ck-q__palavra {
  margin: 0 0 4px;
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
  line-height: 1.1;
}
.ck-q__frase {
  margin: 0 0 4px;
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
}
.ck-q__trad { margin: 0 0 16px; font-size: var(--t-sm); color: var(--grey-2); }
.ck-q__afirma {
  margin: 0 0 14px;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
}

/* o botão de ouvir */
.ck-audio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border: 1.5px solid var(--navy);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ck-audio__ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  position: relative;
  flex: none;
}
.ck-audio__ico::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 7px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--white);
}
.ck-audio:hover { background: var(--navy); color: var(--white); }
.ck-audio:hover .ck-audio__ico { background: var(--white); }
.ck-audio:hover .ck-audio__ico::before { border-left-color: var(--navy); }
.ck-audio.is-tocando .ck-audio__ico { animation: ck-pulso 1s ease-in-out infinite; }
/* chamando: a pessoa gravou e ainda não se ouviu */
.ck-audio.is-chama { border-color: var(--electric); animation: ck-chama 1.6s ease-in-out infinite; }
.ck-audio.is-chama .ck-audio__ico { background: var(--electric); animation: ck-pulso 1.6s ease-in-out infinite; }
@keyframes ck-chama {
  0%, 100% { box-shadow: 0 0 0 0 rgba(75, 75, 255, .45); }
  50% { box-shadow: 0 0 0 9px rgba(75, 75, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .ck-audio.is-chama, .ck-audio.is-chama .ck-audio__ico { animation: none; } }
.ck-audio:disabled { opacity: .5; cursor: default; }
.ck-audio:disabled:hover { background: var(--white); color: var(--navy); }

/* a voz provisória fica marcada no próprio botão */
.ck-audio.is-provisorio { border-style: dashed; border-color: var(--orange); }
.ck-audio.is-provisorio .ck-audio__txt::after {
  content: " · provisório";
  font-weight: 500;
  color: var(--orange);
}
.ck-audio.is-provisorio:hover { background: var(--white); color: var(--navy); }
.ck-audio.is-provisorio:hover .ck-audio__ico { background: var(--navy); }
.ck-audio.is-provisorio:hover .ck-audio__ico::before { border-left-color: var(--white); }

@keyframes ck-pulso { 50% { transform: scale(.86); opacity: .7; } }

/* o botão de ouvir em formato de mensagem de voz: ícone, rótulo, a onda do
   áudio em barrinhas e a duração. As barras ganham cor conforme toca. */
.ck-audio--onda {
  display: flex;
  width: 100%;
  max-width: 460px;
  gap: 12px;
  padding: 8px 16px 8px 8px;
  text-align: left;
}
.ck-audio--onda .ck-audio__ico { width: 36px; height: 36px; transition: background .15s, transform .15s; }
.ck-audio--onda .ck-audio__ico::before { left: 14px; top: 11px; border-width: 7px 0 7px 11px; }
.ck-audio--onda .ck-audio__txt { white-space: nowrap; }
.ck-audio__onda {
  flex: 1 1 90px;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  min-width: 80px;
}
.ck-audio__barra {
  flex: 1 1 0;
  min-width: 2px;
  height: calc(var(--h, .3) * 100%);
  min-height: 3px;
  border-radius: 2px;
  background: rgba(35, 35, 80, .22);
  transition: background .1s linear;
}
.ck-audio__barra.is-passou { background: var(--electric); }
.ck-audio__tempo {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: rgba(35, 35, 80, .6);
  min-width: 3ch;
  text-align: right;
}
.ck-audio__tempo:empty { display: none; }
/* no formato onda o hover não inverte o botão; só acende a borda e o ícone */
.ck-audio--onda:hover { background: var(--white); color: var(--navy); border-color: var(--electric); }
.ck-audio--onda:hover .ck-audio__ico { background: var(--electric); transform: scale(1.05); }
.ck-audio--onda:hover .ck-audio__ico::before { border-left-color: var(--white); }
.ck-audio--onda.is-tocando { border-color: var(--electric); }
.ck-audio--onda.is-tocando .ck-audio__ico { background: var(--electric); animation: none; }
/* tocando: o triângulo vira o símbolo de pausa, duas barrinhas arredondadas */
.ck-audio--onda.is-tocando .ck-audio__ico::before,
.ck-audio--onda.is-tocando .ck-audio__ico::after {
  content: "";
  position: absolute;
  top: 11px;
  width: 3.5px;
  height: 14px;
  border: 0;
  border-radius: 2px;
  background: var(--white);
}
.ck-audio--onda.is-tocando .ck-audio__ico::before { left: 13px; }
.ck-audio--onda.is-tocando .ck-audio__ico::after { left: 19.5px; }
.ck-audio--onda.is-pausado .ck-audio__ico { background: var(--electric); }
/* voz provisória: a onda é inventada, então enquanto fala ela dança */
.ck-audio--onda.is-provisorio.is-tocando .ck-audio__barra {
  background: var(--orange);
  animation: ck-danca .6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -45ms);
}
.ck-audio--onda.is-provisorio:hover { border-color: var(--orange); }
@keyframes ck-danca { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .ck-audio__barra { transition: none; animation: none !important; }
}
@media (max-width: 480px) {
  .ck-audio--onda .ck-audio__txt { display: none; }
}

/* opções */
.ck-opcoes { display: grid; gap: 8px; }
.ck-opcoes--linha { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ck-opcao {
  text-align: left;
  padding: 13px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ck-opcao:hover { border-color: var(--electric); }
.ck-opcao.is-ativo { border-color: var(--electric); background: rgba(75, 75, 255, .08); color: var(--navy); }
.ck-opcoes--linha .ck-opcao { text-align: center; }
.ck-opcao:disabled { opacity: .45; cursor: not-allowed; }
.ck-opcao:disabled:hover { border-color: var(--line); }

/* o campo de digitar */
.ck-campo {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--white);
}
.ck-campo:focus { outline: none; border-color: var(--electric); }

/* as três vozes */
.ck-vozes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ck-voz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .15s ease, background-color .15s ease;
}
.ck-voz .ck-audio { width: 100%; justify-content: center; padding-left: 10px; padding-right: 12px; }
.ck-voz__marca {
  padding: 7px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
}
.ck-voz__marca:hover { background: var(--line); }
.ck-voz.is-ativo { border-color: var(--electric); background: rgba(75, 75, 255, .06); }
.ck-voz.is-ativo .ck-voz__marca { background: var(--electric); color: var(--white); }
@media (max-width: 480px) {
  .ck-vozes { grid-template-columns: 1fr; }
  .ck-voz { flex-direction: row; justify-content: space-between; }
  .ck-voz .ck-audio { width: auto; }
}

/* gravação */
.ck-passos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin-top: 16px; }
.ck-grav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 1 260px; }
/* a leitura: uma frase por linha */
.ck-q__frase--linhas .ck-q__linha { display: block; }
.ck-q__frase--linhas .ck-q__linha + .ck-q__linha { margin-top: .35em; }
/* na leitura, o gravador fica centralizado embaixo do texto */
[data-passo="boca"] .ck-grav { align-items: center; width: 100%; margin-top: 32px; text-align: center; }
[data-passo="boca"] .ck-grav__linha { width: 100%; justify-content: center; }
.ck-grav__status { margin: 0; font-size: var(--t-xs); color: var(--ink-soft); min-height: 1.4em; }
.ck-grav__status.is-aviso { color: var(--orange); font-weight: 600; }
.ck-grav__player { width: 100%; max-width: 460px; margin-top: 10px; }
.ck-audio[hidden] { display: none !important; }
.ck-grav__status:empty { display: none; }
/* "ouça até o fim": o player e, do lado, a rodinha que fecha conforme toca */
.ck-grav__linha { display: flex; align-items: center; gap: 12px; margin-top: 10px; width: 100%; max-width: 520px; }
.ck-grav__linha[hidden] { display: none; }
.ck-grav__linha .ck-grav__player { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.ck-roda { position: relative; flex: none; width: 44px; height: 44px; }
.ck-roda svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ck-roda__fundo { fill: none; stroke: rgba(35, 35, 80, .12); stroke-width: 4; }
.ck-roda__arco { fill: none; stroke: var(--electric); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
.ck-roda__ok { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transform-origin: 20px 20px; opacity: 0; }
.ck-roda.is-ok .ck-roda__fundo { fill: var(--teal); stroke: var(--teal); }
.ck-roda.is-ok .ck-roda__arco { stroke: var(--teal); }
.ck-roda.is-ok .ck-roda__ok { opacity: 1; stroke-dasharray: 30; stroke-dashoffset: 0; animation: ck-roda-ok .4s ease-out; }
@keyframes ck-roda-ok { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.ck-ouvir { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 520px; margin-top: 14px; }
.ck-ouvir[hidden] { display: none; }
.ck-ouvir__txt { margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--navy); }
.ck-ouvir.is-ok .ck-ouvir__txt { color: #00846a; }
.ck-grav .ck-q--escala { margin-top: 0; }
.btn.is-gravando {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  animation: ck-pisca 1.4s ease-in-out infinite;
}
@keyframes ck-pisca { 50% { opacity: .65; } }

.ck-aval { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* o espelho */
.ck-leitura {
  margin: 0 0 18px;
  padding: 18px 22px;
  border-left: 4px solid var(--electric);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--paper);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.55;
  color: var(--navy);
}
.ck-espelho {
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--paper);
}
.ck-espelho__titulo { margin: 0 0 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); }
.ck-espelho__ouvido { margin: 0 0 18px; font-size: var(--t-base); line-height: 1.5; color: var(--ink); }
.ck-espelho__marcado { margin: 0 0 12px; font-size: var(--t-base); line-height: 1.8; }
.ck-espelho__marcado .is-ok { color: var(--ink-soft); }
.ck-espelho__marcado .is-perdida {
  color: var(--navy);
  font-weight: 700;
  background: rgba(255, 90, 0, .16);
  border-bottom: 2px solid var(--orange);
  padding: 0 2px;
}
.ck-espelho__pct { margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--navy); }

/* escala de 1 a 5 */
.ck-escala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ck-escala__nota {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ck-escala__nota b { font-size: var(--t-md); font-weight: 800; color: var(--navy); }
.ck-escala__nota span { font-size: .6875rem; font-weight: 600; color: var(--grey-2); line-height: 1.2; text-align: center; }
.ck-escala__nota:hover { border-color: var(--electric); }
.ck-escala__nota.is-ativo { border-color: var(--electric); background: rgba(75, 75, 255, .08); }
.ck-escala__nota.is-ativo span { color: var(--navy); }
.ck-escala__emoji { font-style: normal; font-size: 1.35rem; line-height: 1; }
.ck-escala-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-md, 10px); background: var(--paper-2); font-size: var(--t-xs); color: var(--ink-soft); }
.ck-escala-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.ck-escala-legenda i { font-style: normal; font-size: 1rem; }
.ck-escala-legenda b { color: var(--navy); }
@media (max-width: 420px) { .ck-escala__nota span { display: none; } }

/* navegação de cada passo */
.ck-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.ck-nav .btn--wide { width: 100%; justify-content: center; }
.ck-nav__dica {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--t-xs);
  color: var(--grey-2);
}
.ck-nav__dica[hidden], .ck-nav .btn[hidden] { display: none; }
.ck-nav .btn:disabled { opacity: .45; cursor: not-allowed; }
.ck-nav--fim { justify-content: center; margin-top: 36px; }

/* --------------------------------------------------------------------------
   Resultado
   -------------------------------------------------------------------------- */

.ck-eixos { display: grid; gap: 10px; margin: 8px 0 24px; }
.ck-eixo {
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.ck-eixo.is-foco { border-color: var(--electric); box-shadow: 0 0 0 3px rgba(75, 75, 255, .12); }
.ck-eixo.is-vazio { opacity: .55; }
.ck-eixo__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ck-eixo__nome { font-weight: 800; color: var(--navy); font-size: var(--t-base); }
.ck-eixo__nivel { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); }
.ck-eixo.is-foco .ck-eixo__nivel { color: var(--electric); }
.ck-eixo__trilho { height: 8px; border-radius: var(--r-pill); background: var(--paper-2); overflow: hidden; }
.ck-eixo__barra { height: 100%; border-radius: inherit; background: var(--cor-barra, var(--electric)); transition: width .6s cubic-bezier(.4, 0, .2, 1); }
.ck-eixo--ouvido { --cor-barra: var(--eixo-ouvido); }
.ck-eixo--pronuncia { --cor-barra: var(--eixo-pronuncia); }
.ck-eixo--fluencia { --cor-barra: var(--eixo-fluencia); }
.ck-eixo--confianca { --cor-barra: var(--eixo-confianca); }
.ck-eixo.is-foco { border-color: var(--cor-barra, var(--electric)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-barra, var(--electric)) 14%, transparent); }
.ck-eixo.is-foco .ck-eixo__nivel, .ck-eixo.is-foco .ck-eixo__nome { color: var(--cor-barra, var(--electric)); }
.ck-eixo__curto { margin: 8px 0 0; font-size: var(--t-xs); color: var(--ink-soft); }

.ck-foco {
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--r-lg);
  background: var(--navy);
  color: rgba(255, 255, 255, .92);
  font-size: var(--t-base);
  line-height: 1.6;
}
.ck-foco p { margin: 0; }

.ck-video { margin-top: 20px; }
.ck-video .video { border-radius: var(--r-md); overflow: hidden; }

.ck-conteudos { margin-top: 24px; }
.ck-conteudos h3,
.ck-email h3,
.ck-oferta__titulo {
  margin: 0 0 8px;
  font-size: var(--t-md);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.01em;
}
.ck-conteudos ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ck-conteudos li a {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
}
.ck-conteudos li a:hover { border-color: var(--electric); }

.ck-email {
  margin-top: 28px;
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.ck-email p { margin: 0 0 14px; font-size: var(--t-sm); color: var(--ink-soft); }
.ck-email__campos { display: grid; grid-template-columns: 1fr 1.4fr 1fr auto; gap: 8px; }
/* o formulário do relatório: um campo por linha */
.ck-email--coluna .ck-email__campos { grid-template-columns: 1fr; gap: 10px; }
.ck-email--coluna .ck-email__campos .btn { justify-self: stretch; margin-top: 4px; }
/* o WhatsApp: o país (bandeira + código) e o número, na mesma linha */
.ck-fone { display: grid; grid-template-columns: auto 1fr; gap: 8px; min-width: 0; }
.ck-fone__ddi {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 34px 0 14px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--white);
  font-size: var(--t-sm); font-weight: 700; color: var(--navy); cursor: pointer; white-space: nowrap;
}
.ck-fone__ddi:focus-within { border-color: var(--electric); }
.ck-fone__ddi::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-70%) rotate(45deg);
}
.ck-fone__bandeira { font-size: 1.25rem; line-height: 1; }
.ck-fone__ddi select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.ck-video--antes { margin-top: 20px; padding: clamp(16px, 3vw, 22px); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.ck-video--antes[hidden] { display: none !important; }
.ck-video--antes .ck-oferta__texto { margin-bottom: 14px; }
.ck-oferta[hidden] { display: none !important; }
.ck-email__campos input {
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--t-sm);
  min-width: 0;
}
.ck-email__campos input:focus { outline: none; border-color: var(--electric); }
.ck-email__retorno { margin: 10px 0 0; min-height: 1.4em; font-size: var(--t-xs); }
.ck-email__retorno.is-ok { color: var(--teal); font-weight: 700; }
.ck-email__retorno.is-erro { color: var(--orange); font-weight: 700; }
@media (max-width: 760px) { .ck-email__campos { grid-template-columns: 1fr; } }

.ck-ofertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.ck-oferta {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 3vw, 24px);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.ck-oferta--diag { background: #fff6f0; border-color: rgba(255, 90, 0, .25); }
.ck-oferta__texto { flex: 1; margin: 0 0 16px; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.ck-oferta__preco { margin: -6px 0 14px; font-size: var(--t-sm); font-weight: 800; color: var(--navy, #232350); }
.ck-oferta__preco b { font-size: 1.35em; color: var(--royal, #2828b4); }
.ck-oferta .btn { align-self: flex-start; }
.ck-curso[hidden] { display: none !important; }
@media (max-width: 640px) { .ck-ofertas { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   O teleprompter
   -------------------------------------------------------------------------- */

.tp-tela[hidden], .tp [hidden], .fl [hidden] { display: none !important; }
.tp-ref { margin: 4px 0 16px; }
.tp-ref__linha { font-size: .98rem; color: var(--navy); margin: 0; }
.tp-ref__troca { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--royal); text-decoration: underline; cursor: pointer; }
.tp-ref__troca:hover { color: var(--orange); }
.tp-amostras { margin: -4px 0 14px; font-size: var(--t-sm); font-weight: 600; color: var(--royal); }
.tp-estado { margin: 4px 0 14px; font-size: var(--t-sm); color: var(--grey-2); }
.tp-estado.is-ok { color: var(--teal); font-weight: 700; }
.tp-estado.is-aviso { color: var(--navy); font-weight: 600; }
.tp-estado__tec, .tp-falha .tp-estado__tec { display: block; margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: var(--paper-2); font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: .75rem; font-weight: 400; color: var(--ink-soft); white-space: pre-wrap; }
.tp-tempo { margin: -6px 0 14px 30px; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: var(--t-xs); color: var(--grey-2); }
.tp-etapa__det { flex-basis: 100%; margin-left: 24px; font-size: var(--t-xs); color: var(--orange); font-weight: 400; }
.tp-falha { margin-top: 14px; }
.tp-par { display: grid; gap: 10px; margin: 14px 0 16px; }
.tp-par__item { padding: 12px 14px; border-radius: var(--r-md); background: var(--white); border: 1.5px solid var(--line); }
.tp-par__item.is-sim { border-color: var(--electric); background: #f3f3ff; }
.tp-par__rotulo { margin: 0 0 6px; font-size: var(--t-sm); color: var(--ink-soft); }
.tp-par__rotulo b { color: var(--navy); margin-right: 6px; }
.tp-par .tp-audio { width: 100%; margin: 0; }
.tp-compara { margin: 10px 0 18px; }
.tp-compara summary { cursor: pointer; font-weight: 600; color: var(--royal); font-size: .95rem; }
.tp-compara .tp-audio { margin-top: 10px; }
.tp-titulo {
  margin: 0 0 10px;
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
  line-height: 1.15;
}
.tp-titulo:focus { outline: none; }
.tp-intro { margin: 0 0 20px; font-size: var(--t-base); line-height: 1.55; color: var(--ink-soft); }

.tp-temas { display: grid; gap: 10px; }
.tp-tema {
  text-align: left;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease;
}
.tp-tema b { display: block; color: var(--navy); font-size: var(--t-md); font-weight: 800; margin-bottom: 4px; }
.tp-tema span { color: var(--ink-soft); font-size: var(--t-sm); }
.tp-tema:hover { border-color: var(--electric); }

.tp-texto {
  margin: 0 0 20px;
  padding: 22px 24px;
  border-left: 4px solid var(--electric);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--white);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.6;
  color: var(--navy);
}

.tp-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.tp-nav .btn:disabled { opacity: .45; cursor: not-allowed; }

/* o palco: o texto rolando ocupa tudo, a câmera fica num canto */
.tp-palco {
  position: relative;
  height: min(58vh, 460px);
  border-radius: var(--r-lg);
  background: var(--navy);
  overflow: hidden;
}
.tp-palco--audio { height: min(40vh, 300px); }
.tp-rolo {
  position: absolute;
  inset: 0;
  padding: 0 clamp(20px, 6vw, 64px);
  overflow: hidden;
  /* a faixa de leitura: o meio fica nítido, o resto some */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 62%, transparent 100%);
}
.tp-rolo__bloco {
  will-change: transform;
  font-size: clamp(1.25rem, 1rem + 1.6vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
  text-align: center;
}
.tp-cam {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: clamp(96px, 18%, 180px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .35);
  background: #000;
  transform: scaleX(-1);  /* espelhado, como a pessoa se vê no espelho */
}
.tp-contagem {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 800;
  color: var(--white);
  background: rgba(35, 35, 80, .72);
  letter-spacing: -.04em;
}

.tp-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.tp-vel {
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}
.tp-vel:hover { border-color: var(--electric); }
.tp-vel__n { font-family: var(--mono, monospace); font-size: var(--t-xs); color: var(--grey-2); min-width: 64px; text-align: center; }
.tp-controles .btn { margin-left: auto; }
.tp-status { margin: 10px 0 0; font-size: var(--t-xs); color: var(--ink-soft); min-height: 1.4em; }
.tp-status.is-aviso, .ck-nota.is-aviso { color: var(--orange); font-weight: 600; }

/* sem espelhar: o transform inverteria os controles nativos do vídeo */
.tp-play { width: 100%; max-height: 420px; border-radius: var(--r-lg); background: #000; margin-bottom: 14px; }
/* o vídeo chama (halo) até a pessoa dar play; a rodinha fica centralizada embaixo dele */
.tp-play.is-chama { animation: ck-chama 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tp-play.is-chama { animation: none; box-shadow: 0 0 0 3px rgba(75, 75, 255, .45); } }
.ck-ouvir--video { max-width: none; margin: 0 auto 18px; text-align: center; }
.tp-audio { width: 100%; margin: 14px 0; }
.tp-depois { font-size: var(--t-base); line-height: 1.55; color: var(--navy); font-weight: 600; margin: 0 0 18px; }

.tp-consente {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.tp-consente input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--electric); }
.tp-consente a { color: var(--royal); }

.tp-etapas { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.tp-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--t-sm); font-weight: 600; color: var(--grey-2); }
.tp-etapa__ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--line); flex: none; }
.tp-etapa.is-ativa { color: var(--navy); }
.tp-etapa.is-ativa .tp-etapa__ponto { background: var(--electric); animation: ck-pulso 1s ease-in-out infinite; }
.tp-etapa.is-feita { color: var(--navy); }
.tp-etapa.is-feita .tp-etapa__ponto { background: var(--teal); }
.tp-etapa.is-falhou .tp-etapa__ponto { background: var(--orange); }
.tp-espelho { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .tp-etapa.is-ativa .tp-etapa__ponto { animation: none; }
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.ck-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--grey-2);
}
.ck-rodape a { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .ck-progresso::before, .ck-eixo__barra, .ck-audio, .ck-opcao, .ck-voz, .ck-escala__nota { transition: none; }
  .ck-audio.is-tocando .ck-audio__ico, .btn.is-gravando { animation: none; }
}


/* ==========================================================================
   bloco 2: ditado com lacunas
   ========================================================================== */
.ck-lacunas {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 2.1;
  color: var(--navy);
}
.ck-campo--lacuna {
  display: inline-block;
  width: auto;
  min-width: 7ch;
  padding: 2px 10px;
  margin: 0 2px;
  border: 0;
  border-bottom: 2.5px solid var(--electric);
  border-radius: 6px 6px 0 0;
  background: #eef0ff;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  vertical-align: baseline;
  line-height: 1.6;
}
.ck-campo--lacuna::placeholder { font-weight: 400; color: var(--grey-2); font-size: var(--t-xs); }
.ck-campo--lacuna:focus { outline: none; background: #fff; border-bottom-color: var(--orange); }

/* ==========================================================================
   bloco 6: fala livre
   ========================================================================== */
.fl-apoios { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.fl-apoios li {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1.5px solid var(--line);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--navy);
}
/* o relógio, em cima e sozinho */
.fl-relogio-caixa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 16px; }
.fl-relogio { position: relative; width: 120px; height: 120px; }
.fl-relogio svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fl-relogio__fundo { fill: none; stroke: rgba(35, 35, 80, .12); stroke-width: 3; }
.fl-relogio__arco { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.fl-relogio__n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 2rem; font-weight: 700; color: var(--navy); }
.fl-relogio__legenda { margin: 0; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-2); font-weight: 700; }
/* a contagem regressiva: número grande, laranja, pulsando */
.fl-relogio-caixa.is-contando .fl-relogio__n { color: var(--orange); font-size: 2.6rem; }
.fl-relogio-caixa.is-contando .fl-relogio__fundo { stroke: rgba(255, 90, 0, .25); }
.fl-relogio.is-pulso .fl-relogio__n { animation: fl-pulso .9s ease-out; }
@keyframes fl-pulso { 0% { transform: scale(1.35); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
/* ---- a fala livre: a pergunta, o console e os lembretes ----------------
   Nada muda de tela pra gravar. O relógio só aparece depois do clique e
   conta pra trás; os lembretes ficam embaixo, em cinza, como sugestão, e
   acendem em verde quando a pessoa fala deles. */
.fl-pergunta { text-align: center; font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0; }
.fl-intro { text-align: center; margin: -6px auto 4px; max-width: 34rem; }
/* o cartão: a pergunta, a intro e o botão (depois, o relógio) juntos */
.fl-console {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 26px 22px 28px; margin: 4px 0 18px;
  border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--white);
  box-shadow: 0 10px 30px rgba(35, 35, 80, .06);
  transition: border-color .25s, box-shadow .25s;
}
.fl-console.is-ativo { border-color: var(--electric); box-shadow: 0 0 0 4px rgba(75, 75, 255, .10), 0 10px 30px rgba(35, 35, 80, .06); }
.fl-console.is-gravando { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 90, 0, .10), 0 10px 30px rgba(35, 35, 80, .06); }
.fl-console .fl-relogio-caixa { margin: 0; flex: none; }
.fl-console .fl-relogio-caixa[hidden] { display: none; }
.fl-console .fl-relogio { width: 132px; height: 132px; }
.fl-console .fl-relogio__n { font-size: 2.4rem; }
.fl-relogio-caixa.is-entra { animation: fl-entra .35s ease-out; }
@keyframes fl-entra { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fl-console__botoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.fl-console__botoes .btn { margin-left: 0 !important; }
.fl-console__botoes .btn[hidden] { display: none; }
.fl .tp-nav[hidden] { display: none; }
.fl-console.is-gravando .fl-relogio__arco { stroke: var(--orange); }
.fl-relogio-caixa.is-fim .fl-relogio__arco { stroke: var(--orange); }
.fl-relogio-caixa.is-fim .fl-relogio__n { color: var(--orange); }
.fl-relogio-caixa.is-fim .fl-relogio { animation: fl-fim 1s ease-in-out infinite; }
@keyframes fl-fim { 50% { transform: scale(1.06); } }
/* os lembretes: sugestão, em cinza; verdes quando a pessoa fala deles */
.fl-apoios { justify-content: center; gap: 8px; margin: 0 0 20px; }
.fl-apoios li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sm); font-weight: 600; padding: 8px 13px; color: var(--grey-2); border-color: var(--line); background: transparent; transition: background .25s, border-color .25s, color .25s, transform .25s; }
.fl-apoios li i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; transition: background .25s, box-shadow .25s; }
.fl-apoios li.is-tocado { background: #e6fbf5; border-color: var(--teal); color: #006b55; font-weight: 700; transform: translateY(-1px); }
.fl-apoios li.is-tocado i { background: var(--teal); box-shadow: 0 0 0 4px rgba(0, 200, 160, .22); }
@media (max-width: 640px) {
  .fl-console { padding: 18px 14px 20px; }
  .fl-console .fl-relogio { width: 112px; height: 112px; }
  .fl-console .fl-relogio__n { font-size: 2rem; }
  .fl-console__botoes { width: 100%; }
  .fl-console__botoes .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .fl-relogio-caixa.is-fim .fl-relogio { animation: none; } }
.fl-depois { margin-top: 18px; }
.fl-player { width: 100%; margin: 6px 0 16px; }
.ck-audio.fl-player { display: flex; }
.fl-espelho { margin-bottom: 16px; }
.fl-medidas { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.fl-medida {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; min-width: 88px;
  border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line);
}
.fl-medida b { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 1.25rem; font-weight: 600; color: var(--navy); }
.fl-medida span { font-size: var(--t-xs); color: var(--grey-2); }
.fl-medidas__nota { flex-basis: 100%; margin: 4px 0 0; font-size: var(--t-sm); color: var(--ink-soft); }
.fl-espera { color: var(--grey-2); }
@media (max-width: 560px) {
  .fl-relogio { width: 72px; height: 72px; }
}

/* ==========================================================================
   os sinais, no resultado
   ========================================================================== */
.ck-sinais {
  margin-top: 20px;
  padding: clamp(18px, 3vw, 24px);
  border-radius: var(--r-lg);
  background: var(--white);
  border-left: 4px solid var(--orange);
  box-shadow: 0 2px 12px rgba(35, 35, 80, .05);
}
.ck-sinais__titulo { margin: 0 0 12px; font-size: var(--t-md); font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.ck-sinais__item { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink); }
.ck-sinais__item + .ck-sinais__item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
/* um item por eixo: o nome na cor do eixo, a porcentagem, o nível, e o texto */
.ck-sinais__eixo { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-eixo, var(--navy)); }
.ck-sinais__eixo i { align-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--cor-eixo, var(--navy)); }
.ck-sinais__eixo b { font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-weight: 600; letter-spacing: 0; color: var(--navy); }
.ck-sinais__eixo small { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: none; color: var(--grey-2); }
.ck-sinais__texto { margin: 0; }
.ck-sinais__texto--sinal { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--ink-soft, #4a4a6a); }

/* o gancho do relatório: depois dos sinais, antes das ofertas */
.ck-gancho { margin-top: 40px; }
.ck-gancho[hidden] { display: none !important; }
.ck-passo .ck-gancho__titulo { margin: 0 0 12px; font-size: var(--t-xl); }
.ck-gancho__texto { margin: 0; font-size: var(--t-base); line-height: 1.6; color: var(--ink); }
.ck-rel-ficha__cab h2 { margin-bottom: 14px; }
.ck-rel-ficha__cab .ck-chapeu { margin-bottom: 8px; }

/* ==========================================================================
   a página do relatório
   ========================================================================== */
.ck--relatorio .ck-topo { grid-template-columns: auto 1fr; }
.ck--relatorio .ck-topo__zap { justify-self: end; }
.ck-rel-eixos { display: grid; gap: 16px; margin-top: 28px; }
.ck-rel-eixo {
  padding: clamp(20px, 3.5vw, 32px);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.ck-rel-eixo.is-foco { border-color: var(--electric); box-shadow: 0 8px 30px rgba(75, 75, 255, .10); }
.ck-rel-eixo h2 { margin: 6px 0 10px; font-size: var(--t-lg); }
.ck-rel-eixo__texto { margin: 0 0 18px; font-size: var(--t-base); line-height: 1.6; color: var(--ink); }
.ck-rel-eixo .ck-video { margin: 0; }
/* a carta da Laissa, no lugar do vídeo */
.ck-carta { padding: clamp(18px, 3vw, 26px); border-radius: var(--r-md); background: var(--paper-2); border-left: 4px solid var(--electric); }
.ck-carta__p { margin: 0 0 10px; font-size: var(--t-base); line-height: 1.6; color: var(--ink); }
.ck-carta__zap { font-weight: 800; color: var(--royal); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(40, 40, 180, .35); }
.ck-carta__zap:hover { color: var(--electric); text-decoration-color: var(--electric); }
.ck-carta__p:last-child { margin-bottom: 0; }
.ck-rel-eixo__links { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ck-rel-eixo__links a { font-weight: 700; color: var(--royal); }
.ck-rel-fala { margin-top: 20px; padding: clamp(18px, 3vw, 24px); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }


/* ==========================================================================
   a abertura: pitch direto, com movimento
   ========================================================================== */
.ab-palco {
  position: relative; overflow: hidden;
  padding: clamp(22px, 4vw, 36px) clamp(18px, 4vw, 32px);
  border-radius: var(--r-lg);
  background: var(--navy);
  color: #fff;
  margin-bottom: 22px;
}
.ab-card { position: relative; overflow: hidden; padding: clamp(16px, 3vw, 24px) clamp(16px, 3vw, 26px); border-radius: var(--r-lg); background: var(--white); color: var(--navy); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(35, 35, 80, .06); }
.ab-hero { display: grid; grid-template-columns: 1fr; gap: 26px; margin: 22px 0 32px; }
.ab-hero__texto { padding-top: 6px; }
.ab-radar__cab { display: flex; justify-content: space-between; margin: 0 0 10px; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); }
@media (max-width: 720px) { .ab-hero { grid-template-columns: 1fr; } }
.ab-hero .ab-titulo { margin-bottom: 0; }
.ab-aceite { margin: 0 auto 24px; max-width: var(--ab-largura); text-align: center; }
.ab-aceite .tp-consente { justify-content: center; text-align: left; }
.ab-aceite .ck-consente__titulo, .ab-aceite .ck-consente__texto { display: none; }
.ab-aceite .tp-consente { margin: 0; }
.ab-aceite .ck-consente__nota { margin: 6px 0 0; font-size: var(--t-xs); color: var(--grey-2); }
.ab-cta .btn:disabled { opacity: .45; cursor: not-allowed; animation: none; }

/* o radar: muda de pessoa em pessoa, com o diagnóstico de cada uma */
.ab-radar { display: grid; grid-template-columns: 220px minmax(190px, 220px) 1fr; gap: 28px; align-items: center; padding: clamp(20px, 3.4vw, 30px) clamp(20px, 3.4vw, 32px); }
.ab-radar__topo { display: contents; }
.ab-radar__svg { width: 220px; height: 220px; }
@media (max-width: 760px) {
  .ab-radar { grid-template-columns: 130px 1fr; gap: 18px; }
  .ab-radar__svg { width: 130px; height: 130px; }
  .ab-radar__diag { grid-column: 1 / -1; }
}
.ab-radar__eixo { fill: none; stroke: rgba(35,35,80,.14); stroke-width: 1; }
.ab-radar__area { fill: rgba(35,35,80,.06); stroke: rgba(35,35,80,.35); stroke-width: 1.5; }
.ab-radar__fraco { fill: none; stroke: var(--cor-fraco, var(--orange)); stroke-width: 2; animation: ab-anel 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ab-anel { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
/* a cor de cada eixo, no gráfico, nos rótulos e nas barras */
.ck { --eixo-ouvido: #4b4bff; --eixo-pronuncia: #00c8a0; --eixo-fluencia: #6400af; --eixo-confianca: #ff5a00; --eixo-ouvido-claro: #7a7aff; --eixo-pronuncia-claro: #00c8a0; --eixo-fluencia-claro: #c08cff; --eixo-confianca-claro: #ff5a00; }
.is-ouvido { --cor-eixo: var(--eixo-ouvido); } .is-pronuncia { --cor-eixo: #00b08d; } .is-fluencia { --cor-eixo: var(--eixo-fluencia); } .is-confianca { --cor-eixo: var(--eixo-confianca); }
.ck-radar .is-ouvido { --cor-eixo: var(--eixo-ouvido-claro); } .ck-radar .is-pronuncia { --cor-eixo: var(--eixo-pronuncia-claro); } .ck-radar .is-fluencia { --cor-eixo: var(--eixo-fluencia-claro); } .ck-radar .is-confianca { --cor-eixo: var(--eixo-confianca-claro); }
@keyframes ab-pisca { 50% { opacity: .3; } }
.ab-radar__rotulos { display: grid; gap: 14px; }
.ab-radar__rotulos div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 0 12px; font-size: .9rem; font-weight: 700; }
.ab-radar__rotulos b { font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-weight: 600; font-size: 1.05rem; color: var(--navy); text-align: right; transition: color .3s; font-variant-numeric: tabular-nums; }
.ab-radar__rotulos div { transition: opacity .3s; }
.ab-radar__rotulos div span { color: var(--cor-eixo, var(--navy)); }
.ab-radar__rotulos div i { background: var(--cor-eixo, var(--teal)) !important; }
.ab-radar__rotulos div.is-fraco b { color: var(--cor-eixo); }
.ab-radar__rotulos div.is-fraco, .ab-radar__rotulos div.is-forte { font-weight: 800; }
.ab-radar__rotulos div.is-forte b { color: var(--cor-eixo); }
.ab-radar__rotulos div:not(.is-fraco):not(.is-forte) { opacity: .6; }
.ab-radar__diag { margin: 0; padding: 0 0 0 30px; border-left: 1px solid var(--line); display: grid; grid-template-columns: 1fr; gap: 18px; height: calc((.62rem * 1.4 + 1.05rem * 1.2 + .86rem * 1.45 * 2 + 8px) * 2 + 18px); overflow: hidden; transition: opacity .26s ease, transform .26s ease; align-self: center; }
@media (max-width: 760px) { .ab-radar__diag { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); } }
.ab-radar__diag.is-sai { opacity: 0; transform: translateY(6px); }
.ab-radar__bloco { display: grid; align-content: start; gap: 4px; min-height: calc(.62rem * 1.4 + 1.05rem * 1.2 + .86rem * 1.45 * 2 + 8px); }
.ab-radar__bloco small { font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .62rem; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); }
.ab-radar__bloco b { font-size: 1.05rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.ab-radar__bloco span { font-size: .86rem; line-height: 1.45; color: var(--ink); }
@media (max-width: 420px) { .ab-radar__diag { grid-template-columns: 1fr; height: auto; min-height: 9em; } }
.ab-radar.is-movendo .ab-radar__fraco { visibility: hidden; }
.ab-radar__varre { opacity: 0; transform-origin: 85px 85px; }
.ab-radar.is-movendo .ab-radar__varre { opacity: 1; animation: ab-varre 1.45s cubic-bezier(.3, 0, .2, 1) forwards; }
@keyframes ab-varre { 0% { transform: rotate(0deg); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: rotate(360deg); opacity: 0; } }
.ab-radar__area { transition: fill .4s; }
.ab-radar.is-movendo .ab-radar__area { fill: rgba(75,75,255,.05); }
.ab-radar__fraco { transition: opacity .3s; }
.ab-radar__forte { fill: var(--cor-forte, var(--teal)); opacity: .9; }
.ab-radar__diag b { color: var(--cor-fraco, var(--orange)); font-weight: 800; }
.ab-radar__diag.is-entra { animation: ab-entra .5s ease; }
.ab-radar__rotulos i { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); flex: none; }
.ab-radar__rotulos small { color: var(--grey-2); }

/* o controle deslizante */

/* as palavras que somem */
.ab-some { margin-bottom: 8px; display: grid; gap: 10px; align-content: center; box-sizing: border-box; min-height: calc(3 * 1.6rem * 1.2 + 1.5rem + 10px + 2 * clamp(16px, 3vw, 24px)); }
@media (max-width: 560px) { .ab-some { min-height: calc(4 * 1.3rem * 1.2 + 2 * 1.2em + 10px + 2 * 16px); } }
.ab-some__par { display: grid; grid-template-columns: 140px 1fr; gap: 0 14px; align-items: start; }
.ab-some__ipa { grid-column: 2; margin: 4px 0 0; min-height: 1.3em; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: clamp(.95rem, 2vw, 1.15rem); font-weight: 600; letter-spacing: .03em; color: var(--royal); opacity: 0; transform: translateY(-3px); transition: opacity .35s ease, transform .35s ease; }
.ab-some__ipa em { font-style: normal; color: #00b08d; }
.ab-some__liga { text-decoration: none; color: var(--orange); font-weight: 700; }
.ab-some__ipa.is-visivel { opacity: 1; transform: none; }
@media (max-width: 560px) { .ab-some__ipa { grid-column: 1; } }
.ab-some__par .ab-some__rotulo { padding-top: .45em; }
@media (max-width: 560px) { .ab-some__par { grid-template-columns: 1fr; gap: 2px; } }
.ab-some__rotulo { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); transition: color .3s; }
.ab-some__rotulo.is-ativo { color: var(--navy); }
.ab-some__linha { font-size: clamp(1.15rem, 2.8vw, 1.6rem); font-weight: 800; line-height: 1.2; min-height: 1.2em; color: var(--navy); }
.ab-some__linha em { font-style: normal; color: var(--orange); }
.ab-some__linha.is-ouvido em { color: #00b08d; }
.ab-some__linha.is-ouvido { color: var(--royal); }
.ab-some__cursor { display: none; width: 3px; height: .95em; margin-left: 3px; vertical-align: -.1em; background: var(--navy); border-radius: 2px; animation: ab-cursor 1s steps(2, start) infinite; }
.ab-some__linha.is-ativa .ab-some__cursor { display: inline-block; }
.ab-some__linha.is-digitando .ab-some__cursor { animation: none; opacity: 1; }
@keyframes ab-cursor { to { opacity: 0; } }
.ab-some__contador { margin: 2px 0 0; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .68rem; color: var(--grey-2); }

/* as duas ondas: hoje e depois */
.ab-ondas { margin: 4px 0 16px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--navy); color: #fff; }
.ab-ondas__titulo { margin: 0 0 12px; font-weight: 800; font-size: var(--t-base); line-height: 1.35; }
.ab-ondas__faixa { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; margin: 6px 0; }
.ab-ondas__faixa b { font-size: .85rem; }
.ab-ondas__faixa small { display: block; font-size: .68rem; opacity: .6; line-height: 1.3; }
.ab-ondas__onda { display: flex; align-items: center; gap: 3px; height: 40px; }
.ab-ondas__onda i { flex: 1; border-radius: 3px; background: var(--orange); height: var(--h); animation: ab-onda 1.4s ease-in-out infinite; animation-delay: var(--d); }
.ab-ondas__faixa.is-depois .ab-ondas__onda i { background: var(--teal); }
@keyframes ab-onda { 50% { transform: scaleY(.45); } }
@media (max-width: 480px) { .ab-ondas__faixa { grid-template-columns: 92px 1fr; } }

.ab-eq { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-bottom: 18px; }
.ab-eq i {
  width: 8px; border-radius: 4px; background: var(--electric);
  height: 30%; animation: ab-eq 1.1s ease-in-out infinite;
  transform-origin: bottom;
}
.ab-eq i:nth-child(1) { animation-delay: 0s; background: var(--teal); }
.ab-eq i:nth-child(2) { animation-delay: .12s; }
.ab-eq i:nth-child(3) { animation-delay: .24s; background: var(--orange); }
.ab-eq i:nth-child(4) { animation-delay: .36s; }
.ab-eq i:nth-child(5) { animation-delay: .48s; background: var(--teal); }
.ab-eq i:nth-child(6) { animation-delay: .6s; }
.ab-eq i:nth-child(7) { animation-delay: .72s; background: var(--orange); }
.ab-eq i:nth-child(8) { animation-delay: .84s; }
.ab-eq i:nth-child(9) { animation-delay: .96s; background: var(--teal); }
@keyframes ab-eq { 0%, 100% { height: 22%; } 50% { height: 100%; } }
.ab-frase { margin: 0; display: grid; gap: 4px; }
.ab-frase__rotulo { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.ab-frase__txt { font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.ab-troca { position: relative; display: inline-grid; color: var(--orange); }
.ab-troca span { grid-area: 1 / 1; animation: ab-troca 4.8s ease-in-out infinite; }
.ab-troca span:nth-child(2) { animation-name: ab-troca-2; color: var(--teal); }
@keyframes ab-troca {
  0%, 44% { opacity: 1; transform: translateY(0); }
  50%, 94% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes ab-troca-2 {
  0%, 44% { opacity: 0; transform: translateY(8px); }
  50%, 94% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}
.ab-chapeu { margin: 8px 0 18px; justify-content: center; text-align: center; }
.ab-titulo__linha { display: block; }
/* na abertura, a logo fica centralizada e a barra de andamento some */
.ck.is-abertura .ck-topo { grid-template-columns: 1fr auto 1fr; }
.ck.is-abertura .ck-topo__logo { grid-column: 2; }
.ck.is-abertura .ck-progresso { display: none; }
.ck.is-abertura .ck-topo__zap { grid-column: 3; justify-self: end; }
.ab-titulo { margin: 0 0 12px; font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.05; letter-spacing: -.02em; }
.ab { --ab-largura: 640px; }
.ab-sub { margin: 0 auto 30px; font-size: var(--t-md); font-weight: 700; line-height: 1.6; color: var(--navy); max-width: var(--ab-largura); text-align: center; }
.ab-sub__linha { display: block; }
/* o marca-texto do site (.mark--electric do brand.css): azul elétrico com o
   texto branco. Aqui ele é "pintado" da esquerda pra direita quando a
   página abre, cada um no seu tempo (--d). */
.ab-marca { border-radius: .3em; padding: .08em .36em; color: var(--white); background: linear-gradient(var(--electric), var(--electric)) no-repeat 0 0 / 0% 100%; animation: ab-pinta .55s cubic-bezier(.2, .7, .2, 1) var(--d, .4s) forwards; }
@keyframes ab-pinta { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .ab-marca { animation: none; background-size: 100% 100%; } }
.ab-cta { margin: 0 0 44px; flex-direction: column; align-items: center; gap: 8px; }
.ab-meta { margin: 0; font-size: var(--t-xs); color: var(--grey-2); text-align: center; }
.ab-ganhos { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.ab-ganhos li {
  display: grid; gap: 2px; padding: 12px 14px 12px 42px; position: relative;
  border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line);
  opacity: 0; transform: translateY(10px); animation: ab-entra .55s ease forwards; animation-delay: calc(.25s + var(--i) * .18s);
}
.ab-ganhos li::before {
  content: ""; position: absolute; left: 14px; top: 16px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--electric); box-shadow: inset 0 0 0 3px var(--white), 0 0 0 1.5px var(--electric);
}
.ab-ganhos b { font-size: var(--t-sm); color: var(--navy); line-height: 1.35; }
.ab-ganhos span { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.45; }
@keyframes ab-entra { to { opacity: 1; transform: none; } }
.ab-prova { margin: 0 0 18px; font-size: var(--t-xs); font-weight: 700; color: var(--grey-2); }
@media (prefers-reduced-motion: reduce) {
  .ab-eq i, .ab-troca span { opacity: 0; }
  .ab-cta__btn::before, .ab-cta__btn::after { animation: none; }
  .ab-some__cursor { animation: none; }
  .ab-radar__area { transform: none; opacity: 1; }
  .ab-ganhos li { animation: none; opacity: 1; transform: none; }
  .ab-troca span:nth-child(2) { display: none; }
}

/* a abertura: o que a pessoa leva, não a lista de blocos */
.ck-ganhos { margin: 22px 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; }
.ck-ganhos li {
  display: grid; gap: 3px;
  padding: 14px 16px 14px 44px; position: relative;
  border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line);
}
.ck-ganhos li::before {
  content: ""; position: absolute; left: 16px; top: 19px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--electric);
  box-shadow: inset 0 0 0 3px var(--white), 0 0 0 1.5px var(--electric);
}
.ck-ganhos b { font-size: var(--t-base); color: var(--navy); line-height: 1.35; }
.ck-ganhos span { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }
.ck-intro-meta { margin: 0 0 12px; font-size: var(--t-sm); color: var(--ink); }
.ck-intro-meta b { color: var(--navy); }

/* o menu do modo revisão (?revisar=1) */
.ck-revisao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px; background: var(--navy); color: #fff;
  font-size: .75rem; box-shadow: 0 -4px 20px rgba(35, 35, 80, .25);
}
.ck-revisao__rotulo { font-weight: 700; margin-right: 6px; opacity: .8; }
.ck-revisao__btn {
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .3);
  background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
}
.ck-revisao__btn:hover { background: var(--electric); border-color: var(--electric); }
.ck-revisao__btn.is-sair { border-color: var(--orange); color: var(--orange); }
body:has(.ck-revisao) .ck-rodape { padding-bottom: 70px; }

/* ==========================================================================
   o consentimento na abertura
   ========================================================================== */
.ck-consente { margin: 18px 0 14px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--white); border: 1.5px solid var(--line); }
.ck-consente__titulo { margin: 0 0 6px; font-weight: 800; color: var(--navy); }
.ck-consente__texto { margin: 0 0 12px; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); }
.ck-consente .tp-consente { margin: 0; }
.ck-consente__nota { margin: 8px 0 0; font-size: var(--t-xs); color: var(--grey-2); }
/* a segunda parte da etapa (os objetivos): um setor separado, com respiro e um fio em cima */
.ck-h2-meio { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }

/* ==========================================================================
   etapa 3: transcreva
   ========================================================================== */
.ck-campo--texto { resize: vertical; min-height: 64px; line-height: 1.5; }

/* ==========================================================================
   etapa 4: roleplay
   ========================================================================== */
.rp-cena .video { border-radius: var(--r-md); overflow: hidden; margin-bottom: 10px; }
.rp-mensagem { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper-2); font-size: var(--t-sm); line-height: 1.55; color: var(--ink); }
.rp-mensagem b { color: var(--navy); }
.rp-pergunta { margin-top: 14px; }
.rp-pergunta + .rp-pergunta { padding-top: 14px; border-top: 1px solid var(--line); }

.tp-texto--menor { font-size: var(--t-sm); max-height: 12em; overflow: auto; }

/* ==========================================================================
   etapa 9: a linha do tempo
   ========================================================================== */
.tl-anima { margin: 0 0 16px; min-height: 2.4em; }
.tl-anima__frase {
  margin: 0 0 4px; font-size: var(--t-md); font-weight: 700; color: var(--navy); line-height: 1.35;
  opacity: 0; transform: translateY(8px); animation: tl-entra .7s ease forwards;
}
.tl-anima__frase.is-fecho { color: var(--electric); }
@keyframes tl-entra { to { opacity: 1; transform: none; } }
.tl-pista { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-lg); background: var(--navy); }
.tl-faixa { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); }
.tl-faixa.is-tocando { background: rgba(255, 255, 255, .11); }
.tl-faixa__cabeca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tl-faixa__rotulo { display: grid; gap: 1px; min-width: 0; }
.tl-faixa__rotulo b { color: #fff; font-size: var(--t-sm); }
.tl-faixa__rotulo span { color: rgba(255, 255, 255, .6); font-size: .72rem; line-height: 1.3; }
.tl-play { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: var(--orange); cursor: pointer; display: grid; place-items: center; }
.tl-play__ico { width: 0; height: 0; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.tl-play.is-tocando .tl-play__ico { width: 12px; height: 14px; border: 0; margin: 0; background: linear-gradient(to right, #fff 0 35%, transparent 35% 65%, #fff 65%); }
.tl-onda { position: relative; cursor: pointer; }
.tl-canvas { width: 100%; height: 56px; display: block; }
.tl-tempo { position: absolute; right: 6px; bottom: 2px; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: .68rem; color: rgba(255, 255, 255, .6); }
.tl-texto { margin: 14px 0 0; font-size: var(--t-base); line-height: 1.7; color: var(--grey-2); }
.tl-p { transition: color .15s; }
.tl-p.is-dita { color: var(--navy); }
.tl-p.is-agora { color: var(--electric); font-weight: 700; }
@media (max-width: 640px) {
  .tl-faixa { grid-template-columns: 1fr; }
  .tl-faixa__cabeca { order: 1; }
}

/* --------------------------------------------------------------------------
   Versão de 17/10: as etapas novas (ouvido em duas partes, frases contra o
   nativo, a sua voz frase a frase), o momento da transcrição e o radar do
   retrato. Tudo com o ar de medição: números em mono, rótulos pequenos.
   -------------------------------------------------------------------------- */

.ck-h3 { margin: 28px 0 10px; font-size: var(--t-md); font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.ck-h3:first-of-type { margin-top: 8px; }
.ab-radar__rotulos span small { display: block; margin-top: 1px; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .6rem; font-weight: 500; letter-spacing: .08em; color: var(--grey-2); text-transform: lowercase; }

/* os pares de palavras: as opções grandes, como palavra */
.ck-opcoes--palavras .ck-opcao { font-size: var(--t-md); font-weight: 800; letter-spacing: -.01em; min-width: 6ch; justify-content: center; }
.ck-q--par .ck-q__pergunta { margin-top: 10px; }

/* a régua de 0 a 10 */
.ck-regua { max-width: 560px; padding: 6px 4px 0; }
.ck-regua__valor { font-family: var(--mono); font-size: 2.4rem; font-weight: 700; color: var(--electric); line-height: 1; margin-bottom: 10px; text-align: center; transition: color .15s; }
.ck-regua.is-vazia .ck-regua__valor { color: var(--grey-2); }
.ck-regua__faixa { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
.ck-regua__faixa:focus-visible { outline: 2px solid var(--electric); outline-offset: 4px; border-radius: 8px; }
.ck-regua__faixa::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--electric) 0 var(--p), rgba(35, 35, 80, .12) var(--p) 100%); }
.ck-regua__faixa::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(35, 35, 80, .12); }
.ck-regua__faixa::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--electric); }
.ck-regua__faixa::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--white); border: 3px solid var(--electric); box-shadow: 0 2px 8px rgba(35, 35, 80, .2); transition: transform .12s; }
.ck-regua__faixa::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 3px solid var(--electric); box-shadow: 0 2px 8px rgba(35, 35, 80, .2); }
.ck-regua__faixa:active::-webkit-slider-thumb { transform: scale(1.1); }
.ck-regua.is-vazia .ck-regua__faixa::-webkit-slider-runnable-track { background: rgba(35, 35, 80, .12); }
.ck-regua.is-vazia .ck-regua__faixa::-webkit-slider-thumb { border-color: var(--grey-2); }
.ck-regua.is-vazia .ck-regua__faixa::-moz-range-progress { background: rgba(35, 35, 80, .12); }
.ck-regua.is-vazia .ck-regua__faixa::-moz-range-thumb { border-color: var(--grey-2); }
.ck-regua__marcas { display: flex; justify-content: space-between; padding: 2px 10px 0; font-family: var(--mono); font-size: 11px; color: var(--grey-2); }
.ck-regua__marcas span { width: 1.6em; text-align: center; }
.ck-regua__marcas span.is-ativa { color: var(--electric); font-weight: 700; }
.ck-regua__pontas { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }

/* a tradução escondida */
.ck-trad { margin: -6px 0 14px; font-size: var(--t-sm); }
.ck-trad summary { cursor: pointer; color: var(--electric); font-weight: 700; }
.ck-trad .ck-q__trad { margin: 8px 0 0; }

/* ---- o momento da transcrição ------------------------------------------- */
.ck-tr-caixa { margin-top: 18px; }
.ck-tr-caixa[hidden] { display: none !important; }
.tr { padding: clamp(16px, 3vw, 22px); border-radius: var(--r-lg); background: var(--navy); color: #fff; }
.tr-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.tr-cab__estado:empty { display: none; }
.tr-cab__estado::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); margin-right: 6px; vertical-align: middle; }
.tr.is-esperando .tr-cab__estado::before { background: var(--orange); animation: ab-pisca 1s ease-in-out infinite; }
.tr-titulo { margin: 0 0 4px; font-size: var(--t-md); font-weight: 800; color: #fff; }
.tr-intro { margin: 0 0 14px; font-size: var(--t-sm); line-height: 1.5; opacity: .8; }
.tr-texto { margin: 0; font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.7; font-weight: 600; cursor: default; }
.tr-texto .tr-p[hidden] { display: none; }
.tr-p.is-dif { color: var(--orange); border-bottom: 2px solid var(--orange); }
.tr-p.is-hes { color: rgba(255,255,255,.5); font-style: italic; border-bottom: 2px dotted rgba(255,255,255,.4); }
.tr-p.is-rep { text-decoration: underline wavy #ffb48a; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tr-cursor { display: inline-block; width: 3px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: #fff; border-radius: 2px; animation: ab-cursor 1s steps(2, start) infinite; }
.tr.is-digitando .tr-cursor { animation: none; }
.tr-espera, .tr-vazio { font-style: normal; font-weight: 500; opacity: .75; }
.tr-espera::after { content: "…"; animation: tr-pontos 1.2s steps(4, end) infinite; }
@keyframes tr-pontos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.tr-perdidas { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-perdidas__rotulo { font-size: .78rem; opacity: .8; margin-right: 4px; }
.tr-perdidas__rotulo.is-ok { color: var(--teal); font-weight: 700; opacity: 1; }
.tr-chip { padding: 3px 9px; border-radius: 999px; background: rgba(255,90,0,.18); color: #ffb48a; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .78rem; }
.tr-medidas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tr-medida { padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.08); min-width: 86px; }
.tr-medida b { display: block; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: 1.1rem; font-weight: 600; color: var(--teal); }
.tr-medida span { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.tr-nota { margin: 12px 0 0; font-size: var(--t-sm); line-height: 1.5; opacity: .8; }
.tr.is-falhou { background: var(--paper-2); color: var(--ink); }
/* ---- a sua voz: andamento e frase a frase ------------------------------- */
.sv-andamento { margin: 0 0 18px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.sv-andamento__topo { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.sv-andamento__eq { height: 38px; margin: 0; gap: 4px; flex: none; }
.sv-andamento__eq i { width: 6px; }
.sv-andamento__txt { margin: 0; font-weight: 800; color: var(--navy); font-size: var(--t-base); }
.sv-andamento__sub { margin: 2px 0 0; font-size: var(--t-xs); color: var(--grey-2); }
.sv-andamento__sub span { font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); }
.sv-andamento__barra { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.sv-andamento__barra i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--teal), var(--electric)); transition: width .5s linear; position: relative; }
.sv-andamento__barra i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: sv-brilho 1.6s linear infinite; }
@keyframes sv-brilho { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sv-passos li small { margin-left: auto; }
.sv-passos li span { display: flex; align-items: center; gap: 10px; }
.sv-passos li small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); }
.sv-passos li.is-feito small { color: var(--teal); }
.sv-passos li.is-agora small { color: var(--orange); }
.sv-passos li.is-agora::before { border-color: var(--orange); border-top-color: transparent; animation: sv-gira .9s linear infinite; }
@keyframes sv-gira { to { transform: rotate(360deg); } }
.sv-andamento__dica { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: var(--t-sm); color: var(--ink-soft); transition: opacity .2s; min-height: 1.5em; }
.sv-andamento__dica.is-sai { opacity: 0; }
.sv-passos { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--grey-2); }
.sv-passos li { display: flex; align-items: center; gap: 10px; }
.sv-passos li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.sv-passos li span::before { display: none; }
.sv-passos li.is-feito { color: var(--navy); }
.sv-passos li.is-feito::before { background: var(--teal); border-color: var(--teal); }
.sv-passos li.is-agora { color: var(--navy); font-weight: 700; }
.sv-passos li.is-agora::before { border-color: var(--orange); animation: ab-pisca 1s ease-in-out infinite; }
/* a espera: rodinha, o passo atual e a leitura de hoje tocando */
.sv-espera { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); margin: 0 0 14px; }
.sv-espera__roda { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.sv-espera__roda i { position: absolute; inset: 0; border-radius: 50%; border: 4px solid rgba(35, 35, 80, .12); border-top-color: var(--electric); animation: sv-gira .9s linear infinite; }
.sv-espera__roda b { font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .95rem; font-weight: 600; color: var(--navy); }
.sv-espera__roda b:not(:empty)::after { content: "s"; font-size: .6em; margin-left: 1px; color: var(--grey-2); }
.sv-espera__texto { min-width: 0; }
.sv-espera__titulo { margin: 0; font-weight: 800; color: var(--navy); font-size: var(--t-md); }
.sv-espera__passo { margin: 4px 0 0; font-size: var(--t-sm); color: var(--ink-soft); font-weight: 600; }
.sv-espera__quanto { margin: 4px 0 0; font-size: var(--t-xs); color: var(--grey-2); }
.sv-espera__ouca { margin: 0 0 22px; }
.sv-espera__ouca .ck-q__pergunta { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .sv-espera__roda i { animation: none; border-top-color: var(--line); } }
.sv-frases { margin-top: 22px; }
/* "ver as outras frases": a segunda parte, só se a pessoa pedir */
.sv-denovo { margin: 10px 0 18px; }
.sv-mais { padding: 16px 0 4px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.sv-mais__btn { min-width: 220px; }
.sv-mais__falhou { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); font-weight: 600; }
.sv-mais .sv-espera { width: 100%; text-align: left; margin: 0; }
.sv-espera--mini { padding: 14px 16px; }
.sv-espera--mini .sv-espera__roda { width: 46px; height: 46px; }
.sv-espera--mini .sv-espera__roda b { font-size: .85rem; }
.sv-espera--mini .sv-espera__titulo { font-size: var(--t-sm); }
.sv-frase { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.sv-frase__n { margin: 0; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .8rem; color: var(--grey-2); padding-top: 4px; }
.sv-frase__texto { margin: 0 0 8px; font-size: var(--t-base); font-weight: 600; color: var(--navy); line-height: 1.4; }
.sv-frase__baixo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sv-frase__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
/* a onda da frase: cinza até alguém dar play; aí fica na cor da versão e vai enchendo */
.sv-onda { display: flex; align-items: center; gap: 2px; height: 30px; width: 150px; flex: none; --cor: var(--navy); opacity: .55; transition: opacity .2s; }
.sv-onda.is-ativa { opacity: 1; }
.sv-onda__barra { flex: 1 1 0; min-width: 2px; height: calc(var(--h, .2) * 100%); min-height: 3px; border-radius: 2px; background: rgba(35, 35, 80, .18); transition: height .25s ease, background .1s linear; }
.sv-onda.is-ativa .sv-onda__barra { background: color-mix(in srgb, var(--cor) 28%, white); }
.sv-onda.is-ativa .sv-onda__barra.is-passou { background: var(--cor); }
@media (max-width: 480px) { .sv-onda { width: 100%; } }
.sv-play { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.sv-play__ico { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.sv-play.is-tocando .sv-play__ico { width: 9px; height: 11px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.sv-play--hoje { --cor: var(--orange); color: var(--cor); }
.sv-play--alinhada { --cor: #008f73; color: var(--cor); }
.sv-play--americana { --cor: var(--electric); color: var(--cor); }
/* tocando: o fundo fica na cor da versão e o texto e a pausa ficam brancos */
.sv-play.is-tocando { background: var(--cor); border-color: var(--cor); color: #fff; }

/* ---- o radar do retrato -------------------------------------------------- */
.ck-radar-retrato { margin: 6px 0 26px; }
.ck-radar-retrato .ab-radar__rotulos b { min-width: 4.2ch; }
.ck-radar { margin: 6px 0 18px; padding: 18px; border-radius: var(--r-lg); background: var(--navy); color: #fff; }
.ck-radar__topo { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
@media (max-width: 480px) { .ck-radar__topo { grid-template-columns: 1fr; justify-items: center; } }
.ck-radar__svg { width: 150px; height: 150px; }
.ck-radar__eixo { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; }
.ck-radar__area { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.45); stroke-width: 1.5; }
.ck-radar__fraco { fill: none; stroke: var(--cor-fraco, var(--orange)); stroke-width: 2; animation: ab-anel 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ck-radar__rotulos { display: grid; gap: 8px; width: 100%; }
.ck-radar__rot { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 10px; font-size: .86rem; font-weight: 700; }
.ck-radar__rot i { width: 9px; height: 9px; border-radius: 50%; background: var(--cor-eixo, var(--teal)); }
.ck-radar__rot span { color: var(--cor-eixo, #fff); }
.ck-radar__rot small { display: block; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .6rem; font-weight: 500; letter-spacing: .06em; opacity: .55; }
.ck-radar__rot b { font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .95rem; font-weight: 600; }
.ck-radar__rot.is-fraco b { color: var(--cor-eixo); }
.ck-radar__rot:not(.is-fraco) { opacity: .75; }

/* ---- as medidas do retrato ---------------------------------------------- */
.ck-eixo__pct { font-family: var(--mono); font-weight: 600; color: var(--navy); }
.ck-medidas { margin: 0 0 22px; }
.ck-medidas[hidden] { display: none !important; }
.ck-medidas__rotulo { margin: 0 0 8px; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); }
.ck-medidas__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ck-medida { padding: 10px 12px; border-radius: var(--r-md, 10px); background: var(--white); border: 1px solid var(--line); }
.ck-medida b { display: block; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: 1.25rem; font-weight: 600; color: var(--navy); }
.ck-medida span { font-size: .72rem; line-height: 1.3; color: var(--grey-2); display: block; margin-top: 2px; }
.ck-eixo__en { font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .62rem; font-weight: 500; letter-spacing: .06em; color: var(--grey-2); margin-left: 4px; text-transform: lowercase; }

/* a gravação da fala livre, mais clara: selo "gravando", botão de parar laranja com a contagem */
.fl-selo { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #ff3b3b; font-weight: 700; }
.fl-selo i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; animation: ab-pisca 1s ease-in-out infinite; }
.fl-selo[hidden] { display: none !important; }
.fl-mic { display: inline-block; width: 10px; height: 16px; margin-right: 9px; border-radius: 5px; background: currentColor; vertical-align: -3px; position: relative; }
.fl-mic::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -5px; height: 9px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 9px 9px; }
.fl-parar { min-width: 240px; margin-left: 0 !important; font-size: var(--t-base); }
.fl-parar:disabled { opacity: .55; cursor: wait; }
.fl-parar.is-livre { animation: fl-pop .45s ease-out; }
@keyframes fl-pop { 40% { transform: scale(1.06); } }

/* o rodapé do site, no teste: as redes, o contato, a política */
.ck .site-footer { margin-top: auto; }
.ck .site-footer p { margin: 0; line-height: 1.55; }
.ck .site-footer ul { margin: 0; padding: 0; list-style: none; }
.ck .site-footer .stack-s { display: grid; gap: 8px; }
.ck .redes { display: flex; flex-direction: column; gap: 8px; }
.ck .redes__titulo { margin-top: 26px; }
.ck .redes a { display: inline-flex; align-items: center; gap: 8px; color: #c6c6e4; font-weight: 600; text-decoration: none; }
.ck .redes a:hover { color: var(--white); text-decoration: none; }
.ck .redes a span:not(.redes__ico) { font-weight: 400; color: #9494bd; font-size: var(--t-sm); }
.ck .redes__ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #c6c6e4; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.ck .redes__ico svg { width: 17px; height: 17px; }
.ck .redes a:hover .redes__ico { background: var(--orange); border-color: var(--orange); color: var(--white); }
body:has(.ck-revisao) .site-footer { padding-bottom: 90px; }
.ab-aceite .ck-consente__nota { color: var(--orange); font-weight: 700; }
.ab-aceite .ck-consente__nota[hidden] { display: none !important; }
.ab-aceite.is-falta .tp-consente { animation: ab-treme .5s ease; border-color: var(--orange); }
@keyframes ab-treme { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* o botão de começar, com a cara do botão da oferta do treinamento:
   degradê royal pro violeta, o halo girando em volta, e o foguete que
   paira, esquenta o motor, decola e volta */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ab-giralho { to { --ang: 360deg; } }
@keyframes ab-flui { to { background-position: 100% 50%; } }
.ck .ab-cta__btn {
  position: relative; isolation: isolate; overflow: visible; border: 0; border-radius: 16px;
  background: linear-gradient(115deg, #4b4bff 0%, #3a3ad8 22%, #5a2bc8 45%, #6400af 62%, #7a3fe0 80%, #4b4bff 100%);
  background-size: 320% 100%; background-position: 0% 50%;
  animation: ab-flui 9s ease-in-out infinite alternate;
  color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font-weight: 800; letter-spacing: .05em; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
}
.ck .ab-cta__btn::before {
  content: ""; position: absolute; inset: -2px; border-radius: 18px; z-index: -1;
  background: conic-gradient(from var(--ang), #4b4bff, #6d6dff, #9a9aff, #8a5cf0, #7a18cf, #a070ff, #5a5aff, #4b4bff);
  filter: blur(14px); opacity: .85; animation: ab-giralho 10s linear infinite; transition: opacity .2s ease;
}
.ck .ab-cta__btn:hover, .ck .ab-cta__btn:focus-visible {
  filter: brightness(1.08); color: var(--white);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .38);
}
.ck .ab-cta__btn:hover::before { opacity: 1; }
.ab-cta__foguete { display: inline-block; font-size: 1.15em; line-height: 1; will-change: transform, opacity; animation: ab-foguete 7s cubic-bezier(.3, .1, .3, 1) 1s infinite; }
@keyframes ab-foguete {
  0%, 12%, 24%, 36% { opacity: 1; transform: translateY(0) rotate(0); }
  6%, 18%, 30% { transform: translateY(-3px) rotate(-7deg); }
  42% { transform: translate(-1px, 1px) rotate(-7deg); }
  46% { transform: translate(1px, -1px) rotate(5deg); }
  50% { transform: translate(-1px, 1px) rotate(-5deg); }
  54% { transform: none; }
  66% { opacity: 1; transform: translate(22px, -30px) rotate(16deg) scale(1.12); }
  72% { opacity: 0; transform: translate(48px, -70px) rotate(24deg) scale(.7); }
  73% { opacity: 0; transform: translate(-10px, 14px) rotate(-20deg) scale(.5); }
  84%, 100% { opacity: 1; transform: none; }
}
/* o flutuante: fixo embaixo, só na abertura, quando o botão de verdade saiu da tela */
.ab-flutua { position: fixed; left: 0; right: 0; bottom: 18px; z-index: 30; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; animation: ab-sobe .35s ease; }
.ab-flutua[hidden] { display: none !important; }
.ab-flutua__btn { pointer-events: auto; min-width: 260px; padding: 14px 26px; box-shadow: 0 14px 34px rgba(35, 35, 80, .28), inset 0 0 0 1px rgba(255, 255, 255, .2); }
@keyframes ab-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ab-cta__foguete, .ck .ab-cta__btn::before { animation: none; } }
/* no modo revisão, o flutuante sobe pra não ficar embaixo do menu de etapas */
body:has(.ck-revisao) .ab-flutua { bottom: 74px; }
.ab-flutua { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
body:has(.ck-revisao) .ab-flutua { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
/* o botão de começar com a mesma largura do texto e do consentimento */
.ab-cta .ab-cta__btn { width: 100%; max-width: var(--ab-largura); }
/* "você já começou este teste aqui": continuar ou zerar */
.ab-retomar { width: 100%; max-width: var(--ab-largura); margin: 0 0 14px; padding: 14px 18px; border-radius: var(--r-md); background: var(--white); border: 1.5px solid var(--line); text-align: center; }
.ab-retomar__txt { margin: 0 0 10px; font-size: var(--t-sm); font-weight: 700; color: var(--navy); }
.ab-retomar__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ab-retomar__zero { color: var(--orange); border-color: var(--orange); }
.ab-retomar__zero:hover { background: var(--orange); color: var(--white); }

/* ==========================================================================
   a ficha (a página /ficha e o relatório): cada resposta ao lado do gabarito
   ========================================================================== */
/* a ficha: tudo que a pessoa fez, etapa por etapa, com o gabarito ao lado.
     Lê o teste guardado neste navegador (o mesmo que a página do teste usa). */
  .fi-bloco { margin: 26px 0; }
  .fi-bloco > h2 { font-size: var(--t-lg); margin: 0 0 4px; }
  .fi-bloco > .fi-sub { margin: 0 0 14px; color: var(--ink-soft); font-size: var(--t-sm); }
  .fi-item { padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--white); margin-bottom: 10px; }
  .fi-item.is-certo { border-color: rgba(0, 200, 160, .55); }
  .fi-item.is-errado { border-color: rgba(255, 90, 0, .55); }
  .fi-item.is-vazio { opacity: .6; }
  .fi-item__n { margin: 0 0 4px; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); }
  .fi-item__fala { margin: 0 0 8px; font-weight: 800; color: var(--navy); font-size: var(--t-md); }
  .fi-linha { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-sm); margin: 4px 0; }
  .fi-linha b { color: var(--navy); }
  .fi-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-family: var(--mono); font-size: .7rem; font-weight: 600; }
  .fi-tag.is-certo { background: rgba(0, 200, 160, .15); color: #00846a; }
  .fi-tag.is-errado { background: rgba(255, 90, 0, .14); color: #c94600; }
  .fi-tag.is-neutro { background: rgba(35, 35, 80, .08); color: var(--navy); }
  .fi-texto { margin: 8px 0 0; line-height: 1.6; font-size: var(--t-base); color: var(--navy); }
  .fi-texto .is-dif { color: #c94600; font-weight: 700; text-decoration: underline wavy #ff5a00; text-underline-offset: 3px; }
  .fi-texto .is-perdida { color: #c94600; text-decoration: line-through; opacity: .8; }
  .fi-texto .is-hes { color: var(--grey-2); font-style: italic; border-bottom: 2px dotted var(--grey-2); }
  .fi-texto .is-rep { text-decoration: underline wavy #ff5a00; text-underline-offset: 3px; }
  .fi-explica { margin: 8px 0 0; font-size: var(--t-sm); color: var(--ink-soft); }
  .fi-explica em { font-style: normal; font-weight: 700; color: var(--electric); }
  .fi-medidas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .fi-medida { padding: 6px 12px; border-radius: 8px; background: var(--paper-2); font-size: var(--t-sm); }
  .fi-medida b { font-family: var(--mono); color: var(--navy); }
  .fi-eixos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
  .fi-eixo { padding: 14px; border-radius: var(--r-md); background: var(--white); border: 1.5px solid var(--line); }
  .fi-eixo b { display: block; font-family: var(--mono); font-size: 1.6rem; color: var(--cor-eixo, var(--navy)); }
  .fi-eixo span { font-weight: 700; color: var(--navy); }
  .fi-eixo small { display: block; color: var(--ink-soft); }
  .fi-vazio { padding: 24px; border-radius: var(--r-lg); background: var(--white); border: 1.5px dashed var(--line); }
  .fi-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ck-rel-ficha { margin-top: 36px; }

/* ---- a dobra do curso (fim do retrato e do relatório) --------------------
   Duas colunas: à esquerda o texto (chapéu, título, o ponto fraco, a lista);
   à direita a foto dos professores e, embaixo dela, o cartão de compra
   (preço, botão, garantia). No celular, uma coluna, na mesma ordem. */
.ck-curso { margin-top: 28px; padding: 0; }
.ck-curso__caixa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px 30px;
  align-items: start;
  background: var(--navy);
  color: #fff;
  border-radius: 22px;
  padding: clamp(22px, 3.5vw, 34px);
  overflow: hidden;
}
.ck-curso__caixa::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(75, 75, 255, .45), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(100, 0, 175, .35), transparent 70%);
  pointer-events: none;
}
.ck-curso__texto, .ck-curso__lado { position: relative; min-width: 0; }
.ck-curso__chapeu {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.ck-passo .ck-curso__titulo {
  margin: 0 0 16px;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.12;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.ck-passo .ck-curso__marca { color: var(--orange); white-space: nowrap; }
.ck-curso__foco {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  font-size: 14px; line-height: 1.5; font-weight: 600;
}
.ck-curso__pin { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 90, 0, .25); }
.ck-curso__p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.ck-curso__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ck-curso__lista li {
  position: relative; padding-left: 26px;
  font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .9);
}
.ck-curso__lista li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8" fill="black"/><path d="M4.5 8.3l2.3 2.3 4.7-4.9" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8" fill="black"/><path d="M4.5 8.3l2.3 2.3 4.7-4.9" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}
.ck-curso__lista b { color: #fff; font-weight: 800; }
.ck-curso__lado { align-self: start; display: grid; gap: 12px; }
.ck-curso__foto {
  display: block; width: 100%; height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.ck-curso__mais { justify-content: center; padding: 13px 18px; font-size: var(--t-xs); border-width: 2px; }
/* o preço e o botão, iguais aos da página de vendas */
.ck-curso__compra { grid-column: 1 / -1; position: relative; width: 100%; max-width: 560px; margin: 4px auto 0; display: grid; gap: 12px; justify-items: stretch; }
.ck-curso__preco {
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff; border: 2px solid var(--electric); border-radius: 14px;
  padding: 12px 10px; text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.ck-curso__preco > div { display: grid; gap: 2px; }
.ck-curso__preco > div + div { border-left: 1px solid rgba(35, 35, 80, .18); }
.ck-curso__preco small { font-size: .75rem; font-weight: 700; color: var(--electric); }
.ck-curso__preco b { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--orange); }
.ck-curso__clique { margin: 2px 0 0; text-align: center; font-size: .9rem; color: #c6c6e4; }
.ck-curso__clique b { color: #fff; font-weight: 800; }
.ck-curso__cta {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 22px; border-radius: 16px;
  background: linear-gradient(135deg, var(--royal) 0%, #4a1ab0 52%, var(--violet) 100%);
  color: #fff; text-decoration: none;
  font-weight: 800; font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  transition: background .2s, box-shadow .2s, transform .15s;
}
.ck-curso__cta::before {
  content: ""; position: absolute; inset: -2px; border-radius: 18px; z-index: -1;
  background: conic-gradient(from 0deg, #7a18cf, #b070ff, #8a2fe0, #d0a0ff, #7a18cf);
  filter: blur(9px); opacity: .8;
}
.ck-curso__cta:hover {
  background: linear-gradient(135deg, #3333cc 0%, #5c22c8 52%, #7a18cf 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .38);
  transform: translateY(-1px); color: #fff;
}
.ck-curso__foguete { font-size: 1.15em; line-height: 1; animation: ck-foguete 7s cubic-bezier(.3, .1, .3, 1) 1s infinite; }
@keyframes ck-foguete {
  0%, 12%, 24%, 36% { opacity: 1; transform: translateY(0) rotate(0); }
  6%, 18%, 30% { transform: translateY(-3px) rotate(-7deg); }
  42% { transform: translate(-1px, 1px) rotate(-7deg); }
  46% { transform: translate(1px, -1px) rotate(5deg); }
  50% { transform: translate(-1px, 1px) rotate(-5deg); }
  54% { transform: none; }
  66% { opacity: 1; transform: translate(22px, -30px) rotate(16deg) scale(1.12); }
  72% { opacity: 0; transform: translate(48px, -70px) rotate(24deg) scale(.7); }
  73% { opacity: 0; transform: translate(-10px, 14px) rotate(-20deg) scale(.5); }
  84%, 100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ck-curso__foguete { animation: none; } }
.ck-curso__garantia {
  grid-column: 1 / -1; position: relative;
  display: flex; gap: 8px; align-items: center; justify-content: center;
  margin: -6px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .78);
}
.ck-curso__garantia svg { flex: none; color: var(--teal); }
.ck-curso__prints {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin: 10px 6px 0;
}
.ck-curso__prints img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; border: 1px solid rgba(35, 35, 80, .1);
}
@media (max-width: 720px) {
  .ck-curso__caixa { grid-template-columns: 1fr; gap: 22px; }
  .ck-curso__lado { max-width: 300px; margin: 0 auto; width: 100%; }
  .ck-curso__garantia { margin-top: 0; text-align: left; }
  .ck-curso__prints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- compartilhar: o teste e o antes e depois ------------------------------ */
/* os cartões de compartilhar: um em cima do outro, cada um na horizontal
   (texto à esquerda, botões à direita) */
.ck-compartilhas { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
.ck-compartilhas[hidden] { display: none !important; }
.ck-compartilhas--voz { margin: 26px 0 8px; }
.ck-comp { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-rows: auto; column-gap: 24px; row-gap: 6px; align-items: center; padding: 18px clamp(18px, 3vw, 24px); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.ck-comp--ouve { background: #f3f3ff; border-color: rgba(75, 75, 255, .25); }
.ck-comp__chapeu { grid-column: 1; margin: 0; font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-2); }
.ck-comp__titulo { grid-column: 1; margin: 0; font-size: var(--t-base); font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.ck-comp__texto { grid-column: 1; margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); max-width: 44rem; }
.ck-comp__link { grid-column: 1; justify-self: start; margin-top: 4px; padding: 8px 12px; border-radius: var(--r-md); background: var(--white); border: 1px dashed rgba(75, 75, 255, .4); font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .8rem; word-break: break-all; }
.ck-comp__link a { color: var(--royal); font-weight: 600; }
.ck-comp__acoes { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 200px; }
.ck-comp__acoes .btn { white-space: nowrap; }
.ck-comp__aviso { grid-column: 1; margin: 2px 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--grey-2); max-width: 44rem; }
.ck-comp__pe { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed rgba(75, 75, 255, .25); }
.ck-comp__parar { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); font: inherit; font-size: var(--t-xs); font-weight: 700; color: var(--ink-soft); cursor: pointer; transition: border-color .15s, color .15s; }
.ck-comp__parar:hover { border-color: var(--orange); color: var(--orange); }
.ck-comp__parar:disabled { opacity: .6; cursor: wait; }
.ck-comp__pe-nota { font-size: var(--t-xs); color: var(--grey-2); }
.ck-comp__retorno { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font-size: var(--t-xs); font-weight: 700; color: var(--teal); }
.ck-comp__retorno.is-erro { color: var(--orange); }
.ck-comp__retorno:empty { display: none; }
@media (max-width: 640px) {
  .ck-comp { grid-template-columns: 1fr; }
  .ck-comp__acoes { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; min-width: 0; margin-top: 6px; }
  .ck-comp__pe { grid-column: 1; }
}

/* ---- a página /ouve: o antes e depois de alguém --------------------------- */
.ou-frases { display: grid; gap: 10px; margin: 22px 0 14px; }
.ou-frase { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.ou-frase__n { margin: 0; font-family: var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace); font-size: .8rem; font-weight: 600; color: var(--grey-2); padding-top: 4px; }
.ou-frase__corpo { flex: 1; min-width: 0; }
.ou-frase__texto { margin: 0 0 10px; font-size: var(--t-base); font-weight: 600; color: var(--navy); line-height: 1.45; }
.ou-frase__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ou-cta { margin-top: 32px; padding: clamp(22px, 4vw, 34px); border-radius: var(--r-lg); background: var(--navy); color: #fff; text-align: center; }
.ou-cta .ck-chapeu { justify-content: center; color: rgba(255, 255, 255, .6); }
.ck-passo .ou-cta h2 { color: #fff; margin: 6px 0 10px; font-size: var(--t-xl); }
.ou-cta p { margin: 0 auto 18px; max-width: 540px; font-size: var(--t-base); line-height: 1.6; color: rgba(255, 255, 255, .85); }