/* ── HERO ─────────────────────────────────────────── */
    .hero {
      background: #0f0a1a;
      height: 486px; position: relative; overflow: hidden;
    }
    .hero-radial {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 216px 76px at 50% 60%, rgba(138,17,117,0.35) 0%, rgba(124,58,237,0.12) 35%, transparent 65%);
    }
    .hero-content {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center;
      padding: 80px 32px 0;
    }
    .pill {
      display: inline-flex; align-items: center; gap: 8px;
      background: #f5f3ff; border: 1px solid #ddd6fe;
      border-radius: 9999px; padding: 7px 13px; margin-bottom: 0;
    }
    .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #8a1175; flex-shrink: 0; }
    .pill span { font-size: 11px; font-weight: 600; color: #8a1175; letter-spacing: 0.3px; text-transform: uppercase; }
    .hero-title {
      font-size: 44px; font-weight: 800; color: #fff;
      line-height: 54px; letter-spacing: -1.2px; text-align: center;
      margin: 20px 0 12px;
    }
    .hero-sub {
      font-size: 17px; font-weight: 400; color: rgba(255,255,255,0.5);
      line-height: 26px; text-align: center; max-width: 460px; margin-bottom: 40px;
    }
    .search-group { width: 540px; }
    .search-label {
      font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.4);
      letter-spacing: 0.8px; text-transform: uppercase; display: block; margin-bottom: 8px;
    }
    .search-row {
      display: flex; gap: 12px; align-items: stretch; height: 63px;
    }
    .search-input {
      flex: 1; background: #fff; border: 2px solid #8a1175;
      border-radius: 14px; padding: 18px 22px;
      font-size: 18px; font-weight: 700; color: #a1a1aa;
      font-family: 'Manrope', sans-serif; outline: none;
    }
    .search-input::placeholder { color: #a1a1aa; }
    .search-input:focus { border-color: #6b0e5c; color: #18181b; }
    .search-btn {
      background: #8a1175; border: none; border-radius: 14px;
      padding: 0 28px; cursor: pointer;
      display: flex; align-items: center; gap: 8px;
      font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; color: #fff;
    }
    .search-btn svg { flex-shrink: 0; }

    /* ── EMPTY STATE ──────────────────────────────────── */
    .empty-section {
      background: #fff; display: flex; justify-content: center;
      padding: 48px 32px;
    }
    .empty-inner {
      max-width: 480px; display: flex; flex-direction: column; align-items: center;
      text-align: center; padding: 0 32px;
    }
    .empty-emoji { font-size: 60px; line-height: 1; opacity: 0.4; margin-bottom: 20px; }
    .empty-title { font-size: 20px; font-weight: 700; color: #52525b; margin-bottom: 8px; }
    .empty-text { font-size: 15px; font-weight: 400; color: #52525b; line-height: 1.5; max-width: 416px; }

    /* ── STATUS SECTION ───────────────────────────────── */
    .status-section { background: #fafafa; }
    .status-inner {
      max-width: 1280px; margin: 0 auto;
      padding: 32px 85px;
      display: flex; flex-direction: column; align-items: center; gap: 32px;
    }
    .section-header { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .section-title-block { max-width: 640px; text-align: center; }
    .section-title-block h2 {
      font-size: 36px; font-weight: 800; color: #18181b;
      letter-spacing: -0.8px; margin-bottom: 4px;
    }
    .section-title-block p { font-size: 16px; font-weight: 400; color: #18181b; line-height: 1.5; }

    /* ── CARDS GRID ───────────────────────────────────── */
    .cards-wrapper { width: 100%; display: flex; flex-direction: column; gap: 16px; }
    .cards-row { display: flex; gap: 16px; width: 100%; }
    .status-card {
      flex: 1; min-width: 0; height: 388px; background: #fff;
      border-radius: 20px; border: 1px solid #b3a2c6;
      box-shadow: 0 1px 1.5px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.1);
      display: flex; flex-direction: column; gap: 16px;
      padding: 25px 17px; overflow: hidden;
    }
    .status-card.visitado { border-color: #f9ad03; }
    .status-card.rechazado { border-color: #ea2423; }
    .status-card.reembolso { border-color: #074c99; }
    .status-card.entregado { border-color: #68963c; }

    /* card image area */
    .card-img {
      background: #fff; height: 220px; flex-shrink: 0;
      position: relative; overflow: hidden; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
    }
    .card-ellipse {
      position: absolute; border-radius: 50%;
      width: 218px; height: 220px;
    }
    .card-photo {
      position: relative; z-index: 1;
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .card-photo img { max-width: 90%; max-height: 90%; object-fit: contain; }

    /* card text */
    .card-label {
      font-size: 20px; font-weight: 800; text-transform: uppercase; margin-bottom: 4px;
    }
    .card-label.purple { color: #8a1175; }
    .card-label.amber  { color: #f9ad03; }
    .card-label.red    { color: #ea2423; }
    .card-label.blue   { color: #074c99; }
    .card-label.green  { color: #68963c; }
    .card-desc { font-size: 14px; font-weight: 400; color: #18181b; line-height: 22px; }