/* ThreeSixty / highway study. These rules replace the previous split-column hero. */
/* DC mounts the page after its template loads. Do not anchor the viewport to
   the statistics below the initially animated scene during that first mount. */
html:has(body.home) { overflow-anchor: none; }
.home #hdr { border-bottom: 1px solid transparent; }
.home #hdrinner { max-width: 1760px !important; height: 96px; }
.home #hdr.is-compact { border-bottom-color: #0a13300a; }
.home #hdr.is-compact #hdrinner { height: 76px !important; }
.home #hdrlogo { transition: transform .4s var(--ease); }
.home #hdr.is-compact #hdrlogo { transform: scale(.84); }
.home #hdrinner > nav a { padding-block: 9px; }
.home #hdrinner > nav a:first-child { box-shadow: 0 1px var(--blue); }

#hero {
  position: relative;
  min-height: 780px;
  height: clamp(780px, 62.5vw, 1000px);
  overflow: hidden;
  isolation: isolate;
  background: #d5e7eb;
}
.hero-scene { position: absolute; inset: 0; overflow: hidden; }
.scene-entry { position: absolute; inset: 0; opacity: 0; }
.scene-world {
  position: absolute; bottom: 0; left: 50%;
  aspect-ratio: 1440 / 898;
  transform: translateX(-50%);
}
.scene-camera { position: absolute; inset: 0; transform-origin: 25% 96%; will-change: transform; }
.scene-photo, .scene-pillar, .scene-road { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-photo, .scene-pillar img, .scene-road img { display: block; width: 100%; height: 100%; max-width: none; }
.scene-photo { object-fit: fill; }
.truck-corridor { position: absolute; inset: 0; clip-path: polygon(0 0, 58% 0, 58% 100%, 0 100%); }
.truck-parallax { position: absolute; left: 18%; bottom: 6.15%; width: 32%; will-change: transform; }
.truck-entry { transform: translate3d(var(--arrival-x), var(--arrival-y), 0); }
.truck-entry img { display: block; width: 100%; max-width: none; height: auto; object-fit: contain; }
/* The photographed pylon and parapet are real foreground occluders, not shadows. */
.scene-pillar { clip-path: polygon(53.7% 62.6%, 59.1% 63.1%, 60.9% 100%, 53.7% 100%); pointer-events: none; }
.scene-road { clip-path: polygon(0 95.9%, 54% 93.55%, 54% 100%, 0 100%); pointer-events: none; }
.hero-paper {
  position: absolute; inset: -1px; z-index: 2; background: #fff;
  clip-path: polygon(0 0, 77% 0, 64% 51%, 43% var(--paper-bottom,74%), 0 var(--paper-bottom,74%));
  pointer-events: none;
}
.scene-geometry { position: absolute; inset: 0; z-index: 3; pointer-events: none; will-change: transform; }
.portal { position: absolute; right: -2px; background: #fff; }
.portal-upper {
  top: 18%; width: 19%; height: 25%; border-bottom-right-radius: 50px;
  clip-path: polygon(75% 0, 100% 0, 100% 100%, 0 100%);
}
.portal-lower {
  top: 53%; width: 17%; height: 30%; border-top-right-radius: 45px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
#heroText {
  position: relative; z-index: 4; padding: clamp(155px, 12vw, 210px) 0 0 clamp(32px, 5.2vw, 100px);
  width: 75%; will-change: transform;
}
.hero-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; color: var(--blue); font: 600 11px Archivo, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.hero-eyebrow::before { content: ''; width: 25px; height: 2px; background: currentColor; }
#hero h1 { margin: 0; font: 600 clamp(66px, 6.15vw, 108px)/.99 Archivo, sans-serif; letter-spacing: -.055em; text-wrap: initial; }
.headline-line { display: block; overflow: hidden; padding-bottom: .085em; }
.headline-line > span { display: block; transform: translateY(112%); }
.headline-line:not(:first-child) { color: var(--blue); }
.hero-description { max-width: 31em; font-size: 16px; line-height: 1.75; color: #586278; margin: 22px 0 24px; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-primary, .hero-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 15px; font: 600 14px Archivo, sans-serif; transition: background .3s, color .3s; }
.hero-primary { color: #fff; background: var(--blue); padding: 20px 27px; border-radius: 999px; }
.hero-primary:hover { color: #fff; background: var(--navy); }
.hero-secondary { padding-block: 10px; color: var(--navy); border-bottom: 1px solid #cdd2dc; }
.hero-secondary:hover { color: var(--blue); border-color: var(--blue); }
.hero-eyebrow, .hero-description, .hero-actions { opacity: 0; }
.scene-note { position: absolute; z-index: 4; right: 5.2%; bottom: 28px; display: flex; align-items: center; gap: 16px; color: var(--navy); font: 500 10px Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.scene-note span:first-child { border-top: 1px solid currentColor; padding-top: 7px; }
.scene-note span:last-child { font-size: 22px; }

.is-scene-ready .scene-entry { animation: scene-unveil 1.55s cubic-bezier(.22,.65,.25,1) both; }
.is-scene-ready .hero-paper { animation: paper-settle 1.45s var(--ease) .12s both; }
.is-scene-ready .portal-upper { animation: portal-enter 1.35s var(--ease) .25s both; }
.is-scene-ready .portal-lower { animation: portal-enter 1.5s var(--ease) .4s both; }
.is-scene-ready .truck-entry { animation: truck-emerge 2.45s cubic-bezier(.25,.6,.3,1) .35s both; }
.is-scene-ready .headline-line > span { animation: headline-unveil 1.15s var(--ease) .52s both; }
.is-scene-ready .headline-line:nth-child(2) > span { animation-delay: .64s; }
.is-scene-ready .headline-line:nth-child(3) > span { animation-delay: .76s; }
.is-scene-ready .hero-eyebrow { animation: copy-appear .9s var(--ease) .4s both; }
.is-scene-ready .hero-description { animation: copy-appear .95s var(--ease) .95s both; }
.is-scene-ready .hero-actions { animation: copy-appear .95s var(--ease) 1.08s both; }
@keyframes scene-unveil { from { opacity: 0; transform: scale(1.028); } to { opacity: 1; transform: scale(1); } }
@keyframes paper-settle { from { transform: translateX(-3%); } to { transform: translateX(0); } }
@keyframes portal-enter { from { transform: translateX(60%); } to { transform: translateX(0); } }
@keyframes truck-emerge { from { transform: translate3d(var(--arrival-x), var(--arrival-y), 0); } to { transform: translate3d(0,0,0); } }
@keyframes headline-unveil { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes copy-appear { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* Carry the same quieter editorial language into the existing home sections. */
.home #hero + section { max-width: none !important; padding: 0 clamp(32px,5.2vw,100px) !important; border-bottom: 1px solid #e5e8ed; }
.home #hero + section > div { max-width: 1560px; margin: auto; background: #fff !important; border-radius: 0 !important; }
.home #hero + section > div > div { padding: 35px 30px !important; border-right: 1px solid #e5e8ed !important; }
.home #hero + section [data-count] { color: var(--navy) !important; font-weight: 500 !important; font-size: clamp(28px,3vw,46px) !important; }
.home #hero + section [data-count] + div { color: #697286 !important; font-size: 13px !important; max-width: 19em; }
.home #servicios { padding-top: 100px !important; }
.home .service-card { border: 0; }
.home .service-card.feature { min-height: 440px; }
.home .service-card.feature img { height: 245px; object-position: center 42%; }
.home .service-card.feature .service-arrow { padding-right: 26px; padding-bottom: 15px; }
.home #nosotros + section h2 { max-width: 12em; }
.home #transportistas > div { border-radius: 3px !important; }
.home #embarcadores img { filter: brightness(0); }
.home .final-cta { padding: 80px !important; }
.home .final-cta h2 { font-size: clamp(44px,5.1vw,76px) !important; max-width: 11em; }

@media (min-width:1600px) {
  #heroText { padding-top: 175px; }
  .hero-description { font-size: 18px; max-width: 29em; }
}
@media (min-width:768px) and (max-width:1199px) {
  #hero { height: 790px; min-height: 790px; }
  #heroText { padding-top: 160px; width: 85%; }
  #hero h1 { font-size: clamp(58px,7.3vw,76px); }
  .hero-paper { clip-path: polygon(0 0,88% 0,75% 48%,43% var(--paper-bottom,78%),0 var(--paper-bottom,78%)); }
  .hero-description { max-width: 27em; font-size: 15px; margin-top: 19px; }
  .hero-primary { padding: 17px 23px; }
  .portal-upper { width: 15%; }
  .portal-lower { width: 13%; }
}
@media (max-width:767px) {
  .home #hdr { background: #fff !important; }
  .home #hdrinner { height: 80px !important; }
  .home #hdr.is-compact #hdrinner { height: 72px !important; }
  .home #mobile-menu { height: calc(100dvh - 80px); max-height: none !important; padding-top: 26px !important; }
  .home #hdr.is-compact #mobile-menu { height: calc(100dvh - 72px); }
  .home #mobile-menu > div { gap: 8px !important; font-size: 21px !important; }
  .home #mobile-menu a { padding-block: 10px; border-bottom: 1px solid #e9ecf1; }
  #hero { height: auto; min-height: 0; padding-top: 80px; background: #fff; display: flex; flex-direction: column; }
  #heroText { order: 0; padding: 30px 24px 30px; width: 100%; }
  .hero-eyebrow { font-size: 10px; margin-bottom: 22px; }
  #hero h1 { font-size: clamp(42px,11.5vw,54px); line-height: 1; letter-spacing: -.055em; }
  .headline-line:first-child { font-size: .84em; padding-bottom: .16em; }
  .headline-line { padding-bottom: .075em; }
  .hero-description { font-size: 14px; line-height: 1.75; margin: 17px 0 21px; max-width: 28em; }
  .hero-actions { gap: 22px; }
  .hero-primary,.hero-secondary { font-size: 12px; gap: 10px; }
  .hero-primary { padding: 17px 20px; }
  .hero-scene { position: relative; order: 1; inset: auto; height: clamp(350px,100vw,390px); width: 100%; }
  .scene-world { left: 0; transform: none; }
  .scene-camera { transform-origin: 0 96%; }
  .truck-parallax { left: 3%; width: 50%; bottom: 6.15%; }
  .hero-paper { display: none; }
  .scene-geometry { top: auto; bottom: 0; height: clamp(350px,100vw,390px); }
  .portal-upper { top: -1px; height: 26%; width: 33%; border-radius: 0 0 24px; clip-path: polygon(0 0,100% 0,100% 100%); }
  .portal-lower { top: auto; bottom: -1px; width: 14%; height: 15%; border-radius: 0; clip-path: polygon(100% 0,100% 100%,0 100%); }
  .scene-note { display: none; }
  .is-scene-ready .truck-entry { animation-duration: 2.2s; }
  .home #hero + section { padding-inline: 24px !important; }
  .home #hero + section > div[style] { gap: 0 !important; }
  .home #hero + section > div > div { padding: 23px 15px !important; border-bottom: 1px solid #e5e8ed !important; }
  .home #hero + section [data-count] { font-size: 29px !important; }
  .home #hero + section [data-count] + div { font-size: 11px !important; }
  .home #servicios { padding-top: 64px !important; }
  .home .service-card.feature { min-height: 0; }
  .home .service-card.feature img { height: 210px; }
  .home .final-cta { padding: 40px 27px !important; }
  .home .final-cta h2 { font-size: 43px !important; }
}
@media (min-width:768px) and (max-width:1023px) {
  .truck-parallax { left: 27%; width: 26%; }
}
@media (min-width:768px) and (max-height:850px) {
  #hero { height: max(700px,calc(100svh - 12px)); min-height: 700px; }
  #heroText { padding-top: 128px; }
  #hero h1 { font-size: clamp(58px,5.2vw,72px); }
  .hero-eyebrow { margin-bottom: 20px; }
  .hero-description { font-size: 15px; margin-top: 16px; margin-bottom: 20px; }
  .hero-primary { padding: 17px 23px; }
}
@media (prefers-reduced-motion:reduce) {
  .scene-entry,.hero-eyebrow,.hero-description,.hero-actions { opacity: 1 !important; }
  .truck-entry,.headline-line > span,.scene-camera,.truck-parallax,.scene-geometry,#heroText { transform: none !important; }
}