/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BODY */
body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 18px;
  background: radial-gradient(circle, #0f172a, #020617);
  color: #f8fafc;
  line-height: 1.6;
}

/* CONTENEDOR */
.container {
  display: flex;
}

/* SIDEBAR */
.sidebar {
  width: 260px;
  height: 100vh;
  background: linear-gradient(180deg, #1e1b4b, #020617);
  padding: 25px 15px;
  position: fixed;
  box-shadow: 4px 0 25px rgba(147, 51, 234, 0.5);
  display: flex;
  flex-direction: column;
}

.sidebar h2 {
  color: gold;
  text-shadow: 0 0 10px gold;
  margin-bottom: 20px;
}

/* LINKS SIDEBAR */
.sidebar a {
  display: block;
  color: #c4b5fd;
  text-decoration: none;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 5px;
  transition: 0.3s;
}

.sidebar a:hover {
  background: rgba(147, 51, 234, 0.2);
  color: gold;
  transform: translateX(5px);
}

/* CONTENIDO */
.content {
  margin-left: 260px;
  padding: 40px;
  width: calc(100% - 260px);
}

/* TITULO PRINCIPAL */
.title {
  font-family: 'Cinzel', serif;
  text-align: center;
  font-size: 56px; /* antes 80px, demasiado grande */
  color: gold;
  text-shadow: 0 0 15px gold;
  margin-bottom: 15px;
}

/* SUBTITULOS */
h2 {
  font-family: 'Cinzel', serif;
  font-size: 28px;
  color: #e9d5ff;
  margin: 20px 0 10px;
}

h3 {
  font-size: 22px;
  margin-top: 15px;
}

/* TEXTO */
p {
  text-align: justify;
  margin-bottom: 15px;
  color: #e2e8f0;
}

/* LISTAS */
ul {
  margin-left: 20px;
  margin-top: 10px;
}

li {
  margin-bottom: 6px;
}

/* TARJETAS */
.card {
  background: rgba(30, 27, 75, 0.6);
  border: 1px solid gold;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 25px;
  box-shadow: 0 0 10px #9333ea;
  transition: 0.3s;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px gold;
}

/* CODIGO */
.code {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid gold;
  padding: 15px;
  border-radius: 12px;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  color: #22c55e;
  box-shadow: 0 0 10px #9333ea;
  margin-top: 10px;
  overflow-x: auto;
}

.code::after {
  content: "✨";
  float: right;
}

/* TABLAS */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

td, th {
  border: 1px solid gold;
  padding: 10px;
  text-align: center;
}

th {
  background: #1e1b4b;
  color: gold;
}

/* SLOGAN */
.slogan {
  text-align: center;
  font-size: 20px;
  font-style: italic;
  color: #e9d5ff;
  margin-bottom: 25px;
  transition: 0.3s;
}

.slogan:hover {
  color: rgb(250, 179, 250);
  letter-spacing: 1px;
  text-shadow:
    0 0 5px gold,
    0 0 10px gold,
    0 0 20px #ffd700;
}

/* BOTON MENU */
.menu-magico-sidebar {
  margin-top: 15px;
}

.magic-btn {
  width: 100%;
  background: linear-gradient(45deg, #9333ea, #c084fc);
  border: none;
  padding: 10px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}

.magic-btn:hover {
  background: linear-gradient(45deg, gold, #9333ea);
  box-shadow: 0 0 10px gold;
}

/* SUBMENU */
.submenu {
  display: none;
  margin-top: 8px;
  padding-left: 10px;
}

.submenu a {
  font-size: 13px;
  padding: 6px;
  color: #a78bfa;
}

.submenu a:hover {
  color: gold;
}

/* SCROLL */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #9333ea;
  border-radius: 10px;
}