/* ═══════════════════════════════════════════════
FEBRAZ — IDENTIDADE VISUAL (FORMULÁRIO)
Cores: roxo/azul (#4c55c4), verde (#0c9c3a),
        vermelho/coral (#ff4b34), navy (#101c44)
Fonte: Inter (regular/medium/semibold/bold/extrabold)
═══════════════════════════════════════════════ */
  :root {
      --bg: #ffffff;
      --bg-soft: #f7f8fc;
      --primary: #4c55c4;
      --primary-dark: #3b43a8;
      --primary-soft: #eef0fb;
      --navy: #101c44;
      --navy-soft: #1a2554;
      --green: #0c9c3a;
      --green-dark: #237B48;
      --green-soft: #e6f5ec;
      --green-leaf: #8eb359;
      --coral: #ff4b34;
      --coral-soft: #ffe6e1;
      --magenta: #77175c;
      --text-dark: #101c44;
      --text-mid: #4b5563;
      --text-light: #9ca0af;
      --border: #e5e7eb;
      --border-soft: #eef0f4;
      --shadow: rgba(16, 28, 68, .08);
      --shadow-lg: rgba(16, 28, 68, .14);
  }

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

  html {
      scroll-behavior: smooth;
  }

  body {
      background: linear-gradient(135deg, var(--bg-soft) 0%, #f0f2fb 100%);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
      color: var(--text-dark);
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
  }

  body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
          radial-gradient(ellipse 900px 600px at 5% 10%, rgba(76, 85, 196, .07) 0%, transparent 60%),
          radial-gradient(ellipse 700px 500px at 95% 20%, rgba(255, 75, 52, .05) 0%, transparent 60%),
          radial-gradient(ellipse 800px 400px at 50% 100%, rgba(12, 156, 58, .04) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
  }

  /* ═══════════════════════════════════════════════
PAGE LAYOUT
═══════════════════════════════════════════════ */
  .page-wrap {
      position: relative;
      z-index: 1;
      max-width: 700px;
      margin: 0 auto;
      padding: 48px 20px 80px;
  }

  @media (max-width: 560px) {
      .page-wrap {
          padding: 32px 16px 60px;
      }
  }

  /* ═══════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════ */
  .brand {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 36px;
      animation: fadeUp .6s ease both;
  }

  .brand-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--navy);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 9px 18px;
      border-radius: 100px;
      box-shadow: 0 4px 18px rgba(16, 28, 68, .16);
  }

  .brand-badge svg {
      color: var(--coral);
  }

  @keyframes fadeUp {
      from {
          opacity: 0;
          transform: translateY(12px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* ═══════════════════════════════════════════════
STEP INDICATORS
═══════════════════════════════════════════════ */
  .steps-track {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 36px;
      animation: fadeUp .6s .1s ease both;
      gap: 0;
      overflow-x: auto;
      padding: 10px 0;
  }

  .steps-track::-webkit-scrollbar {
      height: 2px;
  }

  .steps-track::-webkit-scrollbar-thumb {
      background: var(--border);
  }

  .step-dot {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
  }

  .step-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid var(--border);
      background: #fff;
      color: var(--text-light);
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .28s ease;
      position: relative;
      z-index: 1;
      box-shadow: 0 2px 8px var(--shadow);
  }

  .step-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-light);
      transition: color .28s;
      white-space: nowrap;
  }

  .step-connector {
      width: 48px;
      height: 2px;
      background: var(--border);
      margin-bottom: 22px;
      transition: background .28s;
      flex-shrink: 0;
  }

  .step-dot.active .step-circle {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      box-shadow: 0 4px 14px rgba(76, 85, 196, .28);
      transform: scale(1.08);
  }

  .step-dot.active .step-label {
      color: var(--primary);
      font-weight: 800;
  }

  .step-dot.done .step-circle {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
      box-shadow: 0 4px 14px rgba(12, 156, 58, .22);
  }

  .step-dot.done .step-circle::after {
      content: '✓';
      position: absolute;
      font-size: 18px;
      font-weight: 900;
      color: #fff;
  }

  .step-dot.done .step-label {
      color: var(--green);
  }

  .step-connector.done {
      background: var(--green);
  }

  @media (max-width: 520px) {
      .step-connector {
          width: 24px;
      }

      .step-label {
          display: none;
      }

      .step-circle {
          width: 36px;
          height: 36px;
          font-size: 12px;
      }
  }

  /* ═══════════════════════════════════════════════
FORM CARD
═══════════════════════════════════════════════ */
  .form-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 32px var(--shadow-lg), 0 2px 8px var(--shadow);
      border: 1px solid var(--border);
      overflow: hidden;
      animation: fadeUp .6s .2s ease both;
  }

  .card-header {
      padding: 36px 40px 24px;
      border-bottom: 1px solid var(--border-soft);
      background: linear-gradient(135deg, var(--primary-soft) 0%, #fff 100%);
      position: relative;
  }

  @media (max-width: 560px) {
      .card-header {
          padding: 24px 20px 18px;
      }
  }

  .step-tag {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .step-tag::before {
      content: '';
      display: block;
      width: 24px;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
  }

  .card-header h2 {
      font-size: clamp(22px, 4vw, 28px);
      font-weight: 800;
      color: var(--navy);
      line-height: 1.2;
      letter-spacing: -0.015em;
      margin-bottom: 12px;
  }

  .card-header h2 em {
      font-style: normal;
      color: var(--primary);
      position: relative;
  }

  .card-header h2 em::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      height: 8px;
      background: rgba(255, 75, 52, .18);
      border-radius: 3px;
      z-index: -1;
  }

  .card-invite {
      font-size: 15px;
      color: var(--text-mid);
      line-height: 1.6;
      max-width: 520px;
  }

  .card-invite strong {
      color: var(--navy);
      font-weight: 700;
  }

  .mini-progress {
      margin-top: 20px;
  }

  .mini-progress-track {
      height: 4px;
      background: var(--border-soft);
      border-radius: 100px;
      overflow: hidden;
  }

  .mini-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--primary) 0%, var(--green) 100%);
      border-radius: 100px;
      transition: width .5s cubic-bezier(.2, .8, .3, 1);
  }

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

  @media (max-width: 560px) {
      .card-body {
          padding: 20px 20px;
      }
  }

  .card-footer {
      padding: 20px 40px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--border-soft);
      gap: 16px;
  }

  @media (max-width: 560px) {
      .card-footer {
          padding: 16px 20px 24px;
          flex-direction: column-reverse;
      }
  }

  .footer-right {
      display: flex;
      gap: 10px;
      align-items: center;
  }

  .step-counter {
      font-size: 12px;
      color: var(--text-light);
      font-weight: 600;
      letter-spacing: .02em;
  }

  /* ═══════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════ */
  .btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 700;
      padding: 12px 24px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      transition: all .2s ease;
      white-space: nowrap;
      letter-spacing: .01em;
  }

  .btn:hover {
      transform: translateY(-1px);
  }

  .btn:active {
      transform: translateY(0);
  }

  .btn-primary {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 4px 16px rgba(76, 85, 196, .24);
  }

  .btn-primary:hover {
      background: var(--primary-dark);
      box-shadow: 0 6px 24px rgba(76, 85, 196, .32);
  }

  .btn-secondary {
      background: transparent;
      color: var(--text-mid);
      border: 1.5px solid var(--border);
      padding: 11px 23px;
  }

  .btn-secondary:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-soft);
  }

  .btn-submit {
      background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
      color: #fff;
      box-shadow: 0 4px 18px rgba(12, 156, 58, .28);
      font-size: 15px;
      padding: 14px 32px;
      width: 100%;
      justify-content: center;
  }

  .btn-submit:hover {
      box-shadow: 0 6px 28px rgba(12, 156, 58, .36);
  }

  /* ═══════════════════════════════════════════════
WIZARD STEPS
═══════════════════════════════════════════════ */
  .wizard-step {
      display: none;
  }

  .wizard-step.active {
      display: block;
      animation: stepIn .35s ease both;
  }

  .wizard-step.back-anim {
      animation: stepInBack .35s ease both;
  }

  @keyframes stepIn {
      from {
          opacity: 0;
          transform: translateX(18px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @keyframes stepInBack {
      from {
          opacity: 0;
          transform: translateX(-18px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  /* ═══════════════════════════════════════════════
FORM FIELDS
═══════════════════════════════════════════════ */
  .field {
      margin-bottom: 22px;
  }

  .field:last-child {
      margin-bottom: 0;
  }

  .field>label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 8px;
      letter-spacing: .01em;
  }

  .req {
      color: var(--coral);
      margin-left: 3px;
      font-weight: 800;
  }

  .hint {
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 8px;
      line-height: 1.45;
      font-weight: 500;
  }

  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="number"],
  textarea,
  select {
      width: 100%;
      background: var(--bg-soft);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-dark);
      outline: none;
      transition: all .2s ease;
      appearance: none;
      line-height: 1.5;
  }

  input::placeholder,
  textarea::placeholder {
      color: var(--text-light);
  }

  input:hover:not(:focus),
  textarea:hover:not(:focus),
  select:hover:not(:focus) {
      border-color: var(--border-soft);
      background: #fff;
  }

  input:focus,
  textarea:focus,
  select:focus {
      border-color: var(--primary);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(76, 85, 196, .1), inset 0 0 0 1px rgba(76, 85, 196, .15);
  }

  input:invalid:not(:focus):not(:placeholder-shown),
  textarea:invalid:not(:focus) {
      border-color: var(--coral);
      background: rgba(255, 75, 52, .04);
  }

  select {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234c55c4' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 38px;
      cursor: pointer;
  }

  textarea {
      resize: vertical;
      min-height: 100px;
      font-size: 13px;
  }

  .req-note {
      font-size: 12px;
      color: var(--text-mid);
      margin-bottom: 18px;
      font-weight: 500;
  }

  .req-note span {
      color: var(--coral);
      font-weight: 800;
  }

  .field-error {
      display: none;
      font-size: 12px;
      color: var(--coral);
      margin-top: 5px;
      font-weight: 600;
  }

  .field.error .field-error {
      display: block;
  }

  /* ─── RADIO & CHECKBOX ─── */
  .options-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
  }

  .option-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1.5px solid var(--border);
      transition: all .18s ease;
      background: transparent;
  }

  .option-item:hover {
      border-color: var(--primary);
      background: var(--primary-soft);
  }

  .option-item input[type="radio"],
  .option-item input[type="checkbox"] {
      width: auto;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid var(--border);
      background: #fff;
      cursor: pointer;
      transition: all .18s;
      flex-shrink: 0;
      margin-top: 2px;
  }

  .option-item input[type="checkbox"] {
      border-radius: 4px;
  }

  .option-item input[type="radio"]:checked,
  .option-item input[type="checkbox"]:checked {
      background: var(--primary);
      border-color: var(--primary);
      box-shadow: inset 0 0 0 2px #fff;
  }

  .option-item input[type="radio"]:checked::after {
      content: '·';
      position: absolute;
      font-size: 20px;
      color: #fff;
  }

  .option-item span {
      font-size: 14px;
      color: var(--text-dark);
      font-weight: 500;
      line-height: 1.4;
  }

  .other-input-wrap {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 1;
  }

  .other-inline {
      width: auto !important;
      flex: 1 !important;
      padding: 7px 10px !important;
      font-size: 13px !important;
      min-width: 120px;
  }

  /* ─── FIELD GROUPS ─── */
  .field-group {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
  }

  .text-columns {
      column-count: 2;
      column-gap: 18px;
  }

  @media (max-width: 600px) {
      .text-columns {
          column-count: 1;
      }
  }

  .success-message {
      background: var(--green-soft);
      border-left: 4px solid var(--green);
      padding: 16px 18px;
      border-radius: 0 10px 10px 0;
      font-size: 14px;
      color: var(--green-dark);
      margin: 20px 0;
      animation: slideIn .3s ease both;
  }

  @keyframes slideIn {
      from {
          opacity: 0;
          transform: translateX(-12px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  .final-submit-area {
      text-align: center;
      padding: 12px 0;
  }

  .final-submit-area .btn-submit {
      min-width: 200px;
  }

  /* ── REVIEW ── */
  .review-block {
      background: var(--cream);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 12px;
  }

  .review-block-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--sage);
      margin-bottom: 10px;
  }

  .review-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 10px;
  }

  .review-row:last-child {
      margin-bottom: 0;
  }

  .review-key {
      font-size: 11px;
      color: var(--text-light);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
  }

  .review-val {
      font-size: 13.5px;
      color: var(--text-dark);
      line-height: 1.5;
  }

  /* ── SUCCESS ── */
  .success-screen {
      display: none;
      text-align: center;
      padding: 56px 32px;
      animation: fadeUp .5s ease both;
  }

  .success-icon {
      width: 72px;
      height: 72px;
      background: var(--sage-pale);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      margin: 0 auto 22px;
  }

  .success-screen h2 {
      font-family: 'Lora', serif;
      font-size: 26px;
      color: var(--forest);
      margin-bottom: 12px;
  }

  .success-screen p {
      font-size: 14.5px;
      color: var(--text-mid);
      max-width: 420px;
      margin: 0 auto;
      line-height: 1.7;
  }

  .hero-heros {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 600px;
      margin: 0 auto 30px;
  }

  .hero-heros strong {
      display: block;
      margin-bottom: 15px;
      text-align: center;
  }

  .hero-heros .lilly-logo {
      fill: rgb(213, 43, 30)
  }

  footer {
      margin: 80px 0 0;
      background-image: url(https://febraz.org.br/wp-content/uploads/2022/05/footer.jpg);
      padding: 20px;
      text-align: center;
      font-size: 0.9em;
      color: #fff;
  }

  footer .hero-heros {
      max-width: 900px;
  }

  footer p {
      margin: 0 0 30px;
  }

  footer p a {
      color: var(--green);
  }

  /* ═══════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════ */
  @media (max-width: 560px) {
      .page-wrap {
          padding: 24px 16px 60px;
      }

      .step-connector {
          width: 20px;
      }

      .field-group {
          grid-template-columns: 1fr;
      }

      .card-body {
          padding: 18px 18px;
      }

      .hero-heros {
          flex-direction: column;
          gap: 20px;
      }
  }

  /* ═══════════════════════════════════════════════
HEADER
═══════════════════════════════════════════════ */
  .site-header {
      position: relative;
      z-index: 10;
      background: var(--navy);
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px;
      box-shadow: 0 2px 18px rgba(16, 28, 68, .18);
  }

  .header-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
  }

  .header-brand svg {
      color: var(--green);
      opacity: 1;
  }

  .header-nav a {
      color: rgba(255, 255, 255, .78);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      margin-left: 32px;
      transition: color .2s;
      position: relative;
  }

  .header-nav a:hover {
      color: #fff;
  }

  .header-nav a.active {
      color: #fff;
  }

  .header-nav a.active::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -22px;
      height: 3px;
      background: var(--green);
      border-radius: 3px 3px 0 0;
  }

  @media (max-width: 640px) {
      .site-header {
          padding: 0 20px;
          height: 60px;
      }

      .header-nav {
          display: none;
      }
  }

  .field.has-error input,
  .field.has-error textarea {
      border-color: var(--terracotta);
  }

  .field.has-error .field-error {
      display: block;
  }

  #logo {
      max-height: 60px;
  }