*{
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      padding:0;
      box-sizing:border-box;
      scroll-behavior:smooth;
    }

    body{
      font-family:'Poppins',sans-serif;
      background:#07131f;
      color:white;
      overflow-x:hidden;
       margin: 0;
    }

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

    /* NAVBAR */

    nav{
      position:fixed;
      top:0;
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:20px 8%;
      z-index:1000;
      background:rgba(0,0,0,0.45);
      backdrop-filter:blur(10px);
      
    }
    .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    transition: top 0.3s ease; /* Transición suave */
    z-index: 1000; /* Asegura que esté por encima de todo */
    }

   /* Esta clase se añadirá con JavaScript para ocultar el menú */
    .navbar.ocultar {
    top: -80px; /* Altura negativa para esconderlo (ajusta si tu navbar es más alta) */
   }

    .logo{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .logo img{
      width:60px;
      height:60px;
      object-fit:contain;
      border-radius:50%;
    }

    .logo h2{
      color:#d4af37;
      font-size:1.4rem;
      font-weight:600;
    }

    nav ul{
      display:flex;
      gap:30px;
      list-style:none;
    }

    nav ul li a{
      transition:0.3s;
      font-weight:500;
    }

    nav ul li a:hover{
      color:#d4af37;
    }

    /* HERO */

    .hero{
      height:100vh;
      background:
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.55)),
      url('../img/img1x.jpeg');
      background-size:cover;
      background-position:center;
      background-repeat: no-repeat;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:0 20px;
    }

    .hero-content{
      max-width:900px;
    }

    .hero h1{
      font-size:4rem;
      margin-bottom:20px;
      color:white;
    }

    .hero h1 span{
      color:#d4af37;
    }

    .hero p{
      font-size:1.2rem;
      line-height:1.8;
      margin-bottom:35px;
      color:#eee;
    }

    .hero-buttons{
      display:flex;
      justify-content:center;
      gap:20px;
      flex-wrap:wrap;
    }

    .btn{
      padding:15px 35px;
      border-radius:40px;
      border:none;
      font-size:1rem;
      cursor:pointer;
      transition:0.3s;
      font-weight:600;
    }

    .gold{
      background:#d4af37;
      color:#07131f;
    }

    .gold:hover{
      transform:translateY(-3px);
      background:white;
    }

    .outline{
      background:transparent;
      border:2px solid white;
      color:white;
    }

    .outline:hover{
      background:white;
      color:#07131f;
    }

    /* SECTIONS */

    section{
      padding:100px 8%;
    }

    .section-title{
      text-align:center;
      margin-bottom:60px;
    }

    .section-title h2{
      font-size:2.7rem;
      color:#d4af37;
      margin-bottom:15px;
    }

    .section-title p{
      color:#bbb;
      max-width:700px;
      margin:auto;
    }

    /* FLEET */

    .fleet{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:30px;
    }

    .boat-card{
      background:#0f1f31;
      border-radius:20px;
      overflow:hidden;
      transition:0.4s;
      box-shadow:0 10px 30px rgba(0,0,0,0.3);
    }

    .boat-card:hover{
      transform:translateY(-10px);
    }

    .boat-card img{
      width:100%;
      height:260px;
      object-fit:cover;
    }

    .boat-info{
      padding:25px;
    }

    .boat-info h3{
      color:#d4af37;
      margin-bottom:10px;
      font-size:1.4rem;
    }

    .boat-info p{
      color:#ccc;
      line-height:1.7;
      margin-bottom:20px;
    }

    .price{
      color:white;
      font-size:1.1rem;
      margin-bottom:20px;
      font-weight:600;
    }

    /* EXPERIENCE */

    .experience{
      background:
      linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
      url('https://images.unsplash.com/photo-1500375592092-40eb2168fd21?q=80&w=1974&auto=format&fit=crop');
      background-size:cover;
      background-position:center;
      text-align:center;
    }

    .experience h2{
      font-size:3rem;
      margin-bottom:25px;
      color:#d4af37;
    }

    .experience p{
      max-width:800px;
      margin:auto;
      line-height:2;
      color:#eee;
      font-size:1.1rem;
    }

    /* CONTACT */

    .contact-container{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:50px;
      align-items:center;
    }

    .contact-info h3{
      font-size:2rem;
      margin-bottom:25px;
      color:#d4af37;
    }

    .contact-info p{
      margin-bottom:18px;
      color:#ccc;
      line-height:1.8;
    }

    form{
      background:#0f1f31;
      padding:40px;
      border-radius:20px;
    }

    form input,
    form textarea{
      width:100%;
      padding:15px;
      margin-bottom:20px;
      border:none;
      border-radius:10px;
      background:#16283d;
      color:white;
      font-size:1rem;
    }

    form textarea{
      resize:none;
      height:140px;
    }

    form button{
      width:100%;
    }

    /* FOOTER */

    footer{
      background:#050d15;
      padding:40px 8%;
      text-align:center;
      color:#aaa;
    }

    /* WHATSAPP */

    .whatsapp{
      position:fixed;
      bottom:25px;
      right:25px;
      background:#25D366;
      width:65px;
      height:65px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:2rem;
      z-index:999;
      box-shadow:0 8px 25px rgba(0,0,0,0.3);
    }

    .whatsapp:hover{
      transform:scale(1.08);
    }

    /* RESPONSIVE */

    @media(max-width:900px){

      .hero h1{
        font-size:2.8rem;
      }

      nav ul{
        display:none;
      }

    }

    /* iconos de redes sociales flotantes */

.container-redes{
  position: fixed;
  bottom: 63px;
  left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  z-index: 1;
}

.container-redes a{
  margin-top: 4px;
}

.container-redes img{
  width: 60px;
  padding: 4px;
  background: transparent;
  cursor: pointer;
  border-radius: 100%;
  transition: all 300ms;
  text-decoration: none;
}

.container-redes a:hover img{
  background: rgba(252, 249, 249, 0.918);
}

.ubicacion{
  width: 100%;
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  box-shadow: -10px 0 30px -20px rgb(255, 253, 253);
}

#botonIrArriba {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Oculto por defecto */
    cursor: pointer;
    background:#d4af37;;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    width: 40px;
}