html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

h1, h2, h3 { text-wrap: balance; }

.h-hero {
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.h-section {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.lead {
  color: var(--muted);
  max-width: 68ch;
}

/* Botones: pill, feedback físico al presionar */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 1rem;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(0.97); }

.btn--brand {
  background: var(--brand);
  color: #FFFFFF;
}
.btn--brand:hover { background: var(--brand-soft); }

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--light {
  background: #FFFFFF;
  color: var(--brand-deep);
}
.btn--light:hover { background: var(--tint); }

/* Reveal por scroll: el contenido es visible por defecto;
   JS añade .js-reveal solo cuando habrá animación (nunca queda en blanco) */
.js-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal.is-revealed { opacity: 1; transform: none; }

.word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.word-wrap .word { display: inline-block; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}