/* ==========================================================================
   RDX · "Comece hoje" (comecar.html)

   Toda classe daqui começa com cm-. As variáveis de cor, a marca e o botão
   base vêm de /src/estilo.css, que entra antes e não é alterado.

   Régua: --u = largura da tela / 108, com teto pela altura (a mesma das seções).

   Estados que o JS liga:
     html.cm-js              há JavaScript (posto por uma linha no <head>)
     .cm-revela.cm-visto     o elemento já entrou em cena
     .cm-passo-aceso         o fio do passo acende
     .cm-video[data-cm-estado]   parado · tocando · pausado · falta
   ========================================================================== */

:root {
  --cm-fundo: var(--fundo, #050706);
  --cm-fundo-2: #0a0e0c;
  --cm-fundo-3: #0d1210;
  --cm-verde: var(--verde, #4ade80);
  --cm-lima: var(--lima, #c8f52a);
  --cm-branco: var(--branco, #ffffff);
  --cm-t2: var(--t2, #8a938e);
  --cm-t3: #5d6661;
  --cm-claro: #c4ccc7;
  --cm-borda: var(--borda, rgba(255, 255, 255, .12));
  --cm-borda-forte: rgba(255, 255, 255, .24);

  --cm-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cm-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --cm-suave: cubic-bezier(.19, 1, .22, 1);

  --u: min(calc(100vw / 108), calc(100vh / 62));
  --cm-beira: 18px;
  --cm-largura: calc(var(--u) * 86);
  --cm-raio: 18px;
}
@media (max-width: 991.98px) { :root { --u: calc(100vw / 64); --cm-largura: 100%; } }
@media (max-width: 767.98px) { :root { --u: calc(100vw / 36); } }

/* ─── página ─────────────────────────────────── */
html {
  height: auto;
  min-height: 100%;
  background: var(--cm-fundo);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.cm-corpo {
  min-height: 100svh;
  overflow-x: clip;
  font-family: var(--cm-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--cm-branco);
  background: var(--cm-fundo);
}
.cm-corpo [hidden] { display: none !important; }
.cm-corpo ::selection { background: var(--cm-lima); color: var(--cm-fundo); }
.cm-corpo :where(ul, ol) { list-style: none; }
.cm-corpo :where(svg) { display: block; }
.cm-corpo :where(a, button, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--cm-lima);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ─── fundo (as mesmas curvas de nível do hero, em canvas 2D) ─── */
.cm-fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s var(--cm-suave);
}
.cm-fundo.ct-fundo-pronto { opacity: 1; }
.cm-veu {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 46% at 84% 0%, rgba(74, 222, 128, .13) 0%, transparent 70%),
    radial-gradient(120% 96% at 50% 42%, transparent 34%, rgba(5, 7, 6, .62) 72%, rgba(5, 7, 6, .94) 100%);
}

/* ─── topo ───────────────────────────────────── */
.cm-topo {
  position: absolute;
  align-items: center;
  padding: var(--cm-beira) var(--cm-beira) 0;
}

/* ─── composição ─────────────────────────────── */
.cm-pagina {
  position: relative;
  z-index: 1;
  width: min(var(--cm-largura), 100% - var(--cm-beira) * 2);
  margin: 0 auto;
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 4);
}

/* ─── papéis de texto ────────────────────────── */
.cm-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0;
  font-family: var(--cm-mono);
  font-size: max(10px, calc(var(--u) * .66));
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cm-verde);
}
.cm-etiqueta::before { content: ''; flex: none; width: .7em; height: .7em; background: currentColor; }

.cm-frase,
.cm-titulo {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.cm-frase  { font-size: clamp(38px, calc(var(--u) * 6.4), 110px); line-height: .9; letter-spacing: -.035em; }
.cm-titulo { font-size: clamp(26px, calc(var(--u) * 3.2), 56px);  line-height: .92; letter-spacing: -.03em; }
.cm-frase em, .cm-titulo em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.045em;
  color: var(--cm-lima);
}
.cm-apoio {
  margin: 0;
  max-width: 34em;
  font-size: max(15px, calc(var(--u) * 1.2));
  line-height: 1.35;
  color: var(--cm-t2);
  text-wrap: pretty;
}
.cm-apoio-grande { font-size: max(17px, calc(var(--u) * 1.5)); color: var(--cm-claro); }

/* ─── cabeça ─────────────────────────────────── */
.cm-cabeca {
  display: grid;
  gap: calc(var(--u) * 1.6);
  justify-items: start;
  padding-bottom: calc(var(--u) * 7);
}
.cm-link {
  color: var(--cm-lima);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .25s;
}
@media (hover: hover) { .cm-link:hover { color: #dbff4d; } }

/* ─── passos ─────────────────────────────────── */
.cm-passos { margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 7); }
.cm-passo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--u) * 1.2);
  scroll-margin-top: calc(var(--u) * 8);
}
.cm-passo-lado { display: none; }
.cm-passo-corpo { display: grid; gap: calc(var(--u) * 1.2); justify-items: start; min-width: 0; }
.cm-passo-corpo > .cm-titulo { margin-top: calc(var(--u) * .2); }

