/* ─────────────────────────────────────────────────────────────────────
   FUENTES AUTOALOJADAS

   Antes se pedian a fonts.googleapis.com y fonts.gstatic.com, lo que
   daba a Google la IP y el User-Agent de cada visitante y obligaba a
   abrir la CSP a dos origenes externos que ademas no admiten SRI
   (Google devuelve CSS distinto segun navegador).

   Version variable: un archivo cubre todos los pesos.
   El unicode-range hace que el navegador baje latin-ext solo si la
   pagina usa algun caracter de ese rango. Ingles y espanol caben
   enteros en latin, asi que en la practica se descargan 91 KB.
   ───────────────────────────────────────────────────────────────────── */

/* Inter - latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter Tight - latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter Tight - latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ═══════════════════════════════════════════════════════════════════════
   SOZA VENTURES — styles.css
   Palette: SOZA Design System v1.0 (colours only)
   Form language: soft/rounded — rounded cards, pill buttons, mesh
   gradients, glass panel, bento grids.

   Everything visual is a custom property in :root. Nothing below :root
   writes a raw colour — always var(--…).

   CONTENTS
     1.  Tokens          9.  Hero + stage + glass panel
     2.  Reset & base   10.  Generated wave artwork
     3.  Layout         11.  The Group
     4.  Typography     12.  Companies (dark bento)
     5.  Pills          13.  Principles (light bento)
     6.  Focus          14.  Partnership CTA
     7.  Header         15.  Footer
     8.  Mobile menu    16.  Reveal / reduced motion
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════ */

:root {
  /* ── Colour — unchanged from the SOZA design system ── */
  --color-black:     #050505;
  --color-graphite:  #2a2a2a;
  --color-gray-700:  #545454;
  --color-gray-500:  #8a8a8a;
  --color-gray-300:  #b9b9b9;
  --color-gray-200:  #dadada;
  --color-gray-100:  #ecece8;
  --color-off-white: #f6f6f3;
  --color-white:     #ffffff;
  --color-lime:      #d7ff3f;

  /* Tints derived from the palette — no new hues introduced */
  --tint-lime-strong: rgba(215, 255, 63, .62);
  --tint-lime-soft:   rgba(215, 255, 63, .26);
  --tint-lime-faint:  rgba(215, 255, 63, .10);
  --tint-ink-soft:    rgba(5, 5, 5, .08);
  --tint-ink-line:    rgba(5, 5, 5, .20);
  --mask-opaque:      #000;   /* solo alfa: las mascaras ignoran el tono */
  --glass-fill:       rgba(255, 255, 255, .74);
  --glass-edge:       rgba(255, 255, 255, .70);
  --dark-card:        #101010;
  --dark-edge:        rgba(255, 255, 255, .10);

  /* ── Type ── */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-hero:    clamp(2.75rem, 6.2vw, 5.75rem);
  --text-h2:      clamp(2rem, 3.6vw, 3.5rem);
  --text-h3:      clamp(1.5rem, 2.2vw, 2.125rem);
  --text-card:    clamp(1.25rem, 1.7vw, 1.625rem);
  --text-lede:    clamp(1rem, 1.15vw, 1.125rem);
  --text-body:    1rem;
  --text-small:   0.9375rem;
  --text-label:   0.8125rem;

  /* ── Space — 4px base ── */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;  --space-4:  16px;
  --space-5:  20px;  --space-6:  24px;  --space-8:  32px;  --space-10: 40px;
  --space-12: 48px;  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;
  --space-32: 128px; --space-40: 160px;

  --section-y:   clamp(72px, 9vw, 136px);
  --clients-air: clamp(44px, 5vw, 72px);   /* aire de la banda de clientes */

  /* ── Shape — rounded, per the reference ── */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-2xl:  40px;
  --r-pill: 999px;

  --shadow-sm:    0 1px 2px rgba(5, 5, 5, .04), 0 4px 12px rgba(5, 5, 5, .04);
  --shadow-md:    0 2px 6px rgba(5, 5, 5, .05), 0 16px 40px rgba(5, 5, 5, .07);
  --shadow-glass: 0 2px 8px rgba(5, 5, 5, .05), 0 30px 70px rgba(5, 5, 5, .12);

  /* ── Motion ── */
  --ease-out:        cubic-bezier(.22, 1, .36, 1);
  --ease-io:         cubic-bezier(.42, 0, .58, 1);
  --duration-fast:   160ms;
  --duration-normal: 280ms;
  --duration-slow:   620ms;

  /* ── Layout ── */
  --shell-max: 1240px;
  --gutter:    28px;
  --header-h:  84px;
  --z-header:  100;
  --z-menu:    200;
}


/* ═══ 2. RESET & BASE ═════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

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

.skip-link {
  position: absolute; left: -9999px; top: var(--space-2);
  z-index: calc(var(--z-menu) + 1);
  padding: var(--space-3) var(--space-6); border-radius: var(--r-pill);
  background: var(--color-black); color: var(--color-white);
  font-size: var(--text-label); font-weight: 600;
}
.skip-link:focus { left: var(--space-2); }


/* ═══ 3. LAYOUT ═══════════════════════════════════════════════════════ */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell-max));
  margin-inline: auto;
}


/* ═══ 4. TYPOGRAPHY ═══════════════════════════════════════════════════ */

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; }

