/* ==========================================================================
   site-pricing.css: precos: grade de planos (/precos), resumo de precos (home e hubs), card de plano (layout/_plan-card.php) e add-ons.
   Parte do site.css (tokens, base e o que toda pagina usa vivem la). Este
   arquivo so entra na pagina que tem esta peca: quem decide e o SiteCss, a
   partir das secoes e mockups que a pagina desenhou. Carrega DEPOIS do
   site.css, na ordem fixa do SiteCss::ORDER (a mesma ordem em que as regras
   estavam no arquivo unico, para a cascata nao mudar).
   ========================================================================== */

.st-btn--block { width: 100%; height: 40px; }

.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
}

.st-badge--primary { background: var(--primary); color: #fff; }

.st-badge--soft { background: var(--primary-subtle); color: var(--primary-ink); }

.st-badge--muted { background: var(--bg-alt); border-color: var(--border); color: var(--text-muted); }

/* Linha solta de icone + texto na mesma faixa (a linha de teste gratis da
   grade de precos usa esta peca). */
.st-proof__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
}

.st-proof__item svg { width: 14px; height: 14px; color: var(--primary); flex: 0 0 auto; }

/* 10.14 Precos */
/* Controle segmentado: UMA peca com dois nomes de uso (abas de pilar e toggle
   mensal/anual). O desenho e o mesmo; muda so a altura do trilho e o padding
   do botao. */
.st-tabs,
.st-toggle__group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-seg);
}

.st-toggle__group { height: 40px; }

.st-tabs__btn,
.st-toggle__btn {
  height: 32px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.st-toggle__btn { height: 30px; padding: 0 14px; }

.st-tabs__btn.is-active,
.st-toggle__btn.is-active { background: var(--bg-card); border-color: var(--border); color: var(--text-1); }

.st-toggle { display: inline-flex; align-items: center; gap: 10px; }

.st-pricing__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* O numero de colunas segue a quantidade de planos ativos (2 a 4), para a
   malha nunca ficar com um buraco no fim da linha. */
.st-pricing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }

.st-pricing--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.st-pricing--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.st-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color .2s ease;
}

/* Mesma borda dos outros cards no hover: a primaria a 35%. A regra cinza que
   vivia aqui tinha a mesma especificidade de [data-tilt]:hover e, por vir
   depois no arquivo, apagava o realce justo no card de preco. */
.st-plan:hover { border-color: var(--primary-edge); }

.st-plan--featured { border: 2px solid var(--primary); padding: 23px; }

.st-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.st-plan__name { font-size: 16px; font-weight: 500; color: var(--text-1); }

.st-plan__trial { margin-top: 12px; }

/* Preco longo (R$ 1.199,90) quebra "por mês" inteiro para a linha de baixo,
   nunca no meio da palavra. */
.st-plan__price { margin-top: 16px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }

.st-plan__cur { font-size: 16px; font-weight: 500; color: var(--text-muted); }

.st-plan__val { font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-1); }

.st-plan__per { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* Meses gratis do anual: a unica linha do ciclo anual que o visitante entende
   sem fazer conta, entao ela vem em selo e nao em texto miudo como as outras. */
.st-plan__free { margin-top: 10px; }

.st-plan__free .st-badge { gap: 5px; }

.st-plan__free svg { width: 13px; height: 13px; }

.st-plan__save { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--primary-ink); }

/* Valor da fatura anual (e a nota do plano que so tem mensal): linha discreta
   logo abaixo da economia, visivel so com o toggle em Anual. */
.st-plan__note { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--text-muted); }

.st-plan__note svg { width: 13px; height: 13px; flex: 0 0 auto; }

.st-plan__desc { margin-top: 12px; min-height: 40px; font-size: 14px; line-height: 20px; color: var(--text-muted); }

.st-plan__cta { margin-top: 20px; }

.st-plan__sep { margin: 20px 0; height: 1px; background: var(--border); }

/* "Tudo do Beginner, mais:" abrindo a lista de novidades. Ela fecha com dois
   pontos e nao leva check: nao e um recurso, e a ponte para o card de baixo. */
