/* =========================================================
   CLIENTES V100 — LightRays + LogoLoop limpio
   ========================================================= */

body:has(.clients-v100-page) {
  background: #020a12;
  overflow-x: hidden;
}

.clients-v100-page {
  position: relative;
  min-height: auto;
  overflow: hidden;
  isolation: isolate;
  color: #f7fbff;
  background:
    radial-gradient(circle at 50% 8%, rgba(30, 111, 166, .16), transparent 34%),
    radial-gradient(circle at 18% 42%, rgba(20, 114, 160, .08), transparent 34%),
    linear-gradient(180deg, #071521 0%, #06131f 47%, #04101a 78%, #01090f 100%);
}

.clients-v99-bg,
.clients-v100-lightrays,
.clients-v100-bgwash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.clients-v99-bg {
  z-index: -2;
  overflow: hidden;
}

.clients-v100-lightrays {
  z-index: 0;
  display: block;
  opacity: .96;
  mix-blend-mode: screen;
}

/* Ligera integración con el footer: no tapa los rayos, sólo los asienta. */
.clients-v100-bgwash {
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(2, 10, 18, .03) 0%,
      rgba(2, 10, 18, .00) 35%,
      rgba(2, 10, 18, .08) 68%,
      rgba(1, 7, 13, .48) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(113, 223, 255, .04), transparent 42%);
}

.clients-v97-hero {
  position: relative;
  min-height: auto;
  padding: clamp(126px, 12vh, 154px) 0 clamp(56px, 6vh, 78px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.clients-v97-heading {
  width: min(850px, calc(100% - 48px));
  margin: 0 auto clamp(38px, 4vh, 48px);
  text-align: center;
}

.clients-v97-eyebrow { display: none !important; }

.clients-v97-heading h1 {
  margin: 0;
  color: #f6fbff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(36px, 4.8vw, 62px);
  line-height: 1;
  font-weight: 680;
  letter-spacing: .13em;
  text-indent: .13em;
  text-transform: uppercase;
  text-shadow: 0 8px 30px rgba(0,0,0,.2);
}

.clients-v97-copy {
  width: min(690px, 100%);
  margin: 17px auto 0;
  color: rgba(235, 243, 251, .84);
  font-size: clamp(15px, 1.16vw, 17px);
  line-height: 1.72;
  text-shadow: 0 2px 18px rgba(0,0,0,.28);
}

.clients-v97-heading-line {
  display: block;
  width: 102px;
  height: 2px;
  margin: 19px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #62defe 28%, #648bff 57%, #b97dff 82%, transparent);
  box-shadow: 0 0 16px rgba(94, 211, 255, .26);
}

.clients-v97-loops {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  display: grid;
  gap: clamp(12px, 1.8vh, 18px);
  padding: 4px 0 8px;
}

/* SIN cajas, sin marcos y sin fondos detrás de cada fila. */
.clients-logo-row,
.clients-logo-row--featured {
  --row-height: clamp(82px, 8.6vw, 112px);
  position: relative;
  width: 100%;
  height: var(--row-height);
  overflow: hidden;
  contain: layout paint;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
}

.clients-logo-row::before,
.clients-logo-row::after,
.clients-logo-row--featured::before,
.clients-logo-row--featured::after {
  display: none !important;
  content: none !important;
}

.clients-logo-track {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.clients-logo-sequence {
  list-style: none;
  margin: 0;
  padding: 0 clamp(24px, 3vw, 48px) 0 0;
  display: flex;
  align-items: center;
  gap: clamp(42px, 5.2vw, 86px);
  height: 100%;
  flex: 0 0 auto;
}

.clients-logo-item {
  flex: 0 0 auto;
  width: clamp(128px, 12vw, 196px);
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}

.clients-logo-item::before,
.clients-logo-item::after {
  display: none !important;
  content: none !important;
}

.clients-logo-item img {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: clamp(56px, 5.4vw, 78px);
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter:
    saturate(1.08)
    brightness(1.12)
    contrast(1.08)
    drop-shadow(0 2px 1px rgba(255,255,255,.05))
    drop-shadow(0 10px 20px rgba(0,0,0,.28));
  transform: translateZ(0) scale(1);
  transition: transform .32s cubic-bezier(.2,.7,.2,1), filter .32s ease, opacity .32s ease;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.clients-logo-row--featured .clients-logo-item img {
  max-height: clamp(60px, 5.9vw, 84px);
}

.clients-logo-item:hover img {
  filter:
    saturate(1.14)
    brightness(1.19)
    contrast(1.08)
    drop-shadow(0 3px 1px rgba(255,255,255,.08))
    drop-shadow(0 13px 24px rgba(0,0,0,.28));
  transform: scale(1.075);
}

.clients-v97-caption {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 48px));
  margin: clamp(30px, 3.8vh, 42px) auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  color: rgba(220, 232, 245, .58);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .21em;
  text-transform: uppercase;
  text-align: center;
}

.clients-v97-caption p { margin: 0; }

.clients-v97-caption span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112, 207, 255, .24));
}

