/* ============================================================================
   Brooklyn by Janice — Carrito y checkout
   ----------------------------------------------------------------------------
   Las dos pantallas donde se pierde el dinero:
     · carrito → checkout en móvil: 63,8% (uno de cada tres no llega a pagar)
     · checkout → compra: 30,4% (654 de 940 abandonan)

   Todo aquí es móvil primero. Ninguna tabla: en un teléfono, una tabla de
   cinco columnas se rompe o se encoge hasta ser ilegible.
   ========================================================================= */

/* El envoltorio de las plantillas de WooCommerce.

   ⚠️ En el CARRITO va en 0: ese aire ya lo pone el RITMO VERTICAL ÚNICO
   (20px contra el header y contra el footer, igual que en todo el sitio), y
   sumarle estos 24+60 era una de las tres capas de espacio apiladas que
   Ignacio marcó el 26-08. Las otras dos —el `clamp(40px, 7vw, 76px)` de
   `.section` y el ritmo del `.entry`— se resolvieron en `page.php`.

   Checkout, «gracias» y «mi cuenta» siguen con el valor viejo a propósito:
   comparten el mismo defecto y se corrigen cuando se revise cada una, no de
   paso desde acá. */
.wc-content { padding-block: 24px 60px; }
.woocommerce-cart .wc-content { padding-block: 0; }

.bk-checkout { display: grid; gap: 22px; grid-template-columns: 1fr; }

/* ============================================================================
   COMPARTIDO — carrito + checkout
   ----------------------------------------------------------------------------
   Las dos páginas son dos pasos del mismo recorrido y dibujan las mismas
   piezas. Lo que usan las dos vive acá arriba y no dentro del bloque de una de
   ellas: es la trampa que este proyecto ya pisó dieciocho veces, y lo que la
   hace invisible es que el componente se ve bien en la página que le da
   nombre.

   Los renglones del pedido —`.cuenta-*`— viven un escalón más arriba todavía,
   en `components.css`, junto a `.carta-marco`.
   ========================================================================= */

/* ---------- Barra de pasos ----------
   Numeral dentro de un círculo en cada paso (pedido de Ignacio, 26-08).

   El motivo no es decorativo: sin numerales, `Carrito · Pago · Descarga` en
   mono a 10px y en cacao es *tipográficamente el mismo objeto* que las migas
   `Inicio / Carrito`, seis píxeles más arriba. Dos navegaciones distintas que
   se ven igual, una encima de la otra. El círculo numerado dice «esto es un
   progreso» sin tener que leerlo.

   El paso actual va en vino sólido, el ya cumplido en vino de contorno y el
   pendiente en cacao punteado: se distinguen por peso, no solo por color, así
   que también funciona para quien no distingue el vino del cacao.

   Los números son `aria-hidden`: el orden ya lo da el marcado y el paso actual
   lo dice `aria-current`. Leer «uno Carrito dos Pago tres Descarga» es ruido. */
.bk-pasos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Centrada y acotada en las dos páginas. Suelta a ancho completo, la palabra
     «Descarga» quedaba tocando el borde derecho de la pantalla en un teléfono
     de 390px. */
  max-width: 320px;
  margin-inline: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--cacao);
}

.bk-pasos span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.bk-pasos b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px dotted currentColor;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1;
  /* El 1 óptico de Fira Code sube un pelo dentro del círculo. */
  padding-top: 1px;
}

.bk-pasos i { flex: 1; height: 1px; background: rgba(121, 87, 87, .3); }

.bk-pasos .is-actual { color: var(--wine); }

.bk-pasos .is-actual b {
  background: var(--wine);
  border-style: solid;
  color: var(--white);
}

.bk-pasos .is-hecho { color: var(--wine); }
.bk-pasos .is-hecho b { border-style: solid; }

/* ---------- Cupón ----------
   Lo dibujan el carrito y el checkout, las dos veces dentro de la cuenta.
   Plegado a propósito: un campo de cupón visible y vacío le dice a quien no
   tiene uno que existe un precio mejor al que no está accediendo, y eso manda
   a buscarlo a Google en vez de a pagar. */

/* El bloque envuelve el descuento aplicado y el campo. En el checkout la
   cuenta ya no está —salió con la tabla resumen el 27-08—, así que esta es la
   única superficie donde se puede leer cuánto descontó el código antes de
   entregar la tarjeta. */
.bk-cupon-bloque { margin-top: 4px; }

/* El aviso de WooCommerce tras aplicar o rechazar un código. Se acota acá
   porque llega insertado por JavaScript y no en el flujo de la plantilla. */
/* El total dentro del bloque del cupón. Se distingue del subtotal y del
   descuento por peso y color, no por tamaño: es la última fila de una resta,
   no un titular. */
.carta-marco .cuenta-ajuste--total {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(110, 44, 52, .22);
  color: var(--ink);
  font-weight: 600;
}

.carta-marco .cuenta-ajuste--total span:last-child { color: var(--wine); }

[data-bk-cupon-aviso] { margin-bottom: 10px; }
[data-bk-cupon-aviso] .woocommerce-message,
[data-bk-cupon-aviso] .woocommerce-error { margin: 0; }

.bk-cupon { margin-top: 4px; }
.bk-cupon-bloque > .bk-cupon { margin-top: 0; }

.bk-cupon summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cacao);
  list-style: none;
  cursor: pointer;
}

.bk-cupon summary::-webkit-details-marker { display: none; }
.bk-cupon summary span { color: var(--wine); }

.bk-cupon-campo { display: flex; gap: 8px; padding-bottom: 6px; }

/* ⚠️ El campo se queda en 16px y NO se achica, aunque el resto del bloque sí.
   Es la única medida de este archivo que no es estética: por debajo de 16px,
   iOS hace zoom al enfocar el campo y descuadra el paso entero — en un sitio
   con 95,64% de tráfico móvil eso es peor que un campo grande.

   Lo que sí se achica es lo que se ve el 99% del tiempo, que es el placeholder
   («CÓDIGO», nunca texto escrito), y con eso el campo deja de gritar sin
   romper nada. El alto baja de 48 a 44, que sigue siendo el mínimo táctil. */
.bk-cupon-campo input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 1px solid rgba(121, 87, 87, .4);
  background: var(--white);
  color: var(--ink);
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .04em;
  box-sizing: border-box;
  border-radius: var(--r-campo);
}

.bk-cupon-campo input::placeholder {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--cacao);
  opacity: 1;
}

.bk-cupon-campo .btn { flex: none; min-height: 44px; font-size: 12px; }

/* ⚠️ Dentro de la cuenta del CHECKOUT el campo del cupón perdía contra
   `.bk-checkout.bk-checkout .input-text` —(0,3,0) contra los (0,1,1) de arriba—
   y salía de 52px en `--body`, mientras el mismo campo en el carrito mide 44 en
   mono. La misma pieza, dos aspectos, según la página. Las reglas de campo del
   checkout están escritas para los datos de facturación y no tienen por qué
   alcanzar al cupón, que es parte de la cuenta.

   Va con la clase repetida —(0,4,0)— y no confiando en el orden del archivo:
   con la misma especificidad ganaría quien esté más abajo, y eso se rompe la
   próxima vez que alguien mueva un bloque. Contar, no confiar en el orden. */
.bk-cuenta .bk-cupon-campo .input-text.input-text {
  height: 44px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .04em;
  padding: 0 12px;
}

/* ---------- Carrito ----------
   Las ~150 líneas del port de Shopify que vivían acá se BORRARON el 26-08, no
   se dejaron muertas. No eran inertes: `.bk-cart-item { border-radius: 14px }`
   y `.bk-cart-img img { border-radius: 8px }` seguían ganando, y eran las
   únicas esquinas redondas de todo el recorrido de compra en un sitio que es
   cuadrado por decisión de dirección. Es la lección de los ~200px de CSS
   muerto de `home-brooklyn.css` (19-08): el CSS que ya no se usa no estorba
   hasta que gana por especificidad, y entonces cuesta una sesión encontrarlo.

   Lo demás que se fue —`.bk-cart-resumen`, `.bk-cart-garantias`,
   `.bk-cart-nota`, `.bk-cart-vacio`, `.currency`, `.bk-cart-datos h3`—
   apuntaba a un marcado que esta plantilla ya no imprime. El diseño vivo del
   carrito está más abajo, en el bloque «La Carta». */

/* El bloque de checkout del PORT DE SHOPIFY vivía acá y se BORRÓ el 26-08 al
   recomponer la pantalla. Eran ~320 líneas que duplicaban selector por selector
   el bloque «La Carta» de más abajo, con los valores del sistema visual viejo:
   `#place_order { border-radius: 999px }` (una pastilla en un sitio sin una sola
   esquina redonda), campos con `--r-sm`, y ~120 líneas domando la `<table>` del
   resumen, que desde hoy ya no existe —el resumen es «la cuenta»,
   `woocommerce/checkout/review-order.php`—.

   No estaba inerte: `.bk-checkout-resumen, .bk-checkout-datos, .bk-checkout-pago
   { padding: 20px; background: var(--white) }` era lo que dibujaba las tres
   cajas. Se reescribió en el bloque de abajo. Es la misma lección de los ~200px
   de CSS muerto de `home-brooklyn.css` (19-08) y de las 150 líneas del carrito
   (26-08): el CSS que ya no se usa no estorba hasta que gana por especificidad. */

/* ---------- Gracias por tu compra ---------- */

.woocommerce-order {
  max-width: var(--reading);
  margin-inline: auto;
  text-align: center;
}

.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wine);
  margin-bottom: 20px;
}

