/* ═══════════════════════════════════════════════════════════════
   RM Suite — by REDMACH
   Sistema «Aura Carbon», según el DESIGN.md del paquete de diseño.

   Lo que define el sistema, en sus propias palabras: negro como
   vacío que hace flotar el dato, capas tonales en vez de sombras,
   bordes de un pelo, y el rojo reservado para acción y estado —
   nunca como decoración.

   Dos cosas del paquete NO se copian, y conviene dejarlo escrito:

   1. El rojo. El archivo fija #E30613, que es el rojo de la guía
      de G&I. El de REDMACH es #ED1C24 (cap. 36). Manda la guía.

   2. Los grises con tinte rosado del bloque de color de Material
      (on-surface-variant #e9bcb6, outline #af8782). Son un residuo
      de generar la paleta desde un semilla roja; el propio
      documento describe una base «estrictamente monocromática».
      Se usan grises neutros.
   ═══════════════════════════════════════════════════════════════ */

/* ── Las pantallas no cambian de tema ─────────────────────────
   La terminal, la maqueta del tablero y las vistas previas
   representan una PANTALLA, no una superficie del sitio. Una
   consola en blanco no existe, y el ERP se usa en oscuro. Por eso
   estos valores son constantes en los dos temas: si fueran fichas
   de tema, en claro se volverían cajas blancas con texto blanco
   dentro — exactamente el fallo que ya costó dos correcciones en
   redmach.net.
   ------------------------------------------------------------ */
:root {
  --p-0: #050505;
  --p-1: #0a0a0a;
  --p-2: #121212;
  --p-3: #1a1a1a;
  --p-linea:   #1f1f1f;
  --p-linea-2: #2a2a2a;
  --p-tx:   #ffffff;
  --p-tx-2: #d8d8d8;
  --p-tx-3: #888888;
  --p-rojo-tx: #ff6b70;   /* rojo legible SOBRE la pantalla oscura */
}

:root {
  /* Capas: del vacío hacia el usuario */
  --l0: #050505;   /* el vacío */
  --l1: #090909;   /* paneles y tarjetas */
  --l2: #0d0d0d;   /* superficie elevada */
  --l3: #121212;   /* módulos dentro de una tarjeta */
  --l4: #1a1a1a;   /* barras y rellenos internos */
  --l5: #141414;   /* hover y modales */

  /* Bordes: un pelo, y el superior más claro simula luz cenital */
  --linea:   #1f1f1f;
  --linea-2: #2a2a2a;
  --linea-t: rgba(255, 255, 255, .10);

  --tx:   #ffffff;
  --tx-2: #c9c6c5;
  --tx-3: #888888;

  --rojo:     #ED1C24;
  --rojo-tx:  #ff6b70;
  --rojo-btn: #d81b22;
  --teal:     #128C7E;
  --teal-tx:  #3ecfb8;

  /* Superficies compuestas */
  --nav-bg:    rgba(5, 5, 5, .72);
  --alt-bg:    rgba(10, 10, 10, .5);
  --banda-bg:  rgba(13, 13, 13, .8);
  --vidrio-bg: rgba(19, 19, 19, .6);
  --dest-bg:   rgba(13, 13, 13, .4);
  --trama-tinta: rgba(255, 255, 255, .03);
  --glow: .09;

  /* Radios: «soft-industrial» */
  --r-btn:  4px;
  --r:      8px;
  --r-lg:   12px;
  --r-xl:   16px;

  --wrap: 1440px;
  --gutter: 24px;

  --display: "Montserrat", system-ui, -apple-system, sans-serif;
  --texto:   "Montserrat", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Tema claro ───────────────────────────────────────────────
   El sitio nace oscuro: es la identidad del sistema. Pero si el
   equipo del visitante pide claro, se le da — y el botón manda
   sobre las dos cosas.

   El rojo de marca sobre blanco da 4.38:1, por debajo del mínimo
   AA para texto. Así que en claro el rojo sigue siendo el mismo
   en gráficos y fondos, pero el texto rojo usa una versión más
   oscura. Es la misma corrección que ya se hizo en redmach.net.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; }
}
:root[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --l0: #f7f7f8;
    --l1: #ffffff;
    --l2: #ffffff;
    --l3: #f4f4f5;
    --l4: #e4e4e7;
    --l5: #fafafa;

    --linea:   #e7e7e9;
    --linea-2: #d6d6da;
    --linea-t: rgba(0, 0, 0, .10);

    --tx:   #0a0a0a;
    --tx-2: #43434b;
    --tx-3: #64646e;

    --rojo-tx: #B81820;
    --teal-tx: #0f6f63;

    --nav-bg:    rgba(255, 255, 255, .78);
    --alt-bg:    rgba(0, 0, 0, .028);
    --banda-bg:  rgba(255, 255, 255, .9);
    --vidrio-bg: rgba(255, 255, 255, .6);
    --dest-bg:   rgba(255, 255, 255, .55);
    --trama-tinta: rgba(0, 0, 0, .045);
    --glow: .05;
  }
}

