/* ═══════════════════════════════════════════════════════════════════════════
   AgentiCo.cl — hoja de estilos única
   Sistema visual heredado de zeroauno.com, en versión clara: fondo casi
   blanco con grano y grilla, celdas blancas en grillas con separación de
   1px, Inter Tight para titulares con tracking negativo, JetBrains Mono para
   etiquetas en mayúsculas y hairlines en vez de tarjetas de vidrio.
   El verde "live" se reparte en dos: --live (verde bosque, legible como
   texto sobre claro) y --live-bright (el lima original, solo para rellenos,
   halos y detalles sobre tinta). El degradado verde → azul viene del favicon.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --bg: #f6f7f3;
  --bg-2: #edf0e9;
  --card: #ffffff;
  --card-hover: #f6faf2;
  --surface: rgba(255, 255, 255, .72);
  --text: #0f1410;
  --white: #ffffff;
  --muted: #4f5751;
  --faint: #636b65;
  --line: rgba(15, 20, 16, .09);
  --line-soft: rgba(15, 20, 16, .06);
  --line-strong: rgba(15, 20, 16, .17);
  --line-solid: #e1e3df; /* --line ya compuesta sobre --bg, para rayas que se solapan */

  --ink: #0f1410;
  --on-ink: #f6f7f3;
  --on-ink-muted: rgba(246, 247, 243, .74);

  --live: #177a26;
  --live-deep: #11601d;
  --live-bright: #a3ff7a;
  --live-glow: rgba(95, 210, 60, .38);
  --live-dim: rgba(95, 210, 60, .12);
  --live-wash: rgba(141, 233, 113, .16);
  --blue: #0a6fc2;
  --line-studio: #0f766a; /* tramo medio del degradado; One usa --live y Deployment --blue */
  --accent: var(--live);
  --on-live: #ffffff;
  --grad-brand: linear-gradient(100deg, var(--live) 0%, var(--blue) 50%, var(--live) 100%);

  --warn-line: rgba(176, 116, 16, .38);
  --warn-bg: #fbf3e2;
  --warn-text: #7a4e06;

  --shadow-soft: 0 1px 2px rgba(15, 20, 16, .04), 0 12px 32px -18px rgba(15, 20, 16, .18);
  --shadow-lift: 0 30px 80px -40px rgba(15, 20, 16, .28), 0 18px 60px -40px rgba(95, 210, 60, .35);

  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(1.25rem, 4.5vw, 5.5rem);
  --section-space: clamp(6rem, 12vw, 12rem);
  --shell: 1440px;
  --header-h: 72px;
  --radius: 18px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  --page-progress: 0%;
  --mx: 50%;
  --my: 40%;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
strong { color: var(--text); font-weight: 500; }

::selection { background: var(--live-bright); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 5px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  padding: .7rem 1rem;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* ── Fondo ambiental ───────────────────────────────────────────────────── */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, #ffffff 0%, var(--bg) 60%);
}
.bg > * { position: absolute; inset: 0; }

.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
/* a1 sigue al cursor (--mx/--my los fija el JS); el resto son fijos. */
.aurora .a1 {
  width: 60vmax;
  height: 60vmax;
  left: var(--mx);
  top: var(--my);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(141, 233, 113, .22) 0%, transparent 60%);
  transition: left 900ms var(--ease-out), top 900ms var(--ease-out);
}
.aurora .a2 {
  width: 45vmax;
  height: 45vmax;
  right: -12vmax;
  bottom: -18vmax;
  background: radial-gradient(circle, rgba(10, 111, 194, .09) 0%, transparent 65%);
}
.aurora .a3, .aurora .a4 { display: none; }

.mesh-grid {
  opacity: .7;
  background-image:
    linear-gradient(rgba(15, 20, 16, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 20, 16, .045) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, #000 0%, transparent 100%);
}

.particles { display: none; }

.grain {
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-glow { display: none; }

.progress-line {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
  height: 2px;
  width: var(--page-progress);
  background: linear-gradient(90deg, var(--live), var(--blue));
  box-shadow: 0 0 12px var(--live-glow);
  pointer-events: none;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

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

main { position: relative; padding-top: var(--header-h); }

.section { position: relative; padding: var(--section-space) 0; }
.section::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--line);
}
.section-alt { background: linear-gradient(180deg, var(--bg-2), transparent 70%); }

.section-head { max-width: 62rem; margin-bottom: clamp(3.5rem, 6vw, 6rem); }

/* ── Tipografía ────────────────────────────────────────────────────────── */

.h1, .h2, .h3, .hero-title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .92;
  text-wrap: balance;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 9rem);
  line-height: .88;
  letter-spacing: -.055em;
  max-width: 14ch;
}
.hero-title em, .h1 em, .h2 em {
  font-style: normal;
  background: var(--grad-brand);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 6s linear infinite;
}
@keyframes sheen { to { background-position: -200% 0; } }

.h1 {
  font-size: clamp(2.8rem, 6.4vw, 7rem);
  max-width: 16ch;
}
.h1-case { max-width: 20ch; font-size: clamp(2.4rem, 5.4vw, 5.8rem); }

