/* ═══════════════════════════════════════════════════════════════════════════
   ÉPOCA 5 · LA CABINA — tokens + piel
   Contrato: design-system/05-contrato-componentes-epoca.md
   Fuente destilada: design-system/demo-cabina/demo.html (LA DEMO VALIDADA)
   Complementos: 01-contrato-viaje.md §1 · 02-adenda-caracter-de-epoca.md §1-§3

   La tesis: aquí ya no hay materia, hay LUZ Y DATO. Grafito frío, cristal,
   filo de 1px, una sola brasa. Y una regla que ordena todo lo demás:

        LO ENCENDIDO ES INFORMACIÓN.
        El hover sube la luz · lo activo la mantiene · nada brilla porque sí.

   Sólo selectores bajo html[data-epoca="5"]. Cero marcado nuevo: todo adorno
   vive en ::before/::after de los .c-* ya congelados. Sin imágenes remotas.

   ── REGISTRO DE CAMBIOS ────────────────────────────────────────────────────
   TIRADA 10 · 2026-08-13 (contrato 23) — cuatro añadidos y UN valor sustituido
   (el `box-shadow: none` de la casilla, que pasa a ser su filo):
     · tokens `--e5-alerta` (rojo FRÍO, el único color nuevo de la tanda en las
       cinco épocas) y `--e-peligro`, que lo publica al sistema.
     · piel de `c-boton--peligro` (§B.6): el mismo cristal, otra luz. 7,11 en
       reposo · 6,52 al tocarlo.
     · el filo de 1px alrededor de la casilla (§A.4).
     · el enlace del pie de la página actual (§A.5), en tinta encendida.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · TOKENS ───────────────────────────────────────────────────────────
   Valores tomados de la demo validada (bloque :root de demo.html) más los
   ejes de carácter de la adenda §1 para la columna «5 · Cabina».           */
html[data-epoca="5"]{
  color-scheme: dark;

  /* Color — casi acromático + UN acento */
  --e-fondo:          #06070A;   /* grafito profundo FRÍO, nunca negro cálido */
  --e-fondo-2:        #0B0D12;
  --e-sup:            #11141A;   /* superficie sólida (lo que no es cristal)  */
  --e-tinta:          #EEF1F6;
  --e-tinta-2:        #A9B2C0;   /* el gris más apagado que sigue siendo texto */
  --e-linea:          rgba(238,241,246,.14);   /* EL FILO de 1px del cristal  */
  --e-acento:         #FF6A1F;   /* la brasa: aparece donde hay información   */
  --e-acento-nucleo:  #FFC08A;   /* núcleo claro: una luz real es más clara dentro */
  --e-halo:           rgba(255,106,31,.45);
  --e-ok:             #FFC08A;   /* consumado = brasa clara SIN halo (ya no arde) */

  /* Carácter — adenda §1: ornamento cero, forma recta, movimiento seco */
  --e-radio:          14px;                     /* radio de la demo (paneles 12-16px) */
  --e-grosor:         1px;                      /* filo, no marco */
  --e-aire:           clamp(28px, 5vw, 40px);   /* el vacío es el lujo (tope 40px) */
  --e-vel:            130ms;                    /* instantáneo y preciso */
  --e-tracking:       -.035em;                  /* titulares apretados */

  /* Tipos — adenda §2 */
  --e-display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --e-cuerpo:  'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --e-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── tokens propios de la época (prefijo e5-, no salen de aquí) ── */
  --e5-linea-tenue: rgba(238,241,246,.10);  /* separadores internos */
  --e5-filo-alto:   rgba(238,241,246,.24);  /* el filo cuando sube la luz */
  --e5-realce:      rgba(255,255,255,.07);  /* realce interior de 1px arriba */
  --e5-tinta-3:     #8A93A1;                /* el gris más bajo que aún mide ≥4.5:1 */
  --e5-grafito:     #6E7787;                /* SOLO trazos y puntos: nunca texto */
  /* EL AVISO (tirada 10 · 2026-08-13). El único color que esta época no tenía:
     la Cabina se construyó con UNA sola brasa, y por eso hasta su estado de
     error usa la misma luz «puesta donde no debería estar» (§5). Eso vale para
     un campo mal rellenado, pero no para el botón de BORRAR: ahí el naranja de
     «Entrar» diciendo «esto no se recupera» es exactamente la confusión que un
     panel de mando no se puede permitir. Es un rojo FRÍO —tira a rosa, no a
     brasa— para que no se lea como una llama débil sino como otra señal.
     Medido como texto: 6,71 sobre `--e-sup`, 7,32 sobre `--e-fondo` y 7,07
     sobre `--e-fondo-2`. Sólo lo usan `c-boton--peligro` y el signo negativo de
     `c-instrumento--moneda`, vía el token de base `--e-peligro`. */
  --e5-alerta:      #FF6B7A;
  --e-peligro:      var(--e5-alerta);
  --e5-radio-chico: 10px;
  --e5-curva:       cubic-bezier(.22,.61,.36,1);
  /* EL CRISTAL: relleno translúcido claro a muy baja opacidad */
  --e5-cristal: linear-gradient(180deg,
                  rgba(255,255,255,.048) 0%,
                  rgba(255,255,255,.014) 46%,
                  rgba(255,255,255,.022) 100%);
  --e5-cristal-alto: linear-gradient(180deg,
                  rgba(255,255,255,.075) 0%,
                  rgba(255,255,255,.028) 46%,
                  rgba(255,255,255,.038) 100%);
}

