/* H+V Digital Lab — dirección A: cuaderno de laboratorio.
   Tokens del sistema Heb+Vivi: tinta, papel y el azul del "+". */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --ink-2: #444444;
  --ink-3: #666666;
  --rule: #d9d9de;
  --grid: #efeff3;
  --ghost: #e6e6ec;
  --mark: #2502d0;
  --accent: #2502d0;
  --accent-tint: #eae6ff;
  --on-accent: #ffffff;
  --cta: #2502d0;
  --cta-hover: #1a0098;
  --on-cta: #ffffff;
  --data: #0077a8;
  --highlight: #ffe27a;
  --hl-ink: #000000;
  --night: #0d0d14;
  --indigo: #0d0060;
  --electric: #5c25ff;
  --cyan: #00c2ff;
  --lavender: #a594f0;

  --f-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Mono", ui-monospace, Menlo, monospace;

  --fs-mono: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lede: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
  --fs-h2: clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem);
  --fs-hero: clamp(3.25rem, 0.9rem + 11vw, 12rem);

  --gutter: clamp(16px, 4vw, 56px);
  --col-gap: 24px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 240ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d0d14;
    --ink: #ffffff;
    --ink-2: #cfcfd8;
    --ink-3: #a2a2ae;
    --rule: #2c2c38;
    --grid: #171722;
    --ghost: #262634;
    --mark: #5c25ff;
    --accent: #a594f0;
    --accent-tint: #1f1846;
    --on-accent: #0d0d14;
    --data: #00c2ff;
    --highlight: #5a4700;
    --hl-ink: #ffffff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d0d14;
  --ink: #ffffff;
  --ink-2: #cfcfd8;
  --ink-3: #a2a2ae;
  --rule: #2c2c38;
  --grid: #171722;
  --ghost: #262634;
  --mark: #5c25ff;
  --accent: #a594f0;
  --accent-tint: #1f1846;
  --on-accent: #0d0d14;
  --data: #00c2ff;
  --highlight: #5a4700;
  --hl-ink: #ffffff;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--f-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
svg { display: block; }
::selection { background: var(--mark); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; }
.label::before { content: "// "; color: var(--accent); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
}
.skip:focus { top: calc(16px + env(safe-area-inset-top, 0px)); }

/* ---------- Botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 1em 1.5em;
  background: var(--ink); color: var(--paper);
  font: 500 0.9375rem/1 var(--f-body);
  border-radius: 0;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--mark); color: #fff; }
.btn:active { background: var(--ink-2); }
.btn__arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--sm { padding: 0.8em 1.15em; font-size: 0.875rem; }

.link {
  display: inline-flex; gap: 0.45em; align-items: baseline;
  font-weight: 500; font-size: 0.9375rem;
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  transition: color var(--dur) var(--ease);
}
.link:hover { color: var(--accent); }

/* ---------- Monograma ---------- */
.mark { width: 100%; height: auto; fill: var(--ink); overflow: visible; }
.mark g { transition: fill 300ms var(--ease), opacity 300ms var(--ease), transform 420ms var(--ease); transform-box: fill-box; transform-origin: center; }
.mark .mark__plus { fill: var(--mark); }

/* ---------- Cabecera ---------- */
.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 32px;
  padding-block: 20px;
  border-bottom: 1px solid var(--ink);
  background-clip: content-box;
}
.brand { display: inline-flex; align-items: flex-end; gap: 10px; }
.mark--sm { width: 52px; }
.brand__lab { font: italic 400 0.8125rem/1 var(--f-body); color: var(--mark); letter-spacing: 0.01em; white-space: nowrap; }
.brand__lab b { font-weight: 500; }
.masthead__log { color: var(--ink-3); }
.masthead__nav ul { display: flex; gap: 28px; }
.masthead__nav a {
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.masthead__nav a::before { content: "// "; color: var(--ink-3); transition: color var(--dur) var(--ease); }
.masthead__nav a:hover, .masthead__nav a:hover::before { color: var(--accent); }

/* ---------- Portada ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 7vw, 104px);
}
.cols {
  position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0;
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap);
}
.cols span { border-left: 1px solid var(--grid); border-right: 1px solid var(--grid); }

.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  color: var(--ink-3);
  padding-bottom: clamp(28px, 5vw, 64px);
}

.hero__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: var(--fs-hero);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-left: -0.04em;
}
.ln { display: block; position: relative; width: fit-content; }
.ln--serif {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-variation-settings: normal;
  text-transform: none; letter-spacing: -0.02em;
  font-size: 0.9em; line-height: 0.98;
}
.ln--serif:not(.ln--serif + .ln--serif) { padding-top: 0.1em; }
.ln--answer { margin-left: 33.333%; }
.ln[data-sup]::before {
  content: attr(data-sup);
  position: absolute; top: 0.3em; right: -2.4rem;
  font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0;
  color: var(--accent);
}
.ln::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em;
  height: 0.07em; min-height: 3px;
  background: var(--mark);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease);
}
.hero:has(.note[data-g="a"]:is(:hover, :focus-visible)) .ln[data-g="a"]::after,
.hero:has(.note[data-g="b"]:is(:hover, :focus-visible)) .ln[data-g="b"]::after { transform: scaleX(1); }

.hero__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
  margin-top: clamp(40px, 6vw, 80px);
}
.hero__intro { grid-column: 1 / span 5; display: grid; gap: 32px; align-content: start; }
.lede { font-size: var(--fs-lede); line-height: 1.45; max-width: 34ch; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

.notes { grid-column: 8 / span 5; display: grid; gap: 0; align-content: start; border-top: 1px solid var(--ink); }
.note {
  display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2);
  cursor: default;
}
.note b { color: var(--ink); font-weight: 500; }
.note__n {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--ink); color: var(--ink); letter-spacing: 0;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.note:is(:hover, :focus-visible) .note__n { background: var(--mark); border-color: var(--mark); color: #fff; }
.note:focus-visible { outline-offset: -2px; }

.proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap);
  margin-top: clamp(56px, 8vw, 112px);
  border-top: 1px solid var(--ink);
}
.proof li { display: grid; gap: 10px; padding-top: 20px; align-content: start; }
.proof__num {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(2.75rem, 1.6rem + 4vw, 5.5rem); line-height: 0.9; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.proof__unit { color: var(--mark); }
.proof__label { color: var(--ink-2); max-width: 26ch; }

/* ---------- Secciones ---------- */
.sec-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 16px;
  align-items: end;
  padding-top: 20px; border-top: 1px solid var(--ink);
  margin-bottom: clamp(32px, 5vw, 64px);
}
.sec-head .label { grid-column: 1 / -1; color: var(--ink-2); }
.sec-head :is(h1, h2) {
  grid-column: 1 / span 8;
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: var(--fs-h2); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase;
  text-wrap: balance;
}
.sec-head :is(h1, h2) .serif { font-size: 0.95em; }
.sec-head__aside { grid-column: 10 / span 3; color: var(--ink-3); text-align: right; }

/* ---------- Fig. 1 ---------- */
.fig { padding-bottom: clamp(64px, 9vw, 128px); }
.fig__body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px;
}
.fig__plate {
  grid-column: 1 / span 8;
  position: relative;
  border: 1px solid var(--rule);
  padding: clamp(24px, 4vw, 56px);
  padding-top: clamp(48px, 6vw, 72px);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.dim {
  position: absolute; top: clamp(16px, 2.4vw, 28px);
  left: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px);
  display: flex; justify-content: center; color: var(--ink-3);
}
.dim::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--ink-3);
}
.dim::after {
  content: ""; position: absolute; inset: calc(50% - 6px) 0 auto 0; height: 12px;
  border-left: 1px solid var(--ink-3); border-right: 1px solid var(--ink-3);
}
.dim span { position: relative; z-index: 1; background: var(--paper); padding: 0 12px; }

.fig__mark { position: relative; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--paper); color: var(--accent);
  border: 1px solid var(--accent); letter-spacing: 0;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fig__caption { margin-top: 24px; color: var(--accent); text-transform: none; letter-spacing: 0.02em; }
.fig__caption i { font-family: var(--f-body); font-size: 0.9375rem; }
.fig__caption b { font-family: var(--f-body); font-size: 0.9375rem; font-style: italic; font-weight: 500; }

.legend { grid-column: 9 / span 4; display: grid; align-content: start; border-top: 1px solid var(--ink); }
.legend li { display: grid; }
.leg {
  display: grid; gap: 6px; width: 100%; align-content: start;
  padding: 20px 0 22px; border-bottom: 1px solid var(--rule);
  transition: color var(--dur) var(--ease);
}
.leg__key { color: var(--accent); }
.leg__name { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); line-height: 1.05; }
.leg__role { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; max-width: 38ch; }
.leg:focus-visible { outline-offset: -2px; }

/* Resaltado: hover/focus por :has, clic (táctil) por data-active */
.fig:has(.leg[data-k="h"]:is(:hover, :focus-visible)) .mark g:not([data-part="h"]),
.fig:has(.leg[data-k="p"]:is(:hover, :focus-visible)) .mark g:not([data-part="p"]),
.fig:has(.leg[data-k="v"]:is(:hover, :focus-visible)) .mark g:not([data-part="v"]),
.fig[data-active="h"] .mark g:not([data-part="h"]),
.fig[data-active="p"] .mark g:not([data-part="p"]),
.fig[data-active="v"] .mark g:not([data-part="v"]) { fill: var(--ghost); }

.fig:has(.leg[data-k="h"]:is(:hover, :focus-visible)) .pin[data-k="h"],
.fig:has(.leg[data-k="p"]:is(:hover, :focus-visible)) .pin[data-k="p"],
.fig:has(.leg[data-k="v"]:is(:hover, :focus-visible)) .pin[data-k="v"],
.fig[data-active="h"] .pin[data-k="h"],
.fig[data-active="p"] .pin[data-k="p"],
.fig[data-active="v"] .pin[data-k="v"] { background: var(--mark); border-color: var(--mark); color: #fff; }

.leg[aria-pressed="true"] .leg__name { color: var(--accent); }

/* ---------- Hoja de sistema ---------- */
.sheet { padding-bottom: clamp(64px, 9vw, 128px); }
.sheet__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap);
}
.panel { border-top: 1px solid var(--ink); padding-top: 16px; display: grid; gap: 20px; align-content: start; min-width: 0; }
.panel--type { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.panel--type .panel__title { grid-column: 1 / -1; }
.panel:not(.panel--type) { grid-column: span 6; }
.panel__title { color: var(--ink-3); }
.panel__note { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }

.spec { display: grid; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); min-width: 0; }
.spec__meta { color: var(--ink-3); }
.spec__sample--display {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase;
}
.spec__sample--serif { font-family: var(--f-serif); font-style: italic; font-size: clamp(2.5rem, 1.8rem + 3vw, 5rem); line-height: 1; }
.spec__sample--body { max-width: 52ch; color: var(--ink-2); line-height: 1.6; }

.swatches { display: grid; gap: 10px; }
.swatches li { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; font-size: var(--fs-small); }
.sw { width: 44px; height: 28px; background: var(--c); }
.sw--line { box-shadow: inset 0 0 0 1px var(--rule); }
.sw__name { font-weight: 500; }
.swatches .mono { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }

.components { display: grid; gap: 22px; }
.components .label { color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  font: 500 0.8125rem/1 var(--f-body); padding: 7px 12px;
  border: 1px solid var(--ink); border-radius: 999px;
}
.note--static { border-bottom: 0; padding: 0; }

.rules { display: grid; gap: 0; }
.rules > div { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.rules > div:first-child { padding-top: 0; }
.rules dt { color: var(--ink-3); }
.rules dd { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }

/* ---------- Pie ---------- */
.foot {
  display: grid; gap: 16px;
  padding-top: 20px; padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--ink);
}
.foot .label { color: var(--ink-2); }
.foot__mail { font-size: clamp(2.25rem, 1rem + 6vw, 7rem); line-height: 1; overflow-wrap: anywhere; }
.foot__meta { color: var(--ink-3); }

/* ---------- Bandas de color: redefinen los tokens en su ámbito ---------- */
.band { background: var(--paper); color: var(--ink); padding-block: clamp(56px, 8vw, 112px); }
.band--night {
  --paper: #0d0d14; --ink: #ffffff; --ink-2: #cfcfd8; --ink-3: #a2a2ae;
  --rule: #2c2c38; --grid: #171722; --ghost: #262634;
  --mark: #5c25ff; --accent: #a594f0; --data: #00c2ff;
  color-scheme: dark;
}
.band--indigo {
  --paper: #0d0060; --ink: #ffffff; --ink-2: #d9d3ff; --ink-3: #b3a8f5;
  --rule: #2b1f8f; --grid: #170a73; --mark: #ffffff; --accent: #00c2ff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band--night { --paper: #15122e; --grid: #1e1a3d; --rule: #322c5c; --ghost: #2c2752; }
}
:root[data-theme="dark"] .band--night { --paper: #15122e; --grid: #1e1a3d; --rule: #322c5c; --ghost: #2c2752; }
.band .fig { padding-bottom: 0; }
.band--night .dim { color: var(--data); }
.band--night .dim::before, .band--night .dim::after { border-color: var(--data); }

/* ---------- Señales de la paleta extendida ---------- */
.kicker {
  display: block; max-width: 44ch;
  font: 400 var(--fs-mono)/1.5 var(--f-mono); font-variation-settings: normal;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: clamp(20px, 3vw, 36px);
}
.live {
  display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 1px;
  background: var(--data); border-radius: 50%;
  box-shadow: 0 0 0 0 var(--data);
  animation: live 2.4s var(--ease) infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--data) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--data) 0%, transparent); }
}
mark {
  background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 0 / 100% 100%; color: var(--hl-ink);
  padding: 0 0.18em; margin: 0 -0.05em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lede strong { font-weight: 500; }

/* ---------- Preguntas frecuentes ---------- */
.faq { padding-block: clamp(64px, 9vw, 128px); }
.faq__list { border-top: 1px solid var(--ink); max-width: 980px; margin-left: auto; }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: grid; grid-template-columns: 1fr 24px; gap: 24px; align-items: center;
  padding: 22px 0; cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__q {
  font-weight: 500; font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem); line-height: 1.3;
  text-wrap: balance; transition: color var(--dur) var(--ease);
}
.qa summary:hover .qa__q { color: var(--accent); }
.qa summary:focus-visible { outline-offset: -2px; }
.qa__plus { position: relative; width: 20px; height: 20px; transition: transform 300ms var(--ease); }
.qa__plus::before, .qa__plus::after { content: ""; position: absolute; background: var(--mark); }
.qa__plus::before { left: 8px; top: 0; width: 4px; height: 20px; }
.qa__plus::after { top: 8px; left: 0; height: 4px; width: 20px; }
.qa[open] .qa__plus { transform: rotate(45deg); }
.qa p { max-width: 64ch; padding: 0 48px 26px 0; color: var(--ink-2); line-height: 1.65; }

/* ---------- Paleta en la hoja de sistema ---------- */
.panel--color { grid-column: 1 / -1 !important; }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chip {
  display: grid; align-content: space-between; gap: 24px; min-height: 104px; padding: 14px 16px;
  background: var(--c); color: var(--t);
}
.chip--line { box-shadow: inset 0 0 0 1px var(--rule); }
.chip__name { font-weight: 500; font-size: 1rem; }
.chip .mono { text-transform: none; letter-spacing: 0.02em; }

/* ---------- Retícula de cursor ---------- */
.reticle { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-reticle, html.has-reticle a, html.has-reticle button { cursor: none; }
  html.has-reticle .reticle {
    display: block; position: fixed; left: 0; top: 0; z-index: 150;
    pointer-events: none; will-change: transform;
    opacity: 0; transition: opacity 200ms var(--ease);
  }
  html.has-reticle .reticle.is-visible { opacity: 1; }
  .reticle__cross {
    position: absolute; left: -14px; top: -14px; width: 28px; height: 28px;
    transition: transform 220ms var(--ease);
  }
  .reticle__cross::before, .reticle__cross::after {
    content: ""; position: absolute; background: var(--mark);
  }
  .reticle__cross::before { left: 13.5px; top: 0; width: 1px; height: 28px; }
  .reticle__cross::after { top: 13.5px; left: 0; height: 1px; width: 28px; }
  .reticle__coords {
    position: absolute; left: 16px; top: 14px; white-space: nowrap;
    font-size: 0.6875rem; color: var(--mark); letter-spacing: 0.04em;
    transition: opacity 200ms var(--ease);
  }
  .reticle.on-dark { --mark: #00c2ff; }
  .reticle.is-link .reticle__cross { transform: rotate(45deg) scale(0.8); }
  .reticle.is-link .reticle__coords { opacity: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ln--answer { margin-left: 16.666%; }
  .masthead__log { display: none; }
  .masthead { grid-template-columns: auto 1fr auto; }
  .masthead__nav { justify-self: end; }
  .hero__intro { grid-column: 1 / span 6; }
  .notes { grid-column: 7 / span 6; }
  .fig__plate, .legend { grid-column: 1 / -1; }
  .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .panel:not(.panel--type) { grid-column: span 6; }
}
@media (max-width: 720px) {
  .masthead { grid-template-columns: auto 1fr; gap: 16px; }
  .masthead__nav { display: none; }
  .masthead .btn { justify-self: end; }
  .hero__meta span:nth-child(3) { display: none; }
  .ln::before { display: none; }
  .ln--answer { margin-left: 0; }
  .ln--serif { font-size: 0.84em; }
  .pin { width: 22px; height: 22px; font-size: 0.6875rem; }
  .hero__intro, .notes { grid-column: 1 / -1; }
  .proof { grid-template-columns: 1fr; }
  .proof li { grid-template-columns: 5.5rem 1fr; align-items: end; padding-block: 16px; border-bottom: 1px solid var(--rule); }
  .proof__num { font-size: 3rem; }
  .sec-head :is(h1, h2) { grid-column: 1 / -1; }
  .sec-head__aside { grid-column: 1 / -1; text-align: left; }
  .legend { grid-template-columns: 1fr; }
  .panel--type { grid-template-columns: 1fr; }
  .panel:not(.panel--type) { grid-column: 1 / -1; }
  .chips--ext { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa p { padding-right: 0; }
  .cols { grid-template-columns: repeat(4, 1fr); column-gap: 16px; }
  .cols span:nth-child(n+5) { display: none; }
}
@media (max-width: 420px) {
  .brand__lab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

.foot__links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.foot .link:hover { color: var(--accent); }

/* =====================================================================
   Etapa 2 — sitio de varias páginas
   ===================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* La cabecera crea su propio plano de apilamiento (animación de entrada y view-transition-name):
   necesita un z-index propio para que el menú desplegado quede por encima del contenido. */
.masthead { position: relative; z-index: 130; }
.masthead__nav a[aria-current="page"], .masthead__nav a[aria-current="page"]::before { color: var(--accent); }

/* Menú móvil: el "+" gira a "×" */
.menu-btn { display: none; align-items: center; gap: 10px; padding: 10px 0 10px 10px; }
.menu-btn__plus { position: relative; width: 16px; height: 16px; transition: transform 300ms var(--ease); }
.menu-btn__plus::before, .menu-btn__plus::after { content: ""; position: absolute; background: var(--mark); }
.menu-btn__plus::before { left: 6.5px; top: 0; width: 3px; height: 16px; }
.menu-btn__plus::after { top: 6.5px; left: 0; height: 3px; width: 16px; }
.menu-btn[aria-expanded="true"] .menu-btn__plus { transform: rotate(45deg); }

/* Ruta */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--rule); }
.crumbs a { transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink-2); }

/* Portada de página interior */
.page-hero { display: grid; gap: clamp(28px, 4vw, 48px); padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(56px, 8vw, 104px); }
.page-hero--flush { padding-inline: 0; padding-bottom: clamp(32px, 4vw, 48px); }
.page-title {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(3rem, 1rem + 7.5vw, 8.5rem); line-height: 0.88; letter-spacing: -0.025em;
  text-transform: uppercase; text-wrap: balance; max-width: 14ch;
}
.page-title .serif { display: block; font-size: 0.86em; line-height: 1; }
.page-hero__body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px;
  border-top: 1px solid var(--ink); padding-top: 24px;
}
.page-hero__body .lede { grid-column: 1 / span 7; max-width: 46ch; }
.page-hero__body .actions { grid-column: 1 / span 7; }
.page-hero__aside { grid-column: 10 / span 3; color: var(--ink-3); text-align: right; }

