/* Northway v3 — estilos de la propuesta (index-v3.html). Todos los valores salen de v3/tokens.css.
   Las pantallas de ejemplo (.m-*, .site, .ad, .chat, .report) se dimensionan en em:
   cada contexto fija su font-size en cqw y todo el interior escala junto. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
  color: var(--ink); background: var(--sand);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }   /* los atributos width/height solo reservan la proporción */
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.services :focus-visible, .cta :focus-visible { outline-color: var(--on-ink); }

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

.skip {
  position: absolute; left: var(--sp-2); top: -64px; z-index: 100;
  background: var(--ink); color: var(--white); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-control);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small);
}
.skip:focus { top: var(--sp-2); }

/* ---------- Botones y etiquetas ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--sp-4);
  border-radius: var(--r-control); border: 1.5px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--signal { background: var(--signal); color: var(--ink); }
.btn--signal:hover { transform: translateY(-1px); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--ink-2); }
.btn--ghost { color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }

.pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: var(--peach); color: var(--ink);
  font-family: var(--font-display); font-weight: 500; font-size: 0.875rem;
  padding: 6px 14px; border-radius: var(--r-control);
}
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }

/* ---------- Marca y navegación ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 46px; height: auto; color: var(--ink); }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; }
.brand__beta {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-micro); color: var(--ink);
  background: var(--peach); border-radius: var(--r-control); padding: 2px 10px;
}

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--sand-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  height: 80px; display: flex; align-items: center; gap: var(--sp-4);
}
.nav__links { display: flex; gap: var(--sp-4); margin-left: auto; }
.nav__links a { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-small); color: var(--muted); padding: var(--sp-1) 0; transition: color var(--dur-fast) var(--ease-out); }
.nav__links a:hover { color: var(--ink); }
.nav__cta { min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-small); }

.burger { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--gutter) var(--sp-4); border-top: 1px solid var(--line); background: var(--sand); }
.menu[hidden] { display: none; }
.menu a:not(.btn) { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; min-height: 48px; display: flex; align-items: center; }
.menu .btn { margin-top: var(--sp-2); }

/* ---------- Encabezados de sección ---------- */
.head { max-width: 720px; margin-bottom: var(--sp-5); }
.head h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: var(--track-display); }
.head h2 span { display: block; }
.head p { margin-top: var(--sp-2); font-size: var(--fs-lead); color: var(--muted); max-width: 580px; }
.head--on-ink h2 { color: var(--on-ink); }
.head--on-ink p { color: var(--on-ink-muted); }

/* ---------- Pantallas de ejemplo ---------- */
.m-browser { background: var(--white); border-radius: 1.2em; overflow: hidden; box-shadow: var(--shadow-mock); }
.m-browser__bar { display: flex; align-items: center; gap: 0.45em; padding: 0.75em 1em; background: var(--sand); border-bottom: 1px solid var(--line); }
.m-browser__bar i { width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--line-strong); }
.m-browser__bar span {
  margin-left: 0.8em; flex: 1; max-width: 22em; background: var(--white); border-radius: 2em;
  padding: 0.3em 1em; font-size: 0.85em; color: var(--muted); font-family: var(--font-body);
}

.site { font-family: var(--font-body); }
.site__head { display: flex; align-items: center; gap: 1.3em; padding: 0.9em 1.5em; font-size: 1em; }
.site__head b { font-family: Georgia, 'Times New Roman', serif; font-size: 1.5em; margin-right: auto; letter-spacing: -0.01em; }
.site__head span { font-size: 0.9em; opacity: 0.85; }
.site__hero { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 19em; }
.site__copy { padding: 2.2em 1.6em; display: flex; flex-direction: column; gap: 0.8em; }
.site__copy strong { font-family: Georgia, 'Times New Roman', serif; font-size: 2em; line-height: 1.08; font-weight: 700; }
.site__line { display: block; height: 0.55em; width: 92%; border-radius: 1em; background: currentColor; opacity: 0.16; }
.site__line--short { width: 62%; }
.site__copy em { font-style: normal; align-self: flex-start; margin-top: 0.4em; padding: 0.6em 1.2em; border-radius: 2em; font-weight: 500; font-size: 0.95em; }
.site__hero img { width: 100%; height: 100%; object-fit: cover; }

