/* ============================================================================
   Brooklyn by Janice — Colección de ebooks · Dirección A «La Carta»
   ----------------------------------------------------------------------------
   La página que decide el negocio: 70% de las entradas, 98% de ellas móviles,
   y una conversión de 0,60% en móvil contra 5,11% en escritorio.

   Todo lo de aquí está escrito móvil primero, sin excepción. El escritorio es
   el 2% de esta página.

   ESTA HOJA ERA LA ÚNICA DEL TEMA SIN UN SOLO TOKEN DE «LA CARTA». Mientras
   cart, home, product, pasteleria, janice, contacto, brook y components ya
   usaban --papel, --serif, --harina y --tinta-2, la colección seguía con
   --paper (#F0F0F0, el gris del sistema viejo) y los títulos en Poppins. Era
   el port 1:1 de Shopify con cinco correcciones encima, en la página que se
   había elegido rediseñar PRIMERO.
   ========================================================================= */

/* ---------- La página entera es papel con textura ----------
   El blanco puro es el fondo de una tienda; este es el de una publicación, que
   es la hipótesis completa de la dirección: si la página se ve como una
   publicación, el ebook deja de compararse con las recetas gratis de internet
   y pasa a compararse con un curso.

   La textura son dos capas de gradiente radial en CSS puro: 0 requests, 0 ms
   de LCP y contraste predecible — a diferencia de una imagen de fondo, sobre
   la que no se puede garantizar AA. */

.coleccion {
  background: var(--papel);
  background-image: var(--harina);
  background-size: var(--harina-size);
}

/* ---------- Portada: hero + Bundle ----------
   En móvil no hace nada: hero y Bundle se apilan, y el Bundle completo entra
   antes del pliegue de 844.

   En escritorio se ponen lado a lado. El hero solo llenaba media pantalla y
   dejaba ~460px de vacío a su derecha —el mismo defecto que ya había aparecido
   en la ficha de producto— mientras el Bundle, a ancho completo, estiraba el
   desglose hasta dejar el nombre de cada ebook a 1.000px de su precio. Los dos
   problemas se arreglan con el mismo movimiento, que además es el que el propio
   mockup proponía para 1280.

   `align-items: end` alinea la base de la tarjeta con la última línea del hero,
   que es lo que hace que el bloque se lea como una sola portada y no como dos
   cosas puestas al lado. */

/* La portada entrega directo a la grilla del catálogo: sin espacio de sección
   abajo (pedido de Ignacio, 24-08). Cuatro clases por la misma razón que
   `.col-hero` más abajo — el ritmo de components.css es (0,3,1), no (0,2,0)
   como dice su comentario. */
.col-portada.col-portada.col-portada.col-portada { padding-bottom: 0; }

@media (min-width: 1000px) {
  .col-portada {
    max-width: var(--container);
    margin-inline: auto;
    /* Faltaba, y era el desalineado más visible del sitio en escritorio: la
       portada arrancaba a 43px y la grilla del catálogo, justo debajo, a 75.
       El `.wrap` de la grilla sí trae este padding; la portada no es un
       `.wrap`, así que lo declara. */
    padding-inline: var(--edge);
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* ⚠️ `column-gap` y `row-gap` por separado, no `gap: 48px`. Desde el 09-09
       la grilla del catálogo es el TERCER hijo de este contenedor, o sea hay
       una segunda fila: un `gap` parejo le habría metido 48px de aire donde el
       ritmo del sitio pone 20. Los 48 son la calle entre hero y Bundle, que
       sigue siendo lo único que separa dos columnas. */
    column-gap: 48px;
    row-gap: 0;
    /* `end` alineaba la base de las dos columnas, pero la tarjeta del Bundle es
       bastante más alta que el hero y empujaba el titular al pie de la pantalla,
       dejando un vacío grande arriba a la izquierda. Centradas, el bloque se lee
       como una sola portada. */
    align-items: center;
  }

  /* La grilla ocupa la fila entera bajo las dos columnas. Sin esto caería en
     la celda (fila 2, columna 1) y el catálogo saldría a media pantalla.
     `align-self: stretch` la saca del `align-items: center` de arriba, que
     está pensado para las dos columnas de la portada y no para una fila que
     ya es del ancho completo. */
  .col-portada > .col-grid-wrap {
    grid-column: 1 / -1;
    align-self: stretch;
  }

  /* Dentro de la portada las dos columnas ya tienen el ancho del contenedor:
     un `.wrap` anidado volvería a centrar y a meter padding lateral. */
  .col-portada .wrap { max-width: none; padding-inline: 0; }

  .col-portada .col-hero,
  .col-portada .col-bundle-wrap { padding-block: 0; }

  /* El h1 no necesita el `max-width: 15ch` de más abajo: la columna ya lo
     limita, y con las dos restricciones juntas el titular quedaba angosto y
     partido en cuatro líneas. */
  .col-portada .col-hero h1 { max-width: none; font-size: 3.25rem; }
}