/* Método */
.method, .models, .catalog, .faq { padding-block: clamp(64px, 9vw, 128px); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); counter-reset: s; }
.step { display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--ink); padding-top: 16px; }
.step p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; }
.step .step__n { color: var(--accent); font-size: var(--fs-mono); }
.step__verb {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em;
}
.step .step__out { color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 4px; }
.steps--compact .step__verb { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }

/* Dos modelos */
.models__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.model {
  display: grid; gap: 20px; align-content: start;
  border: 1px solid var(--ink); padding: clamp(24px, 3vw, 40px);
  transition: border-color var(--dur) var(--ease);
}
.model:hover { border-color: var(--mark); }
.model > p:not(.model__k) { color: var(--ink-2); max-width: 46ch; }
.model__k { color: var(--accent); }
.model__name {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(2.25rem, 1.2rem + 3vw, 4rem); line-height: 0.9; text-transform: uppercase;
}
.model__name .serif { font-size: 0.95em; }
.model .link { justify-self: start; }

/* Testimonio destacado */
.quote { display: grid; gap: 28px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); line-height: 1.12; max-width: 30ch; text-wrap: pretty; }
.quote figcaption { color: var(--ink-3); }
.quote .link { justify-self: start; }

/* CTA */
.cta { display: grid; gap: 24px; justify-items: start; padding-block: clamp(64px, 9vw, 128px); border-top: 1px solid var(--rule); }
.cta .label { color: var(--ink-2); }
.cta__title {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(2.75rem, 1rem + 6vw, 7rem); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.02em;
}
.cta__title .serif { font-size: 0.92em; }
.cta__text { max-width: 46ch; color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.45; }

/* Servicios */
.band__lede { font-size: var(--fs-lede); line-height: 1.45; max-width: 52ch; color: var(--ink-2); margin-bottom: clamp(32px, 5vw, 56px); }
.journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--data); }
.journey li { display: grid; gap: 10px; align-content: start; padding: 20px 20px 0 0; position: relative; }
.journey li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--data); }
.journey__n { color: var(--data); }
.journey h3 { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); line-height: 1; }
.journey p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }
.journey .journey__kpi { color: var(--ink-3); }

.services { border-top: 1px solid var(--ink); }
.svc {
  display: grid; grid-template-columns: 7rem minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--col-gap); row-gap: 12px;
  padding: 24px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px;
  transition: background-color var(--dur) var(--ease);
}
.svc:target { background: var(--accent-tint); }
.svc__code { color: var(--accent); padding-top: 6px; }
.svc__name { font-weight: 500; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.2; text-wrap: balance; }
.svc__desc { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; max-width: 54ch; }
.svc__inc, .svc .link { grid-column: 3; }
.svc__inc { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-3); }
.svc__inc li::before { content: "+ "; color: var(--mark); }
.svc .link { justify-self: start; }

/* Especificaciones (chatbot) */
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--col-gap); padding-bottom: clamp(64px, 9vw, 128px); }
.specs li { display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--ink); padding: 18px 0 32px; }
.specs h3 { font-weight: 500; font-size: 1.25rem; line-height: 1.25; }
.specs h3::before { content: "+ "; color: var(--mark); }
.specs p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }

/* Casos */
.cases { border-top: 1px solid var(--ink); }
.case__link {
  display: grid; grid-template-columns: 8rem minmax(0, 3fr) minmax(0, 4fr) minmax(0, 2fr) 2rem; gap: var(--col-gap); align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--rule);
}
.case__exp, .case__meta { color: var(--ink-3); }
.case__client { font-weight: 500; font-size: 1.125rem; }
.case__name { font-size: clamp(1.75rem, 1rem + 2vw, 3rem); line-height: 1; transition: color var(--dur) var(--ease); }
.case__go { color: var(--mark); font-size: 1.5rem; transition: transform var(--dur) var(--ease); }
.case__link:hover .case__name { color: var(--accent); }
.case__link:hover .case__go { transform: translateX(6px); }
.cases + .todo { margin-top: 24px; margin-bottom: clamp(64px, 9vw, 128px); }

.todo {
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.02em; line-height: 1.6;
  background: var(--highlight); color: var(--hl-ink); padding: 10px 14px; max-width: 70ch;
}
.todo::before { content: "Nota de edición · "; font-weight: 500; }

.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.voice { margin: 0; display: grid; gap: 20px; align-content: space-between; border-top: 1px solid var(--ink); padding-top: 20px; }
.voice blockquote { margin: 0; }
.voice blockquote p { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.625rem); line-height: 1.25; }
.voice figcaption { display: grid; gap: 4px; }
.voice__name { font-weight: 500; }
.voice figcaption .mono { color: var(--ink-3); }

.case-page { padding-top: clamp(28px, 4vw, 48px); }
.ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding-block: 18px; }
.ficha > div { display: grid; gap: 6px; }
.ficha dt { color: var(--ink-3); }
.ficha dd { font-weight: 500; }
.ficha--stack { grid-template-columns: 1fr; border-bottom: 0; }
.case-body { display: grid; gap: clamp(56px, 8vw, 104px); padding-block: clamp(48px, 7vw, 96px); }
.case-body h2 { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(2rem, 1rem + 2.4vw, 3.25rem); line-height: 0.95; text-transform: uppercase; }
.case-body .step__n { color: var(--accent); }

/* Blog */
.posts { border-top: 1px solid var(--ink); margin-bottom: clamp(64px, 9vw, 128px); }
.post-card a { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 14rem; column-gap: var(--col-gap); row-gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.post-card time { color: var(--ink-3); padding-top: 8px; }
.post-card__title { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.625rem, 1rem + 1.8vw, 2.75rem); line-height: 1.08; text-wrap: balance; transition: color var(--dur) var(--ease); }
.post-card__meta { grid-column: 2; color: var(--ink-3); }
.post-card a:hover .post-card__title { color: var(--accent); }

.article { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: clamp(28px, 4vw, 48px); }
.article__head { grid-column: 1 / -1; display: grid; gap: 20px; padding-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--ink); margin-bottom: clamp(32px, 5vw, 56px); }
.article__cats { color: var(--accent); }
.article__title {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(2.5rem, 1rem + 5vw, 6rem); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.02em; max-width: 18ch;
}
.article__title .serif { display: block; font-size: 0.62em; line-height: 1.05; margin-top: 0.25em; max-width: 26ch; }
.article__byline { color: var(--ink-3); }
.article__byline a { color: var(--ink); border-bottom: 1px solid currentColor; }
.prose { grid-column: 3 / span 7; font-size: 1.125rem; line-height: 1.72; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.1; margin-top: 1.8em; }
.prose a { color: var(--accent); border-bottom: 1px solid currentColor; }
.prose strong { font-weight: 500; }
.author { grid-column: 3 / span 7; display: grid; gap: 10px; margin-block: clamp(48px, 7vw, 88px); padding-top: 20px; border-top: 1px solid var(--ink); color: var(--ink-2); }
.author .label { color: var(--ink-2); }
.author__name { font-size: 2rem; line-height: 1; color: var(--ink); }
.author__note { color: var(--ink-3); }

/* Contacto */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--col-gap); padding-bottom: clamp(64px, 9vw, 128px); }
.form { grid-column: 1 / span 7; display: grid; gap: 24px; align-content: start; }
.form .label { color: var(--ink-2); }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-weight: 500; font-size: 0.9375rem; padding: 0; }
.field input[type="text"], .field input[type="email"], .field textarea {
  font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { resize: vertical; border: 1px solid var(--ink); padding: 12px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--mark); box-shadow: 0 2px 0 0 var(--mark); }
.field textarea:focus { box-shadow: 0 0 0 1px var(--mark); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input[aria-invalid="true"] { border-color: #cc2200; }
.field__err { color: #cc2200; font-size: var(--fs-small); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 4px; }
.checks label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: var(--fs-small); line-height: 1.4; cursor: pointer; }
.checks input { accent-color: var(--mark); width: 16px; height: 16px; margin: 1px 0 0; flex: none; }
.form .btn { justify-self: start; border: 0; cursor: pointer; }
.form__note { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.contact__direct { grid-column: 9 / span 4; display: grid; gap: 16px; align-content: start; }
.contact__direct .label { color: var(--ink-2); }
.contact__mail { font-size: clamp(2rem, 1rem + 2.4vw, 3rem); line-height: 1; overflow-wrap: anywhere; }
.copy { justify-self: start; }
.contact__direct .ficha { margin-top: 16px; }

/* Pie */
.foot__cols { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; padding-block: 8px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot__nav a { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; transition: color var(--dur) var(--ease); }
.foot__nav a:hover { color: var(--accent); }

@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .specs, .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose, .author { grid-column: 1 / span 10; }
  .page-hero__body .lede, .page-hero__body .actions { grid-column: 1 / span 8; }
  .page-hero__aside { grid-column: 9 / span 4; }
  .case__link { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.4fr) 2rem; }
  .case__meta { display: none; }
}
@media (max-width: 720px) {
  .masthead { grid-template-columns: auto 1fr auto; }
  .masthead__cta { display: none; }
  .menu-btn { display: inline-flex; justify-self: end; }
  .masthead.is-open .masthead__nav {
    display: block; position: absolute; z-index: 120; top: 100%; grid-column: 1 / -1; grid-row: 1; justify-self: stretch;
    left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
    right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px)));
    background: var(--paper); border-bottom: 1px solid var(--ink);
    padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) 24px max(var(--gutter), env(safe-area-inset-left, 0px));
  }
  .masthead.is-open .masthead__nav ul { flex-direction: column; gap: 0; }
  .masthead.is-open .masthead__nav a {
    display: block; padding: 14px 0; border-bottom: 1px solid var(--rule);
    font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
    font-size: 2.25rem; line-height: 1; letter-spacing: -0.01em;
  }
  .masthead.is-open .masthead__nav a::before { content: none; }

  .page-hero__body .lede, .page-hero__body .actions, .page-hero__aside { grid-column: 1 / -1; text-align: left; }
  .steps, .models__grid, .specs, .voices, .case-body, .checks { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--data); padding-left: 20px; row-gap: 28px; }
  .journey li { padding: 0; }
  .journey li::before { top: 4px; left: -25px; }
  .svc { grid-template-columns: 1fr; }
  .svc__inc, .svc .link { grid-column: 1; }
  .case__link { grid-template-columns: 1fr 2rem; row-gap: 6px; }
  .case__link > * { grid-column: 1; }
  .case__go { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .post-card a { grid-template-columns: 1fr; }
  .post-card__meta { grid-column: 1; }
  .prose, .author { grid-column: 1 / -1; }
  .prose { font-size: 1.0625rem; }
  .form, .contact__direct { grid-column: 1 / -1; }
}

/* =====================================================================
   Etapa 3 — movimiento
   Todo lo que se mueve depende de .motion, que el <head> añade solo si el
   usuario no pidió reducir movimiento. Sin JavaScript, el sitio se ve completo.
   ===================================================================== */
@keyframes hv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hv-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hv-wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hv-line {
  from { clip-path: inset(0 -3rem 100% -0.2em); transform: translateY(0.4em); }
  to { clip-path: inset(-50% -50% -50% -50%); transform: none; }
}
@keyframes hv-paint { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes hv-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hv-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes hv-plus-in { from { opacity: 0; transform: rotate(-90deg) scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes hv-failsafe { to { opacity: 1; transform: none; } }
@keyframes hv-underline {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  45% { background-size: 0% 1px; background-position: 100% 100%; }
  46% { background-size: 0% 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

/* --- 1. Momento orquestado: entrada de la portada --- */
.motion .masthead { animation: hv-fade 500ms var(--ease) both; }
.motion .hero .cols { animation: hv-wipe-down 1500ms var(--ease) both; }
.motion .hero__meta { animation: hv-fade 600ms var(--ease) 100ms both; }
.motion .hero__title .kicker { animation: hv-fade 700ms var(--ease) 150ms both; }
.motion .hero__title .ln { animation: hv-line 950ms var(--ease) both; }
.motion .hero__title .ln:nth-child(2) { animation-delay: 220ms; }
.motion .hero__title .ln:nth-child(3) { animation-delay: 330ms; }
/* pausa: la evidencia responde un instante después */
.motion .hero__title .ln:nth-child(4) { animation-delay: 700ms; }
.motion .hero__title .ln:nth-child(5) { animation-delay: 810ms; }
.motion .hero__intro { animation: hv-fade-up 700ms var(--ease) 1050ms both; }
.motion .hero__intro mark { animation: hv-paint 700ms var(--ease) 1700ms both; }
.motion .notes .note { animation: hv-fade-up 600ms var(--ease) both; }
.motion .notes .note:nth-child(1) { animation-delay: 1150ms; }
.motion .notes .note:nth-child(2) { animation-delay: 1230ms; }
.motion .notes .note:nth-child(3) { animation-delay: 1310ms; }
.motion .notes .note:nth-child(4) { animation-delay: 1390ms; }

/* --- 2. Apariciones al hacer scroll (js/modules/reveal.js) --- */
.reveal-on [data-reveal]:not(.is-in) { opacity: 0; }
.reveal-on [data-reveal].is-in { animation: hv-fade-up 620ms var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
/* red de seguridad: si el módulo no carga, todo aparece a los 3 s */
.reveal-on:not(.reveal-ready) [data-reveal] { animation: hv-failsafe 1ms 3s both; }

/* Fig. 1: la cota se traza, las letras se colocan y el "+" gira a su sitio */
.motion .fig__plate .dim::before { transform: scaleX(0); }
.motion .fig__plate.is-in .dim::before { animation: hv-draw-x 900ms var(--ease) 200ms both; }
.motion .fig__plate:not(.is-in) .mark g,
.motion .fig__plate:not(.is-in) .pin { opacity: 0; }
.motion .fig__plate.is-in .mark [data-part="h"] { animation: hv-fade-up 700ms var(--ease) 350ms both; }
.motion .fig__plate.is-in .mark [data-part="p"] { animation: hv-plus-in 800ms var(--ease) 650ms backwards; }
.motion .fig__plate.is-in .mark [data-part="v"] { animation: hv-fade-up 700ms var(--ease) 500ms both; }
.motion .fig__plate.is-in .pin { animation: hv-pop 420ms var(--ease) both; }
.motion .fig__plate.is-in .pin[data-k="h"] { animation-delay: 1100ms; }
.motion .fig__plate.is-in .pin[data-k="p"] { animation-delay: 1200ms; }
.motion .fig__plate.is-in .pin[data-k="v"] { animation-delay: 1300ms; }

/* Customer journey: la línea de datos se traza de izquierda a derecha */
.motion .journey { position: relative; border-top-color: transparent; }
.motion .journey::after {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--data); transform-origin: left; transform: scaleX(0);
}
.motion .journey.is-in::after { animation: hv-draw-x 1400ms var(--ease) 150ms both; }

/* --- 3. Microinteracciones --- */
.link:hover { animation: hv-underline 520ms var(--ease); }
.brand:hover .mark__plus { transform: rotate(90deg); }
.svc__name { transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.svc:hover .svc__name { transform: translateX(6px); }
.svc:hover .svc__code { color: var(--mark); }
.step__verb { transition: color var(--dur) var(--ease); }
.step:hover .step__verb { color: var(--accent); }
.voice blockquote p, .leg__name { transition: color var(--dur) var(--ease); }
.leg:hover .leg__name { color: var(--accent); }

/* FAQ: el acordeón abre con altura animada donde el navegador lo permite */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .qa::details-content {
    height: 0; overflow: clip;
    transition: height 380ms var(--ease), content-visibility 380ms var(--ease) allow-discrete;
  }
  .qa[open]::details-content { height: auto; }
}
.motion .qa[open] p { animation: hv-fade-up 420ms var(--ease) 80ms both; }

/* Menú móvil: las opciones entran escalonadas */
.motion .masthead.is-open .masthead__nav li { animation: hv-fade-up 420ms var(--ease) both; }
.motion .masthead.is-open .masthead__nav li:nth-child(2) { animation-delay: 50ms; }
.motion .masthead.is-open .masthead__nav li:nth-child(3) { animation-delay: 100ms; }
.motion .masthead.is-open .masthead__nav li:nth-child(4) { animation-delay: 150ms; }

/* --- 4. Entre páginas y lectura --- */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
::view-transition-old(root) { animation: hv-vt-out 200ms var(--ease) both; }
::view-transition-new(root) { animation: hv-vt-in 420ms var(--ease) both; }
@keyframes hv-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes hv-vt-in { from { opacity: 0; transform: translateY(12px); } }

.read-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .motion .read-progress {
    display: block; position: fixed; z-index: 140; left: 0; right: 0;
    top: env(safe-area-inset-top, 0px); height: 3px;
    background: var(--mark); transform-origin: left; transform: scaleX(0);
    animation: hv-draw-x linear both; animation-timeline: scroll(root);
  }
}

@media (max-width: 720px) {
  .motion .journey { border-top: 0; }
  .motion .journey::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* =====================================================================
   Fig. 1 — El multiplicador: el "+" gira 45° y se vuelve "×".
   Recurso narrativo: el monograma oficial no cambia.
   ===================================================================== */
.fig .mark .mark__plus { transition: transform 720ms cubic-bezier(0.7, 0, 0.2, 1), fill 300ms var(--ease); }
.fig.is-mult .mark .mark__plus { transform: rotate(45deg); }
.fig.is-mult .mark g:not([data-part="p"]) { fill: var(--ghost); }
.fig.is-mult .pin[data-k="p"] { background: var(--mark); border-color: var(--mark); color: #fff; }

.fig__hit {
  position: absolute; z-index: 1; left: 37.6%; top: 32.3%; width: 16.1%; height: 29.1%;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.fig__mark .pin { z-index: 2; pointer-events: none; }

.fig__formula {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  margin-top: 24px; color: var(--data); text-transform: none; letter-spacing: 0.04em;
}
.fig__angle { color: var(--ink-3); min-width: 3.5ch; font-variant-numeric: tabular-nums; }
.fig__eq { color: var(--ink); }
.fig__formula [data-state]:not([hidden]) { animation: hv-fade 360ms var(--ease) both; }
.fig__formula + .fig__caption { margin-top: 8px; }
.leg [data-state]:not([hidden]) { animation: hv-fade 360ms var(--ease) both; }

/* =====================================================================
   Material de hebvivi.com: fotos, logos, caso y artículos
   ===================================================================== */

/* Placas fotográficas: la foto es una muestra del laboratorio */
.plate { margin: 0; position: relative; display: grid; gap: 10px; }
.plate img { width: 100%; height: auto; display: block; background: var(--grid); filter: grayscale(1) contrast(1.04); transition: filter 600ms var(--ease); }
.plate:hover img { filter: none; }
.plate::before, .plate::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--mark); border-style: solid;
}
.plate::before { top: -6px; left: -6px; border-width: 1px 0 0 1px; }
.plate::after { top: -6px; right: -6px; border-width: 1px 1px 0 0; }
.plate figcaption { color: var(--ink-3); }

/* Nosotros */
.team-intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--col-gap);
  align-items: end; padding-bottom: clamp(64px, 9vw, 128px);
}
.team-intro .plate { grid-column: 1 / span 5; }
.team-intro__text { grid-column: 7 / span 6; display: grid; gap: 24px; justify-items: start; }
.team-intro__text .label { color: var(--ink-2); }
.team-intro__title {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(2.25rem, 1rem + 4vw, 4.75rem); line-height: 0.92; text-transform: uppercase; letter-spacing: -0.02em; text-wrap: balance;
}
.team-intro__title .serif { display: block; font-size: 0.9em; line-height: 1; }

.profiles { display: grid; gap: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 128px); }
.profile {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--col-gap);
  border-top: 1px solid var(--ink); padding-top: 24px; scroll-margin-top: 24px;
}
.profile__photo { grid-column: 1 / span 4; }
.profile__body { grid-column: 6 / span 7; display: grid; gap: 16px; align-content: start; }
.profile:nth-child(even) .profile__photo { grid-column: 9 / span 4; grid-row: 1; }
.profile:nth-child(even) .profile__body { grid-column: 1 / span 7; grid-row: 1; }
.profile__area { color: var(--accent); }
.profile__name { font-size: clamp(3rem, 1.5rem + 4vw, 5.5rem); line-height: 0.95; }
.profile__headline { font-weight: 500; font-size: 1.125rem; }
.profile__body > p:not([class]) { color: var(--ink-2); max-width: 60ch; }
.profile__skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; color: var(--ink-2); padding-block: 8px; border-block: 1px solid var(--rule); }
.profile__skills li::before { content: "+ "; color: var(--mark); }
.profile__motto { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.15; max-width: 26ch; }

