*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:#0b0b0b;
  color:#f5f5f5;
  font-family:'Inter', sans-serif;
}

/* HERO */
.hero{
  height:100vh;
  position:relative;
  overflow:hidden;
}

.video-bg{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero::after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9));
}

.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 10%;
  animation:fadeUp 1.5s ease;
}

.hero h1{
  font-family:'Playfair Display', serif;
  font-size:90px;
  letter-spacing:6px;
  text-transform:uppercase;
}

.hero p{
  margin-top:20px;
  font-size:18px;
  letter-spacing:2px;
  color:#d4af37;
}

.hero-content::after{
  content:"";
  width:80px;
  height:2px;
  background:#d4af37;
  margin-top:20px;
}

/* EVENTOS */
.eventos{
  padding:120px 10%;
}

.evento{
  display:flex;
  gap:40px;
  margin-bottom:80px;
  align-items:flex-start;
  border-bottom:1px solid #222;
  padding-bottom:40px;
  transition:0.4s;
}

.evento:hover{
  transform:translateX(10px);
  border-color:#d4af37;
}

.evento span{
  font-size:12px;
  color:#d4af37;
  letter-spacing:3px;
}

.evento h2{
  font-family:'Playfair Display', serif;
  font-size:36px;
  margin-bottom:10px;
}

.evento p{
  color:#aaa;
  max-width:500px;
}

/* BLOQUES IMAGEN */
.evento-bg,
.evento-bg-1,
.evento-bg-2,
.evento-bg-3{
  width:100%;
  height:250px;
  border-radius:12px;
  margin:15px 0;
  position:relative;
  overflow:hidden;
}

.evento-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('img/img-cisne.jpg') center/cover no-repeat;
  filter:brightness(0.4);
}

.evento-bg-1::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('img/cenas.jpg') center/cover no-repeat;
  filter:brightness(0.4);
}

.evento-bg-2::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('img/propuesta.jpg') center/cover no-repeat;
  filter:brightness(0.4);
}

.evento-bg-3::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('img/vip-4.jpg') center/cover no-repeat;
  filter:brightness(0.4);
}

/* CTA */
.cta{
  padding:120px 10%;
  text-align:center;
  border-top:1px solid #222;
}

.cta h2{
  font-family:'Playfair Display', serif;
  font-size:40px;
  margin-bottom:30px;
}

.cta a{
  text-decoration:none;
  color:#d4af37;
  border:1px solid #d4af37;
  padding:12px 30px;
  letter-spacing:2px;
  transition:0.3s;
}

.cta a:hover{
  background:#d4af37;
  color:#000;
}

/* RESPONSIVE */
@media screen and (max-width:768px){

  .hero{
    height:75vh;
  }

  .hero-content{
    padding:0 20px;
    text-align:center;
    align-items:center;
  }

  .hero h1{
    font-size:34px;
    letter-spacing:2px;
  }

  .hero p{
    font-size:13px;
  }

  .eventos{
    padding:60px 20px;
  }

  .evento{
    flex-direction:column;
    gap:15px;
  }

  .evento:hover{
    transform:none;
  }

  .evento h2{
    font-size:20px;
  }

  .evento p{
    font-size:13px;
    max-width:100%;
  }

  .evento-bg{
    height:180px;
  }

  .cta{
    padding:60px 20px;
  }

  .cta h2{
    font-size:24px;
  }

}

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


.nav a{
  color:#ccc;
  text-decoration:none;
  letter-spacing:6px;
  font-size:18px;
  transition:0.3s;
}

.nav a:hover{
  color:#d4af37;
}

.nav{
  display:flex;
  justify-content:center;
  gap:60px;
  padding:20px 0;
 align-items:center; 
  background:#0b0b0b;  
}

.logo img{
  height: 70px;   
  width: auto;
  display: block;
  align-items: center;
}

/* my one model responsive */
@media (max-width: 768px){

  .nav{
    flex-direction:column;
    gap:15px;
    text-align:center;
  }

  .nav{ gap:30px; }
}