/* ══════════════════════════════════════════════════════════════════════
   KORNETH — la portada, sobre el sistema de la referencia
   ══════════════════════════════════════════════════════════════════════
   Copia del sistema de `brighthub.casethemes.net/automation-saas/`, medido
   en su propia página y aprobado en maqueta antes de portarlo:

     fondo #F3F4EF · tarjeta #FFF · oscuro #132436 · bloque #FB6514
     radios 12 / 44 / píldora · contenedor 1.280
     titular 64 px peso 500 interletrado −,05em · cuerpo 16/1,35 −,02em
     acentos #007AFF #FF5AAF #7B5AFF #FF9500 #34C759

   Aquí NO se adapta nada: la cara es Inter, los acentos son los cinco de la
   referencia y el bloque del titular va en su naranja. Lo único propio es
   el contenido.

   Todas las clases llevan prefijo `rx-`. El renombrado desde la maqueta se
   comprobó por DIFERENCIA DE PÍXELES contra el render aprobado: 0 en los
   cuatro fotogramas. Sólo gobierna la portada; quitar la línea del encolado
   devuelve el sitio anterior.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ Sistema medido en brighthub.casethemes.net/automation-saas/ ══
   fondo #F3F4EF · tarjeta #FFF · oscuro #132436 · radios 12/44/píldora
   contenedor 1280 · titular 80/64 px peso 500 interletrado −.05em
   acentos #007AFF #FF5AAF #7B5AFF #FF9500 #34C759 · bloque #FB6514      */
/* ══ La cara ═══════════════════════════════════════════════════════════
   Inter va SERVIDA POR EL TEMA y bajo un nombre propio, y las dos cosas
   tienen su razón medida.

   · **El nombre.** WooCommerce trae su propio `@font-face` para la familia
     «Inter» apuntando a `assets/fonts/Inter-VariableFont_slnt,wght.woff2`,
     que pesa **319 kB**. Basta escribir `font-family:Inter` en cualquier
     hoja para que el navegador prefiera esa declaración local a la de
     Google y se descargue la variable entera. La página pasó de 344 a 668
     kB por esto. Con un nombre que no colisiona —«Inter KN»— eso no puede
     ocurrir.
   · **El servirla aquí.** El subconjunto latino de la variable de Google
     pesa 47 kB y cubre el castellano y el inglés (U+0000–00FF lleva las
     acentuadas, la eñe y los signos de apertura). Se sirve desde el propio
     dominio: una petición menos y ninguna dependencia de terceros. */
@font-face{
  font-family:"Inter KN";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#F3F4EF; --card:#FFFFFF; --ink:#132436; --ink2:#1C2D3E;
  --tx:#181D27; --tx2:#535862; --tx3:#7A828F; --line:#E7E8E3;
  --azul:#007AFF; --rosa:#FF5AAF; --mora:#7B5AFF; --nara:#FF9500; --verd:#34C759;
  --bloque:#FB6514;
  --r:12px; --rp:44px; --rpill:999px; --w:1280px;
  --sh:0 1px 2px rgba(19,36,54,.04),0 10px 30px -14px rgba(19,36,54,.14);
  --sh2:0 2px 6px rgba(19,36,54,.06),0 22px 48px -20px rgba(19,36,54,.22);
}

/* La portada entera vive en el sistema de la referencia: su fondo, su cara
   y su interletrado. Va acotado a `body.rx` para no tocar las interiores,
   que siguen con el sistema anterior. */
body.rx{background:var(--bg);font-family:"Inter KN",system-ui,sans-serif;
  color:var(--tx);font-size:16px;line-height:1.35;letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased}
body.rx .kn-amb{display:none}
.rx-w{width:min(var(--w),100% - 3rem);margin-inline:auto}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}

/* ── barra ───────────────────────────────────────────────────────── */
.rx-nav{position:sticky;top:1rem;z-index:50;margin-top:1rem}
.rx-nav__in{background:var(--ink);border-radius:var(--rpill);height:72px;
  display:flex;align-items:center;gap:1.5rem;padding:0 .7rem 0 1.9rem;
  box-shadow:var(--sh2)}
.rx-nav__m{display:flex;align-items:center;gap:.55rem;color:#fff;font-weight:600;
  font-size:1.22rem;letter-spacing:-.045em;margin-right:auto}
.rx-nav__m svg{width:24px;height:24px}
.rx-nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;font-size:.9375rem;
  color:rgba(255,255,255,.9)}
