:root{--blue:#1b43fe;--navy:#0a1330;--ease:cubic-bezier(.16,1,.3,1)}
html{scroll-padding-top:100px}
body{overflow-x:clip!important}
img{max-width:100%}
:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
section,footer{min-width:0}
section>div,footer>div{min-width:0}
h1,h2,h3{ text-wrap:balance}
a,button{-webkit-tap-highlight-color:transparent}
#hdr #hdrinner{max-width:1280px!important;padding-inline:32px!important;gap:32px!important}
#hdrinner>a:first-child{display:flex;align-items:center;flex-shrink:0}
#hdr #hdrlogo{display:block;height:66px!important;width:198px!important;max-width:none;object-fit:contain;transform:translateY(-5px)!important;transition:height .35s ease,width .35s ease,transform .35s ease}
#hdr.is-compact #hdrlogo,#hdr #hdrlogo[style*="height: 36px"]{height:60px!important;width:180px!important;transform:translateY(-5px)!important}
#hdrinner>nav{gap:28px!important;font-size:14px!important;margin-left:0!important;white-space:nowrap}
#hdrinner>div{gap:12px!important;margin-left:auto}
#hdrinner a[href^="tel:"]{display:none!important}
#hdrinner button:not([aria-label]){display:none!important}
#hdrinner>div>a:last-child{display:inline-flex;align-items:center;justify-content:center;font-size:14px!important;padding:12px 20px!important;border-radius:6px!important}
#hdr>div:last-child{max-height:calc(100dvh - 90px);overflow-y:auto}
#hdr a{transition:color .25s}
section:not(#hero){scroll-margin-top:95px}
section h2{font-size:clamp(32px,3.5vw,54px)!important;line-height:1.12!important;letter-spacing:-.04em!important}
#servicios>div:first-child h2{max-width:13em!important}
.stats-strip{padding-top:36px!important}
.stats-strip>div{border-radius:3px!important}
.stats-strip>div>div{padding:32px!important}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.service-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:28px;background:#f3f5f8;color:var(--navy);border:1px solid #e6e9ef;border-radius:3px;overflow:hidden;transition:background .3s,box-shadow .3s}
.service-card:hover{background:#eaf0ff;color:var(--navy);box-shadow:0 14px 35px #0a13300d}
.service-card.feature{grid-column:span 2;min-height:440px;background:var(--navy);color:#fff;padding:0}
.service-card.feature img{width:100%;height:230px;object-fit:cover;transition:transform .7s var(--ease)}
.service-card.feature:hover img{transform:scale(1.035)}
.service-card.feature .service-copy{padding:27px 30px}
.service-number{font:500 12px Archivo,sans-serif;letter-spacing:.12em;color:var(--blue);margin-bottom:30px}
.feature .service-number{color:#aebdff;margin-bottom:12px}
.service-card h3{font:600 clamp(20px,1.6vw,27px)/1.2 Archivo,sans-serif;letter-spacing:-.03em;margin:0 0 15px;text-wrap:pretty}
.service-card p{font-size:14px;line-height:1.7;opacity:.7;margin:0}
.service-arrow{align-self:flex-end;margin-top:auto;padding-top:22px;font-size:25px;color:var(--blue)}
.service-card:nth-child(4){background:var(--blue);color:white}
.service-card:nth-child(4) .service-number,.service-card:nth-child(4) .service-arrow{color:white}
.final-cta{border-radius:3px!important;text-align:left!important;padding:70px!important;position:relative;overflow:hidden}
.final-cta:after{content:'↗';position:absolute;right:5%;top:5%;font-size:190px;line-height:1;color:#ffffff14;pointer-events:none}
.final-cta h2{max-width:11em}
.final-cta a{border-radius:999px!important}
footer a[href^="mailto:"]{overflow-wrap:anywhere}
footer img{height:85px!important}
#rtrack{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));transform:none!important}
#rtrack>div{padding:24px!important;border-radius:3px!important}
section:has(#rtrack)>div{grid-template-columns:1fr!important}
section:has(#rtrack) button{display:none!important}
section:has(img[src*="tecnologia"]){display:none}
img[src*="container"]{animation:none!important}
@media(min-width:1600px){}
@media(max-width:1199px){#hdrinner>nav{display:none!important}
.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-card.feature{grid-column:auto}
.service-card.feature h3{font-size:25px}
}
@media(max-width:1023px){.stats-strip>div{grid-template-columns:repeat(2,minmax(0,1fr))!important}
section:not(#hero){padding-inline:28px!important}
section:not(#hero)>div[style*="grid-template-columns"]{gap:30px!important}
footer>div[style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body:not(.home) #hdr #hdrinner{flex-wrap:wrap;row-gap:8px!important;height:auto!important;padding-block:10px!important}
body:not(.home) #hdrinner>nav{display:flex!important;order:3;width:100%;justify-content:center}
body:not(.home) #hdrinner>div{margin-left:auto}
}
@media(max-width:767px){#hdr #hdrinner{height:80px!important;padding-inline:16px!important;gap:8px!important}
#hdr #hdrlogo,#hdr.is-compact #hdrlogo,#hdr #hdrlogo[style*="height: 36px"]{width:150px!important;height:50px!important;transform:translateY(-5px)!important}
#hdrinner>div{gap:7px!important;flex-shrink:0}
#hdrinner>div>a:last-child{font-size:12px!important;padding:11px 10px!important}
#hdrinner button[aria-label="Menú"]{width:39px!important;height:39px!important;border-radius:6px!important}
#hdr>div:last-child{padding-inline:24px!important}
section:not(#hero){padding-inline:24px!important;padding-top:65px!important}
.stats-strip{padding-top:24px!important}
.stats-strip>div>div{padding:25px 18px!important}
.stats-strip [data-count]{font-size:32px!important}
.stats-strip [data-count]+div{font-size:12px!important}
section:not(#hero)>div[style*="grid-template-columns"],section:not(#hero)>div>div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
.stats-strip>div{grid-template-columns:repeat(2,minmax(0,1fr))!important}
section h2{font-size:34px!important}
#servicios>div:first-child>div:last-child{justify-self:start!important}
.service-grid{grid-template-columns:1fr!important;gap:14px}
.service-card{padding:25px;min-height:235px}
.service-card.feature{min-height:0}
.service-card.feature img{height:205px}
.service-card.feature .service-copy{padding:25px}
.service-card h3{font-size:24px}
.service-number{margin-bottom:20px}
.service-arrow{padding-top:12px}
#servicios>div:last-child{flex-direction:column;align-items:flex-start!important;padding:26px!important}
#rtrack{grid-template-columns:1fr!important}
.final-cta{padding:38px 27px!important}
.final-cta h2{font-size:40px!important}
footer{padding:50px 24px 25px!important;margin-top:65px!important}
footer>div{flex-wrap:wrap;gap:25px!important}
footer>div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
section [style*="display: flex"][style*="justify-content: space-between"]{flex-wrap:wrap}
body:not(.home) section:first-of-type{padding-top:175px!important}
body:not(.home) h1{font-size:42px!important}
body:not(.home) #hdrinner>nav{gap:22px!important;font-size:13px!important}
body:not(.home) section>div>div{min-width:0}
section input,section select,section textarea{max-width:100%;min-width:0}
#nosotros+section>div>div:last-child>div:last-child{flex-wrap:wrap!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}
*,*::before,*::after{animation:none!important;transition:none!important}
[data-reveal]{opacity:1!important;transform:none!important}
}
@media(max-width:767px){}
@media(min-width:1200px){.service-card:nth-last-child(-n+2){grid-column:span 2;min-height:220px}
}
@media(max-width:767px){#hero+section>div[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#hero+section>div[style]>div{border-bottom:1px solid #ffffff1f}
}
section [style*="grid-template-columns"]>div{min-width:0}
image-slot{display:block;width:100%;min-width:0;max-width:100%}
@media(max-width:767px){body:not(.home) section:not(#hero):first-of-type{padding-top:175px!important}
section:has(input) [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
section:has(input)>div>div:first-child{padding:25px!important}
}


/* Home: compact service catalogue and ThreeSixty cargo illustration. */
.home #hero + #servicios{padding-top:64px!important;padding-bottom:36px!important}
.home #hero + #servicios>div:first-child{margin-bottom:28px!important;gap:32px!important}
.home #hero + #servicios>div:first-child>div{padding:0!important;border:0!important}
.home #hero + #servicios .service-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.home #servicios .service-card{grid-column:auto;min-height:0;padding:24px;background:#f5f6f8;color:var(--navy);border:1px solid #e1e5eb;border-radius:5px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:20px 12px;transition:transform .25s ease,border-color .25s ease,background .25s ease;box-shadow:none}
.home #servicios .service-card:hover{transform:translateY(-3px);border-color:#1b43fe66;background:#eef2ff}
.home #servicios .service-icon{grid-column:1;color:var(--blue);width:40px;height:40px}
.home #servicios .service-copy{grid-column:1/-1;padding:0!important;border:0!important}
.home #servicios .service-number{margin:0 0 10px;font-size:10px;letter-spacing:.12em;color:#657189}
.home #servicios .service-card h3{font-size:20px;line-height:1.24;letter-spacing:-.025em;margin:0 0 12px}
.home #servicios .service-card p{font-size:13px;line-height:1.6;color:#59647a;opacity:1}
.home #servicios .service-arrow{grid-column:2;grid-row:1;align-self:start;margin:0;padding:0;font-size:22px;color:var(--blue)}
.home #hero + #servicios>div:last-child{margin-top:22px!important;padding:22px 24px!important;background:#eef2ff!important;border-radius:5px!important;gap:20px!important}
.home #servicios>div:last-child p{font-size:18px!important;line-height:1.4}
.home #servicios>div:last-child a{font-size:14px!important;padding:12px 20px!important;border-radius:6px!important}
@media(max-width:1199px){.home #hero + #servicios .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:767px){
.home #hero + #servicios{padding:48px 24px 28px!important}
.home #hero + #servicios>div:first-child{grid-template-columns:1fr!important;gap:20px!important}
.home #hero + #servicios .service-grid{grid-template-columns:1fr!important;gap:10px!important}
.home #servicios .service-card{grid-template-columns:36px 1fr;grid-template-rows:auto;padding:20px;gap:14px}
.home #servicios .service-icon{width:34px;height:34px;grid-column:1;grid-row:1;margin-top:23px}
.home #servicios .service-copy{grid-column:2;grid-row:1}
.home #servicios .service-number{margin-bottom:8px;font-size:9px}
.home #servicios .service-card h3{font-size:18px;line-height:1.3;margin-bottom:9px}
.home #servicios .service-card p{font-size:13px;line-height:1.55}
.home #servicios .service-arrow{position:absolute;right:16px;top:15px;font-size:18px}
.home #hero + #servicios>div:last-child{padding:22px!important}
}

/* Shared header proportions and corrected cargo artwork. */
@media(min-width:768px){#hdr #hdrinner{height:92px!important}#hdr.is-compact #hdrinner,#hdr #hdrinner[style*="height: 70px"]{height:74px!important}}
.cargo-stage{position:relative;isolation:isolate;max-width:640px;margin:0 auto;padding:24px 16px 28px;border-radius:5px;background:linear-gradient(155deg,#f9fafc,#e7ecf3);border:1px solid #dce3ec}
.cargo-stage:after{content:'';position:absolute;bottom:13px;left:15%;right:15%;height:5px;border-radius:50%;background:#152f6126;filter:blur(5px);z-index:-1}
.cargo-stage .cargo-container{display:block;width:100%;height:auto;object-fit:contain;animation:none!important;filter:drop-shadow(0 10px 8px #0a133014)}
.home #nosotros+section>div>div{align-items:center!important}
.home #nosotros+section .cargo-stage+div{border-radius:5px!important;margin-top:18px!important;padding:26px!important;gap:20px!important}
.home #nosotros+section .cargo-stage+div p{font-size:20px!important;line-height:1.45}
.home #nosotros+section .cargo-stage+div a{font-size:14px!important;border-radius:6px!important;padding:12px 20px!important}
@media(max-width:767px){.cargo-stage{padding:18px 8px 24px}#hdr #hdrlogo,#hdr.is-compact #hdrlogo,#hdr #hdrlogo[style*="height: 36px"]{transform:translateY(-4px)!important}}

/* Editorial section heading and crane motion; the image and header stay intact. */
body.home #nosotros+section h2{font-size:clamp(64px,4.8vw,78px)!important;line-height:1.01!important;letter-spacing:-.045em!important;max-width:11.5em;margin-bottom:36px!important;text-wrap:balance}
body.home #nosotros+section>div>div>div:first-child>div:first-child{margin-bottom:24px!important}
.cargo-reveal,.cargo-sway{transform-origin:50% 5%}
.cargo-sway{--cargo-angle:.65deg}
/* The existing observer writes opacity to the parent. Use that state to start
   the two independent transforms, without moving the CTA or the stage. */
[data-reveal]:has(>.cargo-stage){opacity:1!important;transform:none!important;transition:none!important}
[data-reveal][style*="opacity: 0"]>.cargo-stage .cargo-reveal{opacity:0;transform:translateY(24px) rotate(-1.2deg) scale(.98)}
[data-reveal][style*="opacity: 1"]>.cargo-stage .cargo-reveal{animation:cargo-arrive 1.1s cubic-bezier(.16,1,.3,1) both}
[data-reveal][style*="opacity: 1"]>.cargo-stage .cargo-sway{animation:cargo-suspended 7s ease-in-out 1.1s infinite both}
@keyframes cargo-arrive{from{opacity:0;transform:translateY(24px) rotate(-1.2deg) scale(.98)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes cargo-suspended{0%,50%,100%{transform:rotate(0)}25%{transform:rotate(var(--cargo-angle))}75%{transform:rotate(calc(-1 * var(--cargo-angle)))}}
@media(max-width:1023px){
body.home #nosotros+section h2{font-size:clamp(46px,7vw,60px)!important;max-width:14em}
body.home #nosotros+section>div>div{grid-template-columns:1fr!important;gap:40px!important}
body.home #nosotros+section>div>div>div:last-child{width:100%;max-width:640px;margin-inline:auto}
}
@media(max-width:767px){
body.home #nosotros+section h2{font-size:clamp(38px,10.25vw,46px)!important;line-height:1.03!important;letter-spacing:-.035em!important;margin-bottom:30px!important}
.cargo-sway{--cargo-angle:.28deg}
}
@media(prefers-reduced-motion:reduce){
[data-reveal]:has(>.cargo-stage),[data-reveal]>.cargo-stage .cargo-reveal,[data-reveal]>.cargo-stage .cargo-sway{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}


/* Unified landscape logo in site footer */
footer img[alt="ThreeSixty Logistics"]{content:url('/assets/logo-header-landscape.png');width:220px!important;height:auto!important;max-width:100%!important;object-fit:contain!important;margin-bottom:20px}
@media(max-width:767px){footer img[alt="ThreeSixty Logistics"]{width:210px!important;height:auto!important}}

/* Responsive Header & Navigation across all pages */
.burger-btn {
  display: none;
}
@media (max-width: 1199px) {
  #hdr #hdrinner {
    padding-inline: 20px !important;
    gap: 16px !important;
  }
  #hdrinner > nav,
  #hdrinner > nav.desktop-nav,
  #hdrinner > nav.secondary-desktop-nav {
    display: none !important;
  }
  #hdrinner .desktop-cta-btn,
  #hdrinner a.desktop-cta-btn,
  #hdrinner div > a[href*="contacto"] {
    display: none !important;
  }
  #hdrinner .burger-btn,
  #hdrinner button[aria-controls="mobile-menu"],
  #hdrinner .secondary-nav-toggle {
    display: grid !important;
  }
  #hdrinner .hdr-actions,
  #hdrinner .secondary-header-actions {
    margin-left: auto !important;
  }
  #mobile-menu a {
    text-decoration: none;
  }
}
@media (max-width: 767px) {
  #hdr #hdrinner {
    height: 74px !important;
    min-height: 74px !important;
    padding-inline: 16px !important;
  }
  #hdrlogo {
    height: 38px !important;
  }
  #mobile-menu {
    padding: 16px 20px 22px !important;
  }
  #mobile-menu a {
    font-size: 17px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}
@media (min-width: 1200px) {
  #hdrinner .burger-btn,
  #hdrinner button[aria-controls="mobile-menu"],
  #hdrinner .secondary-nav-toggle {
    display: none !important;
  }
  #mobile-menu {
    display: none !important;
  }
}