/**
 * Mission Control — la página pública de la sala.
 *
 * Es la única página del sitio cuyo visual principal no está dibujado en CSS:
 * la portada muestra **la sala de verdad**, la que monta el paquete
 * `mission-demo` y la misma que una empresa opera en su consola. Las dos
 * escenas de abajo no la ilustran otra vez: explican lo que hay que saber
 * mirar dentro de ella —los estados del trabajo y el contexto de un agente—
 * con el vocabulario de `escenas.css`.
 *
 * Esta hoja tiene dos mitades y conviene no mezclarlas:
 *
 *   1. la página (envoltorio de la sala + las dos escenas), escrita acá;
 *   2. «la sala por dentro», al final: las clases que emite el paquete
 *      compilado. No las produce este archivo, pero las viste este archivo.
 *      Tocar esa mitad es tocar el aspecto de la sala.
 */

/* --- Los tokens de la sala -----------------------------------------------
   La sala es la MISMA que la de la consola —`mission/Mundo`, la planta clara—
   y por eso su envoltorio también es claro. Hasta la compilación del 15 de
   agosto el sitio montaba `Escena3D`, la sala oscura anterior, y estos tokens
   la acompañaban; ahora acompañan a la planta y salen del sistema del sitio.
   No hay una segunda paleta que mantener. */

:root{
  --mission-violet:var(--violet);
  --mission-violet-soft:var(--violet-soft);
  --mission-ink:var(--fondo);
  --mission-surface:var(--panel);
  --mission-text:var(--tinta);
  --mission-muted:var(--muted);
  --mission-line:var(--line);
  --mission-success:#047857;
  --mission-warning:#7a5c10;
}

/* --- 1 · La sala, encajada en la portada ---------------------------------
   Ocupa el lugar que en las demás páginas ocupa el `<figure class="esc">`, así
   que ya vive dentro de `.hoja` y no necesita ancho ni márgenes propios: solo
   el aire que la separa del titular. El marco es el doble bisel del sistema,
   el mismo de `.marco`; se escribe acá y no se reutiliza aquella clase porque
   el radio exterior lleva ocho píxeles más para envolver una superficie que
   ya es grande. */

.sala{ margin-top:clamp(30px,5vh,62px); }

.sala-marco{
  padding:8px;
  border:1px solid var(--marco-borde);
  border-radius:calc(var(--radio-shell) + 8px);
  background:var(--marco);
  box-shadow:0 1px 2px rgba(30,27,75,.04),0 34px 90px rgba(47,32,88,.13);
}

