/* ==========================================================================
   ALPHA · LA AUDIENCIA — ESTILOS
   --------------------------------------------------------------------------
   Sin panel, sin columna, sin burbujas, sin barra de desplazamiento. La sala se
   ve entera y el texto vive **sobre** ella, repartido por el cuadro:

       arriba      el rastro de lo ya preguntado, en láminas pequeñas
       centro      ALPHA (que es 3D, no está aquí) rodeado de sus nodos
       abajo       la pregunta actual y la respuesta, a tamaño de cartel
       pie         una línea con un cursor, que es toda la entrada que hay

   ⚠ Y **nada de `backdrop-filter` en la capa**. Lo tuvo, y era el motivo por el
   que la pieza 3D se veía como una mancha: el filtro afecta a todo el elemento,
   así que desenfocar para que el texto se lea desenfoca también lo que hay
   detrás. Aquí el texto se defiende con su propia sombra y con un degradado
   local, como un rótulo de cine sobre imagen.
   ========================================================================== */

#alpha{
  position:fixed; inset:0; z-index:70;
  display:grid;
  grid-template-rows:auto 1fr auto;
  /* ⚠ `[hidden]` con `display` explícito: la hoja del navegador dice
     `[hidden]{display:none}` pero **cualquier regla de autor le gana**, y sin
     esta línea la capa se queda en la maqueta comiéndose los clics de toda la
     página — incluido el botón que la abre. */
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--e-cine);
  background:none;
}
#alpha[hidden]{ display:none; }
body.alpha-abierta #alpha{ opacity:1; pointer-events:auto; }
body.alpha-abierta{ overflow:hidden; }

/* El documento se aparta con `visibility` y no con `display`: `display:none`
   desmonta la maqueta y al cerrar la página salta de sitio. */
body.alpha-abierta .hoja,
body.alpha-abierta .pie,
body.alpha-abierta .barra{ visibility:hidden; }

/* --------------------------------------------------------------------------
   ARRIBA: EL RASTRO
   --------------------------------------------------------------------------
   Lo ya preguntado no desaparece ni se apila: queda como una fila de láminas
   pequeñas. Volver a una es traerla otra vez al centro, no desplazarse hacia
   atrás por una lista.
   -------------------------------------------------------------------------- */
.alpha__cab{
  display:flex; align-items:center; gap:14px;
  padding:18px var(--margen) 0;
}
.alpha__marca{
  margin:0; display:flex; align-items:baseline; gap:9px;
  font-family:var(--f-display); font-size:19px; letter-spacing:-.012em;
  text-shadow:0 2px 22px rgba(4,5,12,.95);
}
.alpha__marca span{ color:var(--ambar); }

.alpha__rastro{
  display:flex; gap:7px; margin-left:18px;
  overflow:hidden; flex:1; min-width:0;
}
.alpha__lamina{
  flex:0 1 auto; max-width:170px; cursor:pointer;
  padding:7px 13px; font:inherit; font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--tenue); background:rgba(8,11,20,.45);
  border:1px solid var(--linea); border-radius:2px;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  transition:color .2s var(--e-cine), border-color .2s var(--e-cine);
}
.alpha__lamina:hover{ color:var(--texto); border-color:var(--ambar); }

.alpha__cerrar{
  margin-left:auto; cursor:pointer;
  padding:10px 17px;
  font-family:var(--f-cota); font-size:var(--t-cota);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--texto); background:rgba(8,11,20,.5);
  border:1px solid var(--linea); border-radius:2px;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  transition:border-color .2s var(--e-cine), background .2s var(--e-cine);
}
.alpha__cerrar:hover{ border-color:var(--ambar); background:rgba(255,158,84,.12); }

/* --------------------------------------------------------------------------
   CENTRO: LOS NODOS QUE ORBITAN
   --------------------------------------------------------------------------
   No están maquetados: los coloca el JavaScript proyectando puntos del mundo 3D
   a coordenadas de pantalla, fotograma a fotograma. Por eso la fila es
   `position:absolute` y el contenedor no ocupa sitio.
   -------------------------------------------------------------------------- */
.alpha__medio{ position:relative; min-height:0; }
.alpha__orbita{ position:absolute; inset:0; pointer-events:none; }
.alpha__nodo{
  position:absolute; top:0; left:0;
  transform:translate(-50%,-50%);
  pointer-events:auto; cursor:pointer;
  padding:11px 19px; font:inherit; font-size:14.5px; white-space:nowrap;
  color:var(--texto);
  background:rgba(6,9,17,.74);
  border:1px solid rgba(190,205,240,.30);
  border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 22px -8px rgba(0,0,0,.9);
  transition:border-color .22s var(--e-cine), background .22s var(--e-cine),
             opacity .35s var(--e-cine);
  will-change:transform;
}
.alpha__nodo:hover{
  border-color:var(--ambar); background:rgba(255,158,84,.16);
}

/* --------------------------------------------------------------------------
   ABAJO: PREGUNTA, RESPUESTA Y LÍNEA
   -------------------------------------------------------------------------- */
