/* ============================================================================
   Brooklyn by Janice — CAPA DE ESCRITORIO (26-08)
   ----------------------------------------------------------------------------
   Todo el sitio se diseñó y se afinó a 390px, que es donde vive el 95,64% del
   tráfico. Esta hoja es la pasada equivalente para escritorio, y existe como
   archivo aparte por una razón de seguridad, no de gusto:

   🔒 REGLA DURA — TODA regla de este archivo vive dentro de un
      `@media (min-width: …)`. Sin excepciones. Ni una sola declaración fuera.

   Así el trabajo de móvil no se puede dañar desde acá ni por accidente: bajo
   el breakpoint más chico este archivo no existe. Si alguna vez hay que
   revertir la optimización de escritorio entera, se borra este archivo y el
   sitio vuelve exactamente a como estaba. Esa es la propiedad que se compra
   pagando el precio de tener CSS de un componente fuera de su hoja.

   ⚠️ Carga LA ÚLTIMA de todas las hojas (ver `inc/assets.php`), así que gana
   los empates de especificidad. Los empates, no las diferencias: si una regla
   de acá «no se aplica», el problema es que la de la hoja original tiene más
   clases, y se resuelve contando —no subiendo `!important`.

   El diagnóstico que ordena esta hoja: el sitio en escritorio no estaba roto,
   estaba SIN COMPONER. Los defectos son de una sola familia —piezas pensadas
   para 390px estiradas a 1180— y se repiten con tres caras:

     1. Botones y campos de formulario a ancho completo. Un botón de 1.088px
        no se lee como acción, se lee como franja.
     2. Párrafos de 120 caracteres por línea. §3.m fija 50–75 en escritorio.
     3. Bloques de media pantalla con la otra media vacía, porque el contenido
        se apila igual que en el teléfono en vez de ocupar las dos columnas.

   Los breakpoints siguen los que ya usa el tema: 900px es el salto principal
   («esto ya no es un teléfono»), 1100px el de composición ancha.
   ========================================================================= */


/* ============================================================================
   1 · COMPONENTES COMPARTIDOS
   ----------------------------------------------------------------------------
   Se arreglan primero porque cada uno se dibuja en varias páginas a la vez:
   el sello está en el home, la colección, la ficha, el carrito y Contacto; el
   puente en el home, la colección y la ficha; la captura de correo en el home,
   la colección y «Sobre mí». Un arreglo acá se paga una vez y se cobra seis.
   ========================================================================= */

/* ⚠️ ESTE BLOQUE ABRE EN 700px Y NO EN 900 (31-08).
   Los cuatro componentes de esta sección son de ancho fluido y sus arreglos
   son topes en `ch`, filas de flex y un tamaño de foto: no necesitan una
   pantalla de escritorio, necesitan NO estar en un teléfono. Con el corte en
   900 el iPad vertical —768px, que es una pantalla real y muy usada— se quedaba
   con la composición de teléfono: el botón del puente medía 704px, el campo de
   correo del taller 672 y la foto de «quién te enseña» seguía en 190.

   700px es el mismo corte que layout.css ya usa para el logo del header, así
   que no se inventa un breakpoint nuevo. Por debajo de 700 no cambia nada:
   ningún teléfono en vertical llega ahí. */
@media (min-width: 700px) {

  /* ---------- Sello de garantía ----------
     La bajada corría de borde a borde de la franja: ~120 caracteres por línea
     contra los 50–75 que §3.m fija para escritorio. El ojo pierde el renglón
     al volver a la izquierda, y es el párrafo que sostiene la promesa que
     reemplazó a la garantía de devolución. */
  .bk-sello-lead { max-width: 68ch; }


  /* ---------- Puente a Pastelería Rentable ----------
     Era una franja vino con un botón claro de 1.088px de ancho abajo. A ese
     tamaño el botón deja de leerse como algo que se toca.

     En escritorio el bloque pasa a dos columnas: el argumento a la izquierda,
     la acción a la derecha y centrada contra él. Las áreas van explícitas
     porque el botón tiene que abarcar las tres filas de texto; con
     autocolocación quedaría en una cuarta fila. */
  .bk-puente {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 44px;
    align-items: center;
  }

  .bk-puente > .eyebrow { grid-area: 1 / 1; }
  .bk-puente > h2       { grid-area: 2 / 1; max-width: 34ch; }
  .bk-puente > p        { grid-area: 3 / 1; max-width: 62ch; }

  .bk-puente > .btn {
    grid-area: 1 / 2 / 4 / 3;
    align-self: center;
    width: auto;
    min-width: 260px;
    margin-top: 0;
  }


  /* ---------- Captura de correo del taller ----------
     El campo de correo medía 1.080px para recibir ~25 caracteres, y el botón
     otro tanto debajo. Un formulario de un solo campo en escritorio va en
     línea: campo y acción a la misma altura, y el consentimiento debajo.

     `flex-wrap` + `flex-basis: 100%` en el consentimiento es lo que lo baja
     de renglón sin tener que tocar el orden del marcado —que en móvil está
     bien y no se toca. */
  .home-taller-caja { padding: 26px 28px; }
  .home-taller-caja > p { max-width: 64ch; }

  .home-taller-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .home-taller-form input[type="email"] {
    flex: 1 1 300px;
    max-width: 440px;
  }

  /* `.btn--block` es (0,1,0) y trae `width: 100%`; esto es (0,2,0) y gana por
     número de clases, sin depender del orden de carga. */
  .home-taller-form .btn--block {
    width: auto;
    flex: 0 0 auto;
    min-width: 260px;
  }

  .home-taller-consent { flex-basis: 100%; order: 3; }


  /* ---------- Quién te enseña ----------
     La foto de 190px se leía chica al lado de un contenedor de 1.116px y el
     bloque parecía inacabado. Sube a 240px, que le da presencia sin volverlo
     una sección de retrato.

     ⚠️ NO se centra, aunque sobre espacio a la derecha: «ALINEACIÓN HORIZONTAL
     ÚNICA» fija que todo el contenido de una página arranque en la misma
     columna, y centrar este bloque lo dejaría 150px a la derecha de la caja de
     captura que va justo debajo. El aire sobrante a la derecha de un bloque de
     credencial corto es composición; un bloque desalineado es un defecto.

     En la ficha vive en una columna de 686px, así que la foto crece pero el
     conjunto se comporta igual. */
  .bk-quien { gap: 34px; }
  .bk-quien-foto { width: 240px; }
  .bk-quien-texto p { max-width: 60ch; }
}


