/* Sección Clients: video de la home como fondo fijo bajo un gris carbón con grano,
   nombres en rosa que se mueven con el scroll y, al pasar el mouse, la sans se
   reemplaza por una mezcla de serif romana, itálica y pixelada, con líneas y rubro. */

#secClients {
  --cli-gris: #272624;
  --cli-rosa: #f2cfce;
  --cli-rapido: .22s cubic-bezier(.3, 0, .2, 1);
  background: var(--cli-gris);
  color: var(--cli-rosa);
}
#idContenedor > section#secClients.activo { display: block; position: relative; }

/* Fondo fijo: video + velo gris + grano (no se mueve con el scroll) */
#secClients .cli-fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#secClients .cli-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); }
#secClients .cli-fondo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--cli-gris); opacity: .8;
}
#secClients .cli-fondo::after {
  content: ""; position: absolute; inset: -50%; z-index: 2;
  opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Contenido con scroll propio, por encima del fondo */
#secClients .cli-scroll {
  position: relative; z-index: 1;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 92px, #000 160px, #000 calc(100% - 110px), transparent calc(100% - 50px));
  mask-image: linear-gradient(to bottom, transparent 0, transparent 92px, #000 160px, #000 calc(100% - 110px), transparent calc(100% - 50px));
}
#secClients .cli-scroll::-webkit-scrollbar { display: none; }

/* Título "OUR CLIENTS" más chico y en la paleta nueva */
#secClients .conttituloclients {
  display: flex; width: 100%; flex-shrink: 0; justify-content: flex-start;
  font-size: .5vw; padding: max(9vw, 165px) 0 1vw 5vw; box-sizing: border-box;
}
#secClients .conttituloclients .conttitulo .textotitulo { color: var(--cli-rosa); }
#secClients .conttituloclients .conttitulo .textotitulo.posicionado { color: transparent; -webkit-text-stroke-color: var(--cli-rosa); }
#secClients .conttituloclients .conttitulo .textotitulo .manito,
#secClients .conttituloclients .conttitulo .textotitulo .asterisco { color: var(--cli-rosa); }
#secClients .contsvg tspan { fill: var(--cli-rosa) !important; }
#secClients .conttituloclients .conttitulo .textotitulo img { filter: brightness(0) invert(1) sepia(.35) saturate(2.2) hue-rotate(-25deg); opacity: .9; }

/* Lista */
#secClients .contclientesnombres { width: 100%; display: block; padding: 0 0 9vw; }
#secClients .cli-lista { display: block; }
#secClients .contclientesnombres ul li.cli {
  position: relative; display: block; margin-top: -1px;
  padding: .14em 5vw .06em;
  font-family: "Neue Montreal", sans-serif; font-size: 4.2vw; line-height: .9;
  text-align: left; color: var(--cli-rosa); cursor: default;
}

/* Líneas arriba y abajo de la fila */
#secClients li.cli::before,
#secClients li.cli::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: currentColor; opacity: .7;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.3, 0, .2, 1);
}
#secClients li.cli::before { top: 0; }
#secClients li.cli::after { bottom: 0; }

/* Nombre: la sans sube y entra la mezcla de serif desde abajo (rápido) */
#secClients .cli-mask { display: block; position: relative; overflow: hidden; height: 1em; }
#secClients .cli-n,
#secClients .cli-s { display: block; white-space: nowrap; transition: transform var(--cli-rapido); }
#secClients .cli-s { position: absolute; left: 0; top: 0; line-height: .95; transform: translateY(105%); }
#secClients .cli-s .t-r { font-family: "Instrument Serif", Georgia, serif; font-style: normal; font-size: 1.06em; letter-spacing: -.01em; }
#secClients .cli-s .t-i { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.06em; letter-spacing: -.015em; }
#secClients .cli-s .t-p { font-family: "Pixelify Sans", monospace; font-size: .86em; letter-spacing: .01em; }

/* Rubro a la derecha */
#secClients .cli-rubro {
  position: absolute; right: 5vw; top: 50%;
  font-size: .85vw; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translateY(0);
  transition: opacity .18s ease .05s, transform .22s cubic-bezier(.2, .7, .2, 1) .05s;
}

/* Hover controlado por JS (assets/js/clientes.js): .activo muestra líneas y rubro;
   .cambio alterna sans/serif 4 veces y queda en la serif. */
#secClients .cli-n, #secClients .cli-s { transition: transform .08s cubic-bezier(.3, 0, .2, 1); }
#secClients li.cli.activo::before,
#secClients li.cli.activo::after { transform: scaleX(1); }
#secClients li.cli.cambio .cli-n { transform: translateY(-105%); }
#secClients li.cli.cambio .cli-s { transform: translateY(0); }
#secClients li.cli.activo .cli-rubro { opacity: .75; transform: translateY(-50%); }

/* Footer en la paleta de la sección */
body.en-clientes .newfooter { background: #1e1d1c; }
body.en-clientes .newfooter .cont .item .abtnredes,
body.en-clientes .newfooter .cont .item .ptexto { color: #f2cfce; }

/* Celular y tablet: lista grande, sin efecto */
@media screen and (max-width: 768px) {
  #secClients .conttituloclients { height: auto; font-size: .9vw; padding: 26vw 0 4vw 6vw; }
  #secClients .conttituloclients .conttitulo { margin: 0; }
  #secClients .contclientesnombres { height: auto; padding-bottom: 24vw; }
  #secClients .contclientesnombres ul { display: block; }
  #secClients .contclientesnombres ul li.cli { font-size: 7.2vw; padding: .12em 6vw .04em; }
  #secClients .cli-rubro { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #secClients li.cli::before, #secClients li.cli::after,
  #secClients .cli-n, #secClients .cli-s, #secClients .cli-rubro { transition: none; }
}