.header{
  position: relative;
}
.fondo-reservas{
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: -10;
  background-color: #000.1;
  backdrop-filter: blur(5px);
}
.titulo__header{
  width: max-content;
  margin: auto;
  margin-top: 10%;
  text-align: center;
}
.titulo__header img{
  transform: rotate(-90deg);
  width: 80px;
}
.titulo__header h1{
  margin-top: -10px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 4rem;
  font-family: Katler-Regular;
  color: var(--color-button);
  letter-spacing: 5px;
}
.titulo__header span{
  display: block;
  font-size: 3.5rem;
  margin-top: -22px;
}
.titulo__header .button{
  margin: 0 auto;
  width: max-content;
 display: block;
}

.titulo__header .calendario{
  transform: rotate(360deg);
  width: 80px}
.titulo__reserva{
  text-align: center;
  font-size: 3rem;
  letter-spacing: 3px;
  color: var(--color-button);
  color: #fefefe;
  font-family: Katler-Regular;
  overflow: hidden;
}
.titulo__reserva span{
  display: block;
  letter-spacing: 5px;
  margin-top: -12px;
} 
.titulo__reserva img{
transform: rotate(-90deg);

}
.titulo__reserva h3{
  color: #100;
margin-top: -18px;
}.titulo__reserva p{
  width: 400px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding:7px 80px;
  color: #100;
  font-size: .9rem;
}
.container__reserva{
  width: clamp(350px,100%,1000px);
  margin: auto;
  position: relative;
  overflow: hidden;
}
.container__reserva .vector-6{
width: 90%;
max-width: 580px;
 position: absolute;
 top: 0px;
 z-index: -1;
 left: 50%;
 transform: translateX(-50%)
}
.vector-1{
  display: none;
  width: 70%;
 position: absolute;
 top: 70%;
 z-index: -1;
 right: 0;
}
.form-form{
  color: #fefefe;
  margin: auto; 
  margin-top: 50px; 
  width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 15px;
}

.form-form div{
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}
.form-form div input,textarea
{
  border: 1px solid transparent;
  width: 100%;
  border-radius: 20px;
  background-color: #ffffff5b;
  backdrop-filter: blur(10px);
  color: #fefefe;
  padding: 10px 12px;
  outline: none;
}
.form-form textarea{
  resize: none;
  height: 70px;
  font-family: KumbhSans-Regular;
}
.form-form div input::placeholder,textarea::placeholder{
  color: #fefefe;
  font-family: KumbhSans-Regular;
  font-size: .7rem;
}
.form-form div input:hover,textarea:hover{
  border: 1px solid #fefefe;
}
.form-form .button {
  border: 1px solid #fefefe;
  color: #fefefe;
  padding: 8px 20px ;
}

.calendario{
  width: 80px;
  margin: 0 auto;
  margin-top: 35px;
  display: block;
}
.Container__especial{
  margin: auto;
  width: clamp(350px,80%,1000px);
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}
.especial-contenido h3{
font-family: Katler-Regular;
letter-spacing: 4px;
font-size: 2.3rem;
color: #fefefe;
}
.especial-contenido span {
  margin-top: -5px;
  display: block;
}
.especial-contenido span:first-child{
  font-size: 3.5rem;
  letter-spacing: 4px;
}
.especial-contenido span:last-child{
  font-size: 1.3rem;
  letter-spacing: 1px;
  font-weight: 100;
}

.especial-contenido p{
  width: 300px;
  margin: 15px 0;
  font-family: KumbhSans-regular;
  color: #fefefe;
  text-align: justify;
}
.especial-contenido a{
  padding: 8px 20px;
}
@media only screen and (max-width: 600px) {
  


.titulo__header img{
  width: 50px;
}
.titulo__header h3{
  margin-top: -10px;
  text-align: center;
  font-size: 2rem;
  color: var(--color-button);
  letter-spacing: 5px;
}
.titulo__header span{
  display: block;
  font-size: 1.5rem;
  margin-top: -8px;
}
.titulo__header{
  margin-top: 25%;
}
.titulo__reserva h3{
font-size: 2.2rem;
margin-bottom: -10px;
}
.titulo__reserva p{
  width: 360px;
  padding: 7px 55px;
  text-align: center;
  font-size: .8rem;
  color: #100;
  letter-spacing: 1px;
}
.titulo__reserva span{
font-size: 1.8rem;
margin-top: -5px;
}
.titulo__reserva img{
  width: 30px;
  margin-bottom:1px;
}
.container__reserva .vector-6{
width: 100%;
 position: absolute;
top: 0px;
z-index: -1;
left: 50%;
transform: translateX(-50%)
  }
  .vector-1{
   width: 70%;
   position: absolute;
   top: 70%;
   z-index: -1;
   right: 0;
  }
.form-form{
  color: #fefefe;
  margin-top: 50px;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 20px;
}
.form-form label {
  font-family: KumbhSans-Bold;
  margin-bottom:6px ;
  font-size: .7rem;
}
.form-form div{
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}
.form-form div input,textarea
{
  border: 1px solid #fefefe;
  width: 100%;
  border-radius: 20px;
  background-color: transparent;
  backdrop-filter: blur(10px);
  color: #fefefe;
  outline: none;
}
.form-form textarea{
  resize: none;
}
.form-form div input:hover,textarea:hover{
  border: 1px solid #fefefe;
}

.especial-img{
  display: none;
}

.Container__especial{
  margin: auto;
  width: clamp(350px,80%,1000px);
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap ;
  align-items: center;
  justify-content: space-evenly;
}
.especial-contenido h3{
  font-family: Katler-Regular;

letter-spacing: 4px;
font-size: 1.7rem;
text-align: center;
color: #fefefe;
}
.especial-contenido{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.especial-contenido span {
  margin-top: -5px;
  display: block;
}
.especial-contenido span:first-child{
  font-size: 2.7rem;
  letter-spacing: 4px;
}
.especial-contenido span:last-child{
  font-size: 1rem;
  letter-spacing: 1px;
  font-weight: 100;
}

.especial-contenido p{
  width: 200px;
  margin: 15px 0;
  font-family: KumbhSans-regular;
  color: #fefefe;
  text-align: justify;
  font-size: .6rem;
}
}