:root{
  --bg-void:#081b34;
  --bg-void-2:#0d2a4d;
  --grid-line: rgba(110,180,255,0.14);
  --panel-fill: rgba(15,50,80,0.55);
  --panel-fill-2: rgba(10,40,65,0.75);
  --panel-border: rgba(140,200,255,0.45);
  --panel-border-dim: rgba(110,170,220,0.28);
  --cyan: #7fc4ee;
  --cyan-bright: #d6f0ff;
  --cyan-dim: #5f93c0;
  --amber: #e2b25a;
  --green: #6fe08a;
  --shadow-glow: 0 0 18px rgba(120,190,255,0.18);
}

*{box-sizing:border-box;}

html,body{
  margin:0; padding:0;
  background:var(--bg-void);
  color:var(--cyan);
  font-family:'Share Tech Mono', monospace;
  overflow-x:hidden;
}

body{
  transition: filter 0.4s ease;
}

/* ---------- fondo de cuadrícula ---------- */
.grid-bg{
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
  z-index:0;
  animation: grid-drift 34s linear infinite;
}
@keyframes grid-drift{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 420px 0, 0 420px; }
}
.grid-vignette{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(8,27,52,0.45) 60%, var(--bg-void) 100%);
}
.grid-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(90,170,255,0.16), transparent 60%),
    radial-gradient(700px 500px at 85% 75%, rgba(60,140,230,0.14), transparent 60%);
  animation: glow-drift 16s ease-in-out infinite alternate;
}
@keyframes glow-drift{
  from{ transform: translate(0,0) scale(1); opacity:0.85; }
  to{ transform: translate(2%, -2%) scale(1.08); opacity:1; }
}

