*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:          #f5f4f0;
      --surface:     #ffffff;
      --border:      #e2ddd8;
      --ink:         #1a1714;
      --ink-2:       #4a4540;
      --ink-muted:   #9b9189;
      --accent:      #2563eb;
      --accent-h:    #1d4ed8;
      --accent-glow: rgba(37,99,235,.15);
      --gold:        #b08d57;
      --radius:      12px;
      --shadow-lg:   0 20px 60px rgba(26,23,20,.11), 0 4px 16px rgba(26,23,20,.07);
      --transition:  .2s cubic-bezier(.4,0,.2,1);
    }

    html, body {
      height: 100%;
      font-family: 'Outfit', sans-serif;
      background: var(--bg);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    /* ── Layout ─────────────────────────────────────────────────────────── */
    .page {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 480px;
    }

    /* ── Panel izquierdo (oscuro editorial) ──────────────────────────────── */
    .panel-left {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 3.5rem;
      background: var(--ink);
    }

    .panel-left::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.018'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }
    .panel-left::after {
      content: '';
      position: absolute;
      top: 0; left: 3.5rem; right: 3.5rem;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: .55;
    }

    .bg-circle {
      position: absolute; border-radius: 50%; pointer-events: none;
    }
    .bc1 { width: 440px; height: 440px; bottom: -130px; right: -130px; border: 1px solid rgba(255,255,255,.04); }
    .bc2 { width: 270px; height: 270px; bottom: -65px; right: -65px; border: 1px solid rgba(255,255,255,.06); }
    .bc3 { width: 520px; height: 520px; top: -210px; left: -190px; background: radial-gradient(circle, rgba(176,141,87,.07) 0%, transparent 65%); }

    .panel-top, .panel-bottom { position: relative; z-index: 1; }

    .brand { display: flex; align-items: center; gap: .75rem; }
    .brand-logo {
      width: 36px; height: 36px;
      background: var(--gold); border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
    }
    .brand-logo svg { width: 18px; height: 18px; fill: var(--ink); }
    .brand-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.2rem; color: #fff; letter-spacing: .01em;
    }

    .panel-headline {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.1rem, 3vw, 3rem);
      font-weight: 700; line-height: 1.15;
      color: #fff; margin-bottom: 1.2rem; letter-spacing: -.01em;
    }
    .panel-headline em { font-style: italic; color: var(--gold); }

    .panel-desc {
      font-size: .92rem; color: rgba(255,255,255,.4);
      line-height: 1.75; max-width: 340px; font-weight: 300;
    }

    .stats {
      display: flex; gap: 2rem;
      margin-top: 2.5rem; padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,.07);
    }
    .stat-item { display: flex; flex-direction: column; gap: .2rem; }
    .stat-num {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem; color: #fff; line-height: 1;
    }
    .stat-label {
      font-size: .72rem; color: rgba(255,255,255,.28);
      text-transform: uppercase; letter-spacing: .08em; font-weight: 500;
    }

    .testimonial {
      margin-top: 2.25rem;
      padding: 1.1rem 1.4rem;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
      border-left: 3px solid var(--gold);
      border-radius: 0 8px 8px 0;
    }
    .testimonial p {
      font-size: .85rem; color: rgba(255,255,255,.45);
      line-height: 1.65; font-style: italic; font-weight: 300;
    }
    .testimonial-author {
      margin-top: .65rem; font-size: .72rem;
      color: rgba(255,255,255,.22); letter-spacing: .05em;
      text-transform: uppercase; font-weight: 500;
    }

    /* ── Panel derecho (blanco) ───────────────────────────────────────────── */
    .panel-right {
      background: var(--surface);
      display: flex; flex-direction: column; justify-content: center;
      padding: 3rem;
      box-shadow: var(--shadow-lg);
      position: relative;
    }

    /* ── Card header ─────────────────────────────────────────────────────── */
    .form-header { margin-bottom: 2.25rem; }

    .form-eyebrow {
      font-size: .7rem; font-weight: 600;
      color: var(--accent); text-transform: uppercase;
      letter-spacing: .14em; margin-bottom: .55rem;
    }
    .form-title {
      font-family: 'Playfair Display', serif;
      font-size: 2rem; font-weight: 600;
      color: var(--ink); line-height: 1.15; letter-spacing: -.01em;
    }
    .form-subtitle {
      margin-top: .45rem; font-size: .88rem;
      color: var(--ink-muted); font-weight: 300;
    }

    /* ── Campos ──────────────────────────────────────────────────────────── */
    .form-group { margin-bottom: 1.2rem; }

    label {
      display: block; font-size: .75rem; font-weight: 600;
      color: var(--ink-2); margin-bottom: .5rem;
      letter-spacing: .06em; text-transform: uppercase;
    }

    .input-wrap { position: relative; }

    .input-icon {
      position: absolute; left: 14px; top: 50%;
      transform: translateY(-50%);
      color: var(--ink-muted); pointer-events: none; display: flex;
      transition: color var(--transition);
    }
    .input-wrap:focus-within .input-icon { color: var(--accent); }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: .85rem 1rem .85rem 2.75rem;
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      color: var(--ink);
      font-family: 'Outfit', sans-serif;
      font-size: .93rem;
      outline: none;
      transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
      -webkit-appearance: none;
    }
    input::placeholder { color: var(--ink-muted); opacity: .5; }
    input:focus {
      border-color: var(--accent);
      background: #fff;
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
    input.has-error-input { border-color: #ef4444 !important; }

    .toggle-pwd {
      position: absolute; right: 12px; top: 50%;
      transform: translateY(-50%);
      background: none; border: none;
      color: var(--ink-muted); cursor: pointer;
      display: flex; padding: 4px; border-radius: 6px;
      transition: color var(--transition);
    }
    .toggle-pwd:hover { color: var(--ink-2); }

    /* ── Opciones ────────────────────────────────────────────────────────── */
    .form-options {
      display: flex; align-items: center; justify-content: space-between;
      margin: .3rem 0 1.75rem;
    }
    .checkbox-wrap {
      display: flex; align-items: center; gap: .5rem;
      cursor: pointer; user-select: none;
    }
    .checkbox-wrap input[type="checkbox"] {
      width: 15px; height: 15px; padding: 0;
      accent-color: var(--accent); cursor: pointer;
    }
    .checkbox-wrap span { font-size: .84rem; color: var(--ink-2); }

    .forgot-link {
      font-size: .84rem; color: var(--accent);
      background: none; border: none; cursor: pointer;
      font-family: 'Outfit', sans-serif; font-weight: 500; padding: 0;
      text-decoration: underline; text-underline-offset: 2px;
      text-decoration-color: transparent;
      transition: color var(--transition), text-decoration-color var(--transition);
    }
    .forgot-link:hover {
      color: var(--accent-h);
      text-decoration-color: var(--accent-h);
    }

    /* ── Botón ───────────────────────────────────────────────────────────── */
    .btn-primary {
      width: 100%; padding: .95rem;
      background: var(--ink); border: none;
      border-radius: var(--radius); color: #fff;
      font-family: 'Outfit', sans-serif; font-size: .95rem; font-weight: 600;
      letter-spacing: .025em; cursor: pointer;
      position: relative; overflow: hidden;
      transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
      box-shadow: 0 2px 10px rgba(26,23,20,.18);
    }
    .btn-primary:hover:not(:disabled) {
      background: #2d2926;
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(26,23,20,.2);
    }
    .btn-primary:active:not(:disabled) { transform: translateY(0); }
    .btn-primary:disabled { opacity: .5; cursor: not-allowed; }

    .btn-primary::after {
      content: ''; position: absolute;
      top: 0; left: -100%; width: 55%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
      transition: left .5s ease;
    }
    .btn-primary:hover::after { left: 150%; }

    .btn-primary .btn-text { transition: opacity var(--transition); }
    .btn-primary .btn-spinner {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity var(--transition);
    }
    .btn-primary.loading .btn-text { opacity: 0; }
    .btn-primary.loading .btn-spinner { opacity: 1; }

    .spinner-ring {
      width: 20px; height: 20px;
      border: 2px solid rgba(255,255,255,.25);
      border-top-color: #fff; border-radius: 50%;
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Seguridad note ──────────────────────────────────────────────────── */
    .security-note {
      display: flex; align-items: center; gap: .5rem;
      margin-top: 1.25rem; padding: .65rem .9rem;
      background: var(--bg); border-radius: 8px;
      border: 1px solid var(--border);
      font-size: .77rem; color: var(--ink-muted);
    }
    .security-note svg { color: #16a34a; flex-shrink: 0; }

    /* ── Footer ──────────────────────────────────────────────────────────── */
    .form-footer {
      margin-top: 1.5rem;
      text-align: center;
      font-size: .81rem; color: var(--ink-muted);
    }
    .form-footer a {
      color: var(--accent); text-decoration: none; font-weight: 500;
      transition: color var(--transition);
    }
    .form-footer a:hover { color: var(--accent-h); }

    /* ── Steps ───────────────────────────────────────────────────────────── */
    .step.hidden { display: none; }

    .back-btn {
      display: inline-flex; align-items: center; gap: .4rem;
      background: none; border: none; padding: 0;
      color: var(--ink-muted); font-size: .85rem;
      font-family: 'Outfit', sans-serif; cursor: pointer;
      margin-bottom: 1.5rem; transition: color var(--transition);
    }
    .back-btn:hover { color: var(--ink); }

    /* ── Responsive ──────────────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .page { grid-template-columns: 1fr; }
      .panel-left { display: none; }
      .panel-right { min-height: 100vh; padding: 2.5rem 1.75rem; }
    }
    @media (max-width: 400px) {
      .panel-right { padding: 2rem 1.25rem; }
      .form-title { font-size: 1.65rem; }
    }

    /* ── SweetAlert2 overrides ────────────────────────────────────────────── */
    .swal2-popup {
      font-family: 'Outfit', sans-serif !important;
      border-radius: 18px !important;
      box-shadow: 0 24px 70px rgba(26,23,20,.13) !important;
      border: 1px solid #e8e3dd !important;
      padding: 2rem !important;
    }
    .swal2-title {
      font-family: 'Playfair Display', serif !important;
      color: #1a1714 !important;
      font-size: 1.35rem !important;
      font-weight: 600 !important;
    }
    .swal2-html-container {
      color: #4a4540 !important;
      font-size: .9rem !important;
      line-height: 1.6 !important;
    }
    .swal2-confirm {
      background: #1a1714 !important;
      border-radius: 9px !important;
      font-family: 'Outfit', sans-serif !important;
      font-weight: 600 !important;
      font-size: .88rem !important;
      letter-spacing: .025em !important;
      box-shadow: none !important;
      padding: .65rem 1.75rem !important;
      transition: background .18s !important;
    }
    .swal2-confirm:hover { background: #2d2926 !important; }
    .swal2-cancel {
      background: #f5f4f0 !important;
      color: #4a4540 !important;
      border: 1.5px solid #e2ddd8 !important;
      border-radius: 9px !important;
      font-family: 'Outfit', sans-serif !important;
      font-weight: 500 !important;
      font-size: .88rem !important;
      box-shadow: none !important;
      padding: .65rem 1.75rem !important;
    }
    .swal2-cancel:hover { background: #eceae5 !important; }
    .swal2-timer-progress-bar { background: #2563eb !important; }
    .swal2-icon.swal2-success { border-color: #bbf7d0 !important; }
    .swal2-icon.swal2-success .swal2-success-ring { border-color: #bbf7d0 !important; }
    .swal2-icon.swal2-error { border-color: #fecaca !important; }