/* ============================================================
   TransLogi 3H Services — Design System v3
   Palette: Dark Navy #0D1B2A | Orange #F28C1E | White #FFFFFF
   ============================================================ */
:root {
  --navy:        #0D1B2A;
  --navy-mid:    #152334;
  --navy-light:  #1E3048;
  --orange:      #F28C1E;
  --orange-dark: #D97A10;
  --white:       #FFFFFF;
  --off-white:   #F5F6F8;
  --gray-light:  #E8EAF0;
  --gray-mid:    #9AA3B0;
  --gray-dark:   #4A5568;
  --black:       #0A0F18;

  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  --nav-h: 72px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.28);

  --trans: 250ms ease;
  --trans-slow: 400ms ease;
  --max-w: 1200px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--navy);background:var(--white);-webkit-font-smoothing:antialiased;}
img,video{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{cursor:pointer;font-family:inherit;border:none;background:none;}

/* ---- Accessibility ---- */
.skip-link{position:absolute;top:-100%;left:1rem;background:var(--orange);color:var(--navy);padding:.5rem 1rem;border-radius:var(--radius-sm);font-weight:700;z-index:9999;}
.skip-link:focus{top:.5rem;}

/* ---- Layout ---- */
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:1.5rem;}
.section{padding-block:5rem;}
.section--sm{padding-block:3rem;}

/* ---- Typography ---- */
h1,h2,h3,h4,h5{font-family:var(--font-heading);line-height:1.15;}
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;}
h2{font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:800;}
h3{font-size:clamp(1.2rem,2.5vw,1.75rem);font-weight:700;}
h4{font-size:1.15rem;font-weight:700;}
p{line-height:1.7;}

.label{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:.5rem;}
.title-white{color:var(--white);}
.text-orange{color:var(--orange);}
.text-center{text-align:center;}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 2rem;border-radius:var(--radius-md);font-family:var(--font-heading);font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:2px solid transparent;transition:background var(--trans),color var(--trans),border-color var(--trans),transform var(--trans),box-shadow var(--trans);}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}

.btn--primary{background:var(--orange);color:var(--navy);border-color:var(--orange);}
.btn--primary:hover{background:var(--orange-dark);border-color:var(--orange-dark);color:var(--navy);}
.btn--outline{background:transparent;color:var(--white);border-color:var(--white);}
.btn--outline:hover{background:var(--white);color:var(--navy);}
.btn--outline-dark{background:transparent;color:var(--navy);border-color:var(--navy);}
.btn--outline-dark:hover{background:var(--navy);color:var(--white);}
.btn--lg{padding:1rem 2.5rem;font-size:.95rem;}
.btn:disabled{opacity:.5;pointer-events:none;}

/* ============================================================
   TOPBAR — info strip above navbar
   ============================================================ */
.topbar {
  background: var(--black);
  height: 36px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  width: 100%;
}
.topbar__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}
.topbar__item svg { color: var(--orange); flex-shrink: 0; }
.topbar__item a { color: rgba(255,255,255,.72); transition: color var(--trans); }
.topbar__item a:hover { color: var(--orange); }

/* Push navbar down by topbar height */
.navbar { top: 36px; }

@media(max-width:768px) {
  .topbar__inner { gap: 1.25rem; }
  .topbar__item:last-child { display: none; }
  .topbar__item { font-size: .7rem; }
}
@media(max-width:480px) {
  .topbar { height: 32px; }
  .topbar__inner { gap: 1.25rem; }
  .topbar__item { font-size: .65rem; }
  .navbar { top: 32px; }
}

/* ============================================================
   NAVBAR — hide on scroll down, show on scroll up
   ============================================================ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  background:transparent;
  transition:background var(--trans),box-shadow var(--trans),transform var(--trans-slow);
}
.navbar.scrolled{background:rgba(13,27,42,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-lg);}
.navbar.hidden{transform:translateY(-100%);}

.navbar__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;}

/* Logo */
.navbar__logo{display:flex;align-items:center;flex-shrink:0;}
.navbar__logo img{height:48px;width:auto;object-fit:contain;}

