/* ═══════════════════════════════════════════════════════════════
   ONE v4.0 — «teletipo que respira» · AliceLabs LLC
   Papel cálido + tinta pesada · Fraunces Black óptico ·
   sellos y filetes de imprenta · cero neón, cero plantilla.
   Presupuesto de color: verde ×2 (sello vivo, CTA) ·
   rojo ×1 (cuenta y pulso) · cian ×1 (filete técnico MCP).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --papel: #EFEAD8;
  --papel-2: #E7E0CB;
  --papel-3: #F4F0E3;
  --tinta: #14120C;
  --tinta-2: #4C4738;
  --linea: rgba(20, 18, 12, 0.22);
  --linea-f: rgba(20, 18, 12, 0.13);
  --verde: #00F299;
  --rojo: #D61E28;
  --cian: #0099C7;
  --f-disp: "Fraunces", Georgia, serif;
  --f-body: "Archivo", sans-serif;
  --f-mono: "IBM Plex Mono", monospace;
  --u: 8px;
  --ancho: 1140px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--tinta); color: var(--papel); }

.mono { font-family: var(--f-mono); }

/* grano de papel impreso, fijo y sin interacción */
.grano {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.42 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.salto {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: 10px 16px;
  font-family: var(--f-mono); font-size: 13px;
}
.salto:focus { left: 0; }

a { color: inherit; }
em { font-style: normal; }

/* ═══════════ CABECERA DE PERIÓDICO ═══════════ */
.masthead {
  max-width: var(--ancho); margin: 0 auto; width: 100%;
  padding: 22px clamp(20px, 4vw, 48px) 0;
}
.mh-linea {
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 3px solid var(--tinta);
  padding-bottom: 12px; flex-wrap: wrap;
}
.mh-marca {
  font-family: var(--f-disp); font-weight: 900; font-size: 44px;
  letter-spacing: -0.02em; line-height: 0.9;
  font-variation-settings: "opsz" 144;
}
.mh-sub { font-size: 13.5px; color: var(--tinta-2); }
.mh-derecha { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.mh-reloj { font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* sello EN VIVO — uso verde nº 1 */
.sello {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.14em;
  color: var(--tinta); border: 2px solid var(--tinta);
  outline: 2px solid var(--verde); outline-offset: 2px;
  padding: 6px 12px; transform: rotate(-2deg);
  background: var(--papel-3);
}
.pulso {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rojo);
  animation: latido 2.2s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.mh-fecha {
  font-size: 12px; color: var(--tinta-2); text-transform: uppercase;
  letter-spacing: 0.08em; padding: 10px 0 0;
  border-bottom: 1px solid var(--linea);
}

/* ═══════════ 01 · DESPACHO ═══════════ */
.despacho {
  max-width: var(--ancho); margin: 0 auto; width: 100%;
  padding: 96px clamp(20px, 4vw, 48px) 56px;
}
.des-cab {
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.des-titulo {
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(52px, 8.2vw, 108px);
  line-height: 0.95; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "WONK" 1;
}
.des-num { font-size: 15px; color: var(--tinta-2); }
.des-sub { max-width: 58ch; font-size: 18px; color: var(--tinta-2); margin-bottom: 40px; }
.des-sub em { color: var(--tinta); font-weight: 600; }

/* la cinta del teletipo — papel de máquina, se escribe sola */
.cinta {
  border-top: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
  background: var(--papel-3);
  padding: 26px 8px;
  font-family: var(--f-mono); font-size: 14.5px; line-height: 2.05;
  letter-spacing: 0.01em;
  min-height: 236px;
}
.cinta-ln { white-space: pre-wrap; }
.cinta-cursor {
  display: inline-block; width: 0.62em; height: 1.05em;
  background: var(--tinta); vertical-align: text-bottom;
  margin-left: 2px;
  animation: cursor 1.05s steps(1) infinite;
}
@keyframes cursor { 50% { opacity: 0; } }

.des-cuenta {
  margin-top: 26px; font-size: 14px; color: var(--tinta-2);
}
.des-cuenta strong { color: var(--rojo); font-weight: 600; font-variant-numeric: tabular-nums; }
.des-cuenta em { color: var(--tinta); font-weight: 500; }

.des-cta { display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
/* CTA — uso verde nº 2 */
.btn {
  font-family: var(--f-mono); font-weight: 600; font-size: 13.5px;
  text-decoration: none; padding: 16px 28px;
  background: var(--verde); color: var(--tinta);
  border: 2px solid var(--tinta);
  box-shadow: 4px 4px 0 0 var(--tinta);
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--tinta); }
.btn-tinta {
  font-family: var(--f-mono); font-size: 13.5px;
  text-decoration: none; padding: 16px 28px; color: var(--tinta);
  border: 2px solid var(--tinta); background: transparent;
  transition: background 0.15s, color 0.15s;
}
.btn-tinta:hover { background: var(--tinta); color: var(--papel); }

/* ═══════════ BLOQUES · ESTRUCTURA ═══════════ */
.bloque {
  max-width: var(--ancho); margin: 0 auto; width: 100%;
  padding: 96px clamp(20px, 4vw, 48px) 56px;
  border-top: 2px solid var(--tinta);
}
.bl-cab { display: grid; grid-template-columns: 110px 1fr; gap: 8px 28px; margin-bottom: 56px; }
.bl-folio { grid-column: 1; font-size: 13px; color: var(--tinta-2); padding-top: 14px; }
.bl-titulo {
  grid-column: 2;
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.0; letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
}
.bl-nota { grid-column: 2; max-width: 62ch; color: var(--tinta-2); font-size: 17px; }
.bl-nota em { color: var(--tinta); font-weight: 600; }

/* ═══════════ 02 · MANIFIESTO ═══════════ */
.bloque-manifiesto { padding-top: 140px; padding-bottom: 140px; }
.manifiesto {
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.12; letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "WONK" 1;
  max-width: 22ch;
}
.manifiesto em { font-style: italic; font-weight: 700; }
.manifiesto .p { opacity: 0.14; transition: opacity 0.45s ease; }
.manifiesto .p.on { opacity: 1; }

/* ═══════════ 03 · LIBRO MAYOR ═══════════ */
.mayor { list-style: none; border-top: 2px solid var(--tinta); }
.fila {
  display: grid; grid-template-columns: 72px 1fr 1.15fr; gap: 28px;
  align-items: baseline; padding: 30px 4px;
  border-bottom: 1px solid var(--linea);
  transition: background 0.18s;
}
.fila:hover { background: var(--papel-2); }
.fila-n { font-size: 13px; color: var(--tinta-2); transition: color 0.18s; }
.fila:hover .fila-n { color: var(--tinta); font-weight: 600; }
.fila-t {
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -0.01em;
  font-variation-settings: "opsz" 60;
}
.fila-d { font-size: 15.5px; color: var(--tinta-2); line-height: 1.6; }

/* ═══════════ 04 · CICLO ═══════════ */
.ciclo { margin-bottom: 56px; }
.ciclo-pista {
  position: relative; height: 46px;
  border: 2px solid var(--tinta); background: var(--papel-3);
}
.ciclo-pista::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--linea);
}
.ciclo-hito {
  position: absolute; top: 0; bottom: 0; left: var(--p);
  width: 2px; background: var(--tinta);
}
.ciclo-hito.h19 { width: 1px; background: var(--linea); }
.ciclo-hito i {
  position: absolute; top: -24px; left: -16px;
  font-family: var(--f-mono); font-style: normal; font-size: 11.5px; color: var(--tinta-2);
}
.ciclo-ahora {
  position: absolute; top: 50%; left: 0%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rojo); border: 2px solid var(--papel);
  box-shadow: 0 0 0 2px var(--rojo);
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ciclo-ahora b {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-weight: 600; font-size: 10px; letter-spacing: 0.12em;
  color: var(--rojo); white-space: nowrap;
}
.ciclo-horas {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--tinta-2); margin-top: 8px;
}

.registro { border: 2px solid var(--tinta); background: var(--papel-3); }
.reg-cab {
  display: block; font-size: 11.5px; letter-spacing: 0.1em;
  background: var(--tinta); color: var(--papel);
  padding: 10px 18px;
}
.tt { padding: 8px 18px; }
.tt-fila {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  padding: 12px 0; font-size: 14px;
  border-bottom: 1px dashed var(--linea-f);
}
.tt-fila:last-child { border-bottom: none; }
.tt-h { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-d { color: var(--tinta-2); }
.tt-d strong { color: var(--tinta); }

/* ═══════════ 05 · COBROS · DOCUMENTOS ═══════════ */
.documentos { display: grid; grid-template-columns: 1fr 1.2fr; gap: 26px; align-items: stretch; }
.doc {
  border: 2px solid var(--tinta); background: var(--papel-3);
  padding: 26px 26px 22px;
  position: relative;
}
.doc::after {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid var(--linea-f); pointer-events: none;
}
.doc-cab {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; letter-spacing: 0.1em; color: var(--tinta-2);
  padding-bottom: 14px; border-bottom: 2px solid var(--tinta);
  position: relative; z-index: 1;
}
.doc-sello-tinta {
  color: var(--tinta); border: 2px solid var(--tinta);
  padding: 3px 10px; transform: rotate(-3deg); font-weight: 600;
}
.doc-num { font-size: 15px; margin: 16px 0 6px; position: relative; z-index: 1; }
.doc-filas { list-style: none; position: relative; z-index: 1; }
.doc-filas li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px dashed var(--linea);
  font-size: 14.5px;
}
.doc-filas span { color: var(--tinta-2); font-size: 12.5px; padding-top: 2px; }
.doc-filas b { font-weight: 600; text-align: right; }
.doc-total { border-bottom: none; }
.doc-total b {
  font-family: var(--f-disp); font-weight: 900; font-size: 26px;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: lining-nums;
}
.libro { width: 100%; border-collapse: collapse; margin: 16px 0 4px; font-size: 14px; position: relative; z-index: 1; }
.libro th {
  text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--tinta-2); padding: 8px 6px; border-bottom: 2px solid var(--tinta);
}
.libro td { padding: 12px 6px; border-bottom: 1px solid var(--linea); }
.libro .id { font-size: 12.5px; color: var(--tinta-2); }
.libro .num { font-variant-numeric: tabular-nums; font-weight: 500; }
.doc-nota { font-size: 12.5px; color: var(--tinta-2); margin-top: 14px; line-height: 1.55; position: relative; z-index: 1; }
.doc-nota code { font-family: var(--f-mono); font-size: 11.5px; }

