/* Fuentes autoalojadas: la CSP de vercel.json solo permite font-src 'self'. */
@font-face { font-family: "Inter Tight"; src: url("/fonts/inter-tight-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

/* Thirty Labs — Opción D. Estructura editorial (referencia Edition) con los tokens del sistema de Paper (--30labs-c-*). */

:root {
  --bg: #ffffff;
  --ice: #e9f3f8;
  --mist: #dce9f1;
  --line: #c3d4e2;
  --ink: #0b1f3a;
  --slate: #4a5d78;
  --fog: #8a9bb2;
  --blue: #095fbb;
  --blue-light: #7aacdc;
  --blue-deep: #064a93;
  --carbon: #141414;
  --graphite: #222222;
  --white: #ffffff;

  --on-dark: rgba(255, 255, 255, 0.95);
  --on-dark-muted: rgba(255, 255, 255, 0.66);
  --on-dark-rule: rgba(255, 255, 255, 0.09);

  --blue-fill: linear-gradient(in oklab 180deg, #3a82cf 0%, #095fbb 50%, #0753a4 100%);
  --blue-fill-hover: linear-gradient(in oklab 180deg, #4b90da 0%, #0b68cb 50%, #075bb3 100%);
  --ice-glow: radial-gradient(ellipse 70% 90% at 100% 100% in oklab, rgba(122, 172, 220, 0.42) 0%, rgba(122, 172, 220, 0) 70%), linear-gradient(in oklab 180deg, #f4f9fc 0%, #e2edf4 100%);

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

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --pill: 999px;

  --gutter: clamp(20px, 3.4vw, 48px);
  --section: clamp(88px, 10vw, 152px);
  --page: 1344px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  accent-color: var(--blue); caret-color: var(--blue);
}
::selection { background: var(--blue); color: var(--white); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.callcard :focus-visible, .footer :focus-visible { outline-color: var(--blue-light); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--pill); background: var(--ink); color: var(--white); text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--page) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografía ---------- */

.h2 { font-size: clamp(28px, 2.9vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }

/* ---------- Botones y enlaces ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding-inline: 24px; border-radius: var(--pill);
  font: 500 16px/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}
.btn--sm { height: 38px; padding-inline: 18px; font-size: 14px; }
.btn--lg { height: 56px; padding-inline: 28px; font-size: 17px; }
.btn--blue { color: var(--white); background: var(--blue-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(11, 31, 58, 0.18); }
.btn--blue:hover { background: var(--blue-fill-hover); }
.btn--outline { color: var(--ink); border: 1px solid var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.btn--ghost-dark { color: var(--white); border: 1px solid rgba(255, 255, 255, 0.3); }
.btn--ghost-dark:hover { border-color: var(--white); }
.btn__icon { width: 16px; height: 16px; transition: transform 220ms var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link svg { width: 16px; height: 16px; transition: transform 220ms var(--ease); }
.link:hover svg { transform: translateX(3px); }
.link:hover { color: var(--blue); }

/* ---------- Header ---------- */

.header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color 220ms var(--ease); }
.header:has(+ main .hero) { border-bottom-color: var(--mist); }
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; max-width: calc(var(--page) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.header__inner > .btn { justify-self: end; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); justify-self: start; }
.logo__mark { width: 20px; height: 25px; fill: var(--blue); }
.logo__word { font-size: 20px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.logo--dark { color: var(--white); }
.logo--dark .logo__mark { fill: var(--blue-light); }

.nav { display: flex; gap: 36px; font-size: 15px; }
.nav a { text-decoration: none; padding-block: 8px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 220ms var(--ease); }
.nav a:hover { background-size: 100% 1px; }

/* ---------- Héroe ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hero { padding-top: clamp(56px, 7vw, 104px); }
.hero__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); align-items: end; gap: 40px clamp(40px, 6vw, 112px); }
.hero__title { font-size: clamp(40px, 5.6vw, 84px); font-weight: 500; line-height: 1.02; letter-spacing: -0.045em; }
.hero__title > span[aria-hidden] { display: block; }

/* Palabra que se escribe y se borra, con el cursor azul de un editor. */
.rotator { display: block; min-height: 1.02em; white-space: nowrap; }
.rotator__word { color: var(--ink); }
.rotator__word::after {
  content: ""; display: inline-block; vertical-align: -0.08em;
  width: 0.06em; height: 0.86em; margin-left: 0.06em;
  background: var(--blue); border-radius: 2px;
  animation: caret 1.06s steps(1) infinite;
}
.rotator.is-typing .rotator__word::after { animation: none; }
@keyframes caret { 50% { opacity: 0; } }

.hero__side { display: flex; flex-direction: column; gap: 28px; padding-bottom: 10px; }
.hero__lede { font-size: 17px; line-height: 1.55; color: var(--slate); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* Escenario: la conversación (lo que ve el cliente) junto a la traza (lo que construimos). */
.stage { position: relative; margin-top: clamp(48px, 6vw, 80px); padding: clamp(20px, 4vw, 56px); border-radius: var(--r-lg); background: var(--ice-glow); }
.stage__cap { position: absolute; right: 20px; bottom: 14px; font: 400 11px/1 var(--mono); color: var(--slate); }

.engine { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 16px; max-width: 1120px; margin-inline: auto; }

.chat {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 30px 60px -28px rgba(11, 31, 58, 0.28), 0 6px 14px -8px rgba(11, 31, 58, 0.1);
  overflow: hidden;
}
.chat__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--mist); }
.chat__who { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.25; }
.chat__who b { display: block; font-weight: 600; }
.chat__who small { font-size: 12px; color: var(--slate); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 600; }
.chat__live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--slate); }
.chat__live i { width: 7px; height: 7px; border-radius: 50%; background: #2f9e6c; }
.chat__thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 20px 18px; min-height: 340px; }

.msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.msg--in { align-self: flex-start; background: var(--ice); border-bottom-left-radius: 4px; }
.msg--out { align-self: flex-end; background: var(--blue); color: var(--white); border-bottom-right-radius: 4px; }
.msg--typing { display: none; align-self: flex-end; gap: 4px; padding: 14px 16px; background: var(--blue); border-bottom-right-radius: 4px; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); animation: dot 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.msg--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 30% { transform: translateY(-3px); opacity: 0.5; } }

.trace {
  display: flex; flex-direction: column;
  background: var(--carbon); color: var(--on-dark);
  border-radius: var(--r-md); border: 1px solid var(--on-dark-rule);
  box-shadow: 0 30px 60px -28px rgba(11, 31, 58, 0.45);
  font-family: var(--mono); font-size: 12px;
  overflow: hidden;
}
.trace__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--on-dark-rule); }
.trace__title { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--white); }
.trace__id { color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.trace__rows { flex: 1; display: flex; flex-direction: column; padding: 10px 0; }
.span { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 56px; align-items: center; gap: 14px; padding: 9px 18px; }
.span__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--on-dark); }
.span__name em { font-style: normal; color: var(--blue-light); }
.span__bar { position: relative; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.05); }
.span__bar i { position: absolute; top: 0; bottom: 0; left: var(--at); width: var(--w); border-radius: 2px; background: var(--blue-light); transform-origin: left; }
.span__ms { text-align: right; color: rgba(255, 255, 255, 0.66); font-variant-numeric: tabular-nums; }