.h2 { font-size: clamp(2.4rem, 4.8vw, 5.2rem); }

.h3 {
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  font-weight: 500;
}

.accent, .co { color: var(--live); }
.muted { color: var(--muted); }

.lead {
  margin: 1.8rem 0 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.6;
}
.lead-wide { max-width: 42rem; }
.lead-center { margin-left: auto; margin-right: auto; }

.kicker {
  margin: clamp(3rem, 5vw, 5rem) 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  color: var(--live);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.5rem;
  color: var(--live);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.eyebrow .pip, .status-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px var(--live-dim), 0 0 12px var(--live-glow);
  flex: 0 0 auto;
}
.eyebrow .pip::after, .status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--live);
  opacity: 0;
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0% { transform: scale(.4); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

.arrow { display: inline-block; color: var(--live); transition: transform 200ms var(--ease-out); }

/* ── Botones ───────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 54px;
  padding: 0 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.btn .arrow { color: inherit; }
.btn:hover .arrow { transform: translateX(5px); }

.btn-sm { min-height: 40px; padding: 0 1.1rem; font-size: .78rem; }
.btn-block { display: flex; width: 100%; }

/* Primario en tinta con la flecha en lima: el lima solo se lee bien sobre oscuro. */
.btn-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}
.btn-primary .arrow { color: var(--live-bright); }
.btn-primary:hover {
  transform: translateY(-2px);
  border-color: var(--live-deep);
  background: var(--live-deep);
  box-shadow: 0 14px 34px -12px rgba(17, 96, 29, .55);
}

.btn-ghost { background: var(--surface); }
.btn-ghost:hover { border-color: var(--live); background: var(--live-dim); color: var(--live-deep); }

.btn-link {
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-weight: 500;
}
.btn-link .arrow { color: var(--live); }
.btn-link:hover { color: var(--text); }

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  background: linear-gradient(to bottom, rgba(246, 247, 243, .9), rgba(246, 247, 243, .62));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.site-header::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}
.site-header.nav-open { background: var(--bg); }

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  height: 100%;
}

.brand {
  width: max-content;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  white-space: nowrap;
}
.brand .co { text-shadow: none; }
.brand .dot-cl { color: var(--faint); }

.main-nav {
  display: flex;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.main-nav a {
  padding: .5rem .9rem;
  border-radius: 999px;
  transition: color 180ms ease, background 180ms ease;
}
.main-nav a:hover { color: var(--text); background: rgba(15, 20, 16, .05); }
.main-nav a.active { color: var(--live); background: var(--live-dim); }

.header-actions { justify-self: end; display: flex; align-items: center; gap: .8rem; }
.header-actions .btn-primary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.header-actions .btn-primary::after { content: "→"; color: var(--live); transition: transform 180ms ease; }
.header-actions .btn-primary:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--live);
  background: var(--live-dim);
}
.header-actions .btn-primary:hover::after { transform: translateX(4px); }

.nav-toggle {
  display: none;
  min-width: 44px;
  height: 44px;
  padding: 0 .2rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  align-items: center;
  gap: .45rem;
}
.nav-toggle::before { content: "Menú"; }
.nav-toggle::after { content: "+"; color: var(--live); font-size: .9rem; }
.nav-toggle[aria-expanded="true"]::after { content: "−"; }
.nav-toggle span { display: none; }

.mobile-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  display: grid;
  gap: .2rem;
  padding: 1rem var(--gutter) 1.6rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 24px 40px -24px rgba(15, 20, 16, .18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 1101px) { .mobile-nav { display: none; } }
.mobile-nav a {
  min-height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
}
.mobile-nav a.active { color: var(--live); }
.mobile-nav .mobile-cta {
  margin-top: 1rem;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
}

/* ── Hero (inicio) ─────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  padding: clamp(3.5rem, 8vh, 6rem) 0 clamp(3rem, 6vh, 5rem);
}

/* Video de fondo. Sube por detrás del header translúcido para que el cuadro
   parta en el borde de la ventana. Mientras carga, o si el visitante pidió
   menos movimiento, se ve el póster (un cuadro del mismo video); el video
   entra encima con un fundido recién cuando está reproduciendo. El velo claro
   es más denso a la izquierda, donde va el titular, y abajo funde con el
   fondo para que la banda de confianza entre sin corte. */
