/* ============================================================
   Argency — design tokens from DESIGN.md
   Desktop-first; mobile overrides at the bottom (max-width: 991px)
   Standalone build: fonts wired to Google Fonts (replacing next/font)
   ============================================================ */

/* ---- Clash Grotesk (local · variable font, weights 200–700) ----
   Una sola familia con eje de peso para usar light(300)/regular(400)/medium(500). */
@font-face {
  font-family: "Clash Grotesk";
  src: url("assets/Fonts/WEB/fonts/ClashGrotesk-Variable.woff2") format("woff2"),
       url("assets/Fonts/WEB/fonts/ClashGrotesk-Variable.woff") format("woff");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* ---- Font families (antes inyectadas por next/font/google) ---- */
  --font-instrument: "Instrument Serif";
  --font-inter: "Inter";
  --font-geist-mono: "Geist Mono";
  --font-clash: "Clash Grotesk";

  /* ---- Fonts ----
     Titulares y citas ahora en Clash Grotesk; cuerpo de texto sigue en Inter. */
  --font--heading: var(--font-clash), Arial, sans-serif;
  /* alias retro-compatible: todo lo que usaba "heading-serif" pasa a Clash */
  --font--heading-serif: var(--font--heading);
  --font--heading-sans: var(--font-clash), Arial, sans-serif;
  --font--body: var(--font-inter), Arial, sans-serif;
  /* UI antes en Geist Mono; ahora Clash Grotesk light (se conserva el token
     --font-geist-mono por si se necesita revertir) */
  --font--ui: var(--font-clash), Arial, sans-serif;

  /* ---- Weights ---- */
  --font-weight--thin: 100;
  --font-weight--extra-light: 200;
  --font-weight--light: 300;
  --font-weight--normal: 400;
  --font-weight--medium: 500;
  --font-weight--semi-bold: 600;
  --font-weight--bold: 700;
  --weight--heading-serif: var(--font-weight--normal);
  --weight--heading-sans: var(--font-weight--normal);
  --weight--body: var(--font-weight--normal);
  --weight--body-bold: var(--font-weight--medium);
  --weight--ui: var(--font-weight--light);

  /* ---- Colors ---- */
  --color-dark: #101012;
  --color-light: #f8f7f3;
  --bg-1: #E1DFDD;
  --bg-2: #e5e3e3;
  --services-light: #f6f3ee;
  --accent-1: #808288;
  --brand-teal: #00ADBB;
  --link: #0000ee;
  --ui-error: #c94040;

  /* alpha ramps via color-mix */
  --light-4: color-mix(in srgb, var(--color-light) 4%, transparent);
  --light-8: color-mix(in srgb, var(--color-light) 8%, transparent);
  --light-16: color-mix(in srgb, var(--color-light) 16%, transparent);
  --light-32: color-mix(in srgb, var(--color-light) 32%, transparent);
  --light-48: color-mix(in srgb, var(--color-light) 48%, transparent);
  --light-64: color-mix(in srgb, var(--color-light) 64%, transparent);
  --light-88: color-mix(in srgb, var(--color-light) 88%, transparent);
  --dark-4: color-mix(in srgb, var(--color-dark) 4%, transparent);
  --dark-8: color-mix(in srgb, var(--color-dark) 8%, transparent);
  --dark-32: color-mix(in srgb, var(--color-dark) 32%, transparent);
  --dark-64: color-mix(in srgb, var(--color-dark) 64%, transparent);

  /* ---- Spacing (desktop values) ---- */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;
  --space-160: 160px;
  --space-200: 200px;
  --space-top: 216px;

  /* ---- Grid / containers ---- */
  --container-main: 1800px;
  --container-small: 900px;
  --column-gap: 8px;
  --page-margin: 32px;

  /* ---- Radii ---- */
  --radius-button: 0;
  --radius-1: 0;
  --radius-2: 0;
  --radius-full: 0;

  /* ---- Type scale (desktop) ---- */
  --h0-size: 160px;  --h0-lh: 120px; --h0-ls: -4px;
  --h1-size: 88px;   --h1-lh: 76px;  --h1-ls: -2px;
  --h2-size: 56px;   --h2-lh: 56px;  --h2-ls: -2px;
  --h3-size: 40px;   --h3-lh: 40px;  --h3-ls: 0px;
  --h4-size: 32px;   --h4-lh: 36px;  --h4-ls: -1px;
  --h5-size: 28px;   --h5-lh: 32px;  --h5-ls: -1px;
  --h6-size: 24px;   --h6-lh: 28px;  --h6-ls: -0.5px;
  --text-large: 20px;
  --text-body: 16px;
  --text-small: 14px;
  --label-large: 12px;
  --label-small: 10px;

  /* ---- Motion ---- */
  --ease-signature: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* ---- Isotipo como máscara (SVG embebido en data-URI para evitar problemas
     de carga del archivo externo / file:// / cache en algunos navegadores) ---- */
  --iso-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzkiIGhlaWdodD0iNDMiIHZpZXdCb3g9IjAgMCAzOSA0MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIxNzdfNDYzKSI+CjxwYXRoIGQ9Ik0zLjU3MTI1IDEyLjI2OThDMi44MDEyNSAxMi4yNjk4IDIuMDYxMjUgMTIuMDQ5OCAxLjMxMTI1IDExLjU5OThDMC41NTEyNDkgMTEuMTM5OCAwLjM2MTI0OSAxMC44NDk4IDAuMDgxMjQ4OCAxMC4wNjk4Qy0wLjE5ODc1MSA4Ljg3OTc3IDAuMjIxMjQ5IDcuNjQ5NzcgMS4yMDEyNSA2Ljc2OTc3QzUuOTkxMjUgMy4wNzk3NyAxMS43MjEyIDEuMTM5NzcgMTcuNzcxMiAxLjEzOTc3SDE4LjI1MTJDMTkuNzcxMiAxLjEzOTc3IDIwLjk5MTIgMS4zMTk3NyAyMS41MjEyIDEuMzk5NzdDMjIuODExMiAxLjU5OTc3IDI1LjY1MTIgMi4wMzk3NyAyNy40MzEyIDIuMDM5NzdDMjkuNTgxMiAyLjAzOTc3IDMxLjczMTIgMS43ODk3NyAzMy44MDEyIDEuMjg5NzdMMzQuNDgxMiAxLjExOTc3QzM1Ljk1MTIgMC43MDk3NjYgMzcuMTAxMiAwLjMzOTc2NiAzNy44OTEyIDAuMDA5NzY1NjJMMzguMTExMiAwLjc0OTc2NkMzOC4xNTEyIDAuOTU5NzY2IDM4LjE3MTIgMS4yMjk3NyAzOC4xODEyIDEuNTQ5NzdDMzguMTYxMiAzLjE2OTc3IDM3LjcwMTIgNC40NTk3NyAzNi44MzEyIDUuMzc5NzdDMzYuMDQxMiA2LjIwOTc3IDM0Ljk5MTIgNi44MDk3NyAzMy42ODEyIDcuMTU5NzdMMzMuMjkxMiA3LjI1OTc3QzMyLjUzMTIgNy40Mjk3NyAzMS43NTEyIDcuNTc5NzcgMzAuOTcxMiA3LjY3OTc3QzI5LjY4MTIgNy44NTk3NyAyOC4zNzEyIDcuOTQ5NzcgMjcuMDYxMiA3Ljk0OTc3QzI1LjM2MTIgNy45NDk3NyAyMy42NTEyIDcuNzg5NzcgMjEuOTcxMiA3LjQ4OTc3QzIwLjU4MTIgNy4yMjk3NyAxOS4xNjEyIDcuMDk5NzcgMTcuNzUxMiA3LjA5OTc3QzEzLjAyMTIgNy4wOTk3NyA4LjM1MTI1IDguNTE5NzcgNC42MDEyNSAxMS4xMDk4QzQuMjYxMjUgMTEuNDM5OCA0LjAzMTI1IDExLjc3OTggMy45MjEyNSAxMi4xMTk4TDMuOTAxMjUgMTIuMTU5OEwzLjU2MTI1IDEyLjI3OThMMy41NzEyNSAxMi4yNjk4WiIgZmlsbD0iIzAwQURCQiIvPgo8cGF0aCBkPSJNMy41NzEyNSAyNi45MTA5QzIuODAxMjUgMjYuOTEwOSAyLjA2MTI1IDI2LjY5MDkgMS4zMTEyNSAyNi4yMzA5QzAuNTUxMjQ5IDI1Ljc3MDkgMC4zNjEyNDkgMjUuNDgwOSAwLjA4MTI0ODggMjQuNzAwOUMtMC4xOTg3NTEgMjMuNTEwOSAwLjIyMTI0OSAyMi4yODA5IDEuMjAxMjUgMjEuNDAwOUM1Ljk5MTI1IDE3LjcyMDkgMTEuNzIxMiAxNS43NzA5IDE3Ljc2MTIgMTUuNzcwOUgxOC4yNDEyQzE5Ljc2MTIgMTUuNzcwOSAyMC45ODEyIDE1Ljk1MDkgMjEuNTExMiAxNi4wMzA5QzIyLjgwMTIgMTYuMjMwOSAyNS42NDEyIDE2LjY3MDkgMjcuNDIxMiAxNi42NzA5QzI5LjU3MTIgMTYuNjcwOSAzMS43MjEyIDE2LjQxMDkgMzMuNzkxMiAxNS45MTA5TDM0LjQ3MTIgMTUuNzQwOUMzNS45NDEyIDE1LjMzMDkgMzcuMDkxMiAxNC45NjA5IDM3Ljg4MTIgMTQuNjMwOUwzOC4xMDEyIDE1LjM3MDlDMzguMTQxMiAxNS41ODA5IDM4LjE2MTIgMTUuODUwOSAzOC4xNzEyIDE2LjE3MDlDMzguMTUxMiAxNy43OTA5IDM3LjY5MTIgMTkuMDgwOSAzNi44MjEyIDIwLjAwMDlDMzYuMDMxMiAyMC44MzA5IDM0Ljk4MTIgMjEuNDMwOSAzMy42NzEyIDIxLjc4MDlMMzMuMjgxMiAyMS44ODA5QzMyLjUyMTIgMjIuMDUwOSAzMS43NDEyIDIyLjIwMDkgMzAuOTYxMiAyMi4zMDA5QzI5LjY3MTIgMjIuNDgwOSAyOC4zNjEyIDIyLjU3MDkgMjcuMDUxMiAyMi41NzA5QzI1LjM1MTIgMjIuNTcwOSAyMy42NDEyIDIyLjQxMDkgMjEuOTYxMiAyMi4xMTA5QzIwLjU3MTIgMjEuODUwOSAxOS4xNTEyIDIxLjcyMDkgMTcuNzQxMiAyMS43MjA5QzEzLjAxMTIgMjEuNzIwOSA4LjM0MTI1IDIzLjE0MDkgNC41OTEyNSAyNS43MzA5QzQuMjUxMjUgMjYuMDYwOSA0LjAyMTI1IDI2LjQwMDkgMy45MTEyNSAyNi43NDA5TDMuODkxMjUgMjYuNzgwOUwzLjU1MTI1IDI2LjkwMDlMMy41NzEyNSAyNi45MTA5WiIgZmlsbD0iIzAwQURCQiIvPgo8cGF0aCBkPSJNMy41NzEyNSA0Mi4wODAzQzIuODAxMjUgNDIuMDgwMyAyLjA2MTI1IDQxLjg2MDMgMS4zMTEyNSA0MS40MTAzQzAuNTUxMjQ5IDQwLjk1MDMgMC4zNjEyNDkgNDAuNjYwMyAwLjA4MTI0ODggMzkuODgwM0MtMC4xOTg3NTEgMzguNjkwMyAwLjIyMTI0OSAzNy40NjAzIDEuMjAxMjUgMzYuNTgwM0M1Ljk5MTI1IDMyLjkwMDMgMTEuNzIxMiAzMC45NTAzIDE3Ljc2MTIgMzAuOTUwM0gxOC4yNDEyQzE5Ljc2MTIgMzAuOTUwMyAyMC45ODEyIDMxLjEzMDMgMjEuNTExMiAzMS4yMTAzQzIyLjgwMTIgMzEuNDEwMyAyNS42NDEyIDMxLjg1MDMgMjcuNDIxMiAzMS44NTAzQzI5LjU3MTIgMzEuODUwMyAzMS43MjEyIDMxLjYwMDMgMzMuNzkxMiAzMS4xMDAzTDM0LjQ3MTIgMzAuOTMwM0MzNS45NDEyIDMwLjUyMDMgMzcuMDkxMiAzMC4xNTAzIDM3Ljg4MTIgMjkuODIwM0wzOC4xMDEyIDMwLjU2MDNDMzguMTQxMiAzMC43ODAzIDM4LjE2MTIgMzEuMDQwMyAzOC4xNzEyIDMxLjM2MDNDMzguMTUxMiAzMi45ODAzIDM3LjY5MTIgMzQuMjcwMyAzNi44MjEyIDM1LjE5MDNDMzYuMDMxMiAzNi4wMjAzIDM0Ljk4MTIgMzYuNjIwMyAzMy42NzEyIDM2Ljk3MDNMMzMuMjgxMiAzNy4wNzAzQzMyLjUyMTIgMzcuMjQwMyAzMS43NDEyIDM3LjM5MDMgMzAuOTYxMiAzNy40OTAzQzI5LjY3MTIgMzcuNjcwMyAyOC4zNjEyIDM3Ljc2MDMgMjcuMDUxMiAzNy43NjAzQzI1LjM1MTIgMzcuNzYwMyAyMy42NDEyIDM3LjYwMDMgMjEuOTYxMiAzNy4zMDAzQzIwLjU3MTIgMzcuMDQwMyAxOS4xNTEyIDM2LjkxMDMgMTcuNzQxMiAzNi45MTAzQzEzLjAxMTIgMzYuOTEwMyA4LjM0MTI1IDM4LjM0MDMgNC41OTEyNSA0MC45MzAzQzQuMjUxMjUgNDEuMjYwMyA0LjAyMTI1IDQxLjYwMDMgMy45MTEyNSA0MS45NDAzTDMuODkxMjUgNDEuOTgwM0wzLjU1MTI1IDQyLjEwMDNMMy41NzEyNSA0Mi4wODAzWiIgZmlsbD0iIzAwQURCQiIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzIxNzdfNDYzIj4KPHJlY3Qgd2lkdGg9IjM4LjE4IiBoZWlnaHQ9IjQyLjA4IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=");
}

/* ============================================================
   Reset / base
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--color-dark);
  color: var(--color-light);
  font-family: var(--font--body);
  font-weight: var(--weight--body);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

/* Headings en Clash Grotesk. h1–h4 reciben el tratamiento uppercase+light
   más abajo; h5/h6 quedan en peso normal. Evita el faux-bold del navegador. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font--heading); font-weight: var(--font-weight--normal); }

::selection { background: var(--color-light); color: var(--color-dark); }

/* ============================================================
   Helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.container--small { max-width: var(--container-small); }

.section { padding-block: var(--space-160); }

.eyebrow {
  font-family: var(--font--ui);
  font-weight: var(--font-weight--normal);
  font-size: var(--label-large);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--light-64);
}

.serif {
  font-family: var(--font--heading-serif);
  font-weight: var(--weight--heading-serif);
}

/* Heading utility classes mirroring the token scale */
.h0 { font-family: var(--font--heading-serif); font-weight: 400; font-size: var(--h0-size); line-height: var(--h0-lh); letter-spacing: var(--h0-ls); }
.h1 { font-family: var(--font--heading-serif); font-weight: 400; font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
.h2 { font-family: var(--font--heading-serif); font-weight: 400; font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
.h3 { font-family: var(--font--heading-serif); font-weight: 400; font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }
.h4 { font-family: var(--font--heading-sans); font-weight: 400; font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); }
.h5 { font-family: var(--font--heading-sans); font-weight: 400; font-size: var(--h5-size); line-height: var(--h5-lh); letter-spacing: var(--h5-ls); }
.h6 { font-family: var(--font--heading-sans); font-weight: 400; font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-ls); }

/* GSAP reveal initial state (so markup hides before JS runs) */
.reveal { opacity: 0; will-change: transform, opacity; }
.no-js .reveal { opacity: 1; }

/* ============================================================
   NAV
   ============================================================ */
/* El nav NO es un contenedor fijo ni crea contexto de apilamiento: así el
   mix-blend-mode del grupo derecho puede mezclarse con el fondo de la página.
   El logo y el grupo derecho se posicionan fijos por separado. */
.nav {
  position: relative;
  transition: opacity 0.45s ease;
}
.nav__logo,
.nav__right {
  position: fixed;
  top: var(--space-20);
  z-index: 100;
  height: 40px;
  display: flex;
  align-items: center;
}
/* Logo (izquierda): conserva su color de marca, sin difference. */
.nav__logo { left: var(--page-margin); }
.nav__logo img { height: 22px; width: auto; }
/* Parte derecha (Menu + Let's work): su estado base es blanco y se adapta al
   fondo con difference → blanco sobre fondo oscuro, negro sobre fondo claro. */
.nav__right {
  right: var(--page-margin);
  gap: var(--space-24);
  mix-blend-mode: difference;
}
.nav__menu-btn { color: var(--color-light); }
/* Oculto durante el primer bloque del hero (isotipo + frase);
   se revela cuando aparece el video y se mantiene en el resto del sitio. */
.nav.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.nav__menu-btn {
  font-family: 16px;
  font-weight: 500;
  font-size: var(--label-large);
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* icono hamburguesa (solo visible en móvil; ver breakpoint) */
.nav__burger { display: none; }

/* CTA button (filled) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font--ui);
  font-weight: var(--font-weight--normal);
  font-size: var(--label-large);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  transition: background-color 0.35s, color 0.35s;
}
.btn--primary { background: var(--color-light); color: var(--color-dark); }
.btn--primary:hover { background: var(--bg-1); }
.btn--ghost { background: transparent; color: var(--color-light); border: 1px solid var(--light-32); }
.btn--ghost:hover { background: var(--color-light); color: var(--color-dark); }
/* variantes para fondo claro */
.btn--dark { background: var(--color-dark); color: var(--color-light); }
.btn--dark:hover { background: #000; }
.btn--ghost-dark { background: transparent; color: var(--color-dark); border: 1px solid var(--dark-32); }
.btn--ghost-dark:hover { background: var(--color-dark); color: var(--color-light); }
.btn--lg { padding: 18px 30px; }

/* Fullscreen menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* panel translúcido: desenfoca la página que quedó detrás (backdrop-filter)
     con un tinte oscuro y un halo teal muy sutil para legibilidad y aire premium */
  background:
    radial-gradient(125% 85% at 50% 30%, color-mix(in srgb, var(--brand-teal) 7%, transparent) 0%, transparent 60%),
    rgba(16, 16, 18, 0.62);
  backdrop-filter: blur(30px) saturate(1.05);
  -webkit-backdrop-filter: blur(30px) saturate(1.05);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding:
    calc(var(--space-20) + env(safe-area-inset-top, 0px)) var(--page-margin)
    calc(var(--space-32) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-signature), visibility 0.5s;
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__top { align-self: start; display: flex; align-items: center; justify-content: space-between; }

/* cerrar: X minimal con área táctil cómoda */
.menu__close {
  position: relative; width: 44px; height: 44px; margin-right: -10px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--light-48); transition: color 0.3s var(--ease-signature);
}
.menu__close:hover { color: var(--color-light); }
.menu__close span {
  position: absolute; width: 24px; height: 1.5px;
  background: currentColor; border-radius: 2px;
}
.menu__close span:first-child { transform: rotate(45deg); }
.menu__close span:last-child { transform: rotate(-45deg); }

/* links alineados a la izquierda, en filas full-width separadas por líneas suaves */
.menu__nav {
  align-self: center; justify-self: stretch;
  width: 100%;
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left;
  gap: 0;
}
.menu__link {
  position: relative;
  display: block;
  width: 100%;
  /* máscara para el reveal por línea (clip del inner que sube desde abajo) */
  overflow: hidden;
  padding: clamp(10px, 1.7vh, 22px) 0.02em;
  border-top: 1px solid var(--light-16);   /* divisor suave */
  font-family: var(--font--heading-serif);
  font-weight: var(--font-weight--light);
  font-size: clamp(30px, min(6.5vw, 8vh), 72px);
  line-height: 1.04;
  letter-spacing: -1.5px;
  text-transform: none;
  color: var(--light-48);
  transition: color 0.4s var(--ease-signature);
}
.menu__link:last-child { border-bottom: 1px solid var(--light-16); }
.menu__link-inner { display: block; will-change: transform; }
/* línea que se marca y "avanza" de izquierda a derecha al hacer rollover;
   sutil y semi-transparente, apenas perceptible */
.menu__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--light-32);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease-signature);
}
.menu__link:hover { color: var(--light-64); }
.menu__link:hover::after { transform: scaleX(1); }