/* Calendario: el agente busca espacios libres y la cita nueva cae en las 15:30. Horario de 9:00 a 17:00 (1 h = 12.5%). */
.cal { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; border-top: 1px solid var(--on-dark-rule); background: var(--graphite); }
.cal__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cal__title { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__status { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap; }
.cal__status--search { display: none; color: rgba(255, 255, 255, 0.66); }
.cal__status--search::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.5); border-top-color: transparent; animation: spin 700ms linear infinite; }
.cal__status--done { color: #7fd1a8; }
.cal__status--done::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ok) center / 12px no-repeat; mask: var(--ok) center / 12px no-repeat; }
.cal__day { display: flex; flex-direction: column; gap: 6px; }
.cal__hours { display: grid; grid-template-columns: repeat(8, 1fr); color: rgba(255, 255, 255, 0.5); font-size: 11px; }
.cal__track {
  position: relative; height: 48px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 12.5%), rgba(255, 255, 255, 0.03);
}
.cal__track > span {
  position: absolute; top: 4px; bottom: 4px; left: calc(var(--at) + 2px); width: calc(var(--w) - 4px); border-radius: 5px;
  display: flex; flex-direction: column; justify-content: center; padding-inline: 7px;
  font-family: var(--font); font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal__track b { font-weight: 600; }
.cal__busy { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.cal__busy--a { --at: 0%; --w: 12.5%; }
.cal__busy--b { --at: 25%; --w: 25%; }
.cal__busy--c { --at: 50%; --w: 31.25%; }
.cal__free { border: 1px dashed rgba(122, 172, 220, 0.6); align-items: center; color: var(--blue-light); }
.cal__free--a { --at: 12.5%; --w: 12.5%; }
.cal__free--b { --at: 81.25%; --w: 12.5%; }
.cal__scan { display: none; }
.cal__event {
  --at: 81.25%; --w: 12.5%;
  background: var(--blue-fill); color: var(--white); font-weight: 500;
  box-shadow: 0 6px 16px -6px rgba(9, 95, 187, 0.8);
}
.engine { --ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.5 2.5 5.1-5.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* La secuencia: sin JS (o con movimiento reducido) todo se ve en su estado final.
   hero.js añade .is-playing y va marcando cada paso con .is-on. */
.engine.is-playing .msg[data-step]:not(.is-on) { display: none; }
.engine.is-playing .span:not(.is-on) { visibility: hidden; }
.engine.is-playing .msg.is-on { animation: msg-in 520ms var(--ease) both; }
.engine.is-playing .msg--typing.is-on { display: inline-flex; }
.engine.is-playing .msg--typing.is-gone { display: none; }
.engine.is-playing .span.is-on { animation: row-in 380ms var(--ease) both; }
.engine.is-playing .span.is-on .span__bar i { animation: bar-grow 620ms var(--ease) both; }
.engine.is-playing .span.is-on .span__ms { animation: fade 300ms ease 560ms both; }
.engine.is-playing .span.is-on .span__name { animation: lit 1400ms ease both; }
.engine.is-playing .cal:not(.is-on) { visibility: hidden; }
.engine.is-playing .cal.is-on { animation: row-in 420ms var(--ease) both; }
.engine.is-playing .cal__status--search { display: inline-flex; }
.engine.is-playing .cal:has(.cal__event.is-on) .cal__status--search,
.engine.is-playing .cal__status--done:not(.is-on),
.engine.is-playing .cal__event:not(.is-on) { display: none; }
.engine.is-playing .cal__status--done.is-on { animation: fade 300ms ease both; }
.engine.is-playing .cal__status--done.is-on::before { animation: pop 320ms var(--ease) both; }
.engine.is-playing .cal:not(:has(.cal__event.is-on)) .cal__free { animation: free 1.2s ease-in-out infinite alternate; }
.engine.is-playing .cal__scan.is-on {
  display: block; left: 0; width: 2px; top: -2px; bottom: -2px; border-radius: 1px;
  background: var(--blue-light); box-shadow: 0 0 12px 1px rgba(122, 172, 220, 0.7);
  animation: scan 1.6s var(--ease) 200ms both;
}
.engine.is-playing .cal__event.is-on { animation: drop 640ms var(--ease) both; }
.engine.is-resetting { animation: reset 600ms ease both; }

@keyframes msg-in { from { transform: translateY(10px) scale(0.98); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes row-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lit { 0% { color: var(--blue-light); } 100% { color: var(--on-dark); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(0.4); } to { transform: none; } }
@keyframes free { from { border-color: rgba(122, 172, 220, 0.3); } to { border-color: rgba(122, 172, 220, 0.9); background: rgba(122, 172, 220, 0.1); } }
@keyframes scan { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }
@keyframes drop { from { clip-path: inset(0 100% 0 0 round 5px); transform: translateY(-6px); filter: brightness(1.5); } to { clip-path: inset(0 0 0 0 round 5px); transform: none; filter: none; } }
@keyframes reset { 0% { opacity: 1; } 45% { opacity: 0; } 55% { opacity: 0; } 100% { opacity: 1; } }

/* Tecnologías con las que trabajamos: logos en loop de derecha a izquierda. */
.stack { display: flex; align-items: center; gap: 16px 48px; padding-block: 36px; border-bottom: 1px solid var(--mist); }
.stack__lead { flex-shrink: 0; font-size: 13px; font-weight: 600; width: 12em; }
.marquee {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.stack__list { display: flex; flex-shrink: 0; gap: 44px; padding-right: 44px; }
.stack__list li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--slate); transition: color 200ms var(--ease);
}
.stack__list li:hover { color: var(--ink); }
.tech__logo { width: 22px; height: 22px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask: none; mask: none; }
  .marquee__track { width: auto; animation: none; }
  .stack__list { flex-wrap: wrap; flex-shrink: 1; gap: 14px 32px; padding-right: 0; }
  .stack__list[aria-hidden] { display: none; }
}

/* ---------- Secciones ---------- */

.section { padding-block: var(--section); }
.section--tight { padding-top: 0; }
.section--ice { background: var(--ice); }
/* Separador entre secciones blancas, al ancho del contenido y con el mismo aire arriba y abajo.
   Las bandas de color (.section--ice, .closing) ya marcan el corte y no lo llevan. */
.section--rule { padding-top: 0; }
.section--rule > .wrap::before { content: ""; display: block; grid-column: 1 / -1; height: 1px; margin-bottom: var(--section); background: var(--mist); }
.section--rule > .split::before { margin-bottom: calc(var(--section) - 48px); }

.head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr); align-items: end; gap: 24px clamp(40px, 6vw, 120px); margin-bottom: clamp(40px, 4.5vw, 64px); }
.head .h2 { max-width: 18em; }
.head p { color: var(--slate); text-wrap: pretty; }

/* Intro */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 120px); }
.intro__text { display: flex; flex-direction: column; gap: 20px; color: var(--slate); max-width: 38em; }
.intro__text p:first-child { color: var(--ink); font-size: 18px; }

