body{
margin:0;
font-family:'Roboto', sans-serif;
background:#0f172a;
color:#e2e8f0;
}

/* HEADER */

header{
background:#020617;
padding:20px 40px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 3px 10px rgba(0,0,0,0.6);
}

/* LOGO ANIMADO */

.logo{
font-family:'Orbitron', sans-serif;
letter-spacing:2px;
color:#38bdf8;
animation:glow 3s infinite alternate;
}

@keyframes glow{
from{
text-shadow:0 0 5px #38bdf8;
}
to{
text-shadow:0 0 20px #38bdf8;
}
}

/* MENU */

nav a{
color:#cbd5f5;
text-decoration:none;
margin-left:20px;
font-weight:500;
transition:0.3s;
}

nav a:hover{
color:#38bdf8;
text-shadow:0 0 5px #38bdf8;
}

/* HERO */

.hero{
background-image:url("https://images.unsplash.com/photo-1511512578047-dfb367046420");
background-size:cover;
background-position:center;
height:320px;
display:flex;
align-items:center;
justify-content:center;
}

.hero-text{
background:rgba(2,6,23,0.75);
padding:40px;
border-radius:12px;
text-align:center;
max-width:600px;
backdrop-filter:blur(4px);
}

.hero-text h2{
font-family:'Orbitron', sans-serif;
color:#38bdf8;
}

/* CONTENEDOR */

.contenedor{
display:flex;
padding:40px;
gap:30px;
}

/* ARTICULOS */

main{
flex:3;
}

article{
background:#1e293b;
padding:25px;
margin-bottom:25px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.5);
border:1px solid transparent;
transition:0.3s;
}

article:hover{
transform:translateY(-6px);
border:1px solid #38bdf8;
box-shadow:0 0 15px rgba(56,189,248,0.5);
}

article h2{
color:#38bdf8;
font-family:'Orbitron', sans-serif;
}

/* LATERAL */

aside{
flex:1;
background:#1e293b;
padding:25px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.5);
}

aside h3{
color:#38bdf8;
font-family:'Orbitron', sans-serif;
}

aside ul{
padding-left:20px;
}

/* FOOTER */

footer{
background:#020617;
text-align:center;
padding:20px;
margin-top:30px;
font-size:14px;
color:#94a3b8;
border-top:1px solid #38bdf8;
}

footer p{
margin:5px;
}