/* CSS Document */
body{
margin:0;
background:#0a0a0a;
font-family:'Oswald', sans-serif;
color:white;
}

/* NAVBAR */

.navbar{
position:fixed;
top:0;
width:100%;
padding:20px 20px;
z-index:1000;
transition:0.4s;
}

.navbar.scrolled{
background:rgba(0,0,0,0.85);
backdrop-filter: blur(8px);
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
}

.nav-logo{
height:60px;
}

.nav-menu a{
margin-left:40px;
text-decoration:none;
color:#caa45f;
letter-spacing:2px;
transition:0.3s;
}

.nav-menu a:hover{
color:white;
}

/* HERO */

.hero{

position:relative;
height:100vh;
background:url("image/hero-bike.png") center/cover no-repeat;
overflow:hidden;

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

}

/* OVERLAY CINEMATOGRÁFICO */

.hero-overlay{

position:absolute;
width:100%;
height:100%;

background:
radial-gradient(circle at center, rgba(0,0,0,0.2), rgba(0,0,0,0.25)),
linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.4));

z-index:1;

}

/* EMBLEMA */

.hero-emblem{

position:absolute;
width:900px;
opacity:0;

top:50%;
left:50%;

transform:translate(-20%, -20%) scale(0.95);

animation:
fadeIn 2s ease forwards,
breathing 6s ease-in-out infinite;

z-index:1;
pointer-events:none;

}

/* CONTENIDO */

.hero-content{

position:relative;
z-index:2;
color:white;

}

/* TEXTO */

.hero h1{

font-size:48px;
letter-spacing:4px;

}

.hero-tagline{

margin-top:20px;
font-size:20px;
line-height:1.6;

}

.hero-tagline span{
color:#caa45f;
}

/* BOTÓN */

.hero-btn{

display:inline-block;
margin-top:30px;
padding:12px 30px;

border:1px solid #caa45f;
color:#caa45f;
text-decoration:none;

transition:0.3s;

}

.hero-btn:hover{

background:#caa45f;
color:black;

}

/* ANIMACIONES */

@keyframes fadeIn{
to{
opacity:0.08;
transform:translate(-50%, -50%) scale(1);
}
}

@keyframes breathing{
0%,100%{
transform:translate(-50%, -50%) scale(1);
}
50%{
transform:translate(-50%, -50%) scale(1.03);
}
}

/* MANIFESTO */

.manifesto{
padding:160px 10%;
text-align:center;
background:#0a0a0a;
}

.manifesto h2{
font-size:42px;
letter-spacing:4px;
margin:20px 0;
}

.manifesto h2:nth-child(2),
.manifesto h2:nth-child(3){
color:#caa45f;
}

/* PROCESS */

.process{
padding:140px 10%;
background:#111;
text-align:center;
}

.process-container{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:40px;
}

.process-step{
background:#1a1a1a;
padding:30px;
border-radius:6px;
transition:0.3s;
}

.process-step:hover{
transform:translateY(-10px);
border:1px solid #caa45f;
}

.process-step h3{
color:#caa45f;
}

/* ANIMATIONS */

.fade-in{
opacity:0;
transform:translateY(40px);
transition:1s;
}

