/* =========================================================
   Museo Chileno de Arte Precolombino — homepage clone
   Custom styles on top of Bootstrap 5. Font: Brandon Grotesque
   (self-hosted, same family used on the original site).
   ========================================================= */

@font-face {
  font-family: "Brandon Grotesque";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../vendor/fonts/BrandonGrotesque-Light.woff") format("woff");
}
@font-face {
  font-family: "Brandon Grotesque";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/BrandonGrotesque-Regular.woff") format("woff");
}
@font-face {
  font-family: "Brandon Grotesque";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/BrandonGrotesque-Medium.woff") format("woff");
}
@font-face {
  font-family: "Brandon Grotesque";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/BrandonGrotesque-MediumItalic.woff") format("woff");
}
@font-face {
  font-family: "Brandon Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/BrandonGrotesque-Bold.woff") format("woff");
}

:root {
  --color-pink: #f73700;
  --color-pink-dark: color-mix(in srgb, var(--color-pink) 87%, black);
  --color-magenta: #99398e;
  --color-black: #000000;
  --color-ink: #1a1a1a;
  --color-muted: #54595f;
  --color-bg: #f7f7f7;
  --color-bg-alt: #f2f2f2;
  --color-white: #ffffff;
  --font-main: "Brandon Grotesque", "Segoe UI", sans-serif;
  --radius-pill: 17px;
  --container-max: 1320px;
  scroll-behavior: auto;
}

/* ---------------------------------------------------------
   Page-to-page fade (native cross-document View Transitions —
   CSS-only, no JS). Unsupported browsers just navigate normally.
   --------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: ease-in-out;
}


body {
  font-family: var(--font-main);
  color: var(--color-ink);
  background-color: var(--color-white);
  font-size: 1rem;
  line-height: 1.5;
  /* Sticky footer: on short pages <main> grows so the footer sits at the bottom of the viewport. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.container-xl-custom {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.btn-pill-dark {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-width: 9rem;
  background: var(--color-black);
  color: var(--color-bg-alt) !important;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn-pill-dark:hover {
  background: #222;
  color: var(--color-white) !important;
  transform: translateY(-1px);
}

/* MultipleButtonsBlock estilo "plain": sin fondo ni borde ni flecha, sólo texto alineado a
   la izquierda. `.sf-buttons--plain .col` no estira el enlace (nada de `w-100`), así el
   ancho queda ceñido al texto. */
.sf-buttons--plain .col {
  display: flex;
}
.sf-plain-link {
  display: inline-block;
  color: var(--color-black);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}
.sf-plain-link:hover {
  color: var(--color-black);
}
.sf-plain-link:hover .sf-plain-link__label {
  text-decoration: underline;
}
.btn-pill-dark i {
  font-size: 0.75em;
}

.text-pink {
  color: var(--color-pink) !important;
}

/* ---------------------------------------------------------
   Top utility bar
   --------------------------------------------------------- */
.top-bar {
  background: var(--color-black);
  color: var(--color-white);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem 1rem;
}
.top-bar a {
  color: var(--color-white);
}
.top-bar a strong {
  color: var(--color-white);
  font-weight: 800;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.site-header {
  background: var(--color-bg);
  padding-top: 0.75rem;
}

.utility-nav {
  font-size: 0.8rem;
  font-weight: 400;
}
.utility-nav a {
  color: var(--color-pink);
  margin-left: 1.5rem;
  white-space: nowrap;
}
.utility-nav a:hover {
  text-decoration: underline;
}

.brand-logo {
  font-weight: 800;
  line-height: 1.15;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-black);
}
.brand-logo img {
  height: 52px;
  width: auto;
}

.main-nav {
  font-size: 0.82rem;
  font-weight: 400;
}
.main-nav .nav-link {
  color: var(--color-ink);
  padding: 0.5rem 0.65rem;
}
.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
  color: var(--color-pink);
}
.main-nav .dropdown-menu {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.5rem 0;
  font-weight: 400;
  font-size: inherit;
}
.main-nav .dropdown-menu.mega-menu {
  min-width: 22rem;
  columns: 2;
  column-gap: 1.5rem;
  padding: 1rem 1.25rem;
}
.main-nav .dropdown-item {
  font-size: inherit;
  white-space: normal;
  padding: 0.4rem 1rem;
}
.main-nav .dropdown-item:hover {
  background: var(--color-bg-alt);
  color: var(--color-pink);
}

/* Submenús anidados (3er nivel) del menú principal */
.main-nav .dropdown-submenu {
  position: relative;
}
.main-nav .dropdown-submenu > .dropdown-menu {
  display: block;
  top: 100%;
  left: 0;
  margin-top: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.main-nav .dropdown-submenu > .dropdown-menu.show,
.main-nav .dropdown-submenu:hover > .dropdown-menu,
.main-nav .dropdown-submenu:focus-within > .dropdown-menu {
  visibility: visible;
  opacity: 1;
}
@media (min-width: 992px) {
  .main-nav .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 0.125rem;
  }
  .main-nav .dropdown-submenu > .dropdown-toggle::after {
    transform: rotate(-90deg);
  }
}

/* ---------------------------------------------------------
   Hero carousel
   --------------------------------------------------------- */
.hero-carousel {
  background: var(--color-bg-alt);
  position: relative;
}
.hero-slide {
  width: 100%;
}
.hero-slide-text {
  height: 560px;
  overflow: visible;
  padding: 5.625rem 8.5rem 1.875rem;
}
.hero-slide-image {
  height: 560px;
  background-size: cover;
  background-position: center;
}
.hero-slide-text h2 {
  font-size: 1.859375rem; /* 29.75px, 85% of 35px */
  font-weight: 500;
  line-height: 1.114;
  margin-bottom: 1.25rem;
}
.hero-slide-text p {
  color: var(--color-muted);
  margin-bottom: 1.25rem;
  font-size: 1.328125rem; /* 21.25px, 85% of 25px */
  line-height: 1.16;
}
.hero-slide-text .btn-pill-dark {
  font-size: 1.25rem;
  padding: 0.68rem 1.1rem;
}

/* Nav arrows sit at the edges of the whole banner, vertically
   centered — plain icon glyphs, no button background, like the
   original's Font Awesome arrow-circle icons. */
.hero-carousel .flickity-prev-next-button {
  /* 36px, shrinking (and moving in) when the gutter left of the text
     (--site-section-offset) is too narrow for it; the glyph follows the width. */
  --hero-arrow: clamp(20px, calc(var(--site-section-offset, 48px) - 12px), 36px);
  --hero-arrow-inset: min(10px, calc((var(--site-section-offset, 56px) - var(--hero-arrow)) / 2));
  background: none;
  width: var(--hero-arrow);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  container-type: inline-size;
  top: 50%;
}
.hero-carousel .flickity-prev-next-button.previous {
  left: var(--hero-arrow-inset);
}
.hero-carousel .flickity-prev-next-button.next {
  right: var(--hero-arrow-inset);
}
.hero-carousel .flickity-prev-next-button svg {
  display: none;
}
.hero-carousel .flickity-prev-next-button::before {
  display: block;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 100cqw;
  line-height: 1;
  color: var(--color-black);
}
.hero-carousel .flickity-prev-next-button.previous::before {
  content: "\f0a8";
}
.hero-carousel .flickity-prev-next-button.next::before {
  content: "\f0a9";
}
.hero-carousel .flickity-prev-next-button:disabled {
  display: block;
  opacity: 1;
}
.hero-carousel .flickity-page-dots {
  display: none;
}

@media (max-width: 767px) {
  .hero-slide-text {
    height: auto;
    padding: 10px;
  }
  .hero-slide-image {
    height: 300px;
  }
  .hero-slide-text h2 {
    font-size: 1.16875rem; /* 18.7px, 85% of 22px */
  }
  .hero-slide-text p {
    font-size: 1.0625rem; /* 17px, 85% of 20px */
  }
  .hero-slide-text .btn-pill-dark {
    font-size: 1rem;
  }
  .hero-carousel .flickity-prev-next-button {
    display: none;
  }
}
/* Botón «Planifica tu visita» bajo el banner, sólo en móvil (.d-md-none). */
/* Alineado a la izquierda con el «Ver más» del banner (mismo --site-section-offset). */
.home-planifica {
  padding: 1.25rem var(--site-section-offset, 1rem) 0;
  margin-bottom: 1.5rem;
}
.home-planifica .btn-pill-dark {
  width: auto;
  min-width: 0;
  max-width: none;
  justify-content: center;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  white-space: nowrap;
  background: var(--color-pink);
  color: var(--color-white) !important;
}
.home-planifica .btn-pill-dark:hover {
  background: var(--color-pink-dark);
}

/* ---------------------------------------------------------
   Eventos
   --------------------------------------------------------- */
.eventos-section {
  padding: 2.5rem 0;
}
.eventos-section h2.section-title {
  font-weight: 500;
  font-size: 1.5rem;
}
.eventos-toggle .btn {
  border: none;
  border-radius: 4px;
  color: #111;
  background: #f5f5f5;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  margin-left: 5px;
}
.eventos-toggle .btn.active {
  background: var(--color-black);
  color: var(--color-white);
}

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-white);
  height: 415px;
  color: inherit;
}
.event-card-img {
  height: 220px;
  flex: 0 0 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 6px;
}
.event-date-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-white);
  border-radius: 6px;
  text-align: center;
  padding: 0.4rem 0.7rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  line-height: 1.1;
}
.event-date-badge .day {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #111;
}
.event-date-badge .month {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-muted);
}
.event-card-body {
  padding: 1.1rem 1rem 1.25rem;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.event-card-title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-card:hover .event-card-title {
  color: var(--color-pink);
}
.event-datetime {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 0.2rem;
}
.event-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 400;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 4px;
  padding: 0.3rem 0.45rem;
}
.event-datetime i {
  color: #555;
  margin-right: 0.4rem;
  font-size: 0.85em;
}
.event-time {
  margin-left: 0.75rem;
  white-space: nowrap;
}