/* ── 1 · EL CAMPO ─────────────────────────────────────────────────────────
   Grafito frío con profundidad: brasa lejana arriba, veladura fría, rejilla
   de puntos muy tenue y viñeta. Todo en capas de fondo: sin nodos nuevos.   */
html[data-epoca="5"]{
  background-color: var(--e-fondo);
  background-image:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%),
    radial-gradient(circle at 1px 1px, rgba(238,241,246,.05) 1px, transparent 1.6px),
    radial-gradient(70vw 46vh at 80% -6%, rgba(255,106,31,.085), transparent 62%),
    radial-gradient(60vw 40vh at 10% 6%, rgba(120,150,200,.05), transparent 64%),
    linear-gradient(180deg, var(--e-fondo-2) 0%, var(--e-fondo) 60%, #040507 100%);
  background-size: auto, 30px 30px, auto, auto, auto;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}
html[data-epoca="5"] body{
  background: transparent;
  color: var(--e-tinta);
  font-family: var(--e-cuerpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
html[data-epoca="5"] ::selection{ background: rgba(255,106,31,.30); color:#FFF3E9; }

/* Foco: la misma señal en los 8 componentes — un filo claro, seco y visible
   tanto sobre grafito como sobre la brasa del botón primario. */
html[data-epoca="5"] :focus-visible{
  outline: 2px solid var(--e-tinta);
  outline-offset: 3px;
  border-radius: inherit;
}

/* ── 2 · BOTÓN ────────────────────────────────────────────────────────────
   Primario = BRASA con núcleo claro y halo real (texto oscuro encima).
   Fantasma = CRISTAL con filo: no compite con la luz, la enmarca.          */
html[data-epoca="5"] .c-boton{
  border-radius: 12px;
  border: var(--e-grosor) solid var(--e-linea);
  font-family: var(--e-display);
  font-weight: 600;
  letter-spacing: -.015em;
  text-transform: none;
  transition:
    transform var(--e-vel) var(--e5-curva),
    box-shadow var(--e-vel) linear,
    border-color var(--e-vel) linear,
    background-color var(--e-vel) linear,
    filter var(--e-vel) linear,
    color var(--e-vel) linear;
}

/* el foco de luz de la pantalla */
html[data-epoca="5"] .c-boton--brasa{
  border-color: #FFD3AE;
  background: linear-gradient(180deg, #FF9A4D 0%, #FF6A1F 58%, #F25A12 100%);
  color: #140A03;                       /* tinta casi negra sobre naranja */
  font-weight: 700;
  font-size: 16.5px;
  box-shadow:
    0 12px 34px -12px rgba(255,106,31,.90),
    inset 0 1px 0 rgba(255,255,255,.50);
}
html[data-epoca="5"] .c-boton--brasa:hover{      /* sube la luz */
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 42px -12px rgba(255,106,31,1),
    inset 0 1px 0 rgba(255,255,255,.60);
}
html[data-epoca="5"] .c-boton--brasa:active{ transform: translateY(0); filter: brightness(.97); }

/* cristal: el filo es todo lo que hay */
html[data-epoca="5"] .c-boton--fantasma{
  border-color: var(--e-linea);
  border-radius: var(--e5-radio-chico);
  background: rgba(255,255,255,.022);
  box-shadow: inset 0 1px 0 var(--e5-realce);
  color: var(--e-tinta);
  font-family: var(--e-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
html[data-epoca="5"] .c-boton--fantasma:hover{
  border-color: var(--e5-filo-alto);
  background: rgba(255,255,255,.055);
}
html[data-epoca="5"] .c-boton--fantasma:active{ background: rgba(255,255,255,.03); }

/* ── PELIGRO: la señal fría ──────────────────────────────────────────────
   `c-boton--peligro` (base §16.14) acompaña a `--fantasma`: el cristal, el
   desenfoque de detrás, el filo de 1px y la letra mono en versalitas ya están
   puestos. Lo único que cambia es de qué color es la luz de ESTA tecla. El
   hover sube la luz igual que en todas las demás —es la ley de la época— pero
   la sube en alerta: el filo se enciende en rojo frío y el cristal se tiñe.
   La sombra exterior del hover sale sola del `--e-halo` que base §16.14 le
   redeclara a la pieza; aquí sólo se escriben filo y relleno.             */
html[data-epoca="5"] .c-boton--peligro{
  border-color: color-mix(in srgb, var(--e-peligro) 34%, transparent);
  color: var(--e-peligro);
}
html[data-epoca="5"] .c-boton--peligro:hover{
  border-color: color-mix(in srgb, var(--e-peligro) 72%, transparent);
  background: color-mix(in srgb, var(--e-peligro) 12%, transparent);
  box-shadow:
    inset 0 1px 0 var(--e5-realce),
    0 14px 34px -18px var(--e-halo);
}
html[data-epoca="5"] .c-boton--peligro:active{
  background: color-mix(in srgb, var(--e-peligro) 7%, transparent);
}

/* apagado: en esta época lo que no está encendido, no informa — así que el
   deshabilitado pierde la brasa entera y vuelve a ser cristal muerto. */
html[data-epoca="5"] .c-boton:disabled,
html[data-epoca="5"] .c-boton[aria-disabled="true"]{
  background: rgba(255,255,255,.045);
  border-color: var(--e-linea);
  color: var(--e5-tinta-3);
  box-shadow: none;
  filter: none;
  transform: none;
  cursor: not-allowed;
}
html[data-epoca="5"] .c-boton:disabled:hover,
html[data-epoca="5"] .c-boton[aria-disabled="true"]:hover{
  transform: none;
  filter: none;
  box-shadow: none;
  background: rgba(255,255,255,.045);
  border-color: var(--e-linea);
}

/* ── 3 · PANEL ────────────────────────────────────────────────────────────
   CRISTAL: relleno translúcido, filo de 1px, realce interior arriba y una
   sombra corta hacia fuera. El chrome NO cambia dentro de la página.       */
html[data-epoca="5"] .c-panel{
  position: relative;
  border: var(--e-grosor) solid var(--e-linea);
  border-radius: var(--e-radio);
  background: var(--e5-cristal);
  box-shadow:
    inset 0 1px 0 var(--e5-realce),
    0 1px 2px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--e-tinta);
  transition: transform var(--e-vel) var(--e5-curva), border-color var(--e-vel) linear;
}
html[data-epoca="5"] .c-panel:hover{ transform: translateY(-2px); border-color: var(--e5-filo-alto); }

/* cabecera y pie: instrumentos separados por líneas finas, no cajas */
html[data-epoca="5"] .c-panel__cabecera{ border-bottom: 1px solid var(--e5-linea-tenue); }
html[data-epoca="5"] .c-panel__pie{ border-top: 1px solid var(--e5-linea-tenue); }
html[data-epoca="5"] .c-panel__meta{
  font-family: var(--e-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--e-tinta-2);
  font-variant-numeric: tabular-nums;
}
html[data-epoca="5"] .c-panel__cuerpo{ color: var(--e-tinta-2); line-height: 1.55; }

/* EL ENCENDIDO — el bloque de compra de la demo: borde de luz + halo con
   núcleo claro. Es lo único a plena luz; nada más compite con él.          */
html[data-epoca="5"] .c-panel--destacado{
  border-color: rgba(255,138,61,.60);
  background:
    radial-gradient(80% 62% at 50% -12%, rgba(255,192,138,.26), transparent 72%),
    radial-gradient(120% 130% at 50% -18%, rgba(255,106,31,.30), rgba(255,106,31,.07) 52%, transparent 78%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,214,180,.35),
    0 0 0 1px rgba(255,192,138,.14),
    0 30px 90px -26px rgba(255,106,31,.75),
    0 0 120px -40px rgba(255,106,31,.55);
  color: #FFF3E9;
}
html[data-epoca="5"] .c-panel--destacado:hover{ border-color: rgba(255,163,96,.75); }
html[data-epoca="5"] .c-panel--destacado .c-panel__meta{ color: #EBD9CC; }
html[data-epoca="5"] .c-panel--destacado .c-panel__cuerpo{ color: #F2E7DE; }
html[data-epoca="5"] .c-panel--destacado .c-panel__cabecera{ border-bottom-color: rgba(255,192,138,.22); }
html[data-epoca="5"] .c-panel--destacado .c-panel__pie{ border-top-color: rgba(255,192,138,.22); }

/* ── 4 · CAMPO ────────────────────────────────────────────────────────────
   Cristal HUNDIDO (la única pieza cóncava del sistema). Al enfocar no crece
   ni rebota: se enciende el filo.                                          */
html[data-epoca="5"] .c-campo__etiqueta{
  font-family: var(--e-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--e-tinta-2);
}
html[data-epoca="5"] .c-campo__input{
  border: var(--e-grosor) solid var(--e-linea);
  border-radius: var(--e5-radio-chico);
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.16) 60%, rgba(255,255,255,.018) 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55);
  color: var(--e-tinta);
  font-family: var(--e-cuerpo);
  font-size: 15px;
  letter-spacing: -.01em;
  transition: border-color var(--e-vel) linear, box-shadow var(--e-vel) linear, background-color var(--e-vel) linear;
}
html[data-epoca="5"] .c-campo__input::placeholder{ color: var(--e5-tinta-3); opacity: 1; }
html[data-epoca="5"] .c-campo__input:hover{ border-color: var(--e5-filo-alto); }
html[data-epoca="5"] .c-campo__input:focus,
html[data-epoca="5"] .c-campo__input:focus-visible{
  border-color: rgba(255,138,61,.85);          /* el filo se enciende */
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.55),
    0 0 0 3px rgba(255,106,31,.16);
  outline-color: var(--e-acento-nucleo);
  outline-offset: 2px;
}
html[data-epoca="5"] .c-campo__ayuda{
  font-family: var(--e-mono);
  font-size: 10.5px;
  letter-spacing: .085em;
  color: var(--e-tinta-2);
}
html[data-epoca="5"] .c-campo__input:disabled{ opacity: .5; cursor: not-allowed; }

/* error: en una época de un solo acento, la alarma es la MISMA luz — pero
   puesta donde no debería estar. */
html[data-epoca="5"] .c-campo--error .c-campo__input{
  border-color: rgba(255,106,31,.80);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55), 0 0 0 3px rgba(255,106,31,.13);
}
html[data-epoca="5"] .c-campo--error .c-campo__ayuda{ color: var(--e-acento-nucleo); }
html[data-epoca="5"] .c-campo--error .c-campo__ayuda::before{
  content: "! ";
  font-weight: 700;
  color: var(--e-acento);
}

/* ── 5 · DISTINTIVO ───────────────────────────────────────────────────────
   Cápsula mono en micro-mayúsculas: la etiqueta de un instrumento.
   Neutro = dato · acento = lo que está VIVO (ESTÁS AQUÍ) ·
   ok = lo consumado (COMPLETADA): brasa clara, sin halo — ya no arde.      */
html[data-epoca="5"] .c-distintivo{
  border: var(--e-grosor) solid var(--e-linea);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: var(--e-tinta-2);
  font-family: var(--e-mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* el piloto de la pastilla (quote directa de la demo: .pastilla i / --viva i):
   apagado = trazo de grafito · vivo = brasa con halo · consumado = luz fría fija */
html[data-epoca="5"] .c-distintivo::before{
  content: "";
  position: static;                /* base lo declara absoluto: vuelve al flujo */
  inset: auto;
  display: inline-block;
  flex: 0 0 auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--e5-grafito);
}
html[data-epoca="5"] .c-distintivo--acento{
  color: var(--e-acento);
  border-color: rgba(255,106,31,.45);
  background: rgba(255,106,31,.05);
  box-shadow: 0 0 14px -6px var(--e-halo);
}
html[data-epoca="5"] .c-distintivo--acento::before{
  background: radial-gradient(circle at 40% 35%, var(--e-acento-nucleo), var(--e-acento) 62%);
  box-shadow: 0 0 8px rgba(255,106,31,.80);
}
html[data-epoca="5"] .c-distintivo--ok{
  color: var(--e-ok);
  border-color: rgba(255,192,138,.34);
  background: rgba(255,192,138,.05);
}
html[data-epoca="5"] .c-distintivo--ok::before{ background: var(--e-ok); }

/* ── 6 · INSTRUMENTO ──────────────────────────────────────────────────────
   Tile de cristal con la cifra grande en mono tabular y la etiqueta debajo,
   separada por una línea fina. Arriba a la derecha, el piloto encendido.   */
html[data-epoca="5"] .c-instrumento{
  position: relative;
  border: var(--e-grosor) solid var(--e-linea);
  border-radius: var(--e-radio);
  background: var(--e5-cristal);
  box-shadow: inset 0 1px 0 var(--e5-realce), 0 1px 2px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: transform var(--e-vel) var(--e5-curva), border-color var(--e-vel) linear;
}
html[data-epoca="5"] .c-instrumento:hover{ transform: translateY(-2px); border-color: var(--e5-filo-alto); }
html[data-epoca="5"] .c-instrumento::after{        /* piloto: el tile está vivo */
  content: "";
  position: absolute;
  inset: 12px 12px auto auto;      /* base declara inset:0; aquí se suelta */
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--e-acento-nucleo), var(--e-acento) 65%);
  box-shadow: 0 0 8px rgba(255,106,31,.75);
  pointer-events: none;
}
/* La caja la manda base.css: aquí solo se ajusta lo justo para no salirse del
   ±20% de alto del §5.5 (medido contra las otras cuatro épocas). */
html[data-epoca="5"] .c-instrumento__cifra{
  display: block;
  font-family: var(--e-mono);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--e-tinta);
}
html[data-epoca="5"] .c-instrumento__etiqueta{
  display: block;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--e5-linea-tenue);
  font-family: var(--e-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--e-tinta-2);
}

