/* ============================================================
   gss-cli — página de Clientes [gss_clients]
   Diseño aprobado el 2026-10-10 (maqueta v4). Claro y sobrio, un solo acento (neón).
   Contenido a 1366 px con gutter de 40 px. Botones y pestañas de gss-ui (.gss-btn, .gss-filter).
   ============================================================ */
.gss-cli { --c-q: #041438; --c-neon: #5078FF; --c-ink: #1a2236; --c-mut: #5d667a; --c-line: #e6eaf3; --c-wash: #f5f7fc;
  font-family: 'Poppins', sans-serif; color: var(--c-ink); }
.gss-cli *, .gss-cli *::before, .gss-cli *::after { box-sizing: border-box; }
.gss-cli img { max-width: 100%; display: block; }
.gss-cli__wrap { max-width: 1366px; margin: 0 auto; padding-inline: 40px; }
.gss-cli h1, .gss-cli h2 { margin: 0; padding: 0; font-family: inherit; color: var(--c-q); text-wrap: balance; }
.gss-cli p { margin: 0; padding: 0; }
.gss-cli a { text-decoration: none; }
.gss-cli__lnk { color: var(--c-neon); font-weight: 500; font-size: 15px; }
.gss-cli__lnk:hover { text-decoration: underline; }
.gss-cli__stars { display: block; color: #ffb547; letter-spacing: 2px; font-size: 13px; line-height: 1; }

/* ---------- cabecera a todo el ancho ----------
   El fondo sube por detrás de la cabecera de la web (modo «clear», texto oscuro), como en gss-mhero.
   La foto va a sangre por la derecha y se funde con el fondo; la pantalla de Quantum va encima. */
body.gss-mm-on .l-main > .l-section:first-of-type:has(.gss-cli) > .l-section-h { padding-top: 0 !important; }
.gss-cli__hero { position: relative; overflow: hidden; background: #f3f6fd;
  padding: calc(var(--header-height, 84px) + clamp(36px, 5vw, 72px)) 0 150px; }
.gss-cli__ph { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.gss-cli__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 35%; }
.gss-cli__ph::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #f3f6fd 0%, rgba(243, 246, 253, .75) 18%, rgba(243, 246, 253, 0) 46%),
              linear-gradient(180deg, #f3f6fd 0%, rgba(243, 246, 253, .85) calc(var(--header-height, 84px) * .9), rgba(243, 246, 253, 0) calc(var(--header-height, 84px) * 2.2)),
              linear-gradient(0deg, rgba(243, 246, 253, .9) 0%, rgba(243, 246, 253, 0) 28%); }
.gss-cli__logos { position: relative; z-index: 3; margin-top: -84px; }
.gss-cli__hgrid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.gss-cli .gss-cli__h1 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.06; font-weight: 700; letter-spacing: -.03em; }
.gss-cli__h1 em { font-style: normal; color: var(--c-neon); }
.gss-cli__sub { margin-top: 22px !important; font-size: 18px; line-height: 1.6; color: var(--c-mut); max-width: 44ch; }
.gss-cli__proof { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; }
.gss-cli__proof img { width: 40px; height: auto; }
.gss-cli__proof small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--c-mut); }
.gss-cli__proof small b { color: var(--c-ink); font-weight: 600; }
.gss-cli__proof:hover small { text-decoration: underline; }
.gss-cli__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 20px; }
.gss-cli__shot { position: relative; padding-bottom: 8px; }
.gss-cli__ui { width: 78%; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(4, 20, 56, .2); }
.gss-cli__ui img { width: 100%; height: auto; }
.gss-cli__ui i { display: flex; padding: 9px 12px; background: #f1f3f9; border-bottom: 1px solid var(--c-line); }
.gss-cli__ui i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #d5daea; box-shadow: 13px 0 #d5daea, 26px 0 #d5daea; }

/* ---------- tira de logos en movimiento (la misma de la portada) ---------- */
.gss-cli__lcard { background: #fff; border: 1px solid var(--c-line); border-radius: 24px; box-shadow: 0 18px 40px rgba(4, 20, 56, .08);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; overflow: hidden; }
.gss-cli .gss-cli__ltxt { padding: 24px 32px; border-right: 1px solid var(--c-line); font-size: 14.5px; line-height: 1.4; color: var(--c-mut); max-width: 340px; }
.gss-cli__ltxt b { display: block; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--c-ink); }
.gss-cli__mq { 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); }
.gss-cli__track { display: flex; align-items: center; gap: 56px; width: max-content; padding: 24px 32px; animation: gss-cli-mq 55s linear infinite; }
.gss-cli__mq:hover .gss-cli__track { animation-play-state: paused; }
.gss-cli__track img { display: block; width: auto; max-width: none; flex: none; }
@keyframes gss-cli-mq { to { transform: translateX(-50%); } }