.events-carousel.flickity-enabled {
  padding-bottom: 0;
}
/* explicit gutter: Flickity absolute-positions cells by their
   outer width, so Bootstrap's row/col gutter variables don't
   reliably survive re-layout — pad the cell itself instead. */
.event-col {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-bottom: 1.5rem;
}
.events-carousel .flickity-prev-next-button {
  display: none;
}
@media (max-width: 991px) {
  .events-carousel .flickity-prev-next-button {
    display: block;
    background: var(--color-black);
    width: 36px;
    height: 36px;
  }
  .events-carousel .flickity-prev-next-button svg {
    fill: var(--color-white);
  }
}

/* list view: cards become full-width horizontal rows */
.events-carousel.list-view {
  display: block !important;
}
.events-carousel.list-view .event-col {
  width: 100% !important;
  max-width: 100%;
  margin-bottom: 1rem;
}
.events-carousel.list-view .event-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: auto;
  min-height: 220px;
}
.events-carousel.list-view .event-card-img {
  width: 220px;
  height: auto;
  flex: 0 0 220px;
  border-radius: 6px 0 0 6px;
}
.events-carousel.list-view .event-card-body {
  padding: 1rem 1.25rem;
  flex: 1 1 auto;
}

@media (max-width: 575px) {
  .events-carousel.list-view .event-card {
    flex-direction: column;
    min-height: 0;
  }
  .events-carousel.list-view .event-card-img {
    width: 100%;
    height: 220px;
    flex: 0 0 220px;
    border-radius: 6px;
  }
}

.eventos-load-more {
  text-align: center;
  margin-top: 2rem;
}
.eventos-load-more .btn-load-more {
  display: inline-block;
  background: #f5f5f5;
  color: #555;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 4px;
  padding: 0.65rem 1rem;
  border: none;
}
.eventos-load-more .btn-load-more:hover {
  background: #e8e8e8;
  color: #333;
}

/* ---------------------------------------------------------
   Catálogo CTA banner
   --------------------------------------------------------- */
.catalogo-banner {
  background: #23a455;
  color: var(--color-white);
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
}
.catalogo-banner h2 {
  font-size: 1.5625rem; /* 25px, constant at every width */
  font-weight: 400;
}
.catalogo-banner .btn-pill-dark {
  background: var(--color-black);
  color: var(--color-bg-alt) !important;
}
.catalogo-banner .btn-pill-dark:hover {
  background: var(--color-white);
  color: var(--color-black) !important;
}

/* ---------------------------------------------------------
   Half-image feature sections
   Each section carries a dominant tint lifted from its photo,
   like the original (image on one side, same-colored panel
   behind the text on the other — no gap between sections).
   --------------------------------------------------------- */
.half-section .half-text {
  min-height: 350px;
  padding-left: clamp(1.5rem, 5vw, 6rem);
  padding-right: clamp(1.5rem, 5vw, 6rem);
}
/* Un `richtext_one_column` justo después de un `half_section` queda pegado a su borde
   (ninguno de los dos trae su propio espaciado vertical). Margen superior sólo cuando se
   da esa combinación, para no afectar el espaciado de `.expo-page__presentation` en el
   resto de los casos. */
.half-section + .expo-page__presentation {
  margin-top: 1rem;
}
.half-section .half-image {
  background-size: cover;
  background-position: center;
  min-height: 350px;
}
.half-section h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 0.75rem;
}
.half-section p {
  font-size: 1.375rem;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.half-section .note {
  font-size: 0.8rem;
  font-style: italic;
  opacity: 0.7;
  margin-top: -0.75rem;
  margin-bottom: 1.25rem;
}
.half-section .btn-pill-dark {
  align-self: flex-end;
  font-size: 1.25rem;
}

/* "tier-xl" sections use one big headline + a lighter subline
   instead of a bold heading + separate paragraph. Unlike the
   regular tier (constant size at every width), this one steps
   down hard at each breakpoint on the original site. */
.half-section.heading-xl h2 {
  font-size: 3.125rem;
  margin-bottom: 0.5rem;
}
.half-section.heading-xl p {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.15;
}

/* dark background => light text; light background => dark text */
.half-section.text-light {
  color: var(--color-white);
}
.half-section.text-light .btn-pill-dark {
  background: var(--color-white);
  color: var(--color-black) !important;
}
.half-section.text-light .btn-pill-dark:hover {
  background: var(--color-black);
  color: var(--color-white) !important;
}
.half-section.text-dark {
  color: var(--color-ink);
}

/* Regular (non heading-xl) titles/leads stay constant at every
   width on the original site — only heading-xl and the buttons
   step down at each breakpoint. */
@media (max-width: 1366px) {
  .half-section.heading-xl h2 {
    font-size: 2.3125rem; /* 37px */
  }
  .half-section.heading-xl p {
    font-size: 1.5rem; /* 24px */
  }
}
@media (max-width: 1024px) {
  .half-section.heading-xl h2 {
    font-size: 1.6875rem; /* 27px */
  }
  .half-section.heading-xl p {
    font-size: 0.875rem; /* 14px */
  }
}
@media (max-width: 767px) {
  .half-section .half-text,
  .half-section .half-image {
    min-height: 260px;
  }
  .half-section.heading-xl h2 {
    font-size: 1.75rem; /* 28px */
  }
  .half-section.heading-xl p {
    font-size: 1.25rem; /* 20px */
  }
}

/* Amigos del Museo carousel occupies the image half like any
   other section's photo — same yellow tint on both sides is
   what makes the split read as one solid block. */
.amigos-carousel {
  width: 100%;
  height: 100%;
  min-height: 350px;
}
.amigos-carousel .carousel-cell {
  width: 100%;
  height: 350px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.amigos-carousel .flickity-page-dots {
  bottom: 10px;
}
.amigos-carousel .flickity-page-dots .dot {
  background: var(--color-black);
  opacity: 0.35;
}
.amigos-carousel .flickity-page-dots .dot.is-selected {
  opacity: 1;
}
@media (max-width: 767px) {
  .amigos-carousel,
  .amigos-carousel .carousel-cell {
    min-height: 260px;
    height: 260px;
  }
}

/* ---------------------------------------------------------
   Publicaciones — white bold title overlaid bottom-left on
   each cover image, not a caption underneath.
   --------------------------------------------------------- */
.publicaciones-section {
  padding: 3rem 0;
}
.publicaciones-section h2.section-title {
  font-weight: 700;
  font-size: 3.125rem; /* 50px, matches the heading-xl scale */
  margin-bottom: 2rem;
}
@media (max-width: 1366px) {
  .publicaciones-section h2.section-title {
    font-size: 2.3125rem; /* 37px */
  }
}
@media (max-width: 1024px) {
  .publicaciones-section h2.section-title {
    font-size: 1.6875rem; /* 27px */
  }
}
@media (max-width: 767px) {
  .publicaciones-section h2.section-title {
    font-size: 1.75rem; /* 28px */
  }
}
.publicacion-item {
  display: block;
  position: relative;
  overflow: hidden;
}
.publicacion-item img {
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
  display: block;
  transition: transform 0.2s ease;
}
.publicacion-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%);
}
.publicacion-item span {
  position: absolute;
  left: 0.75rem;
  bottom: 0.6rem;
  z-index: 1;
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: left;
}
.publicacion-item:hover img {
  transform: scale(1.04);
}

/* ---------------------------------------------------------
   Footer — light background throughout, dark text
   --------------------------------------------------------- */
.sponsors-strip {
  background: var(--color-white);
  padding: 1rem 1rem;
}
.sponsors-strip .container-xl-custom {
  text-align: left;
}
.sponsors-strip p {
  font-size: 1rem;
  font-weight: 400;
  color: #6c6c6c;
  margin-bottom: 0.6rem;
}
.sponsor-carousel {
  max-width: 200px;
  margin: 0;
}
.sponsor-carousel .carousel-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 52px;
}
.sponsor-carousel img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
.sponsor-carousel .flickity-page-dots {
  display: none;
}

.footer-info {
  background: var(--color-bg);
  padding: 2.5rem 0;
}
.footer-newsletter {
  background: #e8e5ea;
  padding: 2rem 0;
}
.footer-bottom-info {
  background: var(--color-bg);
  padding: 2rem 0;
}

.site-footer h3 {
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}
.site-footer a {
  color: var(--color-ink);
}
.site-footer a:hover {
  color: var(--color-pink);
}
.site-footer p {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 0.3rem;
}
.footer-apoyo-icons img {
  height: 34px;
  width: auto;
  margin-right: 0.75rem;
  margin-top: 0.5rem;
}

.newsletter-form .form-control {
  border-radius: 14px 0 0 14px;
  border: none;
  padding: 0.65rem 1rem;
}
.newsletter-form .btn {
  border-radius: 0 14px 14px 0;
  background: var(--color-black);
  color: var(--color-white);
  font-weight: 700;
  padding: 0.65rem 1.25rem;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.newsletter-form .btn:hover {
  background: var(--color-pink);
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 0.4rem;
  color: var(--color-ink);
  font-size: 1rem;
}
.social-icons a:hover {
  color: var(--color-pink);
}

.footer-bottom {
  border-top: 1px solid #e2e2e2;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  font-size: 0.78rem;
  color: #9a9a9a;
  text-align: center;
}

/* ==========================================================================
   Exposiciones temporales — listado
   Grilla Bootstrap; sólo se estiliza la tarjeta (imagen + barra de título).
   ========================================================================== */

.expo-list {
  padding: 2.5rem 0 4rem;
}

/* Medidos en el sitio de referencia: título 24px/24px peso 600; bajada 16px/24px. */
.expo-list .section-title {
  color: var(--color-black);
  font-size: 24px;
  font-weight: 600;
  line-height: 23px;
  margin-bottom: 1.1875rem;
}

/* h1 de página en listados de exposiciones y cartelera: mismo tamaño que .edu-page-title
   y mismo peso que el título de .expo-list (600).
   Tres clases para ganar a „.expo-list .section-title" y a las reglas de .eventos-section. */
.expo-list .section-title.section-title--page,
.eventos-section .section-title.section-title--page {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}

.expo-list-intro {
  color: #212529;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  margin-bottom: 2.5rem;
}

.expo-card {
  display: block;
  color: inherit;
  height: 100%;
}

.expo-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Barra negra bajo la imagen. Tipografía tomada del sitio de referencia:
   20px, sin padding, alto mínimo de dos líneas. */
.expo-card-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 4.5rem;
  padding: 0 1rem;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5rem;
  text-align: left;
}

