/* ==========================================================================
   clientes-2026.css — pagina /meu-plano/ (area da nutri que JA e cliente)
   --------------------------------------------------------------------------
   Prefixo .cl-*  |  Consumida por: /meu-plano/index.html

   HISTORICO DAS DECISOES (pra ninguem desfazer sem saber por que):

   v1 — topo era hero: faixa navy com glow, titulo enorme centralizado,
        marca-texto ambar. A fundadora: "o inicio da pagina ta muito igual a
        pagina de vendas". A analise de UX mostrou que a causa nao era a COR
        e sim a ANATOMIA (etiqueta em pilula -> titulo grande centralizado ->
        lead -> controles no centro e gramatica de conversao em qualquer cor;
        a /preco-numax/ e branca e "parecia a mesma coisa").

   v2 — virou painel: caminho, titulo pequeno a esquerda, abas, seletor de
        plano. Resolveu a anatomia, mas a fundadora apontou duas coisas:
        (a) o seletor "qual e o seu plano hoje?" nao serve — nem toda nutri
            sabe em que plano esta, entao a pergunta vira um beco sem saida
            logo na entrada da pagina;
        (b) "to achando o visual da pagina pobre" — na fuga da cara de
            vitrine, sobrou branco com fio cinza e nada mais.
        O cabecalho de navegacao do site tambem saiu: e uma pagina de
        cliente, alcancada por link direto — menu de marketing (Planos,
        NumaxPay, Blog) so puxa ela de volta pro funil de venda.
        As ABAS a fundadora aprovou: "gostei dessas secoes aqui para ajudar
        a localizar". Ficam.

   v3 (atual) — mantem a anatomia de painel e devolve materia visual:
        textura de pontos no topo, regua em gradiente, cards com superficie
        em camadas e sombra de verdade, cada modalidade com a sua cor
        ocupando area (nao um fio de 3px), icones em chip colorido, e as
        barras de comparacao anual x mensal. Riqueza vem de profundidade e
        cor pontual — nao de faixa colorida gigante nem de foto.

   GOTCHA (memoria identidade-visual-2026-08): o Tailwind de
   numax-home-2026-08.css e COMPILADO — classe arbitraria nao pinta. Tudo
   aqui e CSS proprio. E o minificador do build come barra invertida de
   seletor escapado em <style> inline — por isso este arquivo e externo.
   ========================================================================== */

:root{
  --cl-navy:#002652;
  --cl-navy-2:#0a1c3d;
  --cl-titulo:#0a1a33;
  --cl-texto:#43526b;
  /* #6b7a92 dava 4.35:1 no branco e 4.09:1 no cinza — reprovava no WCAG AA
     (pede 4.5:1). Pinta quase metade do texto da pagina. */
  --cl-suave:#5f6d86;
  --cl-linha:#e4e9f2;
  --cl-fundo:#f6f8fc;
  --cl-azul:#0056B7;
  --cl-azul-claro:#5AB4FF;
  --cl-violeta:#5B4BFF;
  --cl-ciano:#12B8C9;
  --cl-teal:#216B7B;      /* cor nativa da logo */
  --cl-teal-claro:#6BBED0;
  --cl-verde:#1a7f45;
  --cl-verde-escuro:#136c37;  /* 6.12:1 sobre #e6f4ea */
  --cl-ia-a:#FF2E7E;
  --cl-ia-b:#FF7A2F;
  --cl-sombra:0 1px 2px rgba(10,26,51,.04), 0 10px 30px rgba(10,26,51,.055);
  --cl-sombra-alta:0 2px 4px rgba(10,26,51,.05), 0 22px 48px rgba(10,26,51,.1);
  --cl-offset:4.75rem;    /* so a barra de abas — nao ha header nesta pagina */
}

/* Inter e a fonte padrao do design system (tokens.css: --font-sans).
   Servida do proprio dominio, nao do Google. A pagina ja fazia preload deste
   arquivo, mas o @font-face dele vivia no bundle da home — quando a pagina
   parou de carregar o bundle, o preload ficou orfao: 47 KB baixados com
   prioridade alta e descartados, enquanto a fonte de verdade vinha numa
   segunda requisicao ao Google.
   Conferido que o arquivo local e variavel e cobre 400-800: as larguras de
   glifo batem exatamente com as da versao do Google (523,97px em 400 e
   544,68px em 800), entao o desenho na tela e o mesmo. */
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
/* Fallback com metrica ajustada: enquanto a Inter carrega, o Arial ocupa
   quase o mesmo espaco, entao o texto nao pula quando ela entra. */
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial');
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22.5%;
  line-gap-override:0%;
}

