/* =====================================================================
   APARTADO "OBRAS" (.mcna-obra*, .mcna-obras*)
   Se carga solo en el listado, en la ficha de una obra y en las páginas
   que usan [mcna_obras_destacadas].

   Misma paleta institucional que el resto del sitio (azules #0b3d8c /
   #1e54a7 / #0f2c5c) para que el apartado no se sienta ajeno. Los tres
   estados de obra sí tienen color propio, porque distinguirlos de un
   vistazo es la función principal del listado.
   ===================================================================== */

.mcna-obras,
.mcna-obra,
.mcna-obras-franja {
  --azul: #0b3d8c;
  --azul-2: #1e54a7;
  --azul-osc: #0f2c5c;
  --tinta: #16233a;
  --gris: #5a6b80;
  --linea: #e3eaf4;
  --fondo: #f4f7fb;
  --fondo-2: #eaf1fb;
  --blanco: #fff;

  /* Estados. El verde de culminada y el ámbar de en ejecución son los
     mismos que ya usa el sitio; el gris azulado de "por iniciar" evita
     que algo que aún no empieza compita visualmente con lo entregado. */
  --ok: #1f9d57;
  --ok-fondo: #e8f6ee;
  --curso: #d98010;
  --curso-fondo: #fdf1de;
  --previo: #5a6b80;
  --previo-fondo: #eef2f7;

  color: var(--tinta);
  font-size: 17px;
  line-height: 1.65;
}

/* Estos bloques viven fuera de un contenedor que declare box-sizing, así que
   lo declaran ellos. Sin esto el padding se suma a los anchos del 100 % y las
   tarjetas desbordan en móvil. */
.mcna-obras *,
.mcna-obras *::before,
.mcna-obras *::after,
.mcna-obra *,
.mcna-obra *::before,
.mcna-obra *::after,
.mcna-obras-franja *,
.mcna-obras-franja *::before,
.mcna-obras-franja *::after { box-sizing: border-box; }

.mcna-obra-ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* =====================================================================
   1. LISTADO
   ===================================================================== */

.mcna-obras { max-width: 1240px; margin: 0 auto; padding: 0 22px 64px; }

/* ----------------------------- Encabezado ---------------------------- */
.mcna-obras__hero {
  margin: 26px 0 22px;
  border-radius: 20px;
  padding: 48px 38px;
  color: #fff;
  background:
    radial-gradient(1000px 400px at 85% -15%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(135deg, var(--azul-osc) 0%, var(--azul) 55%, var(--azul-2) 100%);
}
.mcna-obras__hero-int { max-width: 780px; }

.mcna-obras__volver,
.mcna-obra__volver {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 14px;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  color: rgba(255, 255, 255, .82);
}
.mcna-obras__volver:hover,
.mcna-obra__volver:hover { color: #fff; text-decoration: underline; }

.mcna-obras__titulo {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}
.mcna-obras__bajada {
  margin: 0;
  font-size: 17px;
  color: rgba(255, 255, 255, .88);
  max-width: 62ch;
}

/* Cifras del distrito. Rejilla y no flex para que las columnas queden
   alineadas aunque un número sea mucho más largo que otro. */
.mcna-obras__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 28px 0 0;
}
.mcna-obras__cifra {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 13px;
  padding: 14px 16px;
}
.mcna-obras__cifra dt {
  margin: 0 0 3px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.mcna-obras__cifra dd {
  margin: 0;
  font-size: 26px; font-weight: 800; line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.mcna-obras__cifra--ancha dd { font-size: 20px; white-space: nowrap; }

/* ------------------------------ Filtros ------------------------------ */
.mcna-obras__filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 35, 66, .04);
}

.mcna-obras__buscar {
  position: relative;
  flex: 1 1 260px;
  /* Sin esto, el elemento flexible no puede encogerse por debajo del ancho
     de su contenido y empuja al resto fuera de la fila en pantallas chicas. */
  min-width: 0;
  display: flex; align-items: center;
}
.mcna-obras__buscar .mcna-obra-ico {
  position: absolute; left: 13px;
  color: var(--gris); pointer-events: none;
}
.mcna-obras__buscar input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  font-size: 15.5px;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 10px;
}

.mcna-obras__campo { flex: 1 1 170px; min-width: 0; }
.mcna-obras__campo select {
  width: 100%;
  padding: 11px 34px 11px 13px;
  font-size: 15px;
  color: var(--tinta);
  background: var(--fondo) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 16px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  appearance: none;
  cursor: pointer;
}

.mcna-obras__buscar input:focus,
.mcna-obras__campo select:focus {
  outline: 2px solid var(--azul-2);
  outline-offset: 1px;
  border-color: transparent;
}