.expo-card:hover .expo-card-title {
  color: var(--color-pink);
}

/* Botones en fila (StreamField): ocupan el ancho de su columna de la grilla.
   `.w-100` de Bootstrap no basta aquí porque responsive.css fija `.btn-pill-dark { width: auto }`. */
.sf-buttons .btn-pill-dark {
  width: 100%;
  min-width: 0;
  max-width: none;
  justify-content: center;
  gap: 0.75rem;
}


/* ==========================================================================
   Catálogo Razonado
   Página con identidad propia: fondo arena y texto café. Todos los valores
   (tamaño, peso, interlínea, color) medidos en el sitio de referencia.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/IBMPlexSerif-Regular.woff2") format("woff2");
}

.catraz {
  --catraz-ink: #736055;
  --catraz-sand: #e2dfd5;
  background: var(--catraz-sand);
  color: var(--catraz-ink);
  padding-bottom: 3rem;
}

.catraz-subnav {
  padding: 1.1rem 0;
}
.catraz-subnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.catraz-subnav a {
  color: var(--catraz-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.catraz-subnav a:hover,
.catraz-subnav a.active {
  text-decoration: underline;
}

.catraz-wordmark {
  width: 100%;
  max-width: 246px;
  height: auto;
}

.catraz-lead p {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 2rem;
  margin-bottom: 1.5rem;
}

.catraz-aside p {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.25rem;
  margin-bottom: 1.5rem;
}

.catraz-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 245 / 552;   /* medido en la referencia */
  object-fit: cover;
}
.catraz-card figcaption {
  color: var(--catraz-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.40625rem;
  padding-top: 0.75rem;
}

.catraz-heading {
  font-size: 1.4375rem;
  font-weight: 900;
  line-height: 2.15625rem;
}

.catraz-note p {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.375rem;
  margin-bottom: 1.25rem;
}

.catraz-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 0;
}
.catraz-credits-line {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.40625rem;
}

.catraz-links a {
  color: var(--catraz-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.40625rem;
}
.catraz-links a:hover {
  text-decoration: underline;
}

/* Bloque de créditos: fondo café, texto arena. */
.catraz-creditos {
  background: #736055;
  color: #e2dfd5;
  padding: 3rem 0;
}
.catraz-creditos img {
  height: auto;
  max-width: 100%;
}
.catraz-creditos h3 {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3125rem;
  margin-bottom: 0;
}
.catraz-creditos p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3125rem;
  margin-bottom: 1.25rem;
}

/* Dos piezas del bloque de créditos van en blanco, no en arena. */
.catraz-creditos p.catraz-creditos-sub {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5rem;
}
.catraz-creditos h3.catraz-apoyan {
  color: var(--color-white);
}

/* --- Catálogo Razonado: subpáginas (colección) --------------------------- */

.catraz-hero-lockup {
  width: 100%;
  max-width: 436px;
  height: auto;
}

.catraz-collection-title {
  font-size: 1.4375rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  line-height: 1.6;
  margin-top: 0.75rem;
  text-transform: uppercase;
}

.catraz-btn {
  border: 1px solid var(--catraz-ink);
  border-radius: 2rem;
  color: var(--catraz-ink);
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 0.6rem 1.6rem;
}
.catraz-btn:hover {
  background: var(--catraz-ink);
  color: var(--catraz-sand);
}

.catraz-section-title {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

/* Carruseles (Flickity) de sabios, ciclo y material de difusión */
.catraz-carousel .carousel-cell {
  margin-right: 2.5rem;
  width: 100%;
}
.catraz-carousel .flickity-page-dots {
  display: none;
}
.catraz-carousel .flickity-prev-next-button {
  background: none;
  height: 44px;
  width: 44px;
}
.catraz-carousel .flickity-prev-next-button svg {
  fill: var(--catraz-ink);
}

.catraz-sabio-img {
  width: 100%;
  height: auto;
  aspect-ratio: 473 / 600;
  object-fit: cover;
}
.catraz-sabio-name {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.40625rem;
  margin: 0.75rem 0 0;
}
.catraz-sabio-piece {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.40625rem;
  margin: 0;
}
.catraz-sabio-quote {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 2rem;
}

.catraz-dif-title {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.40625rem;
}
.catraz-dif-desc {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.40625rem;
}

/* Fichas razonadas */
.catraz-ficha-codigo {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.40625rem;
  margin-bottom: 0.5rem;
}
.catraz-ficha dl {
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  margin: 0.75rem 0 0;
}
.catraz-ficha dt {
  font-weight: 700;
}
.catraz-ficha dd {
  font-weight: 300;
  margin: 0 0 0.35rem;
}

/* Subpáginas: interlineados y familia, medidos en la referencia.
   El lead del encabezado va a 32px; los párrafos de la columna izquierda, a 35px. */
.catraz-sub .catraz-body p { line-height: 2.1875rem; }   /* 35px */
.catraz-section-title      { line-height: 1.625rem; }    /* 26px */
.catraz-sabio-name         { line-height: 0.9375rem; }   /* 15px */
.catraz-sabio-piece        { line-height: 1.40625rem; }  /* 22.5px */
.catraz-sabio-quote        { line-height: 1.75rem; }     /* 28px */
.catraz-dif-title          { line-height: 0.9375rem; }   /* 15px */

/* Fichas razonadas: el código y las etiquetas van en serif; los valores, en la
   tipografía general. La imagen no se recorta (la referencia la muestra completa). */
.catraz-ficha img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.catraz-ficha-codigo,
.catraz-ficha dt {
  font-family: "IBM Plex Serif", Georgia, serif;
}
.catraz-ficha dd {
  font-family: var(--font-main);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.40625rem;
  color: var(--catraz-ink);
}

/* Fichas razonadas: carrusel de 4 por vista, como en la referencia. */
.catraz-fichas-carousel .carousel-cell {
  margin-right: 1.5rem;
  width: calc(25% - 1.125rem);
}
@media (max-width: 991px) {
  .catraz-fichas-carousel .carousel-cell { width: calc(50% - 0.75rem); }
}
@media (max-width: 575px) {
  .catraz-fichas-carousel .carousel-cell { width: 100%; }
}

/* Separación entre la sub-navegación y el encabezado de la página. */
.catraz-hero-row {
  padding-top: 4.5rem;
  padding-bottom: 3rem;
}

/* «Asignación cronológica» usa peso 400 en la referencia; el resto de los valores, 300. */
.catraz-ficha dd.fw-normal { font-weight: 400; }

/* Flechas del carrusel de fichas: a la altura del título de la sección. */
.catraz-fichas-carousel { position: relative; }
.catraz-fichas-carousel .flickity-prev-next-button {
  top: -3.7rem;
  transform: none;
}
.catraz-fichas-carousel .flickity-prev-next-button.previous { left: 0; }
.catraz-fichas-carousel .flickity-prev-next-button.next { right: 0; }

.catraz-note p.fw-normal { font-weight: 400; }

.catraz-dif-link { color: inherit; }
.catraz-dif-link:hover .catraz-dif-title { text-decoration: underline; }

/* ---------------------------------------------------------
   StreamField page — richtext blocks
   --------------------------------------------------------- */
.sf-page {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.sf-richtext {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.sf-richtext h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 0.75rem;
}
.sf-richtext p {
  font-size: 1.375rem;
  line-height: 1.15;
}

.site-footer-wrapper {
  margin-top: 1em;
}

/* StreamField buttons: equal height per column, smaller type */
.sf-buttons .col {
  display: flex;
}
.sf-buttons .btn-pill-dark {
  font-size: 0.75rem;
  width: 100%;
  max-width: none;
  gap: 0.5rem;
}

.btn-pink {
  background: var(--color-pink);
  color: #fff;
  border: none;
  font-weight: 700;
}
.btn-pink:hover {
  background: var(--color-pink-dark);
  color: #fff;
}

/* ==========================================================================
   Educación — páginas del árbol "Educación" (menú sin landing propia).
   Diseño mínimo: banner, texto, botones outline redondeados, lista con flecha.
   ========================================================================== */

.edu-page { padding-bottom: 2.5rem; }

.edu-hero-banner {
  width: 100%;
  height: auto;
  display: block;
}

.edu-section-heading {
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.75rem;
}

.edu-page p {
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: #212529;
  margin-bottom: 1.25rem;
}

/* Botón "outline": borde gris, sin relleno, todo mayúsculas — variante ligera
   de .btn-pill-dark para páginas de contenido informativo. */
.edu-btn-outline {
  display: inline-block;
  border: 3px solid var(--color-muted);
  border-radius: 50px;
  color: var(--color-muted);
  background: var(--color-white);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem 3rem;
}
.edu-btn-outline:hover {
  background: var(--color-muted);
  color: var(--color-white);
}

.edu-arrow-list li {
  font-size: 1.375rem;
  font-weight: 800;
  color: #660001;
  margin-bottom: 1.1rem;
}
.edu-arrow-list li i {
  margin-right: 0.6rem;
  font-size: 0.85em;
}

/* Educación: banner de introducción con texto e iconos en imagen (Niñ@s y páginas similares). */
.edu-banner {
  background: #15291e;
  padding: 1.5rem 2rem;
}
.edu-banner-text {
  max-width: 860px;
  width: 62%;
  height: auto;
}
.edu-banner-icons {
  max-width: 421px;
  width: 27%;
  height: auto;
}
@media (max-width: 767px) {
  .edu-banner-text, .edu-banner-icons {
    width: 100%;
    max-width: 370px;
  }
}

/* Educación: "Ojo a la pieza" — piezas alternadas sobre fondo plano. */
.edu-page-plain { background: var(--color-bg); padding-bottom: 2rem; }
.edu-page-title { font-size: 2rem; font-weight: 700; margin-bottom: 0.75rem; }
.edu-page-intro { font-size: 2rem; font-weight: 400; }

.edu-area-title {
  font-size: 3.125rem;
  font-weight: 500;
  margin: 2.5rem 0 1.5rem;
}
.edu-pieza-row:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,0.08); }
.edu-pieza-row { min-height: 32rem; }
.edu-pieza-title { font-size: 2.5rem; font-weight: 500; margin-bottom: 1rem; }
.edu-pieza-meta p { font-size: 1.75rem; font-weight: 400; line-height: 1.2; margin-bottom: 0.25rem; }
.edu-pieza-desc { font-size: 1.75rem; font-weight: 300; line-height: 1.45; margin-top: 0.75rem; }
.edu-pieza-img { max-width: 100%; max-height: 34rem; width: auto; height: auto; }

