/* ============================================================
   ENSO MEDIA — Clientes
   El motor viene de horizontal.css; la píldora, el panel de
   contraste y los tokens compartidos, de nosotros.css. Aquí sólo
   la reja de logotipos, el mosaico del hero y los medios.

   Los logotipos del proyecto son marcas de un solo color (blancas
   sobre transparente). Por eso el hover no puede ser "de gris a
   color": no hay versión a color. Lo que se hace es levantar la
   opacidad, que es el gesto que sí tiene sentido con este material.
   ============================================================ */

/* ============================================================
   1 · Hero
   ============================================================ */

.cl-hero .hero__titulo { max-width: 16ch; }

.cl-hero__trazo {
  position: absolute;
  right: -8vw;
  top: 50%;
  z-index: 2;
  width: min(82vh, 680px);
  height: auto;
  translate: 0 -50%;
  fill: var(--blanco);
  opacity: 0.07;
  pointer-events: none;
}

/* Los logotipos como trama de fondo: se leen como textura, no como
   lista. A esta opacidad no compiten con el titular —que es el punto
   del brief— pero sí dicen "aquí hay muchas marcas". */
.mosaico-logos {
  position: absolute;
  inset: -6% -14%;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  align-content: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  /* Con vídeo debajo, el mosaico baja a textura pura: a 0.11 competía
     con el metraje y el conjunto se leía sucio. */
  opacity: 0.07;
  pointer-events: none;
}

.mosaico-logos img {
  width: 100%;
  height: 46px;
  object-fit: contain;
  filter: grayscale(1);
}

/* Con el velo del hero encima, el titular gana el contraste que pide
   la lectura sin apagar del todo la trama. */
.cl-hero .hero__velo {
  background:
    linear-gradient(90deg, rgb(var(--velo) / 0.95) 0%, rgb(var(--velo) / 0.84) 46%, rgb(var(--velo) / 0.62) 100%),
    linear-gradient(0deg, rgb(var(--velo) / 0.72) 0%, rgb(var(--velo) / 0.25) 42%);
}

/* ============================================================
   2 · La reja de logotipos
   ============================================================ */

.clientes { gap: var(--flow-lg); align-items: center; }

.reja__intro {
  flex: none;
  width: min(29ch, 21vw);
  display: grid;
  gap: var(--flow-sm);
  align-content: center;
}

/* A 22vw el titular caía en seis renglones y la columna parecía
   una tira. Con más ancho y un cuerpo menor, respira. */
.reja__intro h2 { font-size: clamp(1.5rem, 2.4vw, 2.5rem); }
.reja__intro .pill { justify-self: start; }

.reja__pagina {
  margin-top: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--linea);
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marca-tinta);
}

.reja { flex: none; display: grid; gap: var(--flow-md); }

/* La obra cierra el panel por la derecha: sin ella la reja quedaba
   flotando con un tercio de la pantalla en blanco. */
.reja__obra {
  flex: none;
  width: min(19vw, 272px);
  margin-inline-start: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  align-content: center;
}

.reja__obra img {
  width: 100%;
  height: clamp(200px, calc(var(--util) * 0.42), 320px);
  object-fit: cover;
  border-radius: var(--radio);
  filter: brightness(var(--foto-brillo));
}

.reja__obra figcaption { font-size: 0.84rem; line-height: 1.5; color: var(--tinta-suave); }

.reja__obra figcaption b {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--tinta);
}

/* Las tres hojas ocupan la misma celda y se cruzan por opacidad: si
   se apilaran, el panel mediría tres pantallas de alto. */
.reja__marco { display: grid; }
.reja__hojas { display: grid; list-style: none; }

.reja__hoja {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(0.9rem, 1.9vw, 2rem);
  width: min(43vw, 596px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}

.reja__hoja.is-activa {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0s;
}

/* Aire generoso alrededor de cada marca: amontonarlas es justo lo que
   el brief pide evitar. */
/* Bloque, no rejilla. Dentro de una celda de rejilla el navegador trata
   la altura como indefinida y el `height: 100%` de la imagen no resuelve:
   los logotipos cuadrados (Huawei, DiDi) salían a 140 px, encima de la
   fila de abajo. Con un bloque de altura fija el porcentaje sí resuelve y
   el `object-fit` centra la marca dentro. */
.logo-reja {
  display: block;
  height: clamp(64px, 9.5vh, 96px);
  padding: var(--space-2xs);
}

.logo-reja img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity 0.35s var(--ease), scale 0.35s var(--ease);
}

