:root{
    --ink:#13141f;
    --paper:#edeff2;
    --panel:#ffffff;
    --line:#dee1e6;
    --teal:#1f6f5c;
    --teal-dark:#164f42;
    --teal-ink:#ffffff;
    --gold:#c0923a;
    --gold-2:#9a6f1c;           /* segundo tono del dorado (degradados). Cambia con el rango */
    --gold-soft:#e9d9b6;
    --danger:#b3412c;
    --ok:#1f6f5c;
    --muted:#6b6f76;
    --radius:14px;
    --serif:"Fraunces",Georgia,"Times New Roman",serif;
    --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
    font-size:16px;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:
      radial-gradient(600px 300px at 85% -10%, color-mix(in srgb,var(--gold) 14%,transparent), transparent 60%),
      var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    padding-top:calc(env(safe-area-inset-top,0px) + 40px);
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 40px);
    padding-left:16px;
    padding-right:16px;
    min-height:100%;
  }

  .page{max-width:960px;margin:0 auto;}

  /* ---- Efecto de aparición suave al hacer scroll ---- */
  .reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    transition-delay:var(--d,0s);
  }
  .reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }

  /* ---- Marca ---- */
  .brand-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:44px;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand-mark{
    width:26px;height:26px;
    background:var(--ink);
    clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
    flex-shrink:0;
  }
  .brand-name{font-family:var(--serif);font-weight:600;font-size:1.05rem;letter-spacing:-0.01em;}
  .secure-pill{
    display:flex;align-items:center;gap:6px;
    font-size:.75rem;color:var(--muted);
  }
  .secure-pill svg{flex-shrink:0;color:var(--teal);}

  /* ---- Hero ---- */
  .hero{margin-bottom:40px;max-width:38ch;}
  .eyebrow{
    display:inline-block;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:12px;
  }
  .hero h1{
    font-family:var(--serif);
    font-weight:600;
    font-size:2.1rem;
    line-height:1.15;
    letter-spacing:-0.01em;
    margin:0 0 10px;
  }
  .hero h1 em{
    font-style:italic;
    background:linear-gradient(90deg,var(--gold),var(--gold-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p{
    font-size:.95rem;
    color:var(--muted);
    line-height:1.6;
    margin:0;
  }
  .hero-rule{
    width:46px;height:3px;background:var(--gold);
    margin:18px 0 0;
    border-radius:2px;
  }
  .perks{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
  .perk{
    display:flex;align-items:center;gap:8px;
    background:var(--panel);
    border:1px solid var(--line);
    padding:9px 14px;
    border-radius:var(--radius);
    font-size:.82rem;
    font-weight:600;
    box-shadow:0 2px 10px rgba(19,20,31,.04);
  }

  .step-title{
    font-size:.75rem;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:0 0 16px;
    font-weight:600;
  }

  /* ---- Productos ----
     Cuadrícula de 6 columnas: cada tarjeta ocupa 2, así 3 por fila.
     Con 5 tarjetas, la fila de abajo (2 tarjetas) queda centrada. */
  .products{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
    margin-bottom:44px;
  }
  .product-card{grid-column:span 2;}
  .product-card:nth-child(4):nth-last-child(2){grid-column:2 / span 2;}

  @media (max-width:700px){
    .products{grid-template-columns:1fr;}
    .product-card,
    .product-card:nth-child(4):nth-last-child(2){grid-column:auto;}
  }

  .product-card{
    position:relative;
    overflow:hidden;
    font:inherit;
    color:inherit;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px 22px;
    cursor:pointer;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:12px;
    transition:border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .product-card::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 16%,transparent),transparent 55%);
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
  }
  .product-card:hover{
    border-color:color-mix(in srgb,var(--gold) 45%,var(--line));
    transform:translateY(-4px);
    box-shadow:0 18px 36px -18px rgba(19,20,31,.28);
  }
  .product-card:hover::before{opacity:1;}
  .product-card > *{position:relative;}
  .product-card.selected{
    border-color:var(--gold);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent), 0 18px 36px -18px color-mix(in srgb,var(--gold) 45%,transparent);
    transform:translateY(-3px);
  }
  /* Check en el plan seleccionado */
  .product-card.selected::after{
    content:"✓";
    position:absolute;top:14px;right:14px;
    width:24px;height:24px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-2));
    color:#fff;font-size:13px;font-weight:700;
    display:grid;place-items:center;
  }
  /* Etiqueta del plan más popular (se activa con popular:true en script.js) */
  .product-card[data-popular="1"]:not(.selected)::after{
    content:"MÁS POPULAR";
    position:absolute;top:14px;right:14px;
    font-size:.62rem;font-weight:700;letter-spacing:.08em;
    color:#8a5a0d;background:#f6ebcc;
    padding:4px 9px;border-radius:99px;
  }

  /* ---- Barras de nivel (6) ---- */
  .tier-bars{display:flex;align-items:flex-end;gap:3px;height:22px;}
  .tier-bars i{
    display:block;width:6px;border-radius:2px;
    background:var(--line);
  }
  .tier-bars i:nth-child(1){height:7px;}
  .tier-bars i:nth-child(2){height:10px;}
  .tier-bars i:nth-child(3){height:13px;}
  .tier-bars i:nth-child(4){height:16px;}
  .tier-bars i:nth-child(5){height:19px;}
  .tier-bars i:nth-child(6){height:22px;}
  .product-card[data-tier="1"] .tier-bars i:nth-child(-n+1),
  .product-card[data-tier="2"] .tier-bars i:nth-child(-n+2),
  .product-card[data-tier="3"] .tier-bars i:nth-child(-n+3),
  .product-card[data-tier="4"] .tier-bars i:nth-child(-n+4),
  .product-card[data-tier="5"] .tier-bars i:nth-child(-n+5),
  .product-card[data-tier="6"] .tier-bars i:nth-child(-n+6){background:var(--gold);}

  .product-name{font-family:var(--serif);font-weight:600;font-size:1.08rem;}
  .product-desc{font-size:.82rem;color:var(--muted);line-height:1.55;}
  .product-price{
    margin-top:auto;
    font-family:var(--serif);
    font-size:1.5rem;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .product-price span{font-family:var(--sans);font-size:.76rem;color:var(--muted);font-weight:500;margin-left:4px;}

  /* ---- Panel de pago ---- */
  .layout{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    opacity:.4;
    pointer-events:none;
    filter:grayscale(.4);
    transition:opacity .3s ease, filter .3s ease;
  }
  .layout.active{opacity:1;pointer-events:auto;filter:none;}
  @media (max-width:760px){ .layout{grid-template-columns:1fr;} }

  .summary{
    background:var(--ink);
    color:#eceaf2;
    padding:38px 34px;
    display:flex;
    flex-direction:column;
    gap:26px;
    justify-content:space-between;
    position:relative;
  }
  .summary::before{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(320px 200px at 100% 0%, color-mix(in srgb,var(--gold) 16%,transparent), transparent 65%);
    pointer-events:none;
  }
  .summary > *{position:relative;}
  .summary h2.product-title{
    font-family:var(--serif);
    font-size:1.35rem;
    font-weight:600;
    line-height:1.3;
    margin:0 0 8px;
    max-width:22ch;
  }
  .summary p.desc{color:#a5a3b3;font-size:.88rem;line-height:1.6;margin:0 0 28px;max-width:32ch;}

  /* ---- Tarjeta de crédito en vivo ---- */
  .cc{
    aspect-ratio:1.586/1;
    max-width:340px;
    width:100%;
    border-radius:18px;
    padding:22px 22px 18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(135deg,#3a3f5c,#1b1e33);
    box-shadow:0 24px 40px -14px rgba(0,0,0,.6);
    transition:background .5s;
    font-family:"Courier New",monospace;
  }
  .cc::before{
    content:"";
    position:absolute;
    width:260px;height:260px;
    right:-90px;top:-110px;
    border-radius:50%;
    background:rgba(255,255,255,.09);
  }
  .cc::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
    transform:translateX(-100%);
    animation:shine 5s ease-in-out infinite;
  }
  @keyframes shine{60%,100%{transform:translateX(100%);}}
  @media (prefers-reduced-motion:reduce){ .cc::after{animation:none;} }
  .cc.visa{background:linear-gradient(135deg,#1a3a9c,#0b1a5c);}
  .cc.mastercard{background:linear-gradient(135deg,#3b2a2f,#141018);}
  .cc.amex{background:linear-gradient(135deg,#2e77bc,#123a66);}
  .cc.diners{background:linear-gradient(135deg,#0079be,#093a5a);}
  .cc.discover{background:linear-gradient(135deg,#e55c20,#7a2a08);}
  .cc.jcb{background:linear-gradient(135deg,#0b7a3e,#063d20);}
  .cc-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;}
  .cc-chip{width:38px;height:28px;border-radius:6px;background:linear-gradient(135deg,#f0d78a,#b98a2d);}
  .cc-logo svg{height:28px;width:auto;display:block;color:#fff;}
  .cc-num{font-size:clamp(15px,2.6vw,20px);letter-spacing:.12em;position:relative;z-index:1;}
  .cc-bot{display:flex;justify-content:space-between;position:relative;z-index:1;}
  .cc-bot small{display:block;font-size:9px;opacity:.65;letter-spacing:.1em;margin-bottom:3px;}
  .cc-bot b{
    font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    max-width:180px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  .amount-block{margin-top:auto;}
  .amount-label{font-size:.75rem;color:#8f8ea3;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em;}
  .amount-value{font-family:var(--serif);font-size:2.3rem;font-weight:600;letter-spacing:-0.02em;color:var(--gold-soft);}
  .amount-currency{font-family:var(--sans);font-size:.95rem;color:#a5a3b3;font-weight:500;margin-left:6px;}
  .divider{height:1px;background:#2c2b3b;margin:22px 0;}
  .ref-row{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;color:#8f8ea3;}
  .ref-row span:last-child{
    color:#dedcf0;font-family:"SFMono-Regular",Consolas,monospace;font-size:.75rem;
    word-break:break-all;text-align:right;
  }

  .form-wrap{padding:38px 34px;}
  .form-wrap h3{font-family:var(--serif);font-size:1.1rem;font-weight:600;margin:0 0 20px;}

  .field{margin-bottom:15px;position:relative;}
  .field label{display:block;font-size:.76rem;color:var(--muted);margin-bottom:6px;}
  .field input,
  .field select{
    width:100%;padding:12px 14px;border:1px solid var(--line);
    border-radius:9px;font-size:.93rem;background:#fff;color:var(--ink);font-family:var(--sans);
    transition:border-color .2s, box-shadow .2s;
  }
  .field select,
  .installments select{
    appearance:none;
    -webkit-appearance:none;
    padding-right:38px;
    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 1.5l5 5 5-5' fill='none' stroke='%236b6f76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
  }
  .field input:focus,
  .field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 14%,transparent);}
  .field input.invalid{border-color:var(--danger);}
  .field .err{font-size:.74rem;color:var(--danger);margin-top:4px;min-height:1em;}

  .row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .card-number-wrap{position:relative;}
  .card-number-wrap input{padding-right:78px;}
  .brand-chip{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    display:flex;align-items:center;
    font-size:.66rem;font-weight:600;letter-spacing:.04em;color:var(--muted);
    text-transform:uppercase;pointer-events:none;
  }
  .brand-chip svg{height:26px;width:auto;display:block;color:#1a1f71;}
  .installments select{
    width:100%;padding:12px 38px 12px 14px;border:1px solid var(--line);
    border-radius:9px;font-size:.93rem;background-color:#fff;color:var(--ink);font-family:var(--sans);
  }

  button.pay-btn{
    width:100%;padding:14px;border:none;border-radius:9px;
    background:var(--teal);color:var(--teal-ink);
    font-size:.93rem;font-weight:600;font-family:var(--sans);cursor:pointer;
    margin-top:6px;transition:background .15s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow:0 12px 24px -12px color-mix(in srgb,var(--teal) 65%,transparent);
  }
  button.pay-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}
  button.pay-btn:not(:disabled):hover{background:var(--teal-dark);transform:translateY(-2px);}

  .status{margin-top:14px;font-size:.84rem;line-height:1.45;padding:10px 12px;border-radius:9px;display:none;}
  .status.show{display:block;}
  .status.info{background:#eef1f0;color:var(--teal-dark);}
  .status.error{background:#f9ece8;color:var(--danger);}
  .status.ok{background:#e9f3ef;color:var(--ok);}

  .secure-note{
    display:flex;align-items:center;gap:6px;
    font-size:.71rem;color:var(--muted);margin-top:16px;
  }
  .secure-note svg{flex-shrink:0;color:var(--teal);}

  .foot{text-align:center;color:var(--muted);font-size:.8rem;margin-top:44px;}

  @media (max-width:760px){
    .summary{padding:28px 24px;}
    .form-wrap{padding:28px 22px;}
    .brand-row{margin-bottom:32px;}
  }