.rx-nav ul a:hover{color:#fff}
.rx-nav__d{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
.rx-nav__d .rx-lg{color:rgba(255,255,255,.9);font-size:.9375rem}
.rx-btn-w{background:#fff;color:var(--ink);border-radius:var(--rpill);
  padding:.72rem 1.35rem;font-size:.9375rem;font-weight:600;white-space:nowrap}
.rx-nav__idm{display:flex;gap:.35rem;font-size:.8125rem;color:rgba(255,255,255,.6);margin-right:.4rem}
.rx-nav__idm b{color:#fff;font-weight:600}
@media (max-width:1100px){.rx-nav ul{display:none}}

/* ── panel ───────────────────────────────────────────────────────── */
.rx-panel{background:var(--card);border-radius:var(--rp);
  padding:clamp(2.6rem,5vw,5rem) 0;margin-top:1rem}
.rx-panel--dark{background:var(--ink);color:#fff}
.rx-panel--dark .rx-lead,.rx-panel--dark p{color:#C3CEDC}
.rx-pw{width:min(1120px,100% - 4rem);margin-inline:auto}

/* ── tipografía ──────────────────────────────────────────────────── */
.rx-h1{font-size:clamp(2.3rem,1.25rem + 2.9vw,4rem);font-weight:500;line-height:1.06;
  letter-spacing:-.05em;color:var(--ink)}
.rx-h2{font-size:clamp(2.1rem,1.2rem + 3vw,4rem);font-weight:500;line-height:1.08;
  letter-spacing:-.05em;color:var(--ink)}
.rx-panel--dark .rx-h2{color:#fff}
.rx-lead{font-size:1rem;line-height:1.42;color:var(--tx2);max-width:46ch}
.rx-bloque{background:var(--bloque);color:#fff;border-radius:.14em;
  padding:0 .2em .06em;display:inline-block;margin-inline:-.03em;line-height:1.02}
.rx-tok{display:inline-flex;align-items:center;justify-content:center;
  vertical-align:-.03em;background:#fff;border:1px solid var(--line);
  border-radius:var(--rpill);box-shadow:var(--sh);
  width:1.16em;height:.66em;margin-inline:.04em}
.rx-tok svg{width:.34em;height:.34em;color:var(--azul)}
.rx-tokd{display:inline-grid;place-items:center;width:.74em;height:.74em;
  border-radius:50%;background:var(--mora);vertical-align:-.06em;margin-inline:.04em}
.rx-tokd svg{width:.4em;height:.4em;color:#fff}

/* ── botones ─────────────────────────────────────────────────────── */
.rx-btn{display:inline-flex;align-items:center;gap:.75rem;background:var(--ink);
  color:#fff;border-radius:var(--rpill);padding:.4rem .42rem .4rem 1.35rem;
  font-size:.9375rem;font-weight:600;white-space:nowrap}
.rx-btn i{display:grid;place-items:center;width:2.35rem;height:2.35rem;border-radius:50%;
  background:#fff;color:var(--ink)}
.rx-btn i svg{width:1rem;height:1rem}
.rx-btn--claro{background:#fff;color:var(--ink)}
.rx-btn--claro i{background:var(--ink);color:#fff}
.rx-txtlink{font-size:.9375rem;font-weight:600;color:var(--ink);
  border-bottom:1.5px solid var(--ink);padding-bottom:1px}

/* ── píldoras ────────────────────────────────────────────────────── */
.rx-pill{display:inline-flex;align-items:center;gap:.5rem;background:#F1F2ED;
  border-radius:var(--rpill);padding:.5rem .95rem;font-size:.875rem;font-weight:500}
.rx-pill--w{background:#fff;box-shadow:var(--sh);border:1px solid var(--line)}
.rx-pill i{display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%}
.rx-pill i svg{width:.8rem;height:.8rem;color:#fff}
.rx-rot{position:absolute;border-radius:var(--rpill);padding:.4rem .85rem;
  font-size:.8125rem;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 18px -10px rgba(19,36,54,.5)}

/* ── héroe ───────────────────────────────────────────────────────── */
.rx-hero{position:relative;overflow:hidden}
.rx-hero__in{display:grid;gap:clamp(2rem,4vw,3rem);align-items:center;position:relative;z-index:1}
@media (min-width:1000px){.rx-hero__in{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}}
.rx-hero .rx-h1{margin:1.4rem 0 0}
@media (max-width:999px){.rx-hero .rx-h1 br{display:none}}
.rx-hero .rx-lead{margin-top:1.6rem}
.rx-hero__acc{margin-top:2.1rem;display:flex;align-items:center;gap:1.9rem;flex-wrap:wrap}
.rx-hero__pie{margin-top:2.6rem;display:flex;gap:.7rem;flex-wrap:wrap}
.rx-hero__aval{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;font-size:.9375rem;
  color:var(--tx2)}
/* la retícula de puntos, como el fondo del flujo de la referencia */
.rx-puntos{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,#D9DBD4 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(78% 74% at 74% 46%,#000 0,#000 42%,transparent 76%);
          mask-image:radial-gradient(78% 74% at 74% 46%,#000 0,#000 42%,transparent 76%)}

/* ── el flujo ────────────────────────────────────────────────────── */
.rx-flujo{display:grid;gap:1.5rem;position:relative}
.rx-fc{background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh2);padding:1.05rem 1.15rem;position:relative}
.rx-fc__h{display:flex;align-items:center;gap:.7rem}
.rx-fc__i{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:9px;flex:none}
.rx-fc__i svg{width:1.1rem;height:1.1rem;color:#fff}
.rx-fc__h b{font-size:.9375rem;font-weight:600;letter-spacing:-.025em}
.rx-fc__h>span:last-child{margin-left:auto;color:#C3C8CE;letter-spacing:.1em;font-size:.9rem}
.rx-fc ul{list-style:none;margin:.85rem 0 0;padding:0;display:grid;gap:.5rem}
.rx-fc li{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--tx2)}
.rx-fc li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--verd);flex:none}
.rx-chips{display:flex;gap:.35rem;flex-wrap:wrap;margin-left:.1rem}
.rx-chip{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line);
  border-radius:6px;padding:.18rem .45rem;font-size:.72rem;font-weight:600;background:#fff}
.rx-chip b{width:.5rem;height:.5rem;border-radius:2px;display:inline-block}
/* el riel entre tarjetas, con su punto */
.rx-riel{position:absolute;left:2.1rem;top:100%;width:2px;height:1.5rem;background:var(--line)}
.rx-riel::after{content:"";position:absolute;left:-3px;bottom:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--azul);border:2px solid #fff}

/* ── franja de marcas ────────────────────────────────────────────── */
.rx-marcas{text-align:center;padding:clamp(2.2rem,4vw,3.4rem) 0 clamp(1.4rem,2vw,2rem)}
.rx-marcas p{font-size:.9375rem;color:var(--tx3);margin-bottom:1.6rem}
.rx-marcas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.rx-marcas li{font-size:1.3rem;font-weight:700;letter-spacing:-.04em;color:#8B938A}

/* ── encabezado de zona ──────────────────────────────────────────── */
.rx-cab{display:grid;gap:1.8rem;align-items:end;position:relative}
@media (min-width:900px){.rx-cab{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.rx-cab__d{display:grid;gap:1.5rem;justify-items:start}

/* ── tarjetas ────────────────────────────────────────────────────── */
.rx-rej{display:grid;gap:1rem;margin-top:clamp(2.2rem,4vw,3.2rem)}
@media (min-width:640px){.rx-rej{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.rx-rej--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rx-rej--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rx-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem 1.4rem 1.6rem}
.rx-card h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.03em;margin:1.5rem 0 .55rem}
.rx-card p{font-size:.9375rem;line-height:1.45;color:var(--tx2)}
.rx-disc{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%}
.rx-disc svg{width:1.3rem;height:1.3rem;color:#fff}
.rx-panel--dark .rx-card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)}
.rx-panel--dark .rx-card h3{color:#fff}

/* ── fila mixta ──────────────────────────────────────────────────── */
.rx-mix{display:grid;gap:1rem;margin-top:1rem}
@media (min-width:700px){.rx-mix{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.rx-mix{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rx-mc{border-radius:20px;overflow:hidden;position:relative;min-height:19rem;display:flex;
  flex-direction:column}
.rx-mc--foto{background:#fff;border:1px solid var(--line);padding:.6rem}
.rx-mc--foto .rx-m{position:relative;border-radius:16px;overflow:hidden;flex:1}
.rx-mc--foto .rx-m img{width:100%;height:100%;object-fit:cover}
.rx-mc--foto .rx-et{position:absolute;left:.75rem;top:.75rem;background:#fff;
  border-radius:var(--rpill);padding:.3rem .7rem;font-size:.8125rem;font-weight:600;
  display:flex;align-items:center;gap:.35rem;box-shadow:var(--sh)}
.rx-mc--foto .rx-et svg{width:.85rem;height:.85rem;color:var(--nara)}
.rx-mc--foto .rx-pie{padding:.85rem .55rem .35rem;display:grid;gap:.3rem}
.rx-mc--foto .rx-pie b{font-size:.9375rem;font-weight:600;letter-spacing:-.03em}
.rx-mc--foto .rx-pie span{font-size:.8125rem;color:var(--tx3)}
.rx-mc--cifra{background:var(--mora);color:#fff;padding:1.6rem 1.5rem;justify-content:space-between}
.rx-mc--cifra b{font-size:clamp(2.4rem,1.4rem + 2.6vw,3.4rem);font-weight:500;line-height:1;
  letter-spacing:-.05em}
.rx-mc--cifra span{font-size:1.25rem;font-weight:500;letter-spacing:-.03em;line-height:1.15}
.rx-mc--tinta{background:var(--ink);color:#fff;padding:1.5rem 1.4rem;gap:1.1rem}
.rx-mc--tinta q{font-size:1.0625rem;font-weight:500;letter-spacing:-.03em;line-height:1.3;
  quotes:none;display:block}
.rx-mc--tinta small{color:#94A2B4;font-size:.8125rem;display:block;margin-top:.5rem}
.rx-mc--tinta .rx-m{margin-top:auto;border-radius:12px;overflow:hidden;height:9.5rem}
.rx-mc--tinta .rx-m img{width:100%;height:100%;object-fit:cover}
.rx-mc--marb{background:#fff;border:1px solid var(--line);padding:1.5rem 1.4rem}
.rx-mc--marb h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.03em;max-width:15ch}
.rx-mc--marb h3 em{font-style:normal;color:var(--tx3)}
.rx-mc--marb .rx-z{position:relative;flex:1;margin-top:.8rem}

/* ── acordeón ────────────────────────────────────────────────────── */
.rx-qa{margin-top:clamp(2.2rem,4vw,3.2rem)}
.rx-qa details{border-top:1px solid var(--line)}
.rx-qa details:last-of-type{border-bottom:1px solid var(--line)}
.rx-qa summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:2.4rem minmax(0,1fr) 2.6rem;gap:1rem;align-items:center;
  padding:1.5rem 0;font-size:1.125rem;font-weight:600;letter-spacing:-.03em}
.rx-qa summary::-webkit-details-marker{display:none}
.rx-qa summary i{font-style:normal;color:var(--tx3);font-weight:500}
.rx-qa summary em{font-style:normal;display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border-radius:50%;background:#F1F2ED;font-size:1.15rem}
.rx-qa summary em::before{content:"+"}
.rx-qa details[open] summary em{background:var(--ink);color:#fff}
.rx-qa details[open] summary em::before{content:"\2212"}
.rx-qa details[open] summary i{color:var(--azul)}
.rx-qa p{padding:0 4.6rem 1.5rem 3.4rem;color:var(--tx2);line-height:1.55;font-size:.9375rem}

/* ── cierre ──────────────────────────────────────────────────────── */
.rx-cierre{text-align:center;display:grid;gap:1.8rem;justify-items:center}
.rx-cierre .rx-h2{max-width:18ch}

@media (max-width:700px){
  .rx-qa p{padding:0 0 1.4rem}
  .rx-nav__in{height:64px;padding-left:1.2rem}
  .rx-nav__idm,.rx-nav__d .rx-lg{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   INTEGRACIÓN CON EL TEMA
   ══════════════════════════════════════════════════════════════════════
   Lo de arriba es la maqueta tal cual. Lo de aquí abajo es lo que hace
   falta para que las piezas que NO emite la portada —la barra, el pie y el
   formulario, que vienen del tema— entren en el mismo sistema. Todo va
   acotado a `body.rx`. */

/* ── la barra ─────────────────────────────────────────────────────────
   El marcado es el del tema: una rejilla de tres columnas con la marca al
   centro. La maqueta la lleva a la IZQUIERDA, como la referencia, así que
   los dos contenedores se disuelven con `display:contents` —la misma
   técnica que el tema ya usa para plegar el menú— y las piezas se ordenan
   sueltas. El menú queda centrado entre dos `auto`. */
body.rx .kn-barra{background:var(--ink);border:0;border-radius:var(--rpill);
  box-shadow:var(--sh2);width:min(var(--w),100% - 3rem);
  top:1rem;margin:1rem auto 0}
body.rx .kn-barra.is-fija{background:rgba(19,36,54,.95);box-shadow:var(--sh2)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body.rx .kn-barra.is-fija{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
body.rx .kn-barra .kn-portada{width:auto;max-width:none;margin-inline:0}
body.rx .kn-barra__in{padding:0 .7rem 0 1.9rem;min-height:72px}
body.rx .kn-logo,body.rx .kn-barra a{color:#fff}
body.rx .kn-logo{font-family:"Inter KN",system-ui,sans-serif;font-weight:600;
  font-size:1.22rem;letter-spacing:-.045em;line-height:1}
body.rx .kn-barra .kn-marca{filter:brightness(0) invert(1)}
body.rx .kn-nav a{color:rgba(255,255,255,.9);font-size:.9375rem;border:0;
  padding:.3rem .1rem}
body.rx .kn-nav a:hover{color:#fff;background:none}
body.rx .kn-nav a[aria-current]{color:#fff;background:none;
  text-decoration:underline;text-underline-offset:.4em;
  text-decoration-thickness:1.5px}
body.rx .kn-barra .kn-enlace{color:rgba(255,255,255,.9);font-size:.9375rem;
  text-decoration:none;border:0}
body.rx .kn-barra .kn-enlace:hover{color:#fff}
body.rx .kn-barra .kn-idioma{font-size:.8125rem;color:rgba(255,255,255,.55);gap:.35rem}
body.rx .kn-barra .kn-idioma a{color:rgba(255,255,255,.55);border:0}
body.rx .kn-barra .kn-idioma a[aria-current]{color:#fff;font-weight:600}
/* la salida: píldora blanca sobre la barra oscura */
body.rx .kn-barra .kn-b--sello{background:#fff;border-color:#fff;color:var(--ink);
  border-radius:var(--rpill);font-family:"Inter KN",system-ui,sans-serif;font-weight:600;
  font-size:.9375rem;box-shadow:none;min-height:44px;padding-inline:1.35rem}
body.rx .kn-barra .kn-b--sello::after{content:none}
body.rx .kn-barra .kn-b--sello:hover{background:#E9EAE4;border-color:#E9EAE4}
body.rx .kn-barra .kn-b--linea{color:#fff;border-color:rgba(255,255,255,.4);
  border-radius:var(--rpill);box-shadow:none}
body.rx .kn-menu{color:#fff}
@media (min-width:1100px){
  body.rx .kn-barra__in{display:flex;align-items:center;gap:1.5rem}
  body.rx .kn-barra__izq,body.rx .kn-barra__der{display:contents}
  body.rx .kn-barra__izq>.kn-idioma{display:none}
  body.rx .kn-logo{order:1}
  body.rx .kn-nav--izq{order:2;margin-left:auto}
  body.rx .kn-nav--der{order:3}
  body.rx .kn-barra__acc{order:4;margin-left:auto;gap:1.1rem}
  body.rx .kn-idioma--pisos{display:flex}
}

/* ── el formulario ────────────────────────────────────────────────────
   Los controles del tema entran en el sistema: esquina de tarjeta, filete
   claro y la cara de la referencia. */
body.rx .kn-forma{margin-top:2rem;display:grid;gap:0 1.25rem;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){body.rx .kn-forma{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.rx .kn-forma__ancho{grid-column:1/-1}
body.rx .kn-campo{display:grid;gap:.45rem;margin-bottom:1.1rem}
body.rx .kn-campo>span{font-size:.875rem;font-weight:500;color:var(--tx2)}
body.rx .kn-campo input,body.rx .kn-campo select,body.rx .kn-campo textarea{
  font-family:"Inter KN",system-ui,sans-serif;font-size:.9375rem;color:var(--tx);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:.8rem .9rem;width:100%;letter-spacing:-.01em}
body.rx .kn-campo textarea{min-height:8rem;resize:vertical}
body.rx .kn-campo :focus-visible{outline:2px solid var(--azul);outline-offset:1px;
  border-color:var(--azul)}
body.rx .kn-forma .kn-b--sello{background:var(--ink);border-color:var(--ink);
  border-radius:var(--rpill);font-family:"Inter KN",system-ui,sans-serif;font-weight:600;
  padding:.9rem 1.6rem;box-shadow:none;min-height:0}
body.rx .kn-forma .kn-b--sello::after{content:none}
body.rx .kn-forma .kn-b--sello:hover{background:#1C2D3E;border-color:#1C2D3E}
body.rx .kn-util{display:grid;gap:1.4rem;align-content:start;margin-top:2rem}
body.rx .kn-util>div{padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
body.rx .kn-util>div:last-child{padding-bottom:0;border-bottom:0}
body.rx .kn-util dt{margin:0 0 .3rem;font-size:.8125rem;font-weight:600;
  letter-spacing:.02em;color:var(--tx3)}
body.rx .kn-util dd{margin:0;font-size:.9375rem;color:var(--tx2);line-height:1.45}
body.rx .kn-util dd a{text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:var(--line)}
@media (min-width:1000px){
  body.rx .rx-contacto{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);
    gap:3rem;align-items:start}
  body.rx .rx-contacto>.rx-cab{grid-column:1/-1}
}

/* ── el pie ───────────────────────────────────────────────────────────
   Se queda donde está, sobre el fondo claro, pero con la cara, la medida y
   los filetes del sistema nuevo. */
body.rx .kn-pie{border-top:1px solid var(--line);margin-top:3rem;
  font-family:"Inter KN",system-ui,sans-serif}
body.rx .kn-pie__in,body.rx .kn-pie__cierre{width:min(var(--w),100% - 3rem)}
body.rx .kn-pie__col h2{font-size:.8125rem;font-weight:600;color:var(--tx3);
  letter-spacing:.02em;width:100%}
body.rx .kn-pie__col a,body.rx .kn-pie__d{color:var(--tx2);font-size:.9375rem}
body.rx .kn-pie__cierre{color:var(--tx3);font-size:.8125rem;border-color:var(--line)}
body.rx .kn-pagos li{border-color:var(--line);color:var(--tx3);border-radius:6px}
@media (min-width:760px){
  body.rx .kn-pie__in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
    justify-items:start;text-align:left;gap:3rem;align-items:start}
  body.rx .kn-pie__col{display:block}
  body.rx .kn-pie__d,body.rx .kn-pie__marca .kn-logo{margin-inline:0}
  body.rx .kn-pagos{justify-content:flex-start}
}
body.rx .kn-pie .kn-logo{color:var(--ink);font-size:1.15rem}
body.rx .kn-pie .kn-marca{filter:none}

/* ── el foco, visible en todo ─────────────────────────────────────────── */
body.rx a:focus-visible,body.rx summary:focus-visible,
body.rx button:focus-visible{outline:3px solid var(--azul);outline-offset:3px;
  border-radius:8px}
@media (prefers-reduced-motion:reduce){body.rx *{transition:none!important}}

/* La lista que sustituye a las pastillas giradas para quien no las ve. Se
   saca de la vista sin `display:none`, que la quitaría también del lector. */
.kn-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── la cara, también en los encabezados ──────────────────────────────
   `app.css` declara `h1,h2,h3{font-family:var(--fd)}` —Familjen Grotesk— y
   eso gana a la familia heredada de `body.rx`, así que los titulares de
   la portada salían compuestos con la cara vieja y el resto con Inter. La
   maqueta que se aprobó va ENTERA en Inter: la cara es la mitad de lo que
   hace que se parezca a la referencia. Los pesos no se tocan; sólo la
   familia. */
body.rx h1,body.rx h2,body.rx h3,body.rx h4,
body.rx .rx-h1,body.rx .rx-h2,body.rx .kn-logo,body.rx .kn-logo *,
body.rx .rx-fc__h b,body.rx .rx-qa summary,body.rx .rx-mc b,
body.rx .rx-mc span,body.rx .rx-pill b,body.rx .rx-chip,
body.rx .rx-marcas li,body.rx .kn-b,body.rx button,body.rx input,
body.rx select,body.rx textarea{
  font-family:"Inter KN",system-ui,-apple-system,"Segoe UI",sans-serif}

/* ══ Contraste ═════════════════════════════════════════════════════════
   La referencia se permite grises muy apagados porque es una demo; korneth
   es una casa de cambio y tiene que cumplir AA. Ocho medidas quedaban por
   debajo y se corrigen aquí, con el mínimo cambio de tono que las pasa.

   El grueso venía de UN token: `--tx3` (#7A828F) mide 3,88:1 sobre blanco y
   3,51 sobre el papel, y lo usan el pie de la tarjeta-foto, el «en cada
   partida» de los marbetes, el numeral del acordeón, los rótulos de la
   columna útil y el cierre del pie. Bajándolo a #646B78 pasan las cinco de
   una vez —5,37 sobre blanco y 4,86 sobre el papel— y el gris sigue siendo
   gris. */
:root{--tx3:#646B78}

/* El muro de medios de pago va más claro que el resto a propósito, pero
   2,86:1 no llega ni al 3 que pide un texto grande. #7E8780 da 3,36 y
   conserva el registro apagado. */
body.rx .rx-marcas li{color:#7E8780}

/* Blanco sobre el morado de la referencia da 4,42:1 y el rótulo de la
   tarjeta va a 20 px con peso 500, así que le piden 4,5 y no 3. Se baja el
   fondo un escalón —#6D4AF5— y llega a 5,33. El disco pequeño conserva el
   morado original: ahí no hay texto encima. */
body.rx .rx-mc--cifra{background:#6D4AF5}

/* En el panel de tinta, `.rx-card p` llegaba DESPUÉS de `.rx-panel--dark p`
   con la misma especificidad y ganaba: el párrafo de las tarjetas oscuras
   salía en gris de texto claro sobre tinta, 2,21:1. */
body.rx .rx-panel--dark .rx-card p{color:#C3CEDC}

/* El numeral de la pregunta abierta se tiñe con el azul de la referencia,
   que sobre blanco mide 3,98:1 y a 18 px con peso 500 le piden 4,5. El azul
   se oscurece SÓLO aquí, que es el único sitio donde hace de texto: en los
   discos y los puntos del riel es fondo y ahí no cuenta. */
body.rx .rx-qa details[open] summary i{color:#0062D6}

/* Los tres puntos de la tarjeta del flujo eran TEXTO —«···» en #C3C8CE
   sobre blanco, 1,68:1— y la auditoría los cuenta aunque lleven
   `aria-hidden`. Se dibujan, que es lo que son. */
body.rx .rx-fc__h>span:last-child{margin-left:auto;width:15px;height:3px;
  font-size:0;flex:none;
  background:radial-gradient(circle at 1.5px 1.5px,#B9BFC7 1.5px,transparent 1.7px) 0 0/5px 3px repeat-x}

/* ══ Las marcas de pago ════════════════════════════════════════════════
   Sólo Visa y Mastercard: es lo que la casa acepta. Los trazados son los
   fieles, con cada `viewBox` recortado a su dibujo, así que aquí se fija
   SÓLO el alto y el ancho lo saca el navegador.

   La proporción no es de gusto: h_visa = 0,89 x h_mc, que es lo que iguala
   la TINTA de las dos. La palabra cubre menos de su caja que los dos
   círculos —52,8 % contra 80,2 %— pero es tres veces más ancha, así que por
   unidad de alto lleva más tinta. Igualarlas por la caja deja a VISA como
   una miniatura.

   `min-height:0` y `min-width:0` no sobran: Bricks publica
   `svg:not([height]){min-height:1em}` en su capa de frontend, y estos dos
   no llevan atributo `height` porque el alto lo pone la hoja. */
.kn-pay{display:inline-flex;align-items:center;gap:.9rem;color:var(--tx3)}
.kn-pay__v,.kn-pay__m{width:auto;min-width:0;min-height:0;flex:none;display:block}
.kn-pay__v{height:16px}
.kn-pay__m{height:18px}
/* en la franja de confianza de la portada van al doble */
.rx-marcas .kn-pay{gap:2.2rem;color:#7E8780}
.rx-marcas .kn-pay__v{height:29px}
.rx-marcas .kn-pay__m{height:33px}
/* y dentro de una tarjeta del flujo, al tamaño del renglón */
.rx-fc__pago{display:inline-flex;margin-left:.15rem}
.rx-fc__pago .kn-pay{gap:.55rem;color:var(--tx2)}
.rx-fc__pago .kn-pay__v{height:11px}
.rx-fc__pago .kn-pay__m{height:12.5px}
/* el pie ya no lleva pastillas de texto */
body.rx .kn-pagos{display:none}
body.rx .kn-pie .kn-pay{margin-top:1.2rem}

/* ══ Las interiores ════════════════════════════════════════════════════
   Mismo sistema que la portada, con una diferencia de escala: el titular de
   una interior es más chico que el de la portada —no compite con él— y el
   masthead lleva su fotografía a la derecha, una por página y ninguna
   repetida. */
.rx-mast{display:grid;gap:clamp(2rem,4vw,3.2rem);align-items:center}
@media (min-width:900px){
  .rx-mast{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}
.rx-mast .rx-h1{font-size:clamp(2.1rem,1.2rem + 2.6vw,3.4rem);margin:1.1rem 0 0}
.rx-mast .rx-lead{margin-top:1.4rem;max-width:52ch}
.rx-mast__acc{margin-top:2rem;display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap}
.rx-mast .rx-mc{min-height:0}

/* la declaración: el bloque `cifra` de las interiores */
.rx-cita{display:grid;gap:1.2rem;justify-items:start}
.rx-cita b{font-family:"Inter KN",system-ui,sans-serif;font-weight:500;
  font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);line-height:1.06;
  letter-spacing:-.05em;max-width:20ch}
.rx-cita span{font-size:1.0625rem;color:#C3CEDC;max-width:44ch}

/* el aviso: una tarjeta con su disco, dentro del panel */
.rx-aviso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;
  align-items:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--rc);padding:1.6rem 1.5rem}
.rx-aviso h3{margin:0 0 .5rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.03em}
.rx-aviso p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--tx2)}

/* la prosa de las páginas legales */
.rx-prosa{max-width:68ch}
.rx-prosa h2{font-size:1.5rem;font-weight:600;letter-spacing:-.035em;margin:2.4rem 0 .8rem}
.rx-prosa h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.03em;margin:1.8rem 0 .6rem}
.rx-prosa p,.rx-prosa li{font-size:1rem;line-height:1.62;color:var(--tx2)}
.rx-prosa p{margin:0 0 1rem}
.rx-prosa ul,.rx-prosa ol{margin:0 0 1.2rem;padding-left:1.3rem;display:grid;gap:.5rem}
.rx-prosa a{color:var(--tx);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:var(--line)}
.rx-prosa a:hover{text-decoration-color:currentColor}
.rx-fecha{font-size:.875rem;color:var(--tx3);margin:0 0 2rem}

/* El disco también lleva NUMERAL en las interiores —los pasos van
   numerados porque son una secuencia de verdad, no un adorno—, así que
   necesita reglas de texto además de las del icono. */
.rx-disc{font-family:"Inter KN",system-ui,sans-serif;font-weight:600;
  font-size:.9375rem;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}

/* La tarjeta-foto del masthead no se estira con una fila: es hija de una
   rejilla de dos columnas, así que su marco necesita proporción propia o
   la imagen se queda sin alto. */
.rx-mast .rx-mc--foto .rx-m{aspect-ratio:4/5;flex:none}

/* ⚠ La Mastercard EN COLOR cambia la cuenta de la tinta, y no un poco.
   El trazado monocromo vive en una caja de 24 y cubre el 80 %; los dos
   discos en color viven en una de 48 x 30 y cubren el **68,7 %**, así que
   por unidad de alto llevan menos tinta que antes.

   Contado rasterizando las dos marcas a 200 px de alto y sumando píxeles
   opacos —no calculado—:

     VISA .............. 51,8 % de su caja · 1,602 de tinta por alto²
     Mastercard color .. 68,7 % de su caja · 1,099 de tinta por alto²

   Igualadas, **h_visa = 0,828 x h_mc**, no el 0,89 del par monocromo. Con
   el 0,89 la Mastercard salía un 8 % ligera y la fila se leía descompensada:
   418 contra 463 px² en el pie. */
.kn-pay--color .kn-pay__m{height:19.3px}
.rx-marcas .kn-pay--color .kn-pay__m{height:35px}
.rx-fc__pago .kn-pay--color .kn-pay__m{height:13.3px}

/* ⚠ Un NÚMERO dentro del disco de color no se lee, y no es cuestión de
   elegir mejor el acento: blanco sobre los cinco de la referencia da 3,98 ·
   4,42 · 2,60 · 2,00 · 1,90, y un numeral a 15 px pide 4,5. En la
   referencia esos discos llevan ICONOS —decorativos, junto a su rótulo— y
   la numeración vive aparte, en el acordeón, como cifra suelta.

   Así que la casa distingue las dos cosas: **el disco de color lleva
   icono; el disco TEÑIDO lleva número**, con la tinta encima. Cada tinte es
   el pastel de su acento, los mismos que usan las pastillas giradas de la
   portada. Blanco a 14:1 en los cinco. */
.rx-disc--n{color:var(--ink)}
.rx-disc--n1{background:#DCE9FF} .rx-disc--n2{background:#FFDDF0}
.rx-disc--n3{background:#FFE8CC} .rx-disc--n4{background:#D7F5DE}
.rx-disc--n5{background:#E7E0FF}

/* ══ Las pantallas de cuenta ═══════════════════════════════════════════
   Acceso, alta, recuperar y clave nueva. Aquí NO se reescribe el marcado:
   esas plantillas llevan nonces, nombres de campo y `autocomplete` que
   valen tal cual, y tocarlos por estética es cambiar algo que funciona. Lo
   que cambia es el sistema visual, y entra por la clase `rx`.

   La anatomía que ya tenían —tarjeta centrada con una franja de rótulo
   arriba, formulario y pie de enlaces— es la correcta y se conserva: una
   pantalla de cuenta no puede ser un formulario suelto sobre fondo plano. */
body.rx.kn-auth{background:var(--bg)}
body.rx .kn-acceso{padding:clamp(2rem,5vw,4rem) var(--gut) clamp(3rem,6vw,5rem)}
body.rx .kn-acceso__caja,
body.rx .kn-acceso__caja--ancha{background:#fff;border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--sh);overflow:hidden}
body.rx .kn-acceso__caja{max-width:520px}
body.rx .kn-acceso__caja--ancha{max-width:760px}
body.rx .kn-acceso__caja>*{padding-inline:clamp(1.5rem,4vw,2.4rem)}

/* la franja de rótulo, en tinta */
body.rx .kn-acceso .kn-marca-agua{background:var(--ink);color:#fff;
  font-family:"Inter KN",system-ui,sans-serif;font-weight:600;font-size:.8125rem;
  letter-spacing:.02em;text-transform:none;padding-block:1rem;margin:0;
  display:flex;align-items:center;gap:.6rem}
body.rx .kn-acceso .kn-marca-agua::before{background:#fff;width:20px;height:2px;
  content:"";flex:none}
body.rx .kn-acceso .kn-marca-agua::after{content:none}

body.rx .kn-acceso h1{font-family:"Inter KN",system-ui,sans-serif;font-weight:500;
  font-size:clamp(1.6rem,1.2rem + 1.2vw,2.15rem);letter-spacing:-.04em;
  line-height:1.1;color:var(--ink);margin-top:1.6rem}
body.rx .kn-acceso__d{color:var(--tx2);font-size:.9375rem;margin:.7rem 0 1.6rem}

/* los controles, los del sistema */
body.rx .kn-acceso input[type=email],body.rx .kn-acceso input[type=password],
body.rx .kn-acceso input[type=text],body.rx .kn-acceso input[type=tel],
body.rx .kn-acceso select,body.rx .kn-acceso textarea{
  font-family:"Inter KN",system-ui,sans-serif;font-size:.9375rem;color:var(--tx);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:.8rem .9rem;letter-spacing:-.01em;box-shadow:none}
body.rx .kn-acceso input:focus,body.rx .kn-acceso select:focus,
body.rx .kn-acceso textarea:focus{outline:2px solid var(--azul);outline-offset:1px;
  border-color:var(--azul);box-shadow:none}
body.rx .kn-acceso .kn-campo>span,body.rx .kn-acceso .kn-campo span{
  font-size:.875rem;font-weight:500;color:var(--tx2)}
body.rx .kn-acceso .kn-casilla span{font-size:.875rem;color:var(--tx2)}

/* el botón: la píldora oscura, a todo el ancho */
body.rx .kn-acceso .kn-b--sello{background:var(--ink);border-color:var(--ink);
  border-radius:var(--rpill);font-family:"Inter KN",system-ui,sans-serif;
  font-weight:600;font-size:.9375rem;box-shadow:none;min-height:52px}
body.rx .kn-acceso .kn-b--sello::after{content:none}
body.rx .kn-acceso .kn-b--sello:hover{background:var(--ink2);border-color:var(--ink2)}
body.rx .kn-acceso .kn-b--linea{border-radius:var(--rpill);border-color:var(--line);
  color:var(--tx);box-shadow:none}

/* el pie de enlaces. La especificidad no es de adorno: `app.css` lo pinta
   con `.kn-acceso__caja:not(.kn-acceso__caja--ancha) .kn-acceso__pie` —tres
   clases— y le ganaba a la regla de dos. */
body.rx .kn-acceso .kn-acceso__caja .kn-acceso__pie,
body.rx .kn-acceso .kn-acceso__caja--ancha .kn-acceso__pie{
  background:var(--bg);border-top:1px solid var(--line);
  padding-block:1.1rem;margin-top:1.8rem;font-size:.875rem;color:var(--tx2)}
body.rx .kn-acceso__pie a{color:var(--tx);text-decoration:underline;
  text-underline-offset:.22em;text-decoration-color:var(--line)}
body.rx .kn-acceso__pie a:hover{text-decoration-color:currentColor}

/* el alta: los grupos numerados y las dos ranuras de la identificación.

   ⚠ Aquí NO se toca la maqueta, sólo el color y la cara. `app.css` coloca
   el numeral en ABSOLUTO —`left:0;top:1.4rem` por encima de 820 px— y le
   reserva sitio con el `padding-top` del grupo. Al convertirlo en disco y
   quitarle ese relleno, el numeral se montaba sobre el primer campo. El
   `<legend>` tampoco admite que le cambien el `display`: el navegador le da
   su propia caja dentro del `fieldset`. */
body.rx .kn-acceso legend{font-family:"Inter KN",system-ui,sans-serif;
  font-weight:600;font-size:1rem;letter-spacing:-.03em;color:var(--ink)}
body.rx .kn-grupo__n{color:var(--azul);font-weight:600}
body.rx .kn-grupo{border-top-color:var(--line)}
body.rx .kn-grupo__d{font-size:.875rem;color:var(--tx2)}
body.rx .kn-ranura{border-color:var(--line);border-radius:var(--rc);background:#fff}
body.rx .kn-ranura__k{font-family:"Inter KN",system-ui,sans-serif;font-weight:600;
  color:var(--ink)}

/* El numeral del grupo vuelve al flujo. `app.css` lo saca en ABSOLUTO por
   encima de 820 px —`left:0;top:1.4rem`— y lo alinea contra el relleno
   superior del `fieldset`, pero un `<legend>` se pinta MONTADO sobre el
   borde de su fieldset, no dentro de su caja de contenido: el numeral
   quedaba 24 px por debajo de su propio rótulo. Devolviéndolo al `display:
   flex` que el propio `legend` ya tiene, se alinea solo y desaparece la
   geometría frágil. */
@media (min-width:820px){
  body.rx .kn-acceso__caja--ancha .kn-grupo__n{position:static}
  body.rx .kn-acceso__caja--ancha .kn-grupo legend,
  body.rx .kn-acceso__caja--ancha .kn-grupo__d{padding-left:0}
}

/* El azul de la referencia mide 3,98:1 sobre blanco: sirve de FONDO —discos,
   puntos del riel— pero no de tinta. Cada vez que hace de texto va un
   escalón más oscuro. Ya pasó con el numeral de la pregunta abierta. */
:root{--azul-tx:#0062D6}
body.rx .kn-grupo__n{color:var(--azul-tx)}
body.rx .rx-qa details[open] summary i{color:var(--azul-tx)}

/* ══ El panel ══════════════════════════════════════════════════════════
   Mis partidas, confirmar partida y autorizaciones. No es una página: es
   una aplicación —se opera, no se lee— así que la referencia no cubre este
   terreno. Lo que se trae de ella es el sistema: fondo, cara, esquina,
   filete y la píldora oscura. La información manda sobre la tipografía.

   Como en las pantallas de cuenta, **aquí no se toca el marcado**: esas
   plantillas cuelgan de `panel.js` por clases y atributos `data-`, y
   moverlas por estética rompe la máquina. */
body.rx.kn-app{background:var(--bg)}

/* la cabecera del escritorio */
body.rx .kn-app__cab{align-items:flex-end;gap:1.2rem}
body.rx .kn-app__cab h1{font-family:"Inter KN",system-ui,sans-serif;font-weight:500;
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);letter-spacing:-.045em;color:var(--ink)}
body.rx .kn-app__cab .kn-marca-agua{font-family:"Inter KN",system-ui,sans-serif;
  font-weight:600;font-size:.8125rem;letter-spacing:.02em;text-transform:none;
  color:var(--tx3)}
body.rx .kn-app__cab .kn-marca-agua::before{background:var(--tx3);width:20px;height:2px}
body.rx .kn-app__cab .kn-marca-agua::after{content:none}
body.rx .kn-app__estado{font-size:.875rem;color:var(--tx2)}
body.rx .kn-app__d{color:var(--tx2);font-size:.9375rem}

/* la tarjeta del panel: cabecera en tinta con la esquina de arriba, cuerpo
   blanco. Es la misma pieza que la franja de rótulo de las pantallas de
   cuenta, para que las dos superficies se reconozcan. */
body.rx .kn-ficha{background:#fff;border:1px solid var(--line);
  border-radius:var(--rc);box-shadow:var(--sh);overflow:hidden}
body.rx .kn-ficha__cab{background:var(--ink);color:#fff;padding:1.1rem 1.3rem;
  align-items:center}
body.rx .kn-ficha__cab b{font-family:"Inter KN",system-ui,sans-serif;font-weight:600;
  font-size:.9375rem;letter-spacing:-.02em;color:#fff}
body.rx .kn-ficha__cab span{font-size:.75rem;letter-spacing:.06em;color:#9FB0C2;
  text-transform:uppercase;opacity:1}
body.rx .kn-ficha__cuerpo{padding:1.4rem 1.3rem}
body.rx .kn-ficha__r{border-bottom-color:var(--line);padding-block:.8rem}
body.rx .kn-ficha__r dt{font-size:.8125rem;color:var(--tx2)}
body.rx .kn-ficha__r dd{font-family:"Inter KN",system-ui,sans-serif;font-weight:600;
  color:var(--tx);font-variant-numeric:tabular-nums}
body.rx .kn-ficha__r--fuerte{background:#F1F5FB}
body.rx .kn-ficha__r--fuerte dd{color:var(--azul-tx)}

/* el campo del monto y sus atajos */
body.rx .kn-monto{border:1px solid var(--line);border-radius:10px;background:#fff;
  overflow:hidden}
body.rx .kn-monto__m{background:var(--bg);color:var(--tx2);font-size:.875rem;
  font-weight:600;border-right:1px solid var(--line)}
body.rx .kn-monto input{font-family:"Inter KN",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;color:var(--tx)}
body.rx .kn-monto:focus-within{outline:2px solid var(--azul);outline-offset:1px;
  border-color:var(--azul)}
body.rx .kn-rapidos .kn-b{border-radius:var(--rpill);border-color:var(--line);
  font-family:"Inter KN",system-ui,sans-serif;font-weight:600;color:var(--tx);
  box-shadow:none;background:#fff}
body.rx .kn-rapidos .kn-b:hover{border-color:var(--ink);background:var(--bg)}

/* botones del panel */
body.rx.kn-app .kn-b--sello{background:var(--ink);border-color:var(--ink);
  border-radius:var(--rpill);font-family:"Inter KN",system-ui,sans-serif;
  font-weight:600;box-shadow:none}
body.rx.kn-app .kn-b--sello:hover{background:var(--ink2);border-color:var(--ink2)}
body.rx.kn-app .kn-b--linea{border-radius:var(--rpill);border-color:var(--line);
  color:var(--tx);box-shadow:none;background:#fff}
body.rx.kn-app .kn-b--linea:hover{border-color:var(--ink);background:var(--bg)}
body.rx.kn-app .kn-b--alto{background:#B42318;border-color:#B42318;border-radius:var(--rpill)}

/* tabla, estados y vacío */
body.rx .kn-tabla th{font-family:"Inter KN",system-ui,sans-serif;color:var(--tx3);
  letter-spacing:.02em;font-size:.75rem;text-transform:none;font-weight:600;
  border-bottom-color:var(--line)}
body.rx .kn-tabla td{border-bottom-color:var(--line);color:var(--tx2)}
body.rx .kn-tabla .n{font-family:"Inter KN",system-ui,sans-serif;color:var(--tx)}
body.rx .kn-chip{border-radius:var(--rpill);font-family:"Inter KN",system-ui,sans-serif;
  font-weight:600;font-size:.75rem;padding:.25rem .65rem}
body.rx .kn-chip--ok{background:#D7F5DE;color:#0B5C25;border-color:transparent}
body.rx .kn-chip--wait{background:#FFE8CC;color:#7A3E00;border-color:transparent}
body.rx .kn-chip--bad{background:#FFE0E0;color:#8B1A14;border-color:transparent}
body.rx .kn-vacio{color:var(--tx2)}
body.rx .kn-vacio .kn-i{color:var(--tx3)}
body.rx .kn-vacio__d{color:var(--tx3)}
body.rx .kn-nota{border-radius:10px;border-color:var(--line);font-size:.875rem}
body.rx .kn-aviso-caja{background:#fff;border:1px solid var(--line);
  border-radius:var(--rc);box-shadow:var(--sh)}
body.rx .kn-aviso-caja h2{font-family:"Inter KN",system-ui,sans-serif;font-weight:500;
  letter-spacing:-.035em;color:var(--ink)}
body.rx .kn-aviso-caja p{color:var(--tx2)}

/* pestañas, paginador y diálogo */
body.rx .kn-pestana{border-radius:var(--rpill);font-family:"Inter KN",system-ui,sans-serif;
  font-weight:600;font-size:.875rem;border-color:var(--line);color:var(--tx2);background:#fff}
body.rx .kn-pestana[aria-current],body.rx .kn-pestana.is-activa{
  background:var(--ink);border-color:var(--ink);color:#fff}
body.rx .kn-paginador{font-size:.875rem;color:var(--tx2)}
body.rx .kn-dlg{border-radius:var(--rc);border:1px solid var(--line);
  box-shadow:var(--sh2);background:#fff}
body.rx .kn-dlg__d{font-family:"Inter KN",system-ui,sans-serif;font-weight:500;
  letter-spacing:-.035em;color:var(--ink)}
body.rx .kn-velo{background:rgba(19,36,54,.55)}
body.rx .kn-pista{color:var(--tx3);font-size:.8125rem}
body.rx .kn-codigo input{font-family:"Inter KN",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;border-radius:10px;border-color:var(--line)}

/* El escritorio se queda pegado a la izquierda de su medida: `app.css` le
   pone `max-width:44rem` dentro de un contenedor de 880 y sin margen
   automático, así que sobraban 176 px SÓLO por la derecha. Centrarlo es una
   línea y no mueve nada más. */
body.rx .kn-escritorio{margin-inline:auto;justify-items:stretch}