.mcna-obras__aplicar {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 18px;
  font-size: 15px; font-weight: 700;
  color: #fff; background: var(--azul);
  border: 0; border-radius: 10px; cursor: pointer;
}
.mcna-obras__aplicar:hover { background: var(--azul-2); }

.mcna-obras__limpiar {
  font-size: 14.5px; font-weight: 600;
  color: var(--azul-2); text-decoration: underline;
  padding: 6px 4px;
}

.mcna-obras__conteo {
  margin: 0 0 14px;
  font-size: 14.5px;
  color: var(--gris);
}

/* =====================================================================
   2. TARJETAS
   ===================================================================== */

.mcna-obras-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}
/* Estas dos rejillas llevan como mucho tres tarjetas, y van con columnas fijas
   a propósito. Con auto-fit las pistas vacías se colapsan y una sola tarjeta se
   estira a todo el ancho, que es justo lo que no se quiere: una obra suelta debe
   ocupar un tercio, no la pantalla entera. */
.mcna-obras-grid--tres,
.mcna-obras-grid--franja { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mcna-obra-card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mcna-obra-card:hover {
  transform: translateY(-3px);
  border-color: #cbd9ee;
  box-shadow: 0 12px 26px rgba(16, 35, 66, .11);
}
/* El foco del teclado se marca en la tarjeta entera, no solo en el enlace:
   así se ve qué elemento está seleccionado al tabular. */
.mcna-obra-card:focus-within {
  outline: 2px solid var(--azul-2);
  outline-offset: 2px;
}
.mcna-obra-card__link {
  display: flex; flex-direction: column;
  height: 100%;
  text-decoration: none; color: inherit;
}
.mcna-obra-card__link:focus { outline: none; }

.mcna-obra-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--fondo-2, #eaf1fb);
  overflow: hidden;
}
/* Esqueleto: mientras la foto no llega, el hueco late suavemente en lugar de
   quedarse en blanco. La imagen es opaca y cubre toda la caja, así que al
   pintarse tapa el esqueleto sola; el JS solo detiene la animación para no
   dejarla corriendo detrás de una foto ya cargada. */
.mcna-obra-card__media::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #eaf1fb 30%, #f6f9fe 50%, #eaf1fb 70%);
  background-size: 200% 100%;
  animation: mcna-obra-late 1.4s ease-in-out infinite;
}
.mcna-obra-card__media.is-cargada::before { display: none; }

