/* ==========================================================================
   Fundación Un Lugar — interior pages (mobile-first, no framework)
   Loaded after tokens.css and styles.css on every page except the homepage.
   Built from the approved homepage (iteration 3, DECISIONS.md 2026-09-24):
   same tokens, same grid, hairlines instead of repeated boxes, no new colours.
   Shared by all page families: family chats do not edit this file. They put
   family-only styles in css/family-<id>.css with their class prefix and list
   anything that should be shared in their handoff file.
   ========================================================================== */

/* ---------- Current page in the menu ---------- */
.nav__link[aria-current="page"], .nav__sub a[aria-current="page"] { color: var(--blue-600); font-weight: 600; }

/* ---------- Page intro (the interior-page counterpart of the homepage hero) ---------- */
.page-intro { padding-block: var(--space-4) var(--space-8); }
.page-intro__grid { display: grid; gap: var(--space-7); align-items: center; }
.page-intro__title {
  font-size: var(--fs-page-title); line-height: 1.08; letter-spacing: -0.03em;
  margin-bottom: var(--space-4); max-width: 22ch;
}
.page-intro__lead { font-size: var(--fs-lead); line-height: 1.55; max-width: var(--measure); margin-bottom: 0; }
.page-intro__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); }
.page-intro__actions .btn { width: 100%; }
.page-intro__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--grey-700); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { margin-bottom: var(--space-4); font-size: var(--fs-small); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--grey-700); }
.breadcrumb li + li::before { content: "/"; content: "/" / ""; margin-inline: var(--space-2); color: var(--grey-700); }   /* the separator is not read aloud */
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); color: var(--blue-600); }
.breadcrumb [aria-current="page"] { color: var(--grey-700); }

/* ---------- Section heading block (eyebrow + h2 + lead) ---------- */
.section-head { max-width: 46rem; margin-bottom: var(--space-7); }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head .lead { margin-bottom: 0; }

/* ---------- Media frame: every photo, with room for a consent badge ----------
   <figure class="media"><div class="media__frame"><img …><span class="badge badge--consent badge--on-media">…</span></div><figcaption>…</figcaption></figure> */
.media { position: relative; margin: 0; }
.media__frame { position: relative; border-radius: var(--radius-media); overflow: hidden; background: var(--blue-050); }
.media__frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media--lift .media__frame { box-shadow: var(--shadow-media); }
.media--portrait .media__frame img { aspect-ratio: 4 / 5; }
.media--wide .media__frame img { aspect-ratio: 16 / 9; }
.media figcaption { font-size: var(--fs-small); color: var(--grey-700); padding-top: var(--space-3); max-width: 30rem; }

/* ---------- Prose (long text: mission, legal pages, program detail) ---------- */
.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--fs-h3-lg); letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.prose h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.prose > * + h2 { margin-top: var(--space-8); }
.prose > * + h3 { margin-top: var(--space-6); }
.prose > .eyebrow + h2, .prose > .eyebrow + h3 { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--blue-600); }
.prose blockquote {
  margin: var(--space-6) 0; padding-left: var(--space-5); border-left: 3px solid var(--blue-600);
  font-size: var(--fs-lead); line-height: 1.55; color: var(--navy-700);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* ---------- Two columns: text and photo (reverse puts the photo first on desktop) ---------- */
.split { display: grid; gap: var(--space-7); align-items: center; }
.split__text > :last-child { margin-bottom: 0; }

/* ---------- Main column with a side column (summary box, contents list, key facts) ---------- */
.with-aside { display: grid; gap: var(--space-7); align-items: start; }

/* ---------- Key facts (who, when, where, requirements) ---------- */
.facts { margin: 0 0 var(--space-6); border-top: 1px solid var(--color-rule); }
.facts > div { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-bottom: 1px solid var(--color-rule); }
.facts dt { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); line-height: 1.5; text-transform: uppercase; color: var(--grey-700); }
.facts dd { margin: 0; }

/* ---------- Summary box (white card with the soft shadow, as "Así funciona" on the homepage) ---------- */
.panel { background: var(--white); border-radius: var(--radius-card); padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-card); }
.panel > h2, .panel > h3 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.panel > :last-child { margin-bottom: 0; }

/* ---------- Links to other pages (group landings and "También en …") ---------- */
.link-grid { display: grid; gap: var(--space-6); }
.link-card { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--space-5); border-top: 1px solid var(--color-rule); }
.link-card .media { width: 100%; margin-bottom: var(--space-4); }
.link-card .media__frame { border-radius: var(--radius-card); }
.link-card h3 { margin-bottom: var(--space-2); }
.link-card p { max-width: 30rem; margin-bottom: var(--space-2); }
.link-card .link-arrow { margin-top: auto; }

/* ---------- Documents (PDF reports, certificates, legal files) ---------- */
.doc-list { border-top: 1px solid var(--color-rule); max-width: 48rem; }
.doc { display: flex; gap: var(--space-4); align-items: flex-start; padding-block: var(--space-5); border-bottom: 1px solid var(--color-rule); }
.doc > .icon { color: var(--blue-600); margin-top: 0.2rem; }
.doc__title { font-size: var(--fs-h3); margin-bottom: var(--space-1); }
.doc__title a { display: inline-flex; align-items: center; min-height: var(--target-min); padding-block: 0.3rem; text-decoration: none; }   /* 44 px even on one line */
.doc__title a:hover { text-decoration: underline; }
.doc__meta { font-size: var(--fs-small); color: var(--grey-700); margin-bottom: var(--space-2); }
.doc__body > :last-child { margin-bottom: 0; }