/* Eyebrow with a small lime bullet — reference detail */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: var(--space-6);
}
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--color-lime);
  box-shadow: 0 0 0 3px var(--tint-lime-soft);
}
.eyebrow--invert { color: var(--color-gray-300); }

.section-title {
  font-size: var(--text-h2); font-weight: 500;
  line-height: 1.06; letter-spacing: -.035em;
}

/* Two-tone heading: <em> drops to a light weight and grey */
.split-title {
  font-size: var(--text-h2); font-weight: 600;
  line-height: 1.06; letter-spacing: -.035em;
}
.split-title em {
  font-style: normal; font-weight: 300;
  color: var(--color-gray-500);
}


/* ═══ 5. PILLS ════════════════════════════════════════════════════════ */

.pill {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 48px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--text-small); font-weight: 500;
  line-height: 1; white-space: nowrap;
  transition: background var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: translateY(0); }

/* Trailing dot — the reference's signature button detail */
.pill__dot {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-pill);
  background: var(--color-lime);
  transition: transform var(--duration-normal) var(--ease-out);
}
.pill:hover .pill__dot { transform: scale(1.12); }

.pill--dark  { background: var(--color-black); color: var(--color-white); }
.pill--dark:hover { background: var(--color-graphite); }

.pill--lime  { background: var(--color-lime); color: var(--color-black); }
.pill--lime .pill__dot { background: var(--color-black); }
.pill--lime:hover { background: var(--color-black); color: var(--color-lime); }
.pill--lime:hover .pill__dot { background: var(--color-lime); }

.pill--ghost {
  background: transparent; color: var(--color-white);
  border-color: var(--dark-edge);
}
.pill--ghost .pill__dot { background: var(--color-lime); }


/* ═══ 6. FOCUS ════════════════════════════════════════════════════════ */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}
.companies :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible {
  outline-color: var(--color-lime);
}


/* ═══ 7. HEADER ═══════════════════════════════════════════════════════ */

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-8);
  height: var(--header-h);
  transition: height var(--duration-normal) var(--ease-out);
}
.site-header.is-scrolled .site-header__inner { height: 68px; }

.wordmark { display: flex; align-items: center; flex: none; }
.wordmark__svg { width: 158px; height: auto; color: var(--color-black); }
.wordmark--invert .wordmark__svg { color: var(--color-white); }

/* Nav sits centred, CTA pinned right — reference layout */
.site-nav { margin-inline: auto; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-8); }
.site-nav__list a {
  position: relative; display: block; padding-block: var(--space-2);
  font-size: var(--text-small); color: var(--color-gray-700);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: var(--r-pill);
  background: var(--color-lime);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-out);
}
.site-nav__list a:hover { color: var(--color-black); }
.site-nav__list a:hover::after,
.site-nav__list a[aria-current="true"]::after { transform: scaleX(1); }

.site-header__cta { flex: none; }

.nav-toggle {
  display: none; align-items: center; gap: var(--space-3);
  min-height: 44px; margin-left: auto; padding-inline: var(--space-2);
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle__bars span {
  display: block; height: 2px; border-radius: var(--r-pill);
  background: var(--color-black);
  transition: transform var(--duration-normal) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 979px) {
  :root { --header-h: 72px; --gutter: 20px; }
  .site-nav, .site-header__cta { display: none; }
  .nav-toggle { display: flex; }

  /* No JavaScript: the toggle can't work, so show the nav stacked */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { display: block; width: 100%; margin: 0; }
  html:not(.js) .site-header__inner {
    height: auto; flex-wrap: wrap; gap: var(--space-4);
    padding-block: var(--space-4);
  }
  html:not(.js) .site-nav__list { flex-wrap: wrap; gap: var(--space-6); }
}


/* ═══ 8. MOBILE MENU ══════════════════════════════════════════════════ */

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-10) var(--gutter) var(--space-16);
  background: var(--color-black); color: var(--color-white);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav a {
  display: flex; align-items: baseline; gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--dark-edge);
  font-family: var(--font-display);
  font-size: var(--text-h3); font-weight: 400; letter-spacing: -.02em;
  transition: color var(--duration-fast) var(--ease-out);
}
.mobile-menu__nav a:hover { color: var(--color-lime); }
.mobile-menu__idx {
  font-family: var(--font-body);
  font-size: var(--text-label); font-weight: 600;
  color: var(--color-lime);
}
.mobile-menu__cta { margin-top: var(--space-10); justify-content: space-between; }


/* ═══ 9. HERO + STAGE + GLASS PANEL ═══════════════════════════════════ */

.hero { padding-block: clamp(48px, 6vw, 88px) var(--section-y); }

.hero__head {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: var(--space-10); align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.hero__title {
  font-size: var(--text-hero); font-weight: 400;
  line-height: 1.02; letter-spacing: -.04em;
}
.hero__aside { padding-bottom: var(--space-2); }
.hero__lede {
  font-size: var(--text-lede);
  color: var(--color-gray-700);
  max-width: 40ch;
  margin-bottom: var(--space-6);
}

/* The stage holds the generated artwork with the glass panel inset over it */
.stage {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  padding: clamp(160px, 21vw, 300px) clamp(12px, 1.6vw, 24px) clamp(12px, 1.6vw, 24px);
  box-shadow: var(--shadow-md);
}

/* Mesh built from the palette: lime bloom + grey depth over off-white */
.stage__art {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 85% at 16% 20%, var(--tint-lime-strong), transparent 58%),
    radial-gradient(95% 80% at 82% 26%, rgba(185, 185, 185, .55), transparent 60%),
    radial-gradient(120% 95% at 55% 108%, var(--tint-ink-soft), transparent 66%),
    linear-gradient(158deg, var(--color-off-white), var(--color-gray-100));
}