.woocommerce-order-downloads,
.woocommerce-order-details,
.woocommerce-customer-details {
  margin-top: 30px;
  padding: 20px;
  background: var(--paper);
  border-radius: var(--r-lg);
  text-align: left;
}

/* ============================================================================
   🔴 ACÁ VIVÍA EL BLOQUE DE «GRACIAS» DEL PORT DE SHOPIFY — BORRADO EL 27-08
   ----------------------------------------------------------------------------
   Eran ~95 líneas anteriores al rediseño: `.bk-gracias-bajada`,
   `-descargas`, `-nombre`, `-nota`, `-datos`, `-correo`, `-acciones`,
   `.bk-gracias--error`. Ninguna de esas clases existe ya en la plantilla.

   **Y NO ESTABAN INERTES.** `.bk-gracias { text-align: center }` seguía
   ganando, así que **la página entera se dibujaba centrada**: el aviso legal
   completo, la explicación de la cuenta y los tres párrafos del cross-sell,
   todos con el texto centrado, que es justo lo que §3.m prohíbe para texto
   largo en móvil. Se descubrió midiendo `getComputedStyle`, porque en el
   archivo la regla nueva se veía correcta.

   Es la tercera vez que el proyecto paga lo mismo —los ~200px de
   `home-brooklyn.css` (19-08) y las ~150 del carrito (26-08)—: **el CSS del
   port que ya no se usa no estorba hasta que gana por especificidad.** Se
   borra, no se deja comentado.

   Se conserva solo la neutralización del morado de WooCommerce, que sí sigue
   haciendo falta.
   ========================================================================= */

/*
 * WooCommerce pinta sus botones de descarga en morado. Aquí no queda ninguno
 * a la vista —la plantilla propia los reemplaza— pero se neutraliza por si
 * alguno aparece desde un hook de plugin.
 */
.woocommerce a.button.wc-forward,
.woocommerce-table--order-downloads .button {
  background: var(--wine);
  color: var(--white);
  border-radius: 999px;
}

/* ============================================================================
   EL CARRITO ES «LA CUENTA» — Dirección A «La Carta» (recompuesto 26-08)
   ----------------------------------------------------------------------------
   Pedido de Ignacio: «no está compuesto, falta identidad de marca; y hay
   demasiado padding y margin entre secciones». Las dos cosas eran ciertas y la
   causa de cada una era distinta.

   IDENTIDAD. Los renglones se dibujaban como tarjetas blancas de esquinas
   redondeadas —14px de radio heredados del port de Shopify, que seguía vivo en
   las primeras 150 líneas de este archivo— en un sitio que no tiene una sola
   esquina redonda. Genérico, y encima incoherente. Ahora el pedido es lo que
   es: **la cuenta de un restaurante**, dibujada con la misma pieza que la
   ficha usa para las recetas (`.carta-marco`, hoy en components.css): papel
   cálido, harina espolvoreada, doble filete vino, Young Serif, punteados en
   vez de líneas llenas y el total impreso adentro. Ningún recurso es nuevo.

   ESPACIO. El RITMO VERTICAL ÚNICO le da 20px por lado a cada hijo directo de
   `.bk-cart`, o sea 40px entre uno y otro. Eso está bien entre SECCIONES —y es
   la ley del sitio, no se le pelea— pero acá había ocho hijos que no eran
   secciones sino los renglones de un mismo bloque. La solución es componer: lo
   que es un bloque va dentro de un hijo. Quedan cuatro: encabezado, la cuenta,
   el bump y el cierre. Adentro de la cuenta el espacio lo pone la cuenta.

   Y el marco de la página se arregló en `page.php`: el carrito ya no lleva
   `.section`, que apilaba otros 40-76px sobre los 20 del ritmo.

   El dato que manda: en móvil solo el 63,8% de quienes agregan al carrito
   llegan al checkout. Un solo CTA, el bump secundario, y nada más en esta
   pantalla usa vino sólido.
   ========================================================================= */

.bk-cart {
  /* Sin fondo propio: lo pone el `body`. Sin espacio vertical propio: lo pone
     el ritmo único de components.css (ambos, 23-08).

     Sin `padding-inline` tampoco: el `.wrap` de `page.php` ya pone `--edge`, y
     declararlo otra vez acá daba 48px de margen lateral en un teléfono de
     390px — la mitad del exceso de espacio que se veía. */
  color: var(--ink);
  display: block;
  /* Misma columna que el checkout (720px + aire): carrito y pago son la misma
     pieza en dos pasos y no tienen por qué medir distinto. `--ancho` es lo que
     alinea a los componentes compartidos que viven acá adentro. */
  --ancho: var(--reading);
  max-width: var(--reading);
  margin-inline: auto;
}

/* ---------- Encabezado ---------- */

/* Sin espacio vertical propio (pedido de Ignacio, 26-08). El encabezado no es
   una sección con fondo: es el titular de la página, y el aire contra el
   header ya lo pone el `.wrap` de `page.php` más las migas. Los 20px del
   ritmo lo despegaban del bloque que titula.

   ⚠️ Selector (0,4,0) —las DOS clases repetidas—. No basta (0,3,0): el
   encabezado es el PRIMER hijo de `.bk-cart`, así que quien le pone el
   `padding-top` no es la regla general del ritmo (0,2,1) sino la de
   `:is(…) > :first-child`, y ese `:first-child` le suma (0,1,0) hasta
   (0,3,1). Con (0,3,0) el `padding-bottom` sí quedaba en 0 y el TOP seguía
   en 20px — que es justo lo que había que sacar (pedido de Ignacio, 26-08).
   Contar, no confiar en el orden del archivo.

   El margen contra la cuenta lo pone la cuenta con su propio `margin-block`,
   así que sacarle el padding no los deja pegados. */
.bk-cart.bk-cart > .bk-cart-head.bk-cart-head { padding-block: 0; }

.bk-cart-head { text-align: center; }

.bk-cart-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.08;
  margin: 12px 0 0;
}

/* El lema de marca, en Arapey itálica y vino: el mismo de la portada y de la
   colección. Quien entra desde una bio de TikTok directo a la colección nunca
   ve el home, así que este puede ser el único lugar del recorrido donde lee de
   qué va Brooklyn antes de pagar. */
.bk-cart-head .lema { margin: 8px 0 0; }

/* ---------- La cuenta ---------- */

/* ⚠️ El aire de sección va por FUERA del marco, en `margin`, no en el
   `padding` que le pone el RITMO VERTICAL ÚNICO.

   Es la misma corrección que ya se hizo en el 404 con `.bk-vacio-aviso` y con
   la ventana de Brook, y acá el síntoma se veía medido: la cuenta y el bump
   son DOS cajas con doble filete vino, y sus 20px de ritmo quedaban dentro del
   recuadro, así que los dos marcos terminaban a **6px** uno del otro mientras
   por dentro les sobraba espacio. Con el aire por fuera, los 40px de separación
   entre secciones se ven donde tienen que verse.

   Selector (0,3,0) —clase repetida— para ganarle al `:is()` del ritmo, que pesa
   (0,2,1) por su argumento `.wrap--reading.section > article`. Se compara el
   número de clases antes que el de elementos: contar, no confiar en el orden
   del archivo. */
.bk-cart .bk-cart-cuenta.bk-cart-cuenta {
  margin-block: var(--sec);
}

/* El padding SÍ es compartido: es la medida del papel, no del carrito. Estaba
   escrito dentro del selector de arriba, así que la cuenta del checkout se
   quedaba con los 20px de abajo del componente y las dos cajas no medían lo
   mismo (pedido de Ignacio, 27-08: que sean exactamente iguales).

   El `margin-block` no se comparte, y es a propósito: en el carrito existe
   porque el RITMO VERTICAL ÚNICO pinta su aire por dentro del marco, mientras
   que en el checkout la separación entre secciones la pone el `gap` de la
   grilla de `.bk-checkout`. Darle margen ahí sumaría 20px que nadie pidió. */
.bk-cuenta.bk-cuenta.bk-cuenta {
  padding: 22px 18px 14px;
}

/* El rótulo de la cuenta, más chico y en vino (pedido de Ignacio, 26-08).
   El componente ya declara el vino, pero acá bajaba a 10px sobre un marco de
   18px de padding y quedaba pesado; y sobre todo se veía igual de oscuro que
   el nombre del producto que va justo debajo. Con 9px y el vino explícito, el
   rótulo se lee como lo que es: el encabezado del papel, no un renglón.

   Va con la clase repetida —(0,3,0)— porque `product.css` declara un
   `.eyebrow.eyebrow` global que carga después y le ganaría por orden a un
   selector de la misma especificidad. Es el mismo bug de cascada que ya mordió
   con los testimonios y con el puente. */
.bk-cuenta .carta-filete.carta-filete {
  color: var(--wine);
  font-size: 9px;
  letter-spacing: .2em;
}

/* ---------- Renglones, total y envío ----------
   El marcado de la cuenta —lista, renglón, miniatura, nombre, insignia de
   ahorro, importe, total y línea de envío— se promovió a `components.css`
   como `.cuenta-*` el 26-08, cuando el resumen del checkout pasó a dibujarse
   con la misma pieza. Son el mismo objeto en dos pasos del mismo recorrido y
   no pueden vivir en la hoja de una sola de las dos páginas: es la trampa que
   este proyecto ya pisó dieciocho veces.

   Acá queda solo lo que es de ESTA página. */