/* Lo que hemos construido (estructura de "What we do" de Edition): categorías genéricas en columnas. */
/* Trabajo previo: banda oscura con tarjetas en acordeón horizontal (referencia: alty.co).
   La tarjeta abierta muestra la descripción; work.js abre la que se señala o enfoca. */
.work-band { background: var(--carbon); color: var(--on-dark); }
.work-band .head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
.work-band .head .h2 { color: var(--white); max-width: 16em; }
.work-band .head p { max-width: 40em; color: var(--on-dark-muted); }

.work { display: flex; align-items: stretch; gap: 12px; }
.work__item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--graphite); border: 1px solid var(--on-dark-rule); border-radius: var(--r-lg);
  overflow: hidden; outline: none;
  transition: flex-grow 700ms var(--ease), border-color 300ms ease;
}
.work__item.is-open { flex-grow: 2.6; }
.work__item:focus-visible { border-color: var(--blue-light); }
.work__img { position: relative; flex: none; height: clamp(240px, 23vw, 330px); overflow: hidden; background: #1c1c1c; }
.work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.work__item:hover .work__img img { transform: scale(1.03); }
.work__img--top img { object-position: top; }
.work__body { flex: 1; display: flex; flex-direction: column; padding: 18px 22px 22px; }
.work__item h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--white); }
/* La descripción tiene ancho fijo para no reacomodarse mientras la tarjeta se abre. */
.work__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--ease); }
.work__more p {
  min-height: 0; overflow: hidden; width: 42ch; padding-top: 10px;
  font-size: 15px; line-height: 1.5; color: var(--on-dark-muted);
  opacity: 0; transition: opacity 300ms ease;
}
.work__item.is-open .work__more { grid-template-rows: 1fr; }
.work__item.is-open .work__more p { opacity: 1; transition-delay: 250ms; }

