/* Closify — closify.dev
   Negro tibio, crema y el naranja de la marca. Cada seccion animada se fija
   con su titular dentro, para que al hacer snap se vea el texto y la
   animacion arranque desde cero. */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-italic-latin.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #0b0a09;
  --ink-2: #14110e;
  --paper: #fdf6ef;
  --paper-2: #fffdfb;
  --orange: #fd4c03;
  --orange-deep: #c73503;
  --on-dark: #f6f0e8;
  --on-dark-mute: #a49b91;
  --on-light: #17130f;
  --on-light-mute: #6d645b;
  --ok: #3ddc84;
  --pad: clamp(20px, 5vw, 88px);
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  /* Solo la lamina de numeros declara un punto de snap, y en modo proximity: es
     un enganche suave al llegar, no una trampa. El resto de escenas fijadas no
     declara ninguno, que es lo que antes trababa el recorrido. */
  scroll-snap-type: y proximity;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
dt,
dd,
dl,
figure,
p,
ul,
ol,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}

.skip {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 99;
  background: var(--orange);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
}
.skip:focus {
  top: 12px;
}
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── tipografia ─────────────────────────────────────────── */
.h2,
.cap__title,
.cta__title {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.3rem);
}
em,
.cap__title em,
.h2 em,
.cta__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--orange);
}
.eyebrow {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow b {
  color: var(--orange);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.eyebrow b::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  height: 1px;
  margin-left: 0.8em;
  background: currentColor;
  opacity: 0.45;
}
.lede {
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: var(--on-dark-mute);
  max-width: 56ch;
}

/* ── botones ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.18s,
    box-shadow 0.18s;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn--primary {
  background: var(--orange);
  color: #fff;
}
.btn--primary:hover {
  background: #ff5a12;
}
.btn--ghost {
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1.5px rgba(246, 240, 232, 0.24);
}
.btn--ghost:hover {
  box-shadow: inset 0 0 0 1.5px rgba(246, 240, 232, 0.5);
}
.btn--invert {
  background: var(--ink);
  color: var(--paper);
}
.btn--sm {
  padding: 10px 19px;
  font-size: 0.9rem;
  background: var(--orange);
  color: #fff;
}

/* ── nav ────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad);
  transition:
    background-color 0.3s,
    backdrop-filter 0.3s,
    padding 0.3s;
}
.nav[data-stuck] {
  background: rgba(11, 10, 9, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  padding-block: 11px;
  box-shadow: 0 1px 0 rgba(246, 240, 232, 0.09);
}
.nav__mark {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__tag {
  display: block;
  width: 20px;
  color: var(--orange);
}
.nav__word {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.055em;
  color: var(--on-dark);
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link {
  padding: 10px 13px;
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--on-dark-mute);
  transition: color 0.2s;
}
.nav__link:hover {
  color: var(--on-dark);
}
.nav[data-stuck][data-light] {
  background: rgba(253, 246, 239, 0.84);
  box-shadow: 0 1px 0 rgba(23, 19, 15, 0.1);
}
.nav[data-light] .nav__word {
  color: var(--on-light);
}
.nav[data-light] .nav__link {
  color: var(--on-light-mute);
}
.nav[data-light] .nav__link:hover {
  color: var(--on-light);
}

/* ── escenas fijadas: el titular viaja con la animacion ─── */
.pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(14px, 2.6vh, 32px);
  padding: clamp(92px, 12vh, 128px) var(--pad) clamp(24px, 4vh, 48px);
  overflow: hidden;
}
.pin__head {
  max-width: 66ch;
}
.pin__head .h2 {
  margin: 14px 0 12px;
}
.runway {
  height: 40vh;
  pointer-events: none;
}
/* ═══════════ HERO ═══════════
   Una sola toma. El cuarto ocupa el viewport entero y la camara (el viewBox del
   SVG, que reescribe main.js) es lo unico que se mueve. Aqui no hay layout de
   dos columnas: todo lo que se ve encima del decorado esta posicionado en
   pixeles desde JS, proyectando puntos del plano a pantalla. */
.film {
  position: relative;
  height: 1360vh;
  background: #0a070d;
}
.film__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: #0a070d;
}
.film__pin::after {
  /* Grano a pelo, sin mix-blend-mode: mezclar una capa a pantalla completa en
     cada frame se comia un tercio de los fps y a esta opacidad no se nota. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.035;
}

/* el decorado */
.film__room {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.film__room svg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
}

/* oscurecido progresivo: cuando los aparatos toman el mando, el cuarto baja */
.film__dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 7, 13, 0.04) 0%,
    rgba(10, 7, 13, 0.22) 28%,
    rgba(10, 7, 13, 0.9) 52%
  );
}
/* viñeta y barras suaves: legibilidad del rotulo sin poner cajas */
.film__grade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 4, 8, 0.72), rgba(6, 4, 8, 0) 18%),
    linear-gradient(0deg, rgba(6, 4, 8, 0.58), rgba(6, 4, 8, 0) 20%),
    radial-gradient(126% 96% at 50% 46%, rgba(6, 4, 8, 0) 46%, rgba(6, 4, 8, 0.58) 100%);
}

/* ── los mensajes que salen del celular ── */
.film__air {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.card {
  position: absolute;
  left: 0;
  top: 0;
  width: 236px;
  overflow: visible;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: rgba(14, 10, 18, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(246, 240, 232, 0.14),
    0 18px 34px -20px #000;
  border-radius: 13px;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
.card img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.card b {
  display: block;
  font-size: 0.71rem;
  letter-spacing: -0.01em;
}
.card i {
  display: block;
  font-style: normal;
  font-size: 0.69rem;
  color: var(--on-dark-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card > span:not(.card__n) {
  width: 15px;
  color: var(--c);
}
.card > span svg {
  width: 15px;
  height: 15px;
}
.card > span svg path {
  fill: currentColor;
}
.card__n {
  position: absolute;
  right: -9px;
  top: -10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(10, 7, 13, 0.92);
}

/* ── rotulos: van clavados a un punto del decorado ── */
.caps {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}
.cap {
  position: absolute;
  left: 0;
  top: 0;
  width: min(30rem, 42vw);
  opacity: 0;
  will-change: transform, opacity;
}
.cap--title {
  width: min(38rem, 46vw);
}
/* los dos ultimos conviven con el celular y la laptop en la misma toma:
   se quedan con la franja de la izquierda y nada mas */
.cap--pair {
  width: min(25rem, 26vw);
}
.cap--inbox {
  width: min(24rem, 32vw);
}
.cap--pair .cap__line {
  font-size: clamp(1.5rem, 2.3vw, 2.4rem);
}
.cap--pair .cap__sub {
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
}
.cap--pair .cap__cta {
  margin-top: 24px;
}
.cap--pair .btn {
  padding: 14px 22px;
  font-size: 0.95rem;
}
/* El rotulo va delante de los mensajes que vuelan, asi que necesita su propia
   sombra: una mancha difusa detras del texto, no una caja. */
.cap::before {
  content: '';
  position: absolute;
  inset: -28% -34% -34%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(56% 54% at 36% 46%, rgba(8, 5, 11, 0.68), rgba(8, 5, 11, 0) 76%);
  filter: blur(26px);
}
.cap .eyebrow {
  margin-bottom: 16px;
  font-size: 0.68rem;
  text-shadow: 0 2px 14px rgba(6, 4, 8, 0.9);
}
.cap__title {
  font-size: clamp(2.1rem, 3.5vw, 3.6rem);
  text-shadow: 0 6px 30px rgba(6, 4, 8, 0.85);
}
.cap__line {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  text-shadow: 0 6px 30px rgba(6, 4, 8, 0.85);
}
.cap__sub {
  margin-top: 12px;
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  color: var(--on-dark-mute);
  text-shadow: 0 2px 16px rgba(6, 4, 8, 0.9);
}
.cap__sub b {
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.cap__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.cap[data-live] {
  pointer-events: none;
}
.cap[data-live] .btn {
  pointer-events: auto;
}

.film__hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  pointer-events: none;
}
.film__hint i {
  width: 17px;
  height: 27px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(246, 240, 232, 0.3);
  position: relative;
}
.film__hint i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--orange);
  animation: wheel 1.6s ease-in-out infinite;
}
@keyframes wheel {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    transform: translateY(8px);
    opacity: 0.2;
  }
}

/* ── dispositivos: celular delante, laptop detras a la derecha ──
   La caja mide 800x640 y su punto de anclaje es el centro del celular
   (158, 310): main.js clava ese punto donde toque, primero sobre el celular
   que esta en la mesa de noche y al final en la mitad derecha del plano. */
.devices {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 5;
  width: 800px;
  height: 640px;
  margin-top: -310px;
  transform-origin: 158px 310px;
  will-change: transform;
}
.phone {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 316px;
  height: 620px;
  border-radius: 40px;
  overflow: hidden;
  background: #100e0c;
  box-shadow:
    inset 0 0 0 2.5px rgba(246, 240, 232, 0.22),
    0 0 0 1px rgba(255, 199, 151, 0.72),
    0 0 34px rgba(253, 100, 28, 0.2),
    0 48px 90px -26px rgba(0, 0, 0, 0.95);
}
.phone__notch {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 92px;
  height: 19px;
  border-radius: 999px;
  background: #000;
  z-index: 5;
}
.deck {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 4;
  width: 1180px;
  margin-top: -400px;
  transform-origin: 590px 400px;
  will-change: transform, opacity;
}
.laptop {
  width: 1180px;
  will-change: opacity;
}
.laptop__lid {
  padding: 12px 12px 0;
  border-radius: 18px 18px 0 0;
  background: #1c1815;
  box-shadow: inset 0 0 0 1.5px rgba(246, 240, 232, 0.16);
}
.laptop__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: #14101a;
  display: flex;
}
.laptop__base {
  height: 17px;
  width: calc(100% + 84px);
  margin-left: -42px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #2a2320, #171310);
  box-shadow: 0 18px 30px -18px #000;
}
.laptop__base::after {
  content: '';
  display: block;
  width: 84px;
  height: 4px;
  margin: 0 auto;
  border-radius: 0 0 5px 5px;
  background: rgba(246, 240, 232, 0.12);
}

/* ── la plataforma dentro de la laptop ────────────────────
   Es la app de verdad en oscuro, no una captura: sidebar, Contactos y Pipeline.
   Todo se dimensiona en px sobre una pantalla base de 1156, y main.js escala la
   laptop entera; asi el mismo markup vale de miniatura y de plano detalle. */
.app__side {
  width: 168px;
  flex: none;
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #100c14;
  box-shadow: inset -1px 0 0 rgba(246, 240, 232, 0.08);
}
.app__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 14px;
}
.app__mark {
  width: 16px;
  color: var(--orange);
}
.app__logo b {
  font-size: 17px;
  letter-spacing: -0.035em;
}
.app__ws {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 16px;
}
.app__wsmark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: rgba(253, 76, 3, 0.16);
  color: var(--orange);
}
.app__wsmark svg {
  width: 13px;
}
.app__ws b {
  display: block;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.app__ws i {
  font-style: normal;
  font-size: 11px;
  color: var(--on-dark-mute);
}
.app__group {
  padding: 10px 6px 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.app__nav li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--on-dark-mute);
}
.app__nav svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.app__nav li[data-on] {
  background: rgba(253, 76, 3, 0.14);
  color: var(--orange);
  font-weight: 650;
}
.app__me {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 0;
  font-size: 12px;
  color: var(--on-dark-mute);
  box-shadow: inset 0 1px 0 rgba(246, 240, 232, 0.08);
}
.app__me span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.app__view {
  position: absolute;
  left: 168px;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 14px;
  gap: 12px;
  background: #14101a;
  will-change: opacity;
}
.app__top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.app__top > div {
  flex: 1;
  min-width: 0;
}
.app__top h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.app__top p {
  font-size: 12px;
  color: var(--on-dark-mute);
}
.app__count {
  font-size: 12px;
  color: var(--on-dark-mute);
}
.app__btn {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.16);
}
.app__btn--go {
  background: var(--orange);
  color: #fff;
  box-shadow: none;
}
.app__bar {
  display: flex;
  align-items: center;
  gap: 7px;
}
.app__search {
  flex: 1;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 12px;
  color: var(--on-dark-mute);
  background: rgba(246, 240, 232, 0.05);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.09);
}
.app__chip,
.app__seg {
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--on-dark-mute);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.12);
  white-space: nowrap;
}
.app__seg {
  display: flex;
  gap: 8px;
  padding: 5px 6px;
}
.app__seg b {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(253, 76, 3, 0.16);
  color: var(--orange);
  font-size: 11.5px;
}
.app__seg i {
  padding: 3px 4px;
  font-style: normal;
}

