/* pages.css — Page-level layouts: home, pillar, article, search, explore, signup. Tokens only. */

/* ---------- Home (editorial, asymmetric) ---------- */
.home-hero { padding: var(--space-7) 0 var(--space-2); max-width: 900px; }
.home-hero__kicker { color: var(--color-text-secondary); margin: 0 0 10px; font-size: var(--fs-small); }
.home-hero__lead { font-size: 1.1rem; color: var(--color-text-secondary); max-width: 62ch; margin: var(--space-4) 0 0; }
.personalize { margin-top: var(--space-4); }
.personalize__note { margin: 0; font-size: var(--fs-xsmall); color: var(--color-text-secondary); }
.home-top { display: grid; gap: var(--space-6); }
.home-top__main { display: grid; gap: var(--gap); min-width: 0; }
.home-top__lead { min-width: 0; }
.home-top__side { display: grid; gap: var(--gap); }
.home-top__latest { min-width: 0; }
.latest__list { display: grid; gap: 0 var(--gap); }
@media (min-width: 760px) {
  .home-top__side { grid-template-columns: 1fr 1fr; }
  .latest__list { grid-template-columns: 1fr 1fr; }
}
/* Wide screens: lead | two side cards | «Lo último» column, like the approved prototype. */
@media (min-width: 1150px) {
  .home-top { grid-template-columns: minmax(0, 3.1fr) minmax(0, 1fr); align-items: start; }
  .home-top__main { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); align-items: start; }
  .home-top__side { grid-template-columns: 1fr; }
  .latest__list { grid-template-columns: 1fr; }
  .home-top__lead .card--lead { grid-template-columns: 1fr; }
  .home-top__lead .card--lead .card__art { width: min(100%, 300px); margin-bottom: var(--space-2); }
}
.foryou { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-foryou-bg); }
.foryou__why { margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--color-text-secondary); }
.grid--compact { --card-min: 240px; }
.foryou .card__art { width: 64px; height: 64px; }

/* ---------- Page hero (pillar, static, search) ---------- */
.page-hero { padding: var(--space-6) 0 var(--space-4); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); }
.page-hero--compact { border-bottom: 0; padding-bottom: 0; }
.page-hero__desc { max-width: 70ch; color: var(--color-text-secondary); font-size: 1.05rem; margin: 0 0 var(--space-3); }
.page-hero__meta { margin: 0; font-size: var(--fs-small); color: var(--color-text-secondary); }
.page-hero .display { color: var(--color-text-primary); }
.pillar-about .prose { max-width: var(--measure-read); }

/* ---------- Article ---------- */
.article { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); padding-block: var(--space-6) var(--space-8); }
@media (min-width: 1000px) { .article { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; } }
.article__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-article-title); line-height: 1.12; margin: 0 0 var(--space-4); letter-spacing: var(--tracking-display); max-width: 24em; }
.article__dek { font-family: var(--font-read); font-size: 1.2rem; line-height: 1.5; color: var(--color-text-secondary); margin: 0 0 var(--space-5); max-width: var(--measure-read); }
.article__dateline { display: flex; flex-wrap: wrap; gap: var(--space-2) 18px; align-items: center; font-size: 0.9rem; color: var(--color-text-secondary); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.article__dateline time { color: var(--color-text-primary); font-weight: 600; }
.article__hero { border-radius: 999px / 100px; overflow: hidden; margin: var(--space-5) 0; height: 200px; background: var(--art-field); }
@media (max-width: 720px) { .article__hero { height: 110px; border-radius: 999px / 55px; margin: var(--space-4) 0; } }
.article__aside { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.article__aside .cta { margin: 0; }
.ai-note { display: flex; gap: var(--space-3); align-items: flex-start; margin: var(--space-4) 0; padding: 12px 14px; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.9rem; color: var(--color-text-secondary); max-width: var(--measure-read); }
.ai-note .icon { width: 20px; height: 20px; color: var(--color-primary); margin-top: 2px; }
.ai-note p { margin: 0; }
.ai-note strong { color: var(--color-text-primary); }
.article__main .notice { max-width: var(--measure-read); }
.source-card { margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--status-ok-border); background: var(--status-ok-bg); border-radius: var(--radius-card); max-width: var(--measure-read); }
.source-card__heading { font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-1); color: var(--color-text-secondary); }
.source-card__name { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: 1.25rem; margin: 0; }
.source-card__kind, .source-card__outlet { margin: 0 0 var(--space-2); font-size: var(--fs-small); color: var(--color-text-secondary); }
.source-card__link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch-target); font-weight: 600; overflow-wrap: anywhere; }
.corrections { margin-top: var(--space-6); max-width: var(--measure-read); font-size: 0.95rem; }
.related { min-width: 0; }

/* ---------- Search ---------- */
.search-status { margin: var(--space-5) 0 var(--space-3); }
.search-status p { margin: 0; }
.search-mode { font-size: var(--fs-small); color: var(--color-text-secondary); margin-top: var(--space-1); }
.search-tools { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.search-tools .chips-nav { margin: 0; }
.empty { padding: var(--space-6) 0; }
.empty__title { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 var(--space-2); }

/* ---------- Signup ---------- */
.signup { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-7); }
@media (min-width: 1000px) { .signup { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; } }
.signup__main { min-width: 0; }
.signup__aside { font-size: 0.95rem; }