/* Desktop links */
.navbar__nav{display:flex;align-items:center;gap:.25rem;}
.navbar__link{padding:.5rem .875rem;font-size:.875rem;font-weight:600;color:rgba(255,255,255,.85);border-radius:var(--radius-sm);transition:color var(--trans),background var(--trans);}
.navbar__link:hover,.navbar__link.active{color:var(--white);background:rgba(255,255,255,.1);}
.navbar__link.active{color:var(--orange);}

/* CTA pill */
.navbar__cta-pill{
  background:var(--orange);color:var(--navy);
  padding:.45rem 1.25rem;border-radius:var(--radius-full);
  font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  transition:background var(--trans),transform var(--trans);
  white-space:nowrap;
}
.navbar__cta-pill:hover{background:var(--orange-dark);transform:translateY(-1px);}

/* Hamburger */
.navbar__toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;gap:5px;border-radius:var(--radius-sm);}
.navbar__toggle span{display:block;width:22px;height:2px;background:var(--white);border-radius:var(--radius-full);transition:transform var(--trans),opacity var(--trans);}
.navbar__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navbar__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navbar__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile menu */
.navbar__mobile{display:none;position:fixed;inset:0;top:var(--nav-h);background:var(--navy);z-index:999;padding:2rem 1.5rem;flex-direction:column;gap:.5rem;overflow-y:auto;}
.navbar__mobile.open{display:flex;}
.navbar__mobile .navbar__link{font-size:1.1rem;padding:1rem;border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-md);}
.navbar__mobile .navbar__cta-pill{margin-top:1rem;text-align:center;padding:.75rem;border-radius:var(--radius-md);}

/* ============================================================
   HERO WRAPPER — imagen de fondo compartida con header
   ============================================================ */
.hero-wrapper {
  position: relative;
  background-image: url('hero.webp');
  background-size: cover;
  background-position: 70% center;
}
.hero-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(13,27,42,.75) 40%, rgba(13,27,42,.50) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Topbar transparente para que se vea la imagen detrás */
.hero-wrapper ~ * .topbar,
.topbar {
  /* se deja el fondo por defecto para otras páginas */
}
/* En home, el topbar y header son transparentes porque la imagen está fija detrás */
body:has(.hero-wrapper) .topbar {
  background: rgba(10,15,24,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body:has(.hero-wrapper) .home-navbar {
  background: transparent;
}
/* El hero section ya no necesita fondo propio */

/* ============================================================
   HERO — full-screen con imagen de fondo
   ============================================================ */
.hero{
  position:relative;
  min-height:80svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:0;
  background:transparent;overflow:hidden;
}
.hero__bg{ display:none; }
.hero__overlay{display:none;}
.hero__content{position:relative;z-index:1;max-width:700px;padding-block:0 3rem;margin-top:-5rem;}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(242,140,30,.15);border:1px solid rgba(242,140,30,.35);color:var(--orange);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.35rem 1rem;border-radius:var(--radius-full);margin-bottom:1.5rem;}
.hero__title{color:var(--white);margin-bottom:1.25rem;line-height:1.05;}
.hero__title em{font-style:normal;color:var(--orange);}
.hero__subtitle{color:rgba(255,255,255,.72);font-size:clamp(1rem,1.8vw,1.15rem);max-width:52ch;margin-bottom:2.5rem;line-height:1.75;}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;}

/* Page hero — accounts for topbar + navbar pill */
.page-hero {
  position: relative;
  padding: calc(36px + 80px + 5rem) 0 3rem;
  background: var(--navy);
  overflow: hidden;
}
.page-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.3;z-index:0;}
.page-hero__overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,27,42,.95) 0%,rgba(13,27,42,.7) 100%);z-index:1;}
.page-hero__content{position:relative;z-index:2;text-align:center;}
.page-hero__title{color:var(--white);margin-bottom:1rem;}
.page-hero__subtitle{color:rgba(255,255,255,.7);max-width:55ch;margin-inline:auto;}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;color:rgba(255,255,255,.55);margin-bottom:1.25rem;}
.breadcrumb a{color:rgba(255,255,255,.55);}
.breadcrumb a:hover{color:var(--orange);}

