*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    :root {
      --p:    #4f46e5;
      --p2:   #3730a3;
      --p3:   #6366f1;
      --ink:  #0f0e17;
      --ink2: #374151;
      --mute: #6b7280;
      --lite: #f9fafb;
      --bdr:  #e5e7eb;
      --white:#ffffff;
    }
    html { scroll-behavior:smooth; }
    body {
      font-family:'Plus Jakarta Sans',sans-serif;
      background:var(--lite);
      color:var(--ink);
      min-height:100vh;
    }

    /* NAV */
    nav {
      position:sticky; top:0; z-index:200;
      display:flex; align-items:center; justify-content:space-between;
      padding:0 7vw; height:64px;
      background:rgba(15,25,35,0.98);
      border-bottom:1px solid rgba(79,70,229,0.2);
      backdrop-filter:blur(14px);
    }
    .nav-logo { font-weight:800; font-size:1.25rem; color:#fff; letter-spacing:-0.5px; }
    .nav-logo sup {
      font-size:9px; font-weight:700; letter-spacing:1px;
      background:var(--p3); color:#fff;
      padding:2px 5px; border-radius:4px;
      vertical-align:super; margin-left:3px;
    }
    .nav-back {
      font-family:inherit; font-size:14px; font-weight:500;
      background:rgba(255,255,255,0.1); color:#fff;
      border:1px solid rgba(255,255,255,0.2);
      padding:8px 16px; border-radius:8px; cursor:pointer;
      text-decoration:none; display:inline-flex; align-items:center; gap:6px;
      transition:all .18s;
    }
    .nav-back:hover { background:rgba(255,255,255,0.18); }

    /* HERO */
    .hero {
      background:linear-gradient(160deg,#1e1b4b 0%,#3730a3 45%,#4f46e5 100%);
      padding:52px 7vw 60px; text-align:center; position:relative; overflow:hidden;
    }
    .hero::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(99,102,241,.3) 0%,transparent 70%);
      pointer-events:none;
    }
    .hero-inner { max-width:560px; margin:0 auto; position:relative; }
    .hero-tag {
      display:inline-flex; align-items:center; gap:7px;
      background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
      color:rgba(255,255,255,.9); font-size:12px; font-weight:500;
      padding:5px 14px; border-radius:50px; margin-bottom:20px;
    }
    .hero h1 {
      font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800;
      letter-spacing:-1.5px; color:#fff; margin-bottom:10px;
    }
    .hero h1 em { font-style:normal; color:#a5b4fc; }
    .hero-sub { font-size:15px; color:rgba(255,255,255,.6); line-height:1.7; }

    /* MAIN CONTAINER */
    .main {
      max-width:860px; margin:0 auto;
      padding:40px 20px 60px;
    }

    /* CARD BASE */
    .card {
      background:var(--white); border:1px solid var(--bdr);
      border-radius:20px; overflow:hidden;
      box-shadow:0 4px 24px rgba(0,0,0,.06);
      margin-bottom:24px;
    }
    .card-header {
      padding:20px 28px; border-bottom:1px solid var(--bdr);
      display:flex; align-items:center; gap:12px;
    }
    .card-header-icon {
      width:38px; height:38px; border-radius:10px;
      background:linear-gradient(135deg,#eef2ff,#e0e7ff);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .card-header-icon i { font-size:16px; color:var(--p); }
    .card-header h2 { font-size:16px; font-weight:700; color:var(--ink); }
    .card-header p  { font-size:13px; color:var(--mute); margin-top:2px; }
    .card-body { padding:28px; }

    /* PLANS GRID */
    .plans-grid {
      display:grid; grid-template-columns:1fr 1fr; gap:16px;
    }
    .plan-card {
      background:var(--white); border:1.5px solid var(--bdr);
      border-radius:20px; padding:28px; position:relative;
      cursor:pointer; transition:all .22s;
    }
    .plan-card:hover {
      border-color:var(--p3);
      box-shadow:0 8px 28px rgba(79,70,229,.1);
      transform:translateY(-2px);
    }
    .plan-card.selected {
      border-color:var(--p);
      box-shadow:0 0 0 4px rgba(79,70,229,.1);
    }
    .plan-card.hot-plan {
      border-color:var(--p);
      box-shadow:0 0 0 4px rgba(79,70,229,.1);
    }
    .hot-badge {
      position:absolute; top:-12px; left:50%; transform:translateX(-50%);
      background:var(--p); color:#fff;
      font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
      padding:4px 14px; border-radius:20px; white-space:nowrap;
    }
    .plan-period-lbl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--mute); margin-bottom:8px; }
    .plan-amount { font-size:2.6rem; font-weight:800; letter-spacing:-2px; line-height:1; margin-bottom:4px; }
    .plan-cycle { font-size:12px; color:var(--mute); margin-bottom:22px; }
    .plan-features { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
    .plan-features li { font-size:13px; color:var(--ink2); display:flex; align-items:center; gap:9px; }
    .plan-features li::before {
      content:''; display:inline-block; width:16px; height:16px; border-radius:50%;
      background:#dcfce7; flex-shrink:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2316a34a' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
      background-size:contain; background-repeat:no-repeat;
    }
    .plan-cta {
      width:100%; padding:12px; border-radius:12px;
      font-family:inherit; font-size:14px; font-weight:700;
      cursor:pointer; transition:all .2s; border:none;
    }
    .plan-cta.solid { background:var(--p); color:#fff; }
    .plan-cta.solid:hover { background:var(--p2); transform:translateY(-1px); }
    .plan-cta.ghost { background:transparent; color:var(--p); border:1.5px solid var(--p); }
    .plan-cta.ghost:hover { background:#eef2ff; }

    /* BTN CONTINUAR */
    .btn-continuar {
      display:none; width:100%; margin-top:20px;
      padding:14px; border-radius:12px;
      background:linear-gradient(135deg,var(--p),var(--p3));
      color:#fff; font-family:inherit; font-size:15px; font-weight:700;
      border:none; cursor:pointer; transition:all .2s;
      box-shadow:0 4px 16px rgba(79,70,229,.3);
    }
    .btn-continuar:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(79,70,229,.4); }

    /* PAYMENT SECTION */
    #paymentSection { display:none; }

    .btn-back {
      display:inline-flex; align-items:center; gap:7px;
      font-family:inherit; font-size:13px; font-weight:600;
      background:var(--lite); color:var(--ink2);
      border:1px solid var(--bdr); border-radius:8px;
      padding:8px 14px; cursor:pointer; margin-bottom:20px;
      transition:all .18s;
    }
    .btn-back:hover { background:var(--bdr); }

    /* YAPE BOX */
    .yape-box {
      background:linear-gradient(135deg,#eef2ff,#e0e7ff);
      border:1px solid #c7d2fe; border-radius:16px;
      padding:28px; text-align:center; margin-bottom:20px;
    }
    .yape-label { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--p); margin-bottom:4px; }
    .yape-number {
      font-size:2.2rem; font-weight:800; letter-spacing:3px;
      color:var(--p2); margin:10px 0 4px;
    }
    .yape-owner { font-size:14px; color:var(--mute); font-weight:500; margin-bottom:16px; }
    .btn-copy {
      font-family:inherit; font-size:13px; font-weight:600;
      background:var(--p); color:#fff; border:none;
      padding:9px 20px; border-radius:8px; cursor:pointer;
      display:inline-flex; align-items:center; gap:7px;
      transition:all .18s;
    }
    .btn-copy:hover { background:var(--p2); }
    .btn-copy.copied { background:#16a34a; }
    .amount-tag {
      display:inline-block; margin-top:14px;
      background:var(--white); border:1px solid #c7d2fe;
      color:var(--p); font-size:14px; font-weight:700;
      padding:6px 16px; border-radius:20px;
    }

    /* INSTRUCCIONES */
    .instructions-box {
      background:#eff6ff; border-left:4px solid #3b82f6;
      border-radius:0 12px 12px 0; padding:18px 20px; margin-bottom:20px;
    }
    .instructions-box h3 { font-size:14px; font-weight:700; color:#1d4ed8; margin-bottom:10px; }
    .instructions-box ol { padding-left:18px; }
    .instructions-box li { font-size:13px; color:var(--ink2); margin-bottom:6px; line-height:1.6; }

    /* UPLOAD */
    .upload-zone {
      border:2px dashed var(--bdr); border-radius:16px;
      padding:40px 24px; text-align:center; transition:all .22s; cursor:pointer;
      background:var(--white);
    }

    .upload-zone.dragover { border-color:var(--p); background:#eef2ff; }
    .upload-zone-icon { font-size:48px; color:#d1d5db; margin-bottom:14px; }
    .upload-zone h3 { font-size:15px; font-weight:700; margin-bottom:6px; }
    .upload-zone p { font-size:13px; color:var(--mute); margin-bottom:16px; }
    .btn-upload {
      font-family:inherit; font-size:14px; font-weight:700;
      background:linear-gradient(135deg,var(--p),var(--p3));
      color:#fff; border:none; padding:12px 28px;
      border-radius:10px; cursor:pointer; transition:all .2s;
      display:inline-flex; align-items:center; gap:8px;
      box-shadow:0 4px 14px rgba(79,70,229,.25);
    }
    .btn-upload:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(79,70,229,.35); }

    .upload-preview { margin-top:20px; display:none; text-align:center; }
    .preview-image {
      max-width:260px; max-height:260px; border-radius:12px;
      box-shadow:0 6px 20px rgba(0,0,0,.1); display:block; margin:0 auto 16px;
    }
    .btn-procesar {
      font-family:inherit; font-size:14px; font-weight:700;
      background:linear-gradient(135deg,#16a34a,#15803d);
      color:#fff; border:none; padding:13px 28px;
      border-radius:10px; cursor:pointer; transition:all .2s;
      display:inline-flex; align-items:center; gap:8px;
      box-shadow:0 4px 14px rgba(22,163,74,.25);
    }
    .btn-procesar:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(22,163,74,.35); }

    /* STATUS */
    .status-message { display:none; margin-top:16px; padding:14px 16px; border-radius:10px; font-size:14px; font-weight:500; }
    .status-success { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
    .status-error   { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
    .status-warning { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

    /* PROCESSING OVERLAY */
    .processing-overlay {
      display:none; position:fixed; inset:0;
      background:rgba(15,14,23,.6); backdrop-filter:blur(8px);
      z-index:1000; justify-content:center; align-items:center;
    }
    .processing-modal {
      background:var(--white); border-radius:20px;
      padding:40px 36px; text-align:center; max-width:360px; width:90%;
      box-shadow:0 32px 80px rgba(0,0,0,.2);
    }
    .spinner {
      width:52px; height:52px; border-radius:50%;
      border:4px solid #e0e7ff; border-top-color:var(--p);
      animation:spin 1s linear infinite; margin:0 auto 20px;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .processing-modal h3 { font-size:17px; font-weight:700; margin-bottom:8px; }
    .processing-modal p  { font-size:13px; color:var(--mute); }

    /* FOOTER */
    footer {
      border-top:1px solid var(--bdr); padding:20px 7vw;
      display:flex; align-items:center; justify-content:space-between;
      flex-wrap:wrap; gap:12px; font-size:12px; color:var(--mute);
    }
    .foot-logo { font-weight:800; font-size:1rem; color:var(--ink); }

    /* RESPONSIVE */
    @media(max-width:600px){
      .plans-grid { grid-template-columns:1fr; }
      .card-body { padding:20px; }
      .yape-number { font-size:1.8rem; letter-spacing:2px; }
    }