/* Clientes y aliados: bandeja de muestras */
.clients { padding-block: clamp(64px, 9vw, 128px); }
.logos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.logos__cell {
  display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 12% 16%;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.logos__cell img {
  max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.85; transition: filter 400ms var(--ease), opacity 400ms var(--ease);
}
.logos__cell:hover img { filter: none; opacity: 1; }
.logos__note { margin-top: 16px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logos__cell { background: #f3f3f6; }
}
:root[data-theme="dark"] .logos__cell { background: #f3f3f6; }

/* Caso */
.case-cover { margin: clamp(32px, 5vw, 56px) 0 0; }
.case-cover img { width: 100%; height: auto; display: block; }
.case-intro { margin-top: clamp(32px, 5vw, 56px); max-width: 64ch; font-size: var(--fs-lede); line-height: 1.5; }
.case-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--col-gap); border-top: 1px solid var(--ink); padding-top: 20px; }
.case-stage__head { grid-column: 1 / span 4; display: grid; gap: 10px; align-content: start; }
.case-stage__body { grid-column: 5 / span 8; }
.case-stage__head .step__n { color: var(--accent); }

/* Texto largo (artículos y casos) */
.prose h3 { font-weight: 500; font-size: 1.25rem; line-height: 1.3; margin-top: 2em; }
.prose h4 { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1.25; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 0; display: grid; gap: 0.5em; }
.prose ul > li { padding-left: 1.4em; position: relative; }
.prose ul > li::before { content: "+"; position: absolute; left: 0; color: var(--mark); font-weight: 500; }
.prose ol:not(.timeline) { counter-reset: n; }
.prose ol:not(.timeline) > li { counter-increment: n; padding-left: 2em; position: relative; }
.prose ol:not(.timeline) > li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; font: 500 0.75rem/2.2 var(--f-mono); color: var(--accent); }
.prose blockquote { margin: 1.6em 0; padding: 0 0 0 0; border: 0; }
.prose blockquote p { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.2; }
.prose img { width: 100%; height: auto; display: block; margin-block: 1.6em; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }

.timeline { display: grid; gap: 0; border-left: 1px solid var(--mark); margin-left: 4px; }
.timeline li { padding: 10px 0 10px 24px; position: relative; color: var(--ink-2); }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; background: var(--mark); }
.timeline__tag { display: block; font-weight: 500; color: var(--ink); font-size: 1.125rem; }

.shot { margin: 0; display: grid; gap: 8px; }
.shot img { width: 100%; height: auto; display: block; margin: 0; background: var(--grid); }
.shot figcaption { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.prose .shot { margin-block: 1.6em; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--col-gap); margin-block: 1.6em; }
.prose .shots .shot { margin: 0; }

/* Artículo */
.article__cover { grid-column: 1 / -1; margin: 0 0 clamp(32px, 5vw, 56px); }
.article__cover img { width: 100%; height: auto; display: block; }
.post-card__img { grid-column: 3; grid-row: 1 / span 2; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); transition: filter 400ms var(--ease); }
.post-card a:hover .post-card__img { filter: none; }

@media (max-width: 1024px) {
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-intro .plate { grid-column: 1 / span 6; }
  .team-intro__text { grid-column: 7 / span 6; }
  .case-stage__head, .case-stage__body { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-intro .plate, .team-intro__text { grid-column: 1 / -1; }
  .profile__photo, .profile__body,
  .profile:nth-child(even) .profile__photo, .profile:nth-child(even) .profile__body { grid-column: 1 / -1; grid-row: auto; }
  .profile__photo { max-width: 320px; }
  .profile__skills { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .post-card a { grid-template-columns: 1fr; }
  .post-card__img { grid-column: 1; grid-row: auto; order: -1; }
}

/* Tres modelos de trabajo: tres columnas en escritorio, apilados en pantallas medianas y celular */
.models__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.model__name { font-size: clamp(2rem, 1rem + 2vw, 3.25rem); overflow-wrap: anywhere; }
.model { display: flex; flex-direction: column; }
.model .tags { margin-top: auto; }
.model__note + .tags { margin-top: auto; }
.model__note {
  justify-self: start; color: var(--accent); text-transform: none; letter-spacing: 0.02em;
  border-top: 1px solid var(--rule); padding-top: 12px; width: 100%;
}
.model__note::before { content: "+ "; color: var(--mark); }
@media (max-width: 1024px) {
  .models__grid { grid-template-columns: 1fr; }
  .model > p:not(.model__k) { max-width: 60ch; }
}

.model .link { align-self: flex-start; }

/* =====================================================================
   Hero — constelación (js/modules/constellation.js)
   Capa decorativa detrás del texto: encima de la retícula, debajo de todo lo demás.
   La máscara la concentra junto al titular y la desvanece antes de las notas y la introducción.
   ===================================================================== */
.constellation {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.75;
  --cx: 73%; --cy: 20%; --r: 420px;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--cx) var(--cy), #000 45%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--cx) var(--cy), #000 45%, transparent 100%);
}
.motion .constellation { animation: hv-fade 1800ms var(--ease) 500ms both; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .constellation { opacity: 0.9; } }
:root[data-theme="dark"] .constellation { opacity: 0.9; }
@media (max-width: 720px) { .constellation { opacity: 0.5; } }

/* Formulario: campo trampa para bots (invisible para personas y lectores de pantalla) y estado de envío */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-size: var(--fs-small); line-height: 1.5; padding: 12px 14px; border-left: 3px solid var(--mark); background: var(--accent-tint); color: var(--ink); }
.form__status[data-kind="error"] { border-left-color: #cc2200; }
.form__status a { color: var(--accent); text-decoration: underline; }
.form .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* =====================================================================
   Páginas de servicio (src/components/svc-*, fig-*)
   Bloques reutilizables; cada servicio elige cuáles usa y en qué orden.
   ===================================================================== */

/* Hero de servicio: hereda el titular de la portada, a una escala menor */
.hero--svc { padding-bottom: clamp(56px, 8vw, 104px); }
.hero--svc .crumbs { margin-bottom: 20px; }
.hero__title--svc { font-size: clamp(3rem, 0.8rem + 8vw, 9rem); }
.hero__title--svc .ln--serif { font-size: 0.88em; }
.hero--svc__body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px;
  margin-top: clamp(36px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--ink);
}
.hero--svc__body .lede { grid-column: 1 / span 7; max-width: 46ch; }
.hero--svc__body .actions { grid-column: 1 / -1; }

/* Fig. De la lista a la respuesta */
.fig-answer .sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.answer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(40px, 1fr) minmax(0, 6fr); align-items: stretch; }
.answer__col { margin: 0; display: grid; gap: 16px; align-content: start; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--rule); background: var(--paper); }
.answer__tag { color: var(--accent); }
.answer__query { color: var(--ink); text-transform: none; letter-spacing: 0.02em; padding: 10px 0 12px; border-bottom: 1px solid var(--ink); }
.answer__query span { color: var(--data); margin-right: 6px; }
.answer__results { display: grid; gap: 0; }
.result {
  position: relative; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 10px; row-gap: 2px;
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule);
  transition: opacity 500ms var(--ease), background-color 500ms var(--ease), padding 500ms var(--ease);
}
.result__n { grid-row: 1 / span 2; color: var(--ink-3); padding-top: 2px; }
.result__title { font-size: 0.9375rem; line-height: 1.35; }
.result__url { grid-column: 2; color: var(--data); text-transform: none; letter-spacing: 0.02em; }
.answer.is-playing .result:not(.is-cited), .answer.is-done .result:not(.is-cited) { opacity: 0.32; }
.result.is-cited { background: color-mix(in srgb, var(--mark) 16%, transparent); padding-left: 10px; }
.result.is-cited::after {
  content: "[" attr(data-source) "]"; position: absolute; right: 10px; top: 10px;
  font: 500 0.75rem/1 var(--f-mono); color: var(--accent);
}
.answer__bridge { position: relative; }
.answer__bridge span { position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: var(--data); transform-origin: left; }
.answer__bridge span::after { content: ""; position: absolute; right: -1px; top: -4px; border: 4px solid transparent; border-left: 6px solid var(--data); border-right: 0; }
.answer.is-playing .answer__bridge span { animation: hv-draw-x 600ms var(--ease) both; }
.answer__box { border-left: 2px solid var(--mark); padding: 4px 0 4px 18px; font-size: 1.125rem; line-height: 1.6; }
.answer__box strong { font-weight: 500; }
.cite { font: 500 0.7rem/1 var(--f-mono); color: var(--data); margin-left: 2px; transition: opacity 300ms var(--ease), color 300ms var(--ease); }
.answer.is-playing .cite:not(.is-on) { opacity: 0; }
.cite.is-on { color: var(--accent); }
.answer__note { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; display: flex; gap: 16px; align-items: center; }
.answer__replay { color: var(--accent); border-bottom: 1px solid currentColor; letter-spacing: 0.04em; }
.answer__statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 16px; margin-top: clamp(40px, 6vw, 72px); }
.answer__big { grid-column: 1 / span 8; font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); line-height: 1.1; text-wrap: balance; }
.answer__small { grid-column: 9 / span 4; align-self: end; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }

/* Síntomas */
.symptoms { padding-block: clamp(64px, 9vw, 128px); }
.symptoms__list { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--ink); }
.symptom {
  display: grid; grid-template-columns: 22px 2.4rem minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--rule); cursor: pointer; color: var(--ink-2);
  transition: color var(--dur) var(--ease);
}
.symptom input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.symptom__box { width: 22px; height: 22px; border: 1px solid var(--ink); position: relative; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.symptom__box::before, .symptom__box::after { content: ""; position: absolute; background: #fff; opacity: 0; transition: opacity var(--dur) var(--ease); }
.symptom__box::before { left: 9.5px; top: 4px; width: 2px; height: 12px; }
.symptom__box::after { top: 9.5px; left: 4px; height: 2px; width: 12px; }
.symptom__n { color: var(--ink-3); padding-top: 3px; }
.symptom__text { font-size: 1.0625rem; line-height: 1.45; }
.symptom:hover, .symptom:has(input:checked) { color: var(--ink); }
.symptom:has(input:checked) .symptom__box { background: var(--mark); border-color: var(--mark); }
.symptom:has(input:checked) .symptom__box::before, .symptom:has(input:checked) .symptom__box::after { opacity: 1; }
.symptom:has(input:checked) .symptom__n { color: var(--accent); }
.symptom:has(input:focus-visible) .symptom__box { outline: 2px solid var(--accent); outline-offset: 3px; }
.symptoms__readout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; margin-top: 32px; }
.symptoms__count { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.15; }
.symptoms__meter { grid-column: 1 / -1; grid-row: 2; height: 3px; background: var(--grid); }
.symptoms__meter span { display: block; height: 100%; background: var(--mark); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }

/* Capas */
.layers { padding-block: clamp(64px, 9vw, 128px); }
.layers__list { display: grid; }
.layer {
  display: grid; grid-template-columns: 9rem minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); column-gap: var(--col-gap); row-gap: 10px;
  align-items: start; padding: 24px 0; border-top: 1px solid var(--ink); position: relative;
}
.layer:last-child { border-bottom: 1px solid var(--ink); }
.layer::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; background: var(--mark); }
.layer:nth-child(1)::before { width: 25%; }
.layer:nth-child(2)::before { width: 50%; }
.layer:nth-child(3)::before { width: 75%; }
.layer:nth-child(4)::before { width: 100%; }
.layer__head { display: grid; gap: 4px; }
.layer__n { color: var(--ink-3); }
.layer__level { color: var(--accent); }
.layer__name {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); line-height: 0.95; text-transform: uppercase;
}
.layer__desc { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }
.layer__items { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.layer__items li::before { content: "+ "; color: var(--mark); }

/* Fig. Entidad */
.entity-sec { padding-bottom: clamp(64px, 9vw, 128px); }
.entity { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--col-gap); align-items: center; }
.entity__text { grid-column: 1 / span 5; display: grid; gap: 24px; }
.entity__toggle { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); justify-self: start; }
.entity__toggle button { padding: 12px 16px; font: 500 0.875rem/1.2 var(--f-body); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.entity__toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.entity__toggle button:focus-visible { outline-offset: -4px; }
.entity__readout { color: var(--ink-2); text-transform: none; letter-spacing: 0.02em; min-height: 3em; }
.entity__graph {
  grid-column: 6 / span 7; margin: 0; position: relative; aspect-ratio: 600 / 420;
  border: 1px solid var(--rule);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.entity__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.entity__lines line { stroke: var(--mark); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke 400ms var(--ease), stroke-dasharray 400ms var(--ease); }
.entity[data-state="dispersa"] .entity__lines line.is-broken { stroke: var(--ink-3); stroke-dasharray: 3 7; }
.entity__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: var(--ink); color: var(--paper); font-weight: 500; white-space: nowrap;
}
.entity__plus { position: relative; width: 12px; height: 12px; }
.entity__plus::before, .entity__plus::after { content: ""; position: absolute; background: var(--mark); }
.entity__plus::before { left: 4.5px; top: 0; width: 3px; height: 12px; }
.entity__plus::after { top: 4.5px; left: 0; height: 3px; width: 12px; }
.entity__nodes { position: absolute; inset: 0; }
.entity__node {
  position: absolute; transform: translate(-50%, -50%); display: grid; gap: 2px; min-width: 9.5rem;
  padding: 8px 10px; background: var(--paper); border: 1px solid var(--mark);
  transition: border-color 400ms var(--ease);
}
.entity__name { color: var(--ink-3); }
.entity__val { font-size: 0.875rem; line-height: 1.3; }
.entity[data-state="dispersa"] .entity__node.is-broken { border-color: var(--rule); border-style: dashed; }
.entity[data-state="dispersa"] .entity__node.is-broken .entity__val { color: #cc2200; }
.entity[data-state="dispersa"] .entity__node.is-broken .entity__val::before { content: "≠ "; }
.entity__note { position: absolute; right: 10px; bottom: 8px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entity[data-state="dispersa"] .entity__node.is-broken .entity__val { color: #ff8a6b; }
}
:root[data-theme="dark"] .entity[data-state="dispersa"] .entity__node.is-broken .entity__val { color: #ff8a6b; }

/* Método de servicio: herramientas */
.tools { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; gap: 14px; }
.tools__label { color: var(--ink-3); }

/* Expectativas */
.ledger { padding-block: clamp(64px, 9vw, 128px); }
.ledger__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.ledger__col { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 16px; align-content: start; }
.ledger__title { color: var(--accent); font-weight: 400; }
.ledger__col ul { display: grid; gap: 0; }
.ledger__col li { padding: 14px 0 14px 1.6em; border-bottom: 1px solid var(--rule); position: relative; line-height: 1.5; }
.ledger__col li::before { content: "+"; position: absolute; left: 0; color: var(--mark); font-weight: 500; }

/* Autoridad (banda índigo) */
.authority__statement { font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); line-height: 1.12; max-width: 30ch; text-wrap: pretty; margin-bottom: clamp(40px, 6vw, 72px); }
.authority__creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin: 0; }
.cred { border-top: 1px solid var(--ink); padding-top: 16px; display: grid; gap: 10px; align-content: start; }
.cred dt { color: var(--accent); }
.cred dd { margin: 0; display: grid; gap: 10px; }
.cred__v {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); line-height: 0.95; text-transform: uppercase;
}
.cred__t { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }
.authority__evidence { margin-top: clamp(40px, 6vw, 64px); padding-top: 18px; border-top: 1px solid var(--rule); display: grid; gap: 10px; justify-items: start; max-width: 64ch; }
.authority__evidence .mono { color: var(--accent); }

.related { padding-block: clamp(64px, 9vw, 128px) 0; }
.related .posts { margin-bottom: 0; }
.cta--svc .actions { gap: 16px 32px; }

@media (max-width: 1024px) {
  .hero--svc__body .lede { grid-column: 1 / span 9; }
  .answer { grid-template-columns: 1fr; }
  .answer__bridge { height: 48px; }
  .answer__bridge span { left: 50%; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform-origin: top; }
  .answer__bridge span::after { right: -4px; top: auto; bottom: -1px; border: 4px solid transparent; border-top: 6px solid var(--data); border-bottom: 0; }
  .answer__big, .answer__small { grid-column: 1 / -1; }
  .layer { grid-template-columns: 7rem minmax(0, 1fr); }
  .layer__desc, .layer__items { grid-column: 2; }
  .entity__text, .entity__graph { grid-column: 1 / -1; }
  .authority__creds { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero--svc__body .lede { grid-column: 1 / -1; }
  .symptoms__list, .ledger__cols { grid-template-columns: 1fr; }
  .symptoms__readout { grid-template-columns: 1fr; }
  .symptoms__meter { grid-row: auto; }
  .layer { grid-template-columns: 1fr; }
  .layer__head { grid-template-columns: auto auto; justify-content: start; gap: 12px; }
  .layer__desc, .layer__items { grid-column: 1; }
  /* En celular el grafo se vuelve una lista: los nodos no caben alrededor del centro */
  .entity__graph { aspect-ratio: auto; display: grid; gap: 8px; padding: 16px; }
  .entity__lines { display: none; }
  .entity__core { position: static; transform: none; justify-self: start; }
  .entity__nodes { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .entity__node { position: static; transform: none; min-width: 0; }
  .entity__note { position: static; }
}

/* =====================================================================
   Página de servicio: CRM y automatización (bloques propios)
   ===================================================================== */

/* Fig. Una conversación cualquiera: bitácora con un vacío de días */
.story { padding-block: clamp(64px, 9vw, 128px); }
.story__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.story__log, .story__silence { grid-column: 2 / span 7; }
.story__log { display: grid; border-top: 1px solid var(--ink); }
.msg { display: grid; grid-template-columns: 6.5rem 6.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.msg__time { color: var(--ink-3); }
.msg__who { color: var(--accent); }
.msg--out .msg__who { color: var(--ink-2); }
.msg__text { font-size: 1.0625rem; line-height: 1.45; }
.msg--in .msg__text { font-family: var(--f-serif); font-style: italic; font-size: 1.25rem; }
.story__silence { position: relative; padding: 18px 0 18px 6.5rem; min-height: 280px; }
.story__silence::before { content: ""; position: absolute; left: 3.2rem; top: 0; bottom: 0; border-left: 1px dashed var(--ink-3); }
.story__silence-label { color: var(--ink-3); margin-bottom: 18px; }
.story__days { display: grid; gap: 44px; }
.story__days li { color: var(--ink-3); position: relative; }
.story__days li::before { content: ""; position: absolute; left: calc(-3.3rem - 4px); top: 0.45em; width: 9px; height: 9px; border: 1px solid var(--ink-3); background: var(--paper); }
.story__statement { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 56px); font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(2.5rem, 1rem + 5vw, 6rem); line-height: 0.92; text-transform: uppercase; letter-spacing: -0.02em; text-wrap: balance; }
.story__statement .serif { display: block; text-transform: none; font-size: 0.92em; color: var(--mark); }
.story__note { grid-column: 1 / span 6; margin-top: 18px; color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.45; }
/* Secuencia: solo si story.js confirmó que va a animar (data-ready) */
.story__body[data-ready] .msg, .story__body[data-ready] .story__silence-label, .story__body[data-ready] .story__days li,
.story__body[data-ready] .story__statement, .story__body[data-ready] .story__note { opacity: 0; }
.story__body.is-playing .msg, .story__body.is-playing .story__silence-label, .story__body.is-playing .story__days li,
.story__body.is-playing .story__statement, .story__body.is-playing .story__note { animation: hv-fade-up 600ms var(--ease) both; }
.story__body.is-playing .msg:nth-child(2) { animation-delay: 500ms; }
.story__body.is-playing .msg:nth-child(3) { animation-delay: 1000ms; }
.story__body.is-playing .msg:nth-child(4) { animation-delay: 1500ms; }
.story__body.is-playing .story__silence-label { animation-delay: 2200ms; }
.story__body.is-playing .story__days li:nth-child(1) { animation: hv-fade 500ms var(--ease) 2600ms both; }
.story__body.is-playing .story__days li:nth-child(2) { animation: hv-fade 500ms var(--ease) 3100ms both; }
.story__body.is-playing .story__days li:nth-child(3) { animation: hv-fade 500ms var(--ease) 3600ms both; }
.story__body.is-playing .story__days li:nth-child(4) { animation: hv-fade 500ms var(--ease) 4100ms both; }
.story__body.is-playing .story__statement { animation-delay: 4700ms; }
.story__body.is-playing .story__note { animation-delay: 5100ms; }

/* Dónde se pierde la memoria */
.leaks { padding-block: 0 clamp(64px, 9vw, 128px); }
.leaks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--col-gap); }
.leak { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 20px; row-gap: 8px; padding: 26px 0; border-top: 1px solid var(--ink); align-content: start; }
.leak__n { grid-row: 1 / span 2; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: 4rem; line-height: 0.85; color: var(--mark); font-variant-numeric: tabular-nums; }
.leak__title { font-weight: 500; font-size: 1.25rem; line-height: 1.25; }
.leak__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }
.leaks__audience { margin-top: clamp(32px, 5vw, 56px); font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 1.25; max-width: 40ch; }

/* Fig. Memoria comercial: carriles y barra de tiempo */
.memory__controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; margin-bottom: 24px; }
.memory__label { color: var(--ink-3); }
.memory__range { width: 100%; accent-color: var(--mark); height: 28px; }
.memory__play { color: var(--accent); border: 1px solid var(--accent); padding: 8px 14px; }
.memory__readout { grid-column: 1 / -1; color: var(--data); text-transform: none; letter-spacing: 0.02em; }
.memory__grid { border-top: 1px solid var(--ink); }
.memory__lanes, .memory__row { display: grid; grid-template-columns: 5rem repeat(4, minmax(0, 1fr)); column-gap: 12px; }
.memory__lanes { padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--accent); }
.memory__row { padding: 8px 0; border-bottom: 1px solid var(--rule); align-items: center; transition: opacity 400ms var(--ease); }
.memory__day { color: var(--ink-3); grid-column: 1; }
.memory__event { margin: 0; padding: 8px 10px; border-left: 2px solid var(--mark); background: color-mix(in srgb, var(--mark) 10%, transparent); font-size: 0.875rem; line-height: 1.4; transition: background-color 400ms var(--ease), border-color 400ms var(--ease); }
.memory__lane { display: none; }
.memory.is-interactive .memory__row.is-future { opacity: 0.18; }
.memory.is-interactive .memory__row.is-now .memory__event { background: color-mix(in srgb, var(--mark) 30%, transparent); border-left-color: var(--data); }

/* Conversar, recordar, actuar */
.verbs { padding-block: clamp(64px, 9vw, 128px); }
.verbs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.verb { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--ink); padding-top: 18px; }
.verb__name { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(2.5rem, 1.4rem + 3vw, 4.5rem); line-height: 0.95; }
.verb__benefit { font-size: 1.125rem; line-height: 1.45; }
.verb__tech { display: grid; gap: 6px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: auto; }
.verb__tech li::before { content: "+ "; color: var(--mark); }
.verb .link { align-self: flex-start; }

/* Enfoque */
.principles { padding-block: 0 clamp(64px, 9vw, 128px); }
.principles__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--col-gap); }
.principles__lead { grid-column: 1 / span 6; display: grid; gap: 28px; align-content: start; }
.principles__human { font-size: clamp(1.75rem, 1rem + 2vw, 3rem); line-height: 1.1; color: var(--ink); }
.principles__note { color: var(--ink-2); max-width: 44ch; }
.principles__criteria { grid-column: 8 / span 5; }
.principles__label { color: var(--accent); font-weight: 400; margin-bottom: 8px; }
.principles__criteria ol { counter-reset: c; border-top: 1px solid var(--ink); }
.principles__criteria li { counter-increment: c; display: grid; grid-template-columns: 2.5rem 1fr; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.principles__criteria li::before { content: counter(c, decimal-leading-zero); font: 400 var(--fs-mono)/1.9 var(--f-mono); color: var(--ink-3); }

/* Método sobre la línea de recorrido */
.flow { padding-block: 0 clamp(64px, 9vw, 128px); }
.journey--flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.journey--flow h3 { font-family: var(--f-display); font-style: normal; font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; text-transform: uppercase; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }

/* Referencia */
.reference { padding-bottom: clamp(64px, 9vw, 128px); }
.reference__box { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 24px 0; border-block: 1px solid var(--ink); }
.reference__box .label { grid-column: 1 / -1; color: var(--ink-2); }
.reference__logo { width: 100%; max-width: 180px; height: auto; filter: grayscale(1); }
.reference__text { font-size: 1.125rem; line-height: 1.45; max-width: 52ch; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reference__logo { filter: grayscale(1) invert(1); } }
:root[data-theme="dark"] .reference__logo { filter: grayscale(1) invert(1); }

/* Ecosistema de servicios */
.ecosystem__chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.eco { display: grid; gap: 8px; align-content: start; padding: 22px 20px; border-right: 1px solid var(--rule); }
.eco:first-child { padding-left: 0; }
.eco:last-child { border-right: 0; }
.eco__link { display: grid; gap: 8px; }
.eco__name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 0.95; text-transform: uppercase; }
.eco__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.eco__link:hover .eco__name { color: var(--accent); }
.eco__link .eco__name::after { content: " →"; color: var(--accent); }
.eco.is-current .eco__name { color: var(--accent); }
.eco__here { color: var(--accent); }

@media (max-width: 1024px) {
  .story__log, .story__silence { grid-column: 1 / span 10; }
  .verbs__grid { grid-template-columns: 1fr; }
  .verb__tech { margin-top: 0; }
  .principles__lead, .principles__criteria { grid-column: 1 / -1; }
  .journey--flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecosystem__chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco:nth-child(2) { border-right: 0; }
  .eco:nth-child(3) { padding-left: 0; }
}
@media (max-width: 720px) {
  .story__log, .story__silence, .story__note { grid-column: 1 / -1; }
  .msg { grid-template-columns: 5rem minmax(0, 1fr); }
  .msg__who { grid-column: 2; }
  .msg__text { grid-column: 1 / -1; }
  .story__silence { padding-left: 4rem; min-height: 220px; }
  .story__silence::before { left: 1.6rem; }
  .story__days { gap: 32px; }
  .story__days li::before { left: calc(-2.4rem - 4px); }
  .leaks__grid { grid-template-columns: 1fr; }
  .leak { grid-template-columns: 4rem minmax(0, 1fr); }
  .leak__n { font-size: 3rem; }
  /* Memoria en celular: cronología con el carril escrito en cada evento */
  .memory__controls { grid-template-columns: 1fr auto; }
  .memory__label { grid-column: 1 / -1; }
  .memory__lanes { display: none; }
  .memory__row { grid-template-columns: 4rem minmax(0, 1fr); }
  .memory__event { grid-column: 2 !important; }
  .memory__lane { display: block; color: var(--accent); margin-bottom: 2px; }
  .journey--flow { grid-template-columns: 1fr; }
  .reference__box { grid-template-columns: 1fr; }
  .ecosystem__chain { grid-template-columns: 1fr; }
  .eco { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0; }
}

/* =====================================================================
   Página de servicio: Estrategia digital (bloques propios)
   ===================================================================== */

/* Fig. Del desorden a la dirección */
.direction { padding-block: clamp(64px, 9vw, 128px); }
.direction__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-bottom: 28px; }
.direction__step { border-top: 1px solid var(--ink); padding-top: 12px; display: grid; gap: 4px; transition: opacity 400ms var(--ease); }
.direction__title { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 1.1; }
.direction__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.direction__field { position: relative; }
.roadmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.horizon { border-top: 1px solid var(--ink); padding-top: 12px; display: grid; gap: 14px; align-content: start; transition: border-color 400ms var(--ease); }
.horizon__label { color: var(--accent); font-weight: 400; }
.horizon__list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.piece {
  display: inline-block; padding: 8px 12px; background: var(--paper); border: 1px solid var(--ink);
  font-weight: 500; font-size: 0.9375rem; line-height: 1.2; white-space: nowrap;
  transition: opacity 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease);
}
.horizon--ahora .piece { border-color: var(--mark); box-shadow: inset 3px 0 0 var(--mark); }
.horizon--no { border-top-style: dashed; }
.horizon--no .piece { color: var(--ink-3); border-style: dashed; text-decoration: line-through; }
.direction__purposes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); pointer-events: none; }
.purpose { display: grid; gap: 14px; align-content: start; padding-top: 12px; }
.purpose__label { color: var(--accent); }
.purpose__slots { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.piece--ghost { visibility: hidden; }
.direction__purposes { visibility: hidden; }
.direction__note { margin-top: 20px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }

/* Modo relato: la sección se queda fija mientras el scroll avanza */
.direction.is-scrolly { height: 320vh; padding-block: 0; }
.direction.is-scrolly .direction__sticky { position: sticky; top: var(--masthead-h); height: calc(100vh - var(--masthead-h)); display: flex; flex-direction: column; justify-content: center; }
.direction.is-scrolly .sec-head { margin-bottom: 20px; }
.direction.is-scrolly .direction__step { opacity: 0.3; }
.direction.is-scrolly .direction__step.is-active { opacity: 1; border-top-color: var(--mark); }
.direction.is-scrolly .direction__field { height: min(46vh, 420px); }
.direction.is-scrolly .direction__purposes { visibility: visible; }
.direction.is-scrolly .purpose__label { opacity: var(--purpose, 0); }
.direction.is-scrolly .horizon { border-top-color: color-mix(in srgb, var(--ink) calc(var(--roadmap, 0) * 100%), transparent); }
.direction.is-scrolly .horizon__label { opacity: var(--roadmap, 0); }
.direction.is-scrolly .piece { will-change: transform; }
.direction.is-scrolly:not([data-phase="2"]) .horizon--no .piece { color: var(--ink); border-style: solid; text-decoration: none; }
.direction.is-scrolly:not([data-phase="2"]) .horizon--ahora .piece { border-color: var(--ink); box-shadow: none; }

/* Preguntas */
.questions { padding-block: clamp(64px, 9vw, 128px); }
.questions__wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(24px, 3vw, 40px); }
.question { border-top: 1px solid var(--rule); padding-top: 14px; }
.question p { line-height: 1.12; text-wrap: balance; }
.question--l p { font-size: clamp(1.875rem, 1rem + 2.6vw, 3.5rem); }
.question--m p { font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem); color: var(--ink-2); }
.question:nth-child(1) { grid-column: 1 / span 7; }
.question:nth-child(2) { grid-column: 9 / span 4; align-self: end; }
.question:nth-child(3) { grid-column: 2 / span 5; }
.question:nth-child(4) { grid-column: 6 / span 7; }
.question:nth-child(5) { grid-column: 1 / span 5; }
.question:nth-child(6) { grid-column: 7 / span 5; }
.questions__close { margin-top: clamp(40px, 6vw, 72px); max-width: 52ch; font-size: var(--fs-lede); line-height: 1.45; padding-left: 18px; border-left: 2px solid var(--mark); }

/* Índice de una hoja de ruta */
.index { padding-block: 0 clamp(64px, 9vw, 128px); }
.index__list { border-top: 1px solid var(--ink); }
.index__item { display: grid; grid-template-columns: 4rem minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.index__n { color: var(--ink-3); }
.index__name { display: flex; align-items: baseline; gap: 12px; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); line-height: 1; text-transform: uppercase; }
.index__name::after { content: ""; flex: 1; border-bottom: 1px dotted var(--ink-3); transform: translateY(-0.2em); min-width: 24px; }
.index__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }

/* Método como tabla */
.mtable-sec { padding-block: 0 clamp(64px, 9vw, 128px); }
.mtable__wrap { overflow-x: auto; }
.mtable { width: 100%; min-width: 760px; border-collapse: collapse; }
.mtable th, .mtable td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-top: 1px solid var(--rule); }
.mtable thead th { border-top: 1px solid var(--ink); }
.mtable thead td { border-top: 0; }
.mtable__n { display: block; color: var(--accent); margin-bottom: 6px; }
.mtable__verb { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); line-height: 1; text-transform: uppercase; }
.mtable tbody th { width: 8rem; color: var(--ink-3); font-weight: 400; }
.mtable tbody td { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }
.mtable__get td { color: var(--ink); font-weight: 500; }
.mtable__get td::before { content: "+ "; color: var(--mark); }

/* Modelos en página de servicio (2 fichas) */
.models--svc { padding-block: 0 clamp(64px, 9vw, 128px); }
.models--svc .models__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.models__after { margin-top: 32px; display: grid; gap: 10px; }
.models__statement { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.15; }
.models__note { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }

/* De la estrategia a la ejecución */
.execution { padding-block: 0 clamp(64px, 9vw, 128px); }
.execution__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--ink); padding-top: 24px; }
.execution__origin { grid-column: 1 / span 4; font-size: clamp(2rem, 1rem + 2.4vw, 3.25rem); line-height: 1; color: var(--accent); }
.execution__list { grid-column: 5 / span 8; border-left: 1px solid var(--mark); }
.exe { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--rule); }
.exe::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; border-top: 1px solid var(--mark); }
.exe > span, .exe a { display: grid; gap: 4px; }
.exe__name { font-weight: 500; font-size: 1.125rem; }
.exe__text { color: var(--ink-2); font-size: var(--fs-small); }
.exe--link .exe__name::after { content: " →"; color: var(--accent); }
.exe--link a:hover .exe__name { color: var(--accent); }
.exe:not(.exe--link) .exe__name { color: var(--ink-2); }

