/* ============================================================================
   thesis-premium.css — LA CAPA PREMIUM DEL ARGUMENTO (WEB-02, 27-sep-2026).
   ============================================================================
   Gemela del bloque 2b de public/css/home.css, para /thesis. La portada y el
   argumento tienen que leerse como la misma cosa: la misma luz, las mismas
   aristas, el mismo grafo detras. Todo sale de los tokens de brand.css; ni un
   #RRGGBB. El <style> de views/thesis.ejs sigue siendo la base de la pagina y
   no se toca: esta hoja va DESPUES y solo anade o afina.

   LO QUE HACE
   · La letra del deck: la mono se resuelve a la sans, como en la portada.
   · Las barras en cian: el token de linea pasa al acento a media luz.
   · Atmosfera y regla electrica por seccion; titulares con luz; la palabra
     en el acento con halo; cajas con el borde encendido; puntos con halo.
   · El fondo: el MISMO motor que el hero (public/js/hero-graph.js), en
     densidad baja y deriva lenta, fijo detras de todo, con encendido al
     entrar. El grafo propio que tenia esta pagina se retira: dos motores de
     grafo en el sitio es exactamente lo que hacia que no se pareciesen.
   ========================================================================== */

body {
  --sn-font-mono: var(--sn-font);
  --sn-line: rgb(var(--sn-accent-rgb) / 0.38);
  /* EL BODY ES TRANSPARENTE, y no es un descuido: el canvas del fondo va en
     z-index -1, que se pinta por encima del fondo de <html> pero por DEBAJO
     del fondo de <body>. Con el body negro el grafo no se veia nunca. El
     negro lo sigue poniendo <html>. */
  background: transparent;
}

/* -- CABER EN UNA PANTALLA. Dos secciones (lo que no se guarda, y aritmetica)
      median 1000-1100px a 1440x900: la entradilla un punto mas pequena, las
      filas mas apretadas y algo menos de aire arriba y abajo. Lo mismo que
      hace la portada: toda seccion cabe en la ventana. -- */
.sn-section { padding: 64px 0; }
.sn-h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 18px; }
.sn-lede { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.5; max-width: 70ch; }
.sn-lede + .sn-lede { margin-top: 12px; }
.sn-ledger-row { padding: 12px 18px; }
.sn-ledger-row dd small { margin-top: 3px; }
.sn-mech { margin-top: 22px; }
.sn-mech li { padding: 8px 0; }
.sn-mech .v { font-size: 13.5px; }

::selection {
  background: rgb(var(--sn-accent-rgb) / 0.32);
  color: var(--sn-text);
}

/* -- El fondo: la caja fija que hero-graph.js mide, y el canvas dentro. Se
      enciende desde el negro en 1.4 s, como en la portada. -- */
.sn-bg-host {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.sn-bg {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  animation: sn-ignite 1400ms var(--ease) both;
}
@keyframes sn-ignite { from { opacity: 0; } to { opacity: 1; } }

/* -- Cada seccion: la atmosfera y, arriba, la regla electrica en vez del
      borde gris. La cabecera no lleva regla: es el principio. -- */
.sn-section {
  position: relative;
  border-top: 0;
  background: var(--sn-atmo);
}
.sn-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--sn-rule-electric);
  pointer-events: none;
}
.sn-section--head::before { display: none; }
.sn-section--head { background: none; }

/* -- Los titulares, con la luz cayendo desde arriba, en el peso del deck y
      con las letras sin tocarse. -- */
.sn-thesis,
.sn-h2,
.sn-close-line {
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--sn-text);
  background: var(--sn-text-lit);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
.sn-thesis em,
.sn-h2 em {
  color: var(--sn-accent);
  background: var(--sn-accent-lit);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgb(var(--sn-accent-rgb) / 0.35));
}
.sn-thesis-2 { letter-spacing: -0.01em; }

/* -- El numero del rotulo, con un poco de luz. -- */
.sn-kicker { letter-spacing: 0.16em; font-weight: 600; }
.sn-kicker b { text-shadow: 0 0 12px rgb(var(--sn-accent-rgb) / 0.35); }

/* -- Las cajas: el borde encendido. Solidas (la curva, la sala) y rejillas
      con juntas de 1px (el libro de lo que no se guarda). -- */
.sn-decay,
.sn-room {
  border-color: transparent;
  background:
    linear-gradient(var(--sn-surface), var(--sn-surface)) padding-box,
    var(--sn-border-lit) border-box;
  box-shadow: var(--sn-edge-light), var(--sn-shadow);
}
.sn-ledger {
  border-color: transparent;
  background: var(--sn-border-lit);
  box-shadow: var(--sn-shadow);
}

/* -- Las citas, en la punta de luz. -- */
.sn-quotes p { color: var(--sn-accent-hi); }

/* -- Los enlaces del cierre y los puntos de la derecha. -- */
.sn-link { transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.sn-link:hover { color: var(--sn-accent-hi); }
.sn-progress a.active { box-shadow: var(--sn-glow-sm); }

/* -- El pie, pegado al cierre. -- */
.site-footer { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .sn-bg { animation: none; }
  .sn-link { transition: none; }
}