/* Klivio Obra · marca (homologada con klivio.net/klivio-obra)
   Mismo sistema que el sitio: Archivo variable (titulares condensados en mayúsculas), JetBrains Mono para
   etiquetas y botones, negro asfalto con amarillo de señal y vidrio esmerilado. Logotipo = la palabra
   "klivio" con "obra" en amarillo, sin símbolo. Por ahora solo la usa el login; el resto de la app migrará a estos tokens. */

@font-face {
  font-family: "Archivo Variable"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/static/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  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;
}
@font-face {
  font-family: "Archivo Variable"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/static/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  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 {
  --k-fondo: #090806;          /* negro asfalto */
  --k-fondo-2: #0E0C09;
  --k-superficie: #15130E;
  --k-superficie-2: #1C1913;
  --k-tinta: #F3EFE4;
  --k-tinta-2: #BDB6A6;
  --k-tinta-3: #8F887A;
  --k-linea: rgba(243, 239, 228, .08);
  --k-linea-2: rgba(243, 239, 228, .15);
  --k-enlace: #F5C842;
  --k-acento: #F2B300;         /* amarillo de señal */
  --k-acento-hover: #FFC21A;
  --k-acento-tinta: #1A1400;
  --k-brillo: 242, 179, 0;
  --k-vidrio: rgba(28, 25, 19, .45);
  --k-vidrio-borde: rgba(243, 239, 228, .12);
  --k-noche: 9, 8, 6;          /* rgb del fondo, para velos */
  --k-luz: 243, 239, 228;      /* rgb de la tinta */
  --k-klivio: #A7B77F;         /* verde oliva de Klivio (la empresa), para enlaces hacia klivio.net */
  --k-klivio-texto: #BCCA98;
  --k-klivio-rgb: 167, 183, 127;
  --k-ok: #86D3A4;
  --k-error: #FF8A7D;

  --k-f: "Archivo Variable", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-mono: "JetBrains Mono Variable", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --k-radio: 10px;
  --k-margen: clamp(16px, 4vw, 56px);
}

/* Logotipo: "klivio" + "obra" en amarillo de señal */
.logotipo { font: 600 var(--t, 1.45rem)/1 var(--k-f); letter-spacing: -.055em; color: var(--k-tinta); white-space: nowrap; font-variation-settings: "wdth" 100; text-decoration: none; }
.logotipo-producto { color: var(--k-acento); letter-spacing: -.04em; }

/* Titular: condensada, gruesa y en mayúsculas */
.display { font-family: var(--k-f); font-weight: 700; font-variation-settings: "wdth" 72; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }

/* Etiqueta técnica: monoespaciada, mayúsculas, con trazo de señal */
.ante {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 .78rem/1.3 var(--k-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--k-tinta-3);
}
.ante::before { content: ""; width: 18px; height: 1px; background: var(--k-acento); }

/* Botones: píldora, mayúsculas monoespaciadas, con flecha */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 50px; padding: .75em 1.5em;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 .86rem/1.1 var(--k-mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.boton svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .2s; }
.boton:hover svg { transform: translateX(3px); }
.boton-primario { background: var(--k-acento); color: var(--k-acento-tinta); }
.boton-primario:hover { background: var(--k-acento-hover); box-shadow: 0 10px 40px -10px rgba(var(--k-brillo), .6); }
.boton-linea { border-color: var(--k-vidrio-borde); color: var(--k-tinta); background: rgba(var(--k-noche), .35); }
.boton-linea:hover { border-color: var(--k-tinta); background: rgba(255, 255, 255, .06); }

/* Vidrio esmerilado */
.vidrio {
  background: linear-gradient(160deg, rgba(var(--k-luz), .07), rgba(var(--k-luz), .02)), var(--k-vidrio);
  border: 1px solid var(--k-vidrio-borde);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 80px -30px rgba(0, 0, 0, .7);
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
}