.info-section {
    width: 100%;
    display: flex;
    flex-direction: column; /* Cambia la dirección del flex para pantallas más pequeñas */
  }
  
  .info-section .row {
    width: 100%;
    margin: 0;
  }
  
  .info-section img {
    height: 90%;
    object-fit: cover;
    width: 90%; /* Asegura que la imagen ocupe todo el ancho */
    margin-left: 10%;
  }
  
  .text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    height: 100%;
    padding: 40px;
    flex-direction: column; /* Cambia a columna en pantallas pequeñas */
  }
  
  .text-content { 
    display: flex;
    align-items: center; /* Alinea verticalmente */
    gap: 10px; /* Espacio entre el número y el texto */
    max-width: 80%;
  }
  
  .big-number {
    font-size: 200px;
    font-weight: bold;
    color: #a57f2c;
    display: inline-block;
    line-height: 1;
    font-family: "Patria", sans-serif;
  }
  
  .text-content h2 {
    font-family: "Patria", sans-serif;
    font-size: 48px;
    font-weight: bold;
    margin: 0;
    text-align: left; /* Asegura alineación a la izquierda */
  }
  
  .info-section p {
    font-family: "Noto Sans", sans-serif;
    font-size: 20px;
    margin-top: 50px;
    text-align: justify; /* Justifica el texto */
    max-width: 80%;
  }
  
  .line-buttons {
    display: flex;
    gap: 18%; /* Aumenta el espacio entre las palabras */
    margin-top: 20px;
    justify-content: center;
    max-width: 100%; /* Ajusta el ancho máximo */
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
  }
  
  .line-word {
    font-size: 36px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    color: #616161;
    font-family: "Patria", sans-serif;
    display: inline-block; /* Necesario para que transform funcione bien en texto */
}

/* Efecto al pasar el mouse */
.line-word:hover {
    transform: scale(1.1); /* Hace el texto un 20% más grande */
    color: #a57f2c; /* Opcional: cambia el color al pasar el mouse */
}

  
  .line-word.active {
    font-size: 44px;
    color: #a57f2c;
  }
  
  .line-info {
    display: flex;
    justify-content: center;
    gap: 28vh;
    margin-top: 10px;
    font-size: 1.4rem;
  }
  
  .line-route {
    display: flex;
    justify-content: center;
    gap: 10vh;
    margin-top: 10px;
    font-size: 1.2rem;
    font-weight: bold;
  }
  
  .state-name {
    color: #a57f2c; /* Un color dorado similar al resaltado */
    font-weight: bold;
    font-size: 1.2rem;
  }
  
  #line-km {
    color: black;
    font-size: 1.4rem;
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
  }
  
  #line-left,
  #line-right {
    color: gray;
    font-size: 1.8rem;
  }
  
  #line-path {
    color: goldenrod;
  }
  
  /* Media Queries para pantallas más pequeñas */
  @media (max-width: 768px) {
    #line-path {
      font-size: 1.2rem; /* Reducido en pantallas medianas */
    }
  }
  
  @media (max-width: 480px) {
    #line-path {
        display: none;
      }
  }
  
  /* Media Queries para pantallas más pequeñas */
  
  @media (max-width: 768px) {
    .info-section {
      flex-direction: column;
    }
  
    .text-container {
      padding: 20px;
    }
  
    .text-content {
      max-width: 100%;
      max-height: 100%;
    }
  
    .info-section h2 {
      font-size: 36px; /* Reduce el tamaño del título */
    }
  
    .info-section p {
      display: none; /* Oculta el párrafo en pantallas pequeñas */
  }
  
    .line-buttons {
      gap: 10%; /* Reduce el espacio entre las palabras */
    }
  
    .line-word {
      font-size: 28px; /* Reduce el tamaño de las palabras */
    }
  
    .line-word.active {
      font-size: 36px; /* Aumenta un poco el tamaño cuando está activo */
    }

      
  .info-section img {
    height: 95%;
    object-fit: cover;
    width: 95%; /* Asegura que la imagen ocupe todo el ancho */
    margin-left: 5%;
    margin-top: 10%;
  }
  }
  
  @media (max-width: 480px) {
    .info-section h2 {
      font-size: 28px; /* Título aún más pequeño */
    }
  
    .info-section p {
      display: none; /* Oculta el párrafo en pantallas pequeñas */
  }
    .line-buttons {
        gap: 5.5%; /* Reduce el espacio entre las palabras */
      }
    
  
    .line-word {
      font-size: 24px; /* Palabras más pequeñas */
    }
  
    .line-word.active {
      font-size: 32px; /* Palabras activas más grandes */
    }
  }

  
  
  .footer {
    background-color: #611232;
    color: white;
    padding: 40px 0;
    font-size: 14px;
  }
  
  .footer h5 {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
    text-align: center; /* Mantener títulos centrados */
  }
  
  .footer a {
    color: white;
    text-decoration: none;
  }
  
  .footer a:hover {
    text-decoration: underline;
  }
  
  .logo-footer {
    max-width: 300px;
    margin-bottom: 10px;
  }
  
  .social-icon {
    width: 30px;
    margin: 5px;
  }
  
  .footer .container {
    max-width: 900px; /* Ajuste para centrar */
  }
  
  .footer .row {
    justify-content: center;
  }
  
  .footer p,
  .footer ul {
    text-align: justify; /* Justificar párrafos y listas */
    margin: 0 auto;
    max-width: 85%; /* Para evitar que el texto se extienda demasiado */
  }
  
  .footer ul {
    padding-left: 0; /* Elimina indentación predeterminada en listas */
    list-style: none; /* Opcional: elimina los puntos de lista */
  }
  .logo-footer {
    width: 80%; /* Ajusta el tamaño según sea necesario */
    max-width: 100%; /* Evita que se desborde en pantallas pequeñas */
    transition: transform 0.3s ease-in-out;
}

/* Efecto hover opcional */
.logo-footer:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el mouse */
}