/* ══════════════════════════════════════════════════════════════════════════
   marca.css · el nombre de la familia

   EL NOMBRE ES «Knife, Fire & Brain». «KFB» es el apodo, y sólo se usa cuando
   el nombre entero no entra. Hasta el 06/09/2026 esta app decía «KFB Tienda»
   siempre, o sea que usaba el apodo como si fuera el nombre.

   LA PALABRA «Fire» NO CAMBIA NUNCA, en ningún producto de la familia:
   cursiva, peso 400 mientras el resto va en 600, y roja. Canu lo marcó dos
   veces en Kiosco porque lo sacaron mal.

   ⚠️ EL EJE DE CURSIVA HAY QUE PEDIRLO. Si la fuente se baja sin `ital`, el
   navegador **falsea** la cursiva inclinando la redonda, y se nota. Por eso el
   enlace de las páginas dice `ital,wght@0,600;0,700;1,400`.

   Kiosco lo tiene así en su landing y NO en sus páginas de app --medido el
   06/09: `cajero.html`, `dueno.html` y `encargado.html` piden `wght@700` sin
   eje de cursiva--. O sea que ahí su propia «Fire» está falseada. Se los avisé.

   ══════════════════════════════════════════════════════════════════════════
   DOS COSAS QUE ACÁ SON DISTINTAS DE KIOSCO, A PROPÓSITO
   ══════════════════════════════════════════════════════════════════════════

   1 · EL ROJO SALE DE `--fuego`, que en este repo es `#ff4d4d`. El de ellos
       tiene el token en `#ff4d4d` y el wordmark escrito a mano en `#e8534f`:
       dos valores para el mismo rojo, y el de la marca es el que NO sale del
       token. Acá sale del token, que es la regla de esta casa.

   2 · SIN ANIMACIÓN EN LA APP. Kiosco le pasa un brillo dorado por encima en
       bucle y le hace parpadear la «Fire». Es lindo y va en la landing, donde
       hay tiempo. Adentro no: el cajero con la cola encima necesita que la
       pantalla responda, y una animación infinita corre para siempre en un
       teléfono viejo aunque nadie la mire. El degradado dorado queda; lo que
       no queda es el bucle.
   ══════════════════════════════════════════════════════════════════════════ */

.marca-kfb {
  display: inline-block;
  font-family: var(--letra-titulo);
  font-weight: 600;
  font-size: var(--txt-sm);
  letter-spacing: .01em;
  line-height: 1.15;
  white-space: nowrap;
  /* El dorado pasa por encima de las letras. Estático: la posición del
     degradado está fija, no animada. */
  background: linear-gradient(115deg,
              var(--texto) 20%, var(--acento) 46%, #e8d5b0 54%, var(--texto) 78%);
  background-size: 160% auto;
  background-position: 30% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* La «Fire». Se saca del degradado con `-webkit-text-fill-color`, que es lo
   único que pisa el `color: transparent` de arriba. */
.marca-kfb .fuego {
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  background: none;
  color: var(--fuego);
  -webkit-text-fill-color: var(--fuego);
}

/* «Tienda»: chica, volada y en la letra de texto. Es la chapa del producto,
   no parte del nombre -- por eso no lleva el dorado ni la serif. */
.marca-producto {
  display: inline-block;
  font-family: var(--letra);
  font-style: normal;
  font-size: .62rem;
  font-weight: var(--peso-medio);
  letter-spacing: .1em;
  vertical-align: super;
  margin-left: 3px;
  color: var(--texto-3);
  -webkit-text-fill-color: var(--texto-3);
}

/* ── CUANDO NO ENTRA EL NOMBRE ENTERO ────────────────────────────────────
   Va «KFB»: la K y la B con el mismo dorado y la F en rojo. Es el nombre
   comprimido, no otro logo.

   EL CORTE VA EN 1024, que es lo que mide Kiosco en su CSS. Su carta dice
   430; los dos números están escritos en su repo y no coinciden. Se copia el
   del CSS, que es el que corre. */
.marca-corta { display: none; }

@media (max-width: 1024px) {
  .marca-larga { display: none; }
  .marca-corta { display: inline; }
}