/* Hallmark · genre: editorial · redesign of Narrative Workflow · theme: custom "el punto"
 * vibe: "verde profundo, señal, tipografía gigante" · display: Bricolage Grotesque · body: IBM Plex Sans
 * axes: mid/dark paper band (alternating) / display-heavy / chromatic-green
 * nav: N1b · footer: Ft1 mast-headed · enrichment: Tier A CSS flow diagram
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; overflow-wrap: anywhere; }
a { color: inherit; }
img { max-width: 100%; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); }
.dot {
  display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%;
  background: var(--color-signal); margin-left: 0.04em; vertical-align: baseline;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  border-radius: var(--radius-pill); border: 2px solid transparent;
  font: 600 var(--text-base)/1 var(--font-body); white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-signal { background: var(--color-signal); color: var(--color-on-signal); }
.btn-signal:hover { background: var(--color-on-deep); }
.btn-ghost { border-color: var(--color-rule-deep); color: var(--color-on-deep); background: transparent; }
.btn-ghost:hover { border-color: var(--color-on-deep-2); }
.btn-deep { background: var(--color-deep); color: var(--color-on-deep); }
.btn-deep:hover { background: var(--color-ink); }

/* ── N1b nav ───────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-deep); color: var(--color-on-deep);
  border-bottom: 1px solid var(--color-rule-deep);
}
.nav .wrap { display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.04em; text-decoration: none; }
.nav ul { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.nav ul a { text-decoration: none; color: var(--color-on-deep-2); font-size: var(--text-sm); white-space: nowrap; }
.nav ul a:hover { color: var(--color-on-deep); }
.nav .btn { margin-left: auto; min-height: 42px; padding: 0 var(--space-md); font-size: var(--text-sm); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { position: relative; background: var(--color-deep); color: var(--color-on-deep); overflow: hidden; }
.hero .wrap { position: relative; padding-block: var(--space-2xl) var(--space-xl); }
.hero-orb {
  position: absolute; width: clamp(280px, 42vw, 620px); aspect-ratio: 1; border-radius: 50%;
  background: var(--color-signal); right: calc(clamp(280px, 42vw, 620px) * -0.32); top: calc(clamp(280px, 42vw, 620px) * -0.32);
  max-width: none;
}
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-on-deep-3); text-transform: uppercase; }
.hero h1 { position: relative; margin-top: var(--space-md); font-size: var(--text-hero); max-width: 13ch; }
.hero .lede { position: relative; margin-top: var(--space-lg); max-width: 54ch; font-size: var(--text-lg); color: var(--color-on-deep-2); }
.hero .lede strong { color: var(--color-on-deep); font-weight: 600; }
.hero-actions { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

/* Flow diagram — complete at rest; the loop only advances a fill. */
.flow {
  position: relative; margin-top: var(--space-2xl);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md);
  list-style: none; padding: 0;
}
/* One 10 s cycle, four 22 % windows. In each window the track fills
   while the node "thinks", then its output writes in line by line and
   stays, so the work visibly accumulates left to right before the loop
   clears. Without animation every output is visible and the thinking
   dots are hidden: the still frame is a finished diagram. */
.flow li { position: relative; padding-top: var(--space-md); border-top: 2px solid var(--color-rule-deep); min-width: 0; display: grid; align-content: start; }
.flow li::after {
  content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
  background: var(--color-signal); transform: scaleX(0); transform-origin: left center;
  animation: track-1 10s var(--ease-in-out) infinite both;
}
.flow li:nth-child(2)::after { animation-name: track-2; }
.flow li:nth-child(3)::after { animation-name: track-3; }
.flow li:nth-child(4)::after { animation-name: track-4; }
.flow b { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-signal); font-weight: 600; }
.flow li > span { display: block; margin-top: var(--space-2xs); color: var(--color-on-deep-2); font-size: var(--text-sm); }

