/* ─────────────────────────────────────────────────────────────────────
 * Wonderland · estilo del nav superior (logo + botón Volver)
 *
 * Reemplaza el texto "Wonderland" de la derecha por el logo SVG en
 * formato cuadrado, y el "← Volver a la madriguera" de la izquierda
 * por un botón rectangular con la misma estética del logo: fondo azul
 * nocturno, marco fino dorado, texto Cinzel dorado.
 *
 * Este CSS se carga DESPUÉS del bloque <style> inline de cada página
 * para sobrescribir las reglas anteriores de .nav-logo y .nav-back.
 * ───────────────────────────────────────────────────────────────────── */

/* ── Logo (derecha) · cuadrado con el SVG ── */
.nav-logo {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding: 0;
  line-height: 0;
  text-decoration: none;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background: rgba(13, 26, 38, 0.65);
  transition: border-color 0.3s ease, background 0.3s ease;
  opacity: 1;
  font-size: 0;  /* aplasta cualquier texto residual */
  letter-spacing: 0;
}
.nav-logo img {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.nav-logo:hover {
  border-color: rgba(201, 168, 76, 0.6);
  background: rgba(13, 26, 38, 0.95);
}

/* ── Botón Volver (izquierda) · rectángulo con estética de logo ── */
.nav-back {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  color: rgba(201, 168, 76, 0.85);
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.65rem 1.1rem;
  background: rgba(13, 26, 38, 0.65);
  border: 1px solid rgba(201, 168, 76, 0.28);
  transition: all 0.3s ease;
}
.nav-back:hover {
  color: var(--gold, #c9a84c);
  border-color: rgba(201, 168, 76, 0.6);
  background: rgba(13, 26, 38, 0.95);
}

/* ── Móvil · proporciones ligeramente ajustadas ── */
@media (max-width: 700px) {
  .nav-logo {
    width: 42px;
    height: 42px;
  }
  .nav-back {
    font-size: 0.5rem;
    padding: 0.55rem 0.9rem;
    letter-spacing: 0.18em;
  }
}