/**
 * Página de venta del mantenimiento (maintenance.tpl), encima de lead.css (tokens --q-*, campos y botón) y support.css
 * (lista de incluidos, preguntas y tarjetas de servicios).
 *
 * Bandas a todo el ancho con un ::before que sale del contenedor (inset 0 -50vw); el #wrapper recorta el desborde
 * lateral (support.css), así que nada de lo que se pinta abre scroll horizontal.
 */
.bkmp { padding-bottom: 72px; }
.bkmp :focus-visible { outline: 2px solid var(--q-azul); outline-offset: 3px; }
.bkmp-h { margin: 0 0 14px; font: 800 28px/1.12 var(--q-titulo); letter-spacing: -.025em; color: var(--q-ink); text-wrap: balance; }
@media (min-width: 768px) { .bkmp-h { font-size: 34px; } }

/* ---------------------------------------------------------------- héroe */

.bkmp-hero { position: relative; display: grid; gap: 44px; padding: 40px 0 64px; isolation: isolate; }
.bkmp-hero::before { content: ""; position: absolute; z-index: -2; inset: 0 -50vw;
  background: radial-gradient(circle, rgba(0, 118, 158, .13) 1px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(176deg, #e4eff5 0%, #f3f7f9 62%, #fff 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.bkmp-title { margin: 0 0 18px; font: 800 40px/1.04 var(--q-titulo); letter-spacing: -.03em; color: var(--q-ink); text-wrap: balance; }
.bkmp-lead { max-width: 52ch; margin: 0; font-size: 18px; line-height: 1.6; color: var(--q-gris); }
.bkmp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 30px 0 0; }
.bkmp-cta .bkq-btn { padding: 17px 30px; font-size: 16.5px; }
.bkq .bkmp-cta a.bkq-btn:is(:link, :visited, :hover, :focus) { color: #fff; }
.bkq .bkmp-from { margin: 0; font: 600 15px/1.3 var(--q-texto); color: var(--q-ink); font-variant-numeric: tabular-nums; }
.bkmp-promises { list-style: none; display: grid; gap: 12px; margin: 34px 0 0; padding: 0; }
.bkmp-promises li { display: flex; align-items: center; gap: 12px; font: 600 15px/1.35 var(--q-texto); color: var(--q-ink); }
.bkmp-promises svg { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 7px; border-radius: 10px; background: #fff; fill: none;
  stroke: var(--q-azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 8px 20px -14px rgba(22, 32, 43, .6); }

/* La ficha de ejemplo: lo que el cliente ve en «Mi mantenimiento». Dos caras del cubo detrás, dentro de su caja. */
.bkmp-demo { position: relative; margin: 0; max-width: 480px; justify-self: center; width: 100%; }
.bkmp-demo::before, .bkmp-demo::after { content: ""; position: absolute; z-index: -1; aspect-ratio: 1; transform: rotate(45deg) skew(-8deg, -8deg); border-radius: 14px; }
.bkmp-demo::before { width: 170px; top: -34px; right: 6px; background: var(--q-c3); opacity: .22; }
.bkmp-demo::after { width: 120px; bottom: 40px; left: -18px; background: var(--q-c2); opacity: .26; }
.bkmp-demo__card { padding: 32px 22px 18px; border: 1px solid var(--q-linea); border-radius: 18px; background: #fff;
  box-shadow: 0 30px 70px -40px rgba(13, 39, 51, .55), 0 2px 6px rgba(13, 39, 51, .04); }
.bkmp-demo__top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--q-linea); }
.bkmp-demo__top b { flex: 1; min-width: 0; font: 800 17px/1.2 var(--q-titulo); letter-spacing: -.01em; color: var(--q-ink); }
.bkmp-demo__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: hsl(200 55% 93%); color: hsl(200 50% 28%);
  font: 800 15px/1 var(--q-titulo); }
.bkmp-demo__btn { flex: none; padding: 8px 12px; border-radius: 9px; background: var(--q-azul); color: #fff; font: 700 13px/1 var(--q-texto); }
.bkq .bkmp-demo__k { margin: 18px 0 4px; font: 600 13.5px/1.3 var(--q-texto); color: var(--q-gris); }
.bkq .bkmp-demo__v { margin: 0; font: 800 30px/1.1 var(--q-titulo); letter-spacing: -.02em; color: var(--q-ink); font-variant-numeric: tabular-nums; }
.bkmp-demo__v small { font: 600 15px/1 var(--q-texto); letter-spacing: 0; color: var(--q-gris); }
.bkmp-demo__bar { display: block; height: 8px; margin: 14px 0 18px; border-radius: 99px; background: var(--q-banda); overflow: hidden; }
.bkmp-demo__bar i { display: block; width: var(--to); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--q-azul), var(--q-c2));
  transform-origin: left; animation: bkmp-fill 1.4s var(--q-ease) .25s both; }
