/* ================================================================
   ZOLEZZI Digital Growth — Concepto «Monolito»
   Claro dominante · bloques negros a sangre · Inter monumental
   ----------------------------------------------------------------
   Los bloques oscuros no redefinen componentes: reasignan los
   tokens de color en su propio ámbito y todo lo de dentro se
   invierte solo. Cualquier componente nuevo debe usar los tokens,
   nunca colores literales, o romperá esa inversión.
   ================================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --canvas:   #fafaf8;
  --ink:      #0b0b0c;
  --ink-2:    #56565b;
  /* Antes era #8a8a8f: 3.17:1 sobre el hueso, por debajo de AA para
     texto pequeño, y el campo cálido lo empeoraba al bajar la
     luminancia del fondo. En #6f6f75 da 4.8:1 sobre hueso y sigue por
     encima de 3:1 sobre el tono más saturado de la gama. */
  --ink-3:    #6f6f75;
  --rule:     #e3e3de;
  --rule-2:   #efefeb;

  /* Gama cálida, en tripletes RGB para poder darles alfa con
     rgb(var(--warm-n) / .26). El ancla oscura --warm-1 es lo que impide
     que la paleta lea como rotulador: da brasa en vez de fruta. Nunca
     se usan como color de texto ni de relleno, solo en campos difusos.
     #b3200a · #ff3b0f · #ff6a00 · #ffa51f · #ffc531 */
  --warm-1: 179 32 10;
  --warm-2: 255 59 15;
  --warm-3: 255 106 0;
  --warm-4: 255 165 31;
  --warm-5: 255 197 49;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --margin: clamp(1.25rem, 5.5vw, 7.5rem);
  /* --maxw es el ancho del CONTENIDO. --shell le suma los márgenes,
     porque con box-sizing:border-box un max-width a secas se los come
     y en pantallas grandes la retícula quedaba 200px más estrecha. */
  --maxw:   1340px;
  --shell:  calc(var(--maxw) + var(--margin) * 2);
  --gap:    clamp(2rem, 4vw, 5rem);

  --hdr-h: 76px;
  --ease:  cubic-bezier(.22, .61, .36, 1);
  --ease-o: cubic-bezier(.16, 1, .3, 1);
}

/* Ámbito invertido. Solo cambia el significado de los tokens. */
.sec--dark,
.cta,
.ftr {
  --canvas:  #0b0b0c;
  --ink:     #fafaf8;
  --ink-2:   #a2a2a7;
  --ink-3:   #7a7a80;
  --rule:    rgba(250, 250, 248, .15);
  --rule-2:  rgba(250, 250, 248, .07);

  position: relative;
  background: var(--canvas);
  color: var(--ink);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 2rem);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button, input, textarea, select { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg use, .sprite symbol * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }

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

