/* ══════════════════════════════════════════════════════════════════════
   KORNETH — el alza
   ══════════════════════════════════════════════════════════════════════
   Va DESPUÉS de app.css y no reemplaza nada: sube de nivel lo que ya
   existe. Quitar esta hoja del encolado devuelve el sitio anterior.

   El punto de partida NO es el de una casa oscura. Korneth es papel:
   `--papel` verde pálido, tinta casi negra, un azul de tampón y esquina
   viva. Así que aquí no hay brasas ni degradados de oro: hay HOJA, TINTA
   y SOMBRA. Tres decisiones gobiernan todo lo de abajo:

   1. TODO VIVE EN UNA FICHA. Es lo que la casa ya dice de sí misma —cada
      partida sale con su ficha— llevado a la maqueta: el contenido se
      apoya en hojas blancas con filete y sombra corta sobre el papel.
   2. LA ESQUINA SIGUE VIVA. Cero radio, como estaba. Una hoja blanca de
      esquina recta sobre papel es un documento; con esquina redonda es
      una tarjeta de aplicación, y además es la esquina de otra casa.
   3. UNA SOLA LOSA DE TINTA. El azul de tampón, que hasta ahora sólo
      pintaba botones y rótulos, ocupa una sección entera. Es el único
      golpe de color de la página y por eso se ve.

   ── INVENTARIO ────────────────────────────────────────────────────────
   ANTES DE ESCRIBIR UNA PIEZA NUEVA, BÚSCALA AQUÍ.

   Primitivas (§2):
     · la sombra de papel   tres capas cortas; no es un halo, es una hoja
     · el grano             la tesela de ruido, en `multiply` sobre claro

   Piezas:
     · .kn-marca-agua   rótulo de zona con filete      (§4)
     · .kn-folio        el numeral de zona, como folio (§4)
     · .kn-b            botón; variantes abajo         (§5)
     · .kn-papel        la ficha —la pieza de la casa— (§6)
     · .kn-ficha        cualquier bloque sobre hoja    (§6)
     · .kn-losa         la sección en tinta            (§7)
     · .kn-manifiesto   las filas de rótulo y hecho    (§9)
     · .kn-marco        marco de imagen                (§11)

   Botones — CUATRO y ninguno más:
     .kn-b            base
     .kn-b--sello     principal: tinta maciza, se HUNDE al pulsar
     .kn-b--linea     acompaña al principal: doble filete
     .kn-b--grande / --chico   modificadores de talla
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 0 · La cara de reserva ════════════════════════════════════════════
   El titular de portada pasó de 40 a 76 px, y con él el salto de maqueta:
   el CLS subió de 0,002 a 0,075. La causa no es una imagen —todas llevan
   sus medidas— sino el CAMBIO DE FUENTE: mientras Familjen Grotesk carga,
   el titular se compone con la cara de reserva, y si ésta es más ancha, el
   titular ocupa un renglón más y todo lo de abajo se mueve al llegar la
   buena.

   Se arregla midiendo. Compuesta la misma frase a 100 px:

     Familjen Grotesk 600 ....... 1.471,67 px
     system-ui .................. 1.465,36  →  100,43 %
     Roboto ..................... 1.504,56  →   97,81 %
     Arial / Helvetica .......... 1.606,11  →   91,63 %

   Arial está en casi cualquier equipo y en Linux y Android la sustituyen
   caras de métrica equivalente, así que se declara una reserva basada en
   ella con `size-adjust:91.63%`, que es lo que la iguala. Los `override`
   de ascendente y descendente cuadran la caja de renglón en 1,25 em, que
   es la de Familjen medida en el navegador. */
@font-face{
  font-family:"KN reserva";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:91.63%;
  ascent-override:100%;
  descent-override:25%;
  line-gap-override:0%;
  font-weight:400 700;
  font-style:normal;
}