.hero-media {
  position: absolute;
  top: calc(-1 * var(--header-h));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: url("../img/agentico-androide-poster.jpg") 50% 32% / cover no-repeat;
}
.hero-media video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 32%;
  opacity: 0;
  transition: opacity 1600ms var(--ease-out);
}
.hero-media video.is-playing { opacity: 1; }
/* Tres capas de velo: abajo funde con la página, arriba aclara la franja del
   header y de la fila kicker/ruta, y de izquierda a derecha deja limpio el
   titular. El video queda más visible al centro-derecha, donde no hay texto. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(246, 247, 243, 0) 34%),
    linear-gradient(to bottom, rgba(246, 247, 243, .9) 0%, rgba(246, 247, 243, .55) 22%, rgba(246, 247, 243, 0) 44%),
    linear-gradient(90deg, rgba(246, 247, 243, .94) 0%, rgba(246, 247, 243, .84) 40%, rgba(246, 247, 243, .5) 72%, rgba(246, 247, 243, .38) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--line);
}

.hero-inner {
  position: relative;
  z-index: 2;
  min-height: calc(100svh - var(--header-h) - clamp(6.5rem, 14vh, 11rem));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: 1rem;
}

.hero-kicker {
  grid-column: 1 / 6;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: .7rem;
  padding: .5rem .9rem .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-path {
  grid-column: 8 / 13;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  /* halo del color de fondo: invisible sobre claro, despega el texto del video */
  text-shadow: 0 0 18px rgba(246, 247, 243, .95), 0 0 4px rgba(246, 247, 243, .85);
}
.hero-path .one { color: var(--live); }
.hero-path-line { position: relative; height: 1px; background: var(--line-strong); }
.hero-path-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--live);
  border-right: 1px solid var(--live);
  transform: translateY(-50%) rotate(45deg);
}
.hero-path-line i {
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 50%;
  background: linear-gradient(90deg, transparent, var(--live));
  box-shadow: 0 0 12px var(--live-glow);
  animation: travel 3.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes travel {
  0% { width: 0; opacity: 0; }
  12% { opacity: 1; }
  70% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

.hero-inner .hero-title {
  grid-column: 1 / 10;
  grid-row: 2;
  align-self: center;
  margin: clamp(3rem, 7vh, 6rem) 0;
}

.hero-bottom {
  grid-column: 1 / 13;
  grid-row: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.hero-lead {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.5;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 1.8rem);
  margin-top: 2.5rem;
}
.hero-bottom .hero-actions { margin-top: 0; flex: 0 0 auto; }
.hero-actions-center { justify-content: center; }

.hero-note {
  grid-column: 1 / 13;
  margin: 2rem 0 0;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scroll-cue, .scroll-hint {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(6rem, 12vh, 8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.scroll-cue span:last-child { animation: nudge 2s ease-in-out infinite; text-orientation: upright; }

/* Riel derecho del hero: pausa del video de fondo sobre el indicador de scroll. */
.hero-rail {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: clamp(6rem, 12vh, 8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.hero-rail .scroll-cue {
  position: static;
  padding: .9rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: color 200ms ease, border-color 200ms ease;
}
.hero-rail .scroll-cue:hover { color: var(--text); border-color: var(--line-strong); }

.hero-media-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.hero-media-toggle:hover { border-color: var(--live); background: var(--card); color: var(--live-deep); }
.hero-media-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-media-toggle .icon-play { fill: currentColor; stroke-width: 1.5; }
.hero-media-toggle[data-state="playing"] .icon-play,
.hero-media-toggle[data-state="paused"] .icon-pause { display: none; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.scroll-hint .line { display: block; width: 1px; height: 58px; background: linear-gradient(180deg, transparent, var(--live), transparent); }

/* ── Banda de confianza ────────────────────────────────────────────────── */

.trust-band { border-bottom: 1px solid var(--line); }
/* La grilla es también .shell: un fondo de rayas pintaría el gutter. Cada
   celda dibuja su marco con una sombra de 1px en color sólido, que rellena
   el gap sin oscurecerse donde dos celdas se tocan, en 4, 2 o 1 columna. */
.trust-band-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.6rem 1.4rem;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line-solid);
  transition: background 220ms ease;
}
.trust-item:hover { background: var(--card-hover); }
.trust-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.trust-item:hover .trust-label { color: var(--live); }
.trust-body {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--text);
}

/* ── Hero de páginas interiores ────────────────────────────────────────── */

.page-hero {
  position: relative;
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 5vw, 5rem);
}
.page-hero::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--line);
}
.page-hero-tight { padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.page-hero-center { text-align: center; min-height: 62vh; display: grid; place-items: center; }
.page-hero-center .h1, .page-hero-center .eyebrow { margin-inline: auto; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  margin-bottom: 1.4rem;
  color: var(--muted);
  font-size: .85rem;
  transition: color 200ms ease;
}
.back-link:hover { color: var(--text); }
.back-link:hover .arrow { transform: translateX(-5px); }

/* ── Pasos 01 / 02 / 03 ────────────────────────────────────────────────── */

.steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.steps::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 1px;
  right: 1px;
  height: 1px;
  background: var(--line-strong);
}

.step { position: relative; padding-top: 2.6rem; }
.step::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--faint);
  border-radius: 50%;
  background: var(--bg);
  transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}
.step.in::before { background: var(--live); border-color: var(--live); box-shadow: 0 0 0 4px var(--live-dim), 0 0 16px var(--live-glow); }

.step-num {
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--faint);
  transition: color 500ms ease;
}
.step.in .step-num { color: var(--text); }