.skip {
  position: fixed; top: .75rem; left: .75rem; z-index: 300;
  transform: translateY(-200%);
  background: var(--ink); color: var(--canvas);
  padding: .75rem 1.25rem;
  font-size: .8125rem; letter-spacing: .01em;
  transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* ── Tipografía compartida ──────────────────────────────────── */
.eyebrow {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* El tope de 2.875rem no es estético: es lo que cabe en la columna
   pegajosa sin que la palabra más larga («reconocibles.») se salga.
   Si se amplía el cuerpo, hay que ampliar antes .sec__head. */
.h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.875rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.038em;
  margin-top: 1.5rem;
}

.lead {
  font-size: clamp(1.25rem, 2.1vw, 1.875rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -.024em;
  text-wrap: balance;
}

/* El texto atenuado da jerarquía dentro de un mismo bloque sin
   recurrir a otro peso ni a otro color de marca. */
.dim { color: var(--ink-3); }

.sec__note {
  margin-top: 1.75rem;
  max-width: 34ch;
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.6;
}

/* ── Animación ──────────────────────────────────────────────── */

/* Revelado simple. --d escalona hermanos sin necesitar JS. */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .85s var(--ease-o) var(--d, 0s),
    transform .85s var(--ease-o) var(--d, 0s);
}
.rv.is-in { opacity: 1; transform: none; }

/* Titulares: cada línea sube desde debajo de su propia máscara.
   El clip-path enmascara solo en vertical —a diferencia de
   overflow:hidden, que además recortaba en silencio las palabras más
   anchas que la columna y parecía un error de contenido. */
.mask .ln {
  display: block;
  padding-bottom: .04em;
  /* El recorte se abre .11em por debajo de la caja para que quepan los
     descendentes: con line-height .94 la cola de la «g» sobresale .077em
     y quedaba cortada. El texto en espera se aleja abajo lo mismo. */
  clip-path: inset(0 -100vw -.11em 0);
}
.mask .ln > i {
  display: block;
  font-style: normal;
  /* 124% y no 108%: el recorte llega ahora más abajo y con el valor
     anterior la línea siguiente asomaba antes de tiempo. */
  transform: translateY(124%);
  transition: transform 1.05s var(--ease-o) var(--d, 0s);
}
.mask.is-in .ln > i { transform: none; }
.mask .ln:nth-child(2) > i { --d: .09s; }
.mask .ln:nth-child(3) > i { --d: .18s; }

/* Sin JS no hay observador que añada .is-in: todo visible. */
html:not(.js) .rv,
html:not(.js) .mask .ln > i { opacity: 1; transform: none; }

/* ── Atmósfera ──────────────────────────────────────────────────
   Reproduce en CSS el campo cromático que la referencia resolvía con
   un .mp4 en bucle: sin bytes de vídeo, nítido a cualquier resolución
   y sin depender del autoplay. Todo son degradados radiales cuyo
   único movimiento es transform, así que se compone en la GPU y no
   repinta nada al desplazarse.

   Dos capas fijas al viewport cubren todas las secciones claras, y un
   campo más denso (.aura) vive solo dentro del hero. Las duraciones no
   son múltiplos entre sí a propósito: al desfasarse unas de otras, la
   composición nunca se repite.
   ──────────────────────────────────────────────────────────────── */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
body::before {
  background:
    radial-gradient(40vw 40vw at 10% 14%, rgb(var(--warm-3) / .26), transparent 60%),
    radial-gradient(36vw 36vw at 86% 76%, rgb(var(--warm-2) / .20), transparent 62%);
  animation: drift-a 53s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(44vw 40vw at 90% 8%, rgb(var(--warm-5) / .26), transparent 58%),
    radial-gradient(34vw 34vw at 16% 90%, rgb(var(--warm-1) / .17), transparent 62%);
  animation: drift-b 67s ease-in-out infinite alternate;
}

/* Campo del hero: entra por los bordes y se abre hacia el centro
   izquierdo, que es donde cae el titular y debe quedar limpio. */
.aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Se disuelve antes de llegar al bloque negro que viene debajo. */
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 64%, transparent 98%);
}
.aura span {
  position: absolute;
  display: block;
  will-change: transform;
}
/* Los cuatro focos están separados en el espacio a propósito: si se
   apilan, sus alfas promedian y toda la gama colapsa en un melocotón
   sin identidad. Así se lee amarillo → naranja → rojo de abajo
   arriba por la derecha, y la mitad izquierda —donde cae el
   titular— queda limpia. */
.aura span:nth-child(1) { /* ancla oscura del vértice */
  top: -20vw; right: -10vw; width: 48vw; height: 48vw;
  background: radial-gradient(closest-side, rgb(var(--warm-1) / .38), transparent 70%);
  animation: drift-b 59s ease-in-out infinite alternate-reverse;
}
.aura span:nth-child(2) { /* la masa naranja */
  top: -14vw; right: -18vw; width: 70vw; height: 70vw;
  background: radial-gradient(closest-side, rgb(var(--warm-3) / .58), transparent 72%);
  animation: drift-a 37s ease-in-out infinite alternate;
}
.aura span:nth-child(3) { /* bermellón, cose naranja con amarillo */
  top: 14vh; right: -26vw; width: 54vw; height: 54vw;
  background: radial-gradient(closest-side, rgb(var(--warm-2) / .46), transparent 70%);
  animation: drift-b 43s ease-in-out infinite alternate;
}
.aura span:nth-child(4) { /* amarillo bajo, dentro de la máscara */
  bottom: -16vw; right: 8vw; width: 62vw; height: 62vw;
  background: radial-gradient(closest-side, rgb(var(--warm-5) / .56), transparent 72%);
  animation: drift-c 47s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7%, 6%, 0) scale(1.18); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.12); }
  to   { transform: translate3d(9%, -5%, 0) scale(.94); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(.96); }
  to   { transform: translate3d(6%, -8%, 0) scale(1.22); }
}

