/* ============================================================
   WCare Landing — criar conta (/criarconta)
   Tela de CONCLUSÃO DE VENDA (reescrita 01/09/2026): aurora de
   fundo, formulário enxuto e resumo do pedido sticky com total
   ao vivo. Complementa o style.css (tokens, .glass, .btn, .inp).

   LEGIBILIDADE (01/09/2026): texto de conteúdo não desce de 13px nem usa
   var(--dim) — esse token mede 2,5:1 de contraste sobre o fundo claro, abaixo
   do mínimo de 4,5:1. O que o cliente precisa ler fica em --muted ou --ink.
   ============================================================ */

/* ---------- Fundo vivo ---------- */
.cc-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.cc-blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .45; will-change: transform;
}
.cc-blob-a {
  width: 560px; height: 560px; top: -160px; left: -140px;
  background: radial-gradient(circle at 30% 30%, #4aa8ff 0%, transparent 70%);
  animation: cc-deriva-a 28s ease-in-out infinite alternate;
}
.cc-blob-b {
  width: 620px; height: 620px; top: 34%; right: -240px;
  background: radial-gradient(circle at 60% 40%, #38bdf8 0%, transparent 68%);
  opacity: .3;
  animation: cc-deriva-b 34s ease-in-out infinite alternate;
}
@keyframes cc-deriva-a { to { transform: translate(80px, 60px) scale(1.1); } }
@keyframes cc-deriva-b { to { transform: translate(-60px, -80px) scale(1.06); } }
.cc-luz {
  position: absolute; width: 640px; height: 640px;
  left: -320px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 138, 246, .1) 0%, transparent 62%);
  will-change: transform;
}
.cc-hero, .sec.cc-sec { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .cc-blob { animation: none; }
  .cc-luz { display: none; }
}

/* ---------- Hero ---------- */
.cc-hero { padding: 156px 0 8px; text-align: center; }
.cc-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  letter-spacing: -.028em; line-height: 1.07;
  max-width: 780px; margin: 14px auto 0;
  text-wrap: balance;
}
.cc-hero .sub { max-width: 600px; margin: 16px auto 0; color: var(--muted); font-size: 1.05rem; }

/* Caminho do teste grátis (só com consultor, 11/09/2026). Texto em --ink com
   sublinhado azul: o --blue puro mede 3,5:1 no fundo claro, abaixo do AA. */
.cc-link-teste {
  color: var(--ink); font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--blue);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.cc-link-teste:hover { color: var(--blue); }

.sec.cc-sec { padding: 40px 0 180px; }

.cc-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 22px; align-items: start;
}

/* ---------- Formulário: um vidro por passo ----------
   O <form> é só a pilha; o vidro fica em cada .cc-etapa (11/09/2026). Num
   vidro único os 4 passos viravam uma parede de campos. */
.cc-form { display: grid; gap: 22px; min-width: 0; }
.cc-etapa { padding: 30px 32px; border-radius: var(--radius); min-width: 0; }
.cc-form h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; letter-spacing: -.01em;
}
.cc-form h2 span {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--grad); color: #fff;
  font-size: 14px; font-weight: 800;
}
.cc-opcional {
  font-style: normal; font-size: 11.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); background: rgba(13, 21, 38, .06);
  padding: 4px 10px; border-radius: 100px;
}
.cc-fields { display: grid; gap: 14px; margin-top: 16px; }
.cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cc-field { display: block; min-width: 0; }
.cc-label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px;
}
.cc-form .inp { background: rgba(13, 21, 38, .035); border-color: rgba(13, 21, 38, .1); transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.cc-form .inp:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28, 138, 246, .12); }
.cc-form .inp.cc-erro { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); }

.cc-pay-note { font-size: 14.5px; color: var(--ink); margin-top: 12px; line-height: 1.6; }

/* CNPJ/CPF */
.cc-toggle {
  display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px;
  background: rgba(13, 21, 38, .05);
}
.cc-toggle button {
  border: 0; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 700; color: var(--muted);
  padding: 9px 18px; border-radius: 9px; background: transparent;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.cc-toggle button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(13, 21, 38, .12); }

/* ---------- Especialidade (passo 2) ----------
   Selos: só contorno quando desmarcado, azul cheio com ✓ quando marcado. O
   input fica por cima do selo, invisível: clique, teclado e leitor de tela
   continuam nativos. É informação (quem libera tela é o módulo). */
