/* ============================================================================
   Brooklyn by Janice — Componentes compartidos
   Botones, tarjetas, badges, estrellas y testimonios.
   ========================================================================= */

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;           /* objetivo táctil cómodo en móvil */
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--body);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base),
              border-color var(--t-base), transform var(--t-fast);
}

.btn:active { transform: scale(.985); }

.btn--primary {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--wine-dark);
  border-color: var(--wine-dark);
}


/*
 * Botón secundario.
 *
 * En el theme de Shopify este era `.btn-ghost`: fondo transparente y un borde
 * a 25% de opacidad sobre fondo blanco — la señal de "esto se puede tocar" más
 * débil posible, justo en el dispositivo donde no existe el :hover que le daba
 * vida en escritorio. Era el ÚNICO CTA de cada tarjeta del catálogo, y esa
 * página convierte 0,60% en móvil contra 5,11% en escritorio (§10.n, §10.o).
 *
 * Aquí el borde sube a opacidad plena y gana fondo propio: sigue siendo
 * secundario frente al botón vino, pero se lee como botón.
 */
.btn--outline {
  background: var(--white);
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline:hover {
  background: var(--ink);
  color: var(--sand);
}

/*
 * Botón claro, para usar sobre fondo vino o tinta.
 *
 * Declara su propio color en vez de heredarlo de la sección oscura: es la misma
 * regla que evita el bug de contraste que ya apareció dos veces en este
 * proyecto.
 */
.btn--light {
  background: var(--papel);
  border-color: var(--papel);
  color: var(--wine);
}

.btn--light:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--wine-dark);
}

.btn--block { display: flex; width: 100%; }

.btn--sm { min-height: 40px; padding: 9px 18px; font-size: .84rem; }

.btn[disabled],
.btn.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* ---------- Precio ---------- */

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
}

/*
 * Un precio se escribe «34 USD»: entero pelado, sin signo y sin decimales.
 *
 * El signo se va porque Brooklyn vende en 92 países y sus cuatro mercados
 * principales —México, Chile, Perú y Argentina— usan todos `$` para su propia
 * moneda: un «$34» pelado significa cuatro cosas distintas. Por eso el número
 * va limpio y la moneda viaja en su propio elemento, para que cada superficie
 * decida si la dice (ficha, carrito, checkout) o si la declara una sola vez
 * arriba (grillas de tarjetas).
 *
 * `.amount`, `ins` y `del` sueltos se mantienen porque WooCommerce imprime su
 * propio marcado de precio en el carrito y en los correos, donde no pasa por
 * brooklyn_precio().
 */
.price .price-now,
.price .amount,
.price ins {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

/*
 * Comparativo tachado.
 *
 * Desde que se eliminó la mecánica de alza de precios —los precios nuevos
 * entran con la web nueva y sin anuncio— este es el único mecanismo de urgencia
 * que le queda al sitio. Y es legítimo: el precio de lista existe fuera de la
 * página, que es la regla que separa la urgencia real de la falsa.
 */
.price .price-was,
.price del {
  font-size: .95rem;
  /* Sin `opacity`: el cacao rinde 6,34:1 sobre blanco, pero al 70% se aclara a
     #a18989 y cae a 3,25:1 — por debajo del mínimo, y en un texto de 11,5px.
     El comparativo tachado es el único mecanismo de urgencia que le queda al
     sitio (§3.n): tiene que leerse. El tachado ya lo distingue del precio de
     venta; no hace falta además desvanecerlo. */
  color: var(--cacao);
  text-decoration: line-through;
}

.price .price-cur,
.price .currency {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--cacao);
}

/*
 * Conversión de vista a la moneda local (inc/moneda.php). Siempre en su
 * propia línea —`flex-basis: 100%` fuerza el salto dentro del `.price` flex—
 * para que se lea como una nota aparte y no como parte del precio real, que
 * sigue siendo el número grande en USD.
 */
.price .price-conv {
  flex-basis: 100%;
  font-family: var(--body);
  font-size: .78rem;
  color: var(--tinta-2);
}

/* ---------- Estrellas ---------- */

.stars {
  color: var(--terracotta);
  font-size: .95rem;
  letter-spacing: .08em;
}

/* Estrellas de las tarjetas de testimonio.
   NO usan `--terracotta`: ese color da 2,87:1 sobre blanco y las estrellas
   son un elemento gráfico, que por WCAG necesita 3:1. Este dorado da 3,25:1
   y además se lee como oro, que es lo que el terracota no lograba. */
.tcard .stars {
  color: #B8860B;
  font-size: 15px;
  letter-spacing: .12em;
  margin: 0 0 10px;
  line-height: 1;
}

/* ---------- Testimonios ---------- */

.tcard {
  /*
   * Tarjeta de testimonio, esquinas bien redondeadas y con sombra suave: las
   * tres secciones que la usan (home, sobre mí, ficha) son tarjetas blancas
   * flotando sobre un fondo tinta, así que la sombra es lo que las despega.
   */
  /* `margin: 0` NO es redundante: `.tcard` es un `<figure>`, y el estilo por
     defecto del navegador le pone `margin: 1em 40px`. Esos 40px por lado
     sumaban 80px de separación entre tarjetas además del `gap`, y empujaban a
     las vecinas fuera de pantalla — por eso no se veía el asomo. */
  margin: 0;
  background: var(--white);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--borde-caja);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  flex: none;
  scroll-snap-align: center;
  /*
   * El color se declara aquí a propósito, no se hereda.
   *
   * La tarjeta es blanca, así que su texto tiene que ser oscuro viva donde
   * viva. Sin esta línea, dentro de una sección tinta heredaba --sand sobre
   * blanco: 1,35:1 de contraste, es decir testimonios ilegibles en las 5
   * fichas de producto.
   */
  color: var(--ink);
}

.tcard blockquote {
  margin: 0;
  /* 16,5/1,62 y no 15,5/1,5: la cita es el contenido de la tarjeta, no una
     nota al pie, y 95,6% del tráfico la lee en un teléfono. */
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
  text-wrap: pretty;
}

.tcard figcaption {
  /* `auto` y no un valor fijo: ancla el nombre al pie de la tarjeta. Con las
     tarjetas del carrusel estiradas a igual alto, es lo que hace que el aire
     sobrante quede entre la cita y la atribución en vez de después del
     nombre, que es como se veía descolgado. El `12px` es el mínimo para que
     una tarjeta llena no pegue el nombre contra la cita. */
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  color: var(--cacao);
}

.tcard p {
  margin: 0;
  font-size: .93rem;
  line-height: var(--lh-texto);
}

.tcard .who {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--cacao);
  margin-top: auto;
}

/* ---------- Carrusel de testimonios ----------
   La mecánica (pista con enganche, flechas, puntos) estaba duplicada palabra
   por palabra en home-brooklyn.css y janice-del-aguila.css. Vive aquí una sola
   vez; cada página conserva solo la apariencia de su tarjeta.

   Razón de fondo: 10 testimonios apilados en una columna son ~4.200px en un
   teléfono, la mitad del alto de la ficha de producto. En horizontal ocupan
   una pantalla y se recorren con el pulgar. */

.testi-stage { position: relative; }

.testi-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* SIN scroll-behavior:smooth acá a propósito: con la propiedad puesta por
     CSS, un scrollTo({behavior:'auto'}) desde JS deja de ser instantáneo —
     "auto" significa "usa lo que diga el CSS", no "sin animación". Eso hacía
     que el salto de reubicación del loop infinito (ver app.js) se viera
     como que la tarjeta "vuelve corriendo" a la primera. El comportamiento
     de cada scroll lo decide siempre el JS, explícito, llamada por llamada. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: stretch;
  padding: 6px 0 10px;
}

.testi-track::-webkit-scrollbar { display: none; }

@media (min-width: 600px) {
  }

.testi-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 240, 240, .3);
  background: rgba(43, 43, 43, .7);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}

.testi-chevron:hover:not([disabled]) {
  background: rgba(229, 185, 204, .9);
  border-color: rgba(229, 185, 204, .6);
  transform: translateY(-50%) scale(1.08);
}

/* En el borde del carrusel la flecha DESAPARECE, no se atenúa.
   En la primera tarjeta no existe un "anterior": dejar el botón visible
   —aunque sea al 40%— ofrece un recorrido que no está. Sigue en el DOM y
   `disabled`, así que el lector de pantalla lo anuncia como no disponible en
   vez de que el control se esfume del árbol de accesibilidad. */
.testi-chevron[disabled] {
  opacity: 0;
  pointer-events: none;
}

.testi-chevron svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Inset positivo, no negativo: el botón queda entero dentro del viewport,
   apoyado sobre el asomo de la tarjeta vecina, en vez de cortado a la mitad
   contra el borde de la pantalla. 8px y no más: con el chevron más adentro,
   el asomo (sneak peek) de la tarjeta vecina queda tapado por el propio
   botón en vez de asomar al lado. */
.testi-chevron.prev { left: 8px; }
.testi-chevron.next { right: 8px; }

@media (min-width: 600px) {
  .testi-chevron.prev { left: 18px; }
  .testi-chevron.next { right: 18px; }
}

/* Los puntos los inyecta el JS; vacío el contenedor no ocupa nada, así que no
   deja un hueco cuando el script no corre. */
/* La geometría es la misma en los dos carruseles del sitio; lo único que
   cambia es el color, porque los testimonios viven sobre la banda de tinta y
   la galería sobre el papel. Un punto de 8px es blanco chico para el dedo, así
   que el área tocable se agranda con un pseudo-elemento en vez de agrandar el
   punto: se respeta el mínimo táctil sin engordar el indicador. */
.testi-dots,
.gal-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}

.testi-dots:empty,
.gal-dots:empty { display: none; }

.testi-dots button,
.gal-dots button {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-base);
}

.testi-dots button::after,
.gal-dots button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}

.testi-dots button { background: rgba(240, 240, 240, .28); }
.testi-dots button.active { background: #fff; transform: scale(1.35); }

/* Sobre papel: cacao al 30% en reposo y vino sólido el activo — el mismo vino
   que hace todos los CTAs del sitio. */
.gal-dots { margin-top: 10px; }
.gal-dots button { background: rgba(121, 87, 87, .3); }
.gal-dots button.active { background: var(--wine); transform: scale(1.35); }

/* ---------- Acordeón de FAQ ---------- */

.faq-item {
  border-bottom: 1px solid rgba(43, 43, 43, .12);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

/*
 * El «+» que dice que esto se abre.
 *
 * Vivía en product.css, o sea solo se estilaba en la ficha. La colección
 * directamente no lo imprimía: sus cuatro preguntas se veían como títulos
 * muertos, sin ninguna señal de que fueran desplegables — y es la página por
 * la que entra el ~70% del tráfico. El marcador nativo del <summary> está
 * oculto, así que sin este span no queda NINGUNA pista.
 *
 * Es la regla de siempre: componente compartido, CSS compartido.
 */
.faq-item summary span {
  flex: none;
  color: var(--wine);
  font-family: var(--mono);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .18s ease;
}

.faq-item[open] summary span { transform: rotate(45deg); }

.faq-item .faq-answer {
  padding-bottom: 20px;
  font-size: .93rem;
  color: #4a4a4a;
}

/* ---------- Avisos de WooCommerce ---------- */

/* El contenedor que imprime `header.php` cuando hay un aviso FUERA de las
   páginas de WooCommerce (el «Listo, ¡aceptamos tu pago!» de MercadoPago en la
   pantalla de descarga, por ejemplo). Nacía pegado al borde inferior del
   header, porque ese `<div>` es hijo directo de `<main>` y no de la raíz de
   ninguna plantilla, así que el RITMO VERTICAL ÚNICO no lo alcanza.

   `--sec-hero` y no un 30 suelto: es exactamente el aire con el que abre contra
   el header cualquier otra pantalla del sitio, y así se mueve con el token si
   el ritmo cambia. */
.wrap.woocommerce { padding-top: var(--sec-hero); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  /*
   * `border` completo, no solo `border-left`.
   *
   * WooCommerce pinta un `border-top: 3px solid #3d9cd2` (azul) en estos
   * avisos. Al declarar aquí solo el borde izquierdo, ese azul sobrevivía y
   * aparecía una línea celeste ajena a la paleta encima de cada aviso.
   */
  border: 0;
  /* Vino, no sage: es el único color de acento del sitio, y el verde ya salió
     de Postres a pedido por no pertenecer a la paleta (23-08). */
  border-left: 3px solid var(--wine);
  /* Blanco con hilo, no `--paper` (#F0F0F0): sobre el papel cálido ese gris se
     lee como una mancha. Misma corrección que en el resto del sitio. */
  border-radius: var(--r-campo);
  box-shadow: var(--borde-caja);
  background: var(--white);
  font-size: .9rem;
}

/*
 * WooCommerce mete un icono con `content:"\e028"` en la fuente "WooCommerce",
 * que este tema no carga (no se enqueua su hoja de iconos). El resultado era un
 * cuadrito de carácter faltante al inicio de cada aviso. Se quita el glifo.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; display: none; }

.woocommerce-error { border-left-color: var(--wine); }

/* El aviso de WooCommerce viene con el botón a la derecha y el texto envolviéndolo;
   en móvil eso deja el texto partido alrededor del botón. Se apilan.
   Se estila como acción secundaria: el aviso informa, no es el CTA de la página. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 10px 18px;
  border: 1.5px solid var(--wine);
  /* Cuadrado, como todo el sitio. Estaba en `999px` —una pastilla— de cuando
     esta regla se escribió antes de «La Carta»; y `.woocommerce-error` no
     estaba en la lista, así que su botón caía al estilo por defecto de
     WooCommerce: la única esquina redonda de todo el recorrido de compra. */
  border-radius: 999px;
  background: transparent;
  color: var(--wine);
  font-size: .84rem;
  font-weight: 600;
  text-align: center;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
  background: var(--wine);
  color: var(--white);
}

@media (min-width: 620px) {
  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button { display: inline-block; width: auto; float: right; margin: 0 0 0 14px; }
}


/* ---------- Compartido entre home, sobre mí y las páginas de captura ----------
   Vivían en home-brooklyn.css, que solo carga en el home: la página de Janice
   usa el mismo eyebrow con regla y el mismo formulario de lista de espera, y
   salían sin estilo. Es la misma clase de bug que el CSS duplicado del theme
   viejo, al revés: no duplicado de más, sino alcance de menos. */

/* Eyebrow con regla: el filete a la derecha ordena la página sin gastar un
   título más. */
.eyebrow--regla { display: flex; align-items: center; gap: 12px; white-space: nowrap; }

.eyebrow--regla::after { content: ""; height: 1px; flex: 1; background: rgba(121, 87, 87, .25); }

/* ---------- Captura de correo del taller ----------
   La caja vivía en la hoja del home y el formulario acá, o sea el componente
   partido en dos. Desde el 23-08 el mismo bloque se dibuja también en la
   colección —la página del 70% de las entradas— así que la base entera viene
   acá. Es la trampa que este proyecto ya pisó doce veces: el componente se ve
   bien en la página que le da nombre y sale sin estilo en la ajena. */

.home-taller { padding-inline: var(--edge); }

/* Sin aire arriba (pedido de Ignacio, 31-08): la sección arranca pegada a la
   anterior y el respiro lo pone el padding-bottom de esa vecina.
   ⚠️ CLASE REPETIDA —(0,3,0)— obligatoria igual que con cualquier otro valor:
   el `:is()` del RITMO VERTICAL ÚNICO pesa (0,2,1) por
   `.wrap--reading.section > article`, su argumento más alto, así que con
   menos clases el 20px del ritmo gana y este 0 no se aplica.
   Va acá y no en la hoja del home porque la captura se dibuja también en la
   colección y en «Sobre mí», y un componente compartido no puede cambiar de
   medidas según dónde se le suelte. */
.home-taller.home-taller.home-taller { padding-top: 0; }
/* El gris del header (23-08, pedido de Ignacio). Es `--paper` (#F0F0F0), el
   mismo token que pinta `header.site`; ahí va al 92% sobre el papel cálido y
   se resuelve en ~#F1F1F0, o sea el #f1f1f1 que se veía en pantalla. Acá va
   sólido: la caja no es una capa flotante y no necesita dejar pasar el fondo.
   (Venía en blanco desde el 23-08 con el argumento de que el gris se leía
   como mancha sobre el papel de «La Carta»; queda anotado que el criterio
   cambió a propósito, para que nadie lo «corrija» de vuelta.) */
.home-taller-caja { background: var(--white); color: var(--ink); padding: 18px 16px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

/* Mismo caso que el bloque de Janice: el título estaba en 16px contra un
   párrafo de 15,5px, o sea medio píxel de diferencia. 21px —un punto por
   debajo del de Janice, porque este titular es largo y ocupa dos líneas—
   vuelve a separar título de cuerpo. */
.home-taller-caja h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.18;
  margin: 7px 0 0;
}

.home-taller-caja > p { margin: 9px 0 0; font-size: 15.5px; line-height: var(--lh-texto); color: var(--tinta-2); }

/* El ancho de lectura es del componente y no de la página: el bloque vive en
   el home y en la colección, y en las dos el formulario tiene que dejar de
   estirarse en escritorio. */
@media (min-width: 900px) {
  .home-taller { max-width: var(--ancho); margin-inline: auto; }
}

.home-taller-form { margin-top: 13px; display: flex; flex-direction: column; gap: 9px; }

.home-taller-form input[type="email"] {
  height: 52px;
  border: 1px solid rgba(121, 87, 87, .4);
  background: var(--white);
  color: var(--ink);
  padding: 0 14px;
  font-family: var(--body);
  font-size: 16px;
  box-sizing: border-box;
  border-radius: var(--r-campo);
  width: 100%;
}

.home-taller-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
}

