/* ============================================================
   IMPER CREDI BRASIL — DESIGN SYSTEM (Etapa 1 — Grupo 26)
   Componentes reutilizáveis compartilhados por Landing + Cadastro.
   Usa exclusivamente os tokens de variables.css — nenhuma cor nova.

   Cada bloco abaixo agrupa o nome novo (.ds-*) com o(s) nome(s)
   legado(s) já usados em landing.css/landing.js, para que a Landing
   continue funcionando sem nenhuma mudança de markup, enquanto o
   Cadastro (e futuras páginas, no Grupo 27) passam a consumir
   diretamente as classes .ds-*.
   ============================================================ */

/* ---------- Foco visível (acessibilidade) ---------- */
.ds-btn:focus-visible,
.ds-input:focus-visible,
.ds-select:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 2px;
}

/* ============================================================
   BUTTON
   ============================================================ */
.ds-btn,
.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: all var(--transition-base);
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.ds-btn:disabled, .ds-btn.is-disabled,
.landing-btn:disabled, .landing-btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Variante: dourado (CTA principal da marca) */
.ds-btn-primary,
.landing-btn-primary {
  background: var(--color-brand-gold);
  color: var(--color-brand-black);
}
.ds-btn-primary:hover:not(:disabled),
.landing-btn-primary:hover:not(:disabled) { background: var(--color-brand-gold-light); }

/* Variante: gradiente vermelho (CTA de destaque na landing) */
.ds-btn-accent,
.landing-btn-accent {
  background: linear-gradient(135deg, var(--color-brand-red-light), var(--color-brand-red));
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(200, 16, 46, 0.65);
}
.ds-btn-accent:hover:not(:disabled),
.landing-btn-accent:hover:not(:disabled) {
  box-shadow: 0 10px 28px -6px rgba(200, 16, 46, 0.8);
  transform: translateY(-1px);
}

/* Variante: vermelho sólido (CTA principal de formulário — cadastro) */
.ds-btn-red {
  background: var(--color-primary);
  color: #fff;
}
.ds-btn-red:hover:not(:disabled) { background: var(--color-primary-light); }

/* Variante: branco sólido (ação secundária — sempre com cor, nunca "invisível" no fundo escuro) */
.ds-btn-secondary,
.landing-btn.landing-btn-secondary {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-brand-black);
}
.ds-btn-secondary:hover:not(:disabled),
.landing-btn.landing-btn-secondary:hover:not(:disabled) { background: var(--color-text); border-color: var(--color-text); }

/* Variante: dourado com preenchimento leve (ação terciária, mas ainda com cor visível) */
.ds-btn-outline,
.landing-btn.landing-btn-outline {
  background: rgba(201, 168, 76, 0.14);
  border: 1.5px solid var(--color-brand-gold);
  color: var(--color-brand-gold);
}
.ds-btn-outline:hover:not(:disabled),
.landing-btn.landing-btn-outline:hover:not(:disabled) { background: rgba(201, 168, 76, 0.24); color: var(--color-brand-gold-light); }

/* Variante: fantasma (sem fundo nem borda) */
.ds-btn-ghost,
.landing-btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.ds-btn-ghost:hover:not(:disabled),
.landing-btn-ghost:hover:not(:disabled) { color: var(--color-text); }

/* Variante: branco sólido */
.ds-btn-white,
.landing-btn-white {
  background: #fff;
  color: var(--color-brand-black);
}
.ds-btn-white:hover:not(:disabled),
.landing-btn-white:hover:not(:disabled) { background: #eee; }

/* Tamanhos e formato */
.ds-btn-block { width: 100%; }
.ds-btn-lg { padding: 14px; font-size: 0.95rem; margin-top: 8px; }
.ds-btn-sm { flex: 1; padding: 10px; font-size: 0.8rem; border-radius: var(--radius-sm); }

/* ============================================================
   CARD (superfície base)
   ============================================================ */
.ds-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.ds-card-flat { background: var(--color-bg); }
.ds-card-lg { border-radius: var(--radius-xl); padding: var(--space-8); }

/* ============================================================
   SOLUTION CARD (grid de soluções da landing)
   ============================================================ */
.ds-solution-card,
.landing-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s, transform .2s;
  overflow: hidden;
}
.ds-solution-card::before,
.landing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brand-red), transparent);
}
.ds-solution-card:hover,
.landing-card:hover { border-color: var(--color-brand-gold); transform: translateY(-2px); }
.ds-solution-card-number,
.landing-card-number {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-brand-red-light);
  letter-spacing: .05em;
}
.ds-solution-card h3,
.landing-card h3 { font-size: 1.1rem; font-weight: 700; margin: 0; color: #fff; }
.ds-solution-card p,
.landing-card p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; margin: 0; flex: 1; }
.ds-solution-card-link,
.landing-card-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-brand-gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  align-self: flex-start;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   BENEFIT CARD (grid de benefícios do app)
   ============================================================ */