/* ============================================================================
   2 · COLECCIÓN DE EBOOKS
   ----------------------------------------------------------------------------
   El 70% de las entradas del negocio. En escritorio convierte 5,11% contra
   0,60% en móvil (§10.n), o sea que la visitante de escritorio ya llega
   decidida — razón de más para que la página no le ponga fricción.
   ========================================================================= */

@media (min-width: 1000px) {

  /* ---------- Testimonios de la colección ----------
     Los cuatro testimonios pasaban a UNA fila de cuatro columnas: cada burbuja
     quedaba en ~225px, o sea ~28 caracteres por línea, la mitad del mínimo que
     §3.m fija para escritorio. Un testimonio partido cada cuatro palabras deja
     de leerse como una persona hablando, que es exactamente lo que este
     componente existe para lograr.

     Dos columnas por dos filas: misma cantidad de testimonios, burbujas de
     ~500px y ~62 caracteres por línea.

     ⚠️ La regla de `collection.css` que pone `flex-direction: row` sigue ahí y
     no estorba: en un contenedor de grilla `flex-direction` no hace nada. Se
     deja para no tocar la hoja de móvil. */
  .col-testi-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 30px;
    align-items: start;
  }


  /* ---------- Las dudas frecuentes se alinean con la página ----------
     El FAQ vive en un `.wrap--reading` centrado, así que su texto arrancaba a
     384px mientras el resto de la colección arranca a 161: un salto lateral de
     223px justo entre los testimonios y el puente.

     El ancho de lectura se conserva —una pregunta y su respuesta se leen mejor
     angostas— pero la columna se ancla al borde IZQUIERDO DE LA PÁGINA en vez
     de centrarse en la pantalla. Es lo que ya hace el FAQ de la ficha, que
     vive en la columna de contenido.

     ⚠️ `margin-inline: 0` a secas NO sirve, y es el primer intento que hubo
     que revertir: deja la columna pegada al borde de la sección, que es a
     sangre, así que el FAQ arrancaba a 33px —esta vez 128px a la IZQUIERDA de
     todo lo demás—. La fórmula es la misma de «ALINEACIÓN HORIZONTAL ÚNICA»:
     el margen vale lo que sobra de la columna de la página a cada lado, y el
     `max()` lo anula en pantallas más angostas que esa columna. */
  .col-faq > .wrap--reading {
    margin-inline: max(0px, calc((100% - var(--ancho)) / 2));
  }
}


/* ============================================================================
   3 · HOME
   ----------------------------------------------------------------------------
   1.633 sesiones (6,6%), pero es la cara de la marca: es lo que abre Google y
   lo que abre una marca como Jumbo cuando evalúa un acuerdo. En escritorio
   abría con el titular ocupando el tercio izquierdo y 800px de papel vacío al
   lado, con la foto empujada abajo como una franja aparte.
   ========================================================================= */

