/* ===========================================================================
   PAY · capa propia sobre la plantilla de Next
   Todo lo que NO viene en next-core.css vive aquí. No se toca next-core.css:
   así una actualización de la plantilla del proveedor no se lleva por delante
   nuestro diseño.
   =========================================================================== */

/* ── Etiqueta «New 2026 Edition» ─────────────────────────────────────────── */
.pay-edition {
  color: #d92d20;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}

/* ── Imagen principal (sin carrusel) ─────────────────────────────────────── */
.pay-hero-media {
  position: relative;
  width: 100%;
  border-radius: var(--radius--cards, 10px);
  overflow: hidden;
  background: #f4f5f7;
}

.pay-hero-media__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.pay-hero-media__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 74px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.pay-hero-media__flag {
  position: absolute;
  top: 14px;
  right: 12px;
  background: #111827;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
  .pay-hero-media__badge { width: 58px; }
  .pay-hero-media__flag { font-size: 0.65rem; padding: 5px 8px; }
}

/* ── Iconos de las cuatro ventajas ───────────────────────────────────────── */
.pay-ficon {
  color: var(--brand--color--primary, #1f4ba2);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
}

.pay-ficon svg { width: 100%; height: 100%; display: block; }

/* ── Popup de salida ─────────────────────────────────────────────────────── */
.pay-exit {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.pay-exit.is-open { opacity: 1; visibility: visible; }

.pay-exit__dialog {
  position: relative;
  display: flex;
  width: min(780px, 100%);
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.18s ease;
}

.pay-exit.is-open .pay-exit__dialog { transform: none; }

.pay-exit__media {
  width: 45%;
  flex: 0 0 45%;
  background: #f4f5f7;
}

/* contain, no cover: la foto de producto va sobre fondo claro y un recorte
   deja el panel en blanco. */
.pay-exit__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.pay-exit__media img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.pay-exit__body {
  flex: 1;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.pay-exit__eyebrow { font-size: 2rem; font-weight: 800; line-height: 1; margin: 0; }
.pay-exit__lead { margin: 0; color: #4b5563; font-size: 0.95rem; }
.pay-exit__title { margin: 6px 0 0; font-size: 1.55rem; font-weight: 800; line-height: 1.2; }
.pay-exit__offer { margin: 4px 0 0; font-size: 1.1rem; font-weight: 700; }
.pay-exit__note { margin: 0; color: #6b7280; font-size: 0.85rem; }

.pay-exit__cta {
  margin-top: 14px;
  border: 0;
  cursor: pointer;
  background: #ffd431;
  color: #111827;
  font-weight: 800;
  font-size: 1rem;
  padding: 15px 18px;
  border-radius: 8px;
  width: 100%;
}

.pay-exit__cta:hover { filter: brightness(0.95); }

.pay-exit__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px 8px;
}

.pay-exit__close:hover { color: #374151; }

@media (max-width: 700px) {
  .pay-exit__dialog { flex-direction: column; overflow-y: auto; }
  .pay-exit__media { width: 100%; flex: none; max-height: 190px; }
  .pay-exit__body { padding: 22px 20px 26px; }
  .pay-exit__eyebrow { font-size: 1.6rem; }
  .pay-exit__title { font-size: 1.25rem; }
}

/* ===========================================================================
   PALETA · alineada con la referencia del sector (20-ago-2026)
   La plantilla venía en azul corporativo. El checkout de referencia usa negro
   + crema + amarillo, y el amarillo del CTA es lo que más destaca en toda la
   página — que es exactamente donde queremos la mirada.
   Se sobreescriben las variables, no las reglas: así next-core.css sigue
   intacto y una actualización del proveedor no se lleva la paleta por delante.
   =========================================================================== */
:root {
  --brand--color--primary: #18181b;
  --brand--color--primary-dark: #000000;
  --brand--color--primary-light: #fcf8dc;
  --brand--color--cta-primary: #ffd431;
  --brand--color--cta-primary-hover: #f2c518;
}

/* El botón de compra va en amarillo, así que su texto tiene que ser oscuro:
   con el blanco heredado no se leía. */
.submit-button,
.submit-button:hover {
  color: #18181b;
}

.submit-button__subtext { color: #3f3f46; }

/* ── Cabecera oscura ─────────────────────────────────────────────────────────
   El logotipo de Airheaterpro es plateado con degradado: está DIBUJADO para fondo
   oscuro. Sobre blanco había que oscurecerlo y perdía el relieve. Con la
   cabecera en negro se usa el original y además cierra el bloque con la barra
   de oferta de arriba. */
.checkout-header {
  background-color: #18181b;
  color: #ffffff;
}

.checkout-header .mg-text,
.checkout-header .questions-text { color: #ffffff; }

.checkout-header .link-tel {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.checkout-header__extras { border-color: rgba(255, 255, 255, 0.2); }

.checkout-header .brand-logo { max-height: 42px; width: auto; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.footer_section {
  background-color: #000000;
  color: #ffffff;
  padding-top: 2.25rem;
  padding-bottom: 2rem;
}

.footer_layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}

.footer_logo { width: 170px; height: auto; display: block; }

.footer_copy-info { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.footer_section .text-xs { color: rgba(255, 255, 255, 0.65); }

.footer_link-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }

.footer_section .footer_legal-link { color: #ffffff; text-decoration: underline; }

.footer_section .footer_legal-link:hover { color: #ffd431; }

/* ── Sello de garantía del cuerpo ────────────────────────────────────────────
   Venía al tamaño natural del fichero (118 px) y se comía el bloque. Al mismo
   tamaño que la referencia. */
.guarantee-image { width: 64px; height: auto; flex: 0 0 64px; margin-right: 14px; }

/* ── Bandera de la imagen principal ──────────────────────────────────────────
   Hereda la tipografía de la página en vez de traer la suya, que se leía como
   un pegote encima de la foto. */
.pay-hero-media__flag {
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(24, 24, 27, 0.92);
  padding: 7px 12px;
  box-shadow: none;
}

/* ── Cajas de cobertura ──────────────────────────────────────────────────────
   La cobertura lleva su caja completa con lista de ventajas. La garantía
   extendida va en una caja PROPIA, más baja y sin lista: es un segundo sí, y
   pedir dos veces lo mismo con la misma caja se lee como una trampa. */
.pay-bump__was {
  color: #71717a;
  font-weight: 600;
  margin-right: 8px;
}

.pay-bump--slim .bump__body { padding-top: 4px; }

.pay-bump--slim .bump__title { font-size: 0.98rem; }

.pay-bump--slim .pay-bump__note {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #52525b;
}

.pay-bump__shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #18181b;
  margin-right: 8px;
}

.pay-bump__shield svg { width: 100%; height: 100%; display: block; }

/* ── Hueco de variantes ──────────────────────────────────────────────────────
   Va debajo de la escalera de packs y encima de «Step 2»: primero cuánto,
   después cómo. Al revés, el visitante reelige color cada vez que cambia de
   pack. Dashcam 3 no tiene variantes; esto queda listo para el que sí. */
.pay-variants__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.pay-variants__field {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.pay-variants__note {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: #71717a;
}

/* ===========================================================================
   TIPOGRAFÍA · Inter, servida por nosotros
   La plantilla no cargaba ninguna fuente: caía a la del sistema, que en
   Windows es Segoe UI. Al lado de la referencia se notaba: letra más ancha,
   números menos definidos. La referencia usa Inter.
   Se sirve desde nuestro dominio, NO desde Google: es la página de pago y no
   queremos un tercero en la ruta crítica ni una petición que diga desde dónde
   nos leen. Un fichero variable cubre de 400 a 800.
   =========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --_text---font-family--primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --_text---font-family--heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --_text---font-family--secondary: 'Inter', system-ui, sans-serif;
}

/* ===========================================================================
   LOS MISMOS TRES TOKENS, OTRA VEZ, PERO EN `body`. NO ES UNA COPIA INÚTIL.

   Sin esto, la página de pago se dibujaba con la letra del sistema del
   comprador en MÓVIL Y TABLET —Segoe UI en Windows, San Francisco en Mac,
   Roboto en Android— y con Inter solo en escritorio. Medido en un navegador
   de verdad el 3-sep-2026 sobre https://airheaterpro.blarie.com/checkout/uk/:

       1440 px → body «Inter, system-ui…»  · document.fonts.check('16px Inter') = true
        375 px → body «system-ui, …»       · document.fonts.check('16px Inter') = false
                                             las dos caras de Inter en estado `unloaded`

   POR QUÉ, exactamente: `next-core.css` no declara estos tokens solo en
   `:root` — los VUELVE A DECLARAR sobre `body`, con la pila del sistema,
   dentro de tres bloques responsive (`next-core.css:7664`, `:9159`, `:9727`,
   todos `@media screen and (max-width: 991px)` y por debajo). Una propiedad
   personalizada declarada en `body` gana a la que `body` HEREDA de `:root`,
   por muy posterior que sea la hoja donde esté el `:root`. Así que el bloque
   de arriba nunca llegaba a pintar por debajo de 992 px: no era un problema
   de orden de hojas ni de despliegue, y por eso el CSS parecía correcto leído.

   La regla de abajo se declara sobre `body` —el mismo sitio donde el vendor
   pisa— y en una hoja POSTERIOR, así que gana en todos los anchos. Las media
   queries no suman especificidad: a igualdad, manda la hoja que va después.

   La letra no se elige aquí: la fija el paquete de marca de Airheaterpro
   (`marcas/airheaterpro.com/marca.json` → `tipografia.interfaz`: Inter,
   self-hosted). Invariante de dirección del 3-sep-2026: *la tipografía que
   declaras es la que se renderiza*. Si el paquete de marca cambia de familia,
   se cambia AQUÍ y en los dos `@font-face` de arriba, no en cada superficie.
   =========================================================================== */
body {
  --_text---font-family--primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --_text---font-family--heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --_text---font-family--secondary: 'Inter', system-ui, sans-serif;
}

body, input, select, textarea, button {
  font-family: var(--_text---font-family--primary);
}

/* Lato sin `@font-face` que la sirva: `next-core.css:1358` la pide para
   `.section.cc-top-lg` y nadie la entrega, así que ese bloque caía también a la
   letra del sistema. Se pasa al token de la marca en vez de servir una familia
   más: el paquete de Airheaterpro declara UNA tipografía de interfaz, no dos. */
.section.cc-top-lg { font-family: var(--_text---font-family--primary); }

/* ── Iconos de ventajas ──────────────────────────────────────────────────────
   Venían pequeños y con el texto por debajo del mínimo legible. Al tamaño de
   la referencia. */
.pay-ficon { width: 34px; height: 34px; margin-bottom: 8px; }

.icons-grids .icon-image .text-xs {
  font-size: 0.82rem;
  line-height: 1.3;
  font-weight: 500;
}

/* El contenedor flex encogía el icono por debajo de su ancho. */
.icons-grids .icon-image .pay-ficon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px;
}

/* ── Los dos pesos del bump ──────────────────────────────────────────────────
   El barato y evidente va pequeño y marcado; el caro va grande, argumentado y
   sin marcar. La diferencia de tamaño ES el mensaje. */
.pay-bump__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #18181b;
  margin-right: 8px;
}

.pay-bump__ico--lg { width: 26px; height: 26px; flex: 0 0 26px; }

.pay-bump__ico svg { width: 100%; height: 100%; display: block; }

.pay-bump--feature {
  border-width: 2px;
  box-shadow: 0 2px 10px rgba(24, 24, 27, 0.07);
}

.pay-bump--feature .bump__title {
  font-size: 1.08rem;
  font-weight: 700;
}

.pay-bump__lead {
  margin: 4px 0 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #3f3f46;
}

/* El «+10% extra» del tramo. La escalera del stack se lee como 50 % de base
   MAS un extra por subir de cantidad; decirlo asi vende mejor que un 60 % seco,
   porque nombra lo que se gana por dar el paso. */
.pay-extra {
  display: inline-block;
  background: #18181b;
  color: #ffd431;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
}

/* El «SAVE X%» salia DOS veces: como pastilla junto al titulo y como subtitulo
   debajo. La referencia lo dice una sola vez, debajo del nombre. Se esconde la
   pastilla en vez de borrarla del HTML: si el proveedor cambia la plantilla,
   esto no se pelea con el. */
.os-card__title-badge.pb--bestseller[data-next-discounts="offer"] { display: none !important; }

/* Al esconder la pastilla, el titulo dejo de tener quien lo frenara y se metia
   encima del precio. El clasico de flex: un hijo no encoge por debajo de su
   contenido si no se le dice. */
.os-card__main-slot,
.os-card__title-section,
.os-card__title-wrapper { min-width: 0; }

.os-card__title {
  overflow-wrap: anywhere;
  padding-right: 10px;
}

/* La plantilla trae el titulo en `nowrap`: sin esto no rompe linea y se sale
   del hueco, encima del precio. */
.os-card__title { white-space: normal; line-height: 1.25; }
.os-card__main-slot { overflow: visible; }

/* ── La escalera se lee: 50 % de base, y un extra por subir de cantidad ──────
   El «Save 60 %» del SDK es cierto pero no se entiende: nadie sabe de donde
   sale. Los tres tramos dicen «Save 50%» y el extra va aparte («+10% EXTRA»),
   que es como esta construida la oferta y como la cuenta la referencia del
   sector. En rojo, porque el ahorro es lo unico que tiene que saltar de la
   tarjeta antes que el precio. */
.pay-save {
  color: #d92d20;
  font-weight: 700;
}

/* El tachado va ENCIMA del precio, no a su lado. En una fila, el ojo lee dos
   numeros y tiene que decidir cual manda; apilados, el de arriba es
   evidentemente el viejo. La plantilla ya traia `os--stacked`: se usa lo suyo
   en vez de pelearse con su CSS. */
.os-card__price-container.os--stacked { grid-row-gap: 0; }

.os-card__price-container.os--stacked .os-card__price.os--compare {
  font-size: 0.82rem;
  line-height: 1.25;
}

/* El tramo elegido se pinta de fondo, no solo de borde. Un borde negro sobre
   blanco al lado de otras dos cajas blancas obliga a comparar bordes; el fondo
   se ve de un vistazo y desde lejos. Cambia solo: `next-selected` la pone y la
   quita el SDK al pinchar. */
.os-card.next-selected {
  background-color: var(--brand--color--primary-light) !important;
}

/* ── Coberturas: el precio no es el protagonista ─────────────────────────────
   Iban en cuerpo grande, mas que el titulo de la caja, y una cobertura de 5,95
   gritando mas que el producto de 79,90 descoloca la pagina. Al tamano del
   texto que la explica. */
.bump__price-sale {
  font-size: 0.85rem;
  font-weight: 700;
}

.pay-bump__was {
  font-size: 0.85rem;
}

/* ── Resumen del pedido: un solo sitio para el ahorro ────────────────────────
   Estaba dicho tres veces —tachado en cada linea, fila gris bajo el subtotal y
   «Today you saved»— y las tres no sumaban lo mismo, porque las coberturas
   tienen su precio comparativo y el SDK no lo conoce. Un numero que aparece
   tres veces con tres valores no es tres pruebas: es la duda de si alguno es
   verdad. Se deja UNO, y lo calculamos nosotros. */
/* (la seccion se marca con `pay-oculto` en el HTML: `:has()` no hace falta) */

.pay-oculto { display: none !important; }

/* ═══ Tarjetas de tramo: menos numeros, mas grandes ══════════════════════════
   La tarjeta decia el precio DOS veces —por unidad arriba y total abajo— con
   sus dos tachados. Cuatro cifras para elegir entre tres opciones. Se queda la
   columna vertical (tachado encima, precio debajo) y desaparece el «Total:»;
   con el hueco que deja, lo que queda puede crecer y leerse de lejos.
   Se ESCONDE, no se borra: si el proveedor actualiza la plantilla, esto no se
   pelea con el. */
.os-card__total-container { display: none !important; }

.os-card__subtitle-text { font-size: 0.95rem; line-height: 1.3; }

.pay-save { font-size: 1rem; }

.os-card__price-container.os--stacked .os-card__price.os--current {
  font-size: 1.25rem;
  line-height: 1.2;
}

.os-card__price-container.os--stacked .os-card__price.os--compare {
  font-size: 1rem;
  line-height: 1.25;
}

/* El tachado: la cifra en gris OSCURO —legible, no descartada— y la raya en
   rojo. Un tachado gris sobre gris no se ve; la raya roja es la que dice «este
   ya no es el precio» sin tener que leer nada. */
.os-card__price.os--compare {
  color: #52525b !important;
  text-decoration: line-through !important;
  text-decoration-color: #d92d20 !important;
  text-decoration-thickness: 2px !important;
  text-decoration-skip-ink: none;
}

/* En las COBERTURAS el tachado NO lo ponemos nosotros: la plantilla ya dibuja
   una raya roja en diagonal (`.diagonal-strike::after`). Al anadir la nuestra
   encima salian DOS rayas sobre el mismo numero — la gruesa recta y la fina
   diagonal—, que se lee como un error de maquetacion, no como un descuento.
   Aqui solo se pone el color; la raya es la suya. */
.pay-bump__was {
  color: #52525b !important;
  text-decoration: none !important;
}

/* ═══ Coberturas: las dos iguales, y ninguna gritando ════════════════════════
   Antes una iba pequena y la otra grande a proposito. Cambio de criterio de
   direccion: las dos con la MISMA tipografia, los mismos precios y los mismos
   pesos — lo que las distingue es lo que dicen, no como estan pintadas. Y
   ninguna de las dos compite con el selector de tramo ni con el boton de pagar:
   son un anadido, no la decision de la pagina. */
.pay-bump--feature {
  border-width: 1px;
  box-shadow: none;
}

.pay-bump--slim .bump__title,
.pay-bump--feature .bump__title {
  font-size: 0.95rem;
  font-weight: 700;
}

.pay-bump--slim .pay-bump__note,
.pay-bump__lead {
  margin: 4px 0 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #3f3f46;
}

.bump__price-sale,
.pay-bump__was {
  font-size: 0.95rem;
  font-weight: 600;
}

.pay-bump__ico,
.pay-bump__ico--lg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

/* La cabecera marcada NO va en el amarillo de marca. Ese amarillo es del tramo
   elegido y del boton de pagar; gastarlo aqui hace que tres cosas griten a la
   vez y ninguna se oiga. Un tono neutro basta para decir «esto esta puesto». */
.bump-card.next-active .bump__header-left,
.bump-card.next-in-cart .bump__header-left {
  background-color: #f4f4f5 !important;
}

/* ═══ La columna izquierda acompaña al scroll ════════════════════════════════
   El formulario de la derecha es largo: dirección, coberturas, pago. Si la
   columna de la izquierda se queda arriba, a partir del segundo paso el
   visitante está metiendo datos de tarjeta sin ver QUÉ está comprando — ni la
   foto, ni las reseñas, ni el resumen. Fijándola, la prueba de lo que se lleva
   sigue delante hasta el final.

   Dos detalles que hacen que funcione:
   · `align-self: flex-start` — sin esto, el contenedor flex estira la columna
     a toda la altura de la fila y el sticky no tiene por dónde viajar. Es el
     fallo clásico de `position: sticky` dentro de un flex.
   · Solo de 992 px para arriba. Por debajo la plantilla apila en una columna y
     fijar ahí taparía media pantalla.  */
@media screen and (min-width: 992px) {
  .checkout-layout__left {
    position: sticky;
    top: 0;
    align-self: flex-start;
  }
}

/* ═══ Popup de salida ════════════════════════════════════════════════════════
   Texto centrado: la caja es estrecha y son cuatro frases cortas: alineadas a
   la izquierda quedan colgando del borde. Y el boton ocupa todo el ancho —
   ahi solo hay una cosa que hacer. */
.pay-exit__body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pay-exit__cta { width: 100%; }

.pay-exit__offer {
  color: #d92d20;
  font-weight: 700;
}

/* La pastilla «+5%» que pinta el SDK cuando el cupon esta puesto. La plantilla
   la traia sin estilo propio y salia igual que el resto del subtitulo, con lo
   que lo que el visitante acaba de ganar no se veia. Ahora se lee como lo que
   es: algo que se ha AÑADIDO. */
.os-card__title-badge[data-next-discounts="voucher"] {
  display: inline-block !important;
  background: #d92d20;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* La pastilla «+5%» del SDK se esconde: con el extra puesto, el numero ya esta
   DENTRO de la etiqueta («Save 55%»). Ensenar las dos seria decir lo mismo dos
   veces y dejar al visitante sumando. */
.os-card__title-badge[data-next-discounts="voucher"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIL · CABECERA DE MARCA Y RESENAS · 4-sep-2026
   Packet P1 de direccion. Solo maquetacion: no se toca el countdown, ni el
   codigo promocional, ni los precios, ni los pasos del checkout, ni el pago.
   Todo va bajo `max-width: 767px`, que es el corte de movil del tema, para que
   el escritorio quede EXACTAMENTE como estaba.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LA FRANJA BLANCA DE LA CABECERA ──────────────────────────────────
   Lo que se veia: una banda alta y vacia con el logo Airheaterpro descolorido.

   Lo que pasaba de verdad: `next-core.css` pinta `.checkout-header__inner` de
   BLANCO, y solo lo hace por debajo de 991 px. La cabecera de esta tienda es
   oscura A PROPOSITO —el logotipo es plateado con degradado y esta DIBUJADO
   para fondo oscuro—, asi que se daban tres cosas a la vez:

     · el logo plateado sobre blanco, de ahi que se viera lavado;
     · el texto, que hereda `color: #ffffff`, quedaba BLANCO SOBRE BLANCO. El
       telefono y el correo de atencion estaban ahi, ocupando 84 px de alto,
       y no se veian. Eso no era espacio vacio: era contenido invisible, y por
       eso parecia un banner sin contenido;
     · y ese mismo bloque se salia 20 px por la derecha en un movil de 375 px,
       que es el recorte que asomaba en el borde de la pantalla.

   No se arregla ocultando nada: el blanco no deberia estar ahi. Medido antes
   y despues en la pagina servida a 375 px, con todo el texto legible y sin
   desbordar: Estados Unidos 79 px -> 50 px, Reino Unido 100 px -> 66 px. */
/* El blanco de next-core empieza en 991 px, no en 767: entre 768 y 991 —una
   tableta en vertical— la franja blanca seguia ahi, con el correo en blanco
   sobre blanco. La causa es la misma, asi que el arreglo alcanza hasta donde
   llega la causa. Ahi abajo solo hace falta quitar el blanco: la maquetacion
   del tema cabe de sobra y no se toca. De 992 px para arriba no entra ninguna
   de las dos reglas y el escritorio queda exactamente como estaba. */
@media screen and (max-width: 991px) {
  .checkout-header .checkout-header__inner { background-color: transparent; }
}

@media screen and (max-width: 767px) {
  .checkout-header .checkout-header__inner {
    background-color: transparent;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 10px;
    padding: 9px 0;
  }

  /* `display: contents` sube los nietos —el sello y el bloque de contacto— a
     ser hijos directos de la fila. Es lo que permite poner el logo y el sello
     en UNA SOLA FILA, uno a cada lado, sin tocar el marcado. */
  .checkout-header .checkout-header__extras,
  .checkout-header .mg-section { display: contents; }

  .checkout-header .checkout-header__brand { order: 1; flex: 0 0 auto; }
  .checkout-header .brand-logo { max-height: 24px; }

  .checkout-header .mg-image {
    order: 2;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
  }

  /* El contacto: las vias que declara el mercado, y NO se esconden. El correo
     se anadio porque el contrato de mercado lo exigia y la pagina servida no
     lo daba: el comprador de UK se quedaba con una sola via, y la mas cara de
     atender. Que hoy no se lean es el fallo que se esta arreglando, no una
     excusa para quitarlas.

     UNA SOLA FILA, y el contacto ocupa el hueco que quede. La clave es
     `flex-basis: 0`: con `auto`, flexbox mide el bloque por su texto entero
     (unos 330 px), ve que no cabe al lado del logo y lo TIRA a una segunda
     linea. Partiendo de cero se queda donde esta y el texto se reparte en las
     lineas que necesite dentro de su columna.

     `min-width: min-content` es el suelo: la columna nunca baja de lo que mide
     el trozo mas largo que no se puede partir —el correo—, asi que no vuelve a
     salir un «…dashcam.co / m» partido a mitad de palabra. Y `white-space:
     nowrap` en los enlaces evita lo mismo con el telefono de UK.

     Medido sobre lo servido a 375 px, con todo legible:

       · Estados Unidos (solo correo):      79 px -> 50 px.
       · Reino Unido (telefono Y correo):  100 px -> 66 px. */
  .checkout-header .questions-text {
    order: 3;
    flex: 1 1 0;
    min-width: min-content;
    border-left: 0;          /* el separador del tema, para cuando iba al lado */
    padding: 0;
    font-size: 0.72rem;      /* legibilidad primero: no baja de 11,5 px */
    line-height: 1.4;
    font-weight: 500;
    text-align: right;
  }
  /* Los saltos del marcado partian el contacto en una columna estrecha del
     escritorio. Aqui el bloque ya es una fila: sobran, y sin ellos el correo
     entero cabe en una linea. El marcado lleva un espacio DETRAS de cada
     salto justo para esto: con el salto puesto no se ve (cae al principio de
     linea) y sin el separa las dos vias. */
  .checkout-header .questions-text br { display: none; }
  .checkout-header .questions-text .link-tel {
    margin-left: 3px;
    white-space: nowrap;     /* ni el telefono ni el correo se parten */
  }
}

/* Por defecto manda el testimonio completo. Va ANTES del bloque de movil a
   proposito: las dos reglas tienen la misma especificidad, asi que decide la
   ultima que se lee. Puesta despues ganaba siempre, y el texto corto no se
   veia en ninguna pantalla: las tarjetas salian con titulo y firma y sin
   testimonio. */
.checkout-review__description--corto { display: none; }

/* ── 2 · LAS DOS RESENAS, EN UNA FILA DE DOS COLUMNAS ─────────────────────
   `.checkout-reviews` YA es una rejilla de dos columnas en su regla base. Lo
   que las apilaba era el tema, que por debajo de 767 px la pasa a
   `flex-flow: column`. Se le devuelve la rejilla y se ajusta la caja para que
   quepan: dos tarjetas del mismo ancho, con el mismo aire, sin carrusel.
   Medido en la pagina servida a 375 px: 470 px de alto -> 147 px. */
@media screen and (max-width: 767px) {
  .checkout-reviews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .checkout-review {
    flex-direction: column;
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 0;
    padding: 12px 11px;
  }
  .checkout-review .checkout-review__body { width: 100%; }

  /* Legibilidad primero: el cuerpo no baja de 13 px. */
  .checkout-review__stars { margin-bottom: 6px; }
  .checkout-review__stars .star_img svg { width: 13px; height: 13px; }

  .checkout-review__title {
    margin: 0 0 5px;
    font-size: 0.94rem;
    line-height: 1.25;
  }
  .checkout-review__description {
    margin: 0 0 9px;
    font-size: 0.815rem;
    line-height: 1.42;
  }
  .checkout-review__meta {
    flex-wrap: wrap;
    gap: 0 5px;
    font-size: 0.72rem;
    line-height: 1.3;
  }

  /* ── 3 · EL TEXTO CORTO ────────────────────────────────────────────────
     En dos columnas el texto largo no cabe sin encoger la letra hasta hacerla
     ilegible, asi que en movil se sirve una version breve. Es un RECORTE del
     testimonio que ya estaba publicado —las mismas personas, el mismo hecho,
     el mismo resultado—: no se anade ni un dato que no estuviera. El texto
     largo sigue intacto y es el que ve el escritorio. */
  .checkout-review__description--largo { display: none; }
  .checkout-review__description--corto { display: block; }
}