@keyframes bkmp-fill { from { transform: scaleX(0); } }
.bkmp-demo__list { list-style: none; display: grid; margin: 0; padding: 0; }
.bkmp-demo__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--q-linea);
  font-size: 14.5px; line-height: 1.35; color: var(--q-ink); }
.bkmp-demo__list span { min-width: 0; }
.bkmp-demo__list em { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font: 600 12.5px/1.2 var(--q-texto); font-style: normal; }
.bkmp-demo__list em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bkmp-demo__list .is-progress { background: #e5f3f9; color: #005d7e; }
.bkmp-demo__list .is-waiting { background: #fdf1dc; color: #8a5300; }
.bkmp-demo__list .is-closed { background: #eef1f4; color: #4a5866; }
.bkq .bkmp-demo__chip { position: absolute; top: -17px; left: 22px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px 9px 11px;
  border-radius: 99px; background: var(--q-noche); color: #fff; font: 700 13.5px/1 var(--q-texto); box-shadow: 0 16px 30px -16px rgba(13, 39, 51, .8); }
.bkmp-demo__chip svg { width: 17px; height: 17px; fill: none; stroke: var(--q-cian); stroke-width: 2; stroke-linecap: round; }
.bkmp-demo figcaption { margin: 14px 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--q-gris); text-align: center; }

@media (min-width: 768px) { .bkmp-title { font-size: 48px; } }
@media (min-width: 992px) {
  .bkmp-hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; padding: 64px 0 88px; }
  .bkmp-title { font-size: 56px; }
  .bkmp-demo { justify-self: end; }
}

/* ---------------------------------------------------------------- niveles */

.bkmp-plans { position: relative; scroll-margin-top: 110px; padding: 8px 0 0; }
.bkmp-plans__head { max-width: 640px; margin: 0 0 26px; }
.bkq .bkmp-plans__head p { margin: 0; font-size: 17px; color: var(--q-gris); }

/* La tienda, como primera línea de la compra: etiqueta y selector en una fila con sitio */
.bkmp-shop { position: relative; display: grid; gap: 10px 24px; margin: 0 0 22px; padding: 18px 20px; border: 1px solid var(--q-linea); border-radius: 16px; background: var(--q-banda); }
.bkq .bkmp-shop__h { margin: 0; font: 700 16px/1.35 var(--q-titulo); color: var(--q-ink); }
.bkq .bkmp-shop__hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--q-gris); }
.bkmp-shop__field { min-width: 0; }
.bkmp-shop .bkw { max-width: none; }
.bkmp-shop .bkw__btn { background: #fff; }
.bkmp-shop .bkq-field { margin: 0; }
.bkmp-shop .bkw + .bkmp-shop__url { margin-top: 10px; }
.bkmp-shop:has(.bkw option:not([value=""]):checked) .bkmp-shop__url { display: none; }
.bkmp-shop .bkq-err { margin: 8px 0 0; }
.bkmp-shop:focus { outline: none; }
/* Falta la tienda (maintenance.js o el servidor): el recuadro se marca y al lado queda «Seguir con …» */
.bkmp-shop:has(.is-error), .bkmp-shop:has([data-bkmp-err]:not([hidden])) { border-color: #e9b4b0; background: #fdf4f3; }
.bkq .bkmp-shop__go { margin: 12px 0 0; }
.bkmp-plan.is-chosen { border-color: var(--q-azul); box-shadow: inset 0 0 0 1px var(--q-azul), 0 30px 60px -34px rgba(0, 118, 158, .55); }
@media (min-width: 900px) {
  .bkmp-shop { grid-template-columns: minmax(200px, 1fr) minmax(320px, 440px); grid-template-areas: "h field" "hint field"; align-items: center; padding: 20px 24px; }
  .bkmp-shop__h { grid-area: h; align-self: end; }
  .bkmp-shop__hint { grid-area: hint; align-self: start; }
  .bkmp-shop__field { grid-area: field; }
}

/* Dónde está alojada: segmentado de lead.css; la línea del traslado solo con el compartido elegido y la de la propuesta
   solo con el dedicado (sin :has, las dos se ven siempre) */
.bkmp-host { margin-top: -12px; }
.bkmp-host .bkq-seg { background: #fff; }
.bkmp-host .bkq-seg small { font-weight: 400; font-size: 13px; color: var(--q-gris); }
.bkq .bkmp-host__bring, .bkq .bkmp-host__proposal, .bkq .bkmp-host__safe { display: flex; align-items: center; gap: 8px; color: var(--q-ink); font-weight: 600; }
.bkq .bkmp-host__safe { align-items: flex-start; max-width: 62ch; }
.bkmp-host__safe svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--q-c5); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bkmp-host__bring svg, .bkmp-host__proposal svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--q-c5); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bkmp-host:not(:has(input[value="shared"]:checked)) .bkmp-host__bring,
.bkmp-host:not(:has(input[value="dedicated"]:checked)) .bkmp-host__proposal,
.bkmp-host:not(:has(input[value="shared"]:checked, input[value="dedicated"]:checked)) .bkmp-host__safe { display: none; }
@media (min-width: 900px) {
  .bkmp-host { grid-template-columns: minmax(200px, 1fr) auto; grid-template-areas: "h field" "hint field" "bring field" "safe field" "proposal field"; }
  .bkmp-host .bkq-seg { margin-left: auto; }
  .bkmp-host__bring { grid-area: bring; }
  .bkmp-host__proposal { grid-area: proposal; }
  .bkmp-host__safe { grid-area: safe; }
}

/* El total de cada nivel con el servidor elegido: la página trae uno por servidor (data-h) y se ve el elegido; sin :has,
   el que trae marcado la página (is-sel) */
.bkq .bkmp-plans .bkmp-plan [data-h]:not(.is-sel) { display: none; }
.bkmp-plans:has(input[name="hosting"]:checked) .bkmp-plan [data-h] { display: none; }
.bkmp-plans:has(input[name="hosting"][value="none"]:checked) .bkmp-plan [data-h="none"],
.bkmp-plans:has(input[name="hosting"][value="shared"]:checked) .bkmp-plan [data-h="shared"],
.bkmp-plans:has(input[name="hosting"][value="dedicated"]:checked) .bkmp-plan [data-h="dedicated"] { display: flex; }
.bkq .bkmp-plan .bkmp-plan__with { margin: -20px 0 22px; font-size: 13.5px; color: var(--q-gris); font-variant-numeric: tabular-nums; }

/* Lo que hace falta para trabajar: a la vista, junto a los planes */
.bkq .bkmp-access { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 22px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--q-linea);
  background: #fff; font: 600 14.5px/1.5 var(--q-texto); color: var(--q-ink); }
.bkmp-access svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--q-azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Las condiciones, bajo los planes */
.bkq .bkmp-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 0; font-size: 15px; }
.bkmp-terms svg { width: 20px; height: 20px; fill: none; stroke: var(--q-azul); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#wrapper .bkq .bkmp-terms a, #wrapper .bkq .bkmp-terms a:visited { color: var(--q-azul); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bkmp-terms__sep { color: var(--q-gris); }
.bkmp-terms__v { color: var(--q-gris); font-size: 13.5px; font-variant-numeric: tabular-nums; }

.bkmp-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .bkmp-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.bkmp-plan { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; border: 1px solid var(--q-linea); border-radius: 18px; background: #fff;
  box-shadow: 0 24px 50px -38px rgba(22, 32, 43, .55); transition: transform .25s var(--q-ease), box-shadow .25s var(--q-ease), border-color .25s; }
.bkmp-plan:hover { transform: translateY(-3px); border-color: #c9d6df; box-shadow: 0 30px 60px -36px rgba(22, 32, 43, .6); }
.bkq .bkmp-plan p { margin: 0; }
.bkmp-plan__h { margin: 0; font: 800 22px/1.2 var(--q-titulo); letter-spacing: -.02em; color: var(--q-ink); }
.bkq .bkmp-plan .bkmp-plan__p { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 26px; }
.bkq .bkmp-plan .bkmp-plan__fit { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--q-gris); }
.bkmp-plan__p b { font: 800 46px/1 var(--q-titulo); letter-spacing: -.035em; color: var(--q-ink); font-variant-numeric: tabular-nums; }
.bkmp-plan__p span { font-size: 15px; color: var(--q-gris); }
.bkmp-plan .bkq-btn { width: 100%; margin-top: auto; }
/* El recomendado: borde de acción y su etiqueta encima */
.bkmp-plan.is-pick { border-color: var(--q-azul); box-shadow: inset 0 0 0 1px var(--q-azul), 0 30px 60px -34px rgba(0, 118, 158, .55); }
.bkq .bkmp-plan .bkmp-plan__tag { position: absolute; top: -13px; left: 24px; padding: 6px 12px; border-radius: 99px; background: var(--q-azul); color: #fff; font: 700 12.5px/1 var(--q-texto); }
.bkmp-plan:not(.is-pick) .bkq-btn { background: #fff; color: var(--q-azul); box-shadow: inset 0 0 0 1.5px var(--q-azul); }
.bkmp-plan:not(.is-pick) .bkq-btn:hover { background: var(--q-azul); color: #fff; }

.bkmp-all { display: grid; gap: 12px 32px; margin: 22px 0 0; padding: 22px 24px; border-radius: 16px; background: var(--q-banda); }
.bkq .bkmp-all__h { margin: 0; font: 700 16px/1.3 var(--q-titulo); color: var(--q-ink); }
.bkmp-all .bks-incl { margin: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; }
.bkmp-all .bks-incl li { font-size: 14.5px; color: var(--q-ink); }
.bkq .bkmp-all__note { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--q-linea); font-size: 14px; line-height: 1.5; color: var(--q-gris); }

/* La hora suelta: otra forma de comprar, sin suscripción, en una fila sobre el fondo de banda; solo el botón es enlace */
.bkmp-hour { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; margin: 16px 0 0; padding: 20px 22px;
  border: 1px solid var(--q-linea); border-radius: 18px; background: #fff; }
.bkmp-hour__icon { align-self: start; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--q-c5) 14%, #fff); color: #3d7a2e; }
.bkmp-hour__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bkmp-hour__text { min-width: 0; }
.bkq .bkmp-hour__text h3 { margin: 0 0 4px; font: 800 17.5px/1.3 var(--q-titulo); letter-spacing: -.012em; color: var(--q-ink); }
.bkq .bkmp-hour__text p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--q-gris); }
.bkq .bkmp-hour__price { grid-column: 2; display: flex; align-items: baseline; gap: 4px; margin: 0; }
.bkmp-hour__price b { font: 800 28px/1 var(--q-titulo); letter-spacing: -.03em; color: var(--q-ink); font-variant-numeric: tabular-nums; }
.bkmp-hour__price span { font-size: 14.5px; color: var(--q-gris); }
#wrapper .bkq a.bkmp-hour__go, #wrapper .bkq a.bkmp-hour__go:visited { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px;
  border-radius: 10px; background: #fff; color: var(--q-azul); box-shadow: inset 0 0 0 1.5px var(--q-azul); font: 700 15.5px/1 var(--q-texto); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s; }
#wrapper .bkq a.bkmp-hour__go:hover, #wrapper .bkq a.bkmp-hour__go:focus-visible { background: var(--q-azul); color: #fff; }
.bkmp-hour__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--q-ease); }
.bkmp-hour__go:hover svg { transform: translateX(3px); }
@media (min-width: 768px) {
  .bkmp-hour__icon { align-self: center; }
  .bkmp-hour { grid-template-columns: auto 1fr auto auto; gap: 18px 24px; padding: 20px 24px; }
  .bkq .bkmp-hour__price { grid-column: auto; }
  #wrapper .bkq a.bkmp-hour__go { grid-column: auto; }
}