/* ---------- Hero editorial ----------
   Mide ~226px con el h1 adentro. El original apilaba h1 + párrafo + tres pills
   en ~340px, así que en un teléfono de 390px no se veía un solo producto sin
   hacer scroll — eso es un rebote del 70%. Acá la tarjeta del Bundle completa
   entra antes del pliegue de 844.

   Alineado a la izquierda y no centrado: un texto centrado se lee como un
   cartel, uno alineado se lee como una publicación. */

.col-hero {
  /* Sin padding vertical: el ritmo entre secciones lo pone components.css
     («RITMO VERTICAL ÚNICO»), una sola vez para todo el sitio. */
}

/* Excepción pedida por Ignacio (24-08): el hero no lleva espacio de sección ni
   arriba ni abajo — abre la página pegado al header y entrega directo al
   Bundle.

   ⚠️ Va con la clase repetida CUATRO veces —(0,4,0)— y no tres. El comentario
   del «RITMO VERTICAL ÚNICO» en components.css dice que esa regla es (0,2,0),
   pero está mal contado: `:is()` toma la especificidad de su argumento más
   alto, que ahí es `.wrap--reading.section > article` = (0,2,1), así que
   `> :first-child` suma (0,3,1). Con tres clases esta regla PERDÍA en silencio
   —el padding seguía en 20px pese a estar escrita y cargada—. */
.col-hero.col-hero.col-hero.col-hero { padding-block: 0; }

.col-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  /* 29px en móvil, sin bajar de ahí: es el LCP de la página. */
  font-size: clamp(1.8125rem, 5.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 9px 0 0;
  text-wrap: pretty;
}

.col-hero-lead {
  max-width: 31ch;
  margin: 11px 0 0;
  font-size: 1rem;      /* 16px exactos: por debajo, iOS hace zoom. */
  line-height: var(--lh-texto);
  color: var(--tinta-2);
}

.col-hero-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Las dos frases no caben en una línea a 390px y la barra separadora quedaba
     colgando sola al final de la primera. Con `column-gap` mayor que
     `row-gap` la segunda frase baja limpia y el separador se oculta. */
  column-gap: 10px;
  row-gap: 2px;
  margin: 13px 0 0;
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--cacao);
}

.col-hero-social .sep { color: rgba(121, 87, 87, .5); }

/* Bajo 460px las dos frases van apiladas y el separador sobra. */
@media (max-width: 459px) {
  .col-hero-social { flex-direction: column; align-items: flex-start; }
  .col-hero-social .sep { display: none; }
}

@media (min-width: 760px) {
  .col-hero h1 { max-width: 15ch; margin-top: 14px; }
  .col-hero-lead { max-width: 44ch; margin-top: 18px; font-size: 1.125rem; }
  .col-hero-social { margin-top: 20px; font-size: .75rem; gap: 14px; }
}

/* ---------- Contenedor del Bundle ----------
   La tarjeta en sí es `.bk-bundle`, el componente compartido con el home. Acá
   solo vive su aire.

   La primera versión de esta página escribió su propia tarjeta de Bundle, con
   otro marcado y otras medidas: el mismo pack se veía de dos formas según por
   dónde entrara la compradora, que es justo lo que «La Carta» existe para
   cerrar. Ganó la del home porque su desglose imprime los cuatro ebooks uno por
   uno, así que la escalera 217 → 141 → 119 se puede auditar línea por línea
   contra la grilla de abajo en vez de tener que creerla. */

