/* Checkout. Sobrio a propósito: hereda tokens y tipografía, nada más. */

.checkout {
  background: var(--void, #08060f);
  color: var(--ink, #f4f1fb);
  font-family: var(--font-body), system-ui, sans-serif;
  margin: 0;
  padding: 32px 20px 64px;
}

.checkout__shell { max-width: 480px; margin: 0 auto; }

.checkout__volver { color: inherit; opacity: .7; font-size: 14px; text-decoration: none; }
.checkout__volver:hover { opacity: 1; }

.checkout h1 { font-family: var(--font-display), sans-serif; font-size: 28px; margin: 20px 0 18px; }

.resumen { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 16px; margin-bottom: 24px; }
.resumen__linea { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.resumen__linea strong { font-family: var(--font-display), sans-serif; font-size: 22px; }
.resumen__prueba { margin: 10px 0 0; font-size: 14px; opacity: .8; }

#form-checkout:not([hidden]) { display: flex; flex-direction: column; gap: 16px; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo--doble > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
small { font-size: 12px; opacity: .6; }

input, select, .caja {
  height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-sm, 10px);
  padding: 0 12px;
  background: rgba(255,255,255,.04);
  color: inherit;
  font: inherit;
}

.caja { padding: 12px; }

input:focus, select:focus { outline: 2px solid var(--purple, #7c3aed); outline-offset: 1px; }
.campo--malo input, .campo--malo select, .campo--malo .caja { border-color: var(--neon, #ff3d9a); }

hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 6px 0; }

.checkout__error {
  border-left: 3px solid var(--neon, #ff3d9a);
  background: rgba(255,61,154,.08);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  font-size: 14px;
  margin: 0;
}

.checkout__nota { font-size: 12px; opacity: .65; display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; }

.listo { text-align: center; padding: 24px 0; }
.listo h2 { font-family: var(--font-display), sans-serif; font-size: 26px; margin: 0 0 12px; }
.listo__ayuda { font-size: 14px; opacity: .75; }