.step-body h3 {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.step-body p {
  margin: 0;
  max-width: 29rem;
  color: var(--muted);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
}

/* ── Celdas en grilla de 1px (principios, evals, protocolos, casos) ───── */

.glyph {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 200ms ease;
}
.glyph svg {
  width: 22px;
  height: 22px;
  stroke: var(--live);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Las rayas de 1px las dibuja cada celda con una sombra sólida sobre el gap
   (no el fondo de la grilla): así el hueco de una fila incompleta queda
   blanco y no como un bloque gris. */
.principles, .eval-grid, .case-grid, .proto-grid {
  display: grid;
  gap: 1px;
  background: var(--card);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.principles { grid-template-columns: repeat(2, 1fr); }
.eval-grid { grid-template-columns: repeat(4, 1fr); }
.case-grid { grid-template-columns: repeat(3, 1fr); }
.proto-grid { grid-template-columns: repeat(2, 1fr); }

.principle, .eval, .case-card, .proto {
  position: relative;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line-solid);
  transition: background 240ms ease;
}
.principle::after, .eval::after, .case-card::after, .proto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 110%, rgba(141, 233, 113, .22), transparent 70%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.principle:hover, .eval:hover, .case-card:hover, .proto:hover { background: var(--card-hover); }
.principle:hover::after, .eval:hover::after, .case-card:hover::after, .proto:hover::after { opacity: 1; }
.principle:hover .glyph, .eval:hover .glyph, .proto:hover .glyph { border-color: var(--live); }

.principle { padding: 2rem clamp(1.4rem, 2.2vw, 2.2rem) 2.2rem; }
.principle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.2rem;
}
.principle-num {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--faint);
  transition: color 200ms ease;
}
.principle:hover .principle-num { color: var(--live); }
.principle h3, .eval h3, .case-card h3, .proto h3 {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.principle p, .eval p, .case-card p, .proto p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(.92rem, 1.05vw, 1rem);
  line-height: 1.6;
}

.eval { padding: 1.8rem 1.4rem 2rem; }
.eval .glyph { margin-bottom: 1.8rem; }
.eval h3 { font-size: clamp(1.1rem, 1.35vw, 1.35rem); }

/* Casos */
.case-card { display: flex; flex-direction: column; padding: 1.8rem 1.6rem 1.8rem; }
.case-sector {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 200ms ease;
}
.case-card:hover .case-sector { color: var(--live); }
.case-metric { margin: 2.6rem 0 1.6rem; display: flex; align-items: baseline; gap: .8rem; }
.case-metric strong {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.6vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--text);
}
.case-metric span {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-card p { margin-bottom: 1.8rem; }
.case-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--muted);
  font-size: .85rem;
  transition: color 200ms ease;
}
.case-card:hover .case-more { color: var(--text); }
.case-card:hover .arrow { transform: translateX(5px); }

.case-stats {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.5rem;
}
.case-stat { display: flex; align-items: baseline; gap: .9rem; }
.case-stat strong {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--live);
}
.case-stat span {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-stack { display: flex; flex-wrap: wrap; gap: .5rem; }

.case-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.case-article h2 { margin: 0 0 1rem; }
.case-article h2:not(:first-child) { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.case-article p {
  margin: 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.65;
}

.case-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.8rem);
  padding: 1.8rem 1.6rem;
  display: grid;
  gap: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.case-aside h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.case-aside p { margin: 0 0 .6rem; color: var(--muted); font-size: .92rem; line-height: 1.55; }

.draft-note {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 1.6rem 0 0;
  max-width: 42rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-xs);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: .88rem;
  line-height: 1.5;
}
.draft-note span {
  flex: 0 0 auto;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: rgba(176, 116, 16, .12);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Protocolos / capacidades */
.proto {
  padding: 1.8rem 1.6rem 2rem;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.4rem;
  align-items: start;
  scroll-margin-top: calc(var(--header-h) + 1.8rem);
}
.proto h3 { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.proto p { margin: .6rem 0 1.2rem; }

.tag {
  padding: .25rem .6rem;
  border: 1px solid var(--live);
  border-radius: 999px;
  color: var(--live);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tag.muted { border-color: var(--line-strong); color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .04em;
  transition: border-color 200ms ease, color 200ms ease;
}
.chip:hover { border-color: var(--live); color: var(--live); }

/* ── Flujo A2A ─────────────────────────────────────────────────────────── */

.flow {
  position: relative;
  margin-top: 1px;
  padding: 2.6rem clamp(1.4rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 1.8rem);
}
.flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 50% 100%, rgba(141, 233, 113, .2), transparent 70%);
  pointer-events: none;
}
.flow-title {
  position: relative;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.flow-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.flow-node {
  flex: 0 0 auto;
  min-width: 12rem;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.flow-node .ico {
  width: 38px;
  height: 38px;
  margin: 0 auto .8rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}
.flow-node .ico svg {
  width: 18px;
  height: 18px;
  stroke: var(--live);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-node .label { font-family: var(--font-display); font-size: 1rem; font-weight: 500; letter-spacing: -.02em; }
.flow-node .sub { margin-top: .3rem; color: var(--faint); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }
.flow-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--live);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.flow-link .line { width: 2.4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--live), transparent); }

/* ── Split y listas ────────────────────────────────────────────────────── */

.split {
  margin-top: clamp(3rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line-strong);
}
.split-col h3 {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.ticks, .numbered { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.55;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: .8rem;
  height: 1px;
  background: var(--live);
}
.numbered { counter-reset: n; gap: 1.1rem; }
.numbered li {
  counter-increment: n;
  position: relative;
  padding-left: 2.6rem;
  color: var(--muted);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
}
.numbered li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .3em;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--live);
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq { display: grid; max-width: 58rem; border-top: 1px solid var(--line-strong); }
.faq-item { position: relative; border-bottom: 1px solid var(--line); }
.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--live);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
.faq-item[open]::before, .faq-item:hover::before { transform: scaleX(1); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.6rem;
  padding: 1.2rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark {
  flex: 0 0 auto;
  color: var(--live);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  transition: transform 300ms var(--ease-out);
}
.faq-item[open] .faq-mark { transform: rotate(45deg); }
.faq-item p {
  margin: 0;
  padding: 0 0 1.6rem;
  max-width: 44rem;
  color: var(--muted);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.62;
}

/* ── Blog ──────────────────────────────────────────────────────────────── */

.post-list { display: grid; border-top: 1px solid var(--line-strong); }
.post {
  position: relative;
  display: block;
  padding: clamp(2rem, 3vw, 3rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding 320ms var(--ease-out);
}
.post::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--live);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
.post:hover { padding-left: 1rem; }
.post:hover::before { transform: scaleX(1); }
.post:hover .arrow { transform: translateX(5px); }
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.post h2 {
  margin: 0 0 .8rem;
  max-width: 28ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  text-wrap: balance;
}
.post p {
  margin: 0 0 1.4rem;
  max-width: 44rem;
  color: var(--muted);
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
}
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.post-meta .sep { opacity: .5; }
.post-more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--muted);
  font-family: var(--font);
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: none;
  transition: color 200ms ease;
}
.post:hover .post-more { color: var(--text); }

