:root{
  --azul-oscuro:#0B2A4A;
  --azul:#1F4C7A;
  --azul-ui-1:#001f3f;
  --azul-ui-2:#003366;
  --azul-ui-3:#004080;
  --azul-claro:#E9F1FA;
  --texto:#0c1220;
  --gris:#6b7280;
  --borde:#e8eef5;
  --shadow:0 10px 30px rgba(13,38,76,.10);
  --shadow-hover:0 16px 44px rgba(13,38,76,.18);
}

html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--texto);
  background:#f6f8fb;
  overflow-x:hidden;
}

.navbar{
  background:linear-gradient(90deg,var(--azul-ui-1),var(--azul-ui-2),var(--azul-ui-3));
  background-size:300% 300%;
  animation:navbarGradient 10s ease infinite;
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 60px;flex-wrap:wrap;position:sticky;top:0;z-index:1000;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
@keyframes navbarGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.logo img{height:55px;transition:transform .3s}
.logo img:hover{transform:scale(1.06)}
.nav-links{list-style:none;display:flex;gap:25px;margin:10px 0}
.nav-links a{
  color:#fff;text-decoration:none;font-weight:600;position:relative;transition:.3s
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:#38a1ff;transition:.3s
}
.nav-links a:hover{color:#38a1ff;text-shadow:0 0 8px rgba(56,161,255,.6)}
.nav-links a:hover::after{width:100%}
#lang-select{
  background:#001830;color:#fff;border:1px solid #3b6ea5;
  padding:8px 14px;border-radius:8px;font-weight:600
}
.nav-toggle{display:none;font-size:1.9rem;color:#fff;background:none;border:0;cursor:pointer}

@media (max-width:900px){
  .nav-links,#lang-select{display:none}
  .nav-toggle{display:block}

  .menu-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transition:.4s;z-index:900
  }
  .menu-overlay.active{opacity:1;visibility:visible}

  .mobile-menu{
    position:fixed;top:0;right:-100%;width:75%;height:100vh;
    background:linear-gradient(180deg,var(--azul-ui-1),var(--azul-ui-2),var(--azul-ui-3));
    background-size:200% 200%;animation:menuGradient 12s ease infinite;
    box-shadow:-6px 0 20px rgba(0,0,0,.35);z-index:1000;
    display:flex;flex-direction:column;padding:40px 25px;
    transition:right .6s cubic-bezier(.68,-.55,.265,1.55)
  }
  .mobile-menu.open{right:0}
  @keyframes menuGradient{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
  }
  .mobile-menu-header{display:flex;justify-content:flex-end;margin-bottom:25px}
  .mobile-menu-header button{
    background:none;border:0;color:#fff;font-size:1.8rem;cursor:pointer;transition:.3s
  }
  .mobile-menu-header button:hover{transform:rotate(90deg)}
  .mobile-links{display:flex;flex-direction:column;gap:20px;margin-top:10px}
  .mobile-links a{
    color:#fff;text-decoration:none;font-size:1.2rem;font-weight:600;
    padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);transition:.3s
  }
  .mobile-links a:hover{color:#38a1ff;text-shadow:0 0 8px rgba(56,161,255,.7);transform:translateX(6px)}
}
@media (min-width:901px){
  .mobile-menu,.menu-overlay{display:none!important}
}

.transportes-hero{
  background:url('img/fondo-transporte.png') center/cover no-repeat;
  height:56vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.transportes-hero .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,17,34,.75))
}
.transportes-hero .content{
  position:relative;
  z-index:2;color:#fff
}
.transportes-hero h1{
  font-size:2.2rem;
  font-weight:800;
  letter-spacing:.5px;
  margin:0 0 6px
}
.transportes-hero p{
  font-size:1.05rem;
  color:#d8e7ff;
  margin:0
}

.unidades{
 position: relative;
  padding: 100px 20px;
  background: #ffffff;
  background:
    radial-gradient(
      circle at center,
      rgba(25, 79, 145, 0.18) 0%,  
      rgba(25, 79, 145, 0.10) 30%,
      rgba(25, 79, 145, 0.05) 45%,
      rgba(25, 79, 145, 0.02) 60%,
      rgba(255,255,255,1) 85%,     
      #ffffff 100%
    );
}
.container{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:36px;
}

.unidad-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.90);
  border-radius: 22px;
  padding: 28px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.9s ease;
  box-shadow:
    0 12px 25px #001f3f,
    0 0 18px #001f3f,
    0 0 35px #001f3f;
}

.unidad-card.show {
  opacity: 1;
  transform: translateY(0);
}

.unidad-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 35px rgba(35, 64, 93, 0.32),
    0 0 28px rgba(35, 64, 93, 0.32),
    0 0 45px rgba(35, 64, 93, 0.32);
}

.unidad-card img{
  width:40%;
  min-width:280px;
  max-width:460px;
  background: #001f3f;
  border:1px solid var(--borde);
  border-radius:14px;
  padding:18px;
  object-fit:contain;
  transition:transform .35s ease, 
  box-shadow .35s ease;
}
.unidad-card:hover img{
  transform:scale(1.04);
  box-shadow:0 12px 32px rgba(31,76,122,.18)
}

.info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  text-align: justify; 
  width: 100%;
  height: 100%;
}


.info h2{
  margin:0 0 10px;
  font-size:1.5rem;
  font-weight:800;
  color:var(--azul-oscuro);
  text-align: center;
}
.info ul{
   padding-left: 20px; 
  margin: 0 auto;     
  color:#374151;
 
 
}
.info ul li{
   padding: 4px 0;
  text-align: justify;    
  text-justify: inter-word;
}

[data-animate="fade-in-left"].show{animation:fadeInLeft .9s ease both}
[data-animate="fade-in-right"].show{animation:fadeInRight .9s ease both}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}

.container .unidad-card + .unidad-card{margin-top:14px}


footer{
  background:#001a33;color:#e6eef9;text-align:center;padding:20px;font-size:.9rem
}

.whatsapp-float {
  position: fixed;
  width: 56px;
  height: 56px;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
  z-index: 9999;
}

.whatsapp-float:hover {
  background: #1ebc57;
}

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

@media (max-width: 900px) {
  .cta-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    height: 78vh;
  }
  .navbar {
    padding: 15px 20px;
  }
  .hero-content h1 {
    font-size: 2.4rem;
  }
  .hero-content p {
    font-size: 1.3rem;
  }
  .vision-card {
    width: 90%;
  }
}


@media (max-width:1100px){
  .unidad-card{gap:22px}
  .unidad-card img{min-width:240px}
}
@media (max-width:950px){
  .unidad-card{flex-direction:column;text-align:center;align-items:center}
  .unidad-card img{width:90%;max-width:520px}
  .info{width:100%}
}
@media (max-width:520px){
  .transportes-hero{height:48vh}
  .transportes-hero h1{font-size:1.8rem}
  .transportes-hero p{font-size:.95rem}
}

[id^="vehiculo"]{scroll-margin-top:100px}