/* Basurero en vez de la palabra «quitar» (pedido de Ignacio, 26-08).

   44x44 de área táctil —el mínimo— con el icono a 17px adentro: quitar por
   error un producto que se quería comprar es la peor forma de perder una
   venta, así que el objetivo NO es que sea fácil de tocar sino que sea fácil
   de tocar *a propósito*. Por eso el icono es chico, va en cacao y no en
   vino, y solo se tiñe de vino al pasar por encima o al enfocarlo con teclado.

   Sin texto visible, así que el nombre accesible lo pone `aria-label` en el
   marcado, con el producto adentro. */
.bk-cuenta .bk-cart-quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--cacao);
  text-decoration: none;
}

.bk-cuenta .bk-cart-quitar svg { width: 17px; height: 17px; display: block; }

.bk-cuenta .bk-cart-quitar:hover,
.bk-cuenta .bk-cart-quitar:focus-visible { color: var(--wine); }

/* El ornamento de cierre no lleva el margen de 14px que tiene en la ficha: en
   las dos cuentas el elemento anterior es el cupón, que ya trae 44px de alto
   táctil. Vale para el carrito y para el resumen del checkout. */
.bk-cart-cuenta .carta-pie,
.bk-cuenta .carta-pie { margin-top: 2px; }

/* ---------- Te puede interesar ----------
   Ocupa el lugar del order bump, que el 26-08 se movió al checkout. Usa la
   tarjeta y la grilla de la colección (`.pcard`, `.col-grid`, ambas en
   components.css) sin inventar una pieza nueva: la compradora ya sabe leerlas,
   y una tarjeta propia acá sería la copia número dieciocho de un componente
   compartido.

   Los botones van en contorno y no en vino sólido: en esta pantalla lo único
   sólido tiene que ser «Ir a pagar». */

.bk-cart-sugeridos .eyebrow {
  text-align: center;
  display: block;
  margin-bottom: 12px;
}

.bk-cart-sugeridos .col-grid { margin: 0; }

/* ---------- Cierre ----------
   La garantía exactamente como en la ficha: `.sello--linea`, hoy en
   components.css. */

/* Sin aire propio arriba (pedido de Ignacio, 26-08). El sello cierra el bloque
   de sugerencias que viene justo encima y no abre una sección nueva, así que
   los 10px del ritmo lo despegaban de lo que remata. Abajo sí conserva el
   suyo: lo que sigue es la barra de pago, y ahí la separación sí hace falta.

   Selector (0,3,0) —clase repetida— para ganarle al `:is()` del RITMO VERTICAL
   ÚNICO, que pesa (0,2,1). Basta con (0,3,0) porque el cierre NO es el primer
   ni el último hijo de `.bk-cart` —cierra la barra de pago—, así que quien le
   pone el padding es la regla general y no las de `:first-child`/`:last-child`,
   que suman una clase más. Contar, no confiar en el orden del archivo. */
.bk-cart .bk-cart-cierre.bk-cart-cierre { padding-top: 0; }

.bk-cart .bk-cart-seguir {
  text-align: center;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.bk-cart .bk-cart-seguir a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cacao);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Barra de pago ----------
   Pegajosa: el CTA no se pierde nunca, aunque el bump alargue la página.

   El sangrado lateral se calcula contra el `.wrap` de la página —`--edge` más
   lo que sobre a cada lado de la columna de 740px— para que la barra llegue a
   los dos bordes de la pantalla sin que el botón se despegue de la columna. */
.bk-cart-pagar {
  position: sticky;
  bottom: 0;
  /* Las insignias «Ahorras X USD» de las tarjetas sugeridas son absolutas con
     `z-index: 1`, así que le ganaban a esta barra —posicionada pero en `auto`—
     y se montaban encima del botón de pago. Mismo valor que las otras dos
     barras fijas del sitio (colección y ficha), y por debajo del header (50)
     y de los flotantes (55). */
  z-index: 5;
  margin-top: 18px;
  margin-inline: calc(var(--edge) * -1);
  background: var(--papel);
  border-top: 1px solid rgba(121, 87, 87, .3);
  box-shadow: 0 -8px 24px -12px rgba(43, 43, 43, .3);
  padding: 12px var(--edge) 14px;
}

.bk-cart-pagar .btn { min-height: 54px; font-size: 16.5px; }

.bk-cart-pagar p {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cacao);
  margin: 7px 0 0;
}

@media (min-width: 760px) {
  /* En escritorio deja de ser barra y pasa a ser el cierre de la columna: una
     franja pegada al borde inferior en una columna de 740px se lee como un
     aviso del navegador, no como el botón de la página. */
  .bk-cart-pagar {
    position: static;
    margin-inline: 0;
    box-shadow: none;
    border-top: 0;
    padding-inline: 0;
    background: none;
  }

  /* ⚠️ El titular de «gracias» NO se puede meter acá aunque sea el mismo caso:
     su regla base vive ~850 líneas MÁS ABAJO en este archivo y pesa lo mismo
     (0,1,1), así que ganaría por orden de declaración y esta media query no
     haría nada. Probado y medido: a 1280px seguía saliendo en 30px. Va en
     `escritorio.css`, que carga última. */
  .bk-cart-head h1 { font-size: 36px; }
  .bk-cuenta.bk-cuenta.bk-cuenta { padding: 26px 26px 18px; }
}

/* ============================================================================
   CHECKOUT — «La Carta» (recompuesto 26-08)
   ----------------------------------------------------------------------------
   Pedido de Ignacio: «componer la página de checkout; que tenga todos los
   componentes, CSS, y que adquiera el estilo visual definido de marca».

   Lo que estaba pasando, medido y no estimado:

   1 · IDENTIDAD. El carrito se había recompuesto como «la cuenta» esa misma
       mañana y el checkout —el paso siguiente del MISMO recorrido— seguía
       mostrando el pedido como la tabla de WooCommerce: tres cajas blancas
       genéricas, sin miniatura, sin comparativo tachado, con un «× 1» colgando
       y un «Subtotal 34» encima de un «TOTAL 34». El único bloque con
       identidad de marca en toda la pantalla era el order bump. Ahora el
       resumen es la misma pieza que el carrito (`.carta-marco` + `.cuenta-*`,
       components.css) y la pantalla abre con la misma barra de pasos y el
       mismo titular en Young Serif.

   2 · ESPACIO Y ANCHO. La página arrastraba el defecto que el carrito ya había
       corregido y que estaba anotado como pendiente: `.section` en `page.php`
       más el ritmo del `<article>` y del `.entry` = **40px de aire muerto**,
       más los 18px propios de este envoltorio. Y `.bk-checkout-wrap` declaraba
       `padding-inline: var(--edge)` **sobre** el `--edge` que ya pone el
       `.wrap` de la página: 48px de margen lateral en un teléfono de 390px, o
       sea 279px de ancho útil en el paso donde entra la plata. Corregido: 327.

   3 · El envoltorio pintaba `--papel` y la textura de harina, que desde el
       23-08 los pone el `body`. Redundante y, encima, la banda terminaba 24px
       antes del borde a cada lado.

   La corrección del diagnóstico sigue en pie: el 69,6% de abandono NO es
   anomalía —el benchmark móvil de Baymard 2026 es 76-80% y Brooklyn es 95,64%
   móvil—, así que acá no hay que rescatar, hay que no estropear. Por eso la
   pantalla no gana adornos: gana claridad, ancho y coherencia.
   ========================================================================= */

/* Sin fondo, sin padding lateral y sin espacio vertical propios: el papel y la
   textura los pone el `body`, el `--edge` lo pone el `.wrap` de `page.php`, y
   el aire de sección lo pone el RITMO VERTICAL ÚNICO de components.css.

   ⚠️ El que está en las listas del ritmo es `.bk-checkout-wrap` y NO
   `.bk-checkout` (el `<form>`), a propósito: los hijos que deben respirar como
   secciones son el encabezado y el formulario. Adentro del formulario el
   espacio lo pone su propia grilla, así el ritmo no cae DENTRO de las cajas
   con borde —que es el defecto que la cuenta del carrito tuvo que corregir con
   selectores de clase repetida. */
.bk-checkout-wrap {
  color: var(--ink);
  /* Misma columna que el carrito: son la misma pieza en dos pasos y no tienen
     por qué medir distinto. `--ancho` es lo que alinea a los componentes
     compartidos que viven acá adentro. */
  --ancho: var(--reading);
  max-width: var(--reading);
  margin-inline: auto;
}

/* ---------- Encabezado ----------
   Igual que el del carrito, con el paso 2 activo. Sin espacio vertical propio:
   el aire contra el header ya lo ponen el `.wrap` y las migas, y los 20px del
   ritmo lo despegaban del bloque que titula.

   ⚠️ Selector (0,4,0) —las DOS clases repetidas—. No basta (0,3,0): el
   encabezado es el PRIMER hijo, así que quien le pone el `padding-top` no es
   la regla general del ritmo (0,2,1) sino la de `:is(…) > :first-child`, que
   suma otra clase hasta (0,3,1). Es exactamente la misma cuenta que hubo que
   hacer en el carrito. Contar, no confiar en el orden del archivo. */
.bk-checkout-wrap.bk-checkout-wrap > .bk-checkout-head.bk-checkout-head { padding-block: 0; }

.bk-checkout-head { text-align: center; }

.bk-checkout-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.08;
  margin: 12px 0 0;
}

/* ---------- El formulario ----------
   Una sola columna con el resumen ARRIBA: saber qué se compra y cuánto cuesta
   antes de que pidan datos. La separación entre secciones la pone la grilla y
   no el ritmo, porque estas secciones son cajas con borde: con el ritmo el
   aire se pintaba adentro del recuadro. */