@keyframes mcna-obra-late {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.mcna-obra-card__media img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.mcna-obra-card:hover .mcna-obra-card__media img { transform: scale(1.04); }

.mcna-obra-card__sinfoto {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: #9db2d4; background: #eaf1fb;
}
.mcna-obra-card__sinfoto .mcna-obra-ico { width: 46px; height: 46px; }

/* Distintivo de estado */
.mcna-obra-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em;
  border-radius: 999px;
  white-space: nowrap;
}
.mcna-obra-card__media .mcna-obra-chip {
  position: absolute; top: 12px; left: 12px;
  box-shadow: 0 2px 8px rgba(16, 35, 66, .18);
}
.mcna-obra-chip--culminada { background: var(--ok-fondo);    color: #157541; }
.mcna-obra-chip--ejecucion { background: var(--curso-fondo); color: #94570a; }
.mcna-obra-chip--iniciar   { background: var(--previo-fondo);color: #44576e; }
.mcna-obra-chip--otro      { background: var(--previo-fondo);color: #44576e; }

.mcna-obra-card__cuerpo {
  display: flex;
  flex-direction: column;
  /* La rejilla iguala la altura de las tarjetas de una misma fila; con esto el
     monto se apoya abajo y queda a la misma altura en todas, tengan o no barra
     de avance. */
  flex: 1;
  padding: 16px 17px 18px;
}

.mcna-obra-card__tipo {
  display: block;
  margin-bottom: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--azul-2);
}
.mcna-obra-card__titulo {
  margin: 0 0 8px;
  font-size: 18.5px; font-weight: 700; line-height: 1.32;
  color: var(--tinta);
  text-wrap: balance;
}
.mcna-obra-card__lugar {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0 0 12px;
  font-size: 14.5px; color: var(--gris);
}
.mcna-obra-card__lugar .mcna-obra-ico { width: 17px; height: 17px; margin-top: 2px; color: #8fa3bf; }

/* Barra de avance */
.mcna-obra-card__avance { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mcna-obra-barra {
  flex: 1;
  height: 7px;
  background: #e7edf6;
  border-radius: 999px;
  overflow: hidden;
}
.mcna-obra-barra > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #e8a020, var(--curso));
  border-radius: 999px;
}
.mcna-obra-barra--grande { height: 11px; }
.mcna-obra-card__pct {
  font-size: 14px; font-weight: 800;
  color: var(--curso);
  font-variant-numeric: tabular-nums;
}

.mcna-obra-card__monto {
  margin: auto 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--linea);
  font-size: 15.5px; font-weight: 700;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}

/* --------------------------- Sin resultados -------------------------- */
.mcna-obras__vacio {
  text-align: center;
  padding: 64px 24px;
  background: var(--blanco);
  border: 1px dashed #cbd9ee;
  border-radius: 16px;
}
.mcna-obras__vacio .mcna-obra-ico { width: 52px; height: 52px; color: #9db2d4; }
.mcna-obras__vacio h2 { margin: 14px 0 6px; font-size: 22px; font-weight: 700; color: var(--tinta); }
.mcna-obras__vacio p { margin: 0 0 18px; color: var(--gris); }
.mcna-obras__btn {
  display: inline-block;
  padding: 11px 20px;
  font-weight: 700; text-decoration: none;
  color: #fff; background: var(--azul);
  border-radius: 10px;
}
.mcna-obras__btn:hover { background: var(--azul-2); color: #fff; }

/* -------------------------- Ver más obras ----------------------------- */
.mcna-obras__mas { margin-top: 26px; text-align: center; }

.mcna-obras__btn-mas {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px;
  font-size: 15.5px; font-weight: 700;
  color: var(--azul);
  background: var(--blanco);
  border: 1.5px solid #cbd9ee;
  border-radius: 11px;
  cursor: pointer;
}
.mcna-obras__btn-mas:hover { border-color: var(--azul-2); background: var(--fondo); }
.mcna-obras__btn-mas:focus-visible { outline: 2px solid var(--azul-2); outline-offset: 2px; }
.mcna-obras__btn-mas[disabled] { cursor: progress; opacity: .75; }

/* El giro solo existe mientras se carga; el resto del tiempo no ocupa nada. */
.mcna-obras__giro { display: none; }
.esta-cargando .mcna-obras__giro {
  display: block;
  width: 16px; height: 16px;
  border: 2px solid #cbd9ee;
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: mcna-obra-giro .7s linear infinite;
}
@keyframes mcna-obra-giro { to { transform: rotate(360deg); } }

.mcna-obras__mas-aviso {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--gris);
  min-height: 1.2em;
}

/* ------------------------- Tarjetas de relleno ------------------------
   Se insertan mientras llega la página siguiente. Tienen la forma de una
   tarjeta real para que la lista no dé un salto al sustituirlas. */
.mcna-obra-card--hueco { pointer-events: none; }
.mcna-obra-card--hueco .mcna-obra-card__cuerpo { gap: 9px; padding-top: 18px; }

.mcna-hueco {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(100deg, #eaf1fb 30%, #f6f9fe 50%, #eaf1fb 70%);
  background-size: 200% 100%;
  animation: mcna-obra-late 1.4s ease-in-out infinite;
}
.mcna-hueco--eti  { width: 42%; height: 10px; }
.mcna-hueco--tit  { width: 92%; height: 16px; }
.mcna-hueco--corto{ width: 64%; }
.mcna-hueco--pie  { width: 38%; margin-top: auto; }

/* ---------------------------- Paginación ----------------------------- */
.mcna-obras .navigation.pagination { margin-top: 30px; }
.mcna-obras .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
}
.mcna-obras .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px;
  padding: 0 13px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
}
.mcna-obras .page-numbers:hover { border-color: var(--azul-2); color: var(--azul-2); }
.mcna-obras .page-numbers.current {
  background: var(--azul); border-color: var(--azul); color: #fff;
}
.mcna-obras .page-numbers.dots { border-color: transparent; background: transparent; }

/* =====================================================================
   3. FICHA DE UNA OBRA
   ===================================================================== */

.mcna-obra { padding-bottom: 64px; }

.mcna-obra__hero {
  position: relative;
  overflow: hidden;
  padding: 48px 22px 44px;
  color: #fff;
  background: linear-gradient(135deg, var(--azul-osc) 0%, var(--azul) 60%, var(--azul-2) 100%);
}
.mcna-obra__hero-int { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }

/* Fotografía de portada al fondo. Mismo recurso que el hero de Integridad:
   detrás de un velo oscuro para que el título no pierda contraste. */
.mcna-obra__hero-bg { position: absolute; inset: 0; z-index: 0; }
.mcna-obra__hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcna-obra__hero--foto::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(9, 28, 58, .86) 0%, rgba(9, 28, 58, .94) 100%);
}

.mcna-obra__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mcna-obra-chip--liso {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff;
  text-decoration: none;
}
.mcna-obra-chip--liso:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.mcna-obra__titulo {
  margin: 0 0 12px;
  font-size: clamp(27px, 3.8vw, 40px);
  line-height: 1.16; font-weight: 800;
  color: #fff;
  max-width: 22ch;
  text-wrap: balance;
}
.mcna-obra__lugar {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, .88);
}

