/* Reset mínimo + primitivas del design system */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ink-900);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--brand-lime); outline-offset: 4px; border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100%; left: var(--s-4); z-index: 200; padding: var(--s-2) var(--s-4); background: var(--brand-lime); color: var(--ink-950); border-radius: var(--r-sm); font-weight: 500; }
.skip-link:focus { top: var(--s-4); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: var(--s-3);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: var(--accent); }

.display { font-size: var(--fs-display); font-weight: 300; line-height: var(--lh-tight); letter-spacing: var(--track-display); text-wrap: balance; }
.display strong { font-weight: 700; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; max-width: 34ch; }

/* Botones — elementos <a>/<button> reales. Respuesta física: expansión ligera, luz interior que sigue al cursor, icono que se desplaza. */
.btn {
  --btn-bg: var(--fg); --btn-fg: var(--ink-950); --lx: 50%; --ly: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 3.25rem; padding: 0 1.75rem;
  border-radius: var(--r-pill); font-weight: 500; font-size: var(--fs-small); letter-spacing: 0.04em;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform var(--dur-base) cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  will-change: transform;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at var(--lx) var(--ly), rgba(255, 255, 255, 0.55), transparent 70%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 30px -12px rgba(244, 245, 250, 0.35); }
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--dur-fast); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost::before { background: radial-gradient(60% 80% at var(--lx) var(--ly), rgba(244, 245, 250, 0.16), transparent 70%); }
.btn--ghost:hover { background: rgba(244, 245, 250, 0.04); box-shadow: inset 0 0 0 1px var(--fg-muted); }
.btn__arrow { width: 1rem; height: 1rem; transition: transform var(--dur-base) cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost .btn__arrow { transform: rotate(90deg); }
.btn--ghost:hover .btn__arrow { transform: rotate(90deg) translateX(4px); }
@media (prefers-reduced-motion: reduce) { .btn, .btn__arrow { transition: none; } .btn:hover { transform: none; } }

/* Links de texto: subrayado que se dibuja */
.u { position: relative; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-base) var(--ease-out); }
.u:hover, .u:focus-visible { background-size: 100% 1px; }

.data {
  font-variant-numeric: tabular-nums; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg);
}
.data--muted { color: var(--fg-muted); font-weight: 400; letter-spacing: 0.1em; }
.data--accent { color: var(--accent); }
.pending { color: color-mix(in srgb, var(--brand-lime) 62%, var(--fg-muted)); font-size: 0.9375rem; font-family: ui-monospace, monospace; opacity: 0.85; }   /* placeholder identificable pero sin competir con el contenido real */

/* Degradado Probify en palabras clave (V2). .four--soft: versión sobria para frases largas */
.four { background: linear-gradient(90deg, var(--p-fortix) 0%, var(--p-pro) 36%, var(--p-pro) 44%, var(--p-v) 58%, var(--p-aura) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.four--soft { background-image: linear-gradient(90deg, color-mix(in oklab, var(--p-fortix) 68%, white) 0%, color-mix(in oklab, var(--p-pro) 68%, white) 36%, color-mix(in oklab, var(--p-pro) 68%, white) 44%, color-mix(in oklab, var(--p-v) 68%, white) 58%, color-mix(in oklab, var(--p-aura) 68%, white) 100%); }