/* Los bloques negros llevan un rescoldo estático: los cose a la gama
   sin animarlos. No se mueve a propósito —un transform aquí se
   saldría de la sección, y overflow:hidden rompería el titular
   pegajoso de dentro—. */
.sec--dark::before,
.cta::before,
.ftr::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46vw 38vw at 86% 4%, rgb(var(--warm-3) / .14), transparent 60%),
    radial-gradient(38vw 34vw at 6% 96%, rgb(var(--warm-1) / .20), transparent 62%);
}

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--canvas);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: 1.0625rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  transition: color .4s var(--ease), background-color .4s var(--ease);
}
/* Barrido de relleno desde abajo, en lugar de un cambio de color seco. */
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--ink-2);
  transform: translateY(101%);
  transition: transform .5s var(--ease-o);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { transform: none; }

.btn svg { width: 1.0625rem; height: 1.0625rem; position: relative; z-index: 1; transition: transform .45s var(--ease-o); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--canvas); }

.btn--sm { padding: .6875rem 1.125rem; font-size: .875rem; }

/* Enlace de texto con subrayado que crece desde la izquierda. */
.lnk {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  position: relative;
  font-size: .9375rem;
  font-weight: 500;
  padding-bottom: .25rem;
}
.lnk::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-o);
}
.lnk:hover::after { transform: none; transform-origin: left; }
.lnk svg { width: 1rem; height: 1rem; transition: transform .45s var(--ease-o); }
.lnk:hover svg { transform: translateX(4px); }

/* ── Cabecera ───────────────────────────────────────────────── */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--hdr-h);
  transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr.is-scrolled {
  background: var(--canvas); /* respaldo si no hay color-mix */
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--rule);
}
/* Sobre un bloque negro la cabecera se invierte reasignando tokens. */
.hdr.is-inv {
  --canvas: #0b0b0c;
  --ink:    #fafaf8;
  --ink-2:  #a2a2a7;
  --ink-3:  #7a7a80;
  --rule:   rgba(250, 250, 248, .15);
  color: var(--ink);
}