.site--trigal .site__head { background: var(--ex-green); color: var(--ex-cream); }
.site--trigal .site__hero { background: var(--ex-cream); color: var(--ex-green); }
.site--trigal .site__copy em { background: var(--ex-mustard); color: var(--ex-green); }
.site--amapola .site__head { background: var(--ex-rose); color: var(--ex-blush); }
.site--amapola .site__hero { background: var(--ex-blush); color: var(--ex-rose); }
.site--amapola .site__copy em { background: var(--ex-rose); color: var(--ex-blush); }

.m-phone { background: var(--ink); border-radius: 2.4em; padding: 0.55em; box-shadow: var(--shadow-mock); }
.m-phone__screen { background: var(--white); border-radius: 1.9em; overflow: hidden; }

.ad { font-family: var(--font-body); color: var(--ink); background: var(--white); }
.ad__head { display: flex; align-items: center; gap: 0.6em; padding: 0.9em 0.9em 0.7em; line-height: 1.2; }
.ad__head b { display: block; font-size: 0.95em; font-weight: 500; }
.ad__head small { display: block; font-size: 0.78em; color: var(--muted); }
.ad__avatar {
  flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center;
  background: var(--ex-green); color: var(--ex-cream); font-family: Georgia, serif; font-weight: 700;
}
.ad__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ad__cta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75em 0.9em; border-bottom: 1px solid var(--line); font-weight: 500; font-size: 0.95em;
}
.ad__cta::after { content: '›'; font-size: 1.3em; line-height: 1; }
.ad__copy { padding: 0.7em 0.9em 1.1em; font-size: 0.88em; line-height: 1.35; }
.ad__copy b { font-weight: 500; margin-right: 0.3em; }
.ad--dark .ad__avatar { background: var(--ex-coal); color: var(--ex-brass); }
.ad--dark .ad__img { aspect-ratio: 4 / 5; }

.m-note {
  display: flex; align-items: center; gap: 0.9em;
  background: var(--white); border-radius: 1.3em; padding: 0.9em 1.2em;
  box-shadow: var(--shadow-mock); font-family: var(--font-body); color: var(--ink);
}
.m-note__icon { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--signal); display: grid; place-items: center; }
.m-note__icon svg { width: 1.3em; height: 1.3em; fill: var(--ink); }
.m-note__body small { display: block; font-size: 0.82em; color: var(--muted); }
.m-note__body b { display: block; font-weight: 500; line-height: 1.3; }

.chat { display: flex; flex-direction: column; gap: 0.7em; font-family: var(--font-body); }
.chat p { max-width: 84%; padding: 0.7em 1em; border-radius: 1.2em; line-height: 1.3; box-shadow: var(--shadow-soft); }
.chat__in { align-self: flex-start; background: var(--white); color: var(--ink); border-bottom-left-radius: 0.3em; }
.chat__out { align-self: flex-end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 0.3em; }

.report { background: var(--white); color: var(--ink); border-radius: 1.2em; padding: 1.1em 1.3em 0.6em; box-shadow: var(--shadow-soft); font-family: var(--font-body); }
.report__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05em; margin-bottom: 0.5em; }
.report p { display: flex; gap: 0.7em; align-items: flex-start; padding: 0.6em 0; border-top: 1px solid var(--line); line-height: 1.3; }
.report small { display: block; font-size: 0.85em; color: var(--muted); }
.report__dot { flex: none; width: 0.7em; height: 0.7em; border-radius: 50%; margin-top: 0.35em; background: var(--line-strong); }
.report__dot--ok { background: var(--ex-green); }
.report__dot--next { background: var(--signal); }

/* ---------- 1 · Hero ---------- */
.hero { padding-block: clamp(32px, 4vw, 64px) var(--section-y); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.hero__title { margin-top: var(--sp-3); font-size: var(--fs-h1); font-weight: 700; line-height: 1.04; letter-spacing: var(--track-display); }
.hero__title span { display: block; }
.hero__lead { margin-top: var(--sp-3); font-size: var(--fs-lead); line-height: 1.6; max-width: 520px; }
.hero__actions { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: 12px; }
.byline { margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-2); }
.byline__photo { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--ink); }
.byline__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 49% 38%; transform: scale(1.9); transform-origin: 49% 42%; }
.byline p { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); max-width: 300px; }
.byline strong { color: var(--ink); font-weight: 500; }

.showcase { min-width: 0; }
.showcase__stage {
  position: relative; aspect-ratio: 560 / 540; width: 100%;
  background: var(--peach); border-radius: var(--r-panel);
  container-type: inline-size;
}
.showcase__browser { position: absolute; top: 7cqw; right: 4cqw; width: 76cqw; font-size: 1.75cqw; }
.showcase__phone { position: absolute; left: 5cqw; bottom: 5cqw; width: 33cqw; font-size: 1.85cqw; }
.showcase__note { position: absolute; right: 4cqw; bottom: 9cqw; width: 54cqw; font-size: 1.9cqw; }
.showcase figcaption { margin-top: 12px; font-size: var(--fs-micro); color: var(--muted); }