/* ---------- Questions and answers (native <details>, no JavaScript) ---------- */
.faq { border-top: 1px solid var(--color-rule); max-width: 48rem; }
.faq__item { border-bottom: 1px solid var(--color-rule); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 3.5rem; padding-block: var(--space-4); cursor: pointer; list-style: none;
  font-weight: 600; line-height: 1.4; color: var(--color-heading);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--blue-600); color: var(--blue-600); font-weight: 500;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { color: var(--blue-600); }
.faq__answer { padding-bottom: var(--space-5); max-width: var(--measure); }
.faq__answer > :last-child { margin-bottom: 0; }

/* ---------- Callouts (information; "contenido por definir" in the preview) ---------- */
.callout {
  display: flex; gap: var(--space-3); align-items: flex-start; max-width: 48rem; margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); background: var(--blue-050); color: var(--navy-700);
}
.callout > .icon { color: var(--blue-600); width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; }
.callout > div > :last-child { margin-bottom: 0; }
.callout h2, .callout h3 { font-size: 1.125rem; letter-spacing: -0.006em; margin-bottom: var(--space-2); }
.section--alt .callout { background: var(--white); }
.callout--pending { background: var(--white); border: 1.5px dashed var(--blue-200); }   /* preview only: content the foundation still has to supply */

/* ---------- Figures on a white or light background (the brand band keeps .stats as is) ---------- */
.stats--light .stat { border-top-color: var(--color-rule); }
.stats--light .stat__value { color: var(--blue-600); }

/* ---------- Tables (wrap in .table-scroll so a wide table never widens the page) ---------- */
.table-scroll { overflow-x: auto; margin-bottom: var(--space-5); }
.table-scroll:focus-visible { outline-offset: 2px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table caption { text-align: left; font-weight: 600; color: var(--color-heading); padding-bottom: var(--space-3); }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-rule); }
.table thead th { font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--grey-700); border-bottom-color: var(--blue-200); }

/* ---------- Closing call to action ---------- */
.page-cta__inner { display: grid; gap: var(--space-6); }
.page-cta h2 { margin-bottom: var(--space-4); }
.page-cta .lead { margin-bottom: 0; }
.page-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.page-cta__actions .btn { width: 100%; }

/* ========================================================================
   Breakpoints (the same three as styles.css)
   ======================================================================== */
@media (min-width: 40em) { /* 640 px */
  .page-intro__actions, .page-cta__actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
  .page-intro__actions .btn, .page-cta__actions .btn { width: auto; }
  .facts > div { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-5); }
  .panel { padding: var(--space-7) var(--space-6); }
}

@media (min-width: 48em) { /* 768 px */
  .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--grid-gap); }
  .page-intro--media .media { max-width: 34rem; }
}

@media (min-width: 64em) { /* 1024 px — the 12-column grid */
  .page-intro { padding-top: var(--space-6); }
  .page-intro__grid, .split, .with-aside, .page-cta__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .page-intro__content { grid-column: 1 / span 9; }
  .page-intro--media .page-intro__content { grid-column: 1 / span 7; }
  .page-intro--media .media { grid-column: 8 / span 5; max-width: none; }

  .split__text { grid-column: 1 / span 6; }
  .split > .media { grid-column: 8 / span 5; }
  .split--reverse .split__text { grid-column: 7 / span 6; grid-row: 1; }
  .split--reverse > .media { grid-column: 1 / span 5; grid-row: 1; }

  .with-aside__main { grid-column: 1 / span 7; }
  .with-aside__aside { grid-column: 9 / span 4; position: sticky; top: 7.5rem; }

  .link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .page-cta__inner { align-items: end; }
  .page-cta__inner > div:first-child { grid-column: 1 / span 7; }
  .page-cta__actions { grid-column: 9 / span 4; }
}

/* ========================================================================
   Modifiers promoted from the page families at integration (2026-09-25).
   They come last so they win over the base rules above, as they did when
   they lived in the family stylesheets. Sources: handoff/01–04.
   ======================================================================== */

/* ---------- Steps on interior pages ----------
   Steps directly under an h2 have h3 titles, sized like the homepage's h4 steps.
   .steps--text: each step is one sentence (<p>), centred on its number circle. */
.steps .step h3 { font-size: 1.125rem; letter-spacing: -0.006em; margin: 0.55rem 0 var(--space-1); }
.steps--text .step p { padding-top: 0.55rem; }

/* ---------- All six program cards as the page's main content (Nuestros programas) ----------
   Stacked on phones instead of the homepage's swipeable row; the homepage grid from 768 px. */
.programs--stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-bottom: 0; }

/* ---------- Photo width caps ----------
   .media--tile: a 480 px program tile is never shown wider than its file. */
.media.media--tile { max-width: 30rem; }

/* ---------- A callout right after a list of questions ---------- */
.faq + .callout { margin-top: var(--space-6); }

@media (min-width: 48em) { /* 768 px */
  .programs--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--grid-gap); }
  .split > .media { max-width: 34rem; }   /* a photo beside text keeps the intro photo's tablet width */
}

@media (min-width: 64em) { /* 1024 px */
  .programs--stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split > .media { max-width: none; }
  /* Link grids with two or four cards: no card left alone on the last row. */
  .link-grid.link-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .link-grid.link-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}