* { margin:0; padding:0; box-sizing:border-box; font-family:'Roboto', sans-serif; }

body {
  background: url('imagen/solo_leveling.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  min-height: 100vh;
  position: relative;
}

/* Sidebar */
#sidebar {
  position: fixed;
  top:0; left:0;
  width:200px; height:100%;
  background: rgba(0,0,0,0.85);
  display:flex; flex-direction: column; align-items: center;
  padding-top:20px;
  transform: translateX(-160px); /* parcialmente visible en móviles */
  transition: transform 0.3s ease;
  z-index: 1500;
}

#sidebar.active { transform: translateX(0); }

#sidebar a {
  color: #fff;
  text-decoration: none;
  padding: 15px 10px;
  width:100%;
  text-align:center;
  margin-bottom:10px;
  border-radius:8px;
  transition: background 0.3s;
}

#sidebar a:hover { background: rgba(255,153,0,0.8); }

#sidebar .icon-link img {
  width: 80%;
  max-width: 80px;
  height: auto;
  margin-bottom: 15px;
  border-radius:5px;
  transition: transform 0.3s;
}

#sidebar .icon-link img:hover { transform: scale(1.2); }

/* Botón hamburguesa */
#menu-toggle {
  position: fixed;
  top: 25px; left: 0px;
  z-index: 2000;
  background: rgba(0,0,0,0.7);
  color:#fff;
  border:none;
  padding:8px 13px;
  font-size: 15px;
  cursor:pointer;
  border-radius:5px;
}

#menu-toggle:hover { background: rgba(255,153,0,0.8); }

/* Contenido principal */
main {
  margin-left: 40px; /* deja espacio para sidebar parcial */
  padding: 60px 20px 20px 20px;
  transition: margin-left 0.3s;
}

main.shifted { margin-left: 200px; }

/* Secciones */
section { backdrop-filter: blur(5px); background: rgba(0,0,0,0.6); margin-bottom:40px; border-radius:15px; padding:30px; }

h1,h2 { text-shadow:2px 2px 8px #000; margin-bottom:20px; }
p { font-size:1.2rem; margin-bottom:20px; }

.video-container { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
iframe { border-radius:15px; width:400px; height:225px; }

/* Música de fondo */
#music-control {
  position: fixed; bottom:20px; right:20px;
  background: rgba(0,0,0,0.7);
  padding:10px 15px;
  border-radius:50px;
  cursor:pointer; z-index:1001;
}

#music-control:hover { background: rgba(255,153,0,0.8); }

/* Footer */
footer { width:100%; background: rgba(0,0,0,0.8); text-align:center; padding:15px; color:#fff; position: relative; }

/* Responsive */
@media(max-width:768px){
  #sidebar { transform: translateX(-160px); }
  main { margin-left: 40px; padding-top: 80px; }
  iframe { width:100%; height:200px; }
}

b {
  color:maroon;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-decoration: underline;



}

span {

  color: darkmagenta;
  font-weight: bold;
  font-family:'Times New Roman', Times, serif;
  font-size: 1.2rem;




}