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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#050505;
    color:#fff;
}

/* HERO */

.hero{
    position:relative;
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    padding:0 8%;
    background:
        linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.80)),
        url('../img/hero.jpg');
    background-size:cover;
    background-position:center;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at right,#b3000025 0%,transparent 60%);
}

.hero-content{
    position:relative;
    max-width:700px;
    z-index:2;
}

.hero-subtitle{
    color:#d40000;
    font-weight:bold;
    letter-spacing:4px;
    font-size:14px;
}

.hero h1{
    font-size:72px;
    line-height:1;
    margin:20px 0;
    font-weight:800;
}

.hero p{
    font-size:20px;
    color:#cfcfcf;
    line-height:1.7;
    max-width:550px;
    margin-bottom:40px;
}

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

.btn-primary,
.btn-secondary{

    padding:16px 34px;
    text-decoration:none;
    border-radius:40px;
    transition:.3s;
    font-weight:bold;
}

.btn-primary{

    background:#c00000;
    color:#fff;
}

.btn-primary:hover{

    background:#ff2020;
}

.btn-secondary{

    border:2px solid #fff;
    color:#fff;
}

.btn-secondary:hover{

    background:#fff;
    color:#000;
}

/* MÓVIL */

@media(max-width:768px){

.hero{

padding:30px;

}

.hero h1{

font-size:46px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

text-align:center;

}

}

/* HEADER */

.header{

position:fixed;

top:0;
left:0;

width:100%;

padding:25px 0;

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

backdrop-filter:blur(12px);

z-index:999;

border-bottom:1px solid rgba(255,255,255,.08);

}

.container{

width:90%;

max-width:1400px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:34px;

font-weight:900;

letter-spacing:2px;

color:#fff;

}

.logo span{

color:#d10000;

}

nav ul{

display:flex;

gap:40px;

list-style:none;

}

nav a{

text-decoration:none;

color:#fff;

font-weight:600;

transition:.3s;

}

nav a:hover{

color:#d10000;

}

.header-btn{

padding:14px 26px;

border:2px solid #d10000;

text-decoration:none;

color:#fff;

transition:.3s;

}

.header-btn:hover{

background:#d10000;

}

.hero{

padding-top:120px;

}

@media(max-width:900px){

nav{

display:none;

}

.header-btn{

display:none;

}

.logo{

font-size:28px;

}

}

@import url("header.css");
@import url("hero.css");