/* footer del menú: CTA + redes, alineado a la izquierda */
.menu__footer {
  align-self: end; justify-self: stretch;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-24);
  text-align: left;
}
.menu__cta { min-width: 220px; }
.menu__socials {
  display: flex; align-items: center; gap: var(--space-32);
  font-family: var(--font--ui); font-weight: var(--weight--ui);
  font-size: var(--label-large); letter-spacing: 1px; text-transform: uppercase;
}
.menu__socials a { color: var(--light-48); transition: color 0.3s; }
.menu__socials a:hover { color: var(--brand-teal); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100svh;
  background: var(--color-dark);
  overflow: hidden;
}

h1.hero__statement{
  width: 200px;
} 

/* Capa de video enmascarada con la silueta del isotipo (assets/iso.svg).
   La máscara va sobre el <video> directamente (más robusta entre navegadores
   que enmascarar un contenedor con un <video> adentro). El mask-size lo
   controla GSAP en el scroll: arranca chico y crece hasta que un trazo del
   iso cubre todo el viewport y el video ocupa la pantalla. */
/* capa de reel a pantalla completa (sin máscara): arranca invisible y GSAP la
   hace aparecer al final para cubrir el gris oscuro y dejar el reel completo */
.hero__reveal {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.3) contrast(1.04) saturate(1.05);
  opacity: 0;
  will-change: opacity;
}
.hero__mask { position: absolute; inset: 0; z-index: 1; }
.hero__video {
  width: 100%; height: 100%; object-fit: cover;
  /* un poco más de brillo: el reel es oscuro y debe leerse a través del iso */
  filter: brightness(1.3) contrast(1.04) saturate(1.05);
  -webkit-mask-image: var(--iso-mask);
          mask-image: var(--iso-mask);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 127px;       mask-size: 127px;
  will-change: -webkit-mask-size, mask-size;
}