/* ══ 1 · Tokens ════════════════════════════════════════════════════════ */
:root{
  /* la reserva va DESPUÉS de la buena y ANTES de system-ui */
  --fd:"Familjen Grotesk","KN reserva",system-ui,sans-serif;
  /* — la escala del sello: hasta ahora era UN azul; ahora es una escala — */
  --sello-alto:#2E6FB5;   /* el que se lee sobre tinta */
  --sello-bajo:#0C3157;   /* el fondo de la losa */
  --sello-lavado:#F0F5FA; /* el papel entintado, apenas */

  /* — la sombra de una hoja sobre otra. Tres capas cortas y ninguna
       difusa: una hoja no flota, se APOYA — */
  --sombra-hoja:0 1px 1px rgba(18,26,19,.04),
                0 3px 6px -2px rgba(18,26,19,.06),
                0 10px 22px -12px rgba(18,26,19,.10);
  --sombra-hoja-alta:0 2px 3px rgba(18,26,19,.05),
                     0 8px 16px -4px rgba(18,26,19,.08),
                     0 24px 44px -20px rgba(18,26,19,.16);

  /* — el relleno lateral del botón, en un token PROPIO —
       la escala general de app.css está cruzada: su primer bloque de
       `:root` declara `--e6:1rem` y `--e7:1.25rem`, y un segundo bloque
       redefine `--e1..--e6` dejando los demás con los valores del
       primero. Resultado: `--e6` vale 2,5rem y `--e7` sólo 1,25. El botón
       pedía su relleno lateral a `--e6` —40 px— y el de la barra medía
       151 px de ancho para 69 de texto. Aquí va contra el alto del propio
       botón: 0,44 en el normal (44 px → 19,4) y 0,50 en el grande. */
  --btn-x:1.2rem;
  --btn-x-lg:1.6rem;

  /* — el grano del papel — */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ══ 1b · La esquina ═══════════════════════════════════════════════════
   Aquí hay un cambio de canon, y conviene que quede escrito. El tema nacía
   con `--ctrl:0` —«esquina viva: es un documento»—, y eso servía a una
   página de texto corrido y filetes. La referencia que pide el cliente
   está construida sobre lo contrario: losas grandes de esquina generosa
   flotando sobre un fondo claro, y la barra como una pieza suelta.

   Así que la esquina pasa a ser una ESCALA, no un cero:

     --r-losa   22px   las piezas grandes: losa del masthead, barra
     --r-hoja   14px   la ficha y las tarjetas
     --r-ctrl   999px  botones y rótulos: pastilla

   No choca con ninguna hermana: la que más redondea va en 10 px, y aquí
   ninguna medida se le acerca. */
:root{--r-losa:22px;--r-hoja:14px;--r-ctrl:999px}
.kn-b{border-radius:var(--r-ctrl)}
.kn-papel,.kn-ficha{border-radius:var(--r-hoja)}
.kn-hero .kn-papel::after{border-radius:var(--r-hoja)}
.kn-marco{border-radius:var(--r-hoja)}
.kn-papel__sello{border-radius:var(--r-ctrl)}

/* ══ 1c · La barra, suelta ═════════════════════════════════════════════
   Deja de ser una franja pegada al borde y pasa a ser una pieza: se
   despega 12 px del alto de la ventana, se ciñe a la medida de la portada
   y lleva su propia sombra. Es lo primero que se reconoce de la
   referencia. */
.kn-barra{position:sticky;top:12px;z-index:60;
  width:min(var(--portada,1180px),100% - var(--gut)*2);
  margin:12px auto 0;
  background:var(--papel-3);
  border:1px solid var(--filete);
  border-radius:var(--r-losa);
  box-shadow:var(--sombra-hoja)}
.kn-barra.is-fija{background:rgba(255,255,255,.88);
  box-shadow:var(--sombra-hoja-alta)}
/* La medida va UNA vez. `.kn-barra__in` lleva también la clase de portada,
   que vuelve a aplicar `100% - gut*2`: dentro de una barra que YA está
   ceñida, eso descuenta 40 px por lado otra vez y deja 82 px de la barra
   muertos —1.098 de ancho útil en una pieza de 1.180—. Con la fila única
   ese hueco es la diferencia entre caber y no caber. */
.kn-barra .kn-portada{width:auto;max-width:none;margin-inline:0}
.kn-barra__in{padding-inline:clamp(1rem,2.4vw,1.75rem)}

/* ── el reparto de la barra ─────────────────────────────────────────────
   UNA fila con la marca al centro: a la izquierda el idioma y los dos
   primeros renglones del menú, a la derecha los tres restantes y las
   acciones. Es la maqueta de la referencia con el contenido real.

   El punto de ruptura NO se eligió: se midió, y se midió DOS veces. La
   primera cuenta salió corta porque el menú estaba estirado al ancho de su
   columna: los renglones de verdad miden 415,5 a la izquierda y 220,7 a la
   derecha. Con eso la fila pide 1.097,9 px —idioma 49,6 · menú 636,2 ·
   marca 137,1 · acciones 191,7 · cuatro huecos— más 58 de relleno.

   Pero ése no es el caso peor: en una interior el renglón en curso va en
   pastilla y crece 12,6 px, y la fila pasa a pedir 1.110,3. A 1.240 eso
   dejaba 5,9 px de holgura —el filo—, así que el corte sube a **1.260**,
   donde quedan 20. El inglés no manda aquí: mide 70 px MENOS que el
   castellano, medido en las cinco páginas.
   Por debajo vuelve a los dos pisos, que es la maqueta ya probada de 320 a
   430 px. */
@media (min-width:1260px){
  /* `auto 1fr auto` y NO `1fr auto 1fr`: la rejilla simétrica obliga a los
     dos lados al mismo ancho —424,5 px medidos— y ninguno de los dos cabe,
     así que los dos se partían en dos renglones. Con las columnas al
     contenido, cada lado toma lo suyo y la marca se centra en el hueco que
     queda. Se desvía del centro exacto de la barra lo que difieran los dos
     grupos, que con el reparto 3 + 2 son 26 px: no se ve. */
  /* Los huecos se TOPAN, y el tope no es de gusto: la barra deja de crecer
     a 1.180, así que el ancho disponible se queda clavado en 1.122 desde
     1.260 en adelante mientras los huecos en `vw` siguen subiendo hasta
     1.440. Sin tope, el caso peor —castellano, con la pastilla de la página
     en curso— pedía 1.110,3 y dejaba 11,7 px. Con los topes en 1rem y
     1,15rem quedan 31,7, y la diferencia de 4 px por hueco no se ve. */
  /* `minmax(0,1fr) auto minmax(0,1fr)` y NO `auto 1fr auto`: con las
     columnas al contenido la marca se centraba en el HUECO que quedaba,
     no en la barra, y como la izquierda pesa 62 px más que la derecha
     —tres renglones y el idioma contra dos y las acciones— quedaba 26 px
     corrida. Con las dos pistas laterales iguales por construcción, la
     marca cae en el centro exacto: desvío medido, 0 px en las cinco
     páginas y en los dos idiomas. El precio es que lo que no quepa en su
     pista se desborda en vez de repartirse, así que la holgura del lado
     pesado se mide y no se supone. */
  .kn-barra__in{display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;gap:.75rem;padding-block:.85rem}
  /* `space-between` en los dos grupos, y no `flex-start`/`flex-end`: con
     los extremos pegados, la izquierda llenaba su pista y dejaba 12 px
     hasta la marca mientras la derecha dejaba 88. La marca salía centrada
     y el AIRE a su alrededor no. Repartiendo, el sobrante se va al hueco
     interior de cada grupo —junto al idioma y junto a las acciones— y la
     marca queda con 12 px a cada lado. */
  .kn-barra__izq{display:flex;align-items:center;min-width:0;
    justify-content:space-between;gap:clamp(.75rem,1.2vw,.95rem)}
  .kn-barra__der{display:flex;align-items:center;min-width:0;
    justify-content:space-between;gap:clamp(.75rem,1.2vw,.95rem)}
  .kn-barra__der .kn-barra__acc{gap:clamp(.75rem,1.2vw,.95rem)}
  /* el menú baja un escalón de cuerpo en la fila única: es lo que da el
     aire que la rejilla simétrica no puede dar */
  /* `flex:none` y `nowrap` NO sobran: los tres bloques son piezas de un
     flex y por omisión ENCOGEN por debajo de su contenido. Medido: el
     bloque de acciones se quedaba en 126,4 px para 180 de contenido y
     partía «Pasar» y el botón en tres renglones, y el menú de la izquierda
     hacía lo mismo. Con esto cada grupo toma su ancho natural y la columna
     del medio absorbe lo que sobra. */
  /* `width:auto` NO sobra: la hoja base deja `.kn-nav{width:100%}` de la
     maqueta de dos pisos, y ahí dentro el menú se estiraba al ancho de su
     columna —463,8 px para 415,6 de renglones— y se metía DEBAJO de la
     marca. `flex:none` no lo salva: con `flex-basis:auto` el ancho lo
     manda la propiedad `width`. */
  .kn-nav{display:flex;align-items:center;gap:.5rem;font-size:.875rem;
    width:auto;margin:0;padding:0;border:0;white-space:nowrap;
    flex:none;flex-wrap:nowrap}
  .kn-nav a{white-space:nowrap}
  .kn-barra__izq > *,.kn-barra__der > *{flex:none}
  .kn-barra__acc{flex:none;flex-wrap:nowrap;white-space:nowrap}
  .kn-barra__acc .kn-b{white-space:nowrap}
  /* el idioma vive a la izquierda; la copia del bloque de acciones sobra */
  .kn-idioma--pisos{display:none}
  /* El techo del logotipo lo fija el punto de ruptura del menú: cada
     píxel que ocupa la marca sale de las dos pistas laterales. A 1,5rem
     el lado pesado se quedaba en 2,9 px de holgura —el filo—; a 1,4 hay
     15,3 y la palabra no pierde presencia. */
  .kn-barra .kn-logo{font-size:1.4rem}
  .kn-logo{grid-column:2;justify-self:center}
}
@media (min-width:900px) and (max-width:1259px){
  /* Los dos grupos se disuelven con `display:contents` y sus hijos pasan a
     ser piezas del propio flex de la barra: así se pueden ordenar sin
     tocar el marcado. El salto de fila lo fuerza un elemento de altura
     cero y ancho completo —no hay otra forma en flex—. */
  .kn-barra__izq,.kn-barra__der{display:contents}
  .kn-barra__in{display:flex;flex-wrap:wrap;align-items:center;
    column-gap:clamp(.75rem,2vw,1.25rem);row-gap:.55rem;padding-block:.75rem}
  .kn-barra__izq > .kn-idioma{order:0}
  .kn-logo{order:1;margin-inline:auto}
  .kn-barra__acc{order:2;display:flex;align-items:center;
    gap:clamp(.75rem,2vw,1.25rem)}
  .kn-barra__in::after{content:"";order:3;flex-basis:100%;height:0}
  .kn-nav--izq{order:4}
  .kn-nav--der{order:5}
  /* aquí `width:auto` hace que los dos menús compartan el segundo piso en
     vez de pedir un renglón cada uno: la barra pasa de tres pisos a dos. */
  .kn-nav{display:flex;flex-wrap:wrap;align-items:center;width:auto;
    gap:.4rem clamp(.75rem,2vw,1.25rem);margin:0;padding:0;border:0}
  .kn-idioma--pisos{display:none}
}

/* ── el teléfono: el menú se pliega ─────────────────────────────────────
   Tercer estado, y no es un capricho: desplegado, el menú dejaba la barra
   en 245 px de alto en una ventana de 390 —un tercio de la pantalla— con
   los cinco renglones repartidos en tres filas desiguales. Y la hoja base
   esconde `.kn-idioma` por debajo de 520, así que el teléfono se quedaba
   además sin ES/EN.

   Los tres contenedores se disuelven con `display:contents` y TODO pasa a
   ser pieza del mismo flex: sólo así se puede mandar el botón arriba y el
   idioma abajo estando en ramas distintas del marcado. Lo que va en el
   panel lleva orden 4 o más y cuelga de `.is-abierta`; el salto de fila lo
   fuerza un elemento de altura cero, que en flex es la única manera. */
@media (max-width:899px){
  .kn-barra__izq,.kn-barra__der,.kn-barra__acc{display:contents}
  .kn-barra__in{display:flex;flex-wrap:wrap;align-items:center;
    column-gap:clamp(.5rem,2.2vw,1rem);row-gap:0;padding-block:.7rem}

  /* la fila que siempre se ve */
  .kn-logo{order:0;margin-right:auto}
  .kn-barra__acc .kn-b{order:1}
  .kn-menu{order:2}
  .kn-barra__in::after{content:"";order:3;flex-basis:100%;height:0}

  /* el panel */
  .kn-nav--izq{order:4}
  .kn-nav--der{order:5}
  .kn-idioma--pisos{order:6}
  .kn-barra__acc .kn-enlace{order:7}
  .kn-barra__izq .kn-idioma{display:none}
  /* en la barra sin menú no hay panel donde meterlo, así que el idioma se
     queda a la vista; la hoja base lo esconde por debajo de 520 y en esas
     pantallas la casa se quedaba sin ES/EN */
  .kn-barra:not(.kn-barra--plegable) .kn-idioma--pisos{display:flex}
  .kn-barra--plegable .kn-nav,
  .kn-barra--plegable .kn-idioma--pisos,
  .kn-barra--plegable .kn-barra__acc .kn-enlace{display:none}
  .kn-barra.is-abierta .kn-nav{display:flex;flex-basis:100%;flex-direction:column;
    align-items:stretch;width:auto;gap:0;margin:0;padding:0;border:0}
  .kn-barra.is-abierta .kn-nav--izq{margin-top:.7rem;padding-top:.55rem;
    border-top:1px solid var(--filete)}
  .kn-barra.is-abierta .kn-idioma--pisos{display:flex;gap:.4rem;
    margin:.55rem 0 0;padding-top:.55rem;border-top:1px solid var(--filete);
    flex-basis:100%}
  .kn-barra.is-abierta .kn-barra__acc .kn-enlace{display:inline-flex;
    flex-basis:100%;margin-top:.35rem}
  .kn-nav a{padding:.6em .5em;border-radius:var(--r-hoja)}
  .kn-nav a[aria-current]{padding:.6em .95em}

  /* el botón baja un escalón en el teléfono: a cuerpo completo pedía 134 px
     y con la marca (137) y el interruptor (44) la fila sumaba 331 contra los
     318 que da una ventana de 390. A 110 cabe con la palabra puesta. */
  .kn-barra__acc .kn-b{font-size:.8125rem;padding-inline:.95rem;gap:.4rem}

  /* Por debajo de 385 ya no hay aritmética que lo salve —a 375 la fila da
     303 px y pide 307—, así que se retira la palabra y queda el símbolo,
     que es la otra pieza del logotipo y basta para identificar. */
  @media (max-width:384px){
    .kn-word{position:absolute;width:1px;height:1px;overflow:hidden;
      clip-path:inset(50%);white-space:nowrap}
  }
}

/* — el interruptor — Cuadrado de 44, que es la medida mínima de toque, y
     los dos dibujos ocupan la misma casilla para que no salte. */
.kn-menu{display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;padding:0;border:0;border-radius:var(--r-ctrl);
  background:transparent;color:var(--tinta);cursor:pointer;
  transition:background var(--t),color var(--t)}
.kn-menu:hover{background:var(--sello-lavado);color:var(--sello)}
/* El `display` va en las dos clases y NO en `.kn-menu svg`: un selector de
   descendencia pesa más que una clase suelta, así que `.kn-menu svg{display}`
   ganaba a `.kn-menu__b{display:none}` y salían los dos dibujos a la vez —el
   interruptor enseñaba la equis junto a las tres rayas—. */
.kn-menu svg{min-width:0;min-height:0}
.kn-menu__a{display:block}
.kn-menu__b{display:none}
.kn-barra.is-abierta .kn-menu__a{display:none}
.kn-barra.is-abierta .kn-menu__b{display:block}
@media (max-width:899px){.kn-barra--plegable .kn-menu{display:inline-flex}}

/* ── la etiqueta gris de Bricks ─────────────────────────────────────────
   El tema padre publica `label{color:var(--bricks-text-light)}` —#9E9E9E,
   2,68:1 sobre blanco—, y toda etiqueta que no se pinte a mano lo hereda:
   la casilla de «dejar la sesión abierta» reprobaba. No es de esta casa
   sola; el padre es el mismo en las seis. Se devuelve la herencia, que es
   la tinta del formulario. */
body label{color:inherit}

/* ── la página en curso, en pastilla ────────────────────────────────────
   Es la marca de la referencia: el renglón activo no se subraya, se
   rellena. Medido: la tinta sobre blanco da 15,2:1. */
.kn-nav a[aria-current]{background:var(--tinta);color:var(--papel-3);
  border-radius:var(--r-ctrl);padding:.42em .78em}
.kn-nav a{border-radius:var(--r-ctrl);padding:.42em .4em;transition:background var(--t),color var(--t)}
.kn-nav a:hover{background:var(--sello-lavado);color:var(--sello)}
.kn-nav a[aria-current]:hover{background:var(--sello);color:var(--papel-3)}

/* ══ 2 · Las dos primitivas ════════════════════════════════════════════ */

/* — el ambiente — En una casa oscura esto sería una brasa; en papel es lo
     contrario: una luz suave que cae desde arriba y un grano que impide
     que el fondo se lea como un plano de color plano. El grano va en
     `multiply` porque sobre claro un `soft-light` no se ve. */
.kn-amb{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% -8%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 62%),
    radial-gradient(80% 46% at 12% 104%,rgba(18,70,126,.05) 0%,rgba(18,70,126,0) 70%)}