/* ── 7 · PROGRESO ─────────────────────────────────────────────────────────
   Barra de LUZ: la pista es un canal apagado; el relleno es la brasa con el
   núcleo claro EN EL FRENTE, como un cursor que avanza.                    */
/* el grosor del carril lo fija la fórmula de base.css (9px + aire·.06): tocarlo
   rompía el ±20% del §5.5 contra las otras épocas. Aquí solo la materia. */
html[data-epoca="5"] .c-progreso__pista{
  background: rgba(238,241,246,.13);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
html[data-epoca="5"] .c-progreso__relleno{
  width: calc(var(--valor, 0) * 1%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
                rgba(255,106,31,.75) 0%,
                var(--e-acento) 58%,
                var(--e-acento-nucleo) 100%);
  box-shadow: 0 0 12px rgba(255,106,31,.55), inset 0 0 6px rgba(255,192,138,.35);
  transition: width var(--e-vel) var(--e5-curva);
}

/* ── 8 · NAVEGACIÓN ───────────────────────────────────────────────────────
   Cápsula tenue de cristal para lo activo, con una barra de luz debajo.
   El hover sube la luz; sólo lo activo la MANTIENE.                        */
html[data-epoca="5"] .c-nav__item{
  position: relative;
  border-radius: var(--e5-radio-chico);
  border: var(--e-grosor) solid transparent;
  font-family: var(--e-display);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -.012em;
  color: var(--e-tinta-2);
  transition: color var(--e-vel) linear, background-color var(--e-vel) linear, border-color var(--e-vel) linear;
}
html[data-epoca="5"] .c-nav__item:hover{
  color: var(--e-tinta);
  background: rgba(255,255,255,.05);
}
html[data-epoca="5"] .c-nav__item.is-activa,
html[data-epoca="5"] .c-nav__item[aria-current="page"]{
  color: var(--e-tinta);
  background: rgba(255,255,255,.06);
  border-color: var(--e-linea);
  box-shadow: inset 0 1px 0 var(--e5-realce);
}
html[data-epoca="5"] .c-nav__item.is-activa::after,
html[data-epoca="5"] .c-nav__item[aria-current="page"]::after{
  content: "";
  position: absolute;
  inset: auto 22% -1px 22%;        /* base declara inset:0; aquí se suelta el top */
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--e-acento), var(--e-acento-nucleo));
  box-shadow: 0 0 10px rgba(255,106,31,.75);
  pointer-events: none;
}

