/* ===========================================================================
   Casas + Orígenes — the IA directory sections (houses and countries).
   White canvas, burgundy as the single scarce accent, mono/serif "folio"
   furniture consistent with the Intaglio identity. Loaded via page_css on
   /casas/, /casas/<slug>/, /origen/, /origen/<slug>/.
   =========================================================================== */
.dir-page { padding-top: 26px; padding-bottom: 72px; }

.dir-head { max-width: 62ch; margin-bottom: 34px; }
.dir-crumb {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--warm-grey);
}
.dir-crumb a { color: var(--warm-grey); transition: color var(--dur-fast, .2s) var(--ease-out, ease); }
.dir-crumb a:hover { color: var(--burgundy); }
.dir-eyebrow { margin-top: 20px; }
.dir-head h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 6vw, 52px); letter-spacing: -.015em; margin: 10px 0 0;
}
.dir-lead { margin-top: 14px; max-width: 54ch; line-height: 1.55; }
.dir-count {
  margin-top: 12px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .06em; color: var(--warm-grey);
}

/* Directory grid of house / country tags. */
.dir-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px; margin-top: 6px;
}
.dir-tag {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 104px; padding: 18px 20px;
  border: 1px solid var(--line-2); background: var(--surface);
  transition: border-color var(--dur-fast, .2s) var(--ease-out, ease),
              background var(--dur-fast, .2s) var(--ease-out, ease);
}
.dir-tag:hover { border-color: var(--burgundy); background: var(--cream); }
.dir-tag-name { font-size: 21px; letter-spacing: -.01em; color: var(--ink); }
.dir-tag:hover .dir-tag-name { color: var(--burgundy); }
.dir-tag-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dir-tag-country { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--warm-grey); }
.dir-tag-n { font-size: 11px; letter-spacing: .04em; color: var(--warm-grey); white-space: nowrap; }
.dir-tag:hover .dir-tag-country, .dir-tag:hover .dir-tag-n { color: var(--burgundy); }

/* Detail header extras: a country chip (linking to /origen/<country>/) + count. */
.dir-detail-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.dir-chip {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--burgundy);
  border: 1px solid var(--line-2); padding: 7px 13px;
  transition: border-color var(--dur-fast, .2s) var(--ease-out, ease);
}
.dir-chip:hover { border-color: var(--burgundy); }
.dir-chip a { color: var(--burgundy); }
.dir-back { font-size: 11px; letter-spacing: .06em; color: var(--warm-grey); }

.dir-products { margin-top: 30px; }
.dir-empty { margin-top: 20px; padding: 46px 0; }

@media (max-width: 600px) {
  .dir-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .dir-tag { min-height: 92px; padding: 15px 16px; }
  .dir-tag-name { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .dir-crumb a, .dir-tag, .dir-tag-name, .dir-chip { transition: none; }
}

/* Per-house cross-sell "Más de {país}" — a hairline-ruled register (mirrors the home
   casa-band), NOT another card grid: mono eyebrow, Bodoni names, arrows, no new colors. */
.casa-siblings { margin-top: 46px; max-width: 640px; }
.casa-sib-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--warm-grey); margin-bottom: 4px;
}
.casa-sib-list { list-style: none; margin: 0; padding: 0; }
.casa-sib {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--line);
  font-family: var(--serif); font-size: 18px; color: var(--ink);
  transition: color var(--dur-fast, .2s) var(--ease-out, ease),
              padding-left var(--dur-fast, .2s) var(--ease-out, ease);
}
.casa-sib:hover { color: var(--burgundy); padding-left: 6px; }
.casa-sib-meta { display: inline-flex; align-items: center; gap: 12px; }
.casa-sib-n { font-family: var(--mono); font-size: 11px; color: var(--warm-grey); }
.casa-sib-arrow { font-size: 13px; color: var(--warm-grey); }
.casa-sib:hover .casa-sib-n, .casa-sib:hover .casa-sib-arrow { color: var(--burgundy); }
@media (prefers-reduced-motion: reduce) {
  .casa-sib { transition: none; }
  .casa-sib:hover { padding-left: 0; }
}