/* styles.css - Sistema Solar (Tarea #2) */
:root{
  --bg:#000;
  --fg:#FFD400; /* amarillo */
  --muted:#C9A800;
  --link:#FFE866;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif;
  line-height:1.6;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{
  max-width:900px;
  margin:0 auto;
  padding:16px;
}
.header-img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:18px;
  display:block;
  border:2px solid var(--muted);
  box-shadow:0 6px 22px rgba(255,212,0,.12);
}
h1,h2{
  letter-spacing:.4px;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
nav{
  margin:18px 0 8px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
nav a{
  padding:10px 14px;
  border:1px solid var(--muted);
  border-radius:12px;
  background:rgba(255,212,0,.06);
}
.main{
  background:rgba(255,212,0,.04);
  border:1px solid var(--muted);
  border-radius:16px;
  padding:18px;
}
small.note{
  color:var(--muted);
  display:block;
  margin-top:10px;
}
footer{
  margin:28px 0 8px;
  color:var(--muted);
  font-size:.9rem;
  text-align:center;
}
figure{margin:0}
@media (max-width:640px){
  .header-img{height:200px}
}