/* ---------- 2 · Sistema ---------- */
.system { padding-bottom: var(--section-y); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.step { background: var(--white); border-radius: var(--r-card); padding: 10px; display: flex; flex-direction: column; }
.step__visual {
  aspect-ratio: 5 / 4; border-radius: 14px; background: var(--peach); overflow: hidden;
  container-type: inline-size; display: flex; justify-content: center; align-items: flex-start; padding-top: 6%;
}
.step__visual .ad--card { width: 72cqw; font-size: 3.6cqw; border-radius: 1.2em; overflow: hidden; box-shadow: var(--shadow-soft); }
.step__visual .ad--card .ad__img { aspect-ratio: 16 / 10; }
.step__visual .m-browser--card { width: 90cqw; font-size: 3.4cqw; box-shadow: var(--shadow-soft); }
.step__visual .m-browser--card .site__hero { min-height: 13em; }
.step__visual .m-browser--card .site__copy strong { font-size: 1.6em; }
.step__visual .chat { width: 86cqw; font-size: 4.6cqw; }
.step__visual .report { width: 80cqw; font-size: 4.5cqw; }
.step__text { padding: var(--sp-2) 10px 10px; }
.step h3 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--signal); color: var(--ink); display: grid; place-items: center; font-size: 0.875rem; font-weight: 700; letter-spacing: 0; }
.step__text p { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.system__loop { margin-top: var(--sp-4); display: flex; align-items: flex-start; gap: var(--sp-1); font-size: var(--fs-small); color: var(--muted); }
.system__loop svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 3 · ¿Te suena? ---------- */
.fit { padding-bottom: var(--section-y); }
.fit__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.case { background: var(--white); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.case img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--peach); }
.case__body { padding: var(--sp-3); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-3); flex: 1; }
.case__q { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; min-height: calc(1.3em * 3); }
.fit__note { margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--muted); }
.case__a, .service li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.5; }
.case__a { padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.case__a::before, .service li::before {
  content: ''; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141416' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------- 4 · Servicios ---------- */
.services { padding-bottom: var(--section-y); }
.services__panel { background: var(--ink); color: var(--on-ink); border-radius: var(--r-panel); padding: var(--pad-panel); }
.services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.service { background: var(--ink-2); border: 1px solid var(--line-on-ink); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.service__visual { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; background: var(--peach); }
.m-browser--service { position: absolute; left: 8cqw; top: 9cqw; width: 96cqw; font-size: 1.9cqw; }
.m-phone--service { position: absolute; left: 12cqw; top: 8cqw; width: 34cqw; font-size: 2cqw; }
.m-note--service { position: absolute; right: 7cqw; top: 32cqw; width: 44cqw; font-size: 2.2cqw; }
.service__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.service h3 { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; color: var(--on-ink); }
.service__body > p { color: var(--on-ink-muted); max-width: 48ch; }
.service ul { margin-top: var(--sp-1); display: grid; gap: 12px; }
.service li { color: var(--on-ink); }
.services__note { margin-top: var(--sp-3); font-size: var(--fs-micro); color: var(--on-ink-muted); }

/* ---------- 4b · Lo diseñamos juntos ---------- */
.together { padding-bottom: var(--section-y); }
.together__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
.together__title { font-size: var(--fs-h1); font-weight: 700; line-height: 1.08; letter-spacing: var(--track-display); }
.together__title span { display: block; }
.together__title span:first-child { color: var(--muted); }
.together__title mark {
  color: inherit; padding: 0 0.06em; border-radius: 0.08em;
  background: linear-gradient(transparent 56%, var(--signal) 56%, var(--signal) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.together__steps { margin-top: var(--sp-5); border-bottom: 1px solid var(--line); }
.together__steps li { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) 0; border-top: 1px solid var(--line); align-items: baseline; }
.together__steps b { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); display: flex; align-items: center; gap: var(--sp-1); }
.together__steps b::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.together__steps p { font-size: var(--fs-body); line-height: 1.5; }
.together__visual { min-width: 0; }
.together__stage { position: relative; aspect-ratio: 560 / 440; background: var(--peach); border-radius: var(--r-panel); container-type: inline-size; }
.together__browser { position: absolute; top: 8cqw; left: 7cqw; width: 80cqw; font-size: 1.8cqw; }
.comment {
  position: absolute; max-width: 46cqw; font-size: 2.3cqw; line-height: 1.35;
  background: var(--white); color: var(--ink); border-radius: 1.1em; padding: 0.8em 1.1em;
  box-shadow: var(--shadow-mock); font-family: var(--font-body);
}
.comment small { display: block; font-size: 0.8em; color: var(--muted); margin-bottom: 0.2em; }
.comment--client { border-bottom-right-radius: 0.3em; }
.comment--us { background: var(--ink); color: var(--on-ink); border-bottom-left-radius: 0.3em; }
.comment--us small { color: var(--on-ink-muted); }
.together__c1 { top: 31cqw; right: 3cqw; }
.together__c2 { top: 45cqw; right: 9cqw; }
.together__visual figcaption { margin-top: 12px; font-size: var(--fs-micro); color: var(--muted); }

/* ---------- 5 · La entrega no es el final ---------- */
.journey { padding-bottom: var(--section-y); }
.journey__track { position: relative; --line-h: 64px; margin-top: var(--sp-6); }
.journey__line { display: block; width: 100%; height: var(--line-h); overflow: visible; fill: none; stroke-linecap: round; }
.journey__line path { vector-effect: non-scaling-stroke; }
.journey__before { stroke: var(--line-strong); stroke-width: 2; }
.journey__after { stroke: var(--ink); stroke-width: 4; }
.journey__phases { position: absolute; inset: 0 0 auto 0; height: var(--line-h); pointer-events: none; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-small); color: var(--muted); }
.phase { position: absolute; top: calc(var(--sp-4) * -1); }
.phase--before { left: 0; }
.phase--after { left: calc(100% / 7 * 3); color: var(--ink); }
.phase::before { content: ''; display: inline-block; width: 14px; height: 2px; border-radius: 2px; vertical-align: middle; margin-right: 8px; transform: translateY(-1px); background: var(--line-strong); }
.phase--after::before { height: 3px; background: var(--ink); }
.journey__steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: var(--sp-4); }
.stop { position: relative; padding-right: var(--sp-3); }
.stop::before {
  content: ''; position: absolute; left: 8px; top: calc(var(--line-h) / -2 - var(--sp-4));
  width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--line-strong);
}
.stop--handoff::before { width: 18px; height: 18px; background: var(--sand); border: 2px solid var(--ink); }
.stop--after::before { background: var(--ink); }
.stop--end::before { width: 22px; height: 22px; background: var(--signal); }
.stop h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.stop p { margin-top: 6px; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.stop--before h3 { color: var(--muted); }
.stop--handoff p { color: var(--ink); }

.journey.is-armed .journey__line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.journey.is-armed .journey__before { transition: stroke-dashoffset calc(var(--dur-draw) * 0.45) linear; }
.journey.is-armed .journey__after { transition: stroke-dashoffset calc(var(--dur-draw) * 0.55) var(--ease-out) calc(var(--dur-draw) * 0.45); }
.journey.is-armed .stop::before { opacity: 0; transition: opacity 240ms var(--ease-out); }
.journey.is-drawn .journey__line path { stroke-dashoffset: 0; }
.journey.is-drawn .stop::before { opacity: 1; }
.journey.is-drawn .stop:nth-child(2)::before { transition-delay: 220ms; }
.journey.is-drawn .stop:nth-child(3)::before { transition-delay: 460ms; }
.journey.is-drawn .stop:nth-child(4)::before { transition-delay: 700ms; }
.journey.is-drawn .stop:nth-child(5)::before { transition-delay: 1000ms; }
.journey.is-drawn .stop:nth-child(6)::before { transition-delay: 1280ms; }
.journey.is-drawn .stop:nth-child(7)::before { transition-delay: 1560ms; }

/* ---------- 6 · Fundador ---------- */
.founder { padding-bottom: var(--section-y); }
.founder__card { background: var(--white); border-radius: var(--r-panel); padding: var(--sp-2); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5); align-items: center; }
.founder__photo { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink); }
.founder__photo img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 0; }
.founder__text { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; display: flex; flex-direction: column; align-items: flex-start; }
.founder__text .pill { font-size: 0.875rem; letter-spacing: 0; line-height: 1.6; }
.founder blockquote { margin-top: var(--sp-3); }
.founder blockquote p { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.founder__name { margin-top: var(--sp-3); display: flex; flex-direction: column; }
.founder__name strong { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
.founder__name span { color: var(--muted); font-size: var(--fs-small); }
.founder__bio { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); color: var(--muted); max-width: 54ch; }

/* ---------- 7 · Portafolio ---------- */
.work { padding-bottom: var(--section-y); }
.work__card { background: var(--peach); border-radius: var(--r-panel); padding: var(--pad-panel); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-5); align-items: baseline; }
.work h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-display); line-height: 1.1; }
.work__statement { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.02em; max-width: 34ch; }
.work__note { margin-top: var(--sp-2); font-size: var(--fs-small); max-width: 56ch; }