/* ── 9 · CABECERA DE SECCIÓN ──────────────────────────────────────────────
   Kicker mono en brasa con su rayita de luz + titular Inter Tight enorme,
   apretado (tracking −.035em) y de peso medio: la elegancia es contención. */
html[data-epoca="5"] .c-cabecera__kicker{
  font-family: var(--e-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--e-acento);
}
html[data-epoca="5"] .c-cabecera__kicker::before{
  content: "";
  display: inline-block;
  width: 18px; height: 1px;
  margin-right: 9px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(255,106,31,.15), var(--e-acento));
}
html[data-epoca="5"] .c-cabecera__titulo{
  font-family: var(--e-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.02;
  letter-spacing: var(--e-tracking);
  color: var(--e-tinta);
  text-wrap: balance;
}

/* ── 10 · MOVIMIENTO REDUCIDO ─────────────────────────────────────────────
   Sin desplazamientos ni transiciones: todo queda en su estado final.      */
@media (prefers-reduced-motion: reduce){
  html[data-epoca="5"] .c-boton,
  html[data-epoca="5"] .c-panel,
  html[data-epoca="5"] .c-instrumento,
  html[data-epoca="5"] .c-campo__input,
  html[data-epoca="5"] .c-nav__item,
  html[data-epoca="5"] .c-progreso__relleno{
    transition-duration: .001ms !important;
  }
  html[data-epoca="5"] .c-boton:hover,
  html[data-epoca="5"] .c-panel:hover,
  html[data-epoca="5"] .c-instrumento:hover{ transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ===== ARMAZÓN =====
   EL MUNDO DE LA CABINA · c-sala · c-barra-marca · c-marco · c-rejilla · c-pie
   Contrato: 07-contrato-vida-y-armazon.md §B · estructura en base.css §13-§15
   Fuente: demo-cabina/demo.html — NADA se inventa aquí, todo se destila:
     · el campo .......... demo §1  `.campo` + `.campo::before` + `.campo::after`
     · la barra .......... demo §3  `.barra .marca .marca-punto .migas .barra-der`
     · el pie ............ demo §9  `.pie .pie-fila .pie-enlaces`
   La tesis de la época no cambia al subir de escala: LO ENCENDIDO ES INFORMACIÓN.
   El armazón no enciende nada nuevo — la única luz ambiental es el resplandor de
   brasa del fondo, que ya estaba en la demo. El chrome se calla para que hable
   la página.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── A · LA SALA · c-sala ─────────────────────────────────────────────────
   El campo de la demo, capa por capa, en las dos capas FIJAS que da base §14.

   REPARTO DE FONDOS (base §13 avisa: html y la sala hacen lo mismo, hay que
   elegir). Aquí se resuelve sin tocar ni una línea del §1 ya validado:
     · `html[data-epoca="5"]` (§1) sigue pintando el campo APLANADO — es el
       mundo de una página que aún no lleva armazón. No se toca.
     · `.c-sala::before` es OPACO y a pantalla completa: cuando hay armazón,
       tapa por entero el fondo de html. Ni un efecto se pinta dos veces.
   Y así la sala puede hacer lo que un fondo aplanado no puede: enmascarar la
   rejilla de puntos para que se desvanezca hacia abajo, exactamente como en la
   demo (`.campo::before` con su `mask-image`).

   Por qué el reparto materia/luz de base §14 se lee al revés en esta época: en
   la Cabina no hay materia. El suelo del mundo es grafito frío con su luz
   lejana (::before) y lo único que se posa encima es una REJILLA DE DATOS
   (::after) — no es textura, es sistema de coordenadas. Es la misma tesis del
   fichero: luz y dato.                                                       */
html[data-epoca="5"] .c-sala{
  color: var(--e-tinta);
  font-family: var(--e-cuerpo);
  -webkit-font-smoothing: antialiased;
}

/* CAPA 1 · el grafito y su luz — opaca, fija, quieta.
   Quote de demo §1 `.campo` (resplandor de brasa arriba a la derecha +
   veladura fría a la izquierda + degradado base) con la viñeta de
   `.campo::after` puesta arriba del todo de la misma pila.                    */
html[data-epoca="5"] .c-sala::before{
  content: "";
  background-image:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%),
    radial-gradient(70vw 46vh at 80% -6%, rgba(255,106,31,.085), transparent 62%),
    radial-gradient(60vw 40vh at 10% 6%, rgba(120,150,200,.05), transparent 64%),
    linear-gradient(180deg, var(--e-fondo-2) 0%, var(--e-fondo) 60%, #040507 100%);
}

/* CAPA 2 · la rejilla de datos — quote literal de demo §1 `.campo::before`:
   puntos de 1px cada 30px, casi invisibles, que se apagan hacia abajo con la
   máscara. Es lo que hace que el grafito se lea como pantalla y no como noche. */
html[data-epoca="5"] .c-sala::after{
  content: "";
  background-image:
    radial-gradient(circle at 1px 1px, rgba(238,241,246,.055) 1px, transparent 1.6px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}


/* ── B · LA BARRA · c-barra-marca ─────────────────────────────────────────
   El cristal de la demo: no es una barra oscura, es el MISMO mundo desenfocado
   detrás de un vidrio. Fondo translúcido + blur de 14px + filo inferior de 1px.
   Base la deja opaca a propósito (`background: var(--e-fondo)`); aquí se
   convierte en su material.                                                  */
html[data-epoca="5"] .c-barra-marca{
  background: rgba(8,10,14,.72);            /* demo §3 `.barra` */
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom-color: var(--e5-linea-tenue);  /* el filo del cristal, no el filo alto */
}

/* la marca: peso 600 y tracking apretado; el sub, la misma letra en 400 y un
   tono más bajo — dos palabras, dos temperaturas. (demo §3 `.marca`)         */
html[data-epoca="5"] .c-barra-marca__marca{
  gap: 9px;
  font-family: var(--e-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--e-tinta);
}
html[data-epoca="5"] .c-barra-marca__sub{
  font-family: var(--e-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--e-tinta-2);
}
/* EL PUNTO DE BRASA. En la demo es un nodo (`.marca-punto`); aquí, donde el
   marcado está congelado, es el ::before de la marca. No es adorno: es el
   piloto de que la sala está encendida — el mismo objeto que el piloto del
   instrumento (§6). Es luz ya existente en la demo, no luz nueva.            */
html[data-epoca="5"] .c-barra-marca__marca::before{
  content: "";
  align-self: center;              /* base alinea la marca por baseline */
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--e-acento-nucleo), var(--e-acento) 62%);
  box-shadow: 0 0 10px rgba(255,106,31,.65);
}

/* la navegación DENTRO de la barra habla en el registro de la demo: migas mono
   en micro-mayúsculas, no titulares. Fuera de la barra, el `.c-nav` de §8 se
   queda exactamente como se validó.                                          */
html[data-epoca="5"] .c-barra-marca__nav .c-nav__item{
  font-family: var(--e-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .155em;
  text-transform: uppercase;
}

/* un botón de barra no compite con el contenido: si alguien mete una brasa
   aquí, baja a la escala de la barra (la luz de la pantalla es la de la
   página, no la del chrome). */
html[data-epoca="5"] .c-barra-marca__acciones .c-boton--brasa{ font-size: 14.5px; }


/* ── C · MARCO Y REJILLA — NEUTROS ────────────────────────────────────────
   No se declara nada, y es una decisión: en esta época el vacío es el lujo
   (--e-aire hasta 40px) y el contenido flota sobre el campo sin soporte. Un
   marco con materia sería una hoja, una placa o una losa — o sea, otra época.
   `.c-rejilla` ni siquiera tiene gancho (base §14): rejilla pura.            */


/* ── D · EL PIE · c-pie ───────────────────────────────────────────────────
   Quote de demo §9: una línea fina arriba, mono micro-mayúsculas y nada más.
   Ni fondo, ni caja: el pie es el borde del campo, no un bloque.             */
html[data-epoca="5"] .c-pie{
  border-top-color: var(--e5-linea-tenue);
  font-family: var(--e-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .155em;               /* el tracking de instrumento (.etq) */
  text-transform: uppercase;
  color: var(--e-tinta-2);
  font-variant-numeric: tabular-nums;
}
html[data-epoca="5"] .c-pie__enlaces{ gap: 18px; }
html[data-epoca="5"] .c-pie__enlaces a{ color: var(--e-tinta-2); }
html[data-epoca="5"] .c-pie__enlaces a:hover{ color: var(--e-tinta); }
/* LA PÁGINA EN LA QUE ESTÁS (tirada 10 · 2026-08-13). El subrayado ya se lo
   pone base §13.5; lo que hace falta escribir aquí es la TINTA, porque la línea
   de arriba pinta todos los enlaces del pie con más especificidad que ella.
   Encendido = información, también en el pie. */
html[data-epoca="5"] .c-pie__enlaces a[aria-current]{ color: var(--e-tinta); }


/* ═══════════════════════════════════════════════════════════════════════════
   APÉNDICE · VARIANTES DEL PILOTO (tercera tirada, 2026-08-12)
   Contrato: `10-contrato-tercera-tirada.md` §VARIANTES · geometría en
   `base.css` §16.

   La casilla: el input de la Cabina es un canal de cristal con su filo de 1px.
   A 16px el filo se come la caja entera. Vuelve al widget nativo teñido con la
   brasa (`accent-color`, base §16.2) y se le retiran el cristal y la capa de
   `vida-campo.css`.

   El resto no necesita piel: en esta época el dato ya es lo que manda y las
   variantes nuevas son dato (`__meta`, `__etiqueta`, `__unidad`) o aire
   (`--linea`, `--con-acciones`).
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-epoca="5"] .c-campo--casilla .c-campo__input{
  border: 0;
  background: none;
  /* EL FILO DE 1px ALREDEDOR DE LA CASILLA (tirada 10 · 2026-08-13). El filo del
     widget lo dibuja el motor y no se toca —`border` se ignora y `accent-color`
     sólo pinta la marcada: la investigación con cifras está en base.css §16.2—,
     así que el único gancho aditivo es la sombra. El contraste nativo ya cumple
     (5,25 contra el grafito); el aro es coherencia: en la Cabina TODO lleva su
     filo de 1px, y la casilla era la única pieza que no lo tenía. */
  box-shadow: 0 0 0 max(1px, var(--e-grosor)) var(--e5-filo-alto);
  padding: 0;
}
html[data-epoca="5"] .c-campo--casilla::before,
html[data-epoca="5"] .c-campo--casilla::after{ display: none; }

/* — ÉNFASIS · la palabra encendida —
   Brasa con su halo: en la Cabina la luz ES información, así que la palabra que
   importa no cambia de color, se enciende. El halo va en `text-shadow` y no en
   `box-shadow` porque lo que brilla es la letra, no una caja detrás. */
html[data-epoca="5"] .c-enfasis{
  color: var(--e-acento);
  text-shadow: 0 0 12px var(--e-halo);
}

/* — EL DESPLEGABLE ABIERTO · un PANEL DE CRISTAL que se despliega —
   El mismo cristal del panel (§4) con el filo de 1px y el separador tenue entre
   filas: en la Cabina una lista es un instrumento, y los instrumentos tienen
   renglones. Estructura y contraste: base.css §16.13. */
@supports (appearance: base-select){
  html[data-epoca="5"] .c-campo--seleccion .c-campo__input::picker(select){
    border-color: var(--e-linea);
    /* ⚠ EL CRISTAL NECESITA ALGO DETRÁS, y aquí no lo hay.
       `--e5-cristal` es un degradado de blancos al 4% pensado para un panel que
       se apoya SOBRE la página, con el grafito de `<html>` debajo. El picker no
       se apoya en nada: vive en la capa superior, flotando. Con el cristal a
       secas, el párrafo de la página se leía A TRAVÉS de las dos primeras filas
       (cazado en la captura del banco, é5). Se le pone el suelo opaco de la
       época y el cristal encima: mismo material, ahora con algo que reflejar. */
    background-color: var(--e-fondo-2);
    background-image: var(--e5-cristal);
    box-shadow: 0 26px 60px -32px #000, 0 0 0 1px rgba(0, 0, 0, .5);
  }
  html[data-epoca="5"] .c-campo--seleccion .c-campo__input option + option{
    box-shadow: inset 0 1px 0 var(--e5-linea-tenue);
  }
}