/* The landing families (D6.2). No new vocabulary: a landing is the portada's
   answer narrowed, so it reuses .answer, .offers and .talle-winners, and this
   file only adds the three things those pages have and the portada doesn't —
   the directory of sibling landings, a tienda's headline facts, and the
   catalog list where the authored blurbs render. */

/* Sibling landings. Rows of chips, so the link-out block reads as navigation
   rather than as a footer nobody looks at. */
.landing-links { margin-top: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-md); }
.landing-links .group { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.landing-links .chips { margin-top: 0; }
.landing-links .chips:first-of-type { margin-top: 0; }

/* A tienda's headline numbers. Each one is rendered with its denominator in
   the copy beside it — a count without the set it counts over is the
   unqualified superlative this project may never write (R4.5). */
.landing-facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-lg);
  margin-top: var(--sp-md); padding: var(--sp-md);
  background: var(--surface); border-radius: var(--r-md);
}
.landing-facts .fact { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.landing-facts .num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Marca contra marca. Each cell holds a price and the three facts behind it
   (tienda, producto, pack); inline they wrapped into a ragged block where the
   protagonist figure stopped being the protagonist. Stacked, the price leads
   its cell and the evidence sits under it, which is the same hierarchy the
   offer table already uses across two columns. */
.offers.comparison td .unit-price { display: block; }
.offers.comparison td .label { display: block; margin-top: var(--sp-2xs); line-height: 1.35; }
.offers.comparison td .label a { color: inherit; }
.offers.comparison th.talle { font-weight: 600; white-space: nowrap; }
.offers.comparison .difference { color: var(--muted); font-size: 0.875rem; }

/* The catalog rows a landing is about. The blurb is what keeps the page from
   reading as a list of prices somebody scraped (R5.4), so it is body text and
   not a caption. */
.landing-products { list-style: none; padding: 0; margin: var(--sp-md) 0 0; }
.landing-products li {
  padding: var(--sp-md) 0; border-bottom: 1px solid var(--border);
}
.landing-products li:last-child { border-bottom: none; }
.landing-products .what { font-weight: 600; }
.landing-products .what a { color: var(--ink); text-decoration: none; }
.landing-products .what a:hover { color: var(--primary-deep); text-decoration: underline; }
.landing-products .num { font-variant-numeric: tabular-nums; font-weight: 650; margin-top: var(--sp-2xs); }
.landing-products .blurb { margin: var(--sp-xs) 0 0; max-width: 68ch; }