/* ============================================================
   VEHICLE SLIDER
   ============================================================ */
.slider-section{background:var(--off-white);padding-block:4rem;}
.slider-section > [data-slider] { max-width: var(--max-w); margin-inline: auto; padding-inline: 1.5rem; }
.slider-track-wrap{overflow:hidden;border-radius:var(--radius-lg);}
.slider-track{display:flex;gap:1.5rem;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.slide{flex:0 0 calc(33.333% - 1rem);border-radius:var(--radius-lg);overflow:hidden;background:var(--gray-light);aspect-ratio:16/10;position:relative;}
.slide img{width:100%;height:100%;object-fit:cover;}
.slider-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem;}
.slider-btn{width:40px;height:40px;border-radius:var(--radius-full);background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:center;transition:background var(--trans);}
.slider-btn:hover{background:var(--orange);}
.slider-dots{display:flex;gap:.5rem;}
.slider-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--gray-mid);transition:background var(--trans),width var(--trans);}
.slider-dot.active{background:var(--orange);width:24px;}

/* Desktop & tablet: show all 3 images as grid, hide slider controls */
@media(min-width:769px) {
  .slider-track-wrap { overflow: visible; }
  .slider-track { transform: none !important; }
  .slider-controls { display: none; }
}

/* Mobile: enable slider behavior */
@media(max-width:768px) {
  .slide { flex: 0 0 100%; }
  .slider-track { gap: 0; }
}

/* ============================================================
   FEATURE CARDS (bajo el slider en Home)
   ============================================================ */
.features-bar{background:var(--white);padding-block:3rem;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.feature-card{background:var(--off-white);border-radius:var(--radius-lg);padding:1.75rem 1.5rem;text-align:center;transition:transform var(--trans),box-shadow var(--trans);}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.feature-card__icon{width:52px;height:52px;background:rgba(242,140,30,.12);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:var(--orange);}
.feature-card__title{font-size:1rem;font-weight:700;margin-bottom:.5rem;color:var(--navy);}
.feature-card__text{font-size:.875rem;color:var(--gray-dark);line-height:1.6;}

/* ============================================================
   LET'S MOVE / CTA + FORM
   ============================================================ */
.cta-form-section{background:var(--off-white);padding-block:5rem;}
.cta-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
.cta-form__heading{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;line-height:1.15;margin-bottom:1rem;}
.cta-form__heading em{font-style:normal;color:var(--orange);}
.cta-form__text{color:var(--gray-dark);margin-bottom:2rem;line-height:1.7;}
.cta-form__contacts{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;}
.cta-contact-item{display:flex;align-items:center;gap:.75rem;font-size:.9rem;}
.cta-contact-item svg{color:var(--orange);flex-shrink:0;}
.cta-social{display:flex;gap:.75rem;margin-top:1.5rem;}
.social-link{width:36px;height:36px;border-radius:var(--radius-full);border:1px solid var(--orange);display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:.8rem;transition:background var(--trans),color var(--trans),border-color var(--trans),transform var(--trans);}
.social-link:hover{background:var(--orange);color:var(--navy);border-color:var(--orange);transform:scale(1.15);}

/* ============================================================
   FORM
   ============================================================ */
.form-card{background:var(--white);border-radius:var(--radius-lg);padding:2.5rem;box-shadow:var(--shadow-md);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-group{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1.25rem;}
.form-label{font-size:.8rem;font-weight:700;color:var(--navy);letter-spacing:.04em;}
.form-label .req{color:var(--orange);}
.form-control{width:100%;padding:.7rem 1rem;border:1.5px solid var(--gray-light);border-radius:var(--radius-md);font-family:var(--font-body);font-size:.95rem;color:var(--navy);background:var(--white);min-height:44px;transition:border-color var(--trans),box-shadow var(--trans);}
.form-control:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,140,30,.18);}
.form-control[aria-invalid="true"]{border-color:#c62828;}
textarea.form-control{min-height:120px;resize:vertical;}
.form-error{font-size:.75rem;color:#c62828;}
.form-success{display:none;padding:1rem;background:rgba(46,125,50,.1);border:1px solid #2e7d32;border-radius:var(--radius-md);color:#2e7d32;font-weight:600;text-align:center;margin-bottom:1rem;}

/* ============================================================
   CTA BANNER (Ready to move your next shipment)
   ============================================================ */
.cta-banner{background:var(--orange);padding-block:4rem;text-align:center;}
.cta-banner h2{color:var(--navy);margin-bottom:1rem;}
.cta-banner p{color:var(--navy);margin-bottom:2rem;max-width:50ch;margin-inline:auto;}
.cta-banner__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.cta-banner .btn--primary{background:var(--navy);color:var(--white);border-color:var(--navy);}
.cta-banner .btn--primary:hover{background:var(--navy-mid);border-color:var(--navy-mid);}
.cta-banner .btn--outline{color:var(--navy);border-color:var(--navy);}
.cta-banner .btn--outline:hover{background:var(--navy);color:var(--white);}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.about-split__img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.about-split__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.about-split__label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--orange);margin-bottom:.75rem;}
.about-split__title{margin-bottom:1.25rem;}
.about-split__text{color:var(--gray-dark);line-height:1.8;margin-bottom:1rem;}
.about-checklist{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;}
.about-check{display:flex;align-items:flex-start;gap:.75rem;font-size:.9rem;color:var(--gray-dark);}
.about-check::before{content:'✓';flex-shrink:0;width:22px;height:22px;background:var(--orange);color:var(--navy);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.7rem;margin-top:1px;}

/* Since Badge */
.since-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.since-badge__line {
  width: 40px;
  height: 2px;
  background: var(--orange);
  opacity: .6;
}
.since-badge__text {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--orange);
}