/* endpoint MCP — filete cian, uso cian nº 1 */
.endpoint {
  margin-top: 26px; border: 2px solid var(--tinta);
  border-top: 6px solid var(--cian);
  padding: 20px 24px; background: var(--papel-3);
}
.ep-k { font-size: 11.5px; letter-spacing: 0.12em; color: var(--tinta-2); margin-bottom: 8px; }
.endpoint > code { font-size: 14.5px; font-weight: 500; }
.ep-d { font-size: 12px; color: var(--tinta-2); margin-top: 10px; line-height: 1.9; }
.ep-d code { font-size: 11.5px; font-weight: 600; color: var(--tinta); }

/* ═══════════ 06 · CANAL DIRECTO ═══════════ */
.canal { border: 2px solid var(--tinta); background: var(--papel-3); }
.canal-cab {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11.5px; letter-spacing: 0.1em;
  background: var(--tinta); color: var(--papel);
  padding: 11px 18px;
}
.canal-log {
  padding: 22px 20px; min-height: 230px; max-height: 380px; overflow-y: auto;
  font-size: 15px; line-height: 1.65;
}
.canal-msj { margin-bottom: 14px; display: grid; grid-template-columns: 52px 1fr; gap: 12px; }
.canal-msj .quien {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--tinta-2); padding-top: 5px; white-space: nowrap;
}
.canal-msj .texto { max-width: 58ch; }
.canal-msj.one .texto { border-left: 3px solid var(--tinta); padding-left: 14px; }
.canal-msj.usted { grid-template-columns: 52px 1fr; }
.canal-msj.usted .texto { font-style: italic; color: var(--tinta-2); }
.canal-msj .texto .cursor {
  display: inline-block; width: 0.55em; height: 1em;
  background: var(--tinta); vertical-align: text-bottom; margin-left: 2px;
  animation: cursor 1.05s steps(1) infinite;
}
.canal-pistas {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 20px 16px;
}
.pista {
  font-family: var(--f-mono); font-size: 12px;
  background: transparent; color: var(--tinta);
  border: 1.5px solid var(--tinta); padding: 7px 12px;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.pista:hover { background: var(--tinta); color: var(--papel); }
.canal-forma {
  display: flex; align-items: center; gap: 12px;
  border-top: 2px solid var(--tinta); padding: 14px 20px;
}
.canal-forma label { font-size: 11.5px; letter-spacing: 0.08em; color: var(--tinta-2); white-space: nowrap; }
.canal-forma input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--tinta); font-family: var(--f-body); font-size: 15px; caret-color: var(--tinta);
}
.canal-forma button {
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--tinta);
  border: 2px solid var(--tinta); padding: 8px 16px;
  transition: background 0.15s, color 0.15s;
}
.canal-forma button:hover { background: var(--tinta); color: var(--papel); }