/* Cuerpo de una nota. Se monta sobre .case-article, que solo separa h2 de p;
   aquí va el ritmo entre bloques y las piezas propias de una nota: cita,
   recuadro, cifras, tarjetas, hitos y código. */

.post-article { min-width: 0; } /* deja que .post-code haga scroll en vez de ensanchar la grilla */
.case-article.post-article > * + * { margin-top: 1.2rem; }
.post-article > :is(.flow, .post-quote, .post-callout, .post-stats, .post-cards, .post-timeline, .post-code) { margin-block: 2.2rem; }
.post-article strong { color: var(--text); font-weight: 500; }
.post-article :is(p, li) a { color: var(--text); text-decoration: underline; text-decoration-color: var(--live); text-underline-offset: .2em; }
.post-article :is(.ticks, .numbered) { max-width: 36rem; }
.post-article .flow-node { min-width: 9rem; padding: 1.1rem .9rem; }
.post-article .flow-link .line { width: 1.4rem; }

.post-quote { margin-inline: 0; max-width: 38rem; padding: .2rem 0 .2rem 1.6rem; border-left: 1px solid var(--live); }
.post-quote p {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: -.02em;
  line-height: 1.45;
}
.post-quote footer {
  margin-top: 1rem;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  line-height: 1.6;
  text-transform: uppercase;
}
.post-quote footer strong { color: var(--muted); }