/* Texto centrado, apenas debajo del iso */
.hero__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  pointer-events: none;
}
.hero__overlay-inner { text-align: center; transform: translateY(130px); 
margin-top: 50px;
}
.hero__eyebrow {
  font-family: var(--font--ui);
  font-weight: var(--weight--ui);
  font-size: var(--label-large);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--light-48);
  margin-bottom: var(--space-12);
}
.hero__statement {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--medium);
  font-size: clamp(18px, 2.1vw, 28px);
  letter-spacing: 1.5px;
  line-height: 1.1;
  color: var(--light-88);
}

/* Estado inicial de la entrada del hero (GSAP la revela durante el hold).
   Con .no-js / reduced-motion el texto queda visible. */
.hero__eyebrow,
.hero__statement {
  opacity: 0;
  will-change: opacity, transform;
}
.no-js .hero__eyebrow,
.no-js .hero__statement {
  opacity: 1;
}

/* máscaras del reveal: por palabra (eyebrow). El statement ahora hace
   fade-in con blur por palabra, así que necesita overflow visible. */
.hero__word { display: inline-block; overflow: hidden; vertical-align: top; }
.hero__statement { overflow: visible; padding-bottom: 0.08em; }
.hero__word-inner,
.hero__statement-inner { display: inline-block; will-change: transform; }
.hero__statement-word { display: inline-block; will-change: filter, opacity, transform; }
.no-js .hero__word-inner,
.no-js .hero__statement-inner { transform: none !important; }
.no-js .hero__statement-word { filter: none !important; opacity: 1 !important; }