/* Trayectoria (banda oscura) */
.experience__list { border-top: 1px solid var(--ink); }
.xp { display: grid; grid-template-columns: 8rem 12rem minmax(0, 1fr) 9rem; column-gap: var(--col-gap); align-items: center; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.xp__sector { color: var(--accent); }
.xp__brand img { max-width: 100%; max-height: 40px; width: auto; height: auto; filter: grayscale(1) invert(1) brightness(1.15); }
.xp__name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.xp__text { color: var(--ink-2); line-height: 1.5; }
.xp__link { justify-self: end; }
.experience__more { margin-top: 24px; color: var(--ink-2); }

@media (max-width: 1024px) {
  .roadmap, .direction__purposes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .question:nth-child(n) { grid-column: 1 / -1; }
  .index__item { grid-template-columns: 3rem minmax(0, 1fr); }
  .index__text { grid-column: 2; }
  .execution__origin, .execution__list { grid-column: 1 / -1; }
  .execution__origin { margin-bottom: 20px; }
  .xp { grid-template-columns: 7rem minmax(0, 1fr); row-gap: 10px; }
  .xp__brand { grid-column: 2; }
  .xp__text, .xp__link { grid-column: 2; justify-self: start; }
  .xp__sector { grid-row: 1; }
}
@media (max-width: 720px) {
  .direction__steps { grid-template-columns: 1fr; gap: 12px; }
  .models--svc .models__grid { grid-template-columns: 1fr; }
  .index__name { font-size: 1.5rem; }
  .xp { grid-template-columns: 1fr; }
  .xp__brand, .xp__text, .xp__link { grid-column: 1; }
}

.xp__brand { display: grid; gap: 6px; justify-items: start; }
.xp__client { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
/* En modo relato la hoja de ruta siempre va en 4 columnas, para caber en el campo fijo */
.direction.is-scrolly .roadmap, .direction.is-scrolly .direction__purposes { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =====================================================================
   Página de servicio: Marketing digital y redes sociales (bloques propios)
   Más ritmo visual: escalas contrastadas y fotografía a color dentro de placas.
   ===================================================================== */

/* Hero con video */
.hero--media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.hero--media > .cols { grid-column: 1 / -1; }
.hero--media > .crumbs, .hero--media > .hero__meta { grid-column: 1 / -1; }
.hero--media > .hero__title, .hero--media > .hero--svc__body { grid-column: 1 / span 8; }
.hero--media .hero__title--svc { font-size: clamp(3rem, 0.6rem + 6.6vw, 7.75rem); }
.hero--media .hero--svc__body .lede { grid-column: 1 / span 10; }
.hero__media { grid-column: 10 / span 3; grid-row: 3 / span 2; align-self: end; margin: 0; }
.hero__media video { width: 100%; height: auto; display: block; aspect-ratio: 9 / 16; object-fit: cover; background: var(--grid); }
.hero__media figcaption { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }

/* Placas a color en esta página: la creatividad es el tema */
.gallery .plate img, .hero__media.plate video, .gallery .plate video { filter: none; }

/* Publicar / comunicar */
.wordwall { padding-block: clamp(64px, 9vw, 120px); }
.wordwall__words {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(2.25rem, 1rem + 5vw, 6.5rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--ghost); text-wrap: pretty;
}
.ww { transition: color 700ms var(--ease); }
.ww--key { color: var(--ink); }
.motion .wordwall__words.is-in .ww--key { color: var(--mark); transition-delay: 500ms; }
.motion .wordwall__words:not(.is-in) .ww--key { color: var(--ghost); }
.wordwall__statement { margin-top: clamp(28px, 4vw, 48px); max-width: 44ch; font-size: var(--fs-lede); line-height: 1.45; padding-left: 18px; border-left: 2px solid var(--mark); }

/* El brief: hoja de producción */
.brief { padding-bottom: clamp(64px, 9vw, 128px); }
.brief__sheet { margin: 0; border: 1px solid var(--ink); padding: clamp(20px, 3vw, 40px); background-image: linear-gradient(var(--grid) 1px, transparent 1px); background-size: 100% 44px; }
.brief__field { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col-gap); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.brief__field:last-child { border-bottom: 0; }
.brief__field dt { display: flex; gap: 14px; }
.brief__n { color: var(--accent); }
.brief__q { color: var(--ink); }
.brief__field dd { margin: 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.25; color: var(--ink-2); }

/* Fig. Una marca, muchos formatos */
.formats-sec { padding-bottom: clamp(64px, 9vw, 128px); }
.formats__stage { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.fmt { margin: 0; display: grid; gap: 8px; }
.fmt__frame { height: 300px; aspect-ratio: var(--r); max-width: 100%; position: relative; overflow: hidden; background: var(--grid); border: 1px solid var(--rule); }
.fmt__frame img, .fmt__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fmt__idea { position: absolute; inset: 0; display: grid; place-items: center; padding: 12%; text-align: center; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); line-height: 1.1; color: var(--paper); background: var(--ink); }
.fmt__readout { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.formats__caption { margin-top: 16px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
/* Modo selector */
.formats__tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--ink); width: fit-content; max-width: 100%; margin-bottom: 24px; }
.formats__tabs button { padding: 12px 16px; font: 500 0.9375rem/1.2 var(--f-body); display: inline-flex; gap: 8px; align-items: baseline; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.formats__tabs button + button { border-left: 1px solid var(--ink); }
.formats__tabs button .mono { color: var(--accent); }
.formats__tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.formats__tabs button[aria-selected="true"] .mono { color: var(--paper); }
.formats__tabs button:focus-visible { outline-offset: -4px; }
.formats.is-tabbed .formats__stage { display: block; position: relative; height: var(--h, 480px); width: calc(var(--h, 480px) * var(--ra, 1)); max-width: 100%; transition: width 650ms cubic-bezier(0.65, 0, 0.35, 1); border: 1px solid var(--ink); }
.formats.is-tabbed .fmt { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 450ms var(--ease), visibility 0s linear 450ms; }
.formats.is-tabbed .fmt.is-active { opacity: 1; visibility: visible; transition: opacity 450ms var(--ease) 150ms, visibility 0s; }
.formats.is-tabbed .fmt__frame { height: 100%; width: 100%; aspect-ratio: auto; border: 0; }
.formats.is-tabbed .fmt__readout { display: none; }
.formats__readout { margin-top: 14px; color: var(--data); text-transform: none; letter-spacing: 0.02em; }
.formats.is-tabbed .formats__stage::before, .formats.is-tabbed .formats__stage::after {
  content: ""; position: absolute; z-index: 2; width: 14px; height: 14px; border-color: var(--mark); border-style: solid; pointer-events: none;
}
.formats.is-tabbed .formats__stage::before { top: -7px; left: -7px; border-width: 1px 0 0 1px; }
.formats.is-tabbed .formats__stage::after { bottom: -7px; right: -7px; border-width: 0 1px 1px 0; }

/* Capacidades con muestra */
.showcase { padding-bottom: clamp(64px, 9vw, 128px); }
.showcase__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.showcase__list { grid-column: 1 / span 7; border-top: 1px solid var(--ink); }
.sc { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--rule); cursor: default; }
.sc:focus-visible { outline-offset: -2px; }
.sc__n { color: var(--ink-3); padding-top: 0.6em; }
.sc__name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); line-height: 0.95; text-transform: uppercase; transition: color var(--dur) var(--ease), transform 400ms var(--ease); transform-origin: left; }
.sc__text { grid-column: 2; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; max-width: 52ch; }
.sc__thumb { display: none; }
@media (min-width: 1025px) {
  .showcase__body.is-live .sc.is-active .sc__name { color: var(--accent); transform: translateX(8px); }
  .showcase__body.is-live .sc.is-active .sc__n { color: var(--accent); }
}
.showcase__preview { grid-column: 9 / span 4; position: sticky; top: calc(var(--masthead-h) + 24px); align-self: start; aspect-ratio: 4 / 5; }
.sc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity 450ms var(--ease), transform 600ms var(--ease); }
.sc__img.is-on { opacity: 1; transform: none; }
.showcase__body:not(.is-live) .showcase__preview { display: none; }

/* Storyboard */
.storyboard { padding-bottom: clamp(64px, 9vw, 128px); }
.storyboard__strip { display: grid; grid-template-columns: 1fr 2fr 2fr 1fr; gap: 12px; }
.sb-group { display: grid; gap: 10px; align-content: start; }
.sb-group__verb { color: var(--accent); border-bottom: 1px solid var(--mark); padding-bottom: 8px; }
.sb-group__frames { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.sb-frame {
  display: grid; gap: 8px; align-content: start; min-height: 12rem; padding: 26px 14px 16px; position: relative;
  border: 1px solid var(--ink); background:
    radial-gradient(circle, var(--ink) 2.5px, transparent 3px) 6px 6px / 16px 12px repeat-x;
}
.sb-frame__n { color: var(--ink-3); }
.sb-frame__name { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(1.375rem, 1rem + 0.8vw, 1.875rem); line-height: 1.05; }
.sb-frame__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.storyboard__team { margin-top: 28px; max-width: 60ch; color: var(--ink-2); }

/* Galería de trabajo real */
.gallery { padding-bottom: clamp(48px, 7vw, 96px); }
.project { display: grid; gap: 24px; margin-bottom: clamp(56px, 8vw, 104px); }
.project__head { display: grid; grid-template-columns: 8rem minmax(0, 4fr) minmax(0, 6fr); column-gap: var(--col-gap); row-gap: 8px; align-items: baseline; border-top: 1px solid var(--ink); padding-top: 16px; }
.project__sector { color: var(--accent); }
.project__client { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(2rem, 1rem + 2.4vw, 3.5rem); line-height: 0.95; text-transform: uppercase; }
.project__text { color: var(--ink-2); line-height: 1.55; }
.project__head .link { grid-column: 3; justify-self: start; }
.project__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.gfig { grid-column: span var(--span); }
.gfig img, .gfig video { width: 100%; height: auto; display: block; background: var(--grid); }
.gfig video { object-fit: cover; }
.gallery__also { color: var(--ink-2); max-width: 60ch; }

@media (max-width: 1024px) {
  .hero--media > .hero__title, .hero--media > .hero--svc__body { grid-column: 1 / -1; }
  .hero__media { grid-column: 1 / span 5; grid-row: auto; margin-top: 32px; }
  .showcase__list { grid-column: 1 / -1; }
  .showcase__preview { display: none; }
  .sc__thumb { display: block; grid-column: 2; width: min(220px, 60%); height: auto; margin-top: 8px; }
  .storyboard__strip { grid-template-columns: 1fr 1fr; }
  .project__head { grid-template-columns: 7rem minmax(0, 1fr); }
  .project__text, .project__head .link { grid-column: 2; }
  .gfig { grid-column: span 6; }
}
@media (max-width: 720px) {
  .hero__media { grid-column: 1 / span 9; }
  .brief__field { grid-template-columns: 1fr; row-gap: 6px; }
  .storyboard__strip, .sb-group__frames { grid-template-columns: 1fr; }
  .project__head { grid-template-columns: 1fr; }
  .project__text, .project__head .link { grid-column: 1; }
  .gfig { grid-column: 1 / -1; }
  .formats__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 100%; background: var(--ink); }
  .formats__tabs button { padding: 10px 12px; font-size: 0.875rem; background: var(--paper); }
  .formats__tabs button + button { border-left: 0; }
}

/* =====================================================================
   Megamenú de Servicios (componente nav-mega.html + mega.js)
   Índice tipográfico: categorías numeradas, nombres protagonistas, líneas finas.
   ===================================================================== */
.nav-svc__btn {
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; transition: color var(--dur) var(--ease);
}
.nav-svc__btn::before { content: "// "; color: var(--ink-3); white-space: pre; transition: color var(--dur) var(--ease); }
.nav-svc__btn:hover, .nav-svc__btn:hover::before, .nav-svc__btn[aria-expanded="true"], .nav-svc__btn[aria-expanded="true"]::before,
.nav-svc.is-current .nav-svc__btn, .nav-svc.is-current .nav-svc__btn::before { color: var(--accent); }
.nav-svc__plus { position: relative; width: 9px; height: 9px; transition: transform 220ms var(--ease); }
.nav-svc__plus::before, .nav-svc__plus::after { content: ""; position: absolute; background: var(--mark); }
.nav-svc__plus::before { left: 4px; top: 0; width: 1.5px; height: 9px; }
.nav-svc__plus::after { top: 4px; left: 0; height: 1.5px; width: 9px; }
.nav-svc__btn[aria-expanded="true"] .nav-svc__plus { transform: rotate(45deg); }