.cl-body{
  margin:0;
  background:#fff;
  color:var(--cl-texto);
  font-family:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.cl-body *,.cl-body *::before,.cl-body *::after{box-sizing:border-box}

/* Foco de teclado: NAO existia em nenhum CSS do site, nem no bundle da home. */
.cl-body :focus-visible{outline:3px solid #0056B7;outline-offset:2px;border-radius:8px}
.cl-fica :focus-visible{outline-color:#fff}

/* Rolagem suave ao clicar numa aba. Vinha do bundle da home; quando a pagina
   deixou de carregar o bundle, o salto ficou seco. Desligado mais abaixo em
   prefers-reduced-motion. */
html{scroll-behavior:smooth}

/* Sem isso a ancora aterrissa com o titulo da secao atras da barra de abas. */
#planos,#renovacao,#saltos,#ajuda{scroll-margin-top:var(--cl-offset)}

.cl-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   1. Topo em painel — sem cabecalho de navegacao
   -------------------------------------------------------------------------- */
.cl-painel{
  position:relative;overflow:hidden;
  padding:2.25rem 1.5rem 2.25rem;
  background:
    radial-gradient(880px 320px at 6% -30%, rgba(0,86,183,.09), transparent 62%),
    radial-gradient(720px 300px at 96% -10%, rgba(18,184,201,.09), transparent 64%),
    #fff;
}
/* Textura de pontos com fade — da materia ao topo sem virar faixa colorida. */
.cl-painel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,38,82,.09) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 85%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 85%);
}
.cl-painel__wrap{position:relative;z-index:2;max-width:68rem;margin:0 auto}