/* Indicador "Scroll" vertical, abajo a la derecha */
.hero__scroll {
  position: absolute; right: var(--page-margin); bottom: var(--space-48); z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex; align-items: center; gap: var(--space-16);
  font-family: var(--font--ui);
  font-weight: var(--weight--ui);
  font-size: var(--label-small);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-light);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.hero__scroll::after {
  content: ""; display: block; width: 1px; height: 56px;
  background: linear-gradient(var(--color-light), transparent);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
}

/* Sin JS / reduced-motion NO se descarta la máscara: el iso enmascarado queda
   estático (sin el reveal por scroll), preservando el look del hero. */

/* ============================================================
   INTRO statement
   ============================================================ */
/* sección clara unificada (manifiesto + logos): pantalla que el bloque oscuro
   de proyectos cubre al subir (el pin lo maneja initAnimations) */
.intro {
  position: relative; z-index: 0;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding-block: var(--space-80); background: var(--bg-1);
}
/* 3 columnas: el párrafo vive en la del medio, las laterales son aire.
   crece para ocupar el alto disponible y centra el manifiesto, dejando
   la tira de logos abajo del todo */
.intro__grid {
  flex: 1;
  display: grid;
  /* la del medio más ancha que las laterales */
  grid-template-columns: 1fr 1.8fr 1fr;
  align-content: center;
  gap: var(--space-32);
}
.intro__col--center { grid-column: 2; }
.intro__eyebrow { display: flex; align-items: center; gap: var(--space-16); margin-bottom: var(--space-40); }
/* iso de Argency (teal) centrado arriba del manifiesto, separado 50px del texto */
.intro__iso { display: block; width: clamp(30px, 3.2vw, 46px); height: auto; margin: 0 auto 50px; }
.intro__eyebrow span {
  font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: var(--label-large); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--brand-teal); line-height: 1.45;
}
.intro__text {
  font-family: var(--font--heading-serif);
  font-weight: var(--font-weight--light); /* base en light */
  font-size: clamp(21.5px, 3.33vw, 40.7px); /* +13% sobre el tamaño anterior */
  line-height: 1.2;
  letter-spacing: -1px;
  max-width: min(900px, 92vw); /* medida legible, centrada */
  margin-inline: auto;
  text-align: center;          /* centrado horizontal */
  text-wrap: balance;
  overflow-wrap: break-word;
  /* color base = gris claro (apenas se separa del fondo); GSAP lo rellena a
     oscuro con el scroll. Sin JS / con reduced-motion queda en este gris. */
  color: #BFBDBB;
}
.intro__text .char { color: #BFBDBB; }
/* la frase remarcada (teal) en regular (400); el resto del intro en light (300).
   En el estado gris inicial arranca en un gris aún un poco más claro (GSAP la
   lleva a teal con el scroll). */
.intro__accent,
.intro__text .char--accent { font-weight: var(--font-weight--normal); color: #CCCAC8; }

/* ============================================================
   BRAND STRIP
   ============================================================ */
/* swap pantalla a pantalla: la sección clara (manifiesto + logos) queda fija
   detrás y el bloque oscuro de proyectos sube por encima cubriéndola */
.pin-stack { position: relative; }
/* la tira de logos es ahora un bloque dentro de la sección del manifiesto,
   anclada al fondo (el grid de arriba crece y la empuja hacia abajo) */
.brand-strip { margin-top: var(--space-64); overflow: hidden; }
.brand-strip__legend {
  display: flex; align-items: center; gap: var(--space-24);
  margin-bottom: var(--space-64);
  color: var(--color-dark);
}
.brand-strip__legend::before,
.brand-strip__legend::after { content: ""; flex: 1; height: 1px; background: var(--dark-8); }
.brand-strip__legend span {
  flex: none;
  font-size: 0.75rem; font-weight: var(--font-weight--medium);
  letter-spacing: 0.35em; text-transform: uppercase;
}
.brand-strip__track {
  display: flex; align-items: center; width: max-content;
  gap: clamp(56px, 9vw, 150px);
  will-change: transform;
}
.brand-strip__mark { flex: none; opacity: 0.7; transition: opacity 0.3s; }
.brand-strip__mark:hover { opacity: 1; }
.brand-strip img { height: 80px; width: auto; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { padding-block: var(--space-80); overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: var(--space-48); will-change: transform; }
.marquee__item {
  font-family: var(--font--heading-serif);
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -2px;
  color: var(--light-88);
  padding-inline: var(--space-24);
}
.marquee__item span { color: var(--accent-1); }

/* ============================================================
   WORK
   ============================================================ */
.work {
  position: relative; z-index: 1; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--space-80); background: var(--color-dark); overflow: hidden;
}
/* mientras el pin está activo (desktop), Proyectos (oscuro) es una capa
   absoluta que sube cubriendo la sección clara del manifiesto. Capacidades
   y el resto del sitio quedan fuera del pin (scroll estándar). */
.pin-stack.is-pinned { height: 100dvh; }
.pin-stack.is-pinned .work { position: absolute; inset: 0; z-index: 1; min-height: 0; }

.work__inner { position: relative; z-index: 1; }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-80); gap: var(--space-24); }
.work__title {
  font-size: max(26px, 3.2vw); /* mismo tamaño que las demás secciones */
  line-height: 1; letter-spacing: -2px;
  color: var(--color-light);
  margin-top: var(--space-16);
}