/* ── tabla de contactos ── */
.tbl {
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.09);
}
.tbl__head,
.tbl__body li {
  display: grid;
  grid-template-columns: 1fr 88px 202px 128px 116px 108px;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
}
.tbl__head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  background: rgba(246, 240, 232, 0.04);
}
.tbl__body li {
  box-shadow: inset 0 1px 0 rgba(246, 240, 232, 0.07);
  will-change: opacity, transform;
}
.tbl__who {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.tbl__who img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.tbl__who b {
  display: block;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}
.tbl__who i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--on-dark-mute);
}
.tbl__ch {
  display: flex;
  gap: 6px;
}
.tbl__ch span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 22%, transparent);
}
.tbl__ch svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}
.tbl__tags {
  display: flex;
  gap: 5px;
  overflow: hidden;
}
.tbl__tags em {
  padding: 3px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  color: #cdc4ba;
  background: rgba(246, 240, 232, 0.1);
  white-space: nowrap;
}
.tbl__agent {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.tbl__agent span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(253, 76, 3, 0.18);
  color: var(--orange);
}
.tbl__agent svg {
  width: 10px;
}
.stg {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  color: var(--on-dark-mute);
  background: rgba(246, 240, 232, 0.07);
}
.stg--won {
  color: var(--ok);
  background: rgba(61, 220, 132, 0.14);
}
.tbl__when {
  font-size: 11.5px;
  color: var(--on-dark-mute);
  text-align: right;
}

/* ── tablero de pipeline ── */
.kb {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
}
.kb__col {
  border-radius: 11px;
  padding: 10px 9px;
  background: rgba(246, 240, 232, 0.035);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.07);
  overflow: hidden;
}
.kb__col header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px 9px;
}
.kb__col header b {
  font-size: 12.5px;
  letter-spacing: -0.01em;
}
.kb__col header em {
  padding: 2px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 10.5px;
  color: var(--on-dark-mute);
  background: rgba(246, 240, 232, 0.09);
}
.kb__col header span {
  margin-left: auto;
  font-size: 11px;
  color: var(--on-dark-mute);
}
.kb__col[data-active] {
  background: rgba(253, 76, 3, 0.07);
  box-shadow: inset 0 0 0 1px rgba(253, 76, 3, 0.3);
}
.kb__slot {
  display: grid;
  gap: 8px;
  will-change: transform;
}
.kb__card,
.kb__deal {
  padding: 9px 10px;
  border-radius: 9px;
  background: #1b1622;
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.09);
}
.kb__card b,
.kb__deal b {
  display: block;
  font-size: 12.5px;
  letter-spacing: -0.01em;
}
.kb__card i,
.kb__deal i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--on-dark-mute);
}
.kb__card > span,
.kb__deal > span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--orange);
}
.kb__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.kb__who {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 3px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--orange);
  background: rgba(253, 76, 3, 0.15);
}
.kb__who svg {
  width: 9px;
}
.kb__foot em {
  margin-left: auto;
  font-style: normal;
  font-size: 10.5px;
  color: var(--on-dark-mute);
}
.kb__deal {
  position: absolute;
  top: 46px;
  left: 0;
  width: calc((100% - 36px) / 5);
  background: #221a26;
  box-shadow:
    inset 0 0 0 1.5px var(--orange),
    0 18px 28px -14px #000;
  will-change: transform;
}
.kb__toast {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #0b070f;
  box-shadow:
    inset 0 0 0 1px rgba(246, 240, 232, 0.14),
    0 20px 34px -18px #000;
  white-space: nowrap;
  opacity: 0;
  will-change: opacity, transform;
}
.kb__toast i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(61, 220, 132, 0.2);
  box-shadow: inset 0 0 0 1.5px var(--ok);
}
.kb__toast b {
  font-size: 12px;
  font-weight: 500;
}
.kb__toast span {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
}

/* ── pantallas del celular ── */
.scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #100e0c;
  will-change: opacity, transform;
}
.scr--off {
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 40px 18px;
}
.scr__mark {
  display: block;
  width: 28px;
  color: var(--on-dark-mute);
  opacity: 0.5;
}
.scr__state {
  font-size: 0.82rem;
  color: var(--on-dark-mute);
}
.toggle {
  width: 72px;
  height: 39px;
  border-radius: 999px;
  background: rgba(246, 240, 232, 0.12);
  padding: 4px;
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.14);
  transition: background-color 0.25s;
}
.toggle i {
  display: block;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--on-dark-mute);
  will-change: transform;
}
.toggle[data-on] {
  background: var(--orange);
}
.toggle[data-on] i {
  background: #fff;
}
.scr__hint {
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.scr--chat {
  padding: 36px 0 0;
}

/* ── tablero dentro del celular (solo vertical) ── */
.scr--board {
  padding: 40px 14px 14px;
  gap: 14px;
  opacity: 0;
}
.brd__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brd__top b {
  display: block;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.brd__top i {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--on-dark-mute);
}
.brd__count {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(246, 240, 232, 0.08);
  font-size: 0.66rem;
  color: var(--on-dark-mute);
}
/* el recorrido: una fila de etapas con la linea de progreso por detras */
.brd__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding-top: 4px;
}
.brd__steps::before,
.brd__steps::after {
  content: '';
  position: absolute;
  left: 10%;
  top: 9px;
  height: 2px;
  border-radius: 2px;
}
.brd__steps::before {
  right: 10%;
  background: rgba(246, 240, 232, 0.12);
}
.brd__steps::after {
  width: calc(80% * var(--run, 0));
  background: var(--orange);
  transition: width 0.12s linear;
}
.brd__steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  font-size: 0.55rem;
  letter-spacing: -0.01em;
  color: var(--on-dark-mute);
}
.brd__steps li i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2a2320;
  box-shadow: inset 0 0 0 1.5px rgba(246, 240, 232, 0.2);
}
.brd__steps li[data-done] i {
  background: var(--orange);
  box-shadow: none;
}
.brd__steps li[data-at] {
  color: var(--on-dark);
  font-weight: 700;
}
.brd__steps li[data-at] i {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(253, 76, 3, 0.22);
}
.brd__deal {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 12px;
  border-radius: 13px;
  background: #1b1622;
  box-shadow:
    inset 0 0 0 1.5px var(--orange),
    0 18px 30px -16px #000;
}
.brd__deal img {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.brd__deal b {
  display: block;
  font-size: 0.84rem;
  letter-spacing: -0.01em;
}
.brd__deal i {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--on-dark-mute);
}
.brd__amount {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--orange);
}
.brd__stage {
  grid-column: 2;
  justify-self: start;
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(253, 76, 3, 0.16);
  color: var(--orange);
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 700;
}
.brd__deal .brd__who {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 650;
  color: var(--on-dark-mute);
}
.brd__deal .brd__who svg {
  width: 9px;
  color: var(--orange);
}
.brd__rest {
  display: grid;
  gap: 8px;
}
.brd__rest li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(246, 240, 232, 0.045);
}
.brd__rest img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.brd__rest b {
  display: block;
  font-size: 0.76rem;
}
.brd__rest i {
  font-style: normal;
  font-size: 0.66rem;
  color: var(--on-dark-mute);
}
.brd__rest span {
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--on-dark-mute);
}
.brd__toast {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 11px;
  background: #0b070f;
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.14);
  opacity: 0;
  will-change: opacity;
}
.brd__toast i {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(61, 220, 132, 0.2);
  box-shadow: inset 0 0 0 1.5px var(--ok);
}
.brd__toast b {
  font-size: 0.7rem;
  font-weight: 500;
}
.cht__top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 10px;
  box-shadow: 0 1px 0 rgba(246, 240, 232, 0.1);
}
.cht__back {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--on-dark-mute);
}
.cht__pic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.cht__top > div {
  flex: 1;
  min-width: 0;
}
.cht__top b {
  display: block;
  font-size: 0.82rem;
}
.cht__top i {
  font-style: normal;
  font-size: 0.64rem;
  color: var(--on-dark-mute);
}
.cht__bot {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(253, 76, 3, 0.18);
  color: var(--orange);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cht__view {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.cht__feed {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px;
  will-change: transform;
}
.cb {
  max-width: 84%;
  font-size: 0.76rem;
  line-height: 1.38;
  opacity: 0;
  will-change: transform, opacity;
}
.cb--in {
  align-self: flex-start;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.cb--in img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.cb--in span {
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(246, 240, 232, 0.09);
}
.cb--out {
  align-self: flex-end;
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  background: var(--orange);
  color: #fff;
}
.cb__who {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.88;
  margin-bottom: 3px;
}
.cb__who svg {
  width: 9px;
  color: #fff;
}
.cb--typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  margin-left: 28px;
  padding: 9px 12px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(246, 240, 232, 0.09);
}
.cb--typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
.cb--sys {
  align-self: center;
  max-width: 92%;
  text-align: center;
  font-size: 0.59rem;
  color: var(--on-dark-mute);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(246, 240, 232, 0.055);
}
.cb--sys b {
  color: var(--on-dark);
  font-weight: 650;
}
.cb--ok {
  color: var(--ok);
  background: rgba(61, 220, 132, 0.1);
}
.cb--ok b {
  color: var(--ok);
}
.cb--media {
  width: 84%;
  max-width: none;
  padding: 7px 7px 10px;
}
.media {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4px;
  margin-bottom: 7px;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media__photo {
  border-radius: 10px 4px 4px 10px;
  aspect-ratio: 4/3;
}
.media__clip {
  position: relative;
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
}
.media__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(11, 10, 9, 0.62);
}
.media__play::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 8px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}
.media__len {
  position: absolute;
  right: 4px;
  top: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(11, 10, 9, 0.7);
  font-size: 0.52rem;
}
.media__bar {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
  overflow: hidden;
}
.media__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
}
.cb--media b {
  display: block;
  font-size: 0.74rem;
  padding: 0 4px;
}
.cb__price {
  display: block;
  font-size: 0.66rem;
  opacity: 0.85;
  padding: 0 4px;
}
.cb--pay {
  width: 84%;
  max-width: none;
  background: var(--paper-2);
  color: var(--on-light);
  display: grid;
  gap: 1px;
  padding: 10px 12px;
}
.cb__pay {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange);
}
.cb--pay b {
  font-size: 0.78rem;
}
.cb--pay i {
  font-style: normal;
  font-size: 0.64rem;
  color: var(--on-light-mute);
}
.cht__foot {
  padding: 8px 13px 12px;
  text-align: center;
}
.cht__foot span {
  font-size: 0.62rem;
  color: var(--on-dark-mute);
}