/* Las columnas suben en cascada al entrar en pantalla. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* Móvil: tarjetas completas, una debajo de otra. */
@media (max-width: 860px) {
  .work { flex-direction: column; height: auto; gap: 16px; }
  .work__item { flex: none; }
  .work__img { height: auto; aspect-ratio: 16 / 10; }
  .work__more { grid-template-rows: 1fr; }
  .work__more p { width: auto; opacity: 1; }
}

/* Split con encabezado fijo */
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 48px clamp(40px, 6vw, 120px); align-items: start; }
.split__aside { position: sticky; top: 112px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.split__note { color: var(--slate); }
.split__note a { color: var(--ink); text-underline-offset: 4px; }

.fits { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(28px, 3.5vw, 56px); }
.fit { display: flex; flex-direction: column; gap: 10px; }
.fit__icon { width: 32px; height: 32px; margin-bottom: 8px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fit h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.fit p { font-size: 15px; color: var(--slate); text-wrap: pretty; }

/* Tarjeta de llamada */
.callcard { border-radius: var(--r-lg); background: var(--graphite); color: var(--on-dark); }
.callcard__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: clamp(32px, 5vw, 72px); }
.callcard__copy .h2 { max-width: 18em; }
.callcard__copy p { color: var(--on-dark-muted); max-width: 40em; }

/* Servicios: empiezan apilados (como Services — Stacking en Paper) y se desapilan al hacer scroll.
   Sin JS, con movimiento reducido o sin altura suficiente se listan uno debajo del otro;
   deck.js añade .is-stacked y mueve cada tarjeta con --y, --s y --b. */
.deck { --stick: 88px; --peek: 16px; --step: 70vh; }
.deck__cards { display: flex; flex-direction: column; gap: 24px; }
.svc {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px;
  min-height: 540px; padding: 20px; border-radius: 32px; background: var(--white);
  box-shadow: 0 0 0 1px rgba(11, 31, 58, 0.07), 0 30px 60px -40px rgba(11, 31, 58, 0.55);
}
/* Recorrido de scroll para los tres cambios (padding no cuenta para sticky; un bloque sí). */
.deck.is-stacked::after { content: ""; display: block; height: calc(3 * var(--step)); }
.deck.is-stacked .deck__stage { position: sticky; top: var(--stick); }
.deck.is-stacked .deck__cards { display: grid; gap: 0; padding-top: calc(3 * var(--peek)); }
.deck.is-stacked .svc {
  grid-area: 1 / 1; transform-origin: 50% 0;
  transform: translateY(var(--y, 0px)) scale(var(--s, 1)); filter: brightness(var(--b, 1));
  will-change: transform;
}
.svc__media { position: relative; min-height: 0; border-radius: 22px; padding: clamp(28px, 4vw, 48px); background: var(--ice-glow); }
.svc__tag { position: absolute; right: 18px; bottom: 16px; font: 400 11px/1 var(--mono); color: var(--slate); }
.svc__body { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 28px 32px 28px 24px; }
.svc__top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--slate); }
.svc__kind { display: flex; align-items: center; gap: 10px; }
.svc__kind i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(in oklab 180deg, var(--blue-light), var(--blue) 55%, var(--blue-deep)); }
.svc__num { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.svc__main { display: flex; flex-direction: column; gap: 18px; }
.svc__title { font-size: clamp(32px, 3.1vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; }
.svc__lede { max-width: 26em; font-size: 18px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }
.svc__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svc__tags li { padding: 7px 14px; border-radius: var(--pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 18px; }

.deck__progress {
  display: none; align-items: center; gap: 14px; width: max-content; margin: 20px auto 0;
  padding: 10px 16px; border-radius: var(--pill); background: var(--white);
  box-shadow: 0 0 0 1px rgba(11, 31, 58, 0.07), 0 10px 24px -14px rgba(11, 31, 58, 0.4);
  font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--slate);
}
.deck.is-stacked .deck__progress { display: flex; }
.deck__progress > span:first-child { color: var(--ink); }
.deck__bars { display: flex; align-items: center; gap: 6px; }
.deck__bars i { width: 24px; height: 4px; border-radius: var(--pill); background: var(--line); transition: width 400ms var(--ease), background-color 300ms ease; }
.deck__bars i.is-done { background: var(--blue); }
.deck__bars i.is-on { width: 48px; background: var(--blue-fill); }

.svc__media--chat { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.svc__media--chat .msg--in { background: var(--white); }
.svc__media--chat .msg { max-width: 80%; box-shadow: 0 6px 16px -10px rgba(11, 31, 58, 0.3); }

.svc__media--flow { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.svc__media--flow li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px 14px 40px; margin-bottom: 14px; background: var(--white); border-radius: var(--r-sm); box-shadow: 0 6px 16px -12px rgba(11, 31, 58, 0.35); font-size: 15px; }
.svc__media--flow li:last-child { margin-bottom: 0; }
.svc__media--flow li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--blue); }
.svc__media--flow li:last-child::before { background: var(--blue); }
.svc__media--flow li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: calc(100% - 2px); height: 18px; border-left: 1.5px dashed var(--blue-light); }
.svc__media--flow b { font-weight: 600; }
.svc__media--flow span { font-size: 13px; color: var(--slate); text-align: right; }