.home-taller-consent input { margin-top: 3px; accent-color: var(--wine); }

/* La trampa para bots: fuera de pantalla, no display:none — algunos bots
   ignoran los campos ocultos con display. */
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ---------- Chevrons de carrusel ----------
   Estaban en product.css, que solo carga en la ficha: en el home y en «sobre
   mí» los botones salían apilados en vertical y sin círculo. Viven acá porque
   son el mismo componente en las cuatro páginas que tienen carrusel. */


.chev {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(121, 87, 87, .45);
  background: rgba(251, 247, 242, .9);
  color: var(--wine);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform var(--t-fast);
}

.chev:active { transform: scale(.94); }

/* Al principio del recorrido el chevron izquierdo baja de opacidad pero SIGUE
   siendo tocable: es el único acceso por teclado y por lector de pantalla. */
.chev[disabled] { opacity: .4; cursor: default; }

.chev--ink {
  border-color: rgba(251, 247, 242, .45);
  background: transparent;
  color: var(--papel);
}

/* Las tarjetas del carrusel no se encogen: sin `flex:none` heredan
   `flex:0 1 auto` del contenedor flex y colapsan a la mitad del ancho.

   `align-self: stretch` (antes era `flex-start`) porque la pista siempre mide
   lo que mide la tarjeta MÁS alta. Con las tarjetas alineadas arriba, mirar
   una corta dejaba ~100px de fondo tinta colgando debajo —la franja medía
   399px para una tarjeta de 236— y se leía como un agujero en la sección, no
   como aire. Estiradas, todas miden igual y la franja queda ajustada.

   El vacío no desaparece, se muda adentro de la tarjeta, que es donde se ve
   como espacio y no como error: la atribución se ancla abajo con
   `margin-top:auto` y el aire queda entre la cita y el nombre. */
.testi-track > .tcard {
  flex: none;
  align-self: stretch;
  /* Ancho en `vw`, NUNCA en `%`.
     El `%` se resuelve contra la caja de contenido de la pista, y el JS le
     calcula a la pista un padding lateral a partir del ancho de la tarjeta
     para centrarla: tarjeta más angosta → más padding → caja más chica →
     tarjeta más angosta. Es circular, y se estabilizaba en el mínimo del
     clamp: la tarjeta terminaba en 220px y la cita salía partida en líneas
     de tres palabras. `vw` mide contra el viewport y no entra en el bucle.

     76vw deja ~47px libres a cada lado en un teléfono: el asomo (sneak peek)
     de la tarjeta vecina se ve por encima y por debajo del chevron, que solo
     mide 36px de alto contra los ~236 de la tarjeta. */
  width: min(66vw, 420px);
}

/* ============================================================================
   REDISEÑO · las cuatro páginas utilitarias
   ----------------------------------------------------------------------------
   Mi cuenta, búsqueda, 404 y legales. Van acá y no en cuatro hojas propias
   porque el §E del inventario v2 las define como composición del kit que ya
   existe: no traen ni un componente nuevo, solo lo combinan distinto.
   ========================================================================= */

/* ---------- 404 ----------
   Brook aparece ABIERTO acá y en ninguna otra página: quien llega ya falló
   buscando algo, y un clic más es justo lo que no hay que cobrarle. */

.bk-404 {
  background: var(--papel);
  background-image: var(--harina);
  background-size: var(--harina-size);
  color: var(--ink);
  padding: 34px var(--edge) 32px;
}

/* Aire contra el header.

   El RITMO VERTICAL ÚNICO va en `padding` —a propósito, para que las franjas
   de color se toquen entre ellas—, así que acá se cambia por `margin`: el 404
   necesita el aire contra el header y su primer hijo es el aviso.

   Selector (0,3,0) —clase repetida— para ganarle al `:is()` del ritmo, que
   declara `margin-block: 0` con (0,2,1). Va acotado a `.bk-404`: en el carrito
   vacío el aire lo pone el `padding-top` de `.bk-vacio`, que no entra en el
   ritmo. */
.bk-404.bk-404 > .bk-vacio-aviso.bk-vacio-aviso {
  /* El aire contra el header. Y el `padding-top` que le pone el ritmo por ser
     primer hijo se anula: si no, los dos se suman y el 404 abre con 60px donde
     el resto del sitio abre con 30.

     ⚠️ CUATRO CLASES —(0,4,0)— OBLIGATORIAS: el `padding-top` lo pone
     `:is(…) > :first-child`, y ese `:first-child` cuenta como clase sobre el
     (0,2,1) del `:is()`, o sea (0,3,1). Con tres se empata en clases y gana el
     ritmo por el elemento. */
  margin-top: var(--sec-hero);
  /* ⚠️ Vuelve a 0 desde el 31-08. Los 20px existían porque el aviso ERA una
     caja con fondo propio y sin ellos el eyebrow nacía pegado a su borde; al
     dejar de ser caja, ese padding se suma al `margin-top` de arriba y el 404
     abriría con 50px donde el resto del sitio abre con `--sec-hero`. */
  padding-top: 0;
}

.bk-404 .brook--fija { margin-inline: 0; }

/* Brook cierra la 404 y su espaciado no lo pone el ritmo. Pedido de Ignacio
   (26-08): padding vertical en 0 y la ventana separada del footer.

   Los dos van juntos porque son el mismo defecto visto por sus dos caras: el
   `padding-block` del RITMO VERTICAL ÚNICO caía DENTRO de la tarjeta —`.brook`
   ES la caja con borde y fondo—, así que abría aire bajo el campo de escribir
   y no dejaba ni un pixel entre el borde de la ventana y el footer. El aire
   entre secciones tiene que ir por FUERA de un componente enmarcado, y eso es
   `margin`.

   Selector (0,4,0) —las DOS clases repetidas—. No basta (0,3,0): al ser Brook
   el último hijo, quien pone el `padding-bottom` es la regla `:is(…) >
   :last-child`, y ese `:last-child` le suma una clase al (0,2,1) del `:is()`.
   Contar, no confiar en el orden del archivo.

   Acotado a `.bk-404`: en Contacto la ventana NO cierra la página —abajo
   siguen los canales, el formulario y las FAQ—, así que ahí el ritmo es el
   que corresponde. */
.bk-404.bk-404 > .brook--fija.brook--fija {
  padding-block: 0;
  margin-bottom: var(--sec-borde);
}

/* ---------- Búsqueda ---------- */

.busqueda {
  background: var(--papel);
  background-image: var(--harina);
  background-size: var(--harina-size);
  color: var(--ink);
}

.busqueda h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.005em;
}

.busqueda h2 { font-family: var(--serif); font-weight: 400; }
.busqueda .pcard { border-radius: var(--r-caja); border: 0; box-shadow: var(--borde-caja); }

/* ---------- Legales ----------
   Ancho de lectura y nada más. El §E es explícito: «Nada más.» */

/* Sin fondo propio: el papel y su textura los pone el `body` desde el 23-08.
   Declararlos otra vez acá dibujaba el rectángulo de las orillas blancas y
   además duplicaba los puntos de la harina dentro del recuadro. */

/* El `<h1>` de las legales vive FUERA de `.entry` —lo imprime `page.php` antes
   de `the_content()`— así que se quedaba con la regla global de `base.css`:
   Poppins 700. Resultado: el título de la página en una tipografía y todos los
   subtítulos del documento en otra, en las cuatro páginas legales. Se cubre
   con el mismo selector de página para que no dependa de dónde esté escrito. */
.page .entry-content > h1,
.page article > h1,
.entry h1,
.entry h2,
.entry h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; }

.page article > h1,
.entry h1 { font-size: 32px; line-height: 1.08; }
.entry h2 { font-size: 22px; line-height: 1.16; margin-top: 28px; }

.entry p,
.entry li { font-size: 16px; line-height: var(--lh-texto); color: var(--tinta-2); }

/*
 * Las viñetas vuelven SOLO dentro del contenido editorial.
 *
 * El reset global `ul, ol { list-style: none }` es correcto para los
 * componentes, pero acá borraba la separación entre cláusulas: en la política
 * de reembolso dejaba corridas, como un solo párrafo, «más de 48 horas»,
 * «menos de 48 horas» y «no presentación sin aviso». En un documento legal esa
 * separación no es decorativa.
 */
.entry ul { list-style: disc; padding-left: 20px; }
.entry ol { list-style: decimal; padding-left: 20px; }
.entry li { margin-bottom: 6px; }

/* Los tres elementos del contenido legal que estaban SIN estilo de marca.
   Se detectaron midiendo el render de las cuatro páginas, no leyendo el CSS:
   la tipografía y los encabezados sí estaban resueltos, pero estos tres caían
   al valor por defecto del navegador. (26-08)

   1 · LOS ENLACES ERAN INVISIBLES COMO ENLACES. `base.css` deja `color:
   inherit` y `text-decoration: none` —correcto para los componentes, donde el
   enlace ES la tarjeta— pero acá dejaba los links de «Política de reembolso»,
   «Privacidad» y el correo de contacto exactamente del mismo color y sin
   subrayado que el párrafo que los rodea. En un documento legal el enlace es
   la vía de contacto y de navegación entre políticas: tiene que verse. Vino,
   que es el único color de acción del sitio. */
.entry a:not(.btn) {
  color: var(--wine);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(110, 44, 52, .4);
}

.entry a:not(.btn):hover { text-decoration-color: var(--wine); }

/* 2 · EL `<hr>` SALÍA EN EL GRIS DEL NAVEGADOR (#808080, 2px de alto), que no
   está en la paleta. Aparece en envío y en reembolso separando secciones del
   documento. Pasa al mismo hilo de cacao al 18% que usan las cajas del tema. */
.entry hr {
  border: 0;
  border-top: 1px solid rgba(121, 87, 87, .18);
  height: 0;
  margin: 24px 0;
}

/* 3 · EL `<blockquote>` NO TENÍA NINGÚN ESTILO: se leía idéntico a un párrafo.
   Y no es una cita decorativa — en las tres páginas que lo usan es la salida
   humana («escríbenos», «te respondemos a la brevedad»), o sea justo lo que
   §3.h identifica como la objeción central del infoproducto. Toma el mismo
   gesto que `.bk-sello-caja--politica`: filete vino a la izquierda sobre
   blanco con hilo. Se declara el `color` explícito porque una caja clara nunca
   hereda el suyo (regla dura de §3.l). */
.entry blockquote {
  margin: 20px 0;
  padding: 14px 16px;
  background: #fff;
  border-left: 3px solid var(--wine);
  color: var(--ink);
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

.entry blockquote p { color: var(--ink); }
.entry blockquote > :last-child { margin-bottom: 0; }

/* El `h3` era el único encabezado del documento sin tamaño propio: caía al
   `clamp(1.2rem, 3vw, 1.6rem)` de `base.css`, o sea cambiaba de tamaño con el
   ancho de la ventana mientras el h1 y el h2 de al lado no. */
.entry h3 { font-size: 18px; line-height: 1.2; margin-top: 22px; }

/* El titular de las legales nacía con demasiado aire: el ritmo se contaba dos
   veces antes de llegar a él. `.wrap--reading.section > article` toma 10px
   arriba por ser hijo del contenedor, y adentro el `<h1>` toma otros 20 por
   ser `:first-child` del article; abajo pasaba lo mismo entre el titular y el
   primer párrafo, porque `.entry` toma 10px por ser el hijo siguiente.
   Resultado: ~30px sobre el título y ~10 bajo él, cuando las migas de arriba
   ya dejan su propio aire. Pedido de Ignacio (26-08).

   El article, el `<h1>` y el `.entry` dejan de poner ritmo arriba: el aire
   sobre el titular queda solo el que dejan las migas debajo suyo, que es el
   que corresponde. Los 20px de cierre contra el footer se conservan.

   Acotado con `body:not(.woocommerce-page)`: carrito, checkout y Mi cuenta
   usan esta misma plantilla y ya tienen resuelto su propio espaciado
   (`cuenta.css`). Los `:not()` de carrito, checkout y cuenta van además del
   de `woocommerce-page` porque el checkout redirige con el carrito vacío y no
   se pudo verificar en pantalla que lo lleve: es más barato nombrarlo que
   confiar. Selector (0,6,2), para ganarle al `:is()` del RITMO
   VERTICAL ÚNICO, que pesa (0,2,1). */
body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .wrap--reading.section > article,
body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .wrap--reading.section > article > h1,
body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .wrap--reading.section > article > .entry {
  padding-top: 0;
}

/* Y el cierre estaba contado dos veces: el `.entry` toma 20px por ser el
   último hijo del article, y el article otros 20 por ser el último del
   contenedor — 40px de aire muerto contra el footer. El que se queda es el
   del article, que va por fuera del documento. Pedido de Ignacio (26-08). */
body:not(.woocommerce-page):not(.woocommerce-checkout):not(.woocommerce-cart):not(.woocommerce-account) .wrap--reading.section > article > .entry {
  padding-bottom: 0;
}

/* ---------- Mi cuenta ----------
   Es la superficie de la clienta que vuelve, y donde aterrizan las 328
   compradoras migradas a reclamar su acceso de por vida. El botón de descarga
   es el elemento más importante de la página: es el producto. */

/* Mismo caso que `.entry`: el papel lo pone el `body`. */

.woocommerce-account h1,
.woocommerce-account h2,
.woocommerce-account h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; }