.panel {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.25fr;
  gap: clamp(24px, 3.4vw, 56px);
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--r-xl);
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
}
.panel__title {
  font-size: var(--text-h3); font-weight: 500;
  line-height: 1.08; letter-spacing: -.03em;
  margin-bottom: var(--space-4);
}
.panel__body {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  max-width: 34ch;
  margin-bottom: var(--space-6);
}

.feature-list { display: grid; gap: var(--space-6); align-content: start; }
.feature { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }

/* Circular outline icon badge — reference detail */
.feature__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
}
.feature__icon svg { width: 19px; height: 19px; }
.feature__icon svg path,
.feature__icon svg circle {
  fill: none; stroke: var(--color-black);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.feature__title {
  font-family: var(--font-body);
  font-size: var(--text-small); font-weight: 600;
  margin-bottom: var(--space-1);
}
.feature__body {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.5;
}


/* ═══ 10. GENERATED WAVE ARTWORK ══════════════════════════════════════ */

.wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wave path {
  fill: none;
  stroke: var(--tint-ink-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.wave__anchors path { stroke: var(--color-black); stroke-width: 1.6; }

/* Animated on 1 breathe group + 6 bands — cheap, not per-path */
.wave__breathe {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: wave-breathe 24s var(--ease-io) infinite alternate;
}
.wave__band {
  transform-box: fill-box;
  animation: wave-drift 19s var(--ease-io) infinite alternate;
}
/* Retardo por banda como clase, no como style= en el SVG: un atributo style
   inline obliga a abrir 'unsafe-inline' en la CSP, que es justo lo que
   convierte una CSP en decorativa. */
.wave__band--0 { animation-delay:    0s; }
.wave__band--1 { animation-delay: -2.5s; }
.wave__band--2 { animation-delay:   -5s; }
.wave__band--3 { animation-delay: -7.5s; }
.wave__band--4 { animation-delay:  -10s; }
.wave__band--5 { animation-delay: -12.5s; }
@keyframes wave-breathe {
  from { transform: scaleX(1)    translateY(0); }
  to   { transform: scaleX(1.04) translateY(-12px); }
}
@keyframes wave-drift {
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}


/* ═══ 11. THE GROUP ═══════════════════════════════════════════════════ */

.group { padding-block: var(--section-y); background: var(--color-off-white); }

.group__head {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10); align-items: end;
  margin-bottom: var(--space-16);
}
.group__body {
  font-size: var(--text-lede);
  color: var(--color-gray-700);
  max-width: 46ch;
}

.capabilities { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.capabilities li {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--r-pill);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  font-size: var(--text-small); color: var(--color-graphite);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.capabilities li:hover {
  background: var(--tint-lime-faint);
  border-color: var(--color-lime);
}


/* ═══ 12. COMPANIES — dark bento ══════════════════════════════════════ */

.companies {
  padding-block: var(--section-y);
  background: var(--color-black); color: var(--color-white);
  border-radius: var(--r-2xl);
}
.companies__head { text-align: center; margin-bottom: var(--space-16); }
.companies__head .section-title { max-width: 18ch; margin-inline: auto; }

/* Six columns: two feature cells (Tiqory, Clank) on row 1, three on row 2 */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
}
.bento__cell { grid-column: span 2; }
.bento__cell--feature { grid-column: span 3; }

.card {
  display: flex; flex-direction: column; align-items: flex-start;
  height: 100%; min-height: 190px;
  padding: var(--space-8);
  border-radius: var(--r-lg);
  transition: transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
.card--dark {
  background: var(--dark-card);
  border: 1px solid var(--dark-edge);
}
/* Las tarjetas de la home ya no enlazan a ninguna parte: sin hover, que
   insinuaba que si. El detalle vive ahora en la pagina Companies. */

.card--lime {
  background: var(--color-lime); color: var(--color-black);
  border: 1px solid var(--color-lime);
}


/* Feature cards get more room so the flagship reads as the flagship */
.card--feature { min-height: 300px; padding: var(--space-10); }
.card--feature .card__name { font-size: var(--text-h3); }
.card--feature .card__body { font-size: var(--text-body); }



.card__cat {
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: var(--space-4);
}
.card--lime .card__cat { color: var(--color-graphite); }

.card__name {
  font-size: var(--text-card); font-weight: 500;
  line-height: 1.1; letter-spacing: -.025em;
  margin-bottom: var(--space-3);
}
.card--dark .card__name { color: var(--color-lime); }
.card__body {
  font-size: var(--text-small);
  color: var(--color-gray-300);
  max-width: 40ch;
  margin-bottom: var(--space-6);
}
.card--lime .card__body { color: var(--color-graphite); }
.card--dark .card__body { margin-bottom: 0; }


/* ═══ 12b. CLIENTS — grey logo marquee ════════════════════════════════ */

/* Symmetric padding, and the head margin uses the same clamp — so the air
   above the eyebrow, under the title and below the logos is identical at
   every viewport width. One value governs all three. */
.clients {
  padding-block: var(--clients-air);
  overflow: hidden;
}
.clients__head { text-align: center; margin-bottom: var(--clients-air); }

/* Principles is a major section and brings its own generous top padding;
   trimmed here so the two do not stack into a dead void. */
.clients + .principles { padding-top: clamp(40px, 5vw, 72px); }
.clients__title {
  font-size: var(--text-h3); font-weight: 400;
  line-height: 1.15; letter-spacing: -.03em;
  color: var(--color-gray-700);
  max-width: 22ch;
  margin-inline: auto;
}

/* Held to the same width as the rest of the page. Full-bleed made the strip
   read as a separate object floating away from its own heading. */
.marquee {
  position: relative;
  width: min(100% - (var(--gutter) * 2), var(--shell-max));
  margin-inline: auto;
  overflow: hidden;
}

/* Fade the edges so logos enter and leave instead of being chopped */
.marquee__viewport {
  display: flex; width: max-content;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--mask-opaque) 10%, var(--mask-opaque) 90%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--mask-opaque) 10%, var(--mask-opaque) 90%, transparent);
}

