/* ============================================================================
   Checkout del cliente — skin base (CK01, hito "Checkout front rediseño").
   Escopado a .checkout: NO afecta a otras páginas del front (M3).
   Consume los tokens congelados de docs/diseno/checkout/tokens.css
   (cargados como /css/tokens-checkout.css). Cero #hex/px sueltos (M-004):
   colores por var(--c-*), espaciado var(--sp-*), radios var(--r-*), sombras var(--sh-*).
   ============================================================================ */

/* --- Contenedor / superficie -------------------------------------------- */
.checkout {
  background: var(--c-sand);
  color: var(--c-ink);
  font-family: var(--f-ui);
  min-height: 60vh;
  padding-bottom: var(--sp-8);
}
/* .hidden debe ganar a los display:grid/flex de .checkout (grid-2, tr-line, etc.).
   No afecta a Alpine x-show (usa estilo inline, no la clase). */
.checkout .hidden { display: none !important; }

.checkout h1,
.checkout h2,
.checkout h3,
.checkout .checkout__display {
  font-family: var(--f-display);
  color: var(--c-ink);
  font-weight: 400;
  letter-spacing: .01em;
}

/* Título de excursión (sustituye al style inline literal por tokens) */
.checkout__excursion-title {
  font-family: var(--f-display);
  color: var(--c-primary);
  font-size: 2rem;
  line-height: 1.15;
  text-align: center;
  margin-bottom: var(--sp-5);
}

/* --- Shell de dos columnas (contenido + resumen) ------------------------ */
.checkout-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  max-width: 64rem;
  margin: 0 auto;
}
/* Paso 3: contenedor más ancho para que el calendario ocupe más (solo donde hay calendario) */
.checkout-shell:has(.cal-layout) { max-width: 72rem; }
.checkout #forms:has(.cal-layout) { max-width: 72rem !important; }
@media (min-width: 1024px) {
  .checkout-shell.has-summary {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

/* --- Resumen lateral persistente ---------------------------------------- */
.checkout-summary {
  background: var(--c-surface);
  border: var(--bd-hairline) solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--sp-5);
}
@media (min-width: 1024px) {
  .checkout-summary { position: sticky; top: var(--sp-6); }
}
.checkout-summary h3 { font-size: 1.25rem; margin-bottom: var(--sp-3); }
.checkout-summary h4 {
  font-family: var(--f-ui);
  color: var(--c-ink-2);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: var(--sp-4);
}
.checkout-summary .concept { color: var(--c-ink-2); }
.checkout-summary .price   { color: var(--c-ink); font-weight: 600; text-align: right; }
.checkout-summary hr {
  border: 0;
  border-top: var(--bd-hairline) solid var(--c-line);
  margin: var(--sp-3) 0;
}
.checkout-summary #total {
  border-top: var(--bd-strong) solid var(--c-accent-line);
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  font-weight: 700;
  font-size: 1.05rem;
}

/* --- Indicador de pasos (rediseño): eyebrow + barra de progreso + círculos --
   Escopado a .checkout .ck-steps (clases propias; el bundle legacy no interfiere). */