:root[data-theme="light"] {
  --l0: #f7f7f8;
  --l1: #ffffff;
  --l2: #ffffff;
  --l3: #f4f4f5;
  --l4: #e4e4e7;
  --l5: #fafafa;

  --linea:   #e7e7e9;
  --linea-2: #d6d6da;
  --linea-t: rgba(0, 0, 0, .10);

  --tx:   #0a0a0a;
  --tx-2: #43434b;
  --tx-3: #64646e;

  --rojo-tx: #B81820;
  --teal-tx: #0f6f63;

  --nav-bg:    rgba(255, 255, 255, .78);
  --alt-bg:    rgba(0, 0, 0, .028);
  --banda-bg:  rgba(255, 255, 255, .9);
  --vidrio-bg: rgba(255, 255, 255, .6);
  --dest-bg:   rgba(255, 255, 255, .55);
  --trama-tinta: rgba(0, 0, 0, .045);
  --glow: .05;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--l0);
  color: var(--tx-2);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Trama y resplandores ambientales ────────────────────────
   El resplandor no es decoración de fondo: marca dónde está el
   centro de atención de cada sección. Por eso hay tres y no uno.
   ------------------------------------------------------------ */
.trama {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--trama-tinta) 1px, transparent 1px),
    linear-gradient(to bottom, var(--trama-tinta) 1px, transparent 1px);
  background-size: 40px 40px;
}
.brillo { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.brillo--hero  { background: radial-gradient(circle at 72% 45%, rgba(237,28,36,var(--glow)), transparent 52%); }
.brillo--prod  { background: radial-gradient(circle at 28% 50%, rgba(237,28,36,calc(var(--glow) * .62)), transparent 60%); }
.brillo--cierre{ background: radial-gradient(ellipse at bottom, rgba(237,28,36,calc(var(--glow) * .8)), transparent 70%); }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); color: var(--tx); }
h1 {
  font-size: clamp(1.9rem, 5.4vw, 4.25rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.035em;
  text-transform: uppercase; text-wrap: balance;
}
h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  text-transform: uppercase; text-wrap: balance;
}
h3 { font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; color: var(--tx); }

::selection { background: var(--rojo); color: #fff; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; border-radius: var(--r-btn); }

.wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px)  { .wrap { padding-inline: 32px; } }
@media (min-width: 1024px) { .wrap { padding-inline: 48px; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  padding: 12px 20px; background: var(--rojo-btn); color: #fff;
}
.skip:focus { left: 0; }

.js-anim .reveal { opacity: 0; transform: translateY(10px); transition: opacity .8s ease-out, transform .8s ease-out; }
.js-anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-anim .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Rótulo en mono con la barra roja ─────────────────────── */
.rotulo {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  line-height: 16px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tx-3);
}
.rotulo::before { content: ""; width: 40px; height: 2px; background: var(--rojo); flex: none; }
.rotulo--pip::before { width: 8px; height: 8px; border-radius: 50%; }

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 44px; padding: 14px 32px;
  border: 1px solid transparent; border-radius: var(--r-btn);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.btn--primary { background: var(--rojo-btn); color: #fff; }
/* El «tech glow»: en vez de sombra, un halo del rojo al 30 % */
.btn--primary:hover { background: var(--rojo); box-shadow: 0 0 20px rgba(237, 28, 36, .3); }
.btn--ghost { border-color: var(--linea-2); color: var(--tx); }
.btn--ghost:hover { background: var(--l2); border-color: var(--linea); }
.btn--sm { min-height: 38px; padding: 10px 20px; font-size: 11px; }
.btn--bloque { width: 100%; }

/* ── Cabecera ────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.nav__in { display: flex; align-items: center; gap: 32px; height: 64px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
/* En claro van las versiones positivas: el negativo lleva la esquina
   del isotipo y el descriptor en blanco, invisibles sobre blanco. */
.brand__iso {
  width: 32px; height: 30px; flex: none;
  background: url("/assets/isotipo-redmach-neg.png") center/contain no-repeat;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand__iso { background-image: url("/assets/isotipo-redmach.png"); }
  :root:not([data-theme="dark"]) .pie__logo  { background-image: url("/assets/logo-redmach.png"); }
}
:root[data-theme="light"] .brand__iso { background-image: url("/assets/isotipo-redmach.png"); }
:root[data-theme="light"] .pie__logo  { background-image: url("/assets/logo-redmach.png"); }
:root[data-theme="dark"]  .brand__iso { background-image: url("/assets/isotipo-redmach-neg.png"); }
:root[data-theme="dark"]  .pie__logo  { background-image: url("/assets/logo-redmach-neg.png"); }
.brand__text { display: flex; align-items: baseline; gap: 10px; }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--tx);
}
.brand__sub {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tx-3);
  padding-left: 10px; border-left: 1px solid var(--linea-2);
}

