/* Fuente Nulshock */
@font-face {
    font-family: 'nulshockbold';
    src: url('fonts/nulshock_bd.woff2') format('woff2'),
         url('fonts/nulshock_bd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

/* html ruleset eliminado - no necesario */

body { 
  margin: 0; 
  background: #000; /* Gris Windows 98 */
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 1em;
  color: #000;
  overflow-x: hidden;
  overflow-y: auto; /* Permitir scroll vertical */
}

/* Ocultar contenido mientras carga el preloader principal */
body.preloader-active {
  overflow: hidden;
}

/* ===== PRELOADER PRINCIPAL ===== */
.main-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.main-preloader.hidden .preloader-overlay-top {
  transform: translateY(-100%);
}

.main-preloader.hidden .preloader-overlay-bottom {
  transform: translateY(100%);
}

.main-preloader.hidden .preloader-content {
  opacity: 0;
}

.main-preloader.hidden {
  pointer-events: none;
}

.preloader-content {
  text-align: center;
  color: #fff;
  z-index: 2;
  transition: opacity 0.3s ease-out;
  position: relative;
}

.preloader-gif {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 1024px) {
  .preloader-gif {
    width: 240px !important; /* 3 veces más grande (80px * 3) */
    height: 240px !important;
  }
}

/* Overlays para el efecto de apertura horizontal */
.preloader-overlay {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 50vh;
  background: #000;
  z-index: 1;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.preloader-overlay-top {
  top: 0;
}

.preloader-overlay-bottom {
  bottom: 0;
}

/* ===== PRELOADERS PARA CONTENIDO DE VENTANAS ===== */
/* Preloader para videos e imágenes dentro de window-content */
.window-content {
  position: relative; /* Asegurar contexto de posicionamiento para preloaders */
}

.window-content .content-preloader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--win-content-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: opacity 0.3s ease-out;
  pointer-events: none; /* No interferir con interacciones */
  /* Asegurar que no bloquee el video visualmente cuando está cargando */
  opacity: 1;
}

.window-content .content-preloader.hidden {
  opacity: 0;
  display: none; /* Completamente fuera del flujo cuando está oculto */
  pointer-events: none;
}

.window-content .content-preloader-spinner {
  width: 80px;
  height: 80px;
  display: block;
}

.window-content .content-preloader-spinner img {
  width: 80px;
  height: 80px;
  display: block;
}

/* Videos e imágenes deben estar en el flujo normal, no posicionados relativamente */
.window-content video,
.window-content img {
  position: static; /* Cambiar de relative a static para que no se desplace */
  z-index: 1;
  display: block; /* Asegurar que sean elementos de bloque */
}

/* ===== HEADER ===== */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px; /* Aumentado de 70px a 90px para mejor visibilidad */
  z-index: 1000; /* Por encima del canvas */
  display: flex;
  align-items: center;
  padding: 0 20px;
  pointer-events: auto; /* Permitir eventos de mouse en el header */
  transition: background 0.2s ease, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease;
}

/* Header para fondo brillante (light) - fondo blanco sólido translúcido con efecto glossy OSX */
#header.header-light {
  background: rgba(255, 255, 255, 0.7); /* Blanco sólido translúcido */
  backdrop-filter: blur(20px) saturate(180%); /* Efecto glossy tipo OSX */
  -webkit-backdrop-filter: blur(20px) saturate(180%); /* Soporte para Safari */
}

/* Header para fondo oscuro (dark) - con gradiente oscuro */
#header.header-dark {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0) 100%);
}

#logo {
  display: flex;
  align-items: center;
  margin-right: 40px;
  text-decoration: none;
  cursor: pointer;
}

#logo img {
  height: 50px;
  width: auto;
}

#menu {
  display: flex; /* Mostrar el menú */
  gap: 0; /* Sin margen, el espaciado lo define la imagen */
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
}

#menu li {
  margin: 0;
  padding: 0;
}

#menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 20px;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  height: 60px;
  min-width: 120px;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  font-family: 'nulshockbold', monospace;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

/* Texto del menú con efectos - Tema Light (fondo brillante) */
#header.header-light #menu li a .menu-text {
  position: relative;
  z-index: 2;
  display: block;
  transition: all 0.3s ease;
  color: #885aff; /* Morado por defecto */
  text-shadow: none;
}

/* Estado activo - color por defecto más oscuro (Light) */
#header.header-light #menu li a.active .menu-text {
  color: #5a3fa8; /* Morado más oscuro para activo */
  text-shadow: none;
  transform: scale(1.05);
}

/* Hover - efecto de brillo y escala (Light) */
#header.header-light #menu li a:hover .menu-text {
  color: #fff;
  text-shadow: none;
  transform: scale(1.1);
}

/* Hover en estado activo - efecto más intenso (Light) */
#header.header-light #menu li a.active:hover .menu-text {
  color: #5a3fa8; /* Mantener morado oscuro en hover cuando está activo */
  text-shadow: none;
  transform: scale(1.15);
}

/* Texto del menú con efectos - Tema Dark (fondo oscuro) */
#header.header-dark #menu li a .menu-text {
  position: relative;
  z-index: 2;
  display: block;
  transition: all 0.3s ease;
  color: #fff; /* Blanco por defecto */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Estado activo - cyan brillante (Dark) */
#header.header-dark #menu li a.active .menu-text {
  color: #00ffff; /* Cyan brillante para activo */
  text-shadow: 
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 30px #00ffff,
    0 0 40px #00ffff;
  transform: scale(1.05);
}

/* Hover - cyan (Dark) */
#header.header-dark #menu li a:hover .menu-text {
  color: #00ffff; /* Cyan para hover */
  text-shadow: 
    0 0 8px #00ffff,
    0 0 15px #00ffff;
  transform: scale(1.1);
}

/* Hover en estado activo - efecto más intenso (Dark) */
#header.header-dark #menu li a.active:hover .menu-text {
  color: #00ffff; /* Mantener cyan brillante en hover cuando está activo */
  text-shadow: 
    0 0 15px #00ffff,
    0 0 25px #00ffff,
    0 0 35px #00ffff,
    0 0 45px #00ffff,
    0 0 55px #00ffff;
  transform: scale(1.15);
}

/* Subrayado removido */

/* Iconos del menú - mantener para compatibilidad pero ocultos */
#menu li a .menu-icon {
  display: none;
}

/* ===== TASKBAR ===== */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: #c0c0c0;
  border-top: 2px solid #000;
  z-index: 9998;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 2px;
  gap: 2px;
  box-shadow: inset 0 1px 0 #fff;
  pointer-events: auto;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start; /* Ventanas minimizadas a la izquierda */
}

.taskbar #clock {
  margin-left: auto; /* Empujar el reloj al final */
}