/* partículas flotantes */
.particles{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.particle{
  position:absolute; bottom:-10px;
  width:3px; height:3px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 6px var(--cyan);
  opacity:0.55;
  animation: float-up linear infinite;
}
@keyframes float-up{
  from{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.6; }
  90%{ opacity:0.5; }
  to{ transform: translateY(-105vh) translateX(20px); opacity:0; }
}

a{ color:var(--cyan-bright); }

/* ---------- barra superior ---------- */
.topbar{
  position:relative; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  gap:14px;
  padding:10px 22px;
  border-bottom:1px solid var(--panel-border-dim);
  background:linear-gradient(180deg, rgba(10,35,60,0.85), rgba(10,35,60,0.4));
  font-size:12px; letter-spacing:0.06em;
}
.topbar .brand{ color:var(--cyan-bright); font-family:'Orbitron', sans-serif; font-weight:800; font-size:14px; letter-spacing:0.12em; white-space:nowrap;}
.topbar .status{ display:flex; gap:18px; color:var(--cyan-dim); white-space:nowrap; }
.topbar .status span b{ color:var(--green); font-weight:400;}
.blink{ animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink{ to{ visibility:hidden; } }

/* ---------- layout general ---------- */
main{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto;
  padding:26px 20px 70px;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:20px;
}
main.single-col{ grid-template-columns: 1fr; max-width:920px; }
main.with-scanner{ grid-template-columns: 230px 1.2fr 1fr; max-width:1320px; }
main.wide-col{ grid-template-columns: 1fr; max-width:1180px; }
.gallery-section{ grid-column:1 / -1; }
@media (max-width:820px){
  main{ grid-template-columns: 1fr; }
  main.with-scanner{ grid-template-columns: 1fr; }
}

/* ---------- estilo "ventana" ---------- */
.win{
  position:relative;
  background:var(--panel-fill);
  border:1px solid var(--panel-border);
  box-shadow: var(--shadow-glow), inset 0 0 40px rgba(120,190,255,0.05);
  backdrop-filter: blur(2px);
  margin-bottom:20px;
}
.win::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border:1px solid rgba(255,255,255,0.03);
}
.win-title{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 12px;
  background:linear-gradient(90deg, rgba(40,100,150,0.55), rgba(40,100,150,0.15));
  border-bottom:1px solid var(--panel-border-dim);
  font-family:'Orbitron', sans-serif; font-weight:600;
  font-size:12px; letter-spacing:0.14em; color:var(--cyan-bright);
  text-transform:uppercase;
}
.win-title .marks{ color:var(--cyan-dim); letter-spacing:0.2em; font-size:10px; }
.win-body{ padding:16px; font-size:13px; line-height:1.6; }

/* ---------- animación de "encendido", como al arrancar un PC ---------- */
.win{ transform-origin:top center; }
.win.boot{
  animation: win-boot 0.42s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes win-boot{
  0%{ opacity:0; transform:scaleY(0.04) scaleX(0.9); filter:brightness(3) saturate(1.6); }
  35%{ opacity:1; transform:scaleY(1.06) scaleX(1.01); filter:brightness(2) saturate(1.3); }
  60%{ transform:scaleY(0.97) scaleX(1); filter:brightness(1); }
  100%{ opacity:1; transform:scaleY(1) scaleX(1); filter:none; }
}
@media (prefers-reduced-motion: reduce){
  .win.boot{ animation:none; }
}

/* ---------- hero / identidad ---------- */
.hero .win-body{ padding:22px 22px 20px; }
.hero h1{
  font-family:'Orbitron', sans-serif; font-weight:800;
  font-size:clamp(28px, 4vw, 44px);
  letter-spacing:0.05em;
  margin:0 0 6px;
  color:var(--cyan-bright);
  text-shadow: 0 0 22px rgba(150,210,255,0.4);
}
.hero .tag{
  color:var(--cyan-dim); font-size:12px; letter-spacing:0.18em; margin-bottom:18px;
}
.hero p{ max-width:60ch; color:#d6ecff; }
.hero .typed::after{
  content:"█"; color:var(--cyan); animation: blink 1s steps(2,start) infinite;
  margin-left:2px;
}

/* ---------- navegación / accesos ---------- */
.nav-grid{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--panel-border-dim);
  background:rgba(25,80,120,0.25);
  padding:12px 14px;
  text-decoration:none;
  color:var(--cyan-bright);
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
/* icono opcional junto al texto: sube un PNG/SVG cuadrado de 64×64px
   (se muestra a 24×24px, así que a esa resolución se ve nítido incluso
   en pantallas retina). Si el archivo no existe, el icono simplemente
   no aparece y el texto se acomoda solo. */
.nav-icon{
  width:24px; height:24px; flex:none;
  object-fit:contain;
}
.nav-item-text{ display:block; }
.nav-item small{ display:block; margin-top:4px; color:var(--cyan-dim); text-transform:none; letter-spacing:0.02em; font-size:11px; }
.nav-item:hover{
  background:rgba(120,190,255,0.16);
  border-color:var(--cyan);
  transform:translateX(2px);
}
.nav-item.current{
  border-color:var(--cyan-bright);
  background:rgba(120,190,255,0.12);
}
.nav-item.current small::before{ content:"AQUÍ · "; color:var(--green); }

/* ---------- introducción de página ---------- */
.intro p{ margin:0; color:#d6ecff; max-width:70ch; }

/* ---------- botón "volver" ---------- */
.back-btn{
  position:fixed; right:18px; bottom:18px; z-index:50;
  background:rgba(10,35,60,0.85);
  border:1px solid var(--panel-border);
  color:var(--cyan-bright);
  font-family:'Share Tech Mono', monospace;
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  padding:9px 13px;
  text-decoration:none;
  display:none;
  box-shadow: var(--shadow-glow);
  transition: background 0.15s ease;
}
.back-btn.show{ display:inline-block; }
.back-btn:hover{ background:rgba(120,190,255,0.18); }
.back-btn::before{ content:"◄ "; }

/* ---------- escáner giratorio (foto propia) ---------- */
.scanner-win .win-body{ padding:14px 12px; }
.scanner-stage{
  position:relative;
  height:230px;
  display:flex; align-items:center; justify-content:center;
  perspective:600px;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:16px 16px;
  border:1px solid var(--panel-border-dim);
  overflow:hidden;
  margin-bottom:12px;
}
.scanner-figure{
  position:relative;
  width:120px; height:160px;
  transform-style:preserve-3d;
  animation: spin-y 6s linear infinite;
  filter: drop-shadow(0 0 8px rgba(111,224,138,0.6));
}
.scanner-figure img{
  width:100%; height:100%;
  object-fit:cover;
  display:none;
  border:2px solid rgba(111,224,138,0.55);
  border-radius:4px;
  background:#04101c;
}
@keyframes spin-y{
  from{ transform: rotateY(0deg); }
  to{ transform: rotateY(360deg); }
}
.scanner-beam{
  position:absolute; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, rgba(111,224,138,0.9), transparent);
  box-shadow:0 0 10px rgba(111,224,138,0.7);
  animation: beam-sweep 2.6s ease-in-out infinite;
}
@keyframes beam-sweep{
  0%{ top:6%; }
  50%{ top:92%; }
  100%{ top:6%; }
}
.scanner-photo-placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  border:1px dashed rgba(111,224,138,0.55);
  border-radius:4px;
  background:rgba(6,20,35,0.6);
  text-align:center;
  padding:8px;
}
.scanner-photo-placeholder span{ font-size:22px; opacity:0.8; }
.scanner-photo-placeholder p{ margin:0; font-size:9.5px; line-height:1.5; color:var(--cyan-dim); }
.scanner-photo-placeholder code{ color:var(--green); font-size:9.5px; }
.scanner-readout{
  font-size:10.5px; color:var(--cyan-dim); line-height:1.6;
}
.scanner-readout .val{ color:var(--green); }
.scanner-link{
  display:inline-block; margin-top:10px;
  color:var(--cyan-bright); font-size:10.5px; letter-spacing:0.04em;
  text-decoration:underline; text-underline-offset:3px;
}
.scanner-link:hover{ color:var(--green); }

@media (max-width:820px){
  .scanner-stage{ height:200px; }
}

/* ---------- barras de escaneo / medidores ---------- */
.meter-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:11px; color:var(--cyan-dim);}
.meter{ flex:1; height:8px; background:rgba(255,255,255,0.05); border:1px solid var(--panel-border-dim); position:relative; overflow:hidden;}
.meter i{ display:block; height:100%; background:linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }

/* ---------- consola / log ---------- */
.console{
  font-size:11.5px; line-height:1.7;
  color:var(--green);
}
.console.small{ max-height:200px; overflow:hidden; }
.console .line{ opacity:0; animation: appear 0.35s forwards; }
.console .line.sys{ color:var(--cyan-dim); }
.console .line.warn{ color:var(--amber); }
@keyframes appear{ to{ opacity:1; } }

/* entradas de log grandes (Proyectos / Reseñas / Blog) */
.log-entry{
  border-left:2px solid var(--panel-border-dim);
  padding:4px 0 16px 14px;
  margin-left:4px;
  opacity:0; animation: appear 0.4s forwards;
}
.log-entry .stamp{ color:var(--cyan-dim); font-size:11px; letter-spacing:0.05em; }
.log-entry .stamp::before{ content:"> "; color:var(--green); }
.log-entry h3{
  margin:4px 0 6px; font-family:'Orbitron', sans-serif; font-size:14px;
  letter-spacing:0.05em; color:var(--cyan-bright); text-transform:uppercase;
}
.log-entry p{ margin:0; color:#cfe6fb; font-size:13px; line-height:1.6; }
.log-list{
  margin:8px 0; padding-left:0;
  list-style:none;
  color:#cfe6fb; font-size:13px; line-height:1.8;
}
.log-list li{ padding-left:16px; position:relative; }
.log-list li::before{
  content:"—"; position:absolute; left:0;
  color:var(--cyan);
}
.log-entry-images{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:8px 0 10px;
}
.log-entry-images img{
  max-width:280px; width:auto; height:auto; max-height:340px;
  object-fit:contain;
  border:1px solid var(--panel-border-dim);
  background:rgba(6,20,35,0.5);
  display:block;
  cursor: zoom-in;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.log-entry-images img:hover{ transform:scale(1.02); border-color:var(--cyan); }
@media (max-width:600px){
  .log-entry-images img{ max-width:100%; }
}

/* ---------- vistas previas (listados de Proyectos / Reseñas / Blog) ---------- */
.log-entry-thumb{ margin:8px 0 10px; }
.log-entry-thumb img{
  width:220px; max-width:100%; height:140px; object-fit:cover;
  border:1px solid var(--panel-border-dim);
  background:rgba(6,20,35,0.5);
  display:block;
  cursor: zoom-in;
  transition: border-color 0.15s ease;
}
.log-entry-thumb img:hover{ border-color:var(--cyan); }
.log-entry-more{
  display:inline-block; margin-top:10px;
  color:var(--cyan-bright); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; text-decoration:none;
  border-bottom:1px dotted var(--panel-border-dim);
}
.log-entry-more:hover{ color:var(--green); border-color:var(--green); }
.log-empty{ color:var(--cyan-dim); font-size:12px; padding:6px 0; }

/* ---------- control de orden (más recientes / más antiguas) ---------- */
.log-sort{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:14px;
}
.log-sort-label{
  font-size:10.5px; color:var(--cyan-dim); letter-spacing:0.06em; text-transform:uppercase;
}
.sort-btn{
  border:1px solid var(--panel-border-dim);
  background:rgba(20,70,100,0.3);
  color:var(--cyan-bright);
  font-family:'Share Tech Mono', monospace;
  font-size:10.5px; letter-spacing:0.03em;
  padding:5px 10px; cursor:pointer;
}
.sort-btn:hover{ background:rgba(120,190,255,0.18); }
.sort-btn.active{ border-color:var(--green); color:var(--green); }

/* ---------- enlace de vuelta a la sección (página de entrada) ---------- */
.section-back-link{
  display:inline-block; margin-top:6px;
  color:var(--cyan-bright); font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; text-decoration:none;
  border-bottom:1px dotted var(--panel-border-dim);
}
.section-back-link:hover{ color:var(--green); border-color:var(--green); }

/* ---------- galería (tira de imágenes en bucle) ---------- */
.gallery-track-wrap{
  overflow:hidden;
  border:1px solid var(--panel-border-dim);
  background:rgba(6,20,35,0.4);
  padding:14px 18px;
}
.gallery-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  animation: gallery-scroll linear infinite;
}
.gallery-track img{
  height:150px; width:auto; flex:none;
  object-fit:cover;
  border:1px solid var(--panel-border-dim);
  box-shadow:0 0 10px rgba(120,190,255,0.12);
  display:block;
}
@keyframes gallery-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-50% - 9px)); }
}
.gallery-empty{
  padding:30px 16px; text-align:center;
  color:var(--cyan-dim); font-size:11px;
}
@media (max-width:820px){
  .gallery-track img{ height:110px; }
}
@media (prefers-reduced-motion: reduce){
  .gallery-track{ animation:none; }
}