.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  padding: 8px 14px; border-radius: var(--r-btn);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3);
  transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--tx); background: var(--l2); }

.nav__act { display: flex; align-items: center; gap: 12px; }

/* Conmutador de tema. Muestra el icono del tema al que se va a
   cambiar, no el actual: el botón anuncia lo que hace. */
.tema {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--linea-2); border-radius: var(--r-btn);
  background: transparent; color: var(--tx-2); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.tema:hover { color: var(--tx); background: var(--l2); border-color: var(--linea); }
.tema svg { width: 17px; height: 17px; }
.tema .i-sol  { display: block; }   /* estando en oscuro, se ofrece el claro */
.tema .i-luna { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tema .i-sol  { display: none; }
  :root:not([data-theme="dark"]) .tema .i-luna { display: block; }
}
:root[data-theme="light"] .tema .i-sol  { display: none; }
:root[data-theme="light"] .tema .i-luna { display: block; }
:root[data-theme="dark"]  .tema .i-sol  { display: block; }
:root[data-theme="dark"]  .tema .i-luna { display: none; }

.burger {
  display: none; width: 40px; height: 38px; padding: 0;
  border: 1px solid var(--linea-2); border-radius: var(--r-btn);
  background: transparent; cursor: pointer;
}
.burger span { display: block; width: 16px; height: 2px; margin: 4px auto; background: var(--tx); transition: transform .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.menu[hidden] { display: none; }
.menu {
  display: flex; flex-direction: column;
  padding: 8px 16px 24px; border-top: 1px solid var(--linea); background: var(--l0);
}
.menu a {
  padding: 15px 2px; border-bottom: 1px solid var(--linea);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tx-2);
}
.menu a:last-child { border: 0; margin-top: 18px; color: #fff; }

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0; }
.hero__in { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.hero__texto { display: flex; flex-direction: column; gap: 32px; }

/* El subrayado desenfocado bajo la palabra en rojo */
.marca { position: relative; display: inline-block; color: var(--rojo); }
.marca::after {
  content: ""; position: absolute; left: 0; bottom: .08em;
  width: 100%; height: .1em; border-radius: 999px;
  background: rgba(237, 28, 36, .3); filter: blur(2px);
}

.lede { max-width: 40ch; font-size: 1.0625rem; line-height: 1.7; color: var(--tx-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 20px; }

/* ── Panel de vidrio ─────────────────────────────────────── */
.vidrio {
  background: var(--vidrio-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--linea-t);
}

/* Escena: la red de nodos */
.escena {
  position: relative; height: clamp(340px, 46vw, 560px);
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--p-1); border-color: var(--p-linea-2);
}
.escena canvas { width: 100%; height: 100%; }
.pip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--p-tx-3);
}
.pip--tl { top: 20px; left: 20px; }
.pip--br {
  bottom: 20px; right: 20px;
  padding: 5px 12px; border-radius: var(--r-btn);
  border: 1px solid var(--p-linea-2); background: rgba(19, 19, 19, .8);
  backdrop-filter: blur(6px);
}
.pip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pip--vivo i { background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: latir 2s ease-in-out infinite; }
@keyframes latir { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pip--vivo i { animation: none; } }

@media (max-width: 1023px) {
  .hero__in { grid-template-columns: 1fr; gap: 40px; }
  .lede { max-width: none; }
}

/* ── Banda de transición ─────────────────────────────────── */
.banda { border-block: 1px solid var(--linea-t); background: var(--banda-bg); }
.banda__in { display: grid; gap: 20px; justify-items: center; padding: 64px 0; text-align: center; }
.banda h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 300;
  letter-spacing: .01em; text-transform: none; color: var(--tx-2);
  max-width: 24ch;
}
.banda h2 strong { font-weight: 800; color: var(--tx); }
.banda p { font-size: 1.0625rem; font-weight: 300; letter-spacing: .04em; color: var(--tx-3); }

