/* ==========================================================================
   Base · reset acotado, tipografía y utilidades
   ========================================================================== */

*, *::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(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: calc(6 * var(--s));
}
.footer a:focus-visible,
.work-card a:focus-visible { outline-color: #fff; }

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

/* El ritmo vertical se define por sección en sections.css, derivado de las
   coordenadas del Figma. .section sólo marca semántica, no espaciado. */

/* ---- Display type ---- */
.section__title,
.hero__title,
.standard__title,
.philosophy__title,
.cta__title,
.engine__title,
.card__title,
.step__title,
.stat__num,
.steps__numeral,
.step__text,
.pill,
.footer__col-title,
.notfound__title {
  font-family: var(--font-display);
  font-weight: 400;              /* Cal Sans tiene un único peso */
  letter-spacing: 0;             /* el diseño no aplica tracking */
}

.section__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--ink);
  margin-top: calc(13 * var(--s));   /* chip -> título, medido en el diseño */
}

/* ---- Utilidades ---- */
.u-blue { color: var(--blue); }

.u-sr,
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: calc(12 * var(--s)); left: calc(12 * var(--s));
  z-index: 200;
  width: auto; height: auto; margin: 0;
  padding: calc(10 * var(--s)) calc(20 * var(--s));
  clip-path: none;
  background: var(--blue);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--fs-nav);
  font-weight: 700;
}

/* ---- Reveal on scroll ---- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift), 0);
  /* La opacidad entra un poco antes que el movimiento: así el texto ya se lee
     mientras termina de acomodarse, y la animación se nota sin sentirse lenta. */
  transition:
    opacity calc(var(--t-reveal) * 0.7) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .step { opacity: 1; transform: none; transition: none; }
  [data-float],
  .orbit__track, .orbit__spin, .orbit__pulse,
  .work__track,
  .chip__dot,
  .brands__track,
  .standard__rain span,
  .steps__orbit,
  .chip::after,
  .steps__numeral.is-swap,
  .orbit__slot img {
    animation: none !important;
  }
  /* El destello se saca del todo; el color del texto nunca dependio de el. */
  .chip::after { display: none; }
  /* El trazado de la curva de pasos también es movimiento no pedido */
  .steps__path path { transition: none; stroke-dashoffset: 0; }
  /* Sin el resaltado por scroll, el track pinneado serían 3 pantallas de scroll
     vacío: lo colapsamos a una sección normal. */
  .standard__track { height: auto; }
  .steps__track { height: auto; }
  .steps__sticky { position: static; height: auto; }
  .standard__sticky {
    position: static;
    height: auto;
    padding-block: calc(120 * var(--s));
  }
}