/* El componente nace con `margin-top:16px` porque en el home va pegado a la
   grilla. Acá abre la página y ese margen sobra. */
.col-bundle-wrap .bk-bundle { margin-top: 0; }

/* ---------- Divisor ----------
   `.eyebrow--regla` vive en components.css: es el mismo de la ficha y del home.
   Acá solo se le da el aire propio de esta página. */

.col-divisor { margin: 0 0 12px; }

@media (min-width: 760px) { .col-divisor { margin-bottom: 16px; } }

/* «Todos los ebooks juntos» nace APAGADO y solo se enciende bajo 1000px, donde
   el Bundle va después de la grilla y abre bloque propio. Al revés que
   «Cursos por separado», que nace encendido y se apaga ahí mismo.

   ⚠️ Basta una clase: lo único que hay que ganarle es
   `.eyebrow--regla { display: flex }` de components.css, que también es
   (0,1,0) y carga ANTES que esta hoja. Si algún día la hoja de componentes
   pasara a cargarse después, esto se apagaría solo sin avisar. */
.col-divisor--juntos { display: none; }

/* ---------- Testimonios ----------
   Reales, del mismo archivo de datos que las fichas. Sin estrellas, sin
   «compra verificada» y sin rating agregado — las tres las traía el mockup y
   las tres son inventadas. No hay sistema de reseñas detrás, y unas estrellas
   fijas puestas por la marca no son prueba social: son decoración que cuesta
   credibilidad, que es justo el activo central de Brooklyn.

   La burbuja con inicial sí se conserva: hace que el testimonio se lea como un
   mensaje de una persona y no como un bloque de copy de la marca. */



.col-testi-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.col-testi-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0;
}

.col-testi-inicial {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-testi-burbuja {
  flex: 1;
  min-width: 0;
  background: var(--white);
  color: var(--ink);
  border: 0;
  box-shadow: var(--borde-caja);
  /* La esquina superior izquierda, la más cerrada, apunta al avatar: es lo que
     hace que se lea como un mensaje y no como una tarjeta suelta. Sube de 2 a
     4px con el resto del sitio (Janice, 30-08: ninguna esquina recta). */
  border-radius: 4px 16px 16px 16px;
  padding: 12px 14px;
}

.col-testi-burbuja figcaption {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .04em;
  color: var(--cacao);
}

.col-testi-burbuja blockquote {
  margin: 7px 0 0;
  font-size: .96875rem;
  line-height: var(--lh-texto);
  text-wrap: pretty;
}

@media (min-width: 1000px) {
  .col-testi-lista { flex-direction: row; gap: 20px; }
  .col-testi-item { flex: 1; }
}

/* ---------- Janice ---------- */

/* `.col-janice` ya no estiliza nada: el bloque lo dibuja `.bk-janice` en
   components.css y el encolumnado lo pone `.wrap` del propio marcado. */

/* ---------- FAQ ---------- */

.col-faq-titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.16;
  margin: 8px 0 14px;
}

@media (min-width: 760px) {
  .col-faq-titulo { font-size: 1.875rem; }
}

/* ---------- Barra fija de compra del Bundle ----------
   Entra cuando el CTA del Bundle sale de vista.

   Nace VISIBLE y el JS la esconde: si el script no carga queda puesta, que es
   el estado seguro. Es preferible una barra siempre visible a una barra que
   nunca aparece en la página que decide el negocio — el mismo criterio que ya
   usa la barra de compra de la ficha. */

