:root {
      --primary: #294b76;
      --primary-2: #385e8c;
      --primary-3: #173450;
      --accent: #2c4661;
      --accent-2: #6e87aa;
      --gold: #b6bdc6;
      --section-bridge: #b8c6d1;
      --text: #182230;
      --muted: #64748b;
      --light: #f6f8fb;
      --white: #ffffff;
      --border: #dfe7ef;
      --shadow: 0 22px 55px rgba(5, 23, 42, .13);
      --shadow-soft: 0 12px 35px rgba(5, 23, 42, .09);
      --radius: 18px;
      --radius-lg: 28px;
      --container: 1180px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: var(--white);
      overflow-x: hidden;
      line-height: 1.65;
    }

    img {
      max-width: 100%;
      display: block
    }

    a {
      text-decoration: none;
      color: inherit
    }

    ul {
      list-style: none
    }

    .container {
      width: min(var(--container), calc(100% - 38px));
      margin-inline: auto
    }

    .section {
      padding: 104px 0;
      position: relative;
      overflow: hidden
    }

    .section-sm {
      padding: 78px 0
    }

    .grid {
      display: grid;
      gap: 28px
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 24px;
      border-radius: 999px;
      border: 0;
      background: var(--accent);
      color: var(--white);
      font-weight: 800;
      letter-spacing: .01em;
      box-shadow: 0 15px 35px rgba(44, 70, 97, .26);
      transition: .28s ease;
      cursor: pointer;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-3px);
      background: #2c4661;
      box-shadow: 0 18px 46px rgba(44, 70, 97, .36)
    }

    .btn.dark {
      background: var(--primary);
      box-shadow: 0 15px 35px rgba(6, 26, 43, .25)
    }

    .btn.dark:hover {
      background: #020d16
    }

    .btn.ghost {
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .32);
      box-shadow: none;
      backdrop-filter: blur(10px)
    }

    .btn.ghost:hover {
      background: rgba(255, 255, 255, .2)
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      color: var(--accent);
      font-size: 14px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .09em;
    }

    .eyebrow:before {
      content: "";
      width: 38px;
      height: 3px;
      background: var(--accent);
      border-radius: 20px
    }

    .section-title {
      font-size: clamp(32px, 4vw, 54px);
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -.05em;
      color: var(--primary)
    }

    .section-title span {
      color: var(--accent)
    }

    .section-copy {
      margin-top: 18px;
      color: var(--muted);
      font-size: 17px;
      max-width: 710px
    }

    .center {
      text-align: center
    }

    .center .eyebrow {
      justify-content: center
    }

    .center .section-copy {
      margin-inline: auto
    }

    .dark-zone .section-title,
    .dark-zone .section-copy,
    .dark-zone .eyebrow {
      color: var(--white)
    }

    .dark-zone .eyebrow:before {
      background: var(--accent)
    }

    .shape-map {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .055;
      background-image:
        radial-gradient(circle at 15% 20%, #ffffff 0 2px, transparent 2px),
        linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .55) 18px 19px, transparent 19px 42px),
        linear-gradient(0deg, transparent 0 18px, rgba(255, 255, 255, .45) 18px 19px, transparent 19px 42px);
      background-size: 90px 90px, 42px 42px, 42px 42px;
    }

    /* Preloader */
    .preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 18% 18%, rgba(110, 135, 170, .28), transparent 28%),
        radial-gradient(circle at 82% 76%, rgba(184, 198, 209, .18), transparent 25%),
        #173450;
      transition: opacity .5s ease, visibility .5s ease;
    }

    .preloader.hide {
      opacity: 0;
      visibility: hidden
    }

    /* Header */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      transition: .3s ease
    }

    .topbar {
      background: var(--primary);
      color: rgba(255, 255, 255, .85);
      font-size: 13px
    }

    .topbar-inner {
      height: 39px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px
    }

    .topbar ul {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap
    }

    .topbar i {
      color: var(--white);
      margin-right: 8px
    }

    .topbar .socials i {
      margin: 0;
      line-height: 1
    }

    .socials a {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, .08);
      transition: .25s
    }

    .socials a:hover {
      background: var(--accent);
      transform: translateY(-2px)
    }

    .navwrap {
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(16px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .05);
      transition: .3s ease
    }

    .header.scrolled .navwrap {
      box-shadow: 0 12px 34px rgba(5, 23, 42, .13)
    }

    .nav {
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 11px;
      color: var(--primary);
      font-weight: 900;
      font-size: 24px;
      letter-spacing: -.04em
    }

    .logo-mark {
      width: 45px;
      height: 45px;
      border-radius: 12px;
      background: var(--accent);
      display: grid;
      place-items: center;
      color: #fff;
      box-shadow: 0 12px 28px rgba(44, 70, 97, .27);
      position: relative;
      overflow: hidden
    }

    .logo-mark:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, .25) 47% 54%, transparent 55%)
    }

    .logo span span {
      color: var(--accent)
    }

    .brand-logo {
      width: 222px;
      height: 72px;
      object-fit: contain;
      object-position: left center
    }

    .brand-logo--light {
      width: 208px;
      height: 76px
    }

    .menu {
      display: flex;
      align-items: center;
      gap: 30px;
      font-weight: 800;
      font-size: 14px;
      color: #233246
    }

    .menu a {
      position: relative;
      padding: 30px 0;
      transition: .25s
    }

    .menu a:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 22px;
      width: 0;
      height: 3px;
      background: var(--accent);
      border-radius: 10px;
      transition: .25s
    }

    .menu a:hover,
    .menu a.active {
      color: var(--accent)
    }

    .menu a:hover:after,
    .menu a.active:after {
      width: 100%
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .icon-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1px solid var(--border);
      background: #fff;
      cursor: pointer;
      transition: .25s;
      color: var(--primary)
    }

    .icon-btn:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
      transform: translateY(-2px)
    }

    .hamburger {
      display: none
    }

    .mobile-panel {
      display: none
    }

    /* Navegación: composición sobria, más aire y foco en la acción principal */
    .header { border-bottom: 1px solid rgba(223,231,239,.82) }
    .topbar { background: #173450; font-size: 13px; letter-spacing: .015em }
    .topbar-inner { height: 34px }.topbar ul { gap: 22px }.topbar i { color: #b8c6d1; margin-right: 6px }
    .socials a { width: 24px; height: 24px; background: transparent; border: 1px solid rgba(255,255,255,.16) }.socials a:hover { background: #385e8c; transform: none }
    .navwrap { background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(223,231,239,.72); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none }
    .header.scrolled .navwrap { background: #fff; box-shadow: 0 12px 28px rgba(23,52,80,.1) }
    .nav { height: 78px; gap: 22px }
    .logo { flex: 0 0 auto; line-height: 0 }
    .brand-logo { width: 184px; height: 58px; object-fit: contain; object-position: left center }
    .menu { gap: 25px; margin-left: auto; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; color: #52657b }
    .menu a { padding: 29px 0; transition: color .22s ease }.menu a:after { right: 0; left: auto; bottom: 20px; display: block; width: 0; height: 2px; background: #294b76; transform-origin: right center; transition: width .28s cubic-bezier(.22,1,.36,1) }.menu a:hover, .menu a.active { color: #173450 }.menu a:hover:after, .menu a.active:after { right: auto; left: 0; width: 100% }
    .nav-actions { gap: 9px; padding-left: 7px; border-left: 1px solid #e4eaf0 }
    .nav-search { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 11px; border: 0; border-radius: 10px; background: #f3f6f9; color: #52657b; font: 700 13px "Manrope", system-ui, sans-serif; cursor: pointer; transition: .22s ease }.nav-search:hover { background: #dfe7ef; color: #173450 }.nav-search i { font-size: 13px; color: #294b76 }
    .desktop-quote { min-height: 40px; padding: 0 15px; border-radius: 10px; background: #294b76; box-shadow: none; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em }.desktop-quote:hover { background: #173450; box-shadow: 0 9px 18px rgba(23,52,80,.2) }.desktop-quote i { font-size: 13px; transition: transform .2s ease }.desktop-quote:hover i { transform: translateX(3px) }
    .header :is(a, button):focus-visible,
    .hero :is(a, button, input, select):focus-visible {
      outline: 3px solid #e8a33c;
      outline-offset: 3px;
    }

    /* Hero */
    .hero {
      position: relative;
      min-height: 760px;
      background: var(--primary);
      padding-top: 92px;
      overflow: hidden;
      color: #fff;
    }

    .hero:before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(6, 26, 43, .96) 0%, rgba(6, 26, 43, .78) 44%, rgba(6, 26, 43, .2) 100%),
        url('../assets/images/fleet/camion-lateral-izquierdo.jpeg') center/cover no-repeat;
      transform: scale(1.02);
      animation: heroZoom 13s ease-in-out infinite alternate;
    }

    @keyframes heroZoom {
      to {
        transform: scale(1.08)
      }
    }

    .hero:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 230px;
      background: linear-gradient(0deg, var(--section-bridge) 0%, rgba(184, 198, 209, .88) 40%, transparent 100%)
    }

    #empresa {
      isolation: isolate;
      background: linear-gradient(180deg, var(--section-bridge) 0, #e7edf2 150px, var(--white) 330px)
    }

    #empresa:before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .32;
      background:
        radial-gradient(circle at 8% 20%, rgba(44, 70, 97, .10) 0 2px, transparent 2.5px),
        radial-gradient(circle at 92% 25%, rgba(110, 135, 170, .11) 0 2px, transparent 2.5px),
        linear-gradient(90deg, rgba(44, 70, 97, .035) 1px, transparent 1px),
        linear-gradient(rgba(44, 70, 97, .035) 1px, transparent 1px),
        radial-gradient(circle at 6% 42%, rgba(44, 70, 97, .07), transparent 23%),
        radial-gradient(circle at 94% 65%, rgba(110, 135, 170, .08), transparent 25%);
      background-size: 82px 82px, 108px 108px, 46px 46px, 46px 46px, auto, auto
    }

    #empresa > .container {
      position: relative;
      z-index: 1
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      align-items: center;
      gap: 46px;
      min-height: 560px;      
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      border-radius: 999px;
      background: rgba(44, 70, 97, .12);
      border: 1px solid rgba(255, 255, 255, .24);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 20px;
      animation: fadeUp .8s ease .05s both
    }

    .hero-kicker i {
      color: var(--accent-2)
    }

    .hero h1 {
      font-size: clamp(43px, 6.8vw, 84px);
      line-height: .95;
      font-weight: 900;
      letter-spacing: -.07em;
      margin-bottom: 20px;
      animation: fadeUp .8s ease .18s both
    }

    .hero h1 span {
      color: var(--accent-2);
      position: relative;
      display: inline-block
    }

    .hero p {
      font-size: 19px;
      color: rgba(255, 255, 255, .82);
      max-width: 670px;
      margin-bottom: 30px;
      animation: fadeUp .8s ease .32s both
    }

    .hero-actions {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      animation: fadeUp .8s ease .46s both
    }

    .hero-bullets {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 34px;
      max-width: 705px;
      animation: fadeUp .8s ease .58s both
    }

    .hero-bullet {
      background: rgba(255, 255, 255, .09);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 16px;
      padding: 16px;
      backdrop-filter: blur(12px)
    }

    .hero-bullet i {
      color: var(--gold);
      font-size: 20px;
      margin-bottom: 8px
    }

    .hero-bullet strong {
      display: block;
      font-size: 14px;
      line-height: 1.25
    }

    .hero-visual {
      position: relative;
      min-height: 490px;
      animation: fadeInRight 1s ease .4s both
    }

    .cargo-card {
      position: absolute;
      right: 0;
      top: 56px;
      width: min(470px, 100%);
      border-radius: 30px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
      transform: rotate(-2deg);
    }

    .cargo-card img {
      height: 315px;
      width: 100%;
      object-fit: cover
    }

    .cargo-card-content {
      padding: 24px;
      color: var(--primary)
    }

    .cargo-card-content h3 {
      font-size: 28px;
      line-height: 1.05;
      letter-spacing: -.04em;
      margin-bottom: 10px
    }

    .cargo-card-content p {
      color: var(--muted);
      font-size: 14px;
      margin: 0
    }

    .availability-badge {
      position: absolute;
      top: 40px;
      left: 0px;
      background: var(--accent);
      color: #fff;
      border-radius: 18px;
      padding: 18px 20px;
      box-shadow: 0 20px 40px rgba(44, 70, 97, .32);
      animation: pulseBadge 1.8s infinite;
      z-index: 99;
    }

    .availability-badge b {
      font-size: 34px;
      line-height: 1
    }

    .availability-badge span {
      display: block;
      font-weight: 900;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .06em
    }

    @keyframes pulseBadge {
      50% {
        transform: scale(1.06)
      }
    }

    .floating-info {
      position: absolute;
      left: 400px;
      bottom: 250px;
      width: 250px;
      background: #fff;
      color: var(--primary);
      padding: 20px;
      border-radius: 22px;
      box-shadow: var(--shadow);
      animation: floatY 3s ease-in-out infinite
    }

    .floating-info h4 {
      font-size: 17px;
      line-height: 1.2
    }

    .floating-info p {
      font-size: 13px;
      color: var(--muted);
      margin: 8px 0 0
    }

    @keyframes floatY {
      50% {
        transform: translateY(-14px)
      }
    }

    .road-line {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 86px;
      z-index: 2;
      overflow: hidden;
      background: linear-gradient(180deg, transparent 0%, rgba(6, 26, 43, .25) 100%)
    }

    .road-line:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 18px;
      height: 4px;
      background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 40px, transparent 40px 74px);
      animation: roadMove 1.1s linear infinite
    }

    .animated-truck {
      position: absolute;
      bottom: 8px;
      left: -240px;
      width: 220px;
      height: 62px;
      background: var(--accent);
      border-radius: 12px 18px 8px 8px;
      animation: truckRun 12s linear infinite;
      box-shadow: 0 12px 35px rgba(0, 0, 0, .28)
    }

    .animated-truck:before {
      content: "";
      position: absolute;
      right: -54px;
      bottom: 0;
      width: 70px;
      height: 48px;
      background: #fff;
      border-radius: 8px 22px 7px 4px;
      clip-path: polygon(0 0, 70% 0, 100% 45%, 100% 100%, 0 100%)
    }

    .animated-truck:after {
      content: "";
      position: absolute;
      left: 28px;
      bottom: -12px;
      width: 168px;
      height: 24px;
      background: radial-gradient(circle at 16px 12px, #0c1823 0 10px, transparent 11px), radial-gradient(circle at 135px 12px, #0c1823 0 10px, transparent 11px)
    }

    @keyframes truckRun {
      to {
        left: calc(100% + 280px)
      }
    }

    @keyframes roadMove {
      to {
        background-position: -74px 0
      }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translateX(45px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* Cards / About */
    .about-grid {
      grid-template-columns: .95fr 1.05fr;
      align-items: center
    }

    .image-stack {
      position: relative;
      min-height: 570px
    }

    .image-main {
      position: absolute;
      left: 0;
      top: 25px;
      width: 77%;
      height: 430px;
      object-fit: cover;
      border-radius: 28px;
      box-shadow: var(--shadow)
    }

    .image-small {
      position: absolute;
      right: 0;
      bottom: 20px;
      width: 48%;
      height: 260px;
      object-fit: cover;
      border: 10px solid #fff;
      border-radius: 24px;
      box-shadow: var(--shadow)
    }

    .experience {
      position: absolute;
      right: 20px;
      top: 0;
      background: var(--accent);
      color: #fff;
      border-radius: 23px;
      padding: 21px 24px;
      box-shadow: 0 18px 45px rgba(44, 70, 97, .28)
    }

    .experience b {
      font-size: 44px;
      line-height: 1
    }

    .experience span {
      display: block;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 13px
    }

    .feature-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin: 30px 0
    }

    .feature-tile {
      display: flex;
      gap: 15px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 20px;
      box-shadow: var(--shadow-soft);
      transition: .3s
    }

    .feature-tile:hover {
      border-color: rgba(44, 70, 97, .38);
      box-shadow: 0 18px 42px rgba(5, 23, 42, .12)
    }

    .feature-icon {
      min-width: 51px;
      height: 51px;
      border-radius: 15px;
      background: rgba(44, 70, 97, .1);
      display: grid;
      place-items: center;
      color: var(--accent);
      font-size: 21px
    }

    .feature-tile h3 {
      font-size: 18px;
      color: var(--primary);
      line-height: 1.2;
      margin-bottom: 5px
    }

    .feature-tile p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.5
    }

    .checklist {
      display: grid;
      gap: 11px;
      margin-bottom: 30px;
      color: #344155;
      font-weight: 700
    }

    .checklist li {
      display: flex;
      gap: 10px;
      align-items: flex-start
    }

    .checklist i {
      color: var(--accent);
      margin-top: 5px
    }

    /* Services */
    .services {
      background: var(--light)
    }

    .services:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 10%, rgba(44, 70, 97, .09), transparent 32%), radial-gradient(circle at 7% 60%, rgba(6, 26, 43, .07), transparent 34%)
    }

    .service-grid {
      grid-template-columns: repeat(3, 1fr);
      margin-top: 42px;
      position: relative;
      z-index: 1
    }

    .service-card {
      background: #fff;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      position: relative;
      transition: .35s ease;
      border: 1px solid rgba(223, 231, 239, .7)
    }

    .service-card:hover {
      border-color: rgba(44, 70, 97, .34);
      box-shadow: 0 22px 52px rgba(5, 23, 42, .15)
    }

    .service-image {
      height: 240px;
      overflow: hidden
    }

    .service-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: .5s
    }

    .service-card:hover .service-image img {
      transform: scale(1.045)
    }

    .service-body {
      padding: 32px 28px 30px;
      position: relative
    }

    .service-icon-big {
      position: absolute;
      top: -34px;
      right: 26px;
      width: 70px;
      height: 70px;
      border-radius: 19px;
      background: var(--accent);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 27px;
      box-shadow: 0 16px 35px rgba(44, 70, 97, .27)
    }

    .service-body h3 {
      font-size: 23px;
      color: var(--primary);
      line-height: 1.15;
      margin-bottom: 12px
    }

    .service-body p {
      color: var(--muted);
      font-size: 15px
    }

    .service-link {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      margin-top: 20px;
      font-weight: 900;
      color: var(--accent)
    }

    .marquee {
      background: var(--accent);
      color: #fff;
      padding: 19px 0;
      overflow: hidden;
      white-space: nowrap
    }

    .marquee-track {
      display: flex;
      gap: 52px;
      width: max-content;
      animation: marquee 24s linear infinite;
      font-size: 22px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .03em
    }

    .marquee span {
      display: inline-flex;
      align-items: center;
      gap: 16px
    }

    .marquee i {
      color: #fff;
      background: rgba(255, 255, 255, .18);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: grid;
      place-items: center
    }

    @keyframes marquee {
      to {
        transform: translateX(-50%)
      }
    }

    /* Projects dark */
    .fleet {
      color: #fff;
      padding-top: 110px
    }

    .fleet:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 42%;
      background: #4a5566
    }

    .fleet-head {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      align-items: end;
      position: relative;
      z-index: 1;
      margin-bottom: 42px
    }

    .fleet-head .section-copy {
      color: rgba(255, 255, 255, .72)
    }

    .fleet .section-title span {
      color: #e8f0f7
    }

    .fleet-carousel {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      position: relative;
      z-index: 1
    }

    .fleet-card {
      background: #fff;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
      transition: .3s
    }

    .fleet-card:hover {
      box-shadow: 0 25px 58px rgba(0, 0, 0, .34)
    }

    .fleet-card img {
      height: 245px;
      width: 100%;
      object-fit: cover;
      transition: transform .62s cubic-bezier(.22,1,.36,1), filter .3s ease
    }

    .fleet-content {
      padding: 23px;
      color: var(--primary)
    }

    .fleet-content small {
      color: var(--accent);
      font-weight: 900;
      text-transform: uppercase
    }

    .fleet-content h3 {
      font-size: 20px;
      line-height: 1.15;
      margin-top: 5px
    }

    .stats-bar {
      position: relative;
      z-index: 3;
      margin-top: 64px;
      background: #fff;
      color: var(--primary);
      border-radius: 24px;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      overflow: hidden
    }

    .stat {
      padding: 31px 25px;
      text-align: center;
      border-right: 1px solid var(--border)
    }

    .stat:last-child {
      border-right: 0
    }

    .stat i {
      font-size: 28px;
      color: var(--accent);
      margin-bottom: 10px
    }

    .stat strong {
      display: block;
      font-size: 38px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.04em
    }

    .stat span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800
    }

    /* Capabilities */
    .capability {
      position: relative;
      isolation: isolate;
      background:
        radial-gradient(circle at 86% 12%, rgba(156, 175, 202, .16), transparent 24%),
        linear-gradient(135deg, var(--primary) 0%, #26496f 56%, var(--primary-3) 100%);
      color: #fff;
      overflow: visible
    }

    .capability:before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .35;
      background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
      background-size: 58px 58px
    }

    .capability-decor {
      position: absolute;
      right: 4%;
      top: 28px;
      display: flex;
      align-items: center;
      gap: 34px;
      z-index: 0;
      color: rgba(255, 255, 255, .11);
      font-size: 64px;
      pointer-events: none
    }

    .cap-grid {
      position: relative;
      z-index: 1
    }

    .cap-grid {
      grid-template-columns: 1fr 1fr;
      align-items: center
    }

    .capability .section-copy {
      color: rgba(255, 255, 255, .74)
    }

    .capability .section-title span {
      color: #d8e5f2
    }

    .capability .eyebrow {
      color: #d8e5f2
    }

    .tab-panel {
      background: #fff;
      border-radius: 28px;
      padding: 28px;
      box-shadow: var(--shadow);
      color: var(--text)
    }

    .tabs {
      display: flex;
      background: var(--light);
      border-radius: 18px;
      padding: 7px;
      margin-bottom: 22px
    }

    .tab-btn {
      flex: 1;
      border: 0;
      background: transparent;
      padding: 13px 12px;
      border-radius: 14px;
      font-weight: 900;
      cursor: pointer;
      color: var(--primary);
      transition: .25s
    }

    .tab-btn.active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 10px 25px rgba(44, 70, 97, .22)
    }

    .tab-content {
      display: none;
      grid-template-columns: 1fr .85fr;
      gap: 22px;
      align-items: center
    }

    .tab-content.active {
      display: grid;
      animation: fadeUp .35s ease both
    }

    .tab-content h3 {
      color: var(--primary);
      font-size: 28px;
      line-height: 1.1;
      margin-bottom: 12px
    }

    .tab-content p {
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 16px
    }

    .tab-content img {
      height: 260px;
      width: 100%;
      object-fit: cover;
      border-radius: 18px
    }

    .cap-list {
      margin-top: 30px;
      display: grid;
      gap: 16px
    }

    .cap-list li {
      display: flex;
      gap: 15px;
      align-items: flex-start;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      padding: 18px;
      border-radius: 18px
    }

    .cap-list i {
      color: var(--gold);
      font-size: 22px;
      margin-top: 4px
    }

    .cap-list h3 {
      font-size: 18px;
      line-height: 1.2
    }

    .cap-list p {
      color: rgba(255, 255, 255, .7);
      font-size: 14px;
      line-height: 1.5;
      margin-top: 4px
    }

    /* Process */
    .process-grid {
      grid-template-columns: repeat(4, 1fr);
      margin-top: 45px;
      position: relative
    }

    .process-grid:before {
      content: "";
      position: absolute;
      left: 10%;
      right: 10%;
      top: 48px;
      height: 3px;
      background: linear-gradient(90deg, transparent, rgba(44, 70, 97, .35), transparent)
    }

    .process-grid:after {
      content: "";
      position: absolute;
      left: 10%;
      right: 10%;
      top: 48px;
      height: 3px;
      background: linear-gradient(90deg, #e8a33c, #6e87aa);
      transform: scaleX(var(--route-progress, 0));
      transform-origin: left center;
      transition: transform .55s cubic-bezier(.22,1,.36,1);
    }

    .process-card {
      text-align: center;
      position: relative;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 31px 21px;
      box-shadow: var(--shadow-soft);
      transition: .3s
    }

    .process-card:hover {
      border-color: rgba(44, 70, 97, .38);
      box-shadow: 0 18px 42px rgba(5, 23, 42, .12)
    }

    .process-icon {
      width: 95px;
      height: 95px;
      margin: 0 auto 20px;
      border-radius: 28px;
      background: var(--primary);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 32px;
      position: relative
    }

    .process-icon span {
      position: absolute;
      right: -8px;
      top: -8px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      display: grid;
      place-items: center
    }

    .process-card h3 {
      font-size: 19px;
      color: var(--primary);
      margin-bottom: 9px
    }

    .process-card p {
      font-size: 14px;
      color: var(--muted)
    }

    /* CTA */
    .cta {
      position: relative;
      background: linear-gradient(135deg, #294b76 0%, #1e3a52 100%);
      color: #fff;
      padding: 0;
      overflow: hidden;
      min-height: 500px
    }

    .cta-background {
      position: absolute;
      inset: 0;
      overflow: hidden
    }

    .cta-blob {
      position: absolute;
      border-radius: 50%;
      opacity: 0.08;
      filter: blur(40px)
    }

    .cta-blob-1 {
      width: 400px;
      height: 400px;
      background: #ffffff;
      top: -100px;
      right: -100px;
      animation: float 8s ease-in-out infinite
    }

    .cta-blob-2 {
      width: 300px;
      height: 300px;
      background: #2c4661;
      bottom: -50px;
      left: 10%;
      animation: float 10s ease-in-out infinite 1s
    }

    .cta-wrap {
      display: grid;
      grid-template-columns: 1fr .85fr;
      min-height: 480px;
      align-items: center;
      position: relative;
      z-index: 1;
      gap: 40px
    }

    .cta-content {
      padding: 80px 0;
      animation: slideInLeft 0.8s ease-out
    }

    .cta-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(10px);
      padding: 8px 16px;
      border-radius: 999px;
      margin-bottom: 24px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid rgba(255, 255, 255, 0.2);
      animation: slideInUp 0.6s ease-out 0.1s both
    }

    .cta-badge i {
      color: var(--accent-2);
      animation: pulse 2s ease-in-out infinite
    }

    .cta h2 {
      font-size: clamp(38px, 5vw, 62px);
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: -.06em;
      margin-bottom: 20px;
      animation: slideInUp 0.7s ease-out 0.2s both
    }

    .cta h2 span {
      background: linear-gradient(135deg, #385e8c 0%, #2c4661 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cta p {
      color: rgba(255, 255, 255, 0.82);
      max-width: 580px;
      margin-bottom: 32px;
      font-size: 16px;
      line-height: 1.7;
      animation: slideInUp 0.8s ease-out 0.3s both
    }

    .cta-actions {
      display: flex;
      gap: 16px;
      margin-bottom: 32px;
      flex-wrap: wrap;
      animation: slideInUp 0.9s ease-out 0.4s both
    }

    .btn-primary {
      position: relative;
      background: linear-gradient(135deg, #385e8c 0%, #2c4661 100%);
      color: #fff !important;
      box-shadow: 0 15px 40px rgba(56, 94, 140, 0.3) !important;
      overflow: hidden
    }

    .btn-primary:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 25px 50px rgba(56, 94, 140, 0.4) !important;
      background: linear-gradient(135deg, #2c4661 0%, #1e3a52 100%) !important
    }

    .btn-arrow {
      transition: transform 0.3s ease;
      display: inline-block
    }

    .btn-primary:hover .btn-arrow {
      transform: translateX(4px)
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.15) !important;
      border: 2px solid rgba(255, 255, 255, 0.3) !important;
      color: #fff !important;
      backdrop-filter: blur(10px);
      box-shadow: none !important
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.25) !important;
      border-color: rgba(255, 255, 255, 0.5) !important;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important
    }

    .cta-trust {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      animation: slideInUp 1s ease-out 0.5s both
    }

    .cta-trust strong {
      color: var(--accent-2);
      font-weight: 700
    }

    .cta-image {
      height: 100%;
      position: relative;
      animation: slideInRight 0.8s ease-out 0.2s both
    }

    .cta-image-frame {
      position: relative;
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center
    }

    .cta-image img {
      width: 100%;
      height: auto;
      max-width: 650px;
      filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.4));
      animation: floatY 4s ease-in-out infinite, scaleIn 0.8s ease-out 0.3s both;
      transition: filter 0.3s ease
    }

    .cta:hover .cta-image img {
      filter: drop-shadow(0 50px 100px rgba(0, 0, 0, 0.5))
    }

    /* CTA: visual editorial inspirado en la referencia */
    .cta {
      margin: 76px auto 118px;
      width: min(calc(100% - 38px), var(--container));
      min-height: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .cta-background { display: none }
    .cta .shape-map { display: none }
    .cta-blob { display: none }
    .cta-blob-1 { width: 340px; height: 340px; right: -80px; top: -155px; background: #fff }
    .cta-blob-2 { width: 260px; height: 260px; bottom: -110px; left: 38%; background: #b8c6d1 }
    .cta-wrap { min-height: 460px; grid-template-columns: 1.06fr .94fr; gap: 18px }
    .cta-content { padding: 54px 0 62px 48px }
    .cta-badge { padding: 8px 13px; margin-bottom: 18px; border-color: #d7e1ea; background: #f3f6f9; color: #385e8c; font-size: 13px; letter-spacing: .06em; font-weight: 800; text-transform: uppercase }
    .cta-badge i { color: #294b76 }
    .cta h2 { font-family: "Sora", "Manrope", sans-serif; max-width: 650px; margin-bottom: 18px; color: #173450; font-size: clamp(35px, 4.3vw, 58px); line-height: 1.12; letter-spacing: -.07em }
    .cta h2 span { background: none; -webkit-text-fill-color: #385e8c; color: #385e8c }
    .cta p { max-width: 510px; margin-bottom: 27px; color: #64748b; font-size: 15px; line-height: 1.75 }
    .cta-actions { gap: 11px; margin-bottom: 27px }
    .cta .btn { min-height: 50px; padding-inline: 20px; font-size: 14px }
    .btn-primary { background: #fff; color: var(--primary) !important; box-shadow: 0 14px 25px rgba(23, 52, 80, .24) !important }
    .btn-primary:hover { background: #f6f8fb !important; color: var(--primary-3) !important; box-shadow: 0 18px 34px rgba(23,52,80,.34) !important }
    .btn-secondary { background: #fff !important; border: 1px solid #b8c6d1 !important; color: #294b76 !important }
    .btn-secondary:hover { background: #f3f6f9 !important; border-color: #6e87aa !important }
    .cta-trust { display: flex; align-items: center; gap: 12px; color: #64748b; font-size: 13px }
    .cta-trust strong { color: #294b76; font-size: 15px }
    .cta-avatars { display: flex; padding-left: 5px }
    .cta-avatars span { display: grid; place-items: center; width: 29px; height: 29px; margin-left: -5px; border: 2px solid #385e8c; border-radius: 50%; background: #f6f8fb; color: #294b76; font-size: 13px; font-weight: 900 }
    .cta-avatars span:nth-child(2) { background: #dfe7ef }.cta-avatars span:nth-child(3) { background: #b8c6d1 }
    .cta-image { display: flex; align-items: center; padding-right: 38px }
    .cta-image-frame { width: 100%; height: 330px; overflow: visible; border: 7px solid #fff; border-radius: 25px; background: #dfe7ef; box-shadow: 0 22px 45px rgba(23,52,80,.18) }
    .cta-image-frame:after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(135deg, rgba(23,52,80,.04), rgba(255,255,255,.16)); pointer-events: none }
    .cta-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; border-radius: 18px; filter: none; animation: none }
    .cta:hover .cta-image img { filter: none }
    .cta-route-card { position: absolute; z-index: 2; bottom: -26px; left: -35px; display: flex; align-items: center; gap: 10px; width: 230px; padding: 12px; border: 1px solid rgba(41,75,118,.12); border-radius: 15px; background: rgba(255,255,255,.96); color: #173450; box-shadow: 0 15px 30px rgba(23,52,80,.16) }
    .route-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #dfe7ef; color: #294b76; font-size: 14px }.cta-route-card div { display: grid; line-height: 1.25 }.cta-route-card small { color: #64748b; font-size: 13px; font-weight: 700 }.cta-route-card strong { margin-top: 3px; font-size: 13px }
    .cta-status { position: absolute; z-index: 2; top: 15px; right: -17px; padding: 7px 10px; border-radius: 999px; background: rgba(23,52,80,.87); color: #fff; font-size: 13px; font-weight: 800; backdrop-filter: blur(8px) }.cta-status i { color: #b8c6d1; margin-right: 4px }
    .promo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: calc(100% - 76px); margin: 0 auto; transform: translateY(42%); overflow: visible; border: 0; border-radius: 0; box-shadow: none }
    .promo-strip-card { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 15px; align-items: center; min-height: 116px; padding: 23px 19px; overflow: hidden; border: 1px solid #b8c6d1; border-radius: 17px; background: #fff; color: #173450; box-shadow: 0 12px 24px rgba(23,52,80,.08); transition: transform .25s ease, box-shadow .25s ease }
    .promo-strip-card:before { content: ""; position: absolute; top: 0; left: 20px; width: 45px; height: 3px; border-radius: 0 0 5px 5px; background: #385e8c }
    .promo-strip-card:hover { transform: translateY(-6px); box-shadow: 0 19px 34px rgba(23,52,80,.17) }
    .promo-strip-card:nth-child(2) { background: #f6f8fb; color: #173450 }.promo-strip-card:nth-child(2):before { background: #6e87aa }.promo-strip-card:nth-child(3):before { background: #b8c6d1 }
    .promo-strip-card > i { display: grid; place-items: center; width: 46px; height: 46px; grid-row: 1 / span 2; border-radius: 50%; background: #edf2f7; color: #294b76; font-size: 18px }
    .promo-strip-card > div { padding-top: 5px }.promo-strip-card h3 { font-family: "Sora", sans-serif; font-size: 14px; line-height: 1.2; letter-spacing: -.03em }.promo-strip-card p { margin-top: 6px; color: #64748b; font-size: 13px; line-height: 1.5 }
    .service-number { position: absolute; top: 15px; right: 16px; color: #b8c6d1; font-family: "Sora", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .08em }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-30px)
      }
      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(30px)
      }
      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(20px)
      }
      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes scaleIn {
      from {
        transform: scale(0.95);
        opacity: 0
      }
      to {
        transform: scale(1);
        opacity: 1
      }
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0px)
      }
      50% {
        transform: translateY(20px)
      }
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 1
      }
      50% {
        opacity: 0.6
      }
    }

    .promo-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      position: relative;
      z-index: 2;
      transform: translateY(50%);
      box-shadow: var(--shadow);
      border-radius: 20px;
      overflow: hidden
    }

    .promo-strip-card {
      background: #fff;
      color: var(--primary);
      padding: 27px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      border-right: 1px solid var(--border)
    }

    .promo-strip-card:nth-child(2) {
      background: var(--accent);
      color: #fff
    }

    .promo-strip-card i {
      font-size: 31px;
      color: var(--accent)
    }

    .promo-strip-card:nth-child(2) i {
      color: #fff
    }

    .promo-strip-card h3 {
      font-size: 18px;
      line-height: 1.2
    }

    .promo-strip-card p {
      font-size: 13px;
      color: var(--muted);
      margin-top: 4px
    }

    .promo-strip-card:nth-child(2) p {
      color: rgba(255, 255, 255, .78)
    }

    /* Team / testimonials */
    .team {
      padding-top: 155px;
      background: var(--light)
    }

    .team-grid {
      grid-template-columns: repeat(4, 1fr);
      margin-top: 42px
    }

    .team-card {
      background: #fff;
      border-radius: 23px;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      transition: .3s
    }

    .team-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow)
    }

    .team-img {
      height: 285px;
      position: relative;
      overflow: hidden
    }

    .team-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: .5s
    }

    .team-card:hover .team-img img {
      transform: scale(1.06)
    }

    .team-social {
      position: absolute;
      right: 14px;
      bottom: 14px;
      display: flex;
      gap: 8px;
      transform: translateY(20px);
      opacity: 0;
      transition: .3s
    }

    .team-card:hover .team-social {
      transform: none;
      opacity: 1
    }

    .team-social a {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      display: grid;
      place-items: center
    }

    .team-body {
      padding: 20px
    }

    .team-body small {
      color: var(--accent);
      font-weight: 900;
      text-transform: uppercase
    }

    .team-body h3 {
      font-size: 20px;
      color: var(--primary);
      line-height: 1.2
    }

    .quote {
      background: linear-gradient(90deg, rgba(6, 26, 43, .94), rgba(6, 26, 43, .82)), url('../assets/images/stock/camion-contenedor.jpg') center/cover scroll;
      color: #fff
    }

    .quote-grid {
      grid-template-columns: .9fr 1.1fr;
      align-items: center
    }

    .quote .section-copy {
      color: rgba(255, 255, 255, .74)
    }

    .quote-form {
      background: #fff;
      color: var(--text);
      border-radius: 28px;
      padding: 34px;
      box-shadow: 0 28px 70px rgba(0, 0, 0, .32)
    }

    .quote-form h3 {
      font-size: 30px;
      color: var(--primary);
      line-height: 1.1;
      margin-bottom: 22px
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .field.full {
      grid-column: 1/-1
    }

    .field label {
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--muted);
      letter-spacing: .05em
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 15px;
      font: inherit;
      outline: 0;
      background: #f9fbfd;
      transition: .2s
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(44, 70, 97, .08);
      background: #fff
    }

    .field textarea {
      resize: vertical;
      min-height: 112px
    }

    .form-message {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 12px;
      display: none;
      font-weight: 800
    }

    .form-message.ok {
      display: block;
      background: rgba(16, 185, 129, .12);
      color: #047857
    }

    .form-message.err {
      display: block;
      background: rgba(44, 70, 97, .1);
      color: #b8000b
    }

    .hp-field {
      position: absolute !important;
      left: -10000px !important;
      top: auto !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important
    }

    .field.has-error input,
    .field.has-error select,
    .field.has-error textarea {
      border-color: #d13843;
      background: #fff4f4;
      box-shadow: 0 0 0 4px rgba(209, 56, 67, .12)
    }

    .field-error {
      font-size: 12.5px;
      font-weight: 700;
      color: #b8000b;
      margin-top: 2px
    }

    .quote-form button[type="submit"].is-loading {
      opacity: .85;
      pointer-events: none
    }

    .form-success {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 18px 8px 4px;
      gap: 14px;
      animation: formSuccessIn .4s ease
    }

    .form-success__icon {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(16, 185, 129, .14);
      color: #059669;
      font-size: 38px;
      box-shadow: 0 0 0 10px rgba(16, 185, 129, .08)
    }

    .form-success h4 {
      font-size: 24px;
      color: var(--primary);
      margin: 0
    }

    .form-success p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
      max-width: 420px;
      margin: 0
    }

    .form-success__reset {
      margin-top: 6px
    }

    .btn.ghost {
      background: transparent;
      color: var(--primary);
      border: 1px solid var(--border);
      box-shadow: none
    }

    .btn.ghost:hover {
      background: #f1f5f9
    }

    @keyframes formSuccessIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .testimonials {
      background: #fff
    }

    .testimonial-wrap {
      margin-top: 42px;
      position: relative;
      overflow: hidden
    }

    .testimonial-track {
      display: flex;
      transition: transform .45s ease
    }

    .testimonial-card {
      min-width: calc(50% - 14px);
      margin-right: 28px;
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 30px;
      background: #fff;
      box-shadow: var(--shadow-soft)
    }

    .stars {
      color: #ffb703;
      margin-bottom: 14px
    }

    .testimonial-card p {
      font-size: 17px;
      color: #334155
    }

    .client {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 24px
    }

    .client img {
      width: 57px;
      height: 57px;
      border-radius: 50%;
      object-fit: cover
    }

    .client h4 {
      color: var(--primary);
      line-height: 1.1
    }

    .client span {
      font-size: 13px;
      color: var(--muted);
      font-weight: 800
    }

    .testimonial-controls {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 24px
    }

    .round-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--primary);
      cursor: pointer;
      transition: .25s
    }

    .round-btn:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff
    }

    .clients {
      background: var(--light);
      padding: 38px 0
    }

    .client-logos {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 18px
    }

    .logo-box {
      height: 88px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      color: #8a98aa;
      font-weight: 900;
      letter-spacing: .03em;
      filter: grayscale(1);
      transition: .25s
    }

    .logo-box:hover {
      filter: none;
      color: var(--accent);
      transform: translateY(-4px);
      box-shadow: var(--shadow-soft)
    }

    .blog {
      background: #fff
    }

    .blog-grid {
      grid-template-columns: repeat(3, 1fr);
      margin-top: 42px
    }

    .blog-card {
      border-radius: 24px;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
      transition: .3s
    }

    .blog-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow)
    }

    .blog-img {
      height: 235px;
      position: relative;
      overflow: hidden
    }

    .blog-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: .5s
    }

    .blog-card:hover .blog-img img {
      transform: scale(1.07)
    }

    .date-badge {
      position: absolute;
      left: 18px;
      bottom: 18px;
      background: var(--accent);
      color: #fff;
      border-radius: 14px;
      padding: 9px 13px;
      text-align: center;
      font-weight: 900;
      line-height: 1
    }

    .date-badge span {
      display: block;
      font-size: 24px
    }

    .blog-body {
      padding: 25px
    }

    .blog-meta {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      font-size: 13px;
      color: var(--muted);
      font-weight: 800;
      margin-bottom: 12px
    }

    .blog-meta i {
      color: var(--accent);
      margin-right: 6px
    }

    .blog-body h3 {
      font-size: 22px;
      line-height: 1.15;
      color: var(--primary);
      margin-bottom: 11px
    }

    .blog-body p {
      color: var(--muted);
      font-size: 15px
    }

    /* Footer */
    .footer {
      background: #03111d;
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .footer-top {
      padding: 88px 0 70px;
      position: relative
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.15fr .8fr 1fr 1fr;
      gap: 40px
    }

    .footer h3 {
      font-size: 21px;
      margin-bottom: 20px
    }

    .footer p,
    .footer a,
    .footer li {
      color: rgba(255, 255, 255, .72);
      font-size: 15px
    }

    .footer a:hover {
      color: #fff
    }

    .footer-links {
      display: grid;
      gap: 10px
    }

    .footer-contact {
      display: grid;
      gap: 14px
    }

    .footer-contact i {
      color: var(--accent);
      margin-right: 10px
    }

    .subscribe {
      display: flex;
      margin-top: 14px;
      border-radius: 999px;
      overflow: hidden;
      background: #fff;
      padding: 5px
    }

    .subscribe input {
      flex: 1;
      border: 0;
      padding: 0 14px;
      outline: 0;
      font: inherit
    }

    .subscribe button {
      width: 48px;
      height: 48px;
      border: 0;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      cursor: pointer
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, .1);
      padding: 22px 0;
      text-align: center;
      color: rgba(255, 255, 255, .62);
      font-size: 14px
    }

    .footer-road {
      height: 84px;
      position: relative;
      background: #061a2b;
      overflow: hidden
    }

    .footer-road:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 22px;
      height: 3px;
      background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .65) 0 45px, transparent 45px 85px);
      animation: roadMove 1.4s linear infinite
    }

    .footer-truck {
      position: absolute;
      top: 33px;
      width: 120px;
      height: 34px;
      background: var(--accent);
      border-radius: 7px;
      animation: truckRun 11s linear infinite
    }

    .footer-truck.t2 {
      animation-duration: 15s;
      animation-delay: -5s;
      background: #fff
    }

    .footer-truck.t3 {
      animation-duration: 20s;
      animation-delay: -10s;
      background: var(--gold)
    }

    .scroll-top {
      position: fixed;
      right: 22px;
      bottom: 22px;
      width: 49px;
      height: 49px;
      border-radius: 50%;
      border: 0;
      background: var(--accent);
      color: #fff;
      display: grid;
      place-items: center;
      box-shadow: 0 14px 35px rgba(44, 70, 97, .33);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: .25s;
      z-index: 900
    }

    .scroll-top.show {
      opacity: 1;
      visibility: visible
    }

    .scroll-top:hover {
      transform: translateY(-4px)
    }

    .reveal {
      opacity: 0;
      transform: translateY(34px);
      transition: opacity .75s ease, transform .75s ease
    }

    .reveal.show {
      opacity: 1;
      transform: none
    }

    .delay-1 {
      transition-delay: .1s
    }

    .delay-2 {
      transition-delay: .2s
    }

    .delay-3 {
      transition-delay: .3s
    }

    .delay-4 {
      transition-delay: .4s
    }

    /* Modal search */
    .search-modal {
      position: fixed;
      inset: 0;
      background: rgba(3, 17, 29, .82);
      backdrop-filter: blur(10px);
      z-index: 2000;
      display: none;
      place-items: center;
      padding: 25px
    }

    .search-modal.open {
      display: grid
    }

    .search-box {
      width: min(720px, 100%);
      background: #fff;
      border-radius: 24px;
      padding: 26px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
      animation: fadeUp .3s ease both
    }

    .search-box form {
      display: flex;
      gap: 12px
    }

    .search-box input {
      flex: 1;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px;
      font: inherit
    }

    .close-search {
      position: absolute;
      top: 22px;
      right: 22px;
      color: #fff;
      font-size: 28px;
      cursor: pointer
    }

    @media (max-width:1050px) {

      .menu,
      .desktop-quote {
        display: none
      }

      .hamburger {
        display: grid
      }

      .mobile-panel {
        display: block;
        position: fixed;
        top: 121px;
        right: 18px;
        width: min(360px, calc(100% - 36px));
        background: #fff;
        border-radius: 22px;
        padding: 18px;
        box-shadow: var(--shadow);
        transform: translateY(-18px);
        opacity: 0;
        pointer-events: none;
        transition: .25s;
        z-index: 999
      }

      .mobile-panel.open {
        transform: none;
        opacity: 1;
        pointer-events: auto
      }

      .mobile-panel a {
        display: block;
        padding: 13px 12px;
        border-bottom: 1px solid var(--border);
        font-weight: 800;
        color: var(--primary)
      }

      .hero-grid,
      .about-grid,
      .cap-grid,
      .quote-grid {
        grid-template-columns: 1fr
      }

      .hero {
        padding-top: 92px;
        min-height: auto
      }

      .hero-grid {
        padding: 52px 0 120px
      }

      .hero-visual {
        min-height: 450px
      }

      .service-grid,
      .blog-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .fleet-carousel {
        grid-template-columns: repeat(2, 1fr)
      }

      .process-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .team-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr
      }

      .capability {
        background: var(--primary)
      }

      .stats-bar {
        grid-template-columns: repeat(2, 1fr)
      }

      .client-logos {
        grid-template-columns: repeat(3, 1fr)
      }

      .cta-wrap {
        grid-template-columns: 1fr
      }

      .cta-image {
        display: none
      }

      .promo-strip {
        transform: none;
        margin-top: 0
      }

      .team {
        padding-top: 100px
      }

      .testimonial-card {
        min-width: calc(100% - 0px)
      }
    }

    @media (max-width:720px) {
      .topbar {
        display: none
      }

      .nav {
        height: 76px
      }

      .header {
        top: 0
      }

      .mobile-panel {
        top: 88px
      }

      .hero {
        padding-top: 76px
      }

      .hero-grid {
        padding-top: 58px
      }

      .hero h1 {
        font-size: 47px
      }

      .hero-bullets,
      .feature-list,
      .service-grid,
      .fleet-carousel,
      .stats-bar,
      .process-grid,
      .team-grid,
      .blog-grid,
      .quote-grid,
      .footer-grid,
      .promo-strip,
      .client-logos {
        grid-template-columns: 1fr
      }

      .section {
        padding: 78px 0
      }

      .hero-visual {
        min-height: 360px
      }


      .cargo-card {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        transform: none
      }

      .cargo-card img {
        height: 230px
      }

      .floating-info,
      .availability-badge {
        display: none
      }

      .image-stack {
        min-height: auto;
        display: grid;
        gap: 18px
      }

      .image-main,
      .image-small {
        position: static;
        width: 100%;
        height: 260px;
        border: 0
      }

      .experience {
        position: absolute;
        right: 12px;
        top: 12px
      }

      .fleet-head {
        display: block
      }

      .tab-content {
        grid-template-columns: 1fr
      }

      .form-grid {
        grid-template-columns: 1fr
      }

      .promo-strip-card {
        border-right: 0;
        border-bottom: 1px solid var(--border)
      }

      .section-title {
        font-size: 37px
      }

      .marquee-track {
        font-size: 17px
      }

      .search-box form {
        flex-direction: column
      }

      .road-line {
        bottom: 18px
      }

      .footer-road {
        display: none
      }
    }

    @media (max-width: 980px) {
      .cta { width: min(calc(100% - 38px), var(--container)); }
      .cta-content { padding-left: 34px; }
      .cta-image { display: none; }
      .promo-strip { transform: translateY(38%); }
    }

    @media (max-width: 1050px) {
      .mobile-panel { top: 112px; }
      .nav-actions { margin-left: auto; }
    }

    @media (max-width: 720px) {
      .cta { width: calc(100% - 28px); margin-top: 52px; border-radius: 24px; }
      .cta-content { padding: 48px 24px 50px; }
      .cta h2 { font-size: clamp(32px, 10vw, 43px); }
      .cta-actions { flex-direction: column; }.cta .btn { width: 100%; }
      .promo-strip { width: calc(100% - 32px); transform: translateY(23%); grid-template-columns: 1fr; }
      .promo-strip-card { min-height: 0; padding: 16px; border: 1px solid rgba(223,231,239,.95); border-bottom: 1px solid rgba(223,231,239,.95); }
      .nav { height: 72px; gap: 10px; }.brand-logo { width: 154px; height: 50px }.nav-actions { gap: 7px; padding-left: 0; border-left: 0 }.nav-search { width: 40px; min-height: 40px; justify-content: center; padding: 0 }.nav-search span { display: none }.mobile-panel { top: 78px; }
    }

    /* Variante premium: navegación flotante estilo concierge */
    .header { top: 14px; border: 0; pointer-events: none; }
    .header > * { pointer-events: auto; }
    .topbar { display: none; }
    .navwrap { width: min(var(--container), calc(100% - 38px)); margin: 0 auto; background: #132f49; border: 1px solid rgba(184,198,209,.2); border-radius: 18px; box-shadow: 0 16px 36px rgba(11,32,50,.2); backdrop-filter: none; overflow: hidden; }
    .header.scrolled .navwrap { background: #102b43; box-shadow: 0 18px 42px rgba(11,32,50,.28); }
    .nav { height: 74px; width: 100%; padding: 0 12px 0 9px; gap: 20px; }
    .logo { align-self: stretch; padding: 7px 16px; border-radius: 12px; background: #fff; box-shadow: 0 5px 14px rgba(0,0,0,.12); }
    .brand-logo { width: 168px; height: 54px; object-position: center; }
    .menu { gap: 6px; margin-left: auto; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .075em; color: rgba(255,255,255,.7); }
    .menu a { padding: 9px 12px; border-radius: 8px; }.menu a:after { display: none; }.menu a:hover { color: #fff; background: rgba(255,255,255,.1); }.menu a.active { color: #fff; background: rgba(184,198,209,.17); }
    .nav-actions { gap: 8px; padding-left: 12px; border-left-color: rgba(255,255,255,.16); }
    .nav-search { min-height: 38px; padding: 0 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: transparent; color: rgba(255,255,255,.76); font-family: "Manrope", system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; }.nav-search i { color: #b8c6d1; }.nav-search:hover { background: rgba(255,255,255,.1); color: #fff; }
    .desktop-quote { min-height: 40px; padding: 0 15px; border-radius: 9px; background: #dfe7ef; color: #173450; box-shadow: none; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }.desktop-quote:hover { background: #fff; color: #102b43; box-shadow: 0 8px 16px rgba(0,0,0,.15); }
    .hamburger { border-color: rgba(255,255,255,.2); background: transparent; color: #fff; }.hamburger:hover { border-color: #dfe7ef; background: rgba(255,255,255,.1); }
    .mobile-panel { top: 88px; border: 1px solid rgba(184,198,209,.45); border-radius: 16px; box-shadow: 0 18px 38px rgba(11,32,50,.2); }

    @media (max-width: 1050px) { .navwrap { width: min(var(--container), calc(100% - 38px)); }.mobile-panel { top: 88px; } }
    @media (max-width: 720px) { .header { top: 9px; }.navwrap { width: calc(100% - 24px); border-radius: 14px; }.nav { height: 64px; padding: 0 8px; }.logo { padding: 5px 10px; border-radius: 9px; }.brand-logo { width: 137px; height: 44px; }.nav-search { width: 36px; min-height: 36px; }.hamburger { width: 36px; height: 36px; }.mobile-panel { top: 76px; right: 12px; width: calc(100% - 24px); } }

    /* Encabezado premium a ancho completo con franja de información */
    .header { top: 0; }
    .topbar { display: block; background: #0d2438; border-bottom: 1px solid rgba(184,198,209,.14); color: rgba(255,255,255,.72); }
    .topbar-inner { width: 100%; height: 34px; padding: 0 38px; flex-direction: row-reverse; }.topbar ul { gap: 25px; }.topbar i { color: #b8c6d1; }.topbar .socials { gap: 7px; }
    .navwrap { width: 100%; margin: 0; border: 0; border-radius: 0; background: #132f49; box-shadow: 0 12px 28px rgba(11,32,50,.18); overflow: visible; }
    .nav { width: 100%; max-width: none; padding: 0 38px 0 28px; }
    .nav-search { min-width: 116px; min-height: 44px; padding: 0 15px; justify-content: flex-start; border-radius: 10px; font-size: 13px; }.nav-search i { font-size: 13px; }
    .desktop-quote { min-height: 44px; padding: 0 18px; }
    .mobile-panel { top: 120px; }
    .hero { padding-top: 108px; }

    @media (max-width: 1050px) { .nav { padding-inline: 28px; }.mobile-panel { top: 120px; } }
    @media (max-width: 720px) { .header { top: 0; }.topbar { display: none; }.navwrap { width: 100%; border-radius: 0; }.nav { height: 70px; padding: 0 15px; }.nav-search { min-width: 40px; width: 40px; min-height: 40px; padding: 0; justify-content: center; }.mobile-panel { top: 78px; }.hero { padding-top: 70px; } }

    /* Enlaces centrados respecto a toda la barra, no al espacio restante */
    .nav { position: relative; }
    .menu { position: absolute; left: 50%; margin: 0; transform: translateX(-50%); }
    .nav-actions { margin-left: auto; }
    .nav-search { min-width: 232px; }

    @media (max-width: 1050px) { .menu { position: static; transform: none; }.nav-search { min-width: 180px; } }
    @media (max-width: 720px) { .nav-search { min-width: 40px; } }

    /* Mayor presencia para la navegación central y buscador de acceso rápido */
    .menu { width: min(640px, 44vw); justify-content: space-between; gap: 0; padding: 0 30px; }
    .menu a { padding-inline: 17px; }
    .nav-search { width: 44px; min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
    .nav-search span { display: none; }

    @media (max-width: 1050px) { .menu { width: auto; padding: 0; }.nav-search { width: 44px; min-width: 44px; } }
    @media (max-width: 720px) { .nav-search { width: 40px; min-width: 40px; } }

    /* Variante de logo para fondo azul: palabra principal blanca y detalles grises */
    .logo { padding: 0; background: transparent; box-shadow: none; }
    .brand-logo { width: 154px; height: 48px; object-fit: contain; object-position: left center; }
    @media (max-width: 720px) { .logo { padding: 0; }.brand-logo { width: 128px; height: 42px; } }

    /* Misma retícula horizontal del contenido principal, con barra fluida */
    .header { --header-gutter: max(28px, calc((100vw - 1250px) / 2)); }
    .topbar-inner { padding-inline: var(--header-gutter); }
    .nav { padding-left: var(--header-gutter); padding-right: var(--header-gutter); }
    @media (max-width: 720px) { .header { --header-gutter: 15px; }.nav { padding-left: var(--header-gutter); padding-right: var(--header-gutter); } }

    /* Escala tipográfica proporcional y más contenida en el hero */
    .hero-kicker { padding: 8px 12px; font-size: 13px; margin-bottom: 17px; }
    .hero h1 { font-size: clamp(40px, 5.7vw, 70px); line-height: 1; margin-bottom: 17px; }
    .hero p { max-width: 600px; margin-bottom: 25px; font-size: 16px; line-height: 1.65; }
    .hero .btn { min-height: 48px; padding-inline: 20px; font-size: 13px; }
    .hero-actions { gap: 12px; }
    .hero-bullets { gap: 11px; margin-top: 27px; max-width: 640px; }
    .hero-bullet { padding: 13px; border-radius: 13px; }.hero-bullet i { font-size: 17px; margin-bottom: 6px; }.hero-bullet strong { font-size: 13px; }
    .cargo-card-content { padding: 20px; }.cargo-card-content h3 { font-size: 24px; margin-bottom: 8px; }.cargo-card-content p { font-size: 13px; }
    .availability-badge { padding: 15px 17px; }.availability-badge b { font-size: 29px; }.availability-badge span { font-size: 13px; }
    .floating-info { padding: 17px; }.floating-info h4 { font-size: 15px; }.floating-info p { font-size: 13px; }
    @media (max-width: 720px) { .hero h1 { font-size: clamp(37px, 11vw, 48px); }.hero p { font-size: 15px; } }

    /* Ajuste de densidad para notebooks y pantallas intermedias */
    @media (min-width: 1051px) and (max-width: 1440px) {
      .hero-grid { gap: 30px;}
      .hero-kicker { font-size: 13px; padding: 7px 11px; margin-bottom: 14px; }
      .hero h1 { font-size: clamp(38px, 4.6vw, 58px); margin-bottom: 14px; }
      .hero p { max-width: 530px; margin-bottom: 21px; font-size: 15px; }
      .hero .btn { min-height: 44px; padding-inline: 17px; font-size: 13px; }
      .hero-bullets { max-width: 575px; gap: 9px; margin-top: 22px; }
      .hero-bullet { padding: 11px; }.hero-bullet i { font-size: 15px; }.hero-bullet strong { font-size: 13px; }
      .hero-visual { min-height: 415px; }
      .cargo-card { top: 48px; width: min(410px, 100%); border-radius: 24px; }.cargo-card img { height: 270px; }.cargo-card-content { padding: 17px; }.cargo-card-content h3 { font-size: 21px; }.cargo-card-content p { font-size: 13px; }
      .availability-badge { top: 14px; left: 55px; padding: 13px 15px; border-radius: 15px; }.availability-badge b { font-size: 26px; }.availability-badge span { font-size: 13px; }
      .floating-info { left: 345px; bottom: 260px; width: 225px; padding: 15px; border-radius: 18px; }.floating-info h4 { font-size: 14px; }.floating-info p { font-size: 13px; }
    }

    /* Escala tipografica proporcional para la seccion Empresa */
    #empresa .eyebrow { font-size: 13px; margin-bottom: 12px; }
    #empresa .section-title { font-size: clamp(30px, 3.35vw, 45px); line-height: 1.08; }
    #empresa .section-copy { margin-top: 15px; font-size: 15px; line-height: 1.65; }
    #empresa .feature-list { gap: 14px; margin: 24px 0; }
    #empresa .feature-tile { gap: 12px; padding: 16px; }
    #empresa .feature-icon { min-width: 44px; height: 44px; font-size: 18px; }
    #empresa .feature-tile h3 { font-size: 16px; }
    #empresa .feature-tile p { font-size: 13px; line-height: 1.55; }
    #empresa .checklist { gap: 9px; margin-bottom: 24px; font-size: 14px; }
    #empresa .btn { min-height: 48px; padding-inline: 20px; font-size: 13px; }
    #empresa .experience { padding: 17px 20px; }
    #empresa .experience b { font-size: 36px; }
    #empresa .experience span { font-size: 13px; }

    @media (min-width: 1051px) and (max-width: 1440px) {
      #empresa .eyebrow { font-size: 13px; margin-bottom: 10px; }
      #empresa .section-title { font-size: clamp(28px, 2.8vw, 38px); }
      #empresa .section-copy { margin-top: 12px; font-size: 14px; }
      #empresa .feature-list { gap: 11px; margin: 19px 0; }
      #empresa .feature-tile { gap: 10px; padding: 13px; }
      #empresa .feature-icon { min-width: 39px; height: 39px; font-size: 16px; }
      #empresa .feature-tile h3 { font-size: 14px; }
      #empresa .feature-tile p { font-size: 13px; }
      #empresa .checklist { gap: 7px; margin-bottom: 20px; font-size: 13px; }
      #empresa .btn { min-height: 44px; padding-inline: 17px; font-size: 13px; }
      #empresa .experience b { font-size: 32px; }
      #empresa .experience span { font-size: 13px; }
    }

    @media (max-width: 720px) {
      #empresa .eyebrow { font-size: 13px; }
      #empresa .section-title { font-size: clamp(30px, 9vw, 39px); }
      #empresa .section-copy { font-size: 14px; }
      #empresa .feature-tile h3 { font-size: 15px; }
      #empresa .feature-tile p { font-size: 13px; }
      #empresa .checklist { font-size: 13px; }
    }

    /* Escala tipografica proporcional para la seccion Servicios */
    #servicios .eyebrow { font-size: 13px; margin-bottom: 12px; }
    #servicios .section-title { font-size: clamp(30px, 3.35vw, 45px); line-height: 1.08; }
    #servicios .section-copy { margin-top: 15px; font-size: 15px; line-height: 1.65; }
    #servicios .service-grid { margin-top: 34px; }
    #servicios .service-body { padding: 27px 24px 25px; }
    #servicios .service-icon-big { top: -29px; right: 22px; width: 60px; height: 60px; border-radius: 16px; font-size: 23px; }
    #servicios .service-body h3 { margin-bottom: 10px; font-size: 19px; }
    #servicios .service-body p { font-size: 13px; line-height: 1.6; }
    #servicios .service-link { gap: 7px; margin-top: 16px; font-size: 13px; }

    @media (min-width: 1051px) and (max-width: 1440px) {
      #servicios .eyebrow { font-size: 13px; margin-bottom: 10px; }
      #servicios .section-title { font-size: clamp(28px, 2.8vw, 38px); }
      #servicios .section-copy { margin-top: 12px; font-size: 14px; }
      #servicios .service-grid { margin-top: 28px; }
      #servicios .service-body { padding: 23px 20px 21px; }
      #servicios .service-icon-big { top: -26px; right: 19px; width: 53px; height: 53px; border-radius: 14px; font-size: 20px; }
      #servicios .service-body h3 { margin-bottom: 8px; font-size: 17px; }
      #servicios .service-body p { font-size: 13px; }
      #servicios .service-link { margin-top: 14px; font-size: 13px; }
    }

    @media (max-width: 720px) {
      #servicios .eyebrow { font-size: 13px; }
      #servicios .section-title { font-size: clamp(30px, 9vw, 39px); }
      #servicios .section-copy { font-size: 14px; }
      #servicios .service-body h3 { font-size: 18px; }
      #servicios .service-body p { font-size: 13px; }
      #servicios .service-link { font-size: 13px; }
    }

    /* Escala proporcional para la franja Marquee */
    .marquee { padding: 16px 0; }
    .marquee-track { gap: 42px; font-size: 18px; }
    .marquee span { gap: 13px; }
    .marquee i { width: 31px; height: 31px; font-size: 14px; }

    @media (min-width: 1051px) and (max-width: 1440px) {
      .marquee { padding: 14px 0; }
      .marquee-track { gap: 36px; font-size: 16px; }
      .marquee span { gap: 11px; }
      .marquee i { width: 28px; height: 28px; font-size: 13px; }
    }

    @media (max-width: 720px) {
      .marquee { padding: 12px 0; }
      .marquee-track { gap: 30px; font-size: 14px; }
      .marquee span { gap: 9px; }
      .marquee i { width: 25px; height: 25px; font-size: 13px; }
    }

    /* Escala tipografica proporcional para la seccion Flota */
    #flota .eyebrow { font-size: 13px; margin-bottom: 12px; }
    #flota .section-title { font-size: clamp(30px, 3.35vw, 45px); line-height: 1.08; }
    #flota .section-copy { margin-top: 15px; font-size: 15px; line-height: 1.65; }
    #flota .fleet-head { margin-bottom: 34px; }
    #flota .btn { min-height: 48px; padding-inline: 20px; font-size: 13px; }
    #flota .fleet-content { padding: 19px; }
    #flota .fleet-content small { font-size: 13px; }
    #flota .fleet-content h3 { font-size: 17px; }
    #flota .stats-bar { margin-top: 52px; }
    #flota .stat { padding: 25px 21px; }
    #flota .stat i { margin-bottom: 8px; font-size: 23px; }
    #flota .stat strong { font-size: 32px; }
    #flota .stat span { margin-top: 5px; font-size: 13px; }

    @media (min-width: 1051px) and (max-width: 1440px) {
      #flota .eyebrow { font-size: 13px; margin-bottom: 10px; }
      #flota .section-title { font-size: clamp(28px, 2.8vw, 38px); }
      #flota .section-copy { margin-top: 12px; font-size: 14px; }
      #flota .fleet-head { margin-bottom: 28px; }
      #flota .btn { min-height: 44px; padding-inline: 17px; font-size: 13px; }
      #flota .fleet-carousel { gap: 18px; }
      #flota .fleet-content { padding: 16px; }
      #flota .fleet-content small { font-size: 13px; }
      #flota .fleet-content h3 { font-size: 15px; }
      #flota .stats-bar { margin-top: 42px; }
      #flota .stat { padding: 21px 18px; }
      #flota .stat i { font-size: 20px; }
      #flota .stat strong { font-size: 28px; }
      #flota .stat span { font-size: 13px; }
    }

    @media (max-width: 720px) {
      #flota .eyebrow { font-size: 13px; }
      #flota .section-title { font-size: clamp(30px, 9vw, 39px); }
      #flota .section-copy { font-size: 14px; }
      #flota .fleet-head .btn { margin-top: 20px; }
      #flota .fleet-content h3 { font-size: 16px; }
      #flota .stat strong { font-size: 29px; }
      #flota .stat span { font-size: 13px; }
    }

    /* Escala tipografica proporcional para la seccion Capacidad */
    .capability .eyebrow { font-size: 13px; margin-bottom: 12px; }
    .capability .section-title { font-size: clamp(30px, 3.35vw, 45px); line-height: 1.08; }
    .capability .section-copy { margin-top: 15px; font-size: 15px; line-height: 1.65; }
    .capability .cap-list { gap: 13px; margin-top: 24px; }
    .capability .cap-list li { gap: 12px; padding: 15px; }
    .capability .cap-list i { font-size: 18px; }
    .capability .cap-list h3 { font-size: 16px; }
    .capability .cap-list p { font-size: 13px; line-height: 1.55; }
    .capability .tab-panel { padding: 23px; }
    .capability .tabs { margin-bottom: 18px; padding: 6px; }
    .capability .tab-btn { padding: 11px 10px; font-size: 13px; }
    .capability .tab-content h3 { margin-bottom: 10px; font-size: 23px; }
    .capability .tab-content p { margin-bottom: 13px; font-size: 13px; line-height: 1.6; }
    .capability .tab-content .checklist { gap: 8px; margin-bottom: 0; font-size: 13px; }

    @media (min-width: 1051px) and (max-width: 1440px) {
      .capability .eyebrow { font-size: 13px; margin-bottom: 10px; }
      .capability .section-title { font-size: clamp(28px, 2.8vw, 38px); }
      .capability .section-copy { margin-top: 12px; font-size: 14px; }
      .capability .cap-list { gap: 10px; margin-top: 19px; }
      .capability .cap-list li { gap: 10px; padding: 12px; }
      .capability .cap-list i { font-size: 16px; }
      .capability .cap-list h3 { font-size: 14px; }
      .capability .cap-list p { font-size: 13px; }
      .capability .tab-panel { padding: 19px; }
      .capability .tabs { margin-bottom: 15px; padding: 5px; }
      .capability .tab-btn { padding: 9px 8px; font-size: 13px; }
      .capability .tab-content { gap: 17px; }
      .capability .tab-content h3 { margin-bottom: 8px; font-size: 20px; }
      .capability .tab-content p { margin-bottom: 11px; font-size: 13px; }
      .capability .tab-content .checklist { gap: 7px; font-size: 13px; }
    }

    @media (max-width: 720px) {
      .capability .eyebrow { font-size: 13px; }
      .capability .section-title { font-size: clamp(30px, 9vw, 39px); }
      .capability .section-copy { font-size: 14px; }
      .capability .cap-list h3 { font-size: 15px; }
      .capability .cap-list p { font-size: 13px; }
      .capability .tab-panel { padding: 17px; }
      .capability .tab-btn { padding-inline: 6px; font-size: 13px; }
      .capability .tab-content h3 { font-size: 21px; }
      .capability .tab-content p,
      .capability .tab-content .checklist { font-size: 13px; }
    }

    /* Escala tipografica proporcional para la seccion Proceso */
    #proceso .eyebrow { font-size: 13px; margin-bottom: 12px; }
    #proceso .section-title { font-size: clamp(30px, 3.35vw, 45px); line-height: 1.08; }
    #proceso .section-copy { margin-top: 15px; font-size: 15px; line-height: 1.65; }
    #proceso .process-grid { margin-top: 36px; }
    #proceso .process-grid:before { top: 40px; }
    #proceso .process-card { padding: 25px 18px; }
    #proceso .process-icon { width: 80px; height: 80px; margin-bottom: 17px; border-radius: 24px; font-size: 27px; }
    #proceso .process-icon span { right: -7px; top: -7px; width: 29px; height: 29px; font-size: 13px; }
    #proceso .process-card h3 { margin-bottom: 7px; font-size: 16px; }
    #proceso .process-card p { font-size: 13px; line-height: 1.6; }

    @media (min-width: 1051px) and (max-width: 1440px) {
      #proceso .eyebrow { font-size: 13px; margin-bottom: 10px; }
      #proceso .section-title { font-size: clamp(28px, 2.8vw, 38px); }
      #proceso .section-copy { margin-top: 12px; font-size: 14px; }
      #proceso .process-grid { margin-top: 29px; }
      #proceso .process-grid:before { top: 35px; }
      #proceso .process-card { padding: 21px 15px; }
      #proceso .process-icon { width: 70px; height: 70px; margin-bottom: 14px; border-radius: 20px; font-size: 23px; }
      #proceso .process-icon span { width: 26px; height: 26px; font-size: 13px; }
      #proceso .process-card h3 { margin-bottom: 6px; font-size: 14px; }
      #proceso .process-card p { font-size: 13px; }
    }

    @media (max-width: 720px) {
      #proceso .eyebrow { font-size: 13px; }
      #proceso .section-title { font-size: clamp(30px, 9vw, 39px); }
      #proceso .section-copy { font-size: 14px; }
      #proceso .process-grid:before { display: none; }
      #proceso .process-icon { width: 74px; height: 74px; font-size: 25px; }
      #proceso .process-card h3 { font-size: 15px; }
      #proceso .process-card p { font-size: 13px; }
    }

    /* Escala tipografica proporcional para el CTA */
    .cta .cta-badge { margin-bottom: 15px; font-size: 13px; }
    .cta h2 { margin-bottom: 15px; font-size: clamp(30px, 3.35vw, 45px); line-height: 1.1; }
    .cta p { margin-bottom: 22px; font-size: 14px; line-height: 1.65; }
    .cta .cta-actions { margin-bottom: 22px; }
    .cta .btn { min-height: 46px; padding-inline: 18px; font-size: 13px; }
    .cta .cta-trust { font-size: 13px; }
    .cta .cta-trust strong { font-size: 13px; }
    .cta .promo-strip-card h3 { font-size: 13px; }
    .cta .promo-strip-card p { font-size: 13px; }

    /* Escala tipografica proporcional para la seccion Team */
    .team .eyebrow { font-size: 13px; margin-bottom: 12px; }
    .team .section-title { font-size: clamp(30px, 3.35vw, 45px); line-height: 1.08; }
    .team .section-copy { margin-top: 15px; font-size: 15px; line-height: 1.65; }
    .team .team-grid { margin-top: 34px; }
    .team .team-body { padding: 17px; }
    .team .team-body small { font-size: 13px; }
    .team .team-body h3 { font-size: 17px; }

    /* Escala tipografica proporcional para la seccion Cotizar */
    #cotizar .eyebrow { font-size: 13px; margin-bottom: 12px; }
    #cotizar .section-title { font-size: clamp(30px, 3.35vw, 45px); line-height: 1.08; }
    #cotizar .section-copy { margin-top: 15px; font-size: 15px; line-height: 1.65; }
    #cotizar .cap-list { gap: 13px; margin-top: 24px; }
    #cotizar .cap-list li { gap: 12px; padding: 15px; }
    #cotizar .cap-list i { font-size: 18px; }
    #cotizar .cap-list h3 { font-size: 16px; }
    #cotizar .cap-list p { font-size: 13px; line-height: 1.55; }
    #cotizar .quote-form { padding: 28px; }
    #cotizar .quote-form h3 { margin-bottom: 18px; font-size: 25px; }
    #cotizar .form-grid { gap: 12px; }
    #cotizar .field { gap: 6px; }
    #cotizar .field label { font-size: 13px; }
    #cotizar .field input,
    #cotizar .field select,
    #cotizar .field textarea { padding: 12px 13px; font-size: 13px; }
    #cotizar .field textarea { min-height: 96px; }
    #cotizar .btn { min-height: 48px; padding-inline: 20px; font-size: 13px; }

    @media (min-width: 1051px) and (max-width: 1440px) {
      .cta .cta-badge { margin-bottom: 12px; font-size: 13px; }
      .cta h2 { margin-bottom: 12px; font-size: clamp(28px, 2.8vw, 38px); }
      .cta p { margin-bottom: 18px; font-size: 13px; }
      .cta .cta-actions { margin-bottom: 18px; }
      .cta .btn { min-height: 42px; padding-inline: 15px; font-size: 13px; }
      .cta .cta-trust { font-size: 13px; }
      .cta .cta-trust strong { font-size: 13px; }
      .cta .promo-strip-card h3 { font-size: 13px; }
      .cta .promo-strip-card p { font-size: 13px; }

      .team .eyebrow,
      #cotizar .eyebrow { font-size: 13px; margin-bottom: 10px; }
      .team .section-title,
      #cotizar .section-title { font-size: clamp(28px, 2.8vw, 38px); }
      .team .section-copy,
      #cotizar .section-copy { margin-top: 12px; font-size: 14px; }
      .team .team-grid { margin-top: 28px; }
      .team .team-body { padding: 14px; }
      .team .team-body small { font-size: 13px; }
      .team .team-body h3 { font-size: 15px; }

      #cotizar .cap-list { gap: 10px; margin-top: 19px; }
      #cotizar .cap-list li { gap: 10px; padding: 12px; }
      #cotizar .cap-list i { font-size: 16px; }
      #cotizar .cap-list h3 { font-size: 14px; }
      #cotizar .cap-list p { font-size: 13px; }
      #cotizar .quote-form { padding: 23px; }
      #cotizar .quote-form h3 { margin-bottom: 15px; font-size: 22px; }
      #cotizar .form-grid { gap: 10px; }
      #cotizar .field label { font-size: 13px; }
      #cotizar .field input,
      #cotizar .field select,
      #cotizar .field textarea { padding: 10px 11px; font-size: 13px; }
      #cotizar .field textarea { min-height: 86px; }
      #cotizar .btn { min-height: 44px; padding-inline: 17px; font-size: 13px; }
    }

    @media (max-width: 720px) {
      .cta h2,
      .team .section-title,
      #cotizar .section-title { font-size: clamp(30px, 9vw, 39px); }
      .cta p,
      .team .section-copy,
      #cotizar .section-copy { font-size: 14px; }
      .cta .cta-badge,
      .team .eyebrow,
      #cotizar .eyebrow { font-size: 13px; }
      .cta .promo-strip-card h3 { font-size: 13px; }
      .cta .promo-strip-card p { font-size: 13px; }
      .team .team-body h3 { font-size: 16px; }
      #cotizar .cap-list h3 { font-size: 15px; }
      #cotizar .cap-list p { font-size: 13px; }
      #cotizar .quote-form { padding: 20px; }
      #cotizar .quote-form h3 { font-size: 22px; }
      #cotizar .field label { font-size: 13px; }
      #cotizar .field input,
      #cotizar .field select,
      #cotizar .field textarea { font-size: 13px; }
    }

    /* Escala tipografica proporcional para Testimonios */
    .testimonials .eyebrow { font-size: 13px; margin-bottom: 12px; }
    .testimonials .section-title { font-size: clamp(30px, 3.35vw, 45px); line-height: 1.08; }
    .testimonials .section-copy { margin-top: 15px; font-size: 15px; line-height: 1.65; }
    .testimonials .testimonial-wrap { margin-top: 34px; }
    .testimonials .testimonial-card { padding: 25px; }
    .testimonials .stars { margin-bottom: 11px; font-size: 14px; }
    .testimonials .testimonial-card > p { font-size: 14px; line-height: 1.65; }
    .testimonials .client { gap: 12px; margin-top: 19px; }
    .testimonials .client img { width: 48px; height: 48px; }
    .testimonials .client h4 { font-size: 14px; }
    .testimonials .client span { font-size: 13px; }
    .testimonials .testimonial-controls { margin-top: 19px; }
    .testimonials .round-btn { width: 40px; height: 40px; font-size: 13px; }

    /* Escala proporcional para Empresas de referencia */
    .clients { padding: 31px 0; }
    .clients .client-logos { gap: 14px; }
    .clients .logo-box { height: 72px; border-radius: 15px; font-size: 13px; }

    @media (min-width: 1051px) and (max-width: 1440px) {
      .testimonials .eyebrow { font-size: 13px; margin-bottom: 10px; }
      .testimonials .section-title { font-size: clamp(28px, 2.8vw, 38px); }
      .testimonials .section-copy { margin-top: 12px; font-size: 14px; }
      .testimonials .testimonial-wrap { margin-top: 28px; }
      .testimonials .testimonial-card { padding: 21px; }
      .testimonials .stars { margin-bottom: 9px; font-size: 13px; }
      .testimonials .testimonial-card > p { font-size: 13px; }
      .testimonials .client { gap: 10px; margin-top: 16px; }
      .testimonials .client img { width: 42px; height: 42px; }
      .testimonials .client h4 { font-size: 13px; }
      .testimonials .client span { font-size: 13px; }
      .testimonials .testimonial-controls { margin-top: 16px; }
      .testimonials .round-btn { width: 36px; height: 36px; font-size: 13px; }

      .clients { padding: 26px 0; }
      .clients .client-logos { gap: 11px; }
      .clients .logo-box { height: 63px; border-radius: 13px; font-size: 13px; }
    }

    @media (max-width: 720px) {
      .testimonials .eyebrow { font-size: 13px; }
      .testimonials .section-title { font-size: clamp(30px, 9vw, 39px); }
      .testimonials .section-copy { font-size: 14px; }
      .testimonials .testimonial-card { padding: 20px; }
      .testimonials .testimonial-card > p { font-size: 13px; }
      .testimonials .client h4 { font-size: 13px; }
      .testimonials .client span { font-size: 13px; }

      .clients { padding: 24px 0; }
      .clients .client-logos { gap: 10px; }
      .clients .logo-box { height: 60px; font-size: 13px; }
    }

    /* Escala tipografica proporcional para el Footer */
    #contacto .footer-top { padding: 72px 0 57px; }
    #contacto .footer-grid { gap: 32px; }
    #contacto h3 { margin-bottom: 16px; font-size: 18px; }
    #contacto p,
    #contacto a,
    #contacto li { font-size: 13px; line-height: 1.65; }
    #contacto .footer-links { gap: 8px; }
    #contacto .footer-contact { gap: 11px; }
    #contacto .footer-contact i { margin-right: 8px; font-size: 13px; }
    #contacto .socials a { display: grid; place-items: center; width: 34px; height: 34px; font-size: 13px; }
    #contacto .footer-bottom { padding: 18px 0; font-size: 13px; }

    @media (min-width: 1051px) and (max-width: 1440px) {
      #contacto .footer-top { padding: 60px 0 48px; }
      #contacto .footer-grid { gap: 26px; }
      #contacto h3 { margin-bottom: 13px; font-size: 16px; }
      #contacto p,
      #contacto a,
      #contacto li { font-size: 13px; }
      #contacto .footer-links { gap: 7px; }
      #contacto .footer-contact { gap: 9px; }
      #contacto .footer-contact i { margin-right: 7px; font-size: 13px; }
      #contacto .socials a { width: 31px; height: 31px; font-size: 13px; }
      #contacto .footer-bottom { padding: 16px 0; font-size: 13px; }
    }

    @media (max-width: 720px) {
      #contacto .footer-top { padding: 52px 0 40px; }
      #contacto .footer-grid { gap: 28px; }
      #contacto h3 { margin-bottom: 12px; font-size: 16px; }
      #contacto p,
      #contacto a,
      #contacto li { font-size: 13px; }
      #contacto .footer-contact a { overflow-wrap: anywhere; }
      #contacto .footer-bottom { padding: 15px 18px; font-size: 13px; }
    }

    /* Contacto persistente y controles flotantes */
    .mobile-contact-bar { display: none; }
    .whatsapp-float {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 990;
      display: grid;
      width: 54px;
      height: 54px;
      place-items: center;
      border-radius: 50%;
      background: #25d366;
      color: #fff;
      font-size: 26px;
      box-shadow: 0 10px 24px rgba(3, 17, 29, .22);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(3, 17, 29, .28); }
    .whatsapp-float:focus-visible,
    .mobile-contact-bar a:focus-visible,
    .hamburger:focus-visible,
    .scroll-top:focus-visible { outline: 3px solid #dfe7ef; outline-offset: 3px; }
    .scroll-top { left: 24px; right: auto; bottom: 24px; }

    @media (min-width: 768px) and (max-width: 1050px) {
      .section { padding: 82px 0; }
      .section-title { font-size: clamp(30px, 4.8vw, 43px); }
      .hero-grid { padding-bottom: 96px; }
      .whatsapp-float { right: 20px; bottom: 20px; }
      .scroll-top { left: 20px; bottom: 20px; }
    }

    /* Experiencia mobile enfocada en contacto y cotizacion */
    @media (max-width: 767px) {
      html { scroll-padding-top: 64px; }
      body {
        overflow-x: hidden;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
      }
      .container { width: min(100% - 32px, var(--container)); }
      .section { padding: 52px 0; }
      .section-title,
      #empresa .section-title,
      #servicios .section-title,
      #flota .section-title,
      #proceso .section-title,
      .team .section-title,
      #cotizar .section-title,
      .testimonials .section-title { font-size: clamp(26px, 8.4vw, 30px); line-height: 1.12; letter-spacing: -.045em; }
      .section-copy,
      #empresa .section-copy,
      #servicios .section-copy,
      #flota .section-copy,
      #proceso .section-copy,
      .team .section-copy,
      #cotizar .section-copy,
      .testimonials .section-copy { margin-top: 12px; font-size: 15px; line-height: 1.6; }
      .eyebrow,
      #empresa .eyebrow,
      #servicios .eyebrow,
      #flota .eyebrow,
      #proceso .eyebrow,
      .team .eyebrow,
      #cotizar .eyebrow,
      .testimonials .eyebrow { margin-bottom: 9px; font-size: 13px; }

      .preloader { display: none; }
      .header { height: 64px; }
      .topbar,
      .nav-search,
      .desktop-quote { display: none; }
      .navwrap { height: 64px; }
      .nav { height: 64px; padding: 0 16px; }
      .brand-logo { width: 124px; height: 40px; }
      .nav-actions { gap: 0; }
      .hamburger { display: grid; width: 44px; height: 44px; font-size: 20px; }
      .hamburger i { display: none; }
      .hamburger::before {
        content: "";
        width: 21px;
        height: 16px;
        background: linear-gradient(to bottom, currentColor 0 2px, transparent 2px 7px, currentColor 7px 9px, transparent 9px 14px, currentColor 14px 16px);
      }
      .mobile-panel { top: 70px; right: 12px; width: calc(100% - 24px); padding: 10px 14px; border-radius: 14px; }
      .mobile-panel a { min-height: 46px; display: flex; align-items: center; padding: 10px 8px; font-size: 14px; }

      .hero { min-height: 0; padding-top: 64px; }
      .hero:after { height: 90px; }
      .hero .shape-map,
      .hero-bullets,
      .availability-badge,
      .floating-info,
      .road-line { display: none; }
      .hero-grid { min-height: 0; gap: 26px; padding: 40px 0 58px; }
      .hero-kicker { margin-bottom: 13px; padding: 7px 10px; font-size: 13px; }
      .hero h1 { margin-bottom: 14px; font-size: clamp(32px, 10vw, 38px); line-height: 1.02; letter-spacing: -.055em; }
      .hero p { display: -webkit-box; overflow: hidden; margin-bottom: 20px; font-size: 15px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
      .hero-actions { display: grid; gap: 9px; }
      .hero .btn { width: 100%; min-height: 48px; justify-content: center; font-size: 13px; }
      .hero .btn.ghost { min-height: 44px; }
      .hero-visual { min-height: 0; }
      .cargo-card { position: relative; width: 100%; border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
      .cargo-card img { height: 210px; }
      .cargo-card-content { padding: 15px 16px; }
      .cargo-card-content h3 { margin: 0; font-size: 17px; line-height: 1.2; }
      .cargo-card-content p { display: none; }

      #empresa { padding-top: 46px; }
      #empresa .about-grid { gap: 24px; }
      #empresa .image-stack { min-height: 190px; display: block; }
      #empresa .image-main { position: static; width: 100%; height: 190px; border-radius: 18px; }
      #empresa .image-small,
      #empresa .experience,
      #empresa .feature-list,
      #empresa .checklist,
      #empresa .btn { display: none; }

      #servicios { padding-bottom: 46px; }
      #servicios .service-grid {
        display: flex;
        width: calc(100% + 16px);
        gap: 12px;
        margin-top: 25px;
        padding: 0 16px 8px 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }
      #servicios .service-grid::-webkit-scrollbar,
      .team .team-grid::-webkit-scrollbar { display: none; }
      #servicios .service-card { flex: 0 0 min(82vw, 300px); border-radius: 17px; scroll-snap-align: start; }
      #servicios .service-image { height: 145px; }
      #servicios .service-body { padding: 20px 17px 17px; }
      #servicios .service-icon-big { top: -22px; right: 15px; width: 45px; height: 45px; border-radius: 13px; font-size: 17px; }
      #servicios .service-body h3 { margin-bottom: 7px; font-size: 18px; }
      #servicios .service-body p { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
      #servicios .service-link { margin-top: 11px; font-size: 13px; }
      .marquee { display: none; }

      #flota { padding: 52px 0; }
      #flota .fleet-head { margin-bottom: 24px; }
      #flota .fleet-head .btn,
      #flota .stats-bar,
      #flota .fleet-card:nth-child(n+3) { display: none; }
      #flota .fleet-carousel { grid-template-columns: 1fr 1fr; gap: 10px; }
      #flota .fleet-card { border-radius: 15px; }
      #flota .fleet-card img { height: 132px; }
      #flota .fleet-content { padding: 13px; }
      #flota .fleet-content small { font-size: 13px; }
      #flota .fleet-content h3 { margin-top: 4px; font-size: 14px; line-height: 1.25; }

      .capability,
      .cta { display: none; }

      #proceso .process-grid { display: grid; gap: 0; margin-top: 25px; }
      #proceso .process-card { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; padding: 14px 0; border: 0; border-radius: 0; box-shadow: none; text-align: left; }
      #proceso .process-card:not(:last-child) { border-bottom: 1px solid var(--border); }
      #proceso .process-icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; border-radius: 13px; font-size: 17px; }
      #proceso .process-icon span { right: -5px; top: -6px; width: 21px; height: 21px; font-size: 13px; }
      #proceso .process-card h3 { align-self: end; margin: 0 0 2px; font-size: 17px; }
      #proceso .process-card p { font-size: 14px; line-height: 1.45; }

      .team { padding: 52px 0; }
      .team .team-grid { display: flex; width: calc(100% + 16px); gap: 12px; margin-top: 25px; padding: 0 16px 8px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
      .team .team-card { flex: 0 0 min(84vw, 310px); border-radius: 17px; scroll-snap-align: start; }
      .team .team-img { height: 220px; }
      .team .team-body { padding: 14px 16px; }
      .team .team-body small { font-size: 13px; }
      .team .team-body h3 { font-size: 17px; }
      .team .team-social { display: none; }

      #cotizar { padding: 52px 0; background-attachment: scroll; }
      #cotizar .quote-grid { gap: 25px; }
      #cotizar .cap-list { display: none; }
      #cotizar .quote-form { padding: 20px 16px; border-radius: 18px; }
      #cotizar .quote-form h3 { margin-bottom: 16px; font-size: 21px; }
      #cotizar .form-grid { grid-template-columns: 1fr; gap: 13px; }
      #cotizar .field,
      #cotizar .field.full { grid-column: 1; }
      #cotizar .field label { font-size: 13px; }
      #cotizar .field input,
      #cotizar .field select,
      #cotizar .field textarea { min-height: 48px; padding: 12px; font-size: 16px; }
      #cotizar .field textarea { min-height: 104px; }
      #cotizar .btn { width: 100%; min-height: 50px; justify-content: center; }

      .testimonials { padding: 48px 0; }
      .testimonials .testimonial-wrap { margin-top: 24px; }
      .testimonials .testimonial-track { transform: none !important; }
      .testimonials .testimonial-card { min-width: 100%; margin: 0; padding: 19px; border-radius: 17px; }
      .testimonials .testimonial-card:nth-child(n+2),
      .testimonials .testimonial-controls { display: none; }
      .testimonials .testimonial-card > p { font-size: 14px; }

      .clients { padding: 22px 0; }
      .clients .client-logos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
      .clients .logo-box { height: 52px; padding: 5px; border-radius: 10px; font-size: 13px; text-align: center; }

      #contacto .footer-top { padding: 44px 0 34px; }
      #contacto .footer-grid { grid-template-columns: 1fr; gap: 25px; }
      #contacto .footer-grid > div:nth-child(2),
      #contacto .footer-grid > div:nth-child(4) { display: none; }
      #contacto h3 { font-size: 17px; }
      #contacto p,
      #contacto a,
      #contacto li { font-size: 13px; }
      #contacto .footer-bottom { padding: 14px 16px; font-size: 13px; }

      .whatsapp-float,
      .scroll-top { display: none !important; }
      .mobile-contact-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        min-height: calc(72px + env(safe-area-inset-bottom));
        padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(184, 198, 209, .35);
        background: #102b43;
        box-shadow: 0 -8px 24px rgba(3, 17, 29, .18);
      }
      .mobile-contact-bar a { display: grid; min-width: 0; place-items: center; align-content: center; gap: 3px; color: #fff; font-size: 13px; font-weight: 700; }
      .mobile-contact-bar svg { display: block; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: rgba(255,255,255,.1); fill: none; stroke: #dfe7ef; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
      .mobile-contact-bar a:first-child svg path { fill: #dfe7ef; stroke: none; }
      .mobile-contact-bar a:last-child svg { background: #25d366; stroke: #fff; }

      .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s ease, transform .55s ease;
      }
      .reveal.show { opacity: 1; transform: none; }
      .reveal.delay-1 { transition-delay: .06s; }
      .reveal.delay-2 { transition-delay: .12s; }
      .reveal.delay-3 { transition-delay: .18s; }
      .reveal.delay-4 { transition-delay: .24s; }
    }

    @media (max-width: 340px) {
      .container { width: min(100% - 24px, var(--container)); }
      .nav { padding-inline: 12px; }
      .brand-logo { width: 116px; }
      .hero-grid { padding-top: 34px; }
      .hero h1 { font-size: 32px; }
      #flota .fleet-carousel { grid-template-columns: 1fr; }
      #flota .fleet-card:nth-child(2) { display: none; }
      #servicios .service-grid,
      .team .team-grid { width: calc(100% + 12px); padding-right: 12px; }
      .mobile-contact-bar { padding-inline: 5px; }
      .mobile-contact-bar a { font-size: 13px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

    /* Escala mobile compacta */
    @media (max-width: 767px) {
      .section { padding: 44px 0; }
      .section-title,
      #empresa .section-title,
      #servicios .section-title,
      #flota .section-title,
      #proceso .section-title,
      .team .section-title,
      #cotizar .section-title,
      .testimonials .section-title { font-size: clamp(23px, 7.2vw, 27px); line-height: 1.14; }
      .section-copy,
      #empresa .section-copy,
      #servicios .section-copy,
      #flota .section-copy,
      #proceso .section-copy,
      .team .section-copy,
      #cotizar .section-copy,
      .testimonials .section-copy { margin-top: 9px; font-size: 13px; line-height: 1.55; }
      .eyebrow,
      #empresa .eyebrow,
      #servicios .eyebrow,
      #flota .eyebrow,
      #proceso .eyebrow,
      .team .eyebrow,
      #cotizar .eyebrow,
      .testimonials .eyebrow { margin-bottom: 7px; font-size: 13px; }

      .hero-grid { gap: 20px; padding: 32px 0 50px; }
      .hero-kicker { margin-bottom: 10px; padding: 6px 9px; font-size: 13px; }
      .hero h1 { margin-bottom: 11px; font-size: clamp(29px, 9vw, 34px); }
      .hero p { margin-bottom: 16px; font-size: 13px; line-height: 1.5; }
      .hero-actions { gap: 7px; }
      .hero .btn { min-height: 44px; padding-inline: 15px; font-size: 13px; }
      .hero .btn.ghost { min-height: 40px; }
      .cargo-card img { height: 180px; }
      .cargo-card-content { padding: 12px 14px; }
      .cargo-card-content h3 { font-size: 15px; }

      #empresa { padding-top: 40px; }
      #empresa .about-grid { gap: 19px; }
      #empresa .image-stack { min-height: 165px; }
      #empresa .image-main { height: 165px; }

      #servicios { padding-bottom: 40px; }
      #servicios .service-grid,
      .team .team-grid { gap: 10px; margin-top: 20px; }
      #servicios .service-card { flex-basis: min(78vw, 270px); }
      #servicios .service-image { height: 125px; }
      #servicios .service-body { padding: 18px 14px 14px; }
      #servicios .service-icon-big { top: -19px; width: 39px; height: 39px; font-size: 15px; }
      #servicios .service-body h3 { margin-bottom: 5px; font-size: 16px; }
      #servicios .service-body p { font-size: 13px; }
      #servicios .service-link { margin-top: 9px; font-size: 13px; }

      #flota { padding: 44px 0; }
      #flota .fleet-head { margin-bottom: 19px; }
      #flota .fleet-card img { height: 112px; }
      #flota .fleet-content { padding: 11px; }
      #flota .fleet-content small { font-size: 13px; }
      #flota .fleet-content h3 { font-size: 13px; }

      #proceso .process-grid { margin-top: 19px; }
      #proceso .process-card { grid-template-columns: 42px 1fr; column-gap: 11px; padding: 11px 0; }
      #proceso .process-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }
      #proceso .process-icon span { width: 18px; height: 18px; font-size: 13px; }
      #proceso .process-card h3 { font-size: 15px; }
      #proceso .process-card p { font-size: 13px; }

      .team { padding: 44px 0; }
      .team .team-card { flex-basis: min(79vw, 280px); }
      .team .team-img { height: 185px; }
      .team .team-body { padding: 11px 13px; }
      .team .team-body small { font-size: 13px; }
      .team .team-body h3 { font-size: 15px; }

      #cotizar { padding: 44px 0; }
      #cotizar .quote-grid { gap: 20px; }
      #cotizar .quote-form { padding: 17px 14px; }
      #cotizar .quote-form h3 { margin-bottom: 13px; font-size: 19px; }
      #cotizar .form-grid { gap: 10px; }
      #cotizar .field label { font-size: 13px; }
      #cotizar .field input,
      #cotizar .field select,
      #cotizar .field textarea { min-height: 44px; padding: 10px 11px; font-size: 14px; }
      #cotizar .field textarea { min-height: 90px; }
      #cotizar .btn { min-height: 45px; font-size: 13px; }

      .testimonials { padding: 40px 0; }
      .testimonials .testimonial-wrap { margin-top: 19px; }
      .testimonials .testimonial-card { padding: 16px; }
      .testimonials .stars { margin-bottom: 8px; font-size: 13px; }
      .testimonials .testimonial-card > p { font-size: 13px; line-height: 1.55; }
      .testimonials .client { margin-top: 14px; }
      .testimonials .client img { width: 39px; height: 39px; }
      .testimonials .client h4 { font-size: 13px; }
      .testimonials .client span { font-size: 13px; }

      .clients .logo-box { height: 46px; font-size: 13px; }
      #contacto .footer-top { padding: 38px 0 29px; }
      #contacto .footer-grid { gap: 20px; }
      #contacto h3 { margin-bottom: 9px; font-size: 15px; }
      #contacto p,
      #contacto a,
      #contacto li { font-size: 13px; line-height: 1.55; }
      #contacto .footer-contact { gap: 8px; }
    }

    @media (max-width: 340px) {
      .section-title,
      #empresa .section-title,
      #servicios .section-title,
      #flota .section-title,
      #proceso .section-title,
      .team .section-title,
      #cotizar .section-title,
      .testimonials .section-title { font-size: 23px; }
      .hero h1 { font-size: 29px; }
    }

    /* Hero premium 2026 */
    .topbar-socials { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.74); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
    .topbar-socials a { width: 25px; height: 25px; border-color: rgba(255,255,255,.24); }
    .topbar-socials a:hover { background: linear-gradient(135deg, #7b4be2, #e34a75 55%, #f4a342); }
    .mobile-panel .mobile-instagram { gap: 9px; color: #294b76; }
    .mobile-panel .mobile-instagram i { font-size: 16px; }

    .hero {
      --pointer-x: 72%;
      --pointer-y: 38%;
      min-height: 820px;
      padding-top: 112px;
      isolation: isolate;
      background: #071928;
    }
    .hero::before {
      inset: 0;
      transform: none;
      animation: none;
      background:
        linear-gradient(90deg, rgba(7,25,40,.99) 0%, rgba(10,35,55,.97) 45%, rgba(13,42,64,.84) 100%),
        url('../assets/images/fleet/camion-lateral-izquierdo.jpeg') center/cover no-repeat;
    }
    .hero::after {
      z-index: 0;
      height: 160px;
      background: linear-gradient(0deg, var(--section-bridge), rgba(184,198,209,.5) 34%, transparent 100%);
    }
    .hero .shape-map { z-index: 0; opacity: .08; mask-image: linear-gradient(90deg, #000, transparent 72%); }
    .hero-light {
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(440px circle at var(--pointer-x) var(--pointer-y), rgba(115,160,210,.22), transparent 68%);
      transition: background-position .15s linear;
    }
    .hero-orbit { position: absolute; z-index: 0; border: 1px solid rgba(184,198,209,.12); border-radius: 50%; pointer-events: none; }
    .hero-orbit::before { content: ""; position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #adc4db; box-shadow: 0 0 18px #adc4db; }
    .hero-orbit--one { right: -150px; top: 70px; width: 520px; height: 520px; animation: orbitSpin 28s linear infinite; }
    .hero-orbit--two { right: 80px; top: 250px; width: 250px; height: 250px; animation: orbitSpin 19s linear infinite reverse; }
    @keyframes orbitSpin { to { transform: rotate(360deg); } }

    .hero-grid { grid-template-columns: minmax(0, 1.03fr) minmax(430px, .97fr); gap: clamp(48px, 6vw, 88px); min-height: 650px; padding: 54px 0 116px; }
    .hero-content { position: relative; z-index: 3; }
    .hero-kicker { margin-bottom: 23px; padding: 8px 13px; border-color: rgba(173,196,219,.24); background: rgba(173,196,219,.08); color: #dbe8f4; font-size: 13px; letter-spacing: .115em; backdrop-filter: blur(12px); }
    .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #85d9b7; box-shadow: 0 0 0 5px rgba(133,217,183,.1), 0 0 16px rgba(133,217,183,.8); animation: statusPulse 2.2s ease-in-out infinite; }
    @keyframes statusPulse { 50% { opacity: .55; box-shadow: 0 0 0 9px rgba(133,217,183,0), 0 0 24px rgba(133,217,183,.5); } }
    .hero h1 { max-width: 700px; margin-bottom: 24px; font-family: "Sora", sans-serif; font-size: clamp(50px, 5.45vw, 78px); line-height: .98; font-weight: 700; letter-spacing: -.065em; text-wrap: balance; }
    .hero h1 span { color: transparent; background: linear-gradient(105deg, #fff 0%, #abc3db 50%, #6e8eb1 100%); -webkit-background-clip: text; background-clip: text; }
    .hero p { max-width: 620px; margin-bottom: 31px; color: rgba(235,243,250,.74); font-size: 17px; line-height: 1.72; }
    .hero .btn { min-height: 52px; padding-inline: 23px; border-radius: 13px; background: linear-gradient(135deg, #557da7, #294b76); box-shadow: 0 16px 34px rgba(16,43,67,.4), inset 0 1px rgba(255,255,255,.22); }
    .hero .btn:hover { background: linear-gradient(135deg, #668db7, #315984); box-shadow: 0 20px 44px rgba(3,16,27,.46); }
    .hero .btn.ghost { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.055); box-shadow: inset 0 1px rgba(255,255,255,.08); }
    .hero .btn.ghost:hover { background: rgba(255,255,255,.12); }
    .hero-proof { display: grid; grid-template-columns: .72fr 1.35fr 1fr; max-width: 620px; margin-top: 35px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); animation: fadeUp .8s ease .58s both; }
    .hero-proof > div { display: grid; gap: 2px; padding: 0 18px; border-left: 1px solid rgba(255,255,255,.1); }
    .hero-proof > div:first-child { padding-left: 0; border-left: 0; }
    .hero-proof strong { color: #fff; font-family: "Sora", sans-serif; font-size: 14px; letter-spacing: -.02em; }
    .hero-proof span { color: rgba(214,228,240,.55); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

    .hero-visual { min-height: 520px; perspective: 1200px; }
    .hero-stage { position: absolute; inset: 24px 0 8px 16px; }
    .hero-stage::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 31px; background: linear-gradient(145deg, rgba(255,255,255,.5), rgba(255,255,255,.04) 35%, rgba(126,162,198,.38)); box-shadow: 0 36px 90px rgba(0,0,0,.4); }
    .hero-stage-media { position: absolute; inset: 0; overflow: hidden; border: 8px solid rgba(255,255,255,.07); border-radius: 30px; background: #173450; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
    .hero-stage-media img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; filter: saturate(.78) contrast(1.03); transform: scale(1.035); animation: premiumImage 12s ease-in-out infinite alternate; }
    @keyframes premiumImage { to { transform: scale(1.095) translateX(-1.5%); } }
    .stage-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,22,35,.04) 35%, rgba(4,18,29,.92) 100%), linear-gradient(90deg, transparent 55%, rgba(13,42,64,.25)); }
    .stage-caption { position: absolute; left: 28px; right: 28px; bottom: 28px; display: grid; gap: 4px; }
    .stage-caption span { color: #a9c0d7; font-size: 13px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
    .stage-caption strong { color: #fff; font: 600 22px/1.15 "Sora", sans-serif; letter-spacing: -.035em; }
    .route-trace { position: absolute; inset: 7% 3% auto auto; z-index: 2; width: 94%; height: 80%; overflow: visible; pointer-events: none; opacity: .74; }
    .route-trace path { fill: none; stroke-linecap: round; }
    .route-trace-base { stroke: rgba(255,255,255,.22); stroke-width: 1.5; stroke-dasharray: 3 9; }
    .route-trace-run { stroke: #d3e3f1; stroke-width: 2.4; stroke-dasharray: 34 320; filter: drop-shadow(0 0 5px rgba(211,227,241,.9)); animation: routeRun 5.5s linear infinite; }
    .route-trace circle { fill: #d3e3f1; stroke: rgba(7,25,40,.8); stroke-width: 5; filter: drop-shadow(0 0 5px #d3e3f1); }
    @keyframes routeRun { to { stroke-dashoffset: -354; } }
    .stage-status { position: absolute; z-index: 4; top: -20px; right: -22px; display: flex; align-items: center; gap: 12px; min-width: 220px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(8,28,44,.82); color: #fff; box-shadow: 0 18px 45px rgba(2,14,23,.35); backdrop-filter: blur(18px); transform: translateZ(35px); }
    .stage-status i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(133,217,183,.13); color: #85d9b7; }
    .stage-status span { display: grid; line-height: 1.2; }
    .stage-status small { margin-bottom: 4px; color: rgba(208,224,237,.55); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
    .stage-status strong { font-size: 13px; }
    .vehicle-peek { position: absolute; z-index: 5; bottom: -46px; display: grid; width: 122px; padding: 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(9,29,45,.86); box-shadow: 0 18px 45px rgba(0,0,0,.32); backdrop-filter: blur(16px); transform: translateZ(50px); animation: peekFloat 4s ease-in-out infinite; }
    .vehicle-peek img { width: 100%; height: 76px; border-radius: 11px; object-fit: cover; }
    .vehicle-peek span { padding: 8px 5px 4px; color: #dfeaf4; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .vehicle-peek--van { right: 104px; }
    .vehicle-peek--van img { object-position: center 56%; }
    .vehicle-peek--truck { right: -30px; animation-delay: -.9s; }
    @keyframes peekFloat { 50% { translate: 0 -8px; } }
    .hero-scroll-cue { position: absolute; z-index: 4; left: max(25px, calc((100vw - var(--container))/2)); bottom: 38px; display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.48); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
    .hero-scroll-cue i { animation: scrollCue 1.8s ease-in-out infinite; }
    @keyframes scrollCue { 50% { transform: translateY(5px); color: #fff; } }

    #flota .fleet-card img { filter: saturate(.82) contrast(1.04); transition: transform .6s cubic-bezier(.2,.75,.2,1), filter .4s ease; }
    #flota .fleet-card:hover img { transform: scale(1.05); filter: saturate(1) contrast(1.02); }

    @media (max-width: 1050px) {
      .hero { min-height: auto; padding-top: 112px; }
      .hero-grid { grid-template-columns: 1fr; gap: 54px; padding: 70px 0 145px; }
      .hero-content { max-width: 760px; }
      .hero-visual { min-height: 540px; }
      .hero-stage { inset: 0 7% 0 7%; }
      .hero-scroll-cue { display: none; }
    }

    @media (max-width: 767px) {
      .hero { min-height: 0; padding-top: 64px; }
      .hero::before { background: linear-gradient(145deg, #071928 0%, #102e48 100%); }
      .hero::after { height: 74px; }
      .hero-light, .hero-orbit--two { display: none; }
      .hero-orbit--one { display: block; right: -220px; top: 100px; width: 430px; height: 430px; opacity: .65; }
      .hero-grid { gap: 28px; padding: 45px 0 90px; }
      .hero-kicker { margin-bottom: 16px; padding: 7px 10px; font-size: 13px; letter-spacing: .09em; }
      .hero h1 { margin-bottom: 17px; font-size: clamp(35px, 10.7vw, 48px); line-height: 1.01; }
      .hero p { display: block; margin-bottom: 23px; font-size: 14px; line-height: 1.62; -webkit-line-clamp: none; line-clamp: none; }
      .hero-actions { grid-template-columns: 1fr; }
      .hero .btn { min-height: 48px; border-radius: 12px; }
      .hero-proof { grid-template-columns: .72fr 1.35fr 1fr; gap: 0; margin-top: 25px; padding-top: 18px; }
      .hero-proof > div { padding: 0 9px; }
      .hero-proof strong { font-size: 13px; }
      .hero-proof span { font-size: 13px; letter-spacing: .03em; }
      .hero-visual { min-height: 330px; }
      .hero-stage { inset: 0; transform: none !important; }
      .hero-stage::before, .hero-stage-media { border-radius: 21px; }
      .hero-stage-media { border-width: 5px; }
      .hero-stage-media img { object-position: center; }
      .stage-caption { left: 18px; bottom: 18px; }
      .stage-caption strong { font-size: 16px; }
      .stage-status { top: -14px; right: 10px; min-width: 190px; padding: 10px 12px; }
      .stage-status i { width: 30px; height: 30px; }
      .vehicle-peek { bottom: -38px; width: 94px; padding: 4px; border-radius: 12px; }
      .vehicle-peek img { height: 54px; border-radius: 8px; }
      .vehicle-peek span { padding: 6px 3px 3px; font-size: 13px; }
      .vehicle-peek--van { right: 82px; }
      .vehicle-peek--truck { right: -5px; }
    }

    @media (max-width: 370px) {
      .hero-grid { padding-top: 36px; }
      .hero h1 { font-size: 33px; }
      .hero-proof > div { padding-inline: 6px; }
      .hero-visual { min-height: 292px; }
      .stage-status { min-width: 174px; }
      .vehicle-peek { width: 86px; }
      .vehicle-peek--van { right: 73px; }
    }

    /* Hero — dirección editorial / logística en movimiento */
    .hero {
      --pointer-x: 72%;
      --pointer-y: 42%;
      position: relative;
      min-height: max(760px, 100svh);
      padding: 112px 0 54px;
      isolation: isolate;
      overflow: hidden;
      background: #071521;
      color: #fff;
    }
    .hero::before {
      content: "";
      position: absolute;
      z-index: -2;
      inset: 0;
      background:
        linear-gradient(90deg, #071521 0%, rgba(7,21,33,.98) 28%, rgba(7,21,33,.76) 58%, rgba(7,21,33,.18) 100%),
        linear-gradient(0deg, rgba(7,21,33,.66), transparent 55%);
      transform: none;
      animation: none;
    }
    .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      height: auto;
      background:
        radial-gradient(520px circle at var(--pointer-x) var(--pointer-y), rgba(123,171,214,.16), transparent 66%),
        linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.07) 50%, transparent 50.1%);
      pointer-events: none;
    }
    .hero-backdrop {
      position: absolute;
      z-index: -3;
      inset: 0;
      overflow: hidden;
    }
    .hero-backdrop img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 57% center;
      filter: saturate(.72) contrast(1.08);
      animation: heroCamera 16s cubic-bezier(.45,0,.55,1) infinite alternate;
    }
    .hero-ambient {
      position: absolute;
      z-index: -1;
      top: 20%;
      right: 5%;
      width: 38vw;
      height: 38vw;
      border-radius: 50%;
      background: rgba(73,126,174,.16);
      filter: blur(90px);
      animation: ambientDrift 8s ease-in-out infinite alternate;
      pointer-events: none;
    }
    .hero-gridlines {
      position: absolute;
      z-index: -1;
      inset: 112px 0 54px 50%;
      border-left: 1px solid rgba(255,255,255,.08);
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(90deg, rgba(0,0,0,.2), #000 45%, transparent 98%);
      pointer-events: none;
    }
    @keyframes heroCamera {
      from { transform: scale(1.025); }
      to { transform: scale(1.09) translateX(-1%); }
    }
    @keyframes ambientDrift {
      to { transform: translate(-6%, 7%) scale(1.12); opacity: .68; }
    }

    .hero-shell {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(410px, .72fr);
      align-items: center;
      gap: clamp(50px, 7vw, 108px);
      min-height: calc(max(760px, 100svh) - 166px);
      padding: 54px 0 68px;
    }
    .hero-copy { max-width: 700px; }
    .hero-eyebrow {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 25px;
      color: rgba(232,240,247,.76);
      font: 700 13px/1 "Sora", sans-serif;
      letter-spacing: .19em;
      text-transform: uppercase;
      animation: heroReveal .8s .05s both;
    }
    .hero-eyebrow span {
      position: relative;
      width: 34px;
      height: 1px;
      overflow: visible;
      background: #9ebcda;
    }
    .hero-eyebrow span::after {
      content: "";
      position: absolute;
      top: -2px;
      left: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #d9e9f7;
      box-shadow: 0 0 14px #d9e9f7;
      animation: eyebrowRun 2.5s ease-in-out infinite;
    }
    .hero h1 {
      max-width: 740px;
      margin: 0 0 27px;
      color: #fff;
      font: 600 clamp(55px, 6.15vw, 91px)/.91 "Sora", sans-serif;
      letter-spacing: -.072em;
      text-wrap: balance;
      animation: heroReveal .9s .16s both;
    }
    .hero h1 em {
      display: inline-block;
      color: transparent;
      background: linear-gradient(100deg, #f8fbff 5%, #a9c8e4 52%, #6e96bd 100%);
      -webkit-background-clip: text;
      background-clip: text;
      font-style: normal;
    }
    .hero p {
      display: block;
      max-width: 570px;
      margin: 0 0 33px;
      color: rgba(231,239,246,.72);
      font-size: 16px;
      line-height: 1.72;
      animation: heroReveal .9s .27s both;
    }
    .hero-actions {
      display: flex;
      align-items: center;
      gap: 27px;
      margin: 0;
      animation: heroReveal .9s .38s both;
    }
    .hero .hero-primary {
      min-height: 55px;
      padding: 0 22px 0 25px;
      border-radius: 3px;
      background: #f2f6fa;
      color: #102b42;
      box-shadow: 0 18px 45px rgba(1,10,17,.28);
      font-family: "Sora", sans-serif;
      font-size: 13px;
      letter-spacing: -.01em;
    }
    .hero .hero-primary i {
      display: grid;
      width: 28px;
      height: 28px;
      margin-left: 6px;
      place-items: center;
      border-radius: 50%;
      background: #294b76;
      color: #fff;
      transition: transform .25s ease;
    }
    .hero .hero-primary:hover {
      background: #fff;
      color: #102b42;
      box-shadow: 0 22px 50px rgba(1,10,17,.4);
      transform: translateY(-3px);
    }
    .hero .hero-primary:hover i { transform: translateX(3px); }
    .hero-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255,255,255,.28);
      color: rgba(255,255,255,.8);
      font-size: 13px;
      font-weight: 800;
      transition: .25s ease;
    }
    .hero-link:hover { border-color: #fff; color: #fff; }
    .hero-link i { font-size: 13px; }
    .hero-trust {
      display: flex;
      gap: 38px;
      margin-top: 42px;
      animation: heroReveal .9s .49s both;
    }
    .hero-trust > div { display: flex; align-items: center; gap: 12px; }
    .hero-trust > div + div { padding-left: 38px; border-left: 1px solid rgba(255,255,255,.14); }
    .hero-trust i { color: #a9c8e4; font-size: 17px; }
    .hero-trust span { display: grid; gap: 2px; }
    .hero-trust strong { color: #f5f8fb; font: 700 13px/1.3 "Sora", sans-serif; }
    .hero-trust small { color: rgba(222,233,243,.48); font-size: 13px; }

    .hero-dashboard {
      position: relative;
      width: 100%;
      max-width: 470px;
      justify-self: end;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 4px;
      background: linear-gradient(145deg, rgba(7,25,39,.9), rgba(12,40,61,.7));
      box-shadow: 0 35px 90px rgba(1,10,18,.48), inset 0 1px rgba(255,255,255,.08);
      backdrop-filter: blur(18px) saturate(120%);
      animation: dashboardIn 1s .32s both;
    }
    .hero-dashboard::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, rgba(255,255,255,.06), transparent 32%);
      pointer-events: none;
    }
    .dashboard-topline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 20px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .live-badge {
      display: flex;
      align-items: center;
      gap: 9px;
      color: rgba(232,242,249,.76);
      font: 700 13px/1 "Sora", sans-serif;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .live-badge i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #83ddb7;
      box-shadow: 0 0 0 5px rgba(131,221,183,.1), 0 0 15px rgba(131,221,183,.8);
      animation: livePulse 2s ease-in-out infinite;
    }
    .dashboard-code { color: rgba(223,234,242,.35); font: 700 13px/1 "Sora", sans-serif; letter-spacing: .18em; }
    .dashboard-route { position: relative; height: 265px; padding: 26px 25px; overflow: hidden; }
    .dashboard-route::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .52;
      background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: linear-gradient(#000, transparent 94%);
    }
    .route-copy { position: relative; z-index: 2; display: grid; gap: 6px; }
    .route-copy small { color: #82a7c8; font: 700 13px/1 "Sora", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
    .route-copy strong { color: #fff; font: 600 17px/1.2 "Sora", sans-serif; letter-spacing: -.03em; }
    .route-copy strong i { margin: 0 7px; color: #87a9c8; font-size: 13px; }
    .route-map { position: absolute; z-index: 1; right: 18px; bottom: 18px; width: calc(100% - 36px); height: 178px; overflow: visible; }
    .route-map path { fill: none; stroke-linecap: round; }
    .route-road { stroke: rgba(210,229,244,.25); stroke-width: 1.5; stroke-dasharray: 3 8; }
    .route-progress { stroke: #c9def0; stroke-width: 2; stroke-dasharray: 24 250; filter: drop-shadow(0 0 6px rgba(201,222,240,.9)); animation: routeTravel 4.8s linear infinite; }
    .route-map circle { fill: #dcebf7; stroke: #15344d; stroke-width: 5; }
    .route-destination { filter: drop-shadow(0 0 7px #c9def0); animation: destinationPulse 2.2s ease-in-out infinite; transform-origin: 452px 37px; }
    .route-label { position: absolute; z-index: 3; display: grid; gap: 1px; }
    .route-label b { color: #fff; font: 700 13px/1 "Sora", sans-serif; }
    .route-label span { color: rgba(220,233,243,.45); font-size: 13px; text-transform: uppercase; }
    .route-label--start { left: 24px; bottom: 16px; }
    .route-label--end { right: 21px; top: 81px; text-align: right; }
    .dashboard-metrics { border-top: 1px solid rgba(255,255,255,.1); }
    .dashboard-metrics > div {
      display: grid;
      grid-template-columns: 42px 1fr;
      align-items: center;
      min-height: 67px;
      padding: 10px 20px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .dashboard-metrics > div > span { color: #7498b8; font: 600 13px/1 "Sora", sans-serif; }
    .dashboard-metrics p { display: grid; gap: 2px; margin: 0; animation: none; }
    .dashboard-metrics strong { color: #f5f9fc; font: 600 13px/1.3 "Sora", sans-serif; }
    .dashboard-metrics small { color: rgba(220,233,243,.46); font-size: 13px; }
    .dashboard-contact {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 14px;
      padding: 15px 16px;
      border-radius: 2px;
      background: rgba(199,220,238,.1);
      transition: .25s ease;
    }
    .dashboard-contact:hover { background: rgba(199,220,238,.17); }
    .dashboard-contact span { display: grid; gap: 3px; }
    .dashboard-contact small { color: rgba(224,235,244,.52); font-size: 13px; }
    .dashboard-contact strong { color: #fff; font: 600 13px/1.2 "Sora", sans-serif; letter-spacing: .01em; }
    .dashboard-contact > i {
      display: grid;
      width: 35px;
      height: 35px;
      place-items: center;
      border-radius: 50%;
      background: #eef5fa;
      color: #173b58;
      font-size: 13px;
    }

    .hero-rail {
      position: absolute;
      z-index: 4;
      right: 0;
      bottom: 0;
      left: 0;
      height: 54px;
      overflow: hidden;
      border-top: 1px solid rgba(255,255,255,.11);
      background: rgba(5,16,25,.78);
      backdrop-filter: blur(12px);
    }
    .hero-rail-track {
      display: flex;
      align-items: center;
      gap: 30px;
      width: max-content;
      height: 100%;
      color: rgba(225,236,244,.54);
      font: 700 13px/1 "Sora", sans-serif;
      letter-spacing: .17em;
      text-transform: uppercase;
      animation: heroMarquee 28s linear infinite;
    }
    .hero-rail-track i { width: 4px; height: 4px; border-radius: 50%; background: #86a8c7; }
    @keyframes heroReveal { from { opacity: 0; transform: translateY(22px); } }
    @keyframes dashboardIn { from { opacity: 0; transform: perspective(1100px) translateX(35px) rotateY(-4deg); } }
    @keyframes eyebrowRun { 50% { transform: translateX(29px); } }
    @keyframes livePulse { 50% { opacity: .55; box-shadow: 0 0 0 9px rgba(131,221,183,0), 0 0 20px rgba(131,221,183,.45); } }
    @keyframes routeTravel { to { stroke-dashoffset: -274; } }
    @keyframes destinationPulse { 50% { transform: scale(1.45); opacity: .65; } }
    @keyframes heroMarquee { to { transform: translateX(-50%); } }

    @media (max-width: 1050px) {
      .hero { min-height: auto; padding-top: 112px; }
      .hero::before { background: linear-gradient(90deg, #071521 0%, rgba(7,21,33,.94) 50%, rgba(7,21,33,.5) 100%); }
      .hero-shell { grid-template-columns: 1fr; gap: 48px; min-height: 0; padding: 72px 0 105px; }
      .hero-copy { max-width: 760px; }
      .hero h1 { max-width: 720px; }
      .hero-dashboard { max-width: 650px; justify-self: start; }
      .hero-gridlines { left: 35%; }
    }

    @media (max-width: 767px) {
      .hero { min-height: 0; padding: 64px 0 0; }
      .hero::before {
        background:
          linear-gradient(180deg, rgba(7,21,33,.88) 0%, rgba(7,21,33,.95) 48%, #071521 100%),
          linear-gradient(90deg, rgba(7,21,33,.35), rgba(7,21,33,.18));
      }
      .hero::after { background: radial-gradient(360px circle at 76% 25%, rgba(123,171,214,.13), transparent 67%); }
      .hero-backdrop { height: 480px; }
      .hero-backdrop img { object-position: 46% center; opacity: .72; }
      .hero-ambient { display: none; }
      .hero-gridlines { inset: 64px 0 0 0; opacity: .5; }
      .hero-shell { gap: 36px; padding: 56px 0 38px; }
      .hero-copy { max-width: none; }
      .hero-eyebrow { margin-bottom: 20px; font-size: 13px; }
      .hero h1 { margin-bottom: 21px; font-size: clamp(42px, 13.2vw, 62px); line-height: .94; letter-spacing: -.068em; }
      .hero p { max-width: 520px; margin-bottom: 26px; font-size: 14px; line-height: 1.62; }
      .hero-actions { display: flex; align-items: center; gap: 18px; }
      .hero .hero-primary { min-height: 51px; padding-inline: 18px; font-size: 13px; }
      .hero-link { font-size: 13px; }
      .hero-trust { gap: 18px; margin-top: 30px; }
      .hero-trust > div { gap: 9px; }
      .hero-trust > div + div { padding-left: 18px; }
      .hero-trust i { font-size: 14px; }
      .hero-trust strong { font-size: 13px; }
      .hero-trust small { font-size: 13px; }
      .hero-dashboard { max-width: none; transform: none !important; }
      .dashboard-route { height: 235px; }
      .dashboard-metrics > div { min-height: 61px; }
      .hero-rail { position: relative; height: 46px; }
      .hero-rail-track { gap: 24px; font-size: 13px; }
    }

    @media (max-width: 480px) {
      .hero-shell { padding-top: 48px; }
      .hero-actions { align-items: stretch; flex-direction: column; gap: 12px; }
      .hero .hero-primary { width: 100%; }
      .hero-link { align-self: center; }
      .hero-trust { justify-content: space-between; gap: 8px; }
      .hero-trust > div + div { padding-left: 12px; }
      .dashboard-topline { padding: 15px; }
      .dashboard-route { height: 215px; padding: 22px 17px; }
      .route-copy strong { font-size: 14px; }
      .route-label--start { left: 17px; }
      .dashboard-metrics > div { grid-template-columns: 34px 1fr; padding-inline: 15px; }
      .dashboard-contact { margin: 10px; padding: 13px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-backdrop img,
      .hero-ambient,
      .hero-eyebrow span::after,
      .live-badge i,
      .route-progress,
      .route-destination,
      .hero-rail-track { animation: none !important; }
      .hero-eyebrow,
      .hero h1,
      .hero p,
      .hero-actions,
      .hero-trust,
      .hero-dashboard { animation-duration: .01ms !important; }
    }

    /* Paleta clara inspirada en el azul, plata y dorado del logo */
    .hero {
      --logo-navy: #173f73;
      --logo-blue: #3f6493;
      --logo-steel: #7892b2;
      --logo-silver: #aeb8c4;
      --logo-gold: #e8a33c;
      --logo-ice: #f3f7fa;
      background: #e9f0f5;
      color: var(--logo-navy);
    }
    .hero::before {
      background:
        linear-gradient(90deg, rgba(246,249,251,.99) 0%, rgba(243,247,250,.97) 31%, rgba(237,243,247,.82) 55%, rgba(229,238,245,.28) 100%),
        linear-gradient(0deg, rgba(223,233,240,.5), transparent 48%);
    }
    .hero::after {
      background:
        radial-gradient(520px circle at var(--pointer-x) var(--pointer-y), rgba(63,100,147,.14), transparent 66%),
        linear-gradient(90deg, transparent 49.9%, rgba(23,63,115,.08) 50%, transparent 50.1%);
    }
    .hero-backdrop img {
      opacity: .94;
      filter: saturate(.8) contrast(1.02) brightness(1.06);
    }
    .hero-ambient { background: rgba(82,132,180,.17); }
    .hero-gridlines {
      border-left-color: rgba(23,63,115,.1);
      background-image:
        linear-gradient(rgba(23,63,115,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,63,115,.07) 1px, transparent 1px);
    }
    .hero-eyebrow { color: #526b83; }
    .hero-eyebrow span { background: var(--logo-gold); }
    .hero-eyebrow span::after {
      background: #f3b657;
      box-shadow: 0 0 13px rgba(232,163,60,.72);
    }
    .hero h1 { color: var(--logo-navy); }
    .hero h1 em {
      background: linear-gradient(100deg, #1b477d 0%, #5479a6 54%, #91a7be 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .hero p { color: #536779; }
    .hero .hero-primary {
      background: linear-gradient(135deg, #214c7f, #173f73);
      color: #fff;
      box-shadow: 0 18px 36px rgba(23,63,115,.22);
    }
    .hero .hero-primary i { background: var(--logo-gold); color: #173f73; }
    .hero .hero-primary:hover {
      background: linear-gradient(135deg, #2e5d91, #1b477d);
      color: #fff;
      box-shadow: 0 22px 44px rgba(23,63,115,.3);
    }
    .hero-link { border-bottom-color: rgba(23,63,115,.28); color: var(--logo-navy); }
    .hero-link:hover { border-color: var(--logo-gold); color: #0f315c; }
    .hero-trust > div + div { border-left-color: rgba(23,63,115,.15); }
    .hero-trust i { color: var(--logo-gold); }
    .hero-trust strong { color: #244867; }
    .hero-trust small { color: #6e8192; }

    .hero-dashboard {
      border-color: rgba(255,255,255,.78);
      background: linear-gradient(145deg, rgba(255,255,255,.91), rgba(237,243,248,.82));
      box-shadow: 0 32px 80px rgba(26,57,85,.2), inset 0 1px rgba(255,255,255,.95);
      backdrop-filter: blur(22px) saturate(115%);
    }
    .hero-dashboard::before { background: linear-gradient(115deg, rgba(255,255,255,.62), transparent 36%); }
    .dashboard-topline { border-bottom-color: rgba(23,63,115,.12); }
    .live-badge { color: #395a77; }
    .live-badge i {
      background: var(--logo-gold);
      box-shadow: 0 0 0 5px rgba(232,163,60,.13), 0 0 15px rgba(232,163,60,.45);
    }
    .dashboard-code { color: rgba(23,63,115,.42); }
    .dashboard-route::before {
      background-image:
        linear-gradient(rgba(23,63,115,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,63,115,.075) 1px, transparent 1px);
    }
    .route-copy small { color: #6482a1; }
    .route-copy strong { color: var(--logo-navy); }
    .route-copy strong i { color: var(--logo-gold); }
    .route-road { stroke: rgba(23,63,115,.25); }
    .route-progress {
      stroke: var(--logo-blue);
      filter: drop-shadow(0 0 5px rgba(63,100,147,.4));
    }
    .route-map circle { fill: #fff; stroke: var(--logo-blue); }
    .route-destination { fill: var(--logo-gold); filter: drop-shadow(0 0 6px rgba(232,163,60,.55)); }
    .route-label b { color: var(--logo-navy); }
    .route-label span { color: #788a9a; }
    .dashboard-metrics { border-top-color: rgba(23,63,115,.12); }
    .dashboard-metrics > div { border-bottom-color: rgba(23,63,115,.1); }
    .dashboard-metrics > div > span { color: var(--logo-gold); }
    .dashboard-metrics strong { color: #294d6d; }
    .dashboard-metrics small { color: #748696; }
    .dashboard-contact { background: rgba(63,100,147,.1); }
    .dashboard-contact:hover { background: rgba(63,100,147,.16); }
    .dashboard-contact small { color: #6e8192; }
    .dashboard-contact strong { color: var(--logo-navy); }
    .dashboard-contact > i { background: var(--logo-navy); color: #fff; }

    .hero-rail {
      border-top-color: rgba(23,63,115,.12);
      background: rgba(244,248,251,.9);
      box-shadow: 0 -8px 30px rgba(36,72,103,.06);
    }
    .hero-rail-track { color: rgba(23,63,115,.62); }
    .hero-rail-track i { background: var(--logo-gold); }

    @keyframes livePulse {
      50% { opacity: .65; box-shadow: 0 0 0 9px rgba(232,163,60,0), 0 0 19px rgba(232,163,60,.3); }
    }

    @media (max-width: 1050px) {
      .hero::before {
        background: linear-gradient(90deg, rgba(246,249,251,.98) 0%, rgba(241,246,249,.93) 52%, rgba(229,238,245,.58) 100%);
      }
    }

    @media (max-width: 767px) {
      .hero::before {
        background:
          linear-gradient(180deg, rgba(241,246,249,.72) 0%, rgba(243,247,250,.91) 39%, #eef4f7 100%),
          linear-gradient(90deg, rgba(244,248,251,.35), rgba(232,240,246,.25));
      }
      .hero::after { background: radial-gradient(360px circle at 76% 25%, rgba(63,100,147,.12), transparent 67%); }
      .hero-backdrop img { opacity: .66; }
    }

    /* Hero editorial v3 — composición inspirada en interfaces logísticas contemporáneas */
    .hero {
      --pointer-x: 76%;
      --pointer-y: 45%;
      min-height: 900px;
      padding: 112px 0 0;
      background: #f0f5f8;
      color: #163e70;
      isolation: isolate;
      overflow: hidden;
    }
    .hero::before {
      z-index: -3;
      background:
        linear-gradient(115deg, rgba(255,255,255,.94), rgba(237,244,248,.86) 58%, rgba(218,230,239,.66)),
        radial-gradient(circle at 80% 20%, rgba(63,100,147,.13), transparent 38%);
    }
    .hero::after {
      z-index: -2;
      inset: 112px 0 0;
      background:
        radial-gradient(460px circle at var(--pointer-x) var(--pointer-y), rgba(74,118,162,.12), transparent 68%),
        linear-gradient(rgba(23,63,115,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,63,115,.045) 1px, transparent 1px);
      background-size: auto, 70px 70px, 70px 70px;
      mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.28) 48%, transparent 92%);
    }
    .hero-watermark {
      position: absolute;
      z-index: -1;
      top: 92px;
      right: -1.5vw;
      color: rgba(23,63,115,.035);
      font: 800 clamp(150px, 24vw, 360px)/1 "Sora", sans-serif;
      letter-spacing: -.09em;
      pointer-events: none;
      user-select: none;
      animation: watermarkDrift 12s ease-in-out infinite alternate;
    }
    .hero-glow {
      position: absolute;
      z-index: -1;
      top: 18%;
      right: 9%;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      background: rgba(232,163,60,.1);
      filter: blur(100px);
      pointer-events: none;
      animation: editorialGlow 7s ease-in-out infinite alternate;
    }
    .hero-editorial {
      position: relative;
      z-index: 2;
      padding: 42px 0 30px;
    }
    .hero-overline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 19px;
      border-bottom: 1px solid rgba(23,63,115,.17);
      color: #60788e;
      font: 700 13px/1 "Sora", sans-serif;
      letter-spacing: .15em;
      text-transform: uppercase;
      animation: editorialFade .7s .04s both;
    }
    .hero-index::before {
      content: "";
      display: inline-block;
      width: 28px;
      height: 2px;
      margin-right: 10px;
      vertical-align: middle;
      background: #e8a33c;
    }
    .hero-availability { display: flex; align-items: center; gap: 9px; }
    .hero-availability i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #e8a33c;
      box-shadow: 0 0 0 5px rgba(232,163,60,.12);
      animation: availabilityPulse 2.2s ease-in-out infinite;
    }
    .hero-heading-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 350px;
      align-items: end;
      gap: clamp(45px, 7vw, 100px);
      padding-top: 34px;
    }
    .hero h1 {
      max-width: none;
      margin: 0;
      color: #153f73;
      font: 600 clamp(54px, 6.15vw, 88px)/.94 "Sora", sans-serif;
      letter-spacing: -.072em;
      text-wrap: initial;
      animation: none;
    }
    .title-line { display: block; overflow: hidden; padding-bottom: .08em; }
    .title-line b {
      display: block;
      font-weight: inherit;
      transform: translateY(112%);
      animation: titleSweep .95s cubic-bezier(.2,.76,.22,1) forwards;
    }
    .title-line:nth-child(2) b { animation-delay: .12s; }
    .hero h1 em {
      position: relative;
      display: inline-block;
      color: #5579a3;
      background: none;
      -webkit-text-fill-color: currentColor;
      font-style: normal;
    }
    .hero h1 em::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: -.01em;
      left: .04em;
      height: 5px;
      border-radius: 999px;
      background: #e8a33c;
      transform: scaleX(0);
      transform-origin: left;
      animation: accentDraw .8s .85s ease forwards;
    }
    .hero-intro { padding-bottom: 7px; animation: editorialFade .85s .3s both; }
    .intro-rule {
      display: block;
      width: 52px;
      height: 2px;
      margin-bottom: 19px;
      background: linear-gradient(90deg, #e8a33c 0 40%, rgba(23,63,115,.18) 40%);
    }
    .hero-intro p {
      max-width: 350px;
      margin: 0 0 23px;
      color: #536b80;
      font-size: 13px;
      line-height: 1.7;
      animation: none;
    }
    .hero-actions {
      display: flex;
      align-items: center;
      gap: 20px;
      margin: 0;
      animation: none;
    }
    .hero .hero-cta {
      min-height: 50px;
      padding: 0 7px 0 20px;
      border-radius: 999px;
      background: #163f72;
      color: #fff;
      box-shadow: 0 14px 30px rgba(22,63,114,.2);
      font: 700 13px/1 "Sora", sans-serif;
      letter-spacing: .01em;
    }
    .hero .hero-cta i {
      display: grid;
      width: 36px;
      height: 36px;
      margin-left: 5px;
      place-items: center;
      border-radius: 50%;
      background: #e8a33c;
      color: #153f73;
      font-size: 13px;
      transition: transform .3s cubic-bezier(.2,.75,.2,1);
    }
    .hero .hero-cta:hover {
      background: #204f83;
      color: #fff;
      box-shadow: 0 18px 36px rgba(22,63,114,.28);
      transform: translateY(-2px);
    }
    .hero .hero-cta:hover i { transform: rotate(12deg) scale(1.06); }
    .hero-text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #365a7e;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }
    .hero-text-link i { color: #e8a33c; font-size: 13px; transition: transform .25s ease; }
    .hero-text-link:hover i { transform: translateX(4px); }

    .hero-showcase {
      position: relative;
      height: 318px;
      margin-top: 40px;
      perspective: 1100px;
      animation: showcaseRise 1s .38s both;
    }
    .showcase-photo {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border: 7px solid rgba(255,255,255,.88);
      border-radius: 27px;
      background: #b8c9d6;
      box-shadow: 0 24px 65px rgba(30,66,96,.2);
    }
    .showcase-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 61%;
      filter: saturate(.83) contrast(1.02) brightness(1.03);
      animation: showcaseCamera 13s ease-in-out infinite alternate;
    }
    .showcase-tint {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(14,48,79,.48), rgba(14,48,79,.05) 45%, rgba(14,48,79,.17));
    }
    .showcase-location {
      position: absolute;
      z-index: 3;
      top: 24px;
      left: 24px;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 14px;
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 13px;
      background: rgba(14,44,68,.72);
      color: #fff;
      box-shadow: 0 14px 32px rgba(5,24,38,.18);
      backdrop-filter: blur(12px);
      animation: cardFloat 4.5s ease-in-out infinite;
    }
    .showcase-location > i { color: #f0b052; font-size: 13px; }
    .showcase-location span { display: grid; gap: 2px; }
    .showcase-location small { color: rgba(255,255,255,.58); font-size: 13px; text-transform: uppercase; letter-spacing: .09em; }
    .showcase-location strong { font: 600 13px/1.2 "Sora", sans-serif; }
    .showcase-route {
      position: absolute;
      z-index: 4;
      top: 23px;
      right: 23px;
      width: 405px;
      padding: 15px 17px 11px;
      border: 1px solid rgba(255,255,255,.8);
      border-radius: 16px;
      background: rgba(250,252,253,.88);
      box-shadow: 0 18px 44px rgba(18,51,78,.2);
      backdrop-filter: blur(16px);
      animation: cardFloat 5s -.9s ease-in-out infinite;
    }
    .route-head, .route-ends { display: flex; justify-content: space-between; align-items: center; }
    .route-head span { color: #42617e; font: 700 13px/1 "Sora", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
    .route-head b { color: #8a9aaa; font: 700 13px/1 "Sora", sans-serif; letter-spacing: .13em; }
    .showcase-route svg { display: block; width: 100%; height: 70px; margin: 2px 0 -2px; overflow: visible; }
    .showcase-route path { fill: none; stroke-linecap: round; }
    .editorial-road { stroke: rgba(23,63,115,.23); stroke-width: 1.4; stroke-dasharray: 3 7; }
    .editorial-run { stroke: #3f6493; stroke-width: 2.2; stroke-dasharray: 24 230; filter: drop-shadow(0 0 4px rgba(63,100,147,.5)); animation: editorialRoute 4.4s linear infinite; }
    .showcase-route circle { fill: #fff; stroke: #3f6493; stroke-width: 3; }
    .showcase-route circle:last-child { fill: #e8a33c; stroke: #fff; filter: drop-shadow(0 0 5px rgba(232,163,60,.6)); }
    .route-ends { color: #667b8d; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
    .showcase-stat {
      position: absolute;
      z-index: 4;
      bottom: 22px;
      left: 24px;
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 310px;
      padding: 14px 17px;
      border: 1px solid rgba(255,255,255,.32);
      border-radius: 15px;
      background: rgba(12,42,66,.78);
      color: #fff;
      box-shadow: 0 18px 40px rgba(5,24,38,.2);
      backdrop-filter: blur(15px);
    }
    .stat-number { color: #fff; font: 600 25px/1 "Sora", sans-serif; letter-spacing: -.06em; }
    .stat-number span { color: #f0b052; font-size: 13px; letter-spacing: -.03em; }
    .showcase-stat p { display: grid; gap: 3px; margin: 0; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.16); animation: none; }
    .showcase-stat strong { color: #fff; font: 600 13px/1.25 "Sora", sans-serif; }
    .showcase-stat small { color: rgba(255,255,255,.55); font-size: 13px; }
    .showcase-call {
      position: absolute;
      z-index: 4;
      right: 23px;
      bottom: 22px;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 14px 11px 11px;
      border-radius: 999px;
      background: #f8fafb;
      color: #163f72;
      box-shadow: 0 16px 35px rgba(9,32,49,.24);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .showcase-call:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(9,32,49,.3); }
    .showcase-call > i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #e8a33c; font-size: 13px; }
    .showcase-call span { display: grid; gap: 1px; }
    .showcase-call small { color: #738697; font-size: 13px; }
    .showcase-call strong { font: 700 13px/1.2 "Sora", sans-serif; }
    .hero-service-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr) auto;
      align-items: center;
      gap: 24px;
      min-height: 66px;
      border-bottom: 1px solid rgba(23,63,115,.15);
      color: #94a3af;
      font: 600 13px/1 "Sora", sans-serif;
      letter-spacing: .08em;
      text-transform: uppercase;
      animation: editorialFade .8s .72s both;
    }
    .hero-service-strip span { display: flex; align-items: center; gap: 10px; }
    .hero-service-strip b { color: #375a7a; font-size: 13px; letter-spacing: .045em; }
    .hero-service-strip a { display: inline-flex; align-items: center; gap: 9px; color: #163f72; font-size: 13px; font-weight: 800; }
    .hero-service-strip a i { color: #e8a33c; transition: transform .2s ease; }
    .hero-service-strip a:hover i { transform: translateX(4px); }

    @keyframes titleSweep { to { transform: translateY(0); } }
    @keyframes accentDraw { to { transform: scaleX(1); } }
    @keyframes editorialFade { from { opacity: 0; transform: translateY(14px); } }
    @keyframes showcaseRise { from { opacity: 0; transform: translateY(30px) scale(.985); } }
    @keyframes showcaseCamera { to { transform: scale(1.06) translateX(-1%); } }
    @keyframes editorialRoute { to { stroke-dashoffset: -254; } }
    @keyframes cardFloat { 50% { translate: 0 -5px; } }
    @keyframes availabilityPulse { 50% { opacity: .55; box-shadow: 0 0 0 9px rgba(232,163,60,0); } }
    @keyframes watermarkDrift { to { transform: translateX(-2.5%); } }
    @keyframes editorialGlow { to { transform: translate(-10%, 8%) scale(1.15); opacity: .65; } }

    @media (max-width: 1050px) {
      .hero { min-height: 0; }
      .hero-heading-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 42px; }
      .hero h1 { font-size: clamp(49px, 6.7vw, 68px); }
      .showcase-route { width: 370px; }
    }

    @media (max-width: 820px) {
      .hero-heading-grid { grid-template-columns: 1fr; gap: 25px; }
      .hero h1 { max-width: 710px; font-size: clamp(48px, 8.7vw, 66px); }
      .hero-intro { display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: end; }
      .intro-rule { grid-column: 1 / -1; margin-bottom: 0; }
      .hero-intro p { margin-bottom: 0; }
      .showcase-route { width: min(390px, calc(100% - 48px)); }
      .hero-service-strip { grid-template-columns: repeat(3, 1fr); }
      .hero-service-strip a { display: none; }
    }

    @media (max-width: 767px) {
      .hero { padding-top: 64px; background: #f0f5f8; }
      .hero::before { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(228,238,245,.88)); }
      .hero::after { inset: 64px 0 0; }
      .hero-watermark { top: 90px; right: -4vw; font-size: 44vw; }
      .hero-editorial { padding: 30px 0 23px; }
      .hero-overline { padding-bottom: 15px; font-size: 13px; letter-spacing: .1em; }
      .hero-index::before { width: 19px; margin-right: 7px; }
      .hero-heading-grid { gap: 21px; padding-top: 25px; }
      .hero h1 { font-size: clamp(39px, 11.8vw, 56px); line-height: .96; }
      .hero h1 em::after { height: 3px; }
      .hero-intro { display: block; }
      .intro-rule { margin-bottom: 14px; }
      .hero-intro p { max-width: 580px; margin-bottom: 20px; font-size: 13px; }
      .hero-actions { flex-direction: row; align-items: center; gap: 18px; }
      .hero .hero-cta { width: auto; min-height: 48px; }
      .hero-showcase { height: 450px; margin-top: 30px; transform: none !important; }
      .showcase-photo { border-width: 5px; border-radius: 22px; }
      .showcase-photo img { object-position: 38% center; }
      .showcase-location { top: 16px; left: 16px; }
      .showcase-route { top: 78px; right: 16px; width: calc(100% - 32px); }
      .showcase-stat { right: 16px; bottom: 78px; left: 16px; min-width: 0; }
      .showcase-call { right: 16px; bottom: 17px; left: 16px; justify-content: center; }
      .hero-service-strip { display: flex; gap: 24px; min-height: 58px; overflow-x: auto; scrollbar-width: none; }
      .hero-service-strip::-webkit-scrollbar { display: none; }
      .hero-service-strip span { flex: 0 0 auto; }
    }

    @media (max-width: 460px) {
      .hero-availability { max-width: 118px; text-align: right; line-height: 1.35; }
      .hero h1 { font-size: clamp(36px, 11.2vw, 48px); }
      .hero-actions { align-items: stretch; flex-direction: column; gap: 12px; }
      .hero .hero-cta { width: 100%; }
      .hero-text-link { justify-content: center; }
      .hero-showcase { height: 430px; }
      .showcase-route { padding-inline: 12px; }
      .showcase-stat { gap: 10px; padding: 12px 13px; }
      .stat-number { font-size: 21px; }
      .showcase-stat p { padding-left: 10px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .title-line b,
      .hero h1 em::after,
      .hero-showcase,
      .showcase-photo img,
      .editorial-run,
      .showcase-location,
      .showcase-route,
      .hero-availability i,
      .hero-watermark,
      .hero-glow { animation: none !important; }
      .title-line b { transform: none; }
      .hero h1 em::after { transform: scaleX(1); }
    }

    /* Hero cinematic v4 — réplica adaptada a la identidad Nissi */
    .hero {
      min-height: max(760px, 100svh);
      padding: 112px 0 0;
      background: #081522;
      color: #fff;
    }
    .hero::before {
      z-index: -2;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(5,16,27,.98) 0%, rgba(8,27,43,.92) 34%, rgba(10,33,51,.45) 65%, rgba(5,16,25,.7) 100%),
        linear-gradient(0deg, rgba(4,13,22,.94) 0%, transparent 43%);
    }
    .hero::after {
      z-index: -1;
      inset: 112px 0 0;
      background:
        radial-gradient(500px circle at var(--pointer-x) var(--pointer-y), rgba(86,136,181,.19), transparent 67%),
        linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.055) 50%, transparent 50.1%);
      background-size: auto;
      mask-image: none;
    }
    .hero-truck-bg {
      position: absolute;
      z-index: -3;
      inset: 0;
      overflow: hidden;
    }
    .hero-truck-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 62% center;
      filter: saturate(.68) contrast(1.12) brightness(.78) hue-rotate(8deg);
      transform: scale(1.025);
      animation: cinematicTruck 15s ease-in-out infinite alternate;
    }
    .hero-cinematic-overlay {
      position: absolute;
      z-index: -1;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(110deg, rgba(27,70,108,.22), transparent 40%),
        repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,.025) 120px);
      mix-blend-mode: screen;
    }
    .hero-speed-lines { position: absolute; z-index: 0; inset: 112px 0 0; overflow: hidden; pointer-events: none; }
    .hero-speed-lines i {
      position: absolute;
      left: -30%;
      width: 25%;
      height: 1px;
      opacity: 0;
      background: linear-gradient(90deg, transparent, rgba(186,214,237,.6), transparent);
      animation: speedLine 5.5s linear infinite;
    }
    .hero-speed-lines i:nth-child(1) { top: 28%; }
    .hero-speed-lines i:nth-child(2) { top: 51%; animation-delay: -1.8s; animation-duration: 7s; }
    .hero-speed-lines i:nth-child(3) { top: 69%; animation-delay: -3.4s; animation-duration: 6.2s; }

    .hero-cinematic {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 355px;
      align-items: center;
      gap: clamp(55px, 8vw, 125px);
      min-height: calc(max(760px, 100svh) - 112px);
      padding: 60px 0 128px;
    }
    .hero-main-copy {
      max-width: 850px;
      animation: heroBlockIn .78s .05s cubic-bezier(.2,.76,.22,1) both;
    }
    .cinematic-kicker {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
      color: rgba(224,237,247,.68);
      font: 700 13px/1 "Sora", sans-serif;
      letter-spacing: .15em;
      text-transform: uppercase;
      animation: none;
    }
    .cinematic-kicker > span:first-child { color: #f1b158; }
    .cinematic-kicker i { width: 28px; height: 1px; background: rgba(255,255,255,.25); }
    .hero-main-copy h1 {
      max-width: 850px;
      margin: 0 0 23px;
      color: #fff;
      font: 700 clamp(48px, 5.5vw, 76px)/.92 "Sora", sans-serif;
      letter-spacing: -.066em;
      text-shadow: 0 10px 36px rgba(0,0,0,.3);
    }
    .hero-main-copy h1 > span { display: block; overflow: hidden; padding-bottom: .06em; }
    .hero-main-copy h1 > span::before {
      content: "";
      position: absolute;
    }
    .hero-main-copy h1 > span {
      animation: none;
    }
    .hero-main-copy h1 > span:nth-child(2),
    .hero-main-copy h1 > span:nth-child(3) { animation-delay: 0s; }
    .hero-main-copy h1 em {
      color: #a9c6df;
      background: none;
      -webkit-text-fill-color: currentColor;
      font-style: normal;
    }
    .hero-main-copy h1 em::after { display: none; }
    .hero-main-copy > p {
      display: block;
      max-width: 510px;
      margin: 0 0 27px;
      color: rgba(229,238,246,.72);
      font-size: 13px;
      line-height: 1.7;
      animation: none;
    }
    .cinematic-actions {
      display: flex;
      align-items: center;
      gap: 18px;
      animation: none;
    }
    .hero .cinematic-primary {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 52px;
      padding: 0 8px 0 22px;
      border-radius: 12px;
      border: 1px solid #ffffff;
      background: linear-gradient(135deg, #ffffff 0%, #edf4f9 100%);
      color: #173f73;
      box-shadow: 0 12px 32px rgba(0,0,0,.28);
      font: 700 13px/1 "Manrope", system-ui, sans-serif;
      text-decoration: none;
      transition: all .28s ease;
    }
    .hero .cinematic-primary i {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border-radius: 8px;
      background: linear-gradient(135deg, #f5b84c 0%, #e8a33c 100%);
      color: #173f73;
      font-size: 13px;
      transition: transform .25s ease, background-color .25s ease;
    }
    .hero .cinematic-primary:hover {
      background: #ffffff;
      color: #0d294d;
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(0,0,0,.36);
    }
    .hero .cinematic-primary:hover i {
      transform: translateX(3px);
      background: #f0ab43;
    }
    .cinematic-play {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-height: 52px;
      padding: 0 20px 0 8px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.42);
      background: rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(12px);
      color: #ffffff;
      font: 700 13px/1 "Manrope", system-ui, sans-serif;
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
      text-decoration: none;
      transition: all .28s ease;
    }
    .cinematic-play > i {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      background: rgba(255, 255, 255, 0.22);
      color: #ffffff;
      font-size: 12px;
      transition: all .25s ease;
    }
    .cinematic-play:hover {
      background: rgba(255, 255, 255, 0.28);
      border-color: rgba(255, 255, 255, 0.65);
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(0,0,0,.26);
    }
    .cinematic-play:hover > i {
      border-color: #e8a33c;
      background: #e8a33c;
      color: #173f73;
      transform: scale(1.05);
    }
    .hero-confidence {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 33px;
      animation: none;
    }
    .confidence-icons { display: flex; }
    .confidence-icons span {
      display: grid;
      width: 31px;
      height: 31px;
      margin-left: -6px;
      place-items: center;
      border: 2px solid rgba(6,22,35,.85);
      border-radius: 50%;
      background: #375d82;
      color: #fff;
      font-size: 13px;
    }
    .confidence-icons span:first-child { margin-left: 0; background: #e8a33c; color: #173f73; }
    .hero-confidence > p { display: grid; gap: 2px; margin: 0; animation: none; }
    .hero-confidence strong { color: #fff; font: 600 13px/1.25 "Sora", sans-serif; }
    .hero-confidence p span { color: rgba(229,238,246,.48); font-size: 13px; }

    .hero-quote-card {
      width: 100%;
      padding: 24px;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 4px;
      background: rgba(248,251,253,.95);
      color: #173f73;
      box-shadow: 0 28px 70px rgba(0,0,0,.4), inset 0 1px #fff;
      backdrop-filter: blur(17px);
      transform: none;
      animation: quoteCardIn .78s .05s cubic-bezier(.2,.76,.22,1) both;
    }
    .quote-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
    .quote-card-head small { display: block; margin-bottom: 5px; color: #7790a6; font: 700 13px/1 "Sora", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
    .quote-card-head h2 { color: #173f73; font: 650 20px/1.15 "Sora", sans-serif; letter-spacing: -.04em; }
    .quote-card-head > span { color: rgba(23,63,115,.18); font: 700 28px/1 "Sora", sans-serif; }
    .hero-quote-card > p { margin: 0 0 17px; color: #6a7e90; font-size: 13px; line-height: 1.55; animation: none; }
    .hero-quote-card label { display: block; margin: 11px 0 6px; color: #43627e; font: 700 13px/1 "Sora", sans-serif; letter-spacing: .07em; text-transform: uppercase; }
    .hero-field {
      position: relative;
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 43px;
      padding: 0 12px;
      border: 1px solid #dbe4eb;
      border-radius: 3px;
      background: #fff;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .hero-field:focus-within { border-color: #6489ad; box-shadow: 0 0 0 3px rgba(63,100,147,.1); }
    .hero-field > i { width: 13px; color: #e8a33c; font-size: 13px; }
    .hero-field input, .hero-field select {
      width: 100%;
      height: 41px;
      border: 0;
      outline: 0;
      appearance: none;
      background: transparent;
      color: #294b68;
      font: 600 13px "Manrope", sans-serif;
    }
    .hero-field input::placeholder { color: #a1afbb; }
    .hero-field .field-chevron { position: absolute; right: 12px; width: auto; color: #8193a3; font-size: 13px; pointer-events: none; }
    .hero-quote-submit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 47px;
      margin-top: 17px;
      padding: 0 7px 0 17px;
      border: 0;
      border-radius: 3px;
      background: linear-gradient(135deg, #315d8c, #173f73);
      color: #fff;
      font: 700 13px/1 "Sora", sans-serif;
      cursor: pointer;
      box-shadow: 0 12px 25px rgba(23,63,115,.2);
      transition: .25s ease;
    }
    .hero-quote-submit i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 2px; background: #e8a33c; color: #173f73; }
    .hero-quote-submit:hover { background: linear-gradient(135deg, #173f73, #102f54); box-shadow: 0 16px 31px rgba(23,63,115,.28); }
    .hero-quote-submit i { transition: transform .22s cubic-bezier(.22,1,.36,1), background-color .22s ease; }
    .hero-quote-submit:hover i { transform: translateX(3px); background: #f1b04e; }
    .quote-security { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 11px; color: #91a0ad; font-size: 13px; }
    .quote-security i { color: #7892a9; }

    .hero-metrics {
      position: absolute;
      right: 0;
      bottom: 24px;
      left: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr) 1.5fr;
      min-height: 74px;
      border: 1px solid rgba(184, 198, 209, 0.32);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(5,19,31,.75);
      backdrop-filter: blur(13px);
      box-shadow: 0 14px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14);
      animation: heroBlockIn .78s .05s cubic-bezier(.2,.76,.22,1) both;
    }
    .hero-metrics::before {
      content: "";
      position: absolute;
      top: 0;
      left: 20px;
      width: 44px;
      height: 3px;
      background: #8a9fb4;
      border-radius: 0 0 3px 3px;
      opacity: 0.9;
      z-index: 2;
    }
    .hero-metrics > div { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-right: 1px solid rgba(255,255,255,.12); }
    .hero-metrics > div strong { color: #fff; font: 600 19px/1 "Sora", sans-serif; letter-spacing: -.05em; }
    .hero-metrics > div span { color: rgba(223,235,244,.52); font-size: 13px; line-height: 1.4; text-transform: uppercase; letter-spacing: .05em; }
    .hero-metrics > a { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 10px 18px; }
    .hero-metrics > a > i { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: #e8a33c; color: #173f73; font-size: 13px; }
    .hero-metrics > a span { display: grid; gap: 2px; }
    .hero-metrics > a small { color: rgba(223,235,244,.5); font-size: 13px; }
    .hero-metrics > a b { color: #fff; font: 600 13px/1.2 "Sora", sans-serif; }

    .hero-route-bridge {
      position: absolute;
      z-index: 3;
      right: max(19px, calc((100vw - min(var(--container), calc(100% - 38px))) / 2));
      bottom: 0;
      left: max(19px, calc((100vw - min(var(--container), calc(100% - 38px))) / 2));
      height: 1px;
      overflow: visible;
      background: rgba(215,228,238,.2);
    }
    .hero-route-bridge span {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #e8a33c 0 8%, rgba(219,231,240,.82) 22%, rgba(219,231,240,.14) 100%);
      transform-origin: left center;
    }
    .hero-route-bridge i {
      position: absolute;
      top: 50%;
      left: 8%;
      width: 7px;
      height: 7px;
      border: 2px solid #0a1c2d;
      border-radius: 50%;
      background: #e8a33c;
      box-shadow: 0 0 0 4px rgba(232,163,60,.15);
      transform: translate(-50%, -50%);
    }

    @keyframes cinematicTruck { to { transform: scale(1.09) translateX(-1.5%); } }
    @keyframes speedLine { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: .7; } 70%,100% { opacity: 0; transform: translateX(560%); } }
    @keyframes cinematicTitle { from { opacity: 0; transform: translateY(42px); clip-path: inset(100% 0 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0); } }
    @keyframes cinematicReveal { from { opacity: 0; transform: translateY(18px); } }
    @keyframes quoteCardIn { from { opacity: 0; transform: perspective(1100px) translateX(40px) rotateY(-5deg); } }
    @keyframes heroBlockIn { from { opacity: 0; transform: translate3d(0,20px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

    @media (max-width: 980px) {
      .hero-cinematic { grid-template-columns: minmax(0, 1fr) 330px; gap: 38px; }
      .hero-main-copy h1 { font-size: clamp(43px, 6.1vw, 60px); }
      .hero-metrics { grid-template-columns: repeat(3, 1fr); }
      .hero-metrics > a { display: none; }
    }

    @media (max-width: 767px) {
      .hero { min-height: 0; padding-top: 64px; }
      .hero::before {
        background:
          linear-gradient(180deg, rgba(5,17,28,.72), rgba(5,18,30,.94) 46%, #071725 100%),
          linear-gradient(90deg, rgba(7,23,36,.8), rgba(8,27,43,.3));
      }
      .hero::after { inset: 64px 0 0; }
      .hero-truck-bg { height: 580px; }
      .hero-truck-bg img { object-position: 56% center; }
      .hero-speed-lines { inset: 64px 0 0; }
      .hero-cinematic { grid-template-columns: 1fr; gap: 42px; min-height: 0; padding: 55px 0 32px; }
      .hero-main-copy { max-width: 610px; }
      .cinematic-kicker { margin-bottom: 18px; }
      .hero-main-copy h1 { max-width: 590px; font-size: clamp(42px, 11vw, 60px); }
      .hero-main-copy > p { max-width: 500px; font-size: 13px; }
      .hero-quote-card { max-width: 500px; justify-self: center; transform: none !important; }
      .hero-metrics { position: relative; right: auto; bottom: auto; left: auto; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 2px; }
      .hero-metrics > div { align-items: flex-start; flex-direction: column; gap: 5px; padding: 14px 10px; }
      .hero-metrics > div strong { font-size: 16px; }
    }

    @media (max-width: 460px) {
      .hero-cinematic { padding-top: 45px; }
      .cinematic-kicker { gap: 8px; font-size: 13px; }
      .cinematic-kicker i { width: 17px; }
      .hero-main-copy h1 { font-size: clamp(37px, 10.8vw, 49px); }
      .cinematic-actions { align-items: stretch; flex-direction: column; gap: 13px; }
      .hero .cinematic-primary { width: 100%; }
      .cinematic-play { justify-content: center; }
      .hero-confidence { margin-top: 25px; }
      .hero-quote-card { padding: 19px; }
      .hero-metrics > div span { font-size: 13px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-truck-bg img,
      .hero-speed-lines i,
      .hero-main-copy h1 > span,
      .hero-quote-card { animation: none !important; }
    }

    /* Preloader cinematic — camión Nissi en ruta */
    .preloader {
      position: fixed;
      z-index: 9999;
      inset: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 76% 36%, rgba(72,117,158,.24), transparent 31%),
        radial-gradient(circle at 22% 80%, rgba(232,163,60,.08), transparent 24%),
        linear-gradient(145deg, #071522, #102f49 58%, #173f5e);
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: transform .8s cubic-bezier(.76,0,.24,1), opacity .62s ease, visibility .8s;
    }
    .preloader::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .4;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle, #000, transparent 76%);
    }
    .preloader::after {
      content: "";
      position: absolute;
      right: -9vw;
      bottom: -24vw;
      width: 52vw;
      height: 52vw;
      border: 1px solid rgba(174,196,215,.12);
      border-radius: 50%;
      box-shadow: 0 0 0 70px rgba(174,196,215,.025), 0 0 0 140px rgba(174,196,215,.018);
    }
    .preloader.hide {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-102%);
    }
    .loader-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 440px;
      height: 190px;
      border-radius: 50%;
      background: rgba(79,131,177,.17);
      filter: blur(75px);
      transform: translate(-50%, -38%);
      animation: loaderGlowPulse 2.2s ease-in-out infinite alternate;
    }
    .loader-world {
      position: relative;
      z-index: 2;
      width: min(620px, calc(100vw - 38px));
      color: #fff;
    }
    .loader-brand { display: grid; justify-items: center; gap: 10px; }
    .loader-brand img { width: 210px; height: 70px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.2)); }
    .loader-brand span {
      color: rgba(222,235,245,.6);
      font: 700 13px/1 "Sora", sans-serif;
      letter-spacing: .24em;
      text-transform: uppercase;
      animation: loaderTextPulse 1.5s ease-in-out infinite;
    }
    .loader-scene { position: relative; height: 230px; overflow: hidden; }
    .loader-scene::before {
      content: "";
      position: absolute;
      right: 7%;
      bottom: 29px;
      left: 7%;
      height: 54px;
      border-radius: 50%;
      background: rgba(0,0,0,.22);
      filter: blur(17px);
    }
    .loader-speed { position: absolute; inset: 40px 0 48px; overflow: hidden; }
    .loader-speed i {
      position: absolute;
      right: -28%;
      width: 34%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(198,221,238,.5));
      animation: loaderSpeed 1.5s linear infinite;
    }
    .loader-speed i:nth-child(1) { top: 20%; }
    .loader-speed i:nth-child(2) { top: 51%; animation-delay: -.5s; width: 22%; }
    .loader-speed i:nth-child(3) { top: 78%; animation-delay: -1s; width: 42%; }
    .loader-truck-wrap {
      --truck-scale: 1;
      position: absolute;
      z-index: 3;
      bottom: 36px;
      left: 50%;
      width: 390px;
      height: 132px;
      transform: translateX(-50%) scale(var(--truck-scale));
      transform-origin: center bottom;
      animation: loaderTruckEnter .85s cubic-bezier(.16,.82,.3,1) both;
    }
    .loader-truck { position: absolute; right: 36px; bottom: 0; width: 330px; height: 114px; animation: loaderSuspension .55s ease-in-out .85s infinite alternate; }
    .loader-trailer {
      position: absolute;
      top: 8px;
      left: 0;
      width: 232px;
      height: 78px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.78);
      border-radius: 4px 3px 2px 3px;
      background: linear-gradient(160deg, #f9fbfc 0%, #cbd5de 58%, #9eacb9 100%);
      box-shadow: 0 11px 25px rgba(0,0,0,.24), inset 0 1px #fff;
    }
    .loader-trailer::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .18;
      background: repeating-linear-gradient(90deg, transparent 0 12px, #31577b 13px 14px);
    }
    .loader-trailer::after {
      content: "";
      position: absolute;
      right: -28px;
      bottom: -42px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(44,81,116,.13);
    }
    .loader-trailer span { position: absolute; z-index: 2; top: 24px; left: 22px; color: #173f73; font: 800 24px/1 "Sora", sans-serif; letter-spacing: -.06em; }
    .loader-trailer i { position: absolute; z-index: 2; top: 25px; left: 91px; width: 84px; height: 3px; border-radius: 999px; background: #e8a33c; }
    .loader-trailer b { position: absolute; z-index: 2; top: 39px; left: 93px; color: #58738e; font: 700 13px/1 "Sora", sans-serif; letter-spacing: .15em; }
    .loader-chassis { position: absolute; z-index: 1; bottom: 20px; left: 7px; width: 289px; height: 8px; border-radius: 3px; background: #7790a5; box-shadow: inset 0 2px rgba(255,255,255,.28); }
    .loader-cab {
      position: absolute;
      z-index: 2;
      right: 2px;
      bottom: 21px;
      width: 94px;
      height: 69px;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 4px 13px 4px 3px;
      background: linear-gradient(145deg, #416b92, #1f486e 60%, #173a5c);
      clip-path: polygon(0 0, 59% 0, 100% 34%, 100% 100%, 0 100%);
      box-shadow: 8px 10px 20px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.35);
    }
    .loader-window { position: absolute; top: 8px; right: 11px; width: 41px; height: 25px; border-radius: 2px 8px 2px 2px; background: linear-gradient(145deg, #a9c7dd, #31536f 68%); clip-path: polygon(0 0, 58% 0, 100% 65%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 2px rgba(8,30,48,.5); }
    .loader-grille { position: absolute; right: 4px; bottom: 10px; width: 20px; height: 18px; border-radius: 2px; opacity: .72; background: repeating-linear-gradient(0deg, #aec0cf 0 2px, #203d56 2px 4px); }
    .loader-headlight { position: absolute; right: 1px; bottom: 29px; width: 8px; height: 6px; border-radius: 4px 1px 1px 4px; background: #ffd47d; box-shadow: 0 0 9px #ffc65d; animation: headlightPulse .75s ease-in-out infinite alternate; }
    .loader-wheel {
      position: absolute;
      z-index: 4;
      bottom: 4px;
      width: 32px;
      height: 32px;
      padding: 5px;
      border: 3px solid #07131d;
      border-radius: 50%;
      background: #24394b;
      box-shadow: 0 2px 4px rgba(0,0,0,.5);
      animation: loaderWheelSpin .48s linear infinite;
    }
    .loader-wheel i { display: block; width: 100%; height: 100%; border: 3px dotted #bcc9d4; border-radius: 50%; background: #45627a; }
    .loader-wheel--one { left: 35px; }
    .loader-wheel--two { left: 184px; }
    .loader-wheel--three { right: 16px; }
    .loader-lightbeam { position: absolute; z-index: 1; right: -52px; bottom: 45px; width: 118px; height: 25px; opacity: .42; background: linear-gradient(90deg, rgba(255,207,111,.5), transparent); clip-path: polygon(0 39%, 100% 0, 100% 100%, 0 61%); animation: beamPulse .8s ease-in-out infinite alternate; }
    .loader-exhaust { position: absolute; z-index: 1; top: 44px; left: 24px; }
    .loader-exhaust i { position: absolute; width: 12px; height: 7px; border-radius: 50%; background: rgba(188,207,220,.2); filter: blur(2px); animation: exhaustCloud 1.4s ease-out infinite; }
    .loader-exhaust i:nth-child(2) { animation-delay: -.45s; }
    .loader-exhaust i:nth-child(3) { animation-delay: -.9s; }
    .loader-roadway { position: absolute; right: -20%; bottom: 28px; left: -20%; height: 4px; overflow: hidden; background: rgba(209,225,237,.22); box-shadow: 0 12px 0 rgba(255,255,255,.04); }
    .loader-roadway span { position: absolute; top: 1px; width: 55px; height: 2px; background: rgba(238,245,250,.82); animation: roadDash 1s linear infinite; }
    .loader-roadway span:nth-child(1) { left: 5%; }
    .loader-roadway span:nth-child(2) { left: 35%; }
    .loader-roadway span:nth-child(3) { left: 65%; }
    .loader-roadway span:nth-child(4) { left: 95%; }
    .loader-status { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; color: rgba(224,236,245,.58); font: 700 13px/1 "Sora", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
    .loader-status strong { color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
    .loader-progress { position: relative; height: 2px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.13); }
    .loader-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7297b9, #d6e4ef 72%, #e8a33c); box-shadow: 0 0 12px rgba(214,228,239,.55); transform: scaleX(0); transform-origin: left; will-change: transform; }

    @keyframes loaderTruckEnter { from { opacity: 0; transform: translateX(-180%) scale(var(--truck-scale)); } to { opacity: 1; transform: translateX(-50%) scale(var(--truck-scale)); } }
    @keyframes loaderSuspension { to { transform: translateY(-2px) rotate(.18deg); } }
    @keyframes loaderWheelSpin { to { transform: rotate(-360deg); } }
    @keyframes roadDash { to { transform: translateX(-185px); } }
    @keyframes loaderSpeed { from { opacity: 0; transform: translateX(0); } 20% { opacity: .55; } to { opacity: 0; transform: translateX(-500%); } }
    @keyframes exhaustCloud { from { opacity: 0; transform: translate(0,0) scale(.6); } 35% { opacity: .65; } to { opacity: 0; transform: translate(-38px,-15px) scale(2.2); } }
    @keyframes headlightPulse { to { opacity: .72; box-shadow: 0 0 15px #ffc65d; } }
    @keyframes beamPulse { to { opacity: .7; transform: scaleX(1.08); } }
    @keyframes loaderGlowPulse { to { opacity: .55; transform: translate(-50%,-38%) scale(1.13); } }
    @keyframes loaderTextPulse { 50% { color: rgba(255,255,255,.88); } }

    @media (max-width: 520px) {
      .preloader { display: grid; }
      .loader-world { width: calc(100vw - 28px); }
      .loader-brand img { width: 178px; height: 60px; }
      .loader-scene { height: 205px; }
      .loader-truck-wrap { --truck-scale: .82; bottom: 31px; }
      .loader-roadway { bottom: 23px; }
      .loader-status { margin-top: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .preloader,
      .preloader.hide,
      .preloader.hide .loader-world {
        transition: none !important;
      }
      .loader-glow,
      .loader-brand span,
      .loader-speed i,
      .loader-truck-wrap,
      .loader-truck,
      .loader-wheel,
      .loader-headlight,
      .loader-lightbeam,
      .loader-exhaust i,
      .loader-roadway span { animation: none !important; }
    }

    /* Sincronización de carga: evita que las animaciones ocurran detrás del preloader */
    html.is-loading body { overflow: hidden; }
    html.is-loading .hero,
    html.is-loading .hero * { animation-play-state: paused !important; }
    .preloader:not(.is-running) .loader-glow,
    .preloader:not(.is-running) .loader-brand span,
    .preloader:not(.is-running) .loader-speed i,
    .preloader:not(.is-running) .loader-truck-wrap,
    .preloader:not(.is-running) .loader-truck,
    .preloader:not(.is-running) .loader-wheel,
    .preloader:not(.is-running) .loader-headlight,
    .preloader:not(.is-running) .loader-lightbeam,
    .preloader:not(.is-running) .loader-exhaust i,
    .preloader:not(.is-running) .loader-roadway span { animation-play-state: paused !important; }
    .preloader.hide .loader-world {
      opacity: 0;
      transform: translate3d(12%, -8px, 0) scale(.99);
      transition: opacity .24s ease, transform .48s cubic-bezier(.4,0,1,1);
    }
    .preloader.is-complete { display: none; }

    /* Optimización de composición para movimiento fluido */
    .preloader,
    .loader-world,
    .loader-truck-wrap,
    .loader-truck,
    .loader-wheel,
    .loader-roadway span,
    .hero-quote-card {
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }
    .preloader { will-change: transform, opacity; }
    .loader-world { will-change: transform, opacity; }
    .loader-truck-wrap,
    .loader-truck,
    .loader-wheel,
    .loader-roadway span,
    .hero-quote-card { will-change: transform, opacity; }

    @keyframes cinematicTitle {
      from { opacity: 0; transform: translate3d(0,28px,0); }
      to { opacity: 1; transform: translate3d(0,0,0); }
    }
    @keyframes headlightPulse {
      from { opacity: .7; }
      to { opacity: 1; }
    }

    /* Entrada unificada con GSAP y respaldo sin dependencia externa */
    html.motion-managed .hero-main-copy,
    html.motion-managed .hero-quote-card,
    html.motion-managed .hero-metrics {
      opacity: 0;
      animation: none !important;
    }
    html.motion-managed .hero-main-copy h1 {
      animation: none !important;
    }
    html.motion-managed.motion-complete .hero-main-copy,
    html.motion-managed.motion-complete .hero-quote-card,
    html.motion-managed.motion-complete .hero-metrics,
    html.motion-managed.motion-static .hero-main-copy,
    html.motion-managed.motion-static .hero-quote-card,
    html.motion-managed.motion-static .hero-metrics {
      opacity: 1;
    }
    html.motion-managed.motion-fallback .hero-main-copy,
    html.motion-managed.motion-fallback .hero-quote-card,
    html.motion-managed.motion-fallback .hero-metrics {
      animation: heroUnifiedFallback .9s cubic-bezier(.2,.76,.22,1) both !important;
    }
    @keyframes heroUnifiedFallback {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Capas estáticas: evita repintados grandes durante la entrada */
    .loader-glow {
      opacity: .72;
      animation: none;
    }
    .hero-truck-bg img {
      transform: scale(1.035);
      animation: none;
    }
    .hero::after {
      background: linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.045) 50%, transparent 50.1%);
    }
    .hero-quote-card {
      background: rgba(248,251,253,.985);
      backdrop-filter: none;
    }
    .hero-metrics {
      background: rgba(5,19,31,.84);
      backdrop-filter: none;
    }

    /* Capa final de movimiento: una sola fuente de tiempos y sin animaciones ocultas. */
    .hero::before {
      animation: none !important;
      transform: none;
    }

    html.motion-reveal-managed .reveal {
      opacity: 0;
      transform: translate3d(0, 24px, 0);
      transition: none !important;
      transition-delay: 0s !important;
      will-change: auto;
    }

    html.motion-reveal-managed .reveal.is-revealing {
      will-change: transform, opacity;
    }

    html.motion-reveal-managed .reveal.show {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      will-change: auto;
    }

    .reveal.delay-1,
    .reveal.delay-2,
    .reveal.delay-3,
    .reveal.delay-4 {
      transition-delay: 0s !important;
    }

    .cta-content,
    .cta-badge,
    .cta-badge i,
    .cta h2,
    .cta p,
    .cta-actions,
    .cta-trust,
    .cta-image,
    .cta-image img {
      animation: none !important;
    }

    .tab-content.active {
      animation: tabPanelIn .58s cubic-bezier(.22, 1, .36, 1) both;
    }
    html.gsap-active .tab-content.active { animation: none; }

    @keyframes tabPanelIn {
      from { opacity: 0; transform: translate3d(0, 14px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    .testimonial-track {
      transition: transform .68s cubic-bezier(.22, 1, .36, 1);
      will-change: auto;
    }

    .testimonial-wrap.is-moving .testimonial-track {
      will-change: transform;
    }

    /* Microinteracciones por función: carga, vehículo, etapa y control. */
    .service-card::after,
    .fleet-card::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, #e8a33c, #6e87aa);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .32s cubic-bezier(.22,1,.36,1);
    }
    .fleet-card { position: relative; }
    .service-link i,
    .fleet-content,
    .feature-icon,
    .process-icon,
    .round-btn i {
      transition: transform .26s cubic-bezier(.22,1,.36,1);
    }
    .tab-btn {
      position: relative;
      isolation: isolate;
    }
    .tab-btn::after {
      content: "";
      position: absolute;
      right: 14px;
      bottom: 7px;
      left: 14px;
      height: 1px;
      background: currentColor;
      opacity: .45;
      transform: scaleX(0);
      transition: transform .24s cubic-bezier(.22,1,.36,1);
    }
    .tab-btn.active::after { transform: scaleX(1); }
    .process-card { z-index: 1; }
    .process-card.is-active {
      border-color: rgba(232,163,60,.68);
      box-shadow: 0 20px 50px rgba(5,23,42,.15), 0 0 0 1px rgba(232,163,60,.12);
    }
    .process-card.is-active .process-icon {
      transform: scale(.96);
      box-shadow: 0 14px 32px rgba(232,163,60,.24);
    }
    .service-card,
    .fleet-card,
    .process-card {
      transition: transform .48s cubic-bezier(.34,1.56,.64,1), border-color .25s ease, box-shadow .32s ease;
    }
    :is(.service-link, .round-btn, .tab-btn):focus-visible {
      outline: 3px solid #e8a33c;
      outline-offset: 3px;
    }
    :is(.btn, .hero-quote-submit, .round-btn, .tab-btn, .service-link, .whatsapp-float):active {
      transform: scale(.98);
    }

    @media (hover: hover) and (pointer: fine) {
      .service-card:hover { transform: translate3d(0,-5px,0) scale(1.004); }
      .fleet-card:hover { transform: translate3d(0,-5px,0); }
      .process-card:hover { transform: translate3d(0,-4px,0) scale(1.006); }
      .service-card:hover::after,
      .fleet-card:hover::after { transform: scaleX(1); }
      .service-card:hover .service-link i { transform: translateX(5px); }
      .fleet-card:hover img { transform: scale(1.045); }
      .fleet-card:hover .fleet-content { transform: translateX(3px); }
      .feature-tile:hover .feature-icon { transform: translateX(3px); }
      .process-card:hover .process-icon { transform: scale(.96); }
      .round-btn:hover i { transform: translateX(2px); }
      #prevTest:hover i { transform: translateX(-2px); }
      .tab-btn:hover::after { transform: scaleX(.55); }
      .tab-btn.active:hover::after { transform: scaleX(1); }
    }

    .marquee-track {
      animation-play-state: paused;
      will-change: auto;
    }

    .marquee.is-visible .marquee-track {
      animation-play-state: running;
      will-change: transform;
    }

    html.motion-complete .hero-main-copy,
    html.motion-complete .hero-quote-card,
    html.motion-complete .hero-metrics {
      will-change: auto;
    }

    @media (max-width: 767px) {
      .hero-route-bridge { right: 19px; left: 19px; }
      .process-grid::after { display: none; }
      html.motion-reveal-managed .reveal {
        transform: translate3d(0, 16px, 0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-route-bridge span { transform: none !important; }
      html.motion-reveal-managed .reveal,
      html.motion-reveal-managed .reveal.show {
        opacity: 1;
        transform: none;
        will-change: auto;
      }

      .marquee-track,
      .testimonial-track,
      .tab-content.active {
        animation: none !important;
        transition: none !important;
      }
      .service-card::after,
      .fleet-card::after,
      .tab-btn::after,
      .process-grid::after {
        transition: none !important;
      }
      .service-card,
      .fleet-card,
      .process-card {
        transition: none !important;
      }
      .service-card:hover,
      .fleet-card:hover,
      .process-card:hover {
        transform: none !important;
      }
    }

    /* Identidad cinematográfica compartida por todas las secciones */
    main > section:not(.hero) {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      color: #eef5fa;
      background: linear-gradient(145deg, #071522 0%, #102b43 52%, #173f5e 100%) !important;
    }

    main > #empresa,
    main > #proceso,
    main > .team,
    main > .testimonials {
      background: linear-gradient(145deg, #0b2032 0%, #173b58 48%, #0b2134 100%) !important;
    }

    main > #flota,
    main > .capability,
    main > .clients {
      background: linear-gradient(135deg, #06131f 0%, #0e2b42 58%, #173852 100%) !important;
    }

    main > #cotizar {
      background:
        linear-gradient(100deg, rgba(5,17,28,.97), rgba(13,46,70,.91)),
        url('../assets/images/stock/camion-contenedor.jpg') center/cover scroll !important;
    }

    main > section:not(.hero)::before {
      content: "";
      position: absolute;
      z-index: 0;
      top: -38%;
      left: -16%;
      width: 66%;
      height: 176%;
      pointer-events: none;
      opacity: .38;
      background: linear-gradient(105deg, transparent 22%, rgba(132,185,224,.2) 48%, rgba(232,163,60,.1) 56%, transparent 74%);
      filter: blur(7px);
      transform: rotate(-8deg) translate3d(-5%, 0, 0);
      animation: sectionBeamDrift 11s ease-in-out infinite alternate paused;
    }

    main > section:not(.hero)::after {
      content: "";
      position: absolute;
      z-index: 0;
      inset: -34px;
      pointer-events: none;
      opacity: .48;
      background-image:
        radial-gradient(circle at 13% 24%, rgba(210,231,247,.48) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 18%, rgba(232,163,60,.42) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 91% 66%, rgba(166,204,233,.36) 0 1px, transparent 2px),
        radial-gradient(circle at 37% 82%, rgba(255,255,255,.28) 0 1px, transparent 2px),
        linear-gradient(90deg, transparent 49.92%, rgba(255,255,255,.025) 50%, transparent 50.08%);
      background-size: 260px 220px, 330px 280px, 290px 310px, 370px 260px, 120px 100%;
      transform: translate3d(0,0,0);
      animation: sectionPointsFloat 16s ease-in-out infinite alternate paused;
    }

    main > section:not(.hero).is-visible::before,
    main > section:not(.hero).is-visible::after {
      animation-play-state: running;
      will-change: transform, opacity;
    }

    main > section:not(.hero) > .container,
    main > section:not(.hero) > .shape-map,
    main > section:not(.hero) > .route-showcase__content,
    main > section:not(.hero) > .route-showcase__lane,
    main > section:not(.hero) > .route-showcase__lights {
      position: relative;
      z-index: 2;
    }

    @keyframes sectionBeamDrift {
      to { transform: rotate(-4deg) translate3d(22%, 3%, 0); opacity: .58; }
    }

    @keyframes sectionPointsFloat {
      to { transform: translate3d(22px,-18px,0); opacity: .34; }
    }

    main .section-title,
    main #empresa .section-title,
    main #servicios .section-title,
    main #flota .section-title,
    main #proceso .section-title,
    main .team .section-title,
    main #cotizar .section-title,
    main .testimonials .section-title {
      color: #f4f8fb;
      text-shadow: 0 10px 30px rgba(0,0,0,.18);
    }

    main .section-title span,
    main .eyebrow,
    main .fleet-content small,
    main .team-body small {
      color: #9fc7e3;
    }

    main .eyebrow::before {
      background: linear-gradient(90deg, #e8a33c, #9fc7e3);
      box-shadow: 0 0 14px rgba(232,163,60,.34);
    }

    main .section-copy,
    main #empresa .section-copy,
    main #servicios .section-copy,
    main #flota .section-copy,
    main #proceso .section-copy,
    main .team .section-copy,
    main #cotizar .section-copy,
    main .testimonials .section-copy {
      color: rgba(225,237,246,.7);
    }

    .service-card,
    .fleet-card,
    .process-card,
    .team-card,
    .testimonial-card,
    .tab-panel,
    .stats-bar,
    .feature-tile,
    .logo-box {
      border: 1px solid rgba(175,207,231,.15);
      background: linear-gradient(145deg, rgba(24,61,89,.88), rgba(7,25,40,.9));
      color: #edf5fa;
      box-shadow: 0 22px 48px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.05);
    }

    .service-card h3,
    .fleet-card h3,
    .process-card h3,
    .team-card h3,
    .testimonial-card h4,
    .feature-tile h3,
    .tab-content h3 {
      color: #f3f8fb;
    }

    .service-card p,
    .process-card p,
    .testimonial-card p,
    .feature-tile p,
    .tab-content p,
    .tab-content li,
    .checklist li {
      color: rgba(220,234,244,.68);
    }

    .service-icon-big,
    .process-icon,
    .feature-icon {
      border: 1px solid rgba(232,163,60,.28);
      background: linear-gradient(145deg, #e8a33c, #bd7524);
      color: #102b43;
      box-shadow: 0 12px 28px rgba(232,163,60,.18);
    }

    .service-link,
    .checklist i,
    .stars,
    .cap-list > li > i {
      color: #efb35c;
    }

    .tab-btn {
      color: rgba(225,237,246,.68);
      background: rgba(255,255,255,.045);
    }

    .tabs { background: rgba(255,255,255,.055); }

    .tab-btn.active {
      background: linear-gradient(135deg, #e8a33c, #c27b27);
      color: #102b43;
    }

    .tab-content img,
    .service-image img,
    .fleet-card img,
    .team-img img,
    .image-stack img,
    .cta-image img {
      filter: saturate(.82) contrast(1.06) brightness(.88);
      transform: translateZ(0) scale(1);
      transition: transform .85s cubic-bezier(.22,1,.36,1), filter .55s ease;
    }

    .service-card:hover img,
    .fleet-card:hover img,
    .team-card:hover img,
    .image-stack:hover img,
    .cta-image:hover img {
      filter: saturate(1) contrast(1.03) brightness(.98);
      transform: translateZ(0) scale(1.045);
    }

    .clients .logo-box {
      color: rgba(230,240,247,.72);
      filter: none;
    }

    .experience {
      border: 1px solid rgba(232,163,60,.28);
      background: linear-gradient(145deg, #e8a33c, #b96f20);
      color: #0d2a40;
      box-shadow: 0 18px 38px rgba(0,0,0,.28);
    }

    .stat i,
    .stat strong { color: #edf6fb; }
    .stat span,
    .client span { color: rgba(220,234,244,.62); }
    .client h4 { color: #f2f8fb; }

    .marquee {
      border-block: 1px solid rgba(163,199,225,.16);
      background: linear-gradient(90deg, #0a2133, #254f70 48%, #102d45);
      box-shadow: inset 0 1px rgba(255,255,255,.035);
    }

    .footer {
      background: linear-gradient(145deg, #040e17, #0b2437 58%, #102f47);
    }

    .clients .logo-box:hover {
      color: #fff;
      border-color: rgba(232,163,60,.38);
      background: linear-gradient(145deg, rgba(45,88,124,.9), rgba(14,43,66,.94));
    }

    .quote-form {
      border: 1px solid rgba(255,255,255,.74);
      background: rgba(248,251,253,.97);
      box-shadow: 0 30px 75px rgba(0,0,0,.38);
    }

    .cta {
      padding: 32px 0 84px;
      border: 1px solid rgba(165,200,226,.15);
      background: linear-gradient(135deg, #0b2134, #173f5e 52%, #0c263c) !important;
    }

    .cta h2,
    .cta h2 span {
      color: #f4f8fb;
      -webkit-text-fill-color: currentColor;
    }

    .cta h2 span { color: #9fc7e3; }
    .cta p,
    .cta-trust { color: rgba(225,237,246,.7); }
    .cta-trust strong { color: #efb35c; }
    .cta-badge { border-color: rgba(159,199,227,.2); background: rgba(255,255,255,.06); color: #b8d5e9; }
    .cta-badge i { color: #efb35c; }
    .promo-strip-card,
    .promo-strip-card:nth-child(2) {
      border-color: rgba(175,207,231,.16);
      background: linear-gradient(145deg, rgba(26,64,92,.96), rgba(8,29,45,.98));
      color: #f2f7fa;
      box-shadow: 0 18px 38px rgba(0,0,0,.22);
    }
    .promo-strip-card p { color: rgba(220,234,244,.64); }
    .promo-strip-card > i { background: rgba(159,199,227,.1); color: #efb35c; }

    /* El mismo camión del preloader recorre una franja logística. */
    .route-showcase {
      min-height: 340px;
      padding: 70px 0 0;
      background: linear-gradient(105deg, #06131f, #123750 55%, #0a2235) !important;
    }

    .route-showcase__content {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 32px;
    }

    .route-showcase__content h2 {
      color: #f5f9fc;
      font: 650 clamp(30px, 4vw, 50px)/1.05 "Sora", sans-serif;
      letter-spacing: -.055em;
    }

    .route-showcase__content p {
      max-width: 410px;
      color: rgba(222,236,246,.68);
      font-size: 14px;
    }

    .route-showcase__lane {
      position: absolute !important;
      right: 0;
      bottom: 0;
      left: 0;
      height: 155px;
      overflow: hidden;
      border-top: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(7,24,38,.04), rgba(2,11,18,.64));
    }

    .route-showcase__lane::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 25px;
      left: 0;
      height: 3px;
      opacity: .6;
      background: repeating-linear-gradient(90deg, rgba(231,240,246,.82) 0 54px, transparent 54px 96px);
      animation: routeRoadFlow 4.4s linear infinite paused;
    }

    .route-showcase__runner {
      position: absolute;
      z-index: 2;
      bottom: 21px;
      left: 0;
      width: 330px;
      animation: routeTruckCross 48s linear infinite paused;
      will-change: auto;
    }

    .route-showcase__truck.loader-truck {
      position: relative;
      right: auto;
      bottom: auto;
      scale: .78;
      transform-origin: left bottom;
      animation: loaderSuspension 2.4s ease-in-out infinite alternate paused;
    }
    .route-showcase__truck .loader-wheel { animation-duration: 1.92s; }
    .route-showcase__truck .loader-headlight { animation-duration: 3s; }

    .route-showcase:not(.is-visible) .loader-wheel,
    .route-showcase:not(.is-visible) .loader-headlight,
    .route-showcase:not(.is-visible) .route-showcase__lights i {
      animation-play-state: paused;
    }

    .route-showcase.is-visible .route-showcase__runner,
    .route-showcase.is-visible .route-showcase__truck,
    .route-showcase.is-visible .loader-wheel,
    .route-showcase.is-visible .loader-headlight,
    .route-showcase.is-visible .route-showcase__lane::after,
    .route-showcase.is-visible .route-showcase__lights i {
      animation-play-state: running;
    }

    .route-showcase.is-visible .route-showcase__runner { will-change: transform; }

    .route-showcase__lights {
      position: absolute !important;
      inset: 0;
      pointer-events: none;
    }

    .route-showcase__lights i {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #d7ebf8;
      box-shadow: 0 0 16px 4px rgba(159,199,227,.34);
      animation: routeLightFloat 20s ease-in-out infinite paused;
    }
    .route-showcase__lights i:nth-child(1) { top: 28%; left: 14%; }
    .route-showcase__lights i:nth-child(2) { top: 44%; left: 62%; animation-delay: -6.8s; background: #efb35c; }
    .route-showcase__lights i:nth-child(3) { top: 19%; left: 86%; animation-delay: -12.4s; }

    @keyframes routeTruckCross {
      from { transform: translate3d(-390px,0,0); }
      to { transform: translate3d(calc(100vw + 420px),0,0); }
    }
    @keyframes routeRoadFlow { to { background-position: -96px 0; } }
    @keyframes routeLightFloat { 50% { transform: translate3d(16px,-12px,0) scale(1.45); opacity: .45; } }

    /* Botón flotante inspirado en el tratamiento luminoso de la referencia. */
    .whatsapp-float {
      isolation: isolate;
      width: 60px;
      height: 60px;
      border: 1px solid rgba(255,255,255,.62);
      background: linear-gradient(145deg, #31df72, #16a34a);
      box-shadow: 0 12px 30px rgba(10,95,45,.34), 0 0 0 7px rgba(37,211,102,.1);
    }

    .whatsapp-float::before,
    .whatsapp-float::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: -7px;
      border: 1px solid rgba(61,224,122,.5);
      border-radius: inherit;
      animation: whatsappGlow 2.4s ease-out infinite;
    }

    .whatsapp-float::after { animation-delay: 1.2s; }
    .whatsapp-float > i { animation: whatsappBounce 2.7s cubic-bezier(.22,1,.36,1) infinite; }
    .whatsapp-float:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 18px 38px rgba(10,95,45,.42), 0 0 30px rgba(37,211,102,.3); }

    @keyframes whatsappGlow {
      0% { opacity: .72; transform: scale(.88); }
      80%, 100% { opacity: 0; transform: scale(1.42); }
    }
    @keyframes whatsappBounce {
      0%, 74%, 100% { transform: translateY(0) rotate(0); }
      80% { transform: translateY(-7px) rotate(-7deg); }
      86% { transform: translateY(0) rotate(5deg); }
      92% { transform: translateY(-3px) rotate(-3deg); }
    }

    @media (max-width: 767px) {
      .capability,
      .cta { display: block; }
      main > section:not(.hero)::before { width: 92%; opacity: .26; }
      .cta { width: calc(100% - 22px); margin: 42px auto 72px; padding: 12px 0 58px; }
      .cta-wrap { grid-template-columns: 1fr; min-height: 0; }
      .cta-content { padding: 38px 20px 20px; }
      .cta-image { padding: 0 20px 26px; }
      .promo-strip { display: none; }
      .route-showcase { min-height: 300px; padding-top: 48px; }
      .route-showcase__content { display: grid; gap: 12px; }
      .route-showcase__content p { max-width: 300px; font-size: 13px; }
      .route-showcase__lane { height: 125px; }
      .route-showcase__runner { bottom: 8px; }
      .route-showcase__truck.loader-truck { scale: .62; }
      .whatsapp-float { display: grid !important; right: 15px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 52px; height: 52px; font-size: 23px; }
    }

    @media (prefers-reduced-motion: reduce) {
      main > section:not(.hero)::before,
      main > section:not(.hero)::after,
      .route-showcase__runner,
      .route-showcase__truck,
      .route-showcase .loader-wheel,
      .route-showcase .loader-headlight,
      .route-showcase__lane::after,
      .route-showcase__lights i,
      .whatsapp-float::before,
      .whatsapp-float::after,
      .whatsapp-float > i {
        animation: none !important;
      }
      .route-showcase__runner { transform: translate3d(8vw,0,0); }
    }

    /* Flujo claro: cada fondo enlaza cromáticamente con la sección siguiente. */
    body { background: #dfe7ef; }

    .topbar {
      background: linear-gradient(90deg, #eef3f7, #dfe7ef 48%, #e8eef4);
      color: #173f5e;
      border-bottom: 1px solid rgba(41,75,118,.12);
    }
    .topbar a,
    .topbar li,
    .topbar-socials { color: #294b76; }
    .topbar i { color: #3f6493; }
    .topbar .socials a {
      border-color: rgba(41,75,118,.22);
      color: #294b76;
      background: rgba(255,255,255,.4);
    }
    @media (min-width: 768px) {
      .topbar { display: block !important; }
    }

    .hero::after {
      z-index: 1;
      top: auto;
      right: 0;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 96px;
      border-radius: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(237,243,247,.28) 52%, #edf3f7 100%);
    }

    main > #empresa {
      background: linear-gradient(180deg, #edf3f7 0%, #e7eef4 48%, #dfe7ef 100%) !important;
    }
    main > #servicios {
      background: linear-gradient(180deg, #dfe7ef 0%, #e9eff4 54%, #f4f7fa 100%) !important;
    }
    main > #flota {
      background: linear-gradient(180deg, #f4f7fa 0%, #e8eff5 50%, #dce7ef 100%) !important;
    }
    main > .capability {
      background: linear-gradient(180deg, #dce7ef 0%, #e3ebf1 52%, #eaf0f5 100%) !important;
    }
    main > #proceso {
      background: linear-gradient(180deg, #eaf0f5 0%, #e6edf3 55%, #dfe7ef 100%) !important;
    }
    main > .team {
      background: linear-gradient(180deg, #e8eef4 0%, #f2f6f9 54%, #e3ebf2 100%) !important;
    }
    main > #cotizar {
      background:
        linear-gradient(100deg, rgba(230,238,244,.98), rgba(215,228,237,.94)),
        url('../assets/images/stock/camion-contenedor.jpg') center/cover scroll !important;
    }
    main > .testimonials {
      background: linear-gradient(180deg, #e3ebf2 0%, #eef3f7 56%, #dfe7ef 100%) !important;
    }
    main > .clients {
      background: linear-gradient(180deg, #dfe7ef, #eaf0f5) !important;
    }

    main > section:not(.hero):not(.route-showcase)::before {
      opacity: .32;
      background: linear-gradient(105deg, transparent 24%, rgba(79,126,165,.13) 48%, rgba(232,163,60,.08) 56%, transparent 74%);
      filter: blur(10px);
    }
    main > section:not(.hero):not(.route-showcase)::after {
      opacity: .2;
      background-image:
        radial-gradient(circle at 13% 24%, rgba(41,75,118,.34) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 18%, rgba(196,122,34,.34) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 91% 66%, rgba(63,100,147,.28) 0 1px, transparent 2px),
        radial-gradient(circle at 37% 82%, rgba(23,63,94,.2) 0 1px, transparent 2px),
        linear-gradient(90deg, transparent 49.92%, rgba(41,75,118,.025) 50%, transparent 50.08%);
    }

    #servicios,
    .capability,
    #proceso,
    .team,
    #cotizar,
    .testimonials {
      border-radius: 0;
      margin-top: 0;
    }

    main .section-title,
    main #empresa .section-title,
    main #servicios .section-title,
    main #flota .section-title,
    main #proceso .section-title,
    main .team .section-title,
    main #cotizar .section-title,
    main .testimonials .section-title {
      color: #173450;
      text-shadow: none;
    }
    main .section-title span,
    main .fleet-content small,
    main .team-body small { color: #3f6493; }
    main .eyebrow { color: #294b76; }
    main .section-copy,
    main #empresa .section-copy,
    main #servicios .section-copy,
    main #flota .section-copy,
    main #proceso .section-copy,
    main .team .section-copy,
    main #cotizar .section-copy,
    main .testimonials .section-copy { color: #526b80; }

    .service-card,
    .fleet-card,
    .process-card,
    .team-card,
    .testimonial-card,
    .tab-panel,
    .stats-bar,
    .feature-tile,
    .logo-box {
      border-color: rgba(41,75,118,.13);
      background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(237,243,247,.9));
      color: #173450;
      box-shadow: 0 18px 42px rgba(23,52,80,.11), inset 0 1px #fff;
    }
    .service-card h3,
    .fleet-card h3,
    .process-card h3,
    .team-card h3,
    .testimonial-card h4,
    .feature-tile h3,
    .tab-content h3,
    .client h4 { color: #173450; }
    .service-card p,
    .process-card p,
    .testimonial-card p,
    .feature-tile p,
    .tab-content p,
    .tab-content li,
    .checklist li,
    .client span,
    .stat span { color: #60778b; }
    .stat i { color: #3f6493; }
    .stat strong { color: #173450; }
    .cap-list li {
      border-color: rgba(41,75,118,.12);
      background: rgba(255,255,255,.58);
    }
    .cap-list h3 { color: #173450; }
    .cap-list p { color: #60778b; }
    .tabs { background: rgba(41,75,118,.07); }
    .tab-btn { color: #526b80; }
    .service-icon-big,
    .process-icon,
    .feature-icon {
      background: linear-gradient(145deg, #315d8c, #173f73);
      border-color: rgba(255,255,255,.34);
      color: #fff;
      box-shadow: 0 12px 28px rgba(23,63,115,.18);
    }
    .process-icon span {
      background: #e8a33c;
      color: #173450;
    }
    .service-link,
    .checklist i,
    .stars,
    .cap-list > li > i { color: #b66b18; }
    .tab-content img,
    .service-image img,
    .fleet-card img,
    .team-img img,
    .image-stack img,
    .cta-image img { filter: saturate(.9) contrast(1.03) brightness(.96); }

    .marquee {
      color: #173f5e;
      border-color: rgba(41,75,118,.12);
      background: linear-gradient(90deg, #d9e5ed, #eff4f7 46%, #d3e1ea);
    }
    .marquee i {
      background: #315d8c;
      color: #fff;
    }

    .cta {
      background: linear-gradient(135deg, #e9eff4, #d8e5ee 52%, #eef3f7) !important;
      border-color: rgba(41,75,118,.14);
      box-shadow: 0 26px 60px rgba(23,52,80,.12);
    }
    .cta h2,
    .cta h2 span {
      color: #173450;
      -webkit-text-fill-color: currentColor;
    }
    .cta h2 span { color: #3f6493; }
    .cta p,
    .cta-trust { color: #60778b; }
    .cta-trust strong { color: #294b76; }
    .cta-badge {
      border-color: rgba(41,75,118,.13);
      background: rgba(255,255,255,.55);
      color: #315d8c;
    }
    .promo-strip-card,
    .promo-strip-card:nth-child(2) {
      border-color: rgba(41,75,118,.13);
      background: linear-gradient(145deg, #fff, #edf3f7);
      color: #173450;
      box-shadow: 0 16px 34px rgba(23,52,80,.12);
    }
    .promo-strip-card p { color: #60778b; }
    .promo-strip-card > i { background: #dfe7ef; color: #294b76; }

    .quote-form {
      border-color: rgba(41,75,118,.13);
      box-shadow: 0 26px 58px rgba(23,52,80,.16);
    }

    /* Escena multicapa del banner de ruta: cielo, horizonte, postes y camión. */
    .route-showcase {
      width: min(calc(100% - 30px), 1460px);
      min-height: 390px;
      margin: 42px auto 66px;
      border: 1px solid rgba(170,207,233,.17);
      border-radius: 32px;
      box-shadow: 0 28px 70px rgba(20,49,72,.2);
    }
    .route-showcase::before {
      opacity: .42;
      background: linear-gradient(112deg, transparent 18%, rgba(122,180,219,.17) 48%, transparent 74%);
    }
    .route-showcase__sky,
    .route-showcase__horizon,
    .route-showcase__poles {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .route-showcase__sky { z-index: 1; overflow: hidden; }
    .route-moon {
      position: absolute;
      top: 38px;
      right: 9%;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fff8dd, #efcf86 62%, #c48a36);
      box-shadow: 0 0 28px rgba(255,225,157,.38), 0 0 80px rgba(235,182,84,.2);
      animation: routeMoonGlow 18s ease-in-out infinite alternate paused;
    }
    .route-cloud {
      position: absolute;
      width: 180px;
      height: 25px;
      border-radius: 50%;
      opacity: .13;
      background: rgba(221,237,247,.72);
      filter: blur(8px);
      animation: routeCloudPass 88s linear infinite paused;
    }
    .route-cloud--one { top: 70px; left: -210px; }
    .route-cloud--two { top: 120px; left: -330px; width: 250px; animation-duration: 124s; animation-delay: -48s; }
    .route-showcase__horizon {
      z-index: 1;
      top: auto;
      bottom: 72px;
      height: 118px;
      overflow: hidden;
      opacity: .55;
    }
    .route-showcase__horizon span {
      position: absolute;
      inset: 28px -5% 0;
      background: linear-gradient(145deg, transparent 18%, #173b55 18.3% 31%, transparent 31.3% 37%, #1c4662 37.3% 54%, transparent 54.3% 61%, #102f46 61.3% 78%, transparent 78.3%);
      clip-path: polygon(0 100%, 0 67%, 12% 55%, 23% 74%, 35% 40%, 48% 72%, 62% 32%, 75% 66%, 87% 44%, 100% 69%, 100% 100%);
      animation: routeHorizonMove 136s linear infinite paused;
    }
    .route-showcase__horizon span:nth-child(2) { animation-delay: -68s; }
    .route-showcase__poles {
      z-index: 5;
      top: auto;
      bottom: 27px;
      height: 132px;
      overflow: hidden;
    }
    .route-showcase__poles > div {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: space-around;
      min-width: 100%;
      animation: routePolesMove 36s linear infinite paused;
    }
    .route-showcase__poles > div:nth-child(2) { animation-delay: -18s; }
    .route-showcase__poles i {
      position: relative;
      display: block;
      width: 3px;
      height: 112px;
      margin-top: 20px;
      background: linear-gradient(#33566e, #07141e);
      box-shadow: 5px 0 8px rgba(0,0,0,.16);
    }
    .route-showcase__poles i::before {
      content: "";
      position: absolute;
      top: 0;
      left: -2px;
      width: 31px;
      height: 3px;
      border-radius: 3px;
      background: #46677d;
      transform: rotate(-8deg);
      transform-origin: left;
    }
    .route-showcase__poles i::after {
      content: "";
      position: absolute;
      top: -1px;
      left: 24px;
      width: 7px;
      height: 5px;
      border-radius: 50%;
      background: #ffd987;
      box-shadow: 0 0 13px 5px rgba(255,210,116,.25);
    }
    .route-showcase__lane { z-index: 4 !important; }
    .route-showcase__runner {
      bottom: 21px;
      animation-duration: 10.5s;
      animation-delay: -2.4s;
    }
    .route-showcase.is-visible .route-moon,
    .route-showcase.is-visible .route-cloud,
    .route-showcase.is-visible .route-showcase__horizon span,
    .route-showcase.is-visible .route-showcase__poles > div {
      animation-play-state: running;
      will-change: transform;
    }
    .route-showcase:not(.is-visible) .route-moon,
    .route-showcase:not(.is-visible) .route-cloud,
    .route-showcase:not(.is-visible) .route-showcase__horizon span,
    .route-showcase:not(.is-visible) .route-showcase__poles > div { animation-play-state: paused; }

    @keyframes routeMoonGlow { to { transform: scale(1.06); opacity: .86; box-shadow: 0 0 38px rgba(255,225,157,.46), 0 0 100px rgba(235,182,84,.24); } }
    @keyframes routeCloudPass { to { transform: translate3d(calc(100vw + 420px),0,0); } }
    @keyframes routeHorizonMove {
      from { transform: translate3d(100%,0,0); }
      to { transform: translate3d(-100%,0,0); }
    }
    @keyframes routePolesMove {
      from { transform: translate3d(100%,0,0); }
      to { transform: translate3d(-100%,0,0); }
    }

    @media (max-width: 767px) {
      .topbar { display: none; }
      .hero::after { height: 38px; }
      #servicios,
      .capability,
      #proceso,
      .team,
      #cotizar,
      .testimonials { border-radius: 0; margin-top: 0; }
      .route-showcase { width: calc(100% - 18px); min-height: 330px; margin: 28px auto 48px; border-radius: 23px; }
      .route-moon { top: 28px; right: 7%; width: 42px; height: 42px; }
      .route-showcase__horizon { bottom: 58px; }
      .route-showcase__poles { bottom: 19px; transform: scale(.82); transform-origin: bottom; }
      .route-showcase__runner { animation-duration: 34s; }
    }

    @media (prefers-reduced-motion: reduce) {
      .route-moon,
      .route-cloud,
      .route-showcase__horizon span,
      .route-showcase__poles > div { animation: none !important; }
    }

    /* Sistema tipográfico unificado y legible */
    body,
    button,
    input,
    select,
    textarea,
    .btn,
    .menu,
    .topbar,
    .nav-actions,
    .desktop-quote,
    .nav-search {
      font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .hero h1,
    main > section:not(.hero) h2,
    main > section:not(.hero) h3,
    main > section:not(.hero) h4,
    main > section:not(.hero) .eyebrow,
    main > section:not(.hero) small,
    .footer h3 {
      font-family: "Sora", "Manrope", sans-serif;
    }

    main > section:not(.hero) .section-title,
    main > section:not(.hero) > .container h2,
    .route-showcase__content h2 {
      font-size: clamp(38px, 4.35vw, 60px) !important;
      font-weight: 650;
      line-height: 1.02;
      letter-spacing: -.055em;
    }

    main > section:not(.hero) .eyebrow {
      margin-bottom: 16px;
      font-size: 13px !important;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: .1em;
    }

    main > section:not(.hero) .section-copy,
    main > section:not(.hero) > .container > p,
    .route-showcase__content > p {
      font-size: 16px !important;
      line-height: 1.72;
    }

    main > section:not(.hero) h3,
    main > section:not(.hero) h4 {
      font-weight: 650;
      letter-spacing: -.025em;
    }

    main > section:not(.hero) :where(p, a, button, label, input, select, textarea, small, li) {
      font-size: max(13px, 1em);
    }

    main > section:not(.hero) .service-card p,
    main > section:not(.hero) .process-card p,
    main > section:not(.hero) .feature-tile p,
    main > section:not(.hero) .testimonial-card p,
    main > section:not(.hero) .tab-content p,
    main > section:not(.hero) .tab-content li,
    main > section:not(.hero) .cap-list p,
    main > section:not(.hero) .promo-strip-card p,
    main > section:not(.hero) .client span,
    main > section:not(.hero) .stat span,
    main > section:not(.hero) .team-body small,
    main > section:not(.hero) .fleet-content small,
    main > section:not(.hero) .service-link,
    main > section:not(.hero) .tab-btn,
    main > section:not(.hero) .cta-badge,
    main > section:not(.hero) .cta-trust {
      font-size: 13px !important;
      line-height: 1.55;
    }

    main > section:not(.hero) .service-card h3,
    main > section:not(.hero) .process-card h3,
    main > section:not(.hero) .feature-tile h3,
    main > section:not(.hero) .team-card h3,
    main > section:not(.hero) .fleet-card h3 {
      font-size: clamp(17px, 1.35vw, 21px) !important;
      line-height: 1.22;
    }

    main > section:not(.hero) .btn,
    main > section:not(.hero) button {
      font-size: 13px !important;
      font-weight: 700;
      line-height: 1.2;
    }

    main > section:not(.hero) .service-number,
    main > section:not(.hero) .process-icon span,
    main > section:not(.hero) .cta-status,
    main > section:not(.hero) .cta-route-card small,
    main > section:not(.hero) .cta-route-card strong,
    main > section:not(.hero) .logo-box,
    .footer-bottom {
      font-size: 13px !important;
    }

    /* El hero también deja de utilizar textos microscópicos. */
    .cinematic-kicker,
    .hero .cinematic-primary,
    .cinematic-play,
    .hero-confidence strong,
    .hero-confidence p span,
    .quote-card-head small,
    .hero-quote-card > p,
    .hero-quote-card label,
    .hero-field input,
    .hero-field select,
    .hero-quote-submit,
    .quote-security,
    .hero-metrics > div span,
    .hero-metrics > a small,
    .hero-metrics > a b {
      font-size: 13px;
    }

    .cinematic-kicker {
      line-height: 1.3;
      letter-spacing: .1em;
    }
    .hero-main-copy > p {
      max-width: 580px;
      font-size: 16px;
      line-height: 1.72;
    }
    .hero .cinematic-primary,
    .cinematic-play,
    .hero-quote-submit { font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    .hero-confidence strong,
    .hero-confidence p span { line-height: 1.4; }
    .hero-quote-card { padding: 27px; }
    .hero-quote-card > p { line-height: 1.55; }
    .quote-card-head small,
    .hero-quote-card label { letter-spacing: .075em; }
    .quote-card-head h2 {
      font-size: 22px;
      line-height: 1.16;
    }
    .hero-field { min-height: 48px; }
    .hero-field input,
    .hero-field select { height: 46px; }
    .hero-quote-submit { min-height: 50px; }
    .quote-security { line-height: 1.4; }
    .hero-cinematic {
      grid-template-columns: minmax(0, 1fr) 400px;
      gap: clamp(46px, 6vw, 96px);
    }
    .hero-metrics { min-height: 88px; }
    .hero-metrics > div span,
    .hero-metrics > a small { line-height: 1.35; }

    .topbar,
    .menu,
    .nav-search,
    .desktop-quote,
    .footer p,
    .footer a,
    .footer li,
    .mobile-contact-bar a {
      font-size: 13px;
    }

    #contacto p,
    #contacto a,
    #contacto li,
    #contacto .footer-bottom { font-size: 13px !important; }

    /* Layout responsive: pantalla > 1366px usa container-fluid con 150px de margen lateral y títulos al 80% */
    @media (min-width: 1367px) {
      :root {
        --container: 100%;
      }
      .header {
        --header-gutter: 0px;
      }
      .container,
      .cta {
        width: calc(100% - 300px) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
      }
      .topbar-inner,
      .nav {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      /* Reducción al 80% de los títulos para pantallas mayores a 1366px */
      .hero h1 {
        font-size: clamp(32px, 4.5vw, 56px) !important;
      }

      main > section:not(.hero) .section-title,
      main > section:not(.hero) > .container h2,
      .route-showcase__content h2,
      .cta h2 {
        font-size: clamp(30px, 3.5vw, 48px) !important;
      }

      main > section:not(.hero) .service-card h3,
      main > section:not(.hero) .process-card h3,
      main > section:not(.hero) .feature-tile h3,
      main > section:not(.hero) .team-card h3,
      main > section:not(.hero) .fleet-card h3 {
        font-size: clamp(14px, 1.1vw, 17px) !important;
      }

      .quote-card-head h2 {
        font-size: 18px !important;
      }
    }

    /* Pantallas menores o iguales a 1366px: bajan el tamaño de los títulos a la mitad y fuentes 2 puntos */
    @media (max-width: 1366px) {
      body,
      button,
      input,
      select,
      textarea {
        font-size: 14px;
      }

      .hero h1 {
        font-size: clamp(24px, 3.4vw, 42px) !important;
      }

      main > section:not(.hero) .section-title,
      main > section:not(.hero) > .container h2,
      .route-showcase__content h2,
      .cta h2 {
        font-size: clamp(20px, 2.2vw, 30px) !important;
      }

      main > section:not(.hero) .eyebrow,
      .cinematic-kicker {
        font-size: 11px !important;
      }

      main > section:not(.hero) .section-copy,
      main > section:not(.hero) > .container > p,
      .route-showcase__content > p,
      .hero-main-copy > p {
        font-size: 14px !important;
      }

      main > section:not(.hero) .service-card h3,
      main > section:not(.hero) .process-card h3,
      main > section:not(.hero) .feature-tile h3,
      main > section:not(.hero) .team-card h3,
      main > section:not(.hero) .fleet-card h3 {
        font-size: clamp(13px, 1vw, 15px) !important;
      }

      main > section:not(.hero) .service-card p,
      main > section:not(.hero) .process-card p,
      main > section:not(.hero) .feature-tile p,
      main > section:not(.hero) .testimonial-card p,
      main > section:not(.hero) .tab-content p,
      main > section:not(.hero) .tab-content li,
      main > section:not(.hero) .cap-list p,
      main > section:not(.hero) .promo-strip-card p,
      main > section:not(.hero) .client span,
      main > section:not(.hero) .stat span,
      main > section:not(.hero) .team-body small,
      main > section:not(.hero) .fleet-content small,
      main > section:not(.hero) .service-link,
      main > section:not(.hero) .tab-btn,
      main > section:not(.hero) .cta-badge,
      main > section:not(.hero) .cta-trust {
        font-size: 11px !important;
      }

      main > section:not(.hero) .btn,
      main > section:not(.hero) button {
        font-size: 11px !important;
      }

      main > section:not(.hero) .service-number,
      main > section:not(.hero) .process-icon span,
      main > section:not(.hero) .cta-status,
      main > section:not(.hero) .cta-route-card small,
      main > section:not(.hero) .cta-route-card strong,
      main > section:not(.hero) .logo-box,
      .footer-bottom {
        font-size: 11px !important;
      }

      .cinematic-kicker,
      .hero .cinematic-primary,
      .cinematic-play,
      .hero-confidence strong,
      .hero-confidence p span,
      .quote-card-head small,
      .hero-quote-card > p,
      .hero-quote-card label,
      .hero-field input,
      .hero-field select,
      .hero-quote-submit,
      .quote-security,
      .hero-metrics > div span,
      .hero-metrics > a small,
      .hero-metrics > a b {
        font-size: 11px;
      }

      .quote-card-head h2 {
        font-size: 16px !important;
      }

      .topbar,
      .menu,
      .nav-search,
      .desktop-quote,
      .footer p,
      .footer a,
      .footer li,
      .mobile-contact-bar a {
        font-size: 11px;
      }

      #contacto p,
      #contacto a,
      #contacto li,
      #contacto .footer-bottom {
        font-size: 11px !important;
      }

      .stat strong {
        font-size: 36px;
      }

      #empresa .experience b {
        font-size: 34px;
      }
    }

    @media (max-width: 980px) {
      .hero-cinematic { grid-template-columns: minmax(0, 1fr) 365px; gap: 32px; }
    }

    @media (max-width: 860px) {
      .hero { min-height: 0; }
      .hero-cinematic { grid-template-columns: 1fr; padding-bottom: 34px; }
      .hero-main-copy { max-width: 650px; }
      .hero-quote-card { width: min(100%, 560px); justify-self: center; }
      .hero-metrics {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        grid-template-columns: repeat(3, minmax(0,1fr));
      }
      .hero-metrics > a { display: none; }
    }

    @media (max-width: 767px) {
      /* --- 1. NAVEGACIÓN Y HEADER MINIMALISTA --- */
      .nav-search,
      .desktop-quote {
        display: none !important;
      }
      .nav {
        height: 62px;
        padding-inline: 16px !important;
        justify-content: space-between;
      }
      .logo {
        margin-inline: 0 auto;
      }
      .brand-logo {
        width: 135px;
        height: 42px;
      }

      /* --- 2. CENTRADO GENERAL DE TEXTOS, TÍTULOS Y CABECERAS DE SECCIÓN --- */
      .eyebrow,
      .section-title,
      .section-copy,
      .center,
      main > section .eyebrow,
      main > section .section-title,
      main > section .section-copy {
        text-align: center !important;
        margin-inline: auto !important;
      }
      .eyebrow {
        justify-content: center !important;
      }

      main > section:not(.hero) .section-title,
      main > section:not(.hero) > .container h2,
      .route-showcase__content h2,
      .cta h2 {
        font-size: clamp(20px, 6vw, 26px) !important;
        line-height: 1.1;
      }
      main > section:not(.hero) .section-copy,
      main > section:not(.hero) > .container > p,
      .route-showcase__content > p {
        font-size: 13px !important;
        line-height: 1.65;
      }

      /* --- 3. HERO MÓVIL ENFOCADO Y SIN SOBRECARGA --- */
      .hero-cinematic {
        grid-template-columns: 1fr;
        padding-top: 18px;
        gap: 28px;
      }
      .hero-main-copy {
        text-align: center;
        max-width: 100%;
      }
      .cinematic-kicker {
        justify-content: center;
        margin-inline: auto;
      }
      .hero-main-copy h1 {
        text-align: center;
      }
      .hero-main-copy > p {
        font-size: 13px;
        text-align: center;
        margin-inline: auto;
        max-width: 92%;
      }
      .cinematic-actions {
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 12px;
        margin-inline: auto;
      }
      .hero .cinematic-primary {
        width: min(100%, 280px);
        justify-content: center;
        margin-inline: auto;
      }
      /* Ocultar elementos secundarios y ruidosos en Hero */
      .cinematic-play,
      .hero-confidence {
        display: none !important;
      }

      .hero-quote-card {
        padding: 20px 16px;
        margin-inline: auto;
        text-align: center;
        width: 100%;
      }
      .quote-card-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
      }
      .quote-card-head > span {
        display: none !important;
      }
      .hero-quote-card > p {
        text-align: center;
      }
      .hero-field {
        text-align: left;
      }
      .hero-metrics {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-radius: 12px;
        padding: 8px 4px;
        text-align: center;
        margin-top: 12px;
      }
      .hero-metrics > div {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 4px;
        padding: 10px 4px;
      }
      .hero-metrics > div strong {
        font-size: 16px;
      }
      .hero-metrics > div span {
        font-size: 11px;
        text-transform: none;
      }
      .hero-metrics > a {
        display: none !important;
      }

      /* --- 4. SECCIÓN NOSOTROS (#empresa) --- */
      #empresa .about-grid {
        text-align: center;
      }
      #empresa .image-stack {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      #empresa .image-small {
        display: none !important;
      }
      #empresa .image-main {
        position: static;
        width: 100%;
        height: 220px;
        border-radius: 18px;
        object-fit: cover;
      }
      #empresa .experience {
        position: static;
        margin: 12px auto 0;
        width: fit-content;
        text-align: center;
      }
      #empresa .feature-list {
        justify-content: center;
      }
      #empresa .feature-tile {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      #empresa .checklist {
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
      }
      #empresa .checklist li {
        justify-content: center;
      }

      /* --- 5. SECCIÓN SERVICIOS (#servicios) --- */
      .service-card {
        text-align: center;
      }
      .service-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .service-icon-big {
        margin-inline: auto;
      }
      .service-link {
        justify-content: center;
        margin-inline: auto;
      }

      /* --- 6. SECCIÓN FLOTA (#flota) --- */
      .fleet-head {
        text-align: center;
      }
      .fleet-head .btn {
        margin: 16px auto 0;
      }
      .fleet-card {
        text-align: center;
      }
      .fleet-content {
        text-align: center;
      }
      .stats-bar {
        text-align: center;
      }
      .stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      /* --- 7. CAPACIDAD / TAB PANEL --- */
      .cap-grid {
        text-align: center;
      }
      .cap-list {
        text-align: center;
      }
      .cap-list li {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .tab-panel {
        text-align: center;
      }
      .tabs {
        justify-content: center;
      }
      .tab-content {
        text-align: center;
      }
      .tab-content img {
        margin-inline: auto;
      }

      /* --- 8. PROCESO (#proceso) --- */
      .process-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .process-icon {
        margin-inline: auto;
      }

      /* --- 9. ROUTE SHOWCASE --- */
      .route-showcase__content {
        text-align: center;
      }

      /* --- 10. COTIZAR (#cotizar) --- */
      .quote-grid {
        text-align: center;
      }
      .quote-form {
        text-align: center;
      }
      .quote-form h3 {
        text-align: center;
      }
      .field {
        text-align: left;
      }
      .quote-form .btn {
        width: 100%;
        justify-content: center;
      }

      /* --- 11. FOOTER MINIMALISTA (#contacto) --- */
      .footer-top {
        padding-top: 42px;
        padding-bottom: 28px;
      }
      .footer-grid {
        text-align: center;
      }
      .footer-grid > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .footer-grid .logo {
        margin-inline: auto;
      }
      .socials {
        justify-content: center;
      }
      .footer-links,
      .footer-contact {
        align-items: center;
        text-align: center;
      }
      .footer-contact li {
        justify-content: center;
      }
      .footer-grid > div:nth-child(4) {
        display: none !important;
      }

      .mobile-contact-bar a {
        font-size: 11px;
      }
    }

    /* Mobile canónico: misma identidad, menor densidad y acciones prioritarias. */
    .mobile-expand { display: none; }

    @media (max-width: 767px) {
      html { scroll-padding-top: 72px; }
      body,
      button,
      input,
      select,
      textarea,
      .mobile-panel,
      .mobile-contact-bar,
      .mobile-expand {
        font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }
      body { font-size: 15px; }
      .hero h1,
      main > section:not(.hero) h2,
      main > section:not(.hero) h3,
      main > section:not(.hero) h4,
      main > section:not(.hero) .eyebrow,
      .quote-card-head h2,
      .footer h3 {
        font-family: "Sora", "Manrope", sans-serif;
      }
      .container { width: calc(100% - 32px); }
      .section { padding: 64px 0; }

      /* Navegación compacta y orientada a acción. */
      .header { height: 64px; }
      .navwrap { background: #fff; }
      .nav { height: 64px; padding-inline: 16px !important; }
      .brand-logo { width: 132px; height: 44px; }
      .hamburger {
        width: 48px;
        height: 48px;
        border: 1px solid #c7d4df;
        border-radius: 12px;
        background: #f3f6f8;
        color: #173450;
        touch-action: manipulation;
      }
      .hamburger:hover,
      .hamburger:active { background: #e2eaf0; color: #102b43; transform: none; }
      .mobile-panel {
        top: 64px;
        right: 12px;
        left: 12px;
        width: auto;
        padding: 10px;
        border: 1px solid rgba(23,52,80,.12);
        border-radius: 0 0 16px 16px;
        background: #fff;
        box-shadow: 0 20px 45px rgba(5,23,42,.18);
      }
      .mobile-panel a {
        min-height: 50px;
        padding: 0 14px;
        border-bottom: 1px solid #e7edf2;
        color: #294b76;
        font-size: 15px;
        font-weight: 700;
        touch-action: manipulation;
      }
      .mobile-panel a.active { color: #102f54; }
      .mobile-panel a[href="#cotizar"] {
        justify-content: center;
        margin-top: 8px;
        border: 0;
        border-radius: 10px;
        background: #294b76;
        color: #fff;
      }
      .mobile-panel a[href="#flota"],
      .mobile-panel a[href="#proceso"] { display: none; }
      .mobile-panel .mobile-instagram { display: none; }

      /* Jerarquía tipográfica legible y alineada con desktop. */
      main > section:not(.hero) .eyebrow,
      main > section:not(.hero) .section-title,
      main > section:not(.hero) .section-copy,
      main > section:not(.hero) .center,
      .route-showcase__content {
        justify-content: flex-start !important;
        margin-inline: 0 !important;
        text-align: left !important;
      }
      main > section:not(.hero) .section-title,
      main > section:not(.hero) > .container h2,
      .route-showcase__content h2,
      .cta h2 {
        font-size: clamp(28px, 8vw, 36px) !important;
        line-height: 1.08;
        letter-spacing: -.045em;
      }
      main > section:not(.hero) .section-copy,
      main > section:not(.hero) > .container > p,
      .route-showcase__content > p {
        font-size: 15px !important;
        line-height: 1.62;
      }
      main > section:not(.hero) .eyebrow { font-size: 12px !important; }

      /* Hero: promesa, CTA y cotización sin información duplicada. */
      .hero { padding-top: 64px; }
      .hero-cinematic { padding: 38px 0 28px; gap: 24px; }
      .hero-main-copy,
      .hero-main-copy h1,
      .hero-main-copy > p { max-width: 100%; margin-inline: 0; text-align: left; }
      .cinematic-kicker { justify-content: flex-start; margin: 0 0 16px; font-size: 12px; }
      .hero-main-copy h1 { font-size: clamp(37px, 11.5vw, 52px) !important; line-height: .96; }
      .hero-main-copy > p { display: -webkit-box; overflow: hidden; margin-bottom: 22px; font-size: 15px !important; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
      .cinematic-actions { align-items: stretch; gap: 10px; }
      .hero .cinematic-primary { width: 100%; min-height: 52px; }
      .cinematic-play,
      .hero-confidence,
      .hero-metrics { display: none !important; }
      .hero-quote-card,
      #flota,
      #proceso,
      .route-showcase { display: none !important; }
      .hero-quote-card { padding: 20px 16px; text-align: left; }
      .quote-card-head { align-items: flex-start; text-align: left; }
      .quote-card-head > span,
      .hero-quote-card > p,
      .quote-security { display: none; }
      .quote-card-head h2 { font-size: 20px !important; }
      .hero-quote-card label { margin-top: 13px; font-size: 12px; }
      .hero-field { min-height: 50px; }
      .hero-field input,
      .hero-field select { height: 48px; font-size: 16px; }
      .hero-quote-submit { min-height: 52px; font-size: 14px; }

      /* Empresa: evidencia visual y dos razones; el detalle queda para desktop. */
      #empresa .about-grid { gap: 28px; text-align: left; }
      #empresa .image-main { height: 210px; border-radius: 14px; }
      #empresa .experience { margin: -24px 12px 0 auto; padding: 14px 18px; }
      #empresa .experience b { font-size: 30px; }
      #empresa .section-copy { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
      #empresa .feature-list { grid-template-columns: 1fr; gap: 10px; margin: 22px 0; }
      #empresa .feature-tile { flex-direction: row; align-items: center; padding: 14px; text-align: left; }
      #empresa .feature-icon { min-width: 44px; width: 44px; height: 44px; border-radius: 11px; }
      #empresa .feature-tile p,
      #empresa .checklist { display: none; }
      #empresa .btn { width: 100%; min-height: 52px; }

      /* Testimonio único y breve. */
      .testimonials .section-copy { display: none; }
      .testimonials .testimonial-wrap { margin-top: 24px; }
      .testimonials .testimonial-card { padding: 22px; text-align: left; }
      .testimonials .testimonial-card > p { display: -webkit-box; overflow: hidden; font-size: 15px !important; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }

      /* Servicios: tres prioridades y expansión opcional. */
      #servicios .section-copy { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
      #servicios .service-grid { width: 100%; margin-top: 28px; padding: 0; gap: 14px; }
      #servicios .service-card:nth-child(n+4) { display: none; }
      #servicios .service-grid.mobile-expanded .service-card { display: block; }
      #servicios .service-card { border-radius: 16px; text-align: left; }
      #servicios .service-image { height: 150px; }
      #servicios .service-body { align-items: flex-start; padding: 20px; text-align: left; }
      #servicios .service-icon-big { top: -27px; right: 18px; width: 52px; height: 52px; border-radius: 13px; font-size: 20px; }
      #servicios .service-body h3 { font-size: 18px !important; }
      #servicios .service-body p { display: -webkit-box; overflow: hidden; font-size: 14px !important; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
      #servicios .service-link { min-height: 44px; justify-content: flex-start; margin: 10px 0 0; font-size: 14px !important; }
      .marquee { display: none; }

      /* Flota: dos vehículos iniciales y métricas esenciales. */
      #flota .fleet-head { align-items: flex-start; text-align: left; }
      #flota .fleet-head .section-copy { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
      #flota .fleet-head .btn { width: 100%; margin: 18px 0 0; }
      #flota .fleet-carousel { grid-template-columns: 1fr; gap: 14px; }
      #flota .fleet-card:nth-child(2) { display: block; }
      #flota .fleet-card:nth-child(n+3) { display: none; }
      #flota .fleet-carousel.mobile-expanded .fleet-card { display: block; }
      #flota .fleet-card { border-radius: 16px; text-align: left; }
      #flota .fleet-card img { height: 176px; }
      #flota .fleet-content { padding: 18px; text-align: left; }
      #flota .stats-bar { grid-template-columns: 1fr 1fr; margin-top: 28px; border-radius: 16px; }
      #flota .stat:nth-child(2),
      #flota .stat:nth-child(3) { display: none; }

      .mobile-expand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        min-height: 48px;
        margin-top: 16px;
        border: 1px solid rgba(41,75,118,.28);
        border-radius: 10px;
        background: transparent;
        color: #294b76;
        font: 700 14px/1 "Manrope", sans-serif;
        touch-action: manipulation;
      }
      .mobile-expand i { transition: transform .22s ease; }
      .mobile-expand[aria-expanded="true"] i { transform: rotate(180deg); }
      .mobile-expand--light { border-color: rgba(255,255,255,.3); color: #fff; }

      /* Logística y proceso convertidos en decisiones rápidas. */
      .capability .cap-grid { gap: 24px; text-align: left; }
      .capability .cap-grid > div:first-child .section-copy,
      .capability .cap-list { display: none; }
      .capability .tab-panel { padding: 14px; text-align: left; }
      .capability .tabs { gap: 4px; }
      .capability .tab-btn { min-height: 44px; padding: 10px 6px; font-size: 12px !important; }
      .capability .tab-content { grid-template-columns: 1fr; gap: 14px; text-align: left; }
      .capability .tab-content p { display: -webkit-box; overflow: hidden; font-size: 14px !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
      .capability .tab-content img { width: 100%; height: 150px; }
      #proceso .section-copy { display: none; }
      #proceso .process-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
      #proceso .process-grid::before,
      #proceso .process-grid::after { display: none; }
      #proceso .process-card { min-height: 150px; padding: 18px 12px; border-radius: 14px; }
      #proceso .process-icon { width: 62px; height: 62px; margin-bottom: 12px; border-radius: 18px; font-size: 22px; }
      #proceso .process-card h3 { font-size: 16px !important; }
      #proceso .process-card p { display: none; }

      /* Pausa visual y cotización directa. */
      .route-showcase { min-height: 270px; padding-top: 46px; }
      .route-showcase__content { align-items: flex-start; }
      .route-showcase__content > p { display: none; }
      #cotizar .quote-grid { gap: 26px; text-align: left; }
      #cotizar .section-copy,
      #cotizar .cap-list { display: none; }
      #cotizar .quote-form { padding: 20px 16px; text-align: left; }
      #cotizar .quote-form h3 { font-size: 21px !important; text-align: left; }
      #cotizar .form-grid { grid-template-columns: 1fr; }
      #cotizar :is(input, select, textarea) { font-size: 16px; }
      #cotizar .quote-form .btn { min-height: 52px; }

      /* Footer breve; contacto permanece en la barra fija. */
      .footer-top { padding: 44px 0 28px; }
      .footer-grid { gap: 26px; text-align: left; }
      .footer-grid > div { align-items: flex-start; text-align: left; }
      .footer-grid > div:nth-child(2),
      .footer-grid > div:nth-child(4) { display: none !important; }
      .footer-grid .logo { margin-inline: 0 auto; }
      .footer-contact { align-items: flex-start; text-align: left; }
      .footer-contact li { justify-content: flex-start; }
      #contacto p,
      #contacto a,
      #contacto li { font-size: 14px !important; }
      .mobile-contact-bar { min-height: calc(68px + env(safe-area-inset-bottom)); }
      .mobile-contact-bar a { min-height: 54px; font-size: 12px; touch-action: manipulation; }
    }

    @media (max-width: 380px) {
      .container { width: calc(100% - 24px); }
      .hero-main-copy h1 { font-size: 36px !important; }
      #proceso .process-grid { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      .mobile-expand i { transition: none; }
    }

    /* El acceso a WhatsApp se mantiene en la barra inferior; evita duplicarlo en móvil. */
    @media (max-width: 767px) {
      .whatsapp-float { display: none !important; }
    }