/* Dica e erro na mesma célula do grid: a altura é a da maior das duas e o
   erro só troca de visibilidade com a dica. Nada pula. */
.cc-espec-linha { display: grid; margin: -2px 0 10px; }
.cc-espec-linha > * { grid-area: 1 / 1; font-size: 13px; line-height: 1.5; }
.cc-espec-dica { color: var(--muted); }
.cc-espec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-espec-chip { position: relative; display: inline-flex; cursor: pointer; }
.cc-espec-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cc-espec-chip span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 100px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(13, 21, 38, .14);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), box-shadow .2s var(--ease);
}
.cc-espec-chip:hover span { border-color: rgba(28, 138, 246, .5); }
.cc-espec-chip input:checked + span {
  background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px -10px rgba(28, 138, 246, .7);
}
.cc-espec-chip input:checked + span::before { content: '✓'; font-size: 12px; font-weight: 800; }
.cc-espec-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.cc-espec-outra { margin-top: 10px; }
.cc-espec-outra[hidden], .cc-espec-aviso[hidden] { display: none; }
.cc-espec-aviso {
  display: block; margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
  background: rgba(28, 138, 246, .08); border: 1px solid rgba(28, 138, 246, .2);
}
/* Erro sem layout shift: já ocupa o lugar da dica, só troca a visibilidade. */
.cc-espec-erro { font-weight: 700; color: #dc2626; visibility: hidden; }
.cc-espec.cc-erro .cc-espec-erro { visibility: visible; }
.cc-espec.cc-erro .cc-espec-dica { visibility: hidden; }
.cc-espec.cc-erro .cc-espec-chip span { border-color: rgba(220, 38, 38, .55); }

/* ---------- Adicionais (o balcão de extras) ---------- */
.cc-adicionais { display: grid; gap: 10px; margin-top: 10px; }
.cc-adicional {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; font-family: inherit;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(13, 21, 38, .09);
  background: rgba(255, 255, 255, .55);
  transition: border-color .22s var(--ease), background .22s var(--ease),
              box-shadow .22s var(--ease), transform .22s var(--ease);
}
.cc-adicional:hover { border-color: rgba(28, 138, 246, .45); transform: translateY(-1px); }
button.cc-adicional { cursor: pointer; }
.cc-adicional.is-on {
  border-color: var(--blue);
  background: rgba(28, 138, 246, .06);
  box-shadow: 0 10px 26px -16px rgba(28, 138, 246, .45);
}
.cc-adicional-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cc-adicional-txt b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.cc-adicional-txt > span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
/* Módulo da especialidade: escondido até a especialidade ser marcada (o
   display:flex da classe venceria o [hidden] do navegador). */
.cc-adicional[hidden] { display: none; }
.cc-adicional-espec {
  border-color: rgba(28, 138, 246, .35);
  background: linear-gradient(160deg, rgba(74, 168, 255, .1) 0%, rgba(255, 255, 255, .6) 70%);
}
.cc-adicional-txt > .cc-adicional-selo {
  justify-self: start; margin-bottom: 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--grad);
  padding: 3px 9px; border-radius: 100px;
}
.cc-adicional-preco {
  font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap;
}
.cc-adicional-preco i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* Check do recurso (liga/desliga): círculo vazio -> cheio, com pop. */
.cc-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(13, 21, 38, .18);
  color: transparent; font-size: 12px; font-weight: 800;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.cc-adicional.is-on .cc-check {
  background: var(--blue); border-color: var(--blue); color: #fff;
  transform: scale(1.08);
}