@media (max-width: 767px) {
  .edu-area-title { font-size: 1.75rem; }
  .edu-pieza-title { font-size: 1.5rem; }
  .edu-pieza-meta p { font-size: 1.25rem; }
  .edu-pieza-desc { font-size: 1.25rem; }
  .edu-pieza-row { min-height: 0; }
}

/* Educación: "Recursos Educativos" — grilla de tarjetas con imagen, título, descripción y descarga. */
.edu-recurso-card { height: 100%; display: flex; flex-direction: column; }
.edu-recurso-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.edu-recurso-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem 0.25rem;
}
.edu-recurso-title { font-size: 1.375rem; font-weight: 500; margin-bottom: 0; }
.edu-recurso-desc { font-size: 1rem; font-weight: 300; line-height: 1.4; white-space: pre-line; }
/* Botón "Descargar" siempre al fondo de la tarjeta, alineado entre las dos columnas de la
   fila (la fila ya estira ambas tarjetas a la misma altura; esto empuja el botón contra el
   borde inferior sea cual sea el largo de la descripción). */
.edu-recurso-body .btn-pill-dark { margin-top: auto; }

/* Educación: "El lenguaje de los objetos" — grilla de piezas sobre fondo negro. */
.edu-obj-group-title { font-size: 1.5rem; font-weight: 400; margin-bottom: 1.5rem; }
.edu-obj-card { text-align: center; }
.edu-obj-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #000;
  margin-bottom: 0.75rem;
}
.edu-obj-title { display: block; font-size: 1rem; font-weight: 400; line-height: 1.3; }
.edu-obj-loc { display: block; font-size: 0.9rem; color: var(--color-muted); }

/* Niñ@s: botones más chicos y flecha más grande que la variante half-section por defecto
   (usada también en la portada); escopado a esta página para no tocar el resto del sitio. */
main.edu-nins .btn-pill-dark, div.edu-nins .btn-pill-dark {
  font-size: 0.75rem;
  padding: 0.6rem 1.4rem;
  max-width: none;
}
main.edu-nins .btn-pill-dark i, div.edu-nins .btn-pill-dark i {
  font-size: 1.05em;
}

/* La tarjeta destacada de Recursos Educativos ocupa una fila completa, pero su imagen
   conserva el mismo tamaño que las demás tarjetas (no se estira a lo ancho). */
