/* =========================================================
   Needle Syndicate · Página Pro Account (programa B2B)
   Misma paleta que la tienda: negro/hueso, rojo solo de acento.
   Formulario: 2 columnas desde 640 px, 1 columna en móvil.
   ========================================================= */

.ns-pro { color: var(--ns-bone); }
.ns-pro-section__title { margin: 0 0 var(--ns-space-6); font-size: var(--ns-display-lg); color: #fff; }

/* ---------- Cabecera de la página ---------- */
.ns-pro-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem);
  border-bottom: 1px solid var(--ns-line);
  background:
    radial-gradient(60% 70% at 12% 15%, rgba(200, 16, 46, 0.30), transparent 65%),
    radial-gradient(40% 50% at 95% 90%, rgba(200, 16, 46, 0.12), transparent 70%),
    var(--ns-black);
}
.ns-pro-hero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ns-pro-hero__title { margin: 0.5rem 0 1rem; max-width: 14ch; font-size: var(--ns-display-xl); color: #fff; text-shadow: 0 0 18px rgba(255, 31, 74, 0.35); }
.ns-pro-hero__lead { margin: 0; max-width: 52ch; font-size: var(--ns-text-md); color: var(--ns-bone); }
.ns-pro-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--ns-space-3); margin: var(--ns-space-6) 0 0; }

.ns-pro-hero__panel { padding: var(--ns-space-6); background: var(--ns-surface); border: 1px solid var(--ns-line); border-top: 2px solid var(--ns-red); border-radius: var(--ns-radius); }
.ns-pro-list { list-style: none; margin: var(--ns-space-4) 0 0; padding: 0; display: grid; gap: var(--ns-space-4); }
.ns-pro-list li { position: relative; padding-left: 1.25rem; font-size: var(--ns-text-sm); color: var(--ns-bone-60); line-height: 1.5; }
.ns-pro-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--ns-red); box-shadow: 0 0 10px rgba(255, 31, 74, 0.6); }
.ns-pro-list strong { display: block; color: var(--ns-bone); font-weight: 600; }

@media (max-width: 1023px) {
  .ns-pro-hero__grid { grid-template-columns: 1fr; }
  .ns-pro-hero__title { max-width: none; }
}

/* ---------- Pasos ---------- */
.ns-pro-steps { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--ns-line); }
.ns-pro-steps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ns-space-4); }
.ns-pro-step { display: grid; gap: 0.4rem; padding: var(--ns-space-6); background: var(--ns-surface); border: 1px solid var(--ns-line); border-radius: var(--ns-radius); font-size: var(--ns-text-sm); color: var(--ns-bone-60); line-height: 1.5; }
.ns-pro-step strong { font-size: var(--ns-text-md); color: #fff; }
.ns-pro-step__num { font-family: var(--ns-font-display); font-size: 2.25rem; line-height: 1; color: var(--ns-red); }
@media (max-width: 767px) { .ns-pro-steps__grid { grid-template-columns: 1fr; } }

/* ---------- Solicitud ---------- */
.ns-pro-apply { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); }
.ns-pro-apply__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ns-pro-apply__intro p { margin: 0; color: var(--ns-bone-60); }
@media (max-width: 1023px) { .ns-pro-apply__grid { grid-template-columns: 1fr; } }

.ns-pro-form-wrap { position: relative; scroll-margin-top: 96px; }
.ns-pro-notice { margin: 0 0 var(--ns-space-4); padding: var(--ns-space-3) var(--ns-space-4); border-left: 3px solid var(--ns-red); background: var(--ns-surface); color: var(--ns-bone); }
.ns-pro-notice--ok { border-left-color: var(--ns-ok); }

.ns-pro-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-4); }
.ns-pro-form__field { display: grid; gap: 0.4rem; min-width: 0; }
.ns-pro-form__field--wide { grid-column: 1 / -1; }
.ns-pro-form label { font-size: var(--ns-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ns-bone-60); }
.ns-pro-form__req { color: var(--ns-red); }

.ns-pro-form input:not([type="checkbox"]):not([type="hidden"]), .ns-pro-form select, .ns-pro-form textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  background: #0b0908; color: var(--ns-bone);
  border: 1px solid var(--ns-bone-30); border-radius: var(--ns-radius);
  font: 400 var(--ns-text-md) var(--ns-font-body);
  transition: border-color var(--ns-dur-fast), box-shadow var(--ns-dur-fast);
}
.ns-pro-form textarea { min-height: 120px; resize: vertical; }
.ns-pro-form select {
  appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23efe6d8' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 0.9rem center;
}
.ns-pro-form input:focus, .ns-pro-form select:focus, .ns-pro-form textarea:focus { outline: none; border-color: var(--ns-neon); box-shadow: 0 0 0 3px rgba(255, 31, 74, 0.25); }
.ns-pro-form .has-error input, .ns-pro-form .has-error select, .ns-pro-form .has-error textarea { border-color: var(--ns-red); }
.ns-pro-form__error { font-size: var(--ns-text-sm); color: #ff6b84; }
.ns-pro-form__hint { font-size: var(--ns-text-xs); letter-spacing: 0; text-transform: none; color: var(--ns-bone-60); }

.ns-pro-form__check label { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--ns-text-sm); letter-spacing: 0; text-transform: none; color: var(--ns-bone); line-height: 1.5; cursor: pointer; }
.ns-pro-form__check input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0.15rem 0 0; accent-color: var(--ns-red); }
.ns-pro-form__check a { color: var(--ns-bone); text-decoration: underline; }
.ns-pro-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-4); margin-top: var(--ns-space-2); }
.ns-pro-form__submit .ns-btn { border: 0; }

/* Honeypot: fuera de pantalla, nunca display:none (algunos bots lo detectan) */
.ns-pro-form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 639px) {
  .ns-pro-form { grid-template-columns: 1fr; }
  .ns-pro-form__submit .ns-btn { width: 100%; }
}

/* ---------- Tarjetas de estado (activa / en revisión) ---------- */
.ns-pro-card { padding: var(--ns-space-6); background: var(--ns-surface); border: 1px solid var(--ns-line); border-top: 2px solid var(--ns-ok); border-radius: var(--ns-radius); }
.ns-pro-card__title { margin: 0.25rem 0 0.75rem; font-family: var(--ns-font-display); font-size: var(--ns-display-lg); font-weight: 400; letter-spacing: 0.02em; line-height: 0.95; text-transform: uppercase; color: #fff; }
.ns-pro-card p { margin: 0 0 var(--ns-space-3); color: var(--ns-bone); }
.ns-pro-card__actions { display: flex; flex-wrap: wrap; gap: var(--ns-space-3); margin-top: var(--ns-space-4); }