/* Corporate transport direction: clear headline, panoramic imagery and task-first navigation. */
:root { --brand-accent: #0096d2; }
.brand-hero { --brand-accent: #faaa00; }
html { --transport-header-height: 82px; scroll-padding-top: calc(var(--transport-header-height) + 32px); }
body { background: #f5f6f7; color: #546470; }
h1, h2, h3, h4 { color: #192d3c; }
.transport-header { position: fixed; inset: 12px 16px auto; z-index: 1030; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin: 0; padding: 14px 28px; border-radius: 18px; background: #fff; box-shadow: 0 4px 24px #142b3c06; transition: box-shadow .25s ease; }
.transport-header.is-scrolled { box-shadow: 0 8px 28px #102c3a26; }
.brand-hero .hero-inner { padding-top: calc(var(--transport-header-height) + 64px); transform: translateY(var(--hero-drift, 0px)); }
.transport-brand { display: flex; align-items: center; gap: 12px; width: fit-content; color: #192d3c; }
.transport-brand img { width: 62px; height: 48px; object-fit: contain; }
.transport-brand strong { display: block; font-size: 23px; line-height: 1.1; letter-spacing: -.04em; }
.transport-brand b { color: #008dc5; }
.transport-brand small { display: block; font-size: 8px; letter-spacing: .13em; margin-top: 6px; color: #667580; }
.transport-tools { display: flex; padding: 5px; border-radius: 40px; background: #f2f4f6; }
.transport-tools a { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 19px; color: #415360; font-size: 14px; font-weight: 600; border-radius: 30px; transition: background-color .2s, color .2s; }
.transport-tools svg, .transport-menu-toggle svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; flex-shrink: 0; }
.transport-tools .tool-quote { color: #fff; background: #007fab; }
.transport-tools a:hover { color: #fff; background: #192d3c; }
.transport-menu-toggle { justify-self: end; display: flex; align-items: center; gap: 14px; padding: 10px 0 10px 16px; min-height: 44px; color: #192d3c; background: none; border: 0; font-size: 13px; font-weight: 600; }
.transport-menu-toggle svg { width: 29px; height: 29px; stroke-width: 2; }
.transport-header a:focus-visible, .transport-header button:focus-visible, .transport-drawer a:focus-visible, .transport-drawer button:focus-visible { outline: 3px solid #0082b3; outline-offset: 3px; }
.transport-drawer { position: fixed; inset: 14px 14px 14px auto; width: min(440px, calc(100% - 28px)); height: calc(100dvh - 28px); max-height: none; max-width: none; margin: 0; padding: 26px 30px; border: 0; border-radius: 20px; color: #192d3c; background: #fff; overflow-y: auto; }
.transport-drawer::backdrop { background: #0c1d2e80; backdrop-filter: blur(5px); }
.transport-menu-open { overflow: hidden; }
.whatsapp-float { --whatsapp-half-height: 31px; --whatsapp-bottom-gap: max(24px, env(safe-area-inset-bottom)); position: fixed; right: max(24px, env(safe-area-inset-right)); top: calc(50% + (50% - var(--whatsapp-bottom-gap) - var(--whatsapp-half-height)) * var(--whatsapp-scroll-progress, 0)); z-index: 1040; display: flex; align-items: center; gap: 12px; height: 62px; padding: 8px 22px 8px 8px; border: 1px solid #e3e9ed; border-radius: 36px; background: #fff; color: #183444; box-shadow: 0 8px 28px #102c3a24; text-decoration: none; transform: translateY(-50%); transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease, border-color .32s ease; }
.quote-page .whatsapp-float { top: calc(100% - var(--whatsapp-bottom-gap) - var(--whatsapp-half-height)); }
.whatsapp-float::before { position: absolute; inset: 7px auto 7px 7px; width: 46px; border: 1px solid #159e59; border-radius: 50%; content: ""; opacity: 0; pointer-events: none; animation: whatsapp-wave 2.8s cubic-bezier(.2, .7, .35, 1) infinite; }
.whatsapp-float-icon { position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #159e59; animation: whatsapp-breathe 2.8s cubic-bezier(.2, .7, .35, 1) infinite; transition: background-color .32s ease; }
.whatsapp-float img { display: block; width: 27px; height: 27px; transition: transform .32s cubic-bezier(.22, 1, .36, 1); }
.whatsapp-float-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.whatsapp-float-copy small { color: #5b6d78; font-size: 11px; }
.whatsapp-float-copy strong { color: #183444; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.whatsapp-float:hover { color: #183444; border-color: #9acbb0; box-shadow: 0 15px 36px #102c3a34; transform: translateY(-50%) translateX(-8px); }
.whatsapp-float:hover .whatsapp-float-icon { background: #108b4d; }
.whatsapp-float:hover img { transform: rotate(-10deg); }
.whatsapp-float:hover::before { animation-play-state: paused; opacity: .32; transform: scale(1.45); }
.whatsapp-float:active { transform: translateY(-50%) translateX(-5px) scale(.97); }
.whatsapp-float:focus-visible { outline: 3px solid #192d3c; outline-offset: 4px; }
@keyframes whatsapp-wave { 0% { opacity: .36; transform: scale(1); } 68%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes whatsapp-breathe { 0%, 68%, 100% { transform: scale(1); } 32% { transform: scale(1.13); } }
.back-to-top { right: 29px; bottom: calc(100px + env(safe-area-inset-bottom)); }
@media (max-width: 575.98px) {
    .whatsapp-float { --whatsapp-half-height: 28px; --whatsapp-bottom-gap: max(20px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); width: 56px; height: 56px; padding: 0; border: 0; background: #159e59; justify-content: center; box-shadow: 0 6px 20px #083f292b; }
    .whatsapp-float::before { inset: 0; width: auto; border-color: #159e59; }
    .whatsapp-float-icon { width: 56px; height: 56px; }
    .whatsapp-float img { width: 30px; height: 30px; }
    .whatsapp-float-copy { display: none; }
    .back-to-top { right: 19px; bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float { top: calc(100% - var(--whatsapp-bottom-gap) - var(--whatsapp-half-height)); }
    .whatsapp-float, .whatsapp-float-icon { transition: none; }
    .whatsapp-float::before { animation: none; display: none; }
    .whatsapp-float-icon { animation: none; }
}
.drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.drawer-heading p { margin: 0; font-size: 12px; color: #637482; }
.drawer-heading button { border: 0; border-radius: 50%; background: #edf2f5; color: #192d3c; width: 44px; height: 44px; font-size: 30px; line-height: 1; }
.transport-drawer nav a { display: flex; justify-content: space-between; gap: 20px; color: #192d3c; font-size: 19px; font-weight: 600; padding: 13px 0; border-bottom: 1px solid #e7ecef; }
.transport-drawer nav a span { color: #008dc5; }
.transport-drawer nav a:hover { color: #008dc5; }
.drawer-contact { margin-top: 36px; }
.drawer-contact p { font-size: 13px; }
.drawer-contact > a { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px; border-radius: 30px; background: #007fab; color: #fff; font-size: 14px; font-weight: 600; }
.drawer-contact .drawer-phone { justify-content: center; color: #566976; background: none; font-weight: 400; }
.transport-noscript { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.transport-hero-intro { text-align: center; max-width: 1320px; margin: auto; padding: 42px 24px 44px; }
.transport-eyebrow { font-size: 11px; letter-spacing: .14em; color: #5a6d7b; margin: 0 0 18px; font-weight: 600; }
.transport-hero h1 { font-family: Inter, sans-serif; font-size: clamp(40px, 4.6vw, 72px); line-height: 1.22; font-weight: 700; letter-spacing: -.045em; margin: 0 0 22px; }
.transport-hero h1 span { display: inline-block; padding: 0 27px 7px; border-radius: 60px; background: #007fab; color: #fff; }
.transport-hero-intro > p:last-child { margin: 0; font-size: 16px; }
.transport-panorama { position: relative; margin: 0; background: #d7e3eb; }
.transport-panorama > img { display: block; width: 100%; height: auto; }
.transport-panorama figcaption { position: absolute; left: 32px; bottom: 24px; display: flex; flex-direction: column; color: #fff; background: #112a3ee6; border-radius: 12px; padding: 14px 20px; font-size: 10px; }
.transport-panorama figcaption span { font-size: 18px; font-weight: 600; }
.panorama-link { position: absolute; right: 32px; bottom: 24px; background: #fff; color: #192d3c; font-size: 14px; font-weight: 600; border-radius: 40px; padding: 17px 25px; }
.panorama-link span { margin-left: 24px; color: #007fab; }
.transport-highlights { display: flex; justify-content: center; gap: 0; padding: 26px 20px; color: #516675; background: #e9eff3; font-size: 14px; }
.transport-highlights > span { padding: 0 36px; border-right: 1px solid #ccd9e1; }
.transport-highlights > span:last-child { border: 0; }
.transport-highlights strong { color: #192d3c; }
#servicios { padding: 60px 0 !important; }
#servicios > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
#servicios h2 { font-size: 44px; letter-spacing: -.035em; margin-bottom: 20px !important; }
#servicios > .container > p { max-width: 640px; margin: 0 auto 36px; font-size: 11px; }
#servicios .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; }
#servicios .row > div { width: auto; margin: 0; padding: 0; }
#servicios .service-item { padding: 28px !important; border: 0; border-radius: 22px; background: #fff; box-shadow: none; }
#servicios .service-item .overflow-hidden { border-radius: 14px; }
#servicios .service-item img { border-radius: 14px; }
#servicios .service-item h4 { font-size: 28px; letter-spacing: -.03em; }
/* Keep CTA labels visible on mouse, keyboard and touch; replace the legacy slide mask. */
:is(#servicios .service-item, .price-item) a.btn-slide { width: auto; min-height: 44px; height: auto; padding: 12px 18px; display: inline-flex; align-items: center; gap: 12px; border-radius: 30px; background: #192d3c; color: #fff; transition: background-color .2s ease, box-shadow .2s ease; }
:is(#servicios .service-item, .price-item) a.btn-slide :is(i, span) { position: static; display: inline; width: auto; margin: 0; padding: 0; height: auto; line-height: 1.4; transform: none; opacity: 1; color: inherit; background: transparent; border-radius: 0; font-size: 14px; }
:is(#servicios .service-item, .price-item) a.btn-slide i { order: 1; }
:is(#servicios .service-item, .price-item) a.btn-slide:is(:hover, :focus-visible) { background: #007fab; color: #fff; }
:is(#servicios .service-item, .price-item) a.btn-slide:active { background: #0d4171; color: #fff; }
:is(#servicios .service-item, .price-item) a.btn-slide:focus-visible { outline: 3px solid #0082b3; outline-offset: 4px; }
#servicios .service-item:has(.service-symbol) { background: #e7eff4; }
.section-intro h2, .coverage-intro h2, .people-layout h2, h2.h1 { letter-spacing: -.035em; font-weight: 700; }
#nosotros { background: #fff; }
.fleet-band { background: #e9eff3; }
.fleet-portrait img, .about-original-feature img, .training-panel, .training-photo img { border-radius: 20px; }
.training-panel { background: #172f43; }
.location-card { background: #fff; border: 0; border-radius: 20px; }
.footer { background: #152b3c !important; }
.price-item { border-radius: 20px; box-shadow: none; }
.page-header { border-radius: 0 0 24px 24px; width: 100%; margin: 0; padding-top: calc(var(--transport-header-height) + 56px) !important; }
/* Respect the real proportions of the photographs without empty fixed-height frames. */
.about-original-feature { max-width: 480px; margin-inline: auto !important; }
.about-original-feature img { width: 100%; height: auto; max-height: none; aspect-ratio: auto; background: transparent; }
#servicios .service-item img, .fleet-portrait img, .journey-panel img, .training-panel .training-photo img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
#servicios .service-item:hover img { transform: none; }
.journey-panel figure { min-width: 0; }
.journey-panel figcaption { position: static; margin-top: 10px; padding: 0; background: transparent; font-size: 11px; color: #5a6d7b; }
@media (max-width: 1100px) {
    .transport-header { gap: 16px; padding: 14px 20px; }
    .transport-brand img { width: 48px; }
    .transport-brand strong { font-size: 19px; }
    .transport-tools a { padding: 10px 13px; font-size: 13px; }
    .transport-menu-toggle span { display: none; }
    .transport-highlights > span { padding: 0 20px; }
}
@media (max-width: 767.98px) {
    html { --transport-header-height: 124px; }
    .transport-header { grid-template-columns: 1fr auto; margin: 0; inset: 8px 10px auto; gap: 8px 16px; padding: 10px 16px; border-radius: 16px; }
    .brand-hero .hero-inner { padding-top: calc(var(--transport-header-height) + 40px); }
    .transport-tools { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
    .transport-tools a { flex: 1; padding: 8px 10px; font-size: 12px; }
    .transport-tools svg { width: 18px; height: 18px; }
    .transport-brand strong { font-size: 21px; }
    .transport-hero-intro { padding: 28px 18px 32px; }
    .transport-hero h1 { font-size: clamp(29px, 6.5vw, 48px); line-height: 1.27; }
    .transport-hero h1 span { padding: 5px 15px 7px; border-radius: 25px; }
    .transport-eyebrow { font-size: 9px; letter-spacing: .09em; }
    .transport-hero-intro > p:last-child { font-size: 14px; }
    .transport-panorama figcaption { position: static; border-radius: 0; padding: 9px 16px; flex-direction: row; justify-content: space-between; gap: 12px; align-items: center; font-size: 9px; }
    .transport-panorama figcaption span { font-size: 12px; }
    .panorama-link { position: static; display: flex; justify-content: space-between; border-radius: 0; padding: 14px 20px; font-size: 13px; }
    .transport-highlights { flex-direction: column; padding: 16px 24px; gap: 12px; font-size: 12px; }
    .transport-highlights > span { border: 0; padding: 0; }
    #servicios { padding: 40px 0 !important; }
    #servicios .row { grid-template-columns: 1fr; gap: 18px; }
    #servicios h2 { font-size: 32px; }
    #servicios .service-item { padding: 22px !important; }
    #servicios .service-item h4 { font-size: 25px; }
    .transport-drawer { padding: 20px 24px; }
    .transport-drawer nav a { font-size: 17px; padding: 11px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .transport-tools a { transition: none; }
    .brand-hero .hero-inner { transform: none; }
}
/* Motion never holds content in an invisible waiting state. */
.journey-scroll-track.is-scroll-driven { position: relative; }
.journey-scroll-stage .journey-panels { display: grid; isolation: isolate; }
.journey-scroll-stage .journey-panel { grid-area: 1 / 1; align-self: start; width: 100%; background: #f3f7f8; transform-origin: center top; }
.journey-scroll-stage .journey-panel > div { animation: none; }
.journey-scroll-stage .journey-panel[inert] { pointer-events: none; }
.is-scroll-driven .journey-scroll-stage { position: sticky; top: var(--journey-top); padding-bottom: 16px; background: #f3f7f8; }
.is-scroll-driven .journey-panel { min-height: 0; margin-bottom: 0; }
.is-scroll-driven .journey-controls { margin-bottom: 24px; }
.journey-controls button { transition: color .2s ease, border-color .2s ease; }
.journey-controls button:focus-visible { outline: 2px solid #009aca; outline-offset: -4px; }
@media (max-width: 767px) {
    .is-scroll-driven .journey-panel { gap: 16px; }
    .is-scroll-driven .journey-panel img { max-height: 23svh; object-fit: contain; }
    .is-scroll-driven .journey-panel h3 { font-size: 22px; margin-bottom: 12px; }
    .is-scroll-driven .journey-panel p { margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
    .is-scroll-driven .journey-controls { margin-bottom: 16px; }
}
#spinner:not(.show) .spinner-grow { animation: none; }
.wow, .reveal-pending { visibility: visible !important; }
.reveal-pending { opacity: 1; transform: none; }
.service-item, .price-item, .location-card { transition: transform .25s ease, box-shadow .25s ease; }
.editorial-link i, .hero-actions i, .drawer-contact a span, .transport-drawer nav a span { transition: transform .2s ease; }
.editorial-link:hover i, .hero-actions a:hover i, .drawer-contact a:hover span, .transport-drawer nav a:hover span { transform: translateX(4px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .service-item:hover, .price-item:hover, .location-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px #102c3a12; }
}

/* Give the sunset panorama its own space so both trucks remain visible. */
.brand-hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 0; }
.brand-hero .hero-photo { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; object-position: center; }
.brand-hero::before, .brand-hero::after { display: none; }
.brand-hero .hero-inner { padding-top: 40px; padding-bottom: 48px; transform: none; }
@media (min-width: 992px) {
    .brand-hero .hero-photo { max-height: 70vh; object-fit: cover; }
}
@media (max-width: 767.98px) {
    .brand-hero { padding-top: 0; }
    .brand-hero .hero-inner { padding-top: 28px; padding-bottom: 36px; }
}

/* The navigation floats over the panorama, then gains a solid surface on scroll. */
.landing-page .transport-header { transition: background-color .25s ease, box-shadow .25s ease; }
.landing-page .transport-header:not(.is-scrolled) { background: transparent; box-shadow: none; }
.landing-page .transport-header:not(.is-scrolled) .transport-brand,
.landing-page .transport-header:not(.is-scrolled) .transport-brand b,
.landing-page .transport-header:not(.is-scrolled) .transport-brand small,
.landing-page .transport-header:not(.is-scrolled) .transport-menu-toggle,
.landing-page .transport-header:not(.is-scrolled) .transport-tools a { color: #fff; text-shadow: 0 1px 5px #00141eaa; }
.landing-page .transport-header:not(.is-scrolled) .transport-tools { background: transparent; }
.landing-page .transport-header:not(.is-scrolled) .transport-tools .tool-quote { background: #007fab; text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .landing-page .transport-header { transition: none; }
}

/* Combined transparent brand supplied for the floating navigation. */
.transport-brand-logo img { width: 132px; height: 56px; object-fit: contain; }
@media (max-width: 767.98px) {
    .transport-brand-logo img { width: 118px; height: 50px; }
}

/* Keep the offer and quote action together without hiding the fleet. */
@media (min-width: 992px) {
    .landing-page .brand-hero { min-height: 740px; min-height: max(740px, 92vh); justify-content: flex-end; }
    .landing-page .brand-hero .hero-photo { position: absolute; inset: 0; height: 100%; max-height: none; object-fit: cover; object-position: center; }
    .landing-page .brand-hero::after { display: block; background: linear-gradient(0deg, rgba(0, 20, 30, .96) 0%, rgba(0, 20, 30, .85) 23%, rgba(0, 20, 30, .35) 48%, transparent 67%); }
    .landing-page .brand-hero .hero-inner { padding-top: 280px; padding-bottom: 40px; }
    .landing-page .brand-hero h1 { max-width: 800px; font-size: clamp(40px, 3.8vw, 58px); margin-bottom: 14px; }
    .landing-page .hero-eyebrow { margin-bottom: 16px; }
    .landing-page .hero-promise { font-size: 23px; margin-bottom: 12px; }
    .landing-page .hero-copy { max-width: 700px; font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
    .landing-page .hero-principles { margin-top: 24px; }
}
@media (max-width: 991.98px) {
    .landing-page .brand-hero .hero-photo { aspect-ratio: 1.9; object-fit: cover; }
    .landing-page .brand-hero .hero-inner { padding-top: 24px; padding-bottom: 30px; }
    .landing-page .hero-eyebrow { margin-bottom: 18px; }
    .landing-page .brand-hero h1 { margin-bottom: 16px; }
    .landing-page .hero-promise { font-size: 23px; margin-bottom: 14px; }
    .landing-page .hero-copy { font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
    .landing-page .hero-principles { margin-top: 24px; }
}

/* Uniform overlay keeps the heading on the photograph at every screen size. */
.landing-page .brand-hero { min-height: 700px; justify-content: center; }
.landing-page .brand-hero .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: center; }
.landing-page .brand-hero::after { display: block; background: rgba(0, 20, 30, .57); }
.landing-page .brand-hero .hero-inner { padding-top: calc(var(--transport-header-height) + 64px); padding-bottom: 48px; }
@media (min-width: 992px) {
    .landing-page .brand-hero { min-height: max(700px, 90vh); }
}
@media (max-width: 991.98px) {
    .landing-page .brand-hero { min-height: 680px; }
    .landing-page .brand-hero .hero-photo { object-position: 58% center; }
    .landing-page .brand-hero .hero-inner { padding-top: calc(var(--transport-header-height) + 40px); padding-bottom: 36px; }
}

/* White brand over the photograph; original colors on the solid header. */
.landing-page .transport-brand-logo img { transition: filter .25s ease; }
.landing-page .transport-header:not(.is-scrolled) .transport-brand-logo img { filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) {
    .landing-page .transport-brand-logo img { transition: none; }
}

/* A short, ordered entrance: brand, headline, supporting copy, then action. */
.landing-page .brand-hero h1 .hero-title-line { display: inline-block; color: #fff; font-style: normal; }
.landing-page .brand-hero h1 .hero-title-accent { color: var(--brand-accent); font-style: italic; }
@keyframes hero-step {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}
@keyframes hero-title-step {
    from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 100% 0); }
    to { opacity: 1; transform: none; clip-path: inset(0 0 -12% 0); }
}
@media (prefers-reduced-motion: no-preference) {
    .landing-page .hero-eyebrow,
    .landing-page .hero-promise,
    .landing-page .hero-copy,
    .landing-page .hero-actions,
    .landing-page .hero-principles { animation: hero-step .65s cubic-bezier(.22,1,.36,1) both; }
    .landing-page .hero-eyebrow { animation-delay: .08s; }
    .landing-page .hero-title-line { animation: hero-title-step .8s cubic-bezier(.22,1,.36,1) .22s both; }
    .landing-page .hero-title-accent { animation-delay: .42s; }
    .landing-page .hero-promise { animation-delay: .62s; }
    .landing-page .hero-copy { animation-delay: .76s; }
    .landing-page .hero-actions { animation-delay: .9s; }
    .landing-page .hero-principles { animation-delay: 1.04s; }
}