/* ═══════════════════════════════════════════════════════════════
   House of A&N — registro.css  |  Premium Redesign
   Tipografía: Cormorant Garamond (display) + DM Sans (body)
═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg: #080809;
  --bg-2: #0d0e11;
  --surface: rgba(13, 14, 18, 0.82);
  --surface-2: rgba(18, 19, 26, 0.6);
  --border: rgba(255, 255, 255, 0.07);
  --border-focus: rgba(212, 175, 55, 0.5);

  --gold: #d4af37;
  --gold-2: #b8922a;
  --gold-3: #f0cc55;
  --gold-dim: rgba(212, 175, 55, 0.12);
  --gold-glow: rgba(212, 175, 55, 0.22);

  --text: rgba(255, 255, 255, 0.93);
  --text-2: rgba(255, 255, 255, 0.58);
  --text-3: rgba(255, 255, 255, 0.36);

  --danger: #ff6b80;
  --success: #5ee27a;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --shadow-card:
    0 40px 100px rgba(0, 0, 0, 0.65), 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-input: 0 2px 8px rgba(0, 0, 0, 0.25);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;

  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset base ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

body.page-registro {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Canvas partículas ──────────────────────────────────────── */
#particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

/* ── Líneas decorativas ─────────────────────────────────────── */
.deco-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.deco-line {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.05),
    transparent
  );
  height: 1px;
  width: 100%;
  transform-origin: left center;
}
.deco-line--1 {
  top: 28%;
  transform: rotate(-8deg) scaleX(1.3);
}
.deco-line--2 {
  top: 55%;
  transform: rotate(5deg) scaleX(1.2);
  opacity: 0.6;
}
.deco-line--3 {
  top: 78%;
  transform: rotate(-3deg) scaleX(1.1);
  opacity: 0.4;
}

/* ── Layout raíz ────────────────────────────────────────────── */
.rg-root {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
}
.rg-layout {
  display: flex;
  width: 100%;
  min-height: 100dvh;
}

/* ══════════════════════════════════════════════════════════════
   PANEL BRAND (izquierdo)
══════════════════════════════════════════════════════════════ */
.rg-panel--brand {
  flex: 0 0 420px;
  width: 420px;
  min-height: 100dvh;
  position: sticky;
  top: 0;
  height: 100dvh;
  background:
    radial-gradient(
      ellipse 700px 500px at -10% 30%,
      rgba(212, 175, 55, 0.09),
      transparent 65%
    ),
    radial-gradient(
      ellipse 500px 400px at 110% 75%,
      rgba(212, 175, 55, 0.06),
      transparent 65%
    ),
    linear-gradient(175deg, #0c0d11 0%, #080809 60%, #0a0b0e 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.brand-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 3rem 2.5rem;
  position: relative;
  z-index: 2;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3.5rem;
}

.brand-logo-wrap {
  position: relative;
  flex-shrink: 0;
}
.brand-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: rgba(0, 0, 0, 0.35);
  padding: 6px;
  position: relative;
  z-index: 1;
  transition: transform var(--transition);
}
.brand-logo:hover {
  transform: scale(1.04);
}
.brand-logo-glow {
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.18),
    transparent 70%
  );
  filter: blur(8px);
  pointer-events: none;
}

.brand-tag {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(212, 175, 55, 0.2);
  padding: 6px 14px;
  border-radius: 100px;
}

.brand-body {
  margin-bottom: 2.5rem;
}
.brand-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
  margin-bottom: 1rem;
}
.brand-headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.2rem;
  letter-spacing: -0.5px;
}
.brand-headline em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.brand-desc {
  font-size: 0.93rem;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 300px;
}

.brand-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: auto;
}
.brand-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  transition:
    background var(--transition),
    border-color var(--transition);
  cursor: default;
}
.brand-feature:hover {
  background: rgba(212, 175, 55, 0.055);
  border-color: rgba(212, 175, 55, 0.15);
}
.feat-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gold-dim);
  border: 1px solid rgba(212, 175, 55, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1rem;
  transition: transform var(--transition);
}
.brand-feature:hover .feat-icon {
  transform: scale(1.08);
}
.feat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.feat-text strong {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text);
  display: block;
}
.feat-text {
  font-size: 0.8rem;
  color: var(--text-2);
}