.sala-marco>div{
  overflow:hidden;
  border-radius:var(--radio-shell);
  /* El ancla del botón de la portada es este div, no la sala de adentro: la
     isla flota arriba y el destino no puede quedar debajo de ella. */
  scroll-margin-top:104px;
  /* El canto de luz de adentro, como en toda superficie del sistema. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}

.sala figcaption{
  margin-top:14px;
  color:var(--rotulo);
  font-size:12px;
  text-align:center;
}

.sala-nota{
  margin:0;
  padding:clamp(48px,9vh,96px) 24px;
  color:var(--mission-muted);
  text-align:center;
}

/* --- Dos estados que el vocabulario común todavía no tiene ----------------
   `escenas.css` trae tres: neutro, en curso y listo. Mission Control necesita
   dos más, y los dos se resuelven sin estrenar una paleta: «colaborando» toma
   el cian, que en todo el sistema es el color del intercambio de datos, y
   «requiere aprobación» es el mismo violeta pero **hueco** —un anillo en vez
   de un punto lleno—, porque lo que espera a una persona no está encendido.
   Si una segunda página los necesita, se mudan a `escenas.css`. */

.mc-estado--junto{ color:var(--muted-strong); }
.mc-estado--junto i{ background:var(--cian); box-shadow:0 0 0 4px rgba(8,145,178,.14); }

.mc-estado--humano{ color:var(--tinta-suave); }
.mc-estado--humano i{
  background:transparent;
  box-shadow:inset 0 0 0 2px var(--violet),0 0 0 4px rgba(124,58,237,.1);
}

/* --- 2 · El carril de estados --------------------------------------------
   Cinco tarjetas iguales convierten cinco estados en una leyenda que hay que
   memorizar. Acá hay una sola superficie: un carril con cinco paradas y la
   misma ficha avanzando por encima. Cada parada trae punto **y** palabra, así
   que se lee sin distinguir violeta de cian ni de verde. */

.carril{ padding:clamp(30px,3.4vw,52px) clamp(24px,3vw,46px) clamp(34px,4vw,56px); }
.carril-rotulo{ margin-bottom:clamp(26px,3vw,42px); }

/* Las cinco columnas van sin hueco a propósito: con `1fr` iguales y `gap: 0`
   los centros caen en 10 %, 30 %, 50 %, 70 % y 90 % exactos, y esos son los
   únicos números que hacen falta para el riel y para el viaje de la ficha.
   Con hueco habría que reescribirlos con `calc()` en cada `clamp`. */
.carril-pista{
  --carril-aire:92px;
  position:relative;
  padding-top:var(--carril-aire);
}

.carril-pista .esc-riel{
  left:10%;
  right:10%;
  /* El punto de estado mide 7 px y abre la parada: su eje está a 3,5 px. */
  top:calc(var(--carril-aire) + 3.5px);
}

.carril-paradas{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
}

/* Sin `z-index` propio, el riel —que está posicionado— se pintaría por encima
   de las paradas y les cruzaría el punto por la mitad. */
.carril-paradas>li{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:12px;
  padding-inline:clamp(6px,1vw,14px);
  text-align:center;
}

.carril-paradas small{ max-width:22ch; color:var(--muted); font-size:11.5px; line-height:1.5; }

/* El estado se apila para que el punto quede sobre el riel y la palabra
   debajo: es la única diferencia con el estado en línea del resto del sitio.
   `margin: 0` no es cosmético: el estado es un `<p>`, y el margen que el
   navegador le pone por defecto lo bajaría doce píxeles respecto del riel. */
.carril .esc-estado{ margin:0; flex-direction:column; gap:11px; font-size:12.5px; font-weight:620; }

/* La ficha: en reposo está en la última parada, que es el final de la
   historia. La animación la trae desde la primera. */
.carril-ficha{
  position:absolute;
  z-index:2;
  left:90%;
  top:0;
  display:flex;
  align-items:center;
  gap:12px;
  translate:-50% 0;
}

.carril-ficha .cara{ --cara:34px; }
.carril-ficha b{ white-space:nowrap; }

/* El hilo que baja de la ficha al riel: dice en qué parada está parada. */
.carril-ficha::after{
  position:absolute;
  left:50%;
  top:100%;
  width:1px;
  height:34px;
  margin-left:-.5px;
  background:linear-gradient(180deg,rgba(124,58,237,.1),var(--violet-soft));
  content:"";
}

/* Dos animaciones sobre la misma pieza: la entrada del vocabulario común y el
   avance. El retardo se repite en el atajo porque el atajo pisa el
   `animation-delay` que `escenas.css` reparte por `data-paso`. */
.visto .carril-ficha{
  animation:esc-entra .62s var(--curva) .05s both,carril-avanza 1.2s linear .05s both;
}

/* El punto del riel viaja 1,5 s de fábrica; acá se acorta a 1,2 s para que la
   ficha y el punto lleguen juntos a cada parada mientras esta se enciende. */
.visto .carril-pista .esc-riel i{ animation-duration:1.2s; animation-delay:.05s; }

@keyframes carril-avanza{
  from{ left:10%; }
  25%{ left:30%; }
  50%{ left:50%; }
  75%{ left:70%; }
  to{ left:90%; }
}

/* --- 3 · Del movimiento al contexto --------------------------------------
   La planta a la izquierda con tres agentes, el panel a la derecha. Los tres
   agentes llevan su estado puesto: la planta se lee entera sin cursor, y el
   panel agrega las cuatro líneas del que está elegido. */

.ctx{ min-height:560px; }

/* La cuadrícula del plano. Decorativa y muy tenue: sugiere una planta vista
   desde arriba sin competir con las piezas que la habitan. */
.ctx-planta{
  position:absolute;
  inset:0 44% 0 0;
  z-index:0;
  background-image:
    linear-gradient(rgba(124,58,237,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 72% 74% at 42% 52%,#000,transparent 74%);
  pointer-events:none;
}

.ctx-rotulo{
  position:absolute;
  z-index:3;
  left:clamp(22px,3vw,38px);
  top:clamp(20px,2.6vw,32px);
}

/* La pista del cursor solo existe donde hay cursor: en táctil los tres
   paneles ya están visibles y no hay nada que pasar por encima. */
.ctx-pista{ display:none; }

/* Los tres hilos llegan al mismo puerto del panel; el del agente elegido es el
   único encendido. Se cambia `stroke` y no `opacity` porque `esc-traza`
   termina con `opacity: 1` fijado por el `both` y ya no se puede transicionar. */
.ctx-hilo{ stroke:rgba(124,58,237,.12); transition:stroke var(--paso-largo) var(--curva-blanda); }
.ctx-hilo--1{ stroke:rgba(124,58,237,.42); }

.ctx-agente{
  translate:-50% -50%;
  gap:8px;
  padding:11px 15px 13px;
  border:1px solid transparent;
  border-radius:20px;
  transition:background var(--paso) var(--curva),border-color var(--paso) var(--curva),box-shadow var(--paso) var(--curva);
}

.ctx-agente .cara{ --cara:46px; }
.ctx-agente>span{ font-size:12.5px; font-weight:600; }
/* Un `<p>` y no un `<span>`: `.esc-agente span` teñiría el estado de gris y le
   ganaría en especificidad a `.esc-estado--curso`. */
.ctx-agente .esc-estado{ margin:0; font-size:11px; }

/* Cada agente se ancla por su centro y el `viewBox` de 640×560 lee ese mismo
   porcentaje: 34 % → x 218, 57 % → y 319. Mover uno acá obliga a mover su hilo
   en el marcado, y al revés. */
.ctx-agente--2{ left:34%; top:57%; }
.ctx-agente--3{ left:14%; top:79%; }

/* El elegido por defecto es el primero: en reposo —sin cursor, sin teclado,
   sin JavaScript— la escena muestra una selección hecha, no un vacío. */
.ctx-agente--1{
  left:17%;
  top:30%;
  border-color:rgba(124,58,237,.22);
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 40px rgba(76,29,149,.1);
}

.ctx-panel{
  left:76%;
  top:50%;
  /* El ancho en porcentaje y no en píxeles: el puerto de los hilos está en el
     57 % del `viewBox`, y un `min()` que recorte dejaría las tres curvas
     terminando en el aire. */
  width:38%;
  padding:clamp(20px,2.1vw,28px);
  border:1px solid var(--line-soft);
  border-radius:22px;
  background:var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 54px rgba(76,29,149,.1);
  translate:-50% -50%;
}

.ctx-quien{
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);
}

.ctx-quien .cara{ --cara:34px; }
.ctx-quien b{ font-size:15.5px; font-weight:650; letter-spacing:-.02em; }

.ctx-panel dl{ display:grid; gap:15px; margin:0; }
.ctx-panel dt{ color:var(--rotulo); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.ctx-panel dd{ margin:5px 0 0; color:var(--tinta-suave); font-size:13.5px; line-height:1.5; }

/* El cambio de panel, sin una línea de JavaScript. `:has()` en vez del
   combinador de hermanos porque el agente elegido por defecto va primero en el
   marcado y `~` no mira hacia atrás. Donde `:has()` no llegue, la escena se
   queda en su estado de reposo, que es exactamente el que hay que ver. */
@media (hover: hover) and (min-width: 1001px){
  .ctx-pista{ display:inline; }

  .ctx-agente:hover{
    border-color:rgba(124,58,237,.22);
    background:rgba(255,255,255,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 40px rgba(76,29,149,.1);
  }

  .ctx-panel{ transition:opacity var(--paso-largo) var(--curva-blanda),translate var(--paso-largo) var(--curva-blanda); }
  .ctx-panel--2,
  .ctx-panel--3{ opacity:0; translate:-50% calc(-50% + 12px); }

  .ctx:has(.ctx-agente--2:hover) .ctx-panel--1,
  .ctx:has(.ctx-agente--3:hover) .ctx-panel--1{ opacity:0; translate:-50% calc(-50% + 12px); }
  .ctx:has(.ctx-agente--2:hover) .ctx-panel--2,
  .ctx:has(.ctx-agente--3:hover) .ctx-panel--3{ opacity:1; translate:-50% -50%; }

  .ctx:has(.ctx-agente--2:hover) .ctx-agente--1,
  .ctx:has(.ctx-agente--3:hover) .ctx-agente--1{ border-color:transparent; background:none; box-shadow:none; }

  .ctx:has(.ctx-agente--2:hover) .ctx-hilo--1,
  .ctx:has(.ctx-agente--3:hover) .ctx-hilo--1{ stroke:rgba(124,58,237,.12); }
  .ctx:has(.ctx-agente--2:hover) .ctx-hilo--2,
  .ctx:has(.ctx-agente--3:hover) .ctx-hilo--3{ stroke:rgba(124,58,237,.42); }
}

/* --- Escalas de la página -------------------------------------------------
   Las dos escenas **se recomponen**, no se apilan: el carril horizontal se
   vuelve una lista vertical de estados con su descripción al lado, y la planta
   deja de ser un plano para volverse tres pares de agente y contexto, cada uno
   con el suyo debajo. Es la misma información en otra forma. */

@media (max-width: 1000px){
  /* Partida en dos filas, la sala de la portada no necesita tanto alto. */
  .sala{ margin-top:clamp(24px,4vh,44px); }

  /* En vertical no hay un eje horizontal que unir: el riel diría algo falso. */
  .carril-pista{ --carril-aire:0px; }
  .carril-pista .esc-riel{ display:none; }
  .carril-ficha{ position:static; translate:none; margin-bottom:clamp(22px,3vh,32px); }
  .carril-ficha::after{ display:none; }
  .visto .carril-ficha{ animation:esc-entra .62s var(--curva) .05s both; }

  .carril-paradas{ grid-template-columns:1fr; }
  .carril-paradas>li{
    grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);
    align-items:center;
    justify-items:start;
    gap:6px 24px;
    padding:15px 0;
    border-top:1px solid var(--line-soft);
    text-align:left;
  }
  .carril-paradas>li:first-child{ border-top:0; }
  .carril-paradas small{ max-width:none; }
  .carril .esc-estado{ flex-direction:row; gap:9px; }

  .ctx{
    display:flex;
    flex-direction:column;
    gap:clamp(12px,2vw,18px);
    min-height:0;
    padding:clamp(26px,3.4vw,40px) clamp(22px,3vw,34px) clamp(30px,4vw,44px);
  }
  .ctx-planta,
  .ctx .esc-red{ display:none; }
  .ctx-rotulo{ position:static; order:0; margin-bottom:8px; }

  .ctx-agente,
  .ctx-panel{ position:static; left:auto; top:auto; width:auto; translate:none; }
  .ctx-agente{
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    justify-items:start;
    gap:2px 15px;
    margin-top:clamp(12px,2vw,22px);
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
  }
  .ctx-agente .cara{ --cara:38px; grid-row:span 2; }
  .ctx-agente>span{ font-size:14px; font-weight:640; color:var(--tinta); }
  .ctx-panel{ opacity:1; }

  .ctx-agente--1{ order:1 }
  .ctx-panel--1{ order:2 }
  .ctx-agente--2{ order:3 }
  .ctx-panel--2{ order:4 }
  .ctx-agente--3{ order:5 }
  .ctx-panel--3{ order:6 }
}

@media (max-width: 640px){
  /* Trece caracteres de ancho para «Requiere aprobación» ya no alcanzan. */
  .carril-paradas>li{ grid-template-columns:1fr; gap:8px; }
}

/* Cinturón y tirantes, como en `escenas.css`: `site.js` ya no marca `.visto`
   con reduced-motion, pero si la clase llegara por otro camino una animación
   congelada dejaría la ficha clavada en la primera parada. Va al final para
   ganarle también al atajo de la escala angosta. */
@media (prefers-reduced-motion: reduce){
  .visto .carril-ficha{ animation:none; }
}

/* --- 4 · La misión de muestra: el pedido #1048 ----------------------------
   La consola de la portada. Es una simulación guiada: `demo-mision.js` la
   rebobina al arrancar y la hace avanzar sola; el marcado trae la historia
   TERMINADA, así que sin JavaScript —o con reduced-motion, donde el guion ni
   corre— se ve la misión cumplida, que es el cuadro que cuenta todo.

   Tres reglas sostienen la pieza:
     1. solo se anima transform, opacity y filter; los cambios de color van
        por transición corta;
     2. el estado visual sale de atributos `data-estado`, que escribe el
        guion; el CSS no sabe de tiempos;
     3. `mision--viva` la marca el guion al tomar control: los pulsos en
        bucle y el botón de pausa solo existen cuando la demo está viva. */

.mision{ margin-top:clamp(30px,5vh,62px); }

.mision-marco{
  padding:8px;
  border:1px solid var(--marco-borde);
  border-radius:calc(var(--radio-shell) + 8px);
  background:var(--marco);
  box-shadow:0 1px 2px rgba(30,27,75,.04),0 34px 90px rgba(47,32,88,.13);
}

.mision-consola{
  position:relative;
  overflow:hidden;
  padding:clamp(22px,2.6vw,36px) clamp(22px,2.8vw,40px) clamp(24px,2.8vw,38px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radio-shell);
  background:
    radial-gradient(ellipse 46% 42% at 84% 0%,rgba(124,58,237,.09),transparent 66%),
    radial-gradient(ellipse 40% 38% at 2% 100%,rgba(8,145,178,.05),transparent 68%),
    var(--panel);
  box-shadow:var(--brillo-canto),var(--shadow-1);
}

.mision figcaption{
  margin-top:14px;
  color:var(--rotulo);
  font-size:12px;
  text-align:center;
}

/* El rebobinado: el guion apaga el contenido, repone el estado inicial y lo
   vuelve a encender. Un corte con fundido, no una página recargándose. */
.mision-consola>*{ transition:opacity .3s var(--curva); }
.mision--rebobina>*{ opacity:0; }

/* --- La cabecera --- */

.mision-cabecera{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px 24px;
}

.mision-quien .hoja-nota{ margin-bottom:8px; }

.mision-nombre{
  margin:0;
  font-size:clamp(23px,2.2vw,32px);
  font-weight:660;
  letter-spacing:-.035em;
  line-height:1.08;
}

.mision-nombre span{ color:var(--violet-deep); font-variant-numeric:tabular-nums; }

.mision-datos{
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
  margin:13px 0 0;
}

.mision-datos div{ display:flex; align-items:baseline; gap:8px; }
.mision-datos dt{ color:var(--rotulo); font-size:10px; font-weight:720; letter-spacing:.12em; text-transform:uppercase; }
.mision-datos dd{ margin:0; color:var(--tinta-suave); font-size:13.5px; font-weight:560; }

.mision-borde{ display:flex; flex:none; align-items:center; gap:10px; }

/* El estado de la misión: chip con punto y palabra, violeta mientras corre y
   verde cuando se cumple. El cambio es transición, no animación: es un dato
   que cambió, no un festejo. */
.mision-estado{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  min-height:36px;
  padding:0 15px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:12.5px;
  font-weight:620;
  white-space:nowrap;
  transition:color var(--paso) var(--curva),background var(--paso) var(--curva),border-color var(--paso) var(--curva);
}

.mision-estado i{
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  transition:background var(--paso) var(--curva),box-shadow var(--paso) var(--curva);
}

.mision-estado[data-estado="curso"]{ color:var(--violet-deep); border-color:rgba(124,58,237,.3); background:rgba(124,58,237,.08); }
.mision-estado[data-estado="curso"] i{ background:var(--violet); box-shadow:0 0 0 4px rgba(124,58,237,.14); }
.mision-estado[data-estado="cumplida"]{ color:var(--mission-success); border-color:rgba(4,120,87,.28); background:rgba(4,120,87,.07); }
.mision-estado[data-estado="cumplida"] i{ background:var(--mission-success); box-shadow:0 0 0 4px rgba(4,120,87,.12); }

/* La pausa: contenido que se actualiza solo tiene que poder detenerse. Solo
   existe cuando el guion está vivo; en la escena quieta no hay qué pausar. */
.mision-pausa{
  display:none;
  width:36px;
  height:36px;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.85);
  color:var(--tinta-suave);
  cursor:pointer;
  transition:color var(--paso) var(--curva),border-color var(--paso) var(--curva),transform var(--paso) var(--curva);
}

.mision--viva .mision-pausa{ display:grid; }
.mision-pausa:hover{ color:var(--tinta); border-color:rgba(30,27,75,.24); }
.mision-pausa:active{ transform:scale(.94); }
.mision-pausa .mision-pausa-seguir{ display:none; }
.mision-pausa[aria-pressed="true"] .mision-pausa-pausar{ display:none; }
.mision-pausa[aria-pressed="true"] .mision-pausa-seguir{ display:block; }

/* --- La línea del presente --- */

.mision-ahora{
  display:flex;
  align-items:center;
  gap:11px;
  margin:clamp(16px,2.2vh,24px) 0 0;
  padding:12px 16px;
  border:1px solid var(--line-soft);
  border-radius:14px;
  background:var(--panel-suave);
  color:var(--tinta-suave);
  font-size:14px;
  font-weight:560;
}

.mision-ahora i{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--cian);
  box-shadow:0 0 0 3px rgba(8,145,178,.14);
}

.mision--viva .mision-ahora i{ animation:mision-late-cian 2.4s ease-in-out infinite; }

/* --- El cuerpo: pasos · equipo · actividad --- */

.mision-cuerpo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1.28fr);
  gap:clamp(18px,2vw,30px);
  margin-top:clamp(20px,2.6vh,30px);
}