.bk-checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sec-borde);
  margin: 0;
}

/* Las dos secciones son marcos de «La Carta» (`.carta-marco`, components.css):
   papel cálido, harina y doble filete vino. Acá solo se les da el aire de los
   campos; todo lo visual lo pone el componente compartido.

   Antes eran dos rectángulos blancos con un hilo gris — correctos y de
   cualquier tienda. El carrito, que es el paso anterior del mismo recorrido,
   presenta el pedido dentro de este marco, y la ficha presenta ahí «Las
   recetas»: el checkout era la única pantalla de la compra sin identidad. */
.bk-checkout-datos,
.bk-checkout-pago {
  padding: 20px 16px 18px;
}

/* El rótulo dentro del marco necesita aire por debajo; el resto lo pone
   `.carta-filete`. */
.bk-checkout .carta-filete { margin-bottom: 16px; }

/*
 * WooCommerce imprime su propio «Detalles de facturación» dentro de la sección
 * que ya titulamos «Tus datos». Dos encabezados seguidos diciendo lo mismo
 * ocupan pantalla y confunden sobre si son dos pasos distintos.
 */
.bk-checkout-datos .woocommerce-billing-fields > h3,
.bk-checkout-datos #order_review_heading,
.bk-checkout-datos .woocommerce-additional-fields > h3 { display: none; }

/* ---------- Order bump ----------
   El bloque es `.bk-upsell`, el mismo componente de la ficha (components.css).
   Acá solo se le da el aire que necesita entre los datos y las pasarelas.

   `margin-inline: 0` porque el componente trae `var(--pad)`, que es un token de
   la ficha de producto y fuera de ella no existe: sin esto el marco se salía de
   la columna del checkout. */
.bk-upsell--checkout {
  margin-inline: 0;
  margin-block: 0;
}

/* ---------- Campos ----------

   Recompuestos el 27-08 a pedido de Ignacio: «la tabla de datos no va acorde a
   la línea visual, tiene textos superpuestos, textos más grandes que otros,
   espacios más grandes que otros. Debe verse sutil, elegante y simétrico».

   Las tres cosas eran ciertas y las tres tenían causa distinta, todas fuera de
   este archivo:

     · **Superpuestos** — la ayuda de cada campo es el globo azul de
       WooCommerce (`.woocommerce-input-wrapper span.description`), que
       `woocommerce.js` desliza sobre el campo al enfocarlo. Se resolvió en PHP
       sacando el nodo de donde el JS lo busca (`brooklyn_ayuda_fuera_del_globo`),
       porque `slideDown()` escribe `display` EN LÍNEA y le gana a toda hoja.
     · **Tamaños distintos** — la etiqueta del correo tenía su propia escala
       (mayúsculas, vino) y las otras cuatro otra. Ahora las cinco son el mismo
       objeto y lo único que distingue al correo es su marco.
     · **Colores distintos** — `.woocommerce form .form-row.woocommerce-invalid
       label { color: var(--wc-red) }` es (0,3,2) y le ganaba a la etiqueta del
       tema: tras un intento fallido, unas etiquetas quedaban rojas y otras no.
       El error se señala ahora SOLO en el borde, que es donde hay que mirar.

   ⚠️ TODO ESTE TRAMO VA CON LA CLASE REPETIDA, y no es manía: WooCommerce
   declara `.woocommerce form .form-row { padding: 3px; margin: 0 0 6px }`, que
   es (0,2,1), y le ganaba a `.bk-checkout .form-row` (0,2,0) — más elementos
   desempata cuando el número de clases empata.

   Contar la especificidad, no confiar en el orden del archivo. */

/* Un solo ritmo para las cinco filas. El aire entre dos campos es siempre el
   mismo número, venga de donde venga la fila: ese era el «espacios más grandes
   que otros» del reporte. */
.bk-checkout.bk-checkout .form-row { margin: 16px 0 0; padding: 0; }
.bk-checkout.bk-checkout .form-row:first-of-type { margin-top: 0; }

/* ---------- Etiquetas: las cinco iguales ---------- */
.bk-checkout.bk-checkout .form-row label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cacao);
}

/* El asterisco: presente pero callado. Es una marca de estado, no una palabra
   del formulario, así que va más chico que la etiqueta y sin peso. WooCommerce
   lo declara `font-weight:700` y `visibility:hidden` —(0,2,2)—, de ahí que haya
   que devolverle la visibilidad además del color. */
.bk-checkout.bk-checkout .form-row .required {
  visibility: visible;
  font-weight: 400;
  font-size: 9px;
  color: var(--wine);
  opacity: .75;
  text-decoration: none;
  vertical-align: 1px;
}

/* 🔕 «(opcional)» fuera.

   Va solo en el teléfono, y ponerlo al lado de la etiqueta es decirle a todo
   el mundo que puede saltárselo. La ausencia del asterisco ya es la señal para
   quien la busca; el motivo para darlo lo pone `.bk-ayuda` debajo del campo.
   Pedido de Ignacio: «hazlo sutil, para que la gente igual coloque su teléfono». */
.bk-checkout.bk-checkout .form-row .optional { display: none; }

/* ---------- Campos ---------- */
.bk-checkout.bk-checkout .input-text,
.bk-checkout.bk-checkout select {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(121, 87, 87, .34);
  background: var(--white);
  color: var(--ink);
  padding: 0 13px;
  font-family: var(--body);
  /* 16px exactos: por debajo, iOS hace zoom al enfocar y descuadra el paso más
     delicado del sitio. Con 95,64% de tráfico móvil no es un detalle. */
  font-size: 16px;
  line-height: normal;
  box-sizing: border-box;
  border-radius: var(--r-campo);
}

.bk-checkout.bk-checkout select { padding-right: 38px; }

.bk-checkout.bk-checkout .input-text:focus,
.bk-checkout.bk-checkout select:focus {
  outline: 2px solid var(--wine);
  outline-offset: -2px;
}

/* El error se dice en el borde y en ningún otro lado. Dos pistas de error
   —borde rojo y etiqueta roja— sobre campos que la compradora ni tocó se leen
   como que el formulario está roto. */
.bk-checkout.bk-checkout .woocommerce-invalid .input-text,
.bk-checkout.bk-checkout .woocommerce-invalid select {
  border-color: var(--wine);
  border-width: 1.5px;
}

.bk-checkout.bk-checkout .form-row.woocommerce-invalid label { color: var(--cacao); }

/* Y el ✓ verde de WooCommerce tampoco: `--wc-green` no está en la paleta, y un
   borde verde al lado de uno vino es la pantalla del dinero cambiando de
   sistema de color a mitad de formulario. */
.bk-checkout.bk-checkout .woocommerce-validated .input-text,
.bk-checkout.bk-checkout .woocommerce-validated select { border-color: var(--sage); }

/* ---------- Ayuda bajo el campo ----------
   Es el reemplazo del globo azul. Va SIEMPRE visible y en el flujo, así que no
   puede taparse con nada. Mismo cuerpo que la etiqueta para que la fila entera
   se lea como un solo objeto. */
.bk-checkout.bk-checkout .bk-ayuda {
  display: block;
  margin: 7px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--cacao);
}

/* Por si alguna descripción se escapa del filtro de PHP: nunca globo azul. */
.bk-checkout.bk-checkout .form-row .woocommerce-input-wrapper .description {
  display: block;
  position: static;
  margin: 7px 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--cacao);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
}

.bk-checkout.bk-checkout .form-row .woocommerce-input-wrapper .description::before { display: none; }

/* 🔴 WooCommerce FLOTA los campos de nombre y apellido —`.woocommerce form
   .form-row-first { float: left }`, (0,2,1)— y el tema los coloca con
   `inline-block`. Las dos cosas a la vez no se llevan: `float` gana, y el campo
   siguiente NO baja, porque el filtro de campos le cambia las clases al correo
   y de paso le quita el `form-row-wide` que traía el `clear: both`.

   Resultado, visible en pantalla a 390 y a 1280: **la tarjeta del correo
   arrancaba su recuadro a la altura de «Nombre»**, envolviendo los dos campos
   de arriba — o sea el borde vino del campo más importante del checkout
   encerraba tres campos en vez de uno.

   Se apaga el float y la fila la arma `inline-block`, que es lo que el tema ya
   escribió. Clase repetida para llegar a (0,3,0). */
.bk-checkout.bk-checkout .form-row-first,
.bk-checkout.bk-checkout .form-row-last {
  float: none;
  width: auto;
}

/* Nombre y apellido comparten fila; el resto va a ancho completo.

   El corte es 380px y no un breakpoint del sitio: por debajo de eso, dos campos
   de 16px de cuerpo en media columna dejan de caber sin cortar el placeholder.
   `--sep-campos` es la mitad exacta del hueco, para que la resta del ancho y el
   margen del segundo no puedan desincronizarse. */
@media (min-width: 380px) {
  .bk-checkout.bk-checkout #billing_first_name_field,
  .bk-checkout.bk-checkout #billing_last_name_field {
    --sep-campos: 5px;
    display: inline-block;
    width: calc(50% - var(--sep-campos));
    vertical-align: top;
  }

  /* `margin-top: 0` en el segundo: los dos campos van uno al lado del otro,
     así que el aire de 16px que separa una fila de la siguiente lo empujaba
     16px más abajo que su compañero — las dos etiquetas quedaban a distinta
     altura en la misma fila. */
  .bk-checkout.bk-checkout #billing_last_name_field {
    margin-left: calc(var(--sep-campos) * 2);
    margin-top: 0;
  }
}