/* ===== RELOJ EN TASKBAR ===== */
.clock {
  position: absolute;
  right: 4px;
  top: 2px;
  bottom: 2px;
  min-width: 120px;
  max-width: 400px;
  padding: 2px 8px;
  background: #c0c0c0;
  border: 1px inset #c0c0c0;
  box-shadow: 
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  color: #000;
  text-align: center;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  z-index: 10001;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clock:hover {
  background: #d4d0c8;
}

/* Video oculto: solo alimenta el render ASCII en canvas (Medium: webcam/canvas → ASCII) */
.ascii-bg-video {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  object-fit: contain;
}

/* ===== CANVAS ===== */
canvas { 
  display: block; 
  position: fixed;
  top: 0; /* Tocar el top de la página sin considerar el offset del menú */
  left: 0;
  margin: 0;
  padding: 0;
  pointer-events: auto; /* Permitir eventos de mouse */
  z-index: 1; /* Por debajo de todo el contenido */
  /* El tamaño se controla desde JavaScript para evitar escalado */
}

/* ===== VIDEO CON ALPHA ===== */
#webmVideo {
  width: 100%;
  height: auto; /* Mantener proporción con el ancho */
  aspect-ratio: 16 / 9; /* Igual que el canvas para alinear */
  position: fixed;
  top: 0; /* Tocar el top de la página sin considerar el offset del menú */
  left: 0;
  z-index: 2; /* Entre canvas y contenido */
  pointer-events: none; /* No bloquear eventos */
  object-fit: contain; /* Mantener proporción interna del video */
  
  /* Configuración para canal alfa */
  background: transparent; /* Fondo transparente */
  
  /* Optimizaciones para renderizado suave */
  transform: translateZ(0); /* Forzar aceleración por hardware */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ===== CONTENT ===== */
.content-wrapper {
  position: relative;
  padding-bottom: 30px; /* Espacio para el taskbar */
  z-index: 2; /* Por encima del canvas */
  margin-top: 90px; /* Ajustado a nueva altura del header */
  pointer-events: none; /* No bloquear eventos del canvas */
  overflow: visible; /* Permitir que las ventanas se vean */
}

section {
  min-height: 100vh;
  padding: 40px;
  margin-bottom: 0;
  pointer-events: none; /* No bloquear eventos del canvas */
  position: relative; /* Para posicionar las ventanas dentro */
  box-sizing: border-box; /* Incluir padding en la altura */
}

.section-content {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(192, 192, 192, 1); /* Fondo semi-transparente */
  border: 2px outset #c0c0c0;
  padding: 20px;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff;
  pointer-events: none; /* No bloquear eventos del canvas */
  position: relative;
  z-index: 2; /* Por encima del canvas */
  backdrop-filter: blur(1px); /* Efecto de desenfoque sutil */
}

/* Solo el texto debe bloquear eventos del canvas */
.section-title,
.section-subtitle,
.section-body {
  pointer-events: auto; /* Permitir interacción con el texto */
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #000080;
}

.section-subtitle {
  font-size: 14px;
  color: #808080;
  margin-bottom: 20px;
}

.section-body {
  line-height: 1.6;
  text-align: justify;
}

.section-body p {
  margin-bottom: 15px;
}

/* =============================================================================
   VENTANAS .window-3d — tokens (--win-*) y temas
   Asigna un tema completo con data-window-theme="..." o un tinte con
   data-window-color="...". Tema blog: data-window-theme="blog-blue".
   Cada bloque define marco, barra de título, botones
   y contenido de forma conjunta. Los alias --window-* apuntan a --win-* para
   compatibilidad con código antiguo que resolviera var(--window-bg), etc.
   ============================================================================= */

:root {
  /* Marco / borde estilo Win98 */
  --win-frame-bg: #c0c0c0;
  --win-frame-border: #c0c0c0;
  --win-border-dark: #808080;
  --win-shadow-light: #ffffff;
  --win-shadow-dark: #808080;
  --win-frame-active-bg: #e0e0e0e0;
  --win-frame-active-border: #6851aa;
  /* Barra de título */
  --win-titlebar-start: #4d3c7c;
  --win-titlebar-end: #6851aa;
  --win-titlebar-text: #ffffff;
  --win-titlebar-border: #000000;
  /* Botones minimizar / maximizar / cerrar */
  --win-control-bg: #c0c0c0;
  --win-control-border: #c0c0c0;
  --win-control-text: #000000;
  --win-control-hover-bg: #e0e0e0;
  --win-control-active-inset: #808080;
  --win-control-close-hover-bg: #ff0000;
  --win-control-close-hover-text: #ffffff;
  /* Área de contenido */
  --win-content-bg: #f9e5ff;
  --win-content-text: #000000;
  --win-content-heading-color: #000080;
  --win-content-heading-border: 1px solid #808080;
  --win-content-font-family: inherit;
  --win-content-text-shadow: none;

  /* Compatibilidad (alias) */
  --window-bg: var(--win-frame-bg);
  --window-border: var(--win-frame-border);
  --window-border-dark: var(--win-border-dark);
  --window-shadow-light: var(--win-shadow-light);
  --window-shadow-dark: var(--win-shadow-dark);
  --window-active-bg: var(--win-frame-active-bg);
  --window-active-border: var(--win-frame-active-border);
  --window-titlebar-bg-start: var(--win-titlebar-start);
  --window-titlebar-bg-end: var(--win-titlebar-end);
  --window-titlebar-text: var(--win-titlebar-text);
  --window-content-bg: var(--win-content-bg);
  --window-content-text: var(--win-content-text);
}

body.dark-theme {
  --win-frame-bg: #2d2d2d;
  --win-frame-border: #404040;
  --win-border-dark: #1a1a1a;
  --win-shadow-light: #4a4a4a;
  --win-shadow-dark: #1a1a1a;
  --win-frame-active-bg: #3d3d3d;
  --win-frame-active-border: #a75ad4;
  --win-titlebar-start: #bc5ad4;
  --win-titlebar-end: #713d8f;
  --win-titlebar-text: #ffffff;
  --win-titlebar-border: #000000;
  --win-control-bg: #4a4a4a;
  --win-control-border: #606060;
  --win-control-text: #e0e0e0;
  --win-control-hover-bg: #5a5a5a;
  --win-control-active-inset: #2a2a2a;
  --win-content-bg: #1e1925;
  --win-content-text: #e0e0e0;
  --win-content-heading-color: #d4b8ff;
  --win-content-heading-border: 1px solid #5a4a6a;
}

/* Paletas por data-window-color: marco + barra + contenido + controles en un solo bloque */
.window-3d[data-window-color="blue"] {
  --win-frame-bg: #c0d0e0;
  --win-frame-border: #a0b0c0;
  --win-shadow-light: #ffffff;
  --win-shadow-dark: #808080;
  --win-frame-active-bg: #d0e0f0;
  --win-frame-active-border: #4a7ba7;
  --win-titlebar-start: #355a7a;
  --win-titlebar-end: #4a7ba7;
  --win-titlebar-text: #ffffff;
  --win-titlebar-border: #1a3a5a;
  --win-control-bg: #c0c0c0;
  --win-control-border: #c0c0c0;
  --win-control-text: #000000;
  --win-control-hover-bg: #e0e8f0;
  --win-content-bg: #f4f8ff;
  --win-content-text: #000000;
  --win-content-heading-color: #003366;
  --win-content-heading-border: 1px solid #4a7ba7;
}

.window-3d[data-window-color="green"] {
  --win-frame-bg: #c0e0c0;
  --win-frame-border: #a0c0a0;
  --win-shadow-light: #ffffff;
  --win-shadow-dark: #808080;
  --win-frame-active-bg: #d0f0d0;
  --win-frame-active-border: #4a8a4a;
  --win-titlebar-start: #2d6a3e;
  --win-titlebar-end: #4a9a5a;
  --win-titlebar-text: #ffffff;
  --win-titlebar-border: #1a4a2a;
  --win-control-bg: #c0c0c0;
  --win-control-border: #c0c0c0;
  --win-control-text: #000000;
  --win-control-hover-bg: #e8f8e8;
  --win-content-bg: #f4fff4;
  --win-content-text: #000000;
  --win-content-heading-color: #004422;
  --win-content-heading-border: 1px solid #4a8a4a;
}

.window-3d[data-window-color="red"] {
  --win-frame-bg: #e0c0c0;
  --win-frame-border: #c0a0a0;
  --win-shadow-light: #ffffff;
  --win-shadow-dark: #808080;
  --win-frame-active-bg: #f0d0d0;
  --win-frame-active-border: #8a4a4a;
  --win-titlebar-start: #7a3535;
  --win-titlebar-end: #a05050;
  --win-titlebar-text: #ffffff;
  --win-titlebar-border: #4a2020;
  --win-control-bg: #c0c0c0;
  --win-control-border: #c0c0c0;
  --win-control-text: #000000;
  --win-control-hover-bg: #f8e8e8;
  --win-content-bg: #fff6f6;
  --win-content-text: #000000;
  --win-content-heading-color: #660000;
  --win-content-heading-border: 1px solid #8a4a4a;
}

.window-3d[data-window-color="purple"] {
  --win-frame-bg: #d0c0e0;
  --win-frame-border: #b0a0c0;
  --win-shadow-light: #ffffff;
  --win-shadow-dark: #808080;
  --win-frame-active-bg: #e0d0f0;
  --win-frame-active-border: #7a4a9a;
  --win-titlebar-start: #5a3a7a;
  --win-titlebar-end: #7a4a9a;
  --win-titlebar-text: #ffffff;
  --win-titlebar-border: #3a2050;
  --win-control-bg: #c0c0c0;
  --win-control-border: #c0c0c0;
  --win-control-text: #000000;
  --win-control-hover-bg: #f0e8f8;
  --win-content-bg: #faf4ff;
  --win-content-text: #000000;
  --win-content-heading-color: #400060;
  --win-content-heading-border: 1px solid #7a4a9a;
}

.window-3d[data-window-color="orange"] {
  --win-frame-bg: #e0d0c0;
  --win-frame-border: #c0b0a0;
  --win-shadow-light: #ffffff;
  --win-shadow-dark: #808080;
  --win-frame-active-bg: #f0e0d0;
  --win-frame-active-border: #aa7a4a;
  --win-titlebar-start: #8a5a2a;
  --win-titlebar-end: #b08050;
  --win-titlebar-text: #ffffff;
  --win-titlebar-border: #5a3a1a;
  --win-control-bg: #c0c0c0;
  --win-control-border: #c0c0c0;
  --win-control-text: #000000;
  --win-control-hover-bg: #fff0e8;
  --win-content-bg: #fffaf4;
  --win-content-text: #000000;
  --win-content-heading-color: #663300;
  --win-content-heading-border: 1px solid #aa7a4a;
}

.window-3d[data-window-color="dark"] {
  --win-frame-bg: #2d2d2d;
  --win-frame-border: #404040;
  --win-shadow-light: #4a4a4a;
  --win-shadow-dark: #1a1a1a;
  --win-frame-active-bg: #3d3d3d;
  --win-frame-active-border: #895ad4;
  --win-titlebar-start: #b15ad4;
  --win-titlebar-end: #713d8f;
  --win-titlebar-text: #ffffff;
  --win-titlebar-border: #000000;
  --win-control-bg: #4a4a4a;
  --win-control-border: #606060;
  --win-control-text: #e0e0e0;
  --win-control-hover-bg: #5a5a5a;
  --win-control-active-inset: #2a2a2a;
  --win-content-bg: #1e1e1e;
  --win-content-text: #e0e0e0;
  --win-content-heading-color: #d4b8ff;
  --win-content-heading-border: 1px solid #5a4a6a;
}

/* Temas nominales: todo el cromado + contenido en un solo selector */
.window-3d[data-window-theme="dark-white"] {
  --win-frame-bg: #2a2a2a;
  --win-frame-border: #404040;
  --win-shadow-light: #4a4a4a;
  --win-shadow-dark: #1a1a1a;
  --win-frame-active-bg: #353535;
  --win-frame-active-border: #888888;
  --win-titlebar-start: #1a1a1a;
  --win-titlebar-end: #3a3a3a;
  --win-titlebar-text: #ffffff;
  --win-titlebar-border: #000000;
  --win-control-bg: #4a4a4a;
  --win-control-border: #606060;
  --win-control-text: #ffffff;
  --win-control-hover-bg: #5a5a5a;
  --win-content-bg: #000000;
  --win-content-text: #ffffff;
  --win-content-heading-color: #ffffff;
  --win-content-heading-border: 1px solid #666666;
}

.window-3d[data-window-theme="dark-cyan"] {
  --win-frame-bg: #0a1a1a;
  --win-frame-border: #1a4040;
  --win-shadow-light: #2a5a5a;
  --win-shadow-dark: #0a2020;
  --win-frame-active-bg: #123030;
  --win-frame-active-border: #00ffbf;
  --win-titlebar-start: #003030;
  --win-titlebar-end: #006060;
  --win-titlebar-text: #00ffbf;
  --win-titlebar-border: #004040;
  --win-control-bg: #1a4040;
  --win-control-border: #2a6060;
  --win-control-text: #00ffbf;
  --win-control-hover-bg: #2a5050;
  --win-content-bg: #000000;
  --win-content-text: #00ffbf;
  --win-content-heading-color: #00ff9d;
  --win-content-heading-border: 2px solid #00ff9d;
}

.window-3d[data-window-theme="dark-terminal"] {
  --win-frame-bg: #0d1a0d;
  --win-frame-border: #1a3a1a;
  --win-shadow-light: #2a4a2a;
  --win-shadow-dark: #0a1a0a;
  --win-frame-active-bg: #152515;
  --win-frame-active-border: #00ff00;
  --win-titlebar-start: #0a2a0a;
  --win-titlebar-end: #1a4a1a;
  --win-titlebar-text: #00ff00;
  --win-titlebar-border: #003300;
  --win-control-bg: #1a3a1a;
  --win-control-border: #2a5a2a;
  --win-control-text: #00ff00;
  --win-control-hover-bg: #2a4a2a;
  --win-control-active-inset: #0a2a0a;
  --win-content-bg: #000000;
  --win-content-text: #00ff00;
  --win-content-heading-color: #00ff00;
  --win-content-heading-border: 1px solid #00ff00;
  --win-content-font-family: 'Courier New', Courier, monospace;
  --win-content-text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.window-3d[data-window-theme="dark-terminal"] .window-content pre,
.window-3d[data-window-theme="dark-terminal"] .window-content code {
  font-family: var(--win-content-font-family);
  color: var(--win-content-text);
  background: transparent;
  text-shadow: var(--win-content-text-shadow);
}

/* Tema Blog — paleta azul editorial (listado + artículos) */
.window-3d[data-window-theme="blog-blue"] {
  --win-frame-bg: #a8bdd4;
  --win-frame-border: #6b8cae;
  --win-shadow-light: #e8f0fc;
  --win-shadow-dark: #5a6f8a;
  --win-frame-active-bg: #c0d4ec;
  --win-frame-active-border: #2563eb;
  --win-titlebar-start: #1e3a5f;
  --win-titlebar-end: #2d5a8c;
  --win-titlebar-text: #f0f7ff;
  --win-titlebar-border: #0f2744;
  --win-control-bg: #c8d4e8;
  --win-control-border: #7a92b8;
  --win-control-text: #0f172a;
  --win-control-hover-bg: #e8f0fc;
  --win-control-active-inset: #6b8cae;
  --win-content-bg: #eef4fc;
  --win-content-text: #0f172a;
  --win-content-heading-color: #1e40af;
  --win-content-heading-border: 1px solid #3b82c4;
}

.window-3d[data-window-theme="blog-blue"] .blog-post-card {
  border-color: #8ba4c9;
  background: rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #a8bdd4;
}

.window-3d[data-window-theme="blog-blue"] .blog-post-card:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: #3b82c4;
}

.window-3d[data-window-theme="blog-blue"] .blog-post-card-thumb {
  border-color: #7a9fc4;
  background: #dbeafe;
}

.window-3d[data-window-theme="blog-blue"] .blog-post-card-date {
  color: #3b5a8a;
  opacity: 0.95;
}

.window-3d[data-window-theme="blog-blue"] .blog-post-full-meta {
  color: #3b5a8a;
  opacity: 0.95;
}

.window-3d[data-window-theme="blog-blue"] .blog-post-card-title {
  color: var(--win-content-heading-color);
}

/* Las ventanas se posicionan desde JavaScript */

/* Base: marco, sombras y estado; los colores vienen de :root o data-window-* */
.window-3d {
  position: absolute;
  z-index: 10;
  pointer-events: auto;
  background: var(--win-frame-bg);
  border: 2px outset var(--win-frame-border);
  min-width: 200px;
  min-height: 150px;
  box-shadow:
    inset 1px 1px 0 var(--win-shadow-light),
    inset -1px -1px 0 var(--win-shadow-dark),
    0 0 0 1px #000,
    4px 4px 0 rgba(0, 0, 0, 0.3);
  transform-style: preserve-3d;
  transition: left 0.3s ease, top 0.3s ease, right 0.3s ease, bottom 0.3s ease,
    width 0.3s ease, height 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s ease-out, visibility 0.4s ease-out, background 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(0.8) translateZ(-100px);
}

.window-3d.window-active {
  background: var(--win-frame-active-bg);
  border-color: var(--win-frame-active-border);
  box-shadow:
    inset 1px 1px 0 var(--win-shadow-light),
    inset -1px -1px 0 var(--win-shadow-dark),
    0 0 0 2px var(--win-frame-active-border),
    4px 4px 0 rgba(0, 0, 0, 0.3);
}

.window-3d.window-visible {
  opacity: 1;
  visibility: visible;
  /* Transformación base para la transición de entrada - el JavaScript puede sobrescribir esto después */
  transform: translate(0, 0) scale(1) translateZ(0);
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Estado inicial para ventanas (antes de ser visibles) */
.window-3d:not(.window-visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50px) scale(0.8) translateZ(0);
}

/* Transición solo cuando se agrega la clase window-visible */
.window-3d.window-visible {
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.window-titlebar {
  background: linear-gradient(to bottom, var(--win-titlebar-start), var(--win-titlebar-end));
  color: var(--win-titlebar-text);
  padding: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: bold;
  cursor: move;
  user-select: none;
  border-bottom: 1px solid var(--win-titlebar-border);
  flex-shrink: 0;
  transition: background 0.2s ease;
  gap: 6px; /* Espacio entre icono y título */
}

.window-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  user-select: none;
}

.window-title {
  flex: 1;
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.2;
}

.window-titlebar h1.window-title {
  font-size: 11px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.window-controls {
  display: flex;
  gap: 2px;
}

.window-btn {
  width: 20px;
  height: 18px;
  background: var(--win-control-bg);
  border: 1px outset var(--win-control-border);
  color: var(--win-control-text);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.window-btn:hover {
  background: var(--win-control-hover-bg);
}

.window-btn:active {
  border: 1px inset var(--win-control-border);
  box-shadow: inset 1px 1px 0 var(--win-control-active-inset);
}

/* La X se dibuja con pseudo-elementos: el carácter × falla en algunas fuentes (cuadrado). */
.window-btn.close {
  position: relative;
  background: var(--win-control-bg);
  font-size: 0;
  line-height: 0;
  color: var(--win-control-text);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.window-btn.close::before,
.window-btn.close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.window-btn.close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.window-btn.close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.window-btn.close:hover {
  background: var(--win-control-close-hover-bg);
  color: var(--win-control-close-hover-text);
}

.window-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--win-content-bg);
  color: var(--win-content-text);
  font-size: 12px;
  line-height: 1.4;
  font-family: var(--win-content-font-family);
  text-shadow: var(--win-content-text-shadow);
  transition: background 0.2s ease, color 0.2s ease;
  
  /* Scrollbar estilo Windows 98 */
  scrollbar-width: thin;
  scrollbar-color: var(--win-frame-bg) var(--win-content-bg);
}

.window-content::-webkit-scrollbar {
  width: 16px;
}

.window-content::-webkit-scrollbar-track {
  background: var(--win-frame-bg);
  border: 1px inset var(--win-frame-border);
}

.window-content::-webkit-scrollbar-thumb {
  background: var(--win-frame-bg);
  border: 1px outset var(--win-frame-border);
  box-shadow: inset 1px 1px 0 var(--win-shadow-dark);
}

.window-content::-webkit-scrollbar-thumb:hover {
  background: var(--win-frame-active-bg);
}

.window-content h2 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: var(--win-content-heading-color);
  border-bottom: var(--win-content-heading-border);
  padding-bottom: 4px;
}

.window-content p {
  margin-bottom: 12px;
}

/* ===== Sección Proyectos: lista en 2 columnas y logos ===== */
.project-index-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-items: stretch;
}

