/*  Checkout del configurador /montaje — Pasos 1·Resumen, 2·Datos, 3·Pago
 *  (montaje/checkout.php) y pantalla de gracias A/B (montaje/gracias.php).
 *  Mobile-first. Mismo lenguaje de marca que montaje.css:
 *  naranja #FF8C20→#f97316, banda #101116, fondo #f6f6f8, Montserrat.
 *  Namespaces: .mtjco- (checkout) · .mtjok- (gracias).
 */

/* Mismo esqueleto que el configurador (.mtj-body): columna flex de alto completo
   y neutralización del .container global (height:100%/overflow:hidden), que aquí
   recortaría el contenido. Sin esto el checkout se ve descuadrado. */
.mtjco-body,
.mtjok-body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: #f6f6f8;
  color: #1b1b1b;
  font-family: 'Montserrat', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
.mtjco-body > main.container,
.mtjok-body > main.container {
  flex: 1 0 auto;
  height: auto;
  overflow: visible;
  padding: 0;
  background: #f6f6f8;
}
.mtjco, .mtjok {
  --pad: clamp(14px, 4vw, 24px);
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--pad);
  box-sizing: border-box;
}
.mtjco { padding-bottom: 118px; }   /* hueco para la barra fija (debe superar su alto real) */

/* ════════ Cabecera + progreso ════════ */
.mtjco-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: clamp(12px, 4vw, 20px) 0 0;
}
/* "‹ Volver" borderless y sobrio, como el configurador (.mtj-back). */
.mtjco-back {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 4px; margin-left: -4px;
  font-family: inherit; font-size: .92rem; font-weight: 700;
  color: #5b6370; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.mtjco-back svg { width: 20px; height: 20px; display: block; }
.mtjco-back:hover { color: #FF8C20; }
.mtjco-topright { display: inline-flex; align-items: center; gap: 10px; }
.mtjco-stepno { font-size: .8rem; font-weight: 700; color: #9aa0ad; }
.mtjco-testflag {
  font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #b45309; background: #fff5e6; border: 1px solid #f5c98a;
  padding: 3px 8px; border-radius: 100px; white-space: nowrap;
}

/* Barra de progreso fina (50% → 100%) */
.mtjco-prog {
  height: 4px; border-radius: 100px; background: #e6e6ec;
  margin: 12px 0 clamp(14px, 4vw, 20px); overflow: hidden;
}
.mtjco-prog__fill {
  display: block; height: 100%; width: 50%;
  background: linear-gradient(90deg, #FF8C20, #f97316);
  border-radius: 100px; transition: width .32s cubic-bezier(.22, 1, .36, 1);
}

/* ════════ Tipografía de paso ════════ */
.mtjco-h1 {
  margin: 0 0 5px;
  font-size: clamp(1.3rem, 5.2vw, 1.6rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.14; color: #1b1b1b;
}
.mtjco-lead {
  margin: 0 0 16px;
  font-size: .88rem;
  color: #6b7280; font-weight: 500; line-height: 1.45;
}

/* ════════ PASO 1 · Datos — campos suaves con etiqueta flotante ════════
   Un solo texto por campo: la etiqueta hace de placeholder y sube al escribir.
   Sin bordes duros (relleno gris claro) para que respire y se sienta ligero. */
.mtjco-form { display: flex; flex-direction: column; gap: 14px; }
.mtjco-group { display: flex; flex-direction: column; gap: 8px; }
.mtjco-field { position: relative; display: flex; flex-direction: column; }
.mtjco-field input {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 1rem; font-weight: 600; color: #1b1b1b;  /* 16px: sin zoom iOS */
  padding: 18px 14px 6px;
  border: 1.5px solid transparent; border-radius: 12px; background: #f2f2f5;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.mtjco-field label {
  position: absolute; left: 14px; top: 14px;
  font-size: 1rem; font-weight: 500; color: #9aa0ad;
  pointer-events: none; transform-origin: left top;
  transition: transform .15s ease, color .15s ease;
}
.mtjco-field input:focus {
  outline: none; background: #fff; border-color: #FF8C20;
  box-shadow: 0 0 0 3px rgba(255, 140, 32, .15);
}
.mtjco-field input:focus + label,
.mtjco-field input:not(:placeholder-shown) + label {
  transform: translateY(-9px) scale(.72); font-weight: 700;
}
.mtjco-field input:focus + label { color: #f97316; }
.mtjco-field input:not(:focus):not(:placeholder-shown) + label { color: #9aa0ad; }
.mtjco-field.has-err input { border-color: #e5484d; background: #fff; }
.mtjco-err { font-size: .76rem; font-weight: 600; color: #e5484d; padding: 5px 4px 0; min-height: 0; }
.mtjco-field.has-err .mtjco-err { min-height: 1em; }

/* ════════ PASO 2 · Pago ════════ */
.mtjco-paylead {
  margin: 12px 0 22px; padding: 18px 20px;
  background: #fff; border: 1px solid #ececf0; border-radius: 16px;
}
/* Desglose de impuestos (base + IVA/IGIC) sobre la línea de "Hoy pagas" */
.mtjco-desglose { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1f1f4; }
.mtjco-desglose__row { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; color: #6b7280; font-weight: 600; }
.mtjco-desglose__row + .mtjco-desglose__row { margin-top: 4px; }
.mtjco-paylead__row--sec small { font-size: .72rem; font-weight: 600; color: #8b90a0; }
.mtjco-paylead__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mtjco-paylead__row--sec { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f1f4; }
.mtjco-paylead__lbl { font-size: .9rem; color: #6b7280; font-weight: 600; }
.mtjco-paylead__big { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; color: #1b1b1b; }
.mtjco-paylead__row--sec b { font-size: 1.05rem; font-weight: 800; color: #f97316; }
.mtjco-paylead__note { margin: 12px 0 0; font-size: .82rem; color: #8b90a0; line-height: 1.5; }
/* Marca de PENDIENTE (copy sin confirmar) — visible a propósito */
.mtjco-pending {
  background: #fff5e6; color: #b45309;
  border: 1px dashed #f5b562; border-radius: 6px;
  padding: 1px 6px; font-size: .95em; font-weight: 600;
}

.mtjco-wallet, .mtjco-pay {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 1.05rem; font-weight: 800;
  padding: 17px 20px; border-radius: 14px; cursor: pointer;
  touch-action: manipulation; border: none;
}
.mtjco-wallet { background: #000; color: #fff; margin-bottom: 12px; }
.mtjco-wallet__ico { display: inline-flex; width: 22px; height: 22px; }
.mtjco-wallet__ico svg { width: 100%; height: 100%; }
.mtjco-pay {
  background: linear-gradient(135deg, #FF8C20, #f97316); color: #fff;
  box-shadow: 0 6px 16px rgba(249, 115, 22, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mtjco-pay:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(249, 115, 22, .42); }
.mtjco-pay svg { width: 22px; height: 22px; }
.mtjco-secure {
  text-align: center; margin: 12px 0 0;
  font-size: .8rem; font-weight: 600; color: #16a34a;
}

/* Aviso de pago no completado (vuelta desde Redsys UrlKO). */
.mtjco-payko {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px; padding: 12px 14px;
  background: #fef2f2; border: 1px solid #f5c2c2; border-radius: 12px;
  color: #b42318; font-size: .9rem; line-height: 1.4;
}
.mtjco-payko[hidden] { display: none; }
.mtjco-payko svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }

.mtjco-transfer { margin-top: 22px; border-top: 1px solid #ececf0; padding-top: 14px; }
.mtjco-transfer summary {
  cursor: pointer; list-style: none;
  font-size: .9rem; font-weight: 600; color: #8b90a0; text-align: center;
}
.mtjco-transfer summary::-webkit-details-marker { display: none; }
.mtjco-transfer summary:hover { color: #5b6370; text-decoration: underline; }
.mtjco-transfer__body { margin-top: 12px; font-size: .88rem; color: #5b6370; line-height: 1.5; }
.mtjco-transfer__btn {
  width: 100%; margin-top: 12px;
  font-family: inherit; font-size: .95rem; font-weight: 700;
  padding: 14px 18px; border-radius: 12px; cursor: pointer;
  background: #fff; color: #1b1b1b; border: 1.5px solid #d7d7de;
  touch-action: manipulation;
}
.mtjco-transfer__btn:hover { border-color: #1b1b1b; }

/* ════════ Barra de acción fija (Pasos 1-2) ════════ */
.mtjco-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid #e2e2e9;
  box-shadow: 0 -10px 30px rgba(16, 17, 22, .16);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.mtjco-bar[hidden] { display: none; }
.mtjco-bar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #FF8C20 30%, #f97316 70%, transparent);
}
.mtjco-bar__inner {
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mtjco-bar__prices { min-width: 0; }
.mtjco-bar__lbl {
  display: block; font-size: .6rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8b90a0; line-height: 1;
}
/* Espejo de la barra del configurador: base grande + "+IVA (total)" pequeño al
   lado, y la cuota igual un escalón por debajo. */
.mtjco-bar__initial { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-top: 3px; }
.mtjco-bar__amount {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: #1b1b1b;
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.mtjco-bar__taxline { font-size: .72rem; font-weight: 600; color: #9ca3af; white-space: nowrap; }
.mtjco-bar__month { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; min-width: 0; }
.mtjco-bar__month b {
  font-size: .9rem; font-weight: 800; letter-spacing: -.01em; color: #1b1b1b;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mtjco-bar__tax { font-size: .7rem; font-weight: 600; color: #9ca3af; }

/* Modal de aviso IGIC (CP de Canarias) */
body.mtj-noscroll { overflow: hidden; }
.mtjco-igic { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mtjco-igic[hidden] { display: none; }
.mtjco-igic__overlay { position: absolute; inset: 0; background: rgba(16,17,22,.55); opacity: 0; transition: opacity .25s ease; }
.mtjco-igic.is-open .mtjco-igic__overlay { opacity: 1; }
.mtjco-igic__card {
  position: relative; width: 100%; max-width: 380px; text-align: center;
  background: #fff; border-radius: 20px; padding: 28px 24px 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  transform: translateY(12px) scale(.98); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.mtjco-igic.is-open .mtjco-igic__card { transform: translateY(0) scale(1); opacity: 1; }
.mtjco-igic__ico { display: inline-flex; width: 52px; height: 52px; margin-bottom: 12px; align-items: center; justify-content: center; border-radius: 50%; background: #fff4e8; color: #f97316; }
.mtjco-igic__ico svg { width: 28px; height: 28px; }
.mtjco-igic__title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; color: #101116; }
.mtjco-igic__txt { margin: 0 0 20px; font-size: .92rem; line-height: 1.5; color: #40404a; }
.mtjco-igic__txt b { color: #101116; }
.mtjco-igic__ok {
  width: 100%; padding: 13px; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 1rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #FF8C20, #f97316);
}
@media (prefers-reduced-motion: reduce) {
  .mtjco-igic__overlay, .mtjco-igic__card { transition: none; }
}
.mtjco-bar__cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #FF8C20, #f97316); color: #fff; border: none;
  font-family: inherit; font-weight: 800; font-size: 1rem;
  padding: 13px 22px; border-radius: 100px; cursor: pointer;
  touch-action: manipulation; box-shadow: 0 6px 16px rgba(249, 115, 22, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mtjco-bar__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(249, 115, 22, .42); }
.mtjco-bar__cta svg { width: 20px; height: 20px; }

/* ════════════════════════════════════════════
   GRACIAS (variantes A y B)
════════════════════════════════════════════ */
.mtjok { padding-top: 8px; padding-bottom: 48px; }
.mtjok-hero { text-align: center; padding: 34px 0 22px; }
.mtjok-check {
  display: inline-grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #15803d); color: #fff;
  margin-bottom: 16px; box-shadow: 0 12px 30px rgba(22,163,74,.35);
}
.mtjok-check--wait { background: linear-gradient(135deg, #FF8C20, #f97316); box-shadow: 0 12px 30px rgba(255,140,32,.4); }
.mtjok-check svg { width: 38px; height: 38px; }
.mtjok-hero h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.mtjok-num { margin: 0 0 4px; font-size: .95rem; color: #5b6370; }
.mtjok-num b { color: #1b1b1b; }
.mtjok-sub { margin: 0; font-size: .95rem; font-weight: 600; color: #16a34a; }
.mtjok-hero--wait .mtjok-sub { color: #b45309; }

.mtjok-mail {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 22px; padding: 14px 16px;
  background: #fff; border: 1px solid #ececf0; border-radius: 14px;
  font-size: .9rem; color: #4b5563;
}
.mtjok-mail svg { width: 22px; height: 22px; flex: 0 0 auto; color: #8b90a0; }

.mtjok-block {
  margin-bottom: 16px; padding: 20px 18px;
  background: #fff; border: 1px solid #ececf0; border-radius: 18px;
}
.mtjok-block__step {
  display: inline-block; margin-bottom: 10px;
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #f97316; background: #fff5e6; padding: 4px 10px; border-radius: 100px;
}
.mtjok-block h2 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.mtjok-block > p { margin: 0 0 14px; font-size: .9rem; color: #5b6370; line-height: 1.5; }

.mtjok-upload {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 20px; border: 2px dashed #d7d7de; border-radius: 14px;
  cursor: pointer; color: #5b6370; font-weight: 700; font-size: .92rem;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.mtjok-upload svg { width: 24px; height: 24px; }
.mtjok-upload:hover { border-color: #FF8C20; color: #f97316; }
.mtjok-upload.is-done { border-style: solid; border-color: #16a34a; color: #16a34a; background: #f2fbf5; }
.mtjok-link {
  width: 100%; box-sizing: border-box; margin-top: 10px;
  font-family: inherit; font-size: .95rem;
  padding: 13px 15px; border: 1.5px solid #e2e2e9; border-radius: 12px; background: #fff;
  -webkit-appearance: none; appearance: none;
}
.mtjok-link:focus { outline: none; border-color: #FF8C20; box-shadow: 0 0 0 3px rgba(255,140,32,.16); }
.mtjok-later { margin: 12px 0 0; font-size: .84rem; color: #8b90a0; }
.mtjok-later a { color: #f97316; font-weight: 700; text-decoration: none; }
.mtjok-later a:hover { text-decoration: underline; }

.mtjok-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mtjok-slot {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 14px 8px; border: 1.5px solid #e2e2e9; border-radius: 14px;
  background: #fff; cursor: pointer; touch-action: manipulation;
  font-family: inherit; font-size: .9rem; font-weight: 700; color: #1b1b1b;
  transition: border-color .15s ease, background .15s ease;
}
.mtjok-slot small { font-size: .68rem; font-weight: 600; color: #8b90a0; }
.mtjok-slot:hover { border-color: #FF8C20; }
.mtjok-slot.is-sel { border-color: #f97316; background: #fff9f3; box-shadow: inset 0 0 0 1px #f97316; }
.mtjok-slotok { margin: 14px 0 0; font-size: .88rem; color: #16a34a; font-weight: 600; }

/* Datos bancarios (variante B) */
.mtjok-bank { display: flex; flex-direction: column; gap: 10px; }
.mtjok-bank__row { display: flex; flex-direction: column; gap: 4px; }
.mtjok-bank__k { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8b90a0; }
.mtjok-bank__k i { font-style: normal; color: #e5484d; text-transform: none; letter-spacing: 0; }
.mtjok-bank__v {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 1.02rem; font-weight: 800; color: #1b1b1b; word-break: break-all;
  padding: 12px 14px; background: #f6f6f8; border: 1px solid #ececf0; border-radius: 12px;
}
.mtjok-copy {
  flex: 0 0 auto; border: none; cursor: pointer;
  font-family: inherit; font-size: .74rem; font-weight: 800;
  color: #f97316; background: #fff5e6; padding: 6px 12px; border-radius: 100px;
  touch-action: manipulation;
}
.mtjok-copy:hover { background: #ffe9cf; }
.mtjok-honest { margin: 14px 0 0; font-size: .88rem; color: #5b6370; line-height: 1.55; }

.mtjok-support {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 20px 0 8px; padding: 18px; text-align: center;
}
.mtjok-support span { font-size: .85rem; color: #8b90a0; }
.mtjok-support a { font-size: 1.35rem; font-weight: 800; color: #1b1b1b; text-decoration: none; }
.mtjok-support small { font-size: .78rem; color: #8b90a0; }
.mtjok-home {
  display: block; text-align: center; margin: 8px auto 0;
  font-size: .9rem; font-weight: 700; color: #8b90a0; text-decoration: none;
}
.mtjok-home:hover { color: #f97316; text-decoration: underline; }

/* ── Estrechas ── */
@media (max-width: 380px) {
  .mtjco-bar__cta { padding: 13px 18px; }
  .mtjco-bar__cta svg { display: none; } /* en estrecho: solo el texto, sin flecha */
  .mtjok-slots { grid-template-columns: 1fr; }
}