.out {
  position: relative; margin-top: var(--space-md);
  background: var(--color-deep-2); border-radius: 16px;
  padding: var(--space-sm) var(--space-md); min-height: 7.25rem;
  display: grid; align-content: start; gap: 6px;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-on-deep-2);
  font-variant-numeric: tabular-nums;
}
.out p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: out-1 10s var(--ease-out) infinite both; }
.out p:nth-of-type(2) { animation-delay: 0.3s; }
.out p:nth-of-type(3) { animation-delay: 0.6s; }
.out em { font-style: normal; color: var(--color-signal); font-weight: 600; }
.out .dim { color: var(--color-on-deep-3); }
.out .bubble {
  white-space: normal; background: var(--color-paper); color: var(--color-ink);
  border-radius: 12px 12px 12px 4px; padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.35;
}
.flow li:nth-child(2) .out p { animation-name: out-2; }
.flow li:nth-child(3) .out p { animation-name: out-3; }
.flow li:nth-child(4) .out p { animation-name: out-4; }

.think { position: absolute; top: var(--space-sm); right: var(--space-md); display: flex; gap: 4px; opacity: 0; animation: think-1 10s linear infinite both; }
.flow li:nth-child(2) .think { animation-name: think-2; }
.flow li:nth-child(3) .think { animation-name: think-3; }
.flow li:nth-child(4) .think { animation-name: think-4; }
.think i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-signal); animation: pulse 900ms var(--ease-in-out) infinite; }
.think i:nth-child(2) { animation-delay: 150ms; }
.think i:nth-child(3) { animation-delay: 300ms; }

