/* ═══════════════════════════════════════════════════════════════════════════
   BASE — reset, tipografía y accesibilidad
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  /* `svh` en vez de `vh`: en móvil la barra del navegador aparece y desaparece,
     y `vh` mide la ventana grande. Con `vh` una sección "a pantalla completa"
     se corta por abajo mientras la barra está visible. */
  block-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;

  /* AQUÍ NO VA `scroll-padding-block-start`.
     Sería lo natural para que la barra fija no tape los anclajes, pero el
     relleno de desplazamiento encoge el "scrollport" que usan las líneas de
     tiempo de scroll, y las desplaza TODAS. Con 6rem arriba, la portada
     arrancaba su zoom un 8% empezada: con la página sin tocar el nombre ya se
     dibujaba a 1.12 y se salía de la pantalla por la derecha.
     El hueco de la barra se lo pone cada destino con `scroll-margin`. */
}

body {
  min-block-size: 100%;
  background: var(--ink);
  color: var(--ice);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ninguna sección se desborda a lo ancho; si alguna lo intenta, que no
     genere una barra horizontal en toda la página. */
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

/* ── Titulares ──────────────────────────────────────────────────────────────
   Unbounded es ancha por diseño. A tamaño de portada hay que cerrarle el
   interletraje y el interlineado o el titular se desarma en palabras sueltas. */

.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.2; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ice-62);
  max-inline-size: 46ch;
}

.muted { color: var(--ice-45); }

.eyebrow {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ice-45);
}

/* El acento de la marca sobre texto. `background-clip: text` es estático: se
   resuelve una vez al pintar, no cuesta nada después. */
.grad {
  background: var(--aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Utilidades ─────────────────────────────────────────────────────────── */

.wrap {
  inline-size: var(--wrap);
  margin-inline: auto;
}

/* El hueco de la barra fija, puesto en el destino y no en el contenedor.
   Solo a los que son destino de un enlace: `scroll-margin` en un elemento que
   además lleva una línea de tiempo la desplazaría igual que el relleno. */
#experiencia,
#probador,
#asistente,
#tiendas,
#descargar { scroll-margin-block-start: 6rem; }

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El enlace de salto: invisible hasta que el teclado lo alcanza. */
.skip:focus-visible {
  position: fixed;
  inset-block-start: 1rem; inset-inline-start: 1rem;
  z-index: 200;
  inline-size: auto; block-size: auto;
  padding: .7rem 1.2rem;
  clip-path: none;
  border-radius: var(--r-pill);
  background: var(--ice);
  color: var(--ink);
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--teal); color: var(--ink); }

/* ── Revelado ───────────────────────────────────────────────────────────────
   El estado de partida vive aquí, pero solo se aplica si el JS ha arrancado
   (`html.js`). Sin JS —o si el script falla— el contenido queda visible en vez
   de quedarse invisible para siempre esperando una clase que no llega. */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 2.2rem, 0);
  transition:
    opacity   var(--dur) var(--ease-out) var(--reveal-delay, 0s),
    transform var(--dur) var(--ease-out) var(--reveal-delay, 0s);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* El escalonado se declara en el HTML con --i y se traduce a retardo aquí,
   así el marcado no lleva milisegundos escritos a mano. */
[style*="--i:"] { --reveal-delay: calc(var(--i) * 90ms); }

/* ── Movimiento reducido ────────────────────────────────────────────────────
   Quien lo pide no quiere "menos animación": quiere ninguna. Se desactivan
   también las animaciones atadas al scroll, que son la mitad de esta página. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    animation-timeline: auto !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
}