/* danilopez25.es — Menú (hamburguesa a pantalla completa, estilo violeta) */

/* Evita barra horizontal y descuadres laterales */
html, body { overflow-x: hidden; }

/* ===== Loader de entrada ===== */
#page-loader{
  position:fixed; inset:0; z-index:2147483600;
  display:grid; place-items:center;
  background:#05040c;
  transition:opacity .5s ease, visibility .5s ease;
}
#page-loader.hidden{ opacity:0; visibility:hidden; }
/* En cambio de idioma manda la cortina langfx, no el loader */
html.langfx #page-loader{ display:none !important; }
#page-loader .pl-mark{
  font-size:64px; font-weight:900; color:#b56cff; letter-spacing:-.06em;
  text-shadow:0 0 30px rgba(181,108,255,.6);
  animation:pl-pulse 1s ease-in-out infinite;
}
@keyframes pl-pulse{ 0%,100%{ opacity:.4; transform:scale(.94); } 50%{ opacity:1; transform:scale(1.06); } }

/* ===== Botón atrás (páginas de código) ===== */
.code-back{
  display:inline-flex; align-items:center; gap:6px;
  margin:0 0 14px;
  padding:9px 16px;
  border:1px solid rgba(181,108,255,.45);
  border-radius:999px;
  background:rgba(123,92,255,.10);
  color:#c9b6ff; text-decoration:none;
  font-size:13px; font-weight:800; letter-spacing:.05em;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.code-back:hover{ color:#fff; background:rgba(123,92,255,.22); box-shadow:0 0 18px rgba(165,92,255,.28); }

/* ===== Scroll-reveal ===== */
.reveal-init{ opacity:0; transform:translateY(26px); }
.reveal-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){
  .reveal-init{ opacity:1; transform:none; }
}
.container-fluid { padding-left: 0 !important; padding-right: 0 !important; }

/* Enlaces sin subrayado (quita la "raya" de Bootstrap al pasar el ratón) */
a, a:hover, a:focus { text-decoration: none; }

/* Botones: mantener su color al pasar el ratón (evita el azul de Bootstrap) */
.btn-play, .btn-play:hover,
.btn-ranking, .btn-ranking:hover,
.btn-dark, .btn-dark:hover,
.btn-primary, .btn-primary:hover { color: #fff; }
.btn-soft, .btn-soft:hover { color: #111; }
.hero-btn.primary, .hero-btn.primary:hover { color: #111; }
.hero-btn.ghost, .hero-btn.ghost:hover { color: #fff; }

/* Botón hamburguesa */
#menu_on {
  display: inline-block;
  width: 30px;
  height: 20px;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  margin: 16px !important;
  cursor: pointer;
}
#menu_on span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  display: block;
  background: #fff;
  transition: all 0.25s ease;
  transform-origin: 0px 100%;
}
#menu_on span:nth-child(1) { top: 0; }
#menu_on span:nth-child(2) { top: calc(50% - 2px); }
#menu_on span:nth-child(3) { bottom: 0; }

/* Overlay del menú (acotado a #wrapper para no tocar el nav del home) */
#wrapper nav {
  position: fixed;
  inset: 0;
  z-index: 400;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  background: #08060f;
  color: #fff;
  overflow-y: auto;
  transition: transform .55s cubic-bezier(.7,0,.3,1), opacity .4s ease, visibility .55s;
}
#wrapper nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 18% 22%, rgba(123,92,255,.28), transparent 60%),
    radial-gradient(50% 50% at 90% 85%, rgba(181,108,255,.16), transparent 60%);
}
.visible_menu #wrapper nav {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.menu-inner {
  position: relative;
  z-index: 2;
  min-height: 100%;
  padding: 80px 60px 40px;
  display: flex;
  flex-direction: column;
}

