/* El reset por sección del theme viejo (box-sizing, a{color:inherit},
   button{font-family:inherit}) se eliminó: base.css ya lo aplica a todo el
   sitio una sola vez. Repetirlo aquí además elevaba la especificidad por
   encima de los botones de components.css y les robaba el color del texto. */

/* ============================================================================
   Brooklyn by Janice — Home
   Portado de sections/main-home-brooklyn.liquid
   Los tokens de color y tipografía se quitaron: viven en tokens.css.
   ========================================================================= */

/* ============================================================================
   REDISEÑO · Dirección A «La Carta» — home
   ----------------------------------------------------------------------------
   Agregado sobre el port anterior. El home recibe 1.633 sesiones (6,6%), muy
   por detrás de la colección, pero es la cara de la marca: lo que abre Google
   y lo que abre una marca como Jumbo. Vende ebooks Y dice qué es Brooklyn.
   ========================================================================= */

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

/* ---------- Hero ---------- */

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

/* El hero NO declara `padding-top`: se lo da el RITMO VERTICAL ÚNICO con
   `--sec-hero` (30px), igual que el primer bloque de todas las demás páginas.

   Acá vivía una excepción escrita a mano con ese mismo valor (30-08), de cuando
   los 30px eran solo del home. Al volverse la regla del sitio (31-08) se borró
   en vez de dejarse: el mismo número escrito dos veces se desincroniza. */

.bk-home .home-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -.008em;
  margin: 10px 0 0;
  text-wrap: pretty;
}

.home-hero-lead {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
  max-width: 34ch;
}

.home-hero-cta { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }

.home-hero-link,
.home-vertodos,
.home-janice-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--cacao);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-janice-link { color: var(--wine); }

.home-hero-link { justify-content: center; }

/* ⚠️ SIN `background` a propósito (23-08). Tenía `--sand` como color de
   espera, pero `.home-hero-foto` es hijo DIRECTO de `.bk-home`, así que el
   ritmo vertical de `components.css` le pone 20px de padding arriba y abajo
   —y el fondo se pintaba ahí: dos franjas amarillas enmarcando la foto, en el
   primer pantallazo del home. La imagen cubre el 100% de su caja de
   contenido, así que un color de espera no se ve nunca; lo único que hace es
   colorear el espacio de sección. */
.home-hero-foto { height: 238px; overflow: hidden; }

/* La foto va a sangre, sin ritmo propio arriba ni abajo (pedido de Ignacio,
   23-08): pegada al hero por arriba y a la franja de tinta por abajo, que se
   leen como una sola pieza —la foto y su pie— y no como secciones vecinas.
   Solo se anula el ritmo de la FOTO: el de la franja se pinta de tinta —es
   una banda con fondo propio— así que no es separación, es su aire interior,
   y sin él el texto queda pegado al borde de la banda.
   ⚠️ Hay que ganarle al «RITMO VERTICAL ÚNICO» de components.css, que le pone
   `padding-block: var(--sec)` a todo hijo directo de `.bk-home` con
   especificidad (0,2,0). Por eso la clase va repetida: (0,3,0) gana sin
   depender del orden de carga de las hojas. */
.bk-home > .home-hero-foto.home-hero-foto { padding-block: 0; }
.home-hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.home-franja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* El padding lateral lo pone «ALINEACIÓN HORIZONTAL ÚNICA» en
     components.css: es una banda a sangre y su texto tiene que alinearse con
     la columna de la página, no con el borde de la pantalla. */
  background: var(--ink);
  color: var(--papel);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: .04em;
}

.home-franja span:last-child { color: rgba(251, 247, 242, .7); text-align: right; }

/* ---------- Catálogo ---------- */

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

/* 20px de aire sobre el rótulo (pedido de Ignacio, 30-08).
   ⚠️ Va SCOPEADO a `.home-catalogo` y no sobre `.eyebrow--regla`: ese componente
   se dibuja también en «Sobre mí», Contacto (x2) y la colección, y ahí el
   espacio ya lo pone el RITMO VERTICAL ÚNICO. Tocarlo en `components.css`
   habría movido cuatro páginas para arreglar una.
   Clase repetida (0,3,0) por la convención de los overrides de `.eyebrow`:
   `base.css` declara un `.eyebrow.eyebrow` global (0,2,0). */
.home-catalogo .eyebrow.eyebrow {
  padding-top: 20px;
}

/* ⚠️ El h2 estaba AGRUPADO con el lead (23-08): heredaba tamaño y color de
   párrafo y, al no declarar familia, caía en la regla global de `base.css`
   —o sea Poppins en negrita, la fuente que «La Carta» vino a reemplazar—.
   Se leía como un párrafo en bold y rompía la jerarquía de la sección.
   Va con la misma receta que el resto de los titulares de sección del home
   (`.home-janice-copy h2`, `.bk-testi-head h2`): Young Serif, peso 400, tinta. */
.home-catalogo h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.16;
  margin: 7px 0 0;
  color: var(--ink);
}

.home-catalogo-lead {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
  max-width: 36ch;
}

.home-catalogo-moneda {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--cacao);
}

.home-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* La foto, la insignia, la bajada y el precio de la tarjeta viven ahora en
   `components.css`: el mismo componente lo usan el home, la colección, Postres,
   el 404 y el carrito vacío. Aquí no queda nada propio del home. */

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

/* La franja de testimonios pasó a `components.css` como `.bk-testi`:
   la dibujan el home y «Sobre mí», y había divergido entre las dos. */

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

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

