/* Portada de avirtual.es (28 de octubre de 2026).
   Va en su propia carpeta, portada-avirtual, para no chocar con nada de lo que
   ya vive en la carpeta principal (Astilleros, F101). Las letras van dentro
   para no depender de Google Fonts: la página carga sola y no avisa a nadie. */
@font-face{font-family:"Archivo";src:url(fuentes/archivo-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo";src:url(fuentes/archivo-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url(fuentes/archivo-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fuentes/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --noche:#0A1A33;      /* fondo */
  --marino:#143966;     /* azul de la familia GIP */
  --niebla:#DCE5F2;     /* texto principal */
  --bruma:#8EA3C4;      /* texto secundario */
  --naranja:#E86C3C;    /* naranja de GIP */
  --senal:#4BDB9B;      /* solo para las luces de "en marcha" */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--noche);color:var(--niebla);font-family:"Archivo",system-ui,sans-serif;overflow:hidden}
.escena{position:relative;min-height:100%;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 8vw;
  background:
    radial-gradient(900px 520px at 72% 58%,rgba(232,108,60,.16),transparent 65%),
    radial-gradient(1400px 900px at 70% 30%,#173a6b 0%,transparent 60%),
    var(--noche)}
/* el suelo: una rejilla en perspectiva que se pierde, como la sala de servidores */
.suelo{position:absolute;left:-10%;right:-10%;bottom:-2%;height:46%;
  background-image:linear-gradient(rgba(142,163,196,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(142,163,196,.26) 1px,transparent 1px);
  background-size:70px 70px;transform:perspective(600px) rotateX(62deg);transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%)}
.texto{position:relative;z-index:2}
.marca{font-weight:800;font-size:clamp(56px,9vw,176px);letter-spacing:-.055em;line-height:.9;color:var(--niebla)}

.frase{margin-top:28px;font-size:clamp(17px,1.45vw,26px);font-weight:600;color:var(--bruma);max-width:30ch;line-height:1.35}
.estado{margin-top:36px;display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--niebla);
  padding:10px 18px 10px 14px;border-radius:999px;background:rgba(220,229,242,.06);border:1px solid rgba(220,229,242,.14)}
.estado i{width:10px;height:10px;border-radius:50%;background:var(--senal);box-shadow:0 0 0 4px rgba(75,219,155,.15),0 0 14px var(--senal);animation:lat 2.4s ease-in-out infinite}
@keyframes lat{50%{opacity:.35}}

/* el armario, en 3D de verdad para que tenga volumen */
.sitio{position:relative;z-index:1;display:flex;justify-content:center;perspective:1400px}
.cubo{--w:300px;--h:470px;--d:170px;position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(-34deg)}
.cara{position:absolute;border:1px solid rgba(160,185,220,.35)}
.delante{width:var(--w);height:var(--h);transform:translateZ(calc(var(--d)/2));
  background:linear-gradient(160deg,rgba(40,78,130,.92),rgba(16,38,72,.96));padding:22px 20px;display:flex;flex-direction:column;gap:12px;overflow:hidden;border-radius:6px}
.lado{width:var(--d);height:var(--h);left:calc((var(--w) - var(--d))/2);transform:rotateY(90deg) translateZ(calc(var(--w)/2));
  background:linear-gradient(180deg,#0f2748,#0b1d38);border-radius:6px}
.techo{width:var(--w);height:var(--d);top:calc((var(--h) - var(--d))/2);transform:rotateX(90deg) translateZ(calc(var(--h)/2));
  background:linear-gradient(90deg,#2a5592,#1d4174);border-radius:6px}
.u{flex:1;border-radius:6px;background:rgba(6,18,38,.72);border:1px solid rgba(160,185,220,.18);display:flex;align-items:center;gap:9px;padding:0 14px}
.u b{width:8px;height:8px;border-radius:50%;background:var(--senal);box-shadow:0 0 10px var(--senal);animation:lat 1.8s infinite}
.u b.n{background:var(--naranja);box-shadow:0 0 10px var(--naranja)}
.u s{flex:1;height:6px;margin-left:12px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(142,163,196,.35) 0 4px,transparent 4px 9px)}
.u:nth-child(2) b{animation-duration:2.6s}.u:nth-child(3) b{animation-duration:1.3s}.u:nth-child(4) b{animation-duration:3.1s}
.u b:nth-of-type(2){animation-delay:.5s}.u b:nth-of-type(3){animation-delay:1.1s}
/* la luz que barre el frontal: el único movimiento grande de la página */
.barrido{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(232,108,60,.0) 40%,rgba(255,170,130,.28) 50%,transparent 60%);
  background-size:100% 260%;animation:barre 5.5s ease-in-out infinite;pointer-events:none}
@keyframes barre{0%{background-position:0 120%}100%{background-position:0 -120%}}
.sombra{position:absolute;bottom:-70px;width:520px;height:90px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(4px)}
@media (max-width:820px){
  body{overflow-x:hidden;overflow-y:auto}
  .escena{grid-template-columns:1fr;padding:64px 16px 90px;gap:70px;text-align:center;overflow:hidden}
  .sitio{flex-direction:column;align-items:center}
  .frase{margin-left:auto;margin-right:auto}
  .cubo{--w:200px;--h:310px;--d:110px}
  .sombra{width:340px;bottom:-50px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* La consola de delante del armario */
/* la consola flota delante del armario y escribe sus líneas una vez al cargar */
.consola{position:absolute;z-index:3;left:calc(50% - 360px);bottom:8%;width:380px;border-radius:14px;
  background:rgba(8,20,40,.78);border:1px solid rgba(160,185,220,.25);box-shadow:0 30px 70px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:"Plex Mono",ui-monospace,monospace;font-size:16px;overflow:hidden}
.barra{display:flex;gap:7px;padding:12px 14px;border-bottom:1px solid rgba(160,185,220,.15)}
.barra i{width:10px;height:10px;border-radius:50%;background:rgba(220,229,242,.25)}
.lineas{padding:16px 18px 18px;line-height:1.95;color:var(--niebla)}
.l{white-space:nowrap;overflow:hidden;width:0;animation:escribe .9s steps(26) forwards}
.l:nth-child(1){animation-delay:.4s}.l:nth-child(2){animation-delay:1.4s}.l:nth-child(3){animation-delay:2.4s}
.l em{font-style:normal;color:var(--bruma)}
.ok{color:var(--senal)}.pte{color:var(--naranja)}
.cur{display:inline-block;width:9px;height:18px;background:var(--niebla);vertical-align:-3px;opacity:0;animation:parpadea 1s 3.4s infinite}
@keyframes escribe{to{width:100%}}
@keyframes parpadea{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (max-width:820px){.consola{position:relative;left:auto;bottom:auto;margin:-30px auto 0;width:min(340px,100%);text-align:left;font-size:14px}}
@media (prefers-reduced-motion:reduce){.l{width:100%}.cur{opacity:1}}
/* El nombre, con el dominio entero y el «.es» en naranja (elegido el 28: más pequeño que en el boceto) */
.marca{font-size:clamp(44px,6.2vw,124px)}
.dom{color:var(--naranja)}