/* [medios2] - gemelo de [marcas]: franja a TODO EL ANCHO con los logos de los
   PORTALES y MEDIOS donde nos avalan (Google, Trustpilot, portales de reformas
   del hogar y prensa). Cada logo va en una tarjeta blanca uniforme que respeta
   su color de marca. 6 columnas -> 3 en tablet -> 2 en movil. */

/* El truco full-bleed usa 100vw; evita scroll horizontal por la barra. */
html:has(.mr2-medios) {
  overflow-x: clip;
}

.mr2-medios {
  --mre-verde:  var(--mr2-verde);                     /* acento del span del titulo */
  --mre-oscuro: var(--contrast, var(--mr2-tinta));
  --mre-texto:  var(--mr2-texto);
  --mre-fondo:  var(--mr2-gris);                      /* fondo claro de la franja */

  /* Full-bleed por MARGENES negativos (no por width:100vw): el tema
     (GeneratePress) fuerza el ancho de los hijos de .entry-content al del
     contenedor (~1120px), asi que un `width:100vw` se ignoraba y la franja
     quedaba a 1120px con un hueco enorme a la derecha en pantallas anchas
     (ultrawide). Con `width:auto` + margenes calc(50% - 50vw) se estira de
     borde a borde sin depender de que el tema respete el width. */
  width: auto;
  margin: var(--mr2-seccion) calc(50% - 50vw);

  background: var(--mre-fondo);
  /* sin aire lateral aqui: lo pone __inner con width:min(--mr2-gutter), para
     que los logos queden alineados con el contenido del resto de la web */
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
}

.mr2-medios__inner {
  width: min(100% - 2 * var(--mr2-gutter), var(--mr2-container));
  margin: 0 auto;
  text-align: center;
}

.mr2-medios__titulo {
  margin: 0 0 0.75rem;
  color: var(--mre-oscuro);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
}

.mr2-medios__titulo span {
  color: var(--mre-verde);
  font-style: italic;
}

.mr2-medios__descripcion {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  color: var(--mre-texto);
  font-size: 1.1rem;
  line-height: 1.5;
}

.mr2-medios__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mr2-medios__item {
  margin: 0;
}

/* Tarjeta blanca uniforme: unifica logos de fondos y proporciones distintas. */
.mr2-medios__item,
.mr2-medios__enlace {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mr2-medios__item {
  min-height: clamp(78px, 8vw, 96px);
  padding: 1rem 1.1rem;
  background: #ffffff;
  border: 1px solid var(--mr2-beige-deep, #EADFCD);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(33, 40, 56, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mr2-medios__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(33, 40, 56, 0.12);
}

.mr2-medios__enlace {
  width: 100%;
  height: 100%;
}

.mr2-medios__logo {
  max-width: 100%;
  max-height: clamp(38px, 4.5vw, 52px);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- Tablet: tres columnas --- */
@media (max-width: 900px) {
  .mr2-medios__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Movil: dos columnas --- */
@media (max-width: 560px) {
  .mr2-medios__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mr2-medios__descripcion {
    font-size: 1rem;
  }
}

/* ====================================================================
   Cinta deslizante (marquee) - solo CSS, sin JS.
   La animacion es un unico `transform: translateX`, compositada por la
   GPU: no provoca reflow ni repaint, asi que NO ralentiza la web. La
   tanda de logos se repite N veces (`--mre-copias`, los clones con
   aria-hidden) para LLENAR pantallas muy anchas, y la cinta se desplaza
   exactamente UNA tanda (`-100% / copias`): al llegar, la siguiente
   tanda cae justo donde estaba la primera -> bucle continuo sin saltos.
   ==================================================================== */

.mr2-medios__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;                 /* aire para que la sombra de las tarjetas no se recorte */
  /* Difuminado en los bordes: los logos entran y salen con suavidad. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.mr2-medios__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: mr2-medios-scroll var(--mre-velocidad, 30s) linear infinite;
  will-change: transform;
}

/* Pausa al pasar el raton: deja leer cada medio con calma. */
.mr2-medios__marquee:hover .mr2-medios__track {
  animation-play-state: paused;
}

/* En la cinta los items no se encogen y el "hueco" va como margen propio
   (no como gap del flex) para que las dos copias midan EXACTAMENTE lo
   mismo y el -50% case sin descuadres. */
.mr2-medios__track .mr2-medios__item {
  flex: 0 0 auto;
  width: clamp(150px, 16vw, 190px);
  margin: 0 clamp(0.4rem, 0.8vw, 0.7rem);
}

@keyframes mr2-medios-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--mre-copias, 2))); }
}

/* Accesibilidad: quien pide menos movimiento ve los logos quietos y
   centrados (y sobra la copia duplicada). */
@media (prefers-reduced-motion: reduce) {
  .mr2-medios__track {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    animation: none;
  }

  .mr2-medios__marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .mr2-medios__track .mr2-medios__item[aria-hidden="true"] {
    display: none;
  }
}