:root {
  --navy:#08273f;
  --navyd:#041724;
  --blue:#176f9e;
  --orange:#f1aa2b;
  --ink:#152a3a;
  --text:#5c6f7d;
  --line:#dbe5eb;
  --soft:#f5f8fa;
  --white:#fff;
  --shadow:0 22px 60px rgba(8,39,63,.13);
  --c:1180px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.65
}

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

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

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

.topbar {
  background:var(--navyd);
  color:#cedce6;
  font-size:20px
}

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

.site-header {
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 22px rgba(8,39,63,.06)
}

.header-inner {
  position:relative;
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  font-weight:950;
  font-size:30px;
  color:var(--navy);
  letter-spacing:-.04em
}

.brand small {
  display:block;
  font-size:15px;
  letter-spacing:.15em;
  color:#738693;
  margin-top:7px
}

.main-menu {
  display:flex;
  gap:28px;
  margin-left:auto;
  font-weight:850;
  white-space:nowrap
}

.main-menu a {
  padding:28px 0
}

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

.menu-toggle {
  display:none;
  border:0;
  background:none;
  font-size:30px;
  color:var(--navy)
}

.hero {
  min-height:680px;
  display:grid;
  align-items:center;
  color:#fff;
  background:linear-gradient(90deg,rgba(4,23,36,.97),rgba(7,38,60,.87) 48%,rgba(7,38,60,.35)),url('../images/hero-transportes.jpg') center/cover
}

.hero-content {
  max-width:800px;
  padding:90px 0 105px
}

.eyebrow,.kicker {
  display:inline-block;
  color:var(--orange);
  font-size:12px;
  font-weight:950;
  letter-spacing:.11em;
  text-transform:uppercase;
  margin-bottom:14px
}

.hero h1,.page-hero h1 {
  margin:0 0 22px;
  color:#fff;
  font-size:clamp(43px,6vw,72px);
  line-height:1.03;
  letter-spacing:-.055em
}

.hero p {
  font-size:19px;
  color:#d8e5ee;
  max-width:720px
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:49px;
  padding:11px 20px;
  border-radius:10px;
  font-weight:900
}

.btn-primary {
  color:#fff;
  background:linear-gradient(135deg,var(--blue),#0c557d)
}

.btn-orange {
  color:var(--navyd);
  background:linear-gradient(135deg,#ffd267,var(--orange))
}

.btn-light {
  color:var(--navy);
  background:#fff;
  border:1px solid var(--line)
}

.button-row,.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:30px
}

.tag {
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  font-size:12px
}

.section {
  padding:90px 0
}

.soft {
  background:var(--soft)
}

.heading {
  max-width:760px;
  margin-bottom:44px
}

.heading.center {
  text-align:center;
  margin-left:auto;
  margin-right:auto
}

h2,h3 {
  color:var(--ink);
  line-height:1.18
}

h2 {
  font-size:clamp(32px,4.4vw,48px);
  letter-spacing:-.04em;
  margin:0 0 16px
}

h3 {
  font-size:21px;
  margin:0 0 10px
}

.grid3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

.grid2 {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px
}

.card {
  padding:28px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 13px 30px rgba(8,39,63,.055)
}

.num {
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  background:var(--blue);
  color:#fff;
  border-radius:13px;
  font-weight:950;
  margin-bottom:19px
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center
}

.media {
  overflow:hidden;
  border-radius:20px;
  box-shadow:var(--shadow)
}

.media img {
  width:100%;
  min-height:390px;
  object-fit:cover
}

.check {
  list-style:none;
  padding:0;
  display:grid;
  gap:12px
}

.check li {
  padding-left:26px;
  position:relative
}

.check li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:#2c8a67;
  font-weight:950
}

.band {
  padding:44px;
  border-radius:23px;
  color:#dae8f1;
  background:linear-gradient(135deg,var(--navyd),#0c557d);
  box-shadow:var(--shadow)
}

.band h2 {
  color:#fff
}

.band-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:38px
}

.point {
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:11px;
  background:rgba(255,255,255,.06);
  margin-bottom:10px
}

.related {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.related article {
  padding:34px;
  border-radius:20px;
  color:#d8e6ef;
  background:linear-gradient(135deg,var(--navyd),#0c557d)
}

.related h3 {
  color:#fff;
  font-size:27px
}

.related a {
  color:#ffd26d;
  font-weight:900
}

.page-hero {
  padding:94px 0;
  background:linear-gradient(135deg,var(--navyd),var(--navy));
  color:#d8e5ee
}

.page-hero h1 {
  font-size:clamp(40px,5.7vw,64px)
}

.article {
  max-width:900px;
  margin:auto
}

.article h2 {
  margin-top:42px;
  font-size:34px
}

.article p,.article li {
  font-size:17px
}

.article a {
  color:var(--blue);
  font-weight:850
}

.info {
  margin:28px 0;
  padding:24px 26px;
  border-left:5px solid var(--orange);
  background:#fff8e9
}

.table {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  margin:28px 0
}

table {
  width:100%;
  border-collapse:collapse
}

th,td {
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top
}

th {
  background:#eef5f8;
  color:var(--navy)
}

.faq-item {
  border:1px solid var(--line);
  border-radius:13px;
  margin-bottom:12px
}

.faq-question {
  width:100%;
  padding:19px 21px;
  border:0;
  background:transparent;
  text-align:left;
  font-weight:900;
  color:var(--ink)
}

.faq-answer {
  display:none;
  padding:0 21px 19px
}

.faq-item.open .faq-answer {
  display:block
}

.contact {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:34px
}

.contact-card {
  padding:30px;
  border-radius:18px;
  background:var(--navy);
  color:#dce8f0
}

.contact-card h2 {
  color:#fff
}

.contact-line {
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.12)
}

.contact-form {
  padding:32px;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow)
}

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