.fade-in.show{
opacity:1;
transform:translateY(0);
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.bike-list{
display:flex;
flex-direction:column;
gap:100px;
}

.bike-item{
position:relative;
}

.bike-item img{
width:100%;
}

.bike-info{
position:absolute;
bottom:40px;
left:40px;
color:white;
}

.bike-info h2{
font-size:36px;
}

.bike-info a{
color:#caa45f;
text-decoration:none;
}
.bike-hero{

height:100vh;
background:url("image/hero-bike.png") center/cover no-repeat;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.bike-gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
padding:100px 10%;
}

.bike-gallery img{
width:100%;
}

.bike-specs{
text-align:center;
padding:100px;
background:#111;
}
.fade-in{
opacity:0;
transform:translateY(40px);
transition:1s;
}

.fade-in.show{
opacity:1;
transform:translateY(0);
}
/* ARMORY HERO */

.armory-hero{

height:60vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:#0a0a0a;
text-align:center;

}

.armory-hero h1{

font-size:48px;
letter-spacing:4px;

}

.armory-hero p{

color:#caa45f;

}

/* PRODUCTS */

.products{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
padding:100px 10%;
background:#111;

}

.product-card{

background:#1a1a1a;
padding:20px;
text-align:center;
transition:0.3s;

}

.product-card:hover{

transform:translateY(-10px);
border:1px solid #caa45f;

}

.product-card img{

width:100%;
margin-bottom:15px;

}

.product-card h3{

margin:10px 0;

}

.product-card p{

color:#caa45f;

}

.product-card button{

margin-top:10px;
padding:10px 20px;
border:1px solid #caa45f;
background:none;
color:#caa45f;
cursor:pointer;
transition:0.3s;

}

.product-card button:hover{

background:#caa45f;
color:black;

}

/* WORKSHOP HERO */

.workshop-hero{

height:80vh;
background:url("image/workshop.jpg") center/cover no-repeat;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

text-align:center;

}

.workshop-hero h1{

font-size:56px;
letter-spacing:4px;

}

.workshop-hero p{

color:#caa45f;

}

/* INTRO */

.workshop-intro{

padding:120px 20%;
text-align:center;
background:#111;

line-height:1.8;

}

/* PROCESS BLOCKS */

.workshop-process{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

padding:100px 10%;

background:#0a0a0a;

}

.process-block{

text-align:center;

}

.process-block img{

width:100%;
margin-bottom:10px;

transition:0.3s;

}

.process-block img:hover{

transform:scale(1.05);

}

.process-block h3{

color:#caa45f;

}
/* CUSTOM HERO */

.custom-hero{

height:70vh;
background:#0a0a0a;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-align:center;

}

.custom-hero h1{

font-size:56px;
letter-spacing:4px;

}

.custom-hero p{

color:#caa45f;

}

/* INTRO */

.custom-intro{

padding:120px 20%;
text-align:center;
background:#111;
line-height:1.8;

}

/* PROCESS */

.custom-process{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

padding:100px 10%;
background:#0a0a0a;

}

.custom-step{

background:#1a1a1a;
padding:30px;
text-align:center;
transition:0.3s;

}

.custom-step:hover{

transform:translateY(-10px);
border:1px solid #caa45f;

}

.custom-step h3{

color:#caa45f;

}

/* FORM */

.custom-form{

padding:120px;
text-align:center;
background:#111;

}

.custom-form form{

display:flex;
flex-direction:column;
gap:15px;
max-width:500px;
margin:auto;

}

.custom-form input,
.custom-form textarea,
.custom-form select{

padding:12px;
background:#222;
border:none;
color:white;

}

.custom-form button{

padding:12px;
background:#caa45f;
border:none;
cursor:pointer;

}
/* CONTACT HERO */

.contact-hero{

height:60vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

background:#0a0a0a;

}

.contact-hero h1{

font-size:48px;
letter-spacing:4px;

}

.contact-hero p{

color:#caa45f;

}

/* CONTACT LAYOUT */

.contact-container{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;

padding:120px 10%;
background:#111;

}

/* INFO */

.contact-info h2{

margin-bottom:20px;

}

.contact-info p{

line-height:1.6;

}

/* FORM */

.contact-form form{

display:flex;
flex-direction:column;
gap:15px;

}

.contact-form input,
.contact-form textarea{

padding:12px;
background:#222;
border:none;
color:white;

}

.contact-form button{

padding:12px;
background:#caa45f;
border:none;
cursor:pointer;
transition:0.3s;

}

.contact-form button:hover{

background:white;
color:black;

}
/* BUILDS HERO */

.builds-hero{

height:60vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

background:#0a0a0a;

}

.builds-hero h1{

font-size:48px;
letter-spacing:4px;

}

.builds-hero p{

color:#caa45f;

}

/* BUILDS GRID */

.builds-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;

padding:100px 10%;
background:#111;

}

.build-card{

background:#1a1a1a;
padding:20px;
text-align:center;
transition:0.3s;

}

.build-card:hover{

transform:translateY(-10px);
border:1px solid #caa45f;

}

.build-card img{

width:100%;
margin-bottom:15px;

}

.build-card h3{

margin:10px 0;

}

.build-card p{

color:#caa45f;

}

.build-card a{

display:inline-block;
margin-top:10px;
color:#caa45f;
text-decoration:none;
}
/* MOBILE NAV */

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

/* RESPONSIVE */

@media (max-width: 900px){

.nav-menu{
display:none;
flex-direction:column;
background:#000;
position:absolute;
top:80px;
right:0;
width:200px;
padding:20px;
}

.nav-menu.active{
display:flex;
}

.menu-toggle{
display:block;
}

}
.menu-toggle{
display:none;
}
@media (max-width: 900px){

.menu-toggle{
display:block;
}

}