/* pago.css — estilos de checkout.php y success.php (Tarot Mundial) */
:root{
  --noche:#160b2e; --noche2:#241245; --morado:#7b2ff7;
  --lila:#c9a7ff; --oro:#ffd76a; --verde:#2ee6a8; --blanco:#fdf9ff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Quicksand',sans-serif;
  background:radial-gradient(1200px 600px at 50% -100px, #3a1d6e 0%, var(--noche) 55%) var(--noche);
  color:var(--blanco);
  min-height:100vh;
}
h1,h2{font-family:'Cinzel',serif}

.cabecera-pago{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;max-width:1000px;margin:0 auto;
}
.marca{
  font-family:'Cinzel',serif;font-weight:800;font-size:1.2rem;
  color:var(--oro);text-decoration:none;letter-spacing:1px;
}
.volver{color:var(--lila);text-decoration:none;font-weight:600;font-size:.95rem}

.pago{
  max-width:1000px;margin:20px auto 60px;padding:0 16px;
  display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:start;
}
@media (max-width:820px){ .pago{grid-template-columns:1fr} }

.resumen{
  background:rgba(255,255,255,.06);
  border:2px solid var(--oro);border-radius:18px;padding:22px;
}
.resumen h2{color:var(--oro);font-size:1.1rem;margin-bottom:14px}
.resumen-fila{
  display:flex;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid rgba(201,167,255,.25);
}
.resumen-total{
  display:flex;justify-content:space-between;gap:10px;
  padding:14px 0 4px;font-size:1.15rem;
}
.resumen-total strong{color:var(--verde);font-family:'Cinzel',serif;font-size:1.4rem}
.resumen-nota{margin-top:12px;color:#cfc3ec;font-size:.9rem}

.formulario{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(201,167,255,.3);border-radius:18px;padding:26px 22px;
}
.formulario h1{font-size:1.4rem;color:var(--blanco)}
.formulario .sub{margin-top:8px;color:#ddd2f5;font-size:.98rem}

.campo{margin-top:18px}
.campo label{display:block;font-weight:700;margin-bottom:6px;color:var(--lila)}
.campo input{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(201,167,255,.4);
  background:var(--noche2);color:var(--blanco);
  font-family:'Quicksand',sans-serif;font-size:1rem;
}
.campo input:focus{outline:2px solid var(--oro);border-color:var(--oro)}

.separador{
  display:flex;align-items:center;gap:12px;margin:20px 0 12px;
  color:#cfc3ec;font-size:.9rem;font-weight:600;
}
.separador::before,.separador::after{
  content:"";flex:1;height:1px;background:rgba(201,167,255,.3);
}

.cargando{color:#cfc3ec;padding:14px 0}

.boton-pagar{
  width:100%;margin-top:20px;padding:16px;
  background:linear-gradient(135deg,#12b76a,#2ee6a8);
  color:#06281a;font-weight:700;font-size:1.15rem;
  font-family:'Quicksand',sans-serif;
  border:none;border-radius:50px;cursor:pointer;
  box-shadow:0 8px 30px rgba(46,230,168,.35);
}
.boton-pagar:disabled{opacity:.6;cursor:wait}

.spinner{
  display:inline-block;width:18px;height:18px;
  border:3px solid rgba(6,40,26,.3);border-top-color:#06281a;
  border-radius:50%;animation:gira .8s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}

.error{
  margin-top:14px;color:#ff8a8a;font-weight:600;
  background:rgba(255,138,138,.1);border:1px solid rgba(255,138,138,.4);
  border-radius:10px;padding:10px 14px;
}

.legal{margin-top:16px;color:#a795cc;font-size:.82rem;line-height:1.5}

/* ---- success.php ---- */
.resultado{
  max-width:640px;margin:40px auto 60px;padding:0 16px;text-align:center;
}
.icono{
  width:74px;height:74px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;font-weight:700;margin:0 auto 18px;
}
.icono.ok{background:rgba(46,230,168,.15);color:var(--verde);border:2px solid var(--verde)}
.icono.pendiente{background:rgba(255,215,106,.15);color:var(--oro);border:2px solid var(--oro)}
.icono.fallo{background:rgba(255,138,138,.15);color:#ff8a8a;border:2px solid #ff8a8a}
.resultado h1{font-size:1.6rem}
.resultado .grande{margin-top:12px;color:#ddd2f5;font-size:1.05rem;line-height:1.6}
.boton-llamar-ya{
  display:inline-block;margin-top:24px;
  background:linear-gradient(135deg,#12b76a,#2ee6a8);color:#06281a;
  font-weight:700;font-size:1.25rem;padding:18px 38px;border-radius:60px;
  text-decoration:none;box-shadow:0 10px 40px rgba(46,230,168,.45);
  animation:late 1.6s infinite;
}
@keyframes late{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.detalle{margin-top:14px;color:var(--lila);font-weight:600}
.volver-inicio{
  display:inline-block;margin-top:30px;color:var(--lila);
  text-decoration:none;font-weight:600;
  border:1px solid rgba(201,167,255,.4);border-radius:40px;padding:10px 22px;
}