.pointer {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
  opacity: 0;
  z-index: 8;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ═══════════ LAS TRES GRIETAS ═══════════ */
.cracks {
  position: relative;
  height: 300svh;
  background: var(--paper);
  color: var(--on-light);
}
.cracks__pin {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2vh, 22px);
  height: 100svh;
  padding: clamp(78px, 9.5vh, 104px) var(--pad) clamp(20px, 3.5vh, 36px);
  overflow: hidden;
}
.cracks .eyebrow {
  color: var(--on-light-mute);
}
.cracks__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}
.cracks__head .h2 {
  margin-top: clamp(8px, 1.3vh, 14px);
  font-size: clamp(2.5rem, 4.1vw, 4.25rem);
  line-height: 0.95;
  white-space: nowrap;
}
.cracks__lede {
  margin-top: 10px;
  font-size: clamp(0.85rem, 1.15vw, 1.1rem);
  color: var(--on-light-mute);
}
.cracks__signal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(31vw, 500px);
  margin-bottom: 8px;
}
.cracks__signal::before {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  border-top: 1px dashed var(--orange);
}
.cracks__signal i {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(46px, 4.2vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  box-shadow:
    inset 0 0 0 1px rgba(23, 19, 15, 0.12),
    0 8px 20px rgba(66, 37, 22, 0.05);
}
.cracks__signal svg {
  width: 48%;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cracks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 22px);
  min-height: 0;
}
.crack {
  display: grid;
  grid-template-rows: auto minmax(170px, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: clamp(15px, 1.35vw, 22px);
  border: 1px solid rgba(23, 19, 15, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 14px 36px rgba(69, 40, 22, 0.035);
}
.crack__copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(12px, 1.2vw, 18px);
}
.crack__index {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 7px;
  background: var(--orange);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
.crack__n {
  display: block;
  font-size: clamp(0.61rem, 0.72vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.crack__copy h3 {
  font-size: clamp(1.16rem, 1.55vw, 1.52rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 8px 0 10px;
}
.crack__copy p {
  font-size: clamp(0.72rem, 0.86vw, 0.86rem);
  line-height: 1.48;
  color: var(--on-light-mute);
}
.crack__art {
  display: grid;
  align-items: center;
  min-height: 0;
  padding: clamp(9px, 1.6vh, 16px) 0;
}
.late {
  position: relative;
  height: min(25vh, 230px);
  min-height: 190px;
}
.late__message {
  position: absolute;
  width: min(76%, 310px);
  padding: 10px 13px;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(51, 31, 17, 0.07);
  will-change: opacity, transform;
}
.late__message time {
  display: block;
  margin-bottom: 3px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: inherit;
  opacity: 0.62;
}
.late__message p {
  font-size: clamp(0.72rem, 0.88vw, 0.86rem);
  font-weight: 650;
  line-height: 1.25;
}
.late__message--client {
  left: 0;
  top: 0;
  background: #fff;
  color: var(--on-light);
}
.late__message--reply {
  right: 0;
  top: 49%;
  background: var(--orange);
  color: #fff;
}
.late__wait {
  position: absolute;
  left: 50%;
  top: 34%;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--on-light-mute);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.late__wait svg {
  width: 34px;
  fill: var(--paper);
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.late__wait [data-late-hour],
.late__wait [data-late-minute] {
  transform-box: view-box;
  transform-origin: 24px 24px;
  will-change: transform;
}
.late__wait span {
  font-size: 0.68rem;
}
.late__wait b {
  color: var(--orange);
}
.late__seen {
  position: absolute;
  right: 3px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--on-light-mute);
  will-change: opacity, transform;
}
.late__seen span {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--on-light);
}
.late__seen b {
  font-size: 0.62rem;
}
.late__seen i {
  font-style: normal;
  font-weight: 900;
  color: var(--orange);
}
.late__sad {
  position: absolute;
  left: 1%;
  bottom: -8px;
  width: clamp(76px, 6.4vw, 100px);
  filter: drop-shadow(0 8px 12px rgba(81, 37, 12, 0.1));
  transform-origin: 50% 100%;
  will-change: opacity, transform;
}
.clock__grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  align-items: end;
  height: min(17vh, 158px);
  min-height: 118px;
}
.clock__grid i {
  display: block;
  border-radius: 3px 3px 1px 1px;
  background: rgba(23, 19, 15, 0.16);
  height: 8px;
  will-change: height;
}
.clock__grid i[data-out] {
  background: var(--orange);
}
.clock__band {
  position: relative;
  margin: 7px 0 0 37.5%;
  width: 37.5%;
  height: 23px;
  border-radius: 7px;
  background: rgba(23, 19, 15, 0.07);
  display: grid;
  place-items: center;
}
.clock__band span {
  font-size: 0.6rem;
  font-weight: 650;
  color: var(--on-light-mute);
  white-space: nowrap;
}
.clock__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.clock__ticks i {
  font-style: normal;
  font-size: 0.62rem;
  color: var(--on-light-mute);
}
.clock__note {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--on-light-mute);
}
.clock__note b {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.pitchcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 0.7vw, 10px);
}
.pitchcard {
  position: relative;
  min-width: 0;
  padding: clamp(8px, 0.8vw, 12px);
  border: 1px solid rgba(23, 19, 15, 0.11);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 7px 16px rgba(51, 31, 17, 0.035);
}
.pitchcard > span {
  display: grid;
  place-items: center;
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #aaa;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
}
.pitchcard__bar {
  height: 6px;
  margin: 9px 0 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(23, 19, 15, 0.07);
}
.pitchcard__bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: #aaa;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}
.pitchcard > b {
  display: block;
  font-size: clamp(1.15rem, 1.55vw, 1.5rem);
  line-height: 1;
  color: #8d8b88;
}
.pitchcard > small {
  display: block;
  margin-top: 3px;
  font-size: 0.55rem;
  color: var(--on-light-mute);
}
.pitchcard svg {
  width: 100%;
  height: 38px;
  margin-top: 7px;
  overflow: visible;
}
.pitchcard svg path {
  fill: none;
  stroke: #aaa;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  will-change: stroke-dashoffset;
}
.pitchcard--best > span,
.pitchcard--best .pitchcard__bar i {
  background: var(--orange);
}
.pitchcard--best > b {
  color: var(--orange);
}
.pitchcard--best svg path {
  stroke: var(--orange);
}
.pitchcard--best[data-champion] {
  border-color: rgba(253, 76, 3, 0.48);
  box-shadow:
    0 0 0 3px rgba(253, 76, 3, 0.07),
    0 12px 24px rgba(163, 48, 0, 0.12);
}
.pitchcard__winner {
  position: absolute;
  top: -18px;
  right: -8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(54px, 4.6vw, 68px);
  aspect-ratio: 1;
  padding: 7px;
  clip-path: polygon(
    50% 0%,
    61% 17%,
    79% 8%,
    82% 29%,
    100% 32%,
    87% 50%,
    100% 68%,
    79% 72%,
    75% 94%,
    57% 82%,
    42% 100%,
    34% 80%,
    12% 88%,
    17% 65%,
    0 55%,
    18% 42%,
    5% 23%,
    28% 21%
  );
  background: var(--orange);
  color: #fff;
  line-height: 1;
  filter: drop-shadow(0 7px 10px rgba(157, 46, 0, 0.24));
  transform: rotate(8deg) scale(0.4);
  opacity: 0;
  will-change: opacity, transform;
}
.pitchcard__winner small {
  align-self: end;
  font-size: 0.52rem;
  font-weight: 900;
}
.pitchcard__winner b {
  align-self: start;
  font-size: clamp(0.58rem, 0.62vw, 0.72rem);
  letter-spacing: 0.04em;
}
.crack__take {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(253, 76, 3, 0.065), rgba(253, 76, 3, 0.025));
}
.crack__takeicon {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  flex: none;
  border: 1px solid rgba(253, 76, 3, 0.3);
  border-radius: 50%;
  color: var(--orange);
  font-size: 1rem;
}
.crack__take b {
  font-size: clamp(0.65rem, 0.74vw, 0.76rem);
  line-height: 1.4;
}
.crack__take--muted {
  background: rgba(23, 19, 15, 0.025);
}
.crack__take--muted .crack__takeicon {
  border-color: rgba(23, 19, 15, 0.13);
  color: #96928d;
}
.cracks__foot {
  display: grid;
  grid-template-columns: 1.28fr repeat(3, 1fr);
  align-items: center;
  gap: 0;
  min-height: 76px;
  border: 1px solid rgba(23, 19, 15, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.26);
  overflow: hidden;
}
.cracks__footlead {
  align-self: stretch;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
}
.cracks__footmark {
  align-self: stretch;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #fff;
}
.cracks__footmark svg {
  width: 25px;
}
.cracks__foot strong,
.cracks__foot > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 7px clamp(14px, 1.4vw, 22px);
}
.cracks__foot strong {
  justify-content: flex-start;
  font-size: clamp(0.98rem, 1.2vw, 1.16rem);
}
.cracks__foot > span {
  gap: 11px;
  border-left: 1px solid rgba(23, 19, 15, 0.1);
  font-size: clamp(0.65rem, 0.76vw, 0.78rem);
  line-height: 1.35;
  text-align: center;
}
.cracks__foot > span b {
  color: var(--orange);
  font-size: 1.3rem;
}

@media (min-width: 1101px) and (min-height: 720px) {
  .crack__take {
    transform: translateY(clamp(-48px, -4vh, -34px));
  }
}