.hdr__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--margin);
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.hdr__bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.brand { display: flex; align-items: baseline; gap: .625rem; }
.brand__mark {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.brand__sub {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .4s var(--ease);
}

.nav { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.nav__link {
  position: relative;
  font-size: .9375rem;
  color: var(--ink-2);
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -.375rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-o);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: none; transform-origin: left; }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { transform: none; transform-origin: left; }

.hdr__end { display: flex; align-items: center; gap: 1rem; }

.burger {
  display: none;
  width: 2.25rem; height: 2.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: .375rem;
}
.burger span {
  display: block;
  height: 1px;
  width: 1.375rem;
  background: var(--ink);
  transition: transform .4s var(--ease), width .4s var(--ease), opacity .3s var(--ease);
}
.burger span:last-child { width: .875rem; }
.burger[aria-expanded="true"] span { width: 1.375rem; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ── Cajón móvil ────────────────────────────────────────────── */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--canvas); /* respaldo si no hay color-mix */
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  padding: calc(var(--hdr-h) + 3rem) var(--margin) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.drawer.is-open { opacity: 1; }

/* El [hidden]{display:none} del navegador tiene especificidad casi nula y pierde
   contra .drawer{display:flex}. Sin esta regla el cajón queda invisible pero
   clicable, fijo sobre toda la ventana, y se come cada clic de la página. */
.drawer[hidden] { display: none; }
/* Durante los 350 ms del cierre `hidden` todavía es false: sin esto sigue
   interceptando clics mientras se desvanece. */
.drawer:not(.is-open) { pointer-events: none; }

.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -.035em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease-o), transform .5s var(--ease-o);
}
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a:nth-child(1) { transition-delay: .06s; }
.drawer__nav a:nth-child(2) { transition-delay: .11s; }
.drawer__nav a:nth-child(3) { transition-delay: .16s; }
.drawer__nav a:nth-child(4) { transition-delay: .21s; }
.drawer__nav a:nth-child(5) { transition-delay: .26s; }
.drawer__nav a:nth-child(6) { transition-delay: .31s; }
.drawer__n {
  font-size: .6875rem;
  letter-spacing: .16em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.drawer__foot { display: flex; gap: 1.75rem; padding-top: 2rem; border-top: 1px solid var(--rule); }

/* ── Retícula de sección ────────────────────────────────────── */
.sec { padding: clamp(6rem, 13vh, 11rem) 0; }
.sec--dark { padding: clamp(7rem, 15vh, 13rem) 0; }

/* z-index sube el contenido por encima del rescoldo de los bloques
   oscuros, que es un ::before posicionado y si no lo taparía. */
.sec__grid {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: clamp(2.5rem, 5vw, 4rem);
}

/* El titular se queda fijo mientras el contenido de la derecha
   pasa por delante. Es el gesto que sostiene el ritmo del sitio. */
.sec__head {
  grid-column: 1 / 5;
  position: sticky;
  top: calc(var(--hdr-h) + clamp(2rem, 6vh, 4.5rem));
  align-self: start;
}
.sec__body { grid-column: 5 / 13; }

/* ── 01 · Hero ──────────────────────────────────────────────── */
/* Los márgenes verticales están calculados para que la fila de
   posicionamiento quede dentro de la ventana en un portátil de 880px
   de alto: es lo que ancla el hero y evita que parezca inacabado. */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--hdr-h) + clamp(2.5rem, 5vh, 4.5rem));
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 4vh, 3.5rem);
}
.hero__in {
  max-width: var(--shell);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--margin);
}

/* El mínimo de 2.375rem es el mayor con el que «no se improvisa.»
   —la línea más larga— sigue cabiendo entera en una pantalla de
   375px. Subirlo parte el titular por donde no toca. */
.hero__title {
  font-size: clamp(2.375rem, 8.4vw, 8.5rem);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.048em;
  margin-top: clamp(1.25rem, 2vw, 2rem);
}

.hero__lead {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  max-width: 50ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* Alcance geográfico: una línea, sin banderas ni lista de países. Va un
   escalón por debajo del lead para que sitúe sin competir con él. */
.hero__geo {
  margin-top: .875rem;
  font-size: .9375rem;
  color: var(--ink-3);
}

.hero__cta {
  margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
}

.hero__meta {
  max-width: var(--shell);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* Los filetes son bordes, no huecos sobre un fondo: las celdas tienen
   que ser transparentes para que la atmósfera pase por debajo. Un
   fondo opaco aquí abre un rectángulo blanco en mitad del color. */
.hero__meta li {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 1.5rem 0 0;
  font-size: .9375rem;
  color: var(--ink);
}
.hero__meta li + li {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1rem, 2vw, 1.5rem);
}
.hero__meta span {
  display: block;
  margin-bottom: .5rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── 02 · El problema ───────────────────────────────────────── */
.probs { display: flex; flex-direction: column; }
.prob {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--rule-2);
}
.prob:first-child { border-top: 0; padding-top: 0; }
.prob__n {
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-top: .5rem;
}
.prob__t {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: .75rem;
}
.prob p { color: var(--ink-2); max-width: 56ch; }

/* ── 03 · Enfoque · el diagrama del sistema ─────────────────────
   Strategy → Marketing → Technology → Revenue Growth, contado solo
   con filetes de 1px. Reutiliza el mecanismo del raíl del proceso:
   una línea vertical que se llena con el scroll (--p desde main.js).

   El color NO se usa en texto ni en filetes: en la gama cálida, el
   ámbar sobre hueso da 1.5:1 y sería ilegible. Cada capacidad se
   identifica con un halo difuso tras su numeral —el mismo lenguaje
   cromático que la atmósfera del resto del sitio— y el cierre suma
   los tres halos en uno.
   ──────────────────────────────────────────────────────────────── */
.flow {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-left: clamp(2rem, 4vw, 3.5rem);
}

/* El raíl vive en el diagnóstico, no en el contenedor: recorre el único
   tramo con orden y muere ahí. Que no continúe bajo las capacidades es
   lo que impide leerlas como una tubería. */
.flow__entry {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
}
.flow__entry::before,
.flow__entry::after {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(2rem, 4vw, 3.5rem) + 4px);
  top: .85rem; bottom: 0;
  width: 1px;
}
.flow__entry::before { background: var(--rule); }
.flow__entry::after {
  background: var(--ink);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}