.kn-amb::after{content:"";position:absolute;inset:0;
  background-image:var(--grano);background-size:220px 220px;
  opacity:.30;mix-blend-mode:multiply}

/* ══ 3 · Tipografía de gran formato y el masthead ══════════════════════
   Familjen Grotesk aguanta cuerpos grandes con el interletrado cerrado.
   El titular de portada pasa de 40 a **76 px** y el interlineado a .98: un
   titular mide su propia caja, no la de un párrafo.

   Y deja de ir centrado. El centrado servía a una página de texto corrido;
   una portada con un titular de 76 px pide eje izquierdo, con la entradilla
   y las salidas en su propia columna a la derecha. El resto del sitio
   conserva su composición centrada: lo que cambia es la PORTADA. */
h1,h2{letter-spacing:-.025em}
.kn-hero h1{font-size:clamp(2.3rem,1.1rem + 4.2vw,4.75rem);line-height:.98;
  letter-spacing:-.036em}
.kn-sec__cab h2{font-size:clamp(1.6rem,1.15rem + 1.8vw,2.5rem);line-height:1.06;
  letter-spacing:-.028em}
.kn-hero__d{line-height:1.62}
/* Los dos tonos del titular, los dos de la imagen corporativa: el navy del
   logotipo (#00001A) y el azul de tampón de la casa. Medido sobre el papel
   —#E9EFE3— dan 18,9:1 y 9,1:1, muy por encima del 3 que pide un texto de
   este cuerpo. */
