/* =========================================================
   CELDO — Onboarding (Planos)
   Este CSS depende dos tokens e base do celdo-ui.css
   ========================================================= */

.celdo-onboarding{
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 16px 32px;
}

.celdo-onboarding h2{
  margin: 8px 0 6px;
  font-weight: var(--celdo-weight-bold);
  color: var(--celdo-text-main);
}

.celdo-onboarding p{
  margin: 0 0 18px;
  color: var(--celdo-text-secondary);
}

/* Tabs (ANUAL/SEMESTRAL/MENSAL) */
.celdo-tabs{
  display: flex;
  gap: 10px;
  margin: 18px 0 18px;
}

.celdo-tabs a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--celdo-border);
  background: var(--celdo-slate-100);
  color: var(--celdo-blue);
  font-weight: var(--celdo-weight-bold);
  text-decoration: none;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease, transform .02s ease;
}

.celdo-tabs a:hover{
  background: var(--celdo-slate-50);
}

.celdo-tabs a:active{
  transform: translateY(1px);
}

/* Para marcar a aba ativa, prefira adicionar a classe no PHP: .is-active */
.celdo-tabs a.is-active{
  background: var(--celdo-blue);
  color: #fff;
  border-color: transparent;
}

/* Grid dos cards */
.celdo-pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 980px){
  .celdo-pricing-grid{ grid-template-columns: 1fr; }
}

/* Card base: aproveita padrão do tema (celdo-card) */
.celdo-onboarding .celdo-card{
  background: var(--celdo-white);
  border: 1px solid var(--celdo-border);
  border-radius: var(--celdo-radius-md);
  box-shadow: var(--celdo-shadow-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Se você quiser manter um destaque leve no “card do meio”, ok.
   (não confundir com “Mais vendido”) */
.celdo-card--destaque{
  box-shadow: var(--celdo-shadow-md);
  border-color: rgba(0, 61, 121, .22);
}

/* Título do plano */
.celdo-plano-titulo-wrap{
  text-align: center;
  margin-top: 2px;
}

.celdo-plano-titulo{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .6px;
  color: var(--celdo-blue);
  text-transform: uppercase;
}

/* Descrição */
.celdo-plano-desc{
  margin: 0;
  color: var(--celdo-text-secondary);
  font-size: 14px;
  line-height: 1.55;
  min-height: 44px; /* mantém altura consistente entre cards */
}

/* Preço */
.celdo-preco{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}

.celdo-preco .valor{
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--celdo-text-main);
}

.celdo-preco .periodo{
  font-size: 13px;
  color: var(--celdo-text-meta);
}

.celdo-preco-sec{
  font-size: 13px;
  color: var(--celdo-text-meta);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--celdo-border);
}

/* Benefícios */
.celdo-beneficios{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.celdo-beneficios li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--celdo-text-main);
  font-size: 14px;
}

.celdo-beneficios .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--celdo-blue);
  margin-top: 6px;
  flex: 0 0 10px;
}

/* CTA */
.celdo-cta:hover{ filter: brightness(1.05); }
.celdo-cta:active{ transform: translateY(1px); }

/* =========================================================
   “Mais vendido” — DESATIVADO por enquanto (conforme solicitado)
   Quando você quiser ativar, descomente e use o HTML correspondente.
   ========================================================= */

/*
.celdo-badge{
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--celdo-danger);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: var(--celdo-weight-bold);
  box-shadow: var(--celdo-shadow-sm);
}
*/

/* Complemento: CTA no card (mantém estilos base em celdo-ui.css) */
.celdo-onboarding .celdo-cta{ margin-top: auto; }