/* ---------- El correo ES el producto ----------

   En una compra digital el correo no es un dato de contacto: es la dirección de
   entrega. Si está mal escrito no llega nada, y esa es la causa de soporte más
   cara del negocio.

   Lo que lo distingue es el MARCO, no la tipografía: la etiqueta, el cuerpo y
   la ayuda son exactamente los de los otros cuatro campos. Antes se distinguía
   además con mayúsculas, color vino, otro alto de campo y otra familia dentro
   del input — cuatro diferencias apiladas para decir una sola cosa, y era lo
   que rompía la simetría de la columna. */

.bk-checkout.bk-checkout .bk-campo-correo {
  /* ⚠️ El aire de una caja CON MARCO va por fuera y NO se descuenta el padding.
     Antes eran 4px, compensando ópticamente los 13px del marco para que el
     hueco al TEXTO fuera 16 — pero lo que se lee no es el texto, es el
     recuadro: el borde vino quedaba a 4px del campo de arriba y del de abajo,
     o sea pegado. Es la misma corrección ya hecha en el carrito y en «gracias»
     con `.carta-marco`. Pedido de Ignacio. */
  margin-top: 18px;
  padding: 13px;
  /* ⚠️ Blanco y no papel: la sección entera pasó a ser un `.carta-marco`, que
     YA es papel. Papel sobre papel dejaba la tarjeta del campo más importante
     del checkout distinguiéndose solo por un hilo. Ahora se recorta contra el
     fondo, que es todo lo que esta tarjeta tiene que hacer. */
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(110, 44, 52, .28);
  border-left: 3px solid var(--wine);
  border-radius: var(--r-caja);
}

.bk-checkout.bk-checkout .bk-campo-correo label { color: var(--wine); }

.bk-checkout.bk-checkout .bk-campo-correo .input-text {
  border-color: rgba(110, 44, 52, .55);
}

/* El mismo aire del otro lado, medido desde el BORDE del marco. */
.bk-checkout.bk-checkout .bk-campo-correo + .form-row { margin-top: 18px; }

.bk-checkout.bk-checkout .bk-campo-correo .bk-ayuda { color: var(--ink); }


/* ---------- Pasarelas ----------
   Las dos como iguales. MercadoPago primero porque, de 292 pedidos, 158 (54,1%)
   caen en el bucket sin identificar que casi con certeza es MercadoPago: es
   probablemente el método dominante, no el secundario. */

/* 🔴 PRIMERO HAY QUE APAGAR EL MORADO DE WOOCOMMERCE.

   `woocommerce.css` pinta todo el bloque de pago con su propia paleta y lo hace
   con selectores de ID —(1,2,1)—, así que le gana a cualquier regla del tema
   por clases por más abajo que esté en el archivo:

     · `#payment`            → fondo `rgba(129,110,153,.14)` y radio de 5px
     · `#payment ul.payment_methods` → `padding: 1em` y filete inferior morado
     · `#payment div.form-row`       → `padding: 1em`
     · `#payment div.payment_box`    → fondo `#dcd7e2`, radio 2px y un `::before`
                                       que dibuja el triangulito morado

   Hoy no se ve casi nada porque no hay pasarelas conectadas: solo el bloque
   lavanda detrás del botón. **El día que entren PayPal y MercadoPago, las dos
   filas de método y su caja de detalle salen en morado**, en la pantalla del
   dinero y con el lanzamiento encima. Es el mismo bug que ya mordió con los
   botones de descarga de «Mi cuenta» (§10.u.6): se pierde por especificidad,
   no por orden.

   La clase repetida sube el selector a (1,2,0)/(1,3,1) y le gana sin
   `!important`. Contar, no confiar en el orden del archivo. */
.bk-checkout.bk-checkout #payment {
  background: none;
  border-radius: var(--r-caja);
}

.bk-checkout.bk-checkout #payment ul.payment_methods {
  padding: 0;
  margin: 0;
  border-bottom: 0;
  list-style: none;
}

.bk-checkout.bk-checkout #payment ul.payment_methods li { line-height: inherit; }
.bk-checkout.bk-checkout #payment div.form-row { padding: 0; }

/* El `<div class="form-row place-order">` es el que envuelve la política, el
   aviso de privacidad y el botón. Sin esto queda pegado a la lista de métodos. */
.bk-checkout .place-order { margin-top: 18px; }

/* 🔴 CADA MÉTODO ES UNA TARJETA — y armarla tiene dos trampas encadenadas.

   Este bloque se rehízo el 27-08, la primera vez que se pudo VER: sin pasarelas
   conectadas WooCommerce no dibuja ni un método, así que en todo el proyecto no
   hubo nunca nada que mirar acá. Al encender dos pasarelas de prueba salió el
   defecto: **el radio quedaba solo en una línea y el nombre del método debajo,
   en una caja gris a ancho completo.**

   ⚠️ TRAMPA 1 — el marcado de WooCommerce no es el que uno supondría:

     <li class="wc_payment_method">
       <input type="radio">              ← HERMANO del label, no hijo
       <label for="…">MercadoPago</label>
       <div class="payment_box">…</div>  ← hermano también, se muestra/oculta
     </li>

   El CSS anterior hacía `label { display: flex; gap: 12px }` dando por hecho que
   el radio vivía adentro. Con el radio afuera, `flex` no lo alcanzaba y los tres
   hijos del `<li>` se apilaban como bloques.

   La tarjeta la dibuja el `<label>` con `input:checked + label`: un selector de
   hermanos de toda la vida, que no depende de `:has()` y funciona en cualquier
   navegador que pueda abrir esta página. El radio va posicionado dentro de esa
   caja —fuera del flujo pero encima de ella—, y el detalle se cose por debajo
   con el borde de arriba quitado, para que los dos se lean como una tarjeta.

   ⚠️ NOTA DE MÉTODO, porque casi queda escrita al revés: la primera versión
   usaba `li:has(input:checked)` y el arnés dijo que **no repintaba** al cambiar
   de método —`matches()` daba el valor nuevo y `getComputedStyle` el viejo—.
   Era mentira del arnés: **dentro de un iframe en Chrome headless el reloj de
   animación está congelado, así que una `transition` nunca avanza y la
   propiedad se queda en su valor inicial para siempre**. Se comprobó midiendo
   `box-shadow`, que no está en la lista de transiciones: ese sí cambiaba al
   instante, y apagando `transition` con un `<style>` inyectado todo lo demás
   también. Es la misma limitación ya anotada el 23-08 con el header pegajoso.
   Si mañana aparece otro «el estilo no se actualiza» en este arnés, la primera
   pregunta es si esa propiedad tiene `transition`. */
.bk-checkout .wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* El `<li>` deja de ser la tarjeta y pasa a ser solo el marco de referencia del
   radio: sin fondo, sin borde y sin padding. */
.bk-checkout.bk-checkout .wc_payment_method {
  position: relative;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  list-style: none;
}

/* El radio, dentro de la caja del label pero fuera de su flujo, para que el
   `+ label` siga siendo hermano directo del input. `top` fijo y no centrado:
   centrarlo contra el `<li>` lo bajaría a la mitad de la tarjeta cuando el
   detalle está desplegado. 15px lo deja alineado con la primera línea. */
.bk-checkout.bk-checkout .wc_payment_method > input[type="radio"] {
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0;
  width: 20px;
  height: 20px;
  accent-color: var(--wine);
  z-index: 1;
}

.bk-checkout.bk-checkout .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  /* 47px a la izquierda = 15 del radio + 20 de ancho + 12 de aire. */
  padding: 14px 14px 14px 47px;
  min-height: 50px;
  background: rgba(110, 44, 52, .05);
  border: 0;
  border-radius: var(--r-campo);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color .15s ease, background-color .15s ease;
}

/* La elegida se marca en el borde y en el fondo, no solo en el punto del radio:
   en un teléfono, un círculo de 20px es una señal chica para la única decisión
   que queda antes de pagar.

   El segundo filete va por `box-shadow: inset` y no subiendo el `border-width`:
   engordar el borde movería la caja un píxel y dejaría un escalón contra el
   detalle que va cosido debajo. */
.bk-checkout.bk-checkout .wc_payment_method > input:checked + label {
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--wine), var(--borde-caja);
}

/* 🔴 …PERO ESE ANILLO SOLO ENVUELVE AL `<label>`, Y EL MÉTODO NO ES EL LABEL.

   La descripción de la pasarela (`.payment_box`) es HERMANA del label, no hija,
   así que quedaba FUERA del contorno: al elegir MercadoPago —el único que hoy
   trae descripción— el marco vino cerraba a los 52px y las tres líneas de
   «Tarjeta de crédito o débito, hasta 2 cuotas» colgaban debajo, sueltas.
   Medido: `<li>` de 121px de alto, anillo de 52. El anillo cubría el 43% de la
   tarjeta. Lo levantó Ignacio con dos capturas.

   El anillo se muda al `<li>`, que es quien contiene las dos mitades. Dos
   detalles que no son cosméticos:

   ⚠️ Va en `outline` y NO en `box-shadow: inset`. Una sombra interior se pinta
   ENCIMA del fondo del elemento pero DEBAJO de sus descendientes, así que el
   fondo blanco del `.payment_box` —que ocupa el ancho completo— se comería el
   anillo por los costados y por abajo. El `outline` se pinta al final, sobre
   los hijos. Con `outline-offset: -2px` cae exactamente en el borde, sin mover
   la caja ni un píxel: elegir un método no debe reacomodar la lista.

   ⚠️ `:has()` acá es una MEJORA, no un requisito: la regla de arriba sigue
   siendo la que dibuja la tarjeta en un navegador que no lo entienda, y ahí el
   resultado es el de hoy —correcto para las pasarelas sin descripción—. Donde
   sí se entiende, el anillo del label se apaga para no dibujarlo dos veces. */