/* MVV cards — gradient navy, left-aligned, numbered */
.mvv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.mvv-card{
  background: linear-gradient(135deg, #1a2f4a 0%, #0d1b2a 100%);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.mvv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(242,140,30,.6), transparent);
}
.mvv-card__num {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  letter-spacing: .08em;
  margin-bottom: .875rem;
}
.mvv-card__title {
  color: var(--orange);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-heading);
  margin-bottom: .75rem;
}
.mvv-card__text {
  color: rgba(255,255,255,.65);
  font-size: .875rem;
  line-height: 1.7;
}
@media(max-width:768px){
  .mvv-grid{grid-template-columns:1fr;}
}

/* ============================================================
   SERVICES PAGE — USA Map with animated trucks
   ============================================================ */
.map-section{background:var(--off-white);padding-block:5rem;}
.map-section__title{text-align:center;margin-bottom:.5rem;}
.map-section__subtitle{text-align:center;color:var(--gray-dark);margin-bottom:3rem;}
.map-wrap{position:relative;max-width:800px;margin-inline:auto;}
.usa-map{width:100%;height:auto;display:block;}
/* SVG states fill */
.usa-map .state{fill:var(--navy-light);stroke:var(--navy);stroke-width:.8;transition:fill var(--trans);}
.usa-map .state:hover{fill:var(--orange);}
/* Animated trucks on map */
.map-truck{position:absolute;font-size:1.5rem;animation:truckMove 8s linear infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}
.map-truck:nth-child(1){animation-name:truck1;animation-duration:9s;}
.map-truck:nth-child(2){animation-name:truck2;animation-duration:12s;animation-delay:2s;}
.map-truck:nth-child(3){animation-name:truck3;animation-duration:10s;animation-delay:4s;}
@keyframes truck1{
  0%{left:5%;top:55%;opacity:0;}
  5%{opacity:1;}
  50%{left:55%;top:40%;}
  95%{left:85%;top:30%;opacity:1;}
  100%{left:90%;top:28%;opacity:0;}
}
@keyframes truck2{
  0%{left:10%;top:70%;opacity:0;}
  5%{opacity:1;}
  50%{left:45%;top:60%;}
  95%{left:80%;top:45%;opacity:1;}
  100%{left:85%;top:43%;opacity:0;}
}
@keyframes truck3{
  0%{left:8%;top:40%;opacity:0;}
  5%{opacity:1;}
  50%{left:50%;top:30%;}
  95%{left:78%;top:20%;opacity:1;}
  100%{left:83%;top:18%;opacity:0;}
}