.edu-recurso-card--featured { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* Educación: fichas individuales de "El lenguaje de los objetos". */
.edu-obj-back { font-size: 1.3125rem; color: var(--color-ink); display: inline-block; margin-bottom: 1rem; }
.edu-obj-back:hover { text-decoration: underline; }
.edu-obj-detail-title { font-size: 2.8125rem; font-weight: 900; margin-bottom: 1.5rem; }
.edu-obj-meta p {
  font-size: 1.25rem;
  font-weight: 300;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px dashed rgba(0,0,0,0.25);
}
.edu-obj-detail-img { max-width: 100%; max-height: 26rem; width: auto; height: auto; background: #000; }
.edu-obj-desc { font-size: 1.4375rem; font-weight: 400; line-height: 1.5; margin: 1.5rem 0; }
.edu-obj-desc em { font-style: italic; }
.edu-obj-section-title { font-size: 2.6875rem; font-weight: 700; margin: 1.5rem 0 1rem; }
.edu-obj-saber-list { font-size: 1.4375rem; padding-left: 1.25rem; }
.edu-obj-saber-list li { margin-bottom: 0.75rem; }

.edu-obj-biblio-list { font-size: 1.125rem; font-weight: 300; line-height: 1.4; padding-left: 1.25rem; }
.edu-obj-biblio-list li { margin-bottom: 0.9rem; }
.edu-obj-biblio-list em { font-style: italic; }

.edu-obj-complementarias { --bs-gutter-x: 1.5rem; }
.edu-obj-img-box { margin-bottom: 1.5rem; }
.edu-obj-img-box img { max-width: 100%; height: auto; margin-bottom: 0.6rem; }
.edu-obj-img-box h4 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.25rem; }
.edu-obj-img-box p { font-size: 0.9375rem; font-weight: 300; color: #555; }

/* Educación: "Laboratorio Tramas" — reusa .edu-recurso-card / .edu-obj-card; sólo agrega el
   retrato vertical, nombre + rol en mayúsculas y bios en cuerpo chico. Generada por
   `manage.py import_laboratorio_tramas`. */
.edu-tramas-portrait { aspect-ratio: 2 / 3; object-fit: cover; height: auto; }
.edu-tramas-name { font-weight: 700; text-transform: uppercase; }
.edu-tramas .edu-tramas-role {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0;
}
.edu-tramas .edu-tramas-bio p,
.edu-tramas .edu-tramas-video-title {
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 0.75rem;
}
.edu-tramas .edu-tramas-video-title { margin-top: 0.5rem; }
/* Bases de la convocatoria: texto largo con subtítulos numerados, listas y tablas. */
.edu-tramas-doc-h { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 1rem; }
.edu-tramas .edu-tramas-doc p,
.edu-tramas .edu-tramas-doc li { font-size: 1rem; line-height: 1.5; }
.edu-tramas .edu-tramas-doc li { margin-bottom: 0.4rem; }
.edu-tramas-table { font-size: 0.9375rem; }

@media (max-width: 767px) {
  .edu-obj-detail-title { font-size: 1.75rem; }
  .edu-obj-section-title { font-size: 1.75rem; }
  .edu-obj-desc, .edu-obj-saber-list { font-size: 1.125rem; }
}

/* Página con pestañas verticales (Planifica tu visita y similares) */
.tabs-hero {
  width: 100%;
  aspect-ratio: 2560 / 871;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tabs-page {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}
.tabs-page__title {
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 2rem;
}
.tabs-sidebar {
  display: flex;
  flex-direction: column;
  background: #f1f2f3;
}
.tabs-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.5;
}
.tabs-sidebar__link i {
  width: 1em;
  text-align: center;
}
.tabs-sidebar__link:hover {
  background: #e4e5e7;
  color: #212529;
}
.tabs-sidebar__link.is-active,
.tabs-sidebar__link.is-active:hover {
  background: #333;
  color: #fff;
}
.tabs-page .sf-richtext {
  padding-top: 0;
  padding-bottom: 1.25rem;
}
.tabs-page .sf-richtext p,
.tabs-page .sf-richtext li {
  font-size: 1.125rem;
  line-height: 1.5;
}
.tabs-page .sf-richtext ul {
  padding-left: 1.25rem;
}
.tabs-page .sf-buttons {
  margin-bottom: 1.25rem;
}
.tabs-page .sf-buttons .col {
  flex: 0 0 auto;
  width: auto;
}
.tabs-page .sf-buttons .btn-pill-dark {
  width: auto;
  min-width: 9rem;
  max-width: none;
}
/* Imágenes insertadas en texto enriquecido (formatos Wagtail fullwidth / left / right, ver
   home/image_formats.py). `.expo-richtext-flow` es el contenedor que pone
   `stylize_presentation_richtext`; el clearfix evita que un flotante invada el bloque siguiente. */
.expo-richtext-flow::after {
  content: "";
  display: table;
  clear: both;
}
.expo-richtext-flow .richtext-image {
  display: block;
  max-width: 100%;
  height: auto;
}
.expo-richtext-flow .richtext-image.left,
.expo-richtext-flow .richtext-image.right {
  max-width: 220px;
  margin-bottom: 1rem;
}
.expo-richtext-flow .richtext-image.left {
  float: left;
  margin-right: 1.5rem;
}
.expo-richtext-flow .richtext-image.right {
  float: right;
  margin-left: 1.5rem;
}
/* Las pestañas horizontales fijan `margin` con !important en cada hijo del flujo; sin esto
   el texto queda pegado a la imagen flotante. */
main.streamfield-page .expo-page__text-block .expo-richtext-flow > .richtext-image.left {
  margin-right: 1.5rem !important;
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow > .richtext-image.right {
  margin-left: 1.5rem !important;
}
.expo-richtext-flow .richtext-image.full-width {
  width: 100%;
  margin: 1rem 0;
}
@media (max-width: 575.98px) {
  .expo-richtext-flow .richtext-image.left,
  .expo-richtext-flow .richtext-image.right {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
}
.sf-richtext a {
  color: inherit;
  text-decoration: none;
}
.sf-richtext a:hover {
  text-decoration: underline;
}

/* Audioguías: enlace de Bloomberg Connects escrito en grande sobre su propia línea,
   arriba del QR (pedido explícito: nada de "enlace" genérico como texto de link). */
.audioguias-qr-link {
  display: block;
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 1rem;
  word-break: break-word;
}
/* QR a la mitad de su tamaño original (500x500). Escopado a esta pestaña: un poco más
   grande que el tope genérico de 220px de `.expo-richtext-flow .richtext-image.left`. */
.tabs-page--audioguias .expo-richtext-flow .richtext-image.left {
  width: 250px;
  max-width: 250px;
}

/* =========================================================
   La Institución — barra de pestañas horizontal + bloques
   StreamField portados desde el diseño anterior (streamfield_page_tabs_horizontal.html).
   Tipografía: hereda var(--font-main) (Brandon Grotesque); layout/espaciado igual al original.
   ========================================================= */

.streamfield-page__tab-nav-horizontal {
  border-top: 1px solid rgba(17, 17, 17, 0.2);
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  padding: 0.5rem 0;
  margin-top: 0.75rem;
}
.streamfield-page__tab-nav-horizontal-list {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}
.streamfield-page__tab-nav-horizontal-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-ink);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.15s ease;
}
.streamfield-page__tab-nav-horizontal-link:hover {
  border-bottom-color: var(--color-ink);
}
.streamfield-page__tab-nav-horizontal-link.is-active,
.streamfield-page__tab-nav-horizontal-link.is-active:hover {
  font-weight: 700;
  border-bottom-color: transparent;
}

/* Shell / container: width comes from .container-xl-custom (same as every other page).
   Nested shells (inside a block's own .expo-page__presentation) flush to their parent —
   only the outer wrapper keeps the real page gutter. */
main.streamfield-page--tabs .expo-page__presentation .container-xl-custom.expo-page__shell,
main.streamfield-page--tabs .expo-page__archivos .container-xl-custom.expo-page__shell,
main.streamfield-page--tabs .streamfield-page__title-shell,
.sf-page.container-xl-custom .expo-page__presentation .container-xl-custom.expo-page__shell,
.sf-page.container-xl-custom .expo-page__archivos .container-xl-custom.expo-page__shell,
.sf-page.container-xl-custom .streamfield-page__title-shell {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Page h1 */
main.streamfield-page .expo-page__text-block > h1 {
  margin: 0 0 1rem;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  color: var(--color-ink);
}

main.streamfield-page--tabs .expo-page__presentation--streamfield-page-title + .expo-page__presentation {
  margin-top: 0 !important;
}

/* Bloque "title" del StreamField (subtítulo suelto en el cuerpo, sin sección propia).
   Sin esta regla hereda el margen por defecto de Bootstrap (0.5rem), muy ajustado
   frente al resto de los títulos de sección del sitio (p. ej. el h2 de "archivos",
   que usa mb-4 = 1.5rem). */
main.streamfield-page h1.section-title {
  margin: 0 0 1.5rem;
}

/* Hero */
main.streamfield-page .expo-page__hero {
  margin: 0;
}
main.streamfield-page .expo-page__hero-image,
main.streamfield-page .expo-page__body-image figure {
  margin: 0;
}
main.streamfield-page .expo-page__hero-image img,
main.streamfield-page .expo-page__body-image img {
  width: 100%;
  height: auto;
}

/* Richtext columns (split_row_text_image, content_card_grid, richtext_one_column) */
main.streamfield-page .expo-page__text-block {
  font-size: 1rem;
  line-height: 1.5;
}
.expo-richtext-flow {
  display: block;
  width: 100%;
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow > * {
  margin: 0 0 0.85rem !important;
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow > *:last-child {
  margin-bottom: 0 !important;
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow h2,
main.streamfield-page .expo-page__text-block .expo-richtext-flow h3,
main.streamfield-page .expo-page__text-block .expo-richtext-flow h4 {
  margin: 0.35rem 0 0.5rem !important;
  font-weight: 500;
  line-height: 1.12;
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow h2 {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow h3 {
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow h4 {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow ul,
main.streamfield-page .expo-page__text-block .expo-richtext-flow ol {
  margin: 0 0 0.85rem !important;
  padding-left: 1.35rem;
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow li + li {
  margin-top: 0.35rem;
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow a {
  text-decoration: underline;
}
main.streamfield-page .expo-page__text-block .expo-richtext-flow hr {
  margin: clamp(0.75rem, 2vw, 1.25rem) 0 !important;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.35;
}

/* Vertical rhythm between stream blocks */
main.streamfield-page--tabs .col-12.d-flex.flex-column.gap-3 {
  gap: 2rem !important;
}
main.streamfield-page--tabs .col-12 > * {
  margin-bottom: 0 !important;
}

/* split_row_text_image lead heading */
main.streamfield-page .mchap-layout-contenidos__split-row--text-image .expo-page__text-block > h2.expo-page__section-title.mchap-layout-contenidos__lead {
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
}
.mchap-layout-contenidos__split-row--text-image .expo-richtext-flow p {
  font-size: 1rem;
  line-height: 1.35;
}
.mchap-layout-contenidos__text-link {
  display: inline-block;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mchap-layout-contenidos__text-link:hover {
  color: var(--color-ink);
}

/* content_card_grid */
main.streamfield-page .mchap-layout-contenidos__card-grid .expo-richtext-flow {
  max-width: 100%;
}
/* Divider lines between cards: bottom border on every card, top border only on the first row. */
.mchap-layout-contenidos__card-grid .mchap-layout-contenidos__card {
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}
.mchap-layout-contenidos__card-grid .col:first-child .mchap-layout-contenidos__card {
  border-top: 1px solid rgba(17, 17, 17, 0.2);
}
/* Miniatura sin recorte (antes `fill-200x140` cortaba las piezas de la colección). Fondo
   blanco quitado con ImageMagick (`-fuzz 8% -transparent`) en las 3 fotos de piezas, así
   flotan directo sobre el fondo de la página sin caja ni recuadro. */
.mchap-layout-contenidos__card-thumb-img {
  display: block;
  width: 180px;
  max-width: 40vw;
  height: auto;
}

/* TableBlock (Wagtail contrib): tabla simple con líneas horizontales, sin verticales,
   encabezado en negrita — mismo estilo que la tabla "Resumen Categorías" del PDF de
   Membresías Corporativas. */
.streamfield-table-wrap { overflow-x: auto; }
.streamfield-table-caption {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
  margin-bottom: 1rem;
}
.streamfield-table {
  width: 100%;
  border-collapse: collapse;
}
.streamfield-table th,
.streamfield-table td {
  padding: 0.75rem 1.25rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  font-size: 1rem;
}
.streamfield-table thead th {
  font-weight: 600;
  border-bottom: 2px solid rgba(17, 17, 17, 0.6);
}
.streamfield-table tbody th {
  font-weight: 600;
  white-space: nowrap;
}
.streamfield-table tbody td {
  font-style: italic;
}

/* LineBlock */
main.streamfield-page .expo-page__line {
  margin: 0 !important;
  padding: clamp(1rem, 2.5vw, 1.5rem) 0 !important;
}
.expo-page__line-wrap {
  display: block;
  width: 100%;
}
.expo-page__line-wrap--w-100 { width: 100%; }
.expo-page__line-wrap--w-75 { width: 75%; }
.expo-page__line-wrap--w-50 { width: 50%; }
.expo-page__line-wrap--w-25 { width: 25%; }
.expo-page__line-wrap--align-left { margin-left: 0; margin-right: auto; }
.expo-page__line-wrap--align-center { margin-left: auto; margin-right: auto; }
.expo-page__line-wrap--align-right { margin-left: auto; margin-right: 0; }
.expo-page__line-rule {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid;
  opacity: 1;
}
.expo-page__line-rule--color-neutral { border-color: #cfcfcf; }
.expo-page__line-rule--color-black { border-color: #111111; }
.expo-page__line-rule--color-terra { border-color: #6e3d2f; }
.expo-page__line-rule--color-coral { border-color: #f37c51; }
.expo-page__line-rule--color-blue { border-color: #3252c4; }
.expo-page__line-rule--color-accent { border-color: #ffd84a; }

/* Archivos block */
.archivos-block__link {
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-ink);
  transition: opacity 0.15s ease;
}
.archivos-block__link:hover {
  opacity: 0.7;
  color: var(--color-ink);
}
.archivos-block__title {
  word-break: break-word;
}

/* Organigrama chart */
.organigrama-root {
  max-width: 100%;
}
.organigrama-chart-wrap {
  position: relative;
  max-width: 100%;
}
.organigrama-fullscreen-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.organigrama-host {
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  width: 100%;
}
.organigrama-host svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.organigrama-chart-wrap--fullscreen {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.organigrama-chart-wrap--fullscreen .organigrama-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  margin-bottom: 0 !important;
}
.organigrama-chart-wrap--fullscreen .organigrama-host svg {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ===================== Header search (button + full-page modal) ===================== */

.header-search-btn {
  border: 0;
  background: transparent;
  color: var(--color-pink);
  margin-left: 1.5rem;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 400;
  white-space: nowrap;
}
.header-search-btn:hover,
.header-search-btn:focus-visible {
  text-decoration: underline;
}
.header-search-btn i {
  margin-right: 0.25rem;
}
.header-search-btn--mobile {
  margin-left: 0;
  color: var(--color-ink);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}
.header-search-btn--mobile i {
  margin-right: 0;
}

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  grid-template-areas: "stack";
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.search-modal[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.search-modal[hidden] {
  display: grid;
  opacity: 0;
  pointer-events: none;
}

.search-modal__backdrop {
  grid-area: stack;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.search-modal__panel {
  grid-area: stack;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.search-modal__header {
  flex: 0 0 auto;
  padding: clamp(16px, 3vw, 28px) 0 12px;
  border-bottom: 1px solid #e5e5e5;
}

.search-modal__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-modal__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-black);
  background: transparent;
  padding: 12px 0 10px;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: var(--color-ink);
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.search-modal__input::placeholder {
  color: #888;
  opacity: 1;
}

.search-modal__input:focus {
  border-bottom-color: var(--color-black);
}

.search-modal__input:focus-visible {
  border-bottom-width: 2px;
  margin-bottom: -1px;
}

.search-modal__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1.25;
}

.search-modal__close:hover,
.search-modal__close:focus-visible {
  opacity: 0.85;
  outline: none;
}

.search-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 0 32px;
}

.search-modal__loading,
.search-modal__hint,
.search-modal__nohits {
  font-size: 1rem;
  color: #555;
  margin: 0 0 16px;
}

.search-modal__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px;
}

@media (max-width: 991.98px) {
  .search-modal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .search-modal__grid {
    grid-template-columns: 1fr;
  }
}

.search-modal__hit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 0 12px;
  border-bottom: 1px solid #e5e5e5;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.2s ease, opacity 0.2s ease;
  min-height: 3.5rem;
}

.search-modal__hit-parent {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
  color: #666;
  letter-spacing: 0.02em;
}

.search-modal__hit-title {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-ink);
}

.search-modal__hit:hover,
.search-modal__hit:focus-visible {
  background-size: 100% 1px;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .search-modal {
    transition: none;
  }

  .search-modal__hit {
    transition: none;
  }
}

/* ===== Ficha de evento (cartelera) ===== */
/* Tipografía medida en el sitio de referencia (WP Event Manager), sin variación
   por ancho de pantalla salvo el título: título 26px/700 mayúsculas en escritorio,
   25px en móvil; cuerpo y sidebar 16px/300; etiquetas de sidebar 16px/700 mayúsculas;
   franja de categoría 15px/400, fondo #f5f5f5 (aquí var(--color-bg-alt)). */
.evento-card {
  background: var(--color-white);
  border: 1px solid #e4e4e4;
}

.evento-hero {
  background: var(--color-bg-alt);
  margin: 0;
}

.evento-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  margin: 0;
}

.evento-hero-caption {
  font-size: 0.8125rem;
  color: var(--color-muted);
  padding: 0.5rem 0.5rem 0;
  margin: 0;
}

.evento-hero-info {
  padding: 2.5rem 2rem;
}

.evento-pill {
  display: inline-block;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  padding: 7px 12px;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.evento-title {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-black);
}

.evento-body {
  padding: 2rem 0 0.5rem;
  margin: 0;
}

.evento-body-main {
  padding: 0 2rem;
}

.evento-body-title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}

.evento-byline {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-muted);
  margin-bottom: 1.25rem !important;
}

.evento-body-main p,
.evento-body-main ul,
.evento-body-main ol,
.evento-sidebar p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.42;
  color: var(--color-ink);
}

.evento-body-main ul,
.evento-body-main ol,
.evento-program-list {
  padding-left: 1.25rem;
}

.evento-body-main li,
.evento-program-list li {
  margin-bottom: 0.5rem;
}

.evento-body-main .evento-cta.btn-pill-dark {
  max-width: none;
  width: auto;
  white-space: nowrap;
  font-size: 16px;
  margin: 1rem 0 1.5rem;
}

.evento-amigos-note {
  background: var(--color-bg-alt);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.evento-sidebar {
  border-left: 1px solid #e4e4e4;
  padding-left: 2rem;
  padding-right: 2rem;
}

.evento-sidebar a,
.evento-amigos-note a {
  color: inherit;
  text-decoration: underline;
}

.evento-sidebar h3 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 1.5rem 0 0.5rem;
}

.evento-sidebar h3:first-child {
  margin-top: 0;
}

.evento-datetime i {
  margin-right: 0.4rem;
  font-size: 0.85em;
}

.evento-type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.evento-type-tag {
  display: inline-block;
  background: var(--color-bg-alt);
  color: var(--color-ink);
  font-size: 14px;
  padding: 0.3rem 0.75rem;
  border-radius: 3px;
}

.evento-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.evento-share-label {
  font-size: 1.375rem;
  font-weight: 500;
}

.evento-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.evento-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 45px;
  padding: 0 1.1rem;
  color: var(--color-white) !important;
  font-size: 16px;
  font-weight: 200;
}

.evento-share-btn i {
  font-size: 16px;
}

.evento-share-btn:hover {
  color: var(--color-white) !important;
  opacity: 0.85;
}

.evento-share-facebook { background: #3b5998; }
.evento-share-twitter { background: #1da1f2; }
.evento-share-whatsapp { background: #25d366; }
.evento-share-email { background: #ea4335; }

.evento-pager {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 3rem;
}

.evento-pager a {
  color: var(--color-ink);
}

@media (max-width: 767px) {
  .evento-title {
    font-size: 1.5rem;
  }

  .evento-sidebar {
    border-left: none;
    border-top: 1px solid #e5e5e5;
    padding-left: 0;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
  }

  .evento-body-main {
    padding-right: 0;
  }
}

/* Publicaciones: "Catálogos de Exposiciones" — grilla de portadas (portada → PDF, título, año).
   Medido en la referencia (getComputedStyle real, no a ojo): título 22px/400, line-height 22px
   (igual al font-size, sin interlineado extra); año 22px/400, line-height 33px; texto de la tarjeta
   alineado a la izquierda; portada a ancho de columna (aspecto natural). Título del encabezado (h1) 35px/600 a 1920px, baja a
   24px/600 por debajo de ~1440px (breakpoint propio de Elementor, no de Bootstrap). */
.pub-cat-page { padding-bottom: 2rem; }
.pub-cat-title-main {
  color: var(--color-black);
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 1.5rem;
}
@media (min-width: 1920px) {
  .pub-cat-title-main { font-size: 35px; line-height: 35px; }
}
/* Las portadas tienen relaciones de aspecto muy dispares (0.58 a 2.94 en Catálogos de
   Exposiciones). Sin alto fijo/hardcodeado: la caja envuelve la imagen a su tamaño real
   (object-fit: contain sólo por si el ancho intrínseco supera los 520px del render), así
   que cada portada queda arriba (no hay hueco que rellenar) y el título va pegado justo
   debajo de su propia imagen, sea cual sea la proporción. */
.pub-cat-card { text-align: left; margin-bottom: 2rem; }
.pub-cat-cover-box {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.pub-cat-cover { max-width: 100%; width: auto; height: auto; object-fit: contain; }
/* La referencia pasa a 4 columnas a 1025px (breakpoint de escritorio de Elementor),
   no a 992px (lg de Bootstrap). Override escopado a esta grilla. */
@media (min-width: 1025px) {
  .pub-cat-grid > .col { flex: 0 0 auto; width: 25%; }
}
.pub-cat-title {
  display: block;
  color: var(--color-ink);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 22px;
  margin-top: 0.3rem;
  margin-bottom: 0;
}
/* Más aire entre portada y texto en Catálogos, Colección Santander y Otras publicaciones
   (no en ArtEncuentro). */
.pub-cat-page--roomy .pub-cat-title { margin-top: 1rem; }
.pub-cat-title:hover { text-decoration: underline; }
.pub-cat-year {
  color: var(--color-ink);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 33px;
}
/* Subtítulo "ArtEncuentro N°X" entre título y año (Serie ArtEncuentro). Medido en la
   referencia: 12px/400, interlineado 18px, "ArtEncuentro" en cursiva, el número no. */
.pub-cat-issue { font-size: 12px; font-weight: 400; line-height: 18px; color: var(--color-ink); }
.pub-cat-issue em { font-style: italic; }
/* Paginación (medida en la referencia): píldoras de 33px de alto, radio 10px, 13px de texto,
   página activa negra/blanca en 600, inactivas gris (121,121,121)/blanca en 400. */
.pub-cat-pagination {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 2rem;
}
.pub-cat-pagination a,
.pub-cat-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  height: 33px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 13px;
  text-decoration: none;
}
.pub-cat-pagination span.current {
  background: #000;
  color: #fff;
  font-weight: 600;
}
.pub-cat-pagination a {
  background: rgb(121, 121, 121);
  color: #fff;
  font-weight: 400;
}
.pub-cat-pagination a:hover { background: #000; color: #fff; }

/* =========================================================
   Noticias — listado (noticias.html) y artículo (noticia-articulo.html)
   Medido en https://museo.precolombino.cl/noticias/ y en un artículo real.
   ========================================================= */

.noticias-list {
  padding: 2.5rem 0 4rem;
}

.noticias-list-header {
  margin-bottom: 2rem;
}

/* "Noticias & Actividades": 32px/48px peso 700 (medido, es un <strong>, no un h1 real en el original). */
.noticias-list-header .section-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  color: var(--color-ink);
}

@media (max-width: 575.98px) {
  .noticias-list-header .section-title {
    font-size: 26px;
    line-height: 34px;
  }
}

.noticia-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  border: 1px solid #e9e9e9;
}

.noticia-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
div.noticia-card-img {
  background-color: #e9e9e9;
}

.noticia-card-body {
  flex: 1 1 auto;
  padding: 1.25rem 1.25rem 0;
}

/* Título de tarjeta: 21px/27.3px (medido; sin mayúsculas por pedido explícito). */
.noticia-card-title {
  font-size: 21px;
  font-weight: 400;
  line-height: 27.3px;
  color: var(--color-black);
  margin-bottom: 0.75rem;
}

.noticia-card:hover .noticia-card-title {
  color: var(--color-pink);
}

/* Extracto: 17px/25.5px, gris (medido). */
.noticia-card-excerpt {
  font-size: 17px;
  line-height: 25.5px;
  color: #777777;
  margin-bottom: 1rem;
}

/* "Leer más »": 12px/18px, negrita, uppercase (medido). */
.noticia-card-readmore {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 1.25rem;
}

/* Fecha: franja inferior separada por una línea, 12px gris claro (medido). */
.noticia-card-date {
  border-top: 1px solid #e9e9e9;
  padding: 0.75rem 1.25rem;
  font-size: 12px;
  line-height: 15.6px;
  color: #adadad;
}

.noticias-pagination .page-link,
.cartelera-pagination .page-link {
  color: var(--color-ink);
  border: none;
  background: transparent;
}
.noticias-pagination .page-item.active .page-link,
.cartelera-pagination .page-item.active .page-link {
  font-weight: 700;
  color: var(--color-black);
}
.noticias-pagination .page-item.disabled .page-link,
.cartelera-pagination .page-item.disabled .page-link {
  color: #adadad;
}

/* --- Artículo individual --- */

.noticia-articulo {
  padding: 2.5rem 0 3rem;
}

.noticia-hero {
  margin-bottom: 2.5rem;
}

.noticia-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
div.noticia-hero-img {
  background-color: #e9e9e9;
}

/* Fecha sobre el título: 16px/24px (medido). */
.noticia-date {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}

/* Título: 36px/50.4px peso 700 (medido; sin mayúsculas por pedido explícito). */
.noticia-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 50.4px;
  color: var(--color-ink);
}

.noticia-body {
  max-width: 100%;
}

/* Cuerpo a ancho completo, un párrafo por línea; 21px/31.5px peso 300 (medido). */
.noticia-body p {
  font-size: 21px;
  font-weight: 300;
  line-height: 31.5px;
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}

.noticia-body em {
  font-style: italic;
}

/* Subtítulos de sección: 20px/23px peso 700 (medido). */
.noticia-body h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 23px;
  color: var(--color-black);
  margin: 2rem 0 1rem;
}

.noticia-figure {
  margin: 2rem 0;
}
.noticia-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.noticia-figure figcaption {
  font-size: 0.85rem;
  color: #777777;
  text-align: center;
  margin-top: 0.5rem;
}

.noticia-credit {
  font-size: 0.85rem;
  color: var(--color-muted);
  border-top: 1px solid #e9e9e9;
  padding-top: 1rem;
  margin-top: 2rem;
}

/* "Compartir:" 22px/22px peso 500 (medido, es un h4 en el original). */
.noticia-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 2rem 0;
}
.noticia-share-label {
  font-size: 22px;
  font-weight: 500;
  line-height: 22px;
}
.noticia-share a {
  color: var(--color-ink);
}
.noticia-share a:hover {
  color: var(--color-pink);
}

/* Anterior / Siguiente: 16px/24px peso 400 (medido). */
.noticia-nav {
  border-top: 1px solid #e9e9e9;
  padding-top: 1rem;
}
.noticia-nav a {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-ink);
}
.noticia-nav a:hover {
  color: var(--color-pink);
}

/* Artículos relacionados: tarjetas del listado de noticias al pie del artículo. */
.noticia-related {
  margin-top: 3rem;
}
.noticia-related-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}

/* --- Contenido importado (HTML crudo de WordPress dentro de .noticia-body) ---
   El scraper conserva <figure>/<figcaption "suelta">/<hr>, sin las clases
   noticia-figure/noticia-credit de la referencia estática. Se estilizan por
   selector genérico dentro de .noticia-body. */
/* El <figure> se ajusta al ancho real de su imagen (no al 100% de .noticia-body),
   para que el <figcaption> —bloque, hijo directo— no quede más ancho que la foto
   que describe. */
.noticia-body figure {
  margin: 2rem auto;
  width: fit-content;
  max-width: 100%;
}
/* Red de seguridad: cualquier <img> del HTML importado, con o sin <figure>,
   trae sus propios width/height (a veces miles de px) — sin esto se desborda.
   Sin forzar width:100%: así una imagen ya angosta a propósito (por atributo
   HTML o por estilo en línea del propio WordPress) no se estira de más, y el
   figure que la envuelve puede encogerse a su ancho real. */
div.noticia-body img {
  max-width: 100%;
  height: auto;
  display: block;
}
.noticia-body iframe,
.noticia-body .wp-block-embed,
.noticia-body .wp-block-embed__wrapper,
.noticia-body .noticia-responsive-embed {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.noticia-body figure img {
  margin: 0 auto;
}
/* width:0 + min-width:100% saca al figcaption del cálculo de ancho del figure
   (width:fit-content): un texto largo sin cortes de línea es "ancho" para ese
   cálculo y estiraba el figure (y la foto) más que la imagen real. Con esto el
   figcaption no aporta su propio ancho preferido; sólo hereda el que ya fijó
   la imagen. */
.noticia-body figcaption {
  font-size: 0.85rem;
  color: #777777;
  text-align: center;
  margin-top: 0.5rem;
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
}
/* WordPress deja el tamaño intencional en la clase del contenedor
   (res-img-40/60/70/80 = % de ancho, centrado) — respetarlo en vez de forzar 100%.
   Va en el div contenedor, no en el <img>, para que el figure/figcaption de adentro
   se ajusten junto con la imagen. */
.noticia-body .res-img-40 { width: 40%; margin-left: auto; margin-right: auto; }
.noticia-body .res-img-60 { width: 60%; margin-left: auto; margin-right: auto; }
.noticia-body .res-img-70 { width: 70%; margin-left: auto; margin-right: auto; }
.noticia-body .res-img-80 { width: 80%; margin-left: auto; margin-right: auto; }
.noticia-body [class*="res-img-"] img {
  width: 100%;
}
.noticia-body p.has-text-align-center {
  font-size: 0.85rem;
  color: #777777;
  text-align: center;
  margin-top: -1rem;
  margin-bottom: 2rem;
}
.noticia-body hr {
  border: none;
  border-top: 1px solid #e9e9e9;
  margin: 2rem 0 1rem;
}
.noticia-body p.has-small-font-size:not(.has-text-align-center) {
  font-size: 0.85rem;
  color: var(--color-muted);
}
.noticia-raw-html {
  margin: 2rem 0;
}

/* Bloque «Botones» de WordPress (wp-block-buttons) en el HTML importado: mínimo de
   wp-includes/css/dist/block-library/style.min.css + las clases de color usadas. */
.noticia-body .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin: 1.5rem 0;
}
.noticia-body .wp-block-buttons.is-content-justification-center {
  justify-content: center;
}
.noticia-body .wp-block-button__width-25 {
  width: calc(25% - 0.375em);
}
.noticia-body .wp-block-button.has-custom-width .wp-block-button__link {
  width: 100%;
}
.noticia-body .wp-block-button__link {
  display: inline-block;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  border-radius: 9999px;
  background-color: #32373c;
  color: #fff;
  font-size: 1.125em;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
}
.noticia-body .wp-block-button__link:hover,
.noticia-body .wp-block-button__link:focus {
  color: #fff;
  opacity: 0.85;
}
.noticia-body .wp-block-button__link.has-black-background-color {
  background-color: #000;
}
.noticia-body .wp-block-button__link.has-white-color {
  color: #fff;
}

/* Bloques compartidos (home/blocks) reutilizados dentro del artículo. */
.sf-gallery {
  margin: 2rem 0;
}
.sf-gallery-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 1rem;
}
.sf-gallery-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.sf-two-col {
  margin: 2rem 0;
}
.sf-two-col-body p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink);
}

/* --- Artículos importados como HTML de Elementor sin procesar (caso "art-in-patterns") ---
   El scraper detecta este patrón y marca el bloque con noticias-elementor-body /
   news-article__speakers-grid; se estiliza el mínimo necesario para que no se desborde. */
.noticia-body [class*="wptb-table-container"] {
  overflow-x: auto;
  max-width: 100%;
}
.noticia-body [class*="wptb-table-container"] table {
  min-width: 700px;
}
/* .noticia-body p fija color/tamaño en el <p>; el HTML original pinta la fila de
   encabezado por herencia (color en el <div> contenedor, no en el <p>), así que
   nuestra regla ganaba y el texto blanco quedaba negro sobre negro. Se restaura
   la herencia dentro de celdas de tabla. */
.noticia-body [class*="wptb-table-container"] td p,
.noticia-body [class*="wptb-table-container"] th p {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin-bottom: 0;
}
.noticia-body .news-article__speakers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}
.noticia-body .eael-team-item {
  text-align: center;
}
.noticia-body .eael-team-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
/* Alguna ficha del scraping original no trae imagen (figure vacío en la fuente):
   placeholder neutro para que la grilla no se descuadre. */
.noticia-body .eael-team-image figure {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #e0e0e0;
  margin: 0 auto;
}
.noticia-body .eael-team-member-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0;
}
.noticia-body .eael-team-member-position {
  font-size: 0.9rem;
  color: var(--color-muted);
}
.noticia-body .eael-team-text {
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: left;
}
/* El sitio original mostraba una de estas 3 variantes según el ancho de pantalla
   (banner responsive); el scraper las dejó las 3 como <img> sueltas y seguidas.
   Se muestra sólo la de escritorio, que es la de mayor resolución. */
.noticia-body img[src*="_tablet"],
.noticia-body img[src*="_mobile"] {
  display: none;
}


/* ==========================================================================
   América Precolombina en el Arte — exposición permanente (3 niveles)
   Colores medidos en el sitio de referencia, propios de esta exposición
   (no son los colores de marca del resto del sitio).
   ========================================================================== */

:root {
  --ap-terracota: #a46127;
  --ap-marron: #6f3d26;
}

/* Título de la portada de la exposición, ancho completo. Medido en el sitio de
   referencia: 31px, familia "brandon_grotesquebold" en weight 400 — en esta base
   esa familia bold vive en el mismo "Brandon Grotesque" bajo weight 700 (ver
   @font-face arriba), así que se reproduce con weight 700 acá. */
.ap-hero-title {
  color: var(--color-ink);
  text-transform: uppercase;
  font-size: 31px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.ap-hero__tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.ap-tabs {
  display: flex;
  gap: 1.75rem;
  border: 0;
}
.ap-tabs .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-ink);
  font-size: 1rem;
}
.ap-tabs .nav-link.active {
  color: var(--ap-terracota);
}
.ap-tabs .nav-link:hover {
  color: var(--ap-terracota);
}

.ap-hero__pdf {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}
.ap-hero__pdf:hover {
  color: var(--color-pink);
  text-decoration: underline;
}

/* Tarjetas del mosaico: la franja del título es semitransparente y, al pasar
   el mouse, sube a cubrir la imagen completa revelando la bajada (medido en
   el sitio de referencia: overlay a bottom:-138px en reposo, bottom:0 al
   hover, fondo #111 a 70% de opacidad). */
.ap-mosaic-card {
  position: relative;
  display: block;
  overflow: hidden;
  color: inherit;
}
.ap-mosaic-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ap-mosaic-card__overlay {
  position: absolute;
  inset: 0;
  top: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 1.25rem;
  background: rgba(17, 17, 17, 0.7);
  transform: translateY(calc(100% - 4.5rem));
  transition: transform 0.25s ease;
}
.ap-mosaic-card:hover .ap-mosaic-card__overlay,
.ap-mosaic-card:focus-visible .ap-mosaic-card__overlay {
  transform: translateY(0);
}
.ap-mosaic-card__title {
  color: var(--color-white);
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
  margin-bottom: 0.75rem;
}
.ap-mosaic-card__desc {
  color: #ccc;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ap-mosaic-card:hover .ap-mosaic-card__desc,
.ap-mosaic-card:focus-visible .ap-mosaic-card__desc {
  opacity: 1;
  transition-delay: 0.1s;
}

.ap-mapa__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ap-mapa__list li {
  border-top: 1px solid #e9e9e9;
  padding: 0.9rem 0;
}
.ap-mapa__list li:last-child {
  border-bottom: 1px solid #e9e9e9;
}
.ap-mapa__list h3 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.ap-mapa__list h3 a {
  color: var(--color-ink);
}
.ap-mapa__list h3 a:hover {
  color: var(--ap-terracota);
}
.ap-mapa__list p {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 0;
}

.ap-mapa__image {
  position: relative;
}
.ap-mapa__sprite {
  position: absolute;
  inset: 0;
  background-image: url("../img/america-precolombina/mapa-sprite.png");
  background-repeat: no-repeat;
  background-size: 100% 700%;
  background-position: 0% 0%;
  /* Sin transition: es un spritesheet de 7 cuadros apilados verticalmente —
     animar background-position paneraría visualmente por los cuadros
     intermedios (ver otras áreas resaltadas de paso) al saltar entre dos
     áreas no vecinas. El cambio de cuadro debe ser instantáneo. */
}
.ap-mapa__hit {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}
.ap-mapa__image map area {
  cursor: pointer;
}

.ap-mapa__list li {
  transition: background-color 0.15s ease-out;
}
.ap-mapa__list li.is-active {
  background-color: var(--color-bg-alt);
}
.ap-mapa__list li.is-active h3 a {
  color: var(--ap-terracota);
}

/* Título de área en el listado de vitrinas (categoría). Reutiliza .section-title,
   sólo cambia el color respecto del listado genérico (negro).
   Selector compuesto a propósito: „.expo-list .section-title" (2 clases) empataría o
   ganaría por especificidad a un `.section-title--area` suelto (1 clase) y el título
   se quedaría negro pese a esta regla — bug preexistente que afectaba también a
   `america_pre_category_page.html`, detectado al portar Culturas americanas. */
.section-title.section-title--area {
  color: var(--ap-terracota);
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
}

.ap-vitrina {
  padding: 2.5rem 0 4rem;
}

/* Enlace "Área" / "Área <Nombre>" a la categoría, arriba del todo. */
.ap-vitrina__area {
  display: block;
  color: var(--ap-terracota);
  text-transform: uppercase;
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.ap-vitrina__area:hover {
  color: var(--ap-marron);
}

.ap-vitrina__title-box {
  background: var(--ap-marron);
  color: var(--color-white);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.ap-vitrina__title-box span {
  text-transform: uppercase;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}

.ap-vitrina__sub-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

.ap-pieza-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}
.ap-pieza-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ap-vitrina__carousel .carousel-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 220;
  object-fit: cover;
}

.ap-vitrina__body {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-ink);
  margin-bottom: 2rem;
}

.ap-vitrina__culturas {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ap-vitrina__culturas li {
  border-top: 1px solid #e9e9e9;
  padding: 0.6rem 0;
  font-weight: 700;
  color: var(--color-black);
}
.ap-vitrina__culturas li:last-child {
  border-bottom: 1px solid #e9e9e9;
}
.ap-vitrina__culturas a {
  color: inherit;
  text-decoration: none;
}
.ap-vitrina__culturas a:hover {
  color: var(--ap-terracota);
  text-decoration: underline;
}

.ap-pieza-modal {
  padding: 1.5rem;
}
.ap-pieza-modal .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.ap-pieza-modal__ficha {
  margin: 1rem 0;
}
.ap-pieza-modal__ficha div {
  display: flex;
  gap: 0.5rem;
  border-top: 1px solid #e9e9e9;
  padding: 0.4rem 0;
}
.ap-pieza-modal__ficha dt {
  min-width: 7rem;
  font-weight: 600;
}
.ap-pieza-modal__ficha dd {
  margin: 0;
}

/* ==========================================================================
   Culturas americanas — ficha de cultura (CulturePage)
   Reutiliza .ap-vitrina__area / .ap-vitrina__title-box / .ap-pieza-thumb /
   .ap-vitrina__sub-title de la exposición permanente. Color de la caja
   medido en el sitio de referencia: #4d3647, fijo para toda la sección
   "Culturas americanas" (no varía por cultura).
   ========================================================================== */

.ap-cultura__title-box {
  background: #4d3647;
}

.ap-cultura__tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.ap-cultura__tabs li {
  border-top: 1px solid #e9e9e9;
}
.ap-cultura__tabs li:last-child {
  border-bottom: 1px solid #e9e9e9;
}
.ap-cultura__tabs a {
  display: block;
  padding: 0.6rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-muted);
}
.ap-cultura__tabs li.active a {
  color: var(--color-black);
}
.ap-cultura__tabs a:hover {
  color: var(--ap-terracota);
}

.ap-cultura__hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 220;
  object-fit: cover;
}

.ap-cultura__tab-pane {
  display: none;
}
.ap-cultura__tab-pane.active {
  display: block;
}
.ap-cultura__tab-pane h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.ap-cultura__tab-pane p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-ink);
}