.clients-v97-caption span:last-child {
  background: linear-gradient(90deg, rgba(134, 151, 255, .24), transparent);
}

@media (max-width: 900px) {
  .clients-v97-hero {
    padding-top: 118px;
    padding-bottom: 50px;
  }

  .clients-v97-heading { margin-bottom: 30px; }

  .clients-logo-row,
  .clients-logo-row--featured { --row-height: 86px; }

  .clients-logo-sequence { gap: 32px; }

  .clients-logo-item { width: clamp(112px, 21vw, 170px); }

  .clients-logo-item img,
  .clients-logo-row--featured .clients-logo-item img { max-height: 60px; }
}

@media (max-width: 640px) {
  .clients-v97-heading { width: min(100%, calc(100% - 28px)); }

  .clients-v97-heading h1 {
    font-size: clamp(30px, 9.5vw, 40px);
    letter-spacing: .11em;
    text-indent: .11em;
  }

  .clients-v97-copy {
    font-size: 14px;
    line-height: 1.65;
  }

  .clients-logo-row,
  .clients-logo-row--featured { --row-height: 78px; }

  .clients-logo-sequence {
    gap: 25px;
    padding-right: 22px;
  }

  .clients-logo-item { width: 118px; }

  .clients-logo-item img,
  .clients-logo-row--featured .clients-logo-item img { max-height: 52px; }

  .clients-v97-caption {
    width: calc(100% - 28px);
    gap: 10px;
    font-size: 8px;
    letter-spacing: .16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-v100-lightrays { opacity: .62; }
  .clients-logo-track { transform: translate3d(0,0,0) !important; }
}


/* =========================================================
   CLIENTES V102 — LightRays continuo + composición más arriba
   ========================================================= */
body.clients-v102-body{
  position:relative;
  min-height:100%;
  background:#020b16;
  overflow-x:hidden;
  isolation:isolate;
}

.clients-v102-body .clients-v100-page{
  position:relative;
  z-index:2;
  background:transparent!important;
}

/* El LightRays vive detrás de TODA la página, incluido el footer. */
.clients-v102-body .clients-v99-bg{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:0!important;
  display:block!important;
  pointer-events:none!important;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(26,118,170,.18),transparent 38%),
    linear-gradient(180deg,#04111f 0%,#03101c 50%,#020b14 100%);
}

.clients-v102-body .clients-v100-lightrays{
  display:block!important;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.82;
  mix-blend-mode:screen;
}

/* Oscurece apenas el campo para conservar contraste en logos claros y oscuros. */
.clients-v102-body .clients-v100-bgwash{
  display:block!important;
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,
      rgba(2,10,20,.20) 0%,
      rgba(2,10,20,.13) 24%,
      rgba(2,9,18,.24) 58%,
      rgba(1,7,14,.42) 100%),
    radial-gradient(ellipse at 50% 5%,rgba(100,225,255,.055),transparent 46%);
}

.clients-v102-body .home-header{position:relative;z-index:50;}
.clients-v102-body .footer{position:relative;z-index:4;}

/* Arriba, como una cabecera normal: sin el enorme vacío anterior. */
.clients-v102-body .clients-v97-hero{
  min-height:auto;
  padding:clamp(98px,10vh,116px) 0 clamp(48px,5.5vh,68px);
  justify-content:flex-start;
}

.clients-v102-body .clients-v97-heading{
  margin:0 auto clamp(26px,3vh,36px);
}

.clients-v102-body .clients-v97-heading h1{
  font-size:clamp(34px,4.2vw,54px);
  line-height:.98;
  letter-spacing:.115em;
  text-indent:.115em;
}

.clients-v102-body .clients-v97-copy{
  margin-top:14px;
}

.clients-v102-body .clients-v97-heading-line{
  margin-top:15px;
}

/* Logos sin cajas; brillo suficiente para el nuevo fondo. */
.clients-v102-body .clients-logo-item img{
  filter:
    saturate(1.10)
    brightness(1.16)
    contrast(1.08)
    drop-shadow(0 9px 20px rgba(0,0,0,.34));
}