/* Only animate once JS has cloned the track. Animating a single track would
   scroll it halfway out and leave the strip empty. */
.marquee.is-looping .marquee__viewport {
  animation: marquee-scroll 165s linear infinite;
}
.marquee:hover .marquee__viewport { animation-play-state: paused; }

/* No JS, so no clone: leave it still and let the visitor scroll it by hand */
.marquee:not(.is-looping) { overflow-x: auto; }

.marquee__track {
  display: flex; align-items: center;
  gap: clamp(44px, 5vw, 84px);
  padding-inline: clamp(22px, 2.5vw, 42px);
}
/* Fixed cell: every logo gets exactly the same room */
.marquee__item { flex: none; width: 140px; height: 52px; }

/* Every logo sits inside the same optical box, whatever its aspect ratio —
   Microsoft is 4.6:1 and Protela is 0.7:1, so fixing only the height made
   some enormous and others tiny. grayscale() keeps the internal detail;
   flattening to a silhouette destroyed logos like Microsoft or Faber-Castell. */
/* The image fills the cell and object-fit scales it down to fit whole, centred
   on both axes. Percentage max-height did not resolve here, so tall logos
   (OLX, PROCO) overflowed the cell and got clipped by the marquee's overflow. */
.marquee__item img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.marquee__item img:hover { opacity: .95; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}



/* ═══ 13. PRINCIPLES — light bento ════════════════════════════════════ */

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

.principles__head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: end; gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.card--soft {
  background:
    radial-gradient(120% 100% at 12% 0%, var(--tint-lime-soft), transparent 62%),
    var(--color-off-white);
  border: 1px solid var(--color-gray-200);
  min-height: 240px;
}
.card--soft:hover { transform: translateY(-3px); }
.card--soft .feature__icon { margin-bottom: var(--space-10); }
.card--soft .card__name { color: var(--color-black); }
.card--soft .card__body { color: var(--color-gray-700); margin-bottom: 0; }


/* ═══ 14. PARTNERSHIP CTA ═════════════════════════════════════════════ */

/* Own top padding: this band used to rely on whatever came before it, so on
   Companies (where the logo marquee is the predecessor) it sat almost flush. */
.contact { padding-block: clamp(28px, 3vw, 44px) var(--section-y); }

.cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  padding: clamp(48px, 7vw, 104px) var(--space-8);
  background: var(--color-lime);
  color: var(--color-black);
  text-align: center;
}
/* Depth built from the palette only — no new hues */
.cta__art {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(255, 255, 255, .55), transparent 62%),
    radial-gradient(90% 100% at 12% 108%, var(--tint-ink-soft), transparent 60%),
    radial-gradient(70% 90% at 92% 92%, var(--tint-ink-soft), transparent 60%);
  pointer-events: none;
}
.cta > *:not(.cta__art) { position: relative; }

.cta__title {
  font-size: var(--text-h2); font-weight: 500;
  line-height: 1.05; letter-spacing: -.035em;
  margin-bottom: var(--space-4);
}
.cta__text {
  font-size: var(--text-lede);
  color: var(--color-graphite);
  margin-bottom: var(--space-8);
}
.cta__action { margin-inline: auto; }

.cta__reasons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(5, 5, 5, .16);
}
.cta__reasons li {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--r-pill);
  border: 1px solid rgba(5, 5, 5, .18);
  font-size: var(--text-small);
  color: var(--color-graphite);
}

/* On lime, focus rings stay black so they remain visible */
.cta :focus-visible { outline-color: var(--color-black); }


/* ═══ 15. FOOTER ══════════════════════════════════════════════════════ */

.site-footer {
  background: var(--color-black); color: var(--color-white);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  overflow: hidden;
}
.site-footer__inner { padding-top: var(--section-y); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--space-10);
  padding-bottom: var(--space-16);
}
.site-footer__brand .wordmark__svg { width: 186px; }
.site-footer__tag {
  margin-top: var(--space-5);
  font-size: var(--text-small);
  color: var(--color-gray-500);
  max-width: 26ch;
}
.site-footer__head {
  font-family: var(--font-body);
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: var(--space-5);
}
.site-footer__col li + li { margin-top: var(--space-3); }
.site-footer__address {
  margin-top: var(--space-5);
  font-style: normal;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-gray-500);
}
.site-footer__col a {
  font-size: var(--text-small); color: var(--color-gray-300);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-footer__col a:hover { color: var(--color-lime); }


.site-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-block: var(--space-6);
  border-top: 1px solid var(--dark-edge);
  font-size: var(--text-small);
  color: var(--color-gray-500);
}
.site-footer__legal a { color: var(--color-gray-300); }
.site-footer__legal a:hover { color: var(--color-lime); }