/* Banda blanca a todo el ancho bajo la cabecera (full-bleed dentro de .checkout) */
.checkout .checkout-steps-band {
  background: var(--c-surface);
  border-bottom: var(--bd-hairline) solid var(--c-line);
  margin-inline: calc(50% - 50vw);
  /* Sube --sp-4 para pegarse al header fijo (h-16) y elimina el hueco del layout;
     el padding-top compensa ese desplazamiento para no mover el contenido. */
  margin-top: calc(-1 * var(--sp-4));
  padding-top: calc(var(--sp-2) + var(--sp-4));
  padding-bottom: var(--sp-2);
  padding-inline: calc(50vw - 50%);
  margin-bottom: var(--sp-5);
}
.checkout .ck-steps { max-width: 64rem; margin: 0 auto; }
.checkout .ck-steps--step-3 { max-width: 72rem; }
.checkout .ck-steps__eyebrow {
  color: var(--c-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.checkout .ck-steps__track {
  height: var(--bd-strong);
  background: var(--c-line);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.checkout .ck-steps__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-accent);
  border-radius: var(--r-pill);
  transition: width .3s ease;
}
.checkout .ck-steps--step-1 .ck-steps__fill { width: 25%; }
.checkout .ck-steps--step-2 .ck-steps__fill { width: 50%; }
.checkout .ck-steps--step-3 .ck-steps__fill { width: 75%; }
.checkout .ck-steps--step-4 .ck-steps__fill { width: 100%; }
.checkout .ck-steps__list { list-style: none; display: flex; margin: 0; padding: 0; }
.checkout .ck-steps__item { flex: 1 1 0; position: relative; text-align: center; min-width: 0; }
.checkout .ck-steps__item:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0.8rem;
  right: 50%;
  width: 100%;
  height: var(--bd-hairline);
  background: var(--c-line-2);
  z-index: 0;
}
.checkout .ck-steps__item.is-filled::before { background: var(--c-accent); }
.checkout .ck-steps__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
}
.checkout .ck-steps__dot {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  background: var(--c-surface);
  color: var(--c-ink-3);
  border: var(--bd-strong) solid var(--c-line-2);
}
.checkout .ck-steps__dot.is-done { background: var(--c-accent); color: var(--c-surface); border-color: var(--c-accent); }
.checkout .ck-steps__dot.is-current { background: var(--c-primary); color: var(--c-surface); border-color: var(--c-primary); }
.checkout .ck-steps__name { font-size: .78rem; color: var(--c-ink-2); }
.checkout .ck-steps__item[aria-current="step"] .ck-steps__name { color: var(--c-ink); font-weight: 600; }

/* --- Botones ------------------------------------------------------------- */
.checkout .continue_button {
  background: var(--c-primary);
  color: var(--c-surface);
  border: 0;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--f-ui);
  font-weight: 600;
  min-height: 2.75rem;
  cursor: pointer;
  transition: background .15s ease;
}
.checkout .continue_button:hover { background: var(--c-primary-h); }
.checkout .continue_button:disabled {
  background: var(--c-line-2);
  color: var(--c-surface);
  cursor: not-allowed;
}
.checkout .back_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--c-primary);
  border: var(--bd-hairline) solid var(--c-line-2);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  min-height: 2.75rem;
  text-decoration: none;
  font-weight: 600;
}
.checkout .back_button:hover { background: var(--c-accent-soft); }

/* --- Foco visible (restaura el que mata el reset global * {outline:none}) - */
.checkout a:focus-visible,
.checkout button:focus-visible,
.checkout input:focus-visible,
.checkout select:focus-visible,
.checkout textarea:focus-visible,
.checkout [tabindex]:focus-visible {
  outline: var(--focus-w) solid var(--c-ring);
  outline-offset: var(--bd-strong);
  border-radius: var(--r-sm);
}

/* --- Título de sección por paso (CK02) ----------------------------------- */
.checkout__step-title {
  font-family: var(--f-display);
  color: var(--c-ink);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.15;
  text-align: center;
  margin: 0 auto var(--sp-4);
  max-width: 40rem;
}
.checkout__step-subtitle {
  color: var(--c-ink-2);
  text-align: center;
  margin: calc(-1 * var(--sp-4)) auto var(--sp-6);
  max-width: 34rem;
}

/* --- Paso 1: rejilla de tarjetas de excursión (3×2) ---------------------- */
.checkout .exc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  max-width: 68rem;
  margin: 0 auto;
}
@media (min-width: 640px)  { .checkout .exc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .checkout .exc-grid { grid-template-columns: repeat(3, 1fr); } }