.mision-panel+.mision-panel{
  padding-left:clamp(18px,2vw,30px);
  border-left:1px solid var(--line-soft);
}

.mision-panel>.hoja-nota{ display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
.mision-panel>.hoja-nota small{
  color:var(--rotulo);
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:none;
  font-variant-numeric:tabular-nums;
}

/* Los pasos: la misión desarmada en su camino. El punto trae el estado —
   lleno con marca cuando está hecho, anillo violeta cuando es el actual,
   anillo apagado cuando falta— y el hilo de atrás los une. */

.mision-pasos{
  position:relative;
  display:grid;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}

.mision-pasos::before{
  position:absolute;
  left:10px;
  top:20px;
  bottom:20px;
  width:1px;
  background:linear-gradient(180deg,rgba(124,58,237,.22),rgba(30,27,75,.08));
  content:"";
}

.mision-pasos li{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:21px minmax(0,1fr);
  gap:13px;
  align-items:start;
  padding:7px 0;
}

.mision-pasos i{
  position:relative;
  width:21px;
  height:21px;
  margin-top:0;
  border:1.5px solid var(--line);
  border-radius:50%;
  background:var(--panel);
  transition:background var(--paso) var(--curva),border-color var(--paso) var(--curva),box-shadow var(--paso) var(--curva);
}

/* La marca de hecho: dibujada con bordes, escala desde casi-nada al llegar. */
.mision-pasos i::after{
  position:absolute;
  left:6.5px;
  top:4px;
  width:4.5px;
  height:8.5px;
  border:solid #fff;
  border-width:0 1.5px 1.5px 0;
  content:"";
  opacity:0;
  transform:rotate(45deg) scale(.4);
  transition:transform var(--paso) var(--curva),opacity var(--paso) var(--curva);
}

/* El punto interior del paso actual. */
.mision-pasos i::before{
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:var(--violet);
  content:"";
  opacity:0;
  transform:scale(.5);
  transition:transform var(--paso) var(--curva),opacity var(--paso) var(--curva);
}

.mision-pasos li[data-estado="hecho"] i{ border-color:var(--violet); background:var(--violet); }
.mision-pasos li[data-estado="hecho"] i::after{ opacity:1; transform:rotate(45deg) scale(1); }
.mision-pasos li[data-estado="actual"] i{ border-color:var(--violet); box-shadow:0 0 0 4px rgba(124,58,237,.12); }
.mision-pasos li[data-estado="actual"] i::before{ opacity:1; transform:scale(1); }

.mision-pasos b{
  display:block;
  color:var(--tinta);
  font-size:13.5px;
  font-weight:620;
  letter-spacing:-.015em;
  transition:color var(--paso) var(--curva);
}

.mision-pasos small{ display:block; margin-top:1px; color:var(--rotulo); font-size:11px; }
.mision-pasos li[data-estado="pendiente"] b{ color:var(--muted); font-weight:560; }
.mision-pasos li[data-estado="actual"] b{ color:var(--violet-deep); }

.mision--viva .mision-pasos li[data-estado="actual"] i{ animation:mision-late-violeta 2.2s ease-in-out infinite; }

/* El equipo: cuatro especialistas en su orden de traspaso, unidos por el
   hilo. El activo se enciende como una pieza elegida; el punto que viaja
   entre caras lo dispara el guion en cada traspaso (`.mision-traspaso`). */

.mision-equipo-lista{
  position:relative;
  display:grid;
  gap:5px;
  margin:0;
  padding:0;
  list-style:none;
}

.mision-equipo-lista::before{
  position:absolute;
  left:32px;
  top:30px;
  bottom:30px;
  width:1px;
  background:linear-gradient(180deg,rgba(124,58,237,.16),rgba(30,27,75,.07));
  content:"";
}

.mision-equipo-lista li{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:9px 13px;
  border:1px solid transparent;
  border-radius:16px;
  transition:background var(--paso) var(--curva),border-color var(--paso) var(--curva),box-shadow var(--paso) var(--curva);
}

.mision-equipo-lista li[data-estado="activo"]{
  border-color:rgba(124,58,237,.22);
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px rgba(76,29,149,.1);
}

.mision-equipo-lista .cara{ --cara:38px; }
.mision-equipo-lista b{ display:block; font-size:13.5px; font-weight:630; letter-spacing:-.015em; }
.mision-equipo-lista li>div>small{ display:block; margin-top:1px; color:var(--muted); font-size:11px; line-height:1.4; }

.mision-equipo-lista .esc-estado{ margin:0; font-size:11px; }
.mision-equipo-lista .esc-estado i{ transition:background var(--paso) var(--curva),box-shadow var(--paso) var(--curva); }
.mision-equipo-lista li[data-estado="activo"] .esc-estado{ color:var(--violet-deep); }
.mision-equipo-lista li[data-estado="activo"] .esc-estado i{ background:var(--violet); box-shadow:0 0 0 4px rgba(124,58,237,.14); }
.mision-equipo-lista li[data-estado="listo"] .esc-estado{ color:var(--mission-success); }
.mision-equipo-lista li[data-estado="listo"] .esc-estado i{ background:var(--mission-success); box-shadow:0 0 0 4px rgba(4,120,87,.12); }

.mision--viva .mision-equipo-lista li[data-estado="activo"] .esc-estado i{ animation:mision-late-violeta 2.2s ease-in-out infinite; }

/* El punto del traspaso: lo crea el guion, viaja por el hilo con WAAPI y se
   borra al llegar. Acá solo se define su cuerpo. */
.mision-traspaso{
  position:absolute;
  z-index:2;
  left:32px;
  top:0;
  width:8px;
  height:8px;
  margin-left:-3.5px;
  border-radius:50%;
  background:var(--violet);
  box-shadow:0 0 9px rgba(124,58,237,.6);
  opacity:0;
  pointer-events:none;
}

/* La actividad: el registro escribiéndose. La vista recorta la lista y la
   funde arriba con una máscara; en reposo el final queda a la vista (flex al
   pie) y, viva, el guion la corre con transform. */

.mision-actividad-vista{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:306px;
  overflow:hidden;
  mask-image:linear-gradient(180deg,transparent 0,#000 36px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 36px);
}

.mision--viva .mision-actividad-vista{ display:block; }

.mision-actividad-vista ol{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  transition:transform .55s var(--curva-blanda);
}

.mision-actividad-vista li{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  padding:10px 2px 11px;
  border-top:1px solid var(--line-soft);
  transition:opacity .38s var(--curva),translate .38s var(--curva),filter .38s var(--curva);
}

.mision-actividad-vista li:first-child{ border-top:0; }

/* La entrada nueva llega desde abajo, con un velo que se disipa. El guion
   quita `data-nueva` un cuadro después de insertarla. */
.mision-actividad-vista li[data-nueva]{ opacity:0; translate:0 12px; filter:blur(2px); }

.mision-actividad-vista time{
  margin-top:1px;
  color:var(--rotulo);
  font-size:11px;
  font-weight:620;
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
}

.mision-actividad-vista li b{ display:block; color:var(--tinta); font-size:12.5px; font-weight:640; letter-spacing:-.01em; }
.mision-actividad-vista li span{ display:block; margin-top:2px; color:var(--muted); font-size:12.5px; line-height:1.5; }
.mision-actividad-vista li.es-sylar b{ color:var(--violet-deep); }

/* --- Los pulsos de la demo viva ---
   Solo laten el punto cian del presente y el violeta del elemento activo:
   dos latidos en toda la consola, para que latir signifique algo. */

@keyframes mision-late-cian{
  0%,100%{ box-shadow:0 0 0 3px rgba(8,145,178,.16); }
  50%{ box-shadow:0 0 0 6px rgba(8,145,178,.04); }
}

@keyframes mision-late-violeta{
  0%,100%{ box-shadow:0 0 0 4px rgba(124,58,237,.16); }
  50%{ box-shadow:0 0 0 8px rgba(124,58,237,.04); }
}

/* --- 5 · Las tres claves --------------------------------------------------
   Tarjetas blancas del sistema con una micro-escena arriba: el agente con su
   tarea marcada, el camino que llega al objetivo, el registro que se escribe.
   Entran en cascada con `.visto` y sus micro-piezas rematan después; el
   estado por defecto, como siempre, es el final. */

.claves{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}

.clave{
  padding:clamp(22px,2.4vw,30px);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--radio-shell);
  background:var(--panel);
  box-shadow:var(--brillo-canto),0 14px 40px rgba(76,29,149,.07);
}

.clave h3{
  margin:20px 0 8px;
  font-size:clamp(17px,1.4vw,20px);
  font-weight:650;
  letter-spacing:-.025em;
}

.clave p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.6; }

