/* ════════════════════════════════════════════════════════════
   CONFIGURADOR /montaje — Pantalla 1
   Formato de FILAS (patrón Glovo/Uber): foto compacta + nombre +
   beneficio + precio + botón "Añadir" que se convierte en stepper.
   Catálogo completo alineado con la newlanding (Productos_2026).
   Lenguaje de marca: banda oscura #101116 con foto en máscara,
   números fantasma 01/02/03, chips, acento naranja. Prefijo .mtj-
════════════════════════════════════════════════════════════ */
/* body en columna flex de alto completo: permite que la barra de total use
   position:sticky (atada al scroll por el compositor) en vez de fixed. Así no
   "baila" ni deja huecos cuando la barra del navegador móvil se oculta/aparece. */
.mtj-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: #f6f6f8;
  /* CRÍTICO: evita el zoom por doble toque (alguien pulsa "+" dos veces seguidas
     para añadir 2 comanderas y NO debe hacer zoom). Mantiene scroll y pinch-zoom. */
  touch-action: manipulation;
}
.mtj-body > main.container {
  flex: 1 0 auto;
  /* el .container global trae height:100% y overflow:hidden, que aquí recortan
     el contenido y descuadran el layout. Los neutralizamos solo en esta página. */
  height: auto;
  overflow: visible;
  background: #f6f6f8;
}

.mtj-page {
  --pad: clamp(14px, 4vw, 24px);   /* margen lateral del contenido */
  font-family: 'Montserrat', Arial, sans-serif;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 44px) var(--pad) 28px;
  color: #1b1b1b;
}

