/* ── Fontes ─────────────────────────────────────────── */
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

    /* ── Tokens (mesmos do login.css) ───────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy-950:  #1a2b45;
      --navy-900:  #1f3354;
      --navy-800:  #26406a;
      --navy-700:  #2e5080;

      --gold-500:  #c9973a;
      --gold-400:  #d9aa52;
      --gold-300:  #e8c27a;
      --gold-glow: rgba(201,151,58,.22);

      --ice-50:    #f7f9fc;
      --ice-100:   #eef2f8;
      --ice-200:   #dce5f0;
      --ice-300:   #9fb4cc;

      --text-dark:  #1a2b45;
      --text-mid:   #4a617e;
      --text-light: #7a94ae;

      --white:   #ffffff;
      --danger:  #d94f4f;
      --success: #2ea86e;

      --radius-sm: 6px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --transition: 0.3s cubic-bezier(.4,0,.2,1);
    }

    /* ── Base ───────────────────────────────────────────── */
    html, body {
      height: 100%;
      font-family: 'DM Sans', sans-serif;
      background: var(--navy-950);
      color: var(--white);
      overflow-x: hidden;
    }

    /* Fundo com grade decorativa */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(201,151,58,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,151,58,.05) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 0;
    }

    /* Brilho radial dourado no canto inferior */
    body::after {
      content: '';
      position: fixed;
      bottom: -160px;
      right: -120px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201,151,58,.13) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── Wrapper central ────────────────────────────────── */
    .page {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px 72px;
    }

    /* ── Logo ───────────────────────────────────────────── */
    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 40px;
      text-decoration: none;
    }

    .brand-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, var(--gold-500), var(--gold-300));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--navy-950);
      box-shadow: 0 4px 16px var(--gold-glow);
      flex-shrink: 0;
    }

    .brand-name {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--white);
    }

    .brand-name span { color: var(--gold-400); }

    /* ── Card ───────────────────────────────────────────── */
    .card {
      width: 100%;
      max-width: 440px;
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(201,151,58,.15);
      box-shadow:
        0 24px 64px rgba(14,28,47,.45),
        0 4px 16px rgba(14,28,47,.25);
      overflow: hidden;
      animation: fadeUp .55s cubic-bezier(.4,0,.2,1) both;
    }

    /* Linha dourada no topo do card */
    .card::before {
      content: '';
      display: block;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    }

    .card-body {
      padding: 40px 44px 44px;
    }

    /* ── Ícone central ──────────────────────────────────── */
    .card-icon {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: rgba(201,151,58,.12);
      border: 1.5px solid rgba(201,151,58,.28);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: var(--gold-400);
      margin: 0 auto 24px;
    }

    /* ── Cabeçalho ──────────────────────────────────────── */
    .card-eyebrow {
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--gold-500);
      margin-bottom: 8px;
    }

    .card-title {
      font-family: 'Playfair Display', serif;
      font-size: 26px;
      font-weight: 700;
      color: var(--text-dark);
      text-align: center;
      line-height: 1.25;
      margin-bottom: 10px;
    }

    .card-desc {
      font-size: 14px;
      font-weight: 300;
      color: var(--text-mid);
      text-align: center;
      line-height: 1.65;
      margin-bottom: 32px;
    }

    /* ── Separador ──────────────────────────────────────── */
    .divider {
      height: 1px;
      background: var(--ice-200);
      margin-bottom: 28px;
    }

    /* ── Formulário ─────────────────────────────────────── */
    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text-mid);
      margin-bottom: 7px;
    }

    .input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-icon {
      position: absolute;
      left: 15px;
      font-size: 14px;
      color: var(--ice-300);
      pointer-events: none;
      transition: color var(--transition);
      z-index: 1;
    }

    .input-wrap input[type="email"] {
      width: 100%;
      height: 50px;
      padding: 0 16px 0 44px;
      border: 1.5px solid var(--ice-200);
      border-radius: var(--radius-md);
      background: var(--ice-50);
      color: var(--text-dark);
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      font-weight: 400;
      outline: none;
      transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    }

    .input-wrap input[type="email"]::placeholder {
      color: var(--ice-300);
      font-weight: 300;
    }

    .input-wrap input[type="email"]:focus {
      border-color: var(--gold-500);
      background: var(--white);
      box-shadow: 0 0 0 4px var(--gold-glow), 0 2px 10px rgba(26,43,69,.08);
    }

    .input-wrap:focus-within .input-icon { color: var(--gold-500); }

    .input-wrap input[type="email"].error {
      border-color: var(--danger);
      box-shadow: 0 0 0 3px rgba(217,79,79,.12);
    }

    .field-error {
      font-size: 12px;
      color: var(--danger);
      margin-top: 6px;
      display: none;
      align-items: center;
      gap: 5px;
    }

    .field-error.visible { display: flex; }

    /* ── Botão enviar ────────────────────────────────────── */
    .btn-submit {
      position: relative;
      width: 100%;
      height: 50px;
      border: none;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-300) 100%);
      color: var(--navy-950);
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: .03em;
      cursor: pointer;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 5px 20px var(--gold-glow), 0 2px 6px rgba(26,43,69,.12);
      transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
      margin-bottom: 16px;
    }

    /* Sweep hover */
    .btn-submit::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.28) 0%, transparent 60%);
      transform: translateX(-100%);
      transition: transform .45s cubic-bezier(.4,0,.2,1);
    }

    .btn-submit:hover::before  { transform: translateX(100%); }
    .btn-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(201,151,58,.36), 0 3px 10px rgba(26,43,69,.12);
      filter: brightness(1.05);
    }
    .btn-submit:active { transform: translateY(0); filter: brightness(.96); }

    /* Spinner loading */
    .btn-spinner {
      display: none;
      width: 17px;
      height: 17px;
      border: 2px solid rgba(26,43,69,.18);
      border-top-color: var(--navy-950);
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }

    .btn-submit.loading .btn-spinner { display: block; }
    .btn-submit.loading .btn-text    { opacity: 0; }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Link cancelar ───────────────────────────────────── */
    .link-cancel {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-mid);
      text-decoration: none;
      transition: color var(--transition);
      padding: 4px 0;
    }

    .link-cancel i {
      font-size: 12px;
      transition: transform var(--transition);
    }

    .link-cancel:hover { color: var(--navy-950); }
    .link-cancel:hover i { transform: translateX(-3px); }

    /* ── Estado: e-mail enviado ──────────────────────────── */
    .success-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 14px;
      animation: fadeUp .5s cubic-bezier(.4,0,.2,1) both;
    }

    .success-state.visible { display: flex; }

    .success-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(46,168,110,.12);
      border: 1.5px solid rgba(46,168,110,.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: var(--success);
    }

    .success-title {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--text-dark);
    }

    .success-desc {
      font-size: 14px;
      font-weight: 300;
      color: var(--text-mid);
      line-height: 1.65;
      max-width: 320px;
    }

    .success-desc strong {
      color: var(--text-dark);
      font-weight: 600;
    }

    .success-hint {
      font-size: 12.5px;
      color: var(--text-light);
      padding: 10px 16px;
      border-radius: var(--radius-md);
      background: var(--ice-100);
      border: 1px solid var(--ice-200);
      line-height: 1.55;
    }

    /* ── Animações ───────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .brand          { animation: fadeUp .5s .05s both; }
    .card           { animation: fadeUp .55s .12s both; }

    /* ── Autocomplete ────────────────────────────────────── */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 100px var(--ice-50) inset;
      -webkit-text-fill-color: var(--text-dark);
      caret-color: var(--text-dark);
      transition: background-color 5000s;
    }

    /* ── Responsivo ──────────────────────────────────────── */
    @media (max-width: 480px) {
      .card-body { padding: 32px 24px 36px; }
      .card-title { font-size: 22px; }
    }