/* El pie (gss-foot) es una banda oscura a todo el ancho, pero Impreza le deja el margen lateral de la
   sección y debajo del CTA a sangre se ven dos bordes que no cuadran. En esta página va a sangre y pegado al CTA. */
body:has(.gss-cli) .l-footer .l-section:has(.gss-foot) .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- sectores ---------- */
.gss-cli__sec { padding: 90px 0; scroll-margin-top: 90px; }
.gss-cli .gss-cli__h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
.gss-cli__lead { margin-top: 12px !important; font-size: 17px; color: var(--c-mut); }
.gss-cli__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 30px; }
.gss-cli__tabs .gss-filter { font-size: 14px; padding: 10px 17px; }
.gss-cli__tabs .gss-filter[aria-selected="true"] { color: #fff; background: var(--c-q); border-color: var(--c-q); }
.gss-cli__panel { animation: gss-cli-in .3s ease; }
.gss-cli__panel[hidden] { display: none; }
@keyframes gss-cli-in { from { opacity: .3; } to { opacity: 1; } }
.gss-cli__phead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 30px; margin-bottom: 22px; }
.gss-cli__phead p { font-size: 16px; color: var(--c-mut); }
.gss-cli__wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.gss-cli__wall li { margin: 0; padding: 0 12px; aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--c-wash); border-radius: 14px; }
.gss-cli__wall li::before { display: none; }
.gss-cli__wall img { max-width: 100%; height: auto; object-fit: contain; }
.gss-cli__more { font-size: 13px; color: var(--c-mut); text-align: center; }

.gss-cli__cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 26px; }
.gss-cli__case { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px 22px 14px 14px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--gss-r-card, 20px); color: var(--c-ink); transition: border-color .3s, box-shadow .3s; }
.gss-cli__case:hover { border-color: #c9d3f3; box-shadow: 0 14px 34px rgba(4, 20, 56, .08); }
.gss-cli__cimg { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.gss-cli__cimg img { width: 100%; height: 100%; object-fit: cover; }
.gss-cli__cimg.is-flip img { transform: scaleX(-1); }
.gss-cli__cbody { display: block; min-width: 0; }
.gss-cli__cco { display: block; font-size: 13px; color: var(--c-mut); }
.gss-cli__case b { display: block; margin: 4px 0; font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; color: var(--c-neon); }
.gss-cli__cm { display: block; font-size: 14px; line-height: 1.4; }
.gss-cli__cgo { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--c-neon); }

/* ---------- G2 ---------- */
.gss-cli__g2 { padding: 90px 0; background: var(--c-wash); }
.gss-cli__ggrid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: start; }
.gss-cli__scores { display: flex; gap: 32px; margin-top: 24px; }
.gss-cli__scores small { white-space: nowrap; }
.gss-cli__scores a { color: var(--c-ink); }
.gss-cli__scores b { display: block; margin-bottom: 4px; font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--c-q); }
.gss-cli__scores small { display: block; margin-top: 6px; font-size: 13px; color: var(--c-mut); }
.gss-cli__scores a:hover small { text-decoration: underline; }
.gss-cli__badges { display: flex; gap: 10px; margin-top: 22px; }
.gss-cli__badges img { width: 78px; height: auto; }
.gss-cli__revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gss-cli__rev { margin: 0; padding: 24px; background: #fff; border: 0; border-radius: var(--gss-r-card, 20px); display: flex; flex-direction: column; gap: 12px; }
.gss-cli__rev::before { display: none; }
.gss-cli__rev p { font-size: 15.5px; line-height: 1.55; font-style: normal; color: var(--c-ink); }
.gss-cli__rev footer { margin-top: auto; font-size: 13px; color: var(--c-mut); }

@media (max-width: 1100px) {
  .gss-cli__hgrid, .gss-cli__ggrid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  /* sin sitio para la foto a sangre: queda la pantalla de Quantum a todo el ancho */
  .gss-cli__ph { display: none; }
  .gss-cli__ui { width: 100%; max-width: 640px; }
  .gss-cli__hero { padding-bottom: 130px; }
  .gss-cli__wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gss-cli__revs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gss-cli__wrap { padding-inline: 20px; }
  .gss-cli__hero { padding: calc(var(--header-height, 64px) + 24px) 0 110px; }
  .gss-cli__logos { margin-top: -70px; }
  .gss-cli .gss-cli__ltxt { padding: 18px 22px; }
  .gss-cli__track { gap: 40px; padding: 18px 22px; }
  .gss-cli__lcard { grid-template-columns: minmax(0, 1fr); }
  .gss-cli .gss-cli__ltxt { border-right: 0; border-bottom: 1px solid var(--c-line); max-width: none; }
  .gss-cli__sec, .gss-cli__g2 { padding: 64px 0; }
  .gss-cli__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .gss-cli__tabs .gss-filter { flex: none; }
  .gss-cli__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .gss-cli__case { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .gss-cli__panel, .gss-cli__track { animation: none; } }