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

.allping-final-hero{
--font-display:"Inter",Arial,sans-serif;
  --brand-navy:#00152d;
  --brand-primary:#002245;
  --brand-blue:#075985;
  --brand-cyan:#22d3ee;
  --brand-green:#a3e635;
  --brand-charcoal:#1f2937;
  --hero-video-width:196.4svh;
  --hero-stage-height:110.5svh;
  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-navy);
  background-image:radial-gradient(circle 600px at 50% 50%,rgba(59,130,246,.3),transparent);
  background-size:auto;
  background-position:center;
  background-repeat:no-repeat;
  font-family:var(--font-display);
  font-synthesis:none;
}

.allping-final-hero::before{
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  width:max(48px,calc(100% - var(--hero-video-width) + 48px));
  height:var(--hero-stage-height);
  content:"";
  background:linear-gradient(90deg,rgba(4,28,54,.88),rgba(29,65,92,.68) 68%,rgba(81,131,167,.18));
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 48px),transparent 100%);
  pointer-events:none;
}

.allping-final-hero .hero-hex-decoration{
  position:absolute;
  z-index:3;
  top:calc(var(--hero-stage-height) * -.06);
  left:clamp(-44px,-2.4vw,-18px);
  width:clamp(466.667px,max(70vw,120svh),1500px);
  height:clamp(373.333px,max(56vw,96svh),1200px);
  overflow:hidden;
  box-shadow:none;
  pointer-events:none;
}

.allping-final-hero .hero-hex-decoration svg,
.allping-final-hero .hero-hex-decoration img{
  display:block;
  width:100%;
  height:100%;
}

.allping-final-hero .hero-hex-decoration img{
  object-fit:contain;
  object-position:left center;
}

.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:var(--hero-video-width);
  height:auto;
  aspect-ratio:16 / 9;
  margin-left:calc(100% - var(--hero-video-width));
  overflow:hidden;
  background:var(--brand-navy);
}

