/* Contratar: formulario y vista previa del mensaje. */
/* Contratar */
.buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .buy { grid-template-columns: minmax(0, 1fr); } }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .form { grid-template-columns: minmax(0, 1fr); } }
.form .fld { display: grid; gap: 6px; min-width: 0; }
.form label { font-weight: 600; font-size: .9rem; }
.form .err { color: var(--accent); font-weight: 600; font-size: .9rem; min-height: 1.4em; }
.preview {
  font: 400 .85rem/1.55 var(--f-mono); background: var(--navy); color: var(--navy-fg); border-radius: 8px; padding: 16px;
  white-space: pre-wrap; overflow-wrap: anywhere; min-height: 12em; border: 0; width: 100%; resize: none;
}
.side { display: grid; gap: 14px; min-width: 0; }
.side h3 { font-weight: 800; font-stretch: 110%; font-size: 1.5rem; line-height: 1.1; }
.side ol { margin: 0; padding-left: 1.2em; color: var(--muted); display: grid; gap: 6px; }