/**
 * Componentes para las páginas ODS de la Universidad del Azuay.
 *
 * Todo está bajo el contenedor .ods para no chocar con slick (main.css fija
 * tamaños y colores globales en p, h1-h5 y ul li). El color del ODS sale de
 * data-ods="1..17" en el contenedor; --ods es el color oficial del ODS y se usa
 * en todo (también en textos y títulos mediante --ods-ink).
 */

/* ---------- Tokens ---------- */
.ods {
  --ods: #ff3a21;
  /* Mismo color oficial del ODS para textos, títulos y enlaces */
  --ods-ink: var(--ods);
  --ods-tint: color-mix(in srgb, var(--ods) 9%, #fff);
  --ods-tint-2: color-mix(in srgb, var(--ods) 22%, #fff);
  --ink: #1f2a37;
  --sub: #666666;
  --muted: #5b6673;
  --rule: #e3e6ea;
  --paper: #ffffff;
  --wash: #f6f7f9;
  --font: "Century Gothic", CenturyGothic, "Futura Bk BT", "AppleGothic", "Avenir", sans-serif;
  --font-strong: "Century Gothic", CenturyGothic, "Futura Hv BT", "AppleGothic", "Avenir", sans-serif;
  /* Ancho máximo del texto (ods-prose, documentos, cronología, notas).
     none = ocupa todo el ancho del contenido. */
  --measure: none;
  --radius-photo: 18px;
  --radius-thumb: 12px;

  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  background: var(--paper);
  /* Espacio para el menú fijo del tema; lo calcula ods.js (0 si no hay menú fijo) */
  padding-top: var(--ods-offset, 0px);
  -webkit-font-smoothing: antialiased;
}
.ods[data-ods="1"]  { --ods: #e5243b; }
.ods[data-ods="2"]  { --ods: #dda63a; }
.ods[data-ods="3"]  { --ods: #4c9f38; }
.ods[data-ods="4"]  { --ods: #c5192d; }
.ods[data-ods="5"]  { --ods: #ff3a21; }
.ods[data-ods="6"]  { --ods: #26bde2; }
.ods[data-ods="7"]  { --ods: #fcc30b; }
.ods[data-ods="8"]  { --ods: #a21942; }
.ods[data-ods="9"]  { --ods: #fd6925; }
.ods[data-ods="10"] { --ods: #dd1367; }
.ods[data-ods="11"] { --ods: #fd9d24; }
.ods[data-ods="12"] { --ods: #bf8b2e; }
.ods[data-ods="13"] { --ods: #3f7e44; }
.ods[data-ods="14"] { --ods: #0a97d9; }
.ods[data-ods="15"] { --ods: #56c02b; }
.ods[data-ods="16"] { --ods: #00689d; }
.ods[data-ods="17"] { --ods: #19486a; }

/* ---------- Reset local (neutraliza slick/bootstrap dentro de .ods) ---------- */
.ods *, .ods *::before, .ods *::after { box-sizing: border-box; }
.ods h1, .ods h2, .ods h3, .ods h4, .ods h5 {
  margin: 0;
  font-family: var(--font-strong);
  font-weight: 700;
  color: inherit;
  letter-spacing: -0.01em;
}
.ods p {
  margin: 0 0 1em;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.ods ul, .ods ol { margin: 0 0 1em; padding-left: 1.25em; }
.ods ul li { list-style: disc; }
.ods ol li { list-style: decimal; }
.ods li + li { margin-top: .35em; }
.ods li::marker { color: var(--ods-ink); }
/* Enlaces: texto negro con subrayado del color del ODS, como en el resto del sitio */
.ods a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ods); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ods a:hover, .ods a:focus { color: var(--ink); text-decoration-thickness: 2px; }
.ods a:focus-visible, .ods button:focus-visible, .ods summary:focus-visible, .ods [tabindex]:focus-visible {
  outline: 3px solid var(--ods-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.ods img { max-width: 100%; height: auto; }
.ods strong { font-family: var(--font-strong); font-weight: 700; }
/* Un strong dentro de un enlace no se pone en negrita: toma el peso del enlace */
.ods a strong { font-family: inherit; font-weight: inherit; }
/* En listas anidadas (sub-viñetas) el strong tampoco va en negrita */
.ods li li strong { font-family: inherit; font-weight: inherit; }
.ods .ods-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Franja de los 17 ODS ---------- */
.ods-strip {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 44px;
}
.ods .ods-strip { margin: 0; padding: 0; }
.ods .ods-strip li { list-style: none; margin: 0; flex: 1 1 0; min-width: 0; transition: flex-grow .35s ease; }
.ods-strip a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 6px;
  color: #fff;
  font-family: var(--font-strong);
  font-weight: 700;
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  justify-content: center;
}
.ods .ods-strip a { color: #fff; text-decoration: none; }
.ods-strip a:hover { filter: brightness(1.08); }
/* Nombre del ODS: oculto y se despliega con animación al pasar el cursor
   (o con el foco del teclado). El ODS actual lo muestra siempre. */
.ods-strip a span {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  text-overflow: ellipsis;
  vertical-align: bottom;
  transition: max-width .35s ease, margin-left .35s ease, opacity .25s ease .1s;
}
.ods .ods-strip li:hover, .ods .ods-strip li:focus-within { flex-grow: 7; }
.ods-strip li:hover a span, .ods-strip li:focus-within a span { max-width: 22em; margin-left: .6em; opacity: 1; }
.ods .ods-strip [aria-current="page"] { flex: 0 0 auto; }
.ods-strip [aria-current="page"] a { justify-content: flex-start; padding: 0 14px; font-size: .9rem; }
.ods-strip [aria-current="page"] a span { max-width: none; margin-left: .6em; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ods .ods-strip li, .ods-strip a span { transition: none; }
}

/* ---------- Miga de pan (Inicio · ODS) ---------- */
.ods-breadcrumb { max-width: 1180px; margin: 0 auto; padding: 18px 20px 0; font-size: .85rem; color: var(--muted); }
.ods .ods-breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.ods .ods-breadcrumb li { list-style: none; margin: 0; }
.ods .ods-breadcrumb li + li::before { content: "·"; margin: 0 8px; color: var(--ink); font-weight: 700; }
.ods .ods-breadcrumb a { color: var(--muted); }
.ods .ods-breadcrumb a:hover { color: var(--ink); }
.ods .ods-breadcrumb [aria-current="page"] { color: var(--ink); }

/* ---------- Encabezado del ODS ---------- */
.ods-hero {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: end;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 20px clamp(24px, 4vw, 40px);
}
.ods-tile {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--ods);
  color: #fff;
}
.ods-tile b {
  font-family: var(--font-strong);
  font-size: clamp(4rem, 9vw, 6.5rem);
  line-height: .85;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.ods-tile small { font-size: .78rem; line-height: 1.25; font-weight: 700; }
.ods-hero__kicker { margin: 0 0 .4rem; color: var(--sub); font-weight: 700; }
.ods .ods-hero h1 {
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1.02;
  color: var(--ods-ink);
  letter-spacing: -0.03em;
  margin-bottom: .5rem;
}
.ods .ods-hero__lead { max-width: 40rem; margin: 0; font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--muted); }

/* ---------- Cifras de investigación ---------- */
.ods-band {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
/* Tarjetas separadas, como ods5-card-link del ejemplo del cliente */
/* Las tarjetas se reparten el ancho de la fila, sea cual sea su número */
.ods-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.ods .ods-cards > .ods-card { flex: 1 1 240px; }
/* Por posición: 2 tarjetas arriba y la tercera abajo a todo el ancho (se repite cada 3) */
.ods .ods-cards > .ods-card:nth-child(3n) { flex-basis: 100%; min-height: 0; }
.ods .ods-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 10px 28px rgba(27, 44, 70, .06);
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ods a.ods-card:hover, .ods a.ods-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--ods-tint-2);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--ods-ink) 14%, transparent);
  color: var(--ink);
}
.ods-card b {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-strong);
  font-size: 3rem;
  line-height: 1;
  color: var(--ods-ink);
  font-variant-numeric: tabular-nums;
}
.ods-card__title { display: block; font-family: var(--font-strong); font-weight: 700; font-size: 1.05rem; line-height: 1.3; margin-bottom: 3px; }
.ods-card small { display: block; color: var(--muted); }
.ods-card em { margin-top: auto; padding-top: 18px; font-style: normal; font-weight: 700; font-size: .88rem; color: var(--ods-ink); }
.ods-card[target="_blank"] em::after { content: " ↗"; }
@media (prefers-reduced-motion: reduce) {
  .ods .ods-card { transition: none; }
  .ods a.ods-card:hover, .ods a.ods-card:focus-visible { transform: none; }
}

/* ---------- Layout ---------- */
.ods-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) 20px 80px;
}

.ods-main { min-width: 0; }

/* ---------- Grupos e indicadores ---------- */
.ods-section { margin: 0 0 56px; }
.ods .ods-section > h2 {
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  /* Título de sección en el color del ODS (rojo en el ODS 5) */
  color: var(--ods-ink);
  font-weight: 500;
}
.ods .ods-section > h2 + p { color: var(--muted); max-width: var(--measure); }

.ods-block { padding: 32px 0 8px; scroll-margin-top: calc(var(--ods-offset, 0px) + 20px); }
.ods-section { scroll-margin-top: calc(var(--ods-offset, 0px) + 20px); }
.ods-block + .ods-block { border-top: 1px solid var(--rule); }
.ods .ods-block > h3 {
  margin-bottom: 14px;
  font-size: clamp(1.17rem, 2vw, 1.4rem);
  line-height: 1.25;
  color: var(--ink);
  font-weight: 500;
}
.ods .ods-block h4 {
  margin: 28px 0 8px;
  /* Cliente: subtítulo 12 pt, gris oscuro 3, negrita */
  font-size: 1.05rem;
  color: var(--sub);
}
.ods-prose { max-width: var(--measure); }
@media (min-width: 768px) {
  .ods-prose p, .ods-prose li { hyphens: auto; -webkit-hyphens: auto; }
}

/* ---------- Tablas ----------
   Estilo de ods-formato-tabla.html: caja blanca con borde redondeado,
   encabezado gris claro en mayúsculas pequeñas, filas separadas por líneas
   finas y resaltadas al pasar el cursor, cifras centradas. Las filas Total y
   Porcentaje van en negrita sobre gris (ods.js les pone la clase ods-total). */
.ods {
  --t-line: #e2e8f0;
  --t-line-soft: #f1f5f9;
  --t-head: #f8fafc;
  --t-label: #64748b;
  --t-faint: #94a3b8;
  --t-strong: #0f172a;
  --t-num: #334155;
  --t-hover: #f0f7ff;
  --t-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.ods-table-wrap { max-width: 100%; overflow-x: auto; margin: 18px 0 24px; border: 1px solid var(--t-line); border-radius: 16px; background: var(--paper); box-shadow: var(--t-shadow); -webkit-overflow-scrolling: touch; }
.ods-table-wrap:focus-visible { outline: 3px solid var(--ods-ink); }
.ods table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  color: var(--t-num);
}
.ods caption { caption-side: top; padding: 0 0 10px; color: var(--t-strong); font-family: var(--font-strong); font-weight: 700; text-align: left; }
/* Dentro de la caja, el título queda en una franja propia arriba */
.ods-table-wrap caption { padding: 14px 24px; border-bottom: 1px solid var(--t-line); }
.ods th, .ods td { padding: 16px; border-bottom: 1px solid var(--t-line-soft); vertical-align: middle; }
.ods th:first-child, .ods td:first-child { padding-left: 24px; }
.ods th:last-child, .ods td:last-child { padding-right: 24px; }
.ods th { text-align: left; font-family: var(--font-strong); font-weight: 700; }
.ods thead { background: var(--t-head); }
.ods thead th { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--t-line); color: var(--t-label); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
/* Encabezado doble: los grupos (Solicitudes, 2022…) centrados sobre su par */
.ods thead th[colspan] { text-align: center; }
.ods th p, .ods td p { margin: 0; }
.ods tbody th { color: var(--t-strong); font-family: var(--font-strong); font-weight: 500; }
.ods tbody tr { transition: background-color .15s ease-in-out; }
.ods tbody tr:hover { background: var(--t-hover); }
.ods tbody tr:last-child > * { border-bottom: 0; }
.ods tfoot { background: var(--t-head); font-weight: 700; }
/* Cifras centradas (ods.js marca las celdas numéricas y sus encabezados) */
.ods th.ods-t-num, .ods td.ods-t-num { text-align: center; }

/* Primera columna (nombres de fila); la segunda fila de un encabezado doble
   no cuenta como primera columna. */
.ods-table-wrap thead tr:first-child th:first-child, .ods-table-wrap tbody th:first-child { min-width: 210px; text-align: left; }
/* Filas de total */
.ods tr.ods-total { background: var(--t-head); }
.ods tr.ods-total > * { color: var(--t-strong); font-family: var(--font-strong); font-weight: 700; }
.ods td.ods-t-left, .ods th.ods-t-left { text-align: left; }
.ods .ods-stack thead th:not(:first-child) { text-align: left; }
.ods .ods-wide table { min-width: 1020px; }

/* ---------- Tablas en tarjetas (las arma ods.js) ----------
   Mismo estilo de ods-formato-tabla.html: selector segmentado Tabla /
   Tarjetas, tarjetas con recuadros de cifras y barra del % de mujeres. */
/* Barra de herramientas: filtros a la izquierda y selector a la derecha */
.ods-ttools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 6px 0 12px; }
.ods-tfilters { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ods .ods-tfilter { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.ods .ods-tfilter span { color: var(--t-label); font-family: var(--font-strong); font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ods .ods-tfilter select { max-width: 100%; padding: 7px 10px; border: 1px solid var(--t-line); border-radius: 8px; background-color: var(--t-head); color: var(--t-num); font-family: var(--font-strong); font-size: .75rem; font-weight: 700; cursor: pointer; }
.ods .ods-tfilter select:focus-visible { outline: 2px solid var(--ods-ink); outline-offset: 1px; }
/* Filas, columnas, tarjetas y barras que ocultan los filtros */
.ods .ods-col-off, .ods tr[hidden], .ods .ods-tcard[hidden], .ods .ods-tbar[hidden] { display: none; }
.ods-tview { display: inline-flex; gap: 2px; margin: 0; padding: 4px; border: 1px solid var(--t-line); border-radius: 10px; background: var(--t-line-soft); }
.ods .ods-tview button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 0; border-radius: 7px; background: transparent; color: #475569; font-family: var(--font-strong); font-weight: 700; font-size: .75rem; cursor: pointer; transition: background-color .15s, color .15s; }
.ods .ods-tview button:hover { color: var(--t-strong); }
.ods .ods-tview button[aria-pressed="true"] { background: var(--paper); color: var(--ods-ink); box-shadow: var(--t-shadow); }
.ods .ods-tview button:focus-visible { outline: 2px solid var(--ods-ink); outline-offset: 1px; }
.ods .ods-tview svg { width: 14px; height: 14px; }
.ods-tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 6px 0 24px; }
/* Vista oculta por el selector (sin depender del [hidden] de Bootstrap) */
.ods .ods-tcards[hidden], .ods .ods-table-wrap[hidden] { display: none; }
.ods .ods-tcards__caption { grid-column: 1 / -1; margin: 0; color: var(--t-strong); font-family: var(--font-strong); font-weight: 700; }
.ods .ods-tcards__note { grid-column: 1 / -1; margin: 0; font-size: .75rem; color: var(--t-label); }
.ods-tcard { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid var(--t-line); border-radius: 16px; background: var(--paper); box-shadow: var(--t-shadow); font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; transition: box-shadow .2s; }
.ods-tcard:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .08); }
.ods-tcard--total { border-color: var(--ods-tint-2); }
.ods .ods-tcard__title { margin: 0; color: var(--t-strong); font-family: var(--font-strong); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.ods .ods-tcard__title > :last-child { margin-bottom: 0; }
.ods-tcard--total .ods-tcard__title { color: var(--ods-ink); }
.ods .ods-tcard__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; margin: 12px 0; padding: 12px 0; border-top: 1px solid var(--t-line-soft); border-bottom: 1px solid var(--t-line-soft); text-align: center; }
.ods .ods-tcard__metrics > div { padding: 8px; border: 1px solid transparent; border-radius: 8px; background: var(--t-head); }
.ods .ods-tcard__metrics > .is-f { border-color: var(--ods-tint-2); background: var(--ods-tint); }
.ods .ods-tcard__metrics dt, .ods .ods-tcard__list dt { color: var(--t-faint); font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ods .ods-tcard__metrics > .is-f dt, .ods .ods-tcard__metrics > .is-f dd { color: var(--ods-ink); }
.ods .ods-tcard__metrics dd { margin: 0; color: #1e293b; font-family: var(--font-strong); font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.ods .ods-tcard__list { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--t-line-soft); }
.ods .ods-tcard__list > div + div { margin-top: 10px; }
.ods .ods-tcard__list dd { margin: 0; color: var(--t-num); }
.ods .ods-tcard__list dd > :last-child { margin-bottom: 0; }
/* Barras: al pie de la tarjeta; con encabezado doble, una debajo de otra */
.ods-tbar { margin-top: auto; }
.ods .ods-tcard__title + .ods-tbar { margin-top: 14px; }
.ods-tbar + .ods-tbar { margin-top: 14px; }
.ods-tbar__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; font-size: .75rem; color: var(--t-label); }
.ods-tbar__group { color: var(--t-num); font-weight: 700; }
.ods-tbar__head b { color: var(--ods-ink); font-family: var(--font-strong); font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.ods-tbar__track { height: 8px; margin-top: 6px; border-radius: 99px; background: var(--t-line-soft); overflow: hidden; }
.ods-tbar__fill { display: block; height: 100%; border-radius: inherit; background: var(--t-label); transition: width .5s; }
.ods .ods-tbar__nums { margin: 4px 0 0; font-size: .6875rem; color: var(--t-faint); font-variant-numeric: tabular-nums; }
/* Tablas de texto: tarjetas solo en celular */
.ods-tcards--mobile { display: none; }
@media (max-width: 760px) {
  .ods-tcards--mobile { display: grid; }
  .ods .ods-tcards-src { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ods tbody tr, .ods .ods-tview button, .ods-tcard, .ods-tbar__fill { transition: none; }
}

/* ---------- Documentos de política ---------- */
.ods-entries { margin: 16px 0 24px; padding: 0; max-width: var(--measure); }
.ods .ods-entries > li { list-style: none; margin: 0; padding: 16px 0 16px 18px; }
.ods .ods-entries > li + li { margin-top: 10px; }
/* Varios documentos seguidos (un párrafo cada uno) se ven como una sola lista */
.ods-entries + .ods-entries { margin-top: -14px; }
.ods .ods-entries h4 { font-size: 1rem; margin: 0 0 2px; color: var(--ink); }
.ods-entries time, .ods .ods-entries .ods-entries__fecha { display: block; font-size: .84rem; color: var(--sub); margin-bottom: 6px; }
.ods .ods-entries p { margin: 0 0 8px; }
.ods-file-link { font-size: .88rem;}
/* Etiqueta del tipo de enlace: PDF si el enlace termina en .pdf, WWW si es una página.
   inline-block para que no herede el subrayado del enlace. */
.ods-file-link::before {
  content: "WWW";
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 3px;
  background: #6b7280;
  color: #fff;
  font-size: .68rem;
  line-height: 1.3;
  letter-spacing: .02em;
}
.ods-file-link[href$=".pdf"]::before { content: "PDF"; }

/* ---------- Imágenes ---------- */
.ods-photo { margin: 22px 0 28px; }
/* Foto suelta: siempre completa, sin recortar ni agrandar más que su tamaño real */
.ods-photo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 520px; margin: 0 auto; border-radius: var(--radius-photo); }
.ods-photo figcaption, .ods-photos figcaption { margin-top: 6px; font-size: .84rem; color: var(--muted); }

/* Grupo de fotos (.ods-photos), según cuántas fotos tenga:
   - 1 foto: se muestra normal.
   - 2 a 5 fotos: slider que enseña una foto a la vez y avanza solo (ods.js).
     Sin JavaScript el slider se puede deslizar igual.
   - Más de 5 fotos: collage (ver más abajo). */
.ods-photos { margin: 22px 0 28px; }
.ods-photos > figure { margin: 0; min-width: 0; }
.ods-photos img { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-photo); background: var(--wash); }
.ods-photos:has(> figure:nth-child(2)) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.ods-photos:has(> figure:nth-child(2)) > figure { scroll-snap-align: start; }
.ods-photos:has(> figure:nth-child(2)) img { aspect-ratio: 16 / 9; max-height: 520px; }
/* Fotos verticales: se muestran completas sobre fondo oscuro */
.ods-photos--portrait img { object-fit: contain; background: #1f2a37; }
.ods-photos--portrait:has(> figure:nth-child(2)) img { aspect-ratio: 4 / 3; }
.ods-photos.is-slider { scrollbar-width: none; }
.ods-photos.is-slider::-webkit-scrollbar { display: none; }

/* Más de 5 fotos: collage. Fotos con marco blanco, tamaños variados e
   inclinaciones leves; se enderezan al pasar el cursor y se amplían al hacer clic. */
.ods-photos:has(> figure:nth-child(6)) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: row dense;
  grid-auto-columns: auto;
  gap: 22px 18px;
  margin: 22px 0 32px;
  padding: 12px 6px;
  overflow: visible;
  scroll-snap-type: none;
}
.ods-photos:has(> figure:nth-child(6)) > figure {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(27, 44, 70, .18);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .2s ease, box-shadow .2s ease;
}
.ods-photos:has(> figure:nth-child(6)) img {
  flex: 1;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  max-height: none;
  object-fit: cover;
  border-radius: 2px;
}
.ods-photos:has(> figure:nth-child(6)) figcaption { margin: 0; padding: 6px 2px 8px; font-size: .78rem; line-height: 1.3; }
/* Patrón que se repite cada 7 fotos: inclinación y tamaño de cada una */
.ods-photos:has(> figure:nth-child(6)) > figure:nth-child(7n+1) { --tilt: -3deg; grid-row: span 2; }
.ods-photos:has(> figure:nth-child(6)) > figure:nth-child(7n+2) { --tilt: 2deg; }
.ods-photos:has(> figure:nth-child(6)) > figure:nth-child(7n+3) { --tilt: -1.5deg; grid-column: span 2; }
.ods-photos:has(> figure:nth-child(6)) > figure:nth-child(7n+4) { --tilt: 3deg; grid-row: span 2; }
.ods-photos:has(> figure:nth-child(6)) > figure:nth-child(7n+5) { --tilt: -2deg; }
.ods-photos:has(> figure:nth-child(6)) > figure:nth-child(7n+6) { --tilt: 1.5deg; grid-column: span 2; }
.ods-photos:has(> figure:nth-child(6)) > figure:nth-child(7n+7) { --tilt: -2.5deg; }
.ods-photos:has(> figure:nth-child(6)) > figure:hover,
.ods-photos:has(> figure:nth-child(6)) > figure:focus-within {
  position: relative;
  z-index: 2;
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 14px 30px rgba(27, 44, 70, .28);
}
@media (max-width: 760px) {
  .ods-photos:has(> figure:nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; gap: 16px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ods-photos:has(> figure:nth-child(6)) > figure { transition: none; }
}

.ods-slider { position: relative; margin: 22px 0 28px; }
.ods .ods-slider__arrow {
  position: absolute;
  top: calc(var(--img-h, 300px) / 2 - 24px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.ods .ods-slider__arrow:hover { background: #fff; color: var(--ods-ink); }
.ods-slider__arrow--prev { left: 14px; }
.ods-slider__arrow--next { right: 14px; }
.ods-slider__bar { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.ods-slider__dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.ods .ods-slider__dots button {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ods-slider__dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rule); transition: background .2s, width .2s; }
.ods-slider__dots button[aria-current="true"]::before { width: 24px; border-radius: 5px; background: var(--ods); }
.ods-slider__count { margin-left: auto; font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ods-slider__dots button::before { transition: none; } }

.ods [data-ods-zoom] { cursor: zoom-in; }

/* Visor de imágenes */
.ods-lightbox { width: min(1100px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-photo); background: #000; color: #fff; }
.ods-lightbox::backdrop { background: rgba(10, 14, 20, .86); }
.ods-lightbox img { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; }
.ods-lightbox p { margin: 0; padding: 10px 14px; font: .9rem/1.4 var(--font, sans-serif); }
.ods-lightbox button { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ods-lightbox button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ods-lightbox__close { top: 8px; right: 8px; }
.ods-lightbox__prev, .ods-lightbox__next { top: calc(41vh - 22px); }
.ods-lightbox__prev { left: 8px; }
.ods-lightbox__next { right: 8px; }
.ods-lightbox__prev[hidden], .ods-lightbox__next[hidden] { display: none; }

/* ---------- Video (carga diferida) ---------- */
.ods-video { position: relative; aspect-ratio: 16 / 9; margin: 22px 0 8px; background: #000; border-radius: var(--radius-photo); overflow: hidden; }
.ods-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ods .ods-video__play {
  position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0;
  background: #000 center / cover no-repeat; cursor: pointer; color: #fff;
}
.ods-video__play::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: var(--ods) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 34px no-repeat;
  box-shadow: 0 0 0 6px rgba(255,255,255,.25);
}
.ods-video__play span { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.75)); text-align: left; font: 700 .95rem var(--font-strong); }
.ods .ods-video + .ods-note { font-size: .84rem; color: var(--muted); margin-bottom: 24px; }

/* ---------- Desplegables ----------
   Estilo de ods5-details del ejemplo del cliente: caja con borde redondeado,
   título en el color del ODS y línea bajo el título cuando está abierto. */
.ods-more { margin: 17px 0 24px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); }
/* Texto del título en gris oscuro (como los subtítulos h4); la flecha conserva el color del ODS */
.ods .ods-more summary { padding: 15px 18px; cursor: pointer; color: var(--sub); font-family: var(--font-strong); font-weight: 700; }
.ods .ods-more summary::marker { color: var(--ods-ink); }
.ods .ods-more summary::-webkit-details-marker { color: var(--ods-ink); }
.ods-more[open] summary { border-bottom: 1px solid var(--rule); }
.ods-more__body { padding: 16px 20px 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ods-more__body > :first-child { margin-top: 0; }
.ods-more__body > :last-child { margin-bottom: 0; }
/* Varios desplegables seguidos (p. ej. uno por año) se apilan con el mismo espacio */
.ods-more + .ods-more { margin-top: -7px; }

/* ---------- Grupos de investigación / enlaces ---------- */
.ods a[target="_blank"]::after { content: " ↗"; text-decoration: none; display: inline-block; margin-left: 2px; font-size: .85em; }
.ods .ods-card[target="_blank"]::after, .ods .ods-strip a::after, .ods .ods-file-link::after { content: none; }

/* ---------- Tabla que se apila en móvil ---------- */
@media (max-width: 760px) {
  .ods .ods-stack table, .ods .ods-stack tbody, .ods .ods-stack tr, .ods .ods-stack td, .ods .ods-stack th { display: block; width: 100%; }
  .ods .ods-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
  .ods .ods-stack caption { display: block; width: 100%; }
  .ods .ods-stack tr { padding: 12px 16px; border-bottom: 1px solid var(--t-line-soft); }
  .ods .ods-stack td, .ods .ods-stack tbody th { padding: 3px 0; border: 0; text-align: left; }
  .ods .ods-stack td[data-label]::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--sub); font-weight: 700; }
}

/* ---------- Notas ---------- */
.ods .ods-note { margin: 0 0 1em; font-size: .85rem; color: var(--muted); max-width: var(--measure); }
.ods .ods-note > :last-child { margin-bottom: 0; }
/* Mismo ancho y alineación que el contenido de la página */
.ods .ods-source { width: calc(100% - 40px); max-width: 1140px; margin: 0 auto 40px; padding: 20px 0 0; border-top: 1px solid var(--rule); font-size: .84rem; color: var(--muted); }

/* ---------- Menú flotante (lo construye ods.js con los h2 y h3) ---------- */
.ods-float {
  position: fixed;
  left: 16px;
  top: 50%;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translate(-12px, -50%);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.ods-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity .25s ease, transform .25s ease;
}
.ods .ods-float__toggle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ods-ink);
  box-shadow: 0 8px 22px rgba(27, 44, 70, .16);
  cursor: pointer;
}
.ods .ods-float__toggle:hover, .ods .ods-float.is-open .ods-float__toggle { background: var(--ods); border-color: var(--ods); color: #fff; }
.ods-float__panel {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  width: min(300px, calc(100vw - 92px));
  max-height: 72vh;
  overflow: auto;
  padding: 16px 14px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 16px 36px rgba(27, 44, 70, .2);
  font-size: .86rem;
  line-height: 1.35;
}
.ods-float__panel { display: none; }
.ods-float.is-open .ods-float__panel { display: block; }
.ods .ods-float__title { margin: 0 0 8px; color: var(--sub); font-family: var(--font-strong); font-weight: 700; font-size: .8rem; }
.ods .ods-float ol { margin: 0; padding: 0; }
.ods .ods-float li { list-style: none; margin: 0; }
.ods .ods-float a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.ods .ods-float a:hover { background: var(--ods-tint); color: var(--ink); }
.ods .ods-float a[aria-current="true"] { background: var(--ods-tint); color: var(--ink); box-shadow: inset 3px 0 0 var(--ods); }
.ods .ods-float__group + .ods-float__group { margin-top: 8px; }
.ods .ods-float__group > a { color: var(--ods-ink); font-family: var(--font-strong); font-weight: 700; }
.ods .ods-float__group ol { margin: 2px 0 0 8px; padding-left: 6px; border-left: 1px solid var(--rule); }
@media (max-width: 760px) {
  .ods-float, .ods-float.is-visible { top: auto; bottom: 16px; transform: none; }
  .ods-float__panel { top: auto; bottom: 0; transform: none; max-height: 65vh; }
}
/* Menú completo (sin botón), flotando a la izquierda: solo cuando cabe junto al
   contenido sin taparlo. ods.js mide el espacio libre y pone la clase is-wide;
   si no cabe, se usa el botón. */
@media (min-width: 761px) {
  .ods .ods-float.is-wide .ods-float__toggle { display: none; }
  .ods-float.is-wide .ods-float__panel {
    display: block;
    position: static;
    transform: none;
    width: var(--ods-float-w, 240px);
    max-height: calc(100vh - 48px);
    padding: 14px 10px;
    box-shadow: 0 10px 28px rgba(27, 44, 70, .08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ods-float, .ods-float.is-visible { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .ods-strip { flex-wrap: wrap; height: auto; }
  .ods .ods-strip li { flex: 0 0 calc(100% / 9); height: 34px; }
  .ods .ods-strip [aria-current="page"] { flex: 0 0 calc(100% / 9); }
  .ods-strip a span, .ods-strip [aria-current="page"] a span { display: none; }
  .ods-strip [aria-current="page"] a { justify-content: center; padding: 0; box-shadow: inset 0 -4px 0 rgba(0,0,0,.35); }
  .ods-hero { grid-template-columns: 96px 1fr; align-items: center; }
  .ods-tile { padding: 8px; }
  .ods-tile b { font-size: 3.2rem; }
  .ods-tile small { display: none; }
  .ods .ods-card { min-height: 0; }
  .ods .ods-slider__arrow { width: 40px; height: 40px; top: calc(var(--img-h, 200px) / 2 - 20px); }
  .ods-slider__arrow--prev { left: 8px; }
  .ods-slider__arrow--next { right: 8px; }
}
@media print {
  .ods-strip, .ods-slider__arrow, .ods-slider__bar, .ods-float { display: none !important; }
  .ods-photos { grid-auto-flow: row !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; overflow: visible !important; }
}
img.align-center{margin-left: auto;margin-right: auto; display: block;}
article.ods-block .ods-table-wrap p strong{margin: 1rem;}