/* La barra de contratar, abajo, cuando no se ve ningún plan (maintenance.js) */
.bkmp-dock { position: fixed; z-index: 60; left: 50%; bottom: 16px; display: flex; align-items: center; gap: 18px; width: min(640px, calc(100% - 32px));
  padding: 12px 12px 12px 22px; border-radius: 16px; background: var(--q-noche); color: #fff; box-shadow: 0 24px 50px -20px rgba(13, 39, 51, .7);
  transform: translate(-50%, calc(100% + 32px)); transition: transform .35s var(--q-ease); }
.bkmp-dock.is-on { transform: translate(-50%, 0); }
.bkq .bkmp-dock__t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; margin: 0; line-height: 1.3; }
.bkmp-dock__t b { font: 800 16px/1.25 var(--q-titulo); }
.bkmp-dock__t span { color: #c4dbe3; font-size: 14px; font-variant-numeric: tabular-nums; }
.bkq .bkmp-dock .bkq-btn, .bkq .bkmp-dock a.bkq-btn:visited { flex: none; padding: 13px 18px; background: #fff; color: var(--q-noche); box-shadow: none; }
.bkq .bkmp-dock .bkq-btn:hover { background: #e5f4f8; color: var(--q-noche); }
.bkmp-dock .bkq-btn:focus-visible { outline-color: var(--q-cian); }
@media (prefers-reduced-motion: reduce) { .bkmp-dock { transition: none; } }

/* ---------------------------------------------------------------- cómo funciona (noche) */

.bkmp-how { position: relative; margin: 80px 0 0; padding: 64px 0 68px; color: #fff; isolation: isolate; }
.bkmp-how::before { content: ""; position: absolute; z-index: -1; inset: 0 -50vw;
  background: radial-gradient(circle, rgba(126, 208, 218, .16) 1px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(160deg, var(--q-noche-2), var(--q-noche) 70%); }
.bkmp-how .bkmp-h { color: #fff; margin-bottom: 36px; }
.bkmp-steps { list-style: none; counter-reset: bkmp; display: grid; gap: 28px; margin: 0; padding: 0; }
@media (min-width: 640px) { .bkmp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .bkmp-steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.bkmp-steps li { counter-increment: bkmp; position: relative; padding-top: 58px; }
.bkmp-steps li::before { content: counter(bkmp); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 1.5px solid rgba(126, 208, 218, .55); color: var(--q-cian); font: 800 17px/1 var(--q-titulo); }
@media (min-width: 992px) {
  .bkmp-steps li::after { content: ""; position: absolute; top: 20px; left: 56px; right: -16px; height: 1.5px; background: linear-gradient(90deg, rgba(126, 208, 218, .45), rgba(126, 208, 218, 0)); }
  .bkmp-steps li:last-child::after { display: none; }
}
.bkmp-steps b { display: block; margin-bottom: 8px; font: 700 18px/1.3 var(--q-titulo); letter-spacing: -.01em; color: #fff; }
.bkmp-steps span { font-size: 15px; line-height: 1.55; color: #c4dbe3; }

/* ---------------------------------------------------------------- así trabajamos contigo (capturas) */

/* Cada fila, texto y pantalla; en escritorio se alternan los lados. La pantalla va en un marco blanco con la sombra de los
   paneles y una cara del cubo detrás, con su color fijo por fila (la misma que en el héroe: decoración, no dato). */
.bkmp-proof { padding: 76px 0 0; }
.bkmp-proof__head { max-width: 680px; margin: 0 0 40px; }
.bkq .bkmp-proof__head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--q-gris); }
.bkmp-proof__rows { display: grid; gap: 56px; }
.bkmp-proof__row { display: grid; gap: 22px; align-items: center; }
.bkq .bkmp-proof__text h3 { margin: 0 0 10px; font: 800 22px/1.2 var(--q-titulo); letter-spacing: -.02em; color: var(--q-ink); text-wrap: balance; }
.bkq .bkmp-proof__text p { max-width: 46ch; margin: 0; font-size: 16px; line-height: 1.65; color: var(--q-gris); }
.bkmp-proof__shot { position: relative; margin: 0; isolation: isolate; }
.bkmp-proof__shot::before { content: ""; position: absolute; z-index: -1; width: 34%; max-width: 170px; aspect-ratio: 1; top: -40px; right: -34px;
  border-radius: 16px; background: var(--bkmp-face, var(--q-c1)); opacity: .2; transform: rotate(45deg) skew(-8deg, -8deg); }
.bkmp-proof__shot picture { display: block; overflow: hidden; border: 1px solid var(--q-linea); border-radius: 18px; background: #f7f9fb;
  box-shadow: 0 30px 70px -40px rgba(13, 39, 51, .55), 0 2px 6px rgba(13, 39, 51, .04); }
.bkmp-proof__shot img { display: block; width: 100%; height: auto; }
.bkmp-proof__row.is-horas { --bkmp-face: var(--q-c1); }
.bkmp-proof__row.is-accesos { --bkmp-face: var(--q-c2); }
.bkmp-proof__row.is-renovacion { --bkmp-face: var(--q-c3); }
.bkmp-proof__row.is-pedido { --bkmp-face: var(--q-c5); }
@media (max-width: 767px) {
  /* Las tomas largas se cortan por abajo con un fundido: lo que cuenta cada fila está arriba */
  .bkmp-proof__shot { max-width: 420px; }
  .bkmp-proof__shot picture { max-height: 680px; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
  .bkmp-proof__shot::before { right: -16px; top: -28px; }
}
@media (min-width: 992px) {
  .bkmp-proof__rows { gap: 88px; }
  .bkmp-proof__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .bkmp-proof__row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .bkmp-proof__row:nth-child(even) .bkmp-proof__text { order: 2; }
  .bkmp-proof__row:nth-child(even) .bkmp-proof__shot::before { right: auto; left: -34px; }
  .bkq .bkmp-proof__text h3 { font-size: 26px; }
}

/* ---------------------------------------------------------------- qué incluye y qué no */

.bkmp-scope { padding: 76px 0 0; }
.bkmp-scope .bkmp-h { margin-bottom: 26px; }
.bkmp-scope__cols { display: grid; gap: 16px; }
@media (min-width: 900px) { .bkmp-scope__cols { grid-template-columns: 1.15fr 1fr; } }
.bkmp-scope__col { padding: 26px 26px 24px; border-radius: 18px; border: 1px solid var(--q-linea); background: #fff; }
.bkmp-scope__col.is-out { background: var(--q-banda); border-color: transparent; }
.bkmp-scope__col h3 { margin: 0 0 16px; font: 800 19px/1.2 var(--q-titulo); letter-spacing: -.015em; color: var(--q-ink); }
.bkmp-scope__col ul { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.bkmp-scope__col li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--q-ink); }
.bkmp-scope__col li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: center / 14px no-repeat; }
.is-in li::before { background-color: color-mix(in srgb, var(--q-c5) 18%, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='%2359a744' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.is-out li { color: var(--q-gris); }
.is-out li::before { background-color: #e3e9ee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5.5 5.5 5 5m0-5-5 5' fill='none' stroke='%234a5866' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.bkq .bkmp-scope__col.is-out p { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #dfe6eb; font: 600 14.5px/1.5 var(--q-texto); color: var(--q-ink); }
.bkq .bkmp-scope__terms { margin: 18px 0 0; font-size: 15px; }
#wrapper .bkq .bkmp-scope__terms a, #wrapper .bkq .bkmp-scope__terms a:visited { color: var(--q-azul); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- preguntas */

.bkmp-faq { display: grid; gap: 22px 56px; padding: 76px 0 0; }
@media (min-width: 992px) {
  .bkmp-faq { grid-template-columns: minmax(240px, .8fr) 2fr; align-items: start; }
  .bkmp-faq .bkmp-h { position: sticky; top: 110px; }
}
.bkmp-faq .bks-faq { max-width: none; }
.bkmp-faq summary { display: flex; justify-content: space-between; gap: 16px; list-style: none; }
.bkmp-faq summary::-webkit-details-marker { display: none; }
.bkmp-faq summary::after { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; transition: transform .2s var(--q-ease);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2300769e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.bkmp-faq details[open] summary::after { transform: rotate(180deg); }
.bkmp-faq details[open] { border-color: #c9d6df; }

/* ---------------------------------------------------------------- otros servicios */

.bkmp-more { padding: 76px 0 0; }
.bkmp-more .bkmp-h { margin-bottom: 24px; }
@media (min-width: 992px) { .bkmp-more__grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 767px) {
  .bkmp-hero { padding: 24px 0 48px; gap: 48px; }
  .bkmp-lead { font-size: 16.5px; }
  .bkmp-cta .bkq-btn { width: 100%; }
  .bkmp-demo__card { padding: 18px 16px 14px; }
  .bkmp-demo__btn { display: none; }
  .bkmp-plan__p b { font-size: 42px; }
  .bkmp-how { margin-top: 64px; padding: 52px 0 56px; }
  .bkmp-scope, .bkmp-faq, .bkmp-more, .bkmp-proof { padding-top: 60px; }
}

/* ---------------------------------------------------------------- diálogo de las condiciones */

.bkmp-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: 18px; background: #fff; color: var(--q-ink);
  box-shadow: 0 40px 90px -30px rgba(13, 39, 51, .7); }
.bkmp-dialog::backdrop { background: rgba(13, 39, 51, .5); }
.bkmp-dialog[open] { display: flex; animation: bkmp-in .35s var(--q-ease); }
@keyframes bkmp-in { from { opacity: 0; transform: translateY(12px); } }
.bkmp-dialog__in { display: flex; flex-direction: column; width: 100%; max-height: inherit; }
.bkmp-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--q-linea); }
.bkmp-dialog__h { margin: 0; font: 800 22px/1.2 var(--q-titulo); letter-spacing: -.02em; color: var(--q-ink); text-wrap: balance; }
.bkq .bkmp-dialog__meta { margin: 6px 0 0; font-size: 13.5px; color: var(--q-gris); font-variant-numeric: tabular-nums; }
.bkmp-dialog__x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: var(--q-banda); cursor: pointer; }
.bkmp-dialog__x svg { width: 20px; height: 20px; fill: none; stroke: var(--q-ink); stroke-width: 2; stroke-linecap: round; }
.bkmp-dialog__x:hover { background: #e3e9ee; }
.bkmp-dialog__body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 24px; counter-reset: bkmpt; overscroll-behavior: contain; }
.bkmp-dialog__body h2 { margin: 26px 0 10px; font: 700 18px/1.3 var(--q-titulo); color: var(--q-ink); counter-increment: bkmpt; }
.bkmp-dialog__body h2::before { content: counter(bkmpt) ". "; color: var(--q-azul); }
.bkmp-dialog__body h3 { margin: 18px 0 8px; font: 700 15.5px/1.35 var(--q-titulo); color: var(--q-ink); }
.bkq .bkmp-dialog__body p, .bkmp-dialog__body li { font-size: 15px; line-height: 1.65; color: #33404c; }
.bkq .bkmp-dialog__body p { margin: 0 0 12px; }
.bkmp-dialog__body ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.bkmp-dialog__body a { color: var(--q-azul); text-decoration: underline; text-underline-offset: 3px; }
.bkmp-dialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--q-linea); }
.bkmp-dialog__pdf, .bkmp-dialog__pdf:visited { color: var(--q-azul); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .bkmp-dialog { max-height: 92vh; }
  .bkmp-dialog__head, .bkmp-dialog__foot { padding-left: 18px; padding-right: 18px; }
  .bkmp-dialog__body { padding: 4px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bkmp-dialog[open] { animation: none; }
  .bkmp-demo__bar i { animation: none; }
  .bkmp-plan, .bkmp-faq summary::after { transition: none; }
  .bkmp-plan:hover { transform: none; }
}