/* ═══════════ 07 · CONTACTO · SELLO ═══════════ */
.bloque-contacto { padding-bottom: 96px; }
.contacto-fila {
  display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 48px;
  align-items: center; margin-bottom: 56px;
}
.contacto-grande {
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(46px, 7.4vw, 104px);
  line-height: 1.0; letter-spacing: -0.02em;
  margin: 18px 0 30px;
  font-variation-settings: "opsz" 144, "WONK" 1;
}
.contacto-p { max-width: 46ch; color: var(--tinta-2); }
.sello-redondo {
  width: min(230px, 42vw); height: auto; color: var(--tinta);
  transform: rotate(9deg); opacity: 0.92;
  justify-self: end;
}
.legal {
  font-size: 11.5px; color: var(--tinta-2);
  border-top: 2px solid var(--tinta); padding-top: 20px;
}

/* ═══════════ PIE ═══════════ */
.pie {
  max-width: var(--ancho); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: space-between;
  padding: 26px clamp(20px, 4vw, 48px) 40px;
  font-size: 11.5px; color: var(--tinta-2);
}

/* ═══════════ REVELADOS ═══════════ */
[data-revelar] { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-revelar].in { opacity: 1; transform: none; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 880px) {
  .fila { grid-template-columns: 48px 1fr; }
  .fila-d { grid-column: 2; }
  .documentos { grid-template-columns: 1fr; }
  .bl-cab { grid-template-columns: 1fr; }
  .bl-folio { grid-column: 1; padding-top: 0; }
  .bl-titulo, .bl-nota { grid-column: 1; }
  .bloque { padding-top: 72px; padding-bottom: 48px; }
  .bloque-manifiesto { padding-top: 96px; padding-bottom: 96px; }
  .contacto-fila { grid-template-columns: 1fr; }
  .sello-redondo { justify-self: start; }
  .ciclo-hito i { font-size: 10px; }
}
@media (max-width: 560px) {
  .mh-sub { display: none; }
  .mh-marca { font-size: 34px; }
  .canal-cab span:last-child { display: none; }
  .despacho { padding-top: 64px; }
  .des-titulo { font-size: clamp(40px, 11vw, 56px); }
  .cinta { font-size: 12.5px; min-height: 300px; padding: 20px 6px; }
  .tt-fila { grid-template-columns: 86px 1fr; gap: 10px; font-size: 13px; }
  .doc-filas li { flex-direction: column; gap: 3px; }
  .doc-filas b { text-align: left; }
  .ciclo-ahora b { display: none; }
  .canal-msj { grid-template-columns: 44px 1fr; gap: 8px; }
  .canal-forma label { display: none; }
}