.clave-visual{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:64px;
  margin:0;
}

.clave-visual .cara{ --cara:44px; }

/* La marca de tarea hecha, dentro del chip. */
.clave-check{
  position:relative;
  display:inline-grid;
  width:16px;
  height:16px;
  flex:none;
  place-items:center;
  border-radius:50%;
  background:var(--mission-success);
}

.clave-check::after{
  width:4px;
  height:7px;
  margin-top:-1px;
  border:solid #fff;
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
  content:"";
}

/* El camino al objetivo: tres paradas unidas, todas cumplidas. */
.clave-camino{ display:inline-flex; align-items:center; }

.clave-camino i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--violet);
}

.clave-camino i+i{ position:relative; margin-left:24px; }

.clave-camino i+i::before{
  position:absolute;
  right:100%;
  top:50%;
  width:24px;
  height:1px;
  margin-top:-.5px;
  background:rgba(124,58,237,.35);
  content:"";
}

/* El registro que se escribe: tres renglones, el primero en cian —el color
   del dato— y los otros apagándose hacia atrás. */
.clave-feed{
  display:grid;
  gap:7px;
  width:100%;
  max-width:190px;
}

.clave-feed i{
  height:10px;
  border-radius:6px;
  background:linear-gradient(90deg,rgba(124,58,237,.16),rgba(124,58,237,.06));
  transform-origin:left center;
}