/* ═══ 15b. INNER PAGES ════════════════════════════════════════════════ */

/* Utility the inner pages need for their section headings */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Generic section shell used by every inner page */
.section { padding-block: var(--section-y); }
.section--soft { background: var(--color-off-white); }
.section-head { margin-bottom: var(--space-16); }

/* ── Page hero — smaller sibling of the home hero ── */
.page-hero {
  position: relative; isolation: isolate;
  padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--color-gray-200);
}
.page-hero__art {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 120% at 88% 0%, var(--tint-lime-soft), transparent 58%),
    radial-gradient(70% 110% at 8% 10%, rgba(185, 185, 185, .28), transparent 62%),
    linear-gradient(180deg, var(--color-off-white), var(--color-white));
}
.page-hero__grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: var(--space-10); align-items: end;
}
.page-hero__title {
  font-size: clamp(2.5rem, 5.2vw, 4.75rem); font-weight: 400;
  line-height: 1.03; letter-spacing: -.04em;
}
.page-hero__lede {
  font-size: var(--text-lede);
  color: var(--color-gray-700);
  max-width: 42ch;
  padding-bottom: var(--space-2);
}

/* ── Numbered stack — Approach stages, Principles ──
   Dark: these are the longest reading blocks on the site and a hairline box
   on white gave them no hierarchy. Black carries the weight, lime marks the
   index and the bullets, white and grey-300 do the reading. */
.stack { display: grid; gap: var(--space-4); }
.stack__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 3.4vw, 56px);
  border-radius: var(--r-xl);
  background: var(--color-black);
  color: var(--color-white);
}
.stack__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 500;
  line-height: 1; letter-spacing: -.02em;
  color: var(--color-lime);
  padding-top: .18em;
}
.stack__title {
  font-size: var(--text-h3); font-weight: 500;
  line-height: 1.08; letter-spacing: -.03em;
  color: var(--color-white);
  margin-bottom: var(--space-5);
}
.stack__lead {
  font-size: var(--text-lede);
  line-height: 1.45; letter-spacing: -.01em;
  color: var(--color-white);
  max-width: 54ch;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--dark-edge);
}
.stack__body {
  color: var(--color-gray-300);
  max-width: 62ch;
}
.stack__body + .stack__body { margin-top: var(--space-4); }

.stack__list {
  display: grid; gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--dark-edge);
}
.stack__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-small);
  color: var(--color-gray-300);
}
.stack__list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; border-radius: var(--r-pill);
  background: var(--color-lime);
}

/* ── Two-column comparison ── */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.duo__col {
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--r-xl);
  background: var(--color-white);
}
.duo__col--dark {
  background: var(--color-black); color: var(--color-white);
  border-color: var(--color-black);
}
.duo__title {
  font-size: var(--text-card); font-weight: 500;
  letter-spacing: -.025em;
  margin-bottom: var(--space-8);
}
.duo__list { display: grid; gap: var(--space-4); }
.duo__list li {
  position: relative;
  padding-left: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--text-small);
  color: var(--color-gray-700);
}
.duo__col--dark .duo__list li {
  border-bottom-color: var(--dark-edge);
  color: var(--color-gray-300);
}
.duo__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.duo__list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; border-radius: var(--r-pill);
  background: var(--color-lime);
}

