/* Variables propias del sitio. Los colores, tipografías, radios y tiempos base vienen de tokens.css
   (copia de diseno/tokens.css): acá solo se combinan, nunca se repiten valores de marca. */
:root {
  color-scheme: light;
  --fondo-actual: var(--color-fondo);
  --fuente-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --texto-mini: 0.875rem;
  --tracking-mono: 0.1em;
  --ease-estudio: cubic-bezier(0.2, 0.9, 0.3, 1);
  --nav-alto: 76px;
  --ancho-max: 1200px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --vidrio-denso: rgba(255, 255, 255, 0.86);
  --superficie-suave: rgba(255, 255, 255, 0.72);
  --linea-capa: rgba(42, 30, 92, 0.05);
  --capas: repeating-linear-gradient(0deg, var(--linea-capa) 0 1px, transparent 1px 6px);
  --capas-marca: repeating-linear-gradient(0deg, var(--color-primario) 0 3px, var(--color-primario-hover) 3px 6px);
  --degrade-filamento: linear-gradient(90deg, var(--color-primario), var(--cat-didacticos), var(--cat-flexis), var(--cat-spinners), var(--cat-fidgets), var(--cat-clickers));
  --sombra-acento: 0 18px 40px color-mix(in srgb, var(--c, var(--color-primario)) 35%, transparent);
  --c: var(--color-primario);
  --cs: var(--color-superficie);
  --ct: var(--color-primario-hover);
}

.tono-primario { --c: var(--color-primario); --cs: var(--color-superficie); --ct: var(--color-primario-hover); }
.tono-fidgets { --c: var(--cat-fidgets); --cs: var(--cat-fidgets-suave); --ct: var(--cat-fidgets-texto); }
.tono-clickers { --c: var(--cat-clickers); --cs: var(--cat-clickers-suave); --ct: var(--cat-clickers-texto); }
.tono-spinners { --c: var(--cat-spinners); --cs: var(--cat-spinners-suave); --ct: var(--cat-spinners-texto); }
.tono-flexis { --c: var(--cat-flexis); --cs: var(--cat-flexis-suave); --ct: var(--cat-flexis-texto); }
.tono-didacticos { --c: var(--cat-didacticos); --cs: var(--cat-didacticos-suave); --ct: var(--cat-didacticos-texto); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-alto) + 16px); }
body {
  min-height: 100vh;
  background: var(--fondo-actual);
  color: var(--color-tinta);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background-color 700ms var(--ease-suave);
}
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 600; line-height: 1.05; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--ct, var(--color-primario)); }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icono-grande { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--fuente-mono); font-size: var(--texto-mini); font-weight: 600; letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--radio-pildora); background: var(--color-tinta); color: var(--color-sobre-primario); font-weight: 700; }
.saltar:focus { top: 16px; }