.clave-feed i:first-child{ background:linear-gradient(90deg,rgba(8,145,178,.22),rgba(8,145,178,.07)); }
.clave-feed i:nth-child(2){ width:78%; }
.clave-feed i:nth-child(3){ width:56%; }

/* La cascada de entrada y los remates. `site.js` marca `.claves` con
   `.visto`; sin la clase, todo está en su lugar. */
.visto .clave{ animation:esc-entra .62s var(--curva) both; }
.visto .clave:nth-child(2){ animation-delay:.14s; }
.visto .clave:nth-child(3){ animation-delay:.28s; }

.visto .clave-check{ animation:clave-pop .4s var(--curva) .75s both; }

.visto .clave-camino i{ animation:esc-entra .5s var(--curva) both; }
.visto .clave-camino i:nth-child(1){ animation-delay:.5s; }
.visto .clave-camino i:nth-child(2){ animation-delay:.66s; }
.visto .clave-camino i:nth-child(3){ animation-delay:.82s; }

.visto .clave-feed i{ animation:clave-linea .5s var(--curva) both; }
.visto .clave-feed i:nth-child(1){ animation-delay:.6s; }
.visto .clave-feed i:nth-child(2){ animation-delay:.76s; }
.visto .clave-feed i:nth-child(3){ animation-delay:.92s; }