/* ── Prose block with a label in the margin ── */
.prose-grid {
  display: grid; grid-template-columns: 1fr 2.2fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.prose-grid__aside .eyebrow { margin-bottom: 0; }
.prose__title {
  font-size: var(--text-h3); font-weight: 500;
  line-height: 1.1; letter-spacing: -.03em;
  max-width: 20ch;
  margin-bottom: var(--space-8);
}
.prose p { color: var(--color-gray-700); max-width: 64ch; }
.prose p + p { margin-top: var(--space-5); }
.prose__action { margin-top: var(--space-8); }

/* ── Capability cards ── */
.cap-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

/* ── Dark prose panel — the long "what we are" style blocks ── */
.dark-panel {
  padding: clamp(32px, 4vw, 72px);
  border-radius: var(--r-xl);
  background: var(--color-black);
  color: var(--color-white);
}
.dark-panel .eyebrow { color: var(--color-gray-300); }
.dark-panel .prose__title { color: var(--color-white); }
.dark-panel .prose p { color: var(--color-gray-300); }

/* ── Company detail rows ──
   Las cinco fichas comparten un escenario: la onda del hero sobre un suelo
   claro, y encima cada empresa en su caja.

   .co-list ya vive dentro de .shell, asi que convertirlo A EL en el
   escenario da el ancho correcto sin tocar el markup y sin irse a pantalla
   completa. La onda se ancla arriba a su proporcion real (100% auto, no
   cover): con cover se estiraba sobre los ~3300px de alto de la lista y las
   lineas se separaban y engordaban. El archivo lo genera build.py.

   OJO al borde de .co: sobre este suelo la caja separa apenas 1,05-1,12:1
   por luminancia, asi que lo que la recorta es el borde y la sombra, no el
   tono. Quitar el borde no la deja "mas limpia": la disuelve. */
.co-list {
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
  padding: clamp(88px, 10.5vw, 148px) clamp(20px, 2.6vw, 40px) clamp(20px, 2.6vw, 40px);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-md);
  background:
    url("assets/wave-panel.svg") top center / 100% auto no-repeat,
    radial-gradient(70% 30% at 12% 4%,  var(--tint-lime-strong), transparent 64%),
    radial-gradient(55% 22% at 88% 32%, var(--tint-lime-soft),   transparent 66%),
    radial-gradient(60% 26% at 20% 68%, var(--tint-lime-soft),   transparent 66%),
    linear-gradient(178deg, var(--color-off-white), var(--color-gray-100) 42%, var(--color-gray-200));
}
.co {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--r-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.co:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* El logo en blanco puro y la copy en gray-100: dos planos dentro de la
   misma caja, separados por un filete. Con los dos en blanco el logo se
   quedaba flotando en un hueco vacio de ~300x680px. */
.co__meta {
  display: grid; place-items: center;
  padding: clamp(28px, 3.4vw, 48px);
  background: var(--color-white);
  color: var(--color-black);
  border-right: 1px solid var(--color-gray-200);
}

/* Logos keep their own colour: no filter. Monochrome ones are
   fill="currentColor" and inherit the panel's black.

   Sizing is normalised by AREA, not by box. Dropping a 6:1 wordmark and a
   1:1 badge into the same rectangle makes the wide one look huge and the
   square one look lost. Each height below is derived from
   h = sqrt(targetArea / aspectRatio), so every logo covers roughly the same
   visual surface and they read as equals. Recalculate if a logo changes. */
.co__logo {
  height: var(--logo-h, 48px);
  width: auto; max-width: 100%;
  object-fit: contain;
}
.co__logo--miaboxes { --logo-h: 30px; }   /* 6.10:1 */
.co__logo--tiqory   { --logo-h: 37px; }   /* 4.27:1 */
.co__logo--clank    { --logo-h: 55px; }   /* 2.00:1 */
.co__logo--soza     { --logo-h: 72px; }   /* 1.06:1 */
/* Bodega sigue fuera de la norma por la misma razon de siempre: su grabado es
   de linea fina y cubre mucho menos rectangulo que las formas macizas de SOZA
   Group, asi que la formula pura lo deja pequeno. Recalculado al cambiar el
   lockup de vertical (1.07:1) a horizontal: la formula pide 66px e igualar
   tinta exacta pedia 103px, y como antes se queda a medio camino. */
.co__logo--bodega   { --logo-h: 85px; }   /* 1.33:1, tinta 12% */

.co__main {
  padding: clamp(28px, 3.4vw, 52px);
  background: var(--color-off-white);
  color: var(--color-black);
}

/* Name and badge on one line, wrapping together when the row narrows */
.co__name {
  font-size: var(--text-h3); font-weight: 500;
  line-height: 1.08; letter-spacing: -.03em;
  color: var(--color-black);       /* 20,4:1. El lima aqui seria 1,15:1 */
  margin-bottom: var(--space-2);
}

/* El lima no se va de la seccion, cambia de papel: deja de ser tinta y pasa
   a ser superficie, que es donde rinde. Negro sobre lima da 17,7:1; lima
   sobre blanco daba 1,15:1. */
.co__cat {
  display: inline-block;
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px 4px;
  border-radius: var(--r-pill);
  background: var(--color-lime);
  color: var(--color-black);       /* 17,7:1 */
  margin-bottom: var(--space-6);
}

.co__lead {
  font-size: var(--text-lede);
  line-height: 1.45; letter-spacing: -.01em;
  color: var(--color-black);       /* 20,4:1 */
  max-width: 52ch;
  margin-bottom: var(--space-4);
}
.co__body { color: var(--color-gray-700); max-width: 62ch; }   /* 7,6:1; gray-300 daba 1,96:1 */

.co__facts {
  display: grid; gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-gray-300);   /* sobre gray-100, gray-200 no se veia */
}
.co__facts li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-small);
  color: var(--color-gray-700);    /* 7,6:1 */
}
.co__facts li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; border-radius: var(--r-pill);
  background: var(--color-black);
}

/* Boton pill negro con el punto lima: el mismo gesto que "Our approach" en
   la home. Reutiliza el <span> de la flecha que ya existia, asi que no anade
   ni una etiqueta al markup. */
.co__more { margin-top: var(--space-8); }
.co__link {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  font-size: var(--text-small); font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--color-black);
  color: var(--color-white);       /* 20,4:1 */
  transition: background var(--duration-normal) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.co__link:hover { background: var(--color-graphite); transform: translateY(-1px); }
.co__link-arrow {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: var(--r-pill);
  background: var(--color-lime);
  color: var(--color-black);
  font-size: 14px; line-height: 1;
  transition: transform var(--duration-normal) var(--ease-out);
}
.co__link:hover .co__link-arrow { transform: translateX(2px); }

/* ── Active page in the nav ── */
.site-nav__list a[aria-current="page"] { color: var(--color-black); }
.site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-menu__nav a[aria-current="page"] { color: var(--color-lime); }


/* ═══ RESPONSIVE — INNER PAGES ════════════════════════════════════════ */

