/* ============================================================
   KG Studio - hub (kgstudio.top)

   El dominio es un sistema: una raíz y cuatro subdominios en
   órbita. Se recorre arrastrando, con la rueda, con WASD o con
   Tab, y cada cuerpo se enciende cuando su servidor responde.

   REGLA DE LAYOUT: la interfaz vive en `.rail` y el sistema
   orbital se corre al espacio que queda libre (el script mide
   el rail y desplaza el frustum). Nada de texto encima de los
   cuerpos. Si agregas interfaz, va dentro del rail o rompes eso.

   Esta página NO es el portafolio: eso vive en
   portafolio.kgstudio.top.
   ============================================================ */

:root {
  --void:      #07070a;
  --deep:      #0d0d10;
  --text:      #f3decd;
  --text-2:    #a1968c;
  --text-3:    #6f665f;
  --border:    #ffffff1a;
  --orange:    #f56f0d;
  --orange-lt: #ffa34f;
  --green:     #00c758;

  --display: "Space Grotesk", system-ui, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --t-label: 0.7rem;
  --t-small: 0.8rem;
  --t-body:  0.95rem;
  --t-name:  clamp(2.1rem, 1.5rem + 2.2vw, 3.4rem);

  --pad: clamp(1.1rem, 3vw, 2rem);
  --rail-w: clamp(19rem, 27vw, 25rem);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
p, h1, h2 { margin: 0; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--orange);
  color: #07070a;
  padding: 0.75rem 1rem;
  z-index: 90;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ── Escena ─────────────────────────────────────────────────── */

#scene {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  touch-action: none;
  cursor: grab;
}
#scene.is-grabbing { cursor: grabbing; }
#scene.is-over { cursor: pointer; }

.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 55% 50%, transparent 34%, rgba(7,7,10,.62) 100%);
}

/* ── Arranque ───────────────────────────────────────────────── */

.boot {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-content: center;
  gap: 0.9rem;
  justify-items: center;
  background: var(--void);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.boot.is-done { opacity: 0; visibility: hidden; }

.boot__bar {
  width: 9rem; height: 2px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  position: relative;
}
.boot__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: translateX(-100%);
  animation: sweep 1.15s ease-in-out infinite;
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.boot__text {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── Rail: la franja de la interfaz ─────────────────────────────
   Es la única capa con texto. El sistema orbital nunca entra aquí. */

.rail {
  position: fixed;
  inset: 0;
  z-index: 14;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  pointer-events: none;
}

.rail > * > *, .rail a, .rail button { pointer-events: auto; }

.rail__top, .rail__bottom {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: var(--pad);
}

.rail__bottom { padding-bottom: calc(var(--pad) + var(--safe-b)); }

/*
 * El rail no puede desbordar la pantalla.
 *
 * Es una columna fija de alto completo con `space-between`: al abrir un
 * producto, el panel hacía crecer el bloque de abajo y, como nada lo
 * contenía, se salía por el borde inferior. En 1366×768 -el portátil más
 * común- el contenido medía 906 px en 768 de pantalla: el panel se veía,
 * pero el botón "Abrir sitio" quedaba fuera y el sitio no se podía abrir.
 *
 * El reparto de la escasez es explícito: el bloque de abajo (el panel y su
 * botón) NO se encoge; lo que cede es la presentación de arriba.
 */
.rail { overflow: hidden; }
.rail__top { min-height: 0; overflow: hidden; }
.rail__bottom { flex: none; }

/* En pantalla ancha el rail es una columna a la izquierda, con un
   velo que garantiza contraste sin importar dónde caigan las estrellas.

   Y también con el teléfono acostado: ahí sobra ancho y falta alto, así que
   apilar interfaz arriba y abajo dejaba al sistema una franja de dos dedos
   en una esquina. De lado, la escena se queda con toda la altura. */
@media (min-width: 64rem), (min-width: 40rem) and (max-height: 34rem) {
  .rail {
    right: auto;
    width: var(--rail-w);
    background: linear-gradient(to right, rgba(7,7,10,.92) 45%, rgba(7,7,10,0));
  }
}

@media (min-width: 40rem) and (max-height: 34rem) {
  .rail { width: clamp(16rem, 42vw, 21rem); }
}

/* En pantalla angosta el rail se pega arriba y abajo, y el sistema
   queda en la banda del medio. */
@media (max-width: 63.99rem) and (min-height: 34.01rem) {
  .rail {
    background:
      linear-gradient(to bottom, rgba(7,7,10,.9), rgba(7,7,10,0) 42%),
      linear-gradient(to top, rgba(7,7,10,.94), rgba(7,7,10,0) 34%);
  }
}

@media (max-width: 63.99rem) {
  /*
   * Y deja de robar el dedo. En vertical el rail ocupa todo el ancho, así
   * que sus bloques de texto -el nombre, el pie- se tragaban el arrastre:
   * empezar a girar desde la mitad de arriba de la pantalla no hacía nada.
   * Solo lo que se pulsa de verdad recibe el toque; el resto lo deja pasar
   * a la escena, que es lo que hay detrás.
   */
  .rail > * > * { pointer-events: none; }
  .rail a, .rail button, .panel { pointer-events: auto; }

  .rail__top { padding-top: calc(var(--pad) + env(safe-area-inset-top, 0px)); }
}

/* Sin WebGL el rail deja de ser una capa flotante y pasa a ser el
   encabezado del documento. La identidad se conserva; se van los
   controles de una exploración que no existe. */
.no-webgl .rail {
  position: static;
  width: auto;
  background: none;
  pointer-events: auto;
  gap: 0;
}
.no-webgl .rail__bottom { padding-top: 0; }
.no-webgl .controls,
.no-webgl .panel,
.no-webgl .ghost { display: none; }
.no-webgl .hud__lede { display: block; }

/* ── Barra ──────────────────────────────────────────────────── */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.02em;
}

.top__mark { font-weight: 600; }
.top__nav { display: flex; gap: clamp(0.8rem, 2.5vw, 1.4rem); }
.top__nav a { color: var(--text-2); transition: color 0.2s ease; }
.top__nav a:hover { color: var(--orange); }

/* ── Identidad ──────────────────────────────────────────────── */

.hud { display: flex; flex-direction: column; gap: 0.85rem; }

.hud__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--text-2);
}

.pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 2.4s ease-out infinite; }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,199,88,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(0,199,88,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,199,88,0); }
  }
}

.hud__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-name);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.hud__role {
  font-family: var(--mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange);
}

/* El portafolio, arriba y junto al cargo. No es un producto que yo opere:
   es la puerta a quién soy, así que tiene su propio lugar y no una órbita. */
.hud__folio {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.35rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.hud__folio:hover {
  border-color: var(--orange);
  background: rgba(245,111,13,.07);
}

.hud__folio-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}
.hud__folio[data-state="live"] .hud__folio-dot {
  background: var(--orange);
  box-shadow: 0 0 10px rgba(245,111,13,.7);
}

.hud__folio-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.hud__folio-text strong { font-weight: 600; font-size: 0.9rem; }
.hud__folio-text em {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--text-3);
}

.hud__folio-go { margin-left: auto; color: var(--text-3); transition: color 0.2s ease; }
.hud__folio:hover .hud__folio-go { color: var(--orange); }

.hud__lede { max-width: 32ch; font-size: var(--t-small); color: var(--text-2); }

.hud__count {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--text-3);
}
#countNum { color: var(--orange); font-weight: 700; }

/* Cuanto menos alto es el hueco, menos identidad cabe: la escena necesita
   banda para respirar. Se recorta de lo más prescindible a lo menos. */

/* Móvil y tablet: se va la descripción larga. */
@media (max-width: 63.99rem) {
  .hud__lede { display: none; }
  .hud { gap: 0.5rem; }
  .hud__folio { padding: 0.5rem 0.7rem; }
  .hud__folio-text em { display: none; }

  /* Con un producto abierto el panel pide sitio abajo, y arriba lo que
     sobra es la invitación al portafolio: el visitante ya está leyendo
     otra cosa. Vuelve sola al cerrar. */
  .panel-open .hud__folio { display: none; }

}

/*
 * Con un producto abierto y poca altura, la presentación cede el sitio: quien
 * está leyendo la ficha de un sitio ya no necesita que le cuenten quién soy.
 * El nombre y el cargo NO se mueven -son el ancla de la página-; lo que se va
 * es el párrafo, el enlace al portafolio y el contador, y vuelven al cerrar.
 *
 * Se van con un fundido y no de golpe: `allow-discrete` deja animar hasta el
 * `display`, así que el cambio se lee como que una tarjeta ocupa el lugar de
 * un texto, en vez de como un salto. Donde no se soporte, desaparecen sin más:
 * el resultado es el de antes, no uno roto.
 */
@media (max-height: 52rem) {
  .hud__lede, .hud__folio, .hud__count {
    transition: opacity 0.22s ease, transform 0.22s ease, display 0.22s allow-discrete;
  }
  .panel-open .hud__lede,
  .panel-open .hud__folio,
  .panel-open .hud__count {
    display: none;
    opacity: 0;
    transform: translateY(-6px);
  }
}