/*
 * El botón de descarga en vino y no en el morado de WooCommerce.
 *
 * La regla del tema perdía por especificidad contra `.woocommerce a.button.alt`,
 * así que el botón MÁS importante para quien vuelve salía en #7f54b3. Se iguala
 * la especificidad en vez de recurrir a !important.
 */
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce a.button.alt,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce button.button.alt {
  background: var(--wine);
  color: #fff;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce a.button.alt:hover { background: var(--wine-dark); color: #fff; }

/* El aviso legal extendido del área de descargas: acá el material ya está en
   sus manos, así que es información y no advertencia. */
.bk-cuenta-legal {
  margin-top: 20px;
  background: var(--white);
  color: var(--ink);
  border-left: 3px solid var(--cacao);
  padding: 16px 18px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

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

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


/* ---------- Estado vacío ----------
   Lo comparten el carrito vacío y el 404. Vivía en cart.css, que solo carga en
   carrito y checkout, así que en el 404 la grilla salía en una columna y sin la
   caja punteada.

   ⚠️ REGLA, porque es la CUARTA vez que aparece este mismo bug en el proyecto
   (.eyebrow--regla, los chevrons, Brook y ahora esto): si un componente se usa
   fuera de la página que le da nombre, su CSS NO puede vivir en la hoja de esa
   página. Va a components.css o a hoja propia cargada globalmente.

   El vacío no es un callejón: sale con los dos ebooks que concentran el 68% de
   las unidades. Quien llega acá ya mostró intención. */

/* ---------- Carrito vacío ----------
   No es un callejón: sale con los dos ebooks que concentran el 68% de las
   unidades y con el pack. Quien llega acá ya mostró intención de compra. */

.bk-vacio {
  background: var(--papel);
  background-image: var(--harina);
  background-size: var(--harina-size);
  color: var(--ink);
  /* 30px arriba: es el mismo aire que la ficha le deja a `.pdp-head` bajo las
     migas, y así el carrito vacío abre como el resto del sitio en vez de con
     un valor propio. */
  padding: 30px var(--edge) 30px;
}

.bk-vacio { max-width: 620px; margin-inline: auto; }

/* El aviso NO es un recuadro: es la portada editorial de la pantalla.

   Era un rectángulo de vino al 5% con `padding-inline: 18px` y CERO padding
   vertical — o sea el eyebrow nacía tocando el borde de arriba y la bajada el
   de abajo. Eso es lo que Ignacio describió como «todo ajustado» (31-08), y no
   se arregla poniéndole aire: se arregla quitando la caja. En el resto del
   sitio ninguna cabecera de página es una caja —`.pdp-head`, `.col-portada` y
   `.jan-head` son eyebrow + Young Serif + bajada sobre el papel—, así que ese
   bloque tintado era la única pantalla que abría con un objeto que no existe
   en ninguna otra parte. Y encima competía con las dos tarjetas blancas que
   vienen justo abajo, que sí son cajas.

   La personalidad la ponen ahora tres recursos que YA existen en el tema y no
   uno nuevo: el eyebrow entre filetes de `.carta-filete` —el encabezado de
   carta impresa—, Young Serif, y la asterisma de tres puntos vino que la ficha
   usa para cerrar un tramo. */
.bk-vacio-aviso {
  text-align: center;
  /* Acotado: el titular en Young Serif a 26px estirado a los 572px útiles del
     escritorio se lee como una franja, no como una portada. */
  max-width: 420px;
  margin-inline: auto;
}

.bk-vacio-aviso h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.14;
  margin: 13px 0 0;
  /* `balance` y no `pretty`: son dos o tres palabras por línea y lo que hay que
     evitar es la línea huérfana, no el río. */
  text-wrap: balance;
}

.bk-vacio-aviso p:last-child {
  margin: 10px auto 0;
  /* 34 caracteres: dentro de los 30-50 por línea que §3.m fija para móvil. */
  max-width: 34ch;
  font-size: 15.5px;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
  text-wrap: pretty;
}

/* Asterisma de cierre — la misma de `.pdp-forwho`, misma medida y mismo
   gradiente. Cierra la portada y la separa de la grilla sin necesidad de una
   línea llena, que sería otra vez un objeto de caja.

   Decorativa pura, así que va en un pseudo-elemento y no en el marcado: un
   lector de pantalla no debe anunciar tres puntos. */
.bk-vacio-aviso::after {
  content: "";
  display: block;
  /* 48 / 16 = exactamente tres puntos. */
  width: 48px;
  height: 5px;
  margin: 22px auto 0;
  background-image: radial-gradient(circle, var(--wine) 2.4px, transparent 2.5px);
  background-size: 16px 5px;
  background-repeat: repeat-x;
  opacity: .65;
}

/* El cierre de la portada contra la grilla.

   Va acá y no en el `::after` porque `.bk-vacio` NO entra en el RITMO VERTICAL
   ÚNICO: sin esto la asterisma queda a 1px de la primera tarjeta —medido—,
   mientras que en el 404, que sí está en el ritmo, la separación ya la ponen
   los 20px de cada lado. Es la misma asimetría que ya obligó a las dos reglas
   `.bk-404 > …` de más arriba, con los papeles cambiados. */
.bk-vacio > .bk-vacio-aviso { margin-bottom: 32px; }

.bk-vacio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* Acotada al ancho de lectura: es una sugerencia de salida, no el catálogo.
     A ancho completo en escritorio salían dos tarjetas de 610px dominando una
     página de error. */
  max-width: var(--reading);
  margin-inline: auto;
}

.bk-vacio-bundle {
  margin-top: 16px;
  background: var(--white);
  color: var(--ink);
  padding: 14px;
  display: flex;
  gap: 13px;
  align-items: center;
  box-shadow: var(--borde-caja);
  border-radius: var(--r-caja);
}

/* El radio va en la CAJA y no en la `img`: con `overflow: hidden` acá el
   recorte es uno solo y la foto no puede asomar por una esquina. Es la misma
   corrección ya hecha con la foto de Janice y con `.bk-bundle`. */
.bk-vacio-bundle-img {
  width: 64px;
  aspect-ratio: var(--foto-producto);
  flex: none;
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--r-sm);
}

.bk-vacio-bundle-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bk-vacio-bundle-datos { flex: 1; min-width: 0; }

.bk-vacio-bundle-datos h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.14;
  margin: 0;
}

/* Los dos renglones bajo el nombre. Scopeados a `.bk-vacio-bundle` —(0,2,0)—
   porque `.entry p` pesa (0,1,1) y les ganaría el tamaño y el color: es la
   misma colisión de cascada que ya mordió con los testimonios y el puente. */
.bk-vacio-bundle .bk-vacio-bundle-nota {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  line-height: 1.35;
  color: var(--cacao);
  margin: 5px 0 0;
}

.bk-vacio-bundle .bk-vacio-bundle-precio {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 6px 0 0;
  /* La línea no parte: es una cifra con sus dos anotaciones, no una frase. */
  flex-wrap: nowrap;
}

/* Mismos tres tratamientos que «la cuenta» del carrito y el checkout: el número
   en Work Sans 600 vino —la regla de precios desde el 30-08— y el comparativo y
   la moneda en mono chico, porque son anotaciones sobre la cifra, no cifras. */
.bk-vacio-bundle .bk-vacio-bundle-now {
  font-family: var(--body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  line-height: 1;
  color: var(--wine);
}

.bk-vacio-bundle .bk-vacio-bundle-precio del {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cacao);
  text-decoration: line-through;
}

.bk-vacio-bundle .bk-vacio-bundle-cur {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--cacao);
}

.bk-vacio-bundle .btn { flex: none; }

.bk-vacio-link { text-align: center; margin: 0; }

/* El link se apoya en la grilla de arriba: no es una sección aparte, es la
   salida de la grilla («ver la colección completa»), así que los 20px del
   ritmo lo dejaban flotando a media página. Pedido de Ignacio (26-08).

   Solo en el 404: en el carrito vacío este mismo párrafo ya está en 0, porque
   `.bk-vacio` no entra en la lista del RITMO VERTICAL ÚNICO. O sea esto no
   agrega una excepción — iguala las dos páginas.

   Sin ritmo propio por ninguno de los dos lados: los 20px contra el buscador
   que sigue ya los pone el buscador con su propio `padding-top`.

   Selector (0,3,0) —clase repetida— para ganarle al `:is()` del ritmo, que
   pesa (0,2,1). */
.bk-404.bk-404 > .bk-vacio-link { padding-block: 0; }

/* Y la grilla tampoco cierra por abajo: el link es su salida, no la sección
   siguiente, así que los dos van pegados en un solo bloque. Pedido de Ignacio
   (26-08). Misma acotación y misma especificidad que la regla de arriba: en el
   carrito vacío la grilla ya está en 0 por no entrar en el ritmo. */
.bk-404.bk-404 > .bk-vacio-grid { padding-bottom: 0; }

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

.bk-vacio-pie {
  margin-top: 22px;
  background: var(--sand);
  background-image: var(--mantel);
  color: var(--ink);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: var(--lh-texto);
  border-radius: var(--r-caja);
}

/* ============================================================================
   Carrito desplegable
   ----------------------------------------------------------------------------
   Va en components.css y no en cart.css a propósito: se abre desde la colección,
   desde el home y desde la ficha — o sea desde todas partes MENOS la página que
   le daría nombre. Es exactamente la regla que este proyecto ya aprendió cuatro
   veces (.eyebrow--regla, los chevrons, Brook y el estado vacío): si un
   componente se usa fuera de su página, su CSS no puede vivir en la hoja de esa
   página, porque se ve roto solo en la página ajena y revisar la propia nunca
   lo muestra.

   ⚠️ Nada de `display` sin `:not([hidden])`. Un `.bk-cd{display:flex}` pelado
   le gana al display:none de [hidden] y deja el panel abierto en todo el sitio
   — ya pasó con Brook.
   ========================================================================= */

.bk-cd-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  background: rgba(43, 43, 43, .45);
  z-index: 90;
  animation: bk-cd-fade .18s ease-out;
}

.bk-cd:not([hidden]) {
  position: fixed;
  z-index: 91;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border-left: 1px solid rgba(121, 87, 87, .22);
  box-shadow: -18px 0 46px -24px rgba(43, 43, 43, .55);
  animation: bk-cd-entra .22s ease-out;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@keyframes bk-cd-fade { from { opacity: 0; } }
@keyframes bk-cd-entra { from { transform: translateX(100%); } }

/* Quien pidió menos movimiento en su sistema no recibe el deslizamiento. */
@media (prefers-reduced-motion: reduce) {
  .bk-cd:not([hidden]),
  .bk-cd-overlay:not([hidden]) { animation: none; }
}

.bk-cd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 26px var(--edge) 22px;
  border-bottom: 1px solid rgba(121, 87, 87, .18);
}

.bk-cd-titulo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wine);
}

.bk-cd-cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px es el mínimo táctil cómodo: cerrar por error no cuesta una venta,
     pero no poder cerrar sí molesta, y el 95,64% del tráfico es un pulgar. */
  width: 44px;
  height: 44px;
  margin: -11px -11px -11px 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

.bk-cd-body { padding: 24px var(--edge) 30px; }

.bk-cd-items { display: flex; flex-direction: column; gap: 14px; }

.bk-cd-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(121, 87, 87, .22);
}

.bk-cd-item:last-child { border-bottom: 0; }

.bk-cd-foto {
  flex: none;
  width: 58px;
  height: 73px;
  object-fit: cover;
}

.bk-cd-datos { flex: 1; min-width: 0; }

.bk-cd-nombre {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.25;
  margin-bottom: 4px;
  color: var(--ink);
}

.bk-cd-item .price .price-now { font-size: 1rem; }

.bk-cd-quitar {
  flex: none;
  font-size: .72rem;
  color: var(--cacao);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 2px;
}

.bk-cd-quitar:hover { color: var(--wine); }

.bk-cd-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(121, 87, 87, .25);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cacao);
}

.bk-cd-total .price .price-now { font-size: 1.3rem; color: var(--ink); }

.bk-cd-envio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 16px;
  font-size: .76rem;
  line-height: var(--lh-texto);
  color: var(--ink);
}

.bk-cd-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--wine);
  color: var(--papel);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

/* «Ir al carrito» sobra estando ya dentro del carrito: sería un botón que
   lleva a donde uno está parado. Se esconde acá y no en PHP porque el cuerpo
   del panel se reimprime como fragmento de WooCommerce, y ese fragmento se
   pide siempre a la URL del carrito —así que `is_cart()` da true venga la
   petición de donde venga—. La clase del `body`, en cambio, sí describe la
   página donde el panel se está viendo. */
.woocommerce-cart .bk-cd-ir { display: none; }

.bk-cd-body .btn + .btn { margin-top: 10px; }

.bk-cd-vacio {
  margin-bottom: 14px;
  font-size: .9rem;
  color: var(--cacao);
}

/* El aviso de «ese ebook ya está en tu carrito» (26-08).

   No es un error, así que no lleva rojo ni el lenguaje de una falla: es arena
   con trama de mantel y filete vino, el mismo par que ya marca las promesas
   del sitio. Va sobre `--ink`, que sobre arena da 10,94:1 (§3.l).

   Lo pone el JS arriba del cuerpo del desplegable, justo encima de la lista
   que ya muestra el ebook adentro: el aviso solo tiene que decir POR QUÉ no se
   sumó otro, no qué hay en el carrito. */
.bk-cd-aviso {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--wine);
  background: var(--sand);
  color: var(--ink);
  font-size: .88rem;
  line-height: var(--lh-texto);
  border-radius: var(--r-caja);
}

/* ---------- Sello «100% probado» ----------
   Estas reglas vivían en product.css, o sea solo se aplicaban en la ficha. El
   sello también se usa en el home, en contacto y en el carrito, y ahí salía sin
   estilo: un <span> en línea con el texto desbordado, chocando con el título de
   al lado. Es la sexta vez que este proyecto tropieza con lo mismo — componente
   compartido, hoja compartida. */
.sello-circulo {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--wine);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--white);
  color: var(--wine);
}

.sello-circulo b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1;
}

.sello-circulo i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 5.5px;
  letter-spacing: .05em;
  margin-top: 1px;
  line-height: 1.2;
}

/* ---------- La moneda dentro de un precio de WooCommerce ----------
   `brooklyn_price_format()` mete `<span class="currency">USD</span>` dentro del
   marcado que dibuja WooCommerce en el resumen del checkout, en los correos y
   en Mi cuenta. Ahí no hay ningún `.price` que lo envuelva, así que la regla
   `.price .currency` no lo alcanzaba y el «USD» salía del mismo tamaño que el
   número — en el total del checkout se leía «34 USD» con las dos partes
   igual de grandes, justo al revés de la regla de §3.n (número protagonista,
   moneda chica).

   Va en `em` a propósito: el mismo span aparece en una línea de 14px y en un
   total de 30px, y tiene que encogerse en proporción. El color se hereda para
   no reintroducir un problema de contraste en un fondo que no controlamos. */
.currency {
  font-size: .58em;
  font-weight: 500;
  letter-spacing: .06em;
}

/* ---------- Tarjeta de producto compacta ----------
   `.pcard-foto` / `.pcard-cuerpo` estaban definidas SOLO bajo `.bk-home`, pero
   el mismo marcado se usa en el 404 y en el carrito vacío. Ahí quedaban sin
   estilo: la foto no llenaba su caja y el título salía a tamaño de titular,
   con dos tarjetas enormes ocupando la pantalla.

   El encabezado se apunta por contenedor y no por etiqueta porque el home usa
   `h3` y el 404 usa `h2` — el nivel lo manda el orden de encabezados de cada
   página, no el diseño de la tarjeta. */
/* Contenedor base de la tarjeta. Vivía SOLO en collection.css, así que en el
   home, Postres, la búsqueda, el carrito vacío y el 404 la tarjeta no tenía
   ni borde ni fondo propio: se confundía con el punteado del fondo de la
   página. `collection.css` puede seguir redeclarando lo mismo sin problema —
   misma especificidad, mismo valor. */
.pcard {
  background: var(--white);
  border: 0;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
  /* `overflow: hidden` es lo que recorta la foto al radio de la tarjeta: sin
     esto la imagen sobresale por las cuatro esquinas. */
  overflow: hidden;
}

/* 4:5 — el formato en que están tomadas TODAS las fotos de producto
   (1080x1350 y sus equivalentes: 1120x1400, 896x1400, 768x1200). Estaba en
   cuadrado, así que la tarjeta recortaba el 20% de cada foto. Ver la regla de
   formato al final de esta hoja. */
.pcard-foto {
  position: relative;
  display: block;
  aspect-ratio: var(--foto-producto);
  overflow: hidden;
  background: var(--sand);
}

.pcard-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pcard-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 10px 11px 11px;
}

.pcard-cuerpo h2,
.pcard-cuerpo h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.14;
  margin: 0;
}

.pcard-cuerpo h2 a,
.pcard-cuerpo h3 a { color: inherit; text-decoration: none; }

.pcard-cuerpo .btn { margin-top: auto; }

/* La insignia, la bajada y el precio vivían bajo `.bk-home`, o sea en la hoja
   del home. Es la misma falla que este proyecto ya arrastra nueve veces: el
   componente se ve bien en la página que le da nombre y sale roto en la ajena.
   Con la colección adoptando el look de «La Carta» (decisión de Ignacio,
   15-08) son tres páginas usando la misma tarjeta, así que la base viene acá.

   El precio en Young Serif y vino es lo que distingue a esta tarjeta: el vino
   `#6E2C34` es el color de acción de la marca y da 10,13:1 sobre blanco. */

/* Una sola insignia por tarjeta, arriba a la derecha (decisión de Ignacio,
   23-08). Antes eran dos —la editorial abajo a la izquierda y el descuento
   arriba a la derecha— y la editorial se comía la esquina de la foto sin
   aportar a la decisión de precio, que es lo que se compara entre cuatro
   portadas parecidas en un teléfono.

   Va en vino sólido sobre blanco: 10,13:1, el mayor contraste de la paleta, y
   es lo que la hace resaltar sobre cualquier foto. El terracota que ocupaba
   esta esquina da 4,94:1 sobre ink y se disolvía sobre las fotos claras del
   catálogo, que son la mayoría. La sombra la despega de la foto sin agregar
   otro color. */
.pcard-badge {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background: var(--wine);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 6px 9px;
  box-shadow: 0 2px 10px rgba(43, 43, 43, .28);
  border-radius: 999px;
}

.pcard-bajada {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tinta-2);
  /* Dos líneas y corta. Con bajadas de largo distinto, el precio y el botón de
     cada tarjeta caen a distinta altura y la fila se lee desordenada — que es
     justo lo que pasaba en el home. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* El precio empuja hacia abajo: título y bajada quedan arriba, precio y botón
   alineados al pie en todas las tarjetas de la fila. */
.pcard-precio { margin-top: auto; padding-top: 6px; }