.st-plan__inherit { margin-bottom: 10px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-1); }

.st-plan__list { display: flex; flex-direction: column; gap: 10px; }

.st-plan__line { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-1-soft); }

.st-plan__line svg { width: 14px; height: 14px; margin-top: 3px; color: var(--primary); flex: 0 0 auto; }

/* Faixa do plano de entrada: o MESMO card, deitado. A moldura da o destaque
   que o dono pediu (borda da primaria a 35% sobre a faixa clara), e o card
   por dentro mantem a anatomia dos outros: selo, teste gratis, preco, frase,
   botao, separador e recursos com check. */
.st-plan-band { margin-top: 12px; }

.st-plan--band {
  display: grid;
  grid-template-columns: minmax(0, 230px) 1px minmax(0, 1fr) auto;
  grid-template-areas:
    "id    sep feats cta"
    "money sep feats cta"
    "desc  sep feats cta";
  align-items: start;
  column-gap: 24px;
  border-color: var(--primary-edge);
  background: var(--bg-alt);
}

/* Deitado, o selo fica ao lado do nome: com o space-between da versao em pe
   ele ia parar na outra ponta da coluna, solto no meio do nada. */
.st-plan--band .st-plan__top { justify-content: flex-start; gap: 10px; }

.st-plan--band .st-plan__id    { grid-area: id; }

.st-plan--band .st-plan__money { grid-area: money; }

.st-plan--band .st-plan__desc  { grid-area: desc; min-height: 0; }

.st-plan--band .st-plan__cta   { grid-area: cta; margin-top: 0; align-self: center; }

.st-plan--band .st-plan__feats { grid-area: feats; align-self: center; }

.st-plan--band .st-plan__sep   { grid-area: sep; margin: 0; width: 1px; height: auto; align-self: stretch; }

/* Preco na altura do nome do plano, nao em display de vitrine: aqui ele
   divide a linha com os recursos e um numero de 40px roubaria a faixa. */
.st-plan--band .st-plan__price { margin-top: 12px; }

.st-plan--band .st-plan__val   { font-size: 28px; line-height: 32px; }

/* Recursos em colunas: em pe eles empilham, deitado a lista ocuparia meia
   faixa em branco. 13px porque a coluna e estreita e "Envio de mensagens
   ilimitado" quebrava em duas linhas no meio da frase. */
.st-plan--band .st-plan__list  { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 10px 20px; }

.st-plan--band .st-plan__line  { font-size: 13px; line-height: 18px; }

/* 10.16 Add-ons */
.st-addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.st-addon { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }

.st-addon__title { margin-top: 14px; font-size: 16px; font-weight: 500; color: var(--text-1-soft); }

.st-addon__desc { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--text-muted); }

.st-addon__price { margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--primary-ink); }

@media (max-width: 1024px) {
  .st-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .st-plan--band { grid-template-columns: minmax(0, 220px) 1px minmax(0, 1fr) auto; column-gap: 20px; }

  .st-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .st-pricing { grid-template-columns: minmax(0, 1fr); }

  .st-addons { grid-template-columns: minmax(0, 1fr); }

  /* A faixa vira card em pe: a coluna de recursos nao cabe ao lado do preco. */
  .st-plan--band {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "id" "money" "desc" "cta" "sep" "feats";
    row-gap: 0;
  }

  .st-plan--band .st-plan__cta { margin-top: 20px; }

  .st-plan--band .st-plan__sep { width: auto; height: 1px; margin: 20px 0; }

  .st-plan--band .st-plan__list { grid-template-columns: minmax(0, 1fr); }
}

/* ── pricing-summary ──────────────────────────────────────────────────────
   Resumo de precos da home e do hub de afiliados. O card e o mesmo da grade
   de /precos (.st-plan*, sem toggle), entao o unico desenho proprio daqui e a
   distancia do botao "Ver todos os planos" para a fileira de cards. */
.st-psum__more { margin-top: 24px; }