.bk-checkout.bk-checkout .wc_payment_method:has(> input:checked) {
  background: var(--white);
  border-radius: var(--r-campo);
  outline: 2px solid var(--wine);
  outline-offset: -2px;
  box-shadow: var(--borde-caja);
}

.bk-checkout.bk-checkout .wc_payment_method:has(> input:checked) > input:checked + label {
  background: none;
  box-shadow: none;
}

/* El logotipo que algunas pasarelas meten dentro de la etiqueta: se ancla a la
   derecha para que los nombres queden alineados entre sí, y con alto acotado
   para que una imagen grande no estire la fila. */
.bk-checkout .wc_payment_method > label img {
  max-height: 22px;
  width: auto;
  margin: 0 0 0 auto;
  display: block;
}

/* El logotipo de marca que pone el tema (`brooklyn_logo_pasarela()`), a la
   IZQUIERDA del nombre y no anclado a la derecha como el de las pasarelas.

   Va con `order: -1` porque WooCommerce imprime el icono DESPUÉS del título
   dentro del `<label>` (`get_title() . get_icon()`), y acá el orden de lectura
   correcto es marca → nombre: en un teléfono el logotipo se reconoce antes que
   la palabra. Es decorativo declarado (`alt=""` + `aria-hidden`), así que
   reordenarlo visualmente no le cambia nada a un lector de pantalla — el
   nombre del método sigue siendo el texto del label.

   26px y no 22: en esta pantalla el logotipo ES el contenido, ahora que la
   banda de confianza salió de arriba del bloque. */
.bk-checkout .wc_payment_method > label img.bk-logo-pago {
  order: -1;
  flex: none;
  margin: 0;
}

/* ⚠️ El tamaño va aparte y con `!important` a propósito, y no es capricho.
   `mp-plugins-components.min.css` —que MercadoPago encola SOLO en el
   checkout— declara, anidado dentro de `.payment_method_woo-mercado-pago-*`:

       label img { height: var(--mp-icon-size) !important;   (32px)
                   max-width: var(--mp-icon-size) !important;
                   order: 2 }

   `!important` gana sobre cualquier especificidad, así que sin esto el
   logotipo de la fila de MercadoPago sale a 32px y el de PayPal a 26: dos
   marcas de distinto tamaño en la misma lista, en la pantalla del dinero.
   Medido con el CSS de MercadoPago encolado: 32x32 contra 26x26.

   El `order` NO necesita `!important` —el suyo va sin él y esta regla tiene
   más clases—, así que el logotipo se queda a la izquierda igual. */
.bk-checkout .wc_payment_method > label img.bk-logo-pago {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
}

/* El detalle del método: la mitad de abajo de la misma tarjeta. Se cose al
   label quitándole el borde de arriba y subiéndolo un píxel, y se separa con un
   punteado —el gesto de «La Carta» que ya usan la cuenta y la carta de recetas—.

   ⚠️ Lleva el `#payment` a propósito: `woocommerce.css` declara
   `#payment div.payment_box` —(1,2,1)— con fondo `#dcd7e2`, radio y un
   `::before` que dibuja el triangulito morado. Una regla por clases, por más
   abajo del archivo que esté, no le llega: hay que empatar el ID. Contar la
   especificidad, no confiar en el orden. */
.bk-checkout.bk-checkout #payment .wc_payment_method > .payment_box {
  margin: -1px 0 0;
  padding: 12px 14px 14px;
  background: var(--white);
  border: 0;
  border-radius: 0 0 var(--r-campo) var(--r-campo);
  box-shadow: none;
  font-family: var(--body);
  font-size: 14px;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
}

/* Con el anillo en el `<li>` ya no hay borde de label al que coserse: el -1px
   de arriba dejaría la descripción montada un píxel sobre la etiqueta. */
.bk-checkout.bk-checkout #payment .wc_payment_method:has(> input:checked) > .payment_box {
  margin-top: 0;
  background: none;
}

.bk-checkout.bk-checkout #payment .wc_payment_method > .payment_box::before { display: none; }
.bk-checkout .payment_box p { margin: 0; }
.bk-checkout .payment_box p + p { margin-top: 8px; }

/* El aviso de «no hay métodos de pago disponibles».
   Hoy es lo que se ve en local, y lo que se vería en producción si una
   credencial vence: tiene que leerse como un aviso de la marca y no como un
   error crudo de WooCommerce, porque es la pantalla donde entra la plata.

   El fondo va en el `.woocommerce-info` —que es quien trae el estilo propio de
   WooCommerce— y NO en el `<li>` que lo contiene: pintando el `<li>` quedaban
   dos cajas, una arena por fuera y la blanca de WooCommerce por dentro. */
.bk-checkout .wc_payment_methods > li:not(.wc_payment_method) {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.bk-checkout .woocommerce-info,
.bk-checkout .woocommerce-notice--info {
  margin: 0;
  padding: 12px 14px;
  background: var(--sand);
  background-image: var(--mantel);
  border: 0;
  border-left: 3px solid var(--wine);
  color: var(--ink);
  font-size: 14px;
  line-height: var(--lh-texto);
  border-radius: var(--r-campo);
}

.bk-checkout .woocommerce-info::before,
.bk-checkout .woocommerce-notice--info::before { display: none; }

/* ---------- Política y botón ---------- */

.bk-checkout-politica {
  margin: 16px 0 10px;
  font-size: 13.5px;
  line-height: var(--lh-texto);
  font-weight: 500;
  color: var(--ink);
}

/* El botón de pago es EXACTAMENTE el «Ir a pagar» del carrito: misma forma,
   mismo alto, mismo cuerpo. Estaba en `border-radius: 0` mientras el CTA del
   paso anterior —y todos los `.btn` del sitio, que son pastilla por base— eran
   redondeados: el mismo botón cambiaba de forma al pasar de una pantalla a la
   otra dentro de la misma compra. */
.bk-checkout #place_order,
.bk-checkout .button.alt {
  width: 100%;
  min-height: 54px;
  border: 0;
  background: var(--wine);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 16.5px;
  cursor: pointer;
  border-radius: 999px;
  transition: background var(--t-base);
}

.bk-checkout #place_order:hover { background: var(--wine-dark); }

.bk-checkout .woocommerce-terms-and-conditions-wrapper,
.bk-checkout .woocommerce-privacy-policy-text {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: var(--lh-texto);
  color: var(--cacao);
  text-align: center;
}

.bk-checkout .woocommerce-privacy-policy-text p { margin: 0; }

/* ---------- Aviso legal, plegado ---------- */

.bk-checkout-legal {
  margin-top: 16px;
  background: var(--white);
  color: var(--ink);
  border-left: 3px solid var(--cacao);
  padding: 0 14px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

.bk-checkout-legal summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--tinta-2);
}

.bk-checkout-legal summary::-webkit-details-marker { display: none; }
.bk-checkout-legal summary span { color: var(--wine); font-family: var(--mono); }

.bk-checkout-legal p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
}

/* ---------- Cierre ----------
   La «Garantía de Brooklyn» y el aviso legal, fuera del formulario. El sello es
   el mismo componente compartido de la ficha y del carrito (`.sello--linea`),
   así que acá solo se coloca. El aviso legal va detrás: es letra chica y tiene
   que leerse como tal, pero después del argumento, no en lugar de él. */
.bk-checkout-cierre .sello--linea { margin: 0; }
.bk-checkout-cierre .bk-checkout-legal { margin-top: 14px; }

@media (min-width: 760px) {
  .bk-checkout-head h1 { font-size: 36px; }
  .bk-checkout-datos,
  .bk-checkout-pago { padding: 26px 26px 24px; }
}

/* ============================================================================
   REDISEÑO · Dirección A «La Carta» — gracias
   ----------------------------------------------------------------------------
   El orden es deliberado: primero se entrega, después se pide. El botón de
   descarga es el elemento más grande de la página y el único bloque vino sólido;
   el cross-sell, las redes y la creación de cuenta viven todos debajo.
   ========================================================================= */

/* ⚠️ Sin `padding` propio: `.bk-gracias` está en la lista del RITMO VERTICAL
   ÚNICO, así que el aire entre bloques lo pone el ritmo. Los 26/32px que había
   acá se sumaban a él, y el `var(--edge)` lateral se sumaba al `--edge` que ya
   pone el `.wrap` — 48px de margen en un teléfono de 390px, el mismo defecto
   que ya se corrigió en el carrito y en el checkout.

   Desde el 27-08 esta página tampoco lleva `.section` en `page.php`, que era la
   tercera capa. Sin fondo propio: lo pone el `body` (23-08). */
.bk-gracias {
  color: var(--ink);
  /* Misma columna que el carrito y el checkout: son la misma pieza en tres
     pasos y no tienen por qué medir distinto. `--ancho` es lo que alinea a los
     componentes compartidos que viven acá adentro. */
  --ancho: var(--reading);
  max-width: var(--reading);
  margin-inline: auto;
}

/* La cabecera no lleva ritmo propio: la barra de pasos, el eyebrow y el titular
   son un solo bloque. Misma cuenta de especificidad que en el carrito y en el
   checkout — (0,3,0) contra el (0,2,1) del `:is()` del ritmo. */
.bk-gracias.bk-gracias > .bk-gracias-head.bk-gracias-head { padding-block: 0; }