/* ── Secciones ───────────────────────────────────────────── */
.sec { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.sec--alt { background: var(--alt-bg); border-block: 1px solid var(--linea-t); }
.sec--void { background: var(--l0); }
.sec__head { max-width: 62ch; margin-bottom: 56px; display: grid; gap: 20px; }
.sec__sub { font-size: 1.0625rem; line-height: 1.7; color: var(--tx-2); }

/* ── Tarjeta ─────────────────────────────────────────────── */
.caja {
  border: 1px solid var(--linea-t); border-radius: var(--r-xl);
  background: var(--l2);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.caja:hover { border-color: rgba(237, 28, 36, .4); box-shadow: 0 0 30px rgba(237, 28, 36, .15); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .caja { box-shadow: 0 1px 2px rgba(16,16,20,.04), 0 6px 16px -8px rgba(16,16,20,.10); }
  :root:not([data-theme="dark"]) .caja:hover { box-shadow: 0 2px 4px rgba(16,16,20,.05), 0 14px 28px -12px rgba(237,28,36,.22); }
}
:root[data-theme="light"] .caja { box-shadow: 0 1px 2px rgba(16,16,20,.04), 0 6px 16px -8px rgba(16,16,20,.10); }
:root[data-theme="light"] .caja:hover { box-shadow: 0 2px 4px rgba(16,16,20,.05), 0 14px 28px -12px rgba(237,28,36,.22); }

/* ── Las dos puertas ─────────────────────────────────────── */
.puertas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.puerta { display: flex; flex-direction: column; gap: 24px; padding: 40px; }
.puerta > p { color: var(--tx-2); }
.puerta .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) { .puertas { grid-template-columns: 1fr; } }

/* ── Maquetas esquemáticas ───────────────────────────────── */
.maqueta {
  padding: 24px; border: 1px solid var(--p-linea); border-radius: var(--r-lg);
  background: var(--p-0);
}
.maqueta--fila { display: flex; align-items: flex-end; justify-content: center; gap: 16px; }
.pantalla { border: 1px solid var(--p-linea-2); border-radius: var(--r); background: var(--p-2); }
.pantalla--escritorio { width: 116px; height: 76px; }
.pantalla--tableta { width: 58px; height: 66px; }
.pantalla--movil { width: 34px; height: 58px; }
.pantalla i { display: block; height: 4px; margin: 8px 8px 0; border-radius: 2px; background: var(--p-linea-2); }
.pantalla i:first-child { background: var(--rojo); width: 40%; }
.pantalla i:nth-child(3) { width: 70%; }
.pantalla i:nth-child(4) { width: 55%; }

.maqueta--panel { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.maqueta--panel .lateral { display: grid; gap: 6px; align-content: start; }
.maqueta--panel .lateral i { display: block; height: 6px; border-radius: 2px; background: var(--p-linea-2); }
.maqueta--panel .lateral i:first-child { background: var(--rojo); }
.maqueta--panel .cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.maqueta--panel .bloque { height: 32px; border: 1px solid var(--p-linea); border-radius: var(--r); background: var(--p-2); }
.maqueta--panel .bloque--ancho { grid-column: 1 / -1; height: 24px; }

/* ── Servicios ───────────────────────────────────────────── */
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.servicio { display: flex; flex-direction: column; gap: 20px; padding: 32px; }
.servicio .maqueta { min-height: 104px; display: grid; place-items: center; }
.servicio .ico { width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--p-2); border-color: var(--p-linea-2); }
.servicio p { font-size: .9375rem; color: var(--tx-3); }
@media (max-width: 1023px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .rejilla { grid-template-columns: 1fr; } }

/* ── Producto destacado ──────────────────────────────────── */
.destacado {
  display: grid; grid-template-columns: 35fr 65fr;
  border: 1px solid var(--linea-t); border-radius: var(--r-xl); overflow: hidden;
}
.destacado__texto {
  display: flex; flex-direction: column; gap: 28px; justify-content: center;
  padding: 56px 48px; border-right: 1px solid var(--linea-t);
  background: var(--dest-bg); backdrop-filter: blur(12px);
}
.destacado__texto p { color: var(--tx-2); }
.destacado__acciones { display: grid; gap: 16px; }
.destacado__vista {
  display: grid; place-items: center; padding: 40px;
  background: var(--p-0); overflow: hidden;
}
@media (max-width: 1023px) {
  .destacado { grid-template-columns: 1fr; }
  .destacado__texto { border-right: 0; border-bottom: 1px solid var(--linea-t); padding: 40px 32px; }
  .destacado__vista { padding: 24px; }
}

/* La maqueta del tablero: barra lateral, cabecera, indicadores,
   gráfico y lista de estados. */
.tablero {
  width: 100%; display: grid; grid-template-columns: 148px 1fr;
  height: clamp(360px, 42vw, 520px);
  border: 1px solid var(--p-linea-2); border-radius: var(--r-lg);
  background: var(--p-1); overflow: hidden;
}
.tablero__lat { display: grid; gap: 6px; align-content: start; padding: 16px 12px; border-right: 1px solid var(--p-linea-2); background: var(--p-2); }
.tablero__lat b { display: block; height: 22px; width: 88px; margin: 0 8px 20px; border-radius: var(--r-btn); background: var(--p-linea-2); }
.tablero__lat span {
  padding: 8px 12px; border-radius: var(--r-btn);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--p-tx-3);
}
.tablero__lat span.on { background: rgba(237,28,36,.10); border: 1px solid rgba(237,28,36,.22); color: var(--p-rojo-tx); }
.tablero__main { display: grid; grid-template-rows: 52px 1fr; background: var(--p-0); min-width: 0; }
.tablero__barra { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--p-linea-2); background: var(--p-1); }
.tablero__barra i { display: block; height: 14px; width: 118px; border-radius: var(--r-btn); background: var(--p-linea-2); }
.tablero__barra u { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--p-linea-2); }
.tablero__cuerpo { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; padding: 22px; min-height: 0; }
.tablero__kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border: 1px solid var(--p-linea-2); border-radius: var(--r); background: var(--p-2); overflow: hidden; }
.kpi::after { content: ""; position: absolute; right: 0; bottom: 0; width: 54px; height: 54px; border-top-left-radius: 100%; background: rgba(237,28,36,.05); }
.kpi i { display: block; height: 8px; width: 52px; border-radius: 2px; background: var(--p-linea-2); }
.kpi b { display: block; height: 16px; width: 76px; border-radius: 2px; background: var(--p-linea-2); }
.panelito { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--p-linea-2); border-radius: var(--r); background: var(--p-2); min-height: 0; }
.panelito > i { display: block; height: 8px; width: 74px; border-radius: 2px; background: var(--p-linea-2); flex: none; }
.grafico { flex: 1; display: flex; align-items: flex-end; gap: clamp(6px, 1.2vw, 16px); padding: 22px 6px 0; border-left: 1px solid var(--p-linea-2); border-bottom: 1px solid var(--p-linea-2); min-height: 0; }
.grafico div { position: relative; flex: 1; border-top: 2px solid var(--rojo); border-radius: 3px 3px 0 0; background: rgba(237,28,36,.2); }
.grafico div::after {
  content: attr(data-v); position: absolute; left: 50%; top: -18px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9px; color: var(--p-tx-3); white-space: nowrap;
}
.estados { display: grid; gap: 12px; align-content: start; }
.estados li { display: flex; align-items: center; gap: 10px; }
.estados li i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--p-tx-3); }
.estados li:nth-child(1) i { background: var(--teal); }
.estados li:nth-child(2) i { background: var(--rojo); }
.estados li:nth-child(3) i { background: #f5a623; }
.estados li:nth-child(4) i { background: var(--teal); }
.estados li u { display: block; flex: 1; height: 8px; border-radius: 2px; background: var(--p-3); }
@media (max-width: 767px) {
  .tablero { grid-template-columns: 1fr; }
  .tablero__lat { display: none; }
  .tablero__cuerpo { grid-template-columns: 1fr; }
  .tablero__kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ── Portafolio con vistas previas ───────────────────────── */
.previas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.previa { display: flex; flex-direction: column; gap: 24px; padding: 32px; }
.previa__marco {
  position: relative; height: 176px; overflow: hidden;
  border: 1px solid var(--p-linea-2); border-radius: var(--r-lg); background: var(--p-0);
}
.previa h4 { font-size: 1.125rem; }
.previa p { font-size: .9375rem; color: var(--tx-3); }
@media (max-width: 1023px) { .previas { grid-template-columns: 1fr; } }

/* Mapa con ruta */
.mapa { position: absolute; inset: 0; }
.mapa__puntos {
  position: absolute; inset: 0; opacity: .4;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 15px 15px;
}
.mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ruta { fill: none; stroke: var(--rojo); stroke-width: 1.6; stroke-linecap: round; }
.js-anim .ruta { stroke-dasharray: 260; stroke-dashoffset: 260; }
.js-anim .in .ruta { animation: trazar 2s ease forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .js-anim .ruta { stroke-dashoffset: 0; } }

/* Lista de seguimiento */
.seguimiento { position: absolute; inset: 0; display: grid; gap: 10px; align-content: center; padding: 22px; }
.seguimiento li { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--p-tx-3); }
.seguimiento li i { width: 7px; height: 7px; border-radius: 50%; background: var(--p-linea-2); flex: none; }
.seguimiento li.ok i { background: var(--teal); }
.seguimiento li.ahora i { background: var(--rojo); box-shadow: 0 0 8px rgba(237,28,36,.8); }
.seguimiento li.ahora { color: var(--p-tx); }
.seguimiento li u { flex: 1; height: 1px; background: var(--p-linea); }

/* Mini terminal */
.mini { position: absolute; inset: 0; padding: 18px; overflow: hidden; }
.mini pre { margin: 0; font-family: var(--mono); font-size: 10px; line-height: 1.8; color: var(--p-tx-3); }

/* ── Fichas del catálogo ─────────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.chip {
  padding: 10px 18px; border: 1px solid var(--linea-2); border-radius: 999px;
  background: transparent; color: var(--tx-3);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.chip:hover { color: var(--tx); border-color: var(--tx-3); }
.chip.is-on { background: var(--tx); color: var(--l0); border-color: var(--tx); }

/* ── Carrusel de fichas ───────────────────────────────────────
   Se desplaza con el dedo, con la rueda, con las flechas del
   teclado y con los dos botones. Sin autoavance: catorce fichas
   que se mueven solas mientras alguien lee no es dinamismo, es
   una carrera por terminar la frase antes de que cambie.

   Es scroll nativo con puntos de anclaje, no un carrusel de
   JavaScript. Eso trae gratis lo que suele faltar: el teclado
   funciona, el buscador del navegador encuentra el texto de las
   fichas ocultas, y en un móvil se arrastra como se espera.
   ---------------------------------------------------------- */
.fichas {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding: 4px 2px 20px;              /* aire para el foco y la elevación */
  scrollbar-width: none;              /* la posición ya la dice el indicador */
  overscroll-behavior-x: contain;     /* no arrastra la página al llegar al fin */
}
.fichas::-webkit-scrollbar { display: none; }
.fichas {
  --velo-izq: 0; --velo-der: 1;
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0,
      #000 calc(var(--velo-izq) * 56px),
      #000 calc(100% - var(--velo-der) * 56px),
      transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0,
      #000 calc(var(--velo-izq) * 56px),
      #000 calc(100% - var(--velo-der) * 56px),
      transparent 100%);
  transition: -webkit-mask-image .3s, mask-image .3s;
}
.fichas > * { flex: 0 0 clamp(272px, 31.5%, 400px); scroll-snap-align: start; }
@media (prefers-reduced-motion: no-preference) { .fichas { scroll-behavior: smooth; } }

