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

    :root {
      --green: #0b7a3e;
      --green-light: #12a355;
      --green-pale: #e8f7ee;
      --orange: #f26522;
      --cream: #fdf8f0;
      --cream2: #f5efe4;
      --dark: #111a13;
      --text: #1a2e1d;
      --muted: #5a7060;
      --border: #d4e8d8;
      --border-focus: #0b7a3e;
      --error: #dc2626;
      --white: #ffffff;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--cream);
      color: var(--text);
      min-height: 100vh;
    }

    /* ── NAV ── */
    nav {
      padding: 18px 5%;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border);
      background: rgba(253,248,240,0.95);
      backdrop-filter: blur(10px);
      position: sticky; top: 0; z-index: 50;
    }

    .nav-logo {
      font-family: 'Syne', sans-serif;
      font-weight: 800; font-size: 20px;
      color: var(--green); text-decoration: none;
      display: flex; align-items: center; gap: 6px;
    }

    .nav-logo span {
      background: var(--orange); color: white;
      padding: 2px 7px; border-radius: 5px; font-size: 18px;
    }

    .nav-back {
      font-size: 13px; color: var(--muted);
      text-decoration: none; display: flex;
      align-items: center; gap: 5px;
      transition: color 0.2s;
    }

    .nav-back:hover { color: var(--green); }

    /* ── HERO ── */
    .form-hero {
      background: var(--dark);
      padding: 52px 5% 48px;
      text-align: center;
      position: relative; overflow: hidden;
    }

    .form-hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 20% 50%, rgba(11,122,62,0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(242,101,34,0.15) 0%, transparent 45%);
    }

    .form-hero-inner { position: relative; }

    .hero-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      padding: 6px 14px; border-radius: 99px;
      font-size: 12px; color: rgba(255,255,255,0.7);
      margin-bottom: 20px; letter-spacing: 0.04em;
    }

    .form-hero h1 {
      font-family: 'Syne', sans-serif;
      font-size: clamp(26px, 5vw, 40px);
      font-weight: 800; color: white;
      line-height: 1.15; margin-bottom: 14px;
    }

    .form-hero h1 em {
      font-style: normal; color: var(--orange);
    }

    .form-hero p {
      font-size: 15px; color: rgba(255,255,255,0.55);
      line-height: 1.7; max-width: 480px; margin: 0 auto 28px;
    }

    .hero-steps {
      display: flex; justify-content: center;
      gap: 0; flex-wrap: wrap;
    }

    .hero-step {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; color: rgba(255,255,255,0.6);
      padding: 8px 16px;
    }

    .step-num {
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--green); color: white;
      font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .step-arrow { color: rgba(255,255,255,0.2); font-size: 16px; }

    /* ── PROGRESS ── */
    .progress-wrap {
      background: white;
      border-bottom: 1px solid var(--border);
      padding: 0 5%;
    }

    .progress-bar {
      display: flex; gap: 0;
    }

    .progress-step {
      flex: 1; padding: 16px 0;
      text-align: center;
      font-size: 12px; font-weight: 500;
      color: var(--muted);
      border-bottom: 3px solid transparent;
      transition: all 0.3s;
      cursor: default;
    }

    .progress-step.active {
      color: var(--green);
      border-bottom-color: var(--green);
      font-weight: 600;
    }

    .progress-step.done {
      color: var(--green-light);
      border-bottom-color: var(--green-pale);
    }

    .progress-step .step-label { display: block; }
    .progress-step .step-icon { font-size: 16px; display: block; margin-bottom: 3px; }

    /* ── FORM CONTAINER ── */
    .form-container {
      max-width: 640px;
      margin: 0 auto;
      padding: 40px 5% 80px;
    }

    /* ── STEP PANELS ── */
    .step-panel { display: none; }
    .step-panel.active {
      display: block;
      animation: fadeIn 0.35s ease;
    }

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

    .panel-title {
      font-family: 'Syne', sans-serif;
      font-size: 22px; font-weight: 800;
      color: var(--dark); margin-bottom: 6px;
    }

    .panel-sub {
      font-size: 14px; color: var(--muted);
      margin-bottom: 32px; line-height: 1.6;
    }

    /* ── FORM ELEMENTS ── */
    .field-group { margin-bottom: 22px; }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    label {
      display: block;
      font-size: 13px; font-weight: 600;
      color: var(--text); margin-bottom: 7px;
      letter-spacing: 0.01em;
    }

    label .required { color: var(--orange); margin-left: 2px; }
    label .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="url"],
    select,
    textarea {
      width: 100%;
      padding: 13px 16px;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      color: var(--text);
      background: white;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      appearance: none;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px rgba(11,122,62,0.1);
    }

    input.error, select.error, textarea.error {
      border-color: var(--error);
      box-shadow: 0 0 0 3px rgba(220,38,38,0.08);
    }

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

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

    textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a7060' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
      cursor: pointer;
    }

    /* ── PLAN SELECTOR ── */
    .plan-cards {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 12px; margin-bottom: 4px;
    }

    .plan-card {
      border: 2px solid var(--border);
      border-radius: 14px;
      padding: 16px 12px;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
      background: white;
      text-align: center;
    }

    .plan-card:hover { border-color: var(--green); }

    .plan-card.selected {
      border-color: var(--green);
      background: var(--green-pale);
    }

    .plan-card input[type="radio"] {
      position: absolute; opacity: 0; width: 0; height: 0;
    }

    .plan-badge {
      position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
      background: var(--orange); color: white;
      font-size: 10px; font-weight: 700;
      padding: 2px 10px; border-radius: 99px;
      white-space: nowrap;
    }

    .plan-name {
      font-family: 'Syne', sans-serif;
      font-size: 13px; font-weight: 700;
      color: var(--dark); margin-bottom: 4px;
    }

    .plan-price {
      font-family: 'Syne', sans-serif;
      font-size: 17px; font-weight: 800;
      color: var(--green); margin-bottom: 2px;
    }

    .plan-period {
      font-size: 10px; color: var(--muted);
    }

    /* ── CATEGORY CHIPS ── */
    .chips-wrap {
      display: flex; flex-wrap: wrap; gap: 8px;
    }

    .chip {
      padding: 8px 16px; border-radius: 99px;
      border: 1.5px solid var(--border);
      font-size: 13px; cursor: pointer;
      transition: all 0.2s; background: white;
      user-select: none;
    }

    .chip:hover { border-color: var(--green); }

    .chip.selected {
      background: var(--green-pale);
      border-color: var(--green);
      color: var(--green); font-weight: 600;
    }

    /* ── MENU BUILDER ── */
    .menu-builder { }

    .menu-category-block {
      background: white;
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .cat-header {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: var(--cream2);
      border-bottom: 1px solid var(--border);
    }

    .cat-name {
      font-family: 'Syne', sans-serif;
      font-size: 14px; font-weight: 700;
      color: var(--dark);
      display: flex; align-items: center; gap: 8px;
    }

    .cat-remove {
      background: none; border: none;
      color: var(--muted); cursor: pointer;
      font-size: 16px; padding: 2px 6px;
      border-radius: 6px; transition: all 0.2s;
    }

    .cat-remove:hover { background: #fee2e2; color: var(--error); }

    .menu-items-list { padding: 12px; }

    .menu-item-row {
      display: grid;
      grid-template-columns: 1fr 80px 28px;
      gap: 8px; align-items: center;
      margin-bottom: 8px;
    }

    .menu-item-row input {
      padding: 10px 12px;
      font-size: 13px;
    }

    .remove-item-btn {
      background: none; border: none;
      color: var(--muted); cursor: pointer;
      font-size: 16px; padding: 4px;
      border-radius: 6px; transition: all 0.2s;
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
    }

    .remove-item-btn:hover { background: #fee2e2; color: var(--error); }

    .add-item-btn {
      display: flex; align-items: center; gap: 6px;
      background: none; border: 1.5px dashed var(--border);
      border-radius: 10px; padding: 9px 14px;
      font-size: 13px; color: var(--muted);
      cursor: pointer; width: 100%;
      transition: all 0.2s; margin-top: 4px;
      font-family: 'DM Sans', sans-serif;
    }

    .add-item-btn:hover {
      border-color: var(--green); color: var(--green);
      background: var(--green-pale);
    }

    .add-category-btn {
      display: flex; align-items: center; gap: 8px;
      background: white; border: 2px dashed var(--border);
      border-radius: 14px; padding: 14px 20px;
      font-size: 14px; font-weight: 500; color: var(--muted);
      cursor: pointer; width: 100%;
      transition: all 0.2s; margin-top: 4px;
      font-family: 'DM Sans', sans-serif;
    }

    .add-category-btn:hover {
      border-color: var(--green); color: var(--green);
      background: var(--green-pale);
    }

    /* ── NAVIGATION BUTTONS ── */
    .form-nav {
      display: flex; justify-content: space-between;
      align-items: center; margin-top: 36px;
      gap: 12px;
    }

    .btn-back {
      padding: 13px 24px; border-radius: 99px;
      border: 1.5px solid var(--border);
      background: white; color: var(--text);
      font-family: 'Syne', sans-serif;
      font-size: 14px; font-weight: 600;
      cursor: pointer; transition: all 0.2s;
    }

    .btn-back:hover { border-color: var(--green); color: var(--green); }

    .btn-next {
      padding: 13px 32px; border-radius: 99px;
      background: var(--green); color: white;
      border: none;
      font-family: 'Syne', sans-serif;
      font-size: 14px; font-weight: 700;
      cursor: pointer; transition: all 0.25s;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 4px 16px rgba(11,122,62,0.25);
    }

    .btn-next:hover {
      background: var(--green-light);
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(11,122,62,0.35);
    }

    /* ── SUCCESS STATE ── */
    .success-screen {
      display: none;
      text-align: center;
      padding: 60px 20px;
      animation: fadeIn 0.5s ease;
    }

    .success-screen.show { display: block; }

    .success-icon {
      width: 80px; height: 80px;
      background: var(--green-pale);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 36px;
      margin: 0 auto 24px;
      border: 3px solid var(--green);
    }

    .success-screen h2 {
      font-family: 'Syne', sans-serif;
      font-size: 26px; font-weight: 800;
      color: var(--dark); margin-bottom: 12px;
    }

    .success-screen p {
      font-size: 15px; color: var(--muted);
      line-height: 1.7; margin-bottom: 32px;
      max-width: 400px; margin-left: auto; margin-right: auto;
    }

    .success-details {
      background: white;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 28px;
      text-align: left;
    }

    .success-detail-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }

    .success-detail-row:last-child { border-bottom: none; }
    .success-detail-row .icon { font-size: 18px; }
    .success-detail-row strong { font-weight: 600; color: var(--dark); }
    .success-detail-row span { color: var(--muted); }

    .btn-whatsapp {
      display: inline-flex; align-items: center; gap: 10px;
      background: #25d366; color: white;
      padding: 15px 32px; border-radius: 99px;
      font-family: 'Syne', sans-serif;
      font-size: 15px; font-weight: 700;
      text-decoration: none;
      transition: all 0.25s;
      box-shadow: 0 4px 20px rgba(37,211,102,0.3);
    }

    .btn-whatsapp:hover {
      background: #20bc5a;
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(37,211,102,0.4);
    }

    /* ── FOOTER ── */
    .form-footer {
      text-align: center; padding: 20px;
      font-size: 12px; color: var(--muted);
      border-top: 1px solid var(--border);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 540px) {
      .field-row { grid-template-columns: 1fr; }
      .plan-cards { grid-template-columns: 1fr; }
      .hero-steps { flex-direction: column; align-items: center; gap: 4px; }
      .step-arrow { transform: rotate(90deg); }
      .progress-step .step-label { display: none; }
    }

body, body * { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4 { font-family: 'Inter', sans-serif; }