/* ── Cabecera: "‹ Volver" arriba, y título + subtítulo debajo ── */
.mtj-topbar { margin-bottom: clamp(14px, 3vw, 20px); }
.mtj-back {
  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;
}
.mtj-back:hover { color: #FF8C20; }
.mtj-back svg { width: 20px; height: 20px; display: block; }
.mtj-head { margin-bottom: clamp(24px, 5.5vw, 36px); }
.mtj-head h1 {
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 8px;
}
.mtj-head h1 em { font-style: normal; color: #FF8C20; }
/* Apunte de confianza: Renting sin permanencia (texto plano verde, sin píldora) */
.mtj-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: #16a34a;
}
.mtj-badge svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mtj-sub {
  font-size: clamp(.92rem, 3.4vw, 1.02rem);
  color: #6b7280;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

/* ── TPV incluido: la base, siempre dentro. Mismo formato que las filas
   (imagen a sangre en el lateral) pero destacada en naranja por ser el incluido. ── */
.mtj-inc {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 92px;
  overflow: hidden;
  background: #fffdfa;
  border: 1.5px solid #FF8C20;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(255, 140, 32, .13);
  margin-bottom: clamp(24px, 5vw, 34px);
}
/* Botón-imagen: abre la ficha del TPV (lupita como pista).
   Tamaño explícito: los botones en Safari iOS no resuelven bien el stretch. */
.mtj-inc__img {
  position: relative;
  flex: 0 0 auto;
  width: clamp(92px, 25vw, 112px);
  height: 92px;
  align-self: center;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mtj-inc__img:focus-visible { outline: 2px solid #FF8C20; outline-offset: -2px; }
/* padding generoso: la imagen del TPV llega al borde de su archivo (peana pegada
   abajo), así que necesita aire para no verse cortada de golpe */
.mtj-inc__img img { width: 100%; height: 100%; object-fit: contain; padding: 11px; display: block; }
.mtj-inc__txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; align-self: center; }
.mtj-inc__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #1b1b1b;
}
.mtj-inc__tag {
  font-style: normal;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f97316;
  background: rgba(255, 140, 32, .12);
  border: 1px solid rgba(255, 140, 32, .4);
  border-radius: 100px;
  padding: 2px 8px;
}
.mtj-inc__price {
  font-size: .85rem;
  font-weight: 600;
  color: #6b7280;
}
.mtj-inc__price b { color: #1b1b1b; font-weight: 800; }

/* ── Cabecera de sección: número fantasma + tag + título ── */
.mtj-sec { margin-bottom: clamp(32px, 6.5vw, 46px); }
.mtj-sec__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding-left: clamp(46px, 11vw, 64px);
  min-height: 52px;
}
.mtj-sec__num {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-52%);
  font-size: clamp(2.7rem, 9.5vw, 3.5rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(27, 27, 27, .08);
  pointer-events: none;
}
.mtj-sec__titles { display: flex; flex-direction: column; gap: 2px; }
.mtj-sec__tag {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FF8C20;
}
.mtj-sec__titles h2 {
  font-size: clamp(1.12rem, 4.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0;
}

/* ── Lista ordenada y ágil: icono uniforme + texto en una línea + control.
   Calmada y escaneable (nada de caos), pero tocas la fila y se enciende; el
   total se actualiza al vuelo. Todo el texto en una línea (elipsis): cambiar el
   control nunca reajusta líneas. ── */
/* La lista SANGRA a los bordes (cancela el margen lateral del contenido):
   la imagen empieza pegada al borde de la pantalla, sin aire. */
.mtj-list {
  display: flex;
  flex-direction: column;
  margin: 0 calc(-1 * var(--pad));
  border-top: 1px solid #ececf0;
}
.mtj-row {
  /* --tile = tamaño de la caja de imagen */
  --tile: clamp(92px, 26vw, 108px);
  --tile-h: var(--tile);
  display: flex;
  align-items: center;
  gap: 0;
  min-height: var(--tile-h);
  padding: 0;                    /* sin padding: la imagen va a sangre por la izquierda */
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid #ececf0;
  transition: background .15s ease, box-shadow .15s ease;
}
.mtj-row.is-on { background: #fff9f3; box-shadow: inset 3px 0 0 #FF8C20; }
/* La imagen OCUPA TODA la caja del lateral, a sangre. Es un BOTÓN: abre la ficha
   del producto (lupita en la esquina como pista).
   OJO: tamaño EXPLÍCITO (width+height), nada de aspect-ratio/stretch — los
   botones en Safari iOS no lo resuelven y la imagen salía gigante. */
.mtj-ico {
  position: relative;
  flex: 0 0 var(--tile);
  width: var(--tile);
  align-self: stretch;           /* alto = alto de la fila → a sangre aunque el título ocupe 2 líneas */
  min-height: var(--tile);
  overflow: hidden;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mtj-ico:focus-visible { outline: 2px solid #FF8C20; outline-offset: -2px; }
.mtj-ico img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.mtj-ico:hover img { transform: scale(1.04); }
/* Fallback para las webp transparentes de producto (aún sin foto a sangre):
   contenidas sobre tile claro que rellena la caja. */
.mtj-ico--icon { background: #f4f4f6; display: grid; place-items: center; }
.mtj-ico--icon img { object-fit: contain; }
/* Módulos de software: glifo de línea naranja sobre tile claro que rellena la caja */
.mtj-ico--glyph { background: #f4f4f6; display: grid; place-items: center; }
.mtj-ico--glyph svg { width: 32px; height: 32px; color: #f97316; }
/* Lupita "ver ficha" en la esquina de la imagen */
.mtj-ico__more {
  position: absolute;
  right: 5px; bottom: 5px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(10, 10, 12, .55);
  color: #fff;
  display: grid; place-items: center;
  pointer-events: none;
}
.mtj-ico__more svg { width: 10px; height: 10px; }
/* Texto: todo en una línea con elipsis, centrado verticalmente en la fila */
.mtj-row__txt { flex: 1 1 auto; min-width: 0; align-self: center; padding: 12px 4px 12px 14px; }
.mtj-row__txt h4 {
  margin: 0 0 3px;
  /* Una línea, tamaño cómodo para todos */
  font-size: clamp(.92rem, 3.8vw, 1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Solo los nombres largos (p.ej. "Comandera + datáfono") reducen un punto para caber */
.mtj-row__txt h4.sm { font-size: clamp(.82rem, 3.3vw, .9rem); letter-spacing: -.03em; }
/* Dos líneas de precio: pago inicial y cuota mensual */
.mtj-row__ini, .mtj-row__mo {
  margin: 0; font-size: .82rem; color: #6b7280; font-weight: 600; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mtj-row__ini b, .mtj-row__mo b { color: #1b1b1b; font-weight: 800; }
/* ── Control derecha ──────────────────────────────────────────
   Por defecto un "+" circular compacto (deja sitio al texto). Al añadir se
   expande a la píldora "✓ Añadido"; en los de unidades pasa a stepper. */
/* ancho reservado (fijo) para el control → el texto no se mueve ni se tapa al añadir.
   El padding derecho respeta el margen del contenido (la lista sangra a los bordes). */
.mtj-ctrl { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; min-width: calc(78px + var(--pad)); padding: 0 var(--pad) 0 6px; box-sizing: border-box; }
/* Botón "＋ Añadir" (contorno) → "✓ Añadido" (relleno naranja) */
.mtj-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 12px;
  border: 1.5px solid #FF8C20;
  border-radius: 100px;
  background: #fff;
  color: #f97316;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.mtj-add .ico { font-size: 1.05rem; font-weight: 800; line-height: 1; }
.mtj-add .lbl { display: inline; font-size: .78rem; font-weight: 800; }
.mtj-add:hover { background: rgba(255, 140, 32, .08); }
.mtj-add:active { transform: scale(.97); }
.mtj-add.is-on {
  background: linear-gradient(135deg, #FF8C20, #f97316);
  border-color: transparent;
  color: #fff;
}
.mtj-add[hidden] { display: none; }
/* Stepper rectangular (unidades): grupo con bordes rectos redondeados */
.mtj-step {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid #ececf0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.mtj-step[hidden] { display: none; }
.mtj-step button {
  width: 30px; height: 38px; border: 0;
  background: #fff; color: #1b1b1b;
  font-size: 1.2rem; font-weight: 600; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: filter .12s ease;
}
.mtj-step button[data-act="inc"] { background: linear-gradient(135deg, #FF8C20, #f97316); color: #fff; }
.mtj-step button[data-act="inc"]:hover { filter: brightness(1.06); }
.mtj-qty {
  min-width: 26px;
  display: grid; place-items: center;
  font-size: .92rem; font-weight: 800; color: #1b1b1b;
  font-variant-numeric: tabular-nums;
  border-left: 1.5px solid #ececf0;
  border-right: 1.5px solid #ececf0;
}

/* ════════════════════════════════════════════
   FICHA DE PRODUCTO — popup al tocar la imagen
════════════════════════════════════════════ */
.mtj-modal[hidden] { display: none; }
.mtj-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mtj-modal__overlay { position: absolute; inset: 0; background: rgba(10, 10, 12, .5); }
.mtj-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 330px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: mtjPop .18s ease;
}
@keyframes mtjPop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mtj-modal__card { animation: none; } }
/* Media 4/3: las fotos del catálogo ya vienen en 4:3, así que cover las llena
   a sangre sin recortar nada. (icon/glifo se sobreescriben abajo.) */
.mtj-modal__media { position: relative; width: 100%; aspect-ratio: 4/3; background: #101116; overflow: hidden; }
.mtj-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtj-modal__media.is-icon { background: #f4f4f6; display: grid; place-items: center; }
.mtj-modal__media.is-icon img { object-fit: contain; padding: 16px; }
.mtj-modal__media.is-glyph { background: #f4f4f6; display: grid; place-items: center; aspect-ratio: 16/9; }
.mtj-modal__media.is-glyph svg { width: 64px; height: 64px; color: #f97316; }
.mtj-modal__body { padding: 15px 18px 17px; }
.mtj-modal__body h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 5px; }
.mtj-modal__desc { font-size: .86rem; line-height: 1.5; color: #4b5563; margin: 0 0 12px; }
/* Comparativa de la ficha (solo hardware): sin renting / en renting, y la
   CUOTA APARTE (servicio) separada por un hairline. Etiqueta izq, importe dcha. */
.mtj-modal__valor {
  display: flex; flex-direction: column; gap: 6px;
  margin: -2px 0 13px; padding-top: 11px; border-top: 1px solid #f1f1f4;
}
.mtj-modal__valor span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mtj-modal__valor i { font-style: normal; font-size: .8rem; font-weight: 600; color: #8b90a0; }
.mtj-modal__valor b { font-size: .92rem; font-weight: 800; color: #1b1b1b; white-space: nowrap; }
.mtj-modal__valor .cuo { margin-top: 3px; padding-top: 10px; border-top: 1px solid #f1f1f4; }
.mtj-modal__valor .cuo b { color: #f97316; }
.mtj-modal__valor[hidden] { display: none; }
.mtj-modal__price[hidden] { display: none; }
.mtj-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mtj-modal__price { font-size: .88rem; font-weight: 800; color: #1b1b1b; line-height: 1.3; }
.mtj-modal__add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #FF8C20;
  border-radius: 10px;
  background: #fff;
  color: #f97316;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 800;
  padding: 11px 16px;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mtj-modal__add .ico { font-size: 1.05rem; line-height: 1; }
.mtj-modal__add.is-on { background: linear-gradient(135deg, #FF8C20, #f97316); border-color: transparent; color: #fff; }
.mtj-modal__add[hidden] { display: none; }
.mtj-modal__close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: rgba(10, 10, 12, .55);
  color: #fff;
  font-size: 1.35rem; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  touch-action: manipulation;
}

/* ════════════════════════════════════════════
   BARRA DE TOTAL — sticky abajo, siempre visible
════════════════════════════════════════════ */
.mtj-floatbar {
  position: sticky;
  bottom: 0;
  z-index: 1000;
  /* clara pero ELEVADA: se despega del fondo con sombra + frosted, no con color.
     El contenido se intuye difuminado detrás al hacer scroll. */
  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: 12px 14px calc(12px + env(safe-area-inset-bottom));
}
/* filo naranja degradado en el borde superior (como la floatbar de la landing) */
.mtj-floatbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #FF8C20 30%, #f97316 70%, transparent);
  opacity: 1;
}
.mtj-floatbar__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mtj-floatbar__prices { min-width: 0; }
.mtj-floatbar__label {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8b90a0;
  line-height: 1;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pago inicial: la BASE en grande (cuadra con los precios de la lista, sin IVA)
   y al lado "+IVA (total final)" en pequeño y gris. La cuota repite el mismo
   esquema un escalón por debajo: dos líneas espejo, limpias. */
.mtj-floatbar__initial {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.mtj-floatbar__amount {
  display: inline-block;
  font-size: clamp(1.45rem, 6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: #1b1b1b;
  font-variant-numeric: tabular-nums;   /* el número no baila al recalcular */
}
.mtj-floatbar__tax {
  font-size: .74rem;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0;
  white-space: nowrap;
}
/* Pulso de feedback al cambiar el total */
.mtj-floatbar__amount.bump { animation: mtjBump .3s ease; }
@keyframes mtjBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); color: #FF8C20; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .mtj-floatbar__amount.bump { animation: none; } }
/* Cuota mensual: espejo del inicial (base en negrita + "+IVA (total)" gris) */
.mtj-floatbar__monthly {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 5px;
  min-width: 0;
  line-height: 1;
}
.mtj-floatbar__moamt {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #1b1b1b;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mtj-floatbar__motax {
  font-size: .74rem;
  font-weight: 600;
  color: #9ca3af;
  white-space: nowrap;
}
.mtj-floatbar__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: 1.02rem;
  letter-spacing: .01em;
  padding: 15px 26px;
  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;
}
.mtj-floatbar__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(249, 115, 22, .42);
}
.mtj-floatbar__cta svg { width: 20px; height: 20px; display: block; flex: 0 0 auto; }

/* ── Barra que se expande: el panel del pedido crece hacia arriba dentro de
   la propia barra (colapsado = altura 0). ── */
.mtj-scrim {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10, 10, 14, .5);
  opacity: 0; transition: opacity .3s ease;
}
.mtj-scrim[hidden] { display: none; }
.mtj-scrim.is-open { opacity: 1; }

.mtj-floatbar__panel {
  max-width: 680px;
  margin: 0 auto;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .32s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
}
.mtj-floatbar.is-expanded .mtj-floatbar__panel {
  max-height: 66vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  padding-top: 4px;
}
.mtj-floatbar__grab {
  display: block; width: 44px; height: 5px; margin: 2px auto 12px;
  border: 0; border-radius: 100px; background: #d7d7de; cursor: grab;
}
.mtj-floatbar__ptitle {
  max-width: 680px; margin: 0 auto 12px;
  font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: #1b1b1b;
}
/* dentro del panel oscuro→claro reutilizamos los estilos .mtj-sheet__* de más abajo */

/* ── Pantallas estrechas ──────────────────── */
@media (max-width: 400px) {
  .mtj-ctrl { min-width: calc(94px + var(--pad)); }
  .mtj-step button { width: 30px; height: 36px; }
  .mtj-qty { min-width: 24px; }
  .mtj-floatbar__cta { padding: 13px 18px; font-size: .92rem; }
  .mtj-floatbar__cta svg { display: none; } /* en estrecho: solo el texto "Continuar", sin flecha */
}

/* ════════════════════════════════════════════
   PASO 0 · HOJA DE DECISIÓN (bottom sheet)
   Aparece sobre el propio configurador al pulsar "Continuar".
════════════════════════════════════════════ */
body.mtj-noscroll { overflow: hidden; }

.mtj-sheet { position: fixed; inset: 0; z-index: 2000; }
.mtj-sheet[hidden] { display: none; }
.mtj-sheet__overlay {
  position: absolute; inset: 0;
  background: rgba(10, 10, 14, .55);
  opacity: 0; transition: opacity .26s ease;
}
.mtj-sheet.is-open .mtj-sheet__overlay { opacity: 1; }
/* Claro, como el resto del checkout. Conserva el filo naranja fijo arriba,
   como guiño a la barra flotante de la que crece. */
.mtj-sheet__card {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 560px; margin: 0 auto;
  background:
    linear-gradient(90deg, transparent, #FF8C20 30%, #f97316 70%, transparent) center top / 100% 2px no-repeat,
    #fff;
  color: #1b1b1b;
  border-radius: 22px 22px 0 0;
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
  max-height: 88vh; max-height: 88dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* el scroll interno no se encadena al fondo bloqueado (evita que una
     dirección "se coma" el gesto tras el rebote) */
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.mtj-sheet.is-open .mtj-sheet__card { transform: translateY(0); }
.mtj-sheet__grab {
  display: block; width: 44px; height: 5px; margin: 6px auto 14px;
  border: 0; border-radius: 100px; background: #d7d7de; cursor: grab;
}
.mtj-sheet__title {
  margin: 0 0 6px; font-size: 1.15rem; font-weight: 800;
  letter-spacing: -.01em; color: #1b1b1b;
}
/* Pedido línea a línea dentro del sheet */
.mtj-sheet__lines {
  list-style: none; margin: 0 0 14px; padding: 4px 14px;
  background: #f6f6f8; border-radius: 14px;
}
.mtj-sheet__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid #ececf0;
}
.mtj-sheet__line:last-child { border-bottom: 0; }
.mtj-sheet__lname { font-size: .92rem; font-weight: 700; color: #1b1b1b; }
.mtj-sheet__q { font-style: normal; font-weight: 700; color: #8b90a0; margin-left: 3px; }
.mtj-sheet__tag {
  font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #16a34a;
  background: #e9f9ef; padding: 2px 7px; border-radius: 6px; margin-left: 6px;
}
.mtj-sheet__lprice { flex: 0 0 auto; font-size: .92rem; font-weight: 800; color: #1b1b1b; }
/* Desglose de impuestos (base + IVA) sobre las cifras del total */
.mtj-sheet__tax { margin: 0 2px 12px; padding: 0 12px; }
.mtj-sheet__taxrow { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; color: #6b7280; font-weight: 600; }
.mtj-sheet__taxrow + .mtj-sheet__taxrow { margin-top: 4px; }
.mtj-sheet__figlbl small { font-weight: 600; color: #8b90a0; }
.mtj-sheet__fineprint { margin: 10px 2px 0; font-size: .76rem; color: #8b90a0; line-height: 1.45; }
.mtj-sheet__figures {
  /* alineadas por ARRIBA: los dos rótulos arrancan en la misma línea (por abajo,
     la columna corta quedaba "caída" flotando a media altura) */
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; margin-bottom: 12px;
  background: #f6f6f8; border-radius: 16px;
}
.mtj-sheet__fig { display: flex; flex-direction: column; gap: 4px; }
.mtj-sheet__fig--sec { margin-left: auto; text-align: right; }
.mtj-sheet__figlbl {
  font-size: .64rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8b90a0;
  white-space: nowrap;   /* el rótulo no se trocea aunque la cifra sea estrecha */
}
/* "(IVA incl.)" SIEMPRE en su propia línea bajo el rótulo: mismo apilado con
   solo el TPV que con diez productos, sin depender del ancho de la cifra. */
.mtj-sheet__figlbl small {
  display: block;
  font-size: .95em;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 1px;
}
.mtj-sheet__fignum { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: #1b1b1b; line-height: 1; }
.mtj-sheet__fig--sec .mtj-sheet__fignum { font-size: 1.15rem; color: #f97316; }
.mtj-sheet__fignum small { font-size: .58em; font-weight: 700; color: #6b7280; }
.mtj-sheet__note {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 18px; font-size: .82rem; font-weight: 600; color: #16a34a;
}
.mtj-sheet__note svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mtj-sheet__pay {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #FF8C20, #f97316); color: #fff;
  font-family: inherit; font-size: 1.08rem; font-weight: 800;
  padding: 17px 22px; border-radius: 100px;
  box-shadow: 0 6px 16px rgba(249, 115, 22, .3);
  touch-action: manipulation; transition: transform .18s ease, box-shadow .18s ease;
}
.mtj-sheet__pay:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(249, 115, 22, .42); }
.mtj-sheet__pay svg { width: 20px; height: 20px; }
.mtj-sheet__talk {
  display: block; width: 100%; text-align: center; margin-top: 14px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: .9rem; font-weight: 600; color: #8b90a0; text-decoration: none;
}
.mtj-sheet__talk:hover { color: #5b6370; text-decoration: underline; }

/* Popup de llamada — reusa .mtj-sheet; sin título (el botón ya dice "Llamadme gratis") */
.mtj-call__lead { text-align: center; margin: 4px 0 16px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: #1b1b1b; line-height: 1.25; }
.mtj-call__sub { text-align: center; margin: -2px 0 16px; font-size: .92rem; line-height: 1.45; color: #6b7280; }
.mtj-call__input {
  width: 100%; box-sizing: border-box; padding: 14px 16px; margin-bottom: 12px;
  font-family: inherit; font-size: 16px; /* 16px: evita el zoom de iOS al enfocar */
  color: #1b1b1b; background: #fff; border: 1.5px solid #e2e2e8; border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mtj-call__input:focus { outline: none; border-color: #FF8C20; box-shadow: 0 0 0 3px rgba(255,140,32,.15); }
.mtj-call__err { margin: -6px 0 12px; font-size: .82rem; font-weight: 600; color: #ef4444; text-align: center; }
.mtj-call__err[hidden], #mtjCallForm[hidden], #mtjCallOk[hidden] { display: none; }
#mtjCallOk { text-align: center; }
.mtj-call__okico {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 4px auto 12px;
  border-radius: 50%; background: rgba(22,163,74,.12); color: #16a34a;
}
.mtj-call__okico svg { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) {
  .mtj-sheet__overlay, .mtj-sheet__card { transition: none; }
}

/* ── Badge "Renting sin permanencia" tocable + sheet "Renting en claro" ── */
.mtj-badge--btn {
  font-family: inherit; /* el tamaño (.82rem) lo pone .mtj-badge, no lo pisamos */
  background: none; border: 0; padding: 0;
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.mtj-badge__how {
  font-style: normal; font-weight: 700; color: #f97316;
  border-bottom: 1px dashed rgba(249, 115, 22, .5);
  margin-left: 2px;
}
.mtj-badge--btn:hover .mtj-badge__how { border-bottom-color: #f97316; }

.mtj-rent { list-style: none; margin: 16px 2px 22px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mtj-rent li { display: flex; gap: 14px; align-items: flex-start; }
.mtj-rent__ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  background: #f4f4f6; color: #f97316;
  display: grid; place-items: center;
  margin-top: 1px; /* alineación óptica con la primera línea del titular */
}
.mtj-rent__ico svg { width: 21px; height: 21px; }
.mtj-rent__txt { flex: 1; min-width: 0; }
.mtj-rent__txt b {
  display: block; font-size: .92rem; font-weight: 800; letter-spacing: -.01em;
  color: #1b1b1b; line-height: 1.35; margin-bottom: 4px;
}
.mtj-rent__txt p {
  margin: 0; font-size: .85rem; color: #5b6370; line-height: 1.55;
  padding-right: 6px;
  text-wrap: balance;   /* reparte las líneas: los tres puntos cortan parejos */
}