.svc__media--plan { display: flex; align-items: center; }
.plan { width: 100%; display: flex; flex-direction: column; gap: 18px; padding: 24px; background: var(--white); border-radius: var(--r-md); box-shadow: 0 10px 24px -16px rgba(11, 31, 58, 0.4); }
.plan__row { display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto auto; gap: 6px 16px; align-items: center; font-size: 13px; }
.plan__row span { color: var(--slate); grid-row: span 2; }
.plan__row i { position: relative; height: 10px; border-radius: var(--pill); background: var(--ice); }
.plan__row i::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--from); right: calc(100% - var(--to)); border-radius: inherit; background: var(--blue-light); }
.plan__row i.is-last::after { background: var(--blue-fill); }
.plan__row b { font-weight: 600; font-size: 13px; }

.svc__media--term { display: block; background: var(--carbon); color: var(--on-dark); font: 400 13px/1.8 var(--mono); white-space: pre-wrap; padding-block: clamp(56px, 7vw, 96px); }
.t-dim { color: rgba(255, 255, 255, 0.6); }
.t-blue { color: var(--blue-light); }
.t-ok { color: #7fd1a8; }

/* Ilustraciones de los servicios: se animan en loop solo mientras su tarjeta está al frente
   (deck.js marca .is-live). Sin JS o con movimiento reducido se quedan en su estado final. */
@media (prefers-reduced-motion: no-preference) {
  .svc.is-live .svc__media--chat .msg--in { animation: chat-in 9s var(--ease) infinite both; }
  .svc.is-live .svc__media--chat .msg--out { animation: chat-out 9s var(--ease) infinite both; }

  .svc.is-live .svc__media--flow li { animation: flow-step 6s ease infinite both; }
  .svc.is-live .svc__media--flow li::before { animation: flow-dot 6s ease infinite both; }
  .svc.is-live .svc__media--flow li:nth-child(2), .svc.is-live .svc__media--flow li:nth-child(2)::before { animation-delay: 1.5s; }
  .svc.is-live .svc__media--flow li:nth-child(3), .svc.is-live .svc__media--flow li:nth-child(3)::before { animation-delay: 3s; }
  .svc.is-live .svc__media--flow li:nth-child(4), .svc.is-live .svc__media--flow li:nth-child(4)::before { animation-delay: 4.5s; }

  .svc.is-live .plan__row i::after { transform-origin: left; animation: plan-bar 8s var(--ease) infinite both; }
  .svc.is-live .plan__row b { animation: plan-label 8s var(--ease) infinite both; }
  .svc.is-live .plan__row:nth-child(2) i::after, .svc.is-live .plan__row:nth-child(2) b { animation-delay: 0.7s; }
  .svc.is-live .plan__row:nth-child(3) i::after, .svc.is-live .plan__row:nth-child(3) b { animation-delay: 1.4s; }

  .svc.is-live .t-line { animation: term-line 10s ease infinite both; }
  .svc.is-live .t-line:nth-child(2) { animation-delay: 0.6s; }
  .svc.is-live .t-line:nth-child(3) { animation-delay: 1.1s; }
  .svc.is-live .t-line:nth-child(4) { animation-delay: 2.4s; }
  .svc.is-live .t-line:nth-child(5) { animation-delay: 3.2s; }
  .svc.is-live .t-line:nth-child(6) { animation-delay: 4s; }
  .svc.is-live .t-caret { animation: caret 1.06s steps(1) infinite; }
}
.t-caret { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 0.3em; vertical-align: -0.2em; background: var(--blue-light); opacity: 0.8; }

@keyframes chat-in { 0% { opacity: 0; transform: translateY(10px); } 5%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes chat-out { 0%, 22% { opacity: 0; transform: translateY(10px); } 30%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes flow-step { 0%, 26%, 100% { transform: none; box-shadow: 0 6px 16px -12px rgba(11, 31, 58, 0.35); } 6%, 18% { transform: translateX(6px); box-shadow: 0 0 0 1px rgba(9, 95, 187, 0.35), 0 10px 22px -12px rgba(9, 95, 187, 0.45); } }
@keyframes flow-dot { 0%, 26%, 100% { background: transparent; } 6%, 18% { background: var(--blue); } }
@keyframes plan-bar { 0% { transform: scaleX(0); } 14%, 90% { transform: scaleX(1); opacity: 1; } 97%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes plan-label { 0%, 8% { opacity: 0; transform: translateX(-6px); } 16%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes term-line { 0% { opacity: 0; } 3%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* Acordeones */
.acc { width: 100%; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  transition: color 160ms var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--blue); }
.acc summary svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 300ms var(--ease); }
.acc details[open] summary svg { transform: rotate(45deg); }
.acc details p { padding: 0 48px 20px 0; color: var(--slate); text-wrap: pretty; }
.acc--faq summary { font-size: clamp(17px, 1.5vw, 20px); padding: 24px 0; }

/* Por qué */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px clamp(24px, 3vw, 40px); }
.step { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; padding-top: 28px; border-top: 1px solid var(--line); }
.step::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--ice); }
.step__num { font: 500 13px/1 var(--mono); color: var(--blue); letter-spacing: 0.02em; }
.step h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; margin-top: 8px; }
.step p { color: var(--slate); font-size: 15px; text-wrap: pretty; }
.step .step__out { align-self: start; padding-top: 16px; border-top: 1px dashed var(--line); color: var(--ink); font-size: 14px; }

