/* Base de las demos para clientes (K-44). Tokens que se cambian por cliente en :root; el resto no se toca por demo.
   Estándar: areas/deliverables/presentations/docs/estandar-de-demos.md */
:root {
  /* — por cliente — */
  --ink: oklch(0.22 0.02 60);          /* texto */
  --paper: oklch(0.97 0.01 80);        /* fondo de lectura */
  --surface: oklch(0.99 0.005 80);     /* superficies (y base del vidrio) */
  --accent: oklch(0.55 0.15 35);       /* un solo acento, tomado de la marca del cliente (su web/CSS) */
  --accent-text: oklch(0.45 0.15 35);  /* el acento como texto chico: más oscuro para 4,5:1 sobre el fondo (con textura, medir el peor píxel) */
  --muted: oklch(0.48 0.02 60);
  --line: oklch(0.88 0.01 70);
  --font-display: system-ui, sans-serif;   /* la tipografía de la marca del cliente (su CSS) o una alternativa libre parecida; sin serifs de moda */
  --font-text: system-ui, sans-serif;
  --texture: none;                     /* url(texture.webp): material del rubro (templates/demo-backgrounds/) */
  --veil: transparent;                 /* capa uniforme sobre la textura: rgb(16 12 9 / .8) oscurece, rgb(247 242 234 / .3) aclara */
  --glass-blur: 16px;                  /* sobre texturas finas (madera, lino), 1–2 px: más blur borra la veta */
  /* — fijos — */
  --radius: 14px;
  --glass-bg: color-mix(in oklch, var(--surface) 64%, transparent);
  --glass-border: color-mix(in oklch, white 38%, transparent);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 400 1rem/1.55 var(--font-text); text-rendering: optimizeLegibility;
}
/* Fondo en una capa fija: background-attachment: fixed no anda en iOS */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--veil), var(--veil)), var(--texture) center / cover, var(--paper); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 .5em; }
/* Titulares en un solo estilo: sin <em> ni palabras de color adentro (señales de IA, regla de Juan) */
h1 em, h2 em, h1 .accent, h2 .accent { font-style: inherit; color: inherit; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Vidrio sólo en la capa que flota (liquid-glass-bien-hecho.md) */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 50%, transparent), 0 10px 28px -14px rgb(0 0 0 / .4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: color-mix(in oklch, var(--surface) 95%, transparent); }
}
/* Windows con "efectos de transparencia" apagados da reduce: tinte más denso, nunca una caja sólida que tape el fondo */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass { background: color-mix(in oklch, var(--surface) 86%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line); }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: 0 1.1em;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .15s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn.quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}