/* ============================================
   Contact page — Design System v2.0 palette
   Reemplaza los acentos blue/cyan legacy por la marca
   (#385D98 / #2DD4BF) sin tocar la lógica del formulario.
   ============================================ */

.contact-page {
  background:
    radial-gradient(860px 360px at 8% -8%, rgba(56, 93, 152, 0.08), transparent 58%),
    radial-gradient(860px 360px at 92% -10%, rgba(45, 212, 191, 0.08), transparent 56%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 52%, #ffffff 100%) !important;
  font-family: var(--font-body, Inter, sans-serif);
}

.contact-page h1,
.contact-page h2 {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  letter-spacing: -0.02em;
  color: var(--color-text-primary, #0f172a) !important;
}

/* Gradientes legacy → marca */
.contact-page .from-blue-500 {
  --tw-gradient-from: #385D98 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(56, 93, 152, 0) var(--tw-gradient-to-position) !important;
}
.contact-page .to-cyan-400 {
  --tw-gradient-to: #2DD4BF var(--tw-gradient-to-position) !important;
}
.contact-page .bg-blue-500 { background-color: #385D98 !important; }
.contact-page .text-blue-700 { color: #385D98 !important; }
.contact-page .bg-blue-50 { background-color: rgba(56, 93, 152, 0.08) !important; }

/* Tarjetas de proyecto */
.contact-page .project-card {
  border-color: var(--color-border, #e2e8f0) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.contact-page .project-card:hover,
.contact-page .project-card.selected {
  border-color: rgba(45, 212, 191, 0.55) !important;
  box-shadow: 0 16px 32px rgba(56, 93, 152, 0.12) !important;
}
.contact-page .hover\:border-blue-300:hover { border-color: rgba(45, 212, 191, 0.55) !important; }

/* Inputs */
.contact-page input,
.contact-page select,
.contact-page textarea {
  border-radius: 0.75rem;
}
.contact-page input:focus,
.contact-page select:focus,
.contact-page textarea:focus {
  border-color: #385D98 !important;
  box-shadow: 0 0 0 3px rgba(56, 93, 152, 0.12) !important;
}

/* Botones */
.contact-page .bg-gradient-to-r.from-blue-500 {
  box-shadow: 0 10px 22px rgba(56, 93, 152, 0.25);
}
.contact-page .hover\:from-blue-600:hover {
  --tw-gradient-from: #2D4A7A var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(45, 74, 122, 0) var(--tw-gradient-to-position) !important;
}
.contact-page .hover\:to-cyan-500:hover {
  --tw-gradient-to: #24B4A7 var(--tw-gradient-to-position) !important;
}

/* Paso activo */
.contact-page .step-indicator.active .bg-blue-500,
.contact-page .bg-blue-500.rounded-full {
  background: linear-gradient(135deg, #385D98, #2DD4BF) !important;
}

/* --------------------------------------------
   DARK MODE
   -------------------------------------------- */
[data-theme="dark"] .contact-page {
  background:
    radial-gradient(860px 360px at 8% -8%, rgba(56, 93, 152, 0.12), transparent 58%),
    radial-gradient(860px 360px at 92% -10%, rgba(45, 212, 191, 0.08), transparent 56%),
    linear-gradient(180deg, #0a0f1c 0%, #111827 52%, #0a0f1c 100%) !important;
  color: #e2e8f0;
}

[data-theme="dark"] .contact-page .bg-white\/80,
[data-theme="dark"] .contact-page .bg-white\/60 {
  background-color: rgba(15, 23, 42, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .contact-page h1,
[data-theme="dark"] .contact-page h2,
[data-theme="dark"] .contact-page .text-slate-900 {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .contact-page .text-slate-600,
[data-theme="dark"] .contact-page .text-slate-700 {
  color: #94a3b8 !important;
}

[data-theme="dark"] .contact-page input,
[data-theme="dark"] .contact-page select,
[data-theme="dark"] .contact-page textarea {
  background-color: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.1);
}