/* Sobre papel hay que invertirlos: vienen en blanco. En tema claro el
   panel de contraste se vuelve oscuro y ya no hace falta. */
.panel--claro .logo-reja img { filter: invert(1); }
[data-tema="claro"] .panel--claro .logo-reja img { filter: none; }

.logo-reja:hover img { opacity: 1; scale: 1.06; }

/* --- Los puntos, en amarillo de marca --- */
.reja__puntos {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.reja__puntos button {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.reja__puntos button::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--marca-tinta);
  background: transparent;
  transition: background-color 0.3s var(--ease), scale 0.3s var(--ease);
}

.reja__puntos button[aria-current="true"]::before { background: var(--marca-tinta); scale: 1.3; }
.reja__puntos button:hover::before { background: var(--marca-tinta); }

/* ============================================================
   3 · Presencia en medios
   ============================================================ */

.medios { gap: var(--flow-lg); align-items: center; background: var(--fondo-2); }

.medios__intro {
  flex: none;
  width: min(26ch, 21vw);
  display: grid;
  gap: var(--flow-sm);
  align-content: center;
  justify-items: start;
}

.medios__intro h2 { font-size: var(--fs-h2); }

.medios__cuerpo { flex: none; width: min(40vw, 540px); display: grid; gap: var(--flow-md); }

.medios__cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--flow-sm);
  border-bottom: 1px solid var(--linea);
}

.medios__cabecera img {
  width: 116px;
  height: auto;
  filter: invert(1);
  opacity: 0.85;
}

[data-tema="claro"] .medios__cabecera img { filter: none; }

.medios__cabecera span {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--tinta-tenue);
}

.menciones { list-style: none; display: grid; gap: 0; }

/* Cada mención es un enlace a la nota real: medio arriba, titular
   pesando y la flecha de salida al final, como en el índice de una
   revista. Antes eran títulos sin destino. */
.mencion { border-top: 1px solid var(--linea); }
.mencion:first-child { border-top: 0; }

.mencion a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "medio  ir"
    "titulo ir"
    "fecha  ir";
  align-items: start;
  gap: var(--space-2xs) var(--space-md);
  padding: var(--flow-sm) 0;
  /* translate, no padding-left: mover el relleno provoca reflow en cada
     fotograma del hover. */
  transition: translate 0.3s var(--ease);
}

.mencion:first-child a { padding-top: 0; }
.mencion a:hover { translate: var(--space-xs) 0; }
.mencion a:hover h3 { color: var(--marca-tinta); }

.mencion__medio {
  grid-area: medio;
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marca-tinta);
}

.mencion h3 {
  grid-area: titulo;
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.35vw, 1.18rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 0.3s var(--ease);
}

.mencion__fecha {
  grid-area: fecha;
  font-size: 0.8rem;
  color: var(--tinta-tenue);
}

.mencion__ir {
  grid-area: ir;
  align-self: center;
  width: 15px;
  height: 15px;
  color: var(--tinta-tenue);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.mencion a:hover .mencion__ir { color: var(--marca-tinta); transform: translate(2px, -2px); }

/* --- El premio, aparte --- */
.premio {
  position: relative;
  flex: none;
  width: min(24ch, 20vw);
  display: grid;
  gap: var(--space-2xs);
  align-content: center;
  padding: var(--flow-md);
  border-radius: var(--radio);
  border: 1px solid var(--marca-tinta);
  overflow: hidden;
}

.premio__sello {
  position: absolute;
  right: -22%;
  bottom: -18%;
  width: 62%;
  height: auto;
  fill: var(--marca-tinta);
  opacity: 0.1;
  pointer-events: none;
}

/* El sello del premio: aro de marca sobre disco amarillo. Es el único
   punto de amarillo sólido de todo el panel, y por eso se ve. */
.premio__medalla {
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-2xs);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marca);
}

.premio__medalla svg { width: 62%; height: auto; fill: #000; }

.premio__etiqueta {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--marca-tinta);
}