.mcna-obra__avance { max-width: 420px; margin-top: 22px; }
.mcna-obra__avance-cab {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 7px;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}
.mcna-obra__avance-cab strong { font-size: 19px; color: #fff; font-variant-numeric: tabular-nums; }
.mcna-obra__hero .mcna-obra-barra { background: rgba(255, 255, 255, .2); }

/* ------------------------------ Cuerpo ------------------------------- */
.mcna-obra__cuerpo { max-width: 1000px; margin: 0 auto; padding: 0 22px; }
.mcna-obra__bloque { margin-top: 44px; }
.mcna-obra__bloque--cmp { margin-top: 38px; }

.mcna-obra__h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 16px;
  font-size: 22px; font-weight: 700;
  color: var(--azul-osc);
}
.mcna-obra__h2 .mcna-obra-ico { color: var(--azul-2); }

.mcna-obra__texto { font-size: 17px; line-height: 1.75; }
.mcna-obra__texto p { margin: 0 0 1em; }

/* ------------------------- Antes y después --------------------------- */
.mcna-obra-cmp { --pos: 50%; }

.mcna-obra-cmp__marco {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #0b2142;
  /* Evita que el navegador interprete el arrastre horizontal como gesto de
     desplazamiento de la página: sin esto, en móvil el comparador no se puede
     mover porque el scroll se lleva el gesto. */
  touch-action: pan-y;
  user-select: none;
}
.mcna-obra-cmp__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* La foto de "ahora" va encima y se recorta desde el borde izquierdo hasta la
   posición del tirador. Así, a la izquierda del tirador se ve el "antes" (que
   está debajo) y a la derecha, el "ahora". */
.mcna-obra-cmp__capa {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}

.mcna-obra-cmp__etq {
  position: absolute; top: 14px;
  padding: 5px 12px;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
  background: rgba(11, 33, 66, .72);
  border-radius: 999px;
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.mcna-obra-cmp__etq--antes   { left: 14px; }
.mcna-obra-cmp__etq--despues { right: 14px; background: rgba(21, 117, 65, .82); }

/* Línea divisoria y tirador. Son decorativos: quien maneja de verdad es el
   input de rango que está encima, transparente. */
.mcna-obra-cmp__linea {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.mcna-obra-cmp__tirador {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  color: var(--azul);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .3);
}
.mcna-obra-cmp__tirador .mcna-obra-ico { width: 22px; height: 22px; }

/* El control real: ocupa todo el marco para poder arrastrar desde cualquier
   punto, pero es invisible. Se usa un input de rango en lugar de un div con
   eventos de ratón porque así funciona con teclado, con lector de pantalla y
   con el dedo sin escribir una línea para cada caso. */
.mcna-obra-cmp__rango {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  background: transparent;
  appearance: none;
  cursor: ew-resize;
}
.mcna-obra-cmp__rango::-webkit-slider-thumb {
  appearance: none;
  width: 56px; height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.mcna-obra-cmp__rango::-moz-range-thumb {
  width: 56px; height: 999px;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
.mcna-obra-cmp__rango:focus { outline: none; }

/* El foco del teclado se pinta sobre el tirador, que es lo que el usuario ve
   moverse; el input en sí es transparente y un contorno suyo no se entendería. */
.mcna-obra-cmp__marco:has(.mcna-obra-cmp__rango:focus-visible) .mcna-obra-cmp__tirador {
  outline: 3px solid var(--azul-2);
  outline-offset: 3px;
}

.mcna-obra-cmp__ayuda {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--gris);
  text-align: center;
}

/* ---------------------------- Ficha técnica -------------------------- */
.mcna-obra__ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
}
.mcna-obra__dato {
  display: flex; flex-direction: column;
  background: var(--blanco);
  padding: 15px 17px;
}
.mcna-obra__dato dt {
  margin: 0 0 4px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gris);
}
.mcna-obra__dato dd {
  /* Apoya el valor abajo: así, aunque una etiqueta ocupe dos líneas, todos los
     valores de la fila quedan alineados. */
  margin: auto 0 0;
  font-size: 16.5px; font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.mcna-obra__nota {
  margin: 12px 0 0;
  font-size: 13.5px; line-height: 1.6;
  color: var(--gris);
}

/* ------------------------------ Galería ------------------------------ */
.mcna-obra__galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.mcna-obra__foto {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fondo);
}
.mcna-obra__foto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .3s ease;
}
.mcna-obra__foto:hover img { transform: scale(1.05); }
.mcna-obra__foto:focus-visible { outline: 2px solid var(--azul-2); outline-offset: 2px; }