.menu-brand {
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 17px;
  color: #fff;
}
.menu-brand .mb-code { color: #b56cff; font-weight: 900; }

.menu-watermark {
  position: absolute;
  right: 60px;
  top: 110px;
  font-size: clamp(90px, 14vw, 190px);
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.05);
  pointer-events: none;
}

/* Lista de navegación */
.lista {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lista .elemento a {
  display: flex;
  align-items: center;
  gap: 22px;
  text-decoration: none;
  padding: 8px 0;
  color: #fff;
  width: max-content;
}
.lista .mnum {
  color: #7b5cff;
  font-size: 15px;
  font-weight: 800;
  width: 34px;
  letter-spacing: .1em;
}
.lista .mlbl {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.86);
  transition: color .2s ease;
}
.lista .elemento a::after {
  content: "";
  width: 0;
  height: 3px;
  border-radius: 3px;
  margin-left: 6px;
  background: linear-gradient(90deg, #7b5cff, #b56cff);
  transition: width .25s ease;
}
.lista .elemento a:hover .mlbl { color: #fff; }
.lista .elemento a:hover::after { width: 64px; }

/* Submenú inferior */
.submenu {
  margin-top: auto;
  padding-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1180px;
}
.sub-rule {
  display: block;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #7b5cff, #b56cff);
}
.submenu h4 { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: #fff; }
.submenu p  { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.55); }
.submenu a  { color: #b56cff; text-decoration: none; font-size: 14px; font-weight: 600; }
.submenu a:hover { filter: brightness(1.15); }

/* Hamburguesa -> X (acotado a #menu_on: no afecta a otros <span> como los chips) */
.visible_menu #menu_on span:nth-child(1) { transform: rotate(45deg) translate(-2px, 1px); }
.visible_menu #menu_on span:nth-child(2) { opacity: 0; }
.visible_menu #menu_on span:nth-child(3) { transform: rotate(-45deg) translate(-3px, 3px); }

/* Responsive */
@media (max-width: 640px) {
  .menu-inner { padding: 80px 26px 30px; }
  .lista { margin-top: 40px; }
  .submenu { grid-template-columns: 1fr; gap: 22px; }
  .menu-watermark { display: none; }
}

/* Deja hueco para el footer (evita scroll extra en páginas cortas) */
.works-hero,
.code-page,
.term-page,
.contact-hero {
  min-height: calc(100vh - 88px) !important;
}

/* Juegos: reserva el hueco de la barra superior fija (evita solape) */
.game-body .space-page,
.game-body .snake-page,
.game-body .invasion-page,
.game-body .tetris-page,
.game-body .pacman-page,
.game-body .break-page,
.game-body .ppt-page,
.game-body .ttt-page {
  padding-top: 88px;
}

/* ===== Barra superior (nav) en todas las vistas, junto a la hamburguesa ===== */
.site-topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px;
  pointer-events:none;                 /* deja pasar clics al área vacía (hamburguesa) */
}
.site-topbar > *{ pointer-events:auto; }
.site-topbar.topbar-inner{ justify-content:flex-end; }   /* solo nav a la derecha */

.tb-logo{
  display:flex; align-items:center; gap:10px;
  color:#fff; text-decoration:none;
  font-weight:800; letter-spacing:.08em; font-size:18px;
}
.tb-code{ color:#b56cff; font-weight:900; }

.tb-nav{
  display:flex; align-items:center; gap:4px;
  padding:6px; border-radius:999px;
  background:rgba(20,18,32,.6);
  border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.tb-nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  color:rgba(255,255,255,.82); text-decoration:none;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.tb-nav a i{ color:#b56cff; font-size:14px; }
.tb-nav a:hover{ background:rgba(123,92,255,.22); color:#fff; }

@media (max-width:760px){
  .tb-nav a span{ display:none; }
  .tb-nav a{ padding:9px 11px; }
  .site-topbar{ padding:12px 16px; }
  .site-topbar.topbar-inner{ padding-right:16px; }
}