@media (max-width: 1100px) {
  .cracks__pin {
    overflow: clip;
  }
  .cracks__head .h2 {
    white-space: normal;
  }
  .cracks__signal {
    display: none;
  }
  .cracks__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 430px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
  .cracks__grid::-webkit-scrollbar {
    display: none;
  }
  .crack {
    min-height: 520px;
    scroll-snap-align: start;
  }
  .cracks__foot {
    grid-template-columns: 1fr;
    min-height: 62px;
  }
  .cracks__footlead {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .cracks__footmark svg {
    width: 21px;
  }
  .cracks__foot strong {
    padding-inline: 14px;
    font-size: 0.82rem;
  }
  .cracks__foot > span {
    display: none;
  }
}

@media (max-width: 620px) {
  .cracks__pin {
    padding-inline: 20px;
  }
  .cracks__head .h2 {
    font-size: clamp(2.15rem, 11vw, 3rem);
  }
  .cracks__lede {
    max-width: 31ch;
  }
  .cracks__grid {
    grid-auto-columns: min(88vw, 390px);
  }
  .crack {
    min-height: 476px;
  }
  .late {
    min-height: 205px;
  }
}

/* ═══════════ MULTICANAL: todo cae a un hilo ═══════════ */
.channels {
  position: relative;
  height: 380vh;
  background: linear-gradient(180deg, var(--ink), var(--ink-2) 45%, var(--ink));
}
.merge {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(10px, 2vh, 22px);
  min-height: 0;
}
.merge__lanes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
}
.merge__lanes li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  border-radius: 13px;
  background: rgba(246, 240, 232, 0.05);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.1);
  font-size: 0.74rem;
  color: var(--on-dark-mute);
  transition:
    color 0.3s,
    box-shadow 0.3s,
    background-color 0.3s;
}
.merge__lanes li svg {
  width: 16px;
  height: 16px;
}
.merge__lanes li svg path {
  fill: currentColor;
}
.merge__lanes li[data-lit] {
  color: var(--c);
  background: rgba(246, 240, 232, 0.09);
  box-shadow:
    inset 0 0 0 1px rgba(246, 240, 232, 0.24),
    0 0 26px -8px var(--c);
}
.merge__air {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.fly {
  position: absolute;
  left: 0;
  top: 0;
  width: 214px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(20, 17, 14, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(246, 240, 232, 0.14),
    0 14px 26px -16px #000;
  will-change: transform, opacity;
}
.fly img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.fly b {
  display: block;
  font-size: 0.68rem;
}
.fly i {
  display: block;
  font-style: normal;
  font-size: 0.64rem;
  color: var(--on-dark-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fly > span {
  width: 13px;
  color: var(--c);
}
.fly > span svg {
  width: 13px;
  height: 13px;
}
.fly > span svg path {
  fill: currentColor;
}
.merge__inbox {
  align-self: start;
  border-radius: 16px;
  background: rgba(246, 240, 232, 0.04);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.1);
  overflow: hidden;
}
.merge__inbox header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  box-shadow: 0 1px 0 rgba(246, 240, 232, 0.08);
}
.merge__inbox header b {
  font-size: 0.88rem;
}
.merge__inbox header span {
  font-size: 0.7rem;
  color: var(--on-dark-mute);
  font-variant-numeric: tabular-nums;
}
.merge__inbox ul {
  display: grid;
  gap: 4px;
  padding: 10px;
}
.merge__inbox li {
  display: grid;
  grid-template-columns: 28px auto 1fr auto auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(246, 240, 232, 0.04);
  opacity: 0;
  will-change: opacity, transform;
}
.merge__inbox img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.merge__inbox b {
  font-size: 0.76rem;
}
.merge__inbox i {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--on-dark-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.merge__inbox .ch {
  width: 14px;
  color: var(--c);
}
.merge__inbox .ch svg {
  width: 14px;
  height: 14px;
}
.merge__inbox .ch svg path {
  fill: currentColor;
}
.merge__inbox em {
  font-style: normal;
  font-size: 0.64rem;
  color: var(--on-dark-mute);
}

/* ═══════════ POR DENTRO: la traza del agente ═══════════ */
.trace {
  position: relative;
  height: 500vh;
  background: var(--paper);
  color: var(--on-light);
}
.trace .eyebrow,
.trace .lede {
  color: var(--on-light-mute);
}
.trace__pin {
  display: grid;
  grid-template-columns: minmax(340px, 0.72fr) minmax(0, 1.28fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(34px, 4vw, 68px);
  align-items: stretch;
}
.trace__intro {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.trace__intro .pin__head {
  max-width: 35rem;
}
.trace__intro .h2 {
  font-size: clamp(2.5rem, 3.3vw, 3.5rem);
  line-height: 1.05;
}
.trace__intro .h2 span,
.trace__intro .h2 em {
  white-space: nowrap;
}
.trace__intro .lede {
  margin-top: clamp(18px, 2.6vh, 28px);
  font-size: clamp(0.92rem, 1.1vw, 1.08rem);
  line-height: 1.55;
}
.trace__chat {
  display: grid;
  gap: 14px;
  align-content: start;
  margin-top: clamp(24px, 5vh, 50px);
}
.trace__success {
  position: relative;
  align-self: center;
  width: clamp(118px, 10vw, 158px);
  margin-top: auto;
  opacity: 0;
  transform: translateY(18px) scale(0.92);
  transform-origin: 50% 100%;
  will-change: opacity, transform;
}
.trace__success > svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 20px rgba(99, 42, 14, 0.12));
}
.trace__success > span {
  position: absolute;
  right: -3px;
  top: 15%;
  display: grid;
  place-items: center;
  width: clamp(36px, 3.1vw, 46px);
  aspect-ratio: 1;
  border: 5px solid var(--paper);
  border-radius: 50%;
  background: #25a35a;
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(37, 163, 90, 0.2);
}
.tc {
  font-size: clamp(0.84rem, 1vw, 0.98rem);
  line-height: 1.42;
  max-width: 96%;
}
.tc--in {
  justify-self: start;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.tc--in img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.tc--in span {
  padding: 13px 18px;
  border-radius: 18px 18px 18px 6px;
  background: rgba(23, 19, 15, 0.07);
}
.tc--out {
  justify-self: stretch;
  margin-left: 52px;
  padding: 17px 20px;
  border-radius: 18px 18px 6px 18px;
  background: var(--orange);
  color: #fff;
  opacity: 0;
  will-change: opacity, transform;
}
.tc--out .cb__who svg {
  color: #fff;
}
.trace__flow {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: clamp(10px, 1.5vh, 16px);
  min-width: 0;
  min-height: 0;
}
.trace__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 4.7vh, 46px) clamp(24px, 3.3vw, 44px);
  min-height: 0;
}
.trace__links {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.trace__links path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  opacity: 0;
  transition: opacity 0.12s linear;
}
.tracecard {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: clamp(16px, 1.35vw, 22px);
  border: 1px solid rgba(23, 19, 15, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 28px rgba(70, 40, 19, 0.035);
  opacity: 0;
  will-change: opacity, transform;
}
.tracecard[data-live] {
  border-color: rgba(253, 76, 3, 0.38);
  box-shadow:
    0 0 0 3px rgba(253, 76, 3, 0.06),
    0 14px 30px rgba(100, 44, 16, 0.08);
}
.tracecard__step {
  position: absolute;
  left: 50%;
  top: 0;
  display: grid;
  place-items: center;
  width: clamp(34px, 2.8vw, 42px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  font-weight: 800;
  transform: translate(-50%, -52%);
  box-shadow: 0 5px 12px rgba(181, 51, 0, 0.16);
}
.tracecard h3,
.trace__delivery h3 {
  font-size: clamp(0.88rem, 1.15vw, 1.12rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.tracecard p,
.trace__delivery p {
  margin-top: 8px;
  font-size: clamp(0.72rem, 0.9vw, 0.88rem);
  line-height: 1.42;
  color: var(--on-light-mute);
}
.traceasset {
  flex: 1;
  min-height: 0;
  margin-top: clamp(12px, 1.5vh, 16px);
  border: 1px solid rgba(23, 19, 15, 0.07);
  border-radius: 11px;
  background: rgba(253, 76, 3, 0.035);
}
.traceasset__source {
  display: flex;
  align-items: center;
  gap: 9px;
}
.traceasset__source img {
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}
.traceasset__source span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.traceasset__source b,
.traceasset__source small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.traceasset__source b {
  font-size: 0.76rem;
}
.traceasset__source small,
.traceasset--slot > small,
.traceasset--product small {
  color: var(--on-light-mute);
  font-size: 0.62rem;
}
.traceasset--message {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 12px;
}
.traceasset--message > p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px 12px 12px 4px;
  background: #fff;
  color: var(--on-light);
  font-size: clamp(0.69rem, 0.78vw, 0.79rem);
  font-weight: 650;
  box-shadow: 0 5px 15px rgba(53, 35, 22, 0.05);
}
.traceasset--slot {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 11px;
  overflow: hidden;
}
.traceasset__slot-window {
  position: relative;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(253, 76, 3, 0.22);
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 -8px 12px rgba(253, 76, 3, 0.025);
}
.traceasset__reel {
  display: grid;
  will-change: transform;
}
.traceasset__reel > * {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  color: var(--on-light-mute);
  font-size: 0.7rem;
}
.traceasset__reel strong {
  color: var(--on-light);
  font-size: 0.75rem;
}
.traceasset__reel svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 7px;
  background: var(--orange);
  color: #fff;
}
.traceasset__route {
  color: var(--orange);
  font-size: 0.65rem;
  text-align: center;
}
.traceasset--memory {
  display: grid;
  align-content: center;
  gap: 13px;
  padding: 12px;
}
.traceasset--memory ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.traceasset--memory li {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 3px;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}
.traceasset--memory li b {
  overflow: hidden;
  color: var(--orange);
  font-size: 0.76rem;
  text-overflow: ellipsis;
}
.traceasset--memory li span {
  color: var(--on-light-mute);
  font-size: 0.56rem;
}
.traceasset--product {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
}
.traceasset--product > img {
  width: 64px;
  height: 64px;
  border-radius: 9px;
  background: #fff;
  object-fit: cover;
}
.traceasset--product > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.traceasset--product b {
  font-size: 0.69rem;
  line-height: 1.25;
}
.traceasset--product > strong {
  color: var(--orange);
  font-size: 0.72rem;
  white-space: nowrap;
}
.traceasset--draft {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--orange);
  color: #fff;
}
.traceasset--draft .cb__who {
  color: #fff;
  font-size: 0.56rem;
}
.traceasset--draft .cb__who svg {
  color: #fff;
}
.traceasset--draft > p {
  margin: 0;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 650;
}
.traceasset--draft > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.traceasset--draft > div span {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.55rem;
}
.traceasset--audit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 7px;
  padding: 10px;
}
.traceasset--audit > i {
  display: grid;
  place-items: center;
  width: 38px;
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(37, 163, 90, 0.1);
  color: #228b4e;
}
.traceasset--audit > i svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tracecard__checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}
.tracecard__checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(253, 76, 3, 0.09);
  color: var(--orange);
  font-size: 0.72rem;
}
.tracecard__checks li span {
  color: var(--on-light);
}
.tracecard__checks--ok li {
  padding-block: 3px;
  background: rgba(37, 163, 90, 0.09);
  color: #228b4e;
}
.trace__delivery {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  min-height: 112px;
  padding: 16px clamp(22px, 2.4vw, 34px);
  border: 1.5px solid var(--orange);
  border-radius: 15px;
  background: linear-gradient(90deg, rgba(253, 76, 3, 0.055), rgba(255, 255, 255, 0.42));
  opacity: 0;
  will-change: opacity, transform;
}
.trace__delivery::before {
  content: '';
  position: absolute;
  right: 16%;
  top: calc(-1 * clamp(10px, 1.5vh, 16px));
  height: clamp(10px, 1.5vh, 16px);
  border-left: 2px dashed var(--orange);
}
.trace__delivery .tracecard__step {
  left: 12px;
  top: 12px;
  width: 34px;
  transform: none;
}
.trace__plane {
  display: grid;
  place-items: center;
  width: clamp(58px, 5vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  margin-left: 46px;
}
.trace__plane svg {
  width: 54%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trace__delivery p {
  margin-top: 4px;
}
.trace__pipeline {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 1.7vw, 24px);
  min-height: 62px;
  padding: 10px clamp(18px, 2vw, 28px);
  border: 1px solid rgba(23, 19, 15, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.46);
  opacity: 0;
  will-change: opacity, transform;
}
.trace__pipeline > i {
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-style: normal;
  font-size: 1.3rem;
}
.trace__pipeline b {
  font-size: 0.88rem;
}
.trace__pipeline span {
  padding-left: clamp(12px, 1.7vw, 24px);
  border-left: 1px solid rgba(23, 19, 15, 0.1);
  font-size: 0.76rem;
  color: var(--on-light-mute);
}

/* ═══════════ TU AGENTE ═══════════ */
.build {
  position: relative;
  height: 420vh;
  background: var(--ink);
}
.build__head {
  max-width: 64ch;
  margin-bottom: clamp(30px, 5vh, 64px);
}
.build__head .h2 {
  margin: 18px 0 20px;
}
.build__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(22px, 4vw, 56px);
  align-items: start;
}
.config {
  border-radius: 20px;
  background: rgba(246, 240, 232, 0.045);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.1);
  overflow: hidden;
}
.config header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  box-shadow: 0 1px 0 rgba(246, 240, 232, 0.09);
}
.config header b {
  font-size: 0.94rem;
}
.config header span {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  transition: color 0.3s;
}
.config header span[data-live] {
  color: var(--ok);
}
.config dl {
  padding: 6px 20px 20px;
}
.config dl > div {
  display: grid;
  gap: 6px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(246, 240, 232, 0.07);
  opacity: 0;
  will-change: opacity, transform;
}
.config dl > div:last-child {
  border-bottom: 0;
}
.config dt {
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.config dd {
  font-size: 0.94rem;
}
.config [data-type]::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: var(--orange);
  vertical-align: -0.14em;
}
.models {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.models span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.14);
  color: var(--on-dark-mute);
  transition:
    color 0.25s,
    background-color 0.25s,
    box-shadow 0.25s;
}
.models span svg {
  width: 13px;
  height: 13px;
}
.models span svg path {
  fill: currentColor;
}
.models span[data-on] {
  color: #fff;
  background: var(--orange);
  box-shadow: none;
}
.think {
  display: flex;
  align-items: center;
  gap: 5px;
}
.think i {
  width: 26px;
  height: 8px;
  border-radius: 3px;
  background: rgba(246, 240, 232, 0.14);
  transition: background-color 0.3s;
}
.think i[data-on] {
  background: var(--orange);
}
.think em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.76rem;
  color: var(--on-dark-mute);
  margin-left: 6px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tags span {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(253, 76, 3, 0.14);
  color: #ffb694;
  opacity: 0;
  will-change: opacity, transform;
}
.tags--alt span {
  background: rgba(246, 240, 232, 0.08);
  color: var(--on-dark);
  font-family: var(--sans);
  border-radius: 999px;
}
.compete {
  padding-top: 8px;
}
.compete__title {
  font-size: 1.04rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.compete__row {
  display: grid;
  grid-template-columns: 34px auto 1fr 44px;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
.compete__row b {
  font-size: 0.88rem;
}
.compete__bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(246, 240, 232, 0.09);
  overflow: hidden;
}
.compete__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--orange);
  will-change: width;
}
.compete__row[data-win] .compete__bar i {
  background: var(--ok);
}
.compete__row em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-mute);
}
.compete__row[data-win] em {
  color: var(--ok);
}
.compete__note {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--on-dark-mute);
  max-width: 40ch;
}