@keyframes pulse { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

@keyframes track-1 { 0% { transform: scaleX(0); } 8%, 90% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes track-2 { 0%, 22% { transform: scaleX(0); } 30%, 90% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes track-3 { 0%, 44% { transform: scaleX(0); } 52%, 90% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes track-4 { 0%, 66% { transform: scaleX(0); } 74%, 90% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }

@keyframes think-1 { 0% { opacity: 0; } 1%, 8% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes think-2 { 0%, 22% { opacity: 0; } 23%, 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes think-3 { 0%, 44% { opacity: 0; } 45%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes think-4 { 0%, 66% { opacity: 0; } 67%, 74% { opacity: 1; } 76%, 100% { opacity: 0; } }

@keyframes out-1 { 0%, 8% { opacity: 0; transform: translateY(6px); } 11%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes out-2 { 0%, 30% { opacity: 0; transform: translateY(6px); } 33%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes out-3 { 0%, 52% { opacity: 0; transform: translateY(6px); } 55%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes out-4 { 0%, 74% { opacity: 0; transform: translateY(6px); } 77%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }

/* ── Insight band (direction B) ────────────────────────────── */
.insight { background: var(--color-signal); color: var(--color-on-signal); overflow: hidden; }
.insight .wrap { padding-block: var(--space-2xl); display: grid; gap: var(--space-lg); }
.insight .small { font-size: var(--text-lg); font-weight: 500; }
/* Sized so each phrase fits half the row on one line; a phrase broken
   mid-word ("mes / es.") reads as a bug, not as display type. Every
   example is kept to eight characters or fewer for the same reason. */
.insight .giant { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.25rem, 9vw, 7.5rem); line-height: 0.9; letter-spacing: -0.05em; white-space: nowrap; }
.insight .giant.light { color: var(--color-paper); }

/* Rotator — four examples stacked in one grid cell. Complete at rest:
   only the first is visible without animation, so a still frame, a
   screenshot or reduced motion all show a finished band. */
.rotator { display: grid; }
.slide {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl); align-items: end;
  opacity: 0;
  animation: slide-cycle 16s var(--ease-out) infinite;
}
.slide:nth-child(1) { opacity: 1; animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }
.slide:nth-child(4) { animation-delay: 12s; }
.slide .col-b { text-align: right; }
/* Each example is fully gone (22 %) before the next one starts (25 %).
   A crossfade between two different phrases in the same spot reads as
   overprinted text, not as motion. */
@keyframes slide-cycle {
  0%        { opacity: 0; transform: translateY(28px); }
  3%, 19%   { opacity: 1; transform: none; }
  22%, 100% { opacity: 0; transform: translateY(-28px); }
}

.ticks { display: flex; gap: 10px; flex-shrink: 0; }
.ticks i {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-deep-2);
  animation: tick-cycle 16s steps(1, end) infinite;
}
.ticks i:nth-child(1) { background: var(--color-signal); animation-delay: 0s; }
.ticks i:nth-child(2) { animation-delay: 4s; }
.ticks i:nth-child(3) { animation-delay: 8s; }
.ticks i:nth-child(4) { animation-delay: 12s; }
@keyframes tick-cycle {
  0%   { background: var(--color-signal); }
  25%, 100% { background: var(--color-deep-2); }
}

/* Reading pause: a viewer who stops on the band keeps the current example. */
.insight:hover .slide,
.insight:hover .ticks i { animation-play-state: paused; }
.insight .close {
  grid-column: 1 / -1; margin-top: var(--space-md);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md);
  background: var(--color-on-signal); color: var(--color-paper);
  border-radius: var(--radius-card); padding: var(--space-lg) var(--space-xl);
}
.insight .close p { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); letter-spacing: -0.03em; line-height: 1.05; }

/* ── Section scaffold ──────────────────────────────────────── */
.section { padding-block: var(--space-3xl); }
.section-head { display: grid; gap: var(--space-md); max-width: 46rem; margin-bottom: var(--space-xl); }
.section-head h2 { font-size: var(--text-3xl); }
.section-head p { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: var(--measure); }
.on-deep { background: var(--color-deep); color: var(--color-on-deep); }
.on-deep .section-head p { color: var(--color-on-deep-2); }
.on-paper-2 { background: var(--color-paper-2); }

/* ── How it works ──────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); list-style: none; padding: 0; margin: 0; }
.step {
  background: var(--color-white); border-radius: var(--radius-card);
  padding: var(--space-xl); display: grid; gap: var(--space-md); align-content: start; min-width: 0;
}
.step-num { font-family: var(--font-display); font-weight: 800; font-size: 4.5rem; line-height: 0.8; letter-spacing: -0.05em; color: var(--color-deep); }
.step h3 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.step p { color: var(--color-ink-soft); }
.sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.sources li {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: var(--color-paper-2); border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); font-weight: 500;
}
.sources li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-signal); }
.step .aside { font-size: var(--text-sm); color: var(--color-ink); background: var(--color-paper); border-radius: 16px; padding: var(--space-sm) var(--space-md); }

/* ── Alerts (direction C) ──────────────────────────────────── */
.alerts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.alert {
  background: var(--color-white); border-radius: var(--radius-card); padding: var(--space-lg);
  display: grid; gap: var(--space-sm); align-content: start; min-width: 0;
  box-shadow: 0 24px 48px -24px rgba(14, 59, 36, 0.35);
}
.alert-top { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-soft); }
.alert-top i { width: 12px; height: 12px; border-radius: 50%; background: var(--color-signal); }
.alert h3 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.alert p { color: var(--color-ink-soft); font-size: var(--text-sm); }
.chip {
  justify-self: start; margin-top: var(--space-xs);
  background: var(--color-deep); color: var(--color-on-deep);
  border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
}

/* ── How it decides ────────────────────────────────────────────
   Two cases share one grid cell and alternate on a 16 s cycle. In its
   8 s window a case checks its signals one by one, the evidence bar
   fills, and the verdict lands. At rest (no animation, reduced motion)
   the first case is shown complete and the second is hidden. */
.decide-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-xl); align-items: start; }
.decide-layout .section-head { margin-bottom: 0; }
.decide-count { font-size: var(--text-sm) !important; color: var(--color-ink) !important; background: var(--color-paper); border-radius: 16px; padding: var(--space-sm) var(--space-md); }
.decide-stage { display: grid; }
.case {
  grid-area: 1 / 1; min-width: 0;
  background: var(--color-white); border-radius: var(--radius-card);
  padding: var(--space-xl); display: grid; gap: var(--space-lg);
  box-shadow: 0 24px 48px -24px rgba(14, 59, 36, 0.35);
}
.case-1 { animation: case-1 16s linear infinite both; }
.case-2 { opacity: 0; animation: case-2 16s linear infinite both; }
.case-head { display: grid; gap: var(--space-2xs); }
.case-tag { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.case-head h3 { font-size: var(--text-2xl); }
.case-cat { font-size: var(--text-sm); color: var(--color-ink-soft); }
.think-inline { display: inline-flex; gap: 4px; }
.think-inline i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-signal); animation: pulse 900ms var(--ease-in-out) infinite; }
.think-inline i:nth-child(2) { animation-delay: 150ms; }
.think-inline i:nth-child(3) { animation-delay: 300ms; }

.trace { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.trace li {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 14px;
  gap: var(--space-md); align-items: center;
  background: var(--color-paper); border-radius: 14px; padding: var(--space-sm) var(--space-md);
  animation: trace-in 16s var(--ease-out) infinite both;
}
.trace .k { font-size: var(--text-sm); color: var(--color-ink-soft); }
.trace .v { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.trace .v.strong { font-weight: 600; color: var(--color-deep); }
.trace i { width: 14px; height: 14px; border-radius: 50%; }
.trace i.ok { background: var(--color-signal); }
.trace i.no { background: var(--color-warn); }
.case-1 .trace li:nth-child(1) { animation-delay: 0.6s; }
.case-1 .trace li:nth-child(2) { animation-delay: 1.4s; }
.case-1 .trace li:nth-child(3) { animation-delay: 2.2s; }
.case-1 .trace li:nth-child(4) { animation-delay: 3s; }
.case-1 .trace li:nth-child(5) { animation-delay: 3.8s; }
.case-2 .trace li:nth-child(1) { animation-delay: 8.6s; }
.case-2 .trace li:nth-child(2) { animation-delay: 9.4s; }
.case-2 .trace li:nth-child(3) { animation-delay: 10.2s; }
.case-2 .trace li:nth-child(4) { animation-delay: 11s; }
.case-2 .trace li:nth-child(5) { animation-delay: 11.8s; }

.meter { height: 8px; border-radius: var(--radius-pill); background: var(--color-paper-2); overflow: hidden; }
.meter span {
  display: block; height: 100%; width: calc(var(--fill) * 100%);
  background: var(--color-signal); border-radius: inherit;
  transform-origin: left center;
  animation: meter-fill 16s var(--ease-in-out) infinite both;
}
.meter span.stop { background: var(--color-warn); }
.case-1 .meter span { animation-delay: 0.6s; }
.case-2 .meter span { animation-delay: 8.6s; }

.verdict {
  justify-self: start; font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-xl); letter-spacing: -0.02em;
  border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg);
  animation: trace-in 16s var(--ease-out) infinite both;
}
.verdict.ok { background: var(--color-deep); color: var(--color-on-deep); }
.verdict.no { background: var(--color-warn); color: var(--color-white); }
.case-1 .verdict { animation-delay: 5s; }
.case-2 .verdict { animation-delay: 13s; }

@keyframes case-1 { 0%, 47% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes case-2 { 0%, 49% { opacity: 0; } 51%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
/* A line stays until its case has faded (≥ 7.7 s after the case starts)
   and is gone before that case returns (< 16 s). */
@keyframes trace-in {
  0%        { opacity: 0; transform: translateX(-10px); }
  3%, 45%   { opacity: 1; transform: none; }
  47%, 100% { opacity: 0; transform: none; }
}
@keyframes meter-fill {
  0%        { transform: scaleX(0); }
  28%, 45%  { transform: scaleX(1); }
  47%, 100% { transform: scaleX(0); }
}

/* ── The real message ──────────────────────────────────────── */
.message-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-xl); align-items: start; }
.message-stack { display: grid; gap: var(--space-md); }
.msg-card {
  background: var(--color-paper); color: var(--color-ink);
  border-radius: var(--radius-card); padding: var(--space-lg) var(--space-xl);
  display: grid; gap: var(--space-xs); min-width: 0;
}
.msg-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.msg-head h3 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.msg-figure { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xl); color: var(--color-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-card .cat { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.msg-card ul { margin: var(--space-2xs) 0 0; padding-left: 1.1em; color: var(--color-ink-soft); }
.msg-card li + li { margin-top: var(--space-2xs); }
.msg-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-on-deep-3); max-width: 48ch; }

/* ── What it is not (direction A tiles) ────────────────────── */
.nots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.not { border-radius: var(--radius-card); padding: var(--space-xl); display: grid; gap: var(--space-xl); align-content: space-between; min-height: 15rem; min-width: 0; }
.not h3 { font-size: var(--text-2xl); }
.not p { font-size: var(--text-lg); }
.not.deep { background: var(--color-deep); color: var(--color-on-deep); }
.not.deep p { color: var(--color-on-deep-2); }
.not.ink { background: var(--color-ink); color: var(--color-on-deep); }
.not.ink p { color: var(--color-on-deep-2); }
.not.light { background: var(--color-paper-2); }
.not.light p { color: var(--color-ink-soft); }

/* ── Who it is for ─────────────────────────────────────────── */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.fit-col { background: var(--color-white); border-radius: var(--radius-card); padding: var(--space-xl); min-width: 0; }
.fit-col h3 { font-size: var(--text-xl); letter-spacing: -0.02em; margin-bottom: var(--space-md); }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.fit-col li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; }
.fit-col li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-signal); transform: translateY(-1px); }
.fit-col.no li::before { background: var(--color-paper-2); box-shadow: inset 0 0 0 2px var(--color-ink-soft); }
.fit-col.no { background: transparent; border: 2px solid var(--color-paper-2); }