.ap-cultura__footer {
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: 1px solid #e9e9e9;
}

.ap-cultura__ver-todas {
  display: inline-block;
  font-weight: 700;
  color: var(--color-black);
}
.ap-cultura__ver-todas:hover {
  color: var(--ap-terracota);
}

.ap-cultura__map,
.ap-cultura__periodo {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Arriendo de espacios — texto de servicios especiales en 2 columnas.
   ========================================================================== */
.arriendo-services-columns {
  columns: 2;
  column-gap: 2.5rem;
}
.arriendo-services-columns p {
  break-inside: avoid;
}
@media (max-width: 767.98px) {
  .arriendo-services-columns {
    columns: 1;
  }
}

/* ==========================================================================
   Bloques StreamField portados a jul26: image, video, quote, richtext 2 col.
   Escopados a su propia clase (no a `main.streamfield-page`) para que se vean
   igual en `.sf-page`, en `.tabs-page` y dentro de un artículo de noticias.
   ========================================================================== */

/* --- image ------------------------------------------------------------- */
.sf-figure {
  margin: 2rem 0;
}
.sf-figure__img {
  display: block;
  width: 100%;
  height: auto;
}
/* "Tamaño original": no estirar por encima del ancho real del archivo, pero
   seguir bajando de tamaño si la columna es más angosta. */
.sf-figure--natural {
  width: fit-content;
  margin-inline: auto;
}
.sf-figure--natural .sf-figure__img {
  width: auto;
  max-width: 100%;
}
.sf-figure__caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #777777;
  text-align: center;
}

