/* 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); }

/* Héroe B (Opción C de Paper): titular grande a la izquierda, escena de dispositivos a la derecha. */
.hero--b { padding-top: clamp(40px, 5vw, 72px); overflow-x: clip; }
.lead { display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 600px); justify-content: space-between; align-items: center; gap: 48px; }
.lead__copy { display: flex; flex-direction: column; gap: 36px; position: relative; z-index: 2; container-type: inline-size; }
.lead__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--slate); }
.lead__eyebrow i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(in oklab 180deg, var(--blue-light), var(--blue) 55%, var(--blue-deep)); }
/* El tamaño sale del ancho de la columna: la palabra más larga del rotador ("productos digitales.") cabe en una línea. */
.lead__title { display: flex; flex-direction: column; font-size: min(108px, 8.8cqi); font-weight: 700; line-height: 0.91; letter-spacing: -0.04em; text-transform: uppercase; }
.lead__line { display: block; overflow: hidden; padding-bottom: 0.04em; margin-bottom: -0.04em; }
.lead__line > span { display: block; }
.lead__title em { font-style: normal; color: var(--blue); }
.lead__title b { color: var(--blue-light); }

/* Palabra que se escribe y se borra, con el cursor azul de un editor. */
.rotator { white-space: nowrap; }
.rotator__word::after {
  content: ""; display: inline-block; vertical-align: -0.08em;
  width: 0.07em; height: 0.8em; 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; } }
