/* ==========================================================================
   base.css — Tokens de diseño, tipografía y layout base
   Push&Pull · Inspirado en itsoffbrand.com
   ──────────────────────────────────────────────────────────────────────────
   Aquí viven las "variables" del proyecto (colores, fuentes, tamaños).
   Si quieres cambiar un color o un tamaño global, hazlo en :root.
   ========================================================================== */

:root {
  /* ---- Colores ---------------------------------------------------------- */
  --bg:        #0d0d0d;                       /* fondo negro total          */
  --bg-card:   #111111;                       /* fondo de card              */
  --bg-card-hover: #161616;                   /* card en hover              */
  --fg:        #f0ece4;                        /* texto crema/blanco         */
  --fg-dim:    rgba(240, 236, 228, 0.22);     /* títulos en 2º plano        */
  --fg-muted:  rgba(240, 236, 228, 0.50);     /* metadatos: tags, labels, números (contraste AA ✓ 4.7:1) */
  --fg-soft:   rgba(240, 236, 228, 0.68);     /* PÁRRAFOS DE LECTURA (contraste AA ✓) */
  --fg-subtle: rgba(240, 236, 228, 0.18);     /* aún más tenue              */
  --border:    rgba(240, 236, 228, 0.08);     /* separadores muy sutiles    */

  /* ---- Acentos de marca (magenta + aqua, del logo Push&Pull) ------------ */
  /* Se usan con criterio: símbolos (+ ● △ ⁂), hovers, flechas, detalles.   */
  --accent-magenta: #f0f;                      /* "PUSH" del logo            */
  --accent-aqua:    aqua;                      /* "PULL" del logo            */

  /* ---- Tipografía ------------------------------------------------------- */
  --font: 'Syne', system-ui, -apple-system, sans-serif;

  /* Tamaños fluidos (escalan con el viewport con clamp) */
  --text-hero:    clamp(28px, 8vw, 110px);

  /* TITULAR DE SECCIÓN UNIFICADO — referencia: "Confían en nosotros."
     Lo usan Trusted, Work y el CTA del footer. Si quieres cambiar el
     tamaño de TODOS los títulos a la vez, toca solo esta línea. */
  --text-display: clamp(32px, 9vw, 150px);
  --display-weight: 800;
  --display-leading: 0.92;
  --display-tracking: -0.04em;

  --text-section: clamp(36px, 6vw, 82px);
  --text-card:    clamp(28px, 5vw, 72px);
  --text-body:    clamp(15px, 1.1vw, 17px);
  --text-label:   0.65rem;

  /* ---- Espaciado -------------------------------------------------------- */
  --section-pad: clamp(5rem, 9vw, 9rem);      /* padding vertical secciones */
  --gutter:      clamp(1.25rem, 4vw, 4rem);   /* margen horizontal global   */

  /* ---- Easing / tiempos (entradas estilo OffBrand) ---------------------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-line: 0.9s;
}

/* --------------------------------------------------------------------------
   Base del documento
   -------------------------------------------------------------------------- */
html {
  background: var(--bg);
}

/* Lenis (smooth scroll) controla el scroll; evitamos scroll nativo doble */
html.lenis,
html.lenis body {
  height: auto;
}

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--text-body);
  color: var(--fg);
  background: var(--bg);
  letter-spacing: -0.01em;
  /* 'clip' recorta desbordes horizontales SIN crear contenedor de scroll
     (con 'hidden' se rompía el smooth scroll de Lenis). */
  overflow-x: clip;
}

/* Bloquea el scroll mientras el preloader está activo */
body.is-loading {
  overflow: hidden;
}

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

/* --------------------------------------------------------------------------
   Tipografía de utilidad
   -------------------------------------------------------------------------- */
.label {
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

/* Separador sutil entre secciones (estilo OffBrand) */
.section {
  border-top: 1px solid var(--border);
  padding-block: var(--section-pad);
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

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

/* Respeta a quien pide menos movimiento: sin animaciones */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}