/* Tres capacidades hermanas: misma caja, mismo peso, ninguna numeración.
   El filete pasa arriba —las corona en lugar de encadenarlas—. */
.flow__caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.flow__caps .flow__i {
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;
  border-bottom: 0;
  border-top: 1px solid var(--rule);
}
.flow__caps .flow__i::after { top: -1px; bottom: auto; }
.flow__caps .flow__t { font-size: clamp(1.375rem, 2.2vw, 1.875rem); }
.flow__caps .flow__i::before { left: -12%; width: 13rem; height: 13rem; }

.flow__note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.02em;
  max-width: 46ch;
}

.flow__i {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
}
/* El filete se traza de izquierda a derecha cuando la banda entra. */
.flow__i::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-o);
}
.flow__i.is-in::after { transform: none; }

.flow__rail { position: absolute; left: calc(-1 * clamp(2rem, 4vw, 3.5rem)); top: 1.75rem; }
.flow__dot {
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--ink-3);
  transition: box-shadow .6s var(--ease), background-color .6s var(--ease), transform .6s var(--ease-o);
}
.flow__entry.is-in .flow__dot,
.flow__i.is-in .flow__dot {
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  transform: scale(1.15);
}

/* Halo de identidad: se pinta detrás del contenido de la banda y
   entra con retardo, después del filete. */
.flow__i::before {
  content: '';
  position: absolute;
  left: -6%; top: 50%;
  width: 17rem; height: 17rem;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.4s var(--ease-o) .25s;
}
.flow__i.is-in::before { opacity: 1; }

.flow__i--s::before { background: radial-gradient(closest-side, rgb(var(--warm-1) / .28), transparent 68%); }
.flow__i--m::before { background: radial-gradient(closest-side, rgb(var(--warm-3) / .32), transparent 68%); }
.flow__i--t::before { background: radial-gradient(closest-side, rgb(var(--warm-5) / .36), transparent 68%); }

.flow__k {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.flow__t {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  margin: .625rem 0 .5rem;
}
.flow__f {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: .625rem;
}
.flow__d { font-size: .9375rem; line-height: 1.65; color: var(--ink-2); max-width: 52ch; }

html:not(.js) .flow__i::after { transform: none; }
html:not(.js) .flow__i::before { opacity: 1; }

/* ── 04 · Capacidades ───────────────────────────────────────────
   Conserva la anatomía de las antiguas filas de servicio —numeral,
   título y texto— pero invierte la jerarquía: manda la frase de lo
   que la práctica hace por los ingresos y el inventario de
   capacidades queda debajo, en gris y cuerpo pequeño. Esa inversión
   es lo que separa «capacidades de una firma» de «lista de
   servicios»; si el inventario vuelve a pesar más que la frase, se
   pierde el registro de consultoría.
   ──────────────────────────────────────────────────────────────── */
.caps { display: flex; flex-direction: column; }

.cap {
  --hue: var(--warm-4);
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "n t s" "n l l";
  column-gap: clamp(1.25rem, 3vw, 3.5rem);
  row-gap: clamp(1.75rem, 3vw, 2.5rem);
  align-content: start;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(.75rem, 1.5vw, 1.5rem);
  margin: 0 clamp(-1.5rem, -1.5vw, -.75rem);
  border-top: 1px solid var(--rule);
  transition: background-color .45s var(--ease);
}
.caps > :last-child { border-bottom: 1px solid var(--rule); }
/* Cada práctica tiñe su propio hover: identidad sin salirse de la
   gama ni tocar el color del texto. */
.cap:hover { background: rgb(var(--hue) / .09); }

.cap--s { --hue: var(--warm-1); }
.cap--m { --hue: var(--warm-3); }
.cap--t { --hue: var(--warm-5); }

/* Halo de identidad tras el numeral. Mismo lenguaje que la atmósfera:
   el color solo existe como campo difuso, nunca como tinta. */
.cap::before {
  content: '';
  position: absolute;
  left: -1rem; top: clamp(1.5rem, 3vw, 2.5rem);
  width: 13rem; height: 13rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--hue) / .22), transparent 70%);
}