.mega {
  position: absolute; z-index: 120; top: 100%; left: 0; right: 0;
  padding: 28px max(var(--gutter), env(safe-area-inset-right, 0px)) 24px max(var(--gutter), env(safe-area-inset-left, 0px));
  background-color: var(--paper);
  background-image: linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--gutter)) / 12) 100%; background-position: var(--gutter) 0;
  border-bottom: 1px solid var(--ink);
}
.mega[hidden], .masthead__nav .nav-svc [hidden] { display: none !important; }
/* Microinteracción: despliegue desde la línea del encabezado; el contenido sube con un leve escalonado. */
.motion .mega:not([hidden]) { animation: hv-mega-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.motion .mega:not([hidden]) .mega__top,
.motion .mega:not([hidden]) .mega__group,
.motion .mega:not([hidden]) .mega__foot { animation: hv-mega-item 320ms var(--ease) both; }
.motion .mega:not([hidden]) .mega__group:nth-child(1) { animation-delay: 40ms; }
.motion .mega:not([hidden]) .mega__group:nth-child(2) { animation-delay: 80ms; }
.motion .mega:not([hidden]) .mega__group:nth-child(3) { animation-delay: 120ms; }
.motion .mega:not([hidden]) .mega__group:nth-child(4) { animation-delay: 160ms; }
.motion .mega:not([hidden]) .mega__foot { animation-delay: 180ms; }
.motion .mega.is-closing { animation: hv-mega-out 170ms ease-in both; }
.motion .mega.is-closing * { animation: none !important; }
@keyframes hv-mega-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -2px 0); } }
@keyframes hv-mega-out { from { clip-path: inset(0 0 -2px 0); opacity: 1; } to { clip-path: inset(0 0 100% 0); opacity: 0.6; } }
@keyframes hv-mega-item { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.masthead__nav .mega a::before { content: none; }
.masthead__nav .mega ul { display: block; }
.mega__top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.mega__label { color: var(--ink-3); }
.mega__groups { display: grid; grid-template-columns: repeat(var(--cats, 3), minmax(0, 1fr)); }
.mega__group { padding: 22px 24px 8px; border-left: 1px solid var(--rule); }
.mega__group:first-child { padding-left: 0; border-left: 0; }
.mega__cat { color: var(--ink-3); margin-bottom: 14px; }
.mega__n { color: var(--accent); }
.masthead__nav .mega__svc {
  display: grid; gap: 6px; padding: 10px 0 14px;
  font-family: var(--f-body); font-size: var(--fs-small); letter-spacing: 0; text-transform: none;
}
.mega__name {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(1.5rem, 0.9rem + 1.3vw, 2.375rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--ink); transition: color var(--dur) var(--ease);
}
.mega__desc { color: var(--ink-2); line-height: 1.4; }
.mega__svc:hover .mega__name, .mega__svc:focus-visible .mega__name, .mega__svc[aria-current="page"] .mega__name { color: var(--accent); }
.mega__svc[aria-current="page"] .mega__name::after { content: " +"; color: var(--mark); }
/* Franja inferior: explorar el catálogo (contorno) y la acción comercial (violeta, prioridad). */
.mega__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.masthead__nav .mega__act {
  display: grid; gap: 6px; align-content: center; padding: 16px 20px; min-height: 76px;
  font-family: var(--f-body); font-size: var(--fs-small); letter-spacing: 0; text-transform: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mega__act-title { font-family: var(--f-mono); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.mega__act-arrow { display: inline-block; margin-left: 4px; transition: transform var(--dur) var(--ease); }
.mega__act:hover .mega__act-arrow, .mega__act:focus-visible .mega__act-arrow { transform: translate(2px, -2px); }
.mega__act-text { line-height: 1.4; }
.masthead__nav .mega__act--all { border: 1px solid var(--ink); color: var(--ink); background: var(--paper); }
.mega__act--all .mega__act-text { color: var(--ink-2); }
.masthead__nav .mega__act--all:hover { border-color: var(--accent); color: var(--accent); }
.masthead__nav .mega__act--cta { background: var(--cta); color: var(--on-cta); border: 1px solid var(--cta); }
.mega__act--cta .mega__act-text { color: var(--on-cta); opacity: 0.86; }
.masthead__nav .mega__act--cta:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: var(--on-cta); }

@media (max-width: 1024px) and (min-width: 721px) {
  .mega__group { padding-inline: 16px; }
  .masthead__nav ul { gap: 18px; }
  .nav-svc__btn { gap: 6px; }
}

/* Móvil: lista vertical dentro del menú; sin descripciones ni retícula. */
@media (max-width: 720px) {
  .masthead.is-open .masthead__nav .nav-svc__btn {
    width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--rule);
    font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
    font-size: 2.25rem; line-height: 1; letter-spacing: -0.01em; text-align: left;
  }
  .masthead.is-open .masthead__nav .nav-svc__btn::before { content: none; }
  .nav-svc__plus { width: 16px; height: 16px; }
  .nav-svc__plus::before { left: 6.5px; width: 3px; height: 16px; }
  .nav-svc__plus::after { top: 6.5px; height: 3px; width: 16px; }
  .masthead.is-open .masthead__nav .mega {
    position: static; padding: 4px 0 16px; background-image: none; border-bottom: 1px solid var(--rule);
  }
  .mega__top { display: none; }
  .mega__groups { grid-template-columns: 1fr; }
  .mega__group, .mega__group:first-child { padding: 10px 0 0; border-left: 0; }
  .mega__cat { margin-bottom: 0; }
  .masthead.is-open .masthead__nav .mega .mega__svc {
    display: flex; align-items: center; min-height: 48px; padding: 8px 0; border-bottom: 0;
    font-size: var(--fs-small);
  }
  .mega__name { font-size: 1.5rem; }
  .mega__desc { display: none; }
  .mega__foot { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; padding-top: 14px; }
  .masthead.is-open .masthead__nav .mega .mega__act {
    display: grid; padding: 14px 16px; min-height: 64px; font-family: var(--f-body); font-weight: 400;
    font-variation-settings: normal; font-size: var(--fs-small); line-height: 1.3; letter-spacing: 0; text-transform: none;
  }
  .masthead.is-open .masthead__nav .mega .mega__act--all { border: 1px solid var(--ink); }
  .motion .masthead.is-open .masthead__nav .mega li { animation: none; }
}

/* Catálogo: servicios con página propia, distinguibles a primera vista */
.services__key { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.svc__tag {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 4px 6px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: #fff; background: var(--mark);
}
.svc__tag::before { content: "+"; font-weight: 700; }
.svc--page { position: relative; }
.svc--page::before { content: ""; position: absolute; left: -16px; top: 24px; bottom: 24px; width: 3px; background: var(--mark); }
.svc--page .svc__code { display: grid; gap: 10px; align-content: start; }
.svc--page .svc__name a { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.svc--page .svc__name a:hover { color: var(--accent); }
.svc__go {
  grid-column: 3; justify-self: start; display: inline-flex; gap: 10px; align-items: center;
  padding: 10px 16px; border: 1px solid var(--ink); font-weight: 500; font-size: var(--fs-small);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc__go:hover, .svc__go:focus-visible { background: var(--mark); border-color: var(--mark); color: #fff; }
@media (max-width: 720px) {
  .svc__go { grid-column: 1; }
  .svc--page::before { left: -12px; }
  .svc--page .svc__code { display: flex; align-items: center; gap: 12px; }
}

/* =====================================================================
   Página de servicio: Chatbots inteligentes (bloques propios)
   ===================================================================== */
.hero__pitch {
  grid-column: 1 / span 9; margin-bottom: 20px;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); line-height: 1.15; color: var(--ink);
}

/* Tres formas */
.modes { padding-bottom: clamp(64px, 9vw, 128px); }
.modes__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.mode { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding-top: 18px; border-top: 3px solid var(--ink); }
.mode--ia { border-top-color: var(--accent); }
.mode--hibrido { border-top-color: var(--mark); }
.mode__code { color: var(--ink-3); }
.mode--ia .mode__code { color: var(--accent); }
.mode--hibrido .mode__code { color: var(--mark); }
.mode__name {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(1.75rem, 1rem + 1.8vw, 2.75rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em;
}
.mode__text { color: var(--ink); line-height: 1.5; }
.mode__ideal { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; }
.mode__demo { margin: 8px 0 0; padding: 16px; display: grid; gap: 10px; align-content: start; border: 1px solid var(--rule); background: var(--grid); }
.mode__who { display: block; margin-bottom: 4px; color: var(--ink-3); font-size: 0.6875rem; }
.mode__in, .mode__out { padding: 10px 12px; font-size: var(--fs-small); line-height: 1.45; max-width: 92%; }
.mode__in { background: var(--paper); border: 1px solid var(--rule); justify-self: start; }
.mode__out { justify-self: end; border: 1px dashed var(--accent); background: var(--paper); }
.mode--hibrido .mode__out { border-color: var(--mark); }
.mode__choices { display: grid; gap: 6px; justify-items: end; }
.mode__choices li { padding: 6px 12px; border: 1px solid var(--ink); font-size: var(--fs-small); background: var(--paper); position: relative; }
.mode--flujos .mode__choices li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; border-top: 1px solid var(--ink-3); }
.mode--hibrido .mode__choices li { border-color: var(--mark); color: var(--mark); }
.mode__cap { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.modes__statement {
  margin-top: clamp(40px, 6vw, 72px); max-width: 30ch;
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(2rem, 1rem + 3vw, 4rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em;
}
.modes__statement .serif { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; font-variation-settings: normal; color: var(--accent); }

/* Fig. De una conversación a una operación */
.operation-sec { padding-block: clamp(64px, 9vw, 128px); }
.op__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 24px; }
.op__play { color: var(--accent); border: 1px solid var(--accent); padding: 8px 14px; min-width: 7rem; }
.op__step { border: 1px solid var(--rule); width: 40px; height: 36px; color: var(--ink); }
.op__play:hover, .op__step:hover { border-color: var(--ink); color: var(--ink); }
.op__readout { color: var(--data); text-transform: none; letter-spacing: 0.02em; margin-left: 8px; }
.op__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--col-gap); align-items: start; }

.op__chat { position: sticky; top: calc(var(--masthead-h) + 24px); border: 1px solid var(--rule); background: var(--grid); padding: 14px; }
.op__chat-head { color: var(--ink-3); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
.op__msgs { display: grid; gap: 10px; }
.msg { display: block; width: fit-content; max-width: 88%; padding: 10px 12px; font-size: var(--fs-small); line-height: 1.45; transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
.msg--cliente { justify-self: start; background: var(--paper); border: 1px solid var(--rule); }
.msg--bot { justify-self: end; background: var(--mark); color: #fff; }
.msg--sistema { justify-self: center; max-width: 100%; padding: 4px 8px; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--data); border: 1px dashed var(--rule); }
.op.is-live .msg.is-hidden { display: none; }
.motion .op.is-live .msg:not(.is-hidden) { animation: hv-fade-up 380ms var(--ease) both; }

.op__map { position: relative; }
.op__lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.op__lanes span { color: var(--ink-3); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.op__wires { position: absolute; left: 0; right: 0; bottom: 0; top: 46px; width: 100%; height: calc(100% - 46px); pointer-events: none; overflow: visible; }
.op__wires path { fill: none; stroke: var(--rule); stroke-width: 1.5; transition: stroke 400ms var(--ease); }
.op__wires path.is-on { stroke: var(--accent); }
.op__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 14px; row-gap: 22px; }
.op__node {
  grid-column: var(--col); grid-row: var(--row);
  padding: 12px; border: 1px solid var(--rule); background: var(--paper); display: grid; gap: 6px; align-content: start;
  transition: opacity 400ms var(--ease), border-color 400ms var(--ease), background-color 400ms var(--ease);
}
.op.is-live .op__node { cursor: pointer; }
.op__meta { color: var(--ink-3); display: flex; justify-content: space-between; gap: 8px; }
.op__n { color: var(--accent); }
.op__name { font-weight: 500; font-size: 1rem; line-height: 1.25; }
.op__text { color: var(--ink-2); font-size: 0.8125rem; line-height: 1.5; }
.op__options { display: grid; gap: 4px; font-size: 0.8125rem; color: var(--ink-2); }
.op__options b { color: var(--ink); font-weight: 500; }
.op__branch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.op__branch-label { color: var(--ink-3); margin-right: 4px; text-transform: none; letter-spacing: 0.02em; }
.op__branch button { padding: 8px 12px; border: 1px solid var(--accent); color: var(--accent); }
.op__branch button[aria-pressed="true"] { background: var(--accent); color: var(--paper); }
.op__detail { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--col-gap); row-gap: 6px; min-height: 6.5rem; padding: 16px 0 20px; margin-bottom: 24px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.op__detail .op__readout { grid-column: 1 / -1; margin: 0; }
.op__detail-name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); line-height: 1; text-transform: uppercase; }
.op__detail-text { color: var(--ink-2); line-height: 1.5; }
.op__detail-result { grid-column: 2; color: var(--data); line-height: 1.5; }
.op__detail-result:empty { display: none; }
.op.is-live .op__text, .op.is-live .op__options { display: none; }
.op:not(.is-live) .op__branch { display: none; }
.op.is-live .op__node.is-future { opacity: 0.32; }
.op.is-live .op__node.is-current { border-color: var(--accent); background: var(--grid); box-shadow: 0 0 0 1px var(--accent); }
.op.is-live .op__node.is-done { border-color: var(--ink-3); }
.op__note { margin-top: 20px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.op__statement {
  margin-top: clamp(40px, 6vw, 72px); max-width: 26ch;
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(2rem, 1rem + 3vw, 4rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em;
}
.op__statement .serif { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; font-variation-settings: normal; color: var(--accent); }

/* Capacidades agrupadas */
.capgroups { padding-block: clamp(64px, 9vw, 128px); }
.capgroups__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.capgroup { border-top: 1px solid var(--ink); padding-top: 16px; }
.capgroup__verb { font-family: var(--f-serif); font-style: italic; font-size: clamp(2rem, 1rem + 2.4vw, 3.5rem); line-height: 1; color: var(--accent); margin-bottom: 18px; }
.capgroup__list li { padding: 14px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; }
.capgroup__name { font-weight: 500; font-size: 1.0625rem; line-height: 1.3; }
.capgroup__name a { text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 4px; }
.capgroup__name a:hover { color: var(--accent); }
.capgroup__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; }
.capgroups__note { margin-top: 28px; max-width: 60ch; padding-left: 16px; border-left: 2px solid var(--mark); color: var(--ink-2); }

/* Aplicaciones por industria */
.uses { padding-bottom: clamp(64px, 9vw, 128px); }
.uses__list { border-top: 1px solid var(--ink); }
.use { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); column-gap: var(--col-gap); align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.use__industry {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(1.75rem, 1rem + 2vw, 3rem); line-height: 0.95; text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.use:hover .use__industry { color: var(--accent); }
.use__text { color: var(--ink-2); line-height: 1.5; }
.use__msg { justify-self: end; max-width: 34ch; padding: 10px 14px; background: var(--grid); border: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.45; }
.use__msg .mono { color: var(--ink-3); }
.uses__note { margin-top: 14px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }

/* Integraciones */
.integrations { padding-bottom: clamp(64px, 9vw, 128px); }
.integ {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
  grid-template-areas: "in core out" "pipe pipe pipe"; gap: 28px var(--col-gap); align-items: center; position: relative;
}
.integ__col--in { grid-area: in; }
.integ__col--out { grid-area: out; }
.integ__col--pipe { grid-area: pipe; border-top: 1px dashed var(--ink-3); padding-top: 16px; }
.integ__col--pipe ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.integ__label { color: var(--ink-3); margin-bottom: 10px; }
.integ li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.integ__col--pipe li { border-bottom: 0; }
.integ__name { font-weight: 500; }
.integ a .integ__name { text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 4px; }
.integ a:hover .integ__name { color: var(--accent); }
.integ__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.integ__core {
  grid-area: core; position: relative; aspect-ratio: 1; display: grid; place-content: center; text-align: center; gap: 6px;
  border: 1px solid var(--ink); border-radius: 50%; background: var(--paper);
}
.integ__core::before, .integ__core::after { content: ""; position: absolute; top: 50%; width: calc(var(--col-gap) + 2px); border-top: 1px solid var(--ink); }
.integ__core::before { right: 100%; }
.integ__core::after { left: 100%; }
.integ__core-name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); text-transform: uppercase; line-height: 1; }
.integ__core-text { color: var(--accent); text-transform: none; letter-spacing: 0.02em; }
.integrations__foot { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: 16px var(--col-gap); align-items: end; }
.integrations__foot p { color: var(--ink-2); max-width: 60ch; line-height: 1.55; }

@media (max-width: 1024px) {
  .modes__list, .capgroups__grid { grid-template-columns: 1fr; }
  .mode { grid-template-rows: none; }
  .op__body { grid-template-columns: 1fr; }
  .op__chat { position: static; }
  .use { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); row-gap: 10px; }
  .use__msg { grid-column: 2; justify-self: start; }
  .integ { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "core core" "in out" "pipe pipe"; }
  .integ__core { width: min(220px, 60%); justify-self: center; }
  .integ__core::before, .integ__core::after { display: none; }
}
@media (max-width: 720px) {
  .hero__pitch { grid-column: 1 / -1; }
  .op__lanes, .op__wires { display: none; }
  .op__steps { grid-template-columns: 1fr; row-gap: 10px; padding-left: 14px; border-left: 1px solid var(--rule); }
  .op__detail { grid-template-columns: 1fr; }
  .op__detail-result { grid-column: 1; }
  .op__branch { margin-left: 0; width: 100%; }
  .op__branch-label { width: 100%; }
  .op__node { grid-column: 1; grid-row: auto; }
  .op.is-live .op__node.is-future { opacity: 0.45; }
  .use { grid-template-columns: 1fr; }
  .use__msg { grid-column: 1; }
  .integ { grid-template-columns: 1fr; grid-template-areas: "in" "core" "out" "pipe"; }
  .integ__col--pipe ul { grid-template-columns: 1fr; gap: 0; }
  .integrations__foot { grid-template-columns: 1fr; }
}

/* =====================================================================
   Encabezado fijo (sticky) en todas las páginas
   La altura real la mide menu.js en --masthead-h; sirve para las anclas y para
   los elementos sticky internos (chat, muestras, hoja de ruta).
   ===================================================================== */
:root { --masthead-h: 82px; }
html { scroll-padding-top: calc(var(--masthead-h) + 16px); }
.masthead { position: sticky; top: 0; z-index: 130; background-clip: border-box; background-color: var(--paper); }
/* Fondo a todo lo ancho, también en pantallas mayores que la retícula de 1440 px. */
.masthead::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--paper); }
.masthead.is-stuck { box-shadow: 0 12px 24px -22px rgb(0 0 0 / 0.45); }
.motion .masthead { transition: box-shadow 250ms var(--ease); }
/* Paneles del encabezado: nunca más altos que la pantalla. */
.mega { max-height: calc(100dvh - var(--masthead-h)); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 720px) {
  :root { --masthead-h: 64px; }
  .masthead { padding-block: 12px; }
  .masthead.is-open .masthead__nav { max-height: calc(100dvh - var(--masthead-h)); overflow-y: auto; overscroll-behavior: contain; }
  .masthead.is-open .masthead__nav .mega { max-height: none; overflow: visible; }
}

/* =====================================================================
   Página de servicio: Desarrollo web y ecommerce (bloques propios)
   ===================================================================== */

/* Hero: un folleto de tres caras que se despliega en un sitio */
.hero--fold > .hero__title, .hero--fold > .hero--svc__body { grid-column: 1 / span 7; }
.hero--fold .hero--svc__body .lede { grid-column: 1 / -1; }
.hero__fold { grid-column: 8 / span 5; grid-row: 3 / span 2; align-self: center; margin-left: clamp(0px, 2vw, 32px); }
.fold { position: relative; border: 1px solid var(--ink); background: var(--paper); }
.fold__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.fold__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--ghost); }
.fold__bar span { margin-left: 8px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.fold__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); perspective: 900px; min-height: clamp(260px, 26vw, 360px); }
.fold__panel { display: grid; gap: 8px; align-content: start; padding: 14px 10px; background: var(--paper); border-right: 1px dashed var(--rule); backface-visibility: hidden; }
.fold__panel:last-child { border-right: 0; }
.fold__panel--a { transform-origin: right center; }
.fold__panel--c { transform-origin: left center; }
.w { display: block; height: 6px; background: var(--ghost); }
.w--h { height: 12px; width: 85%; background: var(--ink); }
.w--s { width: 60%; }
.w--img { height: clamp(64px, 7vw, 110px); background: var(--grid); border: 1px solid var(--rule); }
.w--btn { height: 18px; width: 64%; background: var(--mark); }
.w--field { height: 14px; background: transparent; border: 1px solid var(--rule); }
.fold__tags { position: absolute; right: -10px; bottom: -14px; display: flex; gap: 6px; text-transform: none; letter-spacing: 0.02em; }
.fold__tags li { padding: 4px 8px; background: var(--ink); color: var(--paper); }
.fold__tags li::before { content: "+ "; color: var(--accent); }
.motion .fold__panel--a { animation: hv-fold-a 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 450ms both; }
.motion .fold__panel--c { animation: hv-fold-c 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 450ms both; }
.motion .fold__panel--b { animation: hv-fold-b 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 450ms both; }
.motion .fold__bar { animation: hv-fade 500ms var(--ease) 1300ms both; }
.motion .fold__tags li { animation: hv-fade-up 450ms var(--ease) both; }
.motion .fold__tags li:nth-child(1) { animation-delay: 1500ms; }
.motion .fold__tags li:nth-child(2) { animation-delay: 1600ms; }
.motion .fold__tags li:nth-child(3) { animation-delay: 1700ms; }
@keyframes hv-fold-a { from { transform: rotateY(78deg); } to { transform: none; } }
@keyframes hv-fold-c { from { transform: rotateY(-78deg); } to { transform: none; } }
@keyframes hv-fold-b { from { transform: scale(0.96); opacity: 0.7; } to { transform: none; opacity: 1; } }