.brand-footer {
  margin-top: 2.5rem;
}
.brand-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  margin-bottom: 1rem;
}
.brand-footer-text {
  font-size: 0.75rem;
  color: var(--text-3);
  letter-spacing: 0.3px;
}

.brand-ornament {
  position: absolute;
  bottom: -60px;
  right: -80px;
  width: 340px;
  height: 340px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   PANEL FORMULARIO (derecho)
══════════════════════════════════════════════════════════════ */
.rg-panel--form {
  flex: 1;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    radial-gradient(
      ellipse 600px 400px at 90% 5%,
      rgba(212, 175, 55, 0.04),
      transparent 60%
    ),
    linear-gradient(170deg, #0d0e12 0%, #080809 100%);
  overflow-y: auto;
  padding: 3rem 2rem;
}

.form-inner {
  width: 100%;
  max-width: 660px;
  padding: 2.5rem 0;
  animation: fadeUp 0.55s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-mobile-header {
  display: none;
  justify-content: center;
  margin-bottom: 2rem;
}
.mobile-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: rgba(0, 0, 0, 0.3);
  padding: 8px;
}

.form-header {
  margin-bottom: 2.4rem;
}
.form-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(212, 175, 55, 0.2);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 1rem;
}
.form-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.3px;
  margin-bottom: 0.5rem;
}
.form-subtitle {
  font-size: 0.9rem;
  color: var(--text-2);
}

/* ── Grid de campos ─────────────────────────────────────────── */
.fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.field-wrap[data-col="full"] {
  grid-column: 1 / -1;
}
.field-wrap[data-col="half"] {
  grid-column: span 1;
}

.field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 0.52rem;
  transition: color var(--transition);
}
.field-wrap:focus-within .field-label {
  color: var(--gold);
}

.req-mark {
  text-decoration: none;
  color: var(--gold);
  font-weight: 800;
}

.field-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
  overflow: hidden;
}
.field-input-wrap:focus-within {
  border-color: var(--border-focus);
  background: rgba(212, 175, 55, 0.03);
  box-shadow:
    0 0 0 3px rgba(212, 175, 55, 0.1),
    var(--shadow-input);
}

.field-icon {
  flex-shrink: 0;
  width: 46px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 1rem;
  border-right: 1px solid var(--border);
  padding: 0 12px;
  transition:
    color var(--transition),
    border-color var(--transition);
  pointer-events: none;
  min-height: 52px;
}
.field-input-wrap:focus-within .field-icon {
  color: var(--gold);
  border-right-color: rgba(212, 175, 55, 0.2);
}

/* Icono más compacto para los sub-inputs de fecha */
.field-icon--sm {
  width: 38px;
  padding: 0 8px;
  min-height: 48px;
  font-size: 0.9rem;
}

.field-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.93rem;
  padding: 0.85rem 1rem;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
}
.field-input::placeholder {
  color: var(--text-3);
}

/* Select */
.field-select-wrap {
  position: relative;
}
.field-select {
  width: 100%;
  padding-right: 2.5rem !important;
  cursor: pointer;
}
.field-select option {
  background: #16171e;
  color: var(--text);
}
.select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 0.8rem;
  pointer-events: none;
  transition: color var(--transition);
}
.field-input-wrap:focus-within .select-arrow {
  color: var(--gold);
}

/* Botón ojo */
.btn-eye {
  flex-shrink: 0;
  width: 46px;
  height: 52px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  outline: none;
  transition:
    color var(--transition),
    border-color var(--transition),
    background var(--transition);
}
.btn-eye:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.field-input-wrap:focus-within .btn-eye {
  color: var(--gold);
  border-left-color: rgba(212, 175, 55, 0.2);
}

.field-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 0.35rem;
  padding-left: 2px;
}