@media (min-width: 992px) {
  .cm-passo { grid-template-columns: calc(var(--u) * 14) minmax(0, 1fr); gap: calc(var(--u) * 2); }
  .cm-passo-lado {
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: start;
    gap: calc(var(--u) * 1.4);
  }
  .cm-passo-numero {
    font-size: calc(var(--u) * 8);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .22);
    transition: color .9s var(--cm-suave), -webkit-text-stroke-color .9s;
  }
  .cm-passo-aceso .cm-passo-numero { -webkit-text-stroke-color: rgba(200, 245, 42, .55); }
  .cm-passo-fio {
    position: relative;
    display: block;
    width: 1px;
    margin-left: calc(var(--u) * .3);
    background: var(--cm-borda);
    overflow: hidden;
  }
  .cm-passo-fio i {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--cm-lima), rgba(200, 245, 42, 0));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.6s var(--cm-suave) .2s;
  }
  .cm-passo-aceso .cm-passo-fio i { transform: scaleY(1); }
  .cm-passo:last-child .cm-passo-fio { display: none; }
}

/* ─── vídeo ──────────────────────────────────── */
.cm-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: calc(var(--u) * .8);
  border: 1px solid var(--cm-borda);
  border-radius: var(--cm-raio);
  overflow: hidden;
  background: var(--cm-fundo-2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}
.cm-video::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(74, 222, 128, .10) 0%, transparent 70%);
  transition: opacity .6s;
}
.cm-video[data-cm-estado="tocando"]::before { opacity: 0; }
.cm-video-midia {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--cm-fundo-2);
}
.cm-video-play {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  width: clamp(72px, calc(var(--u) * 7.5), 120px);
  height: clamp(72px, calc(var(--u) * 7.5), 120px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cm-lima);
  color: #000;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgba(200, 245, 42, .5), 0 20px 60px rgba(200, 245, 42, .3);
  transition: transform .5s var(--cm-suave), background .3s, opacity .4s;
  animation: cm-pulso 2.4s ease-out infinite;
}
.cm-video-play svg { width: 42%; height: 42%; margin: 0 auto; fill: currentColor; transform: translateX(6%); }
@media (hover: hover) { .cm-video-play:hover { transform: translate(-50%, -50%) scale(1.08); background: #dbff4d; } }
.cm-video[data-cm-estado="tocando"] .cm-video-play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); animation: none; }
.cm-video-falta {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--cm-mono);
  font-size: max(11px, calc(var(--u) * .8));
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cm-t2);
}
@keyframes cm-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(200, 245, 42, .5), 0 20px 60px rgba(200, 245, 42, .3); }
  70%  { box-shadow: 0 0 0 22px rgba(200, 245, 42, 0), 0 20px 60px rgba(200, 245, 42, .3); }
  100% { box-shadow: 0 0 0 22px rgba(200, 245, 42, 0), 0 20px 60px rgba(200, 245, 42, .3); }
}