.ds-benefit-card,
.landing-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.ds-benefit-card h3,
.landing-benefit h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 4px; color: var(--color-text); }
.ds-benefit-card p,
.landing-benefit p { font-size: 0.83rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; }

/* Cartão de contato (mesma estrutura de BenefitCard, com hover) */
.ds-contact-card,
.landing-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  transition: border-color .2s;
}
.ds-contact-card:hover,
.landing-contact-item:hover { border-color: var(--color-brand-gold); }
.ds-contact-card h4,
.landing-contact-item h4 { font-size: 0.85rem; font-weight: 700; margin: 0 0 2px; color: var(--color-text); }
.ds-contact-card span,
.landing-contact-item span { font-size: 0.82rem; color: var(--color-text-muted); }

/* ============================================================
   ICON CONTAINER
   ============================================================ */
.ds-icon-container,
.landing-card-icon,
.landing-benefit-icon,
.landing-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.landing-card-icon,
.ds-icon-container--plain {
  width: 40px;
  height: 40px;
  color: var(--color-text-muted);
}
.landing-benefit-icon,
.ds-icon-container--boxed {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-surface-2);
  color: var(--color-brand-gold);
}
.landing-contact-icon,
.ds-icon-container--boxed-lg {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--color-brand-gold);
}

/* ============================================================
   TRUST ITEM
   ============================================================ */
.ds-trust-item,
.landing-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
}
.ds-trust-item svg,
.landing-trust-item svg { flex-shrink: 0; color: var(--color-brand-gold); width: 18px; height: 18px; }
.ds-trust-item span,
.landing-trust-item span { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; }

/* ============================================================
   SECTION TITLE (rótulo neutro, usado em formulários)
   ============================================================ */
.ds-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 12px;
}
.ds-section-title--first { margin-top: 0; }

/* Eyebrow (rótulo dourado de destaque, usado na landing) */
.ds-eyebrow,
.landing-eyebrow {
  display: inline-block;
  color: var(--color-brand-gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ============================================================
   CTA (bloco de chamada para ação)
   ============================================================ */
.ds-cta,
.landing-cta-final {
  text-align: center;
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 56px 32px;
}
.ds-cta h2,
.landing-cta-final h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin: 0 0 12px; color: #fff; }
.ds-cta p,
.landing-cta-final p { color: var(--color-text-muted); margin: 0 0 28px; font-size: 0.98rem; }
.ds-cta-actions,
.landing-cta-final-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   BADGE
   ============================================================ */
.ds-badge {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  text-align: center;
}
.ds-badge-gold { background: rgba(201, 168, 76, .1); border: 1px solid rgba(201, 168, 76, .3); color: var(--color-brand-gold); }
.ds-badge-warning { background: var(--color-warning-bg); border: 1px solid rgba(245, 158, 11, .3); color: var(--color-warning); }
.ds-badge-danger { background: var(--color-danger-bg); border: 1px solid rgba(239, 68, 68, .3); color: var(--color-danger); }
.ds-badge-success { background: var(--color-success-bg); border: 1px solid rgba(34, 197, 94, .3); color: var(--color-success); }

/* ============================================================
   FORM: FormGroup / Input / Select
   ============================================================ */
.ds-form-group { margin-bottom: 14px; position: relative; }
.ds-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.ds-label .ds-required { color: var(--color-primary); margin-left: 2px; }

.ds-input,
.ds-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--input-text);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: border-color var(--transition-fast);
}
.ds-input:focus,
.ds-select:focus { outline: none; border-color: var(--input-focus); box-shadow: 0 0 0 3px rgba(200, 16, 46, .12); }
.ds-input::placeholder { color: var(--input-placeholder); }
.ds-input.has-toggle { padding-right: 42px; }

.ds-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ds-form-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 4px; }
.ds-form-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  margin-top: 4px;
  min-height: 16px;
}
/* Estados padronizados de campo/mensagem */
.ds-form-error.is-checking { color: var(--color-text-muted); }
.ds-form-error.is-success { color: var(--color-success); }
.ds-form-error.is-error { color: var(--color-danger); }

.ds-divider { border: none; border-top: 1px solid var(--color-border); margin: 20px 0; }

/* Botão de alternar visibilidade de senha, dentro do input */
.ds-toggle-pass {
  position: absolute;
  right: 10px;
  bottom: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-toggle-pass:hover { color: var(--color-text); }
.ds-toggle-pass svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   ESTADOS DE UI PADRONIZADOS
   ============================================================ */
.is-loading { opacity: .7; pointer-events: none; }
.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.is-hidden { display: none !important; }
.is-visible { display: block !important; }