Diferencias

Muestra las diferencias entre dos versiones de la página.

--- start [2026/04/26 11:53] – jesus
+++ start [2026/05/21 06:10] (actual) – jesus
@@ Línea 3: / Línea 3: @@
 ====== Bienvenido ======
-**Bienvenido a la Wiki del [[es:companias:amstrad|Amstrad]] [[PCW]] / [[.companias:Schneider]] [[pcw|Joyce]].**
+**Bienvenido a la Wiki del [[companias:amstrad|Amstrad]] [[PCW]] / [[.companias:Schneider]] [[pcw|Joyce]].**
 **Si quieres contribuir con la Wiki, échale primero un ojo a esta [[contribuir|pequeña guía]].**
@@ Línea 23: / Línea 23: @@
 <html>
 <style>
-  /* Base del monitor PCW */
+  /* --- MOTOR VISUAL RETRO CRT --- */
-  .pcw-monitor {
+  .pcw-monitor-ultra {
-    background-color: #000;
+    background-color: #000b00;
-    border: 2px solid #00ff00;
+    border: 12px solid #2a2a2a;
-    padding: 20px;
+    border-radius: 15px;
-    margin: 20px 0;
+    padding: 25px;
+    margin: 25px 0;
     font-family: 'Courier New', Courier, monospace;
+    position: relative;
+    overflow: hidden;
+    box-shadow: inset 0 0 60px rgba(0,255,0,0.15), 0 10px 30px rgba(0,0,0,0.7);
   }
-  /* Título de sección */
+  /* Capa de scanlines y parpadeo */
-  .pcw-title {
+  .pcw-monitor-ultra::after {
-    color: #000;
+    content: " ";
-    background-color: #00ff00;
+    position: absolute;
-    display: inline-block;
+    top: 0; left: 0; bottom: 0; right: 0;
-    padding: 5px 15px;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
-    margin-bottom: 20px;
+                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
-    font-size: 1.5em;
+    background-size: 100% 3px, 2px 100%;
+    z-index: 2;
+    pointer-events: none;
+    animation: flickering 0.15s infinite;
+  }
+  @keyframes flickering { 0% { opacity: 0.98; } 100% { opacity: 1; } }
+  /* Estilo de Texto Retro (Glow Verde) */
+  .retro-text {
+    color: #00ff00 !important;
+    font-family: 'Courier New', Courier, monospace;
+    text-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 2px rgba(0, 255, 0, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    text-decoration: none !important;
+  }
+  .pcw-title-ultra {
+    font-size: 1.6em;
     font-weight: bold;
+    margin-bottom: 25px;
+    display: block;
   }
-  /* Rejilla responsiva */
+  .pcw-title-ultra::after {
-  .pcw-grid {
+    content: "_";
+    animation: cursor-blink 1s infinite;
+  }
+  @keyframes cursor-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
+  /* Rejilla y Comandos (Botones) */
+  .pcw-grid-ultra {
     display: grid;
     gap: 10px;
     grid-template-columns: repeat(3, 1fr);
+    position: relative;
+    z-index: 3;
   }
-  /* Estética de los botones */
+  .pcw-btn-ultra {
-  .pcw-btn {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
-    background-color: #000;
+    background: transparent;
-    color: #00ff00 !important;
+    padding: 8px 5px;
-    padding: 15px 5px;
+    border: 1px solid transparent;
-    text-decoration: none !important;
-    border: 1px solid #00ff00;
     font-weight: bold;
-    text-align: center;
+    font-size: 1em;
-    transition: all 0.2s ease;
+    transition: 0.2s;
   }
-  /* Efecto al pasar el ratón */
+  /* Efecto de Selección: Puntero y Desplazamiento */
-  .pcw-btn:hover {
+  .pcw-btn-ultra:hover {
-    background-color: #00ff00;
+    background-color: rgba(0, 255, 0, 0.15);
-    color: #000 !important;
+    border: 1px solid rgba(0, 255, 0, 0.5);
-    box-shadow: 0 0 10px #00ff00;
+    transform: translateX(8px);
   }
-  /* Adaptación para dispositivos */
+  .pcw-btn-ultra::before {
-  @media (max-width: 850px) {
+    content: "> ";
-    .pcw-grid { grid-template-columns: repeat(2, 1fr); }
+    opacity: 0.4;
+    margin-right: 5px;
   }
-  @media (max-width: 480px) {
-    .pcw-grid { grid-template-columns: 1fr; }
+  .pcw-btn-ultra:hover::before {
-    .pcw-title { display: block; text-align: center; }
+    opacity: 1;
   }
+  /* Variantes de columnas */
+  .col-2 { grid-template-columns: repeat(2, 1fr); }
+  .col-1 { grid-template-columns: 1fr; }
+  @media (max-width: 850px) { .pcw-grid-ultra { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 480px) { .pcw-grid-ultra { grid-template-columns: 1fr !important; } }
 </style>
-<div class="pcw-monitor">
+<!-- 1. HARDWARE -->
-  <div class="pcw-title"> > HARDWARE </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> HARDWARE </div>
-  <div class="pcw-grid">
+  <div class="pcw-grid-ultra">
-    <a href="doku.php?id=hardware:ampliaciones" class="pcw-btn">AMPLIACIONES</a>
+    <a href="doku.php?id=hardware:ampliaciones" class="pcw-btn-ultra retro-text">AMPLIACIONES</a>
-    <a href="doku.php?id=hardware:gate_array" class="pcw-btn">GATE ARRAY</a>
+    <a href="doku.php?id=hardware:gate_array" class="pcw-btn-ultra retro-text">GATE ARRAY</a>
-    <a href="doku.php?id=hardware:nuevos_desarrollos" class="pcw-btn">NUEVOS DESARROLLOS</a>
+    <a href="doku.php?id=hardware:nuevos_desarrollos" class="pcw-btn-ultra retro-text">NUEVOS DESARROLLOS</a>
-    <a href="doku.php?id=hardware:patillajes" class="pcw-btn">PATILLAJES</a>
+    <a href="doku.php?id=hardware:patillajes" class="pcw-btn-ultra retro-text">PATILLAJES</a>
-    <a href="doku.php?id=hardware:perifericos" class="pcw-btn">PERIFÉRICOS</a>
+    <a href="doku.php?id=hardware:perifericos" class="pcw-btn-ultra retro-text">PERIFÉRICOS</a>
-    <a href="doku.php?id=hardware:placas_base" class="pcw-btn">PLACAS BASE</a>
+    <a href="doku.php?id=hardware:placas_base" class="pcw-btn-ultra retro-text">PLACAS BASE</a>
-    <a href="doku.php?id=hardware:placas_monitor" class="pcw-btn">PLACAS DE MONITOR</a>
+    <a href="doku.php?id=hardware:placas_monitor" class="pcw-btn-ultra retro-text">PLACAS MONITOR</a>
-    <a href="doku.php?id=hardware:placas_teclado" class="pcw-btn">PLACAS DE TECLADO</a>
+    <a href="doku.php?id=hardware:placas_teclado" class="pcw-btn-ultra retro-text">PLACAS TECLADO</a>
-    <a href="doku.php?id=hardware:placas_impresora" class="pcw-btn">PLACAS DE IMPRESORA</a>
+    <a href="doku.php?id=hardware:placas_impresora" class="pcw-btn-ultra retro-text">PLACAS IMPRESORA</a>
-    <a href="doku.php?id=hardware:ruedas_impresion" class="pcw-btn">RUEDAS DE IMPRESIÓN</a>
+    <a href="doku.php?id=hardware:ruedas_impresion" class="pcw-btn-ultra retro-text">RUEDAS IMPRESIÓN</a>
-    <a href="doku.php?id=hardware:unidades_disco" class="pcw-btn">UNIDADES DE DISCO</a>
+    <a href="doku.php?id=hardware:unidades_disco" class="pcw-btn-ultra retro-text">UNIDADES DISCO</a>
   </div>
 </div>
-</html>
+<!-- 2. SOFTWARE -->
-----
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> SOFTWARE </div>
-<html>
+  <div class="pcw-grid-ultra">
-<style>
+    <a href="doku.php?id=software:aplicaciones" class="pcw-btn-ultra retro-text">APLICACIONES</a>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=software:companias" class="pcw-btn-ultra retro-text">COMPAÑÍAS</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=software:editoriales" class="pcw-btn-ultra retro-text">EDITORIALES</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=software:juegos" class="pcw-btn-ultra retro-text">JUEGOS</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    <a href="doku.php?id=software:nuevos_desarrollos" class="pcw-btn-ultra retro-text">NUEVOS DESARROLLOS</a>
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    <a href="doku.php?id=software:sistema" class="pcw-btn-ultra retro-text">SISTEMA</a>
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > SOFTWARE </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=software:aplicaciones" class="pcw-btn">APLICACIONES</a>
-    <a href="doku.php?id=software:companias" class="pcw-btn">COMPAÑÍAS</a>
-    <a href="doku.php?id=software:juegos" class="pcw-btn">JUEGOS</a>
-    <a href="doku.php?id=software:nuevos_desarrollos" class="pcw-btn">NUEVOS DESARROLLOS</a>
-    <a href="doku.php?id=software:sistema" class="pcw-btn">SISTEMA</a>
   </div>
 </div>
-</html>
-----
+<!-- 3. CATÁLOGOS -->
+<div class="pcw-monitor-ultra">
-<html>
+  <div class="pcw-title-ultra retro-text"> A> CATÁLOGOS </div>
-<style>
+  <div class="pcw-grid-ultra col-1">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=catalogos:inicio" class="pcw-btn-ultra retro-text">ACCESO AL CATÁLOGO COMPLETO</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > CATÁLOGOS </div>
-  <div class="pcw-grid" style="grid-template-columns: 1fr;">
-    <a href="doku.php?id=catalogos:inicio" class="pcw-btn">ACCESO</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 4. EMULADORES -->
-  <div class="pcw-title"> > EMULADORES </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> EMULADORES </div>
-  <div class="pcw-grid">
+  <div class="pcw-grid-ultra">
-    <a href="doku.php?id=emuladores:introduccion" class="pcw-btn">INTRODUCCIÓN</a>
+    <a href="doku.php?id=emuladores:introduccion" class="pcw-btn-ultra retro-text">INTRODUCCIÓN</a>
-    <a href="doku.php?id=emuladores:espanol" class="pcw-btn">ESPAÑOL</a>
+    <a href="doku.php?id=emuladores:espanol" class="pcw-btn-ultra retro-text">ESPAÑOL</a>
-    <a href="doku.php?id=emuladores:ingles" class="pcw-btn">INGLÉS</a>
+    <a href="doku.php?id=emuladores:ingles" class="pcw-btn-ultra retro-text">INGLÉS</a>
-    <a href="doku.php?id=emuladores:internacional" class="pcw-btn">INTERNACIONAL</a>
+    <a href="doku.php?id=emuladores:internacional" class="pcw-btn-ultra retro-text">INTERNACIONAL</a>
   </div>
 </div>
-</html>
+<!-- 5. LIBROS -->
-----
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> LIBROS </div>
-<html>
+  <div class="pcw-grid-ultra col-2">
-<style>
+    <a href="doku.php?id=libros:preservados" class="pcw-btn-ultra retro-text">PRESERVADOS</a>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=libros:no_preservados" class="pcw-btn-ultra retro-text">NO PRESERVADOS</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > LIBROS </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
-    <a href="doku.php?id=libros:acceso" class="pcw-btn">ACCESO</a>
-    <a href="doku.php?id=libros:listado" class="pcw-btn">LISTADO</a>
   </div>
 </div>
-</html>
+<!-- 6. LOCOMOTIVE SOFTWARE -->
-----
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> LOCOMOTIVE SOFTWARE </div>
-<html>
+  <div class="pcw-grid-ultra col-2">
-<style>
+    <a href="doku.php?id=locomotive:aplicaciones" class="pcw-btn-ultra retro-text">APLICACIONES</a>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=locomotive:catalogos" class="pcw-btn-ultra retro-text">CATÁLOGOS</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=locomotive:soporte_impresora" class="pcw-btn-ultra retro-text">SOPORTE IMPRESORA</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=revistas:Script" class="pcw-btn-ultra retro-text">REVISTAS</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > LOCOMOTIVE SOFTWARE </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
-    <a href="doku.php?id=locomotive:aplicaciones" class="pcw-btn">APLICACIONES</a>
-    <a href="doku.php?id=locomotive:catalogos" class="pcw-btn">CATÁLOGOS</a>
-    <a href="doku.php?id=locomotive:soporte_impresora" class="pcw-btn">SOPORTE IMPRESORA</a>
-    <a href="doku.php?id=locomotive:revistas" class="pcw-btn">REVISTAS</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 7. MANUALES -->
-  <div class="pcw-title"> > MANUALES </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> MANUALES </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
+  <div class="pcw-grid-ultra col-2">
-    <a href="doku.php?id=manuales:amstrad_pcw" class="pcw-btn">MANUALES DE AMSTRAD PCW</a>
+    <a href="doku.php?id=manuales:amstrad_pcw" class="pcw-btn-ultra retro-text">MANUALES AMSTRAD PCW</a>
-    <a href="doku.php?id=manuales:servicio" class="pcw-btn">MANUALES DE SERVICIO</a>
+    <a href="doku.php?id=manuales:servicio" class="pcw-btn-ultra retro-text">MANUALES DE SERVICIO</a>
   </div>
 </div>
-</html>
+<!-- 8. PROGRAMACIÓN -->
-----
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> PROGRAMACIÓN </div>
-<html>
+  <div class="pcw-grid-ultra">
-<style>
+    <a href="doku.php?id=programacion:informacion_tecnica" class="pcw-btn-ultra retro-text">INFORMACIÓN TÉCNICA</a>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=programacion:introduccion" class="pcw-btn-ultra retro-text">INTRODUCCIÓN</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=programacion:lenguajes" class="pcw-btn-ultra retro-text">LENGUAJES</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > PROGRAMACIÓN </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=programacion:informacion_tecnica" class="pcw-btn">INFORMACIÓN TÉCNICA</a>
-    <a href="doku.php?id=programacion:introduccion" class="pcw-btn">INTRODUCCIÓN</a>
-    <a href="doku.php?id=programacion:lenguajes" class="pcw-btn">LENGUAJES</a>
   </div>
 </div>
-</html>
+<!-- 9. REVISTAS -->
-----
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> REVISTAS </div>
-<html>
+  <div class="pcw-grid-ultra">
-<style>
+    <a href="doku.php?id=revistas:disco" class="pcw-btn-ultra retro-text">DISCO</a>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=revistas:fanzines" class="pcw-btn-ultra retro-text">FANZINES</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=revistas:revistas" class="pcw-btn-ultra retro-text">REVISTAS</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > REVISTAS </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=revistas:disco" class="pcw-btn">DISCO</a>
-    <a href="doku.php?id=revistas:fanzines" class="pcw-btn">FANZINES</a>
-    <a href="doku.php?id=revistas:revistas" class="pcw-btn">REVISTAS</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 10. TUTORIALES -->
-  <div class="pcw-title"> > TUTORIALES </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> TUTORIALES </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
+  <div class="pcw-grid-ultra col-2">
-    <a href="doku.php?id=tutoriales:comunicaciones" class="pcw-btn">COMUNICACIONES</a>
+    <a href="doku.php?id=tutoriales:comunicaciones" class="pcw-btn-ultra retro-text">COMUNICACIONES</a>
-    <a href="doku.php?id=tutoriales:cursos" class="pcw-btn">CURSOS</a>
+    <a href="doku.php?id=tutoriales:cursos" class="pcw-btn-ultra retro-text">CURSOS</a>
-    <a href="doku.php?id=tutoriales:ensamblador" class="pcw-btn">ENSAMBLADOR</a>
+    <a href="doku.php?id=tutoriales:ensamblador" class="pcw-btn-ultra retro-text">ENSAMBLADOR</a>
-    <a href="doku.php?id=tutoriales:guias" class="pcw-btn">GUÍAS</a>
+    <a href="doku.php?id=tutoriales:guias" class="pcw-btn-ultra retro-text">GUÍAS</a>
   </div>
 </div>
-</html>
+<!-- 11. OTROS -->
-----
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> OTROS </div>
-<html>
+  <div class="pcw-grid-ultra">
-<style>
+    <a href="doku.php?id=otros:agradecimientos" class="pcw-btn-ultra retro-text">AGRADECIMIENTOS</a>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=otros:eventos" class="pcw-btn-ultra retro-text">EVENTOS</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=otros:entrevistas" class="pcw-btn-ultra retro-text">ENTREVISTAS</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=otros:etiquetas" class="pcw-btn-ultra retro-text">ETIQUETAS 3,5"</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    <a href="doku.php?id=otros:inventario" class="pcw-btn-ultra retro-text">INVENTARIO</a>
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    <a href="doku.php?id=otros:contacto" class="pcw-btn-ultra retro-text">CONTACTO</a>
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > OTROS </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=otros:agradecimientos" class="pcw-btn">AGRADECIMIENTOS</a>
-    <a href="doku.php?id=otros:eventos" class="pcw-btn">EVENTOS</a>
-    <a href="doku.php?id=otros:entrevistas" class="pcw-btn">ENTREVISTAS</a>
-    <a href="doku.php?id=otros:etiquetas" class="pcw-btn">ETIQUETAS 3,5"</a>
-    <a href="doku.php?id=otros:inventario" class="pcw-btn">INVENTARIO</a>
-    <a href="doku.php?id=otros:contacto" class="pcw-btn">CONTACTO</a>
   </div>
 </div>
@@ Línea 365: / Línea 247: @@
 ----