/* ─── lista dos cliques (passo 3) ────────────── */
.cm-lista {
  display: grid;
  gap: calc(var(--u) * .7);
  width: 100%;
  margin: calc(var(--u) * .8) 0 0;
  padding: 0;
}
.cm-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5);
  border: 1px solid var(--cm-borda);
  border-radius: 14px;
  background: rgba(13, 18, 16, .78);
  backdrop-filter: blur(8px);
  transition: border-color .4s;
}
@media (hover: hover) { .cm-item:hover { border-color: var(--cm-borda-forte); } }
.cm-item-n {
  display: grid;
  place-items: center;
  width: 2.6em; height: 2.6em;
  border: 1px solid var(--cm-borda-forte);
  border-radius: 50%;
  font-family: var(--cm-mono);
  font-size: max(12px, calc(var(--u) * .85));
  font-weight: 600;
  color: var(--cm-claro);
}
.cm-item-texto { display: grid; gap: .25em; min-width: 0; }
.cm-item-texto b { font-size: max(16px, calc(var(--u) * 1.3)); font-weight: 600; line-height: 1.2; }
.cm-item-texto span { font-size: max(13px, calc(var(--u) * .95)); color: var(--cm-t2); }
.cm-item-texto em { font-style: normal; font-weight: 600; color: var(--cm-verde); }
.cm-item-botao {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  min-height: 44px;
  padding: 0 1.3em;
  border: 1px solid rgba(74, 222, 128, .55);
  border-radius: 8px;
  background: transparent;
  font-family: var(--cm-mono);
  font-size: max(11px, calc(var(--u) * .8));
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--cm-verde);
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.cm-item-botao svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--cm-suave); }
@media (hover: hover) {
  .cm-item-botao:hover { background: var(--cm-verde); color: #000; border-color: var(--cm-verde); }
  .cm-item-botao:hover svg { transform: translateX(.25em); }
}
.cm-nota {
  display: flex;
  gap: .8em;
  margin: 0;
  font-size: max(13px, calc(var(--u) * .95));
  line-height: 1.45;
  color: var(--cm-t2);
}
.cm-nota svg { flex: none; width: 1.3em; height: 1.3em; margin-top: .1em; fill: none; stroke: var(--cm-verde); stroke-width: 1.6; stroke-linecap: round; }

/* ─── botões ─────────────────────────────────── */
.cm-botao,
.cm-botao-grande {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9em;
  border-radius: 6px;
  overflow: hidden;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #000;
  background: var(--cm-lima);
  cursor: pointer;
}
.cm-botao { min-height: max(52px, calc(var(--u) * 4)); padding: 0 calc(var(--u) * 2); margin-top: calc(var(--u) * .6); font-size: max(13px, calc(var(--u) * 1)); }
.cm-botao-grande {
  min-height: max(64px, calc(var(--u) * 5.4));
  padding: 0 calc(var(--u) * 3.2);
  font-size: max(16px, calc(var(--u) * 1.5));
  box-shadow: 0 0 0 0 rgba(200, 245, 42, .55), 0 22px 70px rgba(200, 245, 42, .3);
  animation: cm-pulso 2.4s ease-out infinite;
}
.cm-botao::before,
.cm-botao-grande::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -10%; right: -10%;
  top: 0; bottom: 0;
  border-radius: 50% 50% 0 0 / 60% 60% 0 0;
  background: #fff;
  transform: translateY(104%);
  transition: transform .7s var(--cm-suave), border-radius .7s var(--cm-suave);
}
.cm-botao span, .cm-botao-grande span { position: relative; }
.cm-botao svg, .cm-botao-grande svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--cm-suave); }
@media (hover: hover) {
  .cm-botao:hover::before, .cm-botao-grande:hover::before { transform: translateY(0); border-radius: 0; transition-duration: .42s; }
  .cm-botao:hover svg, .cm-botao-grande:hover svg { transform: translateX(.3em); }
}