/* 🔴 Los bloques enmarcados de esta página necesitan el aire POR FUERA.

   El RITMO VERTICAL ÚNICO va en `padding` —a propósito, para que las franjas de
   color se toquen entre ellas—, pero acá cuatro de los cinco bloques son cajas
   CON MARCO: el vino sólido de la entrega y los tres `.carta-marco`. Sus 10px
   de ritmo se pintaban DENTRO del recuadro, así que **los marcos terminaban
   pegados uno al otro** mientras por dentro les sobraba espacio. Medido en
   pantalla: 0px entre el bloque de la entrega y «Qué pasa ahora».

   Es exactamente la misma corrección que ya se hizo en el carrito con la cuenta
   y el bump, y antes en el 404 y en la ventana de Brook.

   Selector (0,3,0) —clase repetida— para ganarle al `:is()` del ritmo, que pesa
   (0,2,1) por su argumento `.wrap--reading.section > article`. Se compara el
   número de clases antes que el de elementos. */
.bk-gracias .bk-entrega.bk-entrega,
.bk-gracias .bk-pasa.bk-pasa,
.bk-gracias .bk-gracias-fallo-caja.bk-gracias-fallo-caja,
.bk-gracias .bk-gracias-sinpedido.bk-gracias-sinpedido,
.bk-gracias .bk-gracias-legal.bk-gracias-legal {
  margin-block: var(--sec);
}

/* ⚠️ Y hay que RE-DECLARAR el padding propio de cada caja, no basta con
   moverlo a margen: el `padding-block` del ritmo pesa (0,2,1) y le gana al
   `padding` en taquigrafía de `.carta-marco` (0,1,0), así que sin esto el
   marco se quedaba con los 10px del ritmo en vez de sus 22/20 y el rótulo
   nacía pegado al filete de arriba. Se vio en pantalla al primer intento. */
/* ⚠️ Las cajas de las OTRAS TRES RAMAS —pago fallido, pago en revisión y pedido
   no encontrado— estaban fuera de estas dos reglas y arrastraban el defecto
   entero: medido, se quedaban con los 20px planos del ritmo en vez de sus 22/20,
   y su aire caía DENTRO del recuadro, así que la caja terminaba pegada a lo que
   viniera después (0px contra el bloque de apoyo en la rama sin pedido). Son el
   mismo objeto que las de la rama de éxito y ahora se espacian igual. */
.bk-gracias .bk-pasa.bk-pasa,
.bk-gracias .bk-gracias-fallo-caja.bk-gracias-fallo-caja,
.bk-gracias .bk-gracias-sinpedido.bk-gracias-sinpedido,
.bk-gracias .bk-gracias-legal.bk-gracias-legal { padding-block: 22px 20px; }

/* 🔴 La entrega tomaba `padding: 16px` del componente mientras los otros dos
   bloques de la página son `.carta-marco` con `22px 18px 20px`. Los 2px de
   diferencia LATERAL no son un detalle: medido en pantalla, el rótulo «TU
   DESCARGA» arrancaba en 16 y el «QUÉ PASA AHORA» de la caja siguiente en 18,
   o sea el contenido de las tres cajas de la misma pantalla no compartía una
   sola vertical. Eso es literalmente «no hay una línea de página».

   Se iguala acá y no en el componente porque en «Mi cuenta» la entrega usa su
   variante compacta y convive con otras piezas. */
.bk-gracias .bk-entrega.bk-entrega { padding: 22px 18px 20px; }

.bk-gracias-head { text-align: center; }

/* ---------- El ritmo interno de la cabecera (01-09) ----------

   🔴 La cabecera abría con CINCO objetos y tres saltos que nadie había elegido
   en conjunto: **0 · 10 · 32 px**. Medido en pantalla antes de tocar nada.

   · Los **0** eran el peor: la barra de pasos terminaba en 156 y el eyebrow
     empezaba en 156. Y no son dos cosas distintas a la vista —«3 Descarga» y
     «LISTO, IGNACIO» van los dos en Fira Code, en `--cacao`, a 10 y 11,5px—,
     así que pegados se leen como un solo bloque de letra chica. Es la misma
     familia de defecto que ya obligó a numerar los pasos en el carrito, cuando
     las migas y la barra eran tipográficamente el mismo objeto.
   · Los **32** salían de SUMAR dos declaraciones que nadie había comparado: el
     `padding-bottom: 20px` del titular y el `margin-top: 12px` de los datos.
     Es el antipatrón que esta página ya tenía en otros tres lugares.

   Ahora la cabecera tiene una escala y se lee de una: **16 · 8 · 16**. El 8
   es más corto a propósito — el eyebrow y el titular son la misma frase partida
   en dos («Listo, Ignacio» / «Tus ebooks ya son tuyos»), así que van juntos; lo
   que se separa de verdad es la barra de pasos de arriba y el comprobante de
   abajo. */

/* ⚠️ El aire lo pone la BARRA, no el eyebrow: en las ramas de pago fallido, de
   pago en revisión y de pedido no encontrado no hay barra de pasos, y ahí un
   `margin-top` en el eyebrow abriría la pantalla con 16px de nada. */
.bk-gracias-head .bk-pasos.bk-pasos { margin-bottom: 16px; }

/* Clase repetida: `.entry p` es (0,1,1) y le gana al `.eyebrow` de `base.css`,
   así que sin esto el rótulo salía en cuerpo de 16px. */
.bk-gracias-head .eyebrow.eyebrow { margin: 0; }

/* 30px, el mismo titular del carrito —y 36 en escritorio, ver el bloque de
   760px—. Son los tres pasos del MISMO recorrido: el carrito abría en 30, el
   checkout en 30 y «gracias» en 28, o sea la misma pieza medía distinto según
   en qué paso estuviera la compradora.

   Sin `padding` propio: el aire va todo en `margin`, en un solo lugar por lado.
   Con las dos declaraciones repartidas nadie podía ver el ritmo leyendo el
   archivo, que es exactamente cómo se llegó a los 32px. */
.bk-gracias-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.08;
  margin: 8px 0 0;
  padding: 0;
  text-wrap: pretty;
}

/* Los datos del pedido: número, total, medio de pago y correo.

   En `--mono` y a escala chica porque son un comprobante, no una frase — el
   mismo tratamiento que el «USD» de la cuenta y que los comparativos tachados.
   Cada dato es un `<span>` de bloque para que en un teléfono no se partan por
   la mitad al envolver, que es justo lo que pasaría con un correo largo. */
.bk-gracias-datos.bk-gracias-datos {
  margin: 16px 0 0;
  font-family: var(--mono);
  /* 11,5px = `.72rem`, exactamente el mismo tamaño que las migas y que el
     eyebrow. Es el escalón de DATO del sitio y este bloque es un comprobante,
     así que corresponde. Lo que sobraba en la pantalla eran los intermedios:
     había cinco tamaños de mono entre 10 y 11,5 —10 · 10,5 · 11 · 11,5— y
     nadie distingue medio píxel. Quedan tres escalones con un rol cada uno:
     **10** los rótulos y marcadores, **10,5** la escala interna de la tarjeta
     vino, **11,5** los datos y la navegación. */
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--cacao);
}

.bk-gracias-datos span { display: block; word-break: break-word; }

/* ---------- La entrega ----------
   ⚠️ El componente `.bk-entrega*` ya NO vive acá: se promovió a
   `components.css` el 27-08, al usarlo por segunda vez en «Mi cuenta».
   Habría sido la vigésima aparición de la trampa del proyecto —CSS de
   componente compartido viviendo en la hoja de una sola página—, esta vez
   agravada: `cart.css` solo se carga en el carrito y el checkout, así que en
   la cuenta el bloque se habría dibujado SIN NINGÚN ESTILO.
   Lo único que queda acá es el aire propio de «gracias», más arriba. */

/* ---------- Qué pasa ahora ---------- */

/* Clase repetida: `.entry ol` y `.entry li` son (0,1,1) y le meterían a la
   lista el `padding-left: 20px` y las viñetas del contenido editorial. Es la
   misma colisión que obligó a scopear toda «la cuenta» bajo `.carta-marco`. */
/* 16px, el mismo salto que la cabecera usa entre objetos. Antes eran 14 aquí
   más 4 de `padding-top` en el primer renglón: dos declaraciones para un solo
   espacio, y el resultado —18— no coincidía con ningún otro valor de la
   página. */
.bk-pasa.bk-pasa ol { margin: 16px 0 0; padding: 0; list-style: none; }

.bk-pasa.bk-pasa li {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 11px 0;
  /* Punteado y no línea llena: es el separador de «La Carta», el mismo de los
     renglones de la cuenta y de las recetas de la ficha. */
  border-top: 1px dotted rgba(121, 87, 87, .4);
  font-size: 15.5px;
  line-height: var(--lh-texto);
  color: var(--ink);
  text-align: left;
}

/* El primer renglón no lleva punteado arriba, así que tampoco lleva el aire
   que ese punteado necesita: el espacio contra el rótulo lo pone el `ol`. */
.bk-pasa.bk-pasa li:first-child { border-top: 0; padding-top: 0; }
/* El numeral es un MARCADOR, no un dato: va en el escalón de 10px, el mismo del
   rótulo `.carta-filete` que encabeza esta misma caja. A 11px era el cuarto
   tamaño de mono de la pantalla y el único que no correspondía a ningún rol. */
.bk-pasa .num { font-family: var(--mono); font-size: 10px; color: var(--wine); flex: none; padding-top: 4px; }