@media (min-width: 1000px) {

  /* ---------- El hero, en dos columnas ----------
     La foto deja de ser una banda debajo del texto y pasa a acompañarlo: el
     primer pantallazo muestra la promesa Y el producto a la vez, que es lo que
     ya hace la colección con su hero y su Bundle.

     🔑 Se resuelve SIN tocar el marcado. El hero y la foto son hermanos
     directos de `.bk-home`, así que la grilla se declara en el padre y cada
     hijo se coloca por líneas nombradas: todo ocupa el ancho completo salvo
     esos dos, que se reparten la fila 1. Envolverlos en un div nuevo habría
     sido lo obvio y habría roto el RITMO VERTICAL ÚNICO y la regla
     `.bk-home > .home-hero-foto`, que se apoyan en ser hijo DIRECTO.

     Las columnas reproducen `--container` a mano: dos mitades de
     (1180 − 32×2)/2 con el aire de `--edge` a los costados, así que el texto
     arranca exactamente donde arranca el resto de la página. */
  .bk-home {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--edge), 1fr)
      [c1] minmax(0, calc((var(--container) - var(--edge) * 2) / 2))
      [c2] minmax(0, calc((var(--container) - var(--edge) * 2) / 2))
      [end] minmax(var(--edge), 1fr) [full-end];
  }

  /* Por defecto todo sigue ocupando el ancho completo: la grilla solo existe
     para el hero. Sin esta línea cada sección caería en la primera columna.

     ⚠️ `width: 100%` NO es decorativo, es lo que repara una regresión que este
     bloque introdujo y que solo se ve midiendo: un elemento de grilla con
     `margin-inline: auto` deja de estirarse y pasa a medir su CONTENIDO. Como
     el sello, el puente y la caja de captura llevan `max-width` + `margin
     auto` desde sus propias hojas, al volverse elementos de grilla encogieron
     —el puente pasó de 1.180px a 966 y la captura a 952— y quedaron más
     angostos que la franja de arriba. Con `width: 100%` vuelven a partir del
     ancho de su celda y el `max-width` los recorta como siempre. */
  .bk-home > * { grid-column: full-start / full-end; width: 100%; }

  .bk-home > .home-hero {
    grid-column: c1 / c2;
    grid-row: 1;
    align-self: center;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .bk-home > .home-hero-foto {
    grid-column: c2 / end;
    grid-row: 1;
    height: auto;
    min-height: 500px;
    align-self: stretch;
  }

  /* El lead del hero estaba topado en 34ch, que es medida de teléfono. En una
     columna de 558px eso dejaba el párrafo con la mitad del ancho disponible. */
  .home-hero-lead { max-width: 46ch; }


  /* ---------- Cabecera del catálogo ----------
     El titular y su bajada se apilaban en una columna de ~350px con 760px
     vacíos a la derecha, bajo una regla horizontal que sí cruzaba la página
     entera: la línea prometía un bloque ancho y debajo no había nada.
     Titular a la izquierda, bajada a la derecha; la regla y la grilla de
     tarjetas siguen cruzando completo. */
  .home-catalogo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    column-gap: 48px;
  }

  .home-catalogo > * { grid-column: 1 / -1; }
  .home-catalogo > h2 { grid-column: 1 / 2; font-size: 30px; }
  .home-catalogo > .home-catalogo-moneda { grid-column: 1 / 2; }

  .home-catalogo > .home-catalogo-lead {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    align-self: center;
    max-width: none;
    margin-top: 0;
  }


  /* ---------- El Bundle del home ----------
     A ancho completo, cada ebook quedaba a ~1.000px de su propio precio: la
     fila «The Best Cookies … 45 29» obligaba a cruzar la pantalla con el ojo
     para emparejar un nombre con su cifra, y es la tabla que sostiene la
     escalera 217 → 141 → 119, o sea el argumento del producto más caro del
     catálogo.

     Es el mismo defecto que la colección ya resolvió el 20-08 poniendo el
     Bundle al lado del hero; en el home había quedado sin corregir.

     Dos columnas: la portada y la promesa a la izquierda, el desglose y el
     precio a la derecha. El filete que separaba arriba de abajo pasa a
     separar izquierda de derecha.

     Vale también para los RESULTADOS DE BÚSQUEDA, que dibujan el mismo bloque
     a ancho completo y por lo tanto tienen el mismo defecto. La COLECCIÓN
     queda fuera a propósito: ahí el Bundle va en la columna angosta al lado
     del hero, donde una segunda columna no cabe. */
  .bk-home .bk-bundle,
  .busqueda-bundle .bk-bundle {
    max-width: 940px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .bk-home .bk-bundle > .bk-bundle-top,
  .busqueda-bundle .bk-bundle > .bk-bundle-top {
    grid-row: 1 / 3;
    align-self: stretch;
    /* La celda se estira para que el filete llegue de arriba abajo; el
       contenido se centra dentro de ella en vez de quedar colgando arriba. */
    align-items: center;
    border-bottom: 0;
    border-right: 1px solid rgba(121, 87, 87, .2);
    padding: 20px 22px;
  }

  .bk-home .bk-bundle > .bk-bundle-cuenta,
  .busqueda-bundle .bk-bundle > .bk-bundle-cuenta { grid-column: 2; padding: 18px 22px 14px; }
  .bk-home .bk-bundle > .bk-bundle-cierre,
  .busqueda-bundle .bk-bundle > .bk-bundle-cierre { grid-column: 2; padding: 0 22px 20px; }


  /* ---------- El bloque de Janice del home ----------
     La foto es vertical (792x1400) y en la columna de 380px del escritorio se
     dibujaba a su alto natural: 714px de retrato para acompañar tres líneas de
     texto. Media pantalla de scroll por un bloque de credencial.

     Se le fija un alto de 460px: sigue siendo una foto grande y con presencia,
     pero deja de imponerle a la sección el doble de altura que su contenido.
     Va en alto fijo y no en `align-self: stretch`: con la altura en `auto` la
     fila termina midiendo lo que mide la imagen a tamaño natural, que es
     exactamente el problema que se viene a arreglar. */
  .home-janice-foto {
    height: 460px;
    min-height: 0;
  }
  .home-janice-copy { padding: 26px 30px; }
  .home-janice-copy > p { max-width: 62ch; }

  /* Los cuatro datos quedaban en dos columnas de 350px: «+85K TikTok» y
     «+30K Instagram» separados por 350px de vacío, que los desarma como
     conjunto. En una fila de cuatro se leen como lo que son, una ficha. */
  .home-janice-datos {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 8px 40px;
  }


}


/* ============================================================================
   4 · FICHA DE PRODUCTO
   ----------------------------------------------------------------------------
   La página donde se decide la compra. En escritorio ya tenía la estructura
   correcta —galería a la izquierda, columna de compra pegajosa a la derecha—
   pero el orden de lectura estaba mal: lo primero que se veía era un precio
   sin nombre.
   ========================================================================= */

@media (min-width: 900px) {

  /* ---------- El titular sube por encima de la galería ----------
     🔴 En escritorio el primer pantallazo mostraba la galería a la izquierda y,
     a la derecha, una tarjeta que decía «34 · 52 USD · Comprar ahora» — sin el
     nombre del producto en ninguna parte. El `<h1>` quedaba a ~780px de scroll,
     debajo de una galería de 577px de alto. Se le pedía a la visitante que
     decidiera un precio antes de saber de qué producto era.

     En móvil el orden está bien —galería, titular, precio— porque todo va
     apilado y el titular llega enseguida. En escritorio, con dos columnas, la
     galería empuja el titular fuera del pliegue y hay que invertirlos.

     Se hace con `order`, que en una grilla sí altera la autocolocación (el
     orden que usa es el «order-modified document order»). Solo se marcan estos
     dos elementos: el resto queda en `order: 0` y conserva su orden de
     documento, así que ninguna sección de más abajo se mueve.

     ⚠️ `.pdp-col-compra` no se ve afectada: está colocada explícitamente en
     `grid-row: 1 / span 30`, y un elemento con colocación explícita no pasa
     por la autocolocación. */
  .pdp-migas { order: -2; }
  .pdp-head  { order: -1; }

  /* Con el titular arriba, la galería queda inmediatamente debajo y el `h1`
     puede tomar el tamaño que le corresponde en escritorio sin comerse el
     pliegue. */
  .pdp-head h1 { max-width: 20ch; }
}


/* ============================================================================
   5 · CONTACTO
   ========================================================================= */

@media (min-width: 760px) {

  /* ---------- El formulario, en dos columnas ----------
     Cinco campos apilados a 675px de ancho cada uno: en escritorio eso son
     cinco renglones de formulario para pedir un nombre y un correo, y el botón
     de envío queda a media pantalla de scroll de la primera pregunta.

     El marcado es una columna de `<label>` que envuelven su campo, así que
     basta convertir el formulario en grilla: nombre y correo comparten fila,
     motivo y teléfono comparten la siguiente, y el mensaje ocupa el ancho
     completo porque es el campo que de verdad necesita espacio.

     ⚠️ Los dos `<input type="hidden">` del nonce NO estorban: la hoja de
     estilos del navegador les aplica `display: none !important`, así que no
     son elementos de grilla y no ocupan celda. Y `.campo-trampa` es
     `position: absolute`, que tampoco participa de la grilla. */
  .con-form-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    align-items: start;
  }

  .con-form-campos > label[for="bk_mensaje"] { grid-column: 1 / -1; }
  .con-form-campos > .con-nota { grid-column: 1 / -1; margin-top: 0; }

  .con-form-campos > .btn {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
    min-width: 280px;
  }
}