.cm-botao-linha {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  min-height: max(48px, calc(var(--u) * 3.6));
  padding: 0 calc(var(--u) * 1.6);
  border: 1px solid rgba(74, 222, 128, .55);
  border-radius: 8px;
  font-family: var(--cm-mono);
  font-size: max(12px, calc(var(--u) * .85));
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cm-verde);
  transition: background .3s, color .3s;
}
.cm-botao-linha svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .cm-botao-linha:hover { background: var(--cm-verde); color: #000; } }

/* ─── formulários (passos 2 e 3) ─────────────── */
.cm-form {
  display: grid;
  gap: calc(var(--u) * 1.4);
  width: 100%;
  padding: calc(var(--u) * 1.6);
  border: 1px solid var(--cm-borda);
  border-radius: 14px;
  background: rgba(13, 18, 16, .78);
  backdrop-filter: blur(8px);
}
.cm-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: calc(var(--u) * 1.1); }
.cm-campo { display: grid; gap: 8px; min-width: 0; }
.cm-campo-largo { grid-column: 1 / -1; }
.cm-rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  font-family: var(--cm-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cm-t2);
  transition: color .3s;
}
.cm-campo.cm-cheio .cm-rotulo { color: var(--cm-claro); }
.cm-campo:focus-within .cm-rotulo { color: var(--cm-verde); }
.cm-rotulo-nota { font-size: 10px; letter-spacing: .08em; text-transform: none; color: var(--cm-t3); }
.cm-caixa {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px;
  background: rgba(5, 7, 6, .55);
  box-shadow: inset 0 0 0 1px var(--cm-borda);
  transition: box-shadow .3s;
}
.cm-caixa:focus-within { box-shadow: inset 0 0 0 1.5px var(--cm-verde), 0 0 0 4px rgba(74, 222, 128, .14); }
.cm-com-erro .cm-caixa { box-shadow: inset 0 0 0 1.5px #ff6b5c; }
.cm-com-erro .cm-rotulo { color: #ff9d92; }
.cm-entrada {
  display: block;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: inherit;
  outline: 0;
  background: transparent;
  color: var(--cm-branco);
  font-family: var(--cm-sans);
  font-size: 16px;
  font-weight: 500;
  caret-color: var(--cm-verde);
}
.cm-entrada::placeholder { color: var(--cm-t3); }
.cm-mono { font-family: var(--cm-mono); letter-spacing: .02em; }
.cm-olho {
  position: absolute;
  right: 6px; top: 50%;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-top: -21px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cm-t2);
  cursor: pointer;
}
.cm-olho svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.cm-olho[aria-pressed="true"] { color: var(--cm-verde); }
.cm-olho[aria-pressed="true"] .cm-olho-risco { display: none; }
.cm-entrada:has(+ .cm-olho) { padding-right: 54px; }
.cm-erro { margin: 0; font-size: 13px; color: #ff9d92; }
.cm-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 1.2); }
.cm-form .cm-botao { margin-top: 0; }
.cm-salvo { margin: 0; font-family: var(--cm-mono); font-size: 12px; letter-spacing: .06em; color: var(--cm-t2); }
.cm-salvo-ok { color: var(--cm-verde); }
.cm-salvo-erro { color: #ff9d92; }

/* o formulário da conta MT5 mora dentro do item 3 do passo 2 */
.cm-item-mt5 { scroll-margin-top: calc(var(--u) * 8); }
.cm-form-interna {
  grid-column: 1 / -1;
  margin-top: calc(var(--u) * .5);
  padding: calc(var(--u) * 1.2) 0 calc(var(--u) * .3);
  border: 0;
  border-top: 1px solid var(--cm-borda);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}
.cm-form-dica { margin: 0; max-width: 52em; font-size: max(13px, calc(var(--u) * .98)); line-height: 1.45; color: var(--cm-t2); }
.cm-form-dica b { color: var(--cm-branco); font-weight: 600; }

/* escolha (país) */
.cm-caixa-escolha::before {
  content: '';
  position: absolute;
  right: 18px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -7px;
  border-right: 1.8px solid var(--cm-t2);
  border-bottom: 1.8px solid var(--cm-t2);
  pointer-events: none;
  transform: rotate(45deg);
}
.cm-caixa-escolha:focus-within::before { border-color: var(--cm-verde); }
select.cm-entrada { padding-right: 44px; cursor: pointer; -webkit-appearance: none; appearance: none; }
select.cm-entrada option { background: #0d1410; color: var(--cm-branco); }

/* aviso de erro geral (classes ct-aviso de conta.css) dentro do formulário cm- */
.cm-aviso { margin: 0; }

/* ─── trilha (cabeça): as quatro paradas ─────── */
.cm-trilha {
  display: grid;
  gap: calc(var(--u) * .8);
  width: 100%;
  margin-top: calc(var(--u) * 1.2);
}
.cm-paradas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * .6);
  margin: 0;
  padding: 0;
}
.cm-parada-liga {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'n nome' 'n estado';
  align-items: center;
  column-gap: .8em;
  row-gap: .15em;
  padding: calc(var(--u) * .9) calc(var(--u) * 1.1);
  border: 1px solid var(--cm-borda);
  border-radius: 12px;
  background: rgba(13, 18, 16, .78);
  text-decoration: none;
  color: var(--cm-claro);
  transition: border-color .4s, background .4s;
}
@media (hover: hover) { .cm-parada-liga:hover { border-color: var(--cm-borda-forte); } }
.cm-parada-n {
  grid-area: n;
  display: grid;
  place-items: center;
  width: 2.4em; height: 2.4em;
  border: 1px solid var(--cm-borda-forte);
  border-radius: 50%;
  font-family: var(--cm-mono);
  font-size: max(11px, calc(var(--u) * .8));
  font-weight: 600;
  color: var(--cm-claro);
}
.cm-parada-n svg { display: none; width: 60%; height: 60%; fill: none; stroke: #000; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cm-parada-nome { grid-area: nome; font-size: max(14px, calc(var(--u) * 1.05)); font-weight: 600; line-height: 1.2; color: var(--cm-branco); }
.cm-parada-estado { grid-area: estado; font-family: var(--cm-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cm-t3); }
.cm-parada[data-cm-estado="atual"] .cm-parada-liga { border-color: rgba(200, 245, 42, .6); background: rgba(200, 245, 42, .06); }
.cm-parada[data-cm-estado="atual"] .cm-parada-n { border-color: var(--cm-lima); color: var(--cm-lima); }
.cm-parada[data-cm-estado="atual"] .cm-parada-estado { color: var(--cm-lima); }
.cm-parada[data-cm-estado="feito"] .cm-parada-n { background: var(--cm-verde); border-color: var(--cm-verde); color: #000; font-size: 0; }
.cm-parada[data-cm-estado="feito"] .cm-parada-n svg { display: block; }
.cm-parada[data-cm-estado="feito"] .cm-parada-estado { color: var(--cm-verde); }
.cm-trilha-pular {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--cm-mono);
  font-size: max(11px, calc(var(--u) * .8));
  letter-spacing: .08em;
  color: var(--cm-t2);
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color .25s;
}
.cm-trilha-pular svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .cm-trilha-pular:hover { color: var(--cm-branco); } }

