/* =========================================================
   pago-checkout.css — Tema claro para pago.html (reserva de
   Auditoría). Se carga solo aquí, después de embudo.css.
   Solo cambia colores, no la estructura de la página. El embed
   de Calendly también se re-tematiza vía la URL en embudo.js
   (parámetros background_color/text_color/primary_color).
   El header se queda oscuro: el logo tiene fondo negro sólido.
   ========================================================= */

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;
  --green: #1f9d57;
  --green-2: #17a361;
  --green-dim: #e3f6ea;
  --green-glow: rgba(31, 157, 87, 0.25);
  --red: #d63a3a;
  --red-soft: #fbe6e6;
}

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

/* ---------- Overlay del calendario bloqueado ---------- */
body.pago-light .calendly-lock {
  background: rgba(255, 255, 255, 0.92);
}

/* ---------- Campos de tarjeta (Stripe): que se note dónde va cada uno ---------- */
/* Sobre fondo blanco, el borde muy claro original casi no se ve. */
body.pago-light .stripe-element {
  background: var(--surface-2);
  border: 1px solid #d7d3c8;
  border-radius: 10px;
  padding: 13px 14px;
}
body.pago-light .stripe-element.StripeElement--focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31, 157, 87, 0.15);
}
body.pago-light .stripe-element.StripeElement--invalid {
  border-color: var(--red);
}