.cl-marca{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:2rem;
}
.cl-marca__logo{display:block;height:26px;width:auto}
.cl-entrar{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:40px;padding:.5rem 1.05rem;border-radius:999px;
  background:#fff;border:1px solid var(--cl-linha);
  box-shadow:0 1px 2px rgba(10,26,51,.05);
  font-size:.8125rem;font-weight:700;color:var(--cl-navy);text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.cl-entrar:hover{border-color:#c3d2e6;box-shadow:0 6px 16px rgba(10,26,51,.09);transform:translateY(-1px)}
.cl-entrar iconify-icon{font-size:1rem;color:var(--cl-azul)}

/* Regua curta em gradiente no lugar do fio cinza de ponta a ponta. */
.cl-regua{
  width:92px;height:4px;border-radius:3px;margin:0 0 1.15rem;
  background:linear-gradient(90deg,var(--cl-navy),var(--cl-azul) 48%,var(--cl-teal-claro));
}
.cl-painel__h1{
  margin:0 0 .65rem;
  font-size:clamp(1.65rem,4.2vw,2.4rem);
  font-weight:800;letter-spacing:-.025em;line-height:1.14;color:var(--cl-navy);
}
.cl-painel__meta{
  margin:0;max-width:46rem;
  font-size:1rem;line-height:1.65;color:var(--cl-texto);
}
.cl-painel__meta b{color:var(--cl-titulo);font-weight:700}

/* Abas — aprovadas pela fundadora ("ajudam a localizar"). Sem header, grudam
   no topo da janela. */
.cl-abas{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--cl-linha);border-bottom:1px solid var(--cl-linha);
}
.cl-abas nav{
  max-width:68rem;margin:0 auto;padding:0 1.5rem;
  display:flex;gap:.25rem;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.cl-abas nav::-webkit-scrollbar{display:none}
/* Centraliza as abas por margem automatica nos extremos, NAO por
   justify-content:center. Com justify-content:center num container rolavel,
   quando o conteudo estoura a largura o inicio dele fica fora da area
   rolavel e a primeira aba vira inalcancavel. Com margin:auto o navegador
   centraliza quando sobra espaco e volta a alinhar a esquerda quando falta. */
.cl-abas nav>a:first-child{margin-left:auto}
.cl-abas nav>a:last-child{margin-right:auto}
.cl-abas a{
  flex:0 0 auto;display:inline-flex;align-items:center;
  min-height:48px;padding:0 .85rem;white-space:nowrap;
  font-size:.875rem;font-weight:600;color:var(--cl-suave);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.cl-abas a:hover{color:var(--cl-navy);border-bottom-color:var(--cl-linha)}
.cl-abas a.is-aqui{color:var(--cl-navy);border-bottom-color:var(--cl-azul)}

/* --------------------------------------------------------------------------
   2. Estrutura de secao
   -------------------------------------------------------------------------- */
.cl-sec{padding:4rem 1.5rem}
.cl-sec--cinza{
  background:linear-gradient(180deg,#f7f9fd 0%,#eef3fa 100%);
  border-top:1px solid var(--cl-linha);border-bottom:1px solid var(--cl-linha);
}
.cl-wrap{max-width:68rem;margin:0 auto}
.cl-wrap--fino{max-width:46rem}
.cl-h2{
  margin:0 0 .6rem;font-size:clamp(1.5rem,3.2vw,2.125rem);
  line-height:1.2;letter-spacing:-.02em;font-weight:800;color:var(--cl-titulo);
}
.cl-sub{margin:0 0 2.25rem;font-size:1.0625rem;line-height:1.6;color:var(--cl-suave);max-width:42rem}
.cl-centro{text-align:center}
.cl-centro .cl-sub{margin-left:auto;margin-right:auto}

/* SEM marca-texto ambar em Fraunces nesta pagina (decisao da fundadora):
   "essa parte aqui nao gostei, ta muito igual a home, vamo diferenciar".
   O grifo ambar e A assinatura da home — usar aqui puxa a leitura de volta
   pra vitrine, que e exatamente o que esta pagina tenta nao ser.

   A assinatura desta pagina e outra: etiqueta de secao com fio colorido.
   E linguagem de painel/relatorio, nao de landing, e ainda da ritmo e cor
   ao longo da pagina (o "visual pobre" que a fundadora apontou vinha de
   secoes que comecavam direto no titulo, sem nenhum sinal grafico). */
.cl-kicker{
  display:inline-flex;align-items:center;gap:.65rem;
  margin:0 0 .9rem;
  font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cl-azul);
}
.cl-kicker::before{
  content:'';width:28px;height:3px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(90deg,var(--cl-navy),var(--cl-azul));
}
.cl-kicker--violeta{color:var(--cl-violeta)}
.cl-kicker--violeta::before{background:linear-gradient(90deg,var(--cl-violeta),var(--cl-ciano))}
.cl-kicker--teal{color:var(--cl-teal)}
.cl-kicker--teal::before{background:linear-gradient(90deg,var(--cl-teal),var(--cl-teal-claro))}
.cl-kicker--verde{color:var(--cl-verde-escuro)}
.cl-kicker--verde::before{background:linear-gradient(90deg,var(--cl-verde-escuro),#3fae72)}
.cl-kicker--claro{color:var(--cl-azul-claro)}
.cl-kicker--claro::before{background:linear-gradient(90deg,var(--cl-azul-claro),var(--cl-ciano))}

/* --------------------------------------------------------------------------
   3. "Coisas que ja estao pagas" — lembrete de valor
   -------------------------------------------------------------------------- */
.cl-tem{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:640px){.cl-tem{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.cl-tem{grid-template-columns:repeat(3,1fr)}}
.cl-tem__item{
  display:flex;gap:1rem;align-items:flex-start;
  background:#fff;border:1px solid var(--cl-linha);border-radius:18px;
  padding:1.3rem 1.35rem;box-shadow:var(--cl-sombra);
  transition:box-shadow .25s ease,transform .25s ease;
}
.cl-tem__item:hover{box-shadow:var(--cl-sombra-alta);transform:translateY(-2px)}
/* Icone em chip colorido — antes era um iconify solto, o que deixava a
   grade inteira lendo como lista de texto. */
.cl-tem__ico{
  flex-shrink:0;width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(0,86,183,.13),rgba(90,180,255,.09));
  color:var(--cl-azul);
}
.cl-tem__ico iconify-icon{font-size:1.4rem}
.cl-tem__item b{display:block;color:var(--cl-titulo);font-size:.95rem;font-weight:700;margin-bottom:.3rem;line-height:1.35}
.cl-tem__item span{font-size:.875rem;line-height:1.55;color:var(--cl-suave)}
/* Antenada IA tem cor propria: magenta -> laranja. Nunca azul. */
.cl-tem__item--ia .cl-tem__ico{
  background:linear-gradient(145deg,rgba(255,46,126,.16),rgba(255,122,47,.12));
  color:var(--cl-ia-a);
}
/* Uma cor por chip: seis icones azuis iguais faziam a grade inteira ler como
   lista de texto. Cada tom sai da paleta que o site ja usa. */
.cl-tem__item--violeta .cl-tem__ico{background:linear-gradient(145deg,rgba(91,75,255,.15),rgba(91,75,255,.07));color:var(--cl-violeta)}
.cl-tem__item--teal .cl-tem__ico{background:linear-gradient(145deg,rgba(18,184,201,.18),rgba(107,190,208,.1));color:var(--cl-teal)}
.cl-tem__item--ouro .cl-tem__ico{background:linear-gradient(145deg,rgba(232,184,75,.24),rgba(255,154,61,.12));color:#8a6a1f}
.cl-tem__item--verde .cl-tem__ico{background:linear-gradient(145deg,rgba(26,127,69,.15),rgba(26,127,69,.07));color:var(--cl-verde-escuro)}
/* Tons escurecidos do gradiente da Antenada IA: os originais (#FF2E7E/#FF7A2F)
   davam 3,53:1 e 2,60:1 sobre branco, reprovando no AA pra texto de 15px. */
.cl-ia-grad{
  background:linear-gradient(92deg,#E01C68,#C65A12);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;
}

/* --------------------------------------------------------------------------
   4. Toggle de periodicidade
   -------------------------------------------------------------------------- */
.cl-toggle{
  display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.25rem;
  padding:.35rem;margin:0 auto .85rem;
  background:#fff;border:1px solid var(--cl-linha);border-radius:999px;
  box-shadow:var(--cl-sombra);
}
/* O selo "melhor preco" saiu de dentro do botao Anual (desalinhava os tres
   rotulos e encostava na borda no celular) e virou esta linha. */
.cl-toggle__dica{
  margin:0 0 2.5rem;font-size:.8125rem;line-height:1.5;font-weight:600;
  color:var(--cl-verde-escuro);
}
/* Ponto verde no botao Anual. O selo "melhor preco" que ficava dentro do
   botao empurrava o rotulo e desalinhava os tres; o ponto sinaliza sem
   ocupar linha nem mudar a altura. */
.cl-ponto-melhor{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--cl-verde-escuro);
}
.cl-toggle button[aria-checked="true"] .cl-ponto-melhor{background:#7ee2a8}
.cl-toggle button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:600;color:var(--cl-suave);
  min-height:44px;padding:.5rem 1.25rem;border-radius:999px;
  /* justify-content:center e obrigatorio: no celular os tres botoes viram
     colunas de largura igual, e sem isso o rotulo encosta na esquerda de cada
     celula — o conjunto fica visivelmente torto. */
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.cl-toggle button:hover{color:var(--cl-titulo)}
.cl-toggle button[aria-checked="true"]{
  background:linear-gradient(140deg,var(--cl-navy),#013d80);
  color:#fff;box-shadow:0 6px 16px rgba(0,38,82,.28);
}
.cl-economia{
  font-size:.6875rem;font-weight:700;letter-spacing:.03em;
  background:#e6f4ea;color:var(--cl-verde-escuro);border-radius:999px;padding:.15rem .45rem;
}
.cl-toggle button[aria-checked="true"] .cl-economia{background:rgba(255,255,255,.2);color:#fff}
@media(max-width:420px){.cl-economia{display:none}}

/* --------------------------------------------------------------------------
   5. Cards de plano — cada modalidade com a sua cor ocupando area
   -------------------------------------------------------------------------- */
.cl-grade{display:grid;gap:1.35rem;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.cl-grade{grid-template-columns:repeat(3,1fr)}}
.cl-plano{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--cl-linha);border-radius:22px;
  box-shadow:var(--cl-sombra);
  transition:box-shadow .28s ease,transform .28s ease,border-color .28s ease;
}
.cl-plano:hover{box-shadow:var(--cl-sombra-alta);transform:translateY(-3px)}

/* Faixa superior tingida: substitui o fio de 3px da versao anterior. */
.cl-plano__topo{
  padding:1.5rem 1.5rem 1.35rem;
  border-bottom:1px solid var(--cl-linha);
  position:relative;
}
.cl-plano__topo::after{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
}
.cl-plano--black .cl-plano__topo{background:linear-gradient(160deg,#f2f5f9,#fbfcfe)}
.cl-plano--black .cl-plano__topo::after{background:linear-gradient(90deg,#2c3a52,#6b7a92)}
.cl-plano--platinum .cl-plano__topo{background:linear-gradient(160deg,rgba(0,86,183,.11),rgba(90,180,255,.05))}
.cl-plano--platinum .cl-plano__topo::after{background:linear-gradient(90deg,var(--cl-azul),var(--cl-azul-claro))}
.cl-plano--unlimited .cl-plano__topo{background:linear-gradient(160deg,rgba(91,75,255,.11),rgba(18,184,201,.06))}
.cl-plano--unlimited .cl-plano__topo::after{background:linear-gradient(90deg,var(--cl-violeta),var(--cl-ciano))}

.cl-plano--destaque{border-color:rgba(0,86,183,.4);box-shadow:0 3px 6px rgba(0,86,183,.07),0 22px 50px rgba(0,86,183,.16)}

.cl-plano__nome{
  display:flex;align-items:center;gap:.5rem;
  margin:0 0 .4rem;font-size:1.35rem;font-weight:800;color:var(--cl-titulo);letter-spacing:-.015em;
}
.cl-plano__ponto{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cl-plano--black .cl-plano__ponto{background:#5c6b85}
.cl-plano--platinum .cl-plano__ponto{background:var(--cl-azul)}
.cl-plano--unlimited .cl-plano__ponto{background:linear-gradient(135deg,var(--cl-violeta),var(--cl-ciano))}
.cl-plano__linha{margin:0;font-size:.9rem;line-height:1.5;color:var(--cl-suave)}

.cl-plano__corpo{display:flex;flex-direction:column;padding:1.4rem 1.5rem 1.6rem;flex:1}

.cl-valor{display:flex;align-items:baseline;gap:.15rem;flex-wrap:wrap;color:var(--cl-titulo)}
.cl-valor__cifrao{font-size:1rem;font-weight:600;color:var(--cl-suave);align-self:flex-start;margin-top:.45rem}
.cl-valor__num{font-size:2.9rem;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.cl-valor__cent{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.cl-valor__per{font-size:.95rem;font-weight:600;color:var(--cl-suave);margin-left:.15rem}
.cl-equiv{
  display:inline-block;margin:.65rem 0 0;padding:.22rem .6rem;border-radius:999px;
  background:rgba(0,86,183,.09);
  font-size:.75rem;font-weight:700;color:var(--cl-azul);
}
.cl-equiv:empty{display:none}
.cl-ciclo{margin:.6rem 0 1.25rem;font-size:.8125rem;line-height:1.5;color:var(--cl-suave)}

@media(min-width:900px){
  .cl-plano__linha{min-height:4.5em}  /* 3 linhas: a descricao do Platinum quebra em 3 */
  .cl-ciclo{min-height:2.4em}
}

.cl-cta{
  display:block;text-align:center;text-decoration:none;
  font-size:.9375rem;font-weight:700;
  padding:.85rem 1rem;border-radius:13px;
  border:1.5px solid var(--cl-linha);color:var(--cl-navy);background:#fff;
  box-shadow:0 1px 2px rgba(10,26,51,.05);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.cl-cta:hover{border-color:var(--cl-azul);color:var(--cl-azul);box-shadow:0 8px 20px rgba(0,86,183,.14);transform:translateY(-1px)}
.cl-cta--cheio{
  background:linear-gradient(140deg,var(--cl-azul),#0a72e0);
  border-color:transparent;color:#fff;box-shadow:0 10px 24px rgba(0,86,183,.34);
}
.cl-cta--cheio:hover{color:#fff;border-color:transparent;box-shadow:0 14px 30px rgba(0,86,183,.45)}

.cl-heranca{
  margin:1.5rem 0 .75rem;font-size:.75rem;font-weight:700;color:var(--cl-suave);
  letter-spacing:.06em;text-transform:uppercase;
}
.cl-itens{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.cl-heranca+.cl-itens{margin-top:0}
.cl-itens li{display:flex;gap:.6rem;align-items:flex-start;font-size:.875rem;line-height:1.5;color:var(--cl-texto)}
.cl-itens iconify-icon{font-size:1.1rem;color:var(--cl-verde);flex-shrink:0;margin-top:.1rem}
/* Funcionalidade ainda nao entregue fica FORA da lista de itens. */
.cl-devir{
  margin:1.1rem 0 0;padding-top:.85rem;border-top:1px dashed var(--cl-linha);
  font-size:.78rem;line-height:1.5;color:var(--cl-suave);font-style:italic;
}

/* --------------------------------------------------------------------------
   6. Tabela de renovacao
   -------------------------------------------------------------------------- */
.cl-tabela-wrap{
  overflow-x:auto;border:1px solid var(--cl-linha);border-radius:18px;
  background:#fff;box-shadow:var(--cl-sombra);
}
.cl-tabela{width:100%;border-collapse:collapse;font-size:.9375rem}
.cl-tabela th,.cl-tabela td{padding:1.05rem 1.2rem;text-align:left;border-bottom:1px solid var(--cl-linha)}
.cl-tabela thead th{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cl-suave);background:linear-gradient(180deg,#f7f9fd,#f1f5fb);
}
.cl-tabela tbody th{font-weight:800;color:var(--cl-titulo);font-size:1rem}
.cl-tabela tbody tr:last-child th,.cl-tabela tbody tr:last-child td{border-bottom:0}
.cl-tabela b{display:block;color:var(--cl-titulo);font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.cl-tabela small{display:block;margin-top:.15rem;font-size:.8125rem;color:var(--cl-suave)}
.cl-td-melhor{background:rgba(26,127,69,.045)}
.cl-td-melhor b{color:var(--cl-verde-escuro)}
.cl-tabela td::before{display:none}

/* Abaixo de 768px a tabela de 4 colunas so cabia rolando na horizontal —
   pessimo pra informacao mais importante da pagina, e inalcancavel pelo
   teclado. Vira um bloco por modalidade, com exatamente os mesmos dados. */
@media(max-width:767px){
  .cl-tabela-wrap{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
  .cl-tabela,.cl-tabela tbody,.cl-tabela tr,.cl-tabela td,.cl-tabela th{display:block}
  .cl-tabela thead{display:none}
  .cl-tabela tr{
    background:#fff;border:1px solid var(--cl-linha);border-radius:18px;
    margin-bottom:1rem;padding:.3rem 0;box-shadow:var(--cl-sombra);
  }
  .cl-tabela tbody th{font-size:1.15rem;padding:1rem 1.2rem .4rem;border-bottom:0}
  .cl-tabela td{
    display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
    padding:.65rem 1.2rem;border-bottom:0;
  }
  .cl-tabela td+td{border-top:1px solid var(--cl-linha)}
  .cl-tabela td::before{
    content:attr(data-col);display:block;flex:0 0 auto;padding-top:.2rem;
    font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--cl-suave);
  }
  .cl-cel{text-align:right}
}

/* Barras: quanto o anual representa do que ela pagaria mes a mes.
   Informacao, nao enfeite — e o unico grafico da pagina. */
.cl-barras{
  margin:2rem 0 0;padding:1.5rem 1.6rem;
  background:#fff;border:1px solid var(--cl-linha);border-radius:18px;box-shadow:var(--cl-sombra);
}
.cl-barras__tit{
  margin:0 0 1.35rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cl-suave);
}
.cl-barra{margin-bottom:1.5rem}
.cl-barra:last-child{margin-bottom:0}
.cl-barra__topo{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.55rem;
  font-size:.875rem;
}
.cl-barra__nome{font-weight:700;color:var(--cl-titulo)}
.cl-barra__eco{font-weight:700;color:var(--cl-verde-escuro);font-variant-numeric:tabular-nums}

/* DUAS barras por modalidade, na mesma escala.
   A versao anterior tinha UMA barra escura sobre um trilho claro, e o trilho
   representava o custo mes a mes. So que trilho claro le como espaco vazio,
   nao como valor — a fundadora achou pouco intuitivo e estava certa: exigia
   que a leitora interpretasse o fundo. Duas barras dispensam interpretacao,
   porque a comparacao vira comprimento contra comprimento. */
.cl-barra__linha{
  display:grid;grid-template-columns:5rem 1fr auto;align-items:center;
  gap:.65rem;margin-top:.4rem;
}
.cl-barra__rot{font-size:.75rem;font-weight:600;color:var(--cl-suave)}
.cl-barra__trilho{height:22px;border-radius:7px;background:transparent}
.cl-barra__fill{
  display:block;height:100%;width:var(--p);border-radius:7px;min-width:6px;
}
.cl-barra__fill--caro{background:#c9d4e4}
.cl-barra__fill--barato{background:linear-gradient(90deg,var(--cl-navy),#0a5fbf)}
.cl-barra__num{
  font-size:.8125rem;font-weight:700;color:var(--cl-titulo);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cl-barra__linha--barato .cl-barra__rot,
.cl-barra__linha--barato .cl-barra__num{color:var(--cl-navy)}
/* Rodape do cartao. As observacoes sobre semestral e parcelamento ficavam
   soltas embaixo do cartao, sem moldura, e liam como texto aleatorio
   (diagnostico da fundadora). Recolhidas pra ca, viram nota de rodape do
   proprio grafico. */
.cl-barras__leg{
  margin:1.5rem 0 0;padding-top:1.1rem;border-top:1px solid var(--cl-linha);
  display:flex;flex-direction:column;gap:.5rem;
  font-size:.8125rem;line-height:1.55;color:var(--cl-suave);
}
.cl-barras__leg p{margin:0}
.cl-barras__leg b{color:var(--cl-titulo)}

/* --------------------------------------------------------------------------
   7. "Quanto custa subir de plano" — o salto em numero
   -------------------------------------------------------------------------- */
.cl-saltos{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:768px){.cl-saltos{grid-template-columns:repeat(2,1fr)}}
.cl-salto{
  position:relative;background:#fff;border:1px solid var(--cl-linha);border-radius:18px;
  padding:1.5rem 1.6rem;box-shadow:var(--cl-sombra);
  transition:box-shadow .25s ease,transform .25s ease;
}
.cl-salto:hover{box-shadow:var(--cl-sombra-alta);transform:translateY(-2px)}
.cl-salto--descer{background:linear-gradient(160deg,#f7f9fd,#fff)}
.cl-salto__de{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-bottom:.8rem;padding:.3rem .7rem .3rem .45rem;border-radius:999px;
  background:rgba(0,86,183,.08);
  font-size:.75rem;font-weight:700;color:var(--cl-azul);
}
.cl-salto__de iconify-icon{font-size:1rem}
.cl-salto--descer .cl-salto__de{background:rgba(95,109,134,.11);color:var(--cl-suave)}
.cl-salto__valor{
  margin:0;
  font-size:2.1rem;font-weight:800;color:var(--cl-titulo);
  letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;
}
.cl-salto__valor span{font-size:.9375rem;font-weight:600;color:var(--cl-suave);letter-spacing:0}
.cl-salto__texto{margin:.9rem 0 0;font-size:.9rem;line-height:1.6;color:var(--cl-texto)}

/* Par mensal x anual dentro do MESMO cartao.
   Antes eram dois cartoes separados por salto, o que no desktop virava uma
   grade 2x2 legivel mas no celular empilhava: o par que existe pra ser
   comparado ficava a uma tela de distancia um do outro, e a comparacao
   evaporava. Lado a lado, o cartao diz sozinho qual periodicidade compensa. */
.cl-salto__par{
  display:grid;grid-template-columns:1fr 1fr;gap:.85rem;
  margin-top:.25rem;
}
.cl-salto__op{
  padding:.75rem .85rem;border-radius:12px;
  background:var(--cl-fundo);border:1px solid var(--cl-linha);
}
/* A opcao mais barata fica marcada. E a informacao que a nutri procura. */
.cl-salto__op--melhor{
  background:linear-gradient(150deg,rgba(26,127,69,.09),rgba(26,127,69,.03));
  border-color:rgba(26,127,69,.28);
}
.cl-salto__op .cl-salto__valor{font-size:1.6rem}
.cl-salto__op--melhor .cl-salto__valor{color:var(--cl-verde-escuro)}
.cl-salto__quando{
  margin:.3rem 0 0;font-size:.75rem;font-weight:600;color:var(--cl-suave);
}
.cl-salto__op--melhor .cl-salto__quando{color:var(--cl-verde-escuro)}

/* O cartao de descer nao e um salto: ocupa a linha inteira e fecha a secao. */
@media(min-width:768px){.cl-salto--descer{grid-column:1 / -1}}

/* --------------------------------------------------------------------------
   8. Bloco de permanencia (escuro) — a conversa antes de sair
   -------------------------------------------------------------------------- */
.cl-fica{
  position:relative;overflow:hidden;
  background:
    radial-gradient(680px 300px at 12% 0%, rgba(91,75,255,.28), transparent 62%),
    radial-gradient(620px 280px at 90% 100%, rgba(18,184,201,.22), transparent 64%),
    linear-gradient(160deg,#0a1c3d 0%,#002652 100%);
  border-radius:26px;padding:2.5rem 1.75rem;color:#fff;
  box-shadow:0 26px 60px rgba(0,38,82,.28);
}
@media(min-width:768px){.cl-fica{padding:3.25rem}}
.cl-fica h2{margin:0 0 .75rem;font-size:clamp(1.4rem,3vw,1.95rem);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.2}
.cl-fica__lead{margin:0 0 2rem;max-width:42rem;font-size:1rem;line-height:1.65;color:rgba(255,255,255,.78)}
.cl-fica__grade{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:768px){.cl-fica__grade{grid-template-columns:repeat(3,1fr)}}
.cl-fica__card{
  display:flex;flex-direction:column;gap:.55rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:18px;padding:1.35rem 1.4rem;
  text-decoration:none;color:inherit;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
a.cl-fica__card:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);transform:translateY(-3px)}
.cl-fica__ico{
  width:42px;height:42px;border-radius:13px;margin-bottom:.15rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
}
.cl-fica__ico iconify-icon{font-size:1.35rem;color:var(--cl-azul-claro)}
.cl-fica__card--ia .cl-fica__ico{background:linear-gradient(145deg,rgba(255,46,126,.3),rgba(255,122,47,.2));border-color:rgba(255,120,160,.3)}
.cl-fica__card--ia .cl-fica__ico iconify-icon{color:#ff9ec4}
.cl-fica__card b{font-size:.9375rem;font-weight:700;color:#fff}
.cl-fica__card span{font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.72)}
.cl-fica__card .cl-acao{font-size:.8125rem;font-weight:700;color:var(--cl-azul-claro);margin-top:.15rem}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.cl-faq{
  background:#fff;border:1px solid var(--cl-linha);border-radius:18px;
  box-shadow:var(--cl-sombra);overflow:hidden;
}
.cl-faq details{border-bottom:1px solid var(--cl-linha)}
.cl-faq details:last-child{border-bottom:0}
.cl-faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 1.35rem;
  font-size:1rem;font-weight:700;color:var(--cl-titulo);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:background .18s ease;
}
.cl-faq summary:hover{background:#f8fafd}
.cl-faq summary::-webkit-details-marker{display:none}
.cl-faq summary::after{
  content:'+';font-size:1.35rem;font-weight:500;color:var(--cl-azul);
  flex-shrink:0;transition:transform .2s ease;
}
.cl-faq details[open] summary{background:#f8fafd}
.cl-faq details[open] summary::after{transform:rotate(45deg)}
.cl-faq p{margin:0;padding:0 1.35rem 1.35rem;font-size:.9375rem;line-height:1.7;color:var(--cl-texto)}

/* --------------------------------------------------------------------------
   10. Notas e fecho
   -------------------------------------------------------------------------- */
.cl-nota{margin:1.5rem 0 0;font-size:.875rem;line-height:1.65;color:var(--cl-suave)}
.cl-nota b{color:var(--cl-titulo)}
/* Cor sozinha nao identifica link (WCAG 1.4.1) — sublinhado sempre. */
.cl-nota a,.cl-link{
  color:var(--cl-azul);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}
.cl-destaque{
  display:flex;gap:.9rem;align-items:flex-start;
  margin:0 0 1.85rem;padding:1.15rem 1.35rem;
  background:linear-gradient(140deg,rgba(0,86,183,.07),rgba(18,184,201,.04));
  border:1px solid rgba(0,86,183,.16);border-radius:16px;
  font-size:.9375rem;line-height:1.6;color:var(--cl-texto);
}
.cl-destaque iconify-icon{font-size:1.4rem;color:var(--cl-azul);flex-shrink:0;margin-top:.05rem}
.cl-destaque b{color:var(--cl-titulo)}
/* Variante verde: o aviso de cobranca. Fica DEPOIS da grade, colado nos
   botoes, porque e ali que o medo aparece — a nutri so pensa em cobranca
   dupla no segundo em que vai clicar. */
.cl-destaque--verde{
  margin:1.85rem 0 0;
  background:linear-gradient(140deg,rgba(26,127,69,.08),rgba(26,127,69,.03));
  border-color:rgba(26,127,69,.22);
}
.cl-destaque--verde iconify-icon{color:var(--cl-verde-escuro)}

.cl-fecho{
  padding:4.5rem 1.5rem 5.5rem;text-align:center;
  background:linear-gradient(180deg,#f7f9fd,#eaf0f9);
  border-top:1px solid var(--cl-linha);
}
.cl-btn-grande{
  display:inline-flex;align-items:center;gap:.6rem;
  background:linear-gradient(140deg,var(--cl-azul),#0a72e0);color:#fff;text-decoration:none;
  font-size:1.0625rem;font-weight:700;padding:1.05rem 2.1rem;border-radius:15px;
  box-shadow:0 12px 30px rgba(0,86,183,.34);
  transition:transform .2s ease,box-shadow .2s ease;
}
.cl-btn-grande:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,86,183,.44)}
.cl-fecho__nota{margin:1.35rem 0 0;font-size:.875rem;color:var(--cl-suave)}

/* --------------------------------------------------------------------------
   11. Rodape enxuto — esta pagina nao carrega o rodape de marketing
   -------------------------------------------------------------------------- */
.cl-rodape{background:var(--cl-navy);color:rgba(255,255,255,.62);padding:2.5rem 1.5rem}
.cl-rodape__wrap{
  max-width:68rem;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;
  font-size:.8125rem;
}
.cl-rodape img{height:22px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.9}
.cl-rodape nav{display:flex;flex-wrap:wrap;gap:1rem 1.35rem;margin-left:auto}
.cl-rodape a{color:rgba(255,255,255,.72);text-decoration:none}
.cl-rodape a:hover{color:#fff;text-decoration:underline}
.cl-rodape__cnpj{flex-basis:100%;color:rgba(255,255,255,.55);font-size:.75rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cl-plano,.cl-btn-grande,.cl-fica__card,.cl-toggle button,.cl-abas a,
  .cl-tem__item,.cl-salto,.cl-cta,.cl-entrar{transition:none}
  .cl-plano:hover,.cl-btn-grande:hover,.cl-fica__card:hover,
  .cl-tem__item:hover,.cl-salto:hover,.cl-cta:hover,.cl-entrar:hover{transform:none}
}

/* ==========================================================================
   12. AJUSTES DE CELULAR
   --------------------------------------------------------------------------
   Origem: revisao de UX medida em 390/360/320 (2026-09-16). A pagina inteira
   tinha sido desenhada em largura de desktop — nao existia NENHUMA media
   query de espacamento ou tipografia pra baixo, so as duas funcionais (420px
   pro selo, 767px pra tabela). O celular herdava tudo cru.
   ========================================================================== */

/* BUG — o gradiente da Antenada IA estava MORTO.
   `.cl-tem__item span` (especificidade 0,1,1) vencia `.cl-ia-grad` (0,1,0),
   entao o nome do produto renderizava em rgb(95,109,134), o cinza mais
   apagado da pagina, dentro de um titulo escuro. O background-image estava
   carregado e invisivel. Confirmado no navegador antes de corrigir. */
.cl-tem__item .cl-ia-grad{
  background:linear-gradient(92deg,#E01C68,#C65A12);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* Escala de raio: 12 (miudos) / 18 (cartoes) / 20 (blocos grandes).
   Eram 10 valores distintos no mesmo scroll — 13, 15, 16, 18, 22 e 26 nao se
   distinguem a olho, mas somados leem como falta de sistema. */
.cl-plano,.cl-fica{border-radius:20px}
.cl-destaque{border-radius:18px}
.cl-cta,.cl-btn-grande,.cl-tem__ico,.cl-fica__ico{border-radius:12px}
.cl-barra__trilho,.cl-barra__anual{border-radius:12px}

@media(max-width:600px){

  /* A 320px a pilula "Entrar na plataforma" terminava 31px fora da tela e era
     cortada em silencio por .cl-painel{overflow:hidden} (que existe pro mask
     da textura, entao o documento nem acusava overflow). A 390px ela quebrava
     em duas linhas dentro da propria pilula. */
  .cl-marca{flex-wrap:wrap;gap:.75rem;row-gap:.85rem}
  .cl-marca__logo{height:22px}
  .cl-entrar{font-size:.75rem;padding:.55rem .9rem;min-height:44px;white-space:nowrap}

  /* As abas pediam 534px e so havia 390: "Ajuda" ficava 53px fora da tela e
     "Custo de subir" cortava no meio da palavra, sem barra de rolagem visivel
     (scrollbar-width:none). Nao lia como "tem mais", lia como bug — e a aba
     escondida era justamente a que leva pro WhatsApp. Acompanha a troca de
     rotulo no HTML: "Tabela de renovacao" -> "Tabela", "Custo de subir" ->
     "Trocar". O overflow-x:auto fica como rede de seguranca. */
  .cl-abas nav{padding:0 1rem;gap:0}
  .cl-abas a{font-size:.8125rem;padding:0 .7rem;min-height:46px}

  /* O selo "melhor preco" sumia em TODA largura de celular, e o toggle abre em
     "Mensal" — a nutri via tres palavras neutras e nenhuma pista de que o
     anual compensa. Em grade de 3 colunas ele cabe, e o alvo sobe pra 52px. */
  .cl-toggle{
    display:grid;grid-template-columns:repeat(3,1fr);
    width:100%;margin:0 0 1.75rem;padding:.3rem;border-radius:18px;
  }
  .cl-toggle button{
    gap:.35rem;
    padding:.45rem .25rem;border-radius:12px;
    font-size:.875rem;min-height:52px;
  }
  .cl-economia{display:inline-block}

  /* So de respiro vertical de secao eram 1.080px, 1,28 tela de rolagem. */
  .cl-sec{padding:2.75rem 1.25rem}
  .cl-painel{padding:1.5rem 1.25rem 1.75rem}
  .cl-fecho{padding:3rem 1.25rem 3.5rem}
  .cl-rodape{padding:2rem 1.25rem}
  .cl-h2{margin-bottom:.5rem}
  .cl-sub{margin-bottom:1.5rem;font-size:1rem}

  /* #planos era a unica secao centralizada das sete, e o paragrafo dava 5
     linhas centralizadas — a pior linha de leitura da pagina no celular. */
  .cl-centro{text-align:left}
  .cl-centro .cl-sub{margin-left:0;margin-right:0}

  /* 14 nos de texto abaixo de 12px, incluindo os kickers (11,2px), que sao a
     assinatura da pagina. Piso de 13px no texto de apoio. */
  .cl-kicker{font-size:.75rem;letter-spacing:.11em}
  .cl-tabela thead th{font-size:.75rem}
  .cl-barra__rot,.cl-barra__fora,
  .cl-heranca,.cl-salto__de,.cl-devir{font-size:.8125rem}

  /* Os 5 links do rodape tinham 16px de altura de toque. */
  .cl-rodape nav{margin-left:0;width:100%;gap:0 1.25rem}
  .cl-rodape nav a{display:inline-flex;align-items:center;min-height:44px}

  /* O par mensal x anual em duas colunas nao cabe no celular: sobravam
     112,8px de largura util em 390 e 97,8px em 360, contra 162,6px que o
     "+ R$ 30,00" ocupa a 25,6px. O valor quebrava entre "+ R$" e "30,00".
     Encolher a fonte ate caber exigiria menos de 16px em 360 — o numero
     principal da secao ficaria menor que o texto do paragrafo. Entao as duas
     opcoes empilham, cada uma com a largura inteira. A comparacao continua
     imediata: ficam coladas uma na outra e os valores alinham na mesma
     margem esquerda. */
  .cl-salto__par{grid-template-columns:1fr;gap:.6rem}
  .cl-salto__op{padding:.7rem .9rem}
  .cl-salto__op .cl-salto__valor{font-size:1.5rem;white-space:nowrap}
}