/* @cpi 2026-10-27 01:55: página de la plataforma ZX Spectrum. Estilo propio de ordenador doméstico de los 80, apartado del morado del
   salón: carcasa negra, teclas de goma grises, el arco iris de cuatro franjas del Spectrum y las rayas de carga en el borde de la tele.
   Colores de la paleta del Spectrum (normal 0xD7 y brillo 0xFF). Se carga solo en templates/seo/zx.html, encima de seo.css. */
.zx-page{--zx-red:#d70000;--zx-yellow:#ffd700;--zx-green:#00d700;--zx-cyan:#00d7d7;--zx-ink:#0c0c10;--zx-case:#16161c;--zx-key:#3b3b46;
 --bg:#0c0c10;--panel:#16161c;--text:#ececf1;--muted:#a9a9b8;--gold:#ffd700;--line:#ffffff1c;--card:#1c1c24;--card2:#121218;--border:#34343f;
 background:radial-gradient(ellipse at 85% -10%,#1f2a3a 0,transparent 55%),radial-gradient(ellipse at 0 40%,#2a1414 0,transparent 45%),#0c0c10 fixed}
.zx-page a{color:var(--zx-cyan)}
.zx-page .top{background:#0c0c10f2;border-bottom:0;box-shadow:0 2px 0 var(--zx-red),0 4px 0 var(--zx-yellow),0 6px 0 var(--zx-green),0 8px 0 var(--zx-cyan)}
.zx-page .top nav a.nav-zx[aria-current]{color:var(--zx-yellow)}
.zx-page .btn-primary{background:var(--zx-yellow);color:#111;border-color:var(--zx-yellow)}
.zx-page main{max-width:1180px}
.zx-page main h2{font:800 clamp(1.6rem,3.4vw,2.3rem)/1.1 "Segoe UI",Inter,system-ui,sans-serif;letter-spacing:-.03em;margin:0 0 18px}
.zx-page main section{margin:clamp(48px,8vw,96px) 0}
.zx-page .foot{border-top:1px solid #ffffff14}

/* Arco iris diagonal de la esquina del Spectrum 48K. */
.zx-rainbow{display:inline-block;width:46px;height:16px;margin-right:12px;vertical-align:-2px;background:linear-gradient(90deg,var(--zx-red) 0 25%,var(--zx-yellow) 25% 50%,var(--zx-green) 50% 75%,var(--zx-cyan) 75%);transform:skewX(-35deg)}

.zx-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:12px!important}
.zx-eyebrow{margin:0 0 14px;font:700 .8rem/1 Consolas,"Courier New",monospace;letter-spacing:.18em;color:var(--muted)}
.zx-hero h1{font:900 clamp(2rem,5vw,3.5rem)/1.02 "Segoe UI",Inter,system-ui,sans-serif;letter-spacing:-.045em;margin:0 0 18px;color:#fff}
.zx-lead{font-size:1.1rem;line-height:1.65;color:#d6d6e0;margin:0 0 24px}
.zx-actions{display:flex;flex-wrap:wrap;gap:12px}
.zx-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 22px;border-radius:6px;font:800 1rem/1 "Segoe UI",system-ui,sans-serif;text-decoration:none;letter-spacing:.01em}
.zx-page a.zx-btn-play{background:var(--zx-yellow);color:#111;box-shadow:0 4px 0 #8a7400}
.zx-page a.zx-btn-play:hover{background:#fff27a}
.zx-page a.zx-btn-ghost{color:#fff;border:2px solid var(--zx-key);background:#1c1c24;box-shadow:0 4px 0 #050507}
.zx-page a.zx-btn-ghost:hover{border-color:var(--zx-cyan)}
.zx-free{margin:14px 0 0;color:var(--muted);font-size:.9rem}

/* Tele de tubo con las rayas de carga moviéndose por el borde (rojo y cian del tono guía). */
.zx-tv{margin:0;padding:18px 18px 14px;border-radius:26px;background:linear-gradient(160deg,#2d2d36,#14141a);box-shadow:0 30px 60px #000a,inset 0 1px 0 #ffffff1f}
.zx-tv-screen{padding:clamp(10px,2vw,18px);border-radius:16px;background:repeating-linear-gradient(0deg,var(--zx-red) 0 9px,var(--zx-cyan) 9px 18px);background-size:100% 36px;animation:zx-pilot 1.1s linear infinite}
.zx-tv-screen img{display:block;width:100%;border-radius:6px;box-shadow:0 0 0 2px #000}
.zx-tv figcaption{display:flex;justify-content:flex-start;margin-top:12px}
.zx-rom{display:block;height:24px;width:auto;image-rendering:pixelated;border-radius:2px}
@keyframes zx-pilot{to{background-position:0 36px}}
@media (prefers-reduced-motion:reduce){.zx-tv-screen{animation:none}}

/* Recuerdos: tarjetas como teclas de goma, numeradas como líneas de BASIC. */
.zx-memories ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.zx-memories li{position:relative;padding:22px 20px 18px;border-radius:12px;background:linear-gradient(180deg,#25252e,#1a1a21);box-shadow:inset 0 1px 0 #ffffff17,0 6px 0 #070709}
.zx-line{display:inline-block;margin-bottom:10px;padding:2px 8px;border-radius:3px;background:#d7d7d7;color:#000;font:700 .85rem/1.3 Consolas,"Courier New",monospace}
.zx-memories h3{margin:0 0 8px;font:800 1.15rem/1.25 "Segoe UI",system-ui,sans-serif;color:#fff}
.zx-memories p{margin:0;color:#c9c9d4;line-height:1.6}
.zx-memories li:nth-child(4n+1) .zx-line{background:var(--zx-red);color:#fff}
.zx-memories li:nth-child(4n+2) .zx-line{background:var(--zx-yellow)}
.zx-memories li:nth-child(4n+3) .zx-line{background:var(--zx-green)}
.zx-memories li:nth-child(4n+4) .zx-line{background:var(--zx-cyan)}

/* Cada país: pestañas como teclas; la historia en una «pantalla» de papel blanco y tinta negra, como el Spectrum al encenderse. */
.zx-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.zx-tabs button{min-height:42px;padding:0 16px;border:0;border-radius:6px;background:var(--zx-key);color:#e8e8ee;font:700 .95rem/1 "Segoe UI",system-ui,sans-serif;box-shadow:0 4px 0 #111116;cursor:pointer}
.zx-tabs button[aria-selected=true]{background:#d7d7d7;color:#000;box-shadow:0 4px 0 #6b6b6b}
.zx-tabs button:focus-visible{outline:2px solid var(--zx-cyan);outline-offset:3px}
.zx-story{padding:clamp(20px,3vw,32px);border:clamp(10px,1.6vw,16px) solid #d7d7d7;border-radius:4px;background:#f2f2f2;color:#111;max-width:860px}
.zx-story+.zx-story{margin-top:16px}
.zx-country{margin:0 0 6px;font:700 .8rem/1 Consolas,"Courier New",monospace;letter-spacing:.16em;text-transform:uppercase;color:#0000d7}
.zx-story h3{margin:0 0 12px;font:800 1.45rem/1.2 "Segoe UI",system-ui,sans-serif}
.zx-story p{line-height:1.7;margin:0 0 10px}

/* Estantería: las cintas de cara, con la caja de plástico. */
.zx-sub{color:var(--muted);margin:-6px 0 22px}
.zx-shelf{list-style:none;margin:0;padding:22px 18px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 18px;border-radius:12px;background:linear-gradient(180deg,#3a2414,#26170c);box-shadow:inset 0 -14px 0 #1a0f07,inset 0 2px 0 #ffffff12}
.zx-shelf a{display:flex;flex-direction:column;gap:4px;padding-bottom:22px;color:#fff;text-decoration:none}
.zx-case{display:block;aspect-ratio:320/500;border-radius:4px;overflow:hidden;background:#000;box-shadow:0 10px 18px #000b,inset 0 0 0 1px #ffffff2e;transition:transform .2s}
.zx-case img{display:block;width:100%;height:100%;object-fit:cover}
.zx-shelf a:hover .zx-case,.zx-shelf a:focus-visible .zx-case{transform:translateY(-6px) rotate(-1.5deg)}
.zx-shelf b{margin-top:8px;font:800 1rem/1.2 "Segoe UI",system-ui,sans-serif}
.zx-shelf small{color:#d7c2ac;font-size:.82rem}

.zx-room{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.zx-room figure{margin:0}
.zx-room img{display:block;width:100%;border-radius:14px;box-shadow:0 20px 50px #000a}
.zx-room p{color:#d6d6e0;line-height:1.7}
.zx-room ul{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:10px}
.zx-room li{padding-left:22px;position:relative;color:#c9c9d4;line-height:1.55}
.zx-room li:before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--zx-cyan)}
.zx-room li:nth-child(2):before{background:var(--zx-yellow)}.zx-room li:nth-child(3):before{background:var(--zx-green)}.zx-room li:nth-child(4):before{background:var(--zx-red)}
.zx-room b{color:#fff}

.zx-faq details{border-bottom:1px solid #ffffff1a}
.zx-faq summary{padding:14px 0;font-weight:700;cursor:pointer}
.zx-faq details p{margin:0 0 16px;color:#c9c9d4;line-height:1.65}

.zx-arcade{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:0 0 56px;padding:22px 24px;border-radius:14px;background:linear-gradient(110deg,#2a1b35,#171020);border:1px solid #694778}
.zx-arcade p{margin:0;color:#e3d4ea}

@media (max-width:900px){
 .zx-hero,.zx-room{grid-template-columns:1fr}
 .zx-tv{order:-1;padding:12px 12px 10px;border-radius:18px}
 .zx-shelf{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 14px 0}
 .zx-btn{width:100%;justify-content:center}
 .zx-arcade .zx-btn{width:auto}
}