.checkout .exc-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: var(--bd-hairline) solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.checkout .exc-card:hover,
.checkout .exc-card:focus-visible {
  box-shadow: var(--sh-2);
  border-color: var(--c-accent-line);
  transform: translateY(calc(-1 * var(--bd-strong)));
}
.checkout .exc-card__media {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: var(--c-sand-2);
}
.checkout .exc-card__media img {
  /* Todas las tarjetas con el mismo tamaño de imagen (4/3); la foto rellena
     el hueco recortando lo justo (cover). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.checkout .exc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  flex: 1 1 auto;
}
.checkout .exc-card__name {
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--c-primary);
}
.checkout .exc-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-2);
}
.checkout .exc-card__price { color: var(--c-ink); font-size: .9rem; }
.checkout .exc-card__price strong { font-size: 1.05rem; }
.checkout .exc-card__cta { color: var(--c-accent); font-weight: 700; font-size: .9rem; white-space: nowrap; }

/* --- Paso 2: cabecera izquierda + stepper de pasajeros -------------------- */
.checkout .ck-narrow { max-width: 44rem; margin: 0; text-align: left; }
.checkout .ck-step-header { margin-bottom: var(--sp-4); }
.checkout .ck-eyebrow {
  color: var(--c-accent);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.checkout .ck-title {
  font-family: var(--f-display);
  font-size: 1.75rem;
  line-height: 1.05;
  color: var(--c-ink);
}
.checkout .ck-subtitle { color: var(--c-ink-2); font-size: .9rem; margin-top: var(--sp-1); }

.checkout .pax-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.checkout .pax-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--c-surface);
  border: var(--bd-hairline) solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: var(--sp-3) var(--sp-4);
}
.checkout .pax-row__info { flex: 1 1 auto; }
.checkout .pax-row__title { font-weight: 700; font-size: 1rem; color: var(--c-ink); }
.checkout .pax-row__age { font-weight: 400; font-size: .78rem; color: var(--c-ink-2); margin-left: var(--sp-1); }
.checkout .pax-row__hint  { color: var(--c-ink-2); font-size: .82rem; }
.checkout .pax-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.checkout .pax-btn {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-md);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.checkout .pax-btn--minus {
  border: var(--bd-hairline) solid var(--c-primary);
  background: var(--c-surface);
  color: var(--c-primary);
}
.checkout .pax-btn--minus:hover { background: var(--c-accent-soft); }
.checkout .pax-btn--minus:disabled {
  border-color: var(--c-line-2);
  color: var(--c-line-2);
  cursor: not-allowed;
  background: var(--c-surface);
}
.checkout .pax-btn--plus {
  border: 0;
  background: var(--c-primary);
  color: var(--c-surface);
}
.checkout .pax-btn--plus:hover { background: var(--c-primary-h); }
.checkout .pax-count {
  min-width: 1.75rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--c-ink);
}
.checkout .ck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.checkout .ck-actions .back_button,
.checkout .ck-actions .continue_button { border-radius: var(--r-pill) !important; }
/* Botón Continuar en el azul del header (--deepSea). !important para ganar al
   bundle Vite obsoleto que trae .continue_button{background:var(--deepSea)!important}
   (defecto de assets, ESTADO §5). */
.checkout .ck-actions .continue_button { background: var(--deepSea) !important; }
.checkout .ck-actions .continue_button:hover { background: var(--c-primary-h) !important; }

/* --- Paso 3 · Calendario propio accesible (según prototipo) --------------- */
.checkout .cal-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: flex-start;
}
.checkout .cal {
  flex: 1 1 20rem;
  background: var(--c-surface);
  border: var(--bd-hairline) solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-5);
}
.checkout .cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.checkout .cal-title {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--c-ink);
}
.checkout .cal-nav {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  border: var(--bd-strong) solid var(--c-primary);
  background: var(--c-surface);
  color: var(--c-primary);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.checkout .cal-nav:hover { background: var(--c-accent-soft); }
.checkout .cal-nav:disabled { border-color: var(--c-line-2); color: var(--c-line-2); cursor: not-allowed; background: var(--c-surface); }
.checkout .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.checkout .cal-weekday {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--c-ink-3);
  font-weight: 700;
  text-transform: uppercase;
  padding: var(--sp-1) 0;
}
.checkout .cal-day {
  width: 100%;
  min-height: 3.4rem;
  border-radius: var(--r-sm);
  border: var(--bd-strong) solid transparent;
  background: transparent;
  color: var(--c-ink);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
}
.checkout .cal-day:disabled { color: var(--c-line-2); cursor: default; }
.checkout .cal-day--nodep   { background: var(--c-sand);        border-color: var(--c-line); }
.checkout .cal-day--hasdep  { background: var(--c-accent-soft); border-color: var(--c-accent-line); color: var(--c-primary); }
.checkout .cal-day--selected{ background: var(--c-primary);     border-color: var(--c-primary); color: var(--c-surface); }
.checkout .cal-day__mark { font-size: .6rem; line-height: 1; font-weight: 700; }

