/* /clinics/ — formulario profesional. Se apoya en styles.css (tokens, .form-*,
   .nav, .footer, .btn) y solo agrega lo propio de esta pagina. */

.cl-hero {
  padding: 150px 0 48px;
  background: radial-gradient(circle at 78% 12%, #16324a 0%, var(--bg-deep) 62%);
}
.cl-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-top: 10px;
}
.cl-hero h1 em { font-style: italic; color: var(--accent); }
.cl-sub {
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 60ch;
  margin-top: 20px;
}

/* Desvio para compradores particulares: tiene que verse ANTES del formulario */
.cl-redirect {
  margin-top: 30px;
  padding: 16px 20px;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.07);
  font-size: 0.94rem;
  color: var(--text-primary);
  max-width: 60ch;
}
.cl-redirect strong { color: var(--accent-warm); }
.cl-redirect a { color: var(--accent); font-weight: 600; white-space: nowrap; }

.cl-formwrap { padding: 20px 0 90px; background: var(--bg-deep); }
.cl-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 44px;
  align-items: start;
}

.cl-aside { position: sticky; top: 100px; }
.cl-aside h2 {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text-primary);
  margin: 26px 0 12px;
}
.cl-aside h2:first-child { margin-top: 0; }
.cl-note {
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.cl-warn {
  border-left: 2px solid var(--accent-warm);
  padding-left: 14px;
  color: var(--text-primary);
}

.cl-steps { list-style: none; padding: 0; margin: 0; }
.cl-steps li { display: flex; gap: 14px; margin-bottom: 18px; }
.cl-steps span {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: var(--accent-glow);
  border: 1px solid rgba(45, 212, 168, 0.45);
  color: var(--accent);
  font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cl-steps div { font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.cl-steps b { display: block; color: var(--text-primary); font-weight: 600; margin-bottom: 2px; }

.cl-card { max-width: none; }
/* Separadores de bloque dentro del formulario: sin <fieldset> para no heredar
   los margenes que trae el user-agent y que rompen el grid de .form-row. */
.cl-legend {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 26px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.cl-legend:first-of-type { margin-top: 8px; }

@media (max-width: 900px) {
  .cl-grid { grid-template-columns: 1fr; gap: 30px; }
  .cl-aside { position: static; order: 2; }
  .cl-card { order: 1; }
}
@media (max-width: 640px) {
  .cl-hero { padding: 120px 0 36px; }
  .cl-redirect { font-size: 0.9rem; }
  .cl-redirect a { white-space: normal; }
}