/* Approved product imagery, homepage only. Transparent cutouts keep the existing
   light / navy / ice-blue service compositions. Image slots reserve their space. */
.services--product .service-photo{
  pointer-events:none;position:absolute;z-index:0;display:flex;
  align-items:center;justify-content:center;min-width:0;
}
.services--product .service-photo img{
  display:block;width:100%;height:100%;object-fit:contain;
  pointer-events:none;mix-blend-mode:normal;
}
.services--product .service-copy,.services--product .kyc-intro{position:relative;z-index:1}
.services--product .service-ask{z-index:1}
.services--product .service-card--wallets{min-height:620px}
.services--product .service-photo--wallets{
  position:relative;width:100%;height:330px;flex:none;margin:-24px 0 8px;
}
.services--product .service-card--tarjetas,.services--product .service-card--tokenizacion{
  min-height:299px;padding:30px 45% 30px 30px;
}
.services--product .service-photo--tarjetas,.services--product .service-photo--tokenizacion{
  width:51%;height:238px;right:-1%;top:50%;transform:translateY(-50%);
}
.services--product .service-group--1 .service-card{padding-top:268px;min-height:442px}
.services--product .service-photo--adquirencia,.services--product .service-photo--sinpe{
  width:min(440px,90%);height:264px;top:0;left:50%;transform:translateX(-50%);
}
.services--product .service-photo--kyc{
  position:relative;width:100%;max-width:530px;aspect-ratio:3/2;justify-self:center;
}
.services--product .service-photo--kyc img{aspect-ratio:3/2}

/* Start and finish at the static position so loading never introduces a jump.
   Pause the same animation offscreen or behind an overlay instead of resetting it. */
@keyframes fintech-product-settle{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-7px,0)}
}
@media(prefers-reduced-motion:no-preference){
  .services--product [data-detail-motion] .service-photo img{
    animation:fintech-product-settle 3600ms cubic-bezier(.4,0,.2,1) both;
    animation-play-state:paused;
  }
  .services--product [data-detail-motion=playing] .service-photo img{
    animation-play-state:running;
  }
}
@media(min-width:1600px){
  .services--product .service-photo--tarjetas,.services--product .service-photo--tokenizacion{height:272px}
  .services--product .service-photo--wallets{height:355px}
  .services--product .service-card--wallets{min-height:644px}
}
@media(min-width:761px) and (max-width:1080px){
  .services--product .service-list{grid-template-columns:1fr 1fr}
  .services--product .service-card--wallets{
    grid-column:1/-1;grid-row:auto;min-height:350px;padding:38px 46% 38px 32px;justify-content:center;
  }
  .services--product .service-card--wallets .service-copy{margin:0}
  .services--product .service-photo--wallets{position:absolute;width:46%;height:100%;top:0;right:0;margin:0}
  .services--product .service-card--tarjetas,.services--product .service-card--tokenizacion{
    padding:220px 28px 28px;min-height:455px;justify-content:flex-start;
  }
  .services--product .service-photo--tarjetas,.services--product .service-photo--tokenizacion{
    width:100%;height:218px;left:50%;right:auto;top:0;transform:translateX(-50%);
  }
}
@media(max-width:760px){
  .services--product .service-card--wallets,.services--product .service-card--tarjetas,.services--product .service-card--tokenizacion{
    --product-inset:26px;padding:12px var(--product-inset) 28px;min-height:0;
  }
  /* In-flow 3:2 slots reserve the final height before a lazy image arrives.
     Cap artwork in landscape while letting it scale naturally on narrow phones. */
  .services--product .service-photo{
    position:relative;inset:auto;width:100%;max-width:340px;height:auto;
    aspect-ratio:3/2;flex:none;align-self:center;justify-self:center;
    transform:none;margin:0 0 16px;
  }
  .services--product .service-photo img{
    position:absolute;inset:0;
  }
  .services--product .service-photo--wallets,.services--product .service-photo--tarjetas,.services--product .service-photo--tokenizacion{
    width:calc(100% + var(--product-inset) * 2);
  }
  .services--product .service-photo--tarjetas,.services--product .service-photo--tokenizacion{
    width:calc(88% + var(--product-inset) * 1.76);max-width:300px;
  }
  .services--product .service-group--1 .service-card{min-height:0;padding:12px 0 30px}
  .services--product .service-group--1 .service-card+.service-card{padding:30px 0 0}
  .services--product .service-photo--kyc{order:-1;margin:0}
}
@media(max-width:380px){
  .services--product .service-card--wallets,.services--product .service-card--tarjetas,.services--product .service-card--tokenizacion{--product-inset:22px}
}
@media(prefers-reduced-motion:reduce){
  .services--product .service-photo img{animation:none!important;transform:none!important}
}

/* Exact source cutouts are composited during one finite interaction only. */
.services--product .fintech-action-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.services--product .service-photo[data-action-active][data-action-kind=payment]>img{opacity:0}
.services--product .service-photo[data-actions-mounted]>img{animation:none!important;transform:none!important}