/* ═══════════ MOVIMIENTO REDUCIDO ═══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulso, .grano, .cinta-cursor, .canal-msj .texto .cursor { animation: none; }
  .ciclo-ahora { transition: none; }
  [data-revelar] { opacity: 1; transform: none; transition: none; }
  .manifiesto .p { opacity: 1; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   v4.4 · ELEMENTOS MODERNOS — patrones 21st.dev traducidos a tinta
   Rotador de palabras · marquesina continua · bento con contadores ·
   progreso de lectura · indicador de escritura · tablero de ops.
   Regla de casa: color PLANO, cero degradados, cero neón.
   ═══════════════════════════════════════════════════════════════ */

/* progreso de lectura */
.progreso {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--tinta); z-index: 60;
}

/* nav de páginas en la cabecera */
.mh-nav { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.06em; }
.mh-nav a { text-decoration: none; color: var(--tinta-2); padding: 4px 10px; border: 1.5px solid transparent; transition: color 0.15s, border-color 0.15s; }
.mh-nav a:hover { color: var(--tinta); border-color: var(--linea); }
.mh-nav a[aria-current="page"] { color: var(--tinta); border-color: var(--tinta); font-weight: 600; }
.mh-nav i { width: 5px; height: 5px; background: var(--verde); transform: rotate(45deg); }