.cap__n {
  grid-area: n;
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-top: .55rem;
}
.cap__t {
  grid-area: t;
  font-size: clamp(1.5rem, 2.6vw, 2.375rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.038em;
  transition: transform .5s var(--ease-o);
}
.cap:hover .cap__t { transform: translateX(6px); }

.cap__s {
  grid-area: s;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.55;
  letter-spacing: -.015em;
  color: var(--ink);
}

/* columns fluye igual con 9 o con 10 capacidades; una retícula
   explícita dejaría huecos al cambiar el número. */
.cap__l {
  grid-area: l;
  columns: 3;
  column-gap: var(--gap);
}
.cap__l li {
  break-inside: avoid;
  border-top: 1px solid var(--rule-2);
  padding: .5rem 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ink-2);
  transition: color .4s var(--ease);
}
.cap:hover .cap__l li { color: var(--ink); }

/* ── 05 · Proceso ───────────────────────────────────────────── */
.proc {
  position: relative;
  padding-left: clamp(2rem, 4vw, 3.5rem);
}
/* Raíl gris de fondo y raíl de tinta que se llena con el scroll. */
.proc::before,
.proc::after {
  content: '';
  position: absolute;
  left: 4px; top: .75rem; bottom: .75rem;
  width: 1px;
}
.proc::before { background: var(--rule); }
.proc::after {
  background: var(--ink);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}

.proc__i { position: relative; padding: 0 0 clamp(3rem, 6vw, 5rem); }
.proc__i:last-child { padding-bottom: 0; }

.proc__rail { position: absolute; left: calc(-1 * clamp(2rem, 4vw, 3.5rem)); top: .5rem; }
.proc__dot {
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--ink-3);
  transition: box-shadow .6s var(--ease), background-color .6s var(--ease), transform .6s var(--ease-o);
}
.proc__i.is-in .proc__dot {
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  transform: scale(1.15);
}

.proc__c {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease-o), transform .8s var(--ease-o);
}
.proc__i.is-in .proc__c { opacity: 1; transform: none; }
html:not(.js) .proc__c { opacity: 1; transform: none; }

.proc__n {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.proc__t {
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.042em;
  margin: .75rem 0 1rem;
}
.proc__d { color: var(--ink-2); max-width: 54ch; }

/* ── 06 · Casos de uso ──────────────────────────────────────── */
.cases {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: var(--gap);
}

.cases__tabs { display: flex; flex-direction: column; align-self: start; }
.cases__tab {
  display: flex;
  align-items: baseline;
  gap: .875rem;
  text-align: left;
  padding: 1rem .5rem 1rem 0;
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--ink-3);
  transition: color .35s var(--ease), padding-left .45s var(--ease-o);
}
.cases__tabs > :last-child { border-bottom: 1px solid var(--rule); }
.cases__tab span {
  font-size: .6875rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  transition: color .35s var(--ease);
}
.cases__tab:hover { color: var(--ink-2); padding-left: .375rem; }
.cases__tab[aria-selected="true"] { color: var(--ink); padding-left: .5rem; }