/* Mandos: contador · barra de recorrido · flechas */
.carrusel__mandos {
  display: flex; align-items: center;
  gap: 20px; margin-bottom: 20px;
}
.carrusel__barra {
  flex: 1; height: 2px; border-radius: 2px;
  background: var(--linea); overflow: hidden;
}
.carrusel__barra span {
  display: block; height: 100%; border-radius: 2px;
  background: var(--rojo);
  width: clamp(8%, var(--visto, 20%), 100%);
  transform: translateX(var(--desde, 0%));
  transition: transform .25s ease-out, width .25s ease-out;
}
@media (prefers-reduced-motion: reduce) { .carrusel__barra span { transition: none; } }
@media (max-width: 560px) { .carrusel__barra { display: none; } }
.carrusel__cuenta {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3);
}
.carrusel__flechas { display: flex; gap: 8px; }
.carrusel__flechas button {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--linea-2); border-radius: var(--r-btn);
  background: transparent; color: var(--tx-2); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, opacity .2s;
}
.carrusel__flechas button:hover:not(:disabled) { color: var(--tx); border-color: var(--rojo); background: var(--l2); }
.carrusel__flechas button:disabled { opacity: .35; cursor: default; }
.carrusel__flechas svg { width: 16px; height: 16px; }
.ficha {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px;
  border-top: 2px solid transparent;   /* la franja marca la familia */
}
/* Un vertical es un tronco: lleva la franja roja llena.
   Las herramientas, media franja. Las APIs, punteada — no tienen
   cara. Los portales, ninguna: no se venden solos. */
