.breadcrumbs {
width: var(--shell);
margin-inline: auto;
padding-block: 1.5rem;
font-size: 0.85rem;
color: var(--muted);
}
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-inline-end: 0.5rem; color: var(--muted); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }
/* ---------- 17d. Publication single ---------- */
.pub-intro { padding: 1.5rem 0 var(--space-5); }
.pub-intro__grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.7fr);
gap: var(--space-5);
align-items: start;
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--line);
}
.pub-intro__copy h1 { margin: 0.75rem 0 1.2rem; }
.pub-intro__lead {
font-family: var(--serif);
font-size: 1.2rem;
line-height: 1.5;
color: var(--muted);
max-width: 60ch;
margin: 0 0 1.5rem;
}
.pub-intro__meta { margin-bottom: 2rem; }
.pub-intro__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.pub-intro .pub-citation__copy { display: contents; }
.pub-citation__copy { margin-top: 1rem; }
.pub-body { padding: var(--space-5) 0 var(--space-6); }
.pub-body__layout {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: var(--space-5);
align-items: start;
}
.pub-body__content h2 { margin-top: 2.5rem; }
.pub-body__content h2:first-child { margin-top: 0; }
.pub-body__content h3 { margin-top: 2rem; }
.pub-body__content p, .pub-body__content ul { margin-bottom: 1.2rem; max-width: 64ch; }
.pub-body__content ul { padding-left: 1.2rem; }
.pub-body__content li { margin-bottom: 0.5rem; }
.single-asidehu_project .pub-body__content > .wp-block-group.is-layout-constrained {
max-width: none;
margin-inline: 0;
}
.single-asidehu_project .pub-body__content > .wp-block-group.is-layout-constrained > :where(:not(.alignwide):not(.alignfull)) {
margin-inline: 0 !important;
}
.project-hero__meta > .status-chip { align-self: center; }
.single-asidehu_project .breadcrumbs { padding-bottom: 0; }
.single-asidehu_project .project-hero { padding-bottom: var(--space-4); }
.single-asidehu_project .pub-body { padding-top: 0; }
.single-asidehu_project .sidebar-meta dd {
display: flex;
align-items: center;
}
/* Project body slots. The chart and photo sections ship empty in the locked
pattern, so they stay out of the page until an editor actually adds an image.
templates.css is not an editor stylesheet, so the slots remain visible in the
editor either way. */
.project-chart:not(:has(img)), .project-photos:not(:has(img)) { display: none; }
/* Same rule for the update album: a bare empty core/gallery still serialises as
and would render as a stray gap. */
.update-photos:not(:has(img)) { display: none; }
.project-support {
margin-top: var(--space-4);
padding: 1.5rem;
border: 1px solid var(--line);
background: var(--surface);
}
.project-support > p { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.1rem; }
.project-support .wp-block-buttons { margin: 0; }
.pub-body__sidebar { display: flex; flex-direction: column; }
.sidebar-block { padding: 1.25rem; border: 1px solid var(--line); background: var(--base); }
.sidebar-block h3 { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.sidebar-block--accent { background: var(--surface); border-color: transparent; border-left: 3px solid var(--terracotta); }
.sidebar-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; font-size: 0.85rem; }
.sidebar-meta dt { font-weight: 700; color: var(--muted); }
.sidebar-meta dd { margin: 0; }
.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.sidebar-list li:last-child { border-bottom: 0; }
.sidebar-list a { font-size: 0.9rem; }
.archive-intro { padding: 4.5rem 0 2.5rem; }
.archive-intro__grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 3rem;
align-items: end;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--ink);
}
.archive-intro__grid p { color: var(--muted); max-width: 44ch; }
.archive-intro h1 { max-width: 12ch; }
.archive-filters { padding: 0 0 1rem; }
.filter-summary {
display: flex;
justify-content: space-between;
gap: 2rem;
padding: 1.1rem 0;
border-bottom: 1px solid var(--ink);
}
/* ---------- 19. Document list ---------- */
.document-list { padding: 0 0 var(--space-5); }
.document-row {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) 180px;
gap: 2rem;
align-items: center;
padding: 2rem 0;
border-bottom: 1px solid var(--line);
}
.thumb-cover {
aspect-ratio: 3 / 4;
padding: 0.85rem;
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--teal);
color: var(--base);
}
.thumb-cover--fallback { background: var(--ink); }
.thumb-cover--guia { background: var(--teal); }
.thumb-cover--informe { background: var(--ink); }
.thumb-cover--pronunciam { background: var(--terracotta); }
.thumb-cover--contrib { background: var(--teal-dark); }
.thumb-cover svg { color: currentColor; opacity: 0.55; }
.thumb-cover .folio {
color: var(--on-dark);
font-size: 0.62rem;
letter-spacing: 0.06em;
line-height: 1.15;
overflow-wrap: anywhere;
hyphens: auto;
}
.thumb-cover .meta { color: var(--on-dark-muted); }
.document-row__body { min-width: 0; }
.document-row__body h3 {
margin: 0.55rem 0 0.6rem;
font-size: clamp(1.45rem, 3vw, 2.4rem);
overflow-wrap: anywhere;
}
.document-row__body h3 a { text-decoration: none; }
.document-row__body h3 a:hover { text-decoration: underline; }
.document-row__body p { margin: 0 0 0.4rem; }
.document-row__actions { display: grid; gap: 0.7rem; }
.document-row__actions .btn { width: 100%; }
.document-row__actions .text-link {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.document-row__copy {
display: flex;
justify-content: center;
}
/* ---------- 20. Pagination ---------- */
.pagination { padding: 0 0 var(--space-6); }
.pagination > .shell {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding-top: 2rem;
border-top: 1px solid var(--line);
}
.pagination__actions { display: flex; gap: 1.25rem; align-items: center; }
.pagination__actions a, .pagination__current {
font-family: var(--serif);
font-size: 1.1rem;
text-decoration: none;
}
.pagination__current { font-weight: 700; color: var(--terracotta); }
.pagination__info { color: var(--muted); font-size: 0.9rem; }
/* ---------- Mesa and controlled taxonomy archives ---------- */
.mesa-hero h1 { color: inherit; overflow-wrap: anywhere; }
.taxonomy-results { padding: var(--space-5) 0 var(--space-6); }
.taxonomy-results__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.taxonomy-card { min-width: 0; padding: var(--space-3); border: 1px solid var(--line); background: var(--base); }
.taxonomy-card h2 { overflow-wrap: break-word; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.taxonomy-card .term-chips { margin-top: var(--space-3); }
/* ---------- 21. Archive responsive ---------- */
@media (max-width: 700px) {
.shell { width: min(calc(100% - 32px), 1180px); }
/* Header / nav */
.site-header__inner {
min-height: auto;
padding-block: 0.8rem;
flex-wrap: wrap;
}
/* Hero (home) */
.hero { padding: 2.5rem 0 2rem; }
.hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
.hero h1 { font-size: clamp(2.8rem, 11vw, 3.8rem); }
.route-card, .route-card svg { min-height: 340px; }
.route-card::before { inset: 14px -10px -14px 10px; }
.route-card__note { position: static; width: auto; margin: 0; }
/* Record strip */
.record-strip__grid { grid-template-columns: 1fr; }
.record-strip__asof { padding-block-start: 1rem; }
.record-fact {
padding: 1.2rem 0;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.record-fact:last-child { border-bottom: 0; }
.record-fact strong { font-size: 1.8rem; }
/* Dossier */
.dossier { padding: var(--space-4) 0; }
.dossier__grid { grid-template-columns: 1fr; gap: 2.5rem; }
.pub-cover { width: min(82%, 280px); max-width: 100%; }
/* Document index (home) */
.document-index { padding-bottom: var(--space-4); }
.section-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
.index-row {
grid-template-columns: 40px 1fr;
gap: 0.75rem;
min-height: auto;
padding: 1.1rem 0;
}
.index-row__no { font-size: 1.3rem; }
.index-row__body h3 { font-size: 1.1rem; }
.index-row__action { grid-column: 2; justify-self: start; }
/* Mesa chapter (home) */
.mesa-chapter { padding: var(--space-4) 0; }
.mesa-chapter__grid { grid-template-columns: 1fr; gap: 2.5rem; }
.mesa-chapter__plate { min-height: 320px; }
/* Projects (home featured) */
.projects { padding: var(--space-4) 0; }
.project-grid { grid-template-columns: 1fr; }
.project-story { min-height: 440px; }
/* Updates (home ledger) */
.updates { padding-bottom: var(--space-4); }
/* Footer */
.site-footer { padding: var(--space-3) 0; }
/* Breadcrumb */
.breadcrumbs { width: min(calc(100% - 32px), 1180px); padding-block: 1rem 0; }
/* Publication archive */
.archive-intro { padding: 2.5rem 0 1.5rem; }
.archive-intro__grid { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.filter-summary { flex-direction: column; gap: 0.25rem; }
/* Document rows (pub archive) */
.document-row {
grid-template-columns: 92px 1fr;
gap: 1rem;
align-items: start;
padding: 1.5rem 0;
}
.document-row__actions {
grid-column: 1 / -1;
grid-template-columns: 1fr 1fr;
}
.document-row__body h3 { font-size: 1.1rem; }
/* Pagination */
.pagination > .shell { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
/* Publication single */
.pub-intro { padding: 1rem 0 var(--space-4); }
.pub-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
.pub-intro__lead { font-size: 1.05rem; }
.pub-body__layout { grid-template-columns: 1fr; gap: var(--space-4); }
.pub-body__sidebar { position: static; }
/* Project archive */
.project-cards { grid-template-columns: 1fr; }
/* Project single */
.project-hero h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
/* Update ledger — one column on every surface: home, archive, term archives */
.ledger-row {
grid-template-columns: 1fr;
gap: 0.4rem;
padding: 1.2rem 0;
}
.ledger-row__date { font-size: 0.75rem; }
.ledger-row a { font-size: 1.05rem; }
/* Update single */
.update-single__main h1 { font-size: clamp(1.8rem, 5vw, 2.2rem); }
/* Institutional page */
.page-hero__figure, .mesa-hero__map { order: -1; }
.page-hero h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
/* Archive + single h1 sizes (non-hero contexts) */
.archive-intro h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
.pub-intro__copy h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
}
/* ---------- 20b. Project cards (grid) ---------- */
.projects-featured { padding: 0 0 var(--space-5); }
.projects-featured__label { margin-bottom: 1.5rem; }
.project-grid--featured { margin-bottom: 0; }
.projects-grid { padding: var(--space-5) 0 var(--space-6); border-top: 1px solid var(--line); }
.project-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
@media (max-width: 700px) {
.project-cards { grid-template-columns: 1fr; }
}
.project-card {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.5rem;
background: var(--base);
border: 1px solid var(--line);
}
.project-card h3 { margin: 0; font-size: 1.45rem; overflow-wrap: anywhere; }
.project-media { margin: 0; overflow: hidden; }
.project-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.project-card p { color: var(--muted); margin: 0; }
.project-card .term-chips { margin: 0.25rem 0; }
.project-card__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.project-card__chips .term-chips { margin: 0; }
.project-card .text-link { margin-top: auto; padding-top: 0.5rem; }
/* ---------- 20c. Status chips ---------- */
.status-chip {
display: inline-block;
align-self: flex-start;
padding: 0.2rem 0.55rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid currentColor;
}
.status-chip--active { color: var(--teal-dark); background: var(--teal-pale); }
.status-chip--completed { color: var(--ink); background: var(--surface); }
.status-chip--paused { color: var(--terracotta-dark); background: var(--terracotta-soft); }
/* ---------- 20g. Institutional page ---------- */
.page-hero {
padding: var(--space-6) 0;
background: var(--ink);
color: var(--base);
}
.page-hero__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
align-items: center;
}
.page-hero__main { min-width: 0; }
.page-hero__figure { margin: 0; }
/* Featured-image variants of the three institutional hero plates. Documentary
treatment: no filter or tint — the paper backing and the ink-line frame do the
containment so any photo sits on the dark hero band without being restyled. */
.page-hero__figure img {
display: block;
width: 100%;
height: auto;
background: var(--surface);
border: 1px solid var(--ink-line);
}
.page-hero h1 { max-width: 22ch; margin: 0.85rem 0 1.2rem; }
/* One lead treatment for every dark hero. Mesa used to set only colour and
width, so it fell back to the body sans while Museo and the two landings ran
Gelasio. Per-hero rules below set width and spacing only — never the face. */
.page-hero__lead,
.mesa-hero__lead,
.museo-hero__lead {
font-family: var(--serif);
font-size: 1.3rem;
line-height: 1.45;
color: var(--light);
}
.page-hero__lead { max-width: 55ch; margin: 0; }
/* Landing variant of the hero. .page-hero above is the INSTITUTIONAL hero, where
a smaller h1 and a tight lead are deliberate. Academia and Galerías are
landings and must sit beside Mesa and Museo: the global display h1, breathing
room before the action row, an asymmetric grid, and art at the same height. */
.page-hero--landing .page-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: 5rem; }
/* Landing title ceiling. The global h1 tops out at 6.6rem; measured in the hero's
605px copy column that puts EVERY word of a Spanish title on its own line. At
3.9rem two words fit a line, so a normal title lands in two — and it still holds
the display weight, a clear step below the home hero. */
.page-hero--landing h1,
.mesa-hero h1,
.museo-hero h1 {
max-width: 18ch;
font-size: clamp(2.4rem, 4.6vw, 3.9rem);
letter-spacing: -0.045em;
}
.page-hero--landing .page-hero__lead { max-width: 50ch; margin: 0 0 2rem; }
.page-hero--landing .actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.page-hero--landing .page-hero__figure { min-height: 470px; display: grid; align-content: center; }
.page-hero--landing .featured-placeholder { width: 100%; }
/* Ordinary Pages — /contacto/ and /aviso-de-privacidad/. One column, no figure:
neither page has art, and the empty second track left the title floating in
half a band. Deliberately a variant of .page-hero rather than a restyle of
.utility-hero, which search.php, 404.php, attachment.php and single.php still
render and which is right for those machinery surfaces. */
.page-hero--utility { padding: var(--space-5) 0; }
.page-hero--utility .page-hero__grid--single { grid-template-columns: minmax(0, 1fr); }
.page-hero--utility h1 { margin-block-end: 0; }
.page-hero--utility .page-hero__lead { margin-block-start: 1.2rem; }
.institutional-body { padding: var(--space-5) 0 var(--space-6); }
.institutional-body__lead {
font-size: 1.25rem;
color: var(--ink);
max-width: 60ch;
margin: 0 0 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--line);
}
.institutional-body__content h2 { margin-top: 2.5rem; }
.institutional-body__content h2:first-of-type { margin-top: 0; }
.institutional-body__content h3 { margin-top: 1.75rem; }
.institutional-body__content p, .institutional-body__content ul { margin-bottom: 1.2rem; max-width: 64ch; }
.institutional-body__content ul { padding-left: 1.2rem; }
.institutional-body__content li { margin-bottom: 0.5rem; }
.institutional-body__sidebar .btn { width: 100%; margin-top: 1rem; }
.mesa-hero {
padding: var(--space-6) 0;
background: var(--ink);
color: var(--base);
overflow: hidden;
}
.mesa-hero__grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 5rem;
align-items: center;
}
.mesa-hero h1 { margin: 0.85rem 0 1.2rem; }
.mesa-hero__lead { max-width: 50ch; margin-bottom: 2rem; }
.mesa-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.mesa-hero__map { min-height: 480px; color: var(--teal-soft); }
.mesa-hero__map svg { width: 100%; height: 480px; }
.mesa-hero__map img {
display: block;
width: 100%;
height: 480px;
object-fit: cover;
background: var(--surface);
border: 1px solid var(--ink-line);
}
.btn--ghost-light { background: transparent; color: var(--base); border-color: var(--base); }
.btn--ghost-light:hover { background: var(--base); color: var(--ink); }
.sector-map { padding: var(--space-6) 0; }
.sector-map__grid {
display: grid;
grid-template-columns: 0.75fr 1.25fr;
gap: 5rem;
align-items: stretch;
}
.sector-map h2 { max-width: 10ch; margin-top: 0.85rem; }
.sector-map p { color: var(--muted); max-width: 40ch; }
.sectors,
.contacto-channels {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
/* Core flow spacing (theme.json blockGap) adds margin-block-start to every
sibling but the first inside is-layout-flow groups. Inside a CSS grid that
desyncs cells/rows, so neutralize it for ALL code-owned grid containers.
Convention: name pattern grids with a "__grid"/"__areas"/"__list" suffix (or
add the class here) and this guard covers them automatically. */
.sectors > *,
.sector > *,
.contacto-channels > *,
.contacto-channel > *,
.institutional-pattern__areas > *,
.museo-room-list > *,
.museo-room__body > *,
.museo-routes > *,
.contacto-categorias > *,
.contacto-categoria > *,
.museo-route > *,
.pending-action > *,
:is([class*="__grid"], [class*="__areas"], [class*="__list"], [class*="__layout"]) > * { margin-block-start: 0 !important; }
.sector,
.contacto-channel {
padding: 1.25rem;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
gap: 0.5rem;
}
.sector strong { font-family: var(--serif); font-size: 1.35rem; }
.process { padding: var(--space-6) 0; background: var(--surface); }
/* Mesa activity album: hidden until the locked gallery slot holds a photograph. */
.mesa-album { padding: var(--space-6) 0; }
.mesa-album:not(:has(img)) { display: none; }
.mesa-album h2 { max-width: 16ch; margin: 0.85rem 0 1rem; }
.mesa-album p { color: var(--muted); max-width: 60ch; }
.process h2 { max-width: 14ch; margin: 0.85rem 0 3rem; }
.process-step {
position: relative;
padding: 2rem;
border-top: 2px solid var(--teal);
background: var(--base);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.process-step + .process-step { border-left: 1px solid var(--line); }
.process-step__no { font-family: var(--serif); font-size: 3rem; color: var(--terracotta); line-height: 1; }
.process-step h3 { margin: 0; }
.process-step p { margin: 0; color: var(--muted); }
.folios { padding: var(--space-6) 0; }
.folio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.folio-card {
min-height: 310px;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
border: 1px solid var(--line);
background: var(--base);
}
.folio-card--accent { background: var(--teal); color: var(--base); border-color: var(--teal); }
.folio-card--accent .folio { color: var(--base); }
.folio-card--accent .meta { color: var(--on-dark-muted); }
.folio-card h3 { font-size: 1.7rem; margin: 0.5rem 0 0; }
.folio-card .text-link { margin-top: auto; }
.folio-card--accent .text-link { color: var(--base); }
.folio-card--accent:has(a:hover), .folio-card--accent:has(a:focus-visible) { background: var(--teal-dark); border-color: var(--teal-dark); }
.folio-card--accent a:hover, .folio-card--accent a:focus-visible { color: var(--base); text-decoration-color: currentColor; }
.folio-card--accent a:focus-visible { outline-color: var(--base); }
.update-single { padding: 1.5rem 0 var(--space-6); }
.update-single__layout {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: var(--space-5);
align-items: start;
}
.update-single__main h1 { margin: 0.75rem 0 1.2rem; }
.update-single__lead { font-size: 1.2rem; color: var(--muted); max-width: 60ch; margin-bottom: 2rem; }
.update-single__actions {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
padding: 1.25rem 0;
border-block: 1px solid var(--line);
margin-bottom: var(--space-4);
}
.update-single__expiry { font-size: 0.9rem; }
.update-body h2 { margin-top: 2.5rem; }
.update-body h2:first-child { margin-top: 0; }
.update-body h3 { margin-top: 2rem; }
.update-body p, .update-body ul { margin-bottom: 1.2rem; max-width: 64ch; }
.update-body ul { padding-left: 1.2rem; }
.update-body li { margin-bottom: 0.5rem; }
.project-hero {
padding: 1.5rem 0 var(--space-5);
}
.project-hero__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
align-items: start;
}
.project-hero__main { min-width: 0; }
.project-hero__meta {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.project-hero__meta .term-chips { margin: 0; }
.project-hero h1 { max-width: 18ch; margin: 0 0 1.2rem; overflow-wrap: anywhere; }
.project-hero__lead {
font-size: 1.2rem;
color: var(--muted);
max-width: 60ch;
margin: 0 0 1.5rem;
}
/* ---------- 16b. Featured placeholders (CPTs) ---------- */
.featured-placeholder {
margin: 0;
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
}
.featured-placeholder svg {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
}
.featured-placeholder--update svg {
aspect-ratio: 16 / 9;
}
.featured-placeholder--update { color: var(--teal); }
/* Without an action row between them, the figure and the body would touch. */
.featured-placeholder--update + .update-body { margin-block-start: var(--space-3); }
/* ---------- 17. Responsive — independent mobile composition ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* Museo de las Personas Refugiadas. */
.museo-hero { padding: var(--space-6) 0; overflow: hidden; background: var(--ink); color: var(--base); }
.museo-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr); gap: var(--space-5); align-items: center; }
.museo-hero h1 { margin: .85rem 0 1.2rem; }
.museo-hero__lead { max-width: 52ch; margin: 0 0 var(--space-3); }
.museo-hero__plate { position: relative; min-height: 470px; border: 1px solid var(--ink-line); color: var(--teal-soft); }
.museo-hero__plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The plate already carries the --ink-line border, so the image must not add a second one. */
.museo-hero__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.museo-hero__folio { position: absolute; right: var(--space-2); bottom: var(--space-2); max-width: 19ch; margin: 0; color: var(--light); text-align: right; }
.museo-content-pattern, .museo-content-pattern > * { max-width: none; margin-block: 0; }
.museo-content-pattern > * { margin-inline: 0 !important; }
.museo-intro { padding: var(--space-6) 0; }
.museo-intro__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: var(--space-5); align-items: start; }
.museo-intro h2 { max-width: 10ch; margin: .85rem 0 0; }
.museo-intro__copy { max-width: 64ch; }
.museo-intro__lead { font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; }
.museo-intro__rule { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.museo-intro__rule p { margin: 0; }
.museo-rooms { padding: var(--space-6) 0; background: var(--surface); }
.museo-rooms > .shell > h2 { max-width: 13ch; }
.museo-room-list { border-top: 1px solid var(--line); }
/* Two salas per row on desktop (client, 2026-09-01): the list is short cards, not
prose, and one per row left half the shell empty. The card's own tracks shrink
at the same breakpoint so the description still gets a readable column. */
@media (min-width: 1000px) {
.museo-room-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
.museo-room { grid-template-columns: 3.5rem 8rem minmax(0, 1fr); }
.museo-room h3 { font-size: clamp(1.2rem, 1.5vw, 1.5rem); }
}
/* Card layout the client drew at 20:38:38: nombre, descripción corta, miniatura,
and the whole card clickable. The folio and the thumbnail hold the two left
tracks; everything else stacks in the third. */
/* Three grid items, not seven: the sala text lives in its own `museo-room__body`
group. It used to be four loose children in column 3 while the thumbnail spanned
every row, and a spanning item's height is distributed BETWEEN the rows it
crosses — which opened ~120px of dead space between the sala title and its
description no matter how the rows were sized. The 10rem column is the client's
own word for the slot: a miniatura. */
.museo-room { position: relative; display: grid; grid-template-columns: 7rem 10rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.museo-room__body { display: grid; gap: 0.4rem; min-width: 0; }
.museo-room :is(h3, p) { margin: 0; }
.museo-room h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
.museo-room__body > p:not(.meta):not(.museo-room__dest) { max-width: 54ch; color: var(--muted); }
.museo-room__type { white-space: nowrap; }
.museo-room__thumb { margin: 0; }
/* 3:2, matching the spec sheet the client is filling. A fixed height instead put a
landscape source into a 112x160 portrait box and threw most of the frame away —
`minmax(0, 14rem)` had resolved to min-content, not to 14rem. Measured 2026-09-01. */
.museo-room__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* An unfilled slot must collapse its track, not leave an empty box on the row. */
.museo-room__thumb:not(:has(img)) { display: none; }
/* Destination slot: the exposition pages do not exist yet, so this is what an
editor replaces with the real link. Quiet enough to read as scaffolding. */
.museo-room__dest { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
/* Clickable-READY. Wiring a sala is adding one —
the whole card becomes the hit area, which is what the client asked for
("puede ser al título o acá la foto, cualquiera de las dos"). */
.museo-room__link { text-decoration: none; color: inherit; }
.museo-room__link::after { content: ""; position: absolute; inset: 0; }
.museo-room:has(.museo-room__link:hover) { background: var(--surface); }
.museo-selection { padding: var(--space-6) 0; }
.museo-selection__links { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: calc(-1 * var(--space-3)); }
/* The list of presentations only grows, so it is a horizontal strip rather than
a wrapping grid — same idiom as .gallery-grid, and it costs the same vertical
space at three records or at thirty. Three visible on desktop with prev/next
from strip-nav.js; ~1.15 on mobile so the next card is visibly cut off and the
swipe is discoverable without arrows. */
.museo-selection__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.museo-selection__grid:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.museo-record { display: flex; flex-direction: column; gap: var(--space-2); flex: 0 0 calc(100% / 3); min-width: 0; scroll-snap-align: start; padding: var(--space-3); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.museo-record :is(h3, p) { margin: 0; }
.museo-record h3 { font-size: 1.5rem; overflow-wrap: anywhere; }
/* Replaces the decorative geometric plate: the client wanted the photograph
of the presentation, not a geometric stand-in. Core's lightbox opens the
uncropped original, so the cover crop here costs nothing. */
.museo-record__image { margin: 0; }
.museo-record__image img { display: block; width: 100%; height: clamp(140px, 34vw, 190px); object-fit: cover; }
.museo-record__image:not(:has(img)) { display: none; }
.strip-nav { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: var(--space-2); }
.strip-nav__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.strip-nav__btn:hover:not([disabled]) { background: var(--ink); color: var(--base); }
.strip-nav__btn[disabled] { opacity: 0.35; cursor: default; }
.museo-principles { padding: var(--space-6) 0; background: var(--ink); color: var(--base); }
.museo-principles h2 { max-width: 14ch; margin: .85rem 0 var(--space-4); }
.museo-principles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink-line); }
.museo-principle { padding: var(--space-3); border-right: 1px solid var(--ink-line); }
.museo-principle:last-child { border-right: 0; }
.museo-principle h3 { margin: .75rem 0; font-size: 1.35rem; }
.museo-principle p { margin: 0; color: var(--light); }
.museo-principle .folio { color: var(--terracotta); }
.museo-visit { padding: var(--space-6) 0; }
.museo-visit__grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.museo-visit__panel { padding: var(--space-4); }
.museo-visit__panel + .museo-visit__panel { border-left: 1px solid var(--line); background: var(--surface); }
.museo-visit h2 { max-width: 11ch; margin: .85rem 0 var(--space-2); font-size: clamp(2rem, 3.5vw, 3.4rem); }
.museo-visit p { max-width: 48ch; }
@media (max-width: 700px) {
.museo-hero { padding: var(--space-4) 0; }
.museo-hero__grid, .museo-intro__grid, .museo-principles__grid, .museo-visit__grid { grid-template-columns: 1fr !important; }
/* ~1.15 cards: the next one is visibly cut off, so the swipe needs no arrow. */
.museo-record { flex-basis: 87%; }
.museo-hero__plate { order: -1; min-height: 300px; }
.museo-selection__links { justify-content: flex-start; margin-top: 0; }
.museo-room { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-2); }
.museo-room__thumb { grid-column: 2; }
.museo-room__body { grid-column: 2; }
.museo-principle { border-right: 0; border-bottom: 1px solid var(--ink-line); }
.museo-visit__panel + .museo-visit__panel { border-left: 0; border-top: 1px solid var(--line); }
}
.asidehu-filters {
margin-block-end: var(--wp--preset--spacing--50);
}
.asidehu-filters form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
padding: 1rem;
background-color: var(--base);
border: 1px solid var(--line);
}
.asidehu-filters label {
display: block;
/* Readable control label, not an eyebrow: 0.73rem uppercase reads as tiny
on phones. Keep the uppercase character but at a legible size. */
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-block-end: 0.35rem;
}
.asidehu-filters select {
min-width: 10rem;
min-height: 44px;
padding: 0.4rem 0.6rem;
border: 1px solid var(--ink);
border-radius: 0;
background-color: var(--base);
color: var(--ink);
font-family: var(--wp--preset--font-family--arimo);
font-size: 1rem; /* readable control + native option list; avoids iOS zoom-on-focus */
}
/* Some Android Chrome builds size the popup list from the option's own
font-size rather than the select's; set it explicitly. (Chrome desktop
device-toolbar renders the native popup unscaled, so it looks tiny there
regardless — that is an emulation artifact, not the real mobile size.) */
.asidehu-filters option {
font-size: 1rem;
}
.asidehu-filters button[type="submit"] {
background-color: var(--ink);
color: var(--base);
border: 1px solid var(--ink);
border-radius: 0;
min-height: 44px;
padding: 0.5rem 1.25rem;
font-family: var(--wp--preset--font-family--arimo);
font-weight: 700;
cursor: pointer;
}
.asidehu-filters button[type="submit"]:hover {
background-color: var(--teal-dark);
}
.asidehu-filters a {
font-size: var(--wp--preset--font-size--small);
}
.asidehu-heading-rule {
padding-block-end: 0.5rem;
border-bottom: 2px solid var(--surface);
}
@media (max-width: 700px) {
.taxonomy-results__grid {
grid-template-columns: 1fr;
}
}
.asidehu-publication-meta {
font-size: var(--wp--preset--font-size--eyebrow);
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.asidehu-filters__field {
display: grid;
flex: 1 1 10rem;
gap: 0.35rem;
}
.asidehu-filters select {
width: 100%;
}
.archive-filters--updates .asidehu-filters form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
}
.archive-filters--updates .asidehu-filters__field {
min-width: 0;
}
.archive-filters--updates .asidehu-filters button[type="submit"] {
justify-self: end;
}
@media (max-width: 700px) {
.archive-filters--updates .asidehu-filters form { grid-template-columns: 1fr; }
.archive-filters--updates .asidehu-filters button[type="submit"] { justify-self: start; }
}
/* Code-owned shell styles. */
@media (max-width: 700px) {
.site-header__inner {
width: min(calc(100% - 32px), 1180px);
}
.site-header__inner {
align-items: center;
flex-wrap: wrap;
padding-block: 0.8rem;
}
/* Flatten the nav so the toggle sits inline with the wordmark and only the
panel drops to its own full-width row below (keeps the no-JS menu usable). */
.site-navigation {
display: contents;
}
.site-navigation__toggle {
display: flex;
}
.site-navigation__panel {
order: 3;
flex-basis: 100%;
width: 100%;
}
.site-navigation--enhanced .site-navigation__panel.is-collapsed {
display: none;
}
.site-navigation__list {
flex-direction: column;
align-items: stretch;
gap: 0;
border-block-start: 1px solid var(--line);
}
.site-navigation__list a {
display: flex;
align-items: center;
min-height: 44px;
padding-block: 0.6rem;
border-block-end: 1px solid var(--line);
}
/* Groups become accordions inside the panel: no hover, no overlay, and the
toggle spans the row so the whole line is a 44px tap target. */
.site-navigation__submenu-toggle {
display: flex;
justify-content: space-between;
width: 100%;
min-height: 44px;
padding-block: 0.6rem;
border-block-end: 1px solid var(--line);
text-align: start;
}
.site-navigation--enhanced .site-navigation__item--group:not(.is-open) > .sub-menu {
display: none;
}
.site-navigation__item--group > .sub-menu a {
padding-inline-start: 1rem;
color: var(--muted);
}
}
/* Institutional and utility routes. */
.utility-hero { padding-block: clamp(3rem, 8vw, 6.5rem); background: var(--surface); }
.utility-hero h1 { max-width: 18ch; margin-block: 0.4rem 0; overflow-wrap: anywhere; }
.utility-section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.utility-content { min-width: 0; max-width: 760px; }
/* Contacto and Aviso de privacidad are not prose pages: both are locked patterns
with their own internal grids and measures, and the 760px cap above squeezed
them into two thirds of the shell — it also kept .contacto-channels from ever
reaching the three columns its own 900px breakpoint asks for. Those two take
the full shell and cap the measure per paragraph instead. */
.utility-content:has(.contacto-content-pattern),
.utility-content:has(.aviso-privacidad-pattern) { max-width: none; }
.aviso-privacidad-pattern :is(p, li) { max-width: 72ch; }
/* Full shell without a 1180px-long line: the numbered heading takes a left rail
and the section's prose keeps one column beside it. Reading order is unchanged
— a legal notice must stay one column, so this is a rail, not two columns. */
@media (min-width: 900px) {
.aviso-privacidad-pattern > .wp-block-group {
display: grid;
grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
column-gap: var(--space-4);
}
.aviso-privacidad-pattern > .wp-block-group > * { margin-block-start: 0; grid-column: 2; }
.aviso-privacidad-pattern > .wp-block-group > h2 { grid-column: 1; grid-row: 1; margin: 0; }
.aviso-privacidad-pattern > .wp-block-group > * + * { margin-block-start: 1.2rem; }
.aviso-privacidad-pattern > .wp-block-group > :nth-child(2) { margin-block-start: 0; }
}
.utility-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.utility-content > :first-child { margin-block-start: 0; }
.utility-content > :last-child { margin-block-end: 0; }
/* Privacy notice: numbered sections in the site's folio idiom, no markup burden on editors. */
.aviso-privacidad-pattern { counter-reset: aviso; }
.aviso-privacidad-pattern > .wp-block-group {
margin-block-start: var(--space-4);
padding-block-start: var(--space-3);
border-block-start: 1px solid var(--line);
}
.aviso-privacidad-pattern h2::before {
counter-increment: aviso;
content: counter(aviso, decimal-leading-zero);
display: block;
margin-block-end: 0.4rem;
font: 700 0.73rem/1.25 var(--sans);
letter-spacing: 0.15em;
color: var(--terracotta);
}
.asidehu-pending {
padding: 0.6rem 0.9rem;
background: var(--terracotta-soft);
border: 1px dashed var(--terracotta);
color: var(--terracotta-dark);
}
/* Contacto: channel cards reuse the .sector grid above; only the rhythm differs. */
.contacto-content-pattern > * + * { margin-block-start: var(--space-3); }
.contacto-channel h3 { margin: 0; font-size: 1.35rem; overflow-wrap: anywhere; }
.contacto-channel .folio { margin: 0; }
/* Instructional copy, not a label — muted body text reads better than uppercase .meta. */
.contacto-channel > p:last-child { margin: 0; color: var(--muted); }
.contacto-note { padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }
.contacto-footnote p { margin: 0; font-size: 0.875rem; color: var(--muted); }
/* Client asked for a much smaller Contacto title (roughly two fifths of the
base h1 clamp, 20:29:19). WordPress adds no page-slug body class, so scope the
reduction to the page that actually carries this pattern rather than to every
route that shares the hero. */
body:has(.contacto-content-pattern) .page-hero--utility h1 {
font-size: var(--wp--preset--font-size--xx-large);
max-width: 24ch;
}
/* Contacto repeats the footer profiles on the page (2026-08-31, 20:30:55). */
/* The channel cards and the social strip are two stacked .utility-section
blocks, so their paddings added up to ~160px of empty paper between the
footnote and "También estamos en redes". One boundary, one gap. */
body:has(.contacto-content-pattern) .utility-section:has(.utility-content) { padding-block-end: 0; }
.contacto-social { padding-block: var(--space-4) var(--space-5); }
.contacto-social h2 { margin: 0 0 var(--space-2); font-size: 1.35rem; }
.contacto-social__list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.contacto-social__list a {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: 44px;
padding: 0.5rem 0.9rem;
border: 1px solid var(--line);
color: var(--ink);
text-decoration: none;
}
.contacto-social__list a:hover { background: var(--ink); border-color: var(--ink); color: var(--base); }
.contacto-social__list svg { width: 20px; height: 20px; }
/* Three inbox cards, and each one carries a fourth row (the pending address),
so the shared 3-row subgrid from .sector has to grow here. */
.contacto-channel { grid-row: span 4; }
@media (min-width: 900px) { .contacto-channels { grid-template-columns: repeat(3, 1fr); } }
/* Outbound consultation form: no form lives on this site, so this is a plain
block of copy plus the link ASIDEHU will paste in. */
.contacto-consulta { padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }
.contacto-consulta h3 { margin: 0 0 0.6rem; }
/* The five categories the off-site form offers, dictated by the client at
20:44:47. Listed on the page so a reader knows which one is theirs before
leaving the site — not an intake surface, just a table of contents. */
.contacto-categorias { display: grid; gap: 0; margin-block-start: var(--space-2); }
.contacto-categoria { padding-block: 0.8rem; border-block-start: 1px solid var(--line); }
.contacto-categoria:first-child { border-block-start: 0; padding-block-start: 0; }
.contacto-categoria__name { margin: 0; font-weight: 700; }
.contacto-categoria__desc { margin: 0.25rem 0 0; color: var(--muted); }
/* Two per row once the page took the full shell: five one-line entries stacked
down a 1180px column left most of the width empty, and the old 62ch measure
wrapped short descriptions for no visible reason. The column is the measure. */
@media (min-width: 900px) {
.contacto-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
.contacto-categoria:nth-child(-n+2) { border-block-start: 0; padding-block-start: 0; }
.contacto-categoria:first-child { border-block-start: 0; }
}
/* Donation ask, added on the client's request at 20:46:17 — Contacto was the one
surface of the three that had none. Inert until the platform is chosen. */
.contacto-apoyo { padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }
.contacto-apoyo h3 { margin: 0 0 0.6rem; }
.contacto-apoyo p { max-width: none; }
.contacto-apoyo .pending-action { margin-block-start: var(--space-2); }
.search-results { margin-block-start: 2rem; border-block-start: 1px solid var(--line); }
.search-result { min-width: 0; padding-block: 1.5rem; border-block-end: 1px solid var(--line); }
.search-result h2 { margin-block: 0.3rem; overflow-wrap: break-word; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.search-result h2 a { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.search-result__excerpt { color: var(--muted); max-width: 64ch; }
.search-result__excerpt p { margin: 0; }
.search-empty { margin-block-start: 2rem; padding-block: var(--space-3); border-block: 1px solid var(--line); }
.search-empty h2 { margin-block: 0 0.5rem; }
.search-empty p { margin: 0; color: var(--muted); }
.archive-empty, .no-results { padding-block: var(--space-3); color: var(--muted); }
.entry__header { margin-block-end: 1rem; }
.entry__title { margin: 0; overflow-wrap: anywhere; }
.entry__content > :first-child { margin-block-start: 0; }
.featured-image { margin: 0 0 var(--space-3); }
.featured-image img { display: block; width: 100%; height: auto; }
.featured-image figcaption { margin-block-start: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.search-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.5rem; }
.search-form label { flex: 1 1 16rem; display: flex; }
.search-form .search-field {
flex: 1;
min-height: 44px;
padding: 0.4rem 0.6rem;
border: 1px solid var(--ink);
border-radius: 0;
background-color: var(--base);
color: var(--ink);
font-family: var(--wp--preset--font-family--arimo);
font-size: 1rem;
}
.search-form .search-submit {
min-height: 44px;
padding: 0.75rem 1.25rem;
border: 1px solid var(--ink);
border-radius: 0;
background-color: var(--ink);
color: var(--base);
font-family: var(--wp--preset--font-family--arimo);
font-weight: 700;
cursor: pointer;
}
.utility-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.attachment-public img { width: auto; max-height: 70vh; }
@media (max-width: 700px) {
.search-result { padding-block: 1.25rem; }
.utility-links { align-items: flex-start; flex-direction: column; }
}
/* Mesa mobile overrides — must follow the desktop Mesa rules above so the
cascade gives them precedence at narrow viewports. The earlier mobile
blocks (lines 320–345 and 396–415) were defined before the desktop rules
and were therefore silently overridden. */
@media (max-width: 700px) {
.sector-map__grid { grid-template-columns: 1fr; gap: 2.5rem; }
.sectors { grid-template-columns: 1fr; }
.process-grid { grid-template-columns: 1fr; }
.process-step + .process-step { border-left: 0; border-top: 1px solid var(--line); }
.folio-grid { grid-template-columns: 1fr; }
}
/* Editable institutional and Mesa Page patterns. */
.institutional-body__content { min-width: 0; }
.institutional-pattern,
.institutional-pattern > * { max-width: none; }
.institutional-pattern > * { margin-inline: 0 !important; }
.institutional-body__content > .institutional-body__lead {
font-family: var(--sans);
/* !important beats the has-large-font-size preset saved in existing page content. */
font-size: 1.25rem !important;
line-height: 1.6;
}
.institutional-pattern__areas {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
counter-reset: institutional-area;
margin-block: 2rem;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.institutional-pattern__area {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
gap: var(--space-1);
min-width: 0;
padding: 1.25rem;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
counter-increment: institutional-area;
}
.institutional-pattern__area:not(:has(.folio))::before {
content: counter(institutional-area, decimal-leading-zero);
color: var(--terracotta);
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.15em;
line-height: 1.25;
}
.institutional-pattern__area :is(.folio, h3, .meta) { margin: 0; }
.institutional-pattern__area h3 { font-size: 1.35rem; overflow-wrap: anywhere; }
.institutional-pattern__area .meta { line-height: 1.5; text-transform: none; letter-spacing: normal; }
.institutional-pattern__commitment {
margin-block: var(--space-3);
margin-inline: 0;
padding: var(--space-2) 1.2rem;
border-inline-start: 3px solid var(--terracotta);
background: var(--surface);
font-size: 0.92rem;
}
.mesa-body { min-width: 0; }
.mesa-content-pattern, .mesa-content-pattern > * { max-width: none; }
.mesa-content-pattern,
.mesa-content-pattern > .wp-block-group,
.mesa-content-pattern :is(.sector-map, .process),
.mesa-content-pattern :is(.sector-map, .process) > .wp-block-group { margin-block: 0; }
.mesa-content-pattern :is(.sector-map__grid, .process-grid) > * { margin-block-start: 0; }
.mesa-content-pattern .sector h3 { margin: 0; font-size: 1.35rem; overflow-wrap: anywhere; }
.mesa-content-pattern .sector .folio,
.mesa-content-pattern .process-step__no { margin: 0; }
.mesa-content-pattern .process-step > p:last-child { margin: 0; }
@media (max-width: 700px) {
.project-hero__grid {
grid-template-columns: 1fr;
gap: var(--space-3);
}
.project-hero figure { order: -1; }
.page-hero__grid,
/* The landing modifier out-specifies the bare .page-hero__grid above, so it has
to be named here or the hero stays two-column on phones. */
.page-hero--landing .page-hero__grid,
.institutional-pattern__areas,
.mesa-hero__grid,
.sector-map__grid,
.sectors,
.contacto-channels,
.process-grid,
.folio-grid {
grid-template-columns: 1fr;
}
/* The stacked hero inherits the two-column 5rem gutter as vertical dead space
between the illustration and the title; on a phone that is most of a screen. */
.mesa-hero__grid { gap: var(--space-3); }
.page-hero, .mesa-hero { padding-block: var(--space-4); }
/* Must live in THIS block, not the earlier one: the shared lead rule above
has equal specificity, so an earlier media query loses to it. */
.page-hero__lead, .mesa-hero__lead, .museo-hero__lead { font-size: 1.1rem; }
.page-hero__figure { max-width: 100%; }
.page-hero--landing .page-hero__figure { min-height: 0; }
.page-hero--landing .page-hero__grid { gap: var(--space-3); }
.mesa-hero__map { min-height: 280px; }
.mesa-hero__map svg { height: auto; max-height: 340px; }
.mesa-hero__map img { height: 300px; }
.institutional-body__content,
.mesa-content-pattern,
.sector,
.contacto-channel,
.process-step,
.folio-card { min-width: 0; overflow-wrap: anywhere; }
.sector-map__grid { gap: var(--space-3); }
.process-step + .process-step { border-left: 0; border-top: 1px solid var(--line); }
}
/* Shared detail family and approved editorial-density layouts. */
.single-asidehu_publication .pub-body__content > .wp-block-group.is-layout-constrained > :where(*),
.single-asidehu_update .update-body > .wp-block-group.is-layout-constrained > :where(*) { margin-inline: 0 !important; }
.single-asidehu_publication .breadcrumbs,
.single-asidehu_update .breadcrumbs { padding-bottom: 0; }
.single-asidehu_publication .pub-intro,
.single-asidehu_update .update-single { padding-top: 1.5rem; }
.detail-sidebar { min-width: 0; position: sticky; top: calc(var(--space-3) + 5rem); align-self: start; }
.detail-sidebar .sidebar-block { border: 1px solid var(--line); background: var(--base); padding: var(--space-3); overflow-wrap: anywhere; }
.detail-sidebar .sidebar-block + .sidebar-block { margin-top: var(--space-3); }
.detail-sidebar .sidebar-block h3 { margin: 0 0 var(--space-2); }
.sidebar-block--citation .citation { margin: 0; overflow-wrap: anywhere; }
.sidebar-block--citation .pub-citation__copy { margin-top: var(--space-2); }
.detail-ledger .ledger-row { grid-template-columns: 130px 160px minmax(0, 1fr); min-width: 0; }
.institutional-body__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.institutional-body__content, .institutional-body__sidebar { min-width: 0; }
.institutional-body__content .asidehu-heading-rule { padding-block-end: 0; border-bottom: 0; }
.institutional-body__sidebar { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: calc(var(--space-3) + 5rem); }
.institutional-body__sidebar > .sidebar-block { margin-block: 0; }
.institutional-body__sidebar :is(ul, li) { margin: 0; }
.institutional-body__sidebar ul { list-style: none; padding: 0; }
.institutional-body__sidebar li { padding: var(--space-1) 0; border-bottom: 1px solid var(--line); }
.institutional-body__sidebar li:last-child { border-bottom: 0; }
.institutional-body__sidebar a { overflow-wrap: anywhere; }
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); align-items: stretch; }
.process-step, .process-step + .process-step { min-width: 0; height: 100%; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-top: 2px solid var(--teal); background: var(--base); padding: 2rem; }
.organization-belt { padding: var(--space-4) 0; border-block: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.organization-belt__head { text-align: center; }
.organization-belt__head .eyebrow { margin-bottom: 0.5rem; }
.organization-belt__head h2 { margin: 0; }
.organization-belt__viewport { display: flex; width: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
/* The two tracks sit side by side, so the gap at the seam is the sum of their
inner paddings. Deriving both from --belt-gap keeps that seam identical to the
spacing between items; hard-coding them separately is what made it drift. */
/* The animation shifts the pair left by exactly one track, so the belt only stays
covered while a single track is at least as wide as the viewport. The template
repeats the list inside each track until it is, which keeps --belt-gap as the real
spacing between logos. min-width and space-around are only the backstop for a
viewport wider than the repeats allowed for; normally there is no slack to spread. */
.organization-belt__track { --belt-gap: 3rem; display: flex; flex: 0 0 auto; justify-content: space-around; gap: var(--belt-gap, 3rem); width: max-content; min-width: 100%; list-style: none; margin: 0; padding: var(--space-3) calc(var(--belt-gap, 3rem) / 2); animation: organization-belt-scroll var(--belt-duration, 60s) linear infinite; }
@keyframes organization-belt-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.organization-belt:has(.organization-belt__item > a:hover) .organization-belt__track,
.organization-belt:has(.organization-belt__item > a:focus-visible) .organization-belt__track { animation-play-state: paused; }
/* Content-sized: real logos have different widths, and forcing one width would
letterbox the wide ones. Uniform height comes from the card, not the item. */
.organization-belt__item { flex: 0 0 auto; min-width: 7rem; max-width: 16rem; }
.organization-belt__item > :is(a, div) { position: relative; overflow: hidden; min-height: 4.5rem; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--base); color: var(--ink); font-family: var(--serif); text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: border-color .2s, color .2s; }
.organization-belt__item > a:hover, .organization-belt__item > a:focus-visible { border-color: var(--terracotta); color: var(--terracotta-dark); }
.organization-belt__mark { font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; }
.organization-belt__name { font-size: .8rem; line-height: 1.25; }
/* Where a pointer can hover, the belt reads as logos only and the name slides up on
demand. Kept in the DOM (opacity, not display) so it still names the link for
assistive tech, and left permanently visible on touch, where hover never fires. */
@media (hover: hover) {
/* Covers the whole card rather than a bottom strip: names vary in length and
cards now vary in width, so a strip would crowd the logo on the long ones. */
.organization-belt__name {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: .5rem;
background: var(--ink);
color: var(--base);
font-size: .8rem;
line-height: 1.2;
opacity: 0;
transition: opacity .2s;
}
.organization-belt__item > :is(a, div):is(:hover, :focus-visible) .organization-belt__name { opacity: 1; }
/* No logo and no acronym: the name is the only mark, so it must always show. */
.organization-belt__name:only-child { position: static; opacity: 1; padding: 0; background: none; color: inherit; }
}
@media (prefers-reduced-motion: reduce) { .organization-belt__name { transition: none; } }
/* Same optical height for every logo; width follows the artwork's own ratio. */
.organization-belt__item img { height: 2.5rem; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 700px) {
.institutional-body__layout, .detail-ledger .ledger-row, .process-grid, .update-single__layout { grid-template-columns: 1fr; }
.institutional-pattern__areas { grid-template-columns: 1fr !important; }
.institutional-body__sidebar, .detail-sidebar { position: static; }
.organization-belt__track { --belt-gap: var(--space-2); animation-duration: calc(var(--belt-duration, 60s) * 0.66); }
.organization-belt__item { min-width: 6rem; max-width: 12rem; }
.organization-belt__item img { height: 2rem; }
.organization-belt__item > :is(a, div) { min-height: 3.5rem; padding: 0.65rem; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
.organization-belt__viewport { display: block; width: auto; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.organization-belt__track { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); animation: none; }
.organization-belt__track--duplicate { display: none; }
/* Grid tracks own the sizing here; the marquee's width caps would fight 1fr. */
.organization-belt__item { width: auto; min-width: 0; max-width: none; }
}
/* ---------- Academia ---------- */
/* Core flow layout gives every section after the first a blockGap margin. These
sections are full-bleed tinted bands, so that margin shows the page background
as a stripe between them. Same guard the Mesa pattern already carries. */
.academia-content-pattern > * { margin-block: 0; }
.galeria-content-pattern > * { margin-block: 0; }
.featured-placeholder--academia svg,
.featured-placeholder--galeria svg { aspect-ratio: 3 / 2; }
.academia-feature { padding: var(--space-6) 0; background: var(--base); color: var(--ink); }
.academia-feature h2 { max-width: 18ch; margin: 0.85rem 0 1.2rem; }
.academia-feature__lead { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--muted); max-width: 52ch; }
.academia-chapters {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4) var(--space-3);
margin-top: var(--space-5);
}
.academia-chapter :is(h3, p) { margin: 0; }
.academia-chapter .folio { margin-bottom: 0.35rem; color: var(--teal); }
.academia-chapter h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.academia-chapter > p:last-child { color: var(--muted); max-width: 42ch; }
.academia-chapter__slot { margin-top: var(--space-2); }
/* Core emits `.is-layout-flow > * + * { margin-block-start }` for every group,
including ones the theme lays out as a grid — which offsets every item after
the first inside its own cell and staggers the row. Same guard the Mesa
pattern carries. */
.academia-chapters > *,
.galeria-index > *,
.galeria-media__grid > * { margin-block: 0; }
@media (max-width: 1024px) {
.academia-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The placeholder paragraph carries .media-frame; an inserted core Embed does not,
so the slot owns the ratio and the frame in both states. */
/* Same containment as the hero plates: the paper backing and the ink-line frame
hold a third-party player on the dark band without restyling it. */
.academia-chapter__slot, .galeria-media__slot {
position: relative;
aspect-ratio: 16 / 9;
background: var(--surface);
border: 1px solid var(--line);
}
/* An unfilled slot collapses instead of painting an empty framed box. The theme
drops the embed block itself (asidehu_hide_unfilled_embeds) but core still
renders the group wrapper around it, and the wrapper owns the 16:9 plate. */
.academia-chapter__slot:empty,
.galeria-media__slot:empty { display: none; }
.academia-chapter__slot > *, .galeria-media__slot > * { width: 100%; height: 100%; margin: 0; }
/* Core nests the player as figure > .wp-block-embed__wrapper > iframe and drives
the ratio from the wrapper with its own padding trick. Sizing only the outer
figure leaves the iframe at whatever height oEmbed reported, so address the
wrapper by name and let it fill the slot instead. */
.academia-chapter__slot .wp-block-embed__wrapper,
.galeria-media__slot .wp-block-embed__wrapper { width: 100%; height: 100%; padding: 0; }
.academia-chapter__slot .wp-block-embed__wrapper::before,
.galeria-media__slot .wp-block-embed__wrapper::before { content: none; }
.academia-chapter__slot iframe, .galeria-media__slot iframe,
.academia-chapter__slot video, .galeria-media__slot video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.academia-feature .meta { color: var(--muted); }
/* Third band, back to surface: paper — surface — paper — surface keeps every
boundary on the page visible without a dark stripe next to the dark footer. */
.academia-course { padding: var(--space-6) 0; background: var(--surface); border-top: 1px solid var(--line); }
.academia-course__grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 5rem; align-items: start; }
.academia-course h2 { max-width: 14ch; margin: 0.85rem 0 0; }
.academia-course p { max-width: 60ch; }
/* ---------- Galería ---------- */
/* Type-first archive of the association's OWN media, in three types. It used to
borrow .museo-room-list, which made the two pages read as one; the index now has
its own idiom. Museo keeps its template, its styles, and its subject. */
.galeria-entry { padding: var(--space-6) 0; }
.galeria-index {
display: grid;
/* auto-fit, not a fixed count: the index tracks however many types the page carries. */
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--space-3);
margin-top: var(--space-3);
border-top: 1px solid var(--line);
}
.galeria-index__item { padding-top: var(--space-3); border-top: 3px solid var(--teal); }
.galeria-index__item :is(h3, p) { margin: 0; }
.galeria-index__item h3 { margin: 0.4rem 0 0.5rem; font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.galeria-index__item h3 a { text-decoration: none; }
.galeria-index__item h3 a:hover { text-decoration: underline; }
.galeria-index__item > p:not(.folio) { color: var(--muted); }
.galeria-fotos, .galeria-docs { padding: var(--space-6) 0; }
.galeria-fotos { background: var(--surface); }
/* One repeatable series, so a growing archive stays a handful of named groups
instead of one undifferentiated wall of images. */
.galeria-serie { margin-top: var(--space-4); }
.galeria-serie + .galeria-serie { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.galeria-serie :is(h3, p) { margin: 0; }
.galeria-serie h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
/* Editors fill this with a core Gallery block. Its own layout is a wrapping grid,
which grows downward without limit: a series of eighty photographs would be
twenty rows of page. Each series is laid out instead as one fixed-height strip
that scrolls sideways, so a series costs the same vertical space whether it
holds six images or six hundred. Core's lightbox (theme.json, core/image) makes
every tile a real button, so the strip scrolls with the keyboard as focus moves
through it — no custom carousel, no script. */
/* Thumbnail box, shrunk on the client's ask at 21:01:45 — "las miniaturas en más
pequeño... casi que hasta la mitad". The old box was 320x230; a literal halving
lands near 160x115, where a centre-cropped portrait stops being readable, so it
stops at 200x150. Below 700px the tile shrinks again so three stay in view. */
.gallery-grid { margin-top: var(--space-3); }
.gallery-grid > .media-frame { aspect-ratio: auto; }
.gallery-grid .wp-block-gallery.has-nested-images {
flex-wrap: nowrap;
gap: var(--space-2);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
padding-bottom: 0.75rem;
/* "Publicamos las primeras cuatro... y ver más" (21:01:35): collapsed, the strip
is exactly four tiles wide, so the fifth is visibly cut off. */
max-width: calc(4 * var(--galeria-tile) + 3 * var(--space-2));
}
/* `:not(#individual-image)` is core's own specificity trick, and it has to be
matched or the tile size below never applies: core ships
`.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)`
with a percentage width and a responsive column collapse, which quietly won over
every width this theme set. Measured on 2026-09-01: the strip was rendering at
190x143 on desktop and 167px on a 390px phone — core's percentages, not the
theme's numbers. The extra class here takes specificity past core's rather than
tying the result to stylesheet order. */
/* The tile box is the theme's, never the photograph's. Sizing only the `img`
left the strip height at the mercy of whichever rule won for that image —
measured 2026-09-01, a series of 4:3 sources rendered 162px tall and a series
holding a 3:4 portrait rendered 279px, on identical markup. The figure now
owns both dimensions, so a series is the same height whatever it holds, and
the image just fills it. */
.gallery-grid .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image) {
flex: 0 0 auto;
align-self: flex-start;
width: var(--galeria-tile);
height: var(--galeria-tile-height);
overflow: hidden;
scroll-snap-align: start;
}
.gallery-grid .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image) img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Ver más. A core Details block, so the disclosure is native: keyboard-operable
and announced without a line of theme JavaScript. Open, the strip stops being a
strip and becomes the full wrapping grid. */
.galeria-serie__more { margin-block-start: var(--space-2); }
.galeria-serie__more summary { cursor: pointer; font-weight: 700; }
.galeria-serie__more summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.galeria-serie:has(.galeria-serie__more[open]) .gallery-grid .wp-block-gallery.has-nested-images {
flex-wrap: wrap;
overflow-x: visible;
max-width: none;
}
.gallery-grid .wp-block-gallery.has-nested-images:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
}
/* "Que descanse como tres o cuatro por línea" (21:02:05). auto-fit with a 16rem
track minimum lands on four across the 1180px shell, three on a laptop, two on a
tablet and one on a phone — the track does the collapsing, so there is no
breakpoint to keep in sync with the shell width. */
/* auto-FILL, not auto-fit: auto-fit collapses the empty tracks, so a page holding
two pieces rendered them as two 582px cards — the opposite of "reducir un poquito
más el tamaño". auto-fill keeps the four tracks and the cards keep their size
whether the section holds two pieces or twelve. */
.galeria-media__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.galeria-media :is(h3, p) { margin: 0; }
.galeria-media h3 { margin: 0.75rem 0 0.3rem; font-size: 1.35rem; }
.galeria-media > p:last-child { color: var(--muted); max-width: 50ch; }
@media (max-width: 700px) {
.academia-course__grid, .galeria-media__grid { grid-template-columns: 1fr; gap: var(--space-4); }
.academia-chapters, .galeria-index { grid-template-columns: 1fr; }
/* Three thumbnails must stay in view on a phone, so the tile is a share of the
viewport rather than a fixed box; the floor keeps a cropped portrait legible.
The four-tile cap is lifted here — at this width the strip is the shell. */
.gallery-grid { --galeria-tile: max(104px, 28vw); --galeria-tile-height: max(78px, 21vw); }
.gallery-grid .wp-block-gallery.has-nested-images { max-width: none; }
}
/* --------------------------------------------------------------------------
Quiénes somos: team roster and institutional documents. The figure row moved
to the home-page belt on 2026-09-01 — see .record-strip in components.css.
-------------------------------------------------------------------------- */
.page-team, .page-docs { padding-block: var(--space-4); }
.page-docs { border-block-start: 1px solid var(--line); }
.page-team__intro { max-width: 60ch; color: var(--muted); }
.page-team__list, .page-docs__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-3);
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
}
.page-team__member, .page-docs__item { min-width: 0; padding-block-start: 0.9rem; border-block-start: 2px solid var(--ink); }
.page-team__role, .page-docs__name { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 700; }
.page-team__project { display: block; font-family: var(--sans); font-size: 0.875rem; font-weight: 400; color: var(--muted); }
.page-team__mail, .page-docs__link { margin: 0; overflow-wrap: anywhere; }
/* Academia — course cards. Scaffolded 2026-08-31 from client feedback: courses
come first, the explanatory-video shelf sits below them. Plain editable text,
no CPT and no enrolment logic; the full courses layer is priced scope. */
.academia-courses { padding: var(--space-6) 0; background: var(--base); color: var(--ink); }
.academia-courses h2 { max-width: 18ch; margin: 0.85rem 0 1.2rem; }
.academia-courses__lead { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--muted); max-width: 52ch; }
.academia-courses__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin-top: var(--space-5);
}
.academia-course-card {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: var(--space-3);
background: var(--surface);
border: 1px solid var(--line);
}
.academia-course-card :is(h3, p) { margin: 0; }
.academia-course-card h3 { font-size: 1.3rem; }
.academia-course-card__state {
font-family: var(--sans);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--teal);
}
.academia-course-card__meta { font-size: 0.9375rem; color: var(--muted); }
.academia-course-card__result { font-size: 0.9375rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.6rem; }
.academia-course-card .wp-block-buttons { margin-top: auto; padding-top: 0.4rem; }
@media (max-width: 1024px) {
.academia-courses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.academia-courses__grid { grid-template-columns: 1fr; }
}
/* Museo — sala thumbnails and the four-path collaboration call to action.
Added 2026-08-31 from client feedback. Empty slots collapse so a sala without
a photograph does not leave a hole in the grid. */
.museo-room__thumb { margin-block: 0.75rem; }
.museo-room__thumb:empty,
.museo-room__thumb .wp-block-image:not(:has(img)) { display: none; }
.museo-room__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.museo-room h3 a { color: inherit; text-underline-offset: 0.2em; }
.museo-cta { margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }
.museo-cta h3 { margin: 0 0 var(--space-2); font-size: 1.2rem; }
/* The four asks are long, so they collapse behind their own heading (client,
2026-09-01). A core Details block, like .galeria-serie__more: native
disclosure, keyboard-operable and announced, without a line of theme JS. */
.museo-cta__more summary { cursor: pointer; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.museo-cta__more summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.museo-cta__more[open] summary { margin-block-end: var(--space-2); }
/* Four asks, four recipients, none of them named yet. Each carries its own slot
rather than sharing one link to /contacto/, which sent four different people
to the same general inbox. */
.museo-routes { display: grid; }
.museo-route { padding-block: 0.85rem; border-block-start: 1px solid var(--line); }
.museo-route:first-child { border-block-start: 0; padding-block-start: 0; }
.museo-route__name { margin: 0; font-weight: 700; }
.museo-route__dest { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.museo-route--support .pending-action { margin-block-start: 0.7rem; }
/* Proyectos — chart and gallery slots. Both collapse when the editor leaves them
empty, so a project without photographs shows no empty heading. */
.project-chart, .project-photos, .update-photos { margin-block-start: var(--space-4); }
.project-chart:not(:has(img)),
.project-photos:not(:has(img)) { display: none; }
.project-chart figcaption { color: var(--muted); font-size: 0.9375rem; }