/* Stepper das ampliações */
.cc-stepper {
  display: flex; align-items: center; gap: 2px; flex: none;
  border: 1px solid rgba(13, 21, 38, .12); border-radius: 999px; padding: 2px;
  background: #fff;
}
.cc-stepper button {
  width: 30px; height: 30px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
  font-size: 17px; font-weight: 700; line-height: 1; color: var(--ink);
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.cc-stepper button:hover { background: rgba(13, 21, 38, .06); }
.cc-stepper button:active { transform: scale(.88); }
.cc-stepper button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cc-stepper output {
  min-width: 26px; text-align: center;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- Certificado digital A3 (16/09/2026) ----------
   Bloco sem número entre o passo 2 e o 3, como o das integrações: opcional da
   contratação, não etapa. Azul da marca (as integrações são roxas). Cobrado
   uma vez, na primeira cobrança e sem o desconto do anual, por isso NÃO é
   .cc-adicional: o criarconta.js trata à parte.
   Duas classes onde disputa com o .glass (este CSS carrega antes do style.css). */
.cc-etapa.cc-cert {
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(28, 138, 246, .12) 0%, rgba(28, 138, 246, 0) 62%),
    var(--glass);
}
/* Azul 700 no selo: o --blue-deep não passa no AA sobre o fundo azulado. */
.cc-cert-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #1d4ed8; background: rgba(28, 138, 246, .1);
  padding: 5px 11px 5px 9px; border-radius: 100px;
}
.cc-cert-tag .ic { width: 13px; height: 13px; background: currentColor; }
.cc-form .cc-cert h2 {
  display: block; margin-top: 14px;
  font-size: clamp(20px, 2.2vw, 24px); font-weight: 800;
  line-height: 1.2; letter-spacing: -.022em; text-wrap: balance;
}
.cc-cert-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 62ch; }

/* A opção: o cartão inteiro é o checkbox, invisível por cima (mesmo recurso dos
   selos de especialidade). Clique, teclado e leitor de tela seguem nativos. */