.ficha[data-cat="vertical"]    { border-top-color: var(--rojo); }
.ficha[data-cat="herramienta"] { border-top-color: rgba(237, 28, 36, .38); }
.ficha[data-cat="api"]         { border-top-color: var(--teal); }
.ficha[data-cat="portal"]      { border-top-color: var(--linea-2); }
.ficha.is-off { display: none; }
.ficha__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ico {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--linea-2); border-radius: var(--r); background: var(--l3); color: var(--rojo);
}
.pill {
  padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--tx-3);
}
.pill--beta { color: var(--rojo-tx); }
.pill--soon { color: var(--tx-3); border-style: dashed; }
.ficha > p { font-size: .9375rem; color: var(--tx-3); }
.lista { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid var(--linea); }
.ficha > .lista { margin-top: auto; }
.lista li { position: relative; padding-left: 18px; font-size: .875rem; color: var(--tx-3); }
.lista li::before { content: ""; position: absolute; left: 0; top: .66em; width: 9px; height: 2px; background: var(--rojo); }
.puerta .lista { border-top: 0; padding-top: 0; }
@media (max-width: 1023px) { .fichas > * { flex-basis: clamp(268px, 46%, 360px); } }
@media (max-width: 640px)  { .fichas > * { flex-basis: 84%; } }

/* ── Conecta ─────────────────────────────────────────────── */
.conecta { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.conecta__texto { display: grid; gap: 24px; justify-items: start; }

.terminal { border: 1px solid var(--p-linea-2); border-radius: var(--r-xl); background: var(--p-1); overflow: hidden; }
.terminal__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--p-linea); background: var(--p-0); }
.terminal__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--p-3); }
.terminal__bar i:first-child { background: var(--rojo); }
.terminal__bar em { margin-left: 10px; font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: .05em; color: var(--p-tx-3); }
.terminal pre { margin: 0; padding: 24px 22px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--p-tx-2); }
.terminal pre code { font: inherit; white-space: pre; }
.c-com { color: #6f6f6f; }
.c-key { color: var(--p-rojo-tx); }
.c-str { color: #a8d5a2; }
.c-num { color: #e0bd85; }
.terminal__pie { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--p-linea); background: var(--p-0); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--p-tx-3); }
@media (max-width: 1023px) { .conecta { grid-template-columns: 1fr; gap: 32px; } }

/* Tira de módulos unida por una línea */
.tira {
  position: relative; display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 56px; padding-top: 40px;
}
.tira::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--linea); }
.tira span {
  padding: 9px 18px; border: 1px solid var(--linea-2); border-radius: 999px; background: var(--l1);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3);
}

