:root{--clients-navy:#07152f;--clients-blue:#1688ff;--clients-blue2:#55b7ff;--clients-ink:#0a1732;--clients-muted:#66799b;--clients-line:#d7e4f3;--clients-ice:#f4f8fd;--clients-gold:#e8c57e}
html,body{max-width:100%;overflow-x:hidden}
body.clientsPage{margin:0;background:#fff;color:var(--clients-ink);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.clientsPage .wrap{width:min(calc(100% - 56px),1320px);margin-inline:auto}
.clientsPage .eyebrow{display:block;color:#62beff;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}

.clientsPage h1,.clientsPage h2,.clientsPage h3,.clientsPage strong,.clientsPage button,.clientsPage a{font-family:'Manrope',Arial,sans-serif}
.clientsPage h1,.clientsPage h2{font-weight:800;letter-spacing:-.045em}
.clientsPage h1 em,.clientsPage h2 em{font-family:'Manrope',Arial,sans-serif;font-style:normal;font-weight:800}

/* HEADER · mismo sistema del INDEX */
.clientsPage .header{position:fixed;inset:0 0 auto;z-index:100;padding-top:18px;background:transparent!important;border:0!important;box-shadow:none!important;pointer-events:none;transform:translate3d(0,0,0);opacity:1;transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .28s ease}
.clientsPage .header .nav{pointer-events:auto;width:min(calc(100% - 56px),1320px);height:70px;padding:0 16px 0 20px;display:flex;align-items:center;gap:18px;border:1px solid rgba(255,255,255,.10);border-radius:26px;background:linear-gradient(135deg,rgba(13,28,39,.94),rgba(23,35,39,.90));box-shadow:0 18px 48px rgba(2,12,27,.20),inset 0 1px 0 rgba(255,255,255,.045);backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08)}
.clientsPage .header.scrolled .nav{background:linear-gradient(135deg,rgba(8,23,42,.97),rgba(15,31,47,.96));border-color:rgba(255,255,255,.13);box-shadow:0 14px 42px rgba(1,10,24,.28),inset 0 1px 0 rgba(255,255,255,.05)}
.clientsPage .header.header-hidden{transform:translate3d(0,calc(-100% - 28px),0);opacity:.98}.clientsPage .header.header-visible,.clientsPage .header.open{transform:translate3d(0,0,0)!important;opacity:1!important}
.clientsPage .header .logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}.clientsPage .header .logo img{width:102px;max-height:48px;object-fit:contain;background:#fff;border-radius:12px;padding:5px 8px;box-shadow:none}.clientsPage .logoText{display:none!important}
.clientsPage .links{margin-left:auto;display:flex;align-items:center;gap:24px}.clientsPage .links a{position:relative;color:rgba(255,255,255,.76);font-size:12px;font-weight:700;text-decoration:none;transition:color .22s ease}.clientsPage .links a:hover,.clientsPage .links a:focus-visible,.clientsPage .links a.active{color:#fff}.clientsPage .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:1px;background:#63bdff}
.clientsPage .lang{display:flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.055)}.clientsPage .lang button{min-width:36px;height:34px;border:0;border-radius:999px;background:transparent;color:#b9c7d8;font:800 10px/1 'Manrope',sans-serif;cursor:pointer}.clientsPage .lang button.active{background:#fff;color:#0a1732}
.clientsPage .navCta{min-height:44px;padding:0 20px;display:inline-flex;align-items:center;gap:14px;border:0;border-radius:999px;background:#fff;color:#0a1732;text-decoration:none;font-size:12px;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.12);transition:.22s ease}.clientsPage .navCta:hover,.clientsPage .navCta:focus-visible{background:linear-gradient(135deg,#1688ff,#55b7ff);color:#fff;transform:translateY(-1px)}
.clientsPage .menu{display:none;background:transparent;border:0;color:#fff;width:42px;height:42px;place-items:center;cursor:pointer}.clientsPage .menu span{display:block;width:25px;height:1px;background:#fff;margin:5px auto}

/* HERO */
.clientsHero{position:relative;min-height:760px;display:flex;align-items:center;overflow:hidden;background:#07152f;color:#fff}
.clientsHeroMedia{position:absolute;inset:0;z-index:0;background:#07152f;overflow:hidden}
.clientsHeroSlide{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;opacity:0;transform:scale(1.02);transition:opacity .85s ease,transform 5.5s ease;will-change:opacity,transform;pointer-events:none}
.clientsHeroSlide.is-active{opacity:1;transform:scale(1.055)}
.clientsHeroSlide:nth-child(1){object-position:center 50%}
.clientsHeroSlide:nth-child(2){object-position:center 48%}
.clientsHeroSlide:nth-child(3){object-position:center 50%}
.clientsHeroShade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,16,37,.96) 0%,rgba(7,27,56,.86) 42%,rgba(7,26,52,.52) 70%,rgba(4,16,37,.70) 100%);pointer-events:none}
.clientsHeroTexture{position:absolute;inset:0;z-index:1;opacity:.12;background-image:radial-gradient(circle,rgba(136,205,255,.34) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(90deg,#000 0%,transparent 60%);pointer-events:none}
.clientsHeroGrid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);gap:76px;align-items:center;padding-top:140px;padding-bottom:100px}
.clientsHeroCopy{max-width:760px}.clientsHeroCopy .eyebrow{margin-bottom:14px}.clientsHeroCopy h1{max-width:11.5ch;margin:0 0 20px;font-family:'Manrope',Arial,sans-serif;font-size:clamp(50px,5.2vw,80px);font-weight:800;line-height:.97;letter-spacing:-.05em;text-wrap:balance}.clientsHeroCopy h1 em{display:block;color:#55b7ff;font-family:'Manrope',Arial,sans-serif;font-style:normal;font-weight:800;letter-spacing:-.05em}.clientsHeroCopy p{max-width:620px;margin:0;color:rgba(255,255,255,.84);font-size:16px;line-height:1.65}
.clientsHeroActions{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}.clientsBtn{min-height:50px;padding:0 19px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;text-decoration:none;font-size:11px;font-weight:800;transition:.24s ease}.clientsBtnPrimary{background:#fff;color:#07152f;box-shadow:0 14px 32px rgba(0,0,0,.17)}.clientsBtnPrimary:hover{background:#1688ff;color:#fff;transform:translateY(-2px)}.clientsBtnGhost{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);color:#fff;backdrop-filter:blur(10px)}.clientsBtnGhost:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.clientsHeroBottom{position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);color:#b7c8df;font-size:9px;font-weight:700;letter-spacing:.15em}

.heroClientMosaic{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;perspective:1200px}
.heroLogoCard{height:154px;display:grid;place-items:center;padding:18px;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:linear-gradient(145deg,rgba(9,27,57,.70),rgba(13,39,74,.48));box-shadow:0 20px 46px rgba(2,13,31,.24);backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08);transition:transform .35s ease,border-color .35s ease,background .35s ease}.heroLogoCard:nth-child(2),.heroLogoCard:nth-child(5){transform:translateY(20px)}.heroLogoCard:hover{transform:translateY(-5px);border-color:rgba(105,199,255,.46);background:rgba(17,51,92,.70)}.heroLogoCard:nth-child(2):hover,.heroLogoCard:nth-child(5):hover{transform:translateY(14px)}
.heroLogoCard img{max-width:88%;max-height:104px;object-fit:contain;border-radius:9px}.heroMosaicBadge{position:absolute;right:16px;bottom:-56px;min-width:180px;padding:15px 18px;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(5,22,48,.88);box-shadow:0 18px 40px rgba(0,0,0,.2);backdrop-filter:blur(14px)}.heroMosaicBadge strong{font-size:28px;line-height:1;color:#65c0ff}.heroMosaicBadge span{color:#c7d5e7;font-size:10px;line-height:1.35}

/* PROPUESTA DE RELACIÓN */
.clientsProof{background:#fff;border-bottom:1px solid #e0e8f2}.clientsProofGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:22px 0}.proofItem{position:relative;padding:17px 18px;border:1px solid #dce7f3;border-radius:18px;background:linear-gradient(180deg,#fff,#fbfdff);outline:none;transition:.28s ease}.proofItem::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;background:linear-gradient(90deg,#1688ff,#63bdff);transform:scaleX(0);transform-origin:left;transition:.28s ease}.proofItem:hover,.proofItem:focus-visible,.proofItem.is-active{transform:translateY(-4px);border-color:#b9d8f5;box-shadow:0 14px 32px rgba(17,81,156,.09)}.proofItem:hover::after,.proofItem:focus-visible::after,.proofItem.is-active::after{transform:scaleX(1)}.proofItem small{display:block;margin-bottom:6px;color:#1688ff;font-size:8px;font-weight:800;letter-spacing:.13em}.proofItem strong{display:block;color:#0a1732;font-size:14px}.proofItem>span{display:block;margin-top:3px;color:#7183a0;font-size:10.5px;line-height:1.45}

/* CLIENTES */
.clientsSection{padding:100px 0 110px;background:#f6f9fd}.clientsLead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.7fr);gap:72px;align-items:end;margin-bottom:38px}.clientsLead .eyebrow{color:#1688ff}.clientsLead h2{max-width:14ch;margin:10px 0 0;font-family:'Manrope',Arial,sans-serif;font-size:clamp(40px,4.3vw,62px);font-weight:800;line-height:1.02;letter-spacing:-.045em}.clientsLead h2 em{color:#1688ff;font-family:'Manrope',Arial,sans-serif;font-style:normal;font-weight:800;letter-spacing:-.045em}.clientsLead p{margin:0;color:#66799b;font-size:14.5px;line-height:1.72}
.clientTrack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.clientCard{position:relative;overflow:hidden;min-height:250px;padding:14px;border:1px solid #d6e3f1;border-radius:24px;background:#fff;box-shadow:0 14px 34px rgba(21,63,115,.055);outline:none;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}.clientCard::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 12%,rgba(59,157,255,.11),transparent 42%);opacity:0;transition:.35s ease}.clientCard::after{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#4bb5ff,#0869e8);transform:scaleY(0);transform-origin:top;transition:.35s ease}.clientCard:hover,.clientCard:focus-visible,.clientCard.is-active{transform:translateY(-7px);border-color:rgba(31,139,255,.52);box-shadow:0 22px 50px rgba(19,88,166,.13)}.clientCard:hover::before,.clientCard:focus-visible::before,.clientCard.is-active::before{opacity:1}.clientCard:hover::after,.clientCard:focus-visible::after,.clientCard.is-active::after{transform:scaleY(1)}
.clientLogoFrame{position:relative;height:178px;display:grid;place-items:center;padding:22px;border-radius:18px;background:linear-gradient(180deg,#fff,#f7faff);border:1px solid #e4ecf5;overflow:hidden}
.clientLogoFrame img{position:relative;z-index:1;display:block;max-width:88%;max-height:128px;width:auto;height:auto;object-fit:contain;object-position:center;filter:saturate(.98);transition:transform .38s ease}
.clientCard:hover .clientLogoFrame img,.clientCard.is-active .clientLogoFrame img{transform:scale(1.035)}

/* Ajustes por proporción: todos son logos, nunca se recortan. */
.clientCard[data-client="Cotexsur"] .clientLogoFrame img,
.clientCard[data-client="Intepa"] .clientLogoFrame img{max-width:92%;max-height:108px}
.clientCard[data-client="Carvimsa"] .clientLogoFrame img{max-width:74%;max-height:142px}
.clientCard[data-client="Creaciones Santino"] .clientLogoFrame img{max-width:90%;max-height:124px}
.clientCard[data-client="Mia Sport"] .clientLogoFrame img{max-width:82%;max-height:122px}
.clientCard[data-client="Full Agro"] .clientLogoFrame img{max-width:82%;max-height:124px}
.clientCard[data-client="VZ"] .clientLogoFrame img{max-width:72%;max-height:132px}
.clientCard[data-client="Phoenix Foods"] .clientLogoFrame img{max-width:68%;max-height:132px}
.clientCard[data-client="Or Ahava"] .clientLogoFrame img{max-width:88%;max-height:116px}
.clientMeta{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 7px 3px}.clientMeta small{color:#1688ff;font-size:9px;font-weight:800;letter-spacing:.12em}.clientMeta strong{color:#0a1732;font-size:13px;font-weight:800;text-align:right}.clientSwipeHint{display:none}

/* RELACIÓN */
.clientRelationship{padding:100px 0;background:#fff}.relationshipGrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:76px;align-items:center}.relationshipCopy .eyebrow{color:#1688ff}.relationshipCopy h2{max-width:13ch;margin:10px 0 20px;font-family:'Manrope',Arial,sans-serif;font-size:clamp(40px,4.2vw,60px);font-weight:800;line-height:1.02;letter-spacing:-.045em}.relationshipCopy h2 em{display:block;color:#1688ff;font-family:'Manrope',Arial,sans-serif;font-style:normal;font-weight:800;letter-spacing:-.045em}.relationshipCopy p{max-width:610px;margin:0;color:#66799b;font-size:14.5px;line-height:1.72}.relationshipSteps{display:grid;gap:12px}.relationshipSteps article{position:relative;display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;padding:21px;border:1px solid #d9e6f3;border-radius:20px;background:linear-gradient(145deg,#fff,#f8fbff);transition:.3s ease}.relationshipSteps article:hover{transform:translateX(6px);border-color:#b7d6f3;box-shadow:0 14px 32px rgba(20,73,139,.08)}.relationshipSteps small{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:#edf6ff;color:#1688ff;font-size:9px;font-weight:800}.relationshipSteps strong{display:block;margin-bottom:5px;color:#0a1732;font-size:14px}.relationshipSteps span{display:block;color:#7183a0;font-size:11.5px;line-height:1.55}

/* CTA */
.clientsCta{position:relative;overflow:hidden;padding:84px 0;background:radial-gradient(circle at 84% 30%,rgba(50,151,255,.28),transparent 24%),linear-gradient(110deg,#103b73 0%,#0e2f5d 52%,#133d73 100%);color:#fff}.clientsCta::before{content:"";position:absolute;inset:0;opacity:.20;background-image:radial-gradient(circle,rgba(255,255,255,.24) 1px,transparent 1px);background-size:18px 18px;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}.clientsCtaGrid{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}.clientsCta h2{max-width:820px;margin:9px 0 0;font-family:'Manrope',Arial,sans-serif;font-size:clamp(38px,4.2vw,58px);font-weight:800;line-height:1.02;letter-spacing:-.045em}.clientsCta h2 em{color:#74c8ff;font-family:'Manrope',Arial,sans-serif;font-style:normal;font-weight:800;letter-spacing:-.045em}.clientsCtaBtn{min-height:56px;padding:0 26px;display:inline-flex;align-items:center;gap:13px;border-radius:999px;background:linear-gradient(180deg,#eecb86,#e1bd77);color:#0a1732;text-decoration:none;font-size:11px;font-weight:800;box-shadow:0 14px 34px rgba(2,16,40,.18);transition:.24s ease}.clientsCtaBtn:hover{transform:translateY(-2px)}

/* FOOTER · consistente con el resto del sitio */
.clientsPage .footer{background:#07132b!important;color:#fff!important;padding:52px 0 24px!important}.clientsPage .footerGrid{display:grid!important;grid-template-columns:1.2fr 1fr 1fr 1fr!important;gap:54px!important;padding-bottom:0!important}.clientsPage .footerLogo{width:145px!important;object-fit:contain!important;background:#fff!important;border-radius:10px!important;padding:5px 8px!important}.clientsPage .footerGrid p{max-width:320px!important;margin:12px 0 0!important;color:#9fb0cd!important;font-size:12px!important;line-height:1.65!important}.clientsPage .footerGrid h4{margin:0 0 16px!important;color:#e7edf8!important;font-size:10px!important;font-weight:700!important;letter-spacing:.15em!important;text-transform:uppercase!important}.clientsPage .footerGrid a{display:block!important;margin:8px 0!important;color:#9fb0cd!important;text-decoration:none!important;font-size:11px!important}.clientsPage .footerGrid a:hover{color:#fff!important}.clientsPage .footerClaimsRow{display:flex!important;justify-content:flex-start!important;padding:24px 0!important}.clientsPage .footerClaimsCard{width:190px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;padding:6px 4px 0!important;color:#fff!important;text-decoration:none!important;background:transparent!important;border:0!important;box-shadow:none!important}.clientsPage .footerClaimsCopy{text-align:center!important}.clientsPage .footerClaimsCopy strong{display:block!important;color:#59b7ff!important;font-size:14px!important;line-height:1.05!important}.clientsPage .footerClaimsCopy small{display:none!important}.clientsPage .footerClaimsIcon{width:112px!important;height:64px!important;display:grid!important;place-items:center!important;color:#dfe9f6!important;filter:drop-shadow(0 8px 10px rgba(0,0,0,.20))}.clientsPage .footerClaimsIcon svg{width:104px!important;height:60px!important;fill:rgba(255,255,255,.08)!important;stroke:currentColor!important;stroke-width:1.6!important;stroke-linecap:round!important;stroke-linejoin:round!important}.clientsPage .footerBottom{display:flex!important;gap:24px!important;align-items:center!important;justify-content:flex-start!important;margin-top:38px!important;padding:18px 0 0!important;border-top:1px solid #1c3054!important;color:#7f93b8!important;font-size:9px!important}.clientsPage .footerBottom span:nth-child(2){margin-left:auto!important}

/* FLOATERS */
.clientsPage .floaters{position:fixed;z-index:90;right:18px;bottom:18px;display:grid;gap:10px}.clientsPage .floater{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;padding:0;box-shadow:0 12px 30px rgba(3,17,40,.20);transition:.22s ease}.clientsPage .floater svg{width:23px;height:23px;display:block;fill:#fff}.clientsPage .floater.fb{background:#1877f2}.clientsPage .floater.wa{background:#25d366}.clientsPage .floater:hover{transform:translateY(-3px) scale(1.04)}.clientsPage .floater::before{content:attr(data-tooltip);position:absolute;right:64px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;padding:8px 11px;border-radius:9px;background:#07152f;color:#fff;font:700 11px/1 Manrope,sans-serif;opacity:0;visibility:hidden;transition:.18s ease}.clientsPage .floater:hover::before{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:none}

@media(max-width:1160px){
  .clientsPage .wrap{width:min(calc(100% - 32px),1320px)}.clientsPage .header{padding-top:14px}.clientsPage .header .nav{width:min(calc(100% - 32px),1320px);height:66px;border-radius:24px;padding:0 12px 0 14px}.clientsPage .header .menu{display:grid;order:2;margin-left:auto}.clientsPage .links{position:fixed;display:none;top:88px;left:16px;right:16px;margin:0;padding:22px;flex-direction:column;align-items:flex-start;gap:24px;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:rgba(8,23,42,.98);box-shadow:0 18px 48px rgba(2,12,27,.28);backdrop-filter:blur(18px)}.clientsPage .header.open .links{display:flex}.clientsPage .links a{padding:0}.clientsPage .navCta{display:none}.clientsPage .header .lang{order:3;margin-left:0}
  .clientsHeroGrid{grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr);gap:38px}.heroLogoCard{height:138px}.clientsProofGrid{grid-template-columns:repeat(2,1fr)}.clientsLead,.relationshipGrid{grid-template-columns:1fr;gap:34px}.clientTrack{grid-template-columns:repeat(3,minmax(0,1fr))}.clientsPage .footerGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.clientsPage .footerGrid>div:first-child{grid-column:1/-1}
}

@media(max-width:760px){
  .clientsHeroSlide{object-position:73% center;transform:scale(1.01)}
  .clientsHeroSlide.is-active{transform:scale(1.045)}
  .clientsHeroSlide:nth-child(1){object-position:72% center}
  .clientsHeroSlide:nth-child(2){object-position:78% center}
  .clientsHeroSlide:nth-child(3){object-position:74% center}
  .clientsHeroShade{background:linear-gradient(180deg,rgba(4,16,37,.68) 0%,rgba(5,20,45,.58) 34%,rgba(4,16,37,.95) 100%)}
  .clientsPage .wrap{width:min(calc(100% - 28px),1320px)}.clientsPage .header{padding-top:10px}.clientsPage .header .nav{width:calc(100% - 20px);height:62px;border-radius:21px;padding:0 9px 0 11px;gap:8px}.clientsPage .header .logo img{width:78px;max-height:42px;border-radius:10px;padding:4px 6px}.clientsPage .header .menu{order:2;margin-left:auto}.clientsPage .header .lang{order:3;margin-left:0;transform:scale(.94);transform-origin:right center}.clientsPage .header.open .links{top:80px;left:10px;right:10px;border-radius:20px}
  .clientsHero{min-height:680px}.clientsHeroGrid{display:flex;align-items:flex-end;min-height:680px;padding-top:120px;padding-bottom:92px}.clientsHeroCopy{max-width:100%}.clientsHeroCopy h1{max-width:10ch;font-size:clamp(33px,9.2vw,43px);line-height:.98;letter-spacing:-.045em}.clientsHeroCopy p{max-width:27ch;font-size:13px;line-height:1.5}.clientsHeroCopy .eyebrow{font-size:8.5px;letter-spacing:.15em}.clientsHeroActions{margin-top:20px}.clientsBtn{min-height:46px;padding:0 15px;font-size:10px}.heroClientMosaic{display:none}.clientsHeroBottom{bottom:18px;width:calc(100% - 28px);font-size:7.5px;letter-spacing:.12em;text-align:left}
  .clientsProofGrid{display:flex;overflow-x:auto;gap:10px;padding:16px 0;scroll-snap-type:x mandatory;scrollbar-width:none}.clientsProofGrid::-webkit-scrollbar{display:none}.proofItem{flex:0 0 78%;scroll-snap-align:start}
  .clientsSection{padding:72px 0 78px}.clientsLead{gap:15px;margin-bottom:26px}.clientsLead h2{font-size:clamp(36px,10.2vw,48px);max-width:12ch}.clientsLead p{font-size:13px;line-height:1.58}
  .clientTrack{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 3px 20px;margin-inline:-3px;scrollbar-width:none}.clientTrack::-webkit-scrollbar{display:none}.clientCard{flex:0 0 84%;min-height:238px;scroll-snap-align:start}.clientCard:hover,.clientCard:focus-visible,.clientCard.is-active{transform:translateY(-3px)}.clientLogoFrame{height:170px;padding:20px}.clientLogoFrame img{max-height:122px}.clientSwipeHint{display:flex;align-items:center;justify-content:center;gap:10px;color:#6b83a2;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
  .clientRelationship{padding:72px 0}.relationshipGrid{gap:28px}.relationshipCopy h2{font-size:clamp(35px,10vw,47px);max-width:11.5ch}.relationshipCopy p{font-size:13px;line-height:1.6}.relationshipSteps article{grid-template-columns:42px 1fr;padding:18px}.relationshipSteps small{width:38px;height:38px}
  .clientsCta{padding:66px 0}.clientsCtaGrid{grid-template-columns:1fr;gap:24px}.clientsCta h2{font-size:clamp(34px,9.5vw,45px)}.clientsCtaBtn{justify-self:start;min-height:51px;padding:0 21px}
  .clientsPage .footer{padding-top:52px!important}.clientsPage .footerGrid{grid-template-columns:1fr!important;gap:28px!important}.clientsPage .footerGrid>div:first-child{grid-column:auto}.clientsPage .footerClaimsRow{justify-content:center!important}.clientsPage .footerBottom{flex-direction:column!important;align-items:center!important;text-align:center!important}.clientsPage .footerBottom span:nth-child(2){margin-left:0!important}.clientsPage .floaters{right:12px;bottom:14px;gap:8px}.clientsPage .floater{width:48px;height:48px}.clientsPage .floater svg{width:21px;height:21px}.clientsPage .floater::before{display:none}
}

@media(max-width:430px){
  .clientsPage .header .nav{width:calc(100% - 14px);height:60px;border-radius:19px;padding-left:9px;padding-right:7px}.clientsPage .header .logo img{width:68px}.clientsPage .header .menu{width:38px;height:38px}.clientsPage .header .lang{margin-left:0;transform:scale(.88)}.clientsHeroGrid{width:calc(100% - 24px);padding-top:106px;padding-bottom:84px}.clientsHeroCopy h1{font-size:clamp(32px,9.5vw,40px);max-width:11.5ch}.clientsHeroCopy p{font-size:12.5px}.clientCard{flex-basis:88%}
}

@media(prefers-reduced-motion:reduce){.clientsHeroSlide{transition:none!important;transform:none!important}.clientsHeroSlide.is-active{transform:none!important}*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}


/* =========================================================
   CLIENTES · HERO TIPO PRODUCTOS
   Fondo protagonista + copy corto abajo y centrado.
   ========================================================= */
.clientsPage .clientsHero{
  position:relative !important;
  min-height:760px !important;
  height:88svh !important;
  max-height:840px !important;
  display:flex !important;
  align-items:stretch !important;
  overflow:hidden !important;
  background:#07152f !important;
}
.clientsPage .clientsHeroMedia{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
}
.clientsPage .clientsHeroSlide{
  object-fit:cover !important;
  object-position:center center !important;
  filter:saturate(1) contrast(1.02) brightness(.98) !important;
}
.clientsPage .clientsHeroShade{
  z-index:1 !important;
  background:
    linear-gradient(180deg,
      rgba(4,16,37,.06) 0%,
      rgba(4,16,37,.03) 40%,
      rgba(4,16,37,.18) 60%,
      rgba(4,16,37,.74) 86%,
      rgba(4,16,37,.95) 100%) !important;
}
.clientsPage .clientsHeroTexture{
  display:none !important;
}
.clientsPage .clientsHeroGrid{
  position:relative !important;
  z-index:2 !important;
  width:min(calc(100% - 56px),1320px) !important;
  min-height:760px !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:0 !important;
  padding-top:150px !important;
  padding-bottom:74px !important;
}
.clientsPage .clientsHeroCopy{
  width:100% !important;
  max-width:880px !important;
  margin-inline:auto !important;
  text-align:center !important;
}
.clientsPage .clientsHeroCopy .eyebrow{
  display:block !important;
  margin:0 0 12px !important;
  font-size:10px !important;
  letter-spacing:.18em !important;
  text-align:center !important;
}
.clientsPage .clientsHeroCopy h1{
  max-width:12ch !important;
  margin:0 auto 14px !important;
  font-size:clamp(48px,5.1vw,74px) !important;
  line-height:.98 !important;
  text-align:center !important;
}
.clientsPage .clientsHeroCopy h1 em{
  display:block !important;
}
.clientsPage .clientsHeroCopy p{
  max-width:34ch !important;
  margin:0 auto !important;
  color:rgba(255,255,255,.90) !important;
  font-size:14px !important;
  line-height:1.5 !important;
  text-align:center !important;
}
.clientsPage .clientsHeroActions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:20px !important;
}
.clientsPage .clientsBtn{
  min-height:46px !important;
  padding:0 17px !important;
  font-size:10px !important;
}
.clientsPage .heroClientMosaic,
.clientsPage .clientsHeroBottom{
  display:none !important;
}

@media(max-width:760px){
  .clientsPage .clientsHero{
    min-height:100svh !important;
    height:100svh !important;
    max-height:none !important;
  }
  .clientsPage .clientsHeroGrid{
    width:min(calc(100% - 24px),1320px) !important;
    min-height:100svh !important;
    height:100svh !important;
    justify-content:flex-end !important;
    align-items:center !important;
    padding-top:118px !important;
    padding-bottom:44px !important;
  }
  .clientsPage .clientsHeroCopy{
    max-width:410px !important;
    text-align:center !important;
  }
  .clientsPage .clientsHeroCopy .eyebrow{
    margin-bottom:9px !important;
    font-size:9px !important;
    letter-spacing:.17em !important;
  }
  .clientsPage .clientsHeroCopy h1{
    max-width:10.5ch !important;
    margin:0 auto 11px !important;
    font-size:clamp(34px,10vw,46px) !important;
    line-height:.98 !important;
  }
  .clientsPage .clientsHeroCopy p{
    max-width:28ch !important;
    margin:0 auto !important;
    font-size:12.5px !important;
    line-height:1.48 !important;
  }
  .clientsPage .clientsHeroActions{
    margin-top:18px !important;
    gap:9px !important;
  }
  .clientsPage .clientsBtn{
    min-height:44px !important;
    padding:0 15px !important;
    font-size:9.5px !important;
  }
  /* Las imágenes son horizontales: priorizamos el sujeto al recortar en móvil. */
  .clientsPage .clientsHeroSlide:nth-child(1){object-position:76% center !important}
  .clientsPage .clientsHeroSlide:nth-child(2){object-position:77% center !important}
  .clientsPage .clientsHeroSlide:nth-child(3){object-position:74% center !important}
  .clientsPage .clientsHeroShade{
    background:
      linear-gradient(180deg,
        rgba(4,16,37,.03) 0%,
        rgba(4,16,37,.04) 34%,
        rgba(4,16,37,.18) 55%,
        rgba(4,16,37,.82) 86%,
        rgba(4,16,37,.96) 100%) !important;
  }
}

@media(max-width:430px){
  .clientsPage .clientsHeroGrid{
    width:calc(100% - 22px) !important;
    padding-top:108px !important;
    padding-bottom:38px !important;
  }
  .clientsPage .clientsHeroCopy{
    max-width:360px !important;
  }
  .clientsPage .clientsHeroCopy h1{
    max-width:10ch !important;
    font-size:clamp(31px,9.4vw,39px) !important;
  }
  .clientsPage .clientsHeroCopy p{
    max-width:27ch !important;
    font-size:12px !important;
  }
  .clientsPage .clientsHeroActions{
    gap:8px !important;
  }
  .clientsPage .clientsBtn{
    min-height:42px !important;
    padding:0 13px !important;
    font-size:9px !important;
  }
}


/* =========================================================
   CLIENTES · AJUSTE FINAL HERO
   - imagen más visible
   - copy centrado abajo, como Productos
   - botón "Solicitar cotización"
   ========================================================= */
.clientsPage .clientsHero{
  min-height:680px !important;
  height:74svh !important;
  max-height:760px !important;
}
.clientsPage .clientsHeroMedia{
  background:#07152f !important;
}
.clientsPage .clientsHeroSlide{
  object-fit:cover !important;
  object-position:center center !important;
  filter:saturate(1) contrast(1.02) brightness(.98) !important;
}
.clientsPage .clientsHeroShade{
  background:
    linear-gradient(180deg,
      rgba(4,16,37,.02) 0%,
      rgba(4,16,37,.04) 42%,
      rgba(4,16,37,.18) 62%,
      rgba(4,16,37,.78) 88%,
      rgba(4,16,37,.94) 100%) !important;
}
.clientsPage .clientsHeroGrid{
  width:min(calc(100% - 44px),1320px) !important;
  min-height:680px !important;
  height:100% !important;
  justify-content:flex-end !important;
  align-items:center !important;
  padding-top:124px !important;
  padding-bottom:58px !important;
}
.clientsPage .clientsHeroCopy{
  max-width:760px !important;
  width:100% !important;
  margin-inline:auto !important;
  text-align:center !important;
}
.clientsPage .clientsHeroCopy .eyebrow{
  text-align:center !important;
}
.clientsPage .clientsHeroCopy h1{
  max-width:10ch !important;
  margin:0 auto 12px !important;
  font-size:clamp(46px,5.3vw,72px) !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
  text-align:center !important;
}
.clientsPage .clientsHeroCopy h1 em{
  display:inline !important;
}
.clientsPage .clientsHeroCopy p{
  max-width:34ch !important;
  margin:0 auto !important;
  text-align:center !important;
}
.clientsPage .clientsHeroActions{
  justify-content:center !important;
  margin-top:18px !important;
}
.clientsPage .clientsBtn{
  min-height:46px !important;
  padding:0 18px !important;
  font-size:10px !important;
}

@media(max-width:980px){
  .clientsPage .clientsHero{
    min-height:640px !important;
    height:72svh !important;
    max-height:720px !important;
  }
  .clientsPage .clientsHeroGrid{
    min-height:640px !important;
    padding-top:118px !important;
    padding-bottom:52px !important;
  }
  .clientsPage .clientsHeroCopy h1{
    font-size:clamp(40px,6vw,58px) !important;
    max-width:10ch !important;
  }
}

@media(max-width:760px){
  .clientsPage .clientsHero{
    min-height:100svh !important;
    height:100svh !important;
    max-height:none !important;
  }
  .clientsPage .clientsHeroGrid{
    width:min(calc(100% - 22px),1320px) !important;
    min-height:100svh !important;
    padding-top:108px !important;
    padding-bottom:34px !important;
  }
  .clientsPage .clientsHeroCopy{
    max-width:360px !important;
  }
  .clientsPage .clientsHeroCopy h1{
    max-width:9.2ch !important;
    font-size:clamp(31px,9.2vw,40px) !important;
    margin:0 auto 10px !important;
  }
  .clientsPage .clientsHeroCopy p{
    max-width:26ch !important;
    font-size:12px !important;
    line-height:1.45 !important;
  }
  .clientsPage .clientsHeroActions{
    gap:8px !important;
    margin-top:16px !important;
  }
  .clientsPage .clientsBtn{
    min-height:42px !important;
    padding:0 13px !important;
    font-size:9px !important;
  }
  /* En móvil, recortamos menos al sujeto principal */
  .clientsPage .clientsHeroSlide:nth-child(1){object-position:64% center !important}
  .clientsPage .clientsHeroSlide:nth-child(2){object-position:64% center !important}
  .clientsPage .clientsHeroSlide:nth-child(3){object-position:62% center !important}
  .clientsPage .clientsHeroShade{
    background:
      linear-gradient(180deg,
        rgba(4,16,37,.02) 0%,
        rgba(4,16,37,.05) 34%,
        rgba(4,16,37,.20) 58%,
        rgba(4,16,37,.84) 88%,
        rgba(4,16,37,.96) 100%) !important;
  }
}


/* =========================================================
   CLIENTES · AJUSTE DE ENCUADRE FINAL
   - menos bloque azul
   - sujeto y rostro más visibles
   - copy corto al centro inferior
   ========================================================= */
.clientsPage .clientsHero{
  min-height: 640px !important;
  height: 72svh !important;
  max-height: 760px !important;
}
.clientsPage .clientsHeroMedia{
  background:#081a36 !important;
}
.clientsPage .clientsHeroSlide{
  object-fit: cover !important;
  filter: saturate(1) contrast(1.02) brightness(1) !important;
}
.clientsPage .clientsHeroSlide:nth-child(1){object-position: 63% 18% !important;}
.clientsPage .clientsHeroSlide:nth-child(2){object-position: 66% 18% !important;}
.clientsPage .clientsHeroSlide:nth-child(3){object-position: 64% 20% !important;}

.clientsPage .clientsHeroShade{
  background:
    linear-gradient(180deg,
      rgba(4,16,37,.02) 0%,
      rgba(4,16,37,.03) 40%,
      rgba(4,16,37,.16) 64%,
      rgba(4,16,37,.72) 88%,
      rgba(4,16,37,.92) 100%) !important;
}

.clientsPage .clientsHeroGrid{
  width:min(calc(100% - 42px), 1320px) !important;
  min-height: 640px !important;
  justify-content:flex-end !important;
  align-items:center !important;
  padding-top: 118px !important;
  padding-bottom: 56px !important;
}
.clientsPage .clientsHeroCopy{
  max-width: 820px !important;
  width:100% !important;
  margin-inline:auto !important;
  text-align:center !important;
}
.clientsPage .clientsHeroCopy h1{
  max-width: 12ch !important;
  margin:0 auto 12px !important;
  font-size: clamp(44px, 5vw, 70px) !important;
  line-height: .98 !important;
  text-align:center !important;
}
.clientsPage .clientsHeroCopy h1 em{
  display:block !important;
}
.clientsPage .clientsHeroCopy p{
  max-width: 36ch !important;
  margin:0 auto !important;
  text-align:center !important;
}
.clientsPage .clientsHeroActions{
  justify-content:center !important;
  margin-top:18px !important;
}

@media (max-width: 980px){
  .clientsPage .clientsHero{
    min-height: 600px !important;
    height: 70svh !important;
    max-height: 700px !important;
  }
  .clientsPage .clientsHeroGrid{
    min-height: 600px !important;
    padding-top: 112px !important;
    padding-bottom: 48px !important;
  }
  .clientsPage .clientsHeroCopy h1{
    font-size: clamp(38px, 5.9vw, 56px) !important;
  }
}

@media (max-width: 760px){
  .clientsPage .clientsHero{
    min-height: 100svh !important;
    height: 100svh !important;
    max-height: none !important;
  }
  .clientsPage .clientsHeroGrid{
    width:min(calc(100% - 22px), 1320px) !important;
    min-height:100svh !important;
    padding-top: 108px !important;
    padding-bottom: 32px !important;
  }
  .clientsPage .clientsHeroCopy{
    max-width: 350px !important;
  }
  .clientsPage .clientsHeroCopy h1{
    max-width: 10.2ch !important;
    font-size: clamp(31px, 9vw, 39px) !important;
    margin:0 auto 10px !important;
  }
  .clientsPage .clientsHeroCopy p{
    max-width: 25ch !important;
    font-size: 12px !important;
    line-height:1.45 !important;
  }
  .clientsPage .clientsHeroActions{
    gap:8px !important;
    margin-top:16px !important;
  }
  /* En móvil, mostramos mejor el rostro y a las personas */
  .clientsPage .clientsHeroSlide:nth-child(1){object-position: 67% 14% !important;}
  .clientsPage .clientsHeroSlide:nth-child(2){object-position: 69% 14% !important;}
  .clientsPage .clientsHeroSlide:nth-child(3){object-position: 66% 16% !important;}
  .clientsPage .clientsHeroShade{
    background:
      linear-gradient(180deg,
        rgba(4,16,37,.01) 0%,
        rgba(4,16,37,.03) 34%,
        rgba(4,16,37,.18) 58%,
        rgba(4,16,37,.82) 88%,
        rgba(4,16,37,.95) 100%) !important;
  }
}


/* =========================================================
   CLIENTES · HERO FULL-BLEED
   El banner debe cubrir todo el ancho, sin bloque vacío a la izquierda.
   ========================================================= */
.clientsPage .clientsHero{
  min-height: 660px !important;
  height: 76svh !important;
  max-height: 780px !important;
  background:#071a38 !important;
}
.clientsPage .clientsHeroMedia{
  background:#071a38 !important;
}
.clientsPage .clientsHeroSlide,
.clientsPage .clientsHeroSlide.is-active{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform:none !important;
  filter:saturate(1.02) contrast(1.01) brightness(1) !important;
}
.clientsPage .clientsHeroSlide:nth-child(1){object-position: 56% center !important;}
.clientsPage .clientsHeroSlide:nth-child(2){object-position: 58% center !important;}
.clientsPage .clientsHeroSlide:nth-child(3){object-position: 56% center !important;}

.clientsPage .clientsHeroShade{
  background:
    linear-gradient(90deg,
      rgba(4,16,37,.62) 0%,
      rgba(4,16,37,.38) 22%,
      rgba(4,16,37,.18) 42%,
      rgba(4,16,37,.10) 60%,
      rgba(4,16,37,.14) 100%) !important;
}

.clientsPage .clientsHeroGrid{
  width:min(calc(100% - 48px),1320px) !important;
  min-height:660px !important;
  height:100% !important;
  padding-top:122px !important;
  padding-bottom:56px !important;
  justify-content:flex-end !important;
  align-items:center !important;
}

.clientsPage .clientsHeroCopy{
  max-width:760px !important;
  width:100% !important;
  margin-inline:auto !important;
  text-align:center !important;
}
.clientsPage .clientsHeroCopy h1{
  max-width:11ch !important;
  margin:0 auto 12px !important;
  font-size:clamp(44px,4.8vw,68px) !important;
  line-height:.98 !important;
  text-align:center !important;
}
.clientsPage .clientsHeroCopy p{
  max-width:34ch !important;
  margin:0 auto !important;
  text-align:center !important;
}
.clientsPage .clientsHeroActions{
  justify-content:center !important;
}

@media (max-width: 980px){
  .clientsPage .clientsHero{
    min-height:620px !important;
    height:72svh !important;
    max-height:720px !important;
  }
  .clientsPage .clientsHeroGrid{
    min-height:620px !important;
    padding-top:116px !important;
    padding-bottom:48px !important;
  }
  .clientsPage .clientsHeroCopy h1{
    font-size:clamp(38px,5.5vw,56px) !important;
  }
}

@media (max-width: 760px){
  .clientsPage .clientsHero{
    min-height:100svh !important;
    height:100svh !important;
    max-height:none !important;
  }
  .clientsPage .clientsHeroSlide,
  .clientsPage .clientsHeroSlide.is-active{
    object-fit: cover !important;
  }
  .clientsPage .clientsHeroSlide:nth-child(1){object-position: 68% 18% !important;}
  .clientsPage .clientsHeroSlide:nth-child(2){object-position: 70% 18% !important;}
  .clientsPage .clientsHeroSlide:nth-child(3){object-position: 67% 20% !important;}
  .clientsPage .clientsHeroShade{
    background:
      linear-gradient(180deg,
        rgba(4,16,37,.04) 0%,
        rgba(4,16,37,.08) 34%,
        rgba(4,16,37,.22) 60%,
        rgba(4,16,37,.84) 88%,
        rgba(4,16,37,.96) 100%) !important;
  }
}


/* =========================================================
   CLIENTES · AJUSTE FINAL DE ESTILO
   - título en mayúscula/minúscula como Productos
   - overlay mucho más suave
   - mejor enfoque para ver a las personas y el rostro
   ========================================================= */
.clientsPage .clientsHero{
  min-height: 660px !important;
  height: 76svh !important;
  max-height: 780px !important;
  background:#091a37 !important;
}
.clientsPage .clientsHeroMedia{
  background:#091a37 !important;
}
.clientsPage .clientsHeroSlide,
.clientsPage .clientsHeroSlide.is-active{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  transform:none !important;
  filter:saturate(1.02) contrast(1.01) brightness(1.01) !important;
}
/* Encuadre: mostrar mejor a las personas en desktop */
.clientsPage .clientsHeroSlide:nth-child(1){object-position: 60% 38% !important;}
.clientsPage .clientsHeroSlide:nth-child(2){object-position: 60% 34% !important;}
.clientsPage .clientsHeroSlide:nth-child(3){object-position: 60% 40% !important;}

/* Overlay mucho más ligero para no tapar la foto */
.clientsPage .clientsHeroShade{
  background:
    linear-gradient(90deg,
      rgba(4,16,37,.36) 0%,
      rgba(4,16,37,.16) 20%,
      rgba(4,16,37,.06) 42%,
      rgba(4,16,37,.05) 65%,
      rgba(4,16,37,.08) 100%) !important;
}
.clientsPage .clientsHeroGrid{
  width:min(calc(100% - 48px),1320px) !important;
  min-height:660px !important;
  height:100% !important;
  justify-content:flex-end !important;
  align-items:center !important;
  padding-top:122px !important;
  padding-bottom:54px !important;
}
.clientsPage .clientsHeroCopy{
  width:100% !important;
  max-width:720px !important;
  margin-inline:auto !important;
  text-align:center !important;
}
.clientsPage .clientsHeroCopy .eyebrow{
  text-align:center !important;
}
.clientsPage .clientsHeroCopy h1{
  max-width:13ch !important;
  margin:0 auto 12px !important;
  font-size:clamp(42px,4.8vw,68px) !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
  text-align:center !important;
  text-transform:none !important;
}
.clientsPage .clientsHeroCopy h1 em{
  display:block !important;
  font-style:normal !important;
}
.clientsPage .clientsHeroCopy p{
  max-width:34ch !important;
  margin:0 auto !important;
  text-align:center !important;
}
.clientsPage .clientsHeroActions{
  justify-content:center !important;
  gap:10px !important;
  margin-top:18px !important;
}

/* tablet */
@media (max-width: 980px){
  .clientsPage .clientsHero{
    min-height:620px !important;
    height:72svh !important;
    max-height:720px !important;
  }
  .clientsPage .clientsHeroGrid{
    min-height:620px !important;
    padding-top:116px !important;
    padding-bottom:48px !important;
  }
  .clientsPage .clientsHeroCopy{
    max-width:620px !important;
  }
  .clientsPage .clientsHeroCopy h1{
    font-size:clamp(36px,5.6vw,56px) !important;
    max-width:13ch !important;
  }
}

/* móvil: mantener visibles las personas y el rostro */
@media (max-width: 760px){
  .clientsPage .clientsHero{
    min-height:100svh !important;
    height:100svh !important;
    max-height:none !important;
  }
  .clientsPage .clientsHeroGrid{
    width:min(calc(100% - 22px),1320px) !important;
    min-height:100svh !important;
    padding-top:108px !important;
    padding-bottom:34px !important;
  }
  .clientsPage .clientsHeroCopy{
    max-width:360px !important;
  }
  .clientsPage .clientsHeroCopy h1{
    max-width:11ch !important;
    font-size:clamp(30px,8.8vw,40px) !important;
    margin:0 auto 10px !important;
    line-height:.99 !important;
  }
  .clientsPage .clientsHeroCopy p{
    max-width:25ch !important;
    font-size:12px !important;
    line-height:1.45 !important;
  }
  .clientsPage .clientsHeroActions{
    gap:8px !important;
    margin-top:16px !important;
  }
  .clientsPage .clientsHeroSlide:nth-child(1){object-position: 62% 20% !important;}
  .clientsPage .clientsHeroSlide:nth-child(2){object-position: 63% 18% !important;}
  .clientsPage .clientsHeroSlide:nth-child(3){object-position: 61% 20% !important;}
  .clientsPage .clientsHeroShade{
    background:
      linear-gradient(180deg,
        rgba(4,16,37,.03) 0%,
        rgba(4,16,37,.06) 32%,
        rgba(4,16,37,.18) 58%,
        rgba(4,16,37,.80) 88%,
        rgba(4,16,37,.95) 100%) !important;
  }
}


/* =========================================================
   CLIENTES · AJUSTE FINAL LIMPIO
   - quitar fondo azul pesado
   - mostrar más la imagen
   - bajar el encuadre para que el rostro no quede tapado
   - mantener legibilidad del texto
   ========================================================= */
.clientsPage .clientsHero{
  min-height: 660px !important;
  height: 76svh !important;
  max-height: 780px !important;
  background:#071a38 !important;
}

.clientsPage .clientsHeroMedia{
  background:#071a38 !important;
}

/* Banner full width, con imagen protagonista */
.clientsPage .clientsHeroSlide,
.clientsPage .clientsHeroSlide.is-active{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  transform:none !important;
  filter:saturate(1.02) contrast(1.01) brightness(1.01) !important;
}

/* Desktop: mostrar mejor a las personas y bajar un poco el rostro */
.clientsPage .clientsHeroSlide:nth-child(1){object-position: 58% 20% !important;}
.clientsPage .clientsHeroSlide:nth-child(2){object-position: 58% 18% !important;}
.clientsPage .clientsHeroSlide:nth-child(3){object-position: 57% 22% !important;}

/* Overlay muy suave, casi transparente: ya no debe tapar la foto */
.clientsPage .clientsHeroShade{
  background:
    linear-gradient(90deg,
      rgba(4,16,37,.22) 0%,
      rgba(4,16,37,.10) 18%,
      rgba(4,16,37,.04) 34%,
      rgba(4,16,37,.02) 52%,
      rgba(4,16,37,.03) 100%) !important;
}

/* El bloque de copy se mantiene abajo/centro, con mejor respiro */
.clientsPage .clientsHeroGrid{
  width:min(calc(100% - 48px),1320px) !important;
  min-height:660px !important;
  height:100% !important;
  justify-content:flex-end !important;
  align-items:center !important;
  padding-top:124px !important;
  padding-bottom:52px !important;
}

.clientsPage .clientsHeroCopy{
  width:100% !important;
  max-width:700px !important;
  margin-inline:auto !important;
  text-align:center !important;
}

.clientsPage .clientsHeroCopy h1{
  max-width:13ch !important;
  margin:0 auto 10px !important;
  font-size:clamp(42px,4.7vw,66px) !important;
  line-height:.98 !important;
}

.clientsPage .clientsHeroCopy p{
  max-width:34ch !important;
  margin:0 auto !important;
}

.clientsPage .clientsHeroActions{
  justify-content:center !important;
  margin-top:18px !important;
}

/* Tablet */
@media (max-width: 980px){
  .clientsPage .clientsHero{
    min-height:620px !important;
    height:72svh !important;
    max-height:720px !important;
  }
  .clientsPage .clientsHeroGrid{
    min-height:620px !important;
    padding-top:118px !important;
    padding-bottom:46px !important;
  }
  .clientsPage .clientsHeroCopy{
    max-width:620px !important;
  }
  .clientsPage .clientsHeroCopy h1{
    font-size:clamp(36px,5.6vw,54px) !important;
  }
  .clientsPage .clientsHeroSlide:nth-child(1){object-position: 59% 18% !important;}
  .clientsPage .clientsHeroSlide:nth-child(2){object-position: 59% 16% !important;}
  .clientsPage .clientsHeroSlide:nth-child(3){object-position: 58% 20% !important;}
}

/* Móvil: menos overlay y mejor foco en las personas */
@media (max-width: 760px){
  .clientsPage .clientsHero{
    min-height:100svh !important;
    height:100svh !important;
    max-height:none !important;
  }
  .clientsPage .clientsHeroGrid{
    width:min(calc(100% - 22px),1320px) !important;
    min-height:100svh !important;
    padding-top:108px !important;
    padding-bottom:34px !important;
  }
  .clientsPage .clientsHeroCopy{
    max-width:360px !important;
  }
  .clientsPage .clientsHeroCopy h1{
    max-width:11ch !important;
    font-size:clamp(30px,8.8vw,40px) !important;
    margin:0 auto 10px !important;
  }
  .clientsPage .clientsHeroCopy p{
    max-width:25ch !important;
    font-size:12px !important;
    line-height:1.45 !important;
  }
  .clientsPage .clientsHeroActions{
    gap:8px !important;
    margin-top:16px !important;
  }

  /* Bajar el encuadre para que se vea mejor el rostro */
  .clientsPage .clientsHeroSlide:nth-child(1){object-position: 60% 14% !important;}
  .clientsPage .clientsHeroSlide:nth-child(2){object-position: 60% 12% !important;}
  .clientsPage .clientsHeroSlide:nth-child(3){object-position: 59% 16% !important;}

  .clientsPage .clientsHeroShade{
    background:
      linear-gradient(180deg,
        rgba(4,16,37,.02) 0%,
        rgba(4,16,37,.04) 30%,
        rgba(4,16,37,.12) 54%,
        rgba(4,16,37,.72) 86%,
        rgba(4,16,37,.94) 100%) !important;
  }
}

/* =========================================================
   CLIENTES · TEXTO MÁS LEGIBLE SOBRE FOTOGRAFÍA
   Oscurece únicamente el bloque de copy, no todo el banner.
   ========================================================= */
.clientsPage .clientsHeroCopy{
  position:relative !important;
  z-index:3 !important;
  padding:22px 28px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,
    rgba(8,12,18,.44) 0%,
    rgba(8,12,18,.28) 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter:blur(7px) saturate(1.03) !important;
  backdrop-filter:blur(7px) saturate(1.03) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.18) !important;
}

.clientsPage .clientsHeroCopy h1{
  color:#fff !important;
  text-shadow:
    0 3px 16px rgba(0,0,0,.86),
    0 1px 2px rgba(0,0,0,.92) !important;
}

.clientsPage .clientsHeroCopy h1 em{
  color:#55b7ff !important;
  text-shadow:
    0 3px 16px rgba(0,0,0,.72),
    0 1px 2px rgba(0,0,0,.82) !important;
}

.clientsPage .clientsHeroCopy .eyebrow{
  color:#7acbff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.78) !important;
}

.clientsPage .clientsHeroCopy p{
  color:#fff !important;
  font-weight:600 !important;
  text-shadow:
    0 2px 10px rgba(0,0,0,.86),
    0 1px 2px rgba(0,0,0,.88) !important;
}

@media(max-width:760px){
  .clientsPage .clientsHeroCopy{
    padding:17px 16px !important;
    border-radius:18px !important;
    background:linear-gradient(180deg,
      rgba(8,12,18,.48) 0%,
      rgba(8,12,18,.30) 100%) !important;
    -webkit-backdrop-filter:blur(6px) !important;
    backdrop-filter:blur(6px) !important;
  }
}


/* =========================================================
   CLIENTES · TEXTO LEGIBLE PERO MUCHO MÁS SUTIL
   ========================================================= */
.clientsPage .clientsHeroCopy{
  padding:18px 22px !important;
  border-radius:18px !important;
  background:linear-gradient(
    180deg,
    rgba(8,12,18,.20) 0%,
    rgba(8,12,18,.10) 100%
  ) !important;
  border:0 !important;
  -webkit-backdrop-filter:blur(3px) saturate(1.01) !important;
  backdrop-filter:blur(3px) saturate(1.01) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.08) !important;
}

.clientsPage .clientsHeroCopy h1{
  text-shadow:
    0 2px 10px rgba(0,0,0,.54),
    0 1px 1px rgba(0,0,0,.48) !important;
}

.clientsPage .clientsHeroCopy h1 em{
  text-shadow:
    0 2px 10px rgba(0,0,0,.42) !important;
}

.clientsPage .clientsHeroCopy .eyebrow{
  text-shadow:0 1px 6px rgba(0,0,0,.42) !important;
}

.clientsPage .clientsHeroCopy p{
  font-weight:500 !important;
  text-shadow:0 1px 7px rgba(0,0,0,.48) !important;
}

@media(max-width:760px){
  .clientsPage .clientsHeroCopy{
    padding:14px 14px !important;
    border-radius:16px !important;
    background:linear-gradient(
      180deg,
      rgba(8,12,18,.23) 0%,
      rgba(8,12,18,.11) 100%
    ) !important;
    -webkit-backdrop-filter:blur(3px) !important;
    backdrop-filter:blur(3px) !important;
  }
}


/* =========================================================
   CLIENTES · BOTONES HERO = MISMO ESTILO DE PRODUCTOS
   ========================================================= */
.clientsPage .clientsHeroActions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:22px !important;
}

.clientsPage .clientsBtn{
  min-height:48px !important;
  padding:0 19px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  border-radius:999px !important;
  text-decoration:none !important;
  font-family:'Manrope',Arial,sans-serif !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease !important;
}

.clientsPage .clientsBtnPrimary{
  background:#fff !important;
  border:1px solid rgba(255,255,255,.92) !important;
  color:#0a1732 !important;
  box-shadow:0 12px 30px rgba(0,0,0,.16) !important;
}
.clientsPage .clientsBtnPrimary:hover,
.clientsPage .clientsBtnPrimary:focus-visible{
  background:#1688ff !important;
  border-color:#1688ff !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
}

.clientsPage .clientsBtnGhost{
  border:1px solid rgba(255,255,255,.30) !important;
  background:rgba(8,25,49,.26) !important;
  color:#fff !important;
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
}
.clientsPage .clientsBtnGhost:hover,
.clientsPage .clientsBtnGhost:focus-visible{
  border-color:rgba(99,189,255,.62) !important;
  background:rgba(22,136,255,.18) !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
}

.clientsPage .clientsBtn b{
  font-family:'Manrope',Arial,sans-serif !important;
  font-weight:800 !important;
  line-height:1 !important;
}

@media(max-width:760px){
  .clientsPage .clientsHeroActions{
    margin-top:18px !important;
    gap:9px !important;
  }
  .clientsPage .clientsBtn{
    min-height:44px !important;
    padding:0 15px !important;
    font-size:9.5px !important;
  }
}

@media(max-width:430px){
  .clientsPage .clientsHeroActions{gap:8px !important;}
  .clientsPage .clientsBtn{
    min-height:42px !important;
    padding:0 13px !important;
    font-size:9px !important;
  }
}


/* =========================================================
   FCC · MENÚ MÓVIL UNIFICADO
   Patrón exacto de EMPRESA / INDEX:
   - sin línea fija en la página activa
   - línea aparece solamente en hover/focus
   - mismo espaciado, panel y hamburguesa
   ========================================================= */
@media (max-width:1160px){
  .clientsPage .header .nav{
    display:flex !important;
    align-items:center !important;
  }

  .clientsPage .header .logo{
    order:1 !important;
    flex:0 0 auto !important;
  }

  .clientsPage .header .menu{
    display:block !important;
    order:2 !important;
    margin-left:auto !important;
    margin-right:0 !important;
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    padding:0 !important;
    position:relative !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    cursor:pointer !important;
  }

  .clientsPage .header .menu span{
    display:block !important;
    position:absolute !important;
    left:8px !important;
    right:8px !important;
    width:auto !important;
    height:1px !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    border:0 !important;
    transform:none !important;
  }

  .clientsPage .header .menu span:first-child{top:16px !important;}
  .clientsPage .header .menu span:last-child{top:25px !important;}

  .clientsPage .header .lang{
    order:3 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    flex:0 0 auto !important;
  }

  .clientsPage .header .navCta{
    display:none !important;
  }

  /* Panel igual a Empresa */
  .clientsPage .header .links{
    display:none !important;
    position:absolute !important;
    top:88px !important;
    left:16px !important;
    right:16px !important;
    margin:0 !important;
    padding:22px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:24px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:22px !important;
    background:rgba(8,23,42,.98) !important;
    box-shadow:0 18px 48px rgba(2,12,27,.28) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
  }

  .clientsPage .header.open .links{
    display:flex !important;
  }

  /* Todos los títulos parten con el mismo estilo */
  .clientsPage .header .links a,
  .clientsPage .header .links a.active{
    position:relative !important;
    width:auto !important;
    max-width:none !important;
    align-self:auto !important;
    padding:0 !important;
    color:rgba(255,255,255,.76) !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .clientsPage .header .links a:hover,
  .clientsPage .header .links a:focus-visible,
  .clientsPage .header .links a.active:hover,
  .clientsPage .header .links a.active:focus-visible{
    color:#fff !important;
  }

  /* Línea invisible por defecto, como Empresa */
  .clientsPage .header .links a::after,
  .clientsPage .header .links a.active::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:0 !important;
    right:100% !important;
    bottom:-10px !important;
    width:auto !important;
    height:1px !important;
    background:#63bdff !important;
    border:0 !important;
    transition:right .25s ease !important;
  }

  /* La línea aparece solamente al pasar el mouse / foco */
  .clientsPage .header .links a:hover::after,
  .clientsPage .header .links a:focus-visible::after,
  .clientsPage .header .links a.active:hover::after,
  .clientsPage .header .links a.active:focus-visible::after{
    right:0 !important;
  }
}

@media (max-width:760px){
  .clientsPage .header{
    padding-top:10px !important;
  }

  .clientsPage .header .nav{
    width:calc(100% - 20px) !important;
    height:62px !important;
    border-radius:21px !important;
    padding:0 9px 0 11px !important;
    gap:8px !important;
  }

  .clientsPage .header .logo img{
    width:78px !important;
    max-height:42px !important;
    border-radius:10px !important;
    padding:4px 6px !important;
  }

  .clientsPage .header .menu{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }

  .clientsPage .header .lang{
    transform:scale(.94) !important;
    transform-origin:right center !important;
  }

  .clientsPage .header .links,
  .clientsPage .header.open .links{
    top:80px !important;
    left:10px !important;
    right:10px !important;
    border-radius:20px !important;
  }
}

@media (max-width:430px){
  .clientsPage .header .nav{
    width:calc(100% - 14px) !important;
    height:60px !important;
    border-radius:19px !important;
    padding-left:9px !important;
    padding-right:7px !important;
    gap:8px !important;
  }

  .clientsPage .header .logo img{
    width:68px !important;
  }

  .clientsPage .header .menu{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }

  .clientsPage .header .lang{
    transform:scale(.88) !important;
  }
}


/* =========================================================
   CLIENTES · IMÁGENES RESPONSIVE
   IMPORTANTE:
   - Desktop/laptop conserva EXACTAMENTE el encuadre anterior.
   - Solo móvil <=760px usa las imágenes verticales.
   ========================================================= */

.clientsPage .clientsHeroPicture{
  display:contents;
}

/* DESKTOP > 980px: mismos valores finales que ya tenía Clientes */
@media (min-width:981px){
  .clientsPage .clientsHeroPicture:nth-child(1) .clientsHeroSlide{
    object-position:58% 20% !important;
  }
  .clientsPage .clientsHeroPicture:nth-child(2) .clientsHeroSlide{
    object-position:58% 18% !important;
  }
  .clientsPage .clientsHeroPicture:nth-child(3) .clientsHeroSlide{
    object-position:57% 22% !important;
  }
}

/* TABLET horizontal 761-980px: mismos valores anteriores */
@media (min-width:761px) and (max-width:980px){
  .clientsPage .clientsHeroPicture:nth-child(1) .clientsHeroSlide{
    object-position:59% 18% !important;
  }
  .clientsPage .clientsHeroPicture:nth-child(2) .clientsHeroSlide{
    object-position:59% 16% !important;
  }
  .clientsPage .clientsHeroPicture:nth-child(3) .clientsHeroSlide{
    object-position:58% 20% !important;
  }
}

/* MÓVIL: las imágenes ya son verticales, por eso se centran */
@media (max-width:760px){
  .clientsPage .clientsHeroPicture:nth-child(1) .clientsHeroSlide,
  .clientsPage .clientsHeroPicture:nth-child(2) .clientsHeroSlide,
  .clientsPage .clientsHeroPicture:nth-child(3) .clientsHeroSlide{
    object-fit:cover !important;
    object-position:center center !important;
  }
}


/* =========================================================
   CLIENTES · PASOS RELACIÓN · CICLO AUTOMÁTICO
   01 -> 02 -> 03 cada 3 segundos
   ========================================================= */

.clientsPage .relationshipSteps article{
  overflow:hidden;
}

.clientsPage .relationshipSteps article::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#1688ff,#63bdff);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .32s ease;
}

.clientsPage .relationshipSteps article:hover,
.clientsPage .relationshipSteps article:focus-visible,
.clientsPage .relationshipSteps article.is-active{
  transform:translateX(6px);
  border-color:#a9d3f7;
  background:linear-gradient(145deg,#ffffff,#f4f9ff);
  box-shadow:0 14px 32px rgba(20,73,139,.10);
}

.clientsPage .relationshipSteps article:hover::after,
.clientsPage .relationshipSteps article:focus-visible::after,
.clientsPage .relationshipSteps article.is-active::after{
  transform:scaleX(1);
}

.clientsPage .relationshipSteps article.is-active small,
.clientsPage .relationshipSteps article:hover small,
.clientsPage .relationshipSteps article:focus-visible small{
  background:#1688ff;
  color:#fff;
  box-shadow:0 7px 18px rgba(22,136,255,.20);
}

.clientsPage .relationshipSteps article small{
  transition:
    background .28s ease,
    color .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

@media(max-width:760px){
  .clientsPage .relationshipSteps article::after{
    left:18px;
    right:18px;
  }

  .clientsPage .relationshipSteps article:hover,
  .clientsPage .relationshipSteps article:focus-visible,
  .clientsPage .relationshipSteps article.is-active{
    transform:translateX(3px);
  }
}

@media(prefers-reduced-motion:reduce){
  .clientsPage .relationshipSteps article,
  .clientsPage .relationshipSteps article::after,
  .clientsPage .relationshipSteps article small{
    transition:none !important;
  }
}