.kn-tit__a{color:#00001A}
.kn-tit__b{color:var(--sello)}
@media (max-width:899px){
  /* en columna estrecha el corte a mano parte mal: se deja fluir */
  .kn-tit br{display:none}
}

/* La medida de la portada: 1.180 contra los 880 del resto. Un documento
   tiene medida para su TEXTO; una portada no es texto corrido. */
:root{--portada:1180px}
.kn-portada{width:min(var(--portada),100% - var(--gut)*2);margin-inline:auto}
@media (min-width:900px){
  .kn-hero--alza .kn-hero__in{display:grid;
    grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
    gap:clamp(2rem,4vw,3.5rem);align-items:end;
    justify-items:stretch;text-align:left}
  .kn-hero--alza .kn-marca-agua{justify-content:flex-start}
  .kn-hero--alza .kn-hero__d{margin-inline:0;margin-top:0}
  .kn-hero--alza .kn-hero__acc{justify-content:flex-start}
  /* la franja: la ficha, centrada en su losa */
  .kn-hero__franja{margin-top:clamp(2.5rem,5vw,4rem)}
}
@media (max-width:899px){
  .kn-hero__franja{margin-top:var(--e9);display:grid;gap:var(--e9);justify-items:center}
  .kn-hero--alza .kn-hero__d{margin-top:var(--e6)}
}

/* ══ 4 · El rótulo y el folio ══════════════════════════════════════════
   La marca de agua ya llevaba un filete de 26 px delante. Se le añade el
   segundo, detrás, cuando va centrada: un rótulo entre dos filetes es un
   encabezado de formulario, y ahí es donde vive esta casa.

   Y el FOLIO es la pieza propia: el numeral de zona no va en un cospel
   —eso es de otra casa— sino con la forma que korneth ya usa para
   identificar una partida, `KN-000`. Se numera solo con un contador. */
.kn-marca-agua{letter-spacing:.16em}
.kn-sec__cab .kn-marca-agua::after{content:"";width:26px;height:2px;
  background:var(--sello);opacity:.45}
.kn-sec__cab .kn-marca-agua{gap:var(--e4)}
body{counter-reset:zona}
.kn-sec:has(.kn-sec__cab h2){counter-increment:zona}
.kn-sec__cab h2::before{
  content:"KN-" counter(zona,decimal-leading-zero);
  display:block;margin-bottom:var(--e4);
  font-family:var(--fd);font-weight:600;font-size:.6875rem;
  letter-spacing:.18em;color:var(--sello);opacity:.65;
  font-variant-numeric:tabular-nums lining-nums}

/* ══ 5 · Botones ═══════════════════════════════════════════════════════
   El principal no cambia de color al pulsarse: se HUNDE. Dos píxeles de
   sombra dura debajo y, al pulsar, la pieza baja esos dos píxeles y la
   sombra desaparece. Es un sello contra el papel, no un botón de vidrio. */
.kn-b{padding-inline:var(--btn-x);
  transition:background var(--t),border-color var(--t),color var(--t),
             transform var(--t),box-shadow var(--t)}
.kn-b--grande{padding-inline:var(--btn-x-lg)}
.kn-b--sello{box-shadow:0 2px 0 0 var(--sello-bajo)}
.kn-b--sello:hover{background:var(--sello-bajo);border-color:var(--sello-bajo);
  box-shadow:0 2px 0 0 #08223D}
.kn-b--sello:active{transform:translateY(2px);box-shadow:0 0 0 0 var(--sello-bajo)}
/* el de contorno lleva DOBLE filete: el de fuera y el papel entintado */
.kn-b--linea{border-color:var(--filete-2);
  box-shadow:inset 0 0 0 3px var(--papel-3),0 2px 0 0 var(--filete)}
.kn-b--linea:hover{border-color:var(--sello);color:var(--sello);
  box-shadow:inset 0 0 0 3px var(--papel-3),0 2px 0 0 var(--filete-2)}
.kn-b--linea:active{transform:translateY(2px);
  box-shadow:inset 0 0 0 3px var(--papel-3),0 0 0 0 var(--filete)}
/* la flecha, sólo en los que llevan a alguna parte */
.kn-b--sello::after,.kn-b--linea::after{content:"";width:1em;height:1em;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.6 20.6 12l-7.4 7.4-1.5-1.5 4.9-4.9H3v-2h13.6l-4.9-4.9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.6 20.6 12l-7.4 7.4-1.5-1.5 4.9-4.9H3v-2h13.6l-4.9-4.9z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--t)}
.kn-b--sello:hover::after,.kn-b--linea:hover::after{transform:translateX(.2em)}
button.kn-b--sello::after,.kn-b--ancho::after{content:none}

/* ══ 6 · La ficha ══════════════════════════════════════════════════════
   La pieza de la casa. Era una hoja blanca con filete y nada más; ahora
   se APOYA: tres sombras cortas y ninguna difusa, porque una hoja sobre
   otra no flota. Y la de la portada lleva una segunda hoja detrás,
   desplazada seis píxeles: un expediente nunca tiene una sola. */
.kn-papel,.kn-ficha{position:relative;background:var(--papel-3);
  border:1px solid var(--filete);box-shadow:var(--sombra-hoja);
  transition:box-shadow var(--paso),transform var(--paso)}
.kn-hero .kn-papel{box-shadow:var(--sombra-hoja-alta)}
.kn-hero .kn-papel::after{content:"";position:absolute;inset:0;z-index:-1;
  transform:translate(6px,6px);background:var(--papel-2);
  border:1px solid var(--filete);box-shadow:var(--sombra-hoja)}
.kn-hero .kn-papel{isolation:isolate}
/* el sello de salida, entintado de verdad */
.kn-papel__sello{color:var(--sello);border:1px solid var(--sello);
  padding:.28em .6em;letter-spacing:.14em;opacity:.9}

/* ══ 7 · La losa de tinta ══════════════════════════════════════════════
   Una sección entera en el azul de tampón, con el papel como tinta. Es el
   único golpe de color de la página: si hubiera dos, no habría ninguno.
   Dentro se invierte todo —rótulo, filetes, botones— con variables, no
   con reglas nuevas para cada pieza. */
.kn-losa{background:var(--sello-bajo);color:var(--papel-2);
  border-top:0;position:relative;isolation:isolate}
.kn-losa::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grano);background-size:220px 220px;
  opacity:.16;mix-blend-mode:overlay}
