/*
 * Marca Cóbrate para marketing (landing e Instagram). Mismos tokens y fuentes que la app (packages/ui/src/styles):
 * papel con trama de puntos, tinta azul marino, azul primary, amarillo del láser y una sola nota a mano por pieza.
 * Fuentes autoalojadas (OFL): Figtree, Caveat e IBM Plex Mono.
 */
@font-face { font-family: Figtree; font-weight: 500; font-display: swap; src: url(fuentes/figtree-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-weight: 600; font-display: swap; src: url(fuentes/figtree-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-weight: 700; font-display: swap; src: url(fuentes/figtree-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-weight: 800; font-display: swap; src: url(fuentes/figtree-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: Caveat; font-weight: 600; font-display: swap; src: url(fuentes/caveat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Caveat; font-weight: 700; font-display: swap; src: url(fuentes/caveat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fuentes/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  --surface: #f4f6fa;
  --surface-raised: #ffffff;
  --surface-sunken: #e9eef6;
  --ink: #152238;
  --ink-muted: #56627a;
  --line: #dde3ee;
  --primary: #1867c0;
  --primary-press: #1452a0;
  --primary-soft: #e3eefb;
  --accent: #0b8fd6;
  --scan: #ffcf3f;
  --marker: #ffd84d;
  --success: #2e7d32;
  --success-soft: #e6f4ea;
  --warning: #9a5800;
  --warning-soft: #fff1d6;
  --paper-dot: #1f3f7a17;
  --font-sans: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: Caveat, 'Segoe Print', cursive;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

.k-papel {
  background-color: var(--surface);
  background-image: radial-gradient(var(--paper-dot) 1.6px, transparent 2px);
  background-size: 26px 26px;
}
.k-tinta {
  background-color: var(--ink);
  background-image: radial-gradient(#ffffff10 1.6px, transparent 2px);
  background-size: 26px 26px;
  color: #ffffff;
}

/* «CÓBRATE»: mayúsculas espaciadas; la tilde de la Ó es la barra amarilla del láser (igual que en la app). */
.k-wm { display: inline-flex; align-items: baseline; font-family: var(--font-sans); font-weight: 800; line-height: 1; letter-spacing: .14em; white-space: nowrap; }
.k-wm-o { position: relative; }
.k-wm-o::before { content: ''; position: absolute; left: .3em; top: -.1em; width: .36em; height: .1em; min-height: 2px; border-radius: 999px; background: var(--scan); transform: rotate(-28deg); transform-origin: left center; }

.k-nota { display: inline-block; font-family: var(--font-hand); font-weight: 700; color: var(--primary); transform: rotate(-3deg); transform-origin: left center; }
.k-tinta .k-nota { color: var(--scan); }
.k-mark { background: linear-gradient(to bottom, transparent 60%, var(--marker) 60%, var(--marker) 90%, transparent 90%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.k-tinta .k-mark { background: linear-gradient(to bottom, transparent 62%, #ffcf3f66 62%, #ffcf3f66 90%, transparent 90%); }