/* El pie continúa sobre el mismo LightRays y ya no cambia de shader. */
.clients-v102-body .footer-v55 .footer-molten-canvas,
.clients-v102-body .footer-v55 .footer-decor{display:none!important;}
.clients-v102-body .footer-modern.footer-v55::before{display:none!important;content:none!important;}
.clients-v102-body .footer-modern.footer-v55{
  background:transparent!important;
}
.clients-v102-body .footer-modern.footer-v55::after{
  background:linear-gradient(180deg,rgba(1,8,15,.07),rgba(1,7,14,.24) 55%,rgba(1,6,12,.46) 100%)!important;
}
.clients-v102-body .footer-modern.footer-v55 .footer-modern-inner::before{display:none!important;content:none!important;}

@media(max-width:900px){
  .clients-v102-body .clients-v97-hero{padding-top:96px;}
  .clients-v102-body .clients-v97-heading{margin-bottom:24px;}
}

@media(max-width:640px){
  .clients-v102-body .clients-v97-hero{padding-top:88px;}
  .clients-v102-body .clients-v97-heading h1{font-size:clamp(30px,9vw,38px);}
  .clients-v102-body .clients-v100-lightrays{opacity:.72;}
}

@media(prefers-reduced-motion:reduce){
  .clients-v102-body .clients-v100-lightrays{opacity:.55;}
}

/* =========================================================
   CLIENTES V103 — título más arriba + partículas discretas
   ========================================================= */
.clients-v103-particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.58;
}

/* Mantiene el velo suave por encima de partículas y rayos. */
.clients-v102-body .clients-v100-bgwash{
  z-index:2;
}

.clients-v102-body .clients-v97-hero{
  padding:clamp(76px,8.3vh,92px) 0 clamp(48px,5.5vh,68px);
}

.clients-v102-body .clients-v97-heading{
  margin:0 auto clamp(24px,2.8vh,34px);
}

.clients-v102-body .clients-v97-heading h1{
  font-size:clamp(34px,4vw,52px);
}

@media(max-width:900px){
  .clients-v102-body .clients-v97-hero{padding-top:84px;}
}

@media(max-width:640px){
  .clients-v102-body .clients-v97-hero{padding-top:80px;}
  .clients-v103-particles{opacity:.42;}
}

@media(prefers-reduced-motion:reduce){
  .clients-v103-particles{opacity:.30;}
}

/* =========================================================
   GPovC V104 — CLIENTES con título pequeño estilo Acerca
   ========================================================= */
.clients-v102-body .clients-v97-hero{
  padding:clamp(72px,7.8vh,88px) 0 clamp(48px,5vh,64px);
}

.clients-v102-body .clients-v97-heading{
  width:min(880px,calc(100% - 48px));
  margin:0 auto clamp(30px,3.2vh,38px);
}

.clients-v102-body .clients-v97-heading h1{
  margin:0;
  color:rgba(226,240,255,.80);
  font:500 clamp(12px,1vw,14px)/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.33em;
  text-transform:uppercase;
  text-indent:.33em;
  text-shadow:0 0 22px rgba(125,212,255,.18);
}