.premio h3 {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.premio p { font-size: 0.88rem; color: var(--tinta-suave); }

/* Pantallas bajas */
@media (min-width: 900px) and (max-height: 820px) {
  .reja__intro { width: min(24ch, 19vw); gap: var(--space-sm); }
  .reja__intro h2 { font-size: clamp(1.4rem, 2.3vw, 2rem); }
  .reja__intro .lead { font-size: 0.9rem; }
  .reja__hoja { width: min(48vw, 620px); gap: clamp(0.75rem, 1.6vw, 1.6rem); }
  .medios__intro { width: min(23ch, 18vw); gap: var(--space-sm); }
  .medios__cuerpo { width: min(36vw, 470px); }
  .mencion { padding: var(--space-sm) 0; }
  .premio { width: min(22ch, 18vw); padding: var(--flow-sm); }
  .mosaico-logos img { height: 38px; }
}

/* ============================================================
   Móvil
   ============================================================ */

@media (max-width: 899px) {
  .cl-hero__trazo { right: -30vw; opacity: 0.06; }

  .mosaico-logos {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    opacity: 0.09;
  }

  .mosaico-logos img { height: 34px; }

  .reja__intro,
  .medios__intro,
  .medios__cuerpo,
  .premio { width: 100%; max-width: none; }

  .reja { margin-top: var(--flow-lg); }

  /* Tres columnas, no cuatro: a 350 px de ancho, cuatro logotipos por
     fila dejan cada marca del tamaño de una estampilla. */
  .reja__hoja {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md) var(--space-sm);
  }

  .logo-reja { height: 62px; }

  .reja__puntos { margin-top: var(--space-2xs); }

  /* --- Medios --- */
  .medios__cuerpo { margin-top: var(--flow-md); }
  .medios__cabecera { flex-wrap: wrap; gap: var(--space-sm); }
  .medios__cabecera img { width: 96px; }

  .mencion {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    padding: var(--flow-md) 0;
  }


  .premio { margin-top: var(--flow-lg); }
  .medios__intro .btn { width: 100%; justify-content: center; min-height: 48px; }
}


/* --- Fondo de marca: resplandor y trama --------------------------
   El panel era una plancha lisa. Mismo recurso del mapa y de Nosotros.
   El contenido sube a z-index 2 para quedar por encima. --- */
.medios::before,
.medios::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.medios::before { background: radial-gradient(54% 58% at 56% 50%, rgb(235 219 0 / 0.13) 0%, rgb(235 219 0 / 0) 66%); }

.medios::after {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--marca);
  opacity: 0.13;
  mask-image: radial-gradient(58% 62% at 56% 50%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(58% 62% at 56% 50%, #000 0%, transparent 74%);
}

/* Sólo el contenido sube de capa. Si se usa `> *`, el fondo y el velo
   (absolutos) pasan a ser columnas del flex y revientan el panel. */
.medios__intro, .medios__cuerpo, .medios .premio { position: relative; z-index: 2; }

@media (max-width: 899px) {
  .medios::before, .medios::after { display: none; }
}


/* ------------------------------------------------------------
   Presencia en medios: fotografía a sangre
   El panel era papel liso. Ahora lleva una rueda de prensa de
   fondo y tokens fijos —declara data-oscuro, así que es oscuro
   en los dos temas y el header blanco se lee siempre.
   ------------------------------------------------------------ */
.medios {
  --velo: 0 0 0;
  --fondo: #050505;
  --fondo-2: #0d0d0c;
  --fondo-3: #161614;
  --tinta: #ffffff;
  --tinta-suave: rgba(255, 255, 255, 0.74);
  --tinta-tenue: rgba(255, 255, 255, 0.6);
  --linea: rgba(255, 255, 255, 0.16);
  --linea-fuerte: rgba(255, 255, 255, 0.32);
  --marca-tinta: var(--marca);
  background: var(--negro-panel);
  color: var(--blanco);
}

.medios__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* max-width: 100% de base.css recortaba el 118% y dejaba una franja
   sin fotografía en el borde derecho del panel. */
.medios__media img {
  max-width: none;
  width: 118%;
  height: 100%;
  margin-left: -9%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.06) brightness(0.42);
}

.medios__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(var(--velo) / 0.93) 0%, rgb(var(--velo) / 0.86) 46%, rgb(var(--velo) / 0.7) 100%),
    linear-gradient(0deg, rgb(var(--velo) / 0.6) 0%, rgb(var(--velo) / 0) 52%);
}

.medios__intro, .medios__cuerpo, .medios .premio { position: relative; z-index: 2; }

@media (max-width: 899px) {
  .medios__media img { width: 100%; margin-left: 0; }
  .medios__velo {
    background: linear-gradient(180deg, rgb(var(--velo) / 0.72) 0%, rgb(var(--velo) / 0.94) 26%, rgb(var(--velo) / 0.97) 100%);
  }
}