/* =========================================================================
   RITA_SYSTEM — la sección se apodera de la pantalla y cambia de mundo.
   Paleta tomada de sus propios salvapantallas: fósforo cian y ámbar sobre
   casi negro. Nada de verde Matrix.
   Este fichero SOLO se carga en la página de Rita.
   ========================================================================= */

.rita{
  --neg:#080B0C;
  --neg-2:#0E1416;
  --caja:#121A1C;
  --cian:#4FD6D6;
  --ambar:#E8A33C;
  --rosa:#E8557F;
  --texto:#CDE3E3;
  --tenue:#6C8687;
  --reja:rgba(79,214,214,.07);

  position:relative;
  margin-inline:calc(50% - 50vw);      /* a sangre, se sale del envoltorio */
  width:100vw;
  background:var(--neg);
  color:var(--texto);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  overflow:clip;
}

/* Rejilla de fondo, como la de sus pantallas. */
.rita::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--reja) 1px, transparent 1px),
    linear-gradient(90deg, var(--reja) 1px, transparent 1px);
  background-size:34px 34px;
}
/* Líneas de barrido finísimas. Sutiles: no queremos un efecto de disfraz. */
.rita::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity:.5;
}
.rita > *{ position:relative; z-index:1; }

/* --- arranque --- */
.rita-boot{
  min-height:min(72vh,620px);
  display:grid; align-items:center;
  padding:clamp(1.5rem,5vw,4rem);
}
/* Sin esto, el display:grid de arriba anula el atributo hidden y el
   arranque sigue ocupando media pantalla después de terminar. */
.rita-boot[hidden]{ display:none; }
.rita-boot-texto{
  margin:0; font-family:var(--mono); font-size:clamp(12px,.4rem + .7vw,15px);
  line-height:1.9; color:var(--cian); white-space:pre-wrap;
  text-shadow:0 0 12px rgba(79,214,214,.35);
}
.rita-boot-texto .ok{ color:var(--ambar); }
.rita-boot-texto .cursor{
  display:inline-block; width:.62em; height:1.05em; vertical-align:-.16em;
  background:var(--cian); animation:rita-parpadeo 1.05s steps(1) infinite;
}
@keyframes rita-parpadeo{ 50%{ opacity:0; } }

/* --- sistema --- */
.rita-sistema{ padding:clamp(1.5rem,5vw,4rem) clamp(1.2rem,5vw,4rem) clamp(3rem,7vw,6rem); }
.rita-sistema[hidden]{ display:none; }

.rita-cabecera{
  border-bottom:1px solid rgba(79,214,214,.25);
  padding-bottom:1rem; margin-bottom:2.4rem;
}
.rita-titulo{ display:flex; align-items:center; gap:.7rem; }
.rita-titulo h1{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(1.5rem,1rem + 2.6vw,2.8rem);
  letter-spacing:.06em; margin:0; color:var(--cian);
  text-shadow:0 0 18px rgba(79,214,214,.3);
}
.rita-punto{
  width:.62rem; height:.62rem; border-radius:50%;
  background:var(--ambar); box-shadow:0 0 12px var(--ambar);
  animation:rita-pulso 2.4s ease-in-out infinite;
}
@keyframes rita-pulso{ 0%,100%{opacity:1} 50%{opacity:.35} }
.rita-estado{
  margin:.5rem 0 0; font-size:.78rem; letter-spacing:.12em;
  color:var(--tenue); text-transform:uppercase;
}
.rita-estado b{ color:var(--ambar); }

.rita-intro{ max-width:64ch; margin-bottom:3.4rem; }
.rita-lead{ font-size:clamp(1rem,.9rem + .5vw,1.22rem); color:#E6F5F5; margin:0 0 1rem; }
.rita-lead b{ color:var(--ambar); }
.rita-intro p{ margin:0 0 1rem; }
.rita-nota{ color:var(--cian); font-size:.85rem; letter-spacing:.06em; }

.rita-bloque{ margin-bottom:3.6rem; }
.rita-h2{
  font-family:var(--mono); font-weight:700; font-size:1rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--texto);
  display:flex; align-items:baseline; gap:.8rem;
  border-bottom:1px dashed rgba(79,214,214,.2);
  padding-bottom:.6rem; margin:0 0 1rem;
}
.rita-h2 span{ color:var(--ambar); }
.rita-desc{ color:var(--tenue); max-width:60ch; margin:0 0 1.6rem; }

