/* ===== Layout base ===== */
.checkout{padding:16px 0 28px}
.ck-title{margin:6px 0 10px;font-weight:900}
.ck-grid{display:grid;grid-template-columns:1fr 380px;gap:18px}
@media (max-width:980px){.ck-grid{grid-template-columns:1fr}}

/* ===== Progreso ===== */
.ck-progress{height:6px;background:#eaf2ff}
.ck-progress__bar{
  height:100%;width:var(--p,0);background:linear-gradient(90deg,#1473e6,#5aa7ff);
  border-radius:999px;box-shadow:0 2px 10px rgba(20,115,230,.35);transition:width .4s ease
}

/* ===== Trust row ===== */
.trust-row{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 16px;padding:0;list-style:none;color:#0f396b}
.trust-row li{background:#eaf6ff;border:1px solid #cfe0ff;border-radius:999px;padding:6px 10px;font-weight:700}

/* ===== Steps ===== */
.ck-step{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.ck-step__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ck-step__num{width:28px;height:28px;border-radius:999px;background:#0f2745;color:#fff;display:grid;place-items:center;font-weight:800}
.ck-step__title{margin:0}
.ck-actions{display:flex;gap:10px;margin-top:10px}
.btn{background:#1473e6;color:#fff;border:0;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}
.btn.sec{background:#0f172a}
.btn.is-loading{position:relative;pointer-events:none;opacity:.85}
.btn.is-loading::after{content:"";position:absolute;right:12px;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid #fff;border-top-color:transparent;transform:translateY(-50%);animation:spin .8s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* ===== Grid de campos ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-2 .col-2{grid-column:1/-1}
@media (max-width:680px){.grid-2{grid-template-columns:1fr}}

/* ===== Campos con etiquetas flotantes ===== */
.field{position:relative}
.field input,.field select,.field textarea{
  width:100%;height:46px;border:1.5px solid #dbe3ef;border-radius:12px;background:#fff;
  padding:12px 14px;font:inherit;transition:.2s;border-color:var(--border,#dbe3ef)
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8aa0be 50%),linear-gradient(135deg,#8aa0be 50%,transparent 50%),linear-gradient(to right,#cfd9ea,#cfd9ea);background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 12px) calc(50% + 2px),calc(100% - 36px) 50%;background-size:6px 6px,6px 6px,1px 60%;background-repeat:no-repeat}
.field textarea{height:auto;min-height:92px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;--border:#1473e6;box-shadow:0 0 0 4px color-mix(in srgb,#1473e6 18%,transparent)}
.field label{
  position:absolute;left:12px;top:12px;color:#8aa0be;background:#fff;padding:0 6px;border-radius:6px;
  transform-origin:left top;transition:.18s;font-size:.94rem;pointer-events:none
}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,
.field select:focus+label,.field select:has(option:checked:not([value=""]))+label{
  transform:translateY(-22px) scale(.9);color:#1473e6
}
.input--error{--border:#ef4444!important}
.help-error{color:#b91c1c;margin-top:6px;font-size:.88rem}

/* ===== ETA pill ===== */
.eta-pill{display:inline-flex;align-items:center;gap:8px;background:#eaf6ff;color:#0b396b;border:1px solid #cfe0ff;padding:8px 12px;border-radius:999px;font-weight:700;margin:-2px 0 12px}

/* ===== Summary ===== */
.ck-summary{position:relative}
.summary-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px}
.summary-sticky{position:sticky;top:84px}
.summary-toggle{display:none}
@media (max-width:980px){.summary-toggle{display:flex;justify-content:space-between;align-items:center;cursor:pointer}}
.summary-card.collapsed .summary-body{display:none}
.summary-item{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.summary-item img{width:52px;height:52px;object-fit:contain;background:#f7f9fe;border-radius:10px;border:1px solid #eef2f8}
.summary-line{display:flex;flex-direction:column}
.summary-title{font-weight:800;font-size:.95rem}
.summary-meta{color:#64748b;font-size:.9rem}
.summary-totals{border-top:1px dashed #e6ecf6;margin-top:8px;padding-top:8px}
.summary-totals .row{display:flex;align-items:center;justify-content:space-between;margin:6px 0}
.summary-totals .total{font-size:1.05rem}
.summary-safe{margin-top:8px;background:#ecfdf5;border:1px solid #bbf7d0;color:#065f46;padding:8px 10px;border-radius:12px;font-weight:800}

/* Skeleton */
.skel{background:linear-gradient(90deg,#eef3f9 25%,#f6f9ff 37%,#eef3f9 63%);background-size:400% 100%;animation:sh 1.4s ease infinite;border-radius:10px}
@keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}
.skel-line{height:14px;margin:8px 0}

/* Cupón */
.coupon{display:flex;gap:8px;align-items:center;margin-top:8px}
.coupon input{flex:1;height:40px;border:1px solid #dbe3ef;border-radius:10px;padding:0 10px}
.coupon button{height:40px;border:0;border-radius:10px;background:#1473e6;color:#fff;font-weight:800;padding:0 12px}
.coupon-msg{font-size:.9rem;margin-top:6px}
.coupon-msg.ok{color:#065f46}.coupon-msg.err{color:#b91c1c}

/* Toast */
.toast{
  position:fixed;right:16px;bottom:16px;background:#0f172a;color:#fff;padding:10px 14px;
  border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(10px);
  transition:.25s;z-index:9999
}
.toast.show{opacity:1;transform:translateY(0)}

/* Tarjeta marca */
.cc-brand{position:absolute;right:12px;top:10px;height:28px;display:none}
/* Cards de método de pago */
.pay-methods{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 14px;
}
.pay-radio{ position:absolute; opacity:0; pointer-events:none; }
.pay-card{
  background:#fff; border:1px solid var(--line,#e6e9ef); border-radius:14px;
  padding:12px; cursor:pointer; display:flex; flex-direction:column; gap:4px;
  box-shadow: var(--shadow,0 6px 24px rgba(15,23,42,.06)); transition:.2s ease;
}
.pay-card__icon{ font-size:20px; line-height:1; }
.pay-card__title{ font-weight:800; }
.pay-card__desc{ color:#6b7280; font-size:.92rem; }
.pay-radio:checked + .pay-card{
  border-color:#1473e6; box-shadow:0 10px 26px rgba(20,115,230,.15);
}

/* Paneles */
.pay-panels{ background:#fff; border:1px solid var(--line,#e6e9ef); border-radius:14px; padding:14px; }
.pay-panel{ display:none; }
.pay-panel.show{ display:block; }

.row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.col{ display:flex; flex-direction:column; gap:6px; }
.col-sm{ max-width:160px; }

.f-label{ font-weight:700; font-size:.95rem; }
.f-input{
  height:42px; border:1.5px solid #dbe2ee; border-radius:10px; padding:0 12px; outline:none;
  background:#fff; transition:border-color .2s, box-shadow .2s;
}
.f-input:focus{
  border-color:#8bb7ff; box-shadow:0 0 0 3px rgba(20,115,230,.15);
}

.coupon-wrap{ display:flex; gap:8px; }
.coupon-wrap .f-input{ flex:1; }

.ck-actions{ display:flex; gap:10px; margin-top:14px; }

/* “Pago seguro” compacto */
.secure-box{
  display:flex; align-items:center; gap:8px;
  margin-top:10px; color:#1f2937; font-weight:700;
}
.secure-box .lock{ font-size:18px; }

/* Responsivo */
@media (max-width:900px){
  .row{ grid-template-columns:1fr 1fr; }
  .col-sm{ max-width:unset; }
}
@media (max-width:560px){
  .row{ grid-template-columns:1fr; }
  .pay-methods{ grid-template-columns:1fr; }
}
.checkout-page{
  display:grid;
  grid-template-columns: 1fr 350px; /* pasos + resumen fijo */
  gap:32px;
  max-width:100%; /* ocupa todo */
  width:100%;
  padding:32px;
  box-sizing:border-box;
}

.checkout-steps{
  background:#fff;
  border-radius:12px;
  padding:24px;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.checkout-summary{
  background:#fff;
  border-radius:12px;
  padding:24px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  height:fit-content;
  position:sticky;
  top:100px; /* se queda visible al hacer scroll */
}

.summary-totals{
  margin-top:16px;
  border-top:1px solid #eee;
  padding-top:16px;
  font-size:15px;
}
.summary-totals div{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}
.summary-totals .total{
  font-weight:700;
  font-size:16px;
}
/* ===== GRID FULL SCREEN ===== */
.checkout-page{
  display:grid;
  grid-template-columns: 1fr 360px;   /* pasos | resumen */
  gap:28px;
  width:100%;
  max-width:100%;
  padding:24px;
  box-sizing:border-box;
}

.checkout-steps{
  background:#fff;
  border-radius:14px;
  padding:22px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.checkout-summary{
  position:sticky;
  top:96px;
  height:fit-content;
}

.summary-card{
  background:#fff;
  border-radius:14px;
  padding:18px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.summary-item{
  display:flex; gap:12px; align-items:center;
  padding:10px 0; border-bottom:1px dashed #e8edf5;
}
.summary-item img{
  width:56px; height:56px; object-fit:contain; background:#f7f9fe; border-radius:10px;
}
.summary-line{ flex:1; }
.summary-title{ font-weight:700; font-size:.95rem; }
.summary-meta{ color:#667085; font-size:.9rem; }

.summary-totals{ margin-top:12px; }
.summary-totals div{ display:flex; justify-content:space-between; padding:6px 0; }
.summary-totals .total{ font-weight:800; font-size:1.05rem; }

/* ===== Progreso ===== */
.ck-progress{ height:6px; background:#e8eef8; }
.ck-progress__bar{ height:100%; width:var(--p,0%); background:#1473e6; transition:width .25s; }

/* ===== Tipografía y helpers ===== */
.ck-title{ margin:6px 0 12px; font-weight:900; }
.trust-row{ display:flex; gap:10px; padding:0; margin:0 0 10px; list-style:none; color:#0f172a; }
.trust-row li{ background:#f3f7ff; border:1px solid #e7edf8; padding:6px 10px; border-radius:999px; font-weight:700; }

/* ===== Pasos ===== */
.ck-step{ background:#fff; border:1px solid #e7edf5; border-radius:14px; padding:16px; margin-bottom:14px; }
.ck-step__head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ck-step__num{ width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:#1473e6; color:#fff; font-weight:800; }
.ck-step__title{ margin:0; font-weight:900; }
.ck-step__body{ margin-top:10px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.col-2{ grid-column:1 / -1; }

/* ===== Campos ===== */
.field{ position:relative; }
.field input, .field select, .field textarea{
  width:100%; background:#fff; border:2px solid #e7edf5; border-radius:12px;
  padding:12px 12px; outline:none; font-size:.95rem; transition:border-color .15s, box-shadow .15s;
}
.field textarea{ min-height:90px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:#1473e6; box-shadow:0 0 0 3px rgba(20,115,230,.12);
}
.field label{
  position:absolute; left:12px; top:10px; font-size:.83rem; color:#667085; background:#fff; padding:0 6px;
  transform:translateY(-50%); pointer-events:none;
}
.field input[placeholder=" "]:placeholder-shown + label,
.field textarea[placeholder=" "]:placeholder-shown + label,
.field select[placeholder=" "]:placeholder-shown + label{ top:22px; font-size:.95rem; color:#98a2b3; }

.input--error{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.12) !important; }
.help-error{ color:#ef4444; font-size:.8rem; margin-top:4px; min-height:18px; }

/* ===== Botones ===== */
.btn{ background:#1473e6; color:#fff; border:0; border-radius:12px; padding:10px 16px; font-weight:800; cursor:pointer; }
.btn:hover{ filter:brightness(.96); }
.btn.sec{ background:#0f172a; }
.btn.alt{ background:#ff7a18; }
.ck-actions{ display:flex; gap:10px; margin-top:12px; }

/* ===== Envío ===== */
.eta-pill{ background:#f5f9ff; border:1px solid #e3eefc; color:#0f172a; padding:8px 12px; border-radius:10px; font-weight:700; }

/* ===== Métodos de pago ===== */
.pay-methods{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:8px 0 12px; }
.pay-radio{ display:none; }
.pay-card{ border:2px solid #e7edf5; border-radius:12px; padding:12px; cursor:pointer; display:flex; flex-direction:column; gap:4px; }
.pay-card__icon{ font-size:20px; }
.pay-card__title{ font-weight:900; }
.pay-card__desc{ color:#667085; font-size:.9rem; }
.pay-radio:checked + .pay-card{ border-color:#1473e6; box-shadow:0 0 0 3px rgba(20,115,230,.12); }

.pay-panels .pay-panel{ display:none; border:1px solid #e7edf5; border-radius:12px; padding:12px; }
.pay-panels .pay-panel.show{ display:block; }

.row{ display:flex; gap:12px; margin-bottom:10px; }
.col{ flex:1; }
.col-sm{ max-width:140px; }
.f-label{ display:block; font-weight:700; margin-bottom:6px; }
.f-input{ width:100%; border:2px solid #e7edf5; border-radius:12px; padding:10px; }

/* Cupón */
.coupon-wrap{ display:flex; gap:10px; }
.coupon-msg{ margin-top:6px; font-weight:700; }
.coupon-msg.ok{ color:#16a34a; }
.coupon-msg.err{ color:#ef4444; }

/* Seguro */
.secure-box{ margin-top:10px; background:#f7fbff; border:1px solid #dfeaf9; padding:10px 12px; border-radius:10px; font-weight:800; display:flex; align-items:center; gap:8px; }
.secure-box .lock{ font-size:18px; }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#111827; color:#fff; padding:10px 14px; border-radius:12px; opacity:0; pointer-events:none;
  transition:.25s; z-index:9999;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

/* Responsive */
@media (max-width: 1024px){
  .checkout-page{ grid-template-columns: 1fr; }
  .checkout-summary{ position:static; }
}
/* ===== Paso 4 / Revisión ===== */
.rev-grid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:16px;
}
@media (max-width:900px){ .rev-grid{ grid-template-columns:1fr; } }

.rev-card{
  background:#fff;
  border:1px solid var(--line, #e6eaf2);
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow, 0 6px 24px rgba(15,23,42,.06));
}

.rev-card header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.rev-card h3{ margin:0; font-weight:800; }

.link.edit{
  background:transparent; border:0; color:#1473e6; font-weight:800; cursor:pointer;
}
.link.edit:hover{ text-decoration:underline; }

.rev-list{ list-style:none; padding:0; margin:0; }
.rev-list li{ display:flex; gap:8px; padding:6px 0; }
.rev-list li span{ color:#475569; }

.rev-summary .row{
  display:flex; align-items:center; justify-content:space-between; padding:6px 0;
}
.rev-summary .row.tot{
  border-top:1px dashed #e6eaf2; margin-top:6px; padding-top:10px; font-size:1.05rem;
}

.terms{ margin-top:10px; }
.terms label{ display:flex; gap:8px; align-items:flex-start; }
.terms a{ color:#1473e6; text-decoration:none; }
.terms a:hover{ text-decoration:underline; }

/* utilidades */
[hidden]{ display:none !important; }
/* --- Transferencia: cuentas + WhatsApp --- */
.accounts-box{
  background:#fff;border:1px dashed var(--line);border-radius:12px;
  padding:12px;margin-top:12px
}
.accounts-head{font-weight:800;margin-bottom:6px}
.accounts-list{display:grid;gap:10px}
.acc-item{
  display:grid;gap:8px;
  border:1px solid var(--line);background:#f9fafb;border-radius:10px;padding:10px
}
.acc-item .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.acc-label{color:#6b7280;font-size:.9rem}
.acc-copy{margin-left:auto}
.btn-copy{
  background:#0f172a;color:#fff;border:0;border-radius:10px;
  padding:6px 10px;font-weight:700;cursor:pointer
}

.accounts-note{color:#6b7280;font-size:.9rem;margin-top:6px}
.wa-proof{margin-top:12px}
.btn-whatsapp{
  background:#25d366;color:#0b1324;border:0;border-radius:12px;
  padding:10px 14px;font-weight:800;display:inline-flex;gap:8px;align-items:center
}
.btn-whatsapp:hover{filter:brightness(0.95)}