/* ---------- Lo que imprime la pasarela ----------

   Contenedor del hook `woocommerce_thankyou_{medio_de_pago}`: instrucciones de
   transferencia, estado del pago, número de operación. Es HTML de terceros, así
   que acá no se decide su estructura, solo se le da la voz del sitio.

   El marco NO se redibuja: el bloque lleva `.carta-marco`, la misma pieza
   compartida del pedido en el carrito, de los datos del checkout y de «Las
   recetas» en la ficha. Copiarle los valores habría sido la vigésima aparición
   de la trampa del proyecto.

   ⚠️ El envoltorio solo existe si la pasarela imprimió algo — se decide en PHP
   con un búfer, no acá. Con las dos pasarelas de hoy, sin instrucciones
   configuradas, no se dibuja nada: un recuadro de papel con doble filete vino
   anunciando la nada sería peor que no tenerlo, justo en la pantalla que
   confirma la compra.

   Espaciado: las mismas dos reglas que los demás bloques enmarcados de esta
   página — el aire va POR FUERA (margin) y hay que RE-DECLARAR el padding, que
   si no se lo lleva el `padding-block` del RITMO VERTICAL ÚNICO, (0,2,1) contra
   el (0,1,0) de `.carta-marco`. */
.bk-gracias .bk-gracias-pasarela.bk-gracias-pasarela {
  margin-block: var(--sec);
  padding-block: 22px 20px;
}

/* La pasarela trae encabezados y listas propias. Sin esto caerían en las reglas
   editoriales de `.entry` —(0,1,1)— y se dibujarían como contenido de una
   página de texto, con otra escala que el resto de la pantalla. */
.bk-gracias-pasarela h2,
.bk-gracias-pasarela h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.bk-gracias-pasarela p,
.bk-gracias-pasarela li {
  font-size: 15.5px;
  line-height: var(--lh-texto);
  color: var(--ink);
  margin: 8px 0 0;
}

.bk-gracias-pasarela ul,
.bk-gracias-pasarela ol { margin: 8px 0 0; padding-left: 18px; list-style: disc; }

.bk-gracias-pasarela strong { font-weight: 500; }

/* ---------- Crear cuenta ----------

   Ya no es una sección con marco propio: vive DENTRO de «Qué pasa ahora», al
   final de la lista. Eran dos `.carta-marco` idénticos y consecutivos diciendo
   la misma cosa —el acceso no vence / acá vive tu acceso—, así que se unificó.

   Se separa de los pasos con el mismo punteado que separa los renglones de la
   cuenta y las recetas de la ficha, no con una línea llena: sigue siendo el
   mismo bloque, no otro.

   Y no lleva filete verde: `--sage` era el único color de ese lado de la paleta
   en todo el recorrido de compra, y §3.l lo clasifica como acento decorativo,
   nunca como marca estructural. */

/* Simétrico —14 arriba del punteado y 14 abajo—, igual que los renglones de la
   lista que continúa (11/11) y que los separadores de la cuenta. Antes eran 14
   y 16: la misma línea con distinto aire a cada lado, que a la vista deja el
   separador descentrado sin que se sepa por qué. */
.bk-pasa-cuenta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dotted rgba(121, 87, 87, .4);
  text-align: left;
}

/* Clase repetida: `.entry h3` es (0,1,1) y le gana a un (0,1,0), así que sin
   esto el titular volvía a la escala editorial de la página. */
.bk-pasa-cuenta.bk-pasa-cuenta h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
}

.bk-pasa-cuenta.bk-pasa-cuenta > p { margin: 8px 0 0; font-size: 15px; line-height: var(--lh-texto); color: var(--tinta-2); }


/* ---------- Legal, acá abierto ---------- */

/* La banda de arena con trama de mantel, que es el par que el sitio usa para lo
   que tiene que destacarse sobre el papel: «Qué recibes cuando pagas» en la
   ficha y «Acceso de por vida» en la carta de recetas.

   Acá es lo último de la pantalla y ahora es lo único que queda después de la
   entrega, así que sobre papel se leía como letra chica al pie. En arena se lee
   como una nota enmarcada, que es lo que es: la regla del material que la
   compradora acaba de recibir, dicha una vez y de frente.

   ⚠️ Cambiar el fondo obliga a revisar el color de TODO lo que vive adentro
   —es la regla de §3.l que este proyecto aprendió cinco veces—. Sobre arena:
   `--ink` da 10,94:1, `--cacao` 4,9:1 y `--wine` ~7,9:1, los tres pasan AA. El
   que NO puede quedarse es `--tinta-2`, que fue pensado para papel, así que el
   cuerpo pasa a `--ink`.

   Selector (0,3,0) para ganarle al fondo de `.carta-marco`, que es (0,1,0). */
.bk-gracias .bk-gracias-legal.bk-gracias-legal {
  background: var(--sand);
  background-image: var(--mantel);
}

/* Aire propio del bloque legal: `--sec` arriba (como los otros dos marcos) y
   `--sec-borde` abajo (el aire contra el footer, que es más largo a propósito).
   Va aparte de la regla compartida de arriba porque ahí solo se declara `--sec`
   por los dos lados.

   ⚠️ Los 30px de arriba (pedido de Ignacio, 31-08) BAJAN A 20. Eran la única
   excepción de la pantalla: tres cajas hermanas, del mismo objeto y del mismo
   ancho, separadas 20 · 20 · 30 sin nada que lo justificara. Si hay que
   distinguir el cierre legal del resto, la vía es su fondo de arena —que ya lo
   distingue— y no un salto de 10px que solo se lee como descuido.

   ⚠️ CUATRO clases, no tres: este bloque es el ÚLTIMO hijo de `.bk-gracias`,
   así que el que manda su `padding-bottom` no es el `:is()` del ritmo (0,2,1)
   sino su regla de `:last-child`, que suma una clase más y pesa (0,3,1). Con
   tres clases se empata en clases y gana el ritmo por el elemento: medido en
   pantalla, el padding inferior salía en 40px. Es la misma cuenta que ya
   obligó a cuatro clases en el 404 y en `.home-hero`. */
.bk-gracias .bk-gracias-legal.bk-gracias-legal.bk-gracias-legal {
  margin-block: var(--sec) var(--sec-borde);
  padding-bottom: 20px;
}

.bk-gracias-legal p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: var(--lh-texto);
  color: var(--ink);
}

.bk-gracias-legal .pdp-legal-si {
  border-top: 1px solid rgba(121, 87, 87, .35);
  padding-top: 10px;
  margin-top: 10px;
  font-weight: 500;
  color: var(--ink);
}


/* ⚠️ Acá vivía un `.bk-gracias--fallo h1` de 26px. Se eliminó: pesa (0,1,1),
   exactamente lo mismo que `.bk-gracias-head h1`, así que ganaba por orden de
   archivo y las ramas de pago fallido y de pago en revisión abrían con un
   titular 4px más chico que el de la compra exitosa. Es la misma página y el
   mismo objeto; el titular no cambia de tamaño según cómo haya salido el pago.
   El resto de lo que declaraba —familia, peso, interlineado, margen— ya lo pone
   la regla de la cabecera. */


/* ---------------------------------------------------------------------------
   GRACIAS · la espera de la confirmación (01-09)

   Los dos tiempos del mensaje mientras el webhook de MercadoPago confirma el
   pago. `hidden` los alterna desde `initEsperaPago()`; acá solo vive el
   indicador de que algo está pasando.

   ⚠️ El primer párrafo NO lleva `display:flex`: los puntitos van en un `<span>`
   en línea para que el texto envuelva normal en un teléfono. Con flex, una
   frase de dos renglones se separaría de su propio indicador. */
.bk-espera-pulso.bk-espera-pulso {
  margin: 0 0 8px;
  font-weight: 500;
  color: var(--ink);
}

.bk-espera-puntos {
  display: inline-block;
  margin-right: 7px;
  vertical-align: baseline;
  white-space: nowrap;
}

.bk-espera-puntos i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--wine);
  opacity: .25;
  animation: bk-espera-late 1.2s infinite ease-in-out;
}

.bk-espera-puntos i:nth-child(2) { animation-delay: .18s; }
.bk-espera-puntos i:nth-child(3) { animation-delay: .36s; }

@keyframes bk-espera-late {
  0%, 70%, 100% { opacity: .25; }
  35%           { opacity: 1; }
}

/* Quien pide menos movimiento no espera menos: ve los tres puntos quietos y
   legibles, y la página se sigue recargando sola igual. La señal de «esto
   está en curso» la da el texto, no la animación. */
@media (prefers-reduced-motion: reduce) {
  .bk-espera-puntos i { animation: none; opacity: .55; }
}




/* ---------------------------------------------------------------------------
   GRACIAS · pedido no encontrado (27-08)
   La pantalla de quien llega con un enlace viejo o cortado. Era un párrafo
   suelto sin encabezado; axe-core la marcaba por no tener `<h1>`. Reusa el
   marco de «La Carta» y el texto de apoyo del sello, sin piezas nuevas.
--------------------------------------------------------------------------- */
.bk-gracias-sinpedido ol {
	margin: 0;
	padding-left: 20px;
	list-style: decimal;
}

.bk-gracias-sinpedido.bk-gracias-sinpedido li {
	font-size: 15px;
	line-height: var(--lh-texto);
	color: var(--tinta-2);
	margin-bottom: 8px;
}

.bk-gracias-sinpedido .carta-pie { margin-top: 14px; }

.bk-gracias-apoyo.bk-gracias-apoyo {
	max-width: 42ch;
	margin: 0 auto;
	text-align: center;
	font-size: 13.5px;
	line-height: var(--lh-texto);
	color: var(--cacao);
}