/* ═══════════ TU AGENTE: el editor de instrucciones ═══════════ */
.editor {
  align-self: start;
  max-width: 900px;
  width: 100%;
  margin-inline: auto;
  border-radius: 18px;
  background: rgba(246, 240, 232, 0.045);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.1);
}
.editor__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  box-shadow: 0 1px 0 rgba(246, 240, 232, 0.09);
}
.editor__top b {
  font-size: 0.96rem;
}
.editor__model {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--on-dark-mute);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.14);
}
.editor__model svg {
  width: 12px;
  height: 12px;
}
.editor__model svg path {
  fill: currentColor;
}
.editor__state {
  margin-left: auto;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  transition: color 0.3s;
}
.editor__state[data-live] {
  color: var(--ok);
}
.editor__body {
  position: relative;
  padding: 16px 20px 20px;
  min-height: 268px;
}
.editor__label {
  display: block;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: 10px;
}
.ins {
  font-size: 1rem;
  line-height: 1.75;
  max-width: 62ch;
}
.ins .caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--orange);
  vertical-align: -0.16em;
}
.ins .ref {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  margin: 0 1px;
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--rc) 18%, transparent);
  color: var(--rc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 40%, transparent);
}
.ins .ref svg {
  width: 12px;
  height: 12px;
}
.ins .ref svg path {
  fill: currentColor;
}
.ins .ref--closy svg {
  width: 11px;
}
.menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  z-index: 4;
  border-radius: 13px;
  overflow: hidden;
  background: #17130f;
  box-shadow:
    inset 0 0 0 1px rgba(246, 240, 232, 0.14),
    0 24px 44px -18px #000;
  opacity: 0;
  will-change: opacity, transform;
}
.menu__tabs {
  display: flex;
  gap: 2px;
  padding: 8px 8px 6px;
  box-shadow: 0 1px 0 rgba(246, 240, 232, 0.08);
}
.menu__tabs span {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--on-dark-mute);
}
.menu__tabs span[data-on] {
  background: rgba(246, 240, 232, 0.1);
  color: var(--on-dark);
}
.menu__list {
  padding: 6px;
  display: grid;
  gap: 2px;
  max-height: 188px;
  overflow: hidden;
}
.menu__list li {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
}
.menu__list li[data-sel] {
  background: rgba(253, 76, 3, 0.16);
  box-shadow: inset 0 0 0 1px rgba(253, 76, 3, 0.4);
}
.menu__list .ic {
  width: 18px;
  height: 18px;
  color: var(--rc);
}
.menu__list .ic svg {
  width: 18px;
  height: 18px;
}
.menu__list .ic svg path {
  fill: currentColor;
}
.menu__list b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  font-weight: 500;
}
.menu__list em {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc);
}
.pointer--menu {
  z-index: 6;
}
.editor__foot {
  padding: 12px 20px 16px;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 -1px 0 rgba(246, 240, 232, 0.08);
}
.editor__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.editor__chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: color-mix(in srgb, var(--rc) 16%, transparent);
  color: var(--rc);
  opacity: 0;
  will-change: opacity, transform;
}
.editor__chips svg {
  width: 12px;
  height: 12px;
}
.editor__chips svg path {
  fill: currentColor;
}

/* ═══════════ EL EQUIPO ═══════════
   Una casa en corte: cuatro cuartos, un agente trabajando en cada uno y el
   texto dentro del cuarto. El armazon (tejado, muros, escalera) es CSS puro
   para que escale a cualquier ancho; lo unico dibujado es el interior de cada
   cuarto y el propio Closy. */
.team {
  background: var(--paper);
  color: var(--on-light);
  padding: clamp(70px, 10vh, 124px) var(--pad) clamp(64px, 9vh, 112px);
}
.team__head {
  max-width: 1360px;
  margin: 0 auto clamp(30px, 5vh, 56px);
}
.team__head .h2 {
  margin: 14px 0 14px;
}
.team__head .lede {
  color: var(--on-light-mute);
  max-width: 62ch;
}

.house {
  --wall: #3b2c26;
  --room: #f6ebde;
  max-width: 1360px;
  margin: 0 auto;
}
.house__roof {
  position: relative;
  height: clamp(58px, 7vw, 106px);
}
/* el tejado es un triangulo relleno con otro triangulo de papel encima: lo que
   queda entre los dos es la viga */