@media (max-width: 979px) {
  .page-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
  .prose-grid { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co { grid-template-columns: 1fr; }
  /* Apilado, el filete pasa de vertical a horizontal */
  .co__meta { border-right: 0; border-bottom: 1px solid var(--color-gray-200); }
  .co__meta { padding-block: var(--space-8); }
  .section-head { margin-bottom: var(--space-10); }
}

@media (max-width: 639px) {
  .section { padding-block: var(--space-20); }
  .stack__item { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6); }
  .stack__num { padding-top: 0; }
  .stack__list { margin-top: var(--space-6); padding-top: var(--space-6); }
  .duo { grid-template-columns: 1fr; }
  .duo__col { padding: var(--space-6); }
  .cap-grid { grid-template-columns: 1fr; }
  .co__meta, .co__main { padding: var(--space-6); }

  .co__meta { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .co-list { padding-top: clamp(64px, 16vw, 96px); }
  .co__logo { height: calc(var(--logo-h, 48px) * .85); }
  .dark-panel { padding: var(--space-6); }
}


/* ═══ 15c. LEGAL PAGES ════════════════════════════════════════════════ */

.legal { max-width: 76ch; }
.legal__updated {
  display: inline-block; margin-top: var(--space-3);
  font-size: var(--text-small); color: var(--color-gray-500);
}
.legal h2 {
  font-size: var(--text-card); font-weight: 500;
  line-height: 1.2; letter-spacing: -.02em;
  margin-top: var(--space-12); margin-bottom: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  font-family: var(--font-body);
  font-size: var(--text-body); font-weight: 600;
  margin-top: var(--space-6); margin-bottom: var(--space-2);
}
.legal p { color: var(--color-gray-700); }
.legal p + p { margin-top: var(--space-4); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--color-black); text-decoration-color: var(--color-lime); }
.legal strong { color: var(--color-black); font-weight: 600; }
.legal code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .9em;
  padding: .1em .4em; border-radius: var(--r-sm);
  background: var(--color-gray-100);
}

.legal__list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }

/* Listas numeradas: el numero sustituye a la vineta lima */
.legal__list--num { counter-reset: legal-item; }
.legal__list--num li { counter-increment: legal-item; }
.legal__list--num li::before {
  content: counter(legal-item) ".";
  width: auto; height: auto; top: 0;
  background: none; border-radius: 0;
  font-size: var(--text-small); font-weight: 600;
  color: var(--color-lime);
}
.legal__list li {
  position: relative; padding-left: var(--space-6);
  color: var(--color-gray-700);
}
.legal__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; border-radius: var(--r-pill);
  background: var(--color-lime);
}

.legal__note {
  padding: var(--space-6);
  margin-bottom: var(--space-10);
  border-radius: var(--r-lg);
  background: var(--color-black); color: var(--color-white);
}
.legal__note p { color: var(--color-gray-300); margin: 0; }
.legal__note strong { color: var(--color-white); }

.legal__table-wrap { overflow-x: auto; margin-top: var(--space-5); }
.legal__table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.legal__table th, .legal__table td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-gray-200);
  text-align: left; vertical-align: top;
}
.legal__table th { background: var(--color-off-white); font-weight: 600; }
.legal__table td { color: var(--color-gray-700); }

/* Buttons that read as links, inside prose */
.legal__link-btn, .site-footer__cookie-btn {
  font: inherit; color: inherit; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.legal__link-btn:hover { text-decoration-color: var(--color-lime); }

.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer__cookie-btn { font-size: var(--text-small); color: var(--color-gray-300); }
.site-footer__cookie-btn:hover { color: var(--color-lime); }


/* ═══ 15d. COOKIE CONSENT ═════════════════════════════════════════════ */

.consent {
  position: fixed; right: var(--gutter); bottom: var(--gutter);
  z-index: calc(var(--z-menu) + 10);
  width: min(420px, calc(100vw - var(--gutter) * 2));
}
.consent[hidden] { display: none; }

.consent__card {
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-glass);
}
.consent.is-open .consent__card { animation: consent-in var(--duration-slow) var(--ease-out) both; }
@keyframes consent-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.consent__title {
  font-size: var(--text-body); font-weight: 600;
  font-family: var(--font-body);
  margin-bottom: var(--space-2);
}
.consent__text {
  font-size: var(--text-small); color: var(--color-gray-700);
  margin-bottom: var(--space-5);
}
.consent__text a { text-decoration: underline; text-underline-offset: 3px; }

.consent__options {
  display: grid; gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-block: var(--space-5);
  border-block: 1px solid var(--color-gray-200);
}
.consent__options[hidden] { display: none; }

.consent__opt { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); cursor: pointer; }
.consent__opt input { margin-top: .3em; accent-color: var(--color-black); }
.consent__opt input:disabled { accent-color: var(--color-gray-500); cursor: not-allowed; }
.consent__opt-name {
  display: block; font-size: var(--text-small); font-weight: 600;
  margin-bottom: var(--space-1);
}
.consent__opt-name em {
  font-style: normal; font-weight: 500;
  font-size: var(--text-label); color: var(--color-gray-500);
  margin-left: var(--space-2);
}
.consent__opt-desc { display: block; font-size: var(--text-label); color: var(--color-gray-700); line-height: 1.45; }

.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.consent__btn { min-height: 42px; font-size: var(--text-label); }
.consent__btn[hidden] { display: none; }
.consent__btn .pill__dot { width: 20px; height: 20px; }

/* Reject must be as easy to find as accept — same size, same prominence */
.consent .pill--ghost { color: var(--color-black); border-color: var(--color-gray-200); }
.consent .pill--ghost:hover { border-color: var(--color-black); }
.consent .pill--ghost .pill__dot { background: var(--color-gray-200); }