/* PRECIOS EN WORK SANS (pedido de Janice, 30-08)
   Los números de precio estaban en Young Serif. Pasan a `--body` con peso 600:
   a 400 —el peso con el que se dibuja un serif— Work Sans queda visiblemente
   más liviano y el precio deja de ser el protagonista del bloque.
   `tabular-nums` para que las cifras no bailen de ancho entre productos.
   Las ANOTACIONES sobre la cifra —«USD», el comparativo tachado y la
   conversión de moneda— siguen en `--mono` por la regla de §3.n. */
.pcard-precio .price-now {
  font-family: var(--body);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  color: var(--wine);
  font-variant-numeric: tabular-nums;
}

.pcard-precio .price-was { font-family: var(--mono); font-size: 11.5px; }

/* ---------- Etiqueta «Precio especial» ----------
   Cierra la escalera del Bundle —precio de lista, precio con descuento por
   separado, precio especial— en la ficha, el home y la colección. Ocupa la
   línea entera para que el monto grande quede debajo y no al lado: el número
   es el protagonista y la etiqueta solo lo nombra.
   ⚠️ La clase se llama igual que el texto que imprime a propósito. Se llamaba
   `.oferta-hoy`, y al cambiar el texto en el marcado la clase quedó como
   `Precio-especial` —con mayúscula, o sea sin ninguna regla que la tomara—:
   perdió el resalte, dejó de ocupar la línea y además cayó en la regla
   genérica de `span` de la que los `:not()` de más abajo la excluían, así que
   se dibujaba como texto secundario a la izquierda del precio. */
.precio-especial {
  flex-basis: 100%;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wine);
}

/* ---------- Formulario de búsqueda ----------
   Compartido entre la página de resultados y el 404 (vía searchform.php). Las
   reglas vivían en busqueda.css, que solo carga en los resultados, así que en
   el 404 el buscador salía con el marcado pelado de WordPress. */
.busqueda-form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin-inline: auto;
}

.busqueda-form input[type="search"] {
  flex: 1;
  min-width: 0;
  /* 16px exactos: por debajo, iOS hace zoom al enfocar. */
  font-size: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(43, 43, 43, .25);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
}

.busqueda-form input[type="search"]:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(110, 44, 52, .1);
}


/* ============================================================================
   Grilla y tarjeta de producto — SALDO DE DEUDA (20-08)
   ----------------------------------------------------------------------------
   Esto vivía en `collection.css`, y por eso esa hoja se encolaba a la fuerza en
   la búsqueda, el 404, el carrito vacío y Postres a pedido: cinco páginas
   cargando la hoja de una sexta para poder dibujar una tarjeta.

   Era la deuda anotada como «lo correcto es que la BASE de .pcard viva en
   components.css». Al rediseñar la colección a «La Carta» se volvió urgente:
   `collection.css` pasó a traer fondo de papel, textura de harina y un puente
   en vino, y nada de eso tiene por qué viajar al 404.

   Regla que queda: lo que se dibuja en más de una página vive acá. La hoja de
   una página solo lleva lo que solo esa página usa.
   ========================================================================= */

.col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Se salta las 3 columnas a propósito: el catálogo son CUATRO ebooks, así que
   una grilla de tres deja siempre una tarjeta sola en la segunda fila. Dos
   columnas hasta los 1000px da 2+2, y de ahí en adelante los cuatro en línea. */
@media (min-width: 700px)  { .col-grid { gap: 20px; } }
@media (min-width: 1000px) { .col-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* ---------- Tarjeta ----------
   La foto, la caja, el título en Young Serif, la bajada, la insignia y el
   precio en vino los pone `components.css`: es el mismo componente que el
   home, la búsqueda, Postres a pedido, el carrito vacío y el 404.

   Antes esta página tenía su propia versión —título en Poppins, precio en
   tinta, foto 4/5— y el mismo ebook se veía distinto según por dónde se
   entrara. Manda el look de «La Carta», así que la que se alineó fue la
   colección.

   Lo único propio de aquí es lo que depende de la grilla de dos columnas y el
   descuento sobre la foto. */

.pcard {
  display: flex;
  flex-direction: column;
  /* Redondeada y sin hilo (Janice, 30-08). Deroga la nota anterior —«cuadrada,
     como todo el sitio»—: el sitio ya no tiene esquinas rectas. */
  border-radius: var(--r-caja);
  border: 0;
  transition: box-shadow var(--t-base), transform var(--t-base);
}

.pcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pcard:hover .pcard-foto img { transform: scale(1.03); }
.pcard-foto img { transition: transform 400ms ease; }

/* Las dos salidas de la tarjeta. «Comprar ahora» en vino y «Agregar al
   carrito» en contorno: el segundo abre el desplegable y deja a la compradora
   en la grilla, que es lo que esta página existe para permitir. */
.pcard-acciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
}

/* A dos columnas la tarjeta mide ~166px por dentro y «Agregar al carrito» caía
   en dos líneas, dejando un botón del doble de alto que el de arriba. Se
   aprieta la caja en vez de acortar el texto: «Agregar» solo no dice a dónde
   va, y el nombre completo es lo que hace obvio que abre el carrito. */
.pcard-acciones .btn {
  padding-inline: 8px;
  font-size: .78rem;
  white-space: nowrap;
}

@media (min-width: 700px) {
  .pcard-acciones .btn { font-size: .84rem; padding-inline: 14px; }
}

/* «Ver qué incluye» como salida secundaria, nunca como el único CTA. El
   original solo tenía este link, y en `btn-ghost`: un borde al 25% de opacidad
   sobre blanco, o sea la señal de «esto se puede tocar» más débil posible,
   justo en el dispositivo donde no existe el :hover que la delata. */
.pcard-link {
  text-align: center;
  font-family: var(--mono);
  font-size: .65625rem;
  letter-spacing: .04em;
  color: var(--cacao);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* 44px de blanco táctil, aunque el texto sea chico. */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcard-link:hover { color: var(--wine); }

/* Con cuatro columnas la tarjeta se ensancha y aguanta más aire. Es el 2% del
   tráfico de esta página, así que es la excepción y no la base. */
@media (min-width: 700px) {
  .pcard-cuerpo { padding: 14px 14px 15px; }
  .pcard-cuerpo h3 { font-size: 18px; }
  .pcard-bajada { font-size: 15px; }
  .pcard-badge { font-size: 11px; padding: 7px 11px; }
}

/* ---------- Vacío ---------- */

.empty-state {
  padding: 60px 0;
  text-align: center;
}


/* ============================================================================
   Bundle, sello y puente — PROMOVIDOS A COMPONENTE COMPARTIDO (20-08)
   ----------------------------------------------------------------------------
   Vivían en `home-brooklyn.css` como `.home-bundle`, `.home-sello` y
   `.home-puente`. Al rediseñar la colección aparecieron los tres otra vez, y
   la primera versión de esa página los volvió a escribir con otro marcado y
   otras medidas: el mismo Bundle se veía de dos formas según por dónde entrara
   la compradora, que es exactamente el problema que «La Carta» existe para
   cerrar.

   El desglose ítem por ítem del home es además mejor que el resumen que traía
   el mockup: imprime los cuatro ebooks con su precio tachado y su precio de
   hoy, así que la escalera 217 → 141 → 119 no hay que creerla, se puede
   auditar línea por línea. Esa es la versión que gana.

   Se renombran con prefijo `.bk-` porque ya no son del home. El marcado es
   idéntico en las dos páginas: cambia solo el ancho del contenedor.
   ========================================================================= */

/* El h2 venía de un selector agrupado con `.home-catalogo h2` y `.home-testi
   h2`; acá viaja con su propio componente. */
.bk-sello h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.16;
  margin: 14px 0 0;
}

/* ---------- Bundle ---------- */

.bk-bundle {
  margin-top: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--borde-caja);
  border-radius: var(--r-caja);
  /* La caja no tiene padding, así que `.bk-bundle-top` toca el borde: sin
     recorte, su fondo y su filete se salen por las esquinas de arriba. */
  overflow: hidden;
}

/* `align-items: center` y no el `stretch` por defecto: el bloque de texto
   —eyebrow + titular de dos líneas + bajada— es más alto que la foto (74x93,
   `flex: none`), así que sin esto la foto se apoyaba arriba y el texto seguía
   varias líneas por debajo de ella. Centrados, los dos comparten eje. Es el
   mismo valor que `escritorio.css` ya declaraba para el Bundle a dos columnas
   del home y la búsqueda; ahora vale en todas las superficies. */
.bk-bundle-top { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-bottom: 1px solid rgba(121, 87, 87, .2); }

.bk-bundle-img { width: 74px; height: 93px; flex: none; overflow: hidden; background: var(--sand); border-radius: var(--r-sm); }
.bk-bundle-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ⚠️ CLASE REPETIDA —(0,3,0)— EN TODOS LOS OVERRIDES DE `.eyebrow` DE ESTA
   HOJA, Y NO ES ADORNO (24-08).

   `product.css` declara un `.eyebrow.eyebrow` GLOBAL (0,2,0) para bajar el
   eyebrow de la ficha a 10,5px en cacao, y carga DESPUÉS que este archivo: con
   la misma especificidad ganaba él, así que cada componente compartido que se
   usa dentro de la ficha perdía su eyebrow. Apareció con los testimonios —vino
   sobre fondo tinta— y volvió a aparecer con el puente al mismo día.

   Repetir la clase deja al componente inmune a esa familia de regla venga de
   la hoja de página que venga. Es el mismo recurso que `base.css` ya usó con
   el propio `.eyebrow`, y la razón por la que un override nuevo acá debe
   escribirse siempre así.

   Los sueltos deliberados por página siguen funcionando: para pisar uno de
   estos hay que ser igual de específico a propósito, que es justo lo que se
   quiere. */
.bk-bundle-top .eyebrow.eyebrow { color: var(--wine); letter-spacing: .14em; font-size: 10px; }

/* h2 Y h3: el nivel del encabezado lo manda el orden de la página, no el
   componente. En el home el Bundle va dentro de la sección de catálogo y es un
   h3; en la colección abre la portada y es un h2. Con el selector apuntando
   solo a `h3`, el título salía en Poppins —la fuente que «La Carta» reemplaza—
   justo en el bloque más caro de la página. */
.bk-bundle-top h2,
.bk-bundle-top h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.15;
  margin: 5px 0 0;
}

.bk-bundle-top > div > p { font-size: 13.5px; line-height: 1.4; color: var(--tinta-2); margin: 5px 0 0; }

/* La cuenta va completa y con los DOS totales. La suma de los precios de venta
   es la que la compradora puede hacer sola mirando la grilla de arriba: si no
   está, la descubre y deja de creer en el resto de la página. */
.bk-bundle-cuenta {
  margin: 0;
  padding: 12px 13px;
  list-style: none;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 2;
  color: var(--tinta-2);
}

.bk-bundle-cuenta li { display: flex; justify-content: space-between; gap: 10px; }
.bk-bundle-cuenta del { color: var(--cacao); text-decoration: line-through; }
.bk-bundle-cuenta b { font-weight: 400; color: var(--ink); }

.bk-bundle-cuenta .total--primero {
  border-top: 1px solid rgba(121, 87, 87, .3);
  margin-top: 7px;
  padding-top: 7px;
}

.bk-bundle-cierre { padding: 0 13px 13px; }

.bk-bundle-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin: 0; }

/* PRECIOS EN WORK SANS (pedido de Janice, 30-08)
   Los números de precio estaban en Young Serif. Pasan a `--body` con peso 600:
   a 400 —el peso con el que se dibuja un serif— Work Sans queda visiblemente
   más liviano y el precio deja de ser el protagonista del bloque.
   `tabular-nums` para que las cifras no bailen de ancho entre productos.
   Las ANOTACIONES sobre la cifra —«USD», el comparativo tachado y la
   conversión de moneda— siguen en `--mono` por la regla de §3.n. */
.bk-bundle-precio b {
  font-family: var(--body);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  color: var(--wine);
}

/* `:not(.precio-especial)`: esa etiqueta trae tamaño y color propios de
   components.css, que carga antes que esta hoja. */
.bk-bundle-precio span:not(.precio-especial) { font-family: var(--mono); font-size: 11.5px; color: var(--cacao); }
.bk-bundle-precio .price-conv { flex-basis: 100%; }

.bk-bundle-pct { font-family: var(--mono); font-size: 11px; color: var(--cacao); margin: 5px 0 0; }
.bk-bundle-cierre .btn { margin-top: 11px; }

.home-vertodos { justify-content: center; width: 100%; margin-top: 6px; }

/* ---------- Sello ---------- */

/* Blanco puro (pedido de Janice, 30-08). Era `--sand` con la trama de mantel.

   ⚠️ Cambiar el fondo de un contenedor obliga a revisar el color de TODO lo
   que vive dentro (regla de §3.l, aprendida cinco veces). Revisado: el titular
   y la bajada van en `--ink` (14,16:1 sobre blanco) y los eyebrows en `--wine`
   (10,13:1), así que el contraste mejora, no empeora. Lo que sí cambia de
   trabajo son las dos cajas interiores y el círculo:

   · `.bk-sello-caja` era blanca sobre arena y se recortaba por color. Ahora es
     blanca sobre blanco, así que la distingue su sombra (`--borde-caja`) y el
     filete vino/sage de la izquierda. Es la misma solución que ya se tomó con
     `.carta-marco` al quitar los bordes.
   · `.sello-circulo--xl` va en `--papel`, que sobre blanco queda como un disco
     apenas cálido: sigue leyéndose porque lleva su propio anillo. */

/* ⚠️ SIN ESQUINAS RECTAS, tampoco en las franjas (31-08).

   Las tres secciones tintadas del tema —el sello en blanco, el puente en vino
   y los testimonios en tinta— eran lo último que quedaba cuadrado. En móvil
   van a sangre y el radio se ve contra el borde de la pantalla; en escritorio
   quedan dentro del contenedor (1180px, o 740 en las páginas de lectura) y ahí
   son un recuadro de verdad, que es donde más se notaba la esquina recta. */
.bk-sello {
  background: var(--white);
  color: var(--ink);
  padding-inline: var(--edge);
  border-radius: var(--r-caja);
}

/* 30px de aire arriba (pedido de Ignacio, 30-08), contra los 20 que le da el
   RITMO VERTICAL ÚNICO. La sección tiene fondo propio, así que este padding se
   pinta DENTRO del recuadro de arena: no agranda el espacio en blanco entre
   secciones —ese lo sigue poniendo el `padding-bottom` de la sección anterior—
   sino el aire interior sobre el círculo «100%».

   ⚠️ CLASE REPETIDA —(0,3,0)— OBLIGATORIA, no es un typo: el ritmo es
   `:is(…) > *`, y `:is()` toma la especificidad de su argumento más alto
   (`.wrap--reading.section > article`, o sea 0,2,1). Con clase simple o doble
   esta regla no se aplicaría, y encima el ritmo vive más abajo en este mismo
   archivo. Va aquí y no en la hoja de una página porque `.bk-sello` se dibuja
   en el home, en Contacto y en la colección, y un componente compartido no
   puede cambiar de medidas según dónde se le suelte.

   ⚠️ Si alguna vez el sello quedara como PRIMER hijo de su plantilla, la regla
   `:is(…) > :first-child` —(0,3,1), con `--sec-borde`— le ganaría a esta. Hoy
   no ocurre en ninguna de las tres. */
.bk-sello.bk-sello.bk-sello {
  padding-top: 30px;
  /* Y 30px abajo (pedido de Ignacio, 31-08), contra los 20 del ritmo.

     ⚠️ EN CONTACTO ESTO NO SE APLICA, Y ES LO CORRECTO: ahí el sello es el
     ÚLTIMO hijo de la plantilla, así que su `padding-bottom` lo pone
     `:is(…) > :last-child` —(0,3,1), con `--sec-borde`— que le gana a este
     (0,3,0). O sea el sello cierra la página con los 40px de borde contra el
     footer, que es la regla del sitio, y lleva 30 cuando tiene una sección
     debajo (home y colección). No hace falta ninguna excepción escrita: la
     especificidad ya resuelve el caso. Verificado midiendo en las tres. */
  padding-bottom: 30px;
}

.bk-sello-top { display: flex; gap: 14px; align-items: center; }

.sello-circulo--xl { width: 78px; height: 78px; background: var(--papel); }
.sello-circulo--xl b { font-size: 22px; }
.sello-circulo--xl i { font-size: 7.5px; letter-spacing: .09em; margin-top: 3px; line-height: 1.3; }

.bk-sello-top .eyebrow.eyebrow { color: var(--wine); }
.bk-sello-top h2 { font-size: 21px; line-height: 1.14; margin: 7px 0 0; }

.bk-sello-lead { margin: 14px 0 0; font-size: 16px; line-height: var(--lh-texto); }

.bk-sello-cajas { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }

