.allping-final-hero,
.allping-final-hero *{box-sizing:border-box}

.allping-final-hero{
  --font-display:"Plus Jakarta Sans",Arial,sans-serif;
  --brand-navy:#00152d;
  --brand-primary:#002245;
  --brand-blue:#075985;
  --brand-cyan:#22d3ee;
  --brand-green:#a3e635;
  --brand-charcoal:#1f2937;
  position:relative;
  isolation:isolate;
  display:block;
  width:100vw;
  max-width:none;
  min-height:100svh;
  margin:0 calc(50% - 50vw);
  overflow:hidden;
  color:#fff;
  background-color:var(--brand-charcoal);
  background-image:
    radial-gradient(circle 600px at 50% 50%,rgba(59,130,246,.3),transparent),
    linear-gradient(rgba(34,211,238,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.08) 1px,transparent 1px);
  background-size:auto,54px 54px,54px 54px;
  background-position:center;
  background-repeat:no-repeat,repeat,repeat;
  font-family:var(--font-display);
  font-synthesis:none;
}

.allping-final-hero button{font:inherit;cursor:pointer}
.allping-final-hero :focus-visible{outline:2px solid var(--brand-cyan);outline-offset:5px}

.allping-final-hero .main-slider{
  position:relative;
  z-index:1;
  width:100%;
  height:88vh;
  overflow:hidden;
  background:var(--brand-charcoal);
}

.allping-final-hero .main-track{position:relative;width:100%;height:100%}

.allping-final-hero .main-slide{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background-color:var(--brand-charcoal);
  opacity:0;
  transform:translateX(100%);
  transition:
    transform var(--slider-duration,.65s) cubic-bezier(.65,0,.35,1),
    opacity var(--slider-duration,.65s) cubic-bezier(.65,0,.35,1);
}

.allping-final-hero .main-slide.is-active{z-index:2;opacity:1;transform:translateX(0)}
.allping-final-hero .main-slide.is-entering-right{z-index:3;opacity:1;transform:translateX(100%)}
.allping-final-hero .main-slide.is-entering-left{z-index:3;opacity:1;transform:translateX(-100%)}
.allping-final-hero .main-slide.is-leaving-left{z-index:2;opacity:0;transform:translateX(-10%)}
.allping-final-hero .main-slide.is-leaving-right{z-index:2;opacity:0;transform:translateX(10%)}

.allping-final-hero .main-slide-video{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}

.allping-final-hero .main-slider::after{
  position:absolute;
  z-index:3;
  inset:0;
  content:"";
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,21,45,.5) 0%,rgba(0,21,45,.28) 34%,rgba(0,21,45,.08) 70%,rgba(0,21,45,.02) 100%),
    radial-gradient(circle 720px at 22% 44%,rgba(34,211,238,.06),transparent 72%);
}

.allping-final-hero .hero-copy{
  position:absolute;
  z-index:4;
  top:39%;
  left:clamp(20px,3.5vw,56px);
  width:min(900px,calc(100% - clamp(56px,16vw,260px)));
  transform:translateY(-50%);
  color:#fff;
  text-align:left;
  text-shadow:0 3px 24px rgba(0,0,0,.34);
  pointer-events:none;
}

.allping-final-hero .hero-copy p{margin:0}