.cases__panels { position: relative; }
.cases__panel { animation: panel-in .6s var(--ease-o) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.cases__h {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.cases__dl { display: grid; }
.cases__dl dt {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-2);
}
.cases__dl dd {
  padding: .625rem 0 1.5rem;
  color: var(--ink-2);
  max-width: 62ch;
}
.cases__dl dd:last-child { padding-bottom: 0; }

/* ── 07 · Por qué ZOLEZZI ───────────────────────────────────── */
.whys {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gap);
  row-gap: clamp(2.25rem, 4vw, 3.5rem);
}
.why { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.why h3 {
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -.025em;
  margin-bottom: .75rem;
}
.why p { font-size: .9375rem; line-height: 1.65; color: var(--ink-2); }

/* ── 08 · FAQ ───────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; }
.faq__i { border-top: 1px solid var(--rule); }
.faq > :last-child { border-bottom: 1px solid var(--rule); }
.faq__i h3 { font: inherit; }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  text-align: left;
  padding: clamp(1.375rem, 2.4vw, 1.875rem) 0;
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.35;
  color: var(--ink-2);
  transition: color .35s var(--ease);
}
.faq__q:hover { color: var(--ink); }
.faq__i.is-open .faq__q { color: var(--ink); }
.faq__q svg {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  transition: transform .5s var(--ease-o);
}
.faq__i.is-open .faq__q svg { transform: rotate(135deg); }

/* grid-template-rows anima la altura sin conocerla de antemano. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-o);
}
.faq__i.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-bottom: clamp(1.5rem, 2.4vw, 2rem);
  padding-right: clamp(0rem, 6vw, 5rem);
  color: var(--ink-2);
  max-width: 62ch;
}
html:not(.js) .faq__a { grid-template-rows: 1fr; }

/* ── 09 · CTA final ─────────────────────────────────────────── */
.cta { padding: clamp(7rem, 18vh, 15rem) 0; }
.cta__in {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--margin);
}
.cta__t {
  font-size: clamp(2.5rem, 8vw, 8rem);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.048em;
}
.cta__d {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 44ch;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
}
.cta__btns { margin-top: clamp(2.25rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: .875rem; }

/* ── 10 · Formulario ────────────────────────────────────────── */
.form { max-width: 46rem; }
.form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gap);
}