footer{
  position:relative; z-index:2;
  text-align:center; padding:24px;
  font-size:11px; color:var(--cyan-dim);
  border-top:1px solid var(--panel-border-dim);
}

::selection{ background:var(--cyan); color:#02182c; }

/* ================= ESCENA JUEGOS (WII) ================= */
.wii-room{
  position:relative;
  height:640px;
  border:1px solid var(--panel-border-dim);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:20px 20px;
  overflow:hidden;
}
.wii-room::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:160px;
  background:linear-gradient(180deg, transparent, rgba(0,10,20,0.55));
}
.wii-console{
  position:absolute; left:6%; bottom:46px; width:46px; height:168px;
  background:linear-gradient(135deg, #ffffff 0%, #f4f4f4 55%, #e2e2e2 100%);
  border-radius:9px 9px 3px 3px;
  box-shadow:0 0 14px rgba(200,225,245,0.4), inset 0 0 0 1px rgba(255,255,255,0.75);
}
.wii-console::before{
  content:"";
  position:absolute; inset:0;
  clip-path:polygon(50% 0%, 78% 0%, 78% 100%, 50% 100%);
  background:linear-gradient(160deg,
    #f2fbff 0%,
    #d9f0fb 12%,
    #a8daf2 26%,
    #6fb9e6 42%,
    #4a9fd8 58%,
    #327fbf 75%,
    #235f96 100%);
}
.wii-console .wii-logo{
  position:absolute; left:9px; bottom:-14px;
  font-family:Georgia, 'Times New Roman', serif;
  font-style:italic; font-weight:700;
  font-size:9px; letter-spacing:0.02em;
  color:#1c6fae;
  z-index:2;
  white-space:nowrap;
}
.wii-console::after{
  content:"";
  position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  width:66px; height:18px;
  background:linear-gradient(180deg, #eaeaea, #b2b2b2);
  clip-path:polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%);
  box-shadow:0 6px 10px rgba(0,0,0,0.4);
}
.wii-console-shadow{
  position:absolute; left:6%; bottom:16px; width:90px; height:16px;
  transform:translateX(-22px);
  background:radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
}
.wii-scene-row{
  position:absolute; right:4%; bottom:44px; width:84%; max-width:900px;
  display:flex; align-items:center; gap:12px;
}
.wii-screen-wrap{ flex:1; min-width:0; }
.wii-screen-frame{
  border:14px solid #0c1c2e; border-radius:8px;
  box-shadow:0 0 30px rgba(120,190,255,0.18), 0 24px 40px rgba(0,0,0,0.5);
  background:#000;
}
.wii-screen{
  position:relative; aspect-ratio:16/10; background:#000; overflow:hidden;
  /* cursor personalizado (la "manita" de la Wii) sobre la pantalla.
     Sube tu imagen a images/cursores/mano-wii.png — PNG cuadrado de
     32×32px (o 64×64px si tu pantalla usa mucho zoom), fondo transparente,
     con la punta del dedo cerca de la esquina superior izquierda del
     archivo. Los dos números de después de la url son el "punto caliente"
     (a qué pixel del PNG apunta exactamente el cursor); ajústalos si tu
     imagen no tiene el dedo en esa posición. Si el archivo no existe
     todavía, el navegador usa el cursor normal sin romper nada. */
  cursor: url('images/cursores/mano-wii.png') 8 4, auto;
}
/* sprite de "clic": mientras se mantiene pulsado el botón del ratón sobre
   la pantalla o cualquier elemento clicable de dentro (casilla, flechas de
   página, botón de volver), se cambia a esta segunda imagen — como la
   manita de la Wii Remote al pulsar A. Sube images/cursores/mano-wii-click.png
   con el mismo tamaño y "punto caliente" que la anterior; si no existe
   todavía, el navegador simplemente sigue mostrando el cursor normal. */
.wii-screen:active,
.wii-tile:active,
.wii-detail-back:active{
  cursor: url('images/cursores/mano-wii-click.png') 8 4, pointer;
}
.wii-screen.powering{ animation: wii-power-flicker 2.2s steps(6) forwards; }
.wii-screen.on{ background: linear-gradient(160deg, #eaf6ff, #cfe9f7); }
@keyframes wii-power-flicker{
  0%{ background:#000; }
  15%{ background:#dff0ff; }
  25%{ background:#000; }
  40%{ background:#dff0ff; }
  55%{ background:#000; }
  70%{ background:#dff0ff; }
  100%{ background:#dff0ff; }
}
.wii-standby{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.18); font-size:10.5px; letter-spacing:0.15em;
}
.wii-screen.on .wii-standby, .wii-screen.powering .wii-standby{ display:none; }
.wii-grid{
  position:absolute; inset:0; padding:5%;
  display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(3,1fr);
  gap:4%;
  opacity:0;
  transform: translateY(0);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.wii-screen.on .wii-grid{ opacity:1; }
/* animación de subida/bajada al cambiar de página con ▲ / ▼ */
.wii-grid.wii-grid-out-up{ transform: translateY(-26px); opacity:0; }
.wii-grid.wii-grid-out-down{ transform: translateY(26px); opacity:0; }
.wii-grid.wii-grid-in-from-bottom{ transform: translateY(26px); opacity:0; transition:none; }
.wii-grid.wii-grid-in-from-top{ transform: translateY(-26px); opacity:0; transition:none; }
.wii-tile{
  position:relative;
  background:rgba(255,255,255,0.55);
  border-radius:5px;
  border:1px solid rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor: url('images/cursores/mano-wii.png') 8 4, pointer;
  box-shadow: inset 0 0 6px rgba(255,255,255,0.5);
}
.wii-tile img{ width:100%; height:100%; object-fit:cover; }
.wii-tile.empty{ background:rgba(255,255,255,0.22); cursor:default; }
.wii-tile-plus{ color:rgba(30,60,90,0.4); font-size:18px; }
.wii-tile-name{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(6,20,35,0.88); color:var(--cyan-bright);
  font-size:10px; letter-spacing:0.03em; text-align:center;
  padding:4px 3px; line-height:1.2;
  opacity:0; transform:translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.wii-tile:hover .wii-tile-name{ opacity:1; transform:translateY(0); }
.wii-screen.detail-open .wii-grid{ opacity:0; pointer-events:none; }

/* ---------- ficha de detalle del juego (imagen izq. + texto der.) ---------- */
.wii-detail{
  position:absolute; inset:0; z-index:4;
  display:flex; align-items:stretch;
  opacity:0; pointer-events:none;
  transition:opacity 0.35s ease;
  background: linear-gradient(160deg, #eaf6ff, #cfe9f7);
}
.wii-screen.detail-open .wii-detail{ opacity:1; pointer-events:auto; }
.wii-detail-image{
  flex:0 0 44%;
  background-color:rgba(12,40,60,0.15);
  display:flex; align-items:center; justify-content:center;
  padding:6%;
}
.wii-detail-image img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.wii-detail-text{
  flex:1; min-width:0;
  padding:8% 6%;
  overflow:auto;
  color:#0c2740;
}
.wii-detail-text h3{
  margin:0 0 10px;
  font-family:'Orbitron', sans-serif; font-size:15px;
  letter-spacing:0.04em; text-transform:uppercase;
  color:#0c2740;
}
.wii-detail-text p{
  margin:0; font-size:12px; line-height:1.7; color:#1c3c56;
}
.wii-detail-back{
  position:absolute; top:3%; left:3%; z-index:5;
  background:rgba(6,20,35,0.85);
  border:1px solid rgba(255,255,255,0.4);
  color:#eaf6ff;
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:0.05em; text-transform:uppercase;
  padding:6px 10px; cursor: url('images/cursores/mano-wii.png') 8 4, pointer;
}
.wii-detail-back:hover{ background:rgba(20,50,80,0.9); }
.wii-detail-back::before{ content:"◄ "; }

.wii-page-indicator{
  text-align:center; font-size:10px; color:var(--cyan-dim);
  margin-top:8px; letter-spacing:0.08em;
}
.wii-page-controls{
  display:flex; flex-direction:column; gap:10px; flex-shrink:0;
}
.wii-page-btn{
  background:rgba(25,80,120,0.3); border:1px solid var(--panel-border-dim);
  color:var(--cyan-bright); font-size:13px; padding:6px 10px; cursor:pointer;
}
.wii-page-btn:hover{ background:rgba(120,190,255,0.16); border-color:var(--cyan); }
.wii-page-btn:disabled{ opacity:0.3; cursor:default; }
@media (max-width:820px){
  .wii-room{ height:auto; padding:16px 10px 30px; }
  .wii-console{ position:relative; margin:0 auto 16px; }
  .wii-console-shadow{ display:none; }
  .wii-scene-row{ position:static; width:100%; max-width:none; }
  .wii-detail{ flex-direction:column; }
  .wii-detail-image{ flex:0 0 40%; }
}

/* ================= LIGHTBOX (expandir imágenes de las entradas) ================= */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  background:rgba(4,10,20,0.92);
  padding:50px 24px;
  cursor: zoom-out;
}
.lightbox.show{ display:flex; }
.lightbox img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  border:2px solid var(--panel-border);
  box-shadow:0 0 40px rgba(120,190,255,0.25);
  background:rgba(6,20,35,0.5);
  cursor:default;
}
.lightbox-close{
  position:absolute; top:16px; right:20px;
  background:rgba(10,35,60,0.9);
  border:1px solid var(--panel-border);
  color:var(--cyan-bright);
  font-family:'Share Tech Mono', monospace;
  font-size:16px; width:36px; height:36px;
  cursor:pointer;
}
.lightbox-close:hover{ background:rgba(120,190,255,0.18); }

/* ================= EASTER EGG: "PC secreto" ================= */
.secret-trigger{
  cursor:pointer;
  color:var(--cyan-bright);
  text-decoration:underline dotted;
  text-underline-offset:3px;
}
.secret-trigger:hover{ color:var(--green); }

.insensible-overlay{
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center;
  background:#000;
  opacity:0; pointer-events:none;
  transition:opacity 0.5s ease;
}
.insensible-overlay.show{ opacity:1; pointer-events:auto; }

.insensible-pc{
  display:flex; flex-direction:column; align-items:center;
  opacity:0; transition:opacity 1s ease;
  width:min(680px, 88vw);
}
.insensible-overlay.reveal-pc .insensible-pc{ opacity:1; }

/* --- monitor (dibujado con CSS, look de PC antiguo) --- */
.insensible-monitor{
  width:100%;
  background:linear-gradient(180deg, #ece5d6, #cfc6b0);
  border-radius:10px 10px 4px 4px;
  padding:20px 20px 30px;
  box-shadow:0 20px 50px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.4);
  position:relative;
}
.insensible-monitor-led{
  position:absolute; bottom:12px; right:26px;
  width:6px; height:6px; border-radius:50%;
  background:#5fd0ff; box-shadow:0 0 6px #5fd0ff;
  animation: blink 2.4s ease-in-out infinite;
}
.insensible-screen{
  position:relative;
  aspect-ratio:4/3;
  background:#020a04;
  border-radius:3px;
  overflow:hidden;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.9);
}
/* scanlines + viñeta, look CRT */
.insensible-screen::after{
  content:"";
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.28) 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.insensible-screen.power-flash::before{
  content:"";
  position:absolute; inset:0; z-index:5;
  background:#eaffe6;
  animation: insensible-flash 0.5s steps(6, end) forwards;
}
@keyframes insensible-flash{
  0%{ opacity:0; } 15%{ opacity:1; } 30%{ opacity:0.1; }
  45%{ opacity:0.8; } 60%{ opacity:0.05; } 100%{ opacity:0; }
}
.insensible-tower{
  width:64%; height:34px; margin-top:-4px;
  background:linear-gradient(180deg, #dcd4c0, #b9b09a);
  border-radius:0 0 6px 6px;
  box-shadow:0 10px 20px rgba(0,0,0,0.5);
}

/* --- terminal --- */
.insensible-terminal{
  position:absolute; inset:0; z-index:1;
  padding:7% 8%;
  display:none;
}
.insensible-screen.phase-terminal .insensible-terminal{ display:block; }
.insensible-terminal-text{
  margin:0; white-space:pre-wrap;
  font-family:'Share Tech Mono', monospace;
  color:#6fe08a; font-size:clamp(11px, 2vw, 14px);
  line-height:1.7;
  text-shadow:0 0 6px rgba(111,224,138,0.5);
}
.insensible-terminal-exit{ margin-top:16px; }
.insensible-exit-btn{
  background:transparent;
  border:1px solid rgba(111,224,138,0.5);
  color:#6fe08a;
  font-family:'Share Tech Mono', monospace;
  font-size:11px; letter-spacing:0.06em;
  padding:6px 12px; cursor:pointer;
}
.insensible-exit-btn:hover{ background:rgba(111,224,138,0.15); }

/* --- escritorio --- */
.insensible-desktop{
  position:absolute; inset:0; z-index:1;
  padding:6%;
  display:none;
}
.insensible-screen.phase-desktop .insensible-desktop{ display:block; }
.insensible-icon{
  width:64px; display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; float:left; margin:0 14px 14px 0;
}
.insensible-icon-glyph{ font-size:26px; filter:drop-shadow(0 0 3px rgba(111,224,138,0.5)); }
.insensible-icon-label{
  font-family:'Share Tech Mono', monospace; font-size:9.5px;
  color:#d7ffe0; text-align:center; line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.insensible-taskbar-btn{
  position:absolute; left:6%; bottom:5%;
  background:rgba(111,224,138,0.12);
  border:1px solid rgba(111,224,138,0.5);
  color:#6fe08a;
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:0.04em;
  padding:5px 10px; cursor:pointer;
}
.insensible-taskbar-btn:hover{ background:rgba(111,224,138,0.22); }

/* --- ventanas (diario.txt / noche.jpg) --- */
.insensible-window{
  display:none;
  position:absolute; top:8%; left:12%; right:12%; bottom:16%;
  background:#eee7d6;
  border:1px solid #8a8368;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  z-index:3;
  flex-direction:column;
}
.insensible-window.open{ display:flex; }
.insensible-window-title{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, #6a7a8a, #4a5866);
  color:#fff;
  font-family:'Share Tech Mono', monospace; font-size:11px;
  padding:5px 8px;
}
.insensible-window-close{
  background:#c0392b; color:#fff; border:1px solid rgba(255,255,255,0.4);
  width:18px; height:18px; font-size:10px; line-height:1; cursor:pointer;
}
.insensible-window-body{
  flex:1; overflow:auto; padding:10px 12px;
  font-family:'Share Tech Mono', monospace; font-size:12px;
  color:#2a2a20; white-space:pre-wrap; line-height:1.6;
}
.insensible-window-image .insensible-window-body{
  display:flex; align-items:center; justify-content:center;
  padding:0; position:relative;
}
.insensible-window-image img{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
}
.insensible-img-placeholder{
  display:none;
  color:#6a6350; font-size:11px; text-align:center; padding:20px;
}
.insensible-window-image .insensible-window-body.no-img .insensible-img-placeholder,
.insensible-window-image .insensible-window-body:has(img[style*="display: none"]) .insensible-img-placeholder{
  display:block;
}

@media (max-width:600px){
  .insensible-terminal-text{ font-size:10.5px; }
  .insensible-icon{ width:54px; }
}

@media (prefers-reduced-motion: reduce){
  .grid-bg, .grid-glow, .particle, .scanner-figure, .scanner-beam{ animation:none; }
  .console .line, .log-entry{ animation:none; opacity:1; }
  .blink{ animation:none; }
}