.lead__lede { max-width: 30em; font-size: 19px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.lead__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lead__actions .btn--blue { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 24px -8px rgba(6, 74, 147, 0.5); }
.lead__actions .btn--outline { border-color: var(--line); }
.lead__actions .btn--outline:hover { border-color: var(--ink); }

/* La escena se dibuja en un lienzo de 600 × 600 y escala con su contenedor (--u = 1px a tamaño completo). */
.hv-fit { position: relative; width: 100%; max-width: 600px; justify-self: end; container-type: inline-size; }
.hv { --u: min(1px, 100cqw / 600); position: relative; aspect-ratio: 1; font-family: var(--font); }
.hv__cap { position: absolute; right: 0; bottom: -4px; font: 400 11px/1 var(--mono); color: var(--slate); }
.hv { --tick: 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"); }
.hv > * { position: absolute; }
.hv__glow { left: calc(-10 * var(--u)); top: calc(-30 * var(--u)); width: calc(660 * var(--u)); height: calc(660 * var(--u)); border-radius: 50%; background: radial-gradient(circle in oklab, rgba(122, 172, 220, 0.35) 0%, rgba(233, 243, 248, 0.5) 45%, rgba(255, 255, 255, 0) 70%); }
.hv__slab { left: calc(60 * var(--u)); top: calc(70 * var(--u)); width: calc(500 * var(--u)); height: calc(460 * var(--u)); border-radius: calc(48 * var(--u)); transform-origin: 0 0; rotate: -8deg; background: linear-gradient(in oklab 150deg, var(--blue-light) 0%, var(--blue) 45%, var(--blue-deep) 100%); box-shadow: 0 calc(40 * var(--u)) calc(80 * var(--u)) calc(-30 * var(--u)) rgba(6, 74, 147, 0.6); }

.laptop { left: calc(20 * var(--u)); top: calc(128 * var(--u)); width: calc(560 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.laptop__lid { width: calc(500 * var(--u)); height: calc(322 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); background: #1a1a22; box-shadow: 0 0 0 calc(1 * var(--u)) #2a2a33, 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-20 * var(--u)) rgba(11, 31, 58, 0.5); }
.laptop__screen { display: flex; flex-direction: column; height: 100%; border-radius: calc(9 * var(--u)); background: var(--white); overflow: hidden; }
.laptop__base { display: flex; justify-content: center; width: calc(560 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(2 * var(--u)) calc(2 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); background: linear-gradient(in oklab 180deg, #e4e4ea, #c5c5ce); box-shadow: 0 calc(12 * var(--u)) calc(24 * var(--u)) calc(-10 * var(--u)) rgba(11, 31, 58, 0.4); }
.laptop__base i { width: calc(88 * var(--u)); height: calc(5 * var(--u)); border-radius: 0 0 calc(6 * var(--u)) calc(6 * var(--u)); background: #b4b4be; }

.app__bar { display: flex; justify-content: space-between; align-items: center; padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u)) calc(18 * var(--u)); border-bottom: calc(1 * var(--u)) solid #eeeef2; }
.app__brand { font-size: calc(12 * var(--u)); font-weight: 700; line-height: calc(14 * var(--u)); color: var(--ink); }
.app__body { flex: 1; display: flex; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)); min-height: 0; }
.app__hero { display: flex; flex-direction: column; gap: calc(6 * var(--u)); flex-shrink: 0; width: calc(170 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); color: var(--white); background: linear-gradient(in oklab 170deg, var(--blue) 0%, var(--blue-deep) 100%); }
.app__kicker { font-size: calc(8 * var(--u)); font-weight: 600; line-height: calc(10 * var(--u)); color: rgba(255, 255, 255, 0.78); }
.app__big { display: flex; align-items: baseline; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; line-height: calc(14 * var(--u)); }
.app__big b { font-size: calc(40 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.app__note { font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); color: rgba(255, 255, 255, 0.78); }
.app__main { flex: 1; display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0; }
.app__tabs { display: flex; gap: calc(6 * var(--u)); }
.app__tabs span { padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: calc(999 * var(--u)); border: calc(1 * var(--u)) solid #dddde6; font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); color: var(--ink); }
.app__tabs .is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.app__rows { display: flex; flex-direction: column; height: calc(132 * var(--u)); overflow: hidden; }
.app__row { display: flex; justify-content: space-between; align-items: flex-start; flex-shrink: 0; height: calc(33 * var(--u)); padding: calc(4 * var(--u)) calc(6 * var(--u)) 0; margin-inline: calc(-6 * var(--u)); border-bottom: calc(1 * var(--u)) solid #eeeef2; border-radius: calc(6 * var(--u)); }
.app__row span { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.app__row b { font-size: calc(10 * var(--u)); font-weight: 600; line-height: calc(12 * var(--u)); }
.app__row small { font-size: calc(8 * var(--u)); line-height: calc(10 * var(--u)); color: var(--slate); }
.app__row em { font-style: normal; font-size: calc(8 * var(--u)); font-weight: 600; line-height: calc(10 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); border-radius: calc(999 * var(--u)); color: #1e7a4c; background: #e3f4ea; }
.app__row--new { background: var(--ice); }
.app__row--new em { color: var(--white); background: var(--blue); }
.app__ci { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(20 * var(--u)); padding-inline: calc(8 * var(--u)); border-radius: 999px; background: var(--carbon); color: rgba(255, 255, 255, 0.7); font: 500 calc(8 * var(--u))/calc(10 * var(--u)) var(--mono); }
.app__ci i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #7fd1a8; }
.app__ci span { margin-left: calc(4 * var(--u)); color: #7fd1a8; }

.phone { left: calc(-8 * var(--u)); top: calc(262 * var(--u)); width: calc(156 * var(--u)); height: calc(316 * var(--u)); padding: calc(7 * var(--u)); border-radius: calc(30 * var(--u)); background: #1a1a22; box-shadow: 0 0 0 calc(1 * var(--u)) #2a2a33, 0 calc(30 * var(--u)) calc(50 * var(--u)) calc(-16 * var(--u)) rgba(11, 31, 58, 0.6); }
.phone__screen { display: flex; flex-direction: column; gap: calc(10 * var(--u)); height: 100%; padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--white); overflow: hidden; }
.phone__notch { align-self: center; width: calc(46 * var(--u)); height: calc(13 * var(--u)); flex-shrink: 0; border-radius: calc(999 * var(--u)); background: #1a1a22; }
.phone__brand { font-size: calc(9 * var(--u)); font-weight: 700; line-height: calc(12 * var(--u)); color: var(--ink); }
.phone__title { font-size: calc(17 * var(--u)); font-weight: 700; line-height: calc(19 * var(--u)); letter-spacing: -0.02em; color: var(--ink); }
.phone__slots { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.phone__slots li { display: flex; justify-content: space-between; align-items: center; height: calc(30 * var(--u)); padding-inline: calc(10 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--ice); font-size: calc(9 * var(--u)); font-weight: 500; line-height: calc(12 * var(--u)); color: var(--ink); transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease), color 300ms var(--ease); }
.phone__slots small { font-size: calc(8 * var(--u)); color: var(--slate); }
.phone__slots li:first-child { color: var(--slate); }
.phone__slots .is-picked { background: #e3eefa; box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--blue-light); color: var(--blue-deep); font-weight: 600; }
.phone__tick { width: calc(10 * var(--u)); height: calc(10 * var(--u)); background: currentColor; -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }
.phone__slots .is-picked .phone__tick { color: var(--blue-deep); }
.phone__cta { position: relative; display: grid; place-items: center; margin-top: auto; height: calc(30 * var(--u)); border-radius: calc(999 * var(--u)); background: linear-gradient(in oklab 180deg, #3a82cf, #0753a4); font-size: calc(9 * var(--u)); font-weight: 600; line-height: calc(12 * var(--u)); color: var(--white); overflow: hidden; transition: background-color 300ms var(--ease); }
.phone__cta > span { grid-area: 1 / 1; transition: transform 420ms var(--ease), opacity 300ms var(--ease); }
.phone__cta-b { transform: translateY(140%); opacity: 0; }
.phone__cta.is-done { background: #1a7f45; }
.phone__cta.is-done .phone__cta-a { transform: translateY(-140%); opacity: 0; }
.phone__cta.is-done .phone__cta-b { transform: none; opacity: 1; }
.phone__cta.is-press { scale: 0.95; }

.bot { left: calc(330 * var(--u)); top: calc(352 * var(--u)); width: calc(264 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--white); box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) calc(-12 * var(--u)) rgba(11, 31, 58, 0.35), 0 0 0 calc(1 * var(--u)) rgba(11, 31, 58, 0.06); }
.bot__head { display: flex; align-items: center; gap: calc(10 * var(--u)); padding-bottom: calc(8 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--line); }
.bot__head b { display: block; font-size: calc(13 * var(--u)); font-weight: 600; line-height: calc(16 * var(--u)); }
.bot__head small { display: block; font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); color: #1e7a4c; }
.bot__avatar { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); flex-shrink: 0; border-radius: 50%; background: linear-gradient(in oklab 180deg, var(--blue-light), var(--blue) 55%, var(--blue-deep)); }
.bot__avatar i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--white); }
.bot__thread { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.bot__msg { padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); }
.bot__msg--in { align-self: flex-end; max-width: calc(210 * var(--u)); background: var(--ice); border-bottom-right-radius: calc(4 * var(--u)); }
.bot__slot { display: grid; justify-items: start; }
.bot__slot > * { grid-area: 1 / 1; }
.bot__msg--out { max-width: calc(220 * var(--u)); color: var(--white); background: var(--blue-fill); border-bottom-left-radius: calc(4 * var(--u)); }
.bot__typing { display: flex; gap: calc(4 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); align-self: start; visibility: hidden; }
.bot__typing i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.85); animation: dot 1s ease-in-out infinite; }
.bot__typing i:nth-child(2) { animation-delay: 0.15s; }
.bot__typing i:nth-child(3) { animation-delay: 0.3s; }
.bot__foot { font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); color: var(--slate); }

.badge { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--white); box-shadow: 0 calc(16 * var(--u)) calc(36 * var(--u)) calc(-14 * var(--u)) rgba(11, 31, 58, 0.25), 0 0 0 calc(1 * var(--u)) rgba(11, 31, 58, 0.06); white-space: nowrap; }
.badge--top { left: calc(24 * var(--u)); top: calc(64 * var(--u)); }
.badge--bottom { left: calc(176 * var(--u)); top: calc(536 * var(--u)); }
.badge b { display: block; font-size: calc(13 * var(--u)); font-weight: 600; line-height: calc(16 * var(--u)); }
.badge small { display: block; font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); color: var(--slate); }
.badge__icon { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); flex-shrink: 0; border-radius: calc(10 * var(--u)); background: #e3eefa; }
.badge__icon svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Movimiento: hero.js añade .is-staged (estado de salida) y luego lo cambia por .is-in; --d es el retraso de cada pieza.
   Sin JS o con movimiento reducido, todo se ve en su estado final. */
.hero--b.is-staged [data-in] { opacity: 0; }
.hero--b.is-staged .lead__line > span { opacity: 1; translate: 0 105%; }
.hero--b.is-staged .lead__eyebrow, .hero--b.is-staged .lead__lede, .hero--b.is-staged .lead__actions { translate: 0 14px; }
.hero--b.is-staged .hv__slab { rotate: -20deg; scale: 0.92; }
.hero--b.is-staged .laptop { translate: 0 48px; }
.hero--b.is-staged .phone { translate: -48px 0; }
.hero--b.is-staged .bot { translate: 0 28px; scale: 0.96; }
.hero--b.is-staged .badge { scale: 0.86; }
.hero--b.is-in [data-in] {
  transition: opacity 700ms ease, translate 1000ms var(--ease), scale 900ms var(--ease), rotate 1400ms var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.hero--b.is-in .lead__line > span { transition-duration: 0ms, 1000ms; }

.hv .badge { animation: float 7s ease-in-out infinite alternate; }
.hv .badge--bottom { animation-delay: -3.5s; }
@keyframes float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }

/* La escena en loop: chat → teléfono → panel. */
.hv.is-playing [data-say]:not(.is-on) { visibility: hidden; }
.hv.is-playing [data-say].is-on { visibility: visible; animation: msg-in 520ms var(--ease) both; }
.hv.is-playing .bot__typing.is-gone { visibility: hidden; }
.app__row--new { transition: height 600ms var(--ease), padding 600ms var(--ease), opacity 400ms ease, border-width 0ms; }
.hv.is-playing .app__row--new:not(.is-on) { height: 0; padding-top: 0; border-bottom-width: 0; opacity: 0; }
.hv.is-playing .app__row--new.is-on { animation: flash 2200ms ease both; }
.hv.is-resetting :is(.bot__thread, .phone__slots, .phone__cta, .app__rows, .app__big) { animation: reset 600ms ease both; }
.app__big b.is-tick { animation: tick 500ms var(--ease); }

@keyframes msg-in { from { transform: translateY(10px) scale(0.98); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes flash { 0% { background-color: #cfe2f6; } 100% { background-color: var(--ice); } }
@keyframes tick { from { transform: translateY(-30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes reset { 0% { opacity: 1; } 45% { opacity: 0; } 55% { opacity: 0; } 100% { opacity: 1; } }

/* Burbujas de chat que reutiliza la sección de servicios. */
.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; }
@keyframes dot { 30% { transform: translateY(-3px); opacity: 0.5; } }

/* 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) {
  .lead { grid-template-columns: 1fr; gap: 56px; }
  .lead__copy { max-width: 640px; }
  .hv-fit { justify-self: center; }
  .head, .intro, .split, .closing__inner { grid-template-columns: 1fr; }
  .closing__side { max-width: 30rem; }
  .split__aside { position: static; }
  .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; }
  /* En la pila, la ilustración se recorta para que la tarjeta quepa en un iPhone con las barras de Safari. */
  .deck.is-stacked .svc { gap: 10px; }
  .deck.is-stacked .svc__media { height: 128px; padding-block: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .deck.is-stacked .svc__media--chat { justify-content: flex-start; }
  .deck.is-stacked .svc__tag { display: none; }
  .deck.is-stacked .svc__body { gap: 14px; }
  .deck.is-stacked .deck__progress { margin-top: 12px; }
  .header__inner { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .stack { flex-direction: column; align-items: stretch; gap: 16px; }

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

@media (max-width: 560px) {
  .lead__copy { gap: 28px; }
  .lead__lede { font-size: 17px; }
  .lead__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hv-fit { width: calc(100% + 24px); margin-inline: -12px; }
  .header__inner { height: 64px; }
  .msg { max-width: 88%; }
  .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 { --logo:url(/inicio/logos/nodedotjs.svg); }
.is-s3 { --logo:url(/inicio/logos/nextdotjs.svg); }
.is-s4 { --logo:url(/inicio/logos/dotnet.svg); }
.is-s5 { --logo:url(/inicio/logos/openjdk.svg); }
.is-s6 { --logo:url(/inicio/logos/postgresql.svg); }
.is-s7 { --logo:url(/inicio/logos/supabase.svg); }
.is-s8 { --logo:url(/inicio/logos/microsoftazure.svg); }
.is-s9 { --logo:url(/inicio/logos/vercel.svg); }
.is-s10 { --logo:url(/inicio/logos/githubactions.svg); }
.is-s11 { --logo:url(/inicio/logos/claude.svg); }
.is-s12 { --logo:url(/inicio/logos/sanity.svg); }
.is-s13 { --logo:url(/inicio/logos/tailwindcss.svg); }
.is-s14 { --i:0; }
.is-s15 { --i:1; }
.is-s16 { --i:2; }
.is-s17 { --from:0;--to:33%; }
.is-s18 { --from:33%;--to:66%; }
.is-s19 { --from:66%;--to:100%; }
.is-s20 { --i:3; }