/* --- video ------------------------------------------------------------- */
.sf-video {
  margin: 2rem 0;
}
.sf-video__frame {
  border: 0;
}
.sf-video__meta {
  margin-top: 1rem;
}
.sf-video__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-ink);
}
.sf-video__duration {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* --- quote ------------------------------------------------------------- */
.sf-quote {
  margin: 2.5rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--color-pink);
}
.sf-quote__text {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--color-ink);
}
.sf-quote__text::before {
  content: "\00AB";
}
.sf-quote__text::after {
  content: "\00BB";
}
.sf-quote__attribution {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-muted);
}
.sf-quote__attribution::before {
  content: "\2014\00A0";
}

/* --- richtext 2 columnas ----------------------------------------------- */
.sf-two-cols {
  margin: 2rem 0;
}
.sf-two-cols--align-center {
  text-align: center;
}
.sf-two-cols--align-right {
  text-align: right;
}
/* Primer titular de cada columna al ras del borde superior del bloque. */
.sf-two-cols__col > .expo-richtext-flow > :first-child {
  margin-top: 0;
}
.sf-two-cols__col > .expo-richtext-flow > :last-child {
  margin-bottom: 0;
}

/* --- visor de PDF (includes/pdf_modal.html + main.js) ------------------ */
.pdf-modal .modal-dialog {
  max-width: min(1200px, calc(100vw - 2rem));
}
.pdf-modal .modal-content {
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.pdf-modal__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border-bottom: 1px solid #e5e5e5;
}
.pdf-modal__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdf-modal__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.pdf-modal__download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-black);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.pdf-modal__download:hover,
.pdf-modal__download:focus-visible {
  background: var(--color-pink);
  color: var(--color-white);
}
.pdf-modal__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-size: 1.125rem;
  text-decoration: none;
}
.pdf-modal__icon-btn:hover,
.pdf-modal__icon-btn:focus-visible {
  color: var(--color-pink);
}
.pdf-modal__body {
  height: calc(100vh - 8rem);
  background: #525659;
}
.pdf-modal__body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------
   Páginas de error (400, 404, 500) — includes/error_message.html.
   El tope de 210px de .btn-pill-dark (responsive.css) parte
   «Volver al inicio» en dos líneas.
   --------------------------------------------------------- */
.error-page .btn-pill-dark {
  max-width: none;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   Art in Patterns (templates/staticpages/art-in-patterns.html).
   Base .edu-*; aquí sólo encabezado, tabla de programa y fichas de expositores.
   --------------------------------------------------------- */
.aip-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.aip .aip-kicker {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.aip .aip-dates {
  color: var(--color-muted);
}
.aip-program {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 1rem;
}
.aip-program th,
.aip-program td {
  border: 1px solid color-mix(in srgb, var(--color-muted) 30%, var(--color-white));
  padding: 0.75rem 1rem;
  vertical-align: top;
}
.aip-program thead th {
  background: var(--color-bg-alt);
  font-weight: 700;
  text-align: center;
}
.aip-program tbody th {
  white-space: nowrap;
  font-weight: 700;
  color: var(--color-muted);
}
.aip-speaker {
  height: 100%;
  background: var(--color-bg);
  padding: 1.5rem;
}
.aip-speaker-photo {
  display: block;
  width: 9rem;
  height: 9rem;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1rem;
}
.aip-speaker-photo--empty {
  background: color-mix(in srgb, var(--color-muted) 20%, var(--color-white));
}
.aip-speaker-name {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.75rem;
}
.aip .aip-speaker-bio {
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 0;
}