.f { position: relative; padding-bottom: 1.75rem; }
.f label {
  display: block;
  margin-bottom: .5rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.f input,
.f textarea,
.f select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: .625rem 0;
  font-size: 1.0625rem;
  transition: border-color .35s var(--ease);
  appearance: none;
}
.f textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.f select {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.f input::placeholder,
.f textarea::placeholder { color: var(--ink-3); }
.f input:hover, .f textarea:hover, .f select:hover { border-color: var(--ink-3); }
.f input:focus, .f textarea:focus, .f select:focus {
  outline: none;
  border-color: var(--ink);
}
.f.is-err input,
.f.is-err textarea { border-color: var(--ink); border-bottom-width: 2px; }

.err {
  position: absolute;
  bottom: .375rem; left: 0;
  font-size: .8125rem;
  color: var(--ink-2);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
}
.form__fine { font-size: .8125rem; color: var(--ink-3); max-width: 30ch; }

.form__msg {
  margin-top: 1.75rem;
  padding: 1.125rem 1.25rem;
  font-size: .9375rem;
  background: rgb(255 255 255 / .5);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.form__msg--ko { box-shadow: inset 0 0 0 1px var(--ink); }

button[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ── 11 · Pie ───────────────────────────────────────────────── */
.ftr { padding: clamp(4rem, 8vw, 6.5rem) 0 2.5rem; }
.ftr__in {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--margin);
}
.ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--gap);
  row-gap: 3.5rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.ftr__mark {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.ftr__tag {
  margin-top: .5rem;
  font-size: .9375rem;
  letter-spacing: -.015em;
  color: var(--ink);
}
.ftr__caps {
  margin-top: .875rem;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ftr__claim {
  margin-top: 1.5rem;
  max-width: 30ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.ftr__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.ftr__col h2 {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.25rem;
}
.ftr__col li { margin-bottom: .625rem; }
.ftr__col a, .ftr__col span {
  font-size: .9375rem;
  color: var(--ink-2);
  transition: color .3s var(--ease);
}
.ftr__col a:hover { color: var(--ink); }

.ftr__bot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-2);
  font-size: .8125rem;
  color: var(--ink-3);
}
.ftr__up a { display: inline-flex; align-items: center; gap: .5rem; transition: color .3s var(--ease); }
.ftr__up a:hover { color: var(--ink); }
.ftr__up svg { width: .875rem; height: .875rem; transform: rotate(-90deg); transition: transform .45s var(--ease-o); }
.ftr__up a:hover svg { transform: rotate(-90deg) translateX(3px); }

/* ── Adaptación ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: flex; }
}

@media (max-width: 1024px) {
  .sec__grid { grid-template-columns: 1fr; }
  .sec__head,
  .sec__body { grid-column: 1; }
  .sec__head { position: static; }
  .sec__note { max-width: 52ch; }

  .cap__l { columns: 2; }

  .cases { grid-template-columns: 1fr; row-gap: clamp(2rem, 4vw, 3rem); }
  .cases__tabs {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--margin));
    padding: 0 var(--margin);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .cases__tabs::-webkit-scrollbar { display: none; }
  .cases__tab {
    border-top: 0;
    white-space: nowrap;
    padding: .875rem 1.25rem .875rem 0;
  }
  .cases__tabs > :last-child { border-bottom: 0; }
  .cases__tab:hover,
  .cases__tab[aria-selected="true"] { padding-left: 0; }

  /* A dos columnas el filete vertical solo separa la segunda de cada
     fila, no cada celda de la anterior. */
  .hero__meta { grid-template-columns: repeat(2, 1fr); }
  .hero__meta li { padding: 1.25rem 1.25rem 1.25rem 0; }
  .hero__meta li + li { border-left: 0; padding-left: 0; }
  .hero__meta li:nth-child(even) {
    border-left: 1px solid var(--rule);
    padding-left: clamp(1rem, 2vw, 1.5rem);
  }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }

  /* El descriptor parte la marca en dos líneas y revienta el alto de
     la cabecera. En móvil basta con el logotipo. */
  .brand__sub { display: none; }

  .hero { min-height: 0; gap: 3.5rem; }
  /* En una sola columna no hay nada que separar en horizontal: el
     filete vertical quedaría como una línea suelta. */
  .hero__meta { grid-template-columns: 1fr; }
  .hero__meta li { padding: 1rem 0; }
  .hero__meta li:nth-child(even) { border-left: 0; padding-left: 0; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }

  .prob { grid-template-columns: 1fr; gap: .5rem; }
  .prob__n { padding-top: 0; }

  .whys,
  .form__row { grid-template-columns: 1fr; }

  .cap {
    grid-template-columns: 1fr;
    grid-template-areas: "n" "t" "s" "l";
    row-gap: 1rem;
    padding: 1.75rem .75rem;
  }
  .cap__n { padding-top: 0; }
  .cap:hover .cap__t { transform: none; }
  .cap__l { columns: 1; }
  .cap::before { width: 9rem; height: 9rem; }

  .flow__t { margin-top: .5rem; }
  /* En una columna las tres capacidades se apilan; el filete superior
     sigue distinguiéndolas sin necesidad de retícula. */
  .flow__caps { grid-template-columns: 1fr; gap: 0; }
  .flow__caps .flow__i { padding-bottom: 1.5rem; }

  .ftr__top { grid-template-columns: 1fr; }
  .ftr__cols { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
}

@media (max-width: 420px) {
  .ftr__cols { grid-template-columns: 1fr; }
}

/* ── Movimiento reducido ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv, .proc__c { opacity: 1; transform: none; }
  .mask .ln > i { transform: none; }
  .proc::after, .flow__entry::after { transform: scaleY(1); }
  .flow__i::after { transform: none; }
  .flow__i::before { opacity: 1; }

  /* La atmósfera se queda: lo que se detiene es su deriva. El color
     no es decoración prescindible, la animación sí. */
  body::before, body::after, .aura span { animation: none; }
}