/* ============================================================================
   6 · CHECKOUT — se deja en UNA columna, a propósito
   ----------------------------------------------------------------------------
   Se probó pasarlo a dos columnas con el resumen pegado a la derecha, que es
   el patrón estándar del comercio en escritorio, y se revirtió por dos
   razones que aparecieron al medir:

   1. La página vive dentro de `.wrap--reading` (740px) y de un
      `.bk-checkout-wrap` de 620px. Con dos columnas de 1fr + 380px, la
      columna del formulario colapsaba a 130px: los campos de nombre y
      apellido quedaban en 34px de ancho. Hacerlo bien exigía ensanchar dos
      contenedores ajenos y sacar la página del ancho de lectura.

   2. Y sobre todo: el proyecto ya decidió esta pantalla con un argumento
      escrito —«una sola columna, con el resumen ARRIBA: saber qué se compra y
      cuánto cuesta antes de que pidan datos»—. Una columna centrada y angosta
      en el paso del pago no es un defecto de escritorio, es foco. Es donde
      entra la plata, PayPal y MercadoPago todavía no están integrados, y no
      es la pantalla para estrenar una estructura nueva a días del lanzamiento.

   Lo que sí se hace es darle aire: el ancho de móvil llevado tal cual a una
   pantalla de 1.440px se lee como una captura de teléfono pegada al medio.
   ========================================================================= */

@media (min-width: 1000px) {

  /* El ancho ya no se declara acá: desde el 26-08 el checkout mide `--reading`
     (740px) igual que el carrito, porque son la misma pieza en dos pasos del
     mismo recorrido y no tenían por qué medir distinto —el checkout iba a
     620px y el carrito a 740—.

     El padding interior de las dos cajas de formulario tampoco: lo pone el
     `@media (min-width: 760px)` del propio bloque de checkout en `cart.css`,
     junto a la regla que define esas cajas. Y el resumen ya no es una caja
     —es «la cuenta», con su propio marco—, así que darle padding acá le
     habría metido 30px por fuera del recuadro. */
  .bk-checkout-head h1 { font-size: 40px; }
}


/* ============================================================================
   7 · PÁGINA 404
   ========================================================================= */

@media (min-width: 900px) {

  /* El aviso de error cruzaba los 1.408px de la pantalla mientras la grilla de
     ebooks de más abajo estaba acotada a 740px: el mismo bloque de contenido
     empezaba en dos sitios distintos. La grilla ya se había acotado a propósito
     («a ancho completo salían dos tarjetas de 610px dominando una página de
     error»); lo que faltaba era acotar la página, no solo la grilla.

     `--reading` y no un número: `.bk-404` ya declara esa columna en
     «ALINEACIÓN HORIZONTAL ÚNICA», así que acá solo se le hace caso. */
  .bk-404 {
    max-width: var(--reading);
    margin-inline: auto;
  }
}


/* ============================================================================
   8 · MI CUENTA
   ----------------------------------------------------------------------------
   Compuesta el 27-08. La estructura ya es correcta en las cuatro pantallas —una
   sola columna dentro del ancho de lectura—; lo que queda es el defecto de
   familia 1 de esta hoja: acciones a ancho completo. Un botón de 675px no se
   lee como algo que se toca.
   ========================================================================= */

@media (min-width: 760px) {

  /* «Guardar los cambios» dejaba de ser un botón para ser una franja. En móvil
     el ancho completo es correcto —es la única acción de la pantalla y el pulgar
     tiene que alcanzarla—; acá se acota y se alinea con la columna, no centrada:
     «ALINEACIÓN HORIZONTAL ÚNICA» manda que todo arranque en la misma vertical.

     `.btn--block` es (0,1,0) y trae `width: 100%`; esto es (0,2,0) y gana
     contando, sin depender del orden de carga. */
  .bk-datos-guardar .btn--block {
    width: auto;
    min-width: 280px;
  }

  /* Las dos salidas del estado vacío dejan de repartirse el ancho entero: son
     una acción principal y una secundaria, no dos mitades. */
  .bk-cuenta-vacia-acciones .btn { flex: 0 0 auto; min-width: 220px; }

  /* El nombre del producto puede crecer: en escritorio la foto de 74px al lado
     de un titular de 19px dejaba el bloque con aire de sobra a la derecha. */
  .bk-entrega-datos h2 { font-size: 22px; }

  /* Los tres pasos del MISMO recorrido crecen igual: el carrito y el checkout
     pasan a 36px en este mismo ancho y «gracias» se quedaba en 30, o sea la
     misma pieza medía distinto según en qué paso estuviera la compradora.

     ⚠️ Va acá y no en el `@media (min-width: 760px)` de `cart.css`: su regla
     base está más abajo en ese archivo y pesa lo mismo (0,1,1), así que ganaría
     por orden. Medido: escrito allá, a 1280px seguía en 30px. */
  .bk-gracias-head h1 { font-size: 36px; }

  /* El texto de los archivos deja de cruzar los 675px del bloque. */
  .bk-entrega-correo.bk-entrega-correo { max-width: 70ch; }
}

/* ============================================================================
   FOTO DE JANICE EN EL HOME — los tres escalones del punto de anclaje
   ============================================================================
   `.home-janice-foto` es la única caja de foto del sitio con ALTO FIJO y ANCHO
   FLUIDO, así que cuánto recorta cambia con el viewport y el punto que centra
   la cara no puede ser uno solo. El objetivo es siempre el mismo: dejar el
   centro de la cabeza —que en el original de 792x1400 cae en y = 0,417— en el
   centro exacto de la caja. Con `object-fit: cover` eso NO es poner 41,7%: es
       p = (f · altoEscalado − altoCaja/2) / (altoEscalado − altoCaja)
   El valor base (37%, para 342x214) vive en `home-brooklyn.css`.

   ⚠️ VAN JUNTOS Y EN ESTE ORDEN A PROPÓSITO. Los tres selectores pesan lo
   mismo (0,1,1), así que lo que decide cuál gana es el orden en el archivo —
   y este archivo NO está ordenado por breakpoint (hay bloques de 900px y de
   1000px antes que el de 760px). Repartirlos entre esos bloques dejaría al de
   760px ganando en pantallas de 1280px.

   ⚠️ Si se cambia el alto de `.home-janice-foto`, hay que recalcular los
   cuatro valores, no solo el de esa pantalla. */