/* =====================================================================
   4. FRANJA DE LA PORTADA
   ===================================================================== */

.mcna-obras-franja { max-width: 1240px; margin: 0 auto; padding: 8px 22px 10px; }
.mcna-obras-franja__cab {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.mcna-obras-franja__titulo {
  margin: 0;
  font-size: clamp(23px, 3vw, 30px); font-weight: 800;
  color: var(--azul-osc);
}
.mcna-obras-franja__bajada { margin: 4px 0 0; color: var(--gris); font-size: 16px; }
.mcna-obras-franja__todas {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  color: #fff; background: var(--azul);
  border-radius: 10px;
}
.mcna-obras-franja__todas:hover { background: var(--azul-2); color: #fff; }

/* =====================================================================
   5. PANTALLAS PEQUEÑAS
   ===================================================================== */

@media (max-width: 980px) {
  .mcna-obras-grid--tres,
  .mcna-obras-grid--franja { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mcna-obras__hero { padding: 38px 26px; border-radius: 16px; }
  .mcna-obra__cuerpo { max-width: 720px; }
}

@media (max-width: 767px) {
  .mcna-obras,
  .mcna-obras-franja { padding-left: 16px; padding-right: 16px; }

  .mcna-obras__hero { margin: 16px 0 18px; padding: 30px 20px; border-radius: 14px; }
  .mcna-obras__cifras { grid-template-columns: 1fr 1fr; gap: 9px; }
  .mcna-obras__cifra { padding: 11px 13px; }
  .mcna-obras__cifra dd { font-size: 22px; }
  .mcna-obras__cifra--ancha { grid-column: 1 / -1; }
  .mcna-obras__cifra--ancha dd { font-size: 19px; }

  /* En móvil los filtros pasan a una columna: en fila quedaban desplegables
     de 90 px donde no se leía ninguna opción. */
  .mcna-obras__filtros { flex-direction: column; align-items: stretch; padding: 12px; }
  .mcna-obras__buscar,
  .mcna-obras__campo { flex: 1 1 auto; width: 100%; }
  .mcna-obras__aplicar { justify-content: center; width: 100%; }
  .mcna-obras__limpiar { text-align: center; }

  .mcna-obras-grid { grid-template-columns: 1fr; gap: 16px; }

  .mcna-obra__hero { padding: 30px 18px 34px; }
  .mcna-obra__cuerpo { padding: 0 16px; }
  .mcna-obra__bloque { margin-top: 34px; }
  .mcna-obra__titulo { max-width: none; }

  /* Un 16:10 en una pantalla angosta deja las fotos demasiado bajas para
     apreciar el cambio; en vertical se aprovecha el alto disponible. */
  .mcna-obra-cmp__marco { aspect-ratio: 4 / 5; border-radius: 13px; }
  .mcna-obra-cmp__tirador { width: 40px; height: 40px; }
  .mcna-obra__ficha { grid-template-columns: 1fr; }
  .mcna-obra__galeria { grid-template-columns: 1fr 1fr; gap: 9px; }

  .mcna-obras-franja__cab { flex-direction: column; align-items: stretch; }
  .mcna-obras-franja__todas { justify-content: center; }
}

/* Respeta la preferencia del sistema de reducir animaciones. */
@media (prefers-reduced-motion: reduce) {
  .mcna-obra-card__media::before,
  .mcna-hueco,
  .esta-cargando .mcna-obras__giro { animation: none; }
  .mcna-obra-card,
  .mcna-obra-card__media img,
  .mcna-obra__foto img { transition: none; }
  .mcna-obra-card:hover { transform: none; }
  .mcna-obra-card:hover .mcna-obra-card__media img,
  .mcna-obra__foto:hover img { transform: none; }
}

/* ---------------------------------------------------------------------
   La franja de la portada desaparece entera si no hay obras destacadas.

   El shortcode devuelve cadena vacía en ese caso, pero la sección de Divi
   que lo envuelve seguiría ocupando su espacio y dejaría un hueco. Con
   :has() se colapsa la sección completa, no solo su contenido.
   --------------------------------------------------------------------- */
.mcna-obras-sec:not(:has(.mcna-obras-franja)) { display: none; }