.checkout .cal-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
  padding: 0;
  font-size: .74rem;
  color: var(--c-ink-2);
}
.checkout .cal-legend li { display: flex; align-items: center; gap: var(--sp-1); }
.checkout .cal-legend__sw { width: .9rem; height: .9rem; border-radius: var(--r-sm); border: var(--bd-strong) solid transparent; display: inline-block; }
.checkout .cal-legend__sw--dep  { background: var(--c-accent-soft); border-color: var(--c-accent-line); }
.checkout .cal-legend__sw--none { background: var(--c-sand);        border-color: var(--c-line); }
.checkout .cal-legend__sw--sel  { background: var(--c-primary);     border-color: var(--c-primary); }

/* Panel de salidas */
.checkout .dep-panel {
  flex: 1 1 20rem;
  background: var(--c-surface);
  border: var(--bd-hairline) solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-5);
}
.checkout .dep-panel h3 { font-family: var(--f-ui); font-weight: 800; font-size: 1.15rem; color: var(--c-ink); margin-bottom: var(--sp-1); }
.checkout .dep-day { color: var(--c-ink-2); font-size: .9rem; margin: 0 0 var(--sp-4); text-transform: capitalize; }
.checkout .dep-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.checkout .dep-btn {
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: var(--bd-strong) solid var(--c-accent-line);
  background: var(--c-accent-soft);
  color: var(--c-primary);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
}
.checkout .dep-btn:hover { border-color: var(--c-accent); }
.checkout .dep-btn.is-selected { background: var(--c-primary); color: var(--c-surface); border-color: var(--c-primary); }
.checkout .dep-btn.is-disabled { background: var(--c-surface); color: var(--c-line-2); border-color: var(--c-line); cursor: not-allowed; }
.checkout .dep-empty { color: var(--c-ink-2); padding: var(--sp-3) 0; }
.checkout .dep-continue {
  width: 100%;
  margin-top: var(--sp-4);
  background: var(--deepSea) !important;
  border-radius: var(--r-pill) !important;
}
.checkout .dep-continue:disabled { background: var(--c-line-2) !important; }

/* --- CK04/CK05 · Paso 4: sub-pasos + campos de formulario ----------------- */
.checkout .substep {
  background: var(--c-surface);
  border: var(--bd-hairline) solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.checkout .substep__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.checkout .substep__num {
  width: 2rem; height: 2rem;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.checkout .substep__title { font-family: var(--f-display); font-size: 1.35rem; color: var(--c-ink); }
.checkout .substep__hint { color: var(--c-ink-2); margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }

/* Campos: label visible + borde con contraste ≥3:1 (--c-ink-3, A11Y-3) + foco */
.checkout .field { margin-bottom: var(--sp-4); }
.checkout .field > label,
.checkout label.field-label { display: block; font-weight: 600; color: var(--c-ink-2); margin-bottom: var(--sp-1); font-size: .9rem; }
.checkout input[type="text"],
.checkout input[type="email"],
.checkout input[type="number"],
.checkout input[type="tel"],
.checkout textarea,
.checkout select#language_id,
.checkout select#room,
.checkout select#phone_country {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: var(--bd-hairline) solid var(--c-ink-3);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-size: 1rem;
}
.checkout input[type="text"]:focus,
.checkout input[type="email"]:focus,
.checkout input[type="number"]:focus,
.checkout textarea:focus,
.checkout select#language_id:focus,
.checkout select#phone_country:focus { border-color: var(--c-primary); }
/* El navegador dibuja el <select> nativo con su propio radio (muy redondeado en
   macOS/Chrome) ignorando el border-radius de arriba; se resetea para que quede
   igual que el input de teléfono. La flecha es un SVG embebido: no puede leer
   variables CSS, así que el color va literal (= --c-ink-2 actual, #41607A).
   border-radius fijo a 5px (no var(--r-md)): el legado `#forms input { border-radius:
   5px }` (form_steps.css) gana por especificidad sobre los inputs de este formulario
   y los deja en 5px; igualamos el select a ese valor real, no al token. */
.checkout select#phone_country {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2341607A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: calc(var(--sp-4) + 1.25rem);
}
.checkout input[type="radio"],
.checkout input[type="checkbox"] { accent-color: var(--c-primary); width: 1.1rem; height: 1.1rem; vertical-align: middle; }

