/* =========================================================================
   Guarabit · Base: reset, tipografía, primitivas de layout y movimiento
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-synthesis-weight: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}

/* --- Voces tipográficas -------------------------------------------------
   Con una sola familia, el contraste lo pone el peso: 800 en el display,
   200 en los numerales, 300 en la itálica de acento. Esa distancia es la que
   antes daba el salto entre serif y grotesca.                              */

.t-colossal {
  font-family: var(--font-display);
  font-size: var(--fs-colossal);
  font-weight: var(--w-black);
  line-height: var(--lh-colossal);
  letter-spacing: var(--ls-colossal);
  text-transform: none;
}
/* La línea de acento baja a 300: contra el 800 de las otras, el salto de
   peso hace el trabajo que antes hacía la itálica de una serif. */
.t-colossal em {
  font-style: italic;
  font-weight: var(--w-light);
}

.t-giant {
  font-family: var(--font-display);
  font-size: var(--fs-giant);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-colossal);
}

.t-numeral {
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  font-weight: var(--w-thin);
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-feature-settings: 'lnum';
}

/* Registro técnico: versalitas anchas para datos, etiquetas y metadatos.
   Montserrat en mayúsculas con tracking abierto rinde muy bien acá. */
.t-tech {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  max-width: var(--measure);
}

/* --- Foco --------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.on-ink :focus-visible { outline-color: var(--accent-on-ink); }
.on-field :focus-visible { outline-color: var(--text-on-field); }

.skip-link {
  position: fixed;
  left: var(--s-4); top: var(--s-4);
  z-index: 200;
  transform: translateY(-250%);
  background: var(--ink);
  color: var(--text-on-ink);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

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

/* =========================  Layout  ===================================== */

.shell {
  width: 100%;
  max-width: var(--max-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sangrado: el contenido llega hasta el borde de la ventana, sin contenedor.
   Es lo que hace que los títulos se corten contra el canto de la pantalla. */
.bleed { padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; }

.section--ink   { background: var(--ink); color: var(--text-on-ink-muted); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--text-on-ink); }

.section--field { background: var(--field); color: var(--text-on-field-muted); }
.section--field h1, .section--field h2, .section--field h3 { color: var(--text-on-field); }

.section--sunk  { background: var(--paper-sunk); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ''; width: var(--s-6); height: 1px; background: currentColor; flex: none; }
.section--ink .eyebrow   { color: var(--accent-on-ink); }
.section--field .eyebrow { color: var(--text-on-field); }

/* =========================  Botones  ==================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.875rem var(--s-5);
  border: 1px solid transparent;
  /* Explícito: en un <button>, las variantes sin fondo propio (ghost)
     se quedaban con el gris que pone el navegador. */
  background: transparent;
  border-radius: 100px;
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn__arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary  { background: var(--ink); color: var(--text-on-ink); }
.btn--primary:hover { background: var(--field-deep); }

.btn--ghost    { border-color: var(--rule-strong); color: var(--text-strong); }
.btn--ghost:hover { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }

.btn--on-ink   { background: var(--field); color: var(--text-on-field); }
.btn--on-ink:hover { background: var(--paper); color: var(--ink); }

.btn--on-field { background: var(--ink); color: var(--text-on-ink); }
.btn--on-field:hover { background: var(--paper); color: var(--ink); }

.btn--ghost-ink { border-color: var(--rule-on-ink); color: var(--text-on-ink); }
.btn--ghost-ink:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:hover .btn__arrow { transform: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--text-strong); }

/* =========================  Movimiento  =================================
   Cuatro primitivas, usadas en todo el sitio. Todas se anulan bajo
   prefers-reduced-motion (al final del archivo).                          */

/* 1 · Máscara de línea: recorta lo que sobresale del renglón, para que las
       letras puedan entrar subiendo desde abajo. El movimiento lo pone GSAP
       (js/sitio.js); acá no se esconde nada, así que si el JavaScript no
       corre el título se ve normal.                                       */
.mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.mask > * { display: block; }

/* 2 · Aparición simple, para bloques de texto y tarjetas. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 3 · Filete que se traza de izquierda a derecha al entrar. */
.draw-rule {
  border: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.22;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease-out);
}
.draw-rule.is-visible { transform: scaleX(1); }

/* 4 · Deriva: el elemento se desplaza a contramano del scroll mientras
      cruza la pantalla. Se resuelve con timelines de scroll nativos, sin una
      sola línea de JavaScript y sin listeners: si el navegador no los
      soporta, simplemente no pasa nada. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .drift {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes drift {
  from { transform: translateY(var(--drift, 2.5rem)); }
  to   { transform: translateY(calc(var(--drift, 2.5rem) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mask > *, .reveal { transform: none !important; opacity: 1 !important; }
  .draw-rule { transform: scaleX(1) !important; }
  .drift { animation: none !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Excepción deliberada: la cinta se mueve siempre. La regla global de
     arriba le anularía la duración, así que se le devuelve. Lo que la hace
     aceptable es que tiene botón de pausa alcanzable con el teclado. */
  .marquee__track {
    animation-duration: var(--marquee-dur, 34s) !important;
    animation-iteration-count: infinite !important;
  }
}