/* Duas opções desde 22/09/2026 (A3 em nuvem e A1 em arquivo), uma ou nenhuma. */
.cc-cert-opcoes { display: grid; gap: 10px; margin-top: 16px; }
.cc-cert-opcao {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(13, 21, 38, .1);
  background: rgba(255, 255, 255, .7);
  transition: border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
.cc-cert-opcao:hover { border-color: rgba(28, 138, 246, .45); }
.cc-cert-opcao input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.cc-cert-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(13, 21, 38, .18);
  color: transparent; font-size: 12px; font-weight: 800;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.cc-cert-opcao input:checked ~ .cc-cert-check {
  background: var(--blue); border-color: var(--blue); color: #fff;
  transform: scale(1.08);
}
.cc-cert-opcao input:focus-visible ~ .cc-cert-check { outline: 2px solid var(--blue); outline-offset: 3px; }
/* .is-on vem do criarconta.js (e do Blade, com ?certificado=a3 ou a1), só na
   opção escolhida. */
.cc-cert-opcao.is-on {
  border-color: var(--blue);
  background: rgba(28, 138, 246, .06);
  box-shadow: 0 10px 26px -16px rgba(28, 138, 246, .45);
}
.cc-cert-opcao-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cc-cert-opcao-txt b { font-size: 15px; font-weight: 700; color: var(--ink); }
.cc-cert-opcao-txt > span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cc-cert-preco {
  flex: none; text-align: right; white-space: nowrap;
  font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
}
.cc-cert-preco i { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }

/* Campos do titular: revelados ao marcar. [hidden] explícito porque o
   display:grid da classe venceria o do navegador. */
.cc-cert-campos { display: grid; gap: 12px; margin-top: 14px; }
.cc-cert-campos[hidden] { display: none; }
.cc-cert-campos:not([hidden]) { animation: cc-cert-abre .35s var(--ease) both; }
@keyframes cc-cert-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.cc-cert-nota {
  padding: 11px 14px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink);
  background: rgba(28, 138, 246, .08); border: 1px solid rgba(28, 138, 246, .2);
}
.cc-cert-erro { margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.45; color: #dc2626; }
.cc-cert-erro[hidden] { display: none; }
.cc-cert-video { font-size: 13px; line-height: 1.55; color: var(--muted); }

/* Linha do resumo: fora do preço grande (mensal), dentro da cobrança de hoje. */
.cc-cert-resumo[hidden] { display: none; }
.cc-cert-resumo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 10px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.45;
  background: rgba(28, 138, 246, .07); border: 1px solid rgba(28, 138, 246, .18);
}
.cc-cert-resumo span { color: var(--ink); min-width: 0; }
.cc-cert-resumo b { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 640px) {
  /* Preço desce para baixo do texto: lado a lado sobravam ~140px de texto em 360px. */
  .cc-cert-opcao {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: start; column-gap: 12px; row-gap: 6px;
  }
  .cc-cert-check { margin-top: 1px; }
  .cc-cert-preco { grid-column: 2; text-align: left; }
  .cc-cert-preco i { display: inline; margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-cert-opcao, .cc-cert-check { transition: none; }
  .cc-cert-campos:not([hidden]) { animation: none; }
}

/* ---------- Integrações: lista no estilo dos Ajustes do iPhone ----------
   Fora da assinatura (interesse, não compra). Histórico (Aline, 11/09/2026):
   era "passo 4" em caixas âmbar tracejadas; numerado parecia etapa da compra
   e o visual lia como formulário antigo. Virou bloco sem número, em ROXO,
   com grupo de linhas do iOS: ícone de app, chave liga/desliga nas
   integrações e check na escolha do banco.
   Seletores com duas classes onde disputam com o .glass: este CSS carrega
   ANTES do style.css e perderia no empate. Texto roxo usa o tom 700
   (#6d28d9, 7:1 no claro); o 600 (#7c3aed) fica para fundos e a chave. */
.cc-grid { --roxo: #7c3aed; --roxo-700: #6d28d9; }

.cc-etapa.cc-integra {
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(124, 58, 237, .13) 0%, rgba(124, 58, 237, 0) 62%),
    radial-gradient(70% 50% at 0% 0%, rgba(99, 102, 241, .08) 0%, rgba(99, 102, 241, 0) 60%),
    var(--glass);
  border-color: rgba(124, 58, 237, .2);
}
.cc-integra-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--roxo-700); background: rgba(124, 58, 237, .1);
  padding: 5px 11px 5px 9px; border-radius: 100px;
}
.cc-integra-tag .ic { width: 13px; height: 13px; background: currentColor; }
.cc-form .cc-integra h2 {
  display: block; margin-top: 14px;
  font-size: clamp(22px, 2.4vw, 27px); font-weight: 800;
  line-height: 1.18; letter-spacing: -.025em; text-wrap: balance;
}
.cc-integra-grad {
  font-style: normal;
  background: linear-gradient(100deg, #7c3aed 0%, #6366f1 55%, #2563eb 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cc-integra-sub { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 62ch; }

/* Aviso: de QUAL cobrança as integrações ficam fora. */
.cc-integra-aviso {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 18px; padding: 13px 16px; border-radius: 16px;
  background: rgba(124, 58, 237, .08); border: 1px solid rgba(124, 58, 237, .2);
}
.cc-integra-aviso-ic {
  flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--roxo); color: #fff;
}
.cc-integra-aviso p { font-size: 14px; line-height: 1.55; color: var(--ink); }
.cc-integra-aviso b { color: var(--roxo-700); }

/* Grupo de linhas (inset grouped do iOS). */
.cc-ios-grupo {
  margin-top: 14px; border-radius: 18px; overflow: hidden;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(13, 21, 38, .06);
  box-shadow: 0 14px 34px -22px rgba(76, 29, 149, .35);
}
.cc-ios-linha {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; border: 0; background: transparent;
  text-align: left; font-family: inherit; color: inherit; cursor: pointer;
  transition: background .2s var(--ease);
}
/* Linha fina entre as linhas, recuada até o texto, como no iOS. */
.cc-ios-linha + .cc-ios-linha::before {
  content: ''; position: absolute; top: 0; right: 0; left: 70px;
  height: 1px; background: rgba(60, 60, 67, .12);
}
.cc-ios-linha:hover { background: rgba(124, 58, 237, .04); }
.cc-ios-linha:active { background: rgba(124, 58, 237, .08); }
.cc-ios-linha:focus-visible { outline: 2px solid var(--roxo); outline-offset: -2px; }

/* Ícone de app (squircle) */
.cc-ios-app {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -8px rgba(13, 21, 38, .45);
}
.cc-ios-app .ic { width: 20px; height: 20px; background: #fff; }
.cc-ios-glifo { width: 22px; height: 22px; display: block; }
.cc-ios-app-chat  { background: linear-gradient(160deg, #3ee57f 0%, #1ebe5a 100%); }
.cc-ios-app-nfse  { background: linear-gradient(160deg, #a78bfa 0%, #7c3aed 100%); }
.cc-ios-app-banco { background: linear-gradient(160deg, #818cf8 0%, #4f46e5 100%); }
.cc-ios-app-outro { background: linear-gradient(160deg, #c7c7cc 0%, #8e8e93 100%); }

.cc-ios-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cc-ios-txt b { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.cc-ios-txt span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cc-ios-txt em { margin-top: 3px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--roxo-700); }

/* Chave liga/desliga (UISwitch) */
.cc-ios-switch {
  flex: none; position: relative; width: 51px; height: 31px; border-radius: 999px;
  background: rgba(120, 120, 128, .2);
  transition: background .25s var(--ease);
}
.cc-ios-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
  transition: transform .3s cubic-bezier(.3, 1.35, .5, 1);
}
.cc-ios-linha.is-on .cc-ios-switch { background: var(--roxo); }
.cc-ios-linha.is-on .cc-ios-switch::after { transform: translateX(20px); }

/* Check da lista de bancos */
.cc-ios-marca {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgba(60, 60, 67, .28); color: transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.cc-ios-linha.is-on .cc-ios-marca { background: var(--roxo); border-color: var(--roxo); color: #fff; transform: scale(1.06); }

.cc-ios-cabeca {
  margin: 24px 0 0 16px; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.cc-ios-cabeca + .cc-ios-grupo { margin-top: 8px; }
.cc-ios-rodape { margin: 9px 16px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- Como começar (fechamento) ----------
   Dois caminhos (Aline, 11/09/2026): verde = testar 7 dias grátis com um
   consultor; azul = assinar agora, sem o teste. O "ou" entre eles deixa
   claro que é uma escolha. */
.cc-form .cc-comecar-titulo {
  display: block; font-size: clamp(22px, 2.4vw, 27px); font-weight: 800;
  line-height: 1.18; letter-spacing: -.025em;
}
.cc-caminho { margin-top: 16px; padding: 18px; border-radius: 20px; }
.cc-caminho-teste,
.cc-caminho-cab {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
}
.cc-caminho-teste {
  background: linear-gradient(160deg, rgba(47, 226, 115, .14) 0%, rgba(30, 190, 90, .05) 100%);
  border: 1px solid rgba(22, 163, 74, .22);
}
.cc-caminho-assinar {
  background: linear-gradient(160deg, rgba(74, 168, 255, .12) 0%, rgba(37, 99, 235, .04) 100%);
  border: 1px solid rgba(28, 138, 246, .2);
}
.cc-caminho-app {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #3ee57f 0%, #1ebe5a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -10px rgba(13, 21, 38, .5);
}
.cc-caminho-app.is-azul { background: var(--grad); }
.cc-caminho-txt { display: grid; gap: 3px; min-width: 0; }
.cc-caminho-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #15803d;
}
.cc-caminho-assinar .cc-caminho-tag { color: #1d4ed8; }
.cc-caminho-txt b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.cc-caminho-txt > span:last-child { font-size: 14px; line-height: 1.55; color: var(--muted); }
.cc-caminho-btn { grid-column: 2; justify-self: start; margin-top: 2px; }
.cc-caminho-assinar .cc-cobranca { margin-top: 16px; }

.cc-ou {
  display: flex; align-items: center; gap: 12px; margin: 14px 4px -2px;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.cc-ou::before, .cc-ou::after { content: ''; flex: 1; height: 1px; background: rgba(13, 21, 38, .1); }

/* Botão azul em duas linhas: o quê (sem o teste) e quanto sai hoje. */
.cc-form .cc-assinar { flex-direction: column; gap: 3px; padding-top: 14px; padding-bottom: 14px; }
.cc-assinar-l1 { font-size: 16.5px; font-weight: 800; }
.cc-assinar-l2 { font-size: 13px; font-weight: 600; opacity: .92; font-variant-numeric: tabular-nums; }

/* ---------- Cobrança de hoje (dentro do "assinar agora") ----------
   Diz com todas as letras o que é cobrado na assinatura e o que fica de
   fora. Azul = cobrado hoje; roxo = integrações. */
.cc-cobranca {
  display: grid; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(13, 21, 38, .09);
  background: rgba(255, 255, 255, .7);
}
.cc-cobranca-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px;
  padding: 15px 18px; border-left: 3px solid var(--blue);
}
.cc-cobranca-item + .cc-cobranca-item { border-top: 1px solid rgba(13, 21, 38, .08); }
.cc-cobranca-item.is-fora {
  grid-template-columns: minmax(0, 1fr);
  border-left-color: var(--roxo); background: rgba(124, 58, 237, .05);
}
.cc-cobranca-rotulo {
  font-size: 12px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink);
}
.cc-cobranca-item.is-fora .cc-cobranca-rotulo { color: var(--roxo-700); }
.cc-cobranca-det { grid-column: 1; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.cc-cobranca-valor {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right;
  font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cc-cobranca-valor i {
  display: block; font-style: normal; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; color: var(--muted);
}

/* ---------- Termos / envio ---------- */
.cc-terms {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--muted); margin-top: 20px;
}
.cc-terms input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--blue); flex: none; }
.cc-terms a { color: var(--blue); text-decoration: underline; }

.cc-form .btn-primary { margin-top: 20px; }
.cc-safe { font-size: 13.5px; color: var(--muted); text-align: center; margin-top: 12px; }

/* Saída para quem quer testar antes de pagar (10/09/2026). Separado do bloco
   de compra por uma régua: são dois caminhos, não dois botões da mesma ação. */
.cc-teste {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(13, 21, 38, .08);
  text-align: center;
}
.cc-teste p { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.cc-teste-nota { display: block; font-size: 12.5px; color: var(--muted); margin-top: 10px; }

.cc-fallback {
  margin-top: 18px; padding: 16px; border-radius: 14px;
  background: rgba(22, 163, 74, .07);
  border: 1px solid rgba(22, 163, 74, .2);
}
.cc-fallback p { font-size: 14px; color: var(--ink); margin-bottom: 12px; }

/* ---------- Resumo (o pedido, sempre à vista) ---------- */
.cc-aside {
  display: grid; gap: 14px; align-self: start;
  position: sticky; top: 96px;
}
.cc-resumo { padding: 26px; border-radius: var(--radius); }
.cc-resumo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cc-flag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 12px; border-radius: 100px; margin-bottom: 8px;
  background: var(--grad); color: #fff;
}
.cc-resumo h2 { font-size: 24px; font-weight: 800; letter-spacing: -.015em; }
.cc-trocar { font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; padding-top: 4px; }
.cc-trocar:hover { text-decoration: underline; }
.cc-resumo-desc { color: var(--muted); font-size: 13.5px; margin-top: 6px; }

/* Ciclo */
.cc-ciclo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin-top: 16px; padding: 4px; border-radius: 12px;
  background: rgba(13, 21, 38, .05);
}
.cc-ciclo button {
  border: 0; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 700; color: var(--muted);
  padding: 9px 0; border-radius: 9px; background: transparent;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.cc-ciclo button.on { background: var(--ink); color: #fff; }
.cc-ciclo button em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--ok); margin-left: 3px; }
.cc-ciclo button.on em { color: #7ee2a8; }

/* Preço */
.cc-preco { margin-top: 14px; }
.cc-preco-main { display: flex; align-items: baseline; gap: 4px; }
.cc-preco-main span { font-size: 15px; font-weight: 700; color: var(--muted); }
.cc-preco-main b {
  font-size: 40px; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums;
  transform-origin: 0 70%; /* o pulso cresce a partir do "R$", sem sambar */
}
.cc-preco-main em { font-style: normal; font-size: 14px; color: var(--muted); }
.cc-preco-sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.cc-preco-save {
  display: inline-block; margin-top: 8px;
  font-size: 12px; font-weight: 800;
  color: var(--ok); background: rgba(22, 163, 74, .1);
  padding: 4px 11px; border-radius: 100px;
}

/* Extrato dos adicionais + total */
/* O display:grid da classe venceria o [hidden] do navegador — e o extrato
   apareceria vazio antes de qualquer adicional ser escolhido. */
.cc-extras-resumo[hidden] { display: none; }
.cc-extras-resumo {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(13, 21, 38, .08);
  display: grid; gap: 6px;
}
.cc-extras-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13.5px;
}
.cc-extras-linha span { color: var(--muted); }
.cc-extras-linha b { font-variant-numeric: tabular-nums; }
.cc-extras-itens { display: grid; gap: 6px; }

/* Aviso das integrações pedidas (fora do total de propósito), no roxo delas. */
.cc-aviso-assistido[hidden] { display: none; }
.cc-aviso-assistido {
  display: grid; gap: 3px; margin-top: 14px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, .22);
  background: rgba(124, 58, 237, .07);
}
.cc-aviso-assistido b { font-size: 13px; color: var(--roxo-700); }
.cc-aviso-assistido span { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Inclusos */
.cc-inclui { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.cc-inclui li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 500; }
.cc-inclui li span {
  flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(22, 163, 74, .1); color: var(--ok);
  font-size: 10px; font-weight: 800;
}

/* Quando e quanto sai a primeira cobrança: rodapé do resumo, não um card
   à parte — a informação é obrigatória (D1), a repetição visual não era. */
.cc-quando-cobra {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(13, 21, 38, .08);
  font-size: 13.5px; color: var(--muted); line-height: 1.6;
}
/* nowrap: o valor não se parte em "R$" numa linha e o número na outra. */
.cc-quando-cobra b { color: var(--ink); font-weight: 800; white-space: nowrap; }

/* ---------- Feedback de clique (mesmo padrão de /planos) ---------- */
[data-press] { position: relative; overflow: hidden; }
[data-press]:active { transform: scale(.97); }
.pl-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, transparent 65%);
  transform: scale(0); opacity: .9;
  animation: pl-ripple .55s var(--ease) forwards;
}
@keyframes pl-ripple { to { transform: scale(2.6); opacity: 0; } }

/* Pulso do total quando o valor muda (criarconta.js põe e tira a classe). */
.cc-pulse { animation: cc-pulse .45s var(--ease); }
@keyframes cc-pulse {
  0% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .cc-grid { grid-template-columns: 1fr; }
  /* O resumo vai pra CIMA no celular: preço antes do formulário. */
  .cc-aside { order: -1; position: static; }
}
@media (max-width: 640px) {
  .cc-hero { padding-top: 132px; }
  .cc-form { gap: 16px; }
  .cc-etapa { padding: 26px 20px; }
  .cc-row { grid-template-columns: 1fr; }
  .cc-adicional { flex-wrap: wrap; }
  .cc-adicional-txt { flex-basis: 100%; }
  /* Valor da cobrança desce para baixo do rótulo: lado a lado espreme o texto. */
  .cc-cobranca-item { grid-template-columns: minmax(0, 1fr); }
  .cc-cobranca-valor { grid-column: 1; grid-row: auto; text-align: left; }
  /* No celular o botão do WhatsApp ocupa a largura: alvo de toque fácil. */
  .cc-caminho { padding: 16px; }
  .cc-caminho-btn { grid-column: 1 / -1; width: 100%; }
  /* Linha iOS no celular: ícone e chave ficam na altura do TÍTULO e a
     descrição corre por baixo até a borda, em vez de espremida entre os dois
     (lado a lado sobravam ~150px de texto). */
  .cc-etapa.cc-integra { padding-left: 16px; padding-right: 16px; }
  .cc-ios-linha {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px; row-gap: 2px; align-items: center; padding: 13px 14px;
  }
  .cc-ios-app { grid-row: 1 / span 3; align-self: start; width: 36px; height: 36px; border-radius: 10px; }
  .cc-ios-app .ic { width: 18px; height: 18px; }
  .cc-ios-glifo { width: 20px; height: 20px; }
  .cc-ios-txt { display: contents; }
  .cc-ios-txt b { grid-column: 2; grid-row: 1; }
  .cc-ios-txt span, .cc-ios-txt em { grid-column: 2 / -1; }
  .cc-ios-switch, .cc-ios-marca { grid-column: 3; grid-row: 1; }
  .cc-ios-linha + .cc-ios-linha::before { left: 62px; }
  .sec.cc-sec { padding-bottom: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-adicional, .cc-check, .cc-stepper button,
  .cc-ios-switch, .cc-ios-switch::after, .cc-ios-marca { transition: none; }
  .pl-ripple, .cc-pulse { animation: none; }
}

/* ---------- Link enviado (pós-cadastro, 14/09/2026) ----------
   É o momento mais importante da jornada: a conta acabou de nascer e o próximo
   passo está FORA da tela, na caixa de e-mail. Em um relance a pessoa precisa
   entender três coisas: deu certo, o link foi para este endereço, e por que o
   acesso ainda não abriu. */

/* display:grid vence o [hidden] do navegador (mesma armadilha do
   .cc-extras-resumo aqui em cima): sem estas duas linhas, o
   `form.hidden = true` / `aside.hidden = true` do criarconta.js não esconde
   nada, e o bloco nasce depois de uma tela inteira de formulário invisível
   (os .cc-etapa ficam em opacity 0 esperando o reveal). */
.cc-form[hidden],
.cc-aside[hidden] { display: none; }

/* Com a conta já criada, a linha "Assine o plano X e comece a usar hoje" do
   hero passa a contradizer a tela. Some enquanto o bloco estiver no ar (onde
   :has() não existe, a frase fica e nada quebra). */
body:has(#ccEnviado:not([hidden])) .cc-hero .sub { display: none; }

/* Sem o grid-column o bloco herdaria só a primeira coluna da .cc-grid e
   ficaria espremido à esquerda, com os 400px do resumo vazios ao lado. */
.cc-etapa.cc-enviado {
  grid-column: 1 / -1;
  width: 100%; max-width: 620px; margin: 0 auto;
  text-align: center; padding: 36px 32px 30px;
}
/* Entrada por :not([hidden]) e não pela classe que o JS adiciona: se um dia o
   is-visible deixar de ser posto, o bloco continua aparecendo. */
.cc-enviado:not([hidden]) { animation: cc-enviado-entra .5s var(--ease) both; }
@keyframes cc-enviado-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Envelope: o assunto da tela é o e-mail, então ele é a primeira coisa. */
.cc-enviado-ic {
  display: grid; place-items: center;
  width: 66px; height: 66px; margin: 0 auto;
  border-radius: 21px; background: var(--grad); color: #fff;
  box-shadow: 0 16px 32px -14px rgba(28, 138, 246, .85), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.cc-enviado-ic svg { width: 32px; height: 32px; }

.cc-enviado-tag {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; padding: 6px 14px 6px 11px; border-radius: 100px;
  font-size: 12.5px; font-weight: 800;
  color: #15803d; background: rgba(22, 163, 74, .1);
  border: 1px solid rgba(22, 163, 74, .24);
}
.cc-enviado-tag svg { width: 15px; height: 15px; flex: none; }

.cc-enviado-titulo {
  font-size: clamp(22px, 5vw, 28px); font-weight: 800;
  letter-spacing: -.028em; line-height: 1.14;
  margin-top: 12px; text-wrap: balance;
}
.cc-enviado-txt {
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
  max-width: 460px; margin: 10px auto 0;
}

/* O e-mail mascarado em cápsula branca: sólido dentro do vidro, a mesma
   camada dupla do resto do sistema. overflow-wrap porque endereço longo em
   tela de 360px não pode furar a borda do cartão. */
.cc-enviado-email {
  display: inline-block; max-width: 100%;
  margin-top: 12px; padding: 12px 20px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(28, 138, 246, .22);
  box-shadow: 0 12px 28px -22px rgba(28, 90, 180, .7), inset 0 1px 0 #fff;
  font-size: clamp(15px, 4.2vw, 17.5px); font-weight: 800;
  letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere;
}
.cc-enviado-email b { font-weight: 800; }

/* O porquê da exigência, no tom de quem protege e não de quem burocratiza. */
.cc-enviado-seg {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px;
  align-items: start; text-align: left;
  margin-top: 20px; padding: 13px 16px; border-radius: 16px;
  background: rgba(13, 21, 38, .035); border: 1px solid rgba(13, 21, 38, .07);
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
}
.cc-enviado-seg svg { width: 20px; height: 20px; margin-top: 1px; color: var(--blue-deep); flex: 0 0 auto; }
.cc-enviado-seg a { color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.cc-enviado-acoes { display: grid; gap: 10px; margin-top: 22px; }
.cc-enviado-acoes .btn { width: 100%; white-space: normal; line-height: 1.35; min-height: 52px; }
@media (min-width: 560px) {
  .cc-enviado-acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Resposta do reenvio: é neutra de propósito (nunca diz se a conta existe),
   então o aviso é informativo, não verde de sucesso. */
.cc-enviado-aviso {
  margin-top: 14px; padding: 12px 15px; border-radius: 14px; text-align: left;
  background: rgba(28, 138, 246, .07); border: 1px solid rgba(28, 138, 246, .2);
  font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--ink);
}
.cc-enviado .cc-safe { margin-top: 16px; }

@media (max-width: 640px) {
  .cc-etapa.cc-enviado { padding: 30px 20px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-enviado:not([hidden]) { animation: none; }
}