.post-callout {
  max-width: 38rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--live-dim);
}
.post-callout > strong {
  display: block;
  margin-bottom: .5rem;
  color: var(--live);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.post-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.8rem 2rem;
  padding: 1.8rem 0;
  border-block: 1px solid var(--line);
}
.post-stats:has(+ h2) { border-bottom: 0; } /* el h2 siguiente ya trae su raya */
.post-stat { display: grid; gap: .6rem; align-content: start; }
.post-stat strong {
  color: var(--live);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: -.05em;
  line-height: 1;
}
.post-stat span {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.post-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.post-card {
  display: grid;
  align-content: start;
  gap: .8rem;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.post-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.post-card-kicker {
  color: var(--live);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.post-card p, .post-card li { font-size: .92rem; line-height: 1.55; }

.post-timeline { margin: 0; max-width: 38rem; display: grid; gap: 1.2rem; }
.post-timeline div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.post-timeline dt {
  padding-top: .3em;
  color: var(--live);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.post-timeline dd { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.post-timeline dd strong { display: block; margin-bottom: .2rem; }

.post-code {
  max-width: 38rem;
  margin: 0;
  padding: 1.3rem 1.4rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.7;
}
.post-code .c { color: var(--faint); }
.post-code .s { color: var(--live); }

@media (max-width: 760px) {
  .post-cards { grid-template-columns: 1fr; }
  .post-timeline div { grid-template-columns: 1fr; gap: .4rem; }
}

/* ── Talento ───────────────────────────────────────────────────────────── */

.role-list { display: grid; border-top: 1px solid var(--line-strong); }
.role {
  position: relative;
  padding: clamp(2rem, 3vw, 3rem) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 1.2rem;
  justify-items: start;
  transition: padding 320ms var(--ease-out);
}
.role::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--live);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
.role:hover { padding-left: 1rem; }
.role:hover::before { transform: scaleX(1); }
.role-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.4rem; width: 100%; }
.role h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}
.role-kind {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}
.role p { margin: 0; max-width: 44rem; color: var(--muted); font-size: clamp(.95rem, 1.15vw, 1.05rem); line-height: 1.6; }

/* ── Banda CTA ─────────────────────────────────────────────────────────── */

.cta-band {
  position: relative;
  margin: clamp(3rem, 6vw, 6rem) 0 clamp(4rem, 8vw, 8rem);
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 4rem);
  display: grid;
  gap: 2.5rem;
  justify-items: center;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 60% at 50% 100%, rgba(141, 233, 113, .3), transparent 70%),
    radial-gradient(40% 50% at 85% 110%, rgba(10, 111, 194, .1), transparent 70%);
  pointer-events: none;
}
.cta-band-copy { position: relative; z-index: 1; }
.cta-band h2 {
  margin: 0;
  max-width: 16ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.2vw, 5.6rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .88;
  text-wrap: balance;
}
.cta-band p {
  margin: 1.8rem auto 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.55;
}
.cta-band-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ── Bloque destacado con video (feature) ──────────────────────────────── */

/* Única isla oscura del sitio: el video se lee mejor con velo de tinta, así
   que dentro del bloque el texto va en claro y el acento en lima. */
