* { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Montserrat', sans-serif;
      background-color: #0d0d0d;
      color: #f2f2f2;
      line-height: 1.6;
      scroll-behavior: smooth;
    }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

  
    /* Hero con parallax */
    .hero {
      height: 100vh;
      background: url('../img/logo.png') center/contain no-repeat fixed;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #fff;
      padding: 0 1rem;
      position: relative;
    }
    .hero h1 { font-size: 3rem; margin-bottom: 1rem; text-shadow: 2px 2px 10px #000; opacity: 0; transform: translateY(50px); transition: 1s ease; }
    .hero p { font-size: 1.5rem; margin-bottom: 2rem; text-shadow: 2px 2px 10px #000; opacity: 0; transform: translateY(50px); transition: 1s ease 0.3s; }
    .hero .cta-buttons a {
      display: inline-block;
      margin: 0 1rem;
      padding: 0.8rem 2rem;
      background: hsl(50, 97%, 46%);
      color: #fff;
      font-weight: 700;
      border-radius: 5px;
      transition: 0.3s;
      opacity: 0; transform: translateY(50px); transition: 1s ease 0.6s;
    }
    .hero .cta-buttons a:hover { background: hsl(50, 97%, 46%);; }

    /* Secciones */
    section { padding: 5rem 2rem; position: relative; }
    section h2 { font-size: 2.5rem; margin-bottom: 2rem; color:hsl(50, 97%, 46%); text-align: center; }

    /* Sobre Nosotros */
    .about { display: flex; flex-direction: column; align-items: center; gap: 2rem; opacity:0; transform: translateY(50px); transition: 1s ease; }
    .about p { max-width: 800px; text-align: center; }

    /* Rutas */
    .routes { 
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      opacity:0;
      transform: translateY(50px);
      transition: 1s ease;
    }
    .route-card {
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 8px;
      overflow: hidden;
      transition: 0.3s;
    }
  
    .route-card img { width: 100%; }
    .route-card .content { padding: 1rem; }
    .route-card .content h3 { background:  #0d0d0d; margin-bottom: 0.5rem; }
    .route-card .content p { font-size: 0.95rem; margin-bottom: 1rem; }
    .route-card .content a {
      display: inline-block;
      padding: 0.5rem 1rem;
      background: hsl(50, 97%, 46%);
      color: #fff;
      border-radius: 5px;
      font-weight: 700;
      transition: 0.3s;
    }
    .route-card .content a:hover { background: hsl(50, 97%, 46%); }

    /* Galería */
    .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; opacity:0; transform: translateY(50px); transition: 1s ease; }
    .gallery img { border-radius: 5px; transition: 0.3s; cursor: pointer; }
    .gallery img:hover { transform: scale(1.05); }

    .gallery-container {
      position: relative; /* Para posicionar las flechas absolutas */
      width: 80%;
      overflow: hidden; /* Oculta el overflow de la galería principal */
      margin: 0 auto;
    } 

    .gallery-wrapper {
      display: flex; /* Alinea las imágenes en línea */
      overflow-x: auto; /* Habilita el scroll horizontal */
      overflow-y: hidden; /* Oculta la barra de scroll vertical */
      scroll-behavior: smooth; /* Suaviza el scroll */
      -ms-overflow-style: none;  /* IE y Edge */
      scrollbar-width: none;  /* Firefox */
      object-fit: contain;
    }

    .gallery-wrapper::-webkit-scrollbar {
      display: none; /* Oculta la barra de scroll en Chrome, Safari y Opera */
    }

    .gallery-wrapper img {
      width: 250px; /* Ajusta el ancho de la imagen */
      height: 250px;
      margin-right: 10px; /* Espacio entre imágenes */
    }

    .scroll-left,
    .scroll-right {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10; /* Asegura que estén por encima de las imágenes */
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      cursor: pointer;
    }

    .scroll-left {
      left: 10px;
    }

    .scroll-right {
      right: 10px;
    }


    /* Noticias */
    .news { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; opacity:0; transform: translateY(50px); transition: 1s ease; }
    .news-card {
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 8px;
      overflow: hidden;
      transition: 0.3s;
    }
    .news-card img { 
      
      width: fit-content;
      height: 50%; 
    
    }
    .news-card .content { padding: 1rem; }
    .news-card .content h3 { color: hsl(50, 97%, 46%); margin-bottom: 0.5rem; }
    .news-card .content p { font-size: 0.95rem; margin-bottom: 1rem; }
    .news-card .content a {
      display: inline-block;
      padding: 0.5rem 1rem;
      background: hsl(50, 97%, 46%);
      color: #fff;
      border-radius: 5px;
      font-weight: 700;
      transition: 0.3s;
    }
    .news-card .content a:hover { background: hsl(50, 97%, 46%); }

    /* Contacto */
    .contact {
      justify-items: center;
    }


    .contact form {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      opacity:0; transform: translateY(50px); transition: 1s ease;
    }
    .contact input, .contact textarea {
      padding: 0.8rem;
      border-radius: 5px;
      border: none;
      background: #222;
      color: #fff;
    }
    .contact button {
      padding: 0.8rem;
      background: hsl(50, 97%, 46%);
      border: none;
      color: #fff;
      font-weight: 700;
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
    }
    .contact button:hover { background: hsl(50, 97%, 46%); }

    @media (max-width: 768px) {
  .galeria img {
    width: 100%;
    height: auto;
  }
  nav ul {
    flex-direction: column;
  }
}