/* --- ventanas con las pantallas --- */
.rita-ventanas{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.ventana{
  margin:0; background:var(--caja);
  border:1px solid rgba(79,214,214,.22);
  transition:border-color .3s, transform .3s;
}
.ventana:hover{ border-color:var(--cian); transform:translateY(-3px); }
.ventana-barra{
  display:flex; align-items:center; gap:.55rem;
  padding:.45rem .6rem;
  border-bottom:1px solid rgba(79,214,214,.18);
  font-size:.68rem; letter-spacing:.13em; color:var(--cian);
}
.ventana-luces{ display:flex; gap:.28rem; }
.ventana-luces i{ width:.42rem; height:.42rem; border-radius:50%; background:rgba(79,214,214,.35); }
.ventana-luces i:first-child{ background:var(--rosa); }
.ventana-luces i:nth-child(2){ background:var(--ambar); }
.ventana img{ width:100%; height:auto; display:block; }
.ventana-pie{
  margin:0; padding:.6rem .7rem .8rem;
  font-size:.74rem; color:var(--tenue); line-height:1.5;
}

/* --- procesos --- */
.rita-procesos{ list-style:none; padding:0; margin:0; display:grid; gap:.1rem; }
.rita-procesos li{
  display:grid; grid-template-columns:8.5rem 1fr; gap:1rem;
  padding:.55rem .2rem; border-bottom:1px solid rgba(79,214,214,.09);
  font-size:.86rem;
}
.rita-procesos b{ color:var(--ambar); font-weight:400; letter-spacing:.1em; }
.rita-procesos span{ color:var(--texto); }
@media (max-width:560px){
  .rita-procesos li{ grid-template-columns:1fr; gap:.1rem; }
}

/* --- pie --- */
.rita-pie{
  border-top:1px solid rgba(79,214,214,.22);
  padding-top:1.6rem; color:var(--tenue);
}
.rita-pie p{ margin:0 0 .5rem; }
.rita-enlace{
  display:inline-block; margin:.4rem 0 1.4rem;
  font-size:1.05rem; letter-spacing:.06em;
  color:var(--ambar); text-decoration:none;
  border-bottom:1px solid rgba(232,163,60,.4);
  padding-bottom:.15rem;
}
.rita-enlace:hover{ color:var(--cian); border-color:var(--cian); }
.rita-salida a{ color:var(--tenue); text-decoration:none; font-size:.8rem; letter-spacing:.1em; }
.rita-salida a:hover{ color:var(--cian); }
.rita-editable{ max-width:64ch; margin:1rem 0; }

/* Quien no quiera movimiento entra directamente, sin arranque. */
@media (prefers-reduced-motion: reduce){
  .rita-boot{ display:none; }
  .rita-sistema{ display:block !important; }
  .rita-punto, .rita-boot-texto .cursor{ animation:none; }
  .ventana, .pieza img{ transition:none; }
}

/* =========================================================================
   Cabecera: el monitor de Rita.
   Todo el marco está dibujado con CSS —gradientes, bordes y sombras—: no hay
   ni una imagen de decoración. Solo la pantalla es un archivo.
   ========================================================================= */

.rita-hero{
  display:flex; flex-direction:column; align-items:center;
  gap:1.6rem; margin:0 0 4rem;
}

.rita-marca{
  width:min(66%,340px); height:auto;
  filter:drop-shadow(0 0 24px rgba(79,214,214,.28));
}

/* --- El monitor, como objeto 3D real -------------------------------------
   Seis caras con volumen. El navegador lo rota en el compositor, igual que
   haría una GPU con un modelo, pero sin descargar ni una librería.
   --grosor es la profundidad de la caja; el resto se deriva de ahí.
   ------------------------------------------------------------------------ */

.monitor-escena{
  perspective:1400px;
  perspective-origin:50% 42%;
  width:min(100%,420px);
  padding-block:1rem;
}

.monitor{
  --grosor:56px;
  --rx:0deg; --ry:0deg;
  position:relative;
  width:100%;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .18s ease-out;
  will-change:transform;
}

.cara{ position:absolute; inset:0; }
.cara--frente{ position:relative; transform:translateZ(0); }

/* Laterales: tiras estrechas del color del plástico, giradas 90°. */
.cara--izq, .cara--der{
  width:var(--grosor); top:0; bottom:0;
  background:linear-gradient(90deg,#0A0E10,#1C2226 45%,#0C1114);
}
.cara--izq{ left:0;  transform-origin:left center;  transform:rotateY(-90deg); }
.cara--der{ left:auto; right:0; transform-origin:right center; transform:rotateY(90deg); }

.cara--arriba, .cara--abajo{
  height:var(--grosor); left:0; right:0;
  background:linear-gradient(180deg,#232A2E,#10161A);
}
.cara--arriba{ top:0; transform-origin:center top; transform:rotateX(90deg); }
.cara--abajo{ top:auto; bottom:0; transform-origin:center bottom; transform:rotateX(-90deg); }

/* La trasera existe de verdad: si giras lo suficiente, la ves. */
.cara--detras{
  transform:translateZ(calc(var(--grosor) * -1)) rotateY(180deg);
  background:linear-gradient(160deg,#161C20,#0A0E11);
  border-radius:16px 16px 6px 6px;
  display:grid; place-items:center;
}
.rejilla-ventilacion{
  width:56%; height:34%;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.55) 0 3px, transparent 3px 8px);
  border-radius:4px;
  opacity:.8;
}

.monitor-cuerpo{
  width:100%;
  padding:14px 14px 0;
  border-radius:16px 16px 6px 6px;
  background:linear-gradient(168deg,#2A3033 0%,#1A2023 42%,#0F1417 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 6px rgba(0,0,0,.6),
    0 26px 46px -18px rgba(0,0,0,.85),
    0 0 0 1px rgba(79,214,214,.13);
}

.monitor-pantalla{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  box-shadow:
    inset 0 0 0 2px #05080A,
    inset 0 0 34px rgba(0,0,0,.95),
    0 0 30px rgba(79,214,214,.14);
}
.monitor-pantalla img{ width:100%; height:auto; display:block; }

.monitor-brillo{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(122deg,
    rgba(255,255,255,.055) 0%,
    rgba(255,255,255,.015) 26%,
    transparent 48%);
}

.monitor-morro{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem .3rem .85rem;
}
.monitor-led{
  width:.42rem; height:.42rem; border-radius:50%;
  background:var(--cian); box-shadow:0 0 9px var(--cian);
  animation:rita-pulso 2.4s ease-in-out infinite;
}
.monitor-rotulo{ font-size:.6rem; letter-spacing:.2em; color:#5B7375; }

/* Cuello y peana, también con profundidad: se quedan detrás del plano frontal. */
.monitor-cuello{
  position:relative; z-index:-1;
  margin:0 auto; width:74px; height:34px;
  background:linear-gradient(180deg,#1E2427,#141A1D);
  clip-path:polygon(22% 0, 78% 0, 90% 100%, 10% 100%);
  transform:translateZ(calc(var(--grosor) / -2));
}
.monitor-peana{
  position:relative; z-index:-1;
  margin:0 auto; width:190px; height:12px;
  border-radius:3px 3px 7px 7px;
  background:linear-gradient(180deg,#232A2D,#0F1416);
  box-shadow:0 16px 30px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateZ(calc(var(--grosor) / -2)) rotateX(56deg);
}

.rita-hero-pie{
  max-width:56ch; text-align:center;
  color:var(--tenue); font-size:.86rem; line-height:1.7; margin:.4rem 0 0;
}
.rita-hero-pie b{ color:var(--ambar); }

@media (max-width:560px){
  .monitor-escena{ width:min(100%,300px); perspective:none; }
  .monitor{ transform:none !important; }   /* sin ratón, sin giro */
  .monitor-peana{ width:150px; }
}
@media (prefers-reduced-motion: reduce){
  .monitor{ transform:none !important; transition:none; }
}
@media (prefers-reduced-motion: reduce){
  .monitor-led{ animation:none; }
}