/* rotador de palabras (21st.dev: word rotate) */
.des-rotor {
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(22px, 3vw, 34px); font-variation-settings: "opsz" 60;
  margin-bottom: 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.rotor { display: inline-grid; overflow: hidden; height: 1.3em; align-items: start; }
.rotor-palabra {
  grid-area: 1 / 1; font-style: italic; color: var(--tinta);
  border-bottom: 4px solid var(--verde); padding: 0 8px 2px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
}
.rotor-palabra.sale { transform: translateY(-115%); opacity: 0; transition-duration: 0.3s; }
.rotor-palabra.entra { transform: translateY(115%); opacity: 0; transition: none; }
.rotor-punto { width: 12px; height: 12px; background: var(--rojo); transform: rotate(45deg); align-self: center; }

/* marquesina continua (21st.dev: marquee) */
.marquesina {
  border-top: 2px solid var(--tinta);
  background: var(--tinta); color: var(--papel); overflow: hidden;
}
.marquesina-pista {
  display: inline-flex; white-space: nowrap;
  animation: desfile 32s linear infinite; will-change: transform;
}
.marquesina:hover .marquesina-pista { animation-play-state: paused; }
.marquesina-l {
  display: inline-block; padding: 15px 0;
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em;
}
.rm { display: inline-block; width: 7px; height: 7px; margin: 0 22px; vertical-align: middle; transform: rotate(45deg); }
.rm-verde { background: var(--verde); }
.rm-cian { background: var(--cian); }
.rm-rojo { background: var(--rojo); }
@keyframes desfile { to { transform: translateX(-50%); } }

/* bento (21st.dev: bento grid) */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.celda {
  border: 2px solid var(--tinta); background: var(--papel-3);
  padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 12px;
  min-height: 150px; transition: transform 0.18s, box-shadow 0.18s;
}
.celda:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--tinta); }
.b-reloj { grid-column: span 2; }
.celda-k { font-size: 11px; letter-spacing: 0.12em; color: var(--tinta-2); }
.celda-d { font-size: 11.5px; color: var(--tinta-2); margin-top: auto; }
.b-hora {
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(48px, 6.5vw, 84px); line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums; font-variation-settings: "opsz" 144;
}
.b-cuenta { justify-content: space-between; }
.b-cuenta-num { font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.b-num { justify-content: space-between; }
.b-cifra {
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(44px, 5.4vw, 72px); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 144;
}
.enlace-tablero { color: var(--tinta); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--cian); }
.enlace-tablero:hover { background: var(--tinta); color: var(--papel); border-bottom-color: var(--tinta); }