/* 🔴 A PARTIR DE ~430px DE ANCHO LA CABEZA YA NO CABE EN ESTA CAJA, y eso
   cambia el objetivo. Con la foto apilada a sangre, un ancho de 704px sobre
   214px de alto fijo deja ver apenas 241px de los 1400 del original, mientras
   la cabeza sola mide 455px. O sea: en el tramo 500–899px es IMPOSIBLE mostrar
   la cabeza entera, y centrarla ahí produce un primer plano de frente y ojos
   con la boca cortada — que fue exactamente lo que se midió a 768px.
   Por eso acá el ancla deja de ser el centro de la cabeza (0,417) y pasa a ser
   el centro de la CARA (0,45): ojos, nariz y boca dentro del encuadre.
   ⚠️ Esto es lo mejor que se puede hacer sin tocar el diseño. El arreglo de
   fondo es darle más alto a `.home-janice-foto` en ese tramo — una franja de
   3,3:1 no es un formato de retrato— y queda a decisión, no se hizo acá. */
@media (min-width: 500px) {
  .home-janice-foto img { object-position: 50% 44%; }
}

/* La caja deja de ser ancha y pasa a la columna de 380px con `min-height:320px`. */
@media (min-width: 900px) {
  .home-janice-foto img { object-position: 50% 34%; }
}

/* Alto fijo de 460px (ver más arriba en este mismo archivo). */
@media (min-width: 1000px) {
  .home-janice-foto img { object-position: 50% 24%; }
}


/* ============================================================================
   9 · ESCALÓN DE TABLET — la banda 700–899px
   ----------------------------------------------------------------------------
   🔴 EL HALLAZGO QUE ORDENA ESTA SECCIÓN: el escalón principal de esta hoja
   abría en 900px, así que el iPad VERTICAL —768px, que es una pantalla real y
   de las más usadas— no recibía NADA de la pasada de escritorio y se quedaba
   con la composición de teléfono estirada al doble de ancho. Medido antes de
   tocar nada, a 768px: 4 botones de ~704px en el home, el campo de correo en
   672, la galería de las 5 fichas dibujando una foto de 880px de alto y el
   `<h1>` del producto por debajo del pliegue.

   La banda va ACOTADA POR ARRIBA a propósito (`max-width: 899px`). Lo que hay
   de 900 para arriba ya está compuesto y verificado; una regla abierta
   `min-width: 700` cargando al final de todas las hojas le ganaría los empates
   a las reglas de 900 sin que nadie lo notara. Acotada, esta sección no puede
   tocar ni el móvil (<700) ni el escritorio (≥900): solo el hueco que faltaba.

   ⚠️ Un teléfono en HORIZONTAL cae dentro de esta banda (844x390 en un iPhone
   14, 932 en el Pro Max). Es deseable, no un efecto colateral: con 844px de
   ancho y 390 de alto, la composición de tablet es exactamente la correcta —
   más columnas y menos scroll.
   ========================================================================= */

@media (min-width: 700px) and (max-width: 899px) {

  /* ---------- HOME · el hero ----------
     Las dos acciones se apilaban a 704px cada una. En una pantalla de este
     ancho eso son dos franjas, no dos botones, y empujan la foto fuera del
     primer pantallazo. El titular baja de 40 a 38 para que quepa en tres
     renglones en vez de cuatro. */
  .bk-home .home-hero h1 { max-width: 15ch; }

  .home-hero-cta {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 18px;
  }

  /* (0,2,0) contra el (0,1,0) de `.btn--block`: gana contando, no por orden. */
  .home-hero-cta .btn--block { width: auto; min-width: 240px; }

  /* La foto del hero era una banda de 238px de alto sobre 704 de ancho: 3:1,
     que no es formato de fotografía sino de cintillo. */
  .home-hero-foto { height: 320px; }
}


/* ---------- FICHA DE PRODUCTO en tablet ----------
   `product.css` abre ahora su bloque de escritorio en 760 (antes 900), así que
   a 768 la ficha ya llega en dos columnas. Lo que NO sirve tal cual son sus
   medidas: están calculadas para un contenedor de 1.180px.

   Medido a 768 con las medidas de escritorio: contenedor 704, columna de
   compra 380 + 48 de gap = 428, y la columna de CONTENIDO quedaba en 276px —
   más angosta que la de compra—. La galería caía a 276 y la cita de Janice a
   ~28 caracteres por línea, la mitad del mínimo que fija §3.m.

   Acá se invierte la proporción: la compra baja a 280 y el gap a 28, con lo que
   el contenido sube a 396. La tarjeta de compra a 280px sigue teniendo de sobra
   para el precio y los dos botones —es más ancha que la de un teléfono— y deja
   de competir en peso con lo que se está leyendo. */
/* 🔴 LA COLUMNA DE COMPRA PASA A SER FLUIDA, y el motivo salió de medir el
   límite de la banda: con 280px acá y los 380 fijos de `product.css` desde 900,
   la columna de CONTENIDO iba de 527px a 899 y caía a 408 a 900 — o sea que
   ensanchar la ventana ACHICABA lo que se está leyendo. Un escalón al revés.

   Ahora la compra vale el 34% de la columna útil, con piso en 280 y techo en
   380, y el techo se alcanza justo cuando el contenedor deja de crecer (1180).
   Medido: la columna de contenido queda en 512 · 594 · 644 · 697 px a 900,
   1024, 1100 y 1280 — monotónica, sin saltos.

   `min(100vw, --container)` y no `100vw` a secas: pasados los 1180 el
   contenedor está topado, así que seguir escalando con el viewport haría crecer
   la tarjeta de compra a costa del contenido. A 1280 y a 1440 la medida es la
   misma, que es lo correcto. */
@media (min-width: 760px) {
  .pdp {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(280px, calc((min(100vw, var(--container)) - var(--edge) * 2) * .34), 380px);
    column-gap: 40px;
  }
}