/* Las dos cajas del sello —`--politica` y `--apoyo`— declaran su color, no lo
   heredan (regla de §3.l).

   Fondo CRUDO desde el 31-08 (pedido de Ignacio). Venían en blanco puro, que
   desde que la sección pasó a blanco el 30-08 las dejaba blanco sobre blanco:
   se recortaban solo por la sombra y por su filete izquierdo. Con el crudo
   vuelven a distinguirse por color, que es la señal más barata de «esto es una
   caja». Contraste CALCULADO sobre #FCF7F2: cuerpo en `--ink` 13,30:1, eyebrow
   de política en `--wine` 9,52:1, eyebrow de apoyo en `--tinta-2` 8,98:1 —
   los tres muy sobre AA. El filete se conserva: distingue por trazo y no solo por
   color. */
.bk-sello-caja {
  background: var(--crudo);
  color: var(--ink);
  padding: 12px 13px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

.bk-sello-caja--politica { border-left: 3px solid var(--wine); }
.bk-sello-caja--politica .eyebrow.eyebrow { color: var(--wine); letter-spacing: .12em; font-size: 10px; }

.bk-sello-caja--apoyo { border-left: 3px solid var(--sage); }
.bk-sello-caja--apoyo .eyebrow.eyebrow { color: var(--tinta-2); letter-spacing: .12em; font-size: 10px; }

.bk-sello-caja p:last-child { margin: 6px 0 0; font-size: 14.5px; line-height: var(--lh-texto); }

/* ---------- Puente ---------- */

.bk-puente { background: var(--wine); color: var(--papel); padding-inline: var(--edge); border-radius: var(--r-caja); }

/* 30px de cierre abajo (pedido de Ignacio, 30-08), contra los 20 del RITMO
   VERTICAL ÚNICO: la franja tiene fondo vino propio, así que ese aire se pinta
   DENTRO del bloque y el botón «Revisar ebook» quedaba pegado al borde.

   ⚠️ CLASE REPETIDA —(0,3,0)— OBLIGATORIA: el ritmo es `:is(…) > *` y `:is()`
   toma la especificidad de su argumento más alto (0,2,1). Con clase simple o
   doble esto no se aplicaría. Va en el componente y no en la hoja de una página
   porque el puente se dibuja en el home, en la colección y en las 4 fichas
   sueltas, y debe cerrar igual en las tres superficies.

   ⚠️ Si el puente quedara como ÚLTIMO hijo de su plantilla, la regla
   `:is(…) > :last-child` —(0,3,1), con `--sec-borde`— le ganaría a esta. Hoy no
   ocurre en ninguna. */
.bk-puente.bk-puente.bk-puente {
  padding-bottom: 30px;
}
/* Declara tamaño y espaciado además del color, aunque sean los mismos que
   `base.css`: heredarlos dejaba al componente a merced del default de cada
   página, y en la ficha —donde `product.css` baja el eyebrow a 10,5px— el
   bloque salía un punto más chico que en el home. Un componente compartido no
   puede cambiar de tamaño según dónde se le suelte. */
.bk-puente .eyebrow.eyebrow {
  color: #F4EFE9;
  font-size: .72rem;
  letter-spacing: .12em;
}

.bk-puente h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.14;
  margin: 9px 0 0;
  color: var(--papel);
  text-wrap: pretty;
}

.bk-puente > p { margin: 10px 0 0; font-size: 15.5px; line-height: var(--lh-texto); color: rgba(251, 247, 242, .88); }
.bk-puente .btn { margin-top: 15px; }

/* Las dos líneas del botón del puente NO pesan igual (27-08). Con el mismo
   tamaño y grosor el bloque se leía como un rótulo y la acción se perdía;
   ahora manda «Revisar ebook» y el nombre del ebook queda de bajada.

   `display:block` en los dos y no un `<br>`: así el nombre puede tener su
   propio tamaño e interlineado, y si un día se traduce y ocupa dos líneas,
   sigue partiendo por donde tiene que partir.

   La flecha es `::after` sobre la línea de acción y no un carácter dentro del
   texto, para que no viaje a la cadena traducible. (Ojo: el contenido generado
   por CSS SÍ lo anuncian varios lectores de pantalla; lo que se evita acá es
   que un traductor tenga que arrastrar el símbolo, no la lectura.) */
/* `.btn` es `inline-flex` en fila: sin esto las dos líneas se acomodan una al
   lado de la otra y el `display:block` de cada span no hace nada, porque un
   hijo de un contenedor flex es un ítem flex. Columna y `gap: 0` —el `.btn`
   base pone 8px, que acá separaría de más. */
.bk-puente .btn {
  flex-direction: column;
  gap: 0;
  line-height: 1.25;
}

.bk-puente-accion {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

.bk-puente-accion::after {
  content: " \2192";              /* → */
  font-weight: 400;
}

.bk-puente-nombre {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Cacao sobre papel: 6,34:1, pasa AA. No se hereda el color del botón —
     regla dura de §3.l: cada pieza declara el suyo. */
  color: var(--cacao);
}


@media (min-width: 900px) {
  /* `--ancho` y no `--container`: en «Sobre mí» y Contacto la columna de la
     página es `--reading`, y estas franjas quedaban 220px a la izquierda del
     resto del contenido. Ver «ALINEACIÓN HORIZONTAL ÚNICA» al final. */
  .bk-sello,
  .bk-puente { max-width: var(--ancho); margin-inline: auto; }

  .bk-sello-cajas { flex-direction: row; }
  .bk-sello-caja { flex: 1; }
}

/* ---------- El lema de marca ----------
   «Las recetas que uso en mi negocio», en Arapey itálica y en vino. Es la única
   frase del sitio que lleva las dos cosas a la vez, y por eso funciona como
   firma: donde aparece, aparece la promesa entera.

   Vivía en `home-brooklyn.css` como `.home-hero-lema`. Se promueve porque la
   colección —el 70% de las entradas, contra el 6,6% del home— también la
   necesita: una compradora que llega de TikTok al catálogo nunca ve el home, y
   sin esta línea se pierde el eje de marca en la única página que sí visita. */
/* La promesa de marca, en Arapey y en vino. Es la única frase del home que
   lleva las dos cosas a la vez: es el eje que no se diluye. */
.lema {
  font-family: var(--script);
  font-style: italic;
  font-size: 21px;
  line-height: 1.32;
  color: var(--wine);
  margin: 10px 0 0;
}

/* ============================================================================
   Quién te enseña — COMPONENTE COMPARTIDO (25-08)
   ----------------------------------------------------------------------------
   Decimosexta aparición de la trampa del proyecto: el bloque estaba escrito
   DOS veces —`.col-janice` en `collection.css` y `.pdp-janice` en
   `product.css`— y ya había divergido en foto (104x132 contra 96x122), en
   tamaño de titular (20px contra 26 en escritorio) y, sobre todo, en la línea
   de redes.

   🐛 El bug que lo destapó: en la ficha, `+85K TikTok · +30K Instagram` salía
   en cuerpo de 15,5px y color de texto en vez de mono 10,5px en cacao, porque
   `.pdp-janice p` (0,1,1) le ganaba a `.pdp-janice-rrss` (0,1,0). En la
   colección lo habían tapado con `!important`. Acá la línea de redes lleva la
   clase repetida (0,2,0), que gana por número de clases sin necesitar
   `!important` y sobrevive a cualquier `p` de la hoja de una página.
   ========================================================================= */

.bk-quien {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.bk-quien-foto {
  width: 104px;
  flex: none;
  margin: 0;
  overflow: hidden;
  background: var(--sand);
  /* Esquinas redondeadas (pedido de Ignacio, 31-08). Era una de las últimas
     esquinas rectas que quedaban tras la pasada del 30-08.

     ⚠️ El radio va en la CAJA y no en la `img`, y funciona porque la figure ya
     lleva `overflow: hidden`: así el recorte es uno solo y no hay forma de que
     la foto asome por una esquina, que es el defecto que apareció en
     `.bk-bundle` al redondear y el que obligó a poner `overflow` en la caja de
     Janice del home.

     `--r-sm` (8px) y no `--r-caja` (16px): es el radio que ya usan las
     miniaturas de este tamaño —la foto de producto dentro de la cuenta, de
     92-104px—. Un radio de caja de contenido sobre una foto de 104px de ancho
     se lee como una pastilla, no como una fotografía. */
  border-radius: var(--r-sm);
}

/* 🐛 Las «orillas amarillas» (25-08): el arena del fondo asomaba arriba y
   abajo de la foto porque la caja medía 40px más que la imagen.

   Causa raíz: el componente nació llamándose `.bk-janice`, que YA era la clase
   raíz de la plantilla «Sobre mí» — así que el RITMO VERTICAL ÚNICO del final
   de esta hoja le metía `padding-block: var(--sec)` a sus hijos directos, la
   figure incluida. Colisión de nombres, no un problema de layout. Por eso el
   componente se llama `.bk-quien`: un nombre de componente no puede repetir el
   de una raíz de plantilla.

   La proporción va además en la IMAGEN y no en la caja: con `aspect-ratio` en
   el contenedor y `height: 100%` en la imagen, el porcentaje se resuelve
   contra una altura que nadie declaró y el navegador cae a `height: auto`.
   Así la caja mide exactamente lo que mide la foto y no hay fondo que pueda
   asomar. */
.bk-quien-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 104 / 132;
  /* La foto es vertical (792x1400) y la caja también, así que el recorte es
     mínimo. En el bloque de «Sobre mí» esta misma foto se ampliaba 1,6x para
     llenar una caja apaisada y salía con la cabeza cortada. */
  object-fit: cover;
  /* CENTRADO DE LA CARA (pedido de Ignacio, 31-08). Venía en 20%, que es lo
     que centra la CABEZA ENTERA —incluido el pelo, cuyo borde superior está en
     y=0,275 del original—. Medido sobre el archivo con una grilla: la cara
     propiamente tal va de la línea del pelo (y=0,305) al mentón (y=0,555), o
     sea su centro está en y=0,43.

     El porcentaje NO es ese 0,43: `cover` no centra el punto que uno nombra,
     hay que despejarlo. Con la caja en 104/132 y la foto en 792x1400, la
     imagen se escala por el ancho a 183,84px de alto sobre una caja de 132, o
     sea sobran 51,84px. De ahí:

         p = (0,43 · 183,84 − 132/2) / 51,84 = 25,2%  →  25%

     El valor NO depende del tamaño en pantalla porque la proporción de la caja
     es fija: sirve igual a 104px (móvil) que a 190px (escritorio).

     Horizontalmente se queda en 50% y es lo máximo que se puede hacer: la foto
     (ratio 0,566) es MÁS ANGOSTA que la caja (0,788), así que `cover` la
     escala por el ancho y no sobra un solo píxel horizontal que recortar —el
     `object-position` en X no tiene efecto—. Da igual: medida con la misma
     grilla, la cara va de x=0,30 a x=0,70, o sea ya está centrada en el eje
     horizontal por la propia toma. */
  object-position: 50% 25%;
  display: block;
}

/* Clase repetida por la razón del bloque del Bundle: `product.css` declara un
   `.eyebrow.eyebrow` GLOBAL (0,2,0) que carga después de esta hoja, así que
   sin la tercera clase el eyebrow de la ficha salía más chico y más espaciado
   que el de la colección. Declara tamaño y espaciado, no solo color: un
   componente compartido no puede cambiar de tamaño según dónde se le suelte. */
.bk-quien-texto .eyebrow.eyebrow {
  /* El margen también se declara acá: `product.css` pone `margin: 0` a todo
     eyebrow y la colección lo dejaba en los 9px del párrafo, así que el bloque
     de texto arrancaba 9px más abajo en una página que en la otra. */
  margin: 9px 0 0;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--cacao);
}

.bk-quien-texto h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.18;
  margin: 8px 0 0;
}

.bk-quien-texto p {
  margin: 9px 0 0;
  font-size: .96875rem;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
}

.bk-quien-redes.bk-quien-redes {
  font-family: var(--mono);
  font-size: .65625rem;
  letter-spacing: .04em;
  color: var(--cacao);
  margin-top: 10px;
}

@media (min-width: 760px) {
  .bk-quien { gap: 28px; align-items: center; }
  .bk-quien-foto { width: 190px; }
  .bk-quien-texto h2 { font-size: 1.625rem; }
  .bk-quien-texto p { max-width: 56ch; }
}

/* ============================================================================
   Franja de testimonios — COMPONENTE COMPARTIDO (23-08)
   ----------------------------------------------------------------------------
   Estaba escrita dos veces, en `home-brooklyn.css` y en `janice-del-aguila.css`,
   con medidas que ya habían divergido: 16px de separación entre tarjetas contra
   10, titular de 19px contra 22 y `scroll-padding` solo en una. La misma sección
   se veía distinta según por dónde entrara la compradora.

   Decimotercera aparición de la trampa del proyecto —componente compartido
   escrito en la hoja de una página—, cerrada acá de raíz: el marcado vive en
   `brooklyn_seccion_testimonios()` y la apariencia en este bloque.
   ========================================================================= */

.bk-testi {
  background: var(--ink);
  color: var(--papel);
  border-radius: var(--r-caja);
  /* La pista del carrusel se desliza de lado: sin esto asoma por las esquinas
     redondeadas al arrastrarla. */
  overflow: hidden;
}

/* Centrada: la tarjeta del carrusel va centrada en la franja, y un titular
   alineado a la izquierda sobre un contenido centrado deja la sección
   descuadrada. */
.bk-testi-head {
  padding: 0 var(--edge);
  text-align: center;
}

/* Clase repetida por la razón explicada más arriba, en el bloque del Bundle:
   sin ella, en la ficha este eyebrow salía en vino sobre fondo tinta. */
.bk-testi-head .eyebrow.eyebrow {
  color: rgba(251, 247, 242, .65);
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: .09em;
  /* 10px de aire arriba (pedido de Ignacio, 30-08). Va acá, en el componente,
     y no en la hoja de una página: esta franja se dibuja en el home, en «Sobre
     mí», en la colección y en las 5 fichas, y debe verse igual en las cuatro
     superficies. El `padding` cae dentro de la banda de tinta, así que separa
     el rótulo del borde superior sin mover el ritmo entre secciones. */
  padding-top: 10px;
}

.bk-testi-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  margin: 6px 0 0;
  color: var(--papel);
}

.bk-testi-stage { position: relative; margin-top: 10px; }

.bk-testi .testi-track {
  display: flex;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Poco aire arriba: el título y la tarjeta son la misma unidad, separarlos
     de más los desarma en dos bloques sueltos dentro de la franja. */
  padding: 8px var(--edge) 12px;
  scrollbar-width: none;
}

.bk-testi .testi-track::-webkit-scrollbar { display: none; }

/* Ancho, radio y sombra de `.tcard` son el default compartido de más arriba
   (asomo + esquinas redondeadas): esta sección solo ajusta el tamaño de letra
   de la cita. */
.bk-testi .tcard blockquote { font-size: 16.5px; }


/* En escritorio la franja se encolumna, igual que el resto del contenido. La
   regla estaba duplicada en las dos hojas por página y viaja con el
   componente. */
/* El encolumnado lo resuelve ahora `--ancho` en el bloque de alineación del
   final: la franja de testimonios la usan el home (columna ancha) y «Sobre mí»
   (columna de lectura), y con `--container` fijo quedaba desalineada en la
   segunda. */


/* ============================================================================
   LA ENTREGA — el bloque vino que entrega el archivo (promovido 27-08)
   ----------------------------------------------------------------------------
   Nació en `cart.css` para la pantalla de «gracias por tu compra». El 27-08
   pasó a usarse también en «Mi cuenta» —escritorio y pestaña de descargas—,
   que es la otra pantalla donde se cumple la promesa de «acceso de por vida»,
   así que se promueve ANTES de la segunda copia y no después.

   No es solo higiene: `cart.css` se carga únicamente en el carrito y el
   checkout, así que dejarlo ahí habría dibujado el bloque **sin un solo
   estilo** en la cuenta. La trampa del proyecto en su versión más cara.

   El marcado lo arma `brooklyn_entrega()` en `inc/template-tags.php`, una sola
   vez para las tres pantallas.
   ========================================================================= */

/* ---------- La entrega ---------- */

.bk-entrega {
  background: var(--wine);
  color: var(--papel);
  padding: 16px;
  border-radius: var(--r-caja);
}

/* El rótulo del bloque, en el mismo registro que `.carta-filete` pero invertido:
   acá el fondo es vino, así que el filete y el texto van en papel. Sin él, el
   bloque más importante de la página era el único sin nombre. */
.bk-entrega-rotulo.bk-entrega-rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251, 247, 242, .85);
}