.col-barra {
  /* ⚠️ FIXED y no STICKY (25-08). Una barra `sticky; bottom:0` sigue OCUPANDO
     su lugar en el flujo, así que al final del documento reserva su propio
     alto y deja una franja de papel vacía entre la última sección y el footer
     —lo que Ignacio marcó en la colección—. Es capa de interfaz, no una
     sección: no debe ocupar flujo. El JS ya la esconde al asomar el footer,
     que es lo que antes parecía que hacía el sticky. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--papel);
  color: var(--ink);
  border-top: 1px solid rgba(121, 87, 87, .3);
  box-shadow: 0 -8px 24px -12px rgba(43, 43, 43, .3);
  transition: transform 220ms cubic-bezier(.2, .7, .3, 1);
}

.col-barra[data-oculta] { transform: translateY(115%); }

.col-barra-info { flex: 1; min-width: 0; }

.col-barra-nombre {
  display: block;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cacao);
}

.col-barra-precio {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--mono);
}

.col-barra-monto { font-size: 1.125rem; color: var(--ink); }

.col-barra-precio del,
.col-barra-cur { font-size: .65625rem; color: var(--cacao); }

.col-barra .btn { flex: none; min-height: 46px; padding-inline: 18px; }

/* En escritorio la barra no aporta: el CTA del Bundle y la grilla caben juntos
   y no hay 3.000px de scroll que recuperar. */
@media (min-width: 1000px) { .col-barra { display: none; } }

/* Los dos botones flotantes (moneda y Brook) se apoyan sobre la barra en vez
   de taparla — el mismo ajuste que ya existe en la ficha y el carrito. */
@media (max-width: 999px) {
  .coleccion ~ .brook-fab,
  .coleccion ~ .moneda-fab { bottom: 96px; }
}


/* ============================================================================
   ESPACIADOS PEDIDOS POR IGNACIO (31-08)
   ----------------------------------------------------------------------------
   Cuatro ajustes de aire sobre secciones de ESTA página, más el fondo blanco
   del FAQ. Van todos acá y no en `components.css` porque las cuatro clases
   —`.col-grid-wrap`, `.col-testi`, `.col-faq`, `.col-janice`— existen solo en
   la colección: `.bk-quien` y la franja de testimonios sí son componentes
   compartidos, pero lo que se ajusta es su ESPACIO DE SECCIÓN en esta página,
   no el componente. Tocarlo en `components.css` movería también la ficha y
   «Sobre mí», que no se pidieron.

   ⚠️ CLASE REPETIDA —(0,3,0)— OBLIGATORIA en las cuatro, y no es un typo. El
   RITMO VERTICAL ÚNICO 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 estas reglas no se aplicarían por más abajo que estén
   en la cascada: es la trampa que este proyecto ya pisó con el sello, con las
   migas y con el 404. Ninguna de las cuatro es primer ni último hijo de
   `.coleccion`, así que (0,3,0) alcanza —contra un `:first-child`/`:last-child`
   harían falta cuatro clases—.
   ========================================================================= */

/* La grilla del catálogo cierra con 30px contra el sello, en vez de los 20 del
   ritmo. La sección no tiene fondo propio, así que estos 10px extra son
   espacio en blanco real entre el último ebook y la franja de garantía. */
.col-grid-wrap.col-grid-wrap.col-grid-wrap { padding-bottom: 30px; }

/* La franja de testimonios abre con 30px. */
.col-testi.col-testi.col-testi { padding-top: 30px; }

/* El FAQ pasa a fondo blanco y a 30px arriba y abajo.
   ⚠️ Al ganar fondo propio, este padding deja de ser espacio entre secciones y
   pasa a ser aire INTERIOR de la banda blanca: el blanco se pinta hasta 30px
   por encima del eyebrow y 30px por debajo de la última pregunta. La sección
   va a sangre (no lleva `.wrap`), así que la banda cruza la pantalla completa
   y el encolumnado lo sigue poniendo el `.wrap--reading` de adentro.
   Los textos del bloque van en `--ink` y `--tinta-2`, que sobre blanco dan
   14,16:1 y 8,9:1 — o sea el contraste mejora, no empeora (regla de §3.l:
   cambiar el fondo obliga a revisar el color de todo lo que vive dentro). */
.col-faq.col-faq.col-faq {
  background: var(--white);
  padding-top: 30px;
  padding-bottom: 30px;
}

/* «Quién te enseña» con 30px arriba y abajo. */
.col-janice.col-janice.col-janice {
  padding-top: 30px;
  padding-bottom: 30px;
}


/* ============================================================================
   ORDEN DE MÓVIL: HERO → GRILLA → BUNDLE (09-09, pedido de Ignacio)
   ----------------------------------------------------------------------------
   Hasta hoy el orden era el mismo en todos los anchos: hero → Bundle → grilla.
   El Bundle iba primero porque es la ficha que mejor convierte de la tienda
   (9,68%) y en Shopify quedaba a ~3.000px de scroll. Ese argumento sigue
   valiendo en escritorio, donde el Bundle NO cuesta scroll: vive en la columna
   de la derecha, al lado del hero, y se ve junto con él.

   En teléfono no hay dos columnas. Ahí el Bundle son ~470px de tarjeta entre
   el hero y el primer ebook suelto, o sea la compradora tiene que pasar por
   encima de la oferta de 119 USD antes de ver un solo precio de 29. El orden
   nuevo le da primero el catálogo, con sus cuatro precios comparables, y deja
   el pack como cierre — que además es cuando el «ahorras 98» tiene contra qué
   compararse, porque los cuatro precios ya se vieron.

   POR QUÉ 999px Y NO 759px: es el ancho exacto donde `.col-portada` deja de
   ser dos columnas (la regla de más arriba). Bajo eso —teléfono e iPad
   vertical— la página es una sola columna y el problema es idéntico. Si se
   quisiera dejar el iPad con el orden viejo, se cambia este único número a
   759px y nada más.

   ⚠️ NO se duplica marcado ni se detecta dispositivo: es el mismo HTML para
   todos y solo cambia el `order`. Por eso la grilla vive dentro de
   `.col-portada` — ver la nota de `archive-product.php`.
   ========================================================================= */

@media (max-width: 999px) {

  /* En este tramo el contenedor no era nada (block) y los tres bloques se
     apilaban en orden de marcado. Columna flex para poder ordenarlos.
     Sin `gap`: el aire entre bloques lo sigue poniendo el RITMO VERTICAL
     ÚNICO en `padding`, igual que en el resto del sitio. */
  .col-portada {
    display: flex;
    flex-direction: column;
  }

  /* ⚠️ `width: 100%` OBLIGATORIO, y cuesta encontrarlo: `.wrap` trae
     `margin-inline: auto`, y un ítem flex con margen automático en el eje
     transversal DEJA DE ESTIRARSE y pasa a medir su contenido. Sin esta línea
     la tarjeta del Bundle se encogía de 704 a 636px a 768 de ancho —el iPad
     vertical— mientras a 390 se veía perfecta, o sea el defecto no aparecía en
     el ancho en el que se prueba. Medido, no supuesto. */
  .col-portada > * { width: 100%; }

  .col-portada > .col-hero        { order: 1; }
  .col-portada > .col-grid-wrap   { order: 2; }
  .col-portada > .col-bundle-wrap { order: 3; }

  /* Los dos rótulos se intercambian. `flex` y no `block`: `.eyebrow--regla`
     dibuja su línea con un `::after` que necesita el contexto flex. */
  .col-divisor--separado { display: none; }
  .col-divisor--juntos   { display: flex; }

  /* Los 30px del 31-08 son «lo que cierra el catálogo contra la franja de
     garantía». Con el orden nuevo, lo que cierra contra el sello ya no es la
     grilla sino el Bundle, así que los 30px se mudan con él y la grilla vuelve
     al ritmo normal. Sin esto quedaban 50px sobre el rótulo del Bundle y 40
     bajo la tarjeta: el bloque se leía cabezón.

     ⚠️ CLASE REPETIDA —(0,3,0)— OBLIGATORIA en las dos. El RITMO VERTICAL
     ÚNICO es `:is(…) > *` y pesa (0,2,1) por `.wrap--reading.section > article`;
     y la regla de los 30px de más arriba también es (0,3,0), así que ésta le
     gana por ir DESPUÉS en el archivo. Mover este bloque más arriba lo
     silencia. */
  .col-grid-wrap.col-grid-wrap.col-grid-wrap { padding-bottom: var(--sec); }
  .col-bundle-wrap.col-bundle-wrap.col-bundle-wrap { padding-bottom: 30px; }
}