.house__roof::before,
.house__roof::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.house__roof::before {
  background: var(--wall);
}
.house__roof::after {
  inset: 15px 13px -1px;
  background: var(--paper);
}
.house__roof i {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 2;
  width: clamp(30px, 3.4vw, 48px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--wall);
  background: var(--paper);
}
.house__roof b {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 3;
  width: clamp(30px, 3.4vw, 48px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background:
    linear-gradient(var(--wall), var(--wall)) center / 100% 3px no-repeat,
    linear-gradient(var(--wall), var(--wall)) center / 3px 100% no-repeat;
}

.house__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(52px, 5.5vw, 88px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  background: var(--room);
  border: 5px solid var(--wall);
  border-radius: 3px;
  overflow: hidden;
}
.house__hall {
  position: relative;
  grid-area: 1 / 2 / 3 / 3;
  background: #efe1d1;
  box-shadow:
    inset 5px 0 0 var(--wall),
    inset -5px 0 0 var(--wall);
}
.house__frame {
  position: absolute;
  left: 50%;
  top: 13%;
  width: 52%;
  aspect-ratio: 3 / 4;
  transform: translateX(-50%);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 34%, #fd4c03 0 22%, transparent 23%),
    linear-gradient(#e8d6bf, #dbc3a5);
  box-shadow: inset 0 0 0 4px var(--wall);
}
/* escalera: peldaños con degradado repetido, ni una etiqueta de mas */
.house__stairs {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 7%;
  height: 30%;
  background: repeating-linear-gradient(to bottom, var(--wall) 0 3px, #e2cdb5 3px 17px);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.room {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  min-height: clamp(284px, 26vw, 356px);
}
.room:nth-of-type(1),
.room:nth-of-type(2) {
  box-shadow: inset 0 -5px 0 var(--wall);
}
.room__copy {
  position: relative;
  z-index: 2;
  padding: clamp(16px, 1.8vw, 28px) clamp(14px, 1.6vw, 24px);
  background: #fbf3ea;
  box-shadow: inset -1px 0 0 rgba(59, 44, 38, 0.12);
}
.room__n {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.room__copy h3 {
  font-size: clamp(1.15rem, 1.55vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 6px 0 10px;
  text-wrap: balance;
}
.room__copy p {
  font-size: clamp(0.82rem, 0.92vw, 0.92rem);
  line-height: 1.5;
  color: var(--on-light-mute);
}
.room__art {
  position: relative;
  overflow: hidden;
}
.room__props {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.room__props svg {
  width: 100%;
  height: 100%;
  display: block;
  /* el cable de la lampara nace por encima del viewBox para que llegue al techo
     aunque el cuarto sea mas alto que el dibujo; .room__art lo recorta */
  overflow: visible;
}
.room__closy {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 7%;
  z-index: 1;
}
.room__closy svg {
  width: 100%;
  height: auto;
  max-height: clamp(126px, 12vw, 168px);
  overflow: visible;
}
.house__floor {
  height: clamp(10px, 1.2vw, 16px);
  border-radius: 0 0 6px 6px;
  background: var(--wall);
  opacity: 0.9;
}

.beats {
  margin-top: 14px;
  display: grid;
  gap: 7px;
}
.beats li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: clamp(0.76rem, 0.85vw, 0.85rem);
  font-weight: 500;
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.beats li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateY(-1px);
}
.beats[data-on] li {
  opacity: 1;
  transform: none;
}
.beats[data-on] li:nth-child(2) {
  transition-delay: 0.09s;
}
.beats[data-on] li:nth-child(3) {
  transition-delay: 0.18s;
}

.team__foot {
  max-width: 1360px;
  margin: clamp(20px, 3vh, 34px) auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  color: var(--on-light);
}
.team__foot a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* ═══════════ TABLERO ═══════════ */
.board {
  position: relative;
  height: 280vh;
  background: var(--ink);
}
.board__stage {
  position: relative;
  align-self: stretch;
  min-height: 0;
}
.cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 22px);
  height: 100%;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.col h4 {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  transition: color 0.3s;
}
.col[data-active] h4 {
  color: var(--orange);
}
.col__slot {
  position: relative;
  flex: 1;
  border-radius: 18px;
  background: rgba(246, 240, 232, 0.035);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.08);
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
  padding: 10px;
}
.mini {
  position: absolute;
  left: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(246, 240, 232, 0.06);
  will-change: transform, opacity;
}
.mini img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.mini b {
  display: block;
  font-size: 0.76rem;
}
.mini i {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  color: var(--on-dark-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col[data-active] .col__slot {
  background: rgba(253, 76, 3, 0.07);
  box-shadow: inset 0 0 0 1px rgba(253, 76, 3, 0.34);
}
.ghost img {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  object-fit: cover;
}
.ghost i {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--on-dark-mute);
}
.deal {
  position: absolute;
  z-index: 2;
  top: 40px;
  left: 0;
  width: calc(25% - 16px);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border-radius: 16px;
  background: var(--paper-2);
  color: var(--on-light);
  box-shadow: 0 22px 46px -14px rgba(0, 0, 0, 0.7);
  will-change: transform;
}
.deal__pic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.deal b {
  display: block;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}
.deal i {
  display: block;
  font-size: 0.78rem;
  font-style: normal;
  color: var(--on-light-mute);
}
.deal__amount {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Closy agarra la tarjeta: el cuerpo va por detras (z-index 1), la tarjeta en
   medio (z-index 2) y solo las manos por delante (z-index 3). Las dos capas
   comparten transform desde main.js. */
.board__closy,
.board__grip {
  position: absolute;
  top: 40px;
  left: 0;
  height: 0;
  width: calc(25% - 16px);
  pointer-events: none;
  will-change: transform;
}
.board__closy {
  z-index: 1;
}
.board__grip {
  z-index: 3;
}
/* el borde de abajo del SVG se pega al borde de arriba de la tarjeta: asi el
   punto de agarre no depende del ancho de la columna */
.board__closy svg,
.board__grip svg {
  position: absolute;
  left: 16%;
  bottom: 0;
  width: 64%;
  height: auto;
  overflow: visible;
}

/* ═══════════ CATALOGO: sueltas el Excel y Closy trabaja ═══════════ */
.ingest {
  position: relative;
  height: 420vh;
  background: var(--paper);
  color: var(--on-light);
}
.ingest .eyebrow,
.ingest .lede {
  color: var(--on-light-mute);
}
.ingest__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
  min-height: 0;
}
.drop {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
}
.drop__zone {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 24px 18px;
  border-radius: 16px;
  border: 2px dashed rgba(23, 19, 15, 0.2);
  text-align: center;
  will-change: opacity;
  transition:
    border-color 0.3s,
    background-color 0.3s;
}
.drop__zone b {
  font-size: 0.9rem;
}
.drop__zone i {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--on-light-mute);
}
.drop__zone[data-hot] {
  border-color: var(--orange);
  background: rgba(253, 76, 3, 0.05);
}
.drop__icon {
  display: block;
  width: 26px;
  color: #1a7040;
}
.drop__icon svg {
  width: 26px;
  height: 26px;
}
.drop__icon svg path {
  fill: currentColor;
}
.drop__file {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--paper-2);
  box-shadow:
    0 1px 0 rgba(23, 19, 15, 0.08),
    0 16px 34px -22px rgba(23, 19, 15, 0.6);
  opacity: 0;
  will-change: opacity, transform;
}
.drop__file b {
  display: block;
  font-size: 0.88rem;
}
.drop__file i {
  display: block;
  font-style: normal;
  font-size: 0.74rem;
  color: var(--on-light-mute);
}
.drop__bar {
  grid-column: 2;
  display: block;
  height: 4px;
  border-radius: 3px;
  background: rgba(23, 19, 15, 0.1);
  overflow: hidden;
  margin-top: 8px;
}
.drop__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
}
.pointer--drop path {
  fill: #17130f;
  stroke: #fff;
}

.work {
  padding: 18px;
  border-radius: 16px;
  background: rgba(23, 19, 15, 0.05);
}
.work__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.work__closy {
  display: block;
  width: 54px;
  flex: none;
}
.work__closy svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.work__who b {
  display: block;
  font-size: 0.92rem;
}
.work__who i {
  display: block;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--orange);
}
.work__log {
  display: grid;
  gap: 7px;
}
.work__log li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 0.84rem;
  color: var(--on-light-mute);
  opacity: 0;
  will-change: opacity, transform;
}
.work__log li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.work__log li b {
  color: var(--on-light);
  font-weight: 650;
}
.work__log li[data-done]::before {
  background: var(--ok);
}

.draft {
  border-radius: 18px;
  background: var(--paper-2);
  box-shadow:
    0 1px 0 rgba(23, 19, 15, 0.07),
    0 22px 46px -30px rgba(23, 19, 15, 0.6);
  overflow: hidden;
}
.draft header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(23, 19, 15, 0.07);
}
.draft header b {
  font-size: 0.9rem;
}
.draft header span {
  font-size: 0.76rem;
  color: var(--on-light-mute);
  font-variant-numeric: tabular-nums;
}
.draft__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 18px 0;
}
.draft__cats li {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: rgba(253, 76, 3, 0.13);
  color: var(--orange-deep);
  opacity: 0;
  will-change: opacity, transform;
}
.draft__cards {
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
}
.dcard {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 13px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: var(--paper);
  opacity: 0;
  will-change: opacity, transform;
}
.dcard img {
  width: 66px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
}
.dcard b {
  display: block;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}
.dcard span {
  display: block;
  font-size: 0.72rem;
  color: var(--on-light-mute);
}
.dcard em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--orange);
}
.dcard--warn {
  background: rgba(253, 76, 3, 0.07);
  box-shadow: inset 0 0 0 1px rgba(253, 76, 3, 0.26);
}
.dcard--warn em {
  color: var(--orange-deep);
}

/* ═══════════ NUMEROS ═══════════ */
.metrics {
  position: relative;
  height: 300vh;
  background: var(--ink);
}
/* El punto de snap es esta marca de 1px, no la seccion entera: engancha al
   entrar y, en cuanto avanzas, deja de estar cerca y no puede tirar de ti
   hacia atras. Una seccion de 300vh como objetivo si traba el recorrido. */
.metrics__snap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  scroll-snap-align: start;
}
.metrics__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(18px, 3vh, 40px);
  padding: clamp(88px, 11vh, 122px) var(--pad) clamp(26px, 4vh, 52px);
  overflow: hidden;
}
.metrics .h2 {
  margin: 18px 0 clamp(34px, 5vh, 70px);
}
.metrics .h2 {
  margin: 14px 0 0;
  font-size: clamp(2.1rem, 3.4vw, 3.3rem);
}
.metrics__head {
  display: grid;
  gap: 10px;
}
.metrics__head .lede {
  margin-top: 2px;
}

/* Tablero: lo que cambia con el tiempo va en grafico, lo que no cambia nunca
   va en cifra. Nada de contadores de herramientas o de estados, que se quedan
   viejos en cuanto alguien configura los suyos. */