/* Destinations grid */
.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem;}
.dest-card{background:var(--white);border-radius:var(--radius-lg);padding:1.5rem;border-left:4px solid var(--orange);box-shadow:var(--shadow-sm);transition:transform var(--trans),box-shadow var(--trans);}
.dest-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.dest-card__route{display:flex;align-items:center;gap:.5rem;font-weight:700;font-family:var(--font-heading);font-size:.95rem;color:var(--navy);margin-bottom:.5rem;}
.dest-card__dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0;}
.dest-card__desc{font-size:.8rem;color:var(--gray-dark);}

/* ============================================================
   CONTACT PAGE — Google Map
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
.contact-info__title{font-size:1.75rem;font-weight:800;margin-bottom:1.5rem;}
.contact-cards{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;}
.contact-card{display:flex;align-items:center;gap:1rem;background:var(--off-white);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;transition:box-shadow var(--trans);}
.contact-card:hover{box-shadow:var(--shadow-md);}
.contact-card__icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;}
.contact-card__label{font-size:.75rem;font-weight:700;color:var(--gray-mid);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2rem;}
.contact-card__value{font-weight:600;color:var(--navy);font-size:.95rem;}
.map-embed{border-radius:var(--radius-lg);overflow:hidden;margin-top:2rem;box-shadow:var(--shadow-md);}
.map-embed iframe{width:100%;height:320px;border:0;display:block;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:#1A1A1A;color:rgba(255,255,255,.7);padding-top:4rem;}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.08);}
.footer__logo img{height:60px;width:auto;margin-bottom:1rem;}
.footer__desc{font-size:.875rem;line-height:1.7;margin-bottom:1.25rem;}
.footer__social{display:flex;gap:.625rem;}
.footer__heading{font-family:var(--font-heading);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-bottom:1.25rem;}
.footer__links{display:flex;flex-direction:column;gap:.625rem;}
.footer__links a{font-size:.875rem;transition:color var(--trans),padding-left var(--trans);}
.footer__links a:hover{color:var(--orange);padding-left:.375rem;}
.footer__contact-item{display:flex;align-items:flex-start;gap:.625rem;font-size:.875rem;margin-bottom:.875rem;}
.footer__contact-icon{color:var(--orange);flex-shrink:0;margin-top:2px;}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;padding-block:1.5rem;font-size:.8rem;}
.footer__legal{display:flex;gap:1.5rem;}
.footer__legal a{color:rgba(255,255,255,.55);}
.footer__legal a:hover{color:var(--orange);}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:9999;display:flex;align-items:center;gap:.75rem;text-decoration:none;}
.wa-float__btn{position:relative;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(37,211,102,.45);animation:waBeat 2s ease-in-out infinite;flex-shrink:0;transition:box-shadow var(--trans);}
.wa-float__btn:hover{animation-play-state:paused;box-shadow:0 6px 26px rgba(37,211,102,.65);}
.wa-float__btn svg{width:30px;height:30px;fill:#fff;}
.wa-float__label{background:var(--navy);color:var(--white);font-size:.8rem;font-weight:600;padding:.375rem .875rem;border-radius:var(--radius-md);white-space:nowrap;opacity:0;transform:translateX(8px);transition:opacity var(--trans),transform var(--trans);pointer-events:none;box-shadow:var(--shadow-sm);}
.wa-float:hover .wa-float__label,.wa-float:focus-within .wa-float__label{opacity:1;transform:translateX(0);}
@keyframes waBeat{
  0%,100%{box-shadow:0 4px 18px rgba(37,211,102,.45);}
  40%{box-shadow:0 4px 28px rgba(37,211,102,.8);}
  60%{box-shadow:0 4px 22px rgba(37,211,102,.55);}
}

/* ============================================================
   ANIMATE ON SCROLL
   ============================================================ */
