*{box-sizing:border-box;font-family:Arial;margin:0;padding:0}
body{background:#090909;color:white}
header{display:flex;justify-content:space-between;padding:20px 8%;background:#000}
.logo{font-size:28px;font-weight:bold}.logo span{color:#e00000}
nav a{color:white;text-decoration:none;margin:15px}
.hero{display:flex;align-items:center;justify-content:space-around;padding:60px 8%;background:linear-gradient(90deg,#000,#300)}
.hero img{width:380px;border-radius:20px}
.contenido{max-width:600px}
h1{font-size:50px}.contenido p{font-size:20px;margin:25px 0}
.btn,.btn2{padding:15px 30px;border-radius:8px;text-decoration:none;margin-right:10px}
.btn{background:#e00000;color:white}.btn2{border:1px solid white;color:white}
section{padding:50px 8%;text-align:center}
.cards{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cards div,.box{background:#171717;padding:30px;border-radius:15px;border:1px solid #333}
button{background:#e00000;color:white;border:0;padding:12px;margin-top:15px;border-radius:6px}
input{display:block;width:350px;max-width:100%;padding:15px;margin:10px auto}
footer{text-align:center;padding:30px;background:#000}
@media(max-width:800px){.hero{flex-direction:column}h1{font-size:35px}}