.clients-v102-body .clients-v97-heading h1::after{
  content:"";
  display:block;
  width:78px;
  height:1px;
  margin:13px auto 0;
  background:linear-gradient(90deg,transparent,#79ecff 48%,#a882ff 52%,transparent);
  opacity:.62;
}

.clients-v102-body .clients-v97-copy{
  width:min(720px,100%);
  margin:20px auto 0;
  color:rgba(235,243,251,.84);
  font-size:clamp(15px,1.16vw,17px);
  line-height:1.72;
}

.clients-v102-body .clients-v97-heading-line{
  display:none;
}

@media(max-width:640px){
  .clients-v102-body .clients-v97-hero{padding-top:76px;}
  .clients-v102-body .clients-v97-heading h1{font-size:11px;letter-spacing:.28em;text-indent:.28em;}
  .clients-v102-body .clients-v97-copy{margin-top:18px;font-size:14px;line-height:1.68;}
}

/* =========================================================
   GPovC V105 — CLIENTES: bloque más arriba bajo el menú
   ========================================================= */
.clients-v102-body .clients-v97-hero{
  min-height:auto !important;
  margin-top:-32px !important;
  padding:56px 0 42px !important;
}

.clients-v102-body .clients-v97-heading{
  width:min(880px,calc(100% - 48px)) !important;
  margin:0 auto 24px !important;
}

.clients-v102-body .clients-v97-heading h1{
  margin:0 !important;
  color:rgba(226,240,255,.80) !important;
  font:500 clamp(12px,1vw,14px)/1.2 Arial,Helvetica,sans-serif !important;
  letter-spacing:.33em !important;
  text-indent:.33em !important;
  text-transform:uppercase !important;
  text-shadow:0 0 22px rgba(125,212,255,.18) !important;
}

.clients-v102-body .clients-v97-heading h1::after{
  content:"" !important;
  display:block !important;
  width:78px !important;
  height:1px !important;
  margin:13px auto 0 !important;
  background:linear-gradient(90deg,transparent,#79ecff 48%,#a882ff 52%,transparent) !important;
  opacity:.62 !important;
}

.clients-v102-body .clients-v97-copy{
  width:min(760px,100%) !important;
  margin:18px auto 0 !important;
  color:rgba(235,243,251,.84) !important;
  font-size:clamp(15px,1.16vw,17px) !important;
  line-height:1.72 !important;
}

.clients-v102-body .clients-v97-heading-line{display:none !important;}

@media(max-width:640px){
  .clients-v102-body .clients-v97-hero{
    margin-top:-18px !important;
    padding:52px 0 36px !important;
  }
  .clients-v102-body .clients-v97-heading h1{
    font-size:11px !important;
    letter-spacing:.28em !important;
    text-indent:.28em !important;
  }
  .clients-v102-body .clients-v97-copy{
    margin-top:16px !important;
    font-size:14px !important;
    line-height:1.66 !important;
  }
}

/* =========================================================
   GPovC V106 — CLIENTES con el mismo fondo de SOLUCIONES
   ========================================================= */
body.clients-v102-body{
  background:#020713 !important;
}

.clients-v102-body .clients-v106-bg{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:0 !important;
  display:block !important;
  pointer-events:none !important;
  overflow:hidden !important;
  background:#020713 !important;
}

.clients-v102-body .clients-v106-fluid{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  pointer-events:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

.clients-v102-body .clients-v106-shade{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
}

/* Oculta el antiguo LightRays/partículas si quedara algún rastro. */
.clients-v102-body .clients-v100-lightrays,
.clients-v102-body .clients-v103-particles,
.clients-v102-body .clients-v100-bgwash{
  display:none !important;
}

.clients-v102-body .clients-v100-page{
  position:relative;
  z-index:3;
  background:transparent !important;
}

/* El bloque de CLIENTES queda a la misma altura visual que SOLUCIONES. */
.clients-v102-body .clients-v97-hero{
  min-height:auto !important;
  margin-top:-22px !important;
  padding:56px 0 38px !important;
}

.clients-v102-body .clients-v97-heading{
  margin:0 auto 18px !important;
}

.clients-v102-body .clients-v97-copy{
  margin:14px auto 0 !important;
}

/* El footer ahora comparte exactamente el mismo ambiente visual de Soluciones. */
.clients-v102-body .footer-v55 .footer-molten-canvas,
.clients-v102-body .footer-v55 .footer-decor{
  display:none !important;
}
.clients-v102-body .footer-modern.footer-v55::before{
  display:none !important;
  content:none !important;
}
.clients-v102-body .footer-modern.footer-v55{
  background:transparent !important;
}
.clients-v102-body .footer-modern.footer-v55::after{
  background:
    linear-gradient(180deg,rgba(2,8,16,.06),rgba(2,8,16,.18) 44%,rgba(1,6,12,.42) 100%) !important;
}
.clients-v102-body .footer-modern.footer-v55 .footer-modern-inner::before{
  display:none !important;
  content:none !important;
}

@media (max-width:900px){
  .clients-v102-body .clients-v97-hero{
    margin-top:-14px !important;
    padding-top:54px !important;
  }
}

@media (max-width:640px){
  .clients-v102-body .clients-v97-hero{
    margin-top:-10px !important;
    padding-top:50px !important;
    padding-bottom:32px !important;
  }
}


/* =========================================================
   V112 — legibilidad final de logotipos, sin cajas ni placas
   ========================================================= */
.clients-v102-body .clients-logo-item img{
  filter:
    saturate(1.10)
    brightness(1.18)
    contrast(1.09)
    drop-shadow(0 0 1px rgba(240,249,255,.38))
    drop-shadow(0 0 11px rgba(95,196,255,.14))
    drop-shadow(0 9px 20px rgba(0,0,0,.34))!important;
}
.clients-v102-body .clients-logo-item:hover img{
  filter:
    saturate(1.14)
    brightness(1.22)
    contrast(1.10)
    drop-shadow(0 0 1px rgba(255,255,255,.46))
    drop-shadow(0 0 15px rgba(102,203,255,.18))
    drop-shadow(0 12px 24px rgba(0,0,0,.32))!important;
}