/* ——— Variables de color ——— */
:root{
  --bg:#0d0d0d;
  --surface:#111;
  --surface-2:#1a1a1a;
  --text:#e6e6e6;
  --accent:#fbbf24;
}

/* ——— Reset básico ——— */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Courier New", Courier, monospace;
}

/* ——— Cabecera con imagen de fondo ——— */
.hero{
  width:100%;
  min-height:clamp(220px, 35vw, 420px);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-bottom:2px solid var(--accent);
}

/* ——— Menú ——— */
nav{
  background:var(--surface-2);
  border-bottom:2px solid var(--accent);
}

.menu{
  list-style:none;
  margin:0;
  padding:0.6rem 0;
  display:flex;
  gap:24px;
  justify-content:center;
}

.menu a{
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  position:relative;
  padding:4px 2px;
  transition:color .25s ease;
}

.menu a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}

.menu a:hover{ color:#fff; }
.menu a:hover::after{ transform:scaleX(1); }

/* enlace activo */
.menu a[aria-current="page"]{
  color:#fff;
}
.menu a[aria-current="page"]::after{
  transform:scaleX(1);
}

/* ——— Contenido ——— */
main{
  padding:24px;
  text-align:center;
}

h1,h2,h3{ margin:0 0 12px; }

/* ——— Pie ——— */
footer{
  background:var(--surface);
  border-top:2px solid var(--accent);
  text-align:center;
  padding:10px;
  font-size:.9rem;
}

/* Contenedor */
.imagen-final {
  text-align: center;
  margin-top: 2rem;
}

/* Imagen dentro del contenedor */
.imagen-final img {
  max-width: 100%;  /* No se salga del contenedor */
  height: auto;     /* Mantiene proporción */
  display: block;   /* Permite centrar con margin auto */
  margin: 0 auto;   /* Centra la imagen */
}

@media (max-width: 600px) {
    .menu {
        flex-direction: column;
        gap: 12px;
        padding: 0.5rem 0;
    }
    .menu a {
        font-size: 0.9rem;
    }
}