/* ── Pilot ─────────────────────────────────────────────────── */
.pilot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.pilot li { background: var(--color-deep-2); border-radius: var(--radius-card); padding: var(--space-lg); display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.pilot .when { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-signal); text-transform: uppercase; }
.pilot h3 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.pilot p { color: var(--color-on-deep-2); font-size: var(--text-sm); }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { display: grid; gap: var(--space-sm); max-width: 52rem; }
.faq details { background: var(--color-white); border-radius: 20px; padding: 0 var(--space-lg); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  padding-block: var(--space-md); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--color-deep); transition: background-color var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::after { background: var(--color-signal); border-color: var(--color-signal); }
.faq details p { padding-bottom: var(--space-md); color: var(--color-ink-soft); max-width: var(--measure); }

/* ── CTA ───────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; background: var(--color-deep); color: var(--color-on-deep); }
.cta .wrap { position: relative; padding-block: var(--space-3xl); }
.cta-orb { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--color-signal); left: -160px; bottom: -200px; }
.cta h2 { position: relative; font-size: var(--text-3xl); max-width: 16ch; }
.cta p { position: relative; margin-top: var(--space-md); max-width: 56ch; color: var(--color-on-deep-2); font-size: var(--text-lg); }
.contact { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-xl); }
.addr {
  font-family: var(--font-mono); font-size: var(--text-base);
  background: var(--color-deep-2); border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-lg); user-select: all; overflow-wrap: anywhere; min-width: 0;
}
.copy[data-state="done"] { background: var(--color-on-deep); }

/* ── Ft1 footer ────────────────────────────────────────────── */
.footer { background: var(--color-ink); color: var(--color-on-deep-2); }
.footer .wrap { padding-block: var(--space-xl); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); }
.footer .wordmark { color: var(--color-on-deep); font-size: 1.5rem; }
.footer p { font-size: var(--text-sm); }