@media (min-width: 760px) and (max-width: 899px) {

  /* El titular sube por encima de la galería, por la misma razón que a 900:
     con dos columnas la galería empuja el `<h1>` fuera del pliegue y lo primero
     que se ve es un precio sin nombre de producto. En móvil el orden se queda
     como está —galería, titular, precio— porque todo va apilado y el titular
     llega enseguida. */
  .pdp-migas { order: -2; }
  .pdp-head  { order: -1; }

  /* 42px es la medida de un titular en una columna de 750px. En 396 partía
     «The Best Cookies» en tres renglones y se comía el pliegue. */
  .pdp-head h1 { font-size: 32px; max-width: 18ch; }

  /* La caja de compra achica su aire interior a la par que su ancho. */
  .pdp-buy { padding: 16px; }
  .pdp-col-compra { margin-top: 10px; }

  /* Los tres chips de pago no caben en una fila de 248px útiles: se dejan
     envolver en vez de comprimirse. */
  .pdp-pagos { flex-wrap: wrap; }
}


/* ---------- HOME · el resto de la página en tablet ---------- */
@media (min-width: 700px) and (max-width: 899px) {

  /* 34ch es medida de teléfono. En 704px de ancho dejaba el párrafo con la
     mitad del espacio disponible y el hero se leía como una columna angosta
     pegada al borde izquierdo. */
  .home-hero-lead { max-width: 44ch; }

  /* Cabecera del catálogo: titular a la izquierda, bajada a la derecha. Es el
     mismo arreglo que la sección 3 hace a 1000px y por el mismo motivo — la
     regla horizontal cruza la página entera y prometía un bloque ancho que
     debajo no existía—, con la bajada en una columna más angosta porque acá
     hay 704px y no 1.180. */
  .home-catalogo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
    column-gap: 32px;
  }

  .home-catalogo > * { grid-column: 1 / -1; }
  .home-catalogo > h2 { grid-column: 1 / 2; }
  .home-catalogo > .home-catalogo-moneda { grid-column: 1 / 2; }

  .home-catalogo > .home-catalogo-lead {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    align-self: center;
    max-width: none;
    margin-top: 0;
  }

  /* Los cuatro datos de Janice en una fila. En dos columnas de 340px,
     «+85K TikTok» y «+30K Instagram» quedaban separados por 340px de vacío,
     que los desarma como conjunto. */
  .home-janice-datos {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 8px 28px;
  }
}


/* ---------- El bloque del Bundle, también en tablet ----------
   Mismo defecto que la sección 3 resuelve a 1000px: a ancho completo, la fila
   «The Best Cookies … 45 29» deja el nombre a ~600px de su propio precio, y es
   la tabla que sostiene la escalera 217 → 141 → 119.

   Acá entra ADEMÁS la colección, que a 1000px queda fuera a propósito porque
   allí el Bundle vive en la columna angosta al lado del hero. En esta banda esa
   composición todavía no existe —la portada de la colección se apila hasta los
   1000px—, así que el bloque está a ancho completo y sí tiene el defecto. */