/* indicador de escritura (21st.dev: typing dots) */
.dots { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: middle; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta); animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.18s; }
.dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  45% { opacity: 1; transform: translateY(-4px); }
}

/* ═══════════ TABLERO DE OPERACIONES · página completa ═══════════ */
.tab-cuerpo { max-width: var(--ancho); margin: 0 auto; width: 100%; padding: 56px clamp(20px, 4vw, 48px) 64px; }
.tab-titulo {
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(44px, 7vw, 92px); line-height: 0.95; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "WONK" 1;
}
.tab-nota { max-width: 58ch; color: var(--tinta-2); margin-top: 18px; font-size: 17px; }
.tab-cab { margin-bottom: 44px; }
.tablero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tablero .celda { min-height: 150px; }
.g-reloj { grid-column: span 2; grid-row: span 2; justify-content: space-between; }
.g-ciclo, .g-mcp, .g-libro, .g-pulso, .g-despacho { grid-column: span 2; }
.tab-hora-g {
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(48px, 7.4vw, 108px); line-height: 0.95; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums; font-variation-settings: "opsz" 144;
  white-space: nowrap;
}
.tab-fecha { font-size: 12px; color: var(--tinta-2); letter-spacing: 0.08em; text-transform: uppercase; }
.estado-txt { font-family: var(--f-mono); font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; white-space: nowrap; }
.estado-fila { display: flex; align-items: center; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.estado-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); animation: latido 2.2s ease-in-out infinite; }
.mcp-cod {
  font-family: var(--f-mono); font-size: 12.5px; word-break: break-all;
  line-height: 1.8; border-left: 3px solid var(--cian); padding-left: 14px; margin-top: auto;
}
.tab-herr { list-style: none; font-family: var(--f-mono); font-size: 12.5px; line-height: 2; color: var(--tinta-2); margin-top: auto; columns: 2; column-gap: 24px; }
.tab-herr b { color: var(--tinta); font-weight: 600; }
/* pulso del día: 12 barras planas de 2 horas, la actual en verde */
.pulso-dia { display: flex; align-items: flex-end; gap: 5px; height: 96px; margin-top: auto; }
.pulso-dia i { flex: 1; background: var(--tinta); transition: opacity 0.3s; }
.pulso-dia i.baja { height: 24%; opacity: 0.22; }
.pulso-dia i.alta { height: 82%; }
.pulso-dia i.ahora { background: var(--verde); outline: 2px solid var(--tinta); outline-offset: 2px; }
.pulso-eje { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; color: var(--tinta-2); margin-top: 8px; }

/* responsive v4.4 */
@media (max-width: 880px) {
  .bento, .tablero { grid-template-columns: repeat(2, 1fr); }
  .b-reloj, .g-reloj, .g-ciclo, .g-mcp, .g-libro, .g-pulso, .g-despacho { grid-column: span 2; }
  .tab-herr { columns: 1; }
}
@media (max-width: 560px) {
  .bento, .tablero { grid-template-columns: 1fr; }
  .b-reloj, .g-reloj, .g-ciclo, .g-mcp, .g-libro, .g-pulso, .g-despacho { grid-column: span 1; }
  .marquesina-l { font-size: 11px; letter-spacing: 0.1em; }
  .rm { margin: 0 14px; }
}