.alpha__abajo{
  padding:0 var(--margen) clamp(22px,4vh,44px);
  display:grid; gap:14px;
  /* El único fondo de toda la capa, y es local: un degradado que nace donde
     empieza el texto. Un rótulo de cine sobre imagen se resuelve así, no
     poniendo una caja. */
  background:linear-gradient(180deg, rgba(4,5,10,0) 0%, rgba(4,5,10,.72) 26%, rgba(4,5,10,.93) 100%);
}

.alpha__pregunta{
  margin:0; color:var(--ambar);
  font-family:var(--f-cota); font-size:var(--t-cota);
  letter-spacing:.16em; text-transform:uppercase;
}
.alpha__pregunta.vacia{ visibility:hidden; }

.alpha__respuesta{ max-width:min(1000px, 100%); }
.alpha__respuesta p{
  margin:0 0 .5em; max-width:none;
  opacity:0; transform:translateY(10px);
}
.alpha__respuesta.entra p{
  animation:alpha-entra .6s var(--e-salida) var(--retardo,0ms) forwards;
}
@keyframes alpha-entra{ to{ opacity:1; transform:none; } }

/* ⚠ **La primera frase a tamaño de cartel y el resto de cuerpo.** Toda la
   respuesta al mismo tamaño obliga a leerla entera para saber si interesa, que
   es justo lo que un asistente tiene que ahorrar. */
.alpha__titular{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(24px, 3.1vw, 44px); line-height:1.12; letter-spacing:-.026em;
  color:var(--texto);
  text-shadow:0 2px 34px rgba(4,5,12,.95);
}
.alpha__cuerpo{
  font-size:clamp(15px, 1.25vw, 18px); line-height:1.62; color:var(--apagado);
  max-width:74ch;
  text-shadow:0 2px 20px rgba(4,5,12,.9);
}
.alpha__cuerpo b{ color:var(--texto); font-weight:500; }
.alpha__contacto{
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--linea);
  color:var(--apagado); font-size:15px;
}

/* La entrada: una línea con cursor, no una caja. */
.alpha__entrada{
  display:flex; align-items:center; gap:12px;
  padding-top:12px; border-top:1px solid rgba(190,205,240,.16);
}
.alpha__cursor{
  color:var(--ambar); font-family:var(--f-cota); font-size:17px;
  animation:alpha-parpadeo 1.15s steps(2, end) infinite;
}
@keyframes alpha-parpadeo{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:.15; } }

.alpha__linea{
  flex:1; min-width:0;
  padding:6px 0; font:inherit;
  /* ⚠ 16 px como mínimo: por debajo, Safari en iPhone **hace zoom solo** al
     enfocar el campo y deja la página descuadrada. No se deduce de nada. */
  font-size:clamp(16px, 1.5vw, 21px);
  color:var(--texto); background:none; border:none; outline:none;
}
.alpha__linea::placeholder{ color:var(--tenue); }
.alpha__enviar{
  cursor:pointer; padding:11px 20px;
  font-family:var(--f-cota); font-size:var(--t-cota);
  letter-spacing:.13em; text-transform:uppercase;
  color:#08090F; background:var(--ambar);
  border:1px solid var(--ambar); border-radius:2px;
  transition:transform .18s var(--e-salida), box-shadow .22s var(--e-cine);
}
.alpha__enviar:hover{ transform:translateY(-1px); box-shadow:0 10px 30px -12px rgba(255,158,84,.6); }

/* Mientras piensa, la línea de la entrada recorre el ancho: es la única señal
   de espera que hay, y va donde el ojo ya está mirando. */
#alpha.pensando .alpha__entrada{
  background:linear-gradient(90deg, rgba(255,158,84,.28), rgba(255,158,84,0) 60%);
  background-size:220% 100%;
  animation:alpha-espera 1.1s linear infinite;
}
@keyframes alpha-espera{ from{ background-position:-120% 0; } to{ background-position:220% 0; } }

@media (max-width:820px){
  .alpha__rastro{ display:none; }
  .alpha__nodo{ font-size:12px; padding:7px 13px; }
  .alpha__abajo{ gap:10px; }
}

/* El botón que lo abre, en la barra. */
.barra__alpha{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 17px; cursor:pointer;
  font-family:var(--f-cota); font-size:var(--t-cota);
  letter-spacing:.13em; text-transform:uppercase;
  color:#08090F; background:var(--ambar);
  border:1px solid var(--ambar); border-radius:2px;
  transition:transform .18s var(--e-salida), box-shadow .22s var(--e-cine);
}
.barra__alpha:hover{ transform:translateY(-1px); box-shadow:0 10px 28px -12px rgba(255,158,84,.6); }
.barra__nav{ margin-left:auto; }
.barra .barra__alpha{ margin-left:clamp(12px,2vw,26px); }

@media (prefers-reduced-motion: reduce){
  #alpha, .alpha__nodo, .alpha__enviar, .alpha__lamina, .alpha__cerrar{ transition:none; }
  .alpha__respuesta.entra p{ animation:none; opacity:1; transform:none; }
  .alpha__cursor{ animation:none; }
  #alpha.pensando .alpha__entrada{ animation:none; }
}