.field {
  margin-bottom:16px
}

.field label {
  display:block;
  font-weight:850;
  color:var(--ink);
  margin-bottom:6px
}

.field input,.field textarea,.field select {
  width:100%;
  padding:13px 14px;
  border:1px solid #cddbe4;
  border-radius:9px
}

.field textarea {
  min-height:145px
}

.cta {
  padding:55px 0;
  background:linear-gradient(135deg,var(--blue),#0c557d);
  color:#fff
}

.cta .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}

.cta h2 {
  color:#fff
}

.site-footer {
  padding:62px 0 28px;
  background:var(--navyd);
  color:#a9bfcc
}

.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:33px
}

.footer-title {
  color:#fff;
  font-weight:900;
  margin-bottom:14px
}

.footer-links {
  display:grid;
  gap:9px;
  font-size:14px
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:40px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px
}

.error-page {
  min-height:66vh;
  display:grid;
  place-items:center;
  background:var(--soft)
}

.error-card {
  max-width:820px;
  padding:52px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--shadow);
  text-align:center
}

.error-code {
  font-size:clamp(100px,20vw,210px);
  font-weight:950;
  color:var(--navy);
  line-height:.76
}

.error-code span {
  color:var(--orange)
}

@media(max-width:950px) {
  .menu-toggle {
    display:block
  }
  .main-menu {
    position:absolute;
    top:80px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    background:#fff;
    padding:18px 22px;
    box-shadow:0 20px 35px rgba(0,0,0,.12)
  }
  .main-menu.open {
    display:flex
  }
  .main-menu a {
    padding:10px 0
  }
  .split,.band-grid,.contact {
    grid-template-columns:1fr
  }
  .grid3 {
    grid-template-columns:repeat(2,1fr)
  }
  .footer-grid {
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:680px) {
  .container {
    width:min(100% - 28px,var(--c))
  }
  .topbar {
    display:none
  }
  .header-inner {
    min-height:70px
  }
  .main-menu {
    top:70px
  }
  .brand {
    font-size:22px
  }
  .hero {
    min-height:auto
  }
  .hero-content {
    padding:72px 0 84px
  }
  .hero h1,.page-hero h1 {
    font-size:40px
  }
  .section {
    padding:68px 0
  }
  .grid3,.grid2,.related,.footer-grid,.form-row {
    grid-template-columns:1fr
  }
  .band {
    padding:28px 22px
  }
  .cta .container,.footer-bottom {
    flex-direction:column;
    align-items:flex-start
  }
}

/* ==========================================================
   FOOTER EXCLUSIVO DE LA PÁGINA DE INICIO
   ========================================================== */

.home-footer {
  padding: 72px 0 28px;
  color: #b9cad4;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(23, 111, 158, .22),
      transparent 28%
    ),
    var(--navyd);
}

.home-footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr .85fr 1.35fr;
  gap: 34px;
  align-items: start;
}

.home-footer h2 {
  margin: 0 0 18px;
  color: var(--white);
  font-size: 17px;
  letter-spacing: -.01em;
}

.home-footer p {
  margin: 0 0 15px;
}

.home-footer a {
  transition:
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.home-footer a:hover {
  color: var(--white);
}

.home-footer-brand {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--white);
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -.045em;
}

.home-footer-intro > p > a {
  color: #ffd16c;
  font-weight: 850;
}

.home-footer-company nav {
  display: grid;
  gap: 12px;
}

.home-footer-company nav > a {
  display: block;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}

.home-footer-company nav > a:hover {
  border-color: rgba(255, 209, 108, .5);
  transform: translateY(-2px);
}

.home-footer-company strong {
  display: block;
  margin-bottom: 5px;
  color: var(--white);
}

.home-footer-company span {
  display: block;
  font-size: 13px;
  line-height: 1.5;
}

.home-footer-contact address {
  display: grid;
  gap: 5px;
  margin: 0;
  font-style: normal;
}

.home-footer-contact address strong {
  margin-bottom: 7px;
  color: var(--white);
}

.home-footer-contact-links {
  display: grid;
  gap: 7px;
  margin-top: 20px;
}

.home-footer-contact-links a {
  color: #ffd16c;
  font-weight: 850;
}

.map-frame {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 250px;
  border: 0;
}

.map-link {
  display: inline-block;
  margin-top: 13px;
  color: #ffd16c;
  font-size: 13px;
  font-weight: 850;
}

.home-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 44px;
  padding-top: 23px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
}

.home-footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
}

@media (max-width: 1100px) {
  .home-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .home-footer {
    padding-top: 55px;
  }

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

  .home-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .map-frame iframe {
    height: 290px;
  }
}