/* ── Inner pages (integrations, sectors, guides) ───────────────
   Same system as the home page; a shorter hero, a breadcrumb, and a
   prose block for the long-form answer each page exists to give. */
.page-hero { position: relative; background: var(--color-deep); color: var(--color-on-deep); overflow: hidden; }
.page-hero .wrap { position: relative; padding-block: var(--space-xl) var(--space-2xl); }
.page-hero .hero-orb { width: clamp(220px, 30vw, 420px); right: calc(clamp(220px, 30vw, 420px) * -0.35); top: calc(clamp(220px, 30vw, 420px) * -0.35); }
.page-hero h1 { position: relative; margin-top: var(--space-md); font-size: var(--text-3xl); max-width: 20ch; }
.page-hero .lede { position: relative; margin-top: var(--space-md); max-width: 58ch; font-size: var(--text-lg); color: var(--color-on-deep-2); }
.page-hero .hero-actions { margin-top: var(--space-lg); }
.crumbs { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--color-on-deep-3); }
.crumbs a { color: var(--color-on-deep-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-on-deep-3); }

.prose { max-width: 68ch; display: grid; gap: var(--space-md); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-lg); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-xl); letter-spacing: -0.02em; margin-top: var(--space-sm); }
.prose p, .prose li { color: var(--color-ink); }
.prose ul, .prose ol { margin: 0; padding-left: 1.25em; display: grid; gap: var(--space-xs); }
.prose strong { font-weight: 600; }
.callout {
  background: var(--color-white); border-radius: var(--radius-card);
  padding: var(--space-lg); display: grid; gap: var(--space-xs);
}
.callout b { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.015em; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.fact { background: var(--color-white); border-radius: var(--radius-card); padding: var(--space-lg); display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.fact h3 { font-size: var(--text-lg); letter-spacing: -0.015em; }
.fact p { color: var(--color-ink-soft); font-size: var(--text-sm); }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.related a {
  display: grid; gap: var(--space-2xs); height: 100%;
  background: var(--color-white); border-radius: var(--radius-card); padding: var(--space-lg);
  text-decoration: none; transition: transform var(--dur-fast) var(--ease-out);
}
.related a:hover { transform: translateY(-2px); }
.related b { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.015em; }
.related span { color: var(--color-ink-soft); font-size: var(--text-sm); }

.sitemap { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.sitemap a { color: var(--color-on-deep-2); text-decoration: none; }
.sitemap a:hover { color: var(--color-on-deep); text-decoration: underline; }
.footer .wrap.links { padding-top: 0; }

@media (max-width: 720px) {
  .facts, .related { grid-template-columns: minmax(0, 1fr); }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .alerts, .pilot { grid-template-columns: minmax(0, 1fr); }
  .message-layout, .decide-layout { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav ul { display: none; }
}
@media (max-width: 720px) {
  .steps, .nots, .fit { grid-template-columns: minmax(0, 1fr); }
  .slide { grid-template-columns: minmax(0, 1fr); }
  .slide .col-b { text-align: left; }
  .insight .close { padding: var(--space-lg); }
  .step, .not, .fit-col { padding: var(--space-lg); }
  .msg-card { padding: var(--space-lg); }
  .case { padding: var(--space-lg); }
  .trace li { grid-template-columns: minmax(0, 1fr) 14px; gap: var(--space-2xs) var(--space-sm); }
  .trace .k { grid-column: 1; }
  .trace .v { grid-column: 1; }
  .trace i { grid-column: 2; grid-row: 1 / span 2; }
  .section { padding-block: var(--space-2xl); }
}
@media (max-width: 420px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .btn { padding: 0 var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow li::after { animation: none; transform: scaleX(1); opacity: 0.45; }
  .slide, .ticks i { animation: none; }
  .out p, .think, .think i { animation: none; }
  .case-1, .case-2, .trace li, .meter span, .verdict, .think-inline i { animation: none; }
  .btn, .faq summary::after { transition: none; }
}

/* Footer sitemap groups (Sistemas / Rubros / Guías) */
.sitemap-group { flex: 1 1 14rem; }
.sitemap-label { margin: 0 0 var(--space-xs); font-weight: 600; color: var(--color-on-deep); }