/* GGPC — Scroll-cinema v3. Video never auto-plays; scrolling seeks exact frames. */
.static-photo{background-image:none!important;background:linear-gradient(160deg,#0a1723 8%,#0c2530 65%,#061219 100%)}
.photo-overlay{opacity:.18;background:radial-gradient(ellipse at 60% 20%,#0f3e42,transparent 70%)}
.cinematic-story{height:850svh;position:relative;z-index:2;isolation:isolate;background:#050d14;scroll-margin-top:0}
.cine-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:100px}
.cine-pin{position:sticky;top:0;width:100%;height:100svh;min-height:520px;overflow:hidden;isolation:isolate;background:#061320}
.cine-visual,.cine-video,.cine-veil,.cine-grid,.cine-edge{position:absolute;inset:0;width:100%;height:100%}
.cine-video{object-fit:cover;object-position:50% 49%;display:block;background:#091822;pointer-events:none}
.cine-veil{z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(1,11,20,.93) 0%,transparent 26%,transparent 68%,rgba(1,10,20,.46) 100%),linear-gradient(90deg,rgba(1,9,17,.86) 0%,rgba(2,12,21,.7) 24%,rgba(2,13,20,.14) 80%);transition:background .35s}
.cine-pin.text-right .cine-veil{background:linear-gradient(0deg,rgba(1,11,20,.95) 0%,transparent 25%,transparent 68%,rgba(1,10,20,.48) 100%),linear-gradient(270deg,rgba(1,9,17,.88) 0%,rgba(2,12,21,.67) 27%,rgba(2,13,20,.13) 80%)}
.cine-grid{z-index:2;pointer-events:none;opacity:.28;background:linear-gradient(to right,transparent 19.94%,rgba(255,255,255,.12) 20%,transparent 20.06%,transparent 79.94%,rgba(255,255,255,.12) 80%,transparent 80.06%)}
.cine-edge{z-index:2;pointer-events:none;border:1px solid transparent}
.cine-edge:before,.cine-edge:after{content:"";position:absolute;width:32px;height:32px;border-color:rgba(222,242,239,.42)}
.cine-edge:before{top:105px;left:30px;border-top:1px solid;border-left:1px solid}.cine-edge:after{right:30px;bottom:145px;border-right:1px solid;border-bottom:1px solid}
.cine-meta{position:absolute;top:110px;left:max(70px,calc((100vw - 1390px)/2));right:max(70px,calc((100vw - 1390px)/2));display:flex;align-items:center;justify-content:space-between;z-index:5;pointer-events:none;font-size:10px;font-weight:800;letter-spacing:.2em;color:rgba(240,251,255,.86)}
.cine-meta span:first-child{display:flex;align-items:center;gap:13px}.cine-meta i{width:6px;height:6px;border-radius:50%;background:#36d2a3;box-shadow:0 0 12px #36d2a3}.cine-meta b{color:#34cda1}
.cine-captions{position:absolute;inset:0;z-index:4;pointer-events:none}
.cine-caption{position:absolute;bottom:clamp(160px,23vh,245px);left:clamp(70px,8.3vw,164px);right:auto;width:min(950px,74vw);max-width:950px;opacity:0;visibility:hidden;transform:translateY(21px);transition:opacity .38s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility .4s;display:flex;align-items:flex-start;flex-direction:column}
.cine-caption.align-right{left:auto;right:clamp(70px,8.3vw,164px);align-items:flex-start;width:min(820px,65vw)}
.cine-caption.align-right .cine-title{max-width:820px}
.cine-caption.is-active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.cine-eyebrow{display:flex;align-items:center;gap:13px;color:#c5ede3;font-size:11px;font-weight:800;letter-spacing:.18em;margin-bottom:26px;text-shadow:0 2px 15px #031218}
.cine-eyebrow>span{width:33px;height:1px;background:var(--emerald);display:inline-block}
.cine-title{font-family:var(--head);font-weight:1000;line-height:.86;font-stretch:condensed;letter-spacing:-.06em;font-size:clamp(66px,8vw,142px);margin:0;max-width:100%;text-shadow:0 9px 46px rgba(0,0,0,.28)}
.cine-title .title-line{display:block;overflow:hidden;white-space:nowrap;padding:.04em .065em .065em 0;line-height:.91}
.cine-title .title-line>span{display:block;transform:translate3d(0,115%,0) skewY(6deg);opacity:.5;transition:transform .85s cubic-bezier(.2,.83,.2,1),opacity .8s ease;will-change:transform}
.cine-caption.is-active .cine-title .title-line>span{transform:translate3d(0,0,0) skewY(0deg);opacity:1}
.cine-caption.is-active .title-line:nth-child(2)>span{transition-delay:.10s}
.cine-caption.is-active .title-line:nth-child(3)>span{transition-delay:.18s}
.cine-title .accent{color:#45e1b1}.cine-title .numeric{font-size:1.15em}.cine-title .plus{color:#45e1b1;font-size:.65em;vertical-align:12%}
.cine-copy{font-size:clamp(13px,1.15vw,16px);line-height:1.75;color:#e0edf0;max-width:485px;margin:23px 0 0;opacity:0;transform:translateY(12px);transition:opacity .65s ease .25s,transform .65s ease .25s;text-shadow:0 3px 10px #04111b}
.cine-caption.is-active .cine-copy{opacity:1;transform:translateY(0)}
.cine-inline-link{display:inline-flex;align-items:center;gap:24px;margin-top:23px;border-bottom:1px solid rgba(75,229,184,.6);padding-bottom:8px;font-size:10px;font-weight:900;letter-spacing:.13em;color:#8cf4d1;opacity:0;transform:translateY(10px);transition:opacity .55s .3s,transform .55s .3s}
.cine-caption.is-active .cine-inline-link{opacity:1;transform:translateY(0)}.cine-inline-link b{font-size:17px}
.cine-technical{display:flex;flex-wrap:wrap;gap:17px;margin-top:20px;font-size:9px;font-weight:700;letter-spacing:.09em;color:#a3e5d1}
.cine-bottom{position:absolute;z-index:9;left:max(70px,calc((100vw - 1390px)/2));right:max(70px,calc((100vw - 1390px)/2));bottom:42px;color:#ecf7fa}
.cine-bottom-head,.cine-bottom-tail{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.14em;font-weight:800}
.cine-bottom-head{margin-bottom:20px}.cine-bottom-tail{margin-top:15px;color:#bbced3}.cine-bottom-tail a{color:#bfeeda;transition:color .25s}.cine-bottom-tail a:hover{color:white}
.cine-bottom-tail a span{margin-left:8px}
.scroll-wheel{font-size:22px;vertical-align:middle;line-height:0;color:#57d8b0;margin-right:6px}
.cine-timeline{height:27px;display:block;position:relative;isolation:isolate}
.cine-timeline:before{content:"";height:2px;background:rgba(241,253,255,.31);position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:-1}
.cine-timeline-progress{position:absolute;left:0;top:calc(50% - 1px);height:2px;width:100%;background:#45e3ad;transform:scaleX(0);transform-origin:left center;z-index:-1;box-shadow:0 0 14px #36d2a344}
.cine-timeline button{border:1px solid #d4e3e1;background:#0b1e29;color:#dfebe9;width:23px;height:23px;border-radius:50%;padding:0;display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s,transform .25s;position:absolute;left:0;top:2px;transform:translateX(-50%)}
.cine-timeline button span{font-size:8px;letter-spacing:0;font-weight:900}.cine-timeline button:hover{transform:translateX(-50%) scale(1.2);border-color:#5cf2c2}.cine-timeline button.is-current{background:#4de0b3;border-color:#4de0b3;color:#05251c;box-shadow:0 0 0 6px rgba(52,229,175,.13)}
.cine-loading{position:absolute;z-index:10;right:5%;top:35%;display:flex;align-items:center;gap:12px;padding:11px 16px;border:1px solid rgba(132,233,199,.33);background:rgba(2,18,26,.83);font-size:9px;letter-spacing:.13em;font-weight:800;color:#d5f3e9;transition:opacity .45s,visibility .45s}.cine-loading.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.cine-loading-icon{height:14px;width:14px;border:2px solid rgba(89,229,180,.23);border-top-color:#45dca9;border-radius:50%;animation:cinespin 1s linear infinite}@keyframes cinespin{to{transform:rotate(360deg)}}
.cine-error{position:absolute;z-index:15;left:50%;top:45%;max-width:450px;transform:translate(-50%,-50%);background:#04212a;padding:24px;border:1px solid #49deb7;color:white;line-height:1.6}
.cine-error[hidden]{display:none}
.narrative-bridge{--reveal-x:50%;--reveal-y:50%;position:relative;z-index:3;isolation:isolate;min-height:100svh;overflow:hidden;border-top:1px solid #274950;border-bottom:1px solid #274950;background:#071924}
.narrative-bridge:before,.narrative-bridge:after{content:"";position:absolute;inset:0;pointer-events:none;background-position:center;background-size:cover;background-repeat:no-repeat}
.narrative-bridge:before{z-index:0;background-image:linear-gradient(90deg,rgba(2,16,27,.91) 0%,rgba(3,19,30,.68) 43%,rgba(3,17,27,.18) 76%,rgba(2,13,22,.28) 100%),linear-gradient(0deg,rgba(2,14,24,.65),transparent 52%,rgba(3,17,28,.28)),url("../img/Imagen de ChatGPT 9 oct 2026, 01_07_16-1.png")}
.narrative-bridge:after{z-index:1;opacity:0;background-image:linear-gradient(90deg,rgba(2,16,27,.46),rgba(3,17,27,.06)),url("../img/Imagen de ChatGPT 9 oct 2026, 01_07_17-2.png");-webkit-mask-image:radial-gradient(circle 190px at var(--reveal-x) var(--reveal-y),#000 0%,#000 58%,rgba(0,0,0,.82) 72%,transparent 100%);mask-image:radial-gradient(circle 190px at var(--reveal-x) var(--reveal-y),#000 0%,#000 58%,rgba(0,0,0,.82) 72%,transparent 100%);transition:opacity .22s ease}
.narrative-bridge.is-revealing:after{opacity:1}
.bridge-content{position:relative;z-index:2;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,320px);align-items:center;gap:clamp(55px,6vw,110px);padding:clamp(105px,12vh,145px) 0 clamp(75px,9vh,110px)}
.bridge-main{min-width:0;align-self:center}.bridge-label,.bridge-right>span{font-size:10px;font-weight:850;letter-spacing:.24em;color:#65eac1}.bridge-label{display:flex;align-items:center;gap:22px}.bridge-label:before{content:"";width:60px;height:1px;background:#65eac1}
.bridge-content p{margin:0}.bridge-main>p{max-width:100%;font-family:var(--head);font-size:clamp(52px,5.3vw,96px);font-weight:950;letter-spacing:-.06em;line-height:.83;margin-top:33px;text-shadow:0 8px 35px rgba(0,0,0,.24)}.bridge-main>p em{font-style:normal;color:#59e5ca}
.bridge-cta{width:min(360px,100%);min-height:84px;margin-top:48px;padding:18px 27px;display:flex;align-items:center;justify-content:space-between;border:1px solid #61e7d3;background:rgba(4,25,35,.42);font-size:12px;font-weight:900;line-height:1.45;letter-spacing:.13em;transition:background .25s,color .25s}.bridge-cta:hover{background:#61e7d3;color:#05231e}.bridge-cta b{color:#61e7d3;font-size:31px;line-height:1}.bridge-cta:hover b{color:inherit}
.bridge-right{width:100%;max-width:320px;padding:40px 34px 43px;border:1px solid rgba(126,226,211,.55);background:rgba(4,25,36,.78);backdrop-filter:blur(8px);box-shadow:0 20px 55px rgba(0,0,0,.2)}.bridge-right>span{display:block;line-height:2.5}.bridge-right p{font-size:clamp(15px,1.1vw,18px);color:#edf7f8;line-height:1.55;margin-top:27px}
.cinematic-story+.narrative-bridge+.solutions{margin-top:0}
.solutions{background:linear-gradient(90deg,rgba(3,16,27,.94) 0%,rgba(4,19,30,.82) 45%,rgba(3,16,27,.68) 100%),linear-gradient(0deg,rgba(3,15,25,.88),rgba(3,17,28,.3) 48%,rgba(3,15,25,.8)),url("../img/Puerto industrial al anochecer con grúas y reflejos cálidos.png") center center/cover no-repeat}
.presence{background:linear-gradient(90deg,rgba(3,15,26,.93) 0%,rgba(3,17,28,.75) 42%,rgba(3,16,26,.48) 72%,rgba(3,15,25,.66) 100%),linear-gradient(0deg,rgba(3,15,25,.82),transparent 48%,rgba(3,15,25,.42)),url("../img/Mapa Logístico de Colombia al Anochecer.png") center center/cover no-repeat}
.future{--reveal-x:50%;--reveal-y:50%;position:relative;isolation:isolate;background:#061923}
.future:before,.future:after{content:"";position:absolute;inset:0;pointer-events:none;background-position:center;background-size:cover;background-repeat:no-repeat}
.future:before{z-index:0;background-image:linear-gradient(90deg,rgba(3,15,26,.76),rgba(3,16,27,.28) 58%,rgba(3,15,25,.42)),linear-gradient(0deg,rgba(3,15,25,.62),transparent 55%,rgba(3,15,25,.3)),url("../img/Imagen de ChatGPT 9 oct 2026, 00_58_24-1.png")}
.future:after{z-index:1;opacity:0;background-image:linear-gradient(90deg,rgba(3,15,26,.38),rgba(3,16,27,.08)),url("../img/Imagen de ChatGPT 9 oct 2026, 00_58_25-2.png");-webkit-mask-image:radial-gradient(circle 190px at var(--reveal-x) var(--reveal-y),#000 0%,#000 58%,rgba(0,0,0,.82) 72%,transparent 100%);mask-image:radial-gradient(circle 190px at var(--reveal-x) var(--reveal-y),#000 0%,#000 58%,rgba(0,0,0,.82) 72%,transparent 100%);transition:opacity .22s ease}
.future.is-revealing:after{opacity:1}.future-inner{position:relative;z-index:2}
@media(hover:none){.future:after,.narrative-bridge:after{display:none}}
@media (min-width:1400px){.cine-title{font-size:clamp(90px,7.25vw,136px)}.cine-caption.align-right{width:min(870px,66vw)}}
@media (max-width:1100px){.cine-caption{left:7vw;width:80vw}.cine-caption.align-right{right:7vw;width:75vw}.cine-title{font-size:clamp(63px,8.1vw,106px)}.cine-meta,.cine-bottom{left:7vw;right:7vw}.cine-meta-right{display:none}}
@media (min-width:761px) and (max-width:1100px){.bridge-content{grid-template-columns:minmax(0,1fr) 285px;gap:42px}.bridge-main>p{font-size:clamp(43px,5.1vw,56px)}.bridge-right{max-width:285px;padding:32px 28px 35px}}
@media (max-width:760px){
  html{overflow-x:clip}
  .cinematic-story{width:100%;max-width:100%;height:830svh;margin-inline:0}
  .cine-pin{left:0;right:0;width:100%;max-width:100%;min-height:500px}
  .cine-visual{inset:0;width:100%;height:100%}
  .cine-video{inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);min-width:0;min-height:0;max-width:none;transform:none;object-fit:cover;object-position:50% center}
  .cine-veil,.cine-pin.text-right .cine-veil{background:linear-gradient(0deg,rgba(0,8,16,.99) 0%,rgba(1,9,17,.92) 17%,rgba(0,10,20,.45) 55%,rgba(0,10,20,.32) 100%)}
  .cine-grid{opacity:.09}.cine-edge:before{left:18px;top:91px}.cine-edge:after{right:18px;bottom:138px}
  .cine-meta{left:20px;right:20px;top:92px;font-size:8px;letter-spacing:.11em}.cine-meta i{width:5px;height:5px}
  .cine-caption,.cine-caption.align-right{left:20px;right:20px;width:calc(100% - 40px);bottom:clamp(135px,19svh,195px)}
  .cine-eyebrow{font-size:9px;margin-bottom:15px;letter-spacing:.12em}
  .cine-title,.cine-caption.align-right .cine-title{font-size:clamp(45px,10.5vw,82px);letter-spacing:-.058em;max-width:100%;line-height:.90}
  .cine-copy{font-size:clamp(12px,3.3vw,15px);max-width:94%;margin-top:15px;line-height:1.55}
  .cine-inline-link{font-size:9px;margin-top:15px}.cine-technical{display:none}
  .cine-bottom{left:20px;right:20px;bottom:27px}.cine-bottom-head,.cine-bottom-tail{font-size:8px;letter-spacing:.07em}
  .cine-bottom-head{margin-bottom:12px}.cine-bottom-tail{margin-top:11px}.cine-timeline button{width:21px;height:21px}.cine-bottom-tail a{font-size:8px}.cine-instruction{max-width:54%}
  .narrative-bridge{min-height:auto}.narrative-bridge:before,.narrative-bridge:after{background-position:67% center}
  .solutions{background-position:center,center,62% center;background-size:auto,auto,cover}
  .presence{background-position:center,center,68% center;background-size:auto,auto,cover}
  .bridge-content{min-height:auto;grid-template-columns:1fr;gap:42px;padding:90px 0 75px}.bridge-main>p{font-size:clamp(28px,7.5vw,46px);margin-top:25px;line-height:.86}.bridge-label{letter-spacing:.15em}.bridge-label:before{width:35px}.bridge-cta{margin-top:34px;min-height:72px}.bridge-right{max-width:430px;padding:31px 29px}.bridge-right p{margin-top:18px;font-size:14px}
  .cine-loading{right:20px;top:25%;font-size:8px}
}
@media (max-width:420px){.cine-title,.cine-caption.align-right .cine-title{font-size:clamp(40px,10.4vw,56px)}.cine-eyebrow{font-size:8px}.cine-caption,.cine-caption.align-right{bottom:152px}.cine-copy{font-size:12px}.cine-meta span:first-child{gap:9px}.cine-instruction{font-size:7px}}
@media (max-height:600px) and (min-width:761px){.cine-caption{bottom:118px}.cine-title{font-size:clamp(55px,6vw,88px)}.cine-meta{top:80px}.cine-bottom{bottom:18px}.cine-eyebrow{margin-bottom:13px}.cine-copy{margin-top:12px}}
@media (prefers-reduced-motion:reduce){.cinematic-story{height:100svh}.cine-captions .cine-caption{display:none}.cine-captions .cine-caption:first-child{display:flex;visibility:visible;opacity:1}.cine-title .title-line>span{transform:none!important;opacity:1!important}.cine-copy,.cine-inline-link{opacity:1!important;transform:none!important}.cine-loading-icon{animation:none}}
/* Longer closing headline stays intact at narrow widths. */
.cine-caption[data-step="06"]{width:min(1050px,84vw);max-width:1050px}
.cine-caption[data-step="06"] .cine-title{font-size:clamp(56px,6.6vw,111px);width:100%;max-width:none}
@media(max-width:760px){
  .cine-caption[data-step="06"]{width:calc(100% - 40px);max-width:none}
  .cine-caption[data-step="06"] .cine-title{font-size:clamp(32px,8vw,56px)}
}

/* Keep the opening headline fully visible inside its animated line masks. */
.cine-caption[data-step="01"]{width:min(1100px,84vw);max-width:1100px}
.cine-caption[data-step="01"] .cine-title{font-size:clamp(58px,7vw,124px);width:100%}
.cine-caption[data-step="03"]{width:min(1100px,84vw);max-width:1100px}
.cine-caption[data-step="03"] .cine-title{font-size:clamp(58px,7vw,124px);width:100%}
@media(max-width:760px){
  .cine-caption[data-step="01"],.cine-caption[data-step="03"]{width:calc(100% - 40px);max-width:none}
  .cine-caption[data-step="01"] .cine-title,.cine-caption[data-step="03"] .cine-title{font-size:clamp(36px,9.2vw,66px)}
}

/* Keep the logistics headline fully inside the viewport at every scroll position. */
.logistics-title{overflow:visible}
.giant-word{font-size:clamp(88px,14vw,220px);will-change:translate}
.left-word,.right-word{transform:none;text-align:center}
@media(max-width:650px){.giant-word{font-size:clamp(64px,17vw,108px)}}

.form-submit{animation:contact-button-pulse 2.8s ease-in-out infinite}
.form-top{justify-content:flex-start}.form-top span{display:none}
@keyframes contact-button-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(54,210,163,0),0 0 12px rgba(54,210,163,.12)}
  50%{box-shadow:0 0 0 7px rgba(54,210,163,.08),0 0 25px rgba(54,210,163,.34)}
}
@media(prefers-reduced-motion:reduce){.form-submit{animation:none}}

@media(max-width:650px){
  .frame{max-width:calc(100% - 40px)}
  .solutions-grid,.solutions-grid>*,.presence-content,.presence-content>*,.logistics-inner,.steps,.step{min-width:0}
  .solutions-heading,.solution-interface,.presence-left,.presence-right{width:100%;max-width:100%}
  .solutions-heading h2{font-size:clamp(44px,10.5vw,68px)}
  .presence-left h2{font-size:clamp(46px,11vw,70px)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step{padding:14px}
  .step strong{font-size:clamp(17px,5vw,22px)}
  .port-option{min-width:0}
  .port-option strong{min-width:0;font-size:clamp(28px,8vw,34px)}
  .benefits-intro,.benefits-intro>*{min-width:0}
  .benefits-intro h2{font-size:clamp(36px,9vw,54px)}
  .contact-inner{min-width:0}
  .contact-inner>*,.contact-copy,.contact-form{min-width:0;width:100%;max-width:100%}
  .contact-copy h2{font-size:clamp(45px,11vw,68px)}
}

@media(max-width:420px){
  .cine-caption[data-step="01"] .cine-title,.cine-caption[data-step="03"] .cine-title{font-size:clamp(32px,8.8vw,39px)}
}