/* ── Capas de la plataforma ──────────────────────────────── */
.capas { display: grid; gap: 12px; }
.capa {
  display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 24px;
  padding: 20px 24px; border: 1px solid var(--linea-t); border-radius: var(--r-lg); background: var(--l2);
}
.capa__rot { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3); }
.capa__items { display: flex; flex-wrap: wrap; gap: 8px; }
.capa__items span { padding: 6px 12px; border: 1px solid var(--linea); border-radius: var(--r-btn); background: var(--l3); font-size: .875rem; color: var(--tx-2); }
.capa--nucleo { border-color: rgba(237,28,36,.35); background: rgba(237,28,36,.06); }
.capa--nucleo .capa__rot { color: var(--rojo-tx); }
.capa--nucleo .capa__items span { border-color: rgba(237,28,36,.3); background: transparent; color: var(--rojo-tx); }
@media (max-width: 767px) { .capa { grid-template-columns: 1fr; gap: 12px; } }

/* ── SUNAT ───────────────────────────────────────────────── */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.dos__texto { display: grid; gap: 24px; justify-items: start; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquetas span { padding: 7px 14px; border: 1px solid var(--linea-2); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--tx-2); }
.check { display: grid; gap: 12px; padding: 28px; }
.check li { position: relative; padding-left: 28px; font-size: .9375rem; color: var(--tx-2); }
.check li::before {
  content: ""; position: absolute; left: 2px; top: .3em;
  width: 12px; height: 6px; border-left: 2px solid var(--rojo); border-bottom: 2px solid var(--rojo);
  transform: rotate(-45deg);
}
.nota { padding: 18px 28px; border-top: 1px solid var(--linea); background: var(--l1); font-size: .875rem; color: var(--tx-3); }
@media (max-width: 1023px) { .dos { grid-template-columns: 1fr; gap: 32px; } }

/* ── Pasos ───────────────────────────────────────────────── */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.paso { display: grid; gap: 12px; align-content: start; padding: 32px; }
.paso__n {
  padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--linea);
  font-family: var(--mono); font-size: 1.5rem; font-weight: 600; color: var(--rojo-tx);
}
.paso p { font-size: .9375rem; color: var(--tx-3); }
@media (max-width: 1023px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pasos { grid-template-columns: 1fr; } }

/* ── Cierre ──────────────────────────────────────────────── */
.cierre { position: relative; overflow: hidden; padding: clamp(88px, 12vw, 160px) 0; border-top: 1px solid var(--linea-t); background: var(--l0); }
.cierre__in { max-width: 820px; margin-inline: auto; display: grid; gap: 24px; justify-items: center; text-align: center; }
.cierre h2 { font-size: clamp(1.8rem, 4.2vw, 3rem); }
.cierre__sub { font-size: 1.0625rem; color: var(--tx-2); }

.lead { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; margin-top: 32px; text-align: left; }
.lead__campo { display: grid; gap: 8px; }
.lead__campo--ancho { grid-column: 1 / -1; }
.lead label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3); }
.lead__req { color: var(--rojo-tx); }
.lead input, .lead select, .lead textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--linea); border-radius: var(--r-btn);
  background: var(--l1); color: var(--tx);
  font-family: var(--texto); font-size: 1rem; line-height: 1.4;
  transition: border-color .2s;
}
.lead textarea { resize: vertical; min-height: 112px; }
.lead select {
  appearance: none; cursor: pointer; padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tx-3) 50%),
                    linear-gradient(135deg, var(--tx-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 54%, calc(100% - 15px) 54%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.lead input:hover, .lead select:hover, .lead textarea:hover { border-color: var(--linea-2); }
.lead input:focus, .lead select:focus, .lead textarea:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo); }
.lead input[aria-invalid="true"], .lead select[aria-invalid="true"] { border-color: var(--rojo); }
.lead__trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead p.lead__error { font-size: .875rem; color: var(--rojo-tx); }
.lead p.lead__error:empty { display: none; }
.lead__error--general { grid-column: 1 / -1; }
.lead__pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.lead__fino { font-size: .875rem; color: var(--tx-3); }
.lead button[aria-busy="true"] { opacity: .6; cursor: progress; }
.lead__aviso { grid-column: 1 / -1; font-size: .9375rem; }
.lead__aviso:empty { display: none; }
.lead__aviso[data-estado] { padding: 16px 18px; border-radius: var(--r); border: 1px solid; }
.lead__aviso[data-estado="ok"] { border-color: var(--teal); background: rgba(18,140,126,.14); color: var(--teal-tx); }
.lead__aviso[data-estado="error"] { border-color: var(--rojo); background: rgba(237,28,36,.10); color: var(--rojo-tx); }
@media (max-width: 640px) { .lead { grid-template-columns: 1fr; } }