/* carrusel horizontal: todas las tarjetas con el tamaño de la #1 (Cultor),
   alineadas en una sola fila. En desktop la sección se fija (pin) y los
   proyectos avanzan en horizontal con el scroll (ver initAnimations). */
.work__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 60px;
  overflow-x: auto;            /* fallback sin JS / móvil */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.work__list::-webkit-scrollbar { display: none; }
.work__card {
  display: block; flex: 0 0 auto;
  width: clamp(384px, 55.2vw, 720px);
  margin-top: 0;
  transition: transform 0.5s var(--ease-signature);
}
/* mismo hover que las cards de testimonios (leve elevación + sombra detrás);
   sobre el fondo oscuro se ve sutil: negro para asentar + halo claro tenue */
.work__card:hover { transform: translateY(-6px); }

.work__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 0; background: var(--bg-2);
  transition: box-shadow 0.5s ease;
}
.work__card:hover .work__media {
  box-shadow:
    0 28px 52px -28px rgba(0, 0, 0, 0.72),
    0 10px 60px -22px rgba(248, 247, 243, 0.07);
}
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-signature); }
.work__card:hover .work__media img { transform: scale(1.04); }
/* ícono de ojo centrado sobre la imagen */
.work__eye { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-light); }
.work__eye-svg { width: clamp(64px, 7vw, 112px); height: auto; opacity: 0.92; transition: transform 0.5s var(--ease-signature); }
.work__card:hover .work__eye-svg { transform: scale(1.12); }

.work__info { display: flex; justify-content: space-between; align-items: flex-start; margin-top: var(--space-24); gap: var(--space-24); }
.work__name { font-family: var(--font--heading-serif); font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -1px; color: var(--color-light); white-space: nowrap; }
.work__tags { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; text-align: right; flex: none; }
.work__tag {
  font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--light-48);
}

/* ---- Slider con foco central + fondo blureado (igual que "El lugar") ---- */
/* Fondo: una copia (blureada) de cada proyecto, apilada; se activa la enfocada. */
.work__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.work__bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(45px) saturate(1.1) brightness(0.6);
  transform: scale(1.18);
  opacity: 0;
  transition: opacity 0.7s var(--ease-signature);
}
.work__bg-img.is-active { opacity: 0.6; }
.work__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 0%, rgba(11,11,13,0.5) 72%, rgba(11,11,13,0.92) 100%);
}
/* En modo slider (desktop pineado) la tira ocupa el ancho del viewport y las
   cards fuera de foco se atenúan y desenfocan; la centrada queda nítida.
   Tamaño y separación calcados de "El lugar" (nosotros.html): alto por viewport,
   relación 4/3 y gap de 32px. El padding lateral (JS) centra la 1ª y la última. */
.work.is-slider .work__list {
  width: 100vw; margin-left: calc(50% - 50vw);
  align-items: center; gap: var(--space-32);
}
.work.is-slider .work__card {
  width: auto;                 /* el ancho lo define la altura de la imagen */
  filter: blur(7px) brightness(0.42) saturate(0.9);
  transform: scale(0.86);
  transition: filter 0.55s var(--ease-signature), transform 0.55s var(--ease-signature);
}
.work.is-slider .work__media {
  height: 58vh;
  aspect-ratio: 4 / 3;
  width: auto;
}
.work.is-slider .work__card.is-focus { filter: none; transform: scale(1); }

/* ============================================================
   SERVICES (What we do)
   ============================================================ */
/* Estado normal: sección CLARA. Al hacer hover de un item se oscurece. */
.services {
  position: relative;
  padding-top: var(--space-120);
  padding-bottom: 200px;
  overflow: hidden;
  background: var(--services-light);
  transition: background-color 0.6s var(--ease-signature);
}
.services[data-active="true"] { background: var(--color-dark); }