/* movimiento reducido v4.4 */
@media (prefers-reduced-motion: reduce) {
  .marquesina-pista { animation: none; }
  .marquesina { overflow-x: auto; }
  .rotor-palabra { transition: none; }
  .dots i { animation: none; opacity: 0.6; }
  .celda, .celda:hover { transform: none; box-shadow: none; }
  .estado-dot { animation: none; }
}

/* ═════════ potencia a la venta · v4.5 ═════════ */
.pot-tasa {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.1em; color: var(--tinta-2);
  border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--linea);
  padding: 13px 2px; margin: 26px 0 6px;
}
.pot-tasa b {
  font-size: 20px; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.pot-tasa .pulso { background: var(--verde); }
.cartel { margin-top: 6px; }
.cartel-fila {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px 32px;
  border-bottom: 1px solid var(--linea);
  padding: 24px 12px 20px; position: relative;
  transition: background 0.25s ease;
}
.cartel-fila::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--verde); transition: width 0.25s ease;
}
.cartel-fila:hover { background: rgba(20, 18, 12, 0.035); }
.cartel-fila:hover::before { width: 4px; }
.cartel-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; grid-column: 1 / -1; }
.cartel-t {
  font-family: var(--f-disp); font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(21px, 2.6vw, 27px);
}
.vivo {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  background: var(--verde); color: var(--tinta);
  padding: 3px 9px 2px; border: 1px solid var(--tinta);
}
.cartel-plazo {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  color: var(--tinta-2); border: 1px solid var(--linea); padding: 3px 9px 2px;
}
.cartel-d { grid-column: 1; font-size: 14.5px; line-height: 1.62; color: var(--tinta-2); margin: 0; }
.cartel-p {
  grid-column: 2; align-self: end; justify-self: end; text-align: right;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--tinta); margin: 0;
}
.pot-calc {
  border: 2px solid var(--tinta); box-shadow: 5px 5px 0 var(--verde);
  background: rgba(20, 18, 12, 0.02);
  padding: 20px 22px 16px; margin: 30px 0 8px; position: relative; z-index: 1;
}
.pot-calc-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--tinta-2); margin: 0 0 14px; }
.pot-calc-forma { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pot-calc-forma label { font-size: 11px; letter-spacing: 0.12em; color: var(--tinta-2); }
.pot-calc-forma select,
.pot-calc-forma input {
  font-family: var(--f-mono); font-size: 13px; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--tinta);
  padding: 9px 12px; border-radius: 0; max-width: 100%;
}
.pot-calc-forma select { max-width: 380px; }
.pot-calc-forma input { width: 88px; text-align: right; }
.pot-calc-usd { font-size: 13px; letter-spacing: 0.04em; }
.pot-calc-usd b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pot-calc-flecha { color: var(--cian); font-weight: 700; font-size: 17px; }
.pot-calc-xmr b {
  font-family: var(--f-disp); font-weight: 900; font-size: 27px; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pot-calc-xmr i { font-style: normal; font-size: 12px; color: var(--tinta-2); letter-spacing: 0.1em; }
.pot-calc-nota { font-size: 11.5px; color: var(--tinta-2); margin: 14px 0 0; letter-spacing: 0.03em; }
.pot-calc-nota code { font-size: 11px; }
@media (max-width: 880px) {
  .cartel-fila { grid-template-columns: 1fr; gap: 8px; }
  .cartel-d, .cartel-p { grid-column: 1; }
  .cartel-p { justify-self: start; text-align: left; }
}
@media (max-width: 560px) {
  .pot-calc { padding: 16px 14px 14px; }
  .pot-calc-forma select { max-width: 100%; }
  .pot-calc-xmr b { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .cartel-fila, .cartel-fila::before { transition: none; }
}