[data-aos]{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;}
[data-aos].aos-in{opacity:1;transform:translateY(0);}
[data-aos][data-delay="1"]{transition-delay:.1s;}
[data-aos][data-delay="2"]{transition-delay:.2s;}
[data-aos][data-delay="3"]{transition-delay:.3s;}
[data-aos][data-delay="4"]{transition-delay:.4s;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .features-grid{grid-template-columns:repeat(3,1fr);}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2rem;}
  .dest-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){  :root{--nav-h:64px;}
  .navbar__nav,.navbar__cta-pill{display:none;}
  .navbar__toggle{display:flex;}
  .hero__content{padding-block:3rem 2rem;}
  .hero__actions{flex-direction:column;align-items:flex-start;}
  .about-split,.cta-form-grid,.contact-grid{grid-template-columns:1fr;}
  .mvv-grid{grid-template-columns:1fr;}
  .dest-grid{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;gap:1rem;text-align:center;}
  .form-row{grid-template-columns:1fr;}
  .cta-banner__actions{flex-direction:column;align-items:center;}
  .wa-float__label{display:none;}
  .wa-float{bottom:20px;right:20px;}
  .wa-float__btn{width:50px;height:50px;}
}
@media(max-width:480px){
  .container{padding-inline:1rem;}
  .section{padding-block:3rem;}
  .features-grid{grid-template-columns:1fr;}
}

/* ============================================================
   SERVICES PAGE — Main Destinations split layout
   ============================================================ */
.destinations-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.destinations-split__text .label { display: block; margin-bottom: .5rem; }
.destinations-split__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.destinations-split__title span { display: block; color: var(--orange); }
.destinations-split__body { color: var(--gray-dark); line-height: 1.8; margin-bottom: 2rem; max-width: 42ch; }

/* Map card — navy box with USA map and truck animations */
.map-card {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  max-width: 500px;
  margin-inline: auto;
}
.map-card__label {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(242,140,30,.15);
  border: 1px solid rgba(242,140,30,.3);
  color: var(--orange);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.map-card__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(242,140,30,.08) 0%, transparent 70%);
}
/* SVG map inside card */
.map-card__svg-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usa-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.map-card svg.usa-inline .st {
  fill: var(--navy-light);
  stroke: rgba(255,255,255,.15);
  stroke-width: .5;
  transition: fill var(--trans);
}
/* Route lines on map — disabled to avoid visual artifacts */
.map-route { display: none; }

/* Truck icons on map — smaller, inside card */
.map-truck-sm {
  position: absolute;
  z-index: 2;
  line-height: 1;
}
.map-truck-1 { animation: truck-move-1 35s linear infinite; }
.map-truck-2 { animation: truck-move-2 40s linear infinite; }
.map-truck-3 { animation: truck-move-3 38s linear infinite 8s; transform: scaleX(-1); }
.map-truck-4 { animation: truck-move-4 42s linear infinite 12s; transform: scaleX(-1); }