/*
 * Ventana muy baja -1366×768 con el navegador al 150%, o el teléfono
 * acostado-: la ficha se compacta en vez de crecer una barra de scroll
 * propia. Se aprietan aires y se recorta la descripción a dos líneas; el
 * título, el dominio y el botón, que son para lo que se abre la ficha, no
 * se tocan.
 */
@media (max-height: 34rem) {
  .panel { padding: 0.8rem 0.9rem 0.9rem; gap: 0.3rem; }
  .panel__title { font-size: 1.15rem; }
  .panel__desc {
    margin-top: 0.2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .panel__stack { margin-top: 0.15rem; padding-top: 0.5rem; }
}

/* Pantallas bajas -teléfono acostado, ventana a media altura-: se va también
   el contador y la fecha del pie, que son adorno frente a poder explorar. */
@media (max-height: 34rem) {
  .hud__count, .foot { display: none; }
  .hud__name { font-size: 1.75rem; }
  .rail__top, .rail__bottom { padding: 0.75rem 1rem; gap: 0.6rem; }
  .controls__keys { flex-direction: row; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
}

/* Teléfono muy angosto: el rótulo de la marca y el nombre se aprietan. */
@media (max-width: 24rem) {
  .top__nav { gap: 0.7rem; }
  .hud__name { font-size: 2rem; }
}

/* ── Controles ──────────────────────────────────────────────── */

.controls { display: flex; flex-direction: column; gap: 0.7rem; }
/* `display:flex` le gana al atributo `hidden`, así que al abrir el panel los
   controles seguían debajo y se leían dos bloques a la vez. */
.controls[hidden] { display: none; }

.controls__title {
  font-family: var(--mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--orange);
}

.controls__keys {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: var(--t-small);
  color: var(--text-2);
}
.controls__keys li { display: flex; align-items: center; gap: 0.35rem; }
.controls__keys li span { margin-left: 0.35rem; color: var(--text-3); }

kbd {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.18rem 0.4rem;
  white-space: nowrap;
}

.controls__touch { display: none; font-size: var(--t-small); color: var(--text-3); }

/* Sin teclado ni mouse fino: se cambian las instrucciones. */
@media (hover: none) and (pointer: coarse) {
  .controls__keys { display: none; }
  .controls__touch { display: block; }
}

/* ── Panel del sitio seleccionado ───────────────────────────── */

.panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background: rgba(20,20,24,.92);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  animation: panelIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel[hidden] { display: none; }

/*
 * El panel se mide contra la pantalla, no contra un número fijo.
 *
 * Un tope en rem parecía prudente y era justo lo contrario: con el navegador
 * al 125% el contenido crece pero el tope no, así que la ficha -cuatro
 * líneas y un botón- aparecía con barra de scroll propia. Con este cálculo
 * el tope solo se alcanza en ventanas de verdad diminutas; en cualquier
 * pantalla normal la tarjeta se ve entera y sin barras.
 */
.panel {
  max-height: calc(100dvh - 15rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.panel__state {
  font-family: var(--mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.panel__state::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
}
.panel[data-state="live"] .panel__state { color: var(--orange); }
.panel[data-state="live"] .panel__state::before {
  background: var(--orange);
  box-shadow: 0 0 8px rgba(245,111,13,.8);
}

.panel__close {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  line-height: 1;
  transition: color 0.2s ease;
}
.panel__close:hover { color: var(--text); }

.panel__body { display: flex; flex-direction: column; gap: 0.35rem; }

.panel__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.panel__host {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--text-3);
  margin-top: -0.15rem;
}
.panel__desc {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 34ch;
  margin-top: 0.35rem;
}
/* El stack es dato de ficha técnica, no parte del texto: va debajo de una
   línea de pelo para que la descripción no compita con él. */
.panel__stack {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--text-3);
  margin-top: 0.25rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}

.panel__go {
  align-self: flex-start;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #07070a;
  background: var(--orange);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.panel__go:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ── Acciones del pie del rail ──────────────────────────────── */

.rail__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ghost {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ghost:hover { border-color: var(--orange); color: var(--orange); }

.foot { font-family: var(--mono); font-size: var(--t-label); color: var(--text-3); }

/* ── Etiquetas de los cuerpos ───────────────────────────────────
   Solo el nombre. La descripción vive en el panel, para que cuatro
   textos no compitan sobre la escena. */

.labels {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.node {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem 0.3rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%));
  transition: opacity 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.node:hover, .node:focus-visible, .node[data-selected="true"] {
  background: rgba(20,20,24,.85);
  border-color: var(--border);
}

.node__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}
.node[data-state="live"] .node__dot {
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(245,111,13,.16), 0 0 12px rgba(245,111,13,.7);
}

.node__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

/* En pantalla angosta las etiquetas se aprietan: cuanto menos ocupa cada
   nombre, menos se pisan entre ellos y menos hay que apartarlos. Y sobre la
   escena, sin caja detrás, el nombre necesita algo de sombra para leerse
   cuando cae encima de una zona clara de estrellas. */
@media (max-width: 63.99rem) {
  .node {
    gap: 0.35rem;
    padding: 0.22rem 0.45rem 0.22rem 0.35rem;
  }
  .node__name {
    font-size: 0.82rem;
    text-shadow: 0 1px 6px rgba(7,7,10,.9), 0 0 2px rgba(7,7,10,.8);
  }
  .node__dot { width: 6px; height: 6px; }
}

/* El nombre largo solo cabe con sitio de sobra. */
@media (max-width: 48rem) {
  .node__long { display: none; }
}
.node:hover .node__name,
.node:focus-visible .node__name,
.node[data-selected="true"] .node__name { color: var(--orange-lt); }

/* ── Listado ────────────────────────────────────────────────── */

.sheet {
  position: relative;
  z-index: 30;
  background: var(--deep);
  border-top: 1px solid var(--border);
  padding: clamp(2rem, 6vw, 3.5rem) var(--pad) calc(clamp(2rem, 6vw, 3.5rem) + var(--safe-b));
}

.has-webgl .sheet {
  position: fixed;
  inset: auto 0 0 0;
  max-height: 84svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(101%);
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
  box-shadow: 0 -24px 60px rgba(0,0,0,.65);
  border-radius: 16px 16px 0 0;
}
.has-webgl.sheet-open .sheet { transform: none; visibility: visible; }
.has-webgl .sheet.is-dragging { transition: none; }

/* ── Barra de la hoja ───────────────────────────────────────────
   Sin escena la lista ES el documento y no se minimiza nada: la barra
   solo existe cuando la lista es una hoja que tapa la zona. */

.sheet__bar { display: none; }

.has-webgl .sheet { padding-top: 0; }
.has-webgl .sheet__bar {
  display: block;
  position: sticky;
  top: 0;
  z-index: 2;
  /* A sangre: cancela el padding lateral de la hoja para que la barra
     llegue a los bordes redondeados. */
  margin: 0 calc(var(--pad) * -1) clamp(1.25rem, 3vw, 2rem);
  padding: 0.55rem var(--pad) 0.7rem;
  background: rgba(13,13,16,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  cursor: grab;
  touch-action: none;
}
.has-webgl .sheet__bar:active { cursor: grabbing; }

.sheet__grip {
  display: block;
  width: 2.75rem; height: 3px;
  margin: 0 auto 0.55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
}

.sheet__bar-in { max-width: 60rem; margin: 0 auto; display: flex; justify-content: flex-end; }
.sheet__min { cursor: pointer; }

.sheet__inner { max-width: 60rem; margin: 0 auto; }

.sheet__head { margin-bottom: 1.75rem; }
.sheet__head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.sheet__head p { font-size: var(--t-small); color: var(--text-2); }
.sheet__head strong { color: var(--text); font-weight: 500; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li { border-top: 1px solid var(--border); }

.rows a {
  display: grid;
  grid-template-columns: auto 9rem 1fr auto;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  padding: 0.9rem 0.5rem;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.rows a:hover { background: rgba(255,255,255,.04); }

.rows__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  align-self: center;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}
.rows a[data-state="live"] .rows__dot {
  background: var(--orange);
  box-shadow: 0 0 10px rgba(245,111,13,.7);
}

.rows__name { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.rows__desc { font-size: var(--t-small); color: var(--text-2); }
.rows__meta { font-family: var(--mono); font-size: var(--t-label); color: var(--text-3); }

.sheet__more { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.sheet__more > p {
  font-family: var(--mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 0.8rem;
}
.sheet__more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--t-small); }
.sheet__more li a { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; justify-content: space-between; color: var(--text-2); padding: 0.35rem 0; }
.sheet__more li a span { font-family: var(--mono); font-size: var(--t-label); color: var(--text-3); }
.sheet__more li a:hover { color: var(--orange); }

@media (max-width: 48rem) {
  .rows a { grid-template-columns: auto 1fr; }
  .rows__desc, .rows__meta { grid-column: 2; }
}

/* ── Movimiento ─────────────────────────────────────────────── */

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