.dash {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
  min-height: 0;
}
.dash__card {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
  min-height: 0;
  padding: clamp(14px, 1.4vw, 22px);
  opacity: 0;
  will-change: opacity, transform;
  border-radius: 18px;
  background: rgba(246, 240, 232, 0.045);
  box-shadow: inset 0 0 0 1px rgba(246, 240, 232, 0.09);
}
.dash__card--wide {
  grid-column: span 2;
}
.dash__card--full {
  grid-column: 1 / -1;
}
.dash__card header {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.dash__card header span {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.dash__card header em {
  margin-left: auto;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.74rem;
  color: var(--on-dark-mute);
}
.dash__card header b {
  margin-left: auto;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.dash__card footer {
  margin-top: auto;
  font-size: 0.78rem;
  color: var(--on-dark-mute);
}
.dash__card footer i {
  font-style: normal;
  font-weight: 700;
  color: var(--ok);
}
.dash__card--hero {
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  background: rgba(253, 76, 3, 0.1);
  box-shadow: inset 0 0 0 1px rgba(253, 76, 3, 0.3);
}
.dash__card--hero b {
  font-size: clamp(2.6rem, 4.4vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: var(--orange);
}
.dash__card--hero span {
  font-size: 0.86rem;
  color: var(--on-dark-mute);
}

/* barras de atendidos por dia */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 3.5%;
  height: clamp(96px, 11vw, 148px);
}
.bars i {
  flex: 1;
  min-height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--orange), rgba(253, 76, 3, 0.32));
  will-change: height;
}
.bars i:last-child {
  background: var(--orange);
  box-shadow: 0 0 0 1px rgba(253, 76, 3, 0.5);
}

/* rosco de conversion */
.donut {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(108px, 11vw, 148px);
  aspect-ratio: 1;
  margin: 2px auto 0;
}
.donut i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--orange) 0turn, rgba(246, 240, 232, 0.1) 0turn);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
}
.donut b {
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

/* pareto: barras que caen y la acumulada por encima */
.pareto {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2.4%;
  height: clamp(104px, 12vw, 156px);
}
.pareto > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  height: 100%;
}
.pareto > div i {
  border-radius: 3px 3px 0 0;
  background: rgba(253, 76, 3, 0.55);
  will-change: height;
}
.pareto > div:nth-child(-n + 2) i {
  background: var(--orange);
}
.pareto > div span {
  font-size: 0.62rem;
  color: var(--on-dark-mute);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pareto svg {
  position: absolute;
  inset: 0 0 22px;
  width: 100%;
  height: calc(100% - 22px);
  overflow: visible;
  pointer-events: none;
}
.pareto polyline {
  fill: none;
  stroke: #f6f0e8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}
.pareto circle {
  fill: #f6f0e8;
}
.pareto .pareto__80 {
  stroke: rgba(246, 240, 232, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

/* plantillas de campaña: una fila por plantilla y la ganadora destacada */
.tpl {
  display: grid;
  gap: clamp(9px, 1.4vh, 15px);
  align-content: center;
  flex: 1;
  min-height: 0;
}
.tpl > div {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
}
.tpl span {
  color: var(--on-dark-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl u {
  display: block;
  height: 9px;
  border-radius: 99px;
  background: rgba(253, 76, 3, 0.45);
  text-decoration: none;
  transform-origin: 0 50%;
  will-change: transform;
}
.tpl em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  text-align: right;
  color: var(--on-dark-mute);
  font-variant-numeric: tabular-nums;
}
.tpl [data-best] span {
  color: var(--on-dark);
  font-weight: 600;
}
.tpl [data-best] u {
  background: var(--orange);
}
.tpl [data-best] em {
  color: var(--orange);
}

/* ═══════════ STACK ═══════════ */
.stack {
  background: var(--paper);
  color: var(--on-light);
  padding: clamp(94px, 12vh, 150px) var(--pad) clamp(70px, 10vh, 120px);
}
.stack .eyebrow,
.stack .lede {
  color: var(--on-light-mute);
}
.stack__head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 5vh, 56px);
}
.stack__head .h2 {
  margin: 18px 0 20px;
}
.stack__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}
.stack__grid li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  border-radius: 15px;
  background: var(--paper-2);
  box-shadow:
    0 1px 0 rgba(23, 19, 15, 0.07),
    0 10px 22px -18px rgba(23, 19, 15, 0.5);
  font-size: 0.86rem;
  font-weight: 550;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s,
    transform 0.5s,
    box-shadow 0.25s;
}
.stack__grid[data-on] li {
  opacity: 1;
  transform: none;
}
.stack__grid li:hover {
  box-shadow:
    0 1px 0 rgba(23, 19, 15, 0.07),
    0 14px 28px -16px var(--c);
}
.stack__grid svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c);
}
.stack__grid svg path {
  fill: currentColor;
}
.stack__foot {
  margin-top: 24px;
  font-size: 0.93rem;
  color: var(--on-light-mute);
}
.stack__foot a {
  color: var(--orange);
  font-weight: 650;
}

/* ═══════════ IMPLEMENTACION ═══════════ */
.setup {
  background: var(--ink);
  padding: clamp(94px, 12vh, 150px) var(--pad) clamp(70px, 10vh, 120px);
}
.setup__head {
  max-width: 62ch;
  margin-bottom: clamp(30px, 5vh, 64px);
}
.setup__head .h2 {
  margin: 18px 0 20px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.steps li {
  padding-top: 20px;
  border-top: 2px solid rgba(246, 240, 232, 0.12);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s,
    transform 0.55s,
    border-color 0.55s;
}
.steps[data-on] li {
  opacity: 1;
  transform: none;
  border-color: var(--orange);
}
.steps[data-on] li:nth-child(2) {
  transition-delay: 0.12s;
}
.steps[data-on] li:nth-child(3) {
  transition-delay: 0.24s;
}
.steps__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--orange);
}
.steps h3 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 4px 0 10px;
}
.steps p {
  color: var(--on-dark-mute);
  font-size: 0.94rem;
}
.setup__foot {
  margin-top: clamp(30px, 5vh, 56px);
  font-size: 1rem;
  color: var(--on-dark-mute);
  max-width: 52ch;
}
.setup__foot b {
  color: var(--on-dark);
}

/* ═══════════ CTA ═══════════ */
.cta {
  position: relative;
  background: var(--orange);
  color: #fff;
  padding: clamp(80px, 11vh, 136px) var(--pad);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 16px;
  overflow: hidden;
}
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.07;
  mix-blend-mode: overlay;
}
.cta__closy {
  width: clamp(120px, 14vw, 190px);
}
.cta__closy svg {
  overflow: visible;
}
.cta__closy .cl-b {
  fill: #fff;
  stroke: #fff;
}
.cta__closy .cl-d {
  fill: rgba(255, 255, 255, 0.72);
  stroke: rgba(255, 255, 255, 0.72);
}
.cta__closy .cl-ink {
  fill: var(--orange-deep);
}
.cta__title {
  font-size: clamp(2rem, 4.6vw, 3.9rem);
}
.cta__lede {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.02rem;
}
.cta .btn {
  margin-top: 8px;
}
.cta__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ═══════════ PIE ═══════════ */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 32px var(--pad);
  font-size: 0.85rem;
  color: var(--on-dark-mute);
  background: var(--ink);
}
.foot__mark {
  font-weight: 800;
  letter-spacing: -0.05em;
  font-size: 1.05rem;
  color: var(--on-dark);
}
.foot__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
}
.foot__links a:hover {
  color: var(--on-dark);
}