@keyframes truck-move-1 {
  0%   { left: 15%; top: 45%; opacity: 0; }
  5%   { left: 18%; top: 43%; opacity: 0.3; }
  10%  { left: 22%; top: 42%; opacity: 0.6; }
  15%  { left: 26%; top: 40%; opacity: 1; }
  30%  { left: 35%; top: 38%; }
  45%  { left: 45%; top: 42%; }
  60%  { left: 55%; top: 38%; }
  75%  { left: 63%; top: 42%; }
  85%  { left: 68%; top: 40%; opacity: 1; }
  90%  { left: 70%; top: 39%; opacity: 0.5; }
  95%  { left: 72%; top: 38%; opacity: 0.2; }
  100% { left: 73%; top: 38%; opacity: 0; }
}
@keyframes truck-move-2 {
  0%   { left: 20%; top: 55%; opacity: 0; }
  5%   { left: 23%; top: 53%; opacity: 0.3; }
  10%  { left: 26%; top: 52%; opacity: 0.6; }
  15%  { left: 30%; top: 50%; opacity: 1; }
  30%  { left: 38%; top: 48%; }
  45%  { left: 47%; top: 52%; }
  60%  { left: 55%; top: 48%; }
  75%  { left: 62%; top: 52%; }
  85%  { left: 66%; top: 50%; opacity: 1; }
  90%  { left: 68%; top: 49%; opacity: 0.5; }
  95%  { left: 70%; top: 48%; opacity: 0.2; }
  100% { left: 71%; top: 48%; opacity: 0; }
}
@keyframes truck-move-3 {
  0%   { left: 55%; top: 55%; opacity: 0; }
  5%   { left: 52%; top: 53%; opacity: 0.3; }
  10%  { left: 49%; top: 50%; opacity: 0.6; }
  15%  { left: 46%; top: 48%; opacity: 1; }
  30%  { left: 40%; top: 45%; }
  45%  { left: 35%; top: 42%; }
  60%  { left: 30%; top: 45%; }
  75%  { left: 25%; top: 42%; }
  85%  { left: 22%; top: 40%; opacity: 1; }
  90%  { left: 20%; top: 39%; opacity: 0.5; }
  95%  { left: 19%; top: 38%; opacity: 0.2; }
  100% { left: 18%; top: 38%; opacity: 0; }
}
@keyframes truck-move-4 {
  0%   { left: 60%; top: 35%; opacity: 0; }
  5%   { left: 57%; top: 37%; opacity: 0.3; }
  10%  { left: 54%; top: 38%; opacity: 0.6; }
  15%  { left: 50%; top: 40%; opacity: 1; }
  30%  { left: 45%; top: 44%; }
  45%  { left: 40%; top: 48%; }
  60%  { left: 35%; top: 52%; }
  75%  { left: 30%; top: 50%; }
  85%  { left: 26%; top: 48%; opacity: 1; }
  90%  { left: 24%; top: 47%; opacity: 0.5; }
  95%  { left: 22%; top: 46%; opacity: 0.2; }
  100% { left: 21%; top: 46%; opacity: 0; }
}

@media(max-width:768px) {
  .destinations-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .map-card { max-width: 360px; }
}

/* ============================================================
   HOME HEADER — logo centrado + navbar pill
   ============================================================ */
.home-header {
  position: fixed;
  top: 36px; /* debajo del topbar */
  left: 0;
  right: 0;
  z-index: 1003;
  transition: transform var(--trans-slow), opacity var(--trans-slow);
}
/* En home, el header baja más para dejar espacio al logo band estático */
body:has(.hero-wrapper) .home-header {
  top: calc(36px + 88px + 4.5rem);
}
.home-header.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Navbar pill */
.home-navbar {
  padding: .625rem 1.5rem;
  background: var(--navy);
}

/* Logo band — estático, parte del hero, se va con el scroll */
.home-logo-band {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem .75rem;
  padding-top: calc(36px + 1.5rem);
}
.home-logo-band__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}
.home-logo-band__img {
  height: 134px;
  width: auto;
  object-fit: contain;
  display: block;
}
.home-logo-band__text {
  display: flex;
  flex-direction: column;
}
.home-logo-band__name {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 800;
  background: linear-gradient(135deg, #d4a44a 0%, #f5d680 40%, #c8913a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.home-logo-band__sub {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 500;
  color: var(--white);
  margin-top: -.5rem;
  padding-left: 19.5ch;
} espacio para topbar fixed */
.home-logo-band__fallback {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--white);
  text-align: center;
  line-height: 1.2;
}
.home-logo-band__fallback span { color: var(--orange); }