@keyframes clave-pop{
  from{ opacity:0; transform:scale(.4); }
}

@keyframes clave-linea{
  from{ opacity:0; transform:scaleX(.3); }
}

/* --- Escalas de la misión y las claves ------------------------------------ */

@media (max-width:1120px){
  .mision-cuerpo{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  .mision-actividad{ grid-column:1 / -1; padding-left:0; border-left:0; padding-top:18px; border-top:1px solid var(--line-soft); }
  .mision-actividad-vista{ height:236px; }
}

@media (max-width:900px){
  .claves{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  .mision-cabecera{ flex-direction:column; align-items:stretch; }
  .mision-borde{ justify-content:space-between; }
  .mision-cuerpo{ grid-template-columns:1fr; }
  .mision-panel+.mision-panel{ padding-left:0; border-left:0; padding-top:18px; border-top:1px solid var(--line-soft); }
  .mision-actividad-vista{ height:216px; }
}

/* Con reduced-motion el guion ni corre (la consola queda en su cuadro final),
   pero si `mision--viva` llegara por otro camino, acá se apagan los latidos. */
@media (prefers-reduced-motion:reduce){
  .mision--viva .mision-ahora i,
  .mision--viva .mision-pasos li[data-estado="actual"] i,
  .mision--viva .mision-equipo-lista li[data-estado="activo"] .esc-estado i{ animation:none; }
  .visto .clave,
  .visto .clave-check,
  .visto .clave-camino i,
  .visto .clave-feed i{ animation:none; }
}

/* ==========================================================================
   La sala por dentro.

   De acá para abajo no hay nada de esta página: son las clases que **emite el
   paquete compilado** (`mission-demo`) al montarse en `#salaMision`. Viven en
   esta hoja porque la sala se ve dentro del sitio y comparte sus tokens, pero
   el marcado que las lleva lo escribe React, no `demo.html`. Cambiar una regla
   de acá cambia el aspecto de la sala; agregar una que nadie emite no hace
   nada. Se conservan tal cual estaban.
   ========================================================================== */

.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.control-room{
  position:relative;
  /* Comparte la portada con el titular, así que no se lleva la pantalla
     entera: antes eran 78 svh, cuando la sala abría la página sola. */
  height:min(72svh,800px);
  min-height:620px;
  overflow:clip;
  /* La isla flota arriba: el ancla no puede quedar debajo de ella. */
  scroll-margin-top:96px;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 26%,rgba(167,139,250,.2) 0%,rgba(244,241,252,.6) 40%,#f4f1fc 76%),
    #f4f1fc;
}
.control-room:fullscreen{height:100vh;max-height:none}
.control-room:after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(244,241,252,.72) 0,transparent 9%,transparent 91%,rgba(244,241,252,.72) 100%);
}

