/* ---------------------------------------------------------------------------
   Listado y redes — Empresa de Aseo de Pereira S.A.S. E.S.P.

   Los valores de abajo copian la identidad que ya usa el sitio: azul
   institucional #0033A0, tarjetas de 10 px de radio con sombra suave y la
   tipografia Poppins, que se hereda del tema. Si algun dia cambia la linea
   grafica, se ajusta aqui y en carrusel.css, y nada mas.
   --------------------------------------------------------------------------- */

.mjl,
.mjf {
  --mp-azul: #0033A0;
  --mp-azul-osc: #002678;
  --mp-texto: #333;
  --mp-suave: #6b7280;
  --mp-linea: #e3e7ee;
  --mp-radio: 10px;
  --mp-sombra: 0 10px 30px rgba(0, 0, 0, .10);
}

/* =========================================================================
   Rejilla de publicaciones
   ====================================================================== */

.mjl {
  --mjl-cols: 3;
  --mjl-cols-tab: 2;
  --mjl-cols-cel: 1;
  --mjl-hueco: 28px;

  display: grid;
  grid-template-columns: repeat(var(--mjl-cols), minmax(0, 1fr));
  gap: var(--mjl-hueco);
  width: 100%;
  margin: 0;
  padding: 0;
}

.mjl__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

.mjl__medio {
  margin-bottom: 14px;
  line-height: 0;
  border-radius: var(--mp-radio);
  overflow: hidden;
  box-shadow: var(--mp-sombra);
}

.mjl__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .35s ease;
}
.mjl__medio a { display: block; line-height: 0; }
.mjl__medio a:hover .mjl__img { transform: scale(1.03); }
.mjl__medio a:focus-visible { outline: 3px solid var(--mp-azul); outline-offset: 3px; }

.mjl__titulo {
  margin: 0 0 14px;
  text-align: center;
  color: var(--mp-texto);
  font-size: clamp(15px, 1.05vw + 12px, 18px);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mjl__titulo a { color: inherit; text-decoration: none; }
.mjl__titulo a:hover { color: var(--mp-azul); }
.mjl__titulo a:focus-visible { outline: 2px solid var(--mp-azul); outline-offset: 3px; }

/* El separador que traia la plantilla de bucle original */
.mjl__separador {
  margin-top: auto;
  border-top: 2px solid var(--mp-linea);
  width: 46px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .mjl { grid-template-columns: repeat(var(--mjl-cols-tab), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mjl {
    grid-template-columns: repeat(var(--mjl-cols-cel), minmax(0, 1fr));
    --mjl-hueco: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mjl__img { transition: none; }
  .mjl__medio a:hover .mjl__img { transform: none; }
}

/* =========================================================================
   Pagina de Facebook — se presenta como una tarjeta igual a la de noticias,
   para que las dos columnas de la seccion se lean como una pareja.
   ====================================================================== */

.mjf {
  width: 100%;
  margin: 0;
}

.mjf__marco {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px;
  background: #fff;
  border: 0;
  border-radius: var(--mp-radio);
  box-shadow: var(--mp-sombra);
  overflow: hidden;
}

/* El marco oficial de Facebook no crece de 500 px: se centra dentro
   de la tarjeta, que si ocupa todo el ancho de la columna. */
.mjf__marco iframe {
  display: block;
  width: 100%;
  max-width: 500px;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
}

/* Enlaces de respaldo: se ven siempre, tambien si Facebook no carga */
.mjf__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}

.mjf__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: 5px;
  background: var(--mp-azul);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background .15s ease;
}
.mjf__enlace:hover,
.mjf__enlace:focus { background: var(--mp-azul-osc); color: #fff; text-decoration: none; }
.mjf__enlace:focus-visible { outline: 3px solid var(--mp-azul); outline-offset: 3px; }
.mjf__enlace svg { width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; }

@media (max-width: 767px) {
  .mjf__marco { padding: 8px; }
  .mjf__enlace { padding: 11px 20px; }
}