/* The portada's answer block and the winners-by-talle strip (D6.6). The answer
   is above the fold and reads in one glance: tienda, precio por pañal, verdict.
   Border-first, no shadow — it is not floating, it is the page. */
.lead { margin-top: var(--sp-xs); }
.ranking-note { margin-top: var(--sp-2xs); margin-bottom: var(--sp-md); }

.answer {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-lg); margin-top: var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-sm);
}
.answer .store { color: var(--primary-deep); }
.answer-price-line { display: flex; align-items: baseline; gap: var(--sp-sm); flex-wrap: wrap; }
.answer-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin-top: var(--sp-2xs); }
.answer-compare { align-self: center; }
.answer p:last-child { margin-bottom: 0; }

.talle-winners {
  /* The ladder runs RN…XXXG: seven cells have to fit one row at full width. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.talle-winner {
  padding: var(--sp-sm) var(--sp-md);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
  transition: background-color 150ms var(--ease-out);
}
.talle-winner:hover { background: var(--surface); color: var(--ink); }
.talle-winner .t { font-size: 0.8125rem; font-weight: 600; color: var(--primary-deep); }
.talle-winner .w { font-size: 0.875rem; color: var(--muted); }
.talle-winner .p { font-variant-numeric: tabular-nums; font-weight: 650; }