/* =========================================================
   pago-checkout.css — Rediseño de pago.html estilo checkout
   (inspirado en el checkout de Hotmart, con la marca propia)
   Se carga SOLO en pago.html, después de masterclass.css.
   Reutiliza las variables de color de masterclass.css pero las
   invierte a un tema claro dentro de body.pago-light, igual que
   ya hace .light-section para secciones sueltas.
   ========================================================= */

body.pago-light {
  background: #f3f1ec;
  --bg: #f3f1ec;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f5f1;
  --border: #e4e1d8;
  --border-soft: #ece9e0;
  --white: #17171a;
  --muted: #55565c;
  --muted-2: #86878d;
  --gold: #b9790c;
  --gold-2: #8f5c08;
  --gold-dim: #fbeed4;
  --green: #1a9c53;
  --green-dim: #e3f6ea;
  --red: #d63a3a;
  --red-soft: #fbe6e6;
}

body.pago-light .bg-glow { display: none; }

/* El header se mantiene oscuro (igual que en el resto del sitio): el
   logo tiene fondo negro sólido y se vería mal sobre una barra blanca. */

/* Revierte al tema oscuro original solo dentro de este bloque,
   para dar contraste bajo el checkout claro (testimonios). */
body.pago-light .dark-contrast {
  background: #070912;
  --bg: #070912;
  --bg-2: #0b0f1f;
  --surface: #10152a;
  --surface-2: #161c38;
  --border: #232b4d;
  --border-soft: #1a2140;
  --white: #f5f7ff;
  --muted: #a3acce;
  --muted-2: #6d76a0;
  --gold: #ffc93c;
  --gold-2: #ffb000;
  --gold-dim: #3a2c0e;
  --green: #34e07a;
  --green-dim: #0e3322;
  --red: #ff5c5c;
  --red-soft: rgba(255, 92, 92, 0.12);
}

/* ---------- Encabezado de página ---------- */
.checkout-top { padding: 30px 0 4px; text-align: center; }
.checkout-top h1 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; color: var(--white); }
.checkout-top .subtitle { color: var(--muted); font-size: 0.92rem; margin-top: 8px; font-weight: 500; }

/* ---------- Tarjeta de checkout ---------- */
.checkout-wrap { max-width: 660px; margin: 0 auto; padding: 22px 20px 60px; }

.checkout-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(20, 20, 25, 0.06);
}

.checkout-section { padding: 24px 26px; }
.checkout-section + .checkout-section { border-top: 1px solid var(--border-soft); }
.checkout-h {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
}

/* ---------- Resumen del producto ---------- */
.checkout-product { display: flex; align-items: center; gap: 16px; }
.checkout-product img {
  width: 58px; height: 58px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.checkout-product .cp-info { flex: 1; min-width: 0; }
.checkout-product .cp-info h2 { font-size: 1.06rem; font-weight: 800; color: var(--white); margin-bottom: 3px; }
.checkout-product .cp-author { display: block; font-size: 0.82rem; color: var(--muted-2); font-weight: 600; margin-bottom: 10px; }
.checkout-product .cp-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.checkout-product .cp-price-old { font-size: 0.9rem; color: var(--muted-2); text-decoration: line-through; font-weight: 700; }
.checkout-product .cp-price-new { font-family: 'Sora', sans-serif; font-size: 1.5rem; color: var(--gold-2); font-weight: 800; }
.checkout-product .cp-promo-tag {
  display: inline-flex;
  margin-top: 9px;
  background: var(--gold-dim);
  color: var(--gold-2);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

/* ---------- Método de pago ---------- */
.pay-method-box { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.pay-method-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--surface-2);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--white);
}
.pay-method-head .radio-dot {
  width: 17px; height: 17px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 5px solid var(--white);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--border);
}
body.pago-light .pay-method-head .radio-dot { border-color: #17171a; background: #17171a; }
.pay-method-body { padding: 18px 16px 6px; }

/* ---------- Recap y confianza ---------- */
.checkout-summary-line { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--muted); font-weight: 600; padding: 6px 0; }
.checkout-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.08rem;
  color: var(--white);
  font-weight: 800;
  border-top: 1px dashed var(--border);
  margin-top: 10px;
  padding-top: 14px;
}
.checkout-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.8rem;
  color: var(--muted-2);
  font-weight: 700;
}
.checkout-trust i { color: var(--green); }

/* ---------- Botón de pago, debajo del formulario ---------- */
.checkout-section .btn-block { margin-top: 20px; }

@media (max-width: 480px) {
  .checkout-wrap { padding: 18px 14px 40px; }
  .checkout-section { padding: 20px 18px; }
}