.home-navbar__pill {
  background: var(--white);
  border-radius: var(--radius-full);
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .5rem .5rem .75rem;
  box-shadow: var(--shadow-lg);
  gap: 1rem;
}

/* Mini logo dentro de la pill */
.home-navbar__pill-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.home-navbar__pill-logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
  margin-top: -4px;
  margin-bottom: -4px;
}
.home-navbar__pill-logo-text {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: .8rem;
  color: var(--navy);
  line-height: 1.15;
}
.home-navbar__pill-logo-text span {
  display: block;
  font-size: .65rem;
  font-weight: 500;
  color: var(--gray-dark);
  letter-spacing: .04em;
}

/* Links en la pill */
.home-navbar__links {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 1;
  justify-content: center;
}
.home-navbar__link {
  padding: .45rem .875rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  border-radius: var(--radius-full);
  transition: background var(--trans), color var(--trans);
  white-space: nowrap;
}
.home-navbar__link:hover,
.home-navbar__link.active {
  background: rgba(13,27,42,.08);
  color: var(--navy);
}

/* CTA button en la pill */
.home-navbar__cta {
  background: var(--orange);
  color: var(--navy);
  padding: .55rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background var(--trans), transform var(--trans);
  white-space: nowrap;
}
.home-navbar__cta:hover { background: var(--orange-dark); transform: scale(1.03); color: var(--navy); }

/* Hamburger en pill (mobile) */
.home-navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  gap: 5px;
  flex-shrink: 0;
}
.home-navbar__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy);
  border-radius: var(--radius-full);
  transition: transform var(--trans), opacity var(--trans);
}
.home-navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.home-navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.home-navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu para home */
.home-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--navy);
  z-index: 1002;
  padding: 16rem 1.5rem 2rem;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}
.home-mobile-menu.open { display: flex; }
.home-mobile-menu .home-navbar__link {
  color: var(--white);
  font-size: 1.1rem;
  padding: 1.25rem 1rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md);
}
.home-mobile-menu .home-navbar__cta {
  margin-top: 1rem;
  text-align: center;
  padding: 1.25rem;
  border-radius: var(--radius-md);
}

/* Logo band fallback text */
.home-logo-band__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}
.home-logo-band__fallback span:nth-child(2) {
  font-size: 2.2rem;
  color: var(--white);
}
.hero--home {
  padding-top: calc(36px + 112px + 68px); /* topbar + logo band + navbar pill */
}

@media(max-width:768px) {
  .home-header { top: 32px; }
  .home-logo-band__img { height: 70px; }
  .home-logo-band { padding-top: calc(32px + 7rem); }
  .home-logo-band__sub { padding-left: 20ch; font-size: 0.78rem; }
  .home-navbar__links, .home-navbar__cta { display: none; }
  .home-navbar__toggle { display: flex; }
  .home-navbar__pill { max-width: fit-content; padding: .4rem .5rem .4rem .6rem; gap: .75rem; }
  .hero--home { padding-top: calc(32px + 88px + 60px); }
  .page-hero { padding-top: calc(32px + 60px + 3rem); }
  body:has(.hero-wrapper) .home-header { top: calc(32px + 60px + 1.5rem); }
  .features-grid { grid-template-columns: 1fr; }
  .hero__content { margin-top: -2rem; }
}
@media(max-width:480px) {
  .home-logo-band__img { height: 64px; }
  .home-navbar__pill-logo img { height: 36px; margin-top: -2px; margin-bottom: -2px; }
  .home-logo-band { padding-top: calc(32px + 4.2rem); }
  .hero--home { padding-top: calc(32px + 10px); }
  .page-hero { padding-top: calc(32px + 56px + 2.5rem); }
  body:has(.hero-wrapper) .home-header { top: calc(32px + 64px + 4.2rem); }
  .hero__content { margin-top: -3rem; }
}