/* Fondo oscuro + imagen desenfocada: invisible en claro, visible al activar */
.services__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--color-dark);
  opacity: 0;
  transition: opacity 0.6s var(--ease-signature);
}
.services[data-active="true"] .services__bg { opacity: 1; }
.services__bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(45px) saturate(1.1) brightness(0.6);
  transform: scale(1.18);
  opacity: 0;
  transition: opacity 0.7s var(--ease-signature);
}
.services__bg-img.is-active { opacity: 0.8; }
/* viñeta oscura para legibilidad del texto sobre el fondo */
.services__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 0%, var(--dark-64) 65%, var(--color-dark) 100%);
}
.services .container { position: relative; z-index: 1; }

.services__head { display: flex; align-items: center; gap: var(--space-16); margin-bottom: var(--space-48); }
.services__dots { height: 16px; opacity: 0.7; }
.services .eyebrow { color: var(--dark-64); transition: color 0.5s; }
.services[data-active="true"] .eyebrow { color: var(--light-64); }
/* fila título + CTA (como en "Últimos proyectos"): título a la izquierda,
   botón alineado abajo a la derecha */
.services__title-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-24); margin-bottom: var(--space-48);
}
.services__title {
  font-family: var(--font--heading-serif); font-weight: var(--font-weight--normal);
  font-size: max(26px, 3.2vw); line-height: 1; letter-spacing: -2px;
  color: var(--color-dark); transition: color 0.5s;
}
.services[data-active="true"] .services__title { color: var(--color-light); }
.services__title .accent { color: var(--brand-teal); }
/* la CTA acompaña el cambio a oscuro cuando se activa un servicio (hover) */
.services__cta { flex: none; transition: background-color 0.35s, color 0.35s, border-color 0.5s; }
.services[data-active="true"] .services__cta:not(:hover) {
  color: var(--color-light); border-color: var(--light-32);
}

.services__list { border-top: 1px solid var(--dark-8); transition: border-color 0.5s; }
.services[data-active="true"] .services__list { border-top-color: var(--light-8); }

.service {
  position: relative;
  display: grid;
  /* num | título | hueco central (card) | descripción */
  grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-32);
  align-items: center;
  padding-block: var(--space-48);
  border-bottom: 1px solid var(--dark-8);
  transition: opacity 0.45s var(--ease-signature), border-color 0.5s;
}
.services[data-active="true"] .service { border-bottom-color: var(--light-8); }
/* atenuar los items NO activos cuando hay uno activo */
.services[data-active="true"] .service:not(.is-active) { opacity: 0.3; }

.service__num { font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: var(--label-large); color: var(--accent-1); }
/* título: oscuro en claro → claro al activar la sección */
.service__title {
  font-family: var(--font--heading-serif); font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -2px; line-height: 1;
  color: var(--color-dark); transition: color 0.5s;
}
.services[data-active="true"] .service__title { color: var(--color-light); }
.service__desc {
  grid-column: 4; /* empujada a la derecha; la columna 3 queda libre para la card */
  color: var(--dark-64); font-size: var(--text-body); line-height: 1.45; max-width: 34ch;
  transition: color 0.5s;
}
.services[data-active="true"] .service__desc { color: var(--light-64); }
.services[data-active="true"] .service.is-active .service__desc { color: var(--color-light); }

/* Card nítida centrada (entre título y texto), centrada en la fila activa */
.service__thumb {
  position: absolute;
  left: 57%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: clamp(280px, 24vw, 440px);
  aspect-ratio: 1 / 1.05;
  border-radius: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-signature), transform 0.55s var(--ease-signature);
  z-index: 3;
}
.service.is-active .service__thumb { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.service__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   ABOUT + STATS
   ============================================================ */
.about { padding-block: var(--space-160); background: var(--color-dark); color: var(--color-light); }
.about__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.about__eyebrow { display: block; color: var(--accent-1); margin-bottom: var(--space-32); }
.about__title {
  font-family: var(--font--heading-serif); font-weight: var(--font-weight--normal);
  font-size: max(26px, 3.2vw); line-height: 1; letter-spacing: -2px;
  margin-bottom: var(--space-32);
}
.about__title .accent { color: var(--brand-teal); }
.about__copy { color: var(--light-64); font-size: var(--text-large); line-height: 1.5; max-width: 46ch; margin-bottom: var(--space-48); }
.about__caps { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-48); }
.about__cap {
  position: relative; padding: var(--space-20) 0 var(--space-20) var(--space-24);
  border-top: 1px solid var(--light-8); font-size: var(--text-body); color: var(--color-light);
}
.about__cap::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; background: var(--brand-teal);
}
.about__cta { margin-top: var(--space-48); }
.about__media { position: relative; border-radius: var(--radius-1); overflow: hidden; aspect-ratio: 4 / 5; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__media .about__brand { position: absolute; top: var(--space-24); right: var(--space-24); width: clamp(72px, 9vw, 120px); height: auto; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); margin-top: var(--space-80); border-top: 1px solid var(--light-8); padding-top: var(--space-48); }
.stat__num { font-family: var(--font--heading-serif); font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -2px; }
.stat__label { font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: var(--label-large); letter-spacing: 0.5px; text-transform: uppercase; color: var(--light-48); margin-top: var(--space-12); }

/* ── Nosotros (fondo claro) ─────────────────────────────────────────────── */
.nosotros { padding-block: var(--space-160); background: var(--services-light); color: var(--color-dark); }
.nosotros__inner { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.nosotros__aside { display: flex; flex-direction: column; align-items: flex-start; }
.nosotros__aside .nosotros__media { width: 100%; }
.nosotros__cta { margin-top: var(--space-24); }
.nosotros__media { border-radius: var(--radius-1); overflow: hidden; aspect-ratio: 4 / 5; }
.nosotros__media img { width: 100%; height: 100%; object-fit: cover; }
.nosotros__eyebrow { display: block; color: var(--accent-1); margin-bottom: var(--space-32); }
.nosotros__title {
  font-family: var(--font--heading-serif); font-weight: var(--font-weight--normal);
  font-size: max(26px, 3.2vw); line-height: 1; letter-spacing: -2px;
  margin-bottom: var(--space-32);
}
.nosotros__title .accent { color: var(--brand-teal); }
.nosotros__copy { color: var(--dark-64); font-size: var(--text-large); line-height: 1.55; max-width: 50ch; margin-bottom: var(--space-48); display: grid; gap: var(--space-20); }
.nosotros__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); }
/* cards minimal premium: superficie clara, hairline, mucho aire y un acento
   teal que crece en hover (elevación sutil) */