.bk-entrega-rotulo::before,
.bk-entrega-rotulo::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(251, 247, 242, .3);
}

/* Un grupo = un producto con todos sus archivos. Existe porque las descargas
   llegan una por ARCHIVO: Cheesecakes entrega el PDF y el video, y sin agrupar
   se imprimía la ficha del producto dos veces, como si hubiera comprado dos
   ebooks iguales. */
.bk-entrega-grupo + .bk-entrega-grupo {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dotted rgba(251, 247, 242, .3);
}

.bk-entrega-item { display: flex; gap: 13px; align-items: center; }

.bk-entrega-img { width: 74px; height: 93px; flex: none; overflow: hidden; background: var(--sand); border-radius: var(--r-sm); }
.bk-entrega-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bk-entrega-datos { flex: 1; min-width: 0; }

.bk-entrega-datos h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.14;
  margin: 0;
  color: var(--papel);
}

/* ⚠️ 10,5px, y se probó subirlo a 11 para unificarlo con el resto del mono de
   la pantalla. NO SE PUEDE, y la razón está medida: en un teléfono de 390px la
   columna de texto de esta tarjeta mide 204px, y «2 archivos · acceso de por
   vida» a 11px se pasa y ENVUELVE EN DOS LÍNEAS bajo el nombre del producto. Un
   subtítulo partido en dos por medio píxel de fuente es peor que la diferencia
   que ese medio píxel corrige.

   Así que la tarjeta vino conserva su propia escala compacta —10,5 para sus dos
   textos de apoyo, este y `.bk-entrega-correo`—, coherente hacia adentro. */
.bk-entrega-datos p {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(251, 247, 242, .75);
  margin: 5px 0 0;
}

/* 62px: el elemento más grande de la página. Es lo único que la compradora
   vino a hacer acá. */
.bk-entrega-btn {
  margin-top: 14px;
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  background: var(--papel);
  color: var(--wine);
  font-family: var(--body);
  font-weight: 600;
  font-size: 17.5px;
  cursor: pointer;
  padding: 8px 16px;
  box-sizing: border-box;
  transition: transform var(--t-fast);
  border-radius: 999px;
}

/* 🐛 EL BOTÓN SALÍA SUBRAYADO, y no solo en la cuenta: también en «gracias por
   tu compra», donde es el elemento más grande de la pantalla. `.entry
   a:not(.btn)` pesa (0,2,1) —es la regla de enlaces del contenido editorial— y
   le ganaba a `.bk-entrega-btn` (0,1,0), así que le imponía el subrayado y su
   propio color. Las tres pantallas que usan este bloque cuelgan de `page.php`,
   o sea viven todas dentro de `.entry`.

   ⚠️ Hacen falta TRES clases, no dos, y el primer intento se quedó corto: la
   `:not(.btn)` de la otra regla CUENTA COMO CLASE, así que `.entry a:not(.btn)`
   pesa (0,2,1) y con (0,2,0) se empataba en clases y se perdía por el elemento.
   Verificado en pantalla: con dos clases el subrayado seguía ahí. */
.bk-entrega-btn.bk-entrega-btn.bk-entrega-btn {
  color: var(--wine);
  text-decoration: none;
}

/* ---------- Cuando el botón dice un NOMBRE DE ARCHIVO ----------

   🔴 Con varios archivos el botón deja de decir «Descargar» y pasa a decir cuál
   —«Video: Pie de limón paso a paso (MP4)»—, y a 17,5px en semibold eso ENVUELVE
   EN DOS LÍNEAS en un teléfono. Medido en la ficha del Bundle a 390px: los
   botones con nombre salían de **64px** y el que dice «Descargar» de 62, así que
   una fila de seis botones idénticos tenía alturas distintas. Y a esa escala el
   nombre del archivo pesaba casi lo mismo que el nombre del producto (19px
   serif), o sea el dato secundario competía con el principal.

   17,5 en semibold es la medida de una ACCIÓN. Un nombre de archivo es una
   etiqueta: va en 15px con peso 500, que además hace que las dos líneas quepan
   dentro de los 62px de la pastilla y todos los botones vuelvan a medir igual.
   El área táctil no cambia. */
.bk-entrega-btn--archivo {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.bk-entrega-btn.bk-entrega-btn.bk-entrega-btn:hover { background: var(--white); color: var(--wine-dark); }
.bk-entrega-btn:active { transform: scale(.98); }

/* ---------- Variante compacta: «Mi cuenta» ----------
   En «gracias por tu compra» hay uno o dos archivos y el botón mide 62px a
   propósito: es lo único que la compradora vino a hacer ahí. En la cuenta de
   alguien que ya compró varias veces son doce botones seguidos —solo el Bundle
   entrega seis—, y a 62px cada uno eso son 750px de botones para un producto.

   Lo único que cambia es la densidad. El bloque, los grupos, la foto y los
   textos son exactamente los mismos: no es una segunda versión del componente.
   El área táctil sigue sobre el mínimo de 44px. */
.bk-entrega--compacta .bk-entrega-btn {
  min-height: 48px;
  margin-top: 8px;
  font-size: 15px;
  padding: 8px 14px;
}

.bk-entrega--compacta .bk-entrega-grupo + .bk-entrega-grupo {
  margin-top: 16px;
  padding-top: 16px;
}

/* ⚠️ El texto va en papel al 80%, no en un color heredado.

   Renderizada por primera vez con un pedido real (27-08), esta línea salía en
   **rojo oscuro sobre el vino**: solo se leía el correo, que va en `<strong>`
   con color propio. La frase que lo introduce era invisible. Es la misma
   familia de bug que ya mordió cinco veces —un texto sin color propio dentro de
   un contenedor cuyo fondo cambió— y la regla de §3.l existe justo para esto:
   ningún componente hereda `color`, cada uno declara el suyo. */
/* Aire simétrico alrededor del punteado —14 y 14—: antes eran 16 y 14, o sea
   la misma línea con distinto espacio a cada lado. El tamaño es el mismo 10,5
   del subtítulo de arriba: la escala interna de la tarjeta vino. */
.bk-entrega-correo.bk-entrega-correo {
  overflow-wrap: anywhere;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dotted rgba(251, 247, 242, .3);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: var(--lh-texto);
  color: rgba(251, 247, 242, .8);
}

.bk-entrega-correo strong { font-weight: 500; color: var(--papel); }


/* ============================================================================
   RITMO VERTICAL ÚNICO DE TODO EL SITIO (23-08)
   ----------------------------------------------------------------------------
   Pedido de Ignacio: 20px entre secciones en toda la web, repartidos como
   10px abajo de una y 10px arriba de la siguiente; y 20px directo cuando no
   hay sección vecina de ese lado, o sea contra el header y contra el footer.

   Se aplica a los CONTENEDORES DE SECCIONES —la raíz de cada plantilla—, no
   sección por sección. Por eso las hojas por página ya no declaran espacio
   vertical de sección: si lo hicieran volveríamos a tener el ritmo escrito en
   sesenta lugares, con valores entre 8 y 48px que nadie eligió en conjunto,
   que es de donde venimos. **Una sección nueva no necesita espaciado: lo
   hereda de acá. Y para cambiar el ritmo del sitio entero se toca UN número,
   `--sec` en tokens.css.**

   ⚠️ Va en padding y no en margin a propósito: las secciones con fondo propio
   —la franja vino del puente, la tinta de los testimonios, las bandas de
   Postres— tienen que pintar su color hasta tocarse entre ellas. Con margin
   quedaría una franja de papel entre dos bandas de color.

   ⚠️ Las barras fijas de compra quedan fuera: son capa de interfaz apoyada en
   el borde inferior, no una sección del documento.

   Para sumar una plantilla nueva basta agregar su raíz a las listas de abajo.
   No hay nada más que tocar.

   ⚠️ ESTA REGLA LE GANA A LAS HOJAS POR PÁGINA, y es a propósito. `:is()` toma
   la especificidad de su argumento más alto —acá (0,2,0) por
   `.wrap--reading.section`—, así que un `padding-top` escrito después en la
   hoja de una página NO se va a aplicar. Es el comportamiento que se quiere:
   el ritmo vertical es un invariante del sitio y ninguna página debería poder
   romperlo en silencio. Si una sección necesita más aire, el lugar es su
   composición interna (una caja adentro), no su espacio de sección.
   ========================================================================= */

:is(
  .bk-home, .coleccion, .col-portada, .pdp, .bk-janice, .bk-contacto,
  .busqueda, .bk-404, .bk-cart, .bk-checkout-wrap, .bk-gracias,
  .bk-descarga, .woocommerce-account .woocommerce,
  .wrap--reading.section, .wrap--reading.section > article
) > * {
  padding-block: var(--sec);
  margin-block: 0;
}

:is(
  .bk-home, .coleccion, .col-portada, .pdp, .bk-janice, .bk-contacto,
  .busqueda, .bk-404, .bk-cart, .bk-checkout-wrap, .bk-gracias,
  .bk-descarga, .woocommerce-account .woocommerce,
  .wrap--reading.section, .wrap--reading.section > article
) > :first-child {
  /* ⚠️ `--sec-hero` (30px) y no `--sec-borde` (40px): el aire contra el HEADER
     es más corto que el aire contra el footer, a propósito. Ver la nota del
     token en `tokens.css`. Pedido de Ignacio (31-08), para todas las páginas. */
  padding-top: var(--sec-hero);
}

/* `.col-portada` queda fuera de esta: agrupa el hero y el Bundle, y su último
   hijo NO cierra la página —abajo sigue la grilla del catálogo—. */
:is(
  .bk-home, .coleccion, .pdp, .bk-janice, .bk-contacto,
  .busqueda, .bk-404, .bk-cart, .bk-checkout-wrap, .bk-gracias,
  .bk-descarga, .woocommerce-account .woocommerce,
  .wrap--reading.section, .wrap--reading.section > article
) > :last-child {
  padding-bottom: var(--sec-borde);
}

/* Un contenedor vacío no ocupa ritmo. WooCommerce imprime siempre
   `.woocommerce-notices-wrapper`, tenga algo que decir o no: sin esta regla
   se llevaría 30px del primer pantallazo para no mostrar nada. */
:is(
  .bk-home, .coleccion, .col-portada, .pdp, .bk-janice, .bk-contacto,
  .busqueda, .bk-404, .bk-cart, .bk-checkout-wrap, .bk-gracias,
  .bk-descarga, .woocommerce-account .woocommerce,
  .wrap--reading.section, .wrap--reading.section > article
) > :empty {
  padding-block: 0;
}

/* Las barras fijas conservan SU propio espaciado: no son secciones.

   ⚠️ Va con las clases repetidas. El `:is(...)` del ritmo de más arriba pesa
   (0,2,1) —se lo da `.wrap--reading.section > article`, su argumento más
   alto—, así que una regla (0,2,0) como `.coleccion > [data-barra-fija]` NO
   le gana por más abajo que esté en el archivo. Es la misma trampa de
   especificidad que ya mordió con `woocommerce-layout.css`: contar, no
   confiar en el orden.

   Las de la colección y la ficha pasaron a `position: fixed` el 25-08 —ver la
   nota en `collection.css`—, así que ya no ocupan flujo. Como el `:last-child`
   de la plantilla pasa a ser la barra, los 20px contra el footer los tiene
   que llevar la sección que de verdad cierra la página, que es la anterior. */
.coleccion.coleccion > [data-barra-fija][data-barra-fija],
.pdp.pdp > [data-barra-fija][data-barra-fija],
.bk-cart.bk-cart > [data-barra-fija][data-barra-fija] { padding-block: 10px; }

.coleccion.coleccion > :has(+ [data-barra-fija]),
.pdp.pdp > :has(+ [data-barra-fija]) { padding-bottom: var(--sec-borde); }

/* Los contenedores no suman espacio propio: el ritmo lo ponen sus hijos. */
.bk-home,
.coleccion,
.col-portada,
.pdp,
.bk-janice,
.bk-contacto,
.busqueda,
.bk-404,
.bk-cart,
.bk-checkout-wrap,
.bk-gracias,
.woocommerce-account .woocommerce,
.wrap--reading.section { padding-block: 0; }

/* ============================================================================
   ALINEACIÓN HORIZONTAL ÚNICA (23-08)
   ----------------------------------------------------------------------------
   Pedido de Ignacio junto con el ritmo vertical: que toda la web quede
   alineada. En escritorio no lo estaba, y la causa era una sola:

     · Las páginas de lectura —«Sobre mí», Contacto, legales— encolumnan su
       contenido a `--reading` (740px), o sea el texto arranca a ~295px.
     · Las franjas compartidas que esas mismas páginas usan —la garantía, el
       puente, los testimonios— se encolumnaban a `--container` (1180px), o sea
       a ~75px. Ochenta caracteres de diferencia entre una sección y la
       siguiente, dentro de la misma página.
     · Y las bandas a sangre (la franja de datos del home, el cierre de «Sobre
       mí», los datos de Contacto, el puente de Postres) no se encolumnaban en
       absoluto: su texto arrancaba en `--edge`, a 32px del borde de la
       pantalla, muy a la izquierda de todo lo demás.

   La solución es `--ancho`: cada plantilla declara cuál es su columna de
   contenido, y todo lo que vive dentro la respeta. Un componente compartido
   deja de tener que saber en qué página está.
   ========================================================================= */

:root { --ancho: var(--container); }

.bk-janice,
.bk-contacto,
.bk-404,
.wrap--reading.section { --ancho: var(--reading); }

/* Bandas a sangre: el FONDO sigue llegando a los dos bordes de la pantalla
   —es lo que las hace bandas— pero su contenido se alinea con la columna de
   la página.

   La fórmula reproduce exactamente lo que hace `.wrap`: la columna se centra
   con `max-width: --ancho` y encima lleva `--edge` de aire propio, así que su
   texto arranca en `(100% - ancho)/2 + edge`. Sin ese `+ edge` la banda queda
   32px a la izquierda de todo lo demás, que es la mitad del problema que se
   viene a arreglar.

   El `max()` deja el móvil intacto: bajo el ancho de la columna el segundo
   término es menor y gana `--edge`. */
.home-franja,
.jan-stats,
.jan-cierre,
.con-datos,
.bk-testi-head,
.bk-testi .testi-track {
  padding-inline: max(var(--edge), calc((100% - var(--ancho)) / 2 + var(--edge)));
}

/* La franja de testimonios cierra con 30px abajo en vez de los `--sec` del
   ritmo (24px entre el 23-08 y el 31-08, cuando Ignacio lo subió a 30): los
   puntos del carrusel quedaban muy pegados al borde de la banda.
   No es «separación entre secciones» sino aire interior: la franja tiene fondo
   de tinta, así que ese padding se pinta oscuro y no abre papel entre esta
   sección y la siguiente.
   ⚠️ Va con la clase repetida —(0,3,0)— para ganarle al «RITMO VERTICAL ÚNICO»
   de más arriba, que es (0,2,0), sin depender del orden de las reglas. */
.bk-testi.bk-testi.bk-testi { padding-bottom: 30px; }


/* ============================================================================
   SELLO EN LÍNEA — «Garantía de Brooklyn» (compartido desde el 26-08)
   ----------------------------------------------------------------------------
   La versión corta del sello: círculo, titular y una línea de argumento sobre
   arena con trama de mantel. La dibujan la ficha de producto y el cierre del
   carrito, así que vive acá y no en `product.css`, que es donde nació.

   Reemplaza a la garantía de devolución (decisión del 14-08): el argumento ya
   no es «te devolvemos la plata» sino «esto está probado vendiendo», que no lo
   puede copiar nadie que no tenga un negocio de pastelería andando.

   Declara su `color`, no lo hereda — regla dura de §3.l: ningún componente de
   fondo claro puede heredar color, o vuelve el bug de los testimonios
   ilegibles (arena sobre blanco, 1,29:1).
   ========================================================================= */

.sello--linea {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--sand);
  background-image: var(--mantel);
  color: var(--ink);
  padding: 12px 13px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

.sello--linea .sello-texto { min-width: 0; }

.sello--linea p {
  margin: 0;
  font-size: 14.5px;
  line-height: var(--lh-texto);
  color: var(--ink);
}

/* Variante con ícono en vez del círculo «100% PROBADO».

   El sello nació para la garantía, donde el círculo ES el argumento. En «Mi
   cuenta» la misma pieza dice otra cosa —«¿algo no te calza?»— y un sello de
   garantía ahí sería un argumento de venta en una pantalla de posventa. Misma
   geometría (44px, círculo, filete vino, fondo blanco) para que las dos se
   reconozcan como el mismo objeto; solo cambia lo que va adentro.

   `flex: none` no es cosmético: sin él el círculo se comprime a un óvalo
   estrecho cuando el texto de al lado es largo, que es exactamente como se veía
   al primer intento. */
.sello-icono {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--wine);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--wine);
}