/* ─── etiqueta com marcador "No painel" ─────── */
.cm-tag {
  display: inline-block;
  padding: .35em .6em;
  border: 1px solid rgba(34, 227, 214, .45);
  border-radius: 999px;
  font-size: .85em;
  letter-spacing: .12em;
  color: #22e3d6;
}
.cm-ola { margin: 0; font-size: max(17px, calc(var(--u) * 1.5)); color: var(--cm-claro); }
.cm-ola b { color: var(--cm-lima); font-weight: 600; }

/* ─── passo recolhido (conta criada) ─────────── */
.cm-feito {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: calc(var(--u) * 1.2);
  width: 100%;
  margin-top: calc(var(--u) * .8);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5);
  border: 1px solid rgba(74, 222, 128, .45);
  border-radius: 14px;
  background: rgba(74, 222, 128, .06);
}
.cm-feito-sinal { width: 2.4em; height: 2.4em; }
.cm-feito-sinal svg { width: 100%; height: 100%; fill: none; stroke: var(--cm-verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(74, 222, 128, .5)); }
.cm-feito-texto { display: grid; gap: .3em; min-width: 0; }
.cm-feito-texto b { font-size: max(16px, calc(var(--u) * 1.3)); font-weight: 600; color: var(--cm-branco); }
.cm-feito-texto > span { font-family: var(--cm-mono); font-size: 12px; letter-spacing: .06em; color: var(--cm-verde); }
.cm-feito-texto .cm-feito-nota { font-family: var(--cm-sans); font-size: 13px; letter-spacing: 0; color: var(--cm-t2); }
.cm-feito-refazer { font-family: var(--cm-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer; }

/* ─── passo travado (abre depois do anterior) ── */
.cm-trava {
  display: flex;
  gap: .8em;
  margin: 0;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.3);
  border: 1px dashed rgba(200, 245, 42, .45);
  border-radius: 12px;
  background: rgba(200, 245, 42, .05);
  font-size: max(13px, calc(var(--u) * .95));
  line-height: 1.45;
  color: var(--cm-claro);
}
.cm-trava svg { flex: none; width: 1.3em; height: 1.3em; margin-top: .1em; fill: none; stroke: var(--cm-lima); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cm-passo-miolo { display: grid; gap: calc(var(--u) * 1.2); justify-items: start; width: 100%; min-width: 0; }
.cm-passo[data-cm-travado="1"] .cm-passo-miolo { opacity: .38; filter: saturate(.4); pointer-events: none; user-select: none; }
.cm-passo:not([data-cm-travado="1"]) .cm-trava { display: none; }
.cm-acoes-passo { width: 100%; }

/* ─── pronto: cartão de estado e WhatsApp ────── */
.cm-estado {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--u) * 1.2);
  width: 100%;
  margin-top: calc(var(--u) * .4);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5);
  border: 1px solid rgba(74, 222, 128, .45);
  border-radius: 14px;
  background: rgba(74, 222, 128, .06);
}
.cm-estado-luz { width: 12px; height: 12px; margin-top: .4em; border-radius: 50%; background: var(--cm-verde); box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: cm-ping 1.8s ease-out infinite; }
@keyframes cm-ping { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } }
.cm-estado-texto { display: grid; gap: .35em; min-width: 0; }
.cm-estado-texto b { font-size: max(16px, calc(var(--u) * 1.3)); font-weight: 600; color: var(--cm-branco); }
.cm-estado-linha { display: flex; flex-wrap: wrap; gap: .4em 1em; font-size: max(13px, calc(var(--u) * .98)); color: var(--cm-claro); }
.cm-estado-linha .cm-mono { overflow-wrap: anywhere; }
.cm-estado-nota { font-size: 13px; color: var(--cm-t2); }
.cm-whatsapp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  width: 100%;
  margin-top: calc(var(--u) * .8);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5);
  border: 1px solid var(--cm-borda);
  border-radius: 14px;
  background: rgba(13, 18, 16, .78);
}
.cm-whatsapp-icone { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 12px; background: #25d366; color: #06281a; }
.cm-whatsapp-icone svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cm-whatsapp-texto { display: grid; gap: .25em; min-width: 0; }
.cm-whatsapp-texto b { font-size: max(16px, calc(var(--u) * 1.3)); font-weight: 600; }
.cm-whatsapp-texto span { font-family: var(--cm-mono); font-size: 12px; letter-spacing: .06em; color: var(--cm-t2); }

/* ─── janela dos termos nesta página ─────────── */
/* conta.css compensa a barra de rolagem só em body.ct-corpo; aqui o corpo é cm- */
html.ct-travado body.cm-corpo { padding-right: var(--ct-barra, 0px); }
.ct-janela-inteira { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cm-t2); }
.cm-aceites { width: 100%; }
.cm-aceites .ct-marcar-texto { font-size: max(13.5px, calc(var(--u) * 1)); }