.checkout .radio-inline { display: inline-flex; align-items: center; gap: var(--sp-2); margin-right: var(--sp-5); }

/* Avisos tokenizados (sustituyen estilos inline con hex) */
.checkout .alert-error {
  border-left: calc(2 * var(--bd-strong)) solid var(--c-err);
  background: var(--c-err-soft);
  color: var(--c-err);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin-top: var(--sp-3);
}
.checkout .alert-warn {
  border-left: calc(2 * var(--bd-strong)) solid var(--c-warn);
  background: var(--c-warn-soft);
  color: var(--c-warn);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  margin: var(--sp-4) 0;
}
.checkout .field-error { color: var(--c-err); margin-top: var(--sp-2); }
.checkout .substep small { color: var(--c-ink-2); font-weight: 400; }
.checkout .discount-row { display: flex; gap: var(--sp-2); align-items: stretch; }
.checkout .discount-row input { flex: 1 1 auto; }
.checkout .discount-row .back_button { flex: 0 0 auto; white-space: nowrap; }
.checkout .checkout-link { color: var(--c-accent); text-decoration: underline; }
.checkout .checkout-link:hover { color: var(--c-accent-h); }

/* --- CK06 · Métodos de pago + submit del resumen ------------------------- */
.checkout .pay-methods { margin-top: var(--sp-5); }
.checkout .pay-methods__title { font-weight: 700; color: var(--c-ink); margin-bottom: var(--sp-3); }
.checkout .pay-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bd-hairline) solid var(--c-line);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  color: var(--c-ink);
}
.checkout .pay-option:hover { border-color: var(--c-accent-line); background: var(--c-accent-soft); }
.checkout .pay-option:has(input:checked) { border-color: var(--c-primary); box-shadow: inset 0 0 0 var(--bd-hairline) var(--c-primary); }
.checkout .pay-option i { color: var(--c-primary); font-size: 1.2rem; }
.checkout .pay-secure { color: var(--c-ink-2); font-size: .85rem; margin-top: var(--sp-3); }
.checkout .pay-secure i { color: var(--c-ok); }
.checkout .checkout-summary__submit { margin-top: var(--sp-5); }
.checkout .checkout-summary__submit .continue_button { width: 100%; }
.checkout .pay-redirect {
  max-width: 34rem;
  margin: var(--sp-8) auto;
  text-align: center;
  color: var(--c-ink-2);
}
.checkout .pay-redirect i { color: var(--c-primary); font-size: 2rem; margin-bottom: var(--sp-3); }

/* --- CK06 · Banner de confirmación (qr / gracias) ------------------------ */
.checkout .confirm-banner {
  max-width: 40rem;
  margin: 0 auto var(--sp-6);
  padding: var(--sp-6);
  text-align: center;
  background: var(--c-ok-soft);
  border: var(--bd-hairline) solid var(--c-ok);
  border-radius: var(--r-lg);
}
.checkout .confirm-banner__icon { color: var(--c-ok); font-size: 2.5rem; margin-bottom: var(--sp-3); }
.checkout .confirm-banner__title { font-family: var(--f-display); font-size: 2rem; color: var(--c-ink); }
.checkout .confirm-banner__text { color: var(--c-ink-2); margin-top: var(--sp-2); }

/* --- Paso 4 · dos columnas + Tu reserva + tarjetas de opción -------------- */
.checkout .step4-grid { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; }
.checkout .step4-main { flex: 1 1 30rem; display: flex; flex-direction: column; gap: var(--sp-4); }
.checkout .step4-main .substep { margin-bottom: 0; }
.checkout .step4-summary {
  flex: 1 1 18rem;
  background: var(--c-surface);
  border: var(--bd-hairline) solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--sp-5);
}
@media (min-width: 1024px) { .checkout .step4-summary { position: sticky; top: 5rem; } }
.checkout .tr-pay { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--bd-hairline) solid var(--c-line); }
.checkout .tr-pay-img { display: block; max-width: 100%; height: auto; margin-top: var(--sp-3); }
.checkout .tr-pay-btn {
  width: 100%;
  margin-top: var(--sp-4);
  background: var(--deepSea) !important;
  color: var(--c-surface);
  border: 0;
  border-radius: var(--r-pill) !important;
  padding: var(--sp-3) var(--sp-5);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}
