/* ===========================================================================
   PRESENTACIÓN B · variante de DISPOSICIÓN del checkout que ya cobra

   Autorizada por dirección el 8-sep-2026: «para la presentación B del piloto,
   procede con una variante acotada de disposición sobre el checkout que cobra.
   Mantén motor, campaña, precios, oferta y métodos de pago».

   ── QUÉ CAMBIA, Y ES TODO LO QUE CAMBIA ──────────────────────────────────
   1 · En ESCRITORIO, el formulario de pago pasa a la IZQUIERDA y el bloque de
       producto y prueba social a la derecha. Hoy es al revés.
   2 · En MÓVIL, el formulario sube por encima del bloque de producto, así que
       el comprador ve los campos sin desplazarse.
   3 · Nada más. Ni un color, ni una tipografía, ni un texto, ni un precio.

   ── QUÉ **NO** CAMBIA, Y POR QUÉ ESTÁ ESCRITO AQUÍ ────────────────────────
   El motor, la campaña, los precios, la escalera, los papeles, los métodos de
   pago, la atribución y la medición son LOS MISMOS BYTES: esta hoja no toca
   JavaScript ni `config.js`. Es la condición que puso dirección para poder
   AISLAR el efecto del diseño — si B cambiara también el precio, un resultado
   mejor no diría si fue por la disposición o por el dinero.

   ── ESTO NO ES «V2 SHOPIFY» ───────────────────────────────────────────────
   Dirección lo avisó expresamente y se repite aquí porque es donde se va a
   leer: **esta B no se llama V2 ni sustituye ese encargo.** V2 es la
   reproducción fiel del checkout de Shopify y sigue pendiente. Diseño, motor y
   grupo de experimento son tres identidades distintas.

   ── CÓMO SE ACTIVA ────────────────────────────────────────────────────────
   Sólo bajo `html.presentacion-b`. Sin esa clase, este fichero no aplica NI UNA
   regla, así que la presentación A queda exactamente como está — que es lo que
   permite publicarlo sin arriesgar lo que cobra hoy.
   =========================================================================== */

/* ── AQUÍ YA NO SE INVIERTEN LAS COLUMNAS · y es el arreglo, no un olvido ───
   La primera versión las cambiaba de sitio con `order: 2 / 1`. Funcionaba, y el
   recorrido del tabulador quedaba bien porque la columna que se mueve no tiene
   ni un elemento focalizable. Pero dejaba **dos verdades sobre la misma
   página**: el DOM decía producto → formulario y la vista enseñaba formulario →
   producto. Un lector de pantalla lee el DOM, así que oía ~3.600 px de producto
   antes de llegar a los campos de pago. Es WCAG 1.3.2, «secuencia
   significativa», y no lo arregla que no haya nada que enfocar.

   Dirección lo cortó bien: *«la ausencia de elementos focalizables no cierra esa
   validación»*. La inversión la hace ahora `js/presentacion.js` MOVIENDO EL
   NODO, así que orden visual y orden de lectura vuelven a ser el mismo — en
   escritorio y en móvil, y sin una regla por cada punto de corte.

   Lo que queda en esta hoja es sólo lo que de verdad es aspecto. */

/* Un respiro entre las dos columnas al invertirlas: el formulario queda pegado
   al borde izquierdo del contenedor y sin esto se lee apretado. */
@media (min-width: 992px) {
  html.presentacion-b .checkout-layout__right { padding-right: 1.5rem; }
}

/* ── UNA MARCA VISIBLE SÓLO PARA QUIEN LA BUSCA ─────────────────────────────
   Un cuadrado de 6 px en la esquina, del color de la marca. No lo ve un
   comprador y permite a quien verifica saber DE UN VISTAZO qué presentación le
   ha tocado sin abrir el inspector. Se retira el día que el experimento acabe.

   Existe porque la primera comprobación de un A/B es siempre «¿me ha tocado la
   otra?», y responderla mirando píxeles de la maqueta es lento y se falla. */
html.presentacion-b body::after {
  content: "";
  position: fixed;
  right: 0;
  bottom: 0;
  width: 6px;
  height: 6px;
  background: var(--brand--color--cta-primary, #ffd431);
  z-index: 9999;
  pointer-events: none;
}