/* ── Pie ─────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--linea); background: var(--l0); }
.pie__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding-block: 72px 48px; }
.pie__logo { display: block; width: 240px; max-width: 100%; height: 54px; background: url("/assets/logo-redmach-neg.png") left center/contain no-repeat; }
.pie__brand p { margin-top: 20px; font-size: .9375rem; color: var(--tx-3); }
.pie__col { display: grid; gap: 12px; align-content: start; }
.pie__col h4 {
  padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--linea);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3);
}
.pie__col a { font-size: .9375rem; color: var(--tx-2); transition: color .2s; }
.pie__col a:hover { color: var(--rojo-tx); }
.pie__legal { font-size: .875rem; color: var(--tx-3); line-height: 1.8; }
.pie__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-block: 24px; border-top: 1px solid var(--linea);
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--tx-3);
}
@media (max-width: 900px) { .pie__in { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) { .pie__in { grid-template-columns: 1fr; } }

/* ── Menú compacto ───────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .nav__act .btn--sm { display: none; }
}
@media (max-width: 520px) {
  .hero__cta .btn { width: 100%; }
  .brand__sub { display: none; }
}

/* ══════════════════════════════════════════════════════
   Movimiento
   ══════════════════════════════════════════════════════ */

/* ─── Progreso de lectura ──────────────────────────────
   El número lo pone main.js; aquí solo se decide qué hacer
   con él. Podría hacerse sin JavaScript con
   `animation-timeline: scroll()`, pero en este entorno no
   hay forma de comprobar que funcione, y prefiero código
   verificado a código elegante.
   ---------------------------------------------------- */
.progreso {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200;
  transform: scaleX(var(--avance, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--rojo-btn), var(--rojo));
  pointer-events: none;
}

/* ─── Foco que sigue al puntero ────────────────────────
   La tarjeta se ilumina donde está el cursor. Encaja con el
   sistema: el resplandor rojo ya marca dónde está la
   atención, y aquí la marca el propio visitante.
   ---------------------------------------------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .caja { position: relative; }
  .caja::after {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s;
    background: radial-gradient(320px circle at var(--px, 50%) var(--py, 50%),
                                rgba(237, 28, 36, .09), transparent 62%);
  }
  .caja:hover::after { opacity: 1; }
  /* La tarjeta también se levanta: el foco solo no basta para
     que se note que el elemento responde. */
  .caja { transition: border-color .3s, box-shadow .3s, transform .3s; }
  .caja:hover { transform: translateY(-3px); }
}

/* ─── El cursor de la terminal ─────────────────────────
   Un detalle pequeño que hace que el panel parezca vivo en
   vez de una captura pegada.
   ---------------------------------------------------- */
.terminal pre code::after {
  content: "";
  display: inline-block; width: 8px; height: 1em;
  margin-left: 2px; vertical-align: text-bottom;
  background: var(--p-rojo-tx);
}
@media (prefers-reduced-motion: no-preference) {
  .terminal pre code::after { animation: cursor 1.1s steps(2) infinite; }
  @keyframes cursor { 50% { opacity: 0; } }
}

/* ── Ediciones dentro de la ficha de un vertical ──────────────
   Una edición no es un producto: es el mismo tronco con otra cara.
   Por eso van como etiquetas dentro de la ficha del vertical y no
   como fichas sueltas — que es justo el error que tenía el sitio.
   ---------------------------------------------------------- */
.ediciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-top: 14px; border-top: 1px solid var(--linea);
}
.ediciones__rot {
  width: 100%; margin-bottom: 2px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3);
}
.ediciones span:not(.ediciones__rot) {
  padding: 4px 10px; border: 1px solid var(--linea-2); border-radius: 999px;
  background: var(--l3); font-size: .8125rem; color: var(--tx-2);
}
/* Con ediciones, la lista de abajo ya no necesita su propia línea */
.ediciones + .lista { border-top: 0; padding-top: 8px; }

/* Etiquetas de familia y de plan */
.pill--tipo   { color: var(--tx-2); }
.pill--pro    { color: var(--rojo-tx); }
.pill--vivo   { color: var(--teal-tx); }

/* La consola manda sobre todo y no se vende: se dibuja aparte */
.capa--consola { border-color: var(--linea-2); background: var(--l3); }
.capa--consola .capa__rot { color: var(--tx-2); }