.checkout .tr-pay-btn:hover { background: var(--c-primary-h) !important; }
.checkout .step4-summary .pay-secure-note { margin-top: var(--sp-3); }
.checkout .tr-title { font-family: var(--f-ui); font-weight: 800; font-size: 1.2rem; margin-bottom: var(--sp-3); color: var(--c-ink); }
.checkout .tr-exc { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.1; color: var(--c-ink); }
.checkout .tr-date { color: var(--c-ink-2); font-size: .9rem; margin: var(--sp-1) 0 var(--sp-4); }
.checkout .tr-lines { margin: 0; }
.checkout .tr-line { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: var(--bd-hairline) solid var(--c-line); font-size: .95rem; }
.checkout .tr-line.hidden { display: none; }
.checkout .tr-line dt { color: var(--c-ink-2); margin: 0; }
.checkout .tr-line dd { margin: 0; font-weight: 700; color: var(--c-ink); }
.checkout .tr-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--sp-3); margin-top: var(--sp-1); border-top: var(--bd-strong) solid var(--c-ink); }
.checkout .tr-total span:first-child { font-weight: 800; font-size: 1.05rem; }
.checkout .tr-total span:last-child { font-weight: 800; font-size: 1.5rem; color: var(--c-ink); }
.checkout .tr-note { color: var(--c-ink-2); font-size: .8rem; margin-top: var(--sp-3); }
.checkout .tr-edit { display: block; text-align: center; margin-top: var(--sp-4); padding: var(--sp-3); border: var(--bd-strong) solid var(--c-line-2); border-radius: var(--r-md); color: var(--c-ink); font-weight: 700; text-decoration: none; }
.checkout .tr-edit:hover { background: var(--c-sand-2); }

.checkout .opt-cards { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.checkout .opt-cards--2 { display: grid; grid-template-columns: 1fr 1fr; }
.checkout .opt-card {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bd-strong) solid var(--c-line-2);
  border-radius: var(--r-md);
  cursor: pointer;
}
.checkout .opt-card:has(input:checked) { background: var(--c-accent-soft); border-color: var(--c-accent); }
.checkout .opt-card input { margin-top: .15rem; }
.checkout .opt-card__body { display: flex; flex-direction: column; gap: var(--sp-1); }
.checkout .opt-card__title { font-weight: 700; color: var(--c-ink); }
.checkout .opt-card__desc { color: var(--c-ink-2); font-size: .82rem; }
.checkout .opt-cards--sm .opt-card { padding: var(--sp-2) var(--sp-4); }

.checkout .grid-2, .checkout .grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 640px) {
  .checkout .grid-2 { grid-template-columns: 1fr 1fr; }
  .checkout .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.checkout .field-hint { display: block; color: var(--c-ink-2); font-size: .8rem; margin-top: var(--sp-1); }
.checkout textarea { min-height: 5rem; resize: vertical; }
.checkout .check-line { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3); color: var(--c-ink); }

.checkout .step4-actions { margin-top: var(--sp-5); }
/* Especificidad ≥ (0,3,0) para ganar a .checkout .ck-actions .continue_button (deepSea) */
.checkout .ck-actions .pay-btn { background: var(--c-accent) !important; border-radius: var(--r-pill) !important; padding: var(--sp-3) var(--sp-6); font-size: 1.05rem; }
.checkout .ck-actions .pay-btn:hover { background: var(--c-accent-h) !important; }
.checkout .pay-secure-note { color: var(--c-ink-2); font-size: .85rem; margin-top: var(--sp-3); }
.checkout .pay-secure-note i { color: var(--c-ok); }

/* --- Utilidad: solo lectores de pantalla --------------------------------- */
.checkout .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}