.kn-losa>*{position:relative}
.kn-losa h2,.kn-losa h3{color:#FFFFFF}
.kn-losa h2::before{color:#8FB7DC;opacity:1}
.kn-losa p,.kn-losa .kn-sec__cab p{color:#C9DBEC}
.kn-losa .kn-marca-agua{color:#8FB7DC}
.kn-losa .kn-marca-agua::before,.kn-losa .kn-marca-agua::after{background:#8FB7DC}
.kn-losa .kn-sec__cab::before{background:#8FB7DC}
.kn-losa .kn-manifiesto,.kn-losa .kn-manifiesto__r{border-color:rgba(255,255,255,.18)}
.kn-losa .kn-manifiesto__k{color:#8FB7DC}
/* El énfasis DENTRO de la losa no puede seguir siendo `--sello`: es el azul
   del propio fondo. Medido, las cifras en negrita de la declaración quedaban
   en 1,38:1 —invisibles— mientras el texto que las rodea va a 9,31. Sobre
   tinta, el énfasis se hace con LUZ, no con más tinta. */
.kn-losa b,.kn-losa strong,.kn-losa .kn-declaracion b{color:#FFFFFF}
.kn-losa a{color:#FFFFFF}
.kn-losa .kn-b--linea{color:#FFFFFF;border-color:rgba(255,255,255,.42);
  box-shadow:inset 0 0 0 3px var(--sello-bajo),0 2px 0 0 rgba(255,255,255,.22)}
.kn-losa .kn-b--linea:hover{border-color:#FFFFFF;color:#FFFFFF;
  box-shadow:inset 0 0 0 3px var(--sello-bajo),0 2px 0 0 rgba(255,255,255,.42)}

/* ══ 7b · La banda ═════════════════════════════════════════════════════
   Cuerpo grande corriendo de lado a lado. Es el contrapeso de la losa: allí
   manda el color, aquí la ESCALA. Va sobre un filete arriba y otro abajo,
   sin fondo: en una página de papel, una banda con relleno sería una
   segunda losa, y con dos losas no hay ninguna.

   Se para al pasar por encima y no corre para quien pidió menos
   movimiento. El texto va en el verde de la marca, no en el azul: es el
   único sitio del sitio donde ese verde hace de tinta, y lo trae el
   logotipo nuevo. */
.kn-banda{overflow:hidden;border-block:1px solid var(--filete-2);
  padding-block:clamp(1rem,2vw,1.6rem);
  margin-block:clamp(3rem,6vw,5rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.kn-banda__p{display:flex;width:max-content;gap:clamp(1.5rem,3vw,2.5rem);
  animation:kn-rueda 42s linear infinite}
.kn-banda:hover .kn-banda__p{animation-play-state:paused}
@keyframes kn-rueda{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.kn-banda__t{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.5rem);
  font-family:var(--fd);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.6rem,1rem + 2.4vw,3.25rem);line-height:1;
  color:#5F6D61;white-space:nowrap}
.kn-banda__t span{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.5rem)}
.kn-banda__t span::after{content:"";width:.32em;height:.32em;flex:none;
  background:var(--sello);transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.kn-banda__p{animation:none}}

/* ══ 8 · La barra ══════════════════════════════════════════════════════
   Quieta es la de siempre. Al moverse la página se vuelve papel
   translúcido y aparece el filete: es el único momento en que se anuncia. */
.kn-barra{transition:background var(--paso),box-shadow var(--paso),
          border-color var(--paso)}
.kn-barra.is-fija{background:rgba(233,239,227,.86);
  box-shadow:0 1px 0 0 var(--filete),0 10px 24px -18px rgba(18,26,19,.5)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .kn-barra.is-fija{-webkit-backdrop-filter:blur(12px) saturate(1.2);
                            backdrop-filter:blur(12px) saturate(1.2)}
}
/* Aquí VIVÍA un subrayado que se abría al pasar. Sobra desde que el
   renglón se marca con pastilla, y no sobraba en silencio: se sumaba a
   ella y a un `border-bottom` de 2 px que publica la hoja base, así que
   al pasar el ratón salía la pastilla clara CON una barra azul maciza
   debajo, más ancha que la propia pastilla. La pastilla es la marca de
   la referencia y va sola. */
.kn-nav a{border-bottom:0}
.kn-nav a:hover{border-bottom-color:transparent}

/* ══ 9 · El manifiesto ═════════════════════════════════════════════════
   Las filas de rótulo y hecho. Cada una se enciende al pasar y el rótulo
   se tiñe: es lo único que se mueve. */
.kn-manifiesto__r{transition:background var(--t)}
.kn-manifiesto__r:hover{background:var(--sello-lavado)}
.kn-losa .kn-manifiesto__r:hover{background:rgba(255,255,255,.05)}
.kn-manifiesto__v h3{letter-spacing:-.015em}

/* ══ 10 · El marco de imagen ═══════════════════════════════════════════
   Una foto en una página de papel no lleva velo: lleva CANTO. Filete de
   un píxel, la misma sombra de hoja, y una etiqueta encima, arriba a la
   izquierda, como el sello de un archivo. */
.kn-marco{position:relative;overflow:hidden;background:var(--papel-2);
  border:1px solid var(--filete);box-shadow:var(--sombra-hoja);margin:0}
.kn-marco img{width:100%;height:100%;object-fit:cover;display:block}
.kn-marco__et{position:absolute;top:0;left:0;
  background:var(--papel-3);color:var(--sello);
  border-right:1px solid var(--filete);border-bottom:1px solid var(--filete);
  padding:.42em .8em;font-family:var(--fd);font-weight:600;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase}
/* la banda: la foto a la medida de la columna, con su proporción */
.kn-marco--banda{margin-block:clamp(2rem,4vw,3rem);aspect-ratio:2.6/1}
@media (max-width:620px){
  /* a 2,6:1 en un teléfono la banda mide 130 px de alto y no se ve nada */
  .kn-marco--banda{aspect-ratio:16/10}
}
.kn-dos{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media (min-width:900px){
  .kn-dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kn-dos--fig-izq .kn-dos__fig{order:-1}
}

/* ══ 11 · Campos ═══════════════════════════════════════════════════════ */
.kn-in:focus,.kn-ta:focus,.kn-sel:focus{border-color:var(--sello);
  box-shadow:0 0 0 3px rgba(18,70,126,.14);outline:none}

/* ══ 12 · El revelado ══════════════════════════════════════════════════
   Las piezas entran subiendo al asomar. La clase que las esconde la pone
   el GUION —si no corre, no hay nada invisible— y el observador no usa
   margen negativo, que es lo que deja piezas sin animar para siempre. */
.js-alza [data-sube]{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--paso,.32s) ease,transform .55s ease}
.js-alza [data-sube].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-alza [data-sube]{opacity:1;transform:none}
}

/* ══ 13 · El enlace dentro de la prosa ═════════════════════════════════
   `a{color:inherit}` deja los enlaces del cuerpo sin ninguna señal salvo
   el color, y dentro de la losa ni eso: el blanco del enlace contra el
   azul claro del texto que lo rodea medía **1,41:1** —la auditoría pide 3
   entre enlace y texto vecino cuando el color es la única marca—.

   Se resuelve como lo resuelve un documento: subrayando. No es una
   concesión a la norma, es el registro de esta casa. Quedan fuera los
   botones y el enlace de cierre de zona, que ya se distinguen por forma. */
p a:not(.kn-b):not(.kn-enlace){
  text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,currentColor 55%,transparent)}
p a:not(.kn-b):not(.kn-enlace):hover{text-decoration-thickness:2px;
  text-decoration-color:currentColor}
/* sin `color-mix` —navegadores viejos— el subrayado se hereda del color */
@supports not (color:color-mix(in srgb,#000 50%,transparent)){
  p a:not(.kn-b):not(.kn-enlace){text-decoration-color:currentColor}
}