/* ══════════════════════════════════════════════════════════════
   FECHA DE NACIMIENTO — 3 columnas (Día / Mes / Año)
══════════════════════════════════════════════════════════════ */
.fecha-grid {
  display: grid;
  grid-template-columns: 80px 1fr 100px; /* Día fijo | Mes flexible | Año fijo */
  gap: 0.6rem;
  width: 100%;
}

.fecha-subwrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fecha-sublabel {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.3rem;
  padding-left: 2px;
}

/* Input de día y año: texto centrado */
.fecha-subwrap:first-child .field-input,
.fecha-subwrap:last-child .field-input {
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Input más compacto en los sub-campos */
.fecha-subwrap .field-input {
  font-size: 0.9rem;
  padding: 0.75rem 0.5rem;
}

.fecha-subwrap .field-input-wrap {
  border-radius: var(--radius-sm);
}

/* Mes select: asegurar que el texto no se corte */
.fecha-subwrap:nth-child(2) .field-select {
  padding-right: 1.8rem !important;
  font-size: 0.85rem;
}
.fecha-subwrap:nth-child(2) .select-arrow {
  right: 6px;
}

/* ── Indicador de contraseña ────────────────────────────────── */
.password-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.55rem;
}
.strength-bars {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.strength-bar {
  height: 3px;
  width: 36px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--transition);
}
.strength-bar.active {
  background: var(--gold);
}
[data-level="1"] .strength-bar.active {
  background: #ff6b80;
}
[data-level="2"] .strength-bar.active {
  background: #f0a050;
}
[data-level="3"] .strength-bar.active {
  background: #d4af37;
}
[data-level="4"] .strength-bar.active {
  background: var(--success);
}
.strength-label {
  font-size: 0.76rem;
  color: var(--text-3);
  transition: color var(--transition);
}
[data-level="1"] .strength-label {
  color: #ff6b80;
}
[data-level="2"] .strength-label {
  color: #f0a050;
}
[data-level="3"] .strength-label {
  color: var(--gold);
}
[data-level="4"] .strength-label {
  color: var(--success);
}

/* ── Botón submit ───────────────────────────────────────────── */
.submit-wrap {
  margin-top: 0.4rem;
}
.btn-submit {
  position: relative;
  width: 100%;
  padding: 1.05rem 2rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  border: none;
  border-radius: var(--radius);
  color: #0d0d0d;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    filter var(--transition);
  box-shadow:
    0 12px 32px rgba(184, 138, 44, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.2);
}
.btn-submit-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.btn-submit-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  z-index: 1;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(184, 138, 44, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.25);
  filter: brightness(1.04);
}
.btn-submit:hover .btn-submit-shine {
  transform: translateX(100%);
}
.btn-submit:active {
  transform: translateY(0);
}
.btn-submit:disabled,
.btn-submit.disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

/* ── Link login ─────────────────────────────────────────────── */
.login-link-wrap {
  text-align: center;
}
.login-redirect {
  font-size: 0.87rem;
  color: var(--text-2);
  margin: 0;
}
.link-gold {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
  position: relative;
  transition: color var(--transition);
}
.link-gold::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.link-gold:hover {
  color: var(--gold-3);
}
.link-gold:hover::after {
  transform: scaleX(1);
}

/* ── Autofill ───────────────────────────────────────────────── */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px rgba(13, 14, 18, 0.9) inset;
  caret-color: var(--gold);
}