/* Cierre */

/* Cierre: banda azul con un botón grande */
.closing { background: var(--blue-fill); color: var(--white); padding-block: clamp(96px, 11vw, 168px); }
.closing__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.8fr); align-items: end; gap: 56px clamp(40px, 6vw, 120px); }
.closing__title { font-size: clamp(44px, 6.2vw, 96px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
.closing__title span { display: block; color: rgba(255, 255, 255, 0.72); }
.closing__side { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.closing__facts { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.closing__facts li { display: flex; align-items: center; gap: 12px; padding-block: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.28); font-size: 17px; }
.closing__facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--white); }
.btn--white { color: var(--blue-deep); background: var(--white); }
.btn--white:hover { background: var(--ice); }
.btn--xl { height: 68px; padding-inline: 32px; font-size: 19px; justify-content: space-between; }
.closing__alt { font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.closing__alt a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.closing :focus-visible { outline-color: var(--white); }

/* Footer */
.footer { background: var(--carbon); color: var(--on-dark-muted); border-top: 1px solid var(--on-dark-rule); padding-block: 64px 32px; font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer__brand p { max-width: 24em; }
.footer__mail { color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.footer nav { display: flex; flex-direction: column; gap: 10px; }
.footer h3 { font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.footer nav a, .footer__base a { text-decoration: none; transition: color 160ms var(--ease); }
.footer nav a:hover, .footer__base a:hover { color: var(--white); }
.footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--on-dark-rule); font-size: 13px; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .hero__top, .head, .intro, .split, .closing__inner { grid-template-columns: 1fr; }
  .closing__side { max-width: 30rem; }
  .split__aside { position: static; }
  .hero__side { max-width: 40em; }
  .engine { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .deck { --stick: 72px; --peek: 8px; --step: 60vh; }
  .svc { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 12px; border-radius: 24px; }
  .svc__media { min-height: 0; padding: 16px 20px; border-radius: 16px; }
  .svc__media--term { padding-block: 20px; }
  .svc__media--chat, .svc__media--plan { padding-bottom: 36px; }
  .svc__media--flow li { padding: 8px 14px 8px 34px; margin-bottom: 8px; font-size: 13px; }
  .svc__media--flow li::before { left: 12px; }
  .svc__media--flow li:not(:last-child)::after { left: 16px; height: 10px; }
  .svc__body { gap: 18px; padding: 6px 6px 8px; }
  .svc__title { font-size: 26px; }
  .svc__lede { font-size: 15px; }
  .svc__foot { gap: 14px; }
  .svc__tags { gap: 6px; }
  .svc__tags li { padding: 5px 11px; font-size: 13px; }
  .header__inner { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .engine { grid-template-columns: 1fr; }
  .chat__thread { min-height: 300px; }
  .stack { flex-direction: column; align-items: stretch; gap: 16px; }

  .fits { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 560px) {
  .header__inner { height: 64px; }
  .hero__title { font-size: clamp(28px, 9vw, 36px); }
  .stage { padding: 12px; }
  .stage__cap { right: 14px; bottom: 13px; }
  .msg { max-width: 88%; }
  .span { grid-template-columns: minmax(0, 1fr) 48px; gap: 4px 12px; padding: 8px 14px; }
  .span__bar { grid-column: 1 / -1; grid-row: 2; }
  .trace__head, .cal { padding-inline: 14px; }
  .cal__track > .cal__busy, .cal__track > .cal__free { font-size: 0; }
  .cal__track > .cal__event { padding-inline: 4px; font-size: 10px; }
  .svc__media--flow span { display: none; }
  .svc__media--term { font-size: 12px; }
  .steps { grid-template-columns: 1fr; }
  .acc details p { padding-right: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

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

/* Antes estilos en línea del HTML; la CSP no permite atributos style. */
.is-s1 { position:absolute; }
.is-s2 { --at:0%;--w:9%; }
.is-s3 { --at:9%;--w:30%; }
.is-s4 { --at:39%;--w:21%; }
.is-s5 { --at:60%;--w:18%; }
.is-s6 { --at:66%;--w:14%; }
.is-s7 { --at:80%;--w:10%; }
.is-s8 { --logo:url(/inicio/logos/nodedotjs.svg); }
.is-s9 { --logo:url(/inicio/logos/nextdotjs.svg); }
.is-s10 { --logo:url(/inicio/logos/dotnet.svg); }
.is-s11 { --logo:url(/inicio/logos/openjdk.svg); }
.is-s12 { --logo:url(/inicio/logos/postgresql.svg); }
.is-s13 { --logo:url(/inicio/logos/supabase.svg); }
.is-s14 { --logo:url(/inicio/logos/microsoftazure.svg); }
.is-s15 { --logo:url(/inicio/logos/vercel.svg); }
.is-s16 { --logo:url(/inicio/logos/githubactions.svg); }
.is-s17 { --logo:url(/inicio/logos/claude.svg); }
.is-s18 { --logo:url(/inicio/logos/sanity.svg); }
.is-s19 { --logo:url(/inicio/logos/tailwindcss.svg); }
.is-s20 { --i:0; }
.is-s21 { --i:1; }
.is-s22 { --i:2; }
.is-s23 { --from:0;--to:33%; }
.is-s24 { --from:33%;--to:66%; }
.is-s25 { --from:66%;--to:100%; }
.is-s26 { --i:3; }