/* =====================================================
   SECCIÓN PRINCIPAL DE NUESTRA FLOTA (SI LA USAS AQUÍ)
===================================================== */

.flota-hero {
  padding: 160px 10% 40px;
  text-align: center;
}

.flota-hero h1 {
  font-size: 46px;
  font-weight: 700;
  margin-bottom: 20px;
}

.flota-hero p {
  font-size: 22px;
  max-width: 850px;
  margin: auto;
  color: #444;
}

.flota-descripcion {
  padding: 60px 10%;
  display: flex;
  align-items: center;
  gap: 30px;
}

.flota-linea {
  width: 4px;
  height: 160px;
  background: #000;
}

.flota-texto {
  font-size: 28px;
  line-height: 1.5;
  max-width: 1000px;
}

.flota-img-box {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.flota-img-box img {
  width: 92%;
  max-width: 1600px;
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.18);
}

.flota-franja {
  background: #140808;
  padding: 40px 20px;
  text-align: center;
}

.flota-franja p {
  font-size: 24px;
  color: #fff;
  max-width: 1200px;
  margin: auto;
}

@media(max-width:900px){
  .flota-texto { font-size: 22px; }
  .flota-linea { height: 120px; }
  .flota-descripcion {
    flex-direction: column;
    text-align: center;
  }
}

/* =====================================================
   ACERCA DE — DISEÑO AJUSTADO
===================================================== */

.acerca-page{
  padding-top: 120px; /* header fijo */
}

/* HERO: GRIS OSCURO NEUTRO (SIN AZUL) */

.acerca-hero{
  position: relative;
  padding: 48px 20px 64px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.acerca-hero-bg{
  position: absolute;
  inset: 0;
  /* gris oscuro, casi pizarra, pero no negro puro */
  background: linear-gradient(180deg, #5b5b5e 0%, #343437 100%);
  z-index: 0;
}

.acerca-hero-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .35;
  z-index: 1;
}

.acerca-hero-inner{
  position: relative;
  max-width: 1100px;
  width: 100%;
  z-index: 2;
  color: #f9fafb;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}

.acerca-kicker{
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e5e7eb;
  margin-bottom: 8px;
}

.acerca-hero-inner h1{
  font-size: 2.35rem;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 6px;
}

.acerca-hero-text{
  font-size: 0.98rem;
  color: #e5e7eb;
}

/* BLOQUE PRINCIPAL (TEXTO PROTAGONISTA, IMAGEN APOYO) */

.acerca-main{
  max-width: 1150px;
  margin: -26px auto 0;
  padding: 0 20px 60px;
}

.acerca-main-inner{
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
  padding: 22px 22px;
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  gap: 20px;
  align-items: center;
}

/* TEXTO */

.acerca-main-text{
  font-size: 0.96rem;
  color: #1f2933;
}

.acerca-lead{
  font-size: 1.08rem;
  font-weight: 600;      /* más destacado que el cuerpo */
  margin-bottom: 8px;
  color: #111827;
}

.acerca-body{
  line-height: 1.65;
  color: #374151;
}

/* IMAGEN (APOYO) */

.acerca-main-visual{
  display: flex;
  justify-content: center;
}

.acerca-bus-frame{
  width: 100%;
  max-width: 280px;      /* más pequeño: no protagonista */
  border-radius: 16px;
  padding: 12px;
  background: radial-gradient(circle at 0% 0%, #f7f7f7 0, #e4e4e6 55%, #d6d6d8 100%);
  border: 1px solid #dddddf;
  box-shadow: 0 10px 22px rgba(15,23,42,0.08);
}

.acerca-bus-img{
  width: 100%;
  display: block;
  border-radius: 12px;
}

/* FRANJA INFERIOR */

.acerca-strip{
  max-width: 1150px;
  margin: 0 auto 90px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.acerca-strip-line{
  width: 70px;
  height: 2px;
  background: #111827;
  flex-shrink: 0;
}

.acerca-strip-text{
  font-size: 0.92rem;
  color: #4b5563;
}

/* RESPONSIVE ACERCA */

@media(max-width: 960px){
  .acerca-main-inner{
    grid-template-columns: minmax(0,1fr);
    gap: 18px;
  }

  .acerca-main-visual{
    justify-content: flex-start;
  }

  .acerca-bus-frame{
    max-width: 260px;
  }
}

@media(max-width: 720px){
  .acerca-hero{
    padding: 40px 18px 50px;
  }

  .acerca-hero-inner h1{
    font-size: 1.9rem;
  }

  .acerca-hero-text{
    font-size: 0.9rem;
  }

  .acerca-kicker{
    font-size: 0.68rem;
  }

  .acerca-main{
    margin-top: -20px;
    padding-bottom: 46px;
  }

  .acerca-main-inner{
    padding: 18px 18px;
  }

  .acerca-lead{
    font-size: 1rem;
  }

  .acerca-body{
    font-size: 0.9rem;
  }

  .acerca-strip{
    flex-direction: column;
    align-items: flex-start;
  }

  .acerca-strip-line{
    width: 52px;
  }

  .acerca-strip-text{
    font-size: 0.88rem;
  }
}

@media(max-width: 520px){
  .acerca-hero-inner h1{
    font-size: 1.7rem;
  }

  .acerca-hero-text{
    font-size: 0.86rem;
  }

  .acerca-bus-frame{
    max-width: 230px;
  }
}

/* =====================================================
   MENÚ MÓVIL PREMIUM – CÁPSULAS
===================================================== */

.menu-mobile-cards{
  display:none;
}

@media (max-width:768px){

  .menu-mobile-cards{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
  }

  .menu-mobile-cards.open{
    opacity:1;
    pointer-events:auto;
  }

  .menu-mobile-backdrop{
    position:absolute;
    inset:0;
    background:linear-gradient(
      180deg,
      rgba(0,0,0,.55),
      rgba(0,0,0,.9)
    );
    backdrop-filter:blur(4px);
  }

  .menu-mobile-container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:420px;
    padding:120px 24px 40px;
    display:flex;
    justify-content:center;
  }

  .menu-mobile-grid{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:18px;
    align-items:center;
  }

  .menu-card{
    width:100%;
    max-width:320px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#fff;
    font-size:18px;
    font-weight:500;
    letter-spacing:.4px;
    border-radius:999px;
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.06)
    );
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.14),
      0 12px 26px rgba(0,0,0,.35);
    transition:transform .25s ease, background .25s ease;
  }

  .menu-card:hover{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.1)
    );
    transform:translateY(-1px);
  }

  .menu-card:active{
    transform:scale(.96);
  }

  .menu-mobile-cards.open .menu-card{
    animation:busAdvance .45s cubic-bezier(.22,.61,.36,1) both;
  }

  .menu-mobile-cards.open .menu-card:nth-child(1){animation-delay:.05s}
  .menu-mobile-cards.open .menu-card:nth-child(2){animation-delay:.1s}
  .menu-mobile-cards.open .menu-card:nth-child(3){animation-delay:.15s}

  @keyframes busAdvance{
    from{transform:translateX(-10px);opacity:0;}
    80%{transform:translateX(2px);opacity:1;}
    to{transform:translateX(0);}
  }
}

/* =====================================================
   HEADER (FIJO)
===================================================== */

.header-fixed{
  position: fixed;
  z-index: 20000;
}

/* BLOQUEO DE SCROLL (SI LO USAS EN JS) */
body.menu-open{
  position: fixed;
  overflow: hidden;
  width: 100%;
}