.allping-final-hero .hero-kicker{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;
  color:rgba(255,255,255,.78);
  font-size:clamp(9px,.9vw,12px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.allping-final-hero .hero-kicker>span{
  display:block;
  flex:none;
  width:clamp(12px,1vw,18px);
  height:2px;
  background:var(--brand-cyan);
  box-shadow:0 0 14px rgba(34,211,238,.65);
}

.allping-final-hero .hero-copy h1{
  display:flex;
  align-items:baseline;
  gap:clamp(16px,1.75vw,28px);
  margin:0 0 22px;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(48px,5.5vw,84px);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.015em;
  white-space:nowrap;
}

.allping-final-hero .hero-copy h1 em{color:#fff;font-style:normal;font-weight:800}

.allping-final-hero .hero-tagline{
  display:grid;
  gap:8px;
  max-width:620px;
  margin-bottom:24px;
  font-size:clamp(28px,3.35vw,46px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:0;
  text-transform:capitalize;
}

.allping-final-hero .hero-tagline-main{font-weight:600;letter-spacing:0}

.allping-final-hero .hero-tagline-service{
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--brand-cyan);
  font-weight:700;
  line-height:1.04;
  letter-spacing:0;
}

.allping-final-hero .hero-tagline-service small{
  color:rgba(255,255,255,.96);
  font:inherit;
  font-weight:700;
  letter-spacing:0;
  text-transform:capitalize;
}

.allping-final-hero .hero-tagline-arrow{
  display:inline-block;
  flex:none;
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:8px solid var(--brand-cyan);
  filter:drop-shadow(0 0 8px rgba(34,211,238,.45));
}

.allping-final-hero .sliding-text{
  display:inline-block;
  min-width:5ch;
  color:var(--brand-green);
  font-weight:700;
  letter-spacing:0;
  text-transform:capitalize;
  will-change:transform,opacity;
}

.allping-final-hero .sliding-text.is-entering-from-right{animation:allping-slide-from-right var(--slider-duration,.65s) cubic-bezier(.65,0,.35,1) both}
.allping-final-hero .sliding-text.is-entering-from-left{animation:allping-slide-from-left var(--slider-duration,.65s) cubic-bezier(.65,0,.35,1) both}

@keyframes allping-slide-from-right{
  from{opacity:0;transform:translateX(48px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes allping-slide-from-left{
  from{opacity:0;transform:translateX(-48px)}
  to{opacity:1;transform:translateX(0)}
}

.allping-final-hero .sliding-text.is-long-term{font-size:clamp(25px,2.3vw,36px)}

.allping-final-hero .hero-description{
  max-width:520px;
  padding-top:8px;
  color:rgba(255,255,255,.78);
  font-size:clamp(14px,1.1vw,16.5px);
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.01em;
}

.allping-final-hero .bottom-stage{
  position:absolute;
  z-index:5;
  top:73vh;
  right:0;
  left:0;
  height:150px;
  pointer-events:none;
}

.allping-final-hero .thumbnail-viewport{
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:150px;
  overflow:hidden;
}

.allping-final-hero .thumbnail-track{
  display:flex;
  gap:25px;
  width:max-content;
  padding-left:0;
  transform:translateX(calc(var(--rail-index) * -1 * var(--rail-step,284px)));
  transition:transform var(--slider-duration,.65s) cubic-bezier(.65,0,.35,1);
}

.allping-final-hero .thumbnail{
  position:relative;
  display:flex;
  flex:0 0 259px;
  align-items:flex-end;
  justify-content:flex-end;
  width:259px;
  height:133px;
  padding:0 10px 10px;
  overflow:hidden;
  border:0;
  border-radius:10px;
  color:var(--card-text,#fff);
  background-color:var(--card-color,var(--brand-blue));
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  text-align:right;
  isolation:isolate;
  pointer-events:auto;
}

.allping-final-hero .thumbnail[data-index="0"]{background-image:linear-gradient(0deg,rgba(19,19,19,.5),rgba(0,0,0,0) 30%),url('assets/thumbnails/ingenieria.webp')}
.allping-final-hero .thumbnail[data-index="1"]{background-image:linear-gradient(0deg,rgba(19,19,19,.5),rgba(0,0,0,0) 30%),url('assets/thumbnails/tecnologia.webp')}
.allping-final-hero .thumbnail[data-index="2"]{background-image:linear-gradient(0deg,rgba(19,19,19,.5),rgba(0,0,0,0) 30%),url('assets/thumbnails/roboticayautomatizacion.webp')}
.allping-final-hero .thumbnail[data-index="3"]{background-image:linear-gradient(0deg,rgba(19,19,19,.5),rgba(0,0,0,0) 30%),url('assets/thumbnails/fabricaciondigital.webp')}
.allping-final-hero .thumbnail[data-index="4"]{background-image:linear-gradient(0deg,rgba(19,19,19,.5),rgba(0,0,0,0) 30%),url('assets/thumbnails/ingenieriainversa.webp')}
.allping-final-hero .thumbnail[data-index="5"]{background-image:linear-gradient(0deg,rgba(19,19,19,.5),rgba(0,0,0,0) 30%),url('assets/thumbnails/laboratorios.webp')}
.allping-final-hero .thumbnail[data-index="6"]{background-image:linear-gradient(0deg,rgba(19,19,19,.5),rgba(0,0,0,0) 30%),url('assets/thumbnails/consultoria.webp')}
.allping-final-hero .thumbnail[data-index="7"]{background-image:linear-gradient(0deg,rgba(19,19,19,.5),rgba(0,0,0,0) 30%),url('assets/thumbnails/escaneo3d.webp')}

.allping-final-hero .thumbnail::before{
  position:absolute;
  z-index:0;
  inset:0;
  content:"";
  background:rgba(0,34,69,.22);
  transition:opacity .2s ease;
  pointer-events:none;
}

.allping-final-hero .thumbnail span{position:relative;z-index:1;max-width:92%;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.allping-final-hero .thumbnail:hover::before{opacity:.03}

.allping-final-hero .mobile-progress{display:none}

@media (max-width:700px){
  .allping-final-hero{
    width:100vw;
    min-height:100svh;
    height:100svh;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }

  .allping-final-hero .main-slider{height:100%}
  .allping-final-hero .main-slide{transform:translateY(100%)}
  .allping-final-hero .main-slide.is-active{transform:translateY(0)}
  .allping-final-hero .main-slide.is-entering{z-index:3;opacity:1;transform:translateY(100%)}
  .allping-final-hero .main-slide.is-entering-prev{z-index:3;opacity:1;transform:translateY(-100%)}
  .allping-final-hero .main-slide.is-leaving{z-index:2;opacity:0;transform:translateY(-10%)}

  .allping-final-hero .hero-copy{
    top:30%;
    left:18px;
    width:calc(100% - 36px);
  }

  .allping-final-hero .hero-kicker{
    gap:8px;
    margin-bottom:13px;
    font-size:9px;
    letter-spacing:.1em;
  }

  .allping-final-hero .hero-kicker>span{width:12px}

  .allping-final-hero .hero-copy h1{
    gap:12px;
    margin-bottom:20px;
    font-size:clamp(38px,11vw,58px);
    white-space:normal;
  }

  .allping-final-hero .hero-tagline{
    gap:7px;
    margin-bottom:20px;
    font-size:clamp(25px,6.7vw,35px);
    line-height:1.08;
  }

  .allping-final-hero .hero-tagline-service{gap:12px}
  .allping-final-hero .hero-tagline-arrow{border-top-width:8px;border-bottom-width:8px;border-left-width:6px}
  .allping-final-hero .sliding-text.is-long-term{font-size:clamp(20px,5.5vw,27px)}
  .allping-final-hero .hero-description{max-width:340px;font-size:15px}
  .allping-final-hero .hero-description-break{display:none}
  .allping-final-hero .bottom-stage{display:none}

  .allping-final-hero .mobile-progress{
    position:absolute;
    z-index:6;
    right:0;
    bottom:58px;
    left:0;
    display:flex;
    justify-content:center;
    gap:6px;
  }

  .allping-final-hero .mobile-progress::before{
    position:absolute;
    z-index:-1;
    right:-20px;
    bottom:-48px;
    left:-20px;
    height:110px;
    content:"";
    background:linear-gradient(transparent,rgba(0,0,0,.65));
  }

  .allping-final-hero .progress-dot{
    width:34px;
    height:5px;
    padding:0;
    border-radius:8px;
    background:rgba(255,255,255,.5);
    transition:width .3s ease,transform .3s ease,background-color .3s ease;
  }

  .allping-final-hero .progress-dot.is-active{width:46px;background:#fff;transform:translateY(-3px)}
}

@media (prefers-reduced-motion:reduce){
  .allping-final-hero .main-slide,
  .allping-final-hero .thumbnail-track,
  .allping-final-hero .sliding-text{transition:none!important;animation:none!important}
  .allping-final-hero .progress-dot{transition:none!important}
}