.consent__link {
  margin-right: auto;
  font-size: var(--text-label); color: var(--color-gray-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.consent__link:hover { color: var(--color-black); }
.consent__link[hidden] { display: none; }

@media (max-width: 639px) {
  .consent { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; }
  .consent__actions .consent__btn { flex: 1 1 auto; justify-content: center; }
}


/* ═══ 15e. CONSULTING PLANS ═══════════════════════════════════════════ */

/* stretch, no start: con alturas distintas la tarjeta corta dejaba un hueco
   muerto a su lado y los dos botones caian a distinta altura. */
.plans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.plan {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--r-xl);
  background: var(--color-white);
}

/* The larger engagement carries the weight of the dark surface, so the
   price difference reads as a difference in kind rather than in quantity. */
.plan--featured {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

.plan__head { padding-bottom: var(--space-6); }
.plan__name {
  font-size: var(--text-h3); font-weight: 500;
  line-height: 1.1; letter-spacing: -.03em;
  margin-bottom: var(--space-2);
}
.plan--featured .plan__name { color: var(--color-lime); }
.plan__for { font-size: var(--text-small); color: var(--color-gray-700); }
.plan--featured .plan__for { color: var(--color-gray-300); }

.plan__price {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
}
.plan--featured .plan__price { border-top-color: var(--dark-edge); }
.plan__amount {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.4vw, 3.75rem); font-weight: 500;
  line-height: 1; letter-spacing: -.04em;
}
.plan__unit {
  font-size: var(--text-small); font-weight: 600;
  letter-spacing: .08em; color: var(--color-gray-500);
}
.plan__sessions {
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-gray-500);
  margin-top: var(--space-3);
  padding-bottom: var(--space-8);
}
.plan--featured .plan__sessions { color: var(--color-lime); }

.plan__list {
  display: grid; gap: var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-gray-200);
}
.plan--featured .plan__list { border-top-color: var(--dark-edge); }
.plan__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-small);
  color: var(--color-graphite);
}
.plan--featured .plan__list li { color: var(--color-gray-300); }
.plan__list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; border-radius: var(--r-pill);
  background: var(--color-lime);
}

.plan__note {
  margin-top: var(--space-6);
  font-size: var(--text-small); color: var(--color-gray-500);
}
.plan--featured .plan__note { color: var(--color-gray-300); }
.plan__cta { margin-top: auto; padding-top: var(--space-8); }

.plans__foot a { text-decoration: underline; text-underline-offset: 3px; }
.plans__foot a:hover { color: var(--color-black); text-decoration-color: var(--color-lime); }
.plans__foot {
  max-width: 68ch;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-gray-500);
}

/* Intro line inside the two-column comparison */
.duo__intro {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  margin-bottom: var(--space-6);
}
.duo__col--dark .duo__intro { color: var(--color-gray-300); }

@media (max-width: 979px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .plan { padding: var(--space-6); }
}


/* ── Consulting teaser on the home ── */
.teaser__head {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10); align-items: end;
  margin-bottom: var(--space-16);
}
.teaser__lede {
  font-size: var(--text-lede);
  color: var(--color-gray-700);
  max-width: 46ch;
}
.teaser__action { margin-top: var(--space-10); }

/* Version resumida: sin nota ni boton propio, la lista mas corta */
.plans--compact .plan__list { gap: var(--space-3); }
.plans--compact .plan__sessions { padding-bottom: var(--space-6); }

@media (max-width: 979px) {
  .teaser__head { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
}

/* ═══ 16. REVEAL ══════════════════════════════════════════════════════ */

.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }


/* ═══ RESPONSIVE — TABLET ═════════════════════════════════════════════ */

@media (max-width: 979px) {
  .hero__head,
  .group__head { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }

  .stage { padding-top: clamp(150px, 30vw, 240px); }
  .panel { grid-template-columns: 1fr; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__cell { grid-column: span 1; }
  .bento__cell--feature { grid-column: span 2; }
  .card--feature { min-height: 240px; padding: var(--space-8); }

  .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .site-footer__brand { grid-column: 1 / -1; }
}


/* ═══ RESPONSIVE — MOBILE ═════════════════════════════════════════════ */

@media (max-width: 639px) {
  .hero { padding-block: var(--space-10) var(--space-16); }
  .hero__title { letter-spacing: -.035em; }

  .stage {
    border-radius: var(--r-xl);
    padding: clamp(130px, 42vw, 200px) var(--space-3) var(--space-3);
  }
  .panel { padding: var(--space-6); border-radius: var(--r-lg); }
  .feature-list { gap: var(--space-5); }

  .bento,
  .principle-grid { grid-template-columns: minmax(0, 1fr); }
  .bento__cell,
  .bento__cell--feature { grid-column: span 1; }
  .card, .card--feature { min-height: 0; padding: var(--space-6); }
  .marquee__item { width: 108px; height: 42px; }
  .card--soft { min-height: 0; }
  .card--soft .feature__icon { margin-bottom: var(--space-6); }

  .companies, .site-footer, .cta { border-radius: var(--r-xl); }
  .site-footer { border-radius: var(--r-xl) var(--r-xl) 0 0; }

  .principles__head { align-items: start; }
  .cta__reasons { margin-top: var(--space-8); padding-top: var(--space-6); }

  .site-footer__grid { grid-template-columns: 1fr; }
}


/* ═══ REDUCED MOTION ══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .pill:hover { transform: none; }
  .card:hover { transform: none; }

  /* Marquee stops moving and becomes a scrollable strip instead */
  .marquee__viewport { animation: none; }
  .marquee { overflow-x: auto; }
}