/* Más que presencia: los papeles del sitio y la suma que se vuelve multiplicación */
.roles { padding-bottom: clamp(64px, 9vw, 128px); }
.roles__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; }
.roles__text { grid-column: 1 / span 6; display: grid; gap: 18px; }
.roles__text > p:not(.roles__label) { font-size: var(--fs-lede); line-height: 1.5; }
.roles__label { color: var(--ink-3); margin-top: 8px; }
.roles__list { display: flex; flex-wrap: wrap; gap: 8px; }
.roles__list li { padding: 8px 14px; border: 1px solid var(--ink); font-size: var(--fs-small); }
.roles__eq { grid-column: 8 / span 5; }
.roles__sum { display: grid; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(2.25rem, 1rem + 3.4vw, 4.5rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
.roles__term { display: inline; }
.roles__op { display: inline-block; margin-left: 0.2em; color: var(--mark); transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.roles__op--plus::after { content: ""; display: block; }
.roles__result { color: var(--accent); border-top: 2px solid var(--ink); padding-top: 8px; margin-top: 8px; }
.motion .roles__eq.is-in .roles__op--plus { transform: rotate(45deg); transition-delay: 600ms; }
.roles__note { margin-top: 16px; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); color: var(--ink-2); }

/* Fig. Anatomía de un sitio web que trabaja */
.platform-sec { padding-bottom: clamp(64px, 9vw, 128px); }
.plat { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); column-gap: clamp(32px, 6vw, 96px); row-gap: 28px; align-items: center; }
.plat__col { display: grid; gap: 10px; position: relative; z-index: 1; }
.plat__node { border-top: 1px solid var(--rule); padding: 10px 0 6px; transition: border-color var(--dur) var(--ease); }
.plat__name { margin: 0; }
.plat__btn {
  display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 4px 0; text-align: left;
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(1.375rem, 1rem + 0.9vw, 2rem); line-height: 1; text-transform: uppercase; color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.plat__n { color: var(--ink-3); font-size: var(--fs-mono); }
.plat__btn:hover { color: var(--accent); }
.plat__text, .plat__more { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; }
.plat__link { margin-top: 8px; display: inline-flex; }
.plat.is-live .plat__text, .plat.is-live .plat__more, .plat.is-live .plat__link { display: none; }
.plat.is-live .plat__node.is-active { border-top-color: var(--accent); }
.plat.is-live .plat__node.is-active .plat__btn, .plat.is-live .plat__node.is-active .plat__n { color: var(--accent); }
.plat:not(.is-live) .plat__btn { cursor: default; }
.plat__site { position: relative; z-index: 1; }
.ps { display: grid; gap: 12px; padding-bottom: 14px; border: 1px solid var(--ink); background: var(--paper); }
.ps [data-region], .ps__out { transition: outline-color 300ms var(--ease), background-color 300ms var(--ease); outline: 2px solid transparent; outline-offset: 3px; }
.plat__site .is-hot { outline-color: var(--accent); background-color: var(--accent-tint); }
.ps__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.ps__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--ghost); }
.ps__url { margin-left: 8px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.ps__tag { margin-left: auto; color: var(--ink-3); text-transform: none; font-size: 0.6875rem; }
.ps__nav { display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 4px 0; }
.ps__nav b { width: 30px; height: 6px; background: var(--ghost); }
.ps__nav .ps__logo { width: 44px; height: 12px; margin-right: auto; background: var(--ink); }
.ps__hero { display: grid; gap: 8px; margin: 6px 12px 0; padding: 4px 0; }
.ps__h1 { height: 16px; width: 86%; background: var(--ink); }
.ps__h1--short { width: 58%; }
.ps__p { height: 6px; width: 72%; background: var(--ghost); margin-top: 4px; }
.ps__cta { justify-self: start; margin-top: 6px; padding: 6px 12px; background: var(--mark); color: #fff; text-transform: none; letter-spacing: 0.02em; }
.ps__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 12px; }
.ps__row b { height: 44px; background: var(--grid); border: 1px solid var(--rule); }
.ps__form { display: grid; gap: 6px; margin: 0 12px; padding: 10px; border: 1px dashed var(--rule); }
.ps__field { height: 14px; border: 1px solid var(--rule); }
.ps__send { justify-self: end; padding: 4px 10px; background: var(--ink); color: var(--paper); text-transform: none; font-size: 0.6875rem; letter-spacing: 0.02em; }
.ps__foot { margin: 0 12px; padding: 4px; }
.ps__foot svg { display: block; width: 100%; height: 24px; }
.ps__foot polyline { fill: none; stroke: var(--data); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ps__out { margin-top: 12px; padding: 8px; border: 1px dashed var(--rule); text-align: center; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.ps__out span { color: var(--mark); }
.plat__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.plat__wires path { fill: none; stroke: var(--rule); stroke-width: 1; transition: stroke 300ms var(--ease); }
.plat__wires circle { fill: var(--rule); transition: fill 300ms var(--ease); }
.plat__wires .is-on path { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 5; }
.plat__wires .is-on circle { fill: var(--accent); }
.motion .plat__wires .is-on path { animation: hv-wire-flow 900ms linear infinite; }
@keyframes hv-wire-flow { to { stroke-dashoffset: -10; } }
.plat__detail {
  grid-column: 1 / -1; display: grid; grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--col-gap); row-gap: 6px;
  min-height: 7rem; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.plat__d-n { color: var(--accent); }
.plat__d-name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem); line-height: 1; text-transform: uppercase; }
.plat__d-text { grid-column: 3; grid-row: 1; font-size: var(--fs-lede); line-height: 1.45; }
.plat__d-more { grid-column: 3; color: var(--ink-2); line-height: 1.55; }
.plat__d-link { grid-column: 3; justify-self: start; }
.plat__statement {
  margin-top: clamp(40px, 6vw, 72px); max-width: 30ch;
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(2rem, 1rem + 3vw, 4rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em;
}
.plat__statement .serif { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; font-variation-settings: normal; color: var(--accent); }

/* Qué desarrollamos: composición en zigzag, cada proyecto con su propio peso */
.offer-sec { padding-bottom: clamp(64px, 9vw, 128px); }
.offer__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(40px, 6vw, 72px); align-items: start; }
.offer { position: relative; display: grid; gap: 14px; align-content: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.offer__n {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(4.5rem, 2rem + 7vw, 10rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--ink-3);
}
.offer__name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(1.75rem, 1rem + 2vw, 3rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em; max-width: 18ch; }
.offer__text { color: var(--ink-2); line-height: 1.55; max-width: 56ch; }
.offer__tags { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-3); }
.offer__tags li::before { content: "+ "; color: var(--mark); }
.offer .link { justify-self: start; }
.offer--01 { grid-column: 1 / span 7; }
.offer--01 .offer__name { font-size: clamp(2.25rem, 1rem + 3.4vw, 4.5rem); }
.offer--02 { grid-column: 8 / span 5; margin-top: clamp(40px, 9vw, 160px); border-top: 3px solid var(--mark); }
.offer--02 .offer__n { -webkit-text-stroke-color: var(--mark); }
.offer--03 { grid-column: 2 / span 5; }
.offer--03 .offer__tags { font-family: var(--f-mono); }
.offer--03 .offer__tags li::before { content: "{ "; }
.offer--03 .offer__tags li::after { content: " }"; color: var(--mark); }
.offer--04 { grid-column: 7 / span 6; margin-top: clamp(24px, 5vw, 80px); border-top: 1px dashed var(--ink); }
.offer--04 .offer__n { -webkit-text-stroke-color: var(--accent); }

/* Nuestra forma de trabajar: un circuito, no una línea del tiempo */
.loop-sec { padding-bottom: clamp(64px, 9vw, 128px); }
.loop { --lg: clamp(36px, 5vw, 72px); }
.loop__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--lg); }
.loop__steps::before {
  content: ""; position: absolute; z-index: 0; border: 1px dashed var(--accent); border-radius: 28px;
  top: 11px; bottom: calc(50% - var(--lg) / 2 - 11px);
  left: calc((100% - 2 * var(--lg)) / 6); right: calc((100% - 2 * var(--lg)) / 6);
}
.loop__step { position: relative; z-index: 1; grid-column: var(--col); grid-row: var(--row); display: grid; gap: 8px; align-content: start; }
.loop__n { justify-self: start; padding: 2px 10px; background: var(--paper); color: var(--accent); border: 1px solid var(--accent); }
.loop__name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(1.75rem, 1rem + 1.8vw, 2.75rem); line-height: 1; text-transform: uppercase; background: var(--paper); justify-self: start; padding-right: 10px; }
.loop__text { color: var(--ink-2); line-height: 1.55; max-width: 34ch; background: var(--paper); padding-right: 10px; padding-bottom: 6px; }
.loop__step::after { position: absolute; color: var(--accent); font-family: var(--f-mono); font-size: 1rem; line-height: 1; background: var(--paper); padding: 2px 4px; }
.loop__step[data-dir="r"]::after { content: "→"; top: 4px; right: calc(var(--lg) / -2); transform: translateX(50%); }
.loop__step[data-dir="l"]::after { content: "←"; top: 4px; left: calc(var(--lg) / -2); transform: translateX(-50%); }
.loop__step[data-dir="d"]::after { content: "↓"; bottom: calc(var(--lg) / -2); left: 50%; transform: translate(-50%, 50%); }
.loop__step[data-dir="u"]::after { content: "↑"; top: calc(var(--lg) / -2); left: 50%; transform: translate(-50%, -50%); }
.loop__back { margin-top: 28px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.loop__back span { color: var(--accent); }
.loop__note { margin-top: 12px; max-width: 60ch; color: var(--ink-2); font-size: var(--fs-small); }

/* Trayectoria: estratos de Internet, sin fechas inventadas */
.legacy-sec { padding-block: clamp(64px, 9vw, 128px); }
.legacy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; }
.legacy__names { grid-column: 1 / span 5; grid-row: 1; }
.legacy__from { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.75rem, 1rem + 1.8vw, 2.75rem); color: var(--ink-2); line-height: 1.1; }
.legacy__from .mono { display: block; margin-top: 6px; font-style: normal; color: var(--data); }
.legacy__arrow { margin: 14px 0; color: var(--mark); font-size: 1.5rem; }
.legacy__to { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(2.5rem, 1rem + 4vw, 5rem); line-height: 0.95; text-transform: uppercase; }
.legacy__strata { grid-column: 7 / span 6; grid-row: 1 / span 2; }
.legacy__label { color: var(--ink-3); margin-bottom: 12px; }
.legacy__layers li {
  padding: 12px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.75rem); line-height: 1; text-transform: uppercase;
  opacity: calc(0.32 + var(--i) * 0.136);
}
.legacy__layers li:last-child { color: var(--accent); }
.legacy__text { grid-column: 1 / span 5; grid-row: 2; display: grid; gap: 16px; color: var(--ink-2); line-height: 1.6; }
.legacy__text .link { justify-self: start; color: var(--ink); }

/* Tecnología al servicio del proyecto */
.techchoice { padding-block: clamp(64px, 9vw, 128px); }
.techchoice__text { max-width: 60ch; font-size: var(--fs-lede); line-height: 1.5; margin-bottom: 32px; }
.tch { width: 100%; border-collapse: collapse; }
.tch th { text-align: left; font-weight: 400; color: var(--ink-3); padding: 0 0 12px; border-bottom: 1px solid var(--ink); }
.tch td { padding: 18px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.tch__need { width: 50%; padding-right: var(--col-gap) !important; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.35; }
.tch__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tch__tools span { padding: 6px 12px; border: 1px solid var(--ink); font-weight: 500; }
.tch__tools .link { margin-left: 6px; }
.techchoice__note { margin-top: 16px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }

@media (max-width: 1024px) {
  .hero--fold > .hero__title, .hero--fold > .hero--svc__body { grid-column: 1 / -1; }
  .hero__fold { grid-column: 1 / span 8; grid-row: auto; margin: 40px 0 0; }
  .roles__text, .roles__eq { grid-column: 1 / -1; }
  .offer--01, .offer--02, .offer--03, .offer--04 { grid-column: 1 / -1; margin-top: 0; }
  .legacy__names, .legacy__strata, .legacy__text { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 900px) {
  .plat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .plat__site { grid-column: 1 / -1; grid-row: 1; max-width: 460px; width: 100%; justify-self: center; }
  .plat__col--l { grid-column: 1; grid-row: 2; }
  .plat__col--r { grid-column: 2; grid-row: 2; }
  .plat__wires { display: none; }
  .plat__btn { min-height: 44px; font-size: 1.25rem; }
  .plat__detail { grid-template-columns: 1fr; }
  .plat__d-text, .plat__d-more, .plat__d-link { grid-column: 1; grid-row: auto; }
}
@media (max-width: 720px) {
  .hero__fold { grid-column: 1 / -1; }
  .fold__tags { right: 0; }
  .loop__steps { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 36px; }
  .loop__steps::before { display: none; }
  .loop__step { grid-column: 1; grid-row: auto; }
  .loop__step::after { content: "↓" !important; top: auto !important; bottom: -26px !important; left: 0 !important; right: auto !important; transform: none !important; }
  .loop__step:last-child::after { content: none !important; }
  .tch thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tch, .tch tbody, .tch tr, .tch td { display: block; }
  .tch tr { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .tch td { padding: 0; border: 0; }
  .tch__need { width: auto; margin-bottom: 10px; padding-right: 0 !important; }
}

/* =====================================================================
   CTA principal del encabezado: violeta de acento, rectangular, hover discreto
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cta: #5c25ff; --cta-hover: #4712e6; }
}
:root[data-theme="dark"] { --cta: #5c25ff; --cta-hover: #4712e6; }
.masthead__cta { background: var(--cta); color: var(--on-cta); white-space: nowrap; }
.masthead__cta:hover { background: var(--cta-hover); color: var(--on-cta); }
.masthead__cta:active { background: var(--cta-hover); }
.masthead__cta .btn__arrow { font-size: 1.05em; }
.masthead__cta:hover .btn__arrow { transform: translate(2px, -2px); }
.masthead__cta:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }

/* =====================================================================
   Encabezado responsivo. Prioridad: logotipo, navegación y CTA.
   El rótulo «Cuaderno de laboratorio» solo aparece cuando cabe en una línea.
   ===================================================================== */
.masthead { gap: 24px; }
.masthead__log { white-space: nowrap; }
.masthead__nav ul { gap: 22px; }
.masthead__nav > ul > li > a, .nav-svc__btn { white-space: nowrap; }
@media (max-width: 1379px) {
  .masthead__log { display: none; }
  .masthead { grid-template-columns: auto 1fr auto; }
  .masthead__nav { justify-self: end; }
}
@media (max-width: 1024px) and (min-width: 721px) {
  .masthead { gap: 16px; }
  .masthead__nav ul { gap: 14px; }
  .masthead__nav > ul > li > a::before, .nav-svc__btn::before { content: none; }
  .masthead__cta { padding: 0.75em 0.9em; font-size: 0.8125rem; }
}
@media (max-width: 860px) and (min-width: 721px) {
  .masthead__nav ul { gap: 10px; }
  .masthead__nav > ul > li > a, .nav-svc__btn { font-size: 0.6875rem; letter-spacing: 0.04em; }
}

/* Megamenú en pantallas intermedias: 2 × 2 para que los nombres respiren. */
@media (max-width: 1100px) and (min-width: 721px) {
  .mega__groups { grid-template-columns: repeat(min(var(--cats, 4), 2), minmax(0, 1fr)); }
  .mega__group:nth-child(odd) { padding-left: 0; border-left: 0; }
  .mega__group:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .mega__name { font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem); }
}

/* =====================================================================
   CURSOR_ — columnas de Heb Martínez en Línea Directa
   Misma identidad: tipografía monumental, retícula y metadatos en mono.
   El «_» es el cursor de un texto que sigue escribiéndose.
   ===================================================================== */
.cursor-hero { position: relative; isolation: isolate; padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(56px, 8vw, 112px); }
.cursor-hero__eyebrow { color: var(--ink-3); margin: clamp(20px, 3vw, 36px) 0 clamp(12px, 2vw, 20px); }
.cursor-hero__title {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: var(--fs-hero); line-height: 0.86; letter-spacing: -0.025em; text-transform: uppercase; margin-left: -0.04em;
}
.caret { color: var(--mark); }
.motion .caret { animation: hv-caret 1100ms steps(1) infinite; }
@keyframes hv-caret { 50% { opacity: 0; } }
.cursor-hero__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; margin-top: clamp(28px, 4vw, 48px); align-items: start; }
.cursor-hero__subtitle { grid-column: 1 / span 8; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); line-height: 1.05; }
.cursor-hero__text { grid-column: 1 / span 6; display: grid; gap: 14px; font-size: var(--fs-lede); line-height: 1.5; }
.cursor-hero__text p:first-child { color: var(--ink); }
.cursor-hero__text p + p { color: var(--ink-2); }
.cursor-hero__source { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: end; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ink); }
.cursor-hero__source > .mono:first-child { color: var(--ink-3); }
.cursor-hero__count { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); line-height: 0.9; text-transform: uppercase; }
.cursor-hero__count span { color: var(--mark); }
.cursor-hero__range { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.cursor-hero__source .link { justify-self: start; margin-top: 6px; }

/* Metadatos, títulos y enlaces de cada columna */
.col__meta { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.col__cat { color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.col__title { font-family: var(--f-serif); font-weight: 400; line-height: 1.12; text-wrap: balance; }
.col__title a { transition: color var(--dur) var(--ease); }
.col__title a::after { content: "_"; color: var(--mark); opacity: 0; transition: opacity 150ms var(--ease); }
.col__title a:hover, .col__title a:focus-visible { color: var(--accent); }
.col__title a:hover::after, .col__title a:focus-visible::after { opacity: 1; }
.motion .col__title a:hover::after { animation: hv-caret 1100ms steps(1) infinite; }
.col__excerpt { color: var(--ink-2); line-height: 1.55; max-width: 62ch; }
.col__links { display: grid; gap: 10px; align-content: start; justify-items: start; }
.col__related { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; }
.col__related a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 3px; }
.col__related a:hover { color: var(--accent); }
.col__read { color: var(--ink); padding-bottom: 3px; border-bottom: 1px solid var(--ink); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.col__read:hover, .col__read:focus-visible { color: var(--accent); border-color: var(--accent); }

/* Selección: composición asimétrica */
.cursor-featured { padding-bottom: clamp(64px, 9vw, 128px); }
.feat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(32px, 4vw, 48px); align-items: start; }
.feat__item { display: grid; gap: 14px; align-content: start; padding-top: 16px; border-top: 1px solid var(--ink); grid-column: 8 / span 5; }
.feat__item--main { grid-column: 1 / span 7; grid-row: 1 / span 2; border-top: 3px solid var(--mark); padding-top: 20px; }
.feat__n { color: var(--ink-3); }
.feat__item--main .feat__n {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(5rem, 2.5rem + 7vw, 10rem); line-height: 0.8; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1px var(--ink-3);
}
.feat__item .col__title { font-size: clamp(1.5rem, 1rem + 1.1vw, 2rem); }
.feat__item--main .col__title { font-size: clamp(2.25rem, 1.2rem + 3vw, 4rem); line-height: 1.04; }
.feat__item--main .col__excerpt { font-size: var(--fs-lede); line-height: 1.5; }

/* El archivo_ */
.cursor-archive { padding-bottom: clamp(64px, 9vw, 128px); }
.arch__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.arch__filter { display: inline-flex; gap: 8px; align-items: baseline; padding: 10px 14px; border: 1px solid var(--rule); color: var(--ink); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.arch__filter span { color: var(--ink-3); }
.arch__filter:hover { border-color: var(--ink); }
.arch__filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.arch__filter[aria-pressed="true"] span { color: var(--paper); opacity: 0.7; }
.arch__status { min-height: 1.4em; margin-bottom: 14px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }
.arch__list { border-top: 1px solid var(--ink); }
.arch__list > li { display: grid; grid-template-columns: 3.5rem minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--col-gap); row-gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.arch__list > li[hidden] { display: none; }
.col__n { color: var(--ink-3); padding-top: 2px; }
.col__main { display: grid; gap: 10px; }
.arch__list .col__title { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); }
.motion .arch__list > li.is-in { animation: hv-fade-up 380ms var(--ease) both; }
.arch__note { margin-top: 24px; color: var(--ink-2); font-size: var(--fs-small); }
.arch__note a { text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 3px; }

/* Firma editorial */
.cursor-author { padding-bottom: clamp(64px, 9vw, 128px); }
.cursor-author > .label { margin-bottom: 18px; }
.cauthor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; padding-top: 24px; border-top: 1px solid var(--ink); align-items: start; }
.cauthor__photo { grid-column: 1 / span 3; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--grid); }
.cauthor__body { grid-column: 5 / span 8; display: grid; gap: 14px; }
.cauthor__name { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); line-height: 0.9; text-transform: uppercase; }
.cauthor__role { font-size: var(--fs-lede); }
.cauthor__bio { color: var(--ink-2); line-height: 1.6; max-width: 60ch; }
.cauthor__note { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.3; max-width: 40ch; padding-left: 16px; border-left: 2px solid var(--mark); }
.cauthor__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 6px; }