.feature-media {
  position: relative;
  display: block;
  margin-top: clamp(3rem, 5vw, 5rem);
  aspect-ratio: 16 / 9;
  max-height: 80svh;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* póster debajo por si el video no corre (movimiento reducido); es otro
     cuadro que el del hero para que el home no repita la misma imagen */
  background: var(--ink) url("../img/agentico-androide-poster-frente.jpg") center / cover no-repeat;
  color: var(--on-ink);
  box-shadow: var(--shadow-lift);
  isolation: isolate;
}
.feature-media .eyebrow, .feature-media .arrow { color: var(--live-bright); }
.feature-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
  transition: transform 1200ms var(--ease-out), filter 600ms ease;
}
.feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 20, 16, .9) 0%, rgba(15, 20, 16, .35) 45%, rgba(15, 20, 16, .08) 100%);
  pointer-events: none;
}
.feature-media:hover .feature-video { transform: scale(1.03); filter: saturate(1) contrast(1.05); }
.feature-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  gap: 1.2rem;
}
.feature-overlay .eyebrow { margin: 0; }
.feature-overlay h3 {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 5rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .9;
}
.feature-cta {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--on-ink-muted);
  font-size: .85rem;
  transition: color 200ms ease;
}
.feature-media:hover .feature-cta { color: var(--on-ink); }
.feature-media:hover .feature-cta .arrow { transform: translateX(5px); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer {
  position: relative;
  padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
  color: var(--muted);
  font-size: .85rem;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 6rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}
.footer-brand .brand { display: inline-block; margin-bottom: 1rem; font-size: 1.3rem; }
.footer-tag { margin: 0 0 1.6rem; color: var(--muted); line-height: 1.5; }

.footer-contact { display: grid; gap: .6rem; }
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  transition: color 180ms ease;
}
.footer-contact a:hover { color: var(--live); }
.footer-contact svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.footer-col { display: grid; align-content: start; gap: .6rem; }
.footer-col h4 {
  margin: 0 0 .4rem;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-col a { color: var(--muted); transition: color 180ms ease; }
.footer-col a:hover { color: var(--live); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .04em;
}
.footer-bottom p { margin: 0; }
.footer-backed a { color: var(--live); }
.footer-backed a:hover { color: var(--text); }

/* ── Animación de entrada ──────────────────────────────────────────────── */

/* Solo si JS marcó <html class="js">; sin script el contenido se ve igual. */
.js .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); }
.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .main-nav { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .nav-toggle { display: inline-flex; }
  .eval-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .case-body { grid-template-columns: 1fr; }
  .case-aside { position: static; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-kicker { grid-column: 1 / 8; }
  .hero-inner .hero-title { grid-column: 1 / 13; }
}

@media (max-width: 760px) {
  :root { --section-space: clamp(5rem, 20vw, 7rem); --header-h: 64px; }
  .header-inner { gap: 1rem; }
  .header-actions .btn-primary { min-height: 36px; font-size: .72rem; }

  .hero { padding-top: 4rem; }
  .hero-inner { grid-template-rows: auto auto 1fr auto; }
  .hero-kicker { grid-column: 1 / 13; }
  .hero-path { grid-column: 1 / 13; grid-row: 2; margin-top: 2.5rem; }
  .hero-inner .hero-title { grid-column: 1 / 13; grid-row: 3; margin: 3rem 0; font-size: clamp(2.8rem, 15vw, 5.5rem); }
  /* En vertical el texto ocupa todo el ancho: velo parejo en vez de lateral,
     y la pausa sube a la esquina superior (el indicador de scroll se oculta). */
  .hero-media::after {
    background:
      linear-gradient(to top, var(--bg) 0%, rgba(246, 247, 243, .78) 38%, rgba(246, 247, 243, .7) 100%);
  }
  .hero-rail { top: .9rem; bottom: auto; }
  .hero-bottom { grid-row: 4; align-items: stretch; flex-direction: column; }
  .hero-bottom .hero-actions { width: 100%; }
  .hero-bottom .hero-actions .btn-primary { width: 100%; justify-content: space-between; }
  .scroll-cue, .scroll-hint { display: none; }

  .trust-band-inner { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; padding-left: 1.8rem; gap: 0; }
  .steps::before { top: 1px; bottom: 1px; left: 5px; right: auto; width: 1px; height: auto; }
  .step { padding: 0 0 2.5rem 1.2rem; }
  .step::before { top: 0; left: -1.8rem; }
  .step-num { font-size: 2.4rem; }

  .principles, .proto-grid { grid-template-columns: 1fr; }
  .proto { grid-template-columns: 1fr; gap: 1rem; }
  .split { grid-template-columns: 1fr; }
  .flow-link .line { display: none; }
  .flow-row { flex-direction: column; }
  .flow-node { width: 100%; }
  .feature-media { aspect-ratio: 4 / 5; border-radius: var(--radius-sm); }
  .cta-band { border-radius: var(--radius-sm); }
  .cta-band-actions { flex-direction: column; width: 100%; }
  .cta-band-actions .btn { width: 100%; }
  .post:hover, .role:hover { padding-left: 0; }
}

@media (max-width: 560px) {
  .hero-kicker { font-size: .6rem; letter-spacing: .02em; } /* cabe en una línea desde 375px */
  .eval-grid, .case-grid, .trust-band-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; gap: 1.6rem; }
  .post-more { margin-left: 0; width: 100%; margin-top: .4rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .footer-col a, .footer-contact a { display: flex; align-items: center; min-height: 44px; }
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 410px) {
  .header-actions .btn-primary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  /* El video del hero no se oculta: el JS no lo inicia y queda el póster,
     con el botón para reproducirlo a pedido. */
  .feature-video { display: none; }
}

@media (hover: none) {
  .post:hover, .role:hover { padding-left: 0; }
  .post:hover::before, .role:hover::before { transform: scaleX(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tres líneas — AgentiCo One · AgentiCo Studio · AgentiCo Deployment
   Navegación por línea, tarjetas de línea en el home y cabecera de hub.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Navegación: las tres líneas como eje principal ────────────────────── */

.nav-div {
  align-self: center;
  flex: 0 0 auto;
  width: 1px;
  height: 1.05rem;
  margin: 0 .4rem;
  background: var(--line-strong);
}
.main-nav .nav-line { color: var(--text); white-space: nowrap; }
.main-nav .nav-line::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: -1px .5rem 0 0;
  border-radius: 50%;
  background: var(--live);
  opacity: .5;
  vertical-align: middle;
  transition: opacity 180ms ease, box-shadow 180ms ease;
}
.main-nav .nav-line:hover::before,
.main-nav .nav-line.active::before { opacity: 1; box-shadow: 0 0 8px var(--live-glow); }

.mobile-nav .mobile-line {
  align-items: flex-start;
  gap: .95rem;
  min-height: 0;
  padding: 1.05rem 0;
  color: var(--text);
}
.mobile-line-num {
  flex: 0 0 auto;
  margin-top: .35rem;
  color: var(--live);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
}
.mobile-line-body { display: grid; gap: .2rem; }
.mobile-line-name {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.mobile-line-sub {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ── Bifurcación: las líneas en el home ────────────────────────────────── */

.lines {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--card);
  border: 1px solid var(--line-solid);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
/* Un solo destino (el cruce entre líneas) ocupa el ancho completo. */
.lines-one { grid-template-columns: 1fr; }
/* Las tres líneas lado a lado (home). */
.lines-three { grid-template-columns: repeat(3, 1fr); }
.lines-three .line-name { font-size: clamp(1.7rem, 2.3vw, 2.4rem); }

.line-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.7rem, 2.8vw, 3rem) clamp(1.5rem, 2.4vw, 2.6rem) clamp(1.9rem, 2.8vw, 2.8rem);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line-solid);
  transition: background 240ms ease;
}
.line-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 110%, var(--line-glow, rgba(141, 233, 113, .24)), transparent 70%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.line-card:hover { background: var(--card-hover); }
.line-card:hover::after { opacity: 1; }

/* Color por línea: cada tarjeta redefine --live con su tramo del degradado
   verde → azul, y lo que ya lo usa (la segunda palabra del nombre, las
   viñetas, la flecha y el número al pasar el cursor) sigue ese color; el
   brillo del hover va con --line-glow. One queda en el verde. */
.line-card[data-line="studio"] { --live: var(--line-studio); --line-glow: rgba(15, 118, 106, .16); }
.line-card[data-line="deployment"] { --live: var(--blue); --line-glow: rgba(10, 111, 194, .14); }
.line-name span { color: var(--live); }

.line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.line-num {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--faint);
  transition: color 200ms ease;
}
.line-card:hover .line-num { color: var(--live); }
.line-kind {
  padding: .2rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.line-name {
  margin: clamp(1.6rem, 2.5vw, 2.4rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
}
.line-claim {
  margin: .9rem 0 1.3rem;
  color: var(--live);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.3vw, 1.22rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.line-card p {
  margin: 0 0 1.6rem;
  color: var(--muted);
  font-size: clamp(.92rem, 1.05vw, 1rem);
  line-height: 1.62;
}
.line-card .ticks { margin-bottom: 1.9rem; }
.line-card .ticks li { font-size: clamp(.88rem, 1vw, .96rem); }
.line-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.line-card:hover .arrow { transform: translateX(5px); }

/* ── Cabecera de hub: identifica a qué línea pertenece la página ───────── */

.hub-badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;
  padding: .35rem .9rem .35rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color 200ms ease, color 200ms ease;
}
.hub-badge:hover { border-color: var(--live); color: var(--text); }
.hub-badge b { color: var(--live); font-weight: 500; }

@media (max-width: 1100px) {
  .lines-three { grid-template-columns: 1fr; }
}

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

@media (max-width: 760px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AgentiCo One — sistema de gestión agéntico
   Flujo de intención, maqueta del espacio de trabajo, grilla de cinco
   espacios y tarjeta de decisión. Las maquetas son ilustrativas: no llevan
   controles reales, solo su apariencia.
   ═══════════════════════════════════════════════════════════════════════════ */

.principle-num { text-transform: uppercase; }

.section-note {
  margin: 2rem 0 0;
  max-width: 44rem;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  line-height: 1.6;
  text-transform: uppercase;
}

.split-flush { margin-top: 0; }

/* ── Flujo de intención: pregunta → entiende → investiga → prepara ─────── */

.intent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}

.intent-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  border-top: 1px solid var(--line-strong);
}
.intent-steps li {
  display: grid;
  grid-template-columns: 2.4rem minmax(6.5rem, auto) 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.intent-num {
  color: var(--live);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
}
.intent-verb {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.intent-steps q {
  color: var(--muted);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.45;
  quotes: "«" "»";
}

/* ── Maqueta del espacio de trabajo ────────────────────────────────────── */

.workspace, .decision {
  position: relative;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.ws-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.3rem;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ws-status { display: inline-flex; align-items: center; gap: .65rem; color: var(--live); }

.ws-body { display: grid; gap: 1.2rem; padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.ws-ask {
  justify-self: end;
  max-width: 85%;
  margin: 0;
  padding: .75rem 1.1rem;
  border: 1px solid rgba(23, 122, 38, .22);
  border-radius: 14px 14px 4px 14px;
  background: var(--live-dim);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.02em;
}
.ws-answer {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.55;
}
.ws-note {
  margin: 0;
  padding-left: .9rem;
  border-left: 1px solid var(--line-strong);
  color: var(--faint);
  font-size: .85rem;
  line-height: 1.5;
}
.workspace figcaption {
  padding: .8rem 1.3rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Cinco espacios ────────────────────────────────────────────────────── */

.spaces { grid-template-columns: repeat(5, 1fr); }

/* ── Misión y tarjeta de decisión ──────────────────────────────────────── */

.mission {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.mission-label {
  display: block;
  margin-bottom: 1rem;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mission-plan h3 {
  margin: 0 0 2rem;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.decision { display: grid; gap: 1.2rem; padding: clamp(1.4rem, 2.4vw, 2rem); }
.decision-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tag.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-text); }
.decision h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.decision-sub { margin: -.6rem 0 0; color: var(--muted); font-size: .9rem; }

.decision-metrics {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--line);
  overflow: hidden;
}
.decision-metrics div { padding: 1rem; background: var(--bg); }
.decision-metrics dt {
  margin-bottom: .55rem;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.decision-metrics dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}
.decision-note { margin: 0; color: var(--faint); font-size: .85rem; line-height: 1.5; }

.decision-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.mock-btn {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.mock-btn.primary { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.mock-btn.quiet { border-color: transparent; color: var(--muted); }

/* ── Responsive (AgentiCo One) ─────────────────────────────────────────── */

@media (max-width: 1100px) {
  .spaces { grid-template-columns: repeat(2, 1fr); }
  .spaces > :last-child { grid-column: 1 / -1; }
  .intent, .mission { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .spaces { grid-template-columns: 1fr; }
  .intent-steps li { grid-template-columns: 2rem 1fr; row-gap: .35rem; }
  .intent-steps q { grid-column: 2; }
  .decision-metrics { grid-template-columns: 1fr; }
  .decision-metrics div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .decision-metrics dt { margin: 0; }
}