*{

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

margin:0;

background:#000000;

color:white;

font-family:Arial, Helvetica, sans-serif;

}





nav{

position:fixed;

top:0;

width:100%;

z-index:100;

background:rgba(0,0,0,.85);

border-bottom:1px solid rgba(0,174,239,.25);

backdrop-filter:blur(10px);

}





.nav-container{

max-width:1200px;
margin:auto;
padding:18px 30px;

display:flex;
align-items:center;
justify-content:space-between;

}





.logo{

width:120px;

}





.menu{

display:flex;
align-items:center;
gap:25px;

}





.menu a{

color:#aaa;

text-decoration:none;

transition:.3s;

}



.menu a:hover{

color:#00AEEF;

}






.btn-nav,
.button{


border:1px solid #00AEEF;

padding:12px 25px;

border-radius:30px;

color:#00AEEF;

text-decoration:none;

transition:.3s;

display:inline-flex;
align-items:center;
justify-content:center;

}



.btn-nav:hover,
.button:hover{

background:#00AEEF;

color:#000;

box-shadow:0 0 30px #00AEEF;

}









.hero{


min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:40px;

position:relative;

overflow:hidden;

}





.hero::before{


content:"";

position:absolute;

width:600px;

height:600px;

background:#00AEEF;

filter:blur(180px);

opacity:.18;

}





.hero-content{


position:relative;

z-index:2;

animation:entrada 1s ease;

}





.hero-logo{


width:230px;

filter:drop-shadow(0 0 30px #00AEEF);

}





h1{

font-size:55px;

letter-spacing:4px;

}





.hero p{

font-size:22px;

color:#aaa;

line-height:1.6;

}





@keyframes entrada{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}









.section{


max-width:1200px;

margin:auto;

padding:100px 30px;

}




.dark{


max-width:none;

background:#000;

}







.label{

color:#00AEEF;

letter-spacing:5px;

}





h2{

font-size:40px;

}







.cards{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}





.card{


background:#050505;

border:1px solid rgba(0,174,239,.25);

padding:30px;

transition:.3s;

}





.card:hover{


transform:translateY(-10px);

border-color:#00AEEF;

box-shadow:0 10px 40px rgba(0,174,239,.3);

}





.card p{

color:#aaa;

}








.steps{


display:flex;

gap:30px;

}




.steps div{


flex:1;

border-top:2px solid #00AEEF;

padding:25px;

}




.steps span{


font-size:35px;

color:#00AEEF;

}





.reserve-box{


border:1px solid #00AEEF;

padding:50px;

text-align:center;

border-radius:15px;

}








.whatsapp{


position:fixed;

right:25px;

bottom:25px;

z-index:9999;


background:#00AEEF;

color:#000;


padding:15px 25px;

border-radius:50px;


font-weight:bold;

text-decoration:none;


box-shadow:0 0 30px #00AEEF;

transition:.3s;


}



.whatsapp:hover{


transform:scale(1.1);

}







footer{


padding:40px;

text-align:center;

border-top:1px solid #222;

color:#777;

}








@media(max-width:800px){



.menu{

display:flex;
align-items:center;
gap:25px;

}



.btn-nav{

display:none;

}



.hero{

padding-top:130px;

}



.hero-logo{

width:160px;

}



h1{

font-size:32px;

}



h2{

font-size:30px;

}



.cards,
.steps{

display:grid;

grid-template-columns:1fr;

}



.section{

padding:70px 20px;

}



.logo{

width:90px;

}



}
form{
max-width:700px;
margin:auto;
}

input,
textarea{

width:100%;

padding:15px;

background:#050505;

border:1px solid rgba(0,174,239,.3);

color:#fff;

border-radius:10px;

font-size:16px;

}

textarea{
resize:vertical;
min-height:120px;
}

button{
cursor:pointer;
background:transparent;
}

form{

max-width:700px;

margin:auto;

}


input,
textarea,
select{

width:100%;

padding:15px;

background:#050505;

border:1px solid rgba(0,174,239,.3);

color:#ffffff;

border-radius:10px;

font-size:16px;

}


textarea{

resize:vertical;

min-height:140px;

}


select{

cursor:pointer;

}


button{

cursor:pointer;

background:transparent;

}