@media (max-width: 1024px) {
  .cursor-hero__subtitle, .cursor-hero__text { grid-column: 1 / span 10; }
  .cursor-hero__source { grid-column: 1 / span 6; grid-row: auto; }
  .feat__item, .feat__item--main { grid-column: 1 / -1; grid-row: auto; }
  .arch__list > li { grid-template-columns: 3rem minmax(0, 1fr); }
  .arch__list > li .col__links { grid-column: 2; }
  .cauthor__photo { grid-column: 1 / span 4; }
  .cauthor__body { grid-column: 5 / -1; }
}
@media (max-width: 720px) {
  .cursor-hero__subtitle, .cursor-hero__text, .cursor-hero__source { grid-column: 1 / -1; }
  .arch__list > li { grid-template-columns: 1fr; padding: 20px 0; }
  .arch__list > li .col__links { grid-column: 1; }
  .col__n { display: none; }
  .arch__filter { padding: 10px 12px; }
  .cauthor__photo { grid-column: 1 / span 6; }
  .cauthor__body { grid-column: 1 / -1; }
}

/* =====================================================================
   Sistema gráfico · lote 1 (método, modelos, recorrido 360)
   Glifos en src/components/glyphs/. Retícula de 48 (diagramas 160 × 96), trazo de 1.5 px
   constante, terminaciones rectas, un solo acento por gráfico.
   Clases: d = trazo que se dibuja · h = discontinua · s = secundario · a = acento · f = relleno · plus = el + de H+V.
   ===================================================================== */
:root { --g-accent: var(--accent); }
.g { display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
/* Sin non-scaling-stroke (rompe pathLength en el dibujo): el grosor se calibra por tamaño de uso para dar 1.5 px. */
.g .s { stroke: var(--ink-3); }
.g .h { stroke-dasharray: 3 4; }
.g .a { stroke: var(--g-accent); }
.g .f { stroke: none; fill: currentColor; }
.g .s.f { fill: var(--ink-3); }
.g .a.f { fill: var(--g-accent); }
.g circle.d:not(.f), .g rect.d:not(.f) { fill: var(--paper); }
.motion .g.is-armed .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .g.is-armed .h, .motion .g.is-armed .f { opacity: 0; }
.motion .g.is-drawn .d { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(0.65, 0, 0.35, 1); }
.motion .g.is-drawn .h { opacity: 1; transition: opacity 500ms ease 500ms; }
.motion .g.is-drawn .f { opacity: 1; transition: opacity 400ms ease 800ms; }
.g .plus { transform-box: fill-box; transform-origin: center; transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.model:hover .g .plus, .model:focus-within .g .plus { transform: rotate(45deg); }

/* Aplicación en los componentes */
.step > .g { width: 44px; height: 44px; margin-bottom: 4px; stroke-width: 1.64; }
.model > .g { width: 100%; max-width: 240px; height: auto; aspect-ratio: 160 / 96; margin-bottom: 8px; stroke-width: 1; }
.journey li > .g { width: 40px; height: 40px; color: var(--data); margin-bottom: 4px; stroke-width: 1.8; }
.journey-loop { position: relative; height: 34px; margin-top: 22px; width: calc(80% + 4px); border: 1px dashed var(--data); border-top: 0; opacity: 0.8; }
.journey-loop::before { content: "↑"; position: absolute; left: -7px; top: -14px; color: var(--data); font: 500 0.875rem/1 var(--f-mono); }
.motion .journey-loop.is-armed { clip-path: inset(0 0 0 100%); transition: clip-path 1200ms cubic-bezier(0.65, 0, 0.35, 1) 400ms; }
.motion .journey-loop.is-drawn { clip-path: inset(0 0 0 0); }
@media (max-width: 720px) { .journey-loop { display: none; } }
@media (max-width: 780px) and (min-width: 721px) {
  .masthead { gap: 12px; }
  .masthead__cta { padding-inline: 0.75em; }
}

/* =====================================================================
   Sistema cromático · extensión (prueba 1)
   El violeta sigue siendo la marca. Magenta = creatividad y expresión; azul eléctrico =
   profundidad y tecnología. Blanco y negro siguen siendo protagonistas: el color aparece
   en bloques completos y en acentos puntuales, nunca repartido por todas partes.
   Contraste con texto blanco: violeta 6.6:1, azul 6.7:1, magenta 3.6:1 (solo luz, sin texto encima).
   ===================================================================== */
:root {
  --violet: #5b21ff;
  --magenta: #f000e5;
  --blue: #153bff;
  --ink-ed: #0c0b12;
  --paper-ed: #fafafa;
  /* Bloque de señal: base azul → violeta (donde vive el texto) y magenta como luz, nunca bajo texto pequeño. */
  --signal-bg:
    radial-gradient(60% 90% at 92% 18%, rgb(240 0 229 / 0.95) 0%, rgb(240 0 229 / 0) 70%),
    linear-gradient(118deg, var(--blue) 0%, var(--violet) 58%, #6a1cf5 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* En oscuro: negro editorial con luces de color, más dramático. */
    --signal-bg:
      radial-gradient(48% 80% at 90% 14%, rgb(240 0 229 / 0.85) 0%, rgb(240 0 229 / 0) 68%),
      radial-gradient(70% 90% at 64% 70%, rgb(91 33 255 / 0.9) 0%, rgb(91 33 255 / 0) 72%),
      radial-gradient(50% 70% at 6% 100%, rgb(21 59 255 / 0.75) 0%, rgb(21 59 255 / 0) 70%),
      var(--ink-ed);
  }
}
:root[data-theme="dark"] {
  --signal-bg:
    radial-gradient(48% 80% at 90% 14%, rgb(240 0 229 / 0.85) 0%, rgb(240 0 229 / 0) 68%),
    radial-gradient(70% 90% at 64% 70%, rgb(91 33 255 / 0.9) 0%, rgb(91 33 255 / 0) 72%),
    radial-gradient(50% 70% at 6% 100%, rgb(21 59 255 / 0.75) 0%, rgb(21 59 255 / 0) 70%),
    var(--ink-ed);
}

/* Prueba: testimonio destacado de la portada como bloque de señal */
.band--signal {
  --ink: #ffffff; --ink-2: rgb(255 255 255 / 0.88); --ink-3: rgb(255 255 255 / 0.78);
  --rule: rgb(255 255 255 / 0.28); --mark: #ffffff; --accent: #ffffff;
  color-scheme: dark;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--signal-bg); background-size: 140% 120%; background-position: 0% 0%;
  padding-block: clamp(96px, 14vw, 208px);
}
/* Retícula de 12 columnas, apenas visible, alineada con la del sitio */
.band--signal::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  left: max(var(--gutter), env(safe-area-inset-left, 0px)); right: max(var(--gutter), env(safe-area-inset-right, 0px));
  background-image: linear-gradient(90deg, rgb(255 255 255 / 0.09) 1px, transparent 1px);
  background-size: calc((100% + var(--col-gap)) / 12) 100%;
}
/* El + de la marca, monumental, en la zona de luz magenta; al pasar el cursor se vuelve × */
.signal-plus {
  position: absolute; z-index: -1; right: clamp(-80px, -4vw, -24px); top: 50%;
  width: clamp(260px, 42vw, 620px); height: auto; transform: translateY(-50%);
  fill: none; stroke: #ffffff; stroke-width: 0.6; opacity: 0.55; pointer-events: none;
  transition: transform 1200ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 600ms var(--ease);
}
.signal-plus path { vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.band--signal .quote blockquote p { color: #ffffff; font-size: clamp(2rem, 1rem + 3vw, 4.25rem); line-height: 1.06; max-width: 26ch; letter-spacing: -0.01em; }
.band--signal .quote figcaption { color: var(--ink-2); }
.band--signal .quote .link { color: #ffffff; text-decoration-color: rgb(255 255 255 / 0.7); }
.band--signal .quote .link:hover { color: #ffffff; text-decoration-color: #ffffff; }
.motion .band--signal { transition: background-position 1600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.motion .band--signal:hover { background-position: 100% 30%; }
.motion .band--signal:hover .signal-plus { transform: translateY(-50%) rotate(45deg); opacity: 0.7; }
@media (max-width: 720px) {
  .signal-plus { top: 20px; right: 20px; width: 72px; transform: none; opacity: 0.6; }
  .motion .band--signal:hover .signal-plus { transform: rotate(45deg); }
  .band--signal .quote blockquote p { max-width: none; }
}

/* =====================================================================
   Sistema cromático · cierres de servicio y barra de lectura
   Un solo bloque de color por página. El tono dominante sigue a la familia del servicio:
   violeta (marca: Estrategia, SEO), azul eléctrico (tecnología: Desarrollo web, CRM, Chatbots),
   magenta (creatividad: Marketing). El texto siempre queda sobre violeta, azul o negro.
   ===================================================================== */
.signal--blue {
  --signal-bg:
    radial-gradient(40% 70% at 66% 12%, rgb(91 33 255 / 0.95) 0%, rgb(91 33 255 / 0) 70%),
    radial-gradient(22% 45% at 70% 0%, rgb(240 0 229 / 0.6) 0%, rgb(240 0 229 / 0) 70%),
    linear-gradient(118deg, #1030e0 0%, var(--blue) 55%, #2f2bff 100%);
}
.signal--magenta {
  --signal-bg:
    radial-gradient(48% 95% at 68% 6%, rgb(240 0 229 / 1) 0%, rgb(240 0 229 / 0.55) 38%, rgb(240 0 229 / 0) 70%),
    linear-gradient(118deg, var(--violet) 0%, #6a1cf5 55%, #8c18ee 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .signal--blue {
    --signal-bg:
      radial-gradient(48% 80% at 90% 14%, rgb(91 33 255 / 0.8) 0%, rgb(91 33 255 / 0) 68%),
      radial-gradient(75% 95% at 50% 80%, rgb(21 59 255 / 0.9) 0%, rgb(21 59 255 / 0) 72%),
      var(--ink-ed);
  }
  :root:not([data-theme="light"]) .signal--magenta {
    --signal-bg:
      radial-gradient(55% 90% at 90% 12%, rgb(240 0 229 / 0.95) 0%, rgb(240 0 229 / 0) 68%),
      radial-gradient(70% 90% at 50% 80%, rgb(91 33 255 / 0.85) 0%, rgb(91 33 255 / 0) 72%),
      var(--ink-ed);
  }
}
:root[data-theme="dark"] .signal--blue {
  --signal-bg:
    radial-gradient(48% 80% at 90% 14%, rgb(91 33 255 / 0.8) 0%, rgb(91 33 255 / 0) 68%),
    radial-gradient(75% 95% at 50% 80%, rgb(21 59 255 / 0.9) 0%, rgb(21 59 255 / 0) 72%),
    var(--ink-ed);
}
:root[data-theme="dark"] .signal--magenta {
  --signal-bg:
    radial-gradient(55% 90% at 90% 12%, rgb(240 0 229 / 0.95) 0%, rgb(240 0 229 / 0) 68%),
    radial-gradient(70% 90% at 50% 80%, rgb(91 33 255 / 0.85) 0%, rgb(91 33 255 / 0) 72%),
    var(--ink-ed);
}
/* El cierre dentro del bloque: misma tipografía, sobre color. */
.cta-signal .cta { border-top: 0; padding-block: 0; }
.cta-signal .cta .label { color: var(--ink-2); }
.cta-signal .cta__title { color: #ffffff; max-width: 20ch; }
.cta-signal .cta__text { color: var(--ink-2); }
.band--signal .btn { background: #ffffff; color: var(--ink-ed); }
.band--signal .btn:hover { background: var(--ink-ed); color: #ffffff; }
.band--signal .link { color: #ffffff; }
.band--signal .link:hover { color: #ffffff; }
.band--signal .btn:focus-visible, .band--signal .link:focus-visible { outline-color: #ffffff; }

/* Barra de lectura de los artículos: el hilo azul → violeta → magenta */
.motion .read-progress { background: linear-gradient(90deg, var(--blue), var(--violet) 55%, var(--magenta)); }

/* =====================================================================
   Sistema cromático · acentos menores
   ===================================================================== */
:root { --grad-text: linear-gradient(90deg, var(--blue) 0%, var(--violet) 50%, var(--magenta) 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --grad-text: linear-gradient(90deg, #6f8bff 0%, #9b7bff 50%, #ff4df0 100%); }
}
:root[data-theme="dark"] { --grad-text: linear-gradient(90deg, #6f8bff 0%, #9b7bff 50%, #ff4df0 100%); }

/* 3 · Marketing: «COMUNICAR.» se revela con el degradado (antes, violeta plano) */
.ww--key { background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion .wordwall__words.is-in .ww--key { color: transparent; transition-delay: 500ms; }

/* 4 · CURSOR_: el cursor en magenta y la línea del destacado principal como hilo de color */
.cursor-hero__title .caret, .col__title a::after { color: var(--magenta); }
.feat__item--main { border-top: 0; background: var(--grad-text) no-repeat 0 0 / 100% 3px; }

/* 5 · Hover: el subrayado de los enlaces y el nombre del servicio en el megamenú pasan al degradado */
.link:hover { background-image: var(--grad-text); background-size: 100% 2px; }
.band--signal .link:hover { background-image: linear-gradient(#ffffff, #ffffff); }
.mega__svc:hover .mega__name, .mega__svc:focus-visible .mega__name {
  background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 6 · 404 y gracias: la página entera es un momento de color */
.page-signal { padding-block: clamp(48px, 7vw, 96px) clamp(96px, 12vw, 176px); min-height: 70vh; }
.page-signal .page-hero { padding-bottom: 0; }
.page-signal .page-title { color: #ffffff; }
.page-signal .lede { color: var(--ink-2); }

/* =====================================================================
   Hero de Estrategia: escena 3D «El camino entre el caos y la estrategia» (js/modules/maze.js)
   Capa de fondo del hero: no cambia alturas ni mueve el texto. La máscara disuelve la escena
   hacia la izquierda, donde vive el texto.
   ===================================================================== */
.hero__scene {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.18) 30%, #000 56%), linear-gradient(180deg, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.18) 30%, #000 56%), linear-gradient(180deg, #000 82%, transparent 100%);
          mask-composite: intersect;
  transition: opacity 1200ms var(--ease);
}
.hero__scene.is-ready { opacity: 1; }
.hero__scene canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) {
  .hero__scene {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.5) 45%, #000 80%);
            mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.5) 45%, #000 80%);
  }
  .hero__scene.is-ready { opacity: 0.55; }
}

/* Heroes con imagen, video o escena: la retícula de columnas se retira para no meter ruido sobre el visual. */
.hero--scene > .cols, .hero--media > .cols { display: none; }

/* Hero de Chatbots: escultura de esferas de cristal (js/modules/spheres.js).
   Presencia monumental a la derecha; puede pasar parcialmente detrás del titular. */
.hero__scene[data-scene="spheres"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.3) 26%, #000 50%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.3) 26%, #000 50%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}
@media (max-width: 720px) {
  /* Móvil: la escultura arriba a la derecha, junto a los metadatos; no llega al titular ni al texto. */
  .hero__scene[data-scene="spheres"] {
    -webkit-mask-image: radial-gradient(120% 34% at 100% 6%, #000 0%, #000 45%, transparent 100%);
            mask-image: radial-gradient(120% 34% at 100% 6%, #000 0%, #000 45%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .hero__scene[data-scene="spheres"].is-ready { opacity: 0.9; }
}

/* Hero de SEO/GEO: universo de estructuras (js/modules/monoliths.js). Panorámico, la protagonista a la derecha. */
.hero__scene[data-scene="monoliths"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.35) 24%, #000 48%), linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.35) 24%, #000 48%), linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
          mask-composite: intersect;
}
@media (max-width: 720px) {
  .hero__scene[data-scene="monoliths"] {
    -webkit-mask-image: radial-gradient(130% 40% at 100% 4%, #000 0%, #000 45%, transparent 100%);
            mask-image: radial-gradient(130% 40% at 100% 4%, #000 0%, #000 45%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
}
/* La protagonista responde al clic: el cursor lo anuncia solo sobre ella. */
.hero.is-scene-hot { cursor: pointer; }

/* =====================================================================
   Hero — nebulosa digital (js/modules/nebula.js): evolución de la constelación; usa su misma capa.
   La nebulosa llega a los bordes derechos y superior (continúa fuera del encuadre) y se desvanece hacia
   la izquierda y antes de la introducción y las notas.
   ===================================================================== */
.constellation--nebula {
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, rgb(0 0 0 / 0.45) 30%, #000 54%), linear-gradient(180deg, #000 52%, transparent 80%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 6%, rgb(0 0 0 / 0.45) 30%, #000 54%), linear-gradient(180deg, #000 52%, transparent 80%);
          mask-composite: intersect;
}
@media (max-width: 720px) {
  .constellation--nebula {
    opacity: 0.7;
    -webkit-mask-image: linear-gradient(180deg, #000 24%, transparent 38%);
            mask-image: linear-gradient(180deg, #000 24%, transparent 38%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
}

/* Hero de Marketing digital: «El prisma creativo» (js/modules/prism.js). Ocupa el lugar del reel, sin
   contenedor: la escultura flota a la derecha y se disuelve hacia el titular. */
.hero__scene[data-scene="prism"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, rgb(0 0 0 / 0.5) 42%, #000 60%), linear-gradient(180deg, transparent 0%, #000 8%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 22%, rgb(0 0 0 / 0.5) 42%, #000 60%), linear-gradient(180deg, transparent 0%, #000 8%, #000 90%, transparent 100%);
          mask-composite: intersect;
}
/* Sin WebGL: la misma escultura como imagen fija (render de la escena) */
.hero__scene[data-scene="prism"].is-static { opacity: 1; background: url(/assets/img/hero/prisma-claro.webp) right center / cover no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero__scene[data-scene="prism"].is-static { background-image: url(/assets/img/hero/prisma-oscuro.webp); } }
:root[data-theme="dark"] .hero__scene[data-scene="prism"].is-static { background-image: url(/assets/img/hero/prisma-oscuro.webp); }
@media (max-width: 720px) {
  .hero__scene[data-scene="prism"] {
    -webkit-mask-image: radial-gradient(125% 38% at 100% 6%, #000 0%, #000 50%, transparent 100%);
            mask-image: radial-gradient(125% 38% at 100% 6%, #000 0%, #000 50%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .hero__scene[data-scene="prism"].is-ready { opacity: 0.95; }
}