.nstat {
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.4vw, 40px) clamp(22px, 2vw, 34px);
  background:#f8f7f345;
  border: 1px solid var(--dark-8);
  transition: transform 0.55s var(--ease-signature), border-color 0.45s, box-shadow 0.55s;
}
.nstat::before {
  content: ""; width: 26px; height: 2px; background: var(--brand-teal);
  margin-bottom: var(--space-24);
  transition: width 0.5s var(--ease-signature);
}
.nstat:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand-teal) 38%, var(--dark-8));
  box-shadow: 0 24px 48px -32px rgba(16, 16, 18, 0.30);
}
.nstat:hover::before { width: 52px; }
.nstat__num { display: inline-flex; align-items: baseline; font-family: var(--font--heading-serif); letter-spacing: -2px; line-height: 1; }
.nosotros .nstat__num .stat__num { font-size: clamp(40px, 4.4vw, 64px); color: var(--color-dark); }
.nstat__prefix { font-size: clamp(26px, 3vw, 44px); color: var(--brand-teal); margin-right: 2px; }
.nstat__label { font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: var(--label-large); letter-spacing: 1px; text-transform: uppercase; color: var(--accent-1); margin-top: var(--space-20); max-width: 18ch; line-height: 1.35; }

/* ── Testimonios / Partners (fondo claro) ───────────────────────────────── */
.testi { position: relative; padding-block: var(--space-120); background: var(--services-light); color: var(--color-dark); overflow: hidden; }
.testi::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100% - 2 * var(--page-margin), var(--container-main));
  height: 1px; background: var(--dark-8);
}
.testi__head { margin-bottom: var(--space-64); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); }
.testi__eyebrow { display: block; color: var(--accent-1); margin-bottom: var(--space-20); }
.testi__title { font-family: var(--font--heading-serif); font-weight: var(--font-weight--normal); font-size: max(26px, 3.2vw); line-height: 1; letter-spacing: -2px; }
.testi__nav { display: flex; gap: var(--space-12); flex: none; }
.testi__btn {
  width: 52px; height: 52px; border-radius: var(--radius-full);
  border: 1px solid var(--dark-32); background: transparent; color: var(--color-dark);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}
.testi__btn:hover { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-light); }
.testi__btn:active { transform: scale(0.94); }
.testi__btn:disabled { opacity: 0.3; cursor: default; background: transparent; border-color: var(--dark-32); color: var(--color-dark); }
.testi__strip { overflow: visible; }
.testi__track {
  display: flex;
  gap: var(--space-32);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 70px;
}
.testi__track::-webkit-scrollbar { display: none; }
.testi__card {
  position: relative;
  flex: 0 0 calc((100% - 2 * var(--space-32)) / 3);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--space-24);
  background: var(--color-light); border-radius: 0;
  padding: clamp(34px, 3.2vw, 50px) clamp(30px, 3vw, 44px) clamp(28px, 2.8vw, 40px);
  box-shadow:
    0 2px 6px -2px rgba(16, 16, 18, 0.06),
    0 26px 50px -30px rgba(16, 16, 18, 0.30);
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.testi__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 10px -3px rgba(16, 16, 18, 0.08),
    0 36px 60px -28px rgba(16, 16, 18, 0.34);
}
.testi__mark {
  display: block;
  font-family: var(--font--heading-serif);
  font-size: 86px;
  line-height: 0.55;
  color: var(--brand-teal);
  opacity: 0.18;
  margin-bottom: calc(-1 * var(--space-8));
}
.testi__quote { flex: 1; font-family: var(--font--heading-serif); font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; letter-spacing: -0.4px; color: var(--color-dark); }
.testi__author {
  display: flex; align-items: center; gap: var(--space-16);
  margin-top: var(--space-8); padding-top: var(--space-24);
  border-top: 1px solid var(--dark-8);
}
.testi__mono {
  flex: none; width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 0; border: 1px solid var(--brand-teal);
  color: var(--brand-teal);
  font-family: var(--font--ui); font-weight: var(--weight--ui);
  font-size: 14px; letter-spacing: 1px;
}
.testi__meta { display: flex; flex-direction: column; gap: 3px; }
.testi__name { font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: var(--label-large); letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-dark); }
.testi__role { font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: var(--text-small); letter-spacing: 0.5px; text-transform: uppercase; color: var(--brand-teal); }
@media (max-width: 640px) {
  .testi__card { flex-basis: 86%; }
  /* en pantallas chicas el título y la CTA de Capacidades se apilan */
  .services__title-row { flex-direction: column; align-items: flex-start; }
  /* las stat-cards se apilan en una sola columna */
  .nosotros__stats { grid-template-columns: 1fr; }
  /* el head de Insights apila título y CTA */
  .journal__head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   JOURNAL
   ============================================================ */
/* divider entre Nonbugs (oscuro) y los Insights */
.section-divider { background: var(--color-dark); }
.section-divider__line {
  border: 0; margin: 0; height: 1px;
  background: var(--light-8);
}

.journal { padding-top: var(--space-120); padding-bottom: 200px; }
.journal__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-24); margin-bottom: var(--space-48);
}
.journal__heading {
  font-size: max(26px, 3.2vw); /* mismo tamaño que las demás secciones */
  line-height: 1; letter-spacing: -2px;
  color: var(--color-light);
  margin-top: var(--space-16);
}
.journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32); }
.journal__card { display: block; }
.journal__media { aspect-ratio: 16 / 11; border-radius: var(--radius-2); overflow: hidden; background: var(--bg-2); }
.journal__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.735s var(--ease-signature); }
.journal__card:hover .journal__media img { transform: scale(1.04); }
.journal__title { font-family: var(--font--heading-serif); font-size: var(--h5-size); letter-spacing: -1px; margin-top: var(--space-20); }
.journal__excerpt { color: var(--light-48); font-size: var(--text-small); margin-top: var(--space-12); max-width: 38ch; }

/* ============================================================
   CTA (penúltima sección)
   ============================================================ */
.cta { background: var(--services-light); padding-block: var(--space-200); text-align: center; }
.cta__title {
  font-family: var(--font--heading-serif); font-weight: 400;
  color: var(--color-dark);
  font-size: clamp(28px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -1px;
  max-width: 18ch; margin: 0 auto var(--space-48);
}
.cta__actions { display: flex; gap: var(--space-16); justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--color-dark); padding-block: var(--space-120) var(--space-48); }
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: var(--space-64);
  padding-bottom: var(--space-120);
}
.footer__wordmark {
  display: inline-block; margin-bottom: var(--space-24);
  font-family: var(--font--heading-serif); font-size: 32px; letter-spacing: -1px;
  color: var(--color-light);
}
.footer__wordmark img { height: 40px; width: auto; display: block; }
.footer__tagline { color: var(--light-64); font-size: var(--text-body); max-width: 32ch; margin-bottom: var(--space-32); }
.footer__socials { display: flex; gap: var(--space-24); }
.footer__socials a { font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: var(--label-large); letter-spacing: 1px; text-transform: uppercase; color: var(--light-64); transition: color 0.3s; }
.footer__socials a:hover { color: var(--color-light); }

