/* ============================================
   BASE — Typography, container, utilidades globales
   ============================================ */

html { font-feature-settings: 'liga', 'calt', 'kern'; }

/* Headings — Sora, high-tech, tight */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

p { line-height: var(--lh-normal); }

/* Eyebrow / overline */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: #0A93B8;
}

/* Contenedor base */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

/* ──────────────── ACCESIBILIDAD ──────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-m);
  z-index: var(--z-modal);
  padding: var(--space-s) var(--space-m);
  background: var(--color-cyan);
  color: var(--color-bg);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-soft);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-m); }

/* ──────────────── SCROLL PROGRESS ──────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-violet));
  z-index: var(--z-nav);
  transform: scaleX(var(--scroll-progress, 0));
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    transform: scaleX(0);
    animation: progress-grow linear;
    animation-timeline: scroll();
  }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}
.scroll-progress[style*="--scroll-progress"] {
  width: var(--scroll-progress);
  transform: none;
}

/* ──────────────── BOTONES BASE ──────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  transition:
    transform var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out);
  white-space: nowrap;
}

.btn--primary {
  padding: 0.9rem 1.5rem;
  color: var(--color-ink);
  background: var(--color-cyan);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.30);
}
.btn--primary:hover {
  background: var(--color-cyan-300);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 212, 255, 0.45);
}

.btn--ghost {
  padding: 0.9rem 1.5rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: var(--color-surface-2);
  border-color: var(--color-cyan);
  transform: translateY(-2px);
}

/* ──────────────── UTILIDADES TEXTO ──────────────── */
.text-gradient {
  background: linear-gradient(120deg, var(--color-cyan), var(--color-violet-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}