/* 30px arriba y abajo (pedido de Ignacio, 31-08), contra los 20 del RITMO
   VERTICAL ÚNICO.
   ⚠️ CLASE REPETIDA —(0,3,0)— obligatoria: el `:is()` del ritmo pesa (0,2,1)
   por `.wrap--reading.section > article`, su argumento más alto; con una o dos
   clases esta regla no se aplicaría, y encima el ritmo vive en otro archivo.
   Va en la hoja del home y no en `components.css` porque `.home-janice` es
   propio del home — el bloque equivalente de la ficha y la colección es
   `.bk-quien`, que es otro componente.
   La sección no tiene fondo propio (lo tiene la caja de adentro), así que
   estos 30px son espacio en blanco real y no aire interior. */
.home-janice.home-janice.home-janice {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* ⚠️ `overflow: hidden` en la CAJA, no un `border-radius` en la foto — y esto
   no es equivalente (pedido de Ignacio, 31-08: «esquinas superiores
   redondeadas» en la foto de Janice).

   La caja ya lleva `--r-caja` pero no recortaba a sus hijos, así que la foto
   —que llega hasta el borde— salía por las esquinas con el ángulo recto. Es el
   mismo defecto que apareció en `.bk-bundle` al redondear el 30-08.

   Redondear «las dos superiores» de la foto solo sería correcto en MÓVIL, que
   es donde la caja apila foto arriba y texto abajo. Desde 760px la caja pasa a
   una grilla de dos columnas con la FOTO A LA IZQUIERDA (ver más abajo), así
   que las esquinas que tiene que seguir son la superior-izquierda y la
   INFERIOR-izquierda: con «las dos superiores» quedaría un ángulo recto
   asomando por debajo del radio de la caja. Con `overflow` la foto hereda el
   recorte correcto en los dos breakpoints y el radio se declara UNA vez. */
.home-janice-caja { background: var(--white); color: var(--ink);
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
  overflow: hidden;
}

.home-janice-foto { height: 214px; overflow: hidden; background: var(--sand); }
/* El punto de anclaje NO es un valor de gusto: es el que deja el CENTRO DE LA
   CABEZA (que en el original de 792x1400 cae en y=0,417) en el centro exacto
   de la caja. Con `cover`, la cuenta es p = (f·altoEscalado − altoCaja/2) /
   (altoEscalado − altoCaja) — no basta con poner el mismo porcentaje que la
   fracción de la foto. Para 342x214 da 37%; con el 32% anterior la cara caía
   ~30px baja y la barbilla quedaba pegada al borde inferior.
   ⚠️ Como la caja es de alto FIJO y ancho fluido, el recorte cambia con el
   viewport: por eso hay tres escalones (aquí, y 760px y 900px/1000px en
   `escritorio.css`). Si se toca el alto de `.home-janice-foto`, hay que
   recalcular los cuatro. */
.home-janice-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; display: block; }

.home-janice-copy { padding: 16px 15px 17px; }

/* 23px y no 17px.
   A 17px el título quedaba a UN píxel del párrafo que va debajo (16px): dos
   textos del mismo tamaño no son un título y un cuerpo, son un bloque plano.
   23px lo alinea con los demás títulos serif del sitio (22px en testimonios
   de ficha y de «sobre mí») y recupera la jerarquía.
   El cuerpo se deja en 16px a propósito: §3.m fija ese mínimo para móvil, y
   el 95,6% del tráfico lee acá. La jerarquía se gana subiendo el título, no
   achicando el texto por debajo del mínimo legible. */
.home-janice-copy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.16;
  margin: 7px 0 0;
}

.home-janice-copy > p { margin: 10px 0 0; font-size: 16px; line-height: var(--lh-texto); color: var(--tinta-2); }

.home-janice-datos {
  margin: 13px 0 0;
  padding-top: 11px;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cacao);
  border-top: 1px solid rgba(121, 87, 87, .2);
}

/* ---------- Escritorio ---------- */

@media (min-width: 900px) {
  .bk-home .home-hero,
  .home-catalogo,
  .home-janice { max-width: var(--container); margin-inline: auto; }

  .bk-home .home-hero h1 { font-size: 56px; max-width: 16ch; }
  .home-hero-cta { flex-direction: row; align-items: center; gap: 18px; }
  .home-hero-cta .btn--block { width: auto; min-width: 220px; }

  .home-hero-foto { height: 420px; }
  .home-grid { grid-template-columns: repeat(4, 1fr); }

  .home-janice-caja { display: grid; grid-template-columns: 380px 1fr; align-items: center; }
  .home-janice-foto { height: 100%; min-height: 320px; }

}

/* Tarjetas de la grilla: el botón se ancla abajo aunque las bajadas tengan
   distinto largo. Sin esto, con bajadas de 2 y de 3 líneas los CTA quedan a
   distinta altura y la grilla se lee desordenada. */
.bk-home .pcard { display: flex; flex-direction: column; }
.bk-home .pcard-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 10px 11px 11px; }
.bk-home .pcard-cuerpo h3 { font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.14; margin: 0; }
.bk-home .pcard-cuerpo h3 a { color: inherit; text-decoration: none; }
/* `auto` y no una separación fija: es lo que baja el precio al pie de la
   tarjeta y deja alineados precio y botón de las dos columnas aunque los
   títulos ocupen una o dos líneas. Un `margin-top: 9px` acá le ganaba al
   `auto` de components.css y dejaba la fila escalonada. */
.bk-home .pcard-precio { margin-top: auto; padding-top: 9px; }
.bk-home .pcard-cuerpo .btn { margin-top: auto; }
.bk-home .pcard-precio + .btn { margin-top: 10px; }

/* La franja tinta: en móvil las dos frases compiten por el ancho y las dos
   terminan partidas en dos líneas. Apiladas se leen de una. */
@media (max-width: 479px) {
  .home-franja { flex-direction: column; align-items: flex-start; gap: 3px; }
  .home-franja span:last-child { text-align: left; }
}