/* El título del sello: es el gancho, va en el único color de acción del sitio. */
.sello--linea .sello-titulo {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.2;
  color: var(--wine);
  margin-bottom: 4px;
}

/* ============================================================================
   LA CARTA — marco compartido (26-08)
   ----------------------------------------------------------------------------
   Papel cálido, harina espolvoreada y doble filete vino: es la pieza que le da
   nombre a toda la dirección visual. Nació dentro de `product.css` como
   `.pdp-carta-marco` y hoy la usan la ficha («Las recetas») y el carrito («tu
   cuenta»), así que vive acá.

   Es la misma trampa que este proyecto ya pisó dieciséis veces —CSS de un
   componente compartido viviendo en la hoja de una sola página— y lo que la
   hace invisible es que el componente se ve bien en la página que le da
   nombre. Se promueve antes de usarla dos veces, no después.

   El segundo filete va con `outline` y no con un segundo borde para no sumar
   al box model: así el marco doble no descuadra el ancho.
   ========================================================================= */

.carta-marco {
  background: var(--white);
  background-image: var(--harina);
  background-size: var(--harina-size);
  color: var(--ink);
  padding: 22px 18px 20px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

/* Eyebrow con filetes a los lados — el gesto de encabezado de carta impresa.
   Es el mismo recurso de `.eyebrow--regla`, pero simétrico: el título va
   centrado, así que la regla no puede ir solo a un lado. */
.carta-filete {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wine);
}

/* ⚠️ Cuando el rótulo es un ENCABEZADO REAL y no un `<p>` —el checkout usa
   `<h2>`, porque ahí «Tus datos» y «Cómo quieres pagar» son las dos secciones
   de la página y un lector de pantalla tiene que poder saltar entre ellas— las
   reglas editoriales de `.entry h2` —(0,1,1)— le ganan al componente (0,1,0) y
   lo devuelven a Young Serif de 22px con 28px de margen arriba.

   Se sube a (0,2,0) scopeándolo al marco, que es donde el rótulo siempre vive.
   Es la misma familia de colisión que ya obligó a scopear toda «la cuenta» bajo
   `.carta-marco`.

   El carrito vacío y el 404 lo usan FUERA del marco (su portada no es una caja)
   y les pasa exactamente lo mismo: viven dentro de `.entry`, donde `.entry p`
   pesa (0,1,1). Van en el mismo selector y no en una copia — un rótulo que se
   dibuja distinto según la página es justo lo que este componente vino a
   cerrar. */
.carta-marco .carta-filete,
.bk-vacio-aviso .carta-filete {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wine);
}

.carta-filete::before,
.carta-filete::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(110, 44, 52, .35);
}

/* Cierre de la carta. Puramente ornamental y por eso `aria-hidden` en el
   marcado: un lector de pantalla no debe anunciar un rombo. */
.carta-pie {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11px;
  line-height: 1;
  color: rgba(110, 44, 52, .45);
}

/* ============================================================================
   LA CUENTA — los renglones del pedido (compartido desde el 26-08)
   ----------------------------------------------------------------------------
   El pedido se dibuja igual en el CARRITO y en el RESUMEN DEL CHECKOUT: son el
   mismo objeto en dos pasos del mismo recorrido, y hasta hoy eran dos piezas
   distintas —el carrito tenía «la cuenta» de La Carta y el checkout una tabla
   blanca de WooCommerce con las filas convertidas a flex—. La misma compra se
   veía de dos formas según el paso, que es exactamente lo que la dirección
   visual existe para cerrar.

   Se promueve ANTES de usarlo dos veces, no después: es la trampa que este
   proyecto ya pisó dieciocho veces (CSS de un componente compartido viviendo
   en la hoja de una sola página) y lo que la hace invisible es que el
   componente se ve bien en la página que le da nombre.

   ⚠️ Todo va scopeado bajo `.carta-marco` —(0,2,0)— y no suelto. No es
   decoración: la cuenta vive dentro de `.entry` (la imprime `the_content()`),
   y `.entry ul`, `.entry li` y `.entry h2` son (0,1,1). Sin las dos clases,
   el editorial le gana al componente y pasa lo que venía pasando sin que nadie
   lo viera: la lista de renglones quedaba con `padding-left: 20px` —o sea los
   productos 20px a la derecha del total, dentro de la misma cuenta— y cada
   nombre arrastraba los 28px de `margin-top` de un `<h2>` de artículo.
   ========================================================================= */

.carta-marco .cuenta-items {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

/* Sin caja, sin sombra y sin esquinas: el renglón vive sobre el papel de la
   cuenta y se separa del siguiente con un punteado, igual que los platos de
   `.pdp-carta`. Una tarjeta blanca dentro de un marco ya dibujado es una caja
   dentro de una caja. */
.carta-marco .cuenta-item {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin: 0;
  padding: 14px 0;
  border-top: 1px dotted rgba(110, 44, 52, .30);
  background: none;
  border-radius: 0;
}

.carta-marco .cuenta-item:first-child { border-top: 0; padding-top: 4px; }

.carta-marco .cuenta-foto {
  width: 76px;
  flex: none;
  overflow: hidden;
  background: var(--sand);
  /* La proporción sale del token del sitio (4/5), no de un alto escrito a
     mano: es la misma que usan la ficha, la tarjeta del catálogo y las once
     miniaturas de producto del tema. */
  aspect-ratio: var(--foto-producto);
  border: 0;
  border-radius: var(--r-sm);
}

.carta-marco .cuenta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-sm);
}

.carta-marco .cuenta-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.carta-marco .cuenta-nombre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.16;
  letter-spacing: -.005em;
  margin: 0;
  color: var(--ink);
}

/* Sin subrayado y en tinta: el nombre del producto no es una acción, es el
   renglón de la cuenta. Va con la clase repetida para ganarle a la regla de
   enlace de `.entry`, que es más específica que un simple descendiente.
   Contar la especificidad, no confiar en el orden del archivo. */
.carta-marco .cuenta-nombre.cuenta-nombre a {
  color: var(--ink);
  text-decoration: none;
}

.carta-marco .cuenta-nombre.cuenta-nombre a:hover { color: var(--wine); }

.carta-marco .cuenta-nota {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.36;
  color: var(--cacao);
  margin: 5px 0 0;
}

/* Insignia de ahorro del renglón. Misma tipografía y mismo vino que la de las
   tarjetas del catálogo (`.pcard-badge`), pero como línea y no como cinta
   sobre la foto: la miniatura mide 76px. */
.carta-marco .cuenta-ahorro {
  margin: 7px 0 0;
  align-self: flex-start;
  background: var(--wine);
  color: var(--white);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.36;
  padding: 4px 8px;
  border-radius: 999px;
}

/* El importe al borde derecho, alineado con el total de abajo: en una cuenta
   la cifra siempre cae en la misma columna.

   `row-reverse` + `flex-start` empaqueta al borde DERECHO sin cambiar el orden
   del marcado, que es el correcto para un lector de pantalla —primero cuánto
   cuesta, después la acción de quitarlo—. Con `space-between` el basurero del
   carrito quedaba solo a media fila. */
.carta-marco .cuenta-fila {
  margin-top: auto;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
}

.carta-marco .cuenta-precio { display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px; }

/* El importe de cada línea va en VINO, no en tinta (pedido de Ignacio, 26-08).
   Es el mismo color que usan el total de la cuenta y el precio de la tarjeta de
   producto: el precio se lee igual en toda la web. Vino sobre papel son
   10,13:1 (§3.l). */
.carta-marco .cuenta-precio .price-now { font-family: var(--body); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 18px; color: var(--wine); }
.carta-marco .cuenta-precio .price-was { font-family: var(--mono); font-size: 12.5px; color: var(--cacao); text-decoration: line-through; }
/* El «USD» del renglón salía en `--body`: no declaraba familia y la heredaba
   del cuerpo, mientras el número de al lado y el «USD» del total sí van en
   mono. O sea la misma anotación se escribía de dos formas distintas dentro de
   la misma cuenta. Se descubrió midiendo al alinear la conversión de moneda
   contra él (27-08). */
.carta-marco .cuenta-precio .price-cur { font-family: var(--mono); font-size: 10.5px; color: var(--cacao); }

/* ---------- Conversión de moneda dentro de la cuenta ----------
   La línea «≈ 31.047 CLP» se veía como un cuerpo extraño: el estilo global de
   `.price-conv` la dibuja en `--body` y `--tinta-2`, que es correcto en la
   ficha y en la tarjeta del catálogo —ahí conviven con texto— pero acá NO hay
   una sola letra en cuerpo: la cuenta está escrita entera en mono y Young
   Serif. Una tipografía distinta en la única línea gris del bloque se lee como
   algo pegado, no como parte de la suma.

   Acá toma exactamente el mismo tratamiento que el «USD» que va al lado del
   número —mono, 10,5px, cacao— porque es lo mismo que el USD: una anotación
   sobre la cifra, no una cifra.

   Alineada a la derecha en las dos superficies, y por la misma razón que todo
   lo demás de este bloque: en una cuenta las cifras caen en una sola columna.
   ========================================================================= */

.carta-marco .price-conv,
.bk-cd-total .price-conv {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--cacao);
  text-align: right;
}

/* En el renglón de cada producto el contenedor NO es `.price` —es
   `.cuenta-precio`—, así que el salto de línea que el estilo global consigue
   con `flex-basis: 100%` hay que dárselo acá, junto con el `wrap` que lo
   permite. Sin `wrap`, la conversión se metería en la misma fila que el precio
   y empujaría el importe fuera de su columna. */
.carta-marco .cuenta-precio { flex-wrap: wrap; justify-content: flex-end; }
.carta-marco .cuenta-precio .price-conv { flex-basis: 100%; margin-top: 2px; }

/* El total ya hereda el salto de `.price .price-conv`. Solo se separa un
   poco del número, que es 32px de Young Serif y sin aire queda pegado. */
.carta-marco .cuenta-total .price-conv { margin-top: 4px; }

/* ---------- Total ----------
   Va DENTRO de la cuenta, que es donde va el total de una cuenta. Filete vino
   arriba —más grueso que el punteado de los renglones— para que se lea como el
   cierre de la suma y no como un renglón más. */
.carta-marco .cuenta-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 0 0;
  border-top: 1.5px solid var(--wine);
  border-bottom: 0;
  background: none;
}

.carta-marco .cuenta-total-rot {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cacao);
}

/* PRECIOS EN WORK SANS (pedido de Janice, 30-08)
   Los números de precio estaban en Young Serif. Pasan a `--body` con peso 600:
   a 400 —el peso con el que se dibuja un serif— Work Sans queda visiblemente
   más liviano y el precio deja de ser el protagonista del bloque.
   `tabular-nums` para que las cifras no bailen de ancho entre productos.
   Las ANOTACIONES sobre la cifra —«USD», el comparativo tachado y la
   conversión de moneda— siguen en `--mono` por la regla de §3.n. */
.carta-marco .cuenta-total .price-now {
  font-family: var(--body);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: var(--wine);
  font-variant-numeric: tabular-nums;
}

.carta-marco .cuenta-total .price-cur {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cacao);
}

/* ---------- Ajustes de la suma ----------
   Subtotal, cupones aplicados, comisiones e impuestos. Solo se imprimen cuando
   existen: sin ellos, «Subtotal 34» encima de «TOTAL 34» es la misma cifra dos
   veces y le roba una línea al primer pantallazo del paso del pago. */
.carta-marco .cuenta-ajuste {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--tinta-2);
}

.carta-marco .cuenta-ajuste + .cuenta-ajuste { margin-top: 5px; }
.carta-marco .cuenta-ajuste span:last-child { font-family: var(--mono); white-space: nowrap; }
.carta-marco .cuenta-ajuste--dto span:last-child { color: var(--wine); }
.carta-marco .cuenta-ajuste .woocommerce-remove-coupon {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cacao);
  margin-left: 6px;
}

/* ---------- Envío ----------
   Dicho como beneficio, no como carencia. Va sobre arena con trama de mantel,
   el mismo par que ya marca la promesa en la ficha y en el sello: dentro del
   papel de la cuenta necesita distinguirse sin abrir otra caja blanca. */
.carta-marco .cuenta-envio {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--sand);
  background-image: var(--mantel);
  color: var(--ink);
  font-size: 12.5px;
  line-height: var(--lh-texto);
  border-radius: var(--r-campo);
}

.carta-marco .cuenta-envio strong { font-weight: 600; }

.carta-marco .cuenta-envio-icono {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wine);
  color: var(--white);
  font-size: 10px;
  line-height: 1;
}

@media (min-width: 760px) {
  .carta-marco .cuenta-foto { width: 92px; }
  .carta-marco .cuenta-nombre { font-size: 20px; }
}

/* ---------- Cross-sell del Bundle ----------
   Es una oferta, no una sección de contenido, así que se dibuja con el
   vocabulario de «La Carta» —papel, textura de harina y doble filete vino— en
   vez de con la tarjeta blanca genérica que tenía antes. Ninguno de esos
   recursos es nuevo: son los mismos de .pdp-carta.

   El bloque cambió de argumento, no solo de aspecto. Antes abría con la
   ecuación `45 + 52 + 55 + 65 = 217`, que es aritmética de factura y además
   habla de precios que nadie paga; y escondía el único dato que decide la
   compra —cuánto FALTA— en una nota de 11,5px sobre arena. Ahora la diferencia
   es el número grande y va enfrentada a lo que cuestan esos mismos tres
   ebooks por separado. */

.bk-upsell {
  margin-inline: var(--pad);
  background: var(--white);
  background-image: var(--harina);
  background-size: var(--harina-size);
  color: var(--ink);
  padding: 20px 16px 16px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

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

.bk-upsell .eyebrow.eyebrow {
  color: var(--wine);
  letter-spacing: .16em;
  font-size: 10px;
}

.bk-upsell h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.12;
  margin: 9px 0 0;
  text-wrap: balance;
}

/* 🔴 CLASE REPETIDA EN LOS TRES PÁRRAFOS DEL BLOQUE, y no es manía.

   `components.css` declara `.entry p, .entry li { font-size: 16px; color:
   var(--tinta-2) }` —(0,1,1)—, y este bloque se dibuja SIEMPRE dentro de un
   `.entry`: la ficha, el carrito, el checkout y el diálogo cuelgan todos de
   `page.php`. Con la clase simple (0,1,0) ganaba la regla editorial, así que
   la bajada, el ahorro y la conversión salían a **16px en color de texto**
   cuando el componente pide 13,5 y 10,5 en cacao.

   Medido antes del arreglo: `.bk-upsell-ahorro` computaba `16px` y
   `rgb(74,68,66)`. O sea el bloque llevaba desde el primer día una escala que
   nadie había escrito, y se notaba justo donde más molesta: dos anotaciones
   sobre el precio con el mismo peso que el argumento de venta. */
.bk-upsell-bajada.bk-upsell-bajada {
  font-size: 13.5px;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
  margin: 7px auto 0;
  max-width: 34ch;
}

/* Los cuatro lomos. La foto va en el formato de producto del sitio (4:5) para
   que se vea la portada completa, no un recorte. */
/* La clase va repetida —y no es cosmética— porque este bloque también se dibuja
   DENTRO del carrito, donde `woocommerce-layout.css` declara `.woocommerce ul`
   y `.woocommerce-page img` con más peso del que parece. Con la clase simple,
   las cuatro portadas salían con viñeta y de alturas distintas. Es la trampa 4
   del traspaso: contar la especificidad, no confiar en el orden de carga.

   `minmax(0, 1fr)` y no `1fr`: el mínimo implícito de una pista de grilla es su
   contenido, así que en un contenedor angosto —el del carrito— «Irresistibles»
   ensanchaba su columna y las otras tres se encogían. */
.bk-upsell-libros.bk-upsell-libros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.bk-upsell-libros.bk-upsell-libros li {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}

.bk-upsell-libro-foto.bk-upsell-libro-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

.bk-upsell-libro-foto {
  position: relative;
  display: block;
  aspect-ratio: var(--foto-producto);
  overflow: hidden;
  background: var(--sand);
  border: 0;
  border-radius: var(--r-sm);
}

.bk-upsell-libro-nom {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--cacao);
  /* En el carrito la columna cae a ~63px y «Irresistibles» no entra entera: sin
     esto desborda de lado y `overflow:hidden` la corta a mitad de palabra, sin
     elipsis. Con quiebre libre, sobra por abajo y el clamp sí pone los puntos. */
  overflow-wrap: anywhere;
  /* Dos líneas como máximo: con cuatro columnas en un teléfono, un título de
     cuatro palabras desalinearía la fila entera. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* El que ya se está mirando: se atenúa y se marca. Es lo que convierte «los
   otros tres» en algo que se ve en vez de algo que hay que deducir. */
