/* Borrador de diagnóstico: formulario amplio, información clara y orden móvil útil. */
:root {
  --bg: #05070d;
  --bg-2: #080d17;
  --panel: rgba(12, 22, 38, .88);
  --panel-strong: rgba(8, 13, 23, .96);
  --line: rgba(120, 160, 255, .22);
  --accent: #5e95ff;
  --accent-2: #4fd8ff;
}

body { background: #05070d; }
.page-hero {
  padding-top: clamp(58px, 7vw, 92px);
  padding-bottom: clamp(52px, 7vw, 88px);
}

.page-hero h1 {
  max-width: 20ch;
  font: 600 clamp(2.45rem, 5.6vw, 4.2rem)/1.08 "Geist", Inter, ui-sans-serif, sans-serif;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.page-hero .lede {
  max-width: 58ch;
  color: #b5c2d7;
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  line-height: 1.7;
}

.page-hero .section-label {
  color: #b8c9e5;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* El diagnóstico es una sección larga; fija el planeta al hero de apertura,
   no al centro de todo el formulario. */
.diagnostic-concept .page-hero .planet {
  top: 2rem;
  right: 0;
  width: min(42vw, 520px);
  height: min(42vw, 520px);
  transform: none;
  opacity: .38;
}

.form-shell {
  width: 100%;
  max-width: 1180px;
  grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(28px, 4vw, 48px);
}

.diagnostic-concept .page-hero > .form-shell {
  width: 100%;
  max-width: 1180px;
}

.form-aside,
.form-card {
  min-width: 0;
  border-color: rgba(142,177,235,.22);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(17,28,47,.96), rgba(8,15,27,.96));
  box-shadow: 0 30px 80px -55px rgba(0,0,0,.9);
}

.preview-status-notice {
  display: grid;
  gap: 4px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(94,149,255,.32);
  border-left: 3px solid #5e95ff;
  border-radius: 10px;
  background: rgba(18,34,58,.72);
  color: #b5c2d7;
  font-size: .92rem;
  line-height: 1.58;
}
.preview-status-notice strong { color: #e8f1ff; }

.form-aside { padding: clamp(22px, 3vw, 34px); }
.form-card { padding: clamp(22px, 3.5vw, 42px); }
#diagnostico-form { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); }
.form-aside h2,
.form-step h2,
[data-local-result] h2 { font-family: "Geist", Inter, ui-sans-serif, sans-serif; letter-spacing: -.035em; }
.form-aside h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.18; }
.form-step h2 { font-size: clamp(1.55rem, 2.4vw, 2.1rem); line-height: 1.2; }
.form-note { color: #aab9ce; line-height: 1.62; }
.danca-diag-deliverable { border-color: rgba(142,177,235,.16); }
.danca-diag-privacy { color: #aab9ce; line-height: 1.62; }
.field { gap: 9px; margin-bottom: 21px; }
.field label { color: #eef4ff; font-size: .96rem; font-weight: 600; }
.field input,
.field textarea,
.field select {
  min-height: 50px;
  border-radius: 8px;
  border-color: rgba(142,177,235,.28);
  background: rgba(4,10,19,.56);
  font-size: 16px;
}
.field textarea { min-height: 132px; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: rgba(110,165,255,.8); box-shadow: 0 0 0 3px rgba(94,149,255,.16); }
.choice { align-items: flex-start; border-radius: 8px; border-color: rgba(142,177,235,.18); line-height: 1.58; }
.choice input { flex: none; margin-top: .3em; accent-color: #78a9ff; }
.form-actions { justify-content: flex-start; flex-wrap: wrap; }
.form-actions .btn { min-height: 48px; }
.btn-primary { background: #dce9ff; color: #071326; border-color: #dce9ff; }
.btn-primary:hover { background: #fff; }
.diagnostic-concept .form-actions .btn:disabled { opacity: .48; filter: saturate(.45); cursor: not-allowed; box-shadow: none; }
.diagnostic-concept .form-actions .btn:disabled:hover { transform: none; }
.status-box { border-radius: 8px; line-height: 1.6; }

@media (max-width: 991px) {
  .form-shell { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .page-hero { padding-top: 44px; }
  .page-hero h1 { max-width: 14ch; font-size: clamp(2.35rem, 10vw, 3.6rem); }
  .diagnostic-concept .page-hero .planet {
    top: 68px;
    right: -30%;
    bottom: auto;
    width: min(100vw, 380px);
    height: min(100vw, 380px);
    opacity: .22;
  }
  .form-shell { gap: 14px; margin-top: 18px; }
  .form-card { order: 1; }
  .form-aside { order: 2; }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}