.project-index-item {
  margin-bottom: 0;
  min-width: 0;
}

.project-index-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #808080;
  background: #ffffff;
  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff;
  box-sizing: border-box;
}

.project-index-link {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  text-decoration: none;
  color: #000000;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.project-index-link:hover {
  background: #eaf2ff;
}

.project-index-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.project-index-title {
  display: block;
  font-weight: bold;
  text-decoration: underline;
  color: #0000ff;
}
.project-index-blurb {
  margin: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #404040;
  border: none;
}

/* Ventana listado Proyectos: alto según contenido, sin scroll interno */
.window-3d.project-window-autofit {
  height: fit-content !important;
  max-height: none;
  overflow: visible;
}

.window-3d.project-window-autofit .window-content {
  flex: 0 0 auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

/* Popups de detalle de proyecto: alto según texto + vídeo; barra de título fija, scroll solo si no cabe */
.window-3d.project-popup-detail-window {
  height: fit-content !important;
  max-height: min(98vh, 1150px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.window-3d.project-popup-detail-window .window-content {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(calc(98vh - 52px), 1098px);
  overflow-x: hidden;
  overflow-y: auto;
}

.project-index-link .project-logo-frame {
  align-self: flex-start;
}

.project-logo-frame {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #808080;
  background: #f0f0f0;
  box-sizing: border-box;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #a0a0a0;
}

.project-logo-frame--detail {
  width: 108px;
  height: 108px;
}

.project-popup-detail {
  overflow: hidden;
}

.project-popup-detail .project-logo-frame--detail {
  float: left;
  margin: 0 14px 10px 0;
}

.project-popup-detail h2 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: none;
  padding-bottom: 0;
}

.project-popup-detail p {
  margin-bottom: 0;
}

.project-popup-detail p + p {
  margin-top: 12px;
}

/* Reproductor debajo del texto de detalle en popups de proyecto */
.project-popup-video {
  margin-top: 18px;
  clear: both;
  width: 100%;
  border: 1px solid var(--win-frame-border, #808080);
  background: #0a0a0a;
  box-shadow: inset 1px 1px 0 var(--win-shadow-light, #fff), inset -1px -1px 0 var(--win-shadow-dark, #808080);
  box-sizing: border-box;
}

.project-popup-video-player {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}

/* Blog — listado y ventanas de artículo */
.blog-intro {
  margin-bottom: 14px;
}

.blog-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-index-item {
  margin: 0;
}

.blog-post-card {
  border: 1px solid var(--win-frame-border, #808080);
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 1px 1px 0 var(--win-shadow-light, #fff),
    inset -1px -1px 0 var(--win-shadow-dark, #a0a0a0);
  transition: background 0.15s ease;
}

.blog-post-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

.blog-post-card-link {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.blog-post-card-thumb {
  flex-shrink: 0;
  width: 140px;
  height: 84px;
  object-fit: cover;
  border: 1px solid var(--win-frame-border);
  background: #1a1a1a;
}

.blog-post-card-body {
  flex: 1;
  min-width: 0;
}

.blog-post-card-date {
  display: block;
  font-size: 10px;
  opacity: 0.75;
  margin-bottom: 4px;
}

.blog-post-card-title {
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.25;
  border-bottom: none;
  padding: 0;
}

.blog-post-card-excerpt {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.window-3d.blog-post-popup-window {
  height: fit-content !important;
  max-height: min(92vh, 880px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.window-3d.blog-post-popup-window .window-content {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(calc(92vh - 52px), 828px);
  overflow-x: hidden;
  overflow-y: auto;
}

.blog-post-full-meta {
  font-size: 11px;
  opacity: 0.8;
  margin: 0 0 8px 0;
}

.blog-post-full h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 15px;
}

.blog-post-full h3 {
  margin: 16px 0 8px 0;
  font-size: 13px;
  font-weight: bold;
  color: var(--win-content-heading-color, #1e40af);
  border-bottom: none;
  padding: 0;
}

.blog-post-full ol,
.blog-post-full ul {
  margin: 0 0 12px 0;
  padding-left: 1.25em;
  font-size: 12px;
  line-height: 1.5;
}

.blog-post-full li {
  margin-bottom: 6px;
}

.blog-post-full code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
}

.window-3d[data-window-theme="blog-blue"] .blog-post-full code {
  background: rgba(15, 23, 42, 0.08);
}

.blog-post-full .blog-post-code {
  margin: 10px 0 14px 0;
  padding: 10px 12px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  line-height: 1.45;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--win-frame-border, #808080);
  overflow-x: auto;
  white-space: pre;
}

.window-3d[data-window-theme="blog-blue"] .blog-post-full .blog-post-code {
  background: rgba(15, 23, 42, 0.06);
  border-color: #8ba4c9;
}

.blog-post-full p {
  margin-bottom: 10px;
}

/* Contacto */
.contact-window .window-content {
  background: linear-gradient(165deg, #0d0d0d 0%, #0a0a0a 45%, #111 100%);
}

.contact-heading {
  margin-top: 0;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.contact-intro {
  margin: 0 0 14px 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.88;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.contact-link-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.contact-link-card--whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(37, 211, 102, 0.2),
    0 6px 18px rgba(0, 0, 0, 0.4);
}

.contact-link-card--x:hover {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.45);
}

.contact-link-card--mail:hover {
  border-color: rgba(96, 165, 250, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(96, 165, 250, 0.15),
    0 6px 18px rgba(0, 0, 0, 0.4);
}

.contact-icon-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-icon-wrap--whatsapp {
  background: linear-gradient(145deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.contact-icon-wrap--x {
  background: #000;
  color: #fff;
  border-color: #333;
}

.contact-icon-wrap--mail {
  background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.contact-brand-icon {
  display: block;
}

.contact-link-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-card-title {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.65;
}

.contact-card-value {
  font-size: 13px;
  font-weight: bold;
  word-break: break-word;
  color: var(--win-content-text, #fff);
}

/* Ventana decorativa contacto-bot.mp4 (mismo rol que logo webm en Inicio) */
.contact-bot-window .window-content {
  padding: 0;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.contact-bot-window .window-content video {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  vertical-align: middle;
}

/* Juegos — Laser On (enlace a pestaña nueva) */
.laseron-game-window .window-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.laseron-header {
  text-align: center;
}

.laseron-logo {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: 100px;
  height: auto;
  margin: 0 auto 8px auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 8px rgba(0, 255, 191, 0.25));
}

.laseron-header h2 {
  margin-bottom: 8px;
}

.laseron-tagline {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  opacity: 0.92;
}

.laseron-actions {
  margin: 0;
  text-align: center;
}

.laseron-play-btn {
  display: inline-block;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: bold;
  font-family: inherit;
  text-decoration: none;
  color: var(--win-control-text, #000);
  background: var(--win-control-bg, #c0c0c0);
  border: 2px outset var(--win-control-border, #c0c0c0);
  box-shadow: 1px 1px 0 var(--win-shadow-dark, #404040);
  cursor: pointer;
}

.laseron-play-btn:hover {
  background: var(--win-control-hover-bg, #e0e0e0);
}

.laseron-play-btn:active {
  border-style: inset;
  box-shadow: inset 1px 1px 0 var(--win-control-active-inset, #808080);
}

.laseron-hint {
  margin: 0;
  text-align: center;
  font-size: 10px;
  opacity: 0.75;
  line-height: 1.35;
}

/* Juegos — Instrucciones: altura máxima + scroll (no crece con todo el texto) */
.window-3d.project-window-autofit.laseron-help-window {
  height: auto !important;
  max-height: min(58vh, 400px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.window-3d.project-window-autofit.laseron-help-window .window-content {
  text-align: left;
  flex: 1 1 auto !important;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto !important;
}

.laseron-instructions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.laseron-instr-lead {
  margin: 0;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.5;
  background: rgba(0, 48, 48, 0.45);
  border: 1px solid var(--win-frame-border, #1a4040);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(0, 255, 191, 0.12);
}

.laseron-instr-section {
  margin: 0;
  padding: 0;
}

.laseron-instructions .laseron-instr-heading {
  margin: 0 0 10px 0;
  padding: 0 0 6px 12px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--win-content-heading-color, #00ff9d);
  border-bottom: none;
  border-left: 3px solid var(--win-content-heading-color, #00ff9d);
  background: linear-gradient(
    90deg,
    rgba(0, 255, 191, 0.12) 0%,
    transparent 100%
  );
}

.laseron-instr-list,
.laseron-instr-steps {
  margin: 0;
  padding-left: 1.15em;
  font-size: 11px;
  line-height: 1.55;
}

.laseron-instr-list li {
  margin-bottom: 8px;
}

.laseron-instr-list li:last-child {
  margin-bottom: 0;
}

.laseron-instr-steps li {
  margin-bottom: 10px;
}

.laseron-instr-steps li:last-child {
  margin-bottom: 0;
}

.laseron-key {
  display: inline-block;
  margin: 0 1px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  color: #0a1a1a;
  background: linear-gradient(180deg, #e8f8f4 0%, #a8d4c8 100%);
  border: 1px solid #2a5050;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(0, 0, 0, 0.35);
  vertical-align: baseline;
}

.laseron-tag-on {
  color: #00ffbf;
  text-shadow: 0 0 8px rgba(0, 255, 191, 0.45);
  font-weight: bold;
}

.laseron-tag-off {
  color: #94a3b8;
  font-weight: bold;
}

.laseron-instr-footnote {
  margin: 4px 0 0 0;
  padding: 8px 10px;
  font-size: 10px;
  line-height: 1.45;
  font-style: italic;
  opacity: 0.88;
  border-top: 1px dashed var(--win-frame-border, #2a6060);
}

.project-logo-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

@media screen and (max-width: 1024px) {
  .project-index-list {
    grid-template-columns: 1fr;
  }
}

/* Estilos para ASCII Art - preserva espacios y formato */
.window-content pre.ascii-art {
  font-family: 'Courier New', Courier, monospace;
  white-space: pre;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font-size: 10px;
  color: var(--win-content-text);
  background: transparent;
  border: none;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ===== BACKGROUNDS ANIMADOS CON RAYAS DIAGONALES ===== */
/* Base para backgrounds animados - solo se aplica si data-animatedbg está presente */
.window-3d[data-animatedbg] .window-content {
  position: relative;
  background: var(--win-content-bg);
  overflow: hidden;
}

/* Pseudo-elemento para las rayas animadas */
.window-3d[data-animatedbg] .window-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  will-change: background-position;
}

/* Contenido de la ventana debe estar por encima del background animado */
.window-3d[data-animatedbg] .window-content > * {
  position: relative;
  z-index: 1;
}

/* Rayas negras y amarillas (stripes-1) */
.window-3d[data-animatedbg="stripes-1"] .window-content::before,
.window-3d[data-animatedbg="yellow-black"] .window-content::before {
  background: repeating-linear-gradient(
    45deg,
    #000 0px,
    #000 25px,
    #ffd700 25px,
    #ffd700 50px
  );
  background-size: 70.71px 70.71px;
  animation: animatedStripe 2s linear infinite;
}

/* Rayas moradas y negras (stripes-2) */
.window-3d[data-animatedbg="stripes-2"] .window-content::before,
.window-3d[data-animatedbg="purple-black"] .window-content::before {
  background: repeating-linear-gradient(
    45deg,
    #000 0px,
    #000 25px,
    #8b00ff 25px,
    #8b00ff 50px
  );
  background-size: 70.71px 70.71px;
  animation: animatedStripe 2s linear infinite;
}

/* Rayas blancas y negras (stripes-3) */
.window-3d[data-animatedbg="stripes-3"] .window-content::before,
.window-3d[data-animatedbg="white-black"] .window-content::before {
  background: repeating-linear-gradient(
    45deg,
    #000 0px,
    #000 25px,
    #fff 25px,
    #fff 50px
  );
  background-size: 70.71px 70.71px;
  animation: animatedStripe 2s linear infinite;
}

/* Animación para mover las rayas - movemos en la misma dirección diagonal para que las rayas se vean continuas */
/* El background-size (70.71px) es 50px * √2, que permite que las rayas a 45deg se alineen perfectamente */
@keyframes animatedStripe {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0px 215px;
  }
}

/* Handle de redimensionamiento */
.window-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background: linear-gradient(-45deg, transparent 40%, #808080 40%, #808080 45%, transparent 45%, transparent 55%, #808080 55%, #808080 60%, transparent 60%);
  z-index: 10;
  user-select: none;
}

.window-resize-handle:hover {
  background: linear-gradient(-45deg, transparent 40%, #000 40%, #000 45%, transparent 45%, transparent 55%, #000 55%, #000 60%, transparent 60%);
}

/* Estilos para contenido de ventanas */
.window-content img,
.window-content video {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.window-content form input,
.window-content form textarea {
  box-sizing: border-box;
}

/* ===== VENTANAS MINIMIZADAS ===== */
/* Ventana minimizada - dentro de la taskbar con flexbox */
.window-3d.window-minimized {
  position: relative !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  width: 200px !important; /* Ancho fijo uniforme */
  min-width: 200px !important;
  max-width: 200px !important;
  flex-shrink: 0;
  flex-grow: 0;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0;
  border: 1px outset #c0c0c0;
  box-shadow: 
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #808080;
  cursor: pointer;
  overflow: hidden;
  z-index: 10000 !important; /* Por encima de la taskbar */
  background: #c0c0c0 !important; /* Fondo gris estilo Windows 98 */
}

/* Ocultar header original cuando está minimizada */
.window-3d.window-minimized .window-titlebar {
  display: none !important; /* Ocultar header original en taskbar */
}

.window-3d.window-minimized .window-content {
  display: none !important;
}

.window-3d.window-minimized .window-controls {
  display: none !important;
}

.window-3d.window-minimized .window-btn {
  display: none !important;
}

/* Botón estilo Windows 98 para ventanas minimizadas en taskbar */
.window-3d.window-minimized {
  position: relative;
}

.window-3d.window-minimized::before {
  content: attr(data-window-icon);
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  pointer-events: none !important;
  z-index: 2;
}

.window-3d.window-minimized::after {
  content: attr(data-window-title);
  position: absolute;
  left: 28px; /* Espacio para el icono (8px padding + 16px icono + 4px gap) */
  top: 0;
  right: 8px;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: normal;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none !important;
  z-index: 1;
  box-sizing: border-box;
}

/* Asegurar que las ventanas minimizadas sean clickeables */
.window-3d.window-minimized {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.window-3d.window-minimized:hover {
  background: #d4d0c8 !important; /* Gris claro al hover estilo Windows 98 */
}

.window-3d.window-minimized.window-active {
  background: #c0c0c0 !important; /* Gris cuando está activa */
  border: 1px inset #c0c0c0 !important;
  box-shadow: 
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff !important;
}

/* Ventana maximizada */
.window-3d.window-maximized {
  position: fixed !important;
  left: 50px !important;
  top: 120px !important; /* 70px header + 50px margin */
  right: 50px !important;
  bottom: 50px !important;
  width: calc(100% - 100px) !important; /* 50px izquierda + 50px derecha */
  height: calc(100vh - 170px) !important; /* 70px header + 50px arriba + 50px abajo */
  transform: none !important;
  margin: 0;
  border: 2px outset #c0c0c0;
  box-shadow: 
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #808080,
    0 0 20px rgba(0, 0, 0, 0.3);
  transition: left 0.3s ease, top 0.3s ease, right 0.3s ease, bottom 0.3s ease, 
              width 0.3s ease, height 0.3s ease, transform 0.3s ease;
}

.window-3d.window-maximized .window-resize-handle {
  display: none;
}

/* ===== LASERAMP - REPRODUCTOR ESTILO WINAMP CLASSIC ===== */
.laseramp {
  position: fixed !important;
  bottom: 50px; /* Margen respecto al borde inferior / taskbar */
  right: 50px;
  /* Sin left/top !important: el arrastre (JS) debe poder fijar left/top en píxeles */
  width: 271px !important; /* Ancho igual a la imagen del header */
  min-width: 271px !important;
  max-width: 271px !important;
  height: 116px !important; /* Altura compacta estilo Winamp Classic */
  min-height: 116px !important;
  max-height: 116px !important; /* Altura fija sin playlist */
  background: #30304c !important; /* Fondo azul oscuro estilo Winamp Classic */
  border: none !important; /* Sin borde, la imagen del header es el borde */
  box-shadow: none !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 9px; /* Fuente más pequeña estilo Winamp */
  color: #fff !important; /* Texto blanco */
  transition: none !important; /* Desactivar transiciones del sistema de ventanas */
  display: flex !important;
  flex-direction: column !important;
}

/* Asegurar que el Laseramp no se vea afectado por el sistema de ventanas 3D */
.laseramp:not(.window-minimized) {
  transform: none !important;
}

.laseramp.window-minimized {
  position: relative !important;
  height: 26px !important; /* Misma altura que otras ventanas minimizadas */
  min-height: 26px !important;
  max-height: 26px !important;
  width: 200px !important; /* Ancho uniforme como otras ventanas */
  min-width: 200px !important;
  max-width: 200px !important;
  flex-shrink: 0;
  flex-grow: 0;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0;
  border: 1px outset #c0c0c0 !important; /* Borde estilo Windows 98 */
  box-shadow: 
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #808080 !important;
  cursor: pointer;
  overflow: hidden;
  z-index: 10000 !important; /* Por encima de la taskbar */
  background: #c0c0c0 !important; /* Fondo gris estilo Windows 98 */
}

/* Header personalizado del Laseramp */
.laseramp-header {
  position: relative;
  width: 100%;
  height: 12px;
  flex-shrink: 0;
  cursor: move;
  user-select: none;
}

.laseramp-header-img {
  width: 271px;
  height: 12px;
  display: block;
  pointer-events: none; /* La imagen no bloquea eventos */
}

.laseramp-minimize-area {
  position: absolute;
  right: 0;
  top: 0;
  width: 13px;
  height: 12px;
  cursor: pointer;
  z-index: 10;
  background: transparent; /* Invisible pero clickeable */
}

.laseramp-minimize-area:hover {
  background: rgba(255, 255, 255, 0.1); /* Feedback visual opcional */
}

/* Ocultar header original del Laseramp cuando está minimizada */
.laseramp.window-minimized .laseramp-header {
  display: none !important; /* Ocultar header original en taskbar */
}

/* Botón estilo Windows 98 para Laseramp minimizado */
.laseramp.window-minimized::before {
  content: attr(data-window-icon);
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  pointer-events: none !important;
  z-index: 2;
}

.laseramp.window-minimized::after {
  content: attr(data-window-title);
  position: absolute;
  left: 28px; /* Espacio para el icono (8px padding + 16px icono + 4px gap) */
  top: 0;
  right: 8px;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: normal;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none !important;
  z-index: 1;
  box-sizing: border-box;
}

.laseramp.window-minimized:hover {
  background: #d4d0c8 !important; /* Gris claro al hover estilo Windows 98 */
}

.laseramp.window-minimized.window-active {
  background: #c0c0c0 !important; /* Gris cuando está activa */
  border: 1px inset #c0c0c0 !important;
  box-shadow: 
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff !important;
}

/* Panel principal del reproductor */
.laseramp-main-panel {
  display: flex;
  flex-direction: column;
  padding: 2px; /* Padding más compacto */
  background: #30304c;
  flex: 0 0 auto;
  box-sizing: border-box;
  pointer-events: auto; /* Permitir eventos del mouse */
  position: relative;
  z-index: 10; /* Capa superior */
}

.laseramp-visualizer {
  position: relative;
}

.laseramp-visualizer-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  cursor: pointer;
  display: block;
  background: transparent;
  pointer-events: auto; /* Permitir clicks */
}

.laseramp-visualizer {
  width: 100%;
  height: 40px; /* Altura más compacta estilo Winamp */
  background: #000;
  border: 1px inset #000; /* Borde negro estilo Winamp */
  margin-bottom: 1px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1; /* Capa inferior */
}

.laseramp-spectrum {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* No bloquear eventos del mouse */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Capa inferior */
}

.laseramp-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 12px; /* Más compacto */
  margin-bottom: 1px;
  font-size: 8px; /* Fuente más pequeña */
  color: #00ff22;
  background: #30304c;
  padding: 1px 3px;
  border: 1px inset #505060;
  position: relative;
  z-index: 10; /* Capa superior */
}

.laseramp-track-info {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: normal;
}

.laseramp-time {
  margin-left: 8px;
  font-family: 'Courier New', monospace;
  min-width: 40px;
  text-align: right;
}

.laseramp-controls-wrapper {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 1px;
  position: relative;
  z-index: 10; /* Capa superior */
}

.laseramp-controls {
  display: flex;
  gap: 2px; /* Espaciado más compacto */
  justify-content: center;
  flex-shrink: 0;
}

.laseramp-btn {
  width: 23px; /* Botones más pequeños estilo Winamp */
  height: 16px; /* Más compactos */
  background: #505060;
  border: 1px outset #606070;
  color: #fff;
  font-size: 8px; /* Fuente más pequeña */
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  user-select: none;
  pointer-events: auto; /* Permitir eventos del mouse */
}

.laseramp-btn:hover {
  background: #606070;
}

.laseramp-btn:active {
  border: 1px inset #404050;
  box-shadow: inset 1px 1px 0 #202030;
}

.laseramp-btn.play {
  width: 25px; /* Botón play un poco más grande pero compacto */
}

.laseramp-btn.pause {
  width: 25px;
  display: none;
}

.laseramp-radio-selector {
  margin-top: 8px;
  position: relative;
  z-index: 10; /* Capa superior */
}

.laseramp-select {
  width: 100%;
  height: 16px; /* Más compacto */
  background: #202030;
  border: 1px inset #404050;
  font-size: 8px; /* Fuente más pequeña */
  font-family: 'MS Sans Serif', Arial, sans-serif;
  padding: 1px 2px;
  color: #00ff22;
  cursor: pointer;
  pointer-events: auto; /* Permitir eventos del mouse */
}

.laseramp-select:focus {
  outline: 1px dotted #fff;
}

.laseramp-select option {
  background: #202030;
  color: #fff;
}

.laseramp-volume {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 16px; /* Misma altura que los botones */
  font-size: 7px; /* Fuente más pequeña */
  color: #fff;
  position: relative;
  z-index: 10; /* Capa superior */
  flex-shrink: 0;
  min-width: 80px; /* Ancho mínimo para el volumen */
  width: 158px;
}

.laseramp-volume label {
  font-weight: bold;
  min-width: 20px;
  font-size: 7px;
  color: #fff;
}

.laseramp-slider {
  flex: 1;
  height: 8px; /* Slider más delgado */
  -webkit-appearance: none;
  appearance: none;
  background: #00ffde;
  border: 1px inset #404050;
  min-width: 40px;
  outline: none;
  cursor: pointer;
  pointer-events: auto; /* Permitir eventos del mouse */
}

.laseramp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px; /* Thumb más pequeño */
  height: 8px;
  background: #606070;
  border: 1px outset #707080;
  cursor: pointer;
}

.laseramp-slider::-webkit-slider-thumb:hover {
  background: #707080;
}

.laseramp-slider::-webkit-slider-thumb:active {
  border: 1px inset #505060;
  box-shadow: inset 1px 1px 0 #303040;
}

.laseramp-slider::-moz-range-thumb {
  width: 8px; /* Thumb más pequeño */
  height: 8px;
  background: #606070;
  border: 1px outset #707080;
  cursor: pointer;
}

.laseramp-slider::-moz-range-thumb:hover {
  background: #707080;
}

.laseramp-slider::-moz-range-thumb:active {
  border: 1px inset #505060;
  box-shadow: inset 1px 1px 0 #303040;
}

.laseramp-volume-value {
  min-width: 18px;
  text-align: right;
  font-family: 'Courier New', monospace;
  font-size: 7px; /* Fuente más pequeña */
  color: #fff;
}

/* Controles en la taskbar - siempre visibles al lado del reloj */
.laseramp-taskbar-controls {
  display: flex;
  gap: 2px;
  align-items: center;
  padding: 2px;
  background: #c0c0c0;
  border: 1px outset #c0c0c0;
  margin-right: 4px; /* Espacio antes del reloj */
  flex-shrink: 0;
  /* No usar margin-left: auto aquí, el reloj lo tiene y empujará todo hacia la derecha */
}

.laseramp-taskbar-btn {
  width: 22px;
  height: 20px;
  background: #c0c0c0;
  border: 1px outset #c0c0c0;
  color: #000;
  font-size: 9px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  user-select: none;
}

.laseramp-taskbar-btn:hover {
  background: #e0e0e0;
}

.laseramp-taskbar-btn:active {
  border: 1px inset #c0c0c0;
  box-shadow: inset 1px 1px 0 #808080;
}

.laseramp-taskbar-btn.play {
  width: 24px;
}

/* Panel de playlist */
.laseramp-playlist-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #c0c0c0;
  border-top: 1px inset #808080;
  overflow: hidden;
  min-height: 0;
  position: relative;
  z-index: 10; /* Capa superior */
}

.laseramp-playlist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  background: #808080;
  border-bottom: 1px inset #808080;
  font-size: 8px; /* Fuente más pequeña */
  font-weight: bold;
  color: #000;
  flex-shrink: 0;
}

.laseramp-btn-small {
  width: 16px;
  height: 14px;
  background: #c0c0c0;
  border: 1px outset #c0c0c0;
  color: #000;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  user-select: none;
  pointer-events: auto; /* Permitir eventos del mouse */
}

.laseramp-btn-small:hover {
  background: #e0e0e0;
}

.laseramp-btn-small:active {
  border: 1px inset #c0c0c0;
  box-shadow: inset 1px 1px 0 #808080;
}

.laseramp-playlist-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px inset #808080;
  margin: 2px;
  font-size: 8px; /* Fuente más pequeña estilo Winamp */
  min-height: 0;
}

.laseramp-playlist-item {
  display: flex;
  align-items: center;
  padding: 2px 4px;
  cursor: pointer;
  border-bottom: 1px solid #e0e0e0;
  user-select: none;
  gap: 4px;
  pointer-events: auto; /* Permitir eventos del mouse */
}

.laseramp-playlist-item:hover {
  background: #e0e0e0;
}

.laseramp-playlist-item.active {
  background: #316ac5;
  color: #fff;
}

.playlist-number {
  min-width: 20px;
  font-weight: bold;
}

.playlist-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-time {
  min-width: 40px;
  text-align: right;
  font-family: 'Courier New', monospace;
  font-size: 9px;
}

/* Ocultar contenido cuando está minimizado */
.laseramp.window-minimized .laseramp-main-panel,
.laseramp.window-minimized .laseramp-playlist-panel {
  display: none !important;
}

/* ===== ADAPTACIONES MÓVILES Y TABLET ===== */
/* Ocultar elementos móviles en desktop por defecto */
.mobile-menu-toggle,
.mobile-sidebar,
.mobile-sidebar-overlay {
  display: none;
}

/* Media queries intermedias para desktop responsivo */
/* Ajustar header y menú antes de pasar a móvil */
@media screen and (max-width: 1400px) and (min-width: 1025px) {
  /* Reducir padding de items del menú para que quepan todos */
  #menu li a {
    padding: 0 12px;
    min-width: 100px;
    font-size: 16px;
  }
  
  #logo {
    margin-right: 20px;
  }
  
  #logo img {
    height: 45px;
  }
}

@media screen and (max-width: 1200px) and (min-width: 1025px) {
  /* Reducir aún más el padding y tamaño de fuente */
  #menu li a {
    padding: 0 8px;
    min-width: 90px;
    font-size: 15px;
    letter-spacing: 0.5px;
  }
  
  #logo {
    margin-right: 15px;
  }
  
  #logo img {
    height: 40px;
  }
  
  #header {
    padding: 0 15px;
  }
}

@media screen and (max-width: 1024px) {
  /* Botón hamburguesa que se transforma en X - SIEMPRE en esquina superior derecha */
  /* Z-index mayor que overlay (9999) y sidebar (10000) para estar siempre visible */
  /* Aunque esté dentro del header, con position: fixed crea su propio contexto de apilamiento */
  .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10010 !important;
    position: fixed !important;
    right: max(16px, env(safe-area-inset-right, 0px)) !important;
    top: max(16px, env(safe-area-inset-top, 0px)) !important;
    left: auto !important;
    pointer-events: auto !important;
    gap: 6px;
    transition: all 0.3s ease;
    /* Asegurar que esté en un nuevo contexto de apilamiento */
    isolation: isolate;
  }


  .mobile-menu-toggle span {
    width: 100%;
    height: 6px;
    background: #fff; /* Color por defecto (tema dark) */
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
    position: absolute;
  }

  /* Color morado cuando el header es light */
  /* Usar :has() para navegadores modernos y clase en body como fallback */
  body:has(#header.header-light) .mobile-menu-toggle span,
  body.header-light-theme .mobile-menu-toggle span {
    background: #906cfc !important;
  }

  .mobile-menu-toggle span:nth-child(1) {
    top: 8px;
  }

  .mobile-menu-toggle span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }

  .mobile-menu-toggle span:nth-child(3) {
    bottom: 8px;
  }

  /* Transformación a X cuando está activo - SIEMPRE blanco (mayor especificidad) */
  /* Esto debe estar después de la regla del header-light para sobrescribirla */
  body:has(#header.header-light) .mobile-menu-toggle.active span,
  body.header-light-theme .mobile-menu-toggle.active span,
  .mobile-menu-toggle.active span {
    background: #fff !important; /* Forzar blanco cuando está activo (X) - overlay negro */
  }
  
  .mobile-menu-toggle.active span:nth-child(1),
  .mobile-menu-toggle.active span:nth-child(3) {
    background: #fff !important; /* Asegurar que las líneas de la X sean blancas */
  }

  .mobile-menu-toggle.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scale(0);
  }

  .mobile-menu-toggle.active span:nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }

  /* Ocultar menú desktop en móvil */
  #menu {
    display: none !important;
  }

  /* Sidebar móvil - viene de izquierda a derecha */
  .mobile-sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: -100%;
    width: min(700px, 92vw);
    max-width: 92vw;
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 100%);
    z-index: 10000;
    transition: left 0.3s ease;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
  }

  .mobile-sidebar.open {
    left: 0;
  }

  .mobile-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    min-height: 180px;
  }

  .mobile-sidebar-logo {
    height: 100px;
    width: auto;
    margin: 0 auto;
  }

  .mobile-sidebar-close {
    position: absolute;
    right: 30px;
    top: 30px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 64px;
    line-height: 1;
    cursor: pointer;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 10;
  }

  /* Ocultar botón X del sidebar ya que usaremos el botón hamburguesa */
  .mobile-sidebar-close {
    display: none;
  }

  .mobile-sidebar-close:hover {
    color: #00ffff;
  }

  .mobile-sidebar-menu {
    list-style: none;
    padding: 40px 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
  }

  .mobile-sidebar-menu li {
    margin: 0;
    padding: 0;
  }

  .mobile-sidebar-menu .mobile-menu-link {
    display: flex;
    align-items: center;
    padding: 30px 40px;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .mobile-sidebar-menu .mobile-menu-link:hover,
  .mobile-sidebar-menu .mobile-menu-link.active {
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
    text-shadow: 
      0 0 10px #00ffff,
      0 0 20px #00ffff;
  }

  .mobile-sidebar-menu .menu-text {
    font-family: 'nulshockbold', monospace;
    font-size: clamp(18px, 4.2vw, 28px);
    letter-spacing: 0.06em;
    line-height: 1.2;
  }

  /* Overlay del sidebar */
  .mobile-sidebar-overlay {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
  }

  .mobile-sidebar-overlay.active {
    pointer-events: auto;
  }

  .mobile-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Header: logo como ancho máximo (sin tapar hamburguesa fija a la derecha) */
  #header {
    padding: 0 12px;
    padding-right: max(52px, calc(env(safe-area-inset-right, 0px) + 48px));
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    min-height: 68px;
    height: auto;
    box-sizing: border-box;
  }

  #logo {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(80vw, calc(100vw - 56px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    margin-right: 0;
    overflow: hidden;
  }

  #logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 48px;
    object-fit: contain;
  }

  /* Canvas de partículas - ajuste para móvil */
  #canvas {
    height: 100vh !important;
    height: 100dvh !important;
    width: auto !important;
    left: 0 !important;
    right: auto !important;
    position: fixed !important;
    top: 0 !important;
    pointer-events: none !important; /* Desactivar interacción para permitir scroll */
  }

  /* Fondo con vídeo alpha: llenar alto del viewport y recortar lados (solo adorno) */
  #webmVideo {
    width: 100vw !important;
    min-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    object-position: center center !important;
    left: 50% !important;
    right: auto !important;
    top: 0 !important;
    transform: translateX(-50%) translateZ(0) !important;
    -webkit-transform: translateX(-50%) translateZ(0) !important;
  }

  body {
    overflow-x: hidden;
  }

  .content-wrapper {
    margin-top: clamp(72px, 18vw, 90px);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  /* Ventanas en móvil - grid vertical */
  .section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    align-items: stretch;
    min-height: 100vh;
  }

  .window-3d {
    position: relative !important;
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 auto 20px auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    order: 0;
    flex-shrink: 0;
  }

  /* Detalle proyecto/blog: no deben ocupar el scroll de la sección hasta abrir el modal
     (la regla general .window-3d fuerza opacity/visibility; esto los saca del flujo). */
  #proyectos > .project-popup-detail-window:not(.window-visible),
  #blog > .blog-post-popup-window:not(.window-visible) {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Desactivar funcionalidades de ventana en móvil */
  .window-3d .window-titlebar {
    cursor: default !important;
    user-select: none;
    padding: 10px 14px !important;
    min-height: 52px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Ocultar emojis/iconos en los titlebar en móvil */
  .window-3d .window-titlebar .window-icon {
    display: none !important;
  }

  .window-3d .window-controls {
    display: none !important;
  }
  
  .window-3d .window-title,
  .window-3d .window-titlebar h1.window-title {
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1.35 !important;
  }

  .window-3d .window-resize-handle {
    display: none !important;
  }

  /* Desactivar drag and drop en móvil */
  .window-3d {
    pointer-events: auto;
  }

  /* Ventanas minimizadas no aplican en móvil */
  .window-3d.window-minimized {
    position: relative !important;
    height: auto !important;
    min-height: 150px !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .window-3d.window-minimized .window-titlebar,
  .window-3d.window-minimized .window-content {
    display: block !important;
  }

  /* Taskbar oculta en móvil */
  .taskbar {
    display: none !important;
  }

  /* Laseramp oculto y apagado en móvil */
  .laseramp {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Fix para bug de renderizado en móvil con overflow y scroll */
  /* Solución: transform: translateZ(0) fuerza GPU acceleration y evita el bug */
  /* Aplicar a TODAS las ventanas de texto y popup */
  .window-3d .window-content,
  .window-3d[data-window-type="text"] .window-content,
  .window-3d[data-window-type="popup"] .window-content,
  .window-content {
    font-size: 16px !important;
    line-height: 1.55 !important;
    padding: 0.85em 1em !important;
    transform: translateZ(0) !important; /* Fuerza GPU acceleration - fix para bug móvil */
    -webkit-overflow-scrolling: touch;
  }

  /* Todos los párrafos con el mismo tamaño y fix para ajuste automático */
  /* Aplicar a TODAS las ventanas de texto y popup */
  .window-3d .window-content p,
  .window-3d[data-window-type="text"] .window-content p,
  .window-3d[data-window-type="popup"] .window-content p,
  .window-content p {
    font-size: 16px !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    margin-bottom: 1em !important;
    line-height: 1.55 !important;
  }
  
  /* Texto en span, div, strong, em, etc. - mismo tamaño */
  .window-3d .window-content span,
  .window-3d .window-content div,
  .window-3d .window-content strong,
  .window-3d .window-content em,
  .window-3d .window-content b,
  .window-3d .window-content i,
  .window-content span,
  .window-content div,
  .window-content strong,
  .window-content em,
  .window-content b,
  .window-content i {
    font-size: 16px !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
  }

  /* Títulos h2 */
  .window-content h2 {
    font-size: 1.25em !important;
    margin-bottom: 1em !important;
    padding-bottom: 0.5em !important;
  }

  /* Listas - mismo tamaño que los párrafos */
  /* Aplicar a TODAS las ventanas de texto y popup */
  .window-3d .window-content ul,
  .window-3d .window-content ol,
  .window-3d[data-window-type="text"] .window-content ul,
  .window-3d[data-window-type="text"] .window-content ol,
  .window-3d[data-window-type="popup"] .window-content ul,
  .window-3d[data-window-type="popup"] .window-content ol,
  .window-content ul,
  .window-content ol {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .window-3d .window-content li,
  .window-3d[data-window-type="text"] .window-content li,
  .window-3d[data-window-type="popup"] .window-content li,
  .window-content li {
    font-size: 16px !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    line-height: 1.55 !important;
    margin-bottom: 0.5em !important;
  }

  /* ASCII Art más pequeño */
  .window-content pre.ascii-art {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .window-title {
    font-size: 14px !important;
  }

  .window-titlebar h1.window-title {
    font-size: 14px !important;
  }

  .section-title {
    font-size: 22px !important;
  }

  .section-subtitle {
    font-size: 15px !important;
  }

  .section-body {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

  .section-body p {
    font-size: 1em !important;
    margin-bottom: 1em !important;
  }

  /* Detalle de proyecto y artículos de blog: modal pantalla completa, scroll interno */
  body.has-mobile-popup-modal {
    overflow: hidden;
  }

  .window-3d.project-popup-detail-window .window-btn.minimize,
  .window-3d.project-popup-detail-window .window-btn.maximize,
  .window-3d.blog-post-popup-window .window-btn.minimize,
  .window-3d.blog-post-popup-window .window-btn.maximize,
  .window-3d.project-popup-detail-window .window-resize-handle,
  .window-3d.blog-post-popup-window .window-resize-handle {
    display: none !important;
  }

  .window-3d.project-popup-detail-window.window-visible,
  .window-3d.blog-post-popup-window.window-visible {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 10060 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .window-3d.project-popup-detail-window.window-visible .window-titlebar,
  .window-3d.blog-post-popup-window.window-visible .window-titlebar {
    flex-shrink: 0;
  }

  .window-3d.project-popup-detail-window.window-visible .window-content,
  .window-3d.blog-post-popup-window.window-visible .window-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .blog-post-card-link {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-post-card-thumb {
    width: 100%;
    height: auto;
    max-height: 200px;
    aspect-ratio: 5 / 3;
  }

  #blog .blog-post-card-title {
    font-size: 15px !important;
  }

  #blog .blog-post-card-excerpt {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  #blog .blog-post-card-date {
    font-size: 10px !important;
  }

  #proyectos .project-index-title {
    font-size: 16px !important;
  }

  #proyectos .project-index-blurb {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .blog-post-full h2 {
    font-size: 1.2em !important;
  }

  .blog-post-full h3 {
    font-size: 1.05em !important;
  }

  .blog-post-full .blog-post-code {
    font-size: 9px !important;
    padding: 8px 10px !important;
  }

  /* Juegos: texto de instrucciones */
  #juegos .laseron-help-window .laseron-instr-lead,
  #juegos .laseron-help-window .laseron-instr-list,
  #juegos .laseron-help-window .laseron-instr-steps,
  #juegos .laseron-help-window .laseron-instr-footnote {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  #juegos .laseron-help-window .laseron-instructions .laseron-instr-heading {
    font-size: 1.15em !important;
    margin-bottom: 0.5em !important;
  }

  #juegos .laseron-help-window .laseron-key {
    font-size: 14px !important;
    padding: 4px 10px !important;
  }

  #contacto .contact-intro,
  #contacto .contact-card-title,
  #contacto .contact-card-value {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  #contacto .contact-heading {
    font-size: 1.2em !important;
  }

  #contacto .contact-icon-wrap {
    width: 56px;
    height: 56px;
  }
}

/* Teléfonos estrechos: menú lateral y tarjetas más cómodos */
@media screen and (max-width: 480px) {
  .mobile-sidebar-menu .mobile-menu-link {
    padding: 20px 22px;
  }

  .mobile-sidebar-header {
    padding: 36px 20px 28px;
    min-height: 140px;
  }

  .mobile-sidebar-logo {
    height: 72px;
  }

  #proyectos .project-index-card,
  #blog .blog-post-card {
    border-radius: 2px;
  }

  #proyectos .project-index-link,
  #blog .blog-post-card-link {
    padding: 14px;
    gap: 12px;
  }

  #blog .blog-post-card-thumb {
    max-height: 180px;
  }
}

/* Media query específica para tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .mobile-sidebar {
    width: min(700px, 92vw);
  }
}