.bk-upsell-libros .es-este .bk-upsell-libro-foto img { opacity: .35; }

.bk-upsell-libros .es-este .bk-upsell-libro-nom {
  color: var(--wine);
  font-weight: 700;
}

/* Disco con filete, no un ✓ suelto: la foto de abajo cambia de producto a
   producto y una marca sin fondo se pierde sobre las claras. El gesto es el
   mismo del lanzador de Brook y del favicon. */
.bk-upsell-tick {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 22%, 42px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--papel);
  border: 1px solid var(--wine);
  font-size: clamp(15px, 11%, 21px);
  line-height: 1;
  color: var(--wine);
}

/* La comparativa «107 sueltos / +85 sumándolos» se eliminó el 25-08 junto con
   su marcado: `.bk-upsell-canje`, `-lado`, `-rotulo` y `-cifra` ya no existen.
   Se borran en vez de dejarse muertas —lección de los ~200px de CSS muerto de
   `home-brooklyn.css` (19-08), que le ganaban en especificidad a las reglas
   nuevas y costaron una sesión de depuración. */

/* Tres líneas: precio · ahorro · conversión.
   ⚠️ `flex-wrap: nowrap` a propósito: el «USD» tiene que quedar en la MISMA
   fila que el precio y el comparativo. Con wrap, a anchos angostos —la columna
   del carrito, un teléfono chico— se descolgaba solo a la línea de abajo, que
   es justo el defecto que esta regla existe para evitar. Las tres piezas juntas
   miden poco y no necesitan envolver. */
.bk-upsell-precio {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 0;
}

/* PRECIOS EN WORK SANS (pedido de Janice, 30-08)
   Los números de precio estaban en Young Serif. Pasan a `--body` con peso 600:
   a 400 —el peso con el que se dibuja un serif— Work Sans queda visiblemente
   más liviano y el precio deja de ser el protagonista del bloque.
   `tabular-nums` para que las cifras no bailen de ancho entre productos.
   Las ANOTACIONES sobre la cifra —«USD», el comparativo tachado y la
   conversión de moneda— siguen en `--mono` por la regla de §3.n. */
.bk-upsell-precio b {
  font-family: var(--body);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: var(--wine);
}

.bk-upsell-precio del {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cacao);
}

/* La moneda, chica y en mono, según la regla de precios de §3.n: el número es
   el protagonista y el `USD` lo acompaña. */
.bk-upsell-moneda {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cacao);
}

/* ---------- Las dos anotaciones bajo el precio ----------

   El ahorro y la conversión a moneda local son ANOTACIONES SOBRE LA CIFRA, no
   cifras: lo mismo que el «USD» que va al lado del número y que el comparativo
   tachado. Por eso toman exactamente su tratamiento —mono, 10,5px, cacao—, que
   es el mismo criterio ya aplicado dentro de la cuenta (`.carta-marco
   .price-conv`) y por la misma razón: en este bloque no hay una sola letra en
   cuerpo, está escrito entero en mono y Young Serif, así que una línea en otra
   familia se lee como algo pegado y no como parte de la composición.

   Van juntas y apretadas contra el precio, para que las tres se lean como un
   solo grupo —número grande arriba, letra chica debajo— en vez de como tres
   párrafos sueltos. */
.bk-upsell-ahorro.bk-upsell-ahorro {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  line-height: 1.45;
  color: var(--cacao);
}

.bk-upsell-conv.bk-upsell-conv {
  margin: 3px 0 0;
  text-align: center;
}

/* La conversión hereda el mismo cuerpo que el ahorro: el estilo global de
   `.price-conv` la dibuja en `--body` a `.78rem` y en `--tinta-2`, que es
   correcto donde convive con texto (ficha, tarjeta del catálogo) y ajeno acá.
   `.bk-upsell-conv` es (0,1,0) y `.price` no es ancestro, así que basta con
   (0,2,0) para ganarle a la regla global sin `!important`. */
.bk-upsell-conv.bk-upsell-conv .price-conv {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  line-height: 1.45;
  color: var(--cacao);
}

.bk-upsell .btn { margin-top: 14px; }


@media (min-width: 1000px) {
  /* En escritorio el bloque vive en una columna ancha —la de contenido de la
     ficha, o la del carrito—: las portadas crecen y un rótulo de 9,5px se
     queda atrás. */
  .bk-upsell { padding: 26px 22px 20px; }
  .bk-upsell h2 { font-size: 30px; }
  .bk-upsell-libros.bk-upsell-libros { gap: 12px; }
  .bk-upsell-libro-nom { font-size: 11px; }
}


/* ============================================================================
   DIÁLOGO MODAL
   ----------------------------------------------------------------------------
   Capa que interrumpe la página para pedir una decisión. Nace para la «última
   oportunidad» del checkout —al apretar «Pagar» se ofrece el Bundle una vez
   más— y se escribe como componente compartido desde el principio: es la trampa
   que este proyecto ya pisó diecinueve veces, y el diálogo es justamente la
   clase de pieza que después quiere usarse en otra página.

   No reutiliza `.bk-cd` (el carrito desplegable) porque no es lo mismo: aquel
   es un panel lateral que acompaña, este es un alto en el camino que se centra
   y exige respuesta.

   Redondeado, como Brook y por la misma razón: es una capa de sistema que flota
   SOBRE la publicación, no un bloque de la página. Cuadrarlo lo haría leer como
   un aviso más del contenido, que es exactamente lo que no es.

   ⚠️ Nada de `display` sin `:not([hidden])`. Un `.bk-modal{display:block}`
   pelado le gana al `display:none` de `[hidden]` y deja el diálogo abierto en
   todo el sitio — ya pasó con la ventana de Brook.
   ========================================================================= */

.bk-modal-fondo:not([hidden]) {
  position: fixed;
  inset: 0;
  background: rgba(43, 43, 43, .55);
  z-index: 96;
  animation: bk-modal-fade .18s ease-out;
}

.bk-modal:not([hidden]) {
  position: fixed;
  z-index: 97;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(430px, calc(100vw - 24px));
  /* Nunca más alto que la pantalla: el bloque trae cuatro portadas y en un
     teléfono chico no cabe entero. Con scroll propio se lee completo sin que
     el diálogo se salga por arriba, que es como se pierde el botón de cerrar. */
  max-height: min(92vh, 92svh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--papel);
  border-radius: var(--r-md);
  box-shadow: 0 26px 60px -26px rgba(43, 43, 43, .7);
  /* El aire de arriba es para la X: puesta sobre el bloque, se le montaba
     encima al doble filete vino, que es la esquina del marco. Son 50px porque
     el botón mide 44 —el mínimo táctil— más los 2 de su tope y 4 de respiro:
     el área de toque no se achica para que quepa. */
  padding: 50px 14px 14px;
  animation: bk-modal-entra .2s ease-out;
}

@keyframes bk-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bk-modal-entra {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-modal:not([hidden]),
  .bk-modal-fondo:not([hidden]) { animation: none; }
}

/* La X va sobre el bloque, no dentro de él: el componente de la oferta es el
   mismo de la ficha y del carrito, y ahí no existe. */
.bk-modal-cerrar {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  color: var(--cacao);
  cursor: pointer;
  z-index: 1;
}

.bk-modal-cerrar:hover { color: var(--wine); }

/* La salida, con el precio impreso.

   No es un enlace gris de letra chica: un diálogo que interrumpe un pago solo
   es honesto si las dos puertas están señalizadas. Cacao sobre papel da 6,34:1,
   así que se lee de verdad — lo que la distingue del «sí» no es el tamaño sino
   el peso: aquella es una pastilla vino sólida, esta es texto subrayado. */
.bk-modal-no {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 4px;
  background: none;
  border: 0;
  font-family: var(--body);
  font-size: 14px;
  color: var(--cacao);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bk-modal-no:hover { color: var(--wine); }

/* El bloque de la oferta dentro del diálogo.

   `margin-inline: 0` por lo mismo que en el checkout: 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 sale del diálogo. */
.bk-upsell--modal {
  margin-inline: 0;
  margin-block: 0;
}

/* ============================================================================
   EL DIÁLOGO NO HACE SCROLL — modo compacto por altura de pantalla
   ----------------------------------------------------------------------------
   Pedido de Ignacio (27-08): «el popup tiene un leve scrolling vertical,
   elimina el scrolling, todo se debe ver en la pantalla».

   El `overflow-y: auto` de `.bk-modal` se conserva como red de seguridad —una
   pantalla imposible siempre puede existir, y es mejor que se pueda leer con
   scroll a que el botón de cerrar quede fuera— pero deja de usarse: lo que se
   hace acá es que el contenido QUEPA, encogiendo lo que no es la decisión.

   Las consultas son por `max-height` y no por ancho, porque el problema es de
   alto: el mismo teléfono en horizontal tiene de sobra a lo ancho y 390px a lo
   alto. Por eso el segundo tramo además ENSANCHA el diálogo — en horizontal
   sobra ancho y es lo único que se puede gastar.

   Qué se sacrifica y en qué orden, que es la parte que importa:
     1. Aire (paddings y márgenes).
     2. Tamaño de las portadas — se acota la grilla, no la proporción, así que
        las fotos siguen en 4:5 y no se recortan.
     3. La bajada, que es el único texto explicativo y el único prescindible:
        el titular y las cuatro portadas ya dicen qué es el pack.
   **Nunca** se tocan el precio, los dos botones ni el área táctil de 44px de
   la X: son la decisión y las dos salidas.
   ========================================================================= */

@media (max-height: 700px) {
  .bk-modal:not([hidden]) { padding: 44px 12px 12px; }

  .bk-upsell--modal { padding: 16px 12px 14px; }
  .bk-upsell--modal h2 { font-size: 22px; margin-top: 6px; }

  .bk-upsell--modal .bk-upsell-bajada.bk-upsell-bajada {
    font-size: 12.5px;
    margin-top: 5px;
    max-width: 42ch;
  }

  .bk-upsell--modal .bk-upsell-libros.bk-upsell-libros {
    margin: 12px auto 0;
    max-width: 300px;
  }

  .bk-upsell--modal .bk-upsell-precio { margin-top: 10px; }
  .bk-upsell--modal .bk-upsell-precio b { font-size: 26px; }
  .bk-upsell--modal .btn { margin-top: 10px; }
  .bk-modal:not([hidden]) .bk-modal-no { margin-top: 8px; }
}

@media (max-height: 580px) {
  /* En horizontal sobra ancho y falta alto: el diálogo se ensancha para que las
     portadas quepan en una fila más baja y el titular no parta en tres líneas. */
  .bk-modal:not([hidden]) {
    width: min(560px, calc(100vw - 24px));
    padding: 38px 12px 10px;
  }

  .bk-upsell--modal { padding: 12px 12px 12px; }
  .bk-upsell--modal h2 { font-size: 20px; margin-top: 4px; }

  /* La bajada es lo único que se puede quitar sin perder la oferta: el titular
     y las cuatro portadas ya dicen qué es el pack. */
  .bk-upsell--modal .bk-upsell-bajada.bk-upsell-bajada { display: none; }

  .bk-upsell--modal .bk-upsell-libros.bk-upsell-libros {
    margin: 10px auto 0;
    max-width: 224px;
    gap: 6px;
  }

  .bk-upsell--modal .bk-upsell-libro-nom { font-size: 8.5px; margin-top: 4px; }
  .bk-upsell--modal .bk-upsell-precio { margin-top: 8px; }
  .bk-upsell--modal .bk-upsell-precio b { font-size: 23px; }
  .bk-upsell--modal .bk-upsell-ahorro.bk-upsell-ahorro { margin-top: 6px; }
  .bk-upsell--modal .btn { margin-top: 8px; }
}

/* 📱 TELÉFONO EN HORIZONTAL — el único caso que no se arregla encogiendo.

   A 390px de alto no queda nada que recortar sin dejar la oferta ilegible, y
   encoger más el botón sería tocar justo lo que no se toca. Pero sobra ancho:
   la pantalla mide 844x390, o sea el problema no es que falte espacio sino que
   está en el eje equivocado.

   Así que el bloque deja de ser una columna y pasa a DOS: las cuatro portadas a
   la izquierda, ocupando todo el alto, y el argumento con su precio y sus
   botones a la derecha. Lo que antes se apilaba ahora convive, y el alto del
   diálogo cae de 418 a ~280px sin quitar una sola pieza.

   `min-width: 600px` acota la regla a horizontal de verdad: una pantalla
   estrecha y baja a la vez no existe en el parque de teléfonos, y ahí el modo
   compacto de arriba sigue siendo el correcto. */
@media (max-height: 470px) and (min-width: 600px) {
  .bk-modal:not([hidden]) {
    width: min(680px, calc(100vw - 24px));
    padding: 34px 12px 10px;
  }

  .bk-upsell--modal {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: 18px;
    align-content: center;
    padding: 14px;
  }

  /* Todo lo demás vive en la columna derecha; las portadas ocupan la izquierda
     entera. `span 5` y no `-1`: con filas implícitas, `-1` apunta a la última
     línea EXPLÍCITA, que acá no existe, y la regla no haría nada. */
  .bk-upsell--modal > * { grid-column: 2; }

  .bk-upsell--modal .bk-upsell-libros.bk-upsell-libros {
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: center;
    max-width: 190px;
    margin: 0;
    gap: 6px;
  }

  /* En dos columnas el centrado deja de tener sentido: la columna derecha es
     una lectura de arriba abajo y se alinea a su propio margen. */
  .bk-upsell--modal .bk-upsell-head { text-align: left; }
  .bk-upsell--modal .bk-upsell-bajada.bk-upsell-bajada { margin-inline: 0; }
  .bk-upsell--modal .bk-upsell-precio { justify-content: flex-start; }

  .bk-upsell--modal .bk-upsell-ahorro.bk-upsell-ahorro,
  .bk-upsell--modal .bk-upsell-conv.bk-upsell-conv { text-align: left; }

  .bk-upsell--modal h2 { font-size: 21px; }
}

/* ============================================================================
   CAMPOS DE FORMULARIO — `.bk-form`
   ----------------------------------------------------------------------------
   El campo con rótulo en mono, marco de un hilo y foco en vino. Ya existía dos
   veces cuando se escribió la pantalla de crear cuenta: una en `descargas.css`
   (`.bk-descarga-form`) y otra a punto de nacer. Vive acá desde el primer día
   del segundo uso, no después — es la trampa que el proyecto ya pisó veinte
   veces, y lo que la hace invisible es que el componente siempre se ve bien en
   la página que le da nombre.

   Las pantallas que lo usan siguen poniendo su propia clase al lado para lo
   que sí es suyo (el aire, el ancho): acá está la apariencia del campo y nada
   más.

   ⚠️ El checkout NO usa esto: sus campos los dibuja WooCommerce y hay que
   ganarle a `.woocommerce form .form-row`, que pesa (0,2,1). Unificarlos
   obligaría a subir toda esta hoja de especificidad, que es peor negocio.
   ========================================================================= */

.bk-form label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cacao);
  margin-bottom: 6px;
}

/* 16px exactos y ni uno menos: por debajo de eso iOS hace zoom al enfocar y
   descuadra la pantalla. Con 95,64% de tráfico móvil no es un detalle. */
.bk-form input[type="text"],
.bk-form input[type="email"],
.bk-form input[type="tel"],
.bk-form input[type="password"],
.bk-form select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(121, 87, 87, .45);
  border-radius: var(--r-campo);
  box-sizing: border-box;
  /* Safari en iOS le pone su propio relieve y esquinas redondas al select, que
     lo dejaría siendo el único campo redondo de un sitio cuadrado. */
  appearance: none;
  -webkit-appearance: none;
}

/* La flecha del select se dibuja acá porque `appearance: none` se lleva la
   nativa. Va en vino, como todo lo que en este sitio indica una acción. */
.bk-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--wine) 50%), linear-gradient(135deg, var(--wine) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.bk-form input:focus,
.bk-form select:focus {
  outline: 2px solid var(--wine);
  outline-offset: 1px;
  border-color: var(--wine);
}

/* La nota bajo un campo: por qué pedimos ese dato. Mismo tratamiento que la
   ayuda del checkout — es una anotación sobre el campo, no una frase. */
.bk-form .bk-form-ayuda {
  margin: 5px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--cacao);
}

/* El campo como unidad —rótulo, control y nota—, para poder ponerlos en grilla.
   Clase repetida: estos párrafos viven dentro de `.entry`, donde `.entry p` es
   (0,1,1) y les metería el margen y el tamaño del contenido editorial. */
.bk-form .bk-campo.bk-campo { margin: 0; }