/* assets/prensa.css · Estilos propios del apartado de prensa
 *
 * El apartado reutiliza las piezas del blog: la tarjeta `card-post` en el índice
 * y el cabecero dividido (`page-dividido`, `hero-split`, `media-organic`) en la
 * ficha de cada pieza. Lo propio son dos cosas: el MOSAICO de logos que ocupa el
 * sitio de la foto en la tarjeta, y el CARRUSEL de logos de la ficha.
 *
 * Los logos van siempre sobre blanco, también en el tema oscuro, a propósito:
 * llegan del Drive tal cual los da cada medio, varios con letra negra, y sobre
 * el gris oscuro desaparecerían. No se recolorean.
 *
 * Alcance: SOLO las clases nuevas (`prensa-card`, `prensa-mosaico`,
 * `prensa-medios`, `prensa-marquee`, `prensa-pista`, `prensa-grupo`,
 * `prensa-medio`, `prensa-volver`). No redefine ninguna clase del sistema; las
 * reglas que tocan `card-post` van ancladas a una clase nueva, que pesa más, y
 * fuera de este apartado no pintan nada.
 *
 * Añadido el 2026-10-27. La vuelta atrás es borrar este archivo y su bloque en
 * inc/enqueue.php.
 */

/* ---- Índice: el mosaico de logos en la tarjeta ----
   Tres columnas de logos pequeños sobre blanco, en la caja 16:10 donde el blog
   pone la foto. Cada widget de imagen, centrado en su celda y encajado entero. */
.lon-native .card-post .media.prensa-mosaico {
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: center;
  gap: 14px 16px;
  padding: 16px;
}
.lon-native .card-post .media.prensa-mosaico > .elementor-widget-image {
  position: static;
  width: 100%;
  height: 34px;
}
.lon-native .card-post .media.prensa-mosaico > .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Ficha: el carrusel de logos ----
   La pista lleva la tira de logos dos veces seguidas y se desplaza la mitad de
   su ancho más medio hueco (`-50% - 8px`): así el final de la primera tira
   empalma con el principio de la segunda y el giro no se ve. Los bordes se
   funden con una máscara para que los logos entren y salgan sin corte seco. */
.lon-native .prensa-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding-block: 6px;
}
.lon-native .prensa-marquee > .prensa-pista,
.lon-native .prensa-pista > .prensa-grupo {
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
}
/* La caja blanca va en el propio widget: en este Elementor el widget de imagen
   no lleva envoltorio interior (`.elementor-widget-container`), el enlace y la
   imagen cuelgan directamente de él. */
.lon-native .prensa-grupo > .prensa-medio {
  flex: 0 0 auto;
  width: 200px;
  height: 92px;
  background: #FFFFFF;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 18px 24px;
}
/* Flex y topes en vez de `height:100%`: en una celda de rejilla centrada el
   porcentaje no se resolvía y el logo más alto (Magazine Startups) se salía de
   la caja por arriba y por abajo. */
.lon-native .prensa-grupo > .prensa-medio a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lon-native .prensa-grupo > .prensa-medio img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
@keyframes prensa-desliza {
  to { transform: translateX(calc(-50% - 8px)); }
}
@media (prefers-reduced-motion: no-preference) {
  .lon-native .prensa-marquee > .prensa-pista { animation: prensa-desliza 40s linear infinite; }
  /* Quien va a pulsar un logo lo tiene quieto debajo del ratón o del foco. */
  .lon-native .prensa-marquee:hover > .prensa-pista,
  .lon-native .prensa-marquee:focus-within > .prensa-pista { animation-play-state: paused; }
}
/* Sin movimiento: una sola tira, repartida en filas y centrada, sin máscara. */
@media (prefers-reduced-motion: reduce) {
  .lon-native .prensa-marquee { -webkit-mask-image: none; mask-image: none; }
  .lon-native .prensa-marquee > .prensa-pista { width: 100%; }
  .lon-native .prensa-pista > .prensa-grupo { width: 100%; flex-wrap: wrap; justify-content: center; }
  .lon-native .prensa-pista > .prensa-grupo--eco { display: none; }
}

/* ---- Vuelta al índice ---- */
.lon-native .prensa-volver p { margin: 0; font: 600 13.5px/1 var(--font-body); letter-spacing: .02em; }
.lon-native .prensa-volver a { color: var(--brand-strong); text-decoration: none; }
.lon-native .prensa-volver a:hover { text-decoration: underline; }