/* ---------- 8 · CTA ---------- */
.cta { padding-bottom: var(--section-y); }
.cta__panel { background: var(--ink); color: var(--on-ink); border-radius: var(--r-panel); padding: var(--pad-panel); }
.cta h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); font-weight: 700; line-height: 1.02; letter-spacing: var(--track-display); }
.cta h2 span { display: block; }
.cta__body { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line-on-ink); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.cta__body p { color: var(--on-ink-muted); max-width: 52ch; }

/* ---------- Pie ---------- */
.footer { border-top: 1px solid var(--line); padding-block: var(--sp-5) var(--sp-4); }
.footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.footer__line { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-small); }
.footer__links { display: flex; gap: var(--sp-1) var(--sp-3); flex-wrap: wrap; }
.footer__links a { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-small); color: var(--muted); padding: var(--sp-1) 0; }
.footer__links a:hover { color: var(--ink); }
.footer__fine { margin-top: var(--sp-4); font-size: var(--fs-micro); color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__links { gap: var(--sp-3); }
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .showcase { max-width: 640px; }
  .fit__list { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .case { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .case img { height: 100%; aspect-ratio: auto; min-height: 220px; }
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .founder__card { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .founder__photo { aspect-ratio: 4 / 3; }
  .founder__text { padding: var(--sp-4) var(--sp-2) var(--sp-2); }
  .work__card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .together__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .together__visual { max-width: 640px; }

  /* La línea de tiempo pasa a vertical */
  .journey__line, .journey__phases { display: none; }
  .journey__track { margin-top: 0; }
  .journey__steps { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .stop { padding: 0 0 var(--sp-4) 40px; }
  .stop::before { top: 11px; left: 9px; }
  .stop:not(:last-child)::after { content: ''; position: absolute; left: 8px; top: 20px; bottom: -4px; width: 2px; background: var(--line-strong); }
  .stop--handoff::after, .stop--after::after { background: var(--ink) !important; width: 3px; left: 7.5px; }
  .stop--handoff { padding-bottom: var(--sp-5); }
  .journey.is-armed .stop:not(:last-child)::after { transform-origin: top; transform: scaleY(0); transition: transform 400ms var(--ease-out); }
  .journey.is-drawn .stop:not(:last-child)::after { transform: scaleY(1); }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .nav__inner { height: 72px; }
  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }
  .brand__mark { width: 40px; }
  .brand__name { font-size: 1.25rem; }
}

@media (max-width: 600px) {
  :root { --gutter: 16px; --r-panel: 24px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .step__visual { aspect-ratio: 16 / 10; padding-top: 6%; }
  .step__visual .ad--card { width: 54cqw; font-size: 2.7cqw; }
  .step__visual .m-browser--card { width: 80cqw; font-size: 2.6cqw; }
  .step__visual .chat { width: 80cqw; font-size: 4.2cqw; }
  .step__visual .report { width: 76cqw; font-size: 4.1cqw; }
  .case { display: flex; }
  .case img { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
  .case__q { font-size: 1.125rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .byline { margin-top: var(--sp-4); }
  .services__panel { padding: var(--sp-4) var(--sp-2); }
  .service__body { padding: var(--sp-3); }
  .cta__panel { padding: var(--sp-5) var(--sp-3); }
  .cta .btn { width: 100%; }
  .head { margin-bottom: var(--sp-4); }
  .showcase__phone .ad__copy { display: none; }
  .showcase__note { bottom: auto; top: 57cqw; right: 2cqw; width: 58cqw; font-size: 3.3cqw; }
  .m-phone--service { left: 6cqw; }
  .m-note--service { right: 3cqw; top: 30cqw; width: 54cqw; font-size: 3.4cqw; }
  .case__q { min-height: 0; }
  .m-browser--service .site__head span:last-child { display: none; }
  .together__steps li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .comment { font-size: max(var(--fs-micro), 3.2cqw); max-width: 62cqw; }
  .together__c1 { top: 24cqw; }
  .together__c2 { top: 49cqw; right: 4cqw; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}