.footer__label { display: block; margin-bottom: var(--space-24); font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: var(--label-large); letter-spacing: 1px; text-transform: uppercase; color: var(--light-48); }
.footer__links { display: flex; flex-direction: column; gap: var(--space-16); }
.footer__links a { color: var(--light-88); font-size: var(--text-large); transition: color 0.3s; }
.footer__links a:hover { color: var(--color-light); }

.footer__pitch { color: var(--light-64); font-size: var(--text-large); max-width: 30ch; margin-bottom: var(--space-24); }
.footer__arrow { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: var(--label-large); letter-spacing: 1px; text-transform: uppercase; color: var(--color-light); }
.footer__arrow span { transition: transform 0.3s var(--ease-signature); }
.footer__arrow:hover span { transform: translateX(5px); }

/* Footer: todo el texto a 16px */
.footer__tagline,
.footer__socials a,
.footer__label,
.footer__links a,
.footer__pitch,
.footer__arrow,
.footer__bottom,
.footer__legal a { font-size: 16px; }

.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-16);
  padding-top: var(--space-32); border-top: 1px solid var(--light-8);
  font-family: var(--font--ui); font-weight: var(--weight--ui); font-size: var(--label-large); letter-spacing: 0.5px; text-transform: uppercase; color: var(--light-48);
}
.footer__legal { display: flex; gap: var(--space-24); }
.footer__legal a { transition: color 0.3s; }
.footer__legal a:hover { color: var(--color-light); }

/* ============================================================
   Mobile token overrides (max-width: 991px)
   ============================================================ */
@media (max-width: 991px) {
  :root {
    --page-margin: 16px;
    --space-12: 10px; --space-16: 12px; --space-20: 16px; --space-24: 16px;
    --space-32: 24px; --space-48: 32px; --space-64: 48px; --space-80: 56px;
    --space-100: 64px; --space-120: 72px; --space-160: 96px; --space-200: 120px; --space-top: 140px;
    --radius-button: 0; --radius-1: 0;
    --column-gap: 8px;
  }
  .intro__grid { grid-template-columns: 1fr; }
  .intro__col--center { grid-column: auto; }
  /* testimonios: 2 cards por vista en tablet, 1 en móvil */
  .testi__card { flex-basis: calc((100% - var(--space-32)) / 2); }
  /* en móvil el carrusel colapsa a una sola columna apilada */
  .work__list { flex-direction: column; gap: var(--space-64); overflow-x: visible; }
  .work__card { width: 100%; margin-top: 0; }
  .about__inner { grid-template-columns: 1fr; }
  .about__media { grid-row: 1; aspect-ratio: 16 / 10; }
  .nosotros__inner { grid-template-columns: 1fr; }
  .nosotros__media { aspect-ratio: 16 / 10; }
  .nosotros__stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
  .journal__grid { grid-template-columns: 1fr; }
  .service { grid-template-columns: 48px 1fr; gap: var(--space-16); }
  .service__desc { grid-column: 2; }
  .service__thumb { display: none; }
  .footer__cols { grid-template-columns: 1fr; gap: var(--space-48); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  /* en móvil dejamos solo el toggle del menú (hamburguesa) y ocultamos el CTA */
  .nav__right .btn--primary { display: none; }
  /* el botón Menu pasa a icono hamburguesa (3 líneas), con área táctil cómoda */
  .nav__menu-btn--toggle {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px; margin-right: -12px;   /* hit area ≥44px sin descuadrar */
  }
  .nav__menu-btn--toggle .nav__menu-label { display: none; }
  .nav__burger {
    display: block; position: relative;
    width: 24px; height: 2px; margin: 7px 0;
    background: currentColor;
  }
  .nav__burger::before,
  .nav__burger::after {
    content: ""; position: absolute; left: 0;
    width: 100%; height: 2px; background: currentColor;
  }
  .nav__burger::before { top: -7px; }
  .nav__burger::after { top: 7px; }
}

/* ============================================================
   Brand teal accents (#00ADBB) — acentos de color de marca
   ============================================================ */
/* Selección de texto */
::selection { background: var(--brand-teal); color: var(--color-light); }

/* Eyebrows: pequeño guion teal antes del texto */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px; height: 2px;
  margin-right: var(--space-8);
  background: var(--brand-teal);
  vertical-align: middle;
}

/* Botones: hover en teal en todas las variantes */
.btn--primary:hover { background: var(--brand-teal); color: var(--color-light); }
.btn--ghost:hover { background: var(--brand-teal); border-color: var(--brand-teal); color: var(--color-light); }
.btn--dark:hover { background: var(--brand-teal); }
.btn--ghost-dark:hover { background: var(--brand-teal); border-color: var(--brand-teal); color: var(--color-light); }

/* Menú fullscreen: links al hover (texto claro; la línea inferior se marca y avanza) */
.menu__link:hover { color: var(--color-light); }

/* Work: ojo + nombre del proyecto al hover */
.work__card:hover .work__eye { color: var(--brand-teal); }
.work__card:hover .work__name { color: var(--brand-teal); }

/* Journal: título al hover */
.journal__card:hover .journal__title { color: var(--brand-teal); }

/* Footer: links / redes / legales al hover */
.footer__links a:hover,
.footer__socials a:hover,
.footer__legal a:hover { color: var(--brand-teal); }

/* Servicios: número del item activo en teal */
.service.is-active .service__num { color: var(--brand-teal); }

/* ============================================================
   Tipografía de titulares — Clash Grotesk UPPERCASE LIGHT
   h1–h4 y todos los títulos: peso light (300) en mayúsculas,
   con palabras remarcadas en medium (500) + color de marca (teal)
   para dar dinamismo. Citas y otros textos: Clash en normal (abajo).
   ============================================================ */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.nosotros__title,
.about__title,
.testi__title,
.cta__title,
.service__title,
.journal__title,
.work__title,
.work__name {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  /* las mayúsculas en light piden un tracking neutro, no el negativo del display serif */
  letter-spacing: 0.012em;
}

/* Palabras remarcadas dentro de un título: medium + acento teal */
.h1 .accent, .h2 .accent, .h3 .accent, .h4 .accent,
.nosotros__title .accent,
.about__title .accent,
.testi__title .accent,
.cta__title .accent,
.service__title .accent,
.journal__title .accent,
.work__name .accent {
  font-weight: 400;
  color: var(--brand-teal);
}

/* Citas y otros textos display: Clash Grotesk en NORMAL, sin mayúsculas.
   (heredan la familia Clash vía los tokens; aquí sólo fijamos el peso normal
   y garantizamos que NO se transformen a mayúsculas) */
.intro__text,
.testi__quote,
.marquee__item {
  font-weight: var(--font-weight--normal);
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .intro__text, .intro__text .char { color: var(--color-dark); }
  * { scroll-behavior: auto !important; }
}