/* ─── rodapé ─────────────────────────────────── */
.cm-rodape {
  display: grid;
  gap: calc(var(--u) * 1);
  margin-top: calc(var(--u) * 4);
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--cm-borda);
}
.cm-risco { margin: 0; font-size: max(11px, calc(var(--u) * .8)); line-height: 1.5; color: var(--cm-t3); text-wrap: pretty; }
.cm-direitos { margin: 0; font-family: var(--cm-mono); font-size: max(10px, calc(var(--u) * .66)); letter-spacing: .1em; text-transform: uppercase; color: var(--cm-t3); }

/* ─── revelação ──────────────────────────────── */
html.cm-js .cm-revela {
  animation: cm-entrar .9s var(--cm-suave) var(--cm-atraso, 0s) both;
}
@keyframes cm-entrar {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
html.cm-js .cm-revela.cm-visto { animation: none; opacity: 1; transform: none; }
.cm-campo:has(.cm-erro:not([hidden])) .cm-caixa { box-shadow: inset 0 0 0 1px #ff9d92; }
@media (prefers-reduced-motion: reduce) {
  html.cm-js .cm-revela { opacity: 1; transform: none; transition: none; }
  .cm-video-play, .cm-botao-grande { animation: none; }
}

/* ─── celular ────────────────────────────────── */
@media (max-width: 767.98px) {
  .cm-pagina { padding-top: calc(var(--u) * 9); }
  .cm-frase { font-size: clamp(32px, 11.5vw, 48px); line-height: .97; }
  .cm-titulo { font-size: clamp(24px, 8vw, 34px); }
  .cm-item { grid-template-columns: auto minmax(0, 1fr); row-gap: calc(var(--u) * .8); }
  .cm-item-botao { grid-column: 2; justify-self: start; }
  .cm-form-interna { grid-column: 1 / -1; }
  .cm-botao-grande { white-space: normal; text-align: center; padding: 1em 1.4em; }
  .cm-paradas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-feito { grid-template-columns: auto minmax(0, 1fr); }
  .cm-feito-refazer { grid-column: 2; justify-self: start; }
  .cm-whatsapp { grid-template-columns: auto minmax(0, 1fr); }
  .cm-whatsapp .cm-botao-linha { grid-column: 1 / -1; justify-self: start; }
  .cm-acoes-passo .cm-salvo { flex-basis: 100%; }
}