/* ==========================================================================
   DIP · pricing.css — estilos específicos da página de preços
   Carregado depois de site.css; usa apenas os tokens de lá.
   ========================================================================== */

/* ---------- Estados de carregamento ---------- */
.pricing-loading { font-size: 13px; color: var(--muted-2); padding: 8px 0; }
.packages-grid > .pricing-loading { grid-column: 1 / -1; }

/* ---------- Custo por módulo ---------- */
.module-pricing { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 6px 32px; }
.module-pricing-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.module-pricing-info { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.module-pricing-info > i { color: var(--moss); font-size: 14px; width: 18px; text-align: center; margin-top: 5px; flex-shrink: 0; }
.module-pricing-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.module-pricing-desc { font-size: 13px; color: var(--muted-2); line-height: 1.6; margin-top: 2px; }
.module-pricing-cost { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.module-pricing-cost-num { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.module-pricing-cost-label { font-size: 12px; color: var(--muted-2); }
.module-pricing-total { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0 16px; font-weight: 600; font-size: 14px; color: var(--ink); }
.module-pricing-total-num { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }

/* ---------- Pacotes ---------- */
.packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; align-items: stretch; }
.pricing-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 28px; display: flex; flex-direction: column; }
.pricing-card--highlighted { border-color: var(--forest); }
.pricing-card-badge { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--moss-2); margin-bottom: 14px; }
.pricing-card-title { font-size: 20px; margin-bottom: 6px; }
.pricing-card-desc { font-size: 13px; color: var(--muted-2); line-height: 1.6; margin-bottom: 18px; }
.pricing-card-price { font-family: var(--font-display); font-size: 34px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; color: var(--ink); margin-top: auto; }
.pricing-card-credits { font-size: 14px; color: var(--ink); margin-top: 8px; }
.pricing-card-credits b { font-weight: 600; }
.pricing-card-per-credit { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.pricing-card .btn { margin-top: 22px; }

/* ---------- Simulação ---------- */
.sim-table td:first-child { color: var(--ink); font-weight: 500; }
.sim-table td:first-child { white-space: nowrap; }
.sim-table th { line-height: 1.4; }
.sim-table .sim-row--highlighted td { background: var(--paper-2); }
.sim-table .sim-row--highlighted td:first-child { font-weight: 600; }
.sim-cell-num { font-family: var(--font-display); font-size: 16px; letter-spacing: -.02em; color: var(--ink); }
.sim-sub { display: none; font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.sim-footnote { font-size: 12px; line-height: 1.7; color: var(--muted-2); margin-top: 16px; max-width: 720px; }
.sim-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 6px 24px; }

/* ---------- Fallback sem API ---------- */
.pricing-fallback { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; }
.pricing-fallback .rate { font-family: var(--font-display); font-size: 40px; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--ink); white-space: nowrap; }
.pricing-fallback .rate small { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 10px; }
.pricing-fallback h3 { margin-bottom: 8px; }
.pricing-fallback p + p { margin-top: 8px; }
.pricing-fallback .btn-text { margin-top: 18px; }
.packages-grid > .pricing-fallback { grid-column: 1 / -1; }

/* ---------- Painel "Sem surpresas" ---------- */
.pricing-promise { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pricing-promise p { max-width: 380px; }

/* ---------- Responsivo ---------- */
@media (max-width: 760px) {
  .module-pricing { padding: 2px 20px; }
  .module-pricing-row { gap: 16px; }
  .module-pricing-cost-num { font-size: 20px; }
  .module-pricing-total { font-size: 13px; }
  .packages-grid { grid-template-columns: 1fr; }
  .pricing-card { padding: 24px; }
  .sim-wrap { padding: 2px 14px; }
  .sim-table th, .sim-table td { padding: 12px 6px; font-size: 13px; }
  .sim-table th { font-size: 11px; }
  .sim-table td:first-child { white-space: normal; }
  .sim-table .sim-col-cost { display: none; }
  .sim-sub { display: block; }
  .sim-cell-num { font-size: 15px; }
  .pricing-fallback { grid-template-columns: 1fr; gap: 20px; }
  .pricing-promise { grid-template-columns: 1fr; gap: 20px; }
}