.room-sky{
  position:absolute;
  z-index:6;
  top:24px;
  left:32px;
  right:32px;
  display:flex;
  justify-content:space-between;
  color:#898493;
  font:600 10px/1 ui-monospace,monospace;
  letter-spacing:.18em;
}
.room-sky strong{color:#c0bac7}

.room-floor{
  position:absolute;
  z-index:0;
  left:-12%;
  right:-12%;
  bottom:-17%;
  height:62%;
  opacity:.72;
  background:
    linear-gradient(90deg,#ffffff05 1px,transparent 1px),
    linear-gradient(#ffffff05 1px,transparent 1px);
  background-size:86px 66px;
  transform:perspective(520px) rotateX(61deg);
  transform-origin:center top;
  mask-image:linear-gradient(#fff,transparent 86%);
}

.mission-prompt{
  position:absolute;
  z-index:9;
  left:50%;
  top:52px;
  width:min(650px,72vw);
  padding:16px 24px 17px;
  border:1px solid #ffffff16;
  border-radius:18px;
  background:linear-gradient(180deg,#171622e8,#101019d9);
  box-shadow:inset 0 1px #ffffff0e,0 24px 70px #0009;
  transform:translateX(-50%);
  text-align:center;
  transition:border-color .35s ease,box-shadow .35s ease;
}
.mission-prompt small,.mission-prompt span{
  display:block;
  color:#96909d;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.mission-prompt strong{
  display:block;
  margin:7px 0 9px;
  font:600 clamp(15px,1.6vw,19px)/1.25 Manrope,sans-serif;
  letter-spacing:-.02em;
}
.mission-prompt.active{
  border-color:#9a85ff75;
  box-shadow:inset 0 1px #ffffff15,0 0 42px #7255ef24,0 24px 70px #0009;
}

.transfer{
  position:absolute;
  z-index:5;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.transfer.show{opacity:1}
.transfer line{
  fill:none;
  stroke:#ab9aff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:5 12;
  filter:drop-shadow(0 0 6px #8f77ff);
  animation:handoff 1.1s linear infinite;
}
.transfer.reduced line{stroke-dasharray:none;animation:none}
.transfer text{
  fill:#c9beff;
  font:600 8px Manrope,sans-serif;
  letter-spacing:.15em;
  text-anchor:middle;
  paint-order:stroke;
  stroke:var(--panel);
  stroke-width:6px;
  stroke-linejoin:round;
}

.story-caption{
  position:absolute;
  z-index:11;
  left:4%;
  bottom:126px;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:580px;
  text-shadow:0 2px 18px #000;
}
.story-caption>span{font:500 40px/1 Manrope,sans-serif;color:var(--mission-violet)}
.story-caption small,.story-caption strong{display:block}
.story-caption small{
  margin-bottom:5px;
  color:#b4a6ea;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.story-caption strong{
  font:600 clamp(14px,1.5vw,19px)/1.35 Manrope,sans-serif;
  letter-spacing:-.015em;
}

.view-toggle{position:absolute;z-index:12;right:3%;bottom:128px}

.camera-controls{
  position:absolute;
  z-index:12;
  right:3%;
  bottom:184px;
  display:flex;
  padding:4px;
  border:1px solid #ffffff12;
  border-radius:14px;
  background:#100f18d9;
  box-shadow:inset 0 1px #ffffff0b,0 18px 40px #0008;
  backdrop-filter:blur(16px);
}
.camera-controls button{
  min-width:44px;
  min-height:44px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#d8d2df;
  cursor:pointer;
}
.camera-controls button:hover,.camera-controls button:focus-visible{background:#ffffff10;color:#fff}
.camera-controls button:last-child{width:auto;padding:0 12px;font-size:11px}

.mission-dock{
  position:absolute;
  z-index:20;
  left:50%;
  bottom:18px;
  width:min(1120px,calc(100vw - 40px));
  display:grid;
  grid-template-columns:200px minmax(280px,1fr) auto auto;
  gap:8px;
  align-items:end;
  padding:10px;
  border:1px solid #ffffff17;
  border-radius:20px;
  background:linear-gradient(180deg,#191722ed,#100f17ed);
  box-shadow:inset 0 1px #ffffff14,0 22px 70px #000c;
  transform:translateX(-50%);
  backdrop-filter:blur(24px) saturate(115%);
}
.mission-dock label{min-width:0}
.mission-dock label span{
  display:block;
  margin:0 0 5px 6px;
  color:#948e9b;
  font-size:8px;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.mission-dock select{
  width:100%;
  height:46px;
  padding:0 12px;
  overflow:hidden;
  border:0;
  border-radius:11px;
  background:#ffffff0a;
  color:#f2eef5;
  font:500 13px Manrope,sans-serif;
  text-overflow:ellipsis;
}
.mission-dock option{background:#171522}
.launch-button{
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 18px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,#7656ed,#8c73ff);
  color:#fff;
  font:700 13px Manrope,sans-serif;
  box-shadow:0 10px 26px #7255ef3d;
  cursor:pointer;
}
.launch-button:hover{filter:brightness(1.08)}
.launch-button i{font-style:normal;font-size:19px}
.compact-controls{display:flex}
.compact-controls button{
  width:44px;
  height:46px;
  border:0;
  border-left:1px solid #ffffff0c;
  background:#ffffff07;
  color:#d5cfda;
  cursor:pointer;
}
.compact-controls button:first-child{border-radius:11px 0 0 11px}
.compact-controls button:last-child{border-radius:0 11px 11px 0}
.compact-controls button:hover:not(:disabled){background:#ffffff11;color:#fff}
.compact-controls button:disabled{opacity:.3;cursor:not-allowed}

.scene-fallback{
  position:absolute;
  z-index:10;
  inset:145px 24px 198px;
  display:grid;
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:10px;
  margin:0;
  padding:3px;
  overflow-x:auto;
  list-style:none;
  scrollbar-color:#6f5bc2 transparent;
}
.scene-fallback[hidden]{display:none}
.scene-fallback li{min-width:0}
.scene-fallback button{
  --station-color:#8c73ff;
  position:relative;
  width:100%;
  height:100%;
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:17px;
  overflow:hidden;
  border:1px solid #ffffff12;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--station-color) 24%,transparent),transparent 35%),
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.96));
  color:#fff;
  text-align:left;
  box-shadow:inset 0 1px #ffffff0c;
  cursor:pointer;
}
.scene-fallback button:after{
  content:"";
  position:absolute;
  left:17px;
  right:17px;
  bottom:0;
  height:2px;
  background:var(--station-color);
  opacity:.45;
  box-shadow:0 0 16px var(--station-color);
}
.scene-fallback button.selected{border-color:color-mix(in srgb,var(--station-color) 60%,white);box-shadow:inset 0 1px #ffffff1a,0 0 30px color-mix(in srgb,var(--station-color) 20%,transparent)}
.fallback-zone{
  position:absolute;
  top:14px;
  left:16px;
  color:#a9a3af;
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.scene-fallback b{font:600 16px/1.2 Manrope,sans-serif;letter-spacing:-.02em}
.scene-fallback span{min-height:38px;color:#aaa4b1;font-size:11px;line-height:1.45}
.scene-fallback em{color:var(--station-color);font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase}

.journey{max-width:1100px;margin:55px auto;display:flex;justify-content:center}
.journey span{position:relative;flex:1;padding-top:24px;color:#aaa4b1;font-size:11px}
.journey span:before{content:"";position:absolute;top:0;left:50%;width:8px;height:8px;border-radius:50%;background:#846cff;box-shadow:0 0 18px #846cff}
.journey span:not(:last-child):after{content:"";position:absolute;top:3px;left:51%;width:98%;height:1px;background:linear-gradient(90deg,#846cff,#ffffff15)}

.agent-dialog,.approval-dialog,.result-dialog{
  max-height:calc(100dvh - 40px);
  overflow:auto;
  border:1px solid #ffffff1c;
  border-radius:24px;
  background:linear-gradient(180deg,#1a1824f7,#100f17f7);
  color:#f7f5fa;
  box-shadow:inset 0 1px #ffffff14,0 40px 120px #000d;
  backdrop-filter:blur(30px) saturate(120%);
}
.agent-dialog::backdrop,.approval-dialog::backdrop,.result-dialog::backdrop{background:rgba(30,27,75,.42);backdrop-filter:blur(7px)}
.agent-dialog{width:min(960px,calc(100vw - 40px));padding:34px}
.dialog-close{
  position:absolute;
  right:16px;
  top:16px;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:#ffffff0b;
  color:#fff;
  font-size:24px;
  cursor:pointer;
}
.dialog-close:hover{background:#ffffff16}
.agent-dialog h2{margin:8px 56px 4px 0;font:600 40px/1.05 Manrope,sans-serif;letter-spacing:-.04em}
.agent-dialog .status-word{color:#b7a9ff;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.dialog-body{display:grid;grid-template-columns:1.2fr 1fr;gap:35px;margin-top:30px}
.conversation{display:flex;flex-direction:column;gap:9px}
.message{padding:13px 15px;border-left:2px solid #836bfa;border-radius:0 12px 12px 0;background:rgba(124,58,237,.05);font-size:12px}
.message b,.message span,.message small{display:block}
.message span{margin:5px 0;line-height:1.5}
.message small{color:#9891a1}
.partial-result{min-height:180px;padding:20px;border-radius:15px;background:var(--panel-suave);color:var(--tinta-suave);line-height:1.6;box-shadow:inset 0 0 0 1px var(--line-soft)}
.approval-dialog{width:min(560px,calc(100vw - 40px));padding:42px;text-align:center}
.approval-dialog h2{margin:8px 0 14px;font:600 38px/1.08 Manrope,sans-serif;letter-spacing:-.04em}
.approval-dialog p:not(.eyebrow){color:#c0bac7;line-height:1.6}
.approval-dialog>div{display:flex;justify-content:center;gap:10px;margin-top:24px}
.ghost-button{min-height:44px;padding:0 16px;border:1px solid #ffffff1c;border-radius:11px;background:rgba(124,58,237,.05);color:#eee;cursor:pointer}
.ghost-button:hover{background:#ffffff12}
.result-dialog{width:min(980px,calc(100vw - 40px));padding:40px}
.result-dialog .artifact{padding:30px;border-radius:14px;background:#eeeae2;color:#27242c}
.artifact h3,.social-card h3{margin:12px 0;font:600 30px/1.12 Manrope,sans-serif;letter-spacing:-.035em}
.social-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.social-card{min-height:240px;padding:22px;border:1px solid #ffffff16;border-radius:16px;background:radial-gradient(circle at 80% 20%,#967cff55,transparent 30%),#211e2a}
.social-card:not(.chosen){opacity:.48;transform:scale(.94)}
.social-robot{float:right;color:#aa96ff;font-size:25px}
.chat-result{display:flex;flex-direction:column;gap:10px}
.bubble{max-width:75%;padding:13px 16px;border-radius:15px;background:#ffffff0c}
.bubble.visitor{align-self:flex-end;background:#7656ed}
.handoff{padding:15px;border:1px solid #8068e8;border-radius:12px;color:#c8bdff}
.result-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}

@keyframes handoff{to{stroke-dashoffset:-34}}

@media(max-width:1120px){
  .world-viewport,.camera-controls,.view-toggle{display:none}
  .control-room{min-height:650px}
  .story-caption{bottom:152px}
  .mission-dock{grid-template-columns:180px minmax(0,1fr) auto}
  .compact-controls{grid-column:1/-1;justify-content:center}
  .scene-fallback{inset:145px 20px 205px}
}

@media(max-width:860px){
  .scene-fallback{grid-template-columns:repeat(5,190px);scroll-snap-type:x proximity}
  .scene-fallback li{scroll-snap-align:center}
  .mission-dock{grid-template-columns:170px minmax(0,1fr) auto}
}

@media(max-width:620px){
  .sala-marco{padding:6px;border-radius:calc(var(--radio-nucleo) + 6px)}
  .sala-marco>div{border-radius:var(--radio-nucleo);scroll-margin-top:88px}
  .control-room{height:min(72svh,760px);min-height:560px;scroll-margin-top:88px}
  .room-sky{top:17px;left:15px;right:15px;font-size:8px}
  .room-sky span{max-width:170px;overflow:hidden;white-space:nowrap}
  .mission-prompt{top:42px;width:calc(100vw - 28px);padding:14px 16px}
  .mission-prompt strong{font-size:15px}
  .scene-fallback{inset:140px 12px 238px;grid-template-columns:repeat(5,220px);gap:8px;padding:2px}
  .scene-fallback button{min-height:310px}
  .story-caption{left:16px;right:16px;bottom:164px;gap:10px}
  .story-caption>span{font-size:32px}
  .story-caption strong{font-size:13px}
  .mission-dock{bottom:10px;width:calc(100vw - 20px);grid-template-columns:minmax(0,1fr) auto;padding:9px;border-radius:17px}
  .mission-dock>label:first-child{grid-column:1/-1}
  .instruction-field{display:none}
  .launch-button{min-width:0;padding:0 14px}
  .launch-button i{display:none}
  .compact-controls{grid-column:auto}
  .compact-controls button{width:44px}
  .compact-controls #pause,.compact-controls #speed{display:none}
  .journey{display:grid;grid-template-columns:1fr 1fr;gap:25px}
  .journey span:after{display:none}
  .agent-dialog,.approval-dialog,.result-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:26px 20px;border-radius:20px}
  .agent-dialog h2{font-size:32px}
  .dialog-body{grid-template-columns:1fr;gap:22px}
  .partial-result{min-height:120px}
  .approval-dialog h2{font-size:31px}
  .approval-dialog>div,.result-actions{flex-direction:column}
  .social-results{grid-template-columns:1fr}
  .social-card:not(.chosen){display:none}
  .result-dialog .artifact{padding:22px 18px}
  .bubble{max-width:88%}
  .room-floor{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}