/* ── SweetAlert2 ────────────────────────────────────────────── */
.swal2-popup {
  background: #12131a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  font-family: var(--font-body) !important;
}
.swal2-title {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
}
.swal2-html-container {
  color: rgba(255, 255, 255, 0.65) !important;
}
.swal2-confirm {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  color: #0d0d0d !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 8px 20px rgba(184, 138, 44, 0.25) !important;
}
.swal2-icon.swal2-warning {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}
.swal2-icon.swal2-success {
  border-color: var(--success) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(94, 226, 122, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */

/* ≤ 1280px */
@media (max-width: 1280px) {
  .rg-panel--brand {
    flex: 0 0 360px;
    width: 360px;
  }
  .brand-inner {
    padding: 2.5rem 2rem;
  }
  .brand-headline {
    font-size: 2.4rem;
  }
}

/* ≤ 1024px */
@media (max-width: 1024px) {
  .rg-panel--brand {
    flex: 0 0 300px;
    width: 300px;
  }
  .brand-inner {
    padding: 2rem 1.6rem;
  }
  .brand-headline {
    font-size: 2.1rem;
  }
  .brand-feature {
    padding: 0.85rem;
  }
}

/* ≤ 860px — colapso vertical */
@media (max-width: 860px) {
  .rg-layout {
    flex-direction: column;
  }
  .rg-panel--brand {
    display: none;
  }
  .rg-panel--form {
    min-height: 100dvh;
    padding: 2rem 1.25rem;
    align-items: flex-start;
    background:
      radial-gradient(
        ellipse 600px 350px at 80% -10%,
        rgba(212, 175, 55, 0.06),
        transparent 60%
      ),
      radial-gradient(
        ellipse 500px 300px at -10% 85%,
        rgba(212, 175, 55, 0.04),
        transparent 60%
      ),
      linear-gradient(170deg, #0d0e12 0%, #080809 100%);
  }
  .form-inner {
    max-width: 560px;
    padding: 1.5rem 0;
  }
  .form-mobile-header {
    display: flex;
  }
  .form-title {
    font-size: 2rem;
  }
}

/* ≤ 640px */
@media (max-width: 640px) {
  .fields-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .field-wrap[data-col="half"] {
    grid-column: 1 / -1;
  }
  .rg-panel--form {
    padding: 1.5rem 1rem;
  }
  .form-inner {
    padding: 1rem 0;
  }
  .form-title {
    font-size: 1.75rem;
  }

  /* Fecha en móvil: Día más pequeño, Mes ocupa más */
  .fecha-grid {
    grid-template-columns: 70px 1fr 88px;
    gap: 0.5rem;
  }
  .fecha-subwrap .field-input {
    font-size: 0.85rem;
    padding: 0.7rem 0.4rem;
  }
  .fecha-subwrap:nth-child(2) .field-select {
    font-size: 0.82rem;
  }
  .field-icon--sm {
    width: 34px;
    padding: 0 6px;
    min-height: 46px;
    font-size: 0.85rem;
  }
}

/* ≤ 400px */
@media (max-width: 400px) {
  .rg-panel--form {
    padding: 1rem 0.75rem;
  }
  .form-title {
    font-size: 1.55rem;
  }
  .field-input {
    font-size: 0.88rem;
    padding: 0.78rem 0.85rem;
  }
  .field-icon {
    width: 42px;
    min-height: 48px;
  }
  .btn-submit {
    padding: 0.95rem 1.5rem;
    font-size: 0.84rem;
  }
  .mobile-logo {
    width: 62px;
    height: 62px;
  }

  /* Fecha en móvil muy pequeño */
  .fecha-grid {
    grid-template-columns: 62px 1fr 80px;
    gap: 0.4rem;
  }
  .fecha-subwrap .field-input {
    font-size: 0.8rem;
    padding: 0.65rem 0.3rem;
  }
  .fecha-subwrap:nth-child(2) .field-select {
    font-size: 0.78rem;
    padding-right: 1.4rem !important;
  }
  .field-icon--sm {
    width: 30px;
    padding: 0 5px;
    min-height: 44px;
    font-size: 0.8rem;
  }
  .fecha-sublabel {
    font-size: 0.65rem;
  }
}

/* Landscape móvil */
@media (max-height: 600px) and (orientation: landscape) {
  .rg-panel--form {
    padding: 1rem 1.5rem;
    align-items: flex-start;
  }
  .form-inner {
    padding: 0.5rem 0;
  }
  .form-header {
    margin-bottom: 1.2rem;
  }
  .fields-grid {
    gap: 0.75rem;
  }
}