/* ── personajes sobre fondo claro ── */
.on-dark .cl-glyph {
  fill: #f4efe8;
}
.on-dark .cl-glyph-s {
  stroke: #f4efe8;
}
.on-dark .cl-glyph-eye {
  fill: #17130f;
}
[data-closy] {
  overflow: visible;
}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ingest__grid {
    grid-template-columns: 1fr;
  }
  .ingest {
    height: 300vh;
  }
}
@media (max-width: 900px) {
  .trace__pin {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    padding-top: 86px;
  }
  .trace__intro .pin__head {
    max-width: none;
  }
  .trace__intro .h2 {
    font-size: clamp(2rem, 7vw, 2.8rem);
  }
  .trace__intro .lede,
  .trace__chat {
    display: none;
  }
  .trace__flow {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .trace__flow::-webkit-scrollbar {
    display: none;
  }
  .trace__cards,
  .trace__delivery,
  .trace__pipeline {
    min-width: 760px;
  }
  .tracecard__step,
  .trace__delivery .tracecard__step {
    left: auto;
    right: 12px;
    top: 12px;
    width: 32px;
    transform: none;
  }
}
@media (max-width: 940px) {
  .film {
    height: 900vh;
  }
  /* en vertical los aparatos ocupan la mitad de abajo, no la derecha */
  .film__dim {
    background: linear-gradient(180deg, rgba(10, 7, 13, 0.05) 0%, rgba(10, 7, 13, 0.88) 40%);
  }
  .cap,
  .cap--title {
    width: min(26rem, 84vw);
  }
  .cap__title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }
  .cap__line {
    font-size: clamp(1.4rem, 6.4vw, 2rem);
  }
  .cap--inbox {
    width: min(15rem, 44vw);
  }
  .card {
    width: 196px;
  }
  .crack {
    grid-template-columns: 1fr;
  }
  .crack--flip .crack__art {
    order: 0;
  }
  /* en vertical la lamina de numeros no se fija: cinco tarjetas no caben en una
     pantalla, asi que se apilan y se leen de corrido */
  .metrics {
    height: auto;
  }
  .metrics__snap {
    display: none;
  }
  .metrics__pin {
    position: static;
    height: auto;
    min-height: 0;
    padding: clamp(70px, 10vh, 110px) var(--pad) clamp(56px, 8vh, 90px);
    overflow: visible;
  }
  .dash {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .dash__card--wide,
  .dash__card--full {
    grid-column: auto;
  }
  .dash__card {
    opacity: 1 !important;
    transform: none !important;
  }
  .tpl > div {
    grid-template-columns: minmax(0, 1fr) 72px 44px;
  }
  .pareto > div span {
    font-size: 0.55rem;
  }

  /* en movil la casa se vuelve una torre: un cuarto por planta */
  .house__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }
  .house__hall {
    display: none;
  }
  .room {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .room:nth-of-type(3) {
    box-shadow: inset 0 -5px 0 var(--wall);
  }
  .room__copy {
    box-shadow: inset 0 -1px 0 rgba(59, 44, 38, 0.12);
  }
  /* el cuarto toma la misma proporcion que su dibujo para que el suelo
     llegue de pared a pared */
  .room__art {
    aspect-ratio: 6 / 5;
    min-height: 0;
  }
  .merge__lanes {
    grid-template-columns: repeat(3, 1fr);
  }
  .merge__lanes li:nth-child(n + 4) {
    display: none;
  }
  .build__stage {
    grid-template-columns: 1fr;
  }
  .cols {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
  .deal {
    width: calc(50% - 12px);
  }
  .board__closy,
  .board__grip {
    display: none;
  }
  .log li {
    grid-template-columns: 50px 1fr;
    padding: 8px 11px;
  }
}
@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .nav__link[href='#flujo'] {
    display: none;
  }
  .heat {
    grid-template-columns: repeat(12, 1fr);
  }
  .foot__links {
    margin-left: 0;
    width: 100%;
  }
  .media {
    grid-template-columns: 1fr;
  }
}

/* ═══════════ MOVIL ═══════════
   La version de telefono no es la de escritorio encogida. En vertical no hay
   dos columnas ni sitio para que una escena fijada aguante seis tarjetas a la
   vez, asi que las escenas que en horizontal se cuentan en paralelo aqui se
   cuentan en fila: la seccion deja de fijarse, el contenido se apila en el
   orden en que sucede y la misma animacion de scroll (que es progreso 0→1
   sobre la seccion, no sobre el pin) va encendiendo cada pieza cuando te
   toca leerla. El corte es 940px, el mismo que usa main.js para decidir si
   la camara del hero va en apaisado o en vertical. */
@media (max-width: 940px) {
  /* ── base ── */
  .pin {
    min-height: 520px;
    padding: clamp(84px, 11vh, 104px) var(--pad) clamp(20px, 3.5vh, 40px);
    gap: clamp(12px, 2vh, 22px);
  }
  /* El carril de salida existe para que una lamina fijada suelte con calma.
     En vertical las que quedan fijadas son pocas y 10vh de nada al pie de una
     seccion oscura se lee como una franja negra, no como aire. */
  .runway {
    height: 0;
  }
  /* La laptop es exclusiva del apaisado: aqui el tablero va dentro del celular. */
  .deck {
    display: none;
  }
  .lede {
    font-size: 0.98rem;
  }
  .h2 {
    font-size: clamp(1.95rem, 7.4vw, 2.9rem);
  }

  /* ── nav: el logo y las dos acciones sin apretarse ── */
  .nav {
    padding-inline: 16px;
  }
  .nav__word {
    font-size: 1.15rem;
  }
  .nav__link {
    padding-inline: 8px;
  }
  .btn--sm {
    padding: 9px 15px;
    font-size: 0.85rem;
  }

  /* ── hero: el rotulo se queda arriba y los aparatos abajo, nunca se pisan.
       main.js baja el suelo del rotulo cuando entra la plataforma; aqui solo
       hace falta que la sombra del texto tape lo que pase por detras. ── */
  .film {
    height: 640vh;
  }
  .cap::before {
    inset: -42% -38% -30%;
    background: radial-gradient(60% 56% at 40% 46%, rgba(8, 5, 11, 0.92), rgba(8, 5, 11, 0) 78%);
    filter: blur(22px);
  }
  .cap--pair {
    width: min(26rem, 84vw);
  }
  .cap--pair .cap__line {
    font-size: clamp(1.3rem, 5.8vw, 1.8rem);
  }
  .cap--pair .cap__sub {
    margin-top: 8px;
    font-size: 0.88rem;
  }
  .cap--pair .cap__cta {
    margin-top: 16px;
  }
  .cap--pair .btn {
    padding: 12px 18px;
    font-size: 0.9rem;
  }

  /* ── las tres grietas: se desfijan y se leen las tres, una debajo de otra.
       El orden de apilado es el mismo que el de la secuencia, asi que cada
       grieta se dibuja justo cuando llega a pantalla. ── */
  .cracks {
    height: auto;
  }
  .cracks__pin {
    position: static;
    height: auto;
    grid-template-rows: none;
    gap: clamp(18px, 3vh, 28px);
    padding: clamp(84px, 11vh, 104px) var(--pad) clamp(48px, 7vh, 76px);
    overflow: visible;
  }
  .cracks__head {
    display: block;
  }
  .cracks__lede {
    max-width: 34ch;
  }
  /* Las tres grietas se apilan como un mazo: cada una se queda pegada bajo la
     anterior y la que llega tapa a la de abajo dejandole ver la cabecera. Es
     lo mismo que en apaisado se lee de un vistazo en tres columnas, pero con
     el gesto que corresponde a un telefono: una encima de otra al bajar. */
  .cracks__grid {
    display: block;
    grid-template-columns: none;
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
  }
  .crack {
    position: sticky;
    top: calc(78px + var(--i, 0) * 15px);
    min-height: 0;
    grid-template-rows: auto minmax(190px, auto) auto;
    gap: 16px;
    /* Pegadas. El rato que cada tarjeta se queda sola no lo da un hueco entre
       ellas, lo da el viaje de la siguiente desde el pie de la pantalla hasta
       su sitio: casi una pantalla entera de scroll. Separarlas solo mete un
       vacio en blanco donde deberia asomar la que viene. */
    margin-bottom: 18px;
    background: var(--paper);
    box-shadow:
      0 -1px 0 rgba(23, 19, 15, 0.05),
      0 -18px 34px rgba(69, 40, 22, 0.07);
    transform-origin: 50% 0;
    scroll-snap-align: none;
    will-change: transform;
  }
  .crack:nth-of-type(2) {
    --i: 1;
  }
  .crack:nth-of-type(3) {
    --i: 2;
    margin-bottom: 0;
  }
  .crack__take {
    transform: none;
  }
  /* El globo del cliente ocupa dos lineas en vertical, asi que el reloj de las
     nueve horas le caia encima. La escena necesita mas alto y el reloj bajar
     por debajo del globo. */
  .late {
    height: auto;
    min-height: 264px;
  }
  .late__message {
    width: min(88%, 320px);
  }
  .late__wait {
    top: 44%;
  }
  .late__message--reply {
    top: 56%;
  }
  .late__sad {
    width: 74px;
  }
  .cracks__foot {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .cracks__foot > span {
    display: flex;
    justify-content: flex-start;
    min-height: 46px;
    border-left: 0;
    border-top: 1px solid rgba(23, 19, 15, 0.1);
    text-align: left;
  }

  /* ── multicanal: entran los cuatro canales, dos por fila ── */
  .channels {
    height: 250vh;
  }
  /* El hilo se estira hasta el pie del pin. Con align-self:start dejaba una
     franja negra debajo de la tarjeta que parecia un corte de la pagina. */
  .merge {
    grid-template-rows: auto minmax(0, 1fr);
  }
  .merge__lanes {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .merge__lanes li {
    flex-direction: column;
    gap: 5px;
    padding: 9px 4px;
    font-size: 0.6rem;
  }
  .merge__lanes li:nth-child(n + 4) {
    display: flex;
  }
  .merge__inbox {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .merge__inbox ul {
    flex: 1;
    align-content: start;
    min-height: 0;
    overflow: hidden;
  }
  .merge__inbox li {
    grid-template-columns: 28px minmax(0, 1fr) 14px auto;
    grid-template-rows: auto auto;
    row-gap: 1px;
    column-gap: 10px;
  }
  .merge__inbox li img {
    grid-row: 1 / span 2;
  }
  .merge__inbox li b {
    grid-column: 2;
    grid-row: 1;
  }
  .merge__inbox li i {
    grid-column: 2;
    grid-row: 2;
  }
  .merge__inbox li .ch {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .merge__inbox li em {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  /* ── por dentro: los siete pasos en fila india, con el numero en su propia
       columna para que nunca se coma el titulo, y la linea de puntos cosiendo
       una tarjeta con la siguiente. La respuesta y Closy van al final, que es
       cuando de verdad se entregan. ── */
  .trace {
    height: auto;
  }
  .trace__pin {
    position: static;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    gap: 0;
    padding: clamp(84px, 11vh, 104px) var(--pad) clamp(48px, 7vh, 76px);
    overflow: visible;
  }
  .trace__intro {
    display: contents;
  }
  .trace__intro .pin__head {
    order: 0;
    max-width: none;
  }
  .trace__intro .h2 {
    font-size: clamp(2rem, 7.4vw, 2.8rem);
  }
  .trace__intro .h2 span,
  .trace__intro .h2 em {
    white-space: normal;
  }
  .trace__intro .lede {
    display: block;
    margin-top: 14px;
  }
  .trace__flow {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: clamp(24px, 3.5vh, 36px);
    overflow: visible;
  }
  .trace__cards,
  .trace__delivery,
  .trace__pipeline {
    min-width: 0;
  }
  .trace__cards {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 30px;
  }
  .trace__links {
    display: none;
  }
  .tracecard {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-content: start;
    column-gap: 12px;
    padding: 16px;
  }
  .tracecard__step,
  .trace__delivery .tracecard__step {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 34px;
    height: 34px;
    left: auto;
    top: auto;
    right: auto;
    font-size: 1rem;
    transform: none;
  }
  .tracecard h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 1rem;
  }
  .tracecard .traceasset {
    grid-column: 1 / -1;
    grid-row: 2;
    flex: none;
    margin-top: 14px;
  }
  /* el hilo de puntos entre paso y paso, en el eje de los numeros */
  .tracecard + .tracecard::before {
    content: '';
    position: absolute;
    left: 32px;
    top: -30px;
    height: 30px;
    border-left: 2px dashed var(--orange);
    opacity: 0.45;
  }
  .trace__delivery {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 14px 12px;
    min-height: 0;
    margin-top: 30px;
    padding: 16px;
  }
  .trace__delivery::before {
    left: 32px;
    right: auto;
    top: -30px;
    height: 30px;
  }
  .trace__delivery .trace__plane {
    grid-column: 1;
    grid-row: 2;
    width: 34px;
    margin: 0;
  }
  .trace__delivery > div {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .trace__delivery h3 {
    font-size: 1rem;
  }
  .trace__pipeline {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 2px 12px;
    margin-top: 12px;
    padding: 12px 16px;
  }
  .trace__pipeline > i {
    grid-row: 1 / span 2;
  }
  .trace__pipeline b {
    grid-column: 2;
    align-self: end;
  }
  .trace__pipeline span {
    grid-column: 2;
    align-self: start;
    padding-left: 0;
    border-left: 0;
  }
  /* La pregunta y la respuesta se separan. En apaisado viven juntas en la
     columna de la izquierda y se leen de golpe: ves lo que entra antes de
     mirar los pasos de la derecha. En una sola columna, dejarlas juntas al
     final significa que te explican los siete pasos y solo al terminar ves
     de que mensaje se hablaba. Asi que la pregunta abre —justo debajo de
     "Un mensaje entra"— y la respuesta cierra, que es lo que se entrega. */
  .trace__chat {
    display: contents;
  }
  .tc--in {
    order: 1;
    margin-top: clamp(20px, 3vh, 30px);
  }
  .tc--in span {
    font-size: 0.95rem;
  }
  /* El paso 1 repetia el mismo texto justo debajo del globo que lo abre. En
     apaisado no se nota porque estan en columnas distintas; en una sola se
     lee dos veces seguidas. Aqui el paso se queda con lo suyo: de quien es y
     por donde entro. */
  .tracecard .traceasset--message > p {
    display: none;
  }
  .tc--out {
    order: 3;
    margin-top: clamp(24px, 3.5vh, 36px);
    margin-left: 0;
  }
  .trace__success {
    order: 4;
    margin: 16px auto 0;
  }

  /* ── tu agente ── */
  .build {
    height: 280vh;
  }

  /* ── tablero ── */
  .board {
    height: 220vh;
  }

  /* ── catalogo: tampoco se fija; el Excel, el registro de Closy y el
       borrador se leen en el mismo orden en que ocurren ── */
  .ingest {
    height: auto;
  }
  .ingest .pin {
    position: static;
    height: auto;
    min-height: 0;
    grid-template-rows: none;
    padding: clamp(84px, 11vh, 104px) var(--pad) clamp(48px, 7vh, 76px);
    overflow: visible;
  }
  .ingest__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* ── numeros ── */
  .metrics__pin {
    gap: 20px;
  }

  /* ── el equipo, integraciones y cierre ── */
  .team__foot,
  .stack__foot,
  .setup__foot {
    font-size: 0.9rem;
  }
  .cta__title {
    font-size: clamp(1.9rem, 8vw, 2.7rem);
  }
}

@media (max-width: 620px) {
  .crack {
    min-height: 0;
  }
  .cracks__grid {
    grid-auto-columns: auto;
  }
  .stack__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot {
    gap: 8px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beats li,
  .stack__grid li,
  .steps li,
  .config dl > div,
  .tags span,
  .log li,
  .work__log li,
  .dcard,
  .draft__cats li,
  .cb,
  .tc--out {
    opacity: 1 !important;
    transform: none !important;
  }
  .card {
    display: none;
  }
}