.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-navy);
  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::before{
  position:absolute;
  z-index:1;
  inset:0 auto 0 0;
  width:100%;
  content:"";
  background:
    linear-gradient(108deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.055) 34%,transparent 74%),
    linear-gradient(90deg,rgba(0,18,38,.78) 0%,rgba(0,23,45,.64) 38%,rgba(0,30,57,.36) 72%,rgba(0,34,64,.08) 100%),
    linear-gradient(180deg,rgba(112,207,255,.1),transparent 38%,rgba(0,10,26,.12)),
    radial-gradient(ellipse at 18% 14%,rgba(119,205,255,.1),transparent 58%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-mask-image:linear-gradient(135deg,#000 0%,#000 8%,rgba(0,0,0,.82) 24%,rgba(0,0,0,.48) 38%,transparent 52%);
  mask-image:linear-gradient(135deg,#000 0%,#000 8%,rgba(0,0,0,.82) 24%,rgba(0,0,0,.48) 38%,transparent 52%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.12);
  pointer-events:none;
}

.allping-final-hero .main-slide::after{
  position:absolute;
  z-index:2;
  inset:0;
  content:"";
  background:rgba(0,34,69,.16);
  pointer-events:none;
}

.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 .hero-copy{
  position:absolute;
  z-index:4;
  top:36%;
  left:clamp(20px,3.5vw,56px);
  width:min(76vw,980px);
  max-width:calc(100% - clamp(48px,10vw,160px));
  transform:translateY(-50%);
  color:#fff;
  text-align:left;
  pointer-events:none;
}

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

.allping-final-hero .hero-eyebrow{
  margin:0 0 14px;
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.allping-final-hero .hero-tagline{
  display:grid;
  gap:12px;
  max-width:1020px;
  margin:0 0 26px;
  color:#fff;
  font-family:"Plus Jakarta Sans",var(--font-display);
  font-size:61px;
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.025em;
  text-transform:capitalize;
}

.allping-final-hero .hero-tagline-main{display:block;font-weight:800;letter-spacing:0;text-transform:capitalize}
.allping-final-hero .hero-title-line{display:block;white-space:nowrap}
.allping-final-hero .hero-lowercase{text-transform:lowercase}

.allping-final-hero .hero-description{
  max-width:700px;
  color:rgba(255,255,255,.92);
  font-size:18px;
  font-weight:500;
  line-height:1.48;
  letter-spacing:-.01em;
  animation:hero-enter-from-left .68s cubic-bezier(.22,.72,.25,1) 2.50s both;
}

.allping-final-hero .aterriza{
  display:inline-block;
  animation:aterrizar 1.15s cubic-bezier(.2,.85,.25,1) both;
  animation-delay:var(--delay,0s);
}

.allping-final-hero .hero-eyebrow{
  animation:hero-eyebrow-appear .85s ease-out .05s both;
}

@keyframes aterrizar{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes hero-enter-from-left{
  from{opacity:0;transform:translateX(-24px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes hero-eyebrow-appear{
  from{opacity:0}
  to{opacity:1}
}

.allping-final-hero .bottom-stage{
  position:absolute;
  z-index:5;
  top:0;
  right:0;
  width:min(46vw,520px);
  height:100%;
  pointer-events:none;
}

.allping-final-hero .thumbnail-viewport{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
}

.allping-final-hero .thumbnail-track{
  position:relative;
  width:100%;
  height:100%;
  pointer-events:none;
}

.allping-final-hero .thumbnail{
  position:absolute;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  width:230px;
  height:116px;
  padding:9px 10px 0;
  overflow:hidden;
  border:0;
  border-radius:10px;
  color:#fff;
  background-color:var(--card-color,var(--brand-blue));
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  font-size:12px;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:normal;
  text-transform:uppercase;
  text-align:left;
  isolation:isolate;
  perspective:700px;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  transition:padding .25s ease;
}

.allping-final-hero .thumbnail[data-index="0"]{background-image:linear-gradient(180deg,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(180deg,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(180deg,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(180deg,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(180deg,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(180deg,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(180deg,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(180deg,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,.32);
  transition:background-color .25s ease;
  pointer-events:none;
}

.allping-final-hero .thumbnail > span{
  position:relative;
  z-index:1;
  max-width:92%;
  line-height:1.15;
  text-wrap:balance;
  transform-origin:center;
}
.allping-final-hero .thumbnail:hover:not([aria-pressed="true"])::before{background-color:rgba(0,34,69,.16)}
.allping-final-hero .thumbnail[aria-pressed="true"]{
  align-items:center;
  padding:10px 12px;
}
.allping-final-hero .thumbnail[aria-pressed="true"]::after{
  position:absolute;
  z-index:2;
  inset:0;
  content:"";
  border:1px solid #0099BB;
  border-radius:inherit;
  box-sizing:border-box;
  pointer-events:none;
}
.allping-final-hero .thumbnail[aria-pressed="true"]::before{background-color:rgba(0,19,40,.78)}
.allping-final-hero .thumbnail[aria-pressed="true"] > span{
  max-width:100%;
  font-size:29px;
  line-height:1.06;
  overflow-wrap:anywhere;
}
.allping-final-hero .thumbnail[aria-pressed="true"][data-index="2"] > span{font-size:22px}
.allping-final-hero .thumbnail[aria-pressed="true"][data-index="5"] > span{font-size:25px}
.allping-final-hero .thumbnail[aria-pressed="true"][data-index="3"] > span,
.allping-final-hero .thumbnail[aria-pressed="true"][data-index="4"] > span,
.allping-final-hero .thumbnail[aria-pressed="true"][data-index="6"] > span{font-size:27px}

@keyframes thumbnail-tracking-in-expand-fwd{
  0%{letter-spacing:-.18em;transform:translateZ(-80px);opacity:0}
  40%{opacity:.6}
  100%{letter-spacing:0;transform:translateZ(0);opacity:1}
}

.allping-final-hero .thumbnail > span.is-tracking-enter{
  animation:thumbnail-tracking-in-expand-fwd .8s cubic-bezier(.215,.610,.355,1) both;
}

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

@media (min-width:1025px) and (max-height:800px){
  .allping-final-hero .hero-copy{
    top:clamp(168px,22vh,190px);
    transform:none;
  }
}

/* Tablet: use the reduced hex structure while keeping the desktop composition intact. */
@media (min-width:768px) and (max-width:1024px){
  .allping-final-hero .hero-hex-decoration img{
    content:url('hex-decoration-tablet.svg?ver=1.5.59&rev=5');
  }

  .allping-final-hero .thumbnail-track{
    transform:scale(.81);
    transform-origin:right center;
  }

  /* Keep the glass layer fixed while individual video slides transition. */
  .allping-final-hero .main-track{isolation:isolate}

  .allping-final-hero .main-track::before,
  .allping-final-hero .main-track::after{
    position:absolute;
    inset:0;
    content:"";
    pointer-events:none;
  }

  .allping-final-hero .main-track::before{
    z-index:4;
    background:
      linear-gradient(108deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.055) 34%,transparent 74%),
      linear-gradient(90deg,rgba(0,18,38,.78) 0%,rgba(0,23,45,.64) 38%,rgba(0,30,57,.36) 72%,rgba(0,34,64,.08) 100%),
      linear-gradient(180deg,rgba(112,207,255,.1),transparent 38%,rgba(0,10,26,.12)),
      radial-gradient(ellipse at 18% 14%,rgba(119,205,255,.1),transparent 58%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-mask-image:linear-gradient(135deg,#000 0%,#000 8%,rgba(0,0,0,.82) 24%,rgba(0,0,0,.48) 38%,transparent 52%);
    mask-image:linear-gradient(135deg,#000 0%,#000 8%,rgba(0,0,0,.82) 24%,rgba(0,0,0,.48) 38%,transparent 52%);
    box-shadow:inset 1px 0 0 rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.12);
  }

  .allping-final-hero .main-track::after{
    z-index:5;
    background:rgba(0,34,69,.16);
  }

  .allping-final-hero .main-slide::before,
  .allping-final-hero .main-slide::after{display:none}
}

/* Portrait tablet: keep the 16:9 video at 65% of the viewport height and raise it. */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .allping-final-hero{
    --hero-video-width:115.5556svh;
    --tablet-hero-height:68.5svh;
    --hero-stage-height:100svh;
    height:var(--tablet-hero-height);
    min-height:var(--tablet-hero-height);
    background-image:radial-gradient(circle 600px at 50% 50svh,rgba(59,130,246,.3),transparent);
  }

  .allping-final-hero::before{display:none}

  .allping-final-hero .hero-eyebrow{font-size:13px}
  .allping-final-hero .hero-tagline{font-size:50px}
  .allping-final-hero .hero-description{font-size:16px}
  .allping-final-hero .hero-copy{top:22svh}

  .allping-final-hero .bottom-stage{height:100svh}

  .allping-final-hero .main-slider{
    position:absolute;
    top:36svh;
    left:50%;
    margin-left:0;
    transform:translate(-50%,-50%);
  }
}

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

  .allping-final-hero::before{display:none}
  .allping-final-hero .hero-hex-decoration{
    display:block;
    top:-12px;
    left:-10px;
    width:clamp(408px,138vw,648px);
    height:clamp(272px,92vw,432px);
  }
  .allping-final-hero .hero-hex-decoration img{
    content:url('hex-decoration-mobile.svg?ver=1.5.59&rev=2');
  }
  .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 .main-slide::before{
    display:none;
  }

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

  .allping-final-hero .hero-tagline{
    gap:10px;
    margin-bottom:22px;
    font-size:clamp(30px,7.6vw,44px);
    line-height:1.05;
  }

  .allping-final-hero .hero-tagline{font-size:clamp(28px,6.3vw,40px)}

  .allping-final-hero .hero-eyebrow{margin-bottom:11px;font-size:11px;letter-spacing:.1em}

  .allping-final-hero .hero-description{max-width:540px;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 .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{transition:none!important;animation:none!important}
  .allping-final-hero .aterriza,
  .allping-final-hero .hero-eyebrow,
  .allping-final-hero .hero-description{animation:none!important;transform:none!important;opacity:1!important}
  .allping-final-hero .thumbnail,
  .allping-final-hero .thumbnail::before,
  .allping-final-hero .thumbnail span{transition:none!important}
  .allping-final-hero .thumbnail > span.is-tracking-enter{
    animation:none!important;
    letter-spacing:normal!important;
    transform:none!important;
    opacity:1!important;
  }
  .allping-final-hero .progress-dot{transition:none!important}
}