@media (min-width: 700px) and (max-width: 899px) {

  .bk-home .bk-bundle,
  .busqueda-bundle .bk-bundle,
  .col-bundle-wrap .bk-bundle {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .bk-home .bk-bundle > .bk-bundle-top,
  .busqueda-bundle .bk-bundle > .bk-bundle-top,
  .col-bundle-wrap .bk-bundle > .bk-bundle-top {
    grid-row: 1 / 3;
    align-self: stretch;
    align-items: center;
    border-bottom: 0;
    border-right: 1px solid rgba(121, 87, 87, .2);
    padding: 18px 18px;
  }

  .bk-home .bk-bundle > .bk-bundle-cuenta,
  .busqueda-bundle .bk-bundle > .bk-bundle-cuenta,
  .col-bundle-wrap .bk-bundle > .bk-bundle-cuenta { grid-column: 2; padding: 16px 18px 12px; }

  .bk-home .bk-bundle > .bk-bundle-cierre,
  .busqueda-bundle .bk-bundle > .bk-bundle-cierre,
  .col-bundle-wrap .bk-bundle > .bk-bundle-cierre { grid-column: 2; padding: 0 18px 18px; }
}

/* La celda de la portada pasa a APILAR, y no es un capricho: la fila de
   teléfono —portada de 74x93 al lado del texto— dentro de una celda de 330px
   dejaba el texto en 194px, y ahí «Todos mis cursos. Un solo precio.» partía en
   cuatro renglones. Apilada, la portada puede crecer a 116x145 y el texto se
   queda con los 294px enteros: el titular vuelve a caer en dos líneas y la
   celda deja de tener la mitad del recuadro vacío. */
@media (min-width: 700px) and (max-width: 899px) {
  .bk-home .bk-bundle > .bk-bundle-top,
  .busqueda-bundle .bk-bundle > .bk-bundle-top,
  .col-bundle-wrap .bk-bundle > .bk-bundle-top {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
  }

  .bk-home .bk-bundle .bk-bundle-img,
  .busqueda-bundle .bk-bundle .bk-bundle-img,
  .col-bundle-wrap .bk-bundle .bk-bundle-img { width: 116px; height: 145px; }
}


/* ---------- COLECCIÓN en tablet ----------
   El h1 va topado en 15ch, que es medida de teléfono. A 768 eso lo parte en
   CUATRO renglones de 43px y el primer pantallazo entero queda ocupado por el
   titular: el Bundle —la oferta de mayor valor de la página por la que entra el
   70% del tráfico— arrancaba recién a ~1.000px de scroll. Es el mismo defecto
   de §10.o, que en móvil ya se corrigió y en tablet había quedado. */
@media (min-width: 700px) and (max-width: 899px) {
  .col-hero h1 { max-width: 20ch; }
  .col-hero-lead { max-width: 56ch; }
}


/* ---------- «SOBRE MÍ» en tablet ----------
   La foto pasa a 700px de alto en 640 (`janice-del-aguila.css`) y ahí se queda
   hasta los 900, así que en un iPad vertical el retrato ocupaba la pantalla
   entera y las cuatro estadísticas quedaban debajo del pliegue. Se acota a un
   alto que deja entrar la ficha de datos.

   ⚠️ Cambiar el alto de la caja cambia cuánto recorta, así que el punto de
   anclaje se recalcula: con la caja en 480x560 y el original en 792x1400, la
   imagen escala por ancho a 848 de alto, y para dejar el centro de la cabeza
   (y = 0,417 del original) en el centro de la caja hace falta
   p = (0,417·848 − 280) / (848 − 560) = 25%. */
@media (min-width: 700px) and (max-width: 899px) {
  .jan-foto.jan-foto.jan-foto { height: 560px; max-width: 480px; }
  .jan-foto img { object-position: 50% 25%; }

  /* Las tres promesas en fila, como a 900: apiladas son tres tarjetas de 704px
     que se leen como tres secciones distintas. */
  .jan-promesas { flex-direction: row; }
  .jan-promesa { flex: 1; }

  /* Las dos salidas del cierre dejan de ser dos franjas de 676px. Es el mismo
     tratamiento que `janice-del-aguila.css` ya les da a 900 —acotadas y
     centradas dentro de la banda vino—, bajado a esta banda. No se convierten
     en una fila: son dos botones directos de la sección, sin contenedor flex
     que los pueda alinear, y envolverlos pediría tocar el marcado. */
  .jan-cierre { text-align: center; }
  .jan-cierre .btn { max-width: 420px; margin-inline: auto; }
}


/* ============================================================================
   10 · BROOK — el menú de temas deja de ser una franja
   ----------------------------------------------------------------------------
   Medido en Contacto y en el 404, en TODOS los anchos de escritorio: los dos
   botones del menú raíz («Ebooks», «Acceso alumnas») medían 646–710px. Una
   pastilla de 710px con dos palabras al medio no se lee como una opción, se lee
   como una franja — y son la puerta de entrada al único canal de contacto del
   sitio.

   ⚠️ El menú raíz SIGUE EN UNA COLUMNA. Es una decisión escrita en `brook.css`
   con su motivo: son decisiones excluyentes —a qué vine a este sitio— y en fila
   se leen como etiquetas sueltas. Lo que se corrige acá es el ANCHO, no la
   disposición: la columna se acota y se mantiene pegada a la derecha, que es el
   lado de la visitante en la conversación.

   Solo afecta a la ventana EMPOTRADA (Contacto y 404): la flotante mide ~380px
   y nunca tuvo el problema. */
@media (min-width: 700px) {

  .brook--fija .brook-temas--columna,
  .brook--fija .brook-temas {
    max-width: 420px;
    margin-left: auto;
  }

  /* El campo de la pregunta tampoco necesita 654px para recibir una frase.
     La barra es flex, así que el tope va en el campo y el botón de enviar se
     queda pegado a él en vez de irse al borde derecho del panel. */
  .brook--fija .brook-barra { justify-content: flex-start; }
  .brook--fija .brook-barra input[type="text"] { max-width: 520px; }
}


/* ---------- El bloque de Janice del home, en tablet ----------
   🔴 Esto cierra un pendiente que la propia hoja tenía anotado más arriba: «a
   partir de ~430px de ancho la cabeza ya no cabe en esta caja… el arreglo de
   fondo es darle más alto a `.home-janice-foto` en ese tramo — una franja de
   3,3:1 no es un formato de retrato — y queda a decisión, no se hizo acá».

   Es exactamente el tramo de esta banda. La caja pasa a ser una columna, que es
   lo que ya hace a 900, y con eso la fotografía vuelve a ser un retrato y la
   cabeza cabe entera. El punto de anclaje se recalcula en la sección de anclas
   del final de esta hoja, que es donde viven los otros tres escalones. */
@media (min-width: 700px) and (max-width: 899px) {
  .home-janice-caja {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: center;
  }

  .home-janice-foto { height: 100%; min-height: 340px; }
  .home-janice-copy { padding: 22px 26px; }
}


/* ============================================================================
   11 · «MI CUENTA» — lo que quedó suelto en la pasada del 27-08
   ========================================================================= */

/* 🔴 LA REGLA DE LA SECCIÓN 8 NUNCA SE APLICÓ, Y EL MOTIVO ES UNA CUENTA DE
   ESPECIFICIDAD. `.bk-datos-guardar .btn--block` pesa (0,2,0) y `escritorio.css`
   carga última, así que en un empate gana — pero no había empate: `cuenta.css`
   declara `width: 100%` en un grupo cuya rama que alcanza a este botón es
   `.woocommerce-account button[type="submit"]`, y un selector de ATRIBUTO cuenta
   como clase: (0,2,1). Medido con CSSOM, el botón computaba 676px en los cuatro
   anchos pese a la regla escrita.
   Se resuelve contando —tres clases, (0,3,0)— y no con `!important`, que es la
   disciplina de este proyecto. */
@media (min-width: 760px) {
  .bk-datos .bk-datos-guardar .btn--block {
    width: auto;
    min-width: 280px;
  }

  /* Las dos contraseñas nuevas comparten fila. Son un par —«elige» y
     «repite»— y apiladas a 640px de ancho cada una se leen como tres pasos
     independientes en vez de como una confirmación.
     `+ .bk-datos-caja` es la caja de la contraseña: es la segunda y la única
     con hermana anterior, y es el mismo selector con el que `cuenta.css` ya la
     distingue hoy. Los dos campos son el 4º y 5º `<p>` de la caja —filete,
     bajada, actual, nueva, repite—. */
  .bk-datos-caja + .bk-datos-caja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }

  .bk-datos-caja + .bk-datos-caja > * { grid-column: 1 / -1; }
  .bk-datos-caja + .bk-datos-caja > p:nth-of-type(n + 4) { grid-column: auto; }
}


/* ============================================================================
   12 · «SOBRE MÍ» — la portada, en dos columnas
   ----------------------------------------------------------------------------
   Medido a 1440: el primer pantallazo eran el titular y 560px de una foto
   vertical de 700px de alto, y las cuatro estadísticas —«+1000 alumnas · +20
   países · +85K TikTok · +30K Instagram», o sea la credencial entera de la
   marca— quedaban a ~900px de scroll. En la página que sostiene la
   credibilidad de una marca personal, eso es enterrar el argumento.

   Con el titular, el lema y la ficha de datos a la izquierda y el retrato a la
   derecha, todo eso entra en la primera pantalla.

   🔑 Se resuelve SIN tocar el marcado, con la misma técnica que la sección 3
   usa en el home: la grilla se declara en el padre y solo tres hijos se colocan
   por líneas; el resto conserva el ancho completo y su orden de documento.
   Envolverlos en un div nuevo habría roto el RITMO VERTICAL ÚNICO, que se
   apoya en ser hijo DIRECTO de `.bk-janice`.

   ⚠️ LA GUTTER IZQUIERDA NO ES `--edge`, Y ESA ES LA PARTE QUE IMPORTA. El
   primer intento usó las gutters del contenedor y dejó el titular arrancando en
   x=194 mientras el cuerpo del artículo —que vive en `--reading` centrado—
   arrancaba en 382: un salto lateral de 188px entre la portada y el texto, o
   sea exactamente el defecto que «ALINEACIÓN HORIZONTAL ÚNICA» prohíbe y que la
   sección 2 corrige en el FAQ de la colección. Acá la gutter izquierda vale lo
   que sobra de la COLUMNA DE LECTURA, así que la portada arranca en la misma
   vertical que todo lo demás; la derecha vale lo que sobra del CONTENEDOR, así
   que el retrato cierra donde cierra la página. Medido después: titular y
   párrafos, los dos en 382.

   Abre en 1100 y no en 900: por debajo de ahí las dos columnas no caben sin
   dejar el titular de 54px en cuatro renglones. */
@media (min-width: 1100px) {

  .bk-janice {
    --jan-gap: 48px;
    display: grid;
    /* ⚠️ LAS DOS GUTTERS DESCUENTAN EL GAP, y no es un ajuste a ojo: en una
       grilla `column-gap` se aplica entre TODAS las pistas, incluida la que hay
       entre una gutter y la columna de contenido. Sin el descuento la portada
       arrancaba 48px a la derecha de la columna de lectura —medido: titular en
       430, párrafos en 382— y el retrato cerraba 48px antes que el resto de la
       página. Con el descuento: los dos en 382, y el retrato cerrando en 1278,
       que es el borde interior del contenedor. */
    grid-template-columns:
      [full-start] max(var(--edge), calc((100% - var(--reading)) / 2 - var(--jan-gap)))
      [c1] minmax(0, 1fr)
      [c2] minmax(0, 380px)
      [end] max(var(--edge), calc((100% - var(--container)) / 2 + var(--edge) - var(--jan-gap)))
      [full-end];
    column-gap: var(--jan-gap);
  }

  /* Por defecto todo sigue a ancho completo: la grilla existe solo para la
     portada. `width: 100%` NO es decorativo — es lo que repara la regresión que
     esta misma técnica produjo en el home: un elemento de grilla con
     `margin-inline: auto` deja de estirarse y pasa a medir su CONTENIDO, y
     todos los bloques de esta página llevan `max-width: --reading` + `margin
     auto` desde su propia hoja. */
  .bk-janice > * { grid-column: full-start / full-end; width: 100%; }

  /* Titular y ficha de datos comparten la columna izquierda; el retrato ocupa
     la derecha en las dos filas. Las áreas van explícitas porque la foto tiene
     que abarcar las dos, y con autocolocación caería en una tercera. */
  .bk-janice > .jan-head {
    grid-area: 1 / c1 / 2 / c2;
    align-self: end;
    max-width: none;
    margin-inline: 0;
  }

  .bk-janice > .jan-stats {
    grid-area: 2 / c1 / 3 / c2;
    align-self: start;
    /* Acá el retrato y la ficha dejan de estar apilados —quedan en columnas
       distintas— así que cada uno redondea sus cuatro esquinas. Ver la nota en
       `janice-del-aguila.css`. */
    border-radius: var(--r-caja);
  }

  .bk-janice > .jan-foto.jan-foto.jan-foto {
    grid-area: 1 / c2 / 3 / end;
    max-width: none;
    margin-inline: 0;
    align-self: start;
    /* 4:5 —el formato de la fotografía del sitio, `--foto-producto`— en vez de
       los 700px fijos que trae desde 640. Y no es solo formato: con la caja en
       380x475 sobre un original de 792x1400, el punto que deja el centro de la
       cabeza en el centro de la caja vuelve a ser el 22% que ya declara
       `janice-del-aguila.css`, así que el encuadre del rostro NO hay que
       recalcularlo. Es la misma cuenta de la sección de anclas del final. */
    border-radius: var(--r-caja);
    height: auto;
    aspect-ratio: var(--foto-producto);
  }

  /* 54px en una columna de ~450 dejaba «¡Hola! mi nombre es Janice Del Aguila»
     en cuatro renglones. */
  .bk-janice > .jan-head h1 { font-size: 44px; }
}


/* La cita arrancaba 32px a la IZQUIERDA de todo lo demás de su página: los
   bloques de «Sobre mí» son `--reading` con `padding-inline: var(--edge)`, y
   `.jan-cita` es el único de los seis que no lo declara —su margen lateral se
   lo comía el `margin-inline: auto` del escalón de 900—. Medido: párrafos en
   382, cita en 350. Es un desalineado preexistente y chico, pero al componer la
   portada en dos columnas queda justo debajo del titular y se nota. */
@media (min-width: 900px) {
  .jan-cita { padding-inline: var(--edge); }
}


/* ---------- La celda de la portada del Bundle, también en escritorio ----------
   Medido a 1280 en la búsqueda y en el home: con el bloque en dos columnas la
   celda izquierda mide ~420px y adentro había una portada de 74x93 —la medida
   pensada para una fila de teléfono— con ~120px de recuadro vacío arriba y
   otros tantos abajo. La portada del pack es además un collage de cuatro
   fotos: a 74px no se distingue ninguna, que es justo lo que el bloque tiene
   que probar («son cuatro ebooks»).

   Mismo tratamiento que la banda de tablet, con la portada un punto más grande
   porque acá la celda es más ancha. */
@media (min-width: 1000px) {
  .bk-home .bk-bundle > .bk-bundle-top,
  .busqueda-bundle .bk-bundle > .bk-bundle-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .bk-home .bk-bundle .bk-bundle-img,
  .busqueda-bundle .bk-bundle .bk-bundle-img { width: 132px; height: 165px; }
}