/* ==========================================================================
   8Minds Lab — base styles
   Fuente única de verdad: tokens, base, layout, componentes, utilidades.
   Mobile-first. Solo se animan transform y opacity.
   ========================================================================== */

/* ---------- 0. Fuentes (alojadas en el sitio, sin Google Fonts) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-400-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-400-800-latin.woff2) format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-400-700-latin.woff2) format('woff2');
  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;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca v2.0 (marca.txt). Sin gradientes. La ciruela siempre manda. */
  --plum: #6A2C82;          /* principal ~25% */
  --mandarina: #FF7A3D;     /* acento ~10%: formas y botón secundario. Nunca como texto sobre claro */
  --petroleo: #0F7F86;      /* apoyo ~3% */
  --mostaza: #FFB627;       /* apoyo ~2%: detalles. Nunca fondo grande ni texto sobre claro */
  --surface: #FFFFFF;
  --surface-warm: #FFF8EF;  /* crema */
  --plum-soft: #F3E9F7;
  --line: #E9E1EA;
  --ink: #1F1426;
  --ink-muted: #5C5163;
  --plum-text: #6A2C82;
  --plum-text-dark: #C9A2DB;
  --on-dark: #FFF8EF;
  --on-dark-muted: rgba(255, 248, 239, 0.72);

  /* Texto secundario: cambia solo en contenedores oscuros */
  --text-muted: var(--ink-muted);

  /* Tipografía */
  --font-display: "Bricolage Grotesque", Arial, sans-serif;
  --font-body: "Instrument Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --font: var(--font-body);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-display: 700;

  /* Escala de marca (desktop): Display 72 · H1 48 · H2 36 · H3 28 · H4 20 ·
     Body L 18 · Body 16 · Small 14 · Label 12. Fluida 375px → 1440px. */
  --fs-xs: 0.75rem;                                            /* 12 */
  --fs-sm: 0.875rem;                                           /* 14 */
  --fs-base: 1rem;                                             /* 16 */
  --fs-lg: clamp(1.0625rem, 1.04rem + 0.094vw, 1.125rem);      /* 17 → 18 */
  --fs-h4: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);       /* 18 → 20 */
  --fs-h3: clamp(1.25rem, 1.074rem + 0.751vw, 1.75rem);        /* 20 → 28 */
  --fs-h2: clamp(1.75rem, 1.574rem + 0.751vw, 2.25rem);        /* 28 → 36 */
  --fs-h1: clamp(2.125rem, 1.817rem + 1.315vw, 3rem);          /* 34 → 48 */
  --fs-hero: clamp(2.25rem, 1.722rem + 2.254vw, 3.75rem);      /* 36 → 60 */
  --fs-display: clamp(2.5rem, 1.796rem + 3.005vw, 4.5rem);     /* 40 → 72 */

  --lh-body: 1.5;
  --lh-tight: 1.08;
  --tracking-tight: -0.02em;
  --tracking-display: -0.02em;
  --tracking-wide: 0.06em;

  /* Espaciado (escala 4px) */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-4);
  --header-h: 72px;

  /* Forma */
  --radius-card: 12px;
  --radius-btn: 999px;
  --radius-block: 20px;
  --radius-tag: 6px;
  --shadow-float: 0 12px 32px rgba(10, 14, 26, 0.12), 0 2px 6px rgba(10, 14, 26, 0.06);

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-5); }
}
@media (min-width: 1200px) {
  :root { --gutter: var(--space-6); }
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-display); }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { margin: 0 0 var(--space-4); max-width: 68ch; text-wrap: pretty; }
strong, b { font-weight: var(--fw-bold); color: var(--ink); }

a { color: var(--plum-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

img, svg { display: block; max-width: 100%; height: auto; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }

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

::selection { background: var(--plum); color: var(--surface); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-btn);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); color: var(--surface); }

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--space-7); }
.section--mist { background: var(--surface-warm); }
.section--ink { --text-muted: var(--on-dark-muted); background: var(--ink); color: var(--on-dark-muted); }
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink strong { color: var(--on-dark); }
.section--ink a:not(.btn) { color: var(--plum-text-dark); }
/* Tarjetas y demos claras dentro de secciones oscuras: vuelven a los tonos de fondo claro */
.section--ink .sdemo:not(.sdemo--dark),
.section--ink .psheet { --text-muted: var(--ink-muted); }

@media (min-width: 768px) {
  .section { padding-block: var(--space-8); }
}

.stack > * + * { margin-top: var(--space-4); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 4. Tipografía auxiliar ---------- */
.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.33;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--petroleo);
}
.section--ink .eyebrow { color: var(--mostaza); }
.lead { font-size: var(--fs-lg); line-height: 1.55; }
.muted { color: var(--text-muted); }
/* Palabra destacada del titular: ciruela sobre claro (la mandarina no pasa contraste) */
.text-gradient { color: var(--plum); }
.section--ink .text-gradient { color: var(--mandarina); }
.accent-pink { color: var(--plum); }
.accent-sky { color: var(--mostaza); }

/* ---------- 5. Botones ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline-offset: 2px; border-radius: var(--radius-btn); }
.btn svg { width: 18px; height: 18px; stroke-width: 1.5; }

/* Principal (ciruela): uno por vista */
.btn--primary { background: var(--plum); color: var(--surface); }
.btn--primary::before { background: rgba(31, 20, 38, 0.22); }
.btn--primary:hover,
.btn--primary:active { color: var(--surface); }

/* Secundario (mandarina, texto tinta) */
.btn--secondary { background: var(--mandarina); color: var(--ink); }
.btn--secondary::before { background: rgba(31, 20, 38, 0.1); }
.btn--secondary:hover,
.btn--secondary:active { color: var(--ink); }

/* Terciario (ciruela suave) */
.btn--tertiary { background: var(--plum-soft); color: var(--ink); }
.btn--tertiary::before { background: rgba(106, 44, 130, 0.1); }
.btn--tertiary:hover,
.btn--tertiary:active { color: var(--ink); }

/* Sobre fondo oscuro */
.btn--light { background: transparent; color: var(--on-dark); border-color: rgba(255, 248, 239, 0.6); }
/* En hover/foco se rellena de mandarina con texto tinta (regla de marca: sobre mandarina, texto tinta) */
.btn--light::before { background: var(--mandarina); }
.btn--light:is(:hover, :focus-visible, :active) { color: var(--ink); border-color: var(--mandarina); }
.btn--light:focus-visible::before { opacity: 1; }
.section--ink .btn--primary:focus-visible,
.section--gradient .btn:focus-visible,
.site-footer .btn:focus-visible { outline-color: var(--on-dark); }

.btn--sm { min-height: 38px; padding: var(--space-1) var(--space-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 52px; padding: var(--space-3) var(--space-6); font-size: var(--fs-base); }

/* Enlace con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--plum);
  text-decoration: none;
}
.link-arrow svg { width: 16px; height: 16px; stroke-width: 1.5; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--plum); }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow:active svg { transform: translateX(1px); }

/* ---------- 6. Tarjetas (sin sombra) ---------- */
.card {
  position: relative;
  display: block;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--ink);
}
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: var(--space-2); }
.card--mist { background: var(--surface-warm); border-color: var(--surface-warm); }

/* Tarjeta clicable: el borde de color aparece con opacity, sin sombra */
.card--link { text-decoration: none; transition: transform var(--dur) var(--ease); }
.card--link::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--plum);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.card--link:hover { transform: translateY(-2px); color: var(--ink); }
.card--link:hover::after { opacity: 1; }
.card--link:active { transform: translateY(0); }
.card--link:focus-visible { outline-offset: 3px; border-radius: var(--radius-card); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--surface-warm);
  color: var(--plum);
}
.card__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }

/* ---------- 7. Elementos gráficos (con moderación) ---------- */
/* Rule: línea con degradado */
.rule {
  width: 48px;
  height: 3px;
  margin: 0 0 var(--space-5);
  border: 0;
  border-radius: 2px;
  background: var(--plum);
}
.rule--full { width: 100%; height: 1px; }

/* Halo (v2): arco abierto plano, de los bucles del 8. Sin gradiente. */
.has-halo { position: relative; isolation: isolate; overflow: hidden; }
.halo {
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: clamp(28px, 6vw, 64px) solid var(--halo-c, var(--plum-soft));
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-20deg);
  pointer-events: none;
}
/* Círculo de acento que se superpone al arco */
.halo::after {
  content: "";
  position: absolute;
  left: 8%; bottom: 8%;
  width: 22%; height: 22%;
  border-radius: 50%;
  background: var(--mandarina);
}
.section--ink .halo, .hero .halo { --halo-c: var(--plum); }
/* En héroes oscuros el halo queda detrás de la demo: solo el arco, sin círculo */
.hero .halo::after { display: none; }

/* Process bars: 4 pasos */
.process-bars { display: flex; gap: var(--space-2); }
.process-bars > span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.process-bars > span::before {
  content: "";
  display: block;
  height: 100%;
  background: var(--plum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}
.process-bars.is-active > span::before { transform: scaleX(1); }
.process-bars.is-active > span:nth-child(2)::before { transition-delay: 150ms; }
.process-bars.is-active > span:nth-child(3)::before { transition-delay: 300ms; }
.process-bars.is-active > span:nth-child(4)::before { transition-delay: 450ms; }

/* El 8 como marca de agua */
.watermark-8 {
  position: absolute;
  z-index: -1;
  width: 320px;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

/* Formas de marca v2: bloques redondeados con semicírculos recortados, círculo y píldora.
   Planas, sin gradientes. Los semicírculos "s-bg" toman el color del fondo de la sección. */
.s-plum { fill: var(--plum); }
.s-ink { fill: var(--ink); }
.s-petroleo { fill: var(--petroleo); }
.s-mandarina { fill: var(--mandarina); }
.s-mostaza { fill: var(--mostaza); }
.s-bg { fill: var(--shapes-bg, var(--ink)); }

.shapes { position: absolute; z-index: -1; right: var(--gutter); bottom: 0; width: min(260px, 70vw); pointer-events: none; }
.shapes svg { display: block; width: 100%; height: auto; overflow: visible; }
.shapes g, .shapes rect, .shapes circle { transform-box: fill-box; }
/* Entrada: los bloques suben desde el borde; el círculo flota despacio (solo transform) */
.shapes.reveal { transform: none; }
.shapes.reveal .shapes__a,
.shapes.reveal .shapes__b,
.shapes.reveal .shapes__d { transform: translateY(40%); transition: transform 900ms var(--ease); }
.shapes.reveal .shapes__b { transition-delay: 120ms; }
.shapes.reveal .shapes__d { transition-delay: 240ms; }
.shapes.is-visible .shapes__a,
.shapes.is-visible .shapes__b,
.shapes.is-visible .shapes__d { transform: none; }
.shapes__c { animation: shapes-float 7s ease-in-out infinite alternate; }
@keyframes shapes-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* Héroes: la composición vive en una franja inferior; el hero gana ese alto abajo */
.shapes--hero { --shapes-bg: var(--ink); }
section.has-shapes.has-shapes { padding-bottom: calc(var(--space-7) + 72px); }
@media (min-width: 768px) {
  .shapes--hero { width: 420px; }
  section.has-shapes.has-shapes { padding-bottom: calc(var(--space-8) + 112px); }
}
@media (min-width: 1280px) {
  .shapes--hero { width: 520px; }
  section.has-shapes.has-shapes { padding-bottom: calc(var(--space-8) + 140px); }
}

/* Cierre (fondo ciruela): semicírculos recortados en ciruela */
.shapes--closing { --shapes-bg: var(--plum); z-index: 0; width: min(220px, 56vw); }
.closing { padding-bottom: calc(var(--space-7) + 72px); }
@media (min-width: 768px) {
  .shapes--closing { width: 360px; }
  .closing { padding-bottom: var(--space-8); }
}
@media (min-width: 1024px) { .shapes--closing { width: 420px; } }

/* Divisor entre secciones claras: semicírculos que se apoyan en el borde */
.shape-divider { position: relative; z-index: 1; height: 0; }
.shape-divider svg { position: absolute; bottom: 0; width: 96px; height: 24px; }
.shape-divider:nth-of-type(even) .container { display: flex; justify-content: flex-end; }
.shape-divider .container { position: relative; }
.shape-divider:nth-of-type(even) svg { right: var(--gutter); }

/* ---------- 8. Header y menú ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.site-header.is-scrolled::after { opacity: 1; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
}

.brand { display: inline-flex; flex-shrink: 0; border-radius: 4px; }
/* Logo horizontal v2: ancho mínimo 120px */
.brand img { width: auto; height: 33px; min-width: 120px; }
@media (min-width: 768px) {
  .brand img { height: 38px; }
}

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--plum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link:active { opacity: 0.7; }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Toggle EN/ES */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.lang-toggle > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 30px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-btn);
  text-decoration: none;
}
.lang-toggle [aria-current="true"] { background: var(--ink); color: var(--surface); }
.lang-toggle a { color: var(--ink); transition: opacity var(--dur-fast) var(--ease); }
.lang-toggle a:hover { color: var(--ink); opacity: 0.7; }
.lang-toggle a:active { opacity: 0.5; }

.header-cta { display: none; }

/* Botón de menú móvil */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--space-2) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.menu-btn:hover { opacity: 0.7; }
.menu-btn:active { opacity: 0.5; }
.menu-btn svg { width: 24px; height: 24px; stroke-width: 1.5; }
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }

/* Panel móvil (flotante → lleva sombra) */
.mobile-nav {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  padding: var(--space-3) var(--gutter) var(--space-5);
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}
.mobile-nav ul { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.mobile-nav li + li { border-top: 1px solid var(--line); }
.mobile-nav a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-decoration: none;
}
.mobile-nav a:not(.btn):hover { color: var(--plum); }
.mobile-nav a:not(.btn):active { opacity: 0.7; }
.mobile-nav a[aria-current="page"] { color: var(--plum); }
.mobile-nav .btn { width: 100%; }

@media (min-width: 1100px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .menu-btn,
  .mobile-nav { display: none; }
}

/* ---------- 9. Footer ---------- */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-6);
  --text-muted: var(--on-dark-muted);
  background: var(--ink);
  color: var(--on-dark-muted);
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--text-muted); text-decoration: none; transition: opacity var(--dur-fast) var(--ease); }
.site-footer a:hover { color: var(--on-dark); }
.site-footer a:active { opacity: 0.7; }

.footer__top {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__brand img { width: auto; height: 36px; margin-bottom: var(--space-4); }
.footer__brand address { font-style: normal; line-height: 1.8; }

.footer__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--surface);
}
.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list a { display: inline-flex; align-items: center; min-height: 36px; border-radius: 4px; }

.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }

.footer__bottom {
  padding-top: var(--space-5);
  font-size: var(--fs-xs);
  line-height: 1.7;
}
.footer__bottom p { max-width: none; margin: 0; }

.site-footer .watermark-8 { right: -40px; bottom: -140px; width: 220px; opacity: 0.08; }

@media (min-width: 768px) {
  .footer__top { grid-template-columns: 1.4fr 2fr; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 10. Utilidades ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Aparición suave al hacer scroll (la activa app.js) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- 11. Movimiento reducido ---------- */
/* Decisión de Cami (11 nov. 2026): si el sistema pide movimiento reducido, todo queda en su estado final */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Marquesina: filas quietas que se pueden desplazar a mano */
  .tools-marquee.is-animated .tools-marquee__row { overflow-x: auto; }
  .tools-marquee.is-animated .tools-marquee__track { animation: none; padding: 0 var(--space-6); }
  .tools-marquee.is-animated [aria-hidden="true"].tool-pill { display: none; }
}

/* ---------- 12. Componentes compartidos extra ---------- */
/* Botón blanco: para fondos con degradado */
.btn--white { background: var(--surface); color: var(--ink); }
.btn--white::before { background: var(--surface-warm); }
.btn--white:hover,
.btn--white:active { color: var(--ink); }

.section-head { max-width: 720px; margin-bottom: var(--space-7); }
.section-head > :last-child { margin-bottom: 0; }
.section-head--split { max-width: none; display: grid; gap: var(--space-4); align-items: end; }
.section-head--split > div { max-width: 720px; }
.section-head--split > div > :last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .section-head--split { grid-template-columns: 1fr auto; gap: var(--space-6); }
}

.section--ink .link-arrow,
.section--ink .link-arrow:hover { color: var(--surface); }
.section--ink .link-arrow:active { opacity: 0.7; }

/* Cierre: bloque ciruela plano (v2) */
.section--gradient { --text-muted: var(--on-dark-muted); background: var(--plum); color: var(--on-dark); }
.section--gradient h2 { color: var(--surface); }

/* ---------- 13. Home ---------- */
/* Hero */
/* Compacto: título, subtítulo y dos botones; la demo debajo en celular y a la derecha desde 1024px */
.hero { padding-block: var(--space-7); }
.hero .halo {
  width: 760px; height: 760px; top: -360px; right: -300px;
}
.hero__grid { display: grid; gap: var(--space-6); }
.hero__grid > * { min-width: 0; }
.hero__intro { max-width: 46rem; }
/* Celulares: los botones largos pasan a dos líneas en vez de ensanchar la página */
@media (max-width: 479px) {
  .btn { white-space: normal; text-align: center; }
}
.hero h1 { margin-bottom: var(--space-4); font-size: var(--fs-hero); letter-spacing: var(--tracking-display); line-height: 1.1; }
.hero .lead { max-width: 44rem; margin-bottom: var(--space-5); color: var(--surface-warm); }
@media (min-width: 1024px) {
  .hero { padding-block: var(--space-8); }
}
/* Desde 1280px: texto a la izquierda, demo a la derecha con el mismo alto */
@media (min-width: 1280px) {
  .hero { padding-block: var(--space-9); }
  .hero h1 { margin-bottom: var(--space-6); font-size: var(--fs-h1); }
  .hero .lead { margin-bottom: var(--space-7); }
  .hero__grid { grid-template-columns: 1fr 1.35fr; gap: var(--space-7); align-items: stretch; }
  .hero__intro { align-self: center; }

  /* La demo toma el alto del bloque de texto: no aporta altura propia (contain: size)
     y se estira a la fila; el chat se desplaza como uno real */
  .hero__demo { contain: size; display: flex; flex-direction: column; }
  .hero__demo .sdemo__bar,
  .hero__demo .sdemo__tabs,
  .hero__demo .sdemo__head,
  .hero__demo .sdemo__final { padding-block: var(--space-2); }
  .hero__demo .sdemo__tab { min-height: 34px; }
  .hero__demo .sdemo__scenes { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .hero__demo.sdemo--split .sdemo__scene { min-height: 0; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .hero__demo .sdemo__convo,
  .hero__demo .sdemo__side { min-height: 0; overflow: hidden; }
  .hero__demo .sdemo__chat {
    min-height: 0; overflow: hidden; gap: var(--space-2); padding-block: var(--space-4);
    /* Los mensajes viejos se desvanecen al subir, en vez de cortarse en seco */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--space-7));
    mask-image: linear-gradient(to bottom, transparent, #000 var(--space-7));
  }
  .hero__demo.sdemo--split .sdemo__side { padding: var(--space-4); }
  .hero__demo .sdemo__side-title { margin-bottom: var(--space-3); }
  .hero__demo .sdemo__step { padding-block: var(--space-1); }

  /* Mensajes: los que aún no salen no ocupan lugar; los nuevos empujan a los viejos */
  .hero__demo.is-animated .sdemo__msg:not(.is-shown):not(.is-typing) { display: none; }
  .hero__demo.is-animated .sdemo__msg.is-typing:not(.is-shown) .sdemo__bubble { display: none; }
  .hero__demo.is-animated .sdemo__msg.is-typing .sdemo__typing { position: static; }
  .hero__demo.is-animated .sdemo__msg.is-shown .sdemo__bubble { animation: sdemo-in 400ms var(--ease) both; }
}
@keyframes sdemo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* La fuga
   - Los ítems son botones; con JS (.is-ready) el activo va a color y los demás en gris.
   - .lscene: tarjeta con la mini escena del ítem activo. Capa "caos" → .is-fixed → capa "con el agente".
   - Spark Pink solo para lo que duele (.ltag--pain, .lmark). */
.leak__grid { display: grid; gap: var(--space-6); }
.leak__list { margin: 0; padding: 0; list-style: none; }
.leak__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  font: inherit;
  color: var(--ink);
  line-height: var(--lh-body);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.leak__list li:last-child .leak__item { border-bottom: 1px solid var(--line); }
.leak__item .card__icon { margin: 0; }
.leak__item strong { color: var(--ink); }
.leak__item:hover strong { color: var(--plum); }
.leak__item:focus-visible { outline: 2px solid var(--plum); outline-offset: 4px; border-radius: var(--radius-card); }
.leak__item:active { transform: scale(0.99); }
.leak__timer {
  position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--plum);
  transform: scaleX(0); transform-origin: left;
  opacity: 0;
}
.leak__close { margin: var(--space-6) 0 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.4; max-width: 40ch; }

/* Con JS: activo a color, demás apagados en gris */
.is-ready .leak__item:not(.is-active) { color: var(--text-muted); }
.is-ready .leak__item:not(.is-active) strong { color: var(--text-muted); }
.is-ready .leak__item:not(.is-active) .card__icon { color: var(--text-muted); }
.is-ready .leak__item:not(.is-active):hover strong,
.is-ready .leak__item:not(.is-active):hover .card__icon { color: var(--ink); }
.is-ready .leak__item.is-active > :not(.leak__timer) { animation: leak-on 250ms var(--ease) both; }
.is-ready .leak__item.is-timing .leak__timer { opacity: 1; animation: leak-timer var(--leak-cycle, 7s) linear both; }
.is-ready.is-paused .leak__timer { opacity: 0; }
@keyframes leak-on { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes leak-timer { to { transform: scaleX(1); } }

/* Escena */
.lscene {
  position: relative;
  isolation: isolate;
  display: grid;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.lscene__panel { position: relative; display: grid; grid-area: 1 / 1; }
.is-ready .lscene__panel:not(.is-active) { visibility: hidden; opacity: 0; }
.is-ready .lscene__panel.is-active { animation: leak-on 250ms var(--ease) both; }
.lscene__layer { grid-area: 1 / 1; display: flex; flex-direction: column; transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
.lscene__layer--fix { opacity: 0; transform: translateY(6px); visibility: hidden; }
.is-fixed .lscene__layer--chaos { opacity: 0; transform: translateY(-6px); }
.is-fixed .lscene__layer--fix { opacity: 1; transform: none; visibility: visible; transition-delay: 150ms; }
.lscene__sweep { position: absolute; inset: 0 -2px 0 0; pointer-events: none; transform: translateX(-102%); opacity: 0; }
.lscene__sweep::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--plum); }
/* Tarjeta: rosa mientras duele, verde cuando el agente lo resuelve (fundido de dos capas) */
.is-ready .lscene { border-color: transparent; }
.is-ready .lscene::before,
.is-ready .lscene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--mandarina);
  border-radius: calc(var(--radius-card) - 1px);
  background: color-mix(in srgb, var(--mandarina) 7%, var(--surface));
  pointer-events: none;
  transition: opacity 250ms var(--ease);
}
.is-ready .lscene::after { border-color: var(--petroleo); background: color-mix(in srgb, var(--petroleo) 8%, var(--surface)); opacity: 0; }
.is-ready .lscene.is-fixed::before { opacity: 0; }
.is-ready .lscene.is-fixed::after { opacity: 1; }
.is-fixed .lscene__sweep { animation: leak-sweep 400ms var(--ease) both; }
@keyframes leak-sweep {
  0% { transform: translateX(-102%); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

.lscene__badge {
  justify-self: start;
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-btn);
  background: var(--plum);
  color: var(--surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.lscene__foot { display: grid; margin-top: auto; padding-top: var(--space-3); }
.lscene__line { margin: 0; color: var(--ink); font-weight: var(--fw-bold); }

.lrows { margin: 0; padding: 0; list-style: none; }
.lrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--line); }
.lrow:first-child { border-top: 0; padding-top: 0; }
.lrow__main { display: flex; flex-direction: column; min-width: 0; }
.lrow__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.lrow__title { color: var(--ink); font-weight: var(--fw-bold); }

.ltag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  flex-shrink: 0; max-width: 55%;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.3; text-align: right;
}
.ltag svg { width: 14px; height: 14px; flex-shrink: 0; stroke-width: 1.5; }
.ltag { background: var(--surface); }
.ltag--pain { border-color: var(--mandarina); color: var(--ink); }
.ltag--ok { border-color: var(--petroleo); color: var(--petroleo); }
.lmark { background: none; color: var(--ink); text-decoration: underline wavy var(--mandarina); text-underline-offset: 3px; }

.lchat { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.lchat__msg { align-self: flex-start; max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); }
.lchat__msg--agent { align-self: flex-end; background: var(--plum); color: var(--surface); }
.lchat__time { margin-right: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); }
.lscene__layer--chaos > .ltag { max-width: none; }

.lfiles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.lfiles li { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-card); font-size: var(--fs-xs); }
.lfiles li:nth-child(1) { transform: rotate(-2deg); }
.lfiles li:nth-child(2) { transform: rotate(1.5deg) translateY(3px); }
.lfiles li:nth-child(3) { transform: rotate(-1deg); }
.lfiles svg { width: 14px; height: 14px; stroke-width: 1.5; color: var(--text-muted); }

.lbars { display: flex; align-items: flex-end; gap: var(--space-2); height: 64px; margin-bottom: var(--space-3); }
.lbars span { flex: 1; height: 100%; border-radius: 4px 4px 0 0; background: var(--plum); transform: scaleY(var(--h)); transform-origin: bottom; }
.is-fixed .lbars span { animation: leak-bar 400ms var(--ease) 150ms both; }
.is-fixed .lbars span:nth-child(2n) { animation-delay: 220ms; }
@keyframes leak-bar { from { transform: scaleY(0); } }
.lpath { margin: var(--space-3) 0 0; font-size: var(--fs-xs); color: var(--ink); }
.lpath span { color: var(--petroleo); }
/* Móvil: el JS mueve la escena justo debajo del ítem activo */
.leak__list .lscene { margin: 0 0 var(--space-4); }

@media (min-width: 1024px) {
  .leak__grid { grid-template-columns: 5fr 7fr; gap: var(--space-8); }
  /* Columna derecha del mismo alto que la izquierda: los ítems se reparten el espacio */
  [data-leaks] { padding-block: var(--space-8); }
  .leak__grid > :last-child { display: flex; flex-direction: column; }
  .leak__list { flex: 1; display: grid; grid-auto-rows: 1fr; }
  .leak__list .leak__item { height: 100%; align-content: center; }
}

/* Qué hacemos */
.service-card { display: flex; flex-direction: column; padding: var(--space-6) var(--space-5); }
/* Detalle de marca: semicírculo mostaza apoyado en el borde inferior */
.service-card { background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 44 22%27%3E%3Cpath fill=%27%23FFB627%27 d=%27M0 22A22 22 0 0 1 44 22Z%27/%3E%3C/svg%3E") no-repeat right var(--space-5) bottom -1px / 44px 22px; }
.service-card .rule { margin-bottom: var(--space-5); }
.service-card p { flex: 1; }
.service-card .link-arrow { margin-top: var(--space-2); }
/* Hover / foco: se eleva, borde ciruela, aparece la flecha, el contenido se desplaza y los hermanos se atenúan.
   Solo transform y opacity; sin sombra. */
.service-card { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
/* Capa de hover: borde ciruela + anillo ciruela suave (plano, sin gradiente). Aparece solo con opacity. */
.service-card::after {
  inset: -1px;
  border: 1px solid transparent;
  border-color: var(--plum);
  box-shadow: 0 0 0 4px var(--plum-soft);
}
.service-card > * { position: relative; z-index: 1; }
.service-card::before { z-index: 2; }
.service-card::before {
  content: "";
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 24px;
  height: 24px;
  background: var(--plum);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.service-card > * { transition: transform var(--dur) var(--ease); }
.service-card .rule { transform-origin: left; }
.service-card:is(:hover, :focus-visible, .is-lit) { transform: translateY(-4px); }
.service-card:is(:hover, :focus-visible, .is-lit)::after { opacity: 1; }
.service-card:is(:hover, :focus-visible, .is-lit)::before { opacity: 1; transform: translate(0, 0); }
.service-card:is(:hover, :focus-visible, .is-lit) > * { transform: translateX(4px); }
.service-card:is(:hover, :focus-visible, .is-lit) > p { transition-delay: 30ms; }
.service-card:is(:hover, :focus-visible, .is-lit) > .link-arrow { transition-delay: 60ms; color: var(--plum); }
.service-card:is(:hover, :focus-visible, .is-lit) > .rule { transform: scaleX(1.5); }
.service-card:is(:hover, :focus-visible, .is-lit) .link-arrow svg { transform: translateX(3px); }
.service-card:active { transform: translateY(-1px); }
.grid:has(> .service-card:is(:hover, :focus-visible, .is-lit)) > .service-card:not(:hover, :focus-visible, .is-lit) { opacity: 0.7; }

/* Diagnóstico */
.diag { padding: var(--space-5); }
@media (min-width: 768px) { .diag { padding: var(--space-6); } }
.diag textarea {
  display: block; width: 100%; min-height: 150px; resize: vertical;
  padding: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  font: inherit; font-size: var(--fs-base); line-height: 1.6; color: var(--ink); background: var(--surface);
}
.diag textarea::placeholder { color: var(--text-muted); }
.diag textarea:hover { border-color: var(--text-muted); }
.diag textarea:focus-visible { outline: 2px solid var(--plum); outline-offset: 1px; }
.chips { margin: var(--space-5) 0 var(--space-6); padding: 0; border: 0; min-width: 0; }
.chips legend { margin-bottom: var(--space-3); padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.chips__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  font-size: var(--fs-sm); color: var(--ink); cursor: pointer; user-select: none;
  transition: transform var(--dur-fast) var(--ease);
}
.chip span:hover { border-color: var(--text-muted); color: var(--ink); }
.chip span:active { transform: scale(0.97); }
.chip input:focus-visible + span { outline: 2px solid var(--plum); outline-offset: 2px; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.diag__foot { display: grid; gap: var(--space-4); align-items: center; }
.diag__note { display: flex; gap: var(--space-2); margin: 0; font-size: var(--fs-xs); color: var(--ink); line-height: 1.5; }
.diag__note svg { width: 16px; height: 16px; stroke-width: 1.5; flex-shrink: 0; margin-top: 1px; color: var(--plum); }
@media (min-width: 768px) { .diag__foot { grid-template-columns: auto 1fr; gap: var(--space-5); } }
.diag button[disabled] { opacity: 0.7; cursor: progress; }
.diag__result { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.diag__result[hidden] { display: none; }
.diag__sketch { white-space: pre-line; color: var(--ink); }
.diag__sketch:empty { display: none; }

/* Integraciones: marquesina de herramientas (Home e Integrations) — siempre 3 filas */
.tools-marquee {
  display: grid; gap: var(--space-2);
  margin: 0 0 var(--space-5); padding-block: var(--space-5);
}
.tools-marquee__row {
  overflow-x: auto; padding-block: var(--space-1); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tools-marquee__row::-webkit-scrollbar { display: none; }
.tools-marquee__track {
  display: flex; width: max-content;
  margin: 0; padding: 0 var(--space-6); list-style: none;
}
.tool-pill {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  margin-inline: calc(var(--space-3) / 2);
  padding: var(--space-3) var(--space-5); min-height: 48px;
  border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface-warm);
  font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: 1; color: var(--ink);
  white-space: nowrap;
  position: relative; isolation: isolate;
  transition: transform var(--dur) var(--ease);
}
/* Hover: tinte azul de marca en una capa aparte (solo se animan opacity y transform) */
.tool-pill::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: color-mix(in srgb, var(--plum) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--plum) 35%, var(--surface));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.tool-pill:hover { transform: translateY(-2px); }
.tool-pill:hover::before { opacity: 1; }
.tool-pill svg { width: 16px; height: 16px; flex: none; fill: currentColor; color: var(--ink); }
.tools-note { margin: 0 0 var(--space-6); font-size: var(--fs-xs); color: var(--text-muted); }

/* Animada (app.js duplica los elementos con aria-hidden y añade .is-animated) */
.tools-marquee.is-animated .tools-marquee__row { overflow: hidden; }
.tools-marquee.is-animated .tools-marquee__track {
  padding: 0;
  animation: tools-marquee var(--marquee-dur, 70s) linear infinite;
}
.tools-marquee.is-animated .tools-marquee__row:nth-child(even) .tools-marquee__track { animation-direction: reverse; }
.tools-marquee.is-animated:hover .tools-marquee__track { animation-play-state: paused; }
@keyframes tools-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.models-line { margin-bottom: var(--space-4); }

/* Cómo trabajamos */
/* Sin JS (o antes de que app.js añada .is-live): todo visible, barras llenas.
   Con .is-live: el paso .is-current se ilumina (barra en degradado + borde en degradado + detalle),
   los anteriores (.is-done) conservan la barra llena y todos los demás se atenúan.
   Se avanza con el scroll o al pasar el cursor/foco (app.js). Solo se animan transform y opacity. */
.steps { display: grid; gap: var(--space-4); margin: 0 0 var(--space-7); padding: 0; list-style: none; }
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  cursor: default;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.step::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--plum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.step:focus-visible { outline: 2px solid var(--mostaza); outline-offset: 4px; }
.step__bar { display: block; height: 4px; margin-bottom: var(--space-5); border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.step__bar::before { content: ""; display: block; height: 100%; background: var(--mandarina); transform-origin: left; transition: transform 600ms var(--ease); }
.step__num { display: block; margin-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--mostaza); }
.step h3 { margin-bottom: var(--space-2); }
.step p { margin: 0; }
.step__more {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-sm);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.step__more > div + div { margin-top: var(--space-3); }
.step__more dt { font-weight: var(--fw-bold); color: var(--surface); }
.step__more dd { margin: 0; }

.steps.is-live .step { opacity: 0.45; }
.steps.is-live .step__bar::before { transform: scaleX(0); }
.steps.is-live .step.is-done .step__bar::before { transform: scaleX(1); }
.steps.is-live .step__more { opacity: 0; transform: translateY(8px); }
.steps.is-live .step.is-current { opacity: 1; transform: translateY(-4px); }
.steps.is-live .step.is-current::after { opacity: 1; }
.steps.is-live .step.is-current .step__bar::before { transform: scaleX(1); }
.steps.is-live .step.is-current .step__more { opacity: 1; transform: none; transition-delay: 80ms; }
.steps.is-live .step:active { transform: translateY(-2px) scale(0.99); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Compromisos · bento con luz que sigue al cursor (app.js fija --mx/--my en cada tarjeta) */
.bento { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.bento__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  color: var(--ink);
}
.bento__card h3, .bento__card p { margin: 0; }
.bento__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-2);
  border-radius: var(--radius-card); background: var(--surface-warm); color: var(--plum);
}
.bento__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
/* Borde iluminado: anillo ciruela de 1px (plano) */
.bento__card::before, .bento__card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.bento__card::before {
  z-index: 2; padding: 1px;
  background: var(--plum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.bento__card::after {
  z-index: -1;
  background: var(--plum-soft);
}
.bento.is-lit .bento__card::before { opacity: 1; }
.bento__card.is-hot::after { opacity: 1; }
/* Tarjeta principal */
.bento__card--lead h3 { font-size: clamp(1.25rem, 1.074rem + 0.751vw, 1.75rem); letter-spacing: var(--tracking-tight); line-height: 1.2; max-width: 20ch; }
.bento__card--lead p { font-size: var(--fs-lg); max-width: 44ch; }
.bento__card--ink { background: var(--ink); border-color: var(--ink); color: var(--text-muted); }
.bento__card--ink h3 { color: var(--surface); }
.bento__card--ink .bento__icon { background: var(--plum); color: var(--surface); }
.bento__card--ink { --text-muted: var(--on-dark-muted); }
.bento__card--ink::after { background: rgba(106, 44, 130, 0.32); }
/* Entrada escalonada (usa .reveal) */
.bento .reveal { transition-delay: calc(var(--i, 0) * 90ms); }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .bento__card { padding: var(--space-6); }
  .bento__card--lead { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bento__card--lead { grid-column: auto; }
  .bento { grid-template-columns: 1.1fr 1fr 1fr; grid-template-areas: "a b b" "a c d"; }
  .bento > :nth-child(1) { grid-area: a; }
  .bento > :nth-child(2) { grid-area: b; }
  .bento > :nth-child(3) { grid-area: c; }
  .bento > :nth-child(4) { grid-area: d; }
  .bento__card--lead { min-height: 26rem; }
  .bento__card--lead .bento__icon { margin-bottom: auto; }
}

/* Para quién */
/* Tarjetas: al entrar, una barra de proceso recorre cada una en secuencia (un agente "toma" la tarea) y se apaga;
   en hover vuelve la barra y el borde toma el degradado. */
.audiences { display: grid; gap: var(--space-4); margin: 0; }
.audience {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.audience dt { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; }
.audience dd { margin: 0; max-width: 44ch; }
.audience__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-card); background: var(--surface-warm); color: var(--plum);
  transition: transform var(--dur) var(--ease);
}
.audience__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
/* Borde con degradado (anillo de 1px) */
.audience::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--plum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
/* Barra de proceso superior */
.audience::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
  background: var(--plum); transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease);
}
.audience:hover::before { opacity: 1; }
.audience:hover::after { transform: scaleX(1); }
.audience:hover .audience__icon { transform: translateY(-2px); }
.audiences.is-active .audience::after { animation: audience-run 1400ms var(--ease) both; animation-delay: calc(700ms + var(--i, 0) * 280ms); }
.audiences.is-active .audience:hover::after { animation: none; }
@keyframes audience-run {
  0% { transform: scaleX(0); opacity: 1; }
  60% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.audiences .reveal { transition-delay: calc(var(--i, 0) * 90ms); }
@media (min-width: 768px) {
  .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .audience { padding: var(--space-6); }
  .audience:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .audiences { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .audience { grid-column: span 2; }
  .audience:nth-child(n+4) { grid-column: span 3; }
}

/* Preguntas */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; padding-block: var(--space-4);
  font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.35;
  cursor: pointer; list-style: none; border-radius: 4px;
  transition: opacity var(--dur-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { opacity: 0.75; }
.faq summary:active { opacity: 0.6; }
.faq summary svg { width: 20px; height: 20px; stroke-width: 1.5; flex-shrink: 0; color: var(--plum); transition: transform var(--dur) var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { margin: 0; padding-bottom: var(--space-5); }

/* Cierre */
.closing { text-align: center; }
.closing h2 { margin-inline: auto; max-width: 20ch; }
.closing p { margin: 0 auto var(--space-6); font-size: var(--fs-lg); color: var(--surface); }

/* Fondo vivo del cierre (v2): arco, círculo y anillo planos que derivan + el 8 que flota (solo transform/opacity) */
.closing { position: relative; isolation: isolate; overflow: hidden; }
.closing__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.closing__halo {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
}
/* Arco abierto mandarina (bucle del 8) */
.closing__halo--a {
  width: 520px; height: 520px; left: -160px; top: -200px;
  border: 56px solid var(--mandarina); border-top-color: transparent; border-right-color: transparent;
  animation: closing-drift-a 26s ease-in-out infinite alternate;
}
/* Círculo tinta que se superpone */
.closing__halo--b {
  width: 560px; height: 560px; right: -200px; bottom: -260px;
  background: var(--ink); opacity: 0.35;
  animation: closing-drift-b 32s ease-in-out infinite alternate;
}
/* Anillo crema tenue que respira detrás del titular */
.closing__halo--c {
  width: 440px; height: 440px; left: 50%; top: 50%; margin: -220px 0 0 -220px;
  border: 2px solid rgba(255, 248, 239, 0.18);
  animation: closing-breathe 14s ease-in-out infinite alternate;
}
/* El isotipo recorre un 8 (infinito) y deja una estela de dos ecos */
.closing__loop {
  --amp: 0.3;
  position: absolute;
  left: 20px; top: 20px;
  width: 40px;
}
.closing__8 {
  position: absolute;
  inset: 0;
  width: 100%; height: auto;
  opacity: 0.16;
  filter: brightness(0) invert(1);
  animation: closing-loop 16s linear infinite;
  will-change: transform;
}
.closing__8--echo1 { opacity: 0.08; animation-delay: -0.5s; }
.closing__8--echo2 { opacity: 0.04; animation-delay: -1s; }
@media (min-width: 768px) {
  .closing__loop { --amp: 1; left: 12%; top: 50%; width: 96px; margin-top: -81px; }
}
@keyframes closing-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(38vw, 120px, 0) scale(1.15); }
}
@keyframes closing-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-34vw, -110px, 0) scale(0.95); }
}
@keyframes closing-breathe {
  from { opacity: 0.6; transform: scale(0.9); }
  to   { opacity: 1;   transform: scale(1.1); }
}
@keyframes closing-loop {
  0%     { transform: translate3d(0, 0, 0) rotate(6deg); }
  6.25%  { transform: translate3d(calc(32.5px * var(--amp)), calc(26.8px * var(--amp)), 0) rotate(4.2deg); }
  12.5%  { transform: translate3d(calc(46px * var(--amp)), calc(49.5px * var(--amp)), 0) rotate(0deg); }
  18.75% { transform: translate3d(calc(32.5px * var(--amp)), calc(64.7px * var(--amp)), 0) rotate(-4.2deg); }
  25%    { transform: translate3d(0, calc(70px * var(--amp)), 0) rotate(-6deg); }
  31.25% { transform: translate3d(calc(-32.5px * var(--amp)), calc(64.7px * var(--amp)), 0) rotate(-4.2deg); }
  37.5%  { transform: translate3d(calc(-46px * var(--amp)), calc(49.5px * var(--amp)), 0) rotate(0deg); }
  43.75% { transform: translate3d(calc(-32.5px * var(--amp)), calc(26.8px * var(--amp)), 0) rotate(4.2deg); }
  50%    { transform: translate3d(0, 0, 0) rotate(6deg); }
  56.25% { transform: translate3d(calc(32.5px * var(--amp)), calc(-26.8px * var(--amp)), 0) rotate(4.2deg); }
  62.5%  { transform: translate3d(calc(46px * var(--amp)), calc(-49.5px * var(--amp)), 0) rotate(0deg); }
  68.75% { transform: translate3d(calc(32.5px * var(--amp)), calc(-64.7px * var(--amp)), 0) rotate(-4.2deg); }
  75%    { transform: translate3d(0, calc(-70px * var(--amp)), 0) rotate(-6deg); }
  81.25% { transform: translate3d(calc(-32.5px * var(--amp)), calc(-64.7px * var(--amp)), 0) rotate(-4.2deg); }
  87.5%  { transform: translate3d(calc(-46px * var(--amp)), calc(-49.5px * var(--amp)), 0) rotate(0deg); }
  93.75% { transform: translate3d(calc(-32.5px * var(--amp)), calc(-26.8px * var(--amp)), 0) rotate(4.2deg); }
  100%   { transform: translate3d(0, 0, 0) rotate(6deg); }
}

.diag__error { color: var(--ink); font-weight: var(--fw-bold); }
.diag__error[hidden] { display: none; }

/* ---------- 14. Agente de descubrimiento (Home: en línea · resto: burbuja) ---------- */
.agent-embed__frame { padding: 0; overflow: hidden; background: var(--surface); }
.agent-embed__frame iframe { display: block; width: 100%; height: 600px; border: 0; }
.agent-embed__note { margin-top: var(--space-4); }
.agent-embed__error { display: none; margin: var(--space-4) 0 0; }
.agent-embed__more { margin: var(--space-4) 0 0; }
.agent-embed.is-failed .agent-embed__frame { display: none; }
.agent-embed.is-failed .agent-embed__error { display: block; margin-top: 0; }

.agent-launcher {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 40;
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%; background: var(--plum); color: var(--surface);
  box-shadow: var(--shadow-float); cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.agent-launcher:hover { transform: translateY(-2px); }
.agent-launcher:active { transform: scale(0.95); }
.agent-launcher:focus-visible { outline-offset: 3px; border-radius: 50%; }
.agent-launcher svg { width: 24px; height: 24px; stroke-width: 1.5; }
.agent-launcher .icon-close,
.agent-launcher[aria-expanded="true"] .icon-open { display: none; }
.agent-launcher[aria-expanded="true"] .icon-close { display: block; }

.agent-panel {
  position: fixed; right: var(--space-4); bottom: calc(56px + var(--space-4) * 2); z-index: 40;
  display: flex; flex-direction: column;
  width: min(400px, calc(100vw - var(--space-4) * 2));
  height: min(600px, calc(100dvh - 56px - var(--space-4) * 3 - var(--space-4)));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-float); overflow: hidden;
  visibility: hidden; opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: bottom right;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.agent-panel.is-open { visibility: visible; opacity: 1; transform: none; }
.agent-panel__frame { flex: 1; min-height: 0; }
.agent-panel__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.agent-panel__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.agent-panel__foot .diag__note { margin: 0; }
.agent-panel__error { display: none; padding: var(--space-5) var(--space-4); margin: 0; }
.agent-panel.is-failed .agent-panel__frame { display: none; }
.agent-panel.is-failed .agent-panel__error { display: block; flex: 1; }
@media (min-width: 768px) {
  .agent-launcher { right: var(--space-5); bottom: var(--space-5); }
  .agent-panel { right: var(--space-5); bottom: calc(56px + var(--space-5) * 2); }
}

/* ---------- 15. Book a call ---------- */
.h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.3; }
.book__grid { display: grid; gap: var(--space-7); }
.book__grid > * { min-width: 0; }
.cal-embed { min-height: 640px; padding: 0; overflow: hidden; overflow-y: auto; }
.cal-embed.is-failed { display: none; }
.cal-fallback { margin: var(--space-4) 0 0; font-size: var(--fs-sm); }
.book__block { padding-block: var(--space-5); border-top: 1px solid var(--line); }
.book__block:last-child { border-bottom: 1px solid var(--line); }
.book__block h2 { margin-bottom: var(--space-3); }
.book__block p { margin: 0; }
.book__steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.book__steps li { position: relative; padding-left: calc(28px + var(--space-3)); counter-increment: step; }
.book__steps li + li { margin-top: var(--space-3); }
.book__steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--plum); color: var(--surface); font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
@media (min-width: 1024px) {
  .book__grid { grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: start; }
}
@media (min-width: 1024px) and (min-height: 800px) {
  .book__cal { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* Formulario alternativo */
.lead-form { padding: var(--space-5); }
@media (min-width: 768px) { .lead-form { padding: var(--space-6); } }
.lead-form__grid { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 640px) {
  .lead-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .field--full { grid-column: 1 / -1; }
}
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.field input,
.field select,
.field textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  font: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--surface);
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input::placeholder { color: var(--text-muted); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--text-muted); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--plum); outline-offset: 1px; }
.lead-form__thanks { margin: var(--space-4) 0 0; font-weight: var(--fw-bold); color: var(--ink); }
.lead-form__thanks[hidden] { display: none; }
.lead-form__chips { margin: 0; }

/* Barra de avance del formulario (app.js pone --p entre 0 y 1) */
.lead-form { position: relative; overflow: hidden; }
.lead-form__meter { position: absolute; inset: 0 0 auto; height: 3px; background: var(--surface-warm); }
.lead-form__meter i {
  display: block; height: 100%; background: var(--plum);
  transform: scaleX(var(--p, 0)); transform-origin: left;
  transition: transform 500ms var(--ease);
}
/* Enviar → Enviado */
.lead-form__send { position: relative; overflow: hidden; }
.lead-form__send-label,
.lead-form__send-done { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lead-form__send-done {
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  opacity: 0; transform: translateY(100%);
}
.lead-form__send.is-sent .lead-form__send-label { opacity: 0; transform: translateY(-100%); }
.lead-form__send.is-sent .lead-form__send-done { opacity: 1; transform: none; }
.book-form__title { margin-bottom: var(--space-6); }

/* Book a call · hero */
.book-hero .book-hero__title { max-width: 20ch; }
.book-hero .lead { max-width: 40rem; margin-bottom: 0; }
.book-hero__bars { max-width: 280px; margin-top: var(--space-6); }
.book-hero__bars > span { background: rgba(255, 255, 255, 0.12); }
.book__block:first-child { border-top: 0; padding-top: 0; }

/* Book a call · "En la llamada": pestañas verticales de .decide + reloj de 30 min */
.decide.callbox { gap: var(--space-4); grid-template-columns: 1fr; }
.callbox__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.callbox__head h2 { margin: 0; }
.callbox .sdemo__tab { font-size: var(--fs-base); padding-block: var(--space-3); }
.callbox .sdemo__tab::before { top: var(--space-3); bottom: var(--space-3); }
.callbox .decide__card { margin-top: 0; }
.callbox .sdemo__chat { min-height: 168px; }
.dial { flex: none; width: 88px; height: 88px; }
@media (min-width: 768px) { .dial { width: 104px; height: 104px; } }
.dial circle { fill: none; stroke-width: 6; stroke-dasharray: 102.9 223.8; }
.dial__base circle { stroke: var(--line); }
.dial__done circle { stroke: var(--ink); }
.dial__on circle { stroke: var(--mandarina); }
.dial__done circle,
.dial__on circle { opacity: 0; transition: opacity 400ms var(--ease); }
.dial__done circle.is-on,
.dial__on circle.is-on { opacity: 1; }
.dial__hand { fill: var(--mandarina); stroke: var(--surface); stroke-width: 2; transform-box: view-box; transform-origin: 60px 60px; }
.dial__label { font-family: var(--font); font-size: 18px; font-weight: var(--fw-bold); letter-spacing: -0.02em; fill: var(--ink); }

/* Book a call · "Trae si puedes": tarjeta de preparación */
.book__block > p + .prep { margin-top: var(--space-5); }
.prep { display: grid; gap: var(--space-5); padding: var(--space-5); }
.prep__tools { display: grid; gap: var(--space-2); margin-top: calc(var(--space-3) * -1); }
.prep__marquee { margin: 0 calc(var(--space-5) * -1); padding-block: 0; }
.tools-marquee.is-animated:focus-within .tools-marquee__track { animation-play-state: paused; }
.prep__marquee .tool-pill { min-height: 40px; padding: var(--space-2) var(--space-4); }
button.tool-pill { font-family: inherit; cursor: pointer; }
button.tool-pill:active { transform: scale(0.96); }
button.tool-pill:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.tool-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tool-pill[aria-pressed="true"] svg { color: var(--surface); }
.tool-pill[aria-pressed="true"]::before { opacity: 0; }
.prep__hint { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.prep__often { margin: 0; }
.prep__often-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.prep__num {
  width: 88px; min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  font: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--surface);
}
.prep__num:hover { border-color: var(--text-muted); }
.prep__num:focus-visible { outline: 2px solid var(--plum); outline-offset: 1px; }
.prep__minutes label { display: flex; justify-content: space-between; align-items: baseline; }
.prep__min-out { font-weight: var(--fw-bold); color: var(--ink); }
.prep__range { width: 100%; min-height: 0 !important; padding: 0 !important; border: 0 !important; accent-color: var(--plum); cursor: pointer; }
.prep__result { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.prep__figure { margin: 0; font-size: var(--fs-base); color: var(--ink); }
.prep__figure b,
.after__value b {
  display: inline-block; font-family: var(--font-display); font-weight: var(--fw-display); color: var(--plum);
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem); letter-spacing: var(--tracking-tight); line-height: 1;
}
.prep__figure b.is-empty,
.after__value b.is-empty { color: var(--text-muted); }
.is-bump { animation: book-bump 450ms var(--ease); }
@keyframes book-bump { 0% { transform: translateY(6px); opacity: 0.3; } 100% { transform: none; opacity: 1; } }
.prep__note { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.prep__send { justify-self: start; }

/* Book a call · "Después de la llamada": línea de 2 días hábiles y página 1 de la propuesta.
   Se activa al entrar en pantalla ([data-progress] → .is-active). Sin JS se ve completa. */
.after { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.after__line {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.after__line::before,
.after__line::after {
  content: ""; position: absolute; top: 5px; left: 16.66%; right: 16.66%; height: 2px; border-radius: 1px;
}
.after__line::before { background: var(--line); }
.after__line::after { background: var(--plum); transform-origin: left; transition: transform 1200ms var(--ease); }
.after__stop { display: grid; justify-items: center; gap: var(--space-2); text-align: center; font-size: var(--fs-xs); color: var(--ink); }
.after__dot {
  position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: var(--plum); transition: transform 400ms var(--ease);
}
.after__doc {
  position: relative; padding: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
  transition: opacity 600ms var(--ease) 1100ms, transform 600ms var(--ease) 1100ms;
}
.after__page { margin: 0 0 var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); }
.after__label { margin: 0 0 var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.after__value { margin: 0 0 var(--space-5); font-size: var(--fs-sm); }
.after__lines { display: grid; gap: var(--space-2); }
.after__lines i { display: block; height: 8px; border-radius: 4px; background: var(--surface-warm); }
.after__lines i:nth-child(2) { width: 86%; }
.after__lines i:nth-child(3) { width: 62%; }
html:not(.no-js) .after:not(.is-active) .after__line::after { transform: scaleX(0); }
html:not(.no-js) .after:not(.is-active) .after__dot { transform: scale(0); }
html:not(.no-js) .after:not(.is-active) .after__doc { opacity: 0; transform: translateY(16px); }
.after__stop:nth-child(2) .after__dot { transition-delay: 450ms; }
.after__stop:nth-child(3) .after__dot { transition-delay: 900ms; }

/* ---------- 16. Demos guionadas (motor reutilizable: app.js · [data-sdemo]) ----------
   Cómo escribir un guion: ver el comentario "MOTOR DE DEMOS GUIONADAS" en app.js.
   Sin JS (o antes de que cargue) cada escena se ve completa, una debajo de otra.
   .is-enhanced  → el motor tomó el control (pestañas, una escena a la vez)
   .is-animated  → además hay movimiento (siempre, decisión de Cami nov. 2026) */
.sdemo {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
.sdemo__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.sdemo__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.sdemo__title img { width: auto; height: 20px; }
.sdemo__title--logo img { width: 120px; height: auto; }
.sdemo__bar-end { display: inline-flex; align-items: center; gap: var(--space-2); }
.sdemo__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: var(--surface-warm); font-size: var(--fs-xs); color: var(--ink); white-space: nowrap;
}
.sdemo__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--plum); }

/* Conversación con cabecera de chat (avatar, nombre y estado) */
.sdemo__convo { display: flex; flex-direction: column; background: var(--surface-warm); }
.sdemo__convo .sdemo__chat { flex: 1; }
.sdemo__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.sdemo__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--plum); color: var(--surface);
}
.sdemo__avatar svg { width: 18px; height: 18px; stroke-width: 1.5; }
.sdemo__who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.sdemo__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.sdemo__wa { width: 20px; height: 20px; flex-shrink: 0; fill: var(--text-muted); }

/* Columna de pasos con su título */
.sdemo__side { padding: var(--space-5) var(--space-4); border-top: 1px solid var(--line); }
.sdemo__side-title { margin: 0 0 var(--space-4); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.sdemo__side .sdemo__steps { padding: 0; border: 0; }

/* Pestañas (las crea app.js con los títulos de escena) */
.sdemo__tabs {
  position: relative;
  display: flex; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.sdemo__tabs::-webkit-scrollbar { display: none; }
.sdemo__tab,
.sdemo__replay {
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 38px; padding: 0 var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  cursor: pointer; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease);
}
.sdemo__tab-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.sdemo__tab svg,
.sdemo__replay svg { width: 16px; height: 16px; stroke-width: 1.5; }
.sdemo__tab:hover,
.sdemo__replay:hover { border-color: var(--text-muted); color: var(--ink); }
.sdemo__tab:active,
.sdemo__replay:active { transform: scale(0.96); }
.sdemo__tab:focus-visible,
.sdemo__replay:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.sdemo__tab[aria-selected="true"] { background: var(--plum); border-color: transparent; color: var(--surface); }
.sdemo__tab-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255, 255, 255, 0.75);
  transform: scaleX(0); transform-origin: left; opacity: 0;
}
.sdemo__replay { min-height: 32px; padding-inline: var(--space-3); font-size: var(--fs-xs); }
.sdemo__replay[hidden] { display: none; }
.sdemo__title { white-space: nowrap; }
/* Celulares: "Repetir" queda solo con el ícono (el nombre va en aria-label) */
@media (max-width: 479px) {
  .sdemo__replay-text { display: none; }
  .sdemo__replay { width: 32px; padding: 0; justify-content: center; }
}

/* Escenas: sin JS, apiladas; con JS, en la misma celda (el alto no salta al cambiar) */
.sdemo__scenes { display: grid; }
.sdemo__scene { display: grid; align-content: start; }
.sdemo__scene + .sdemo__scene { border-top: 1px solid var(--line); }
.sdemo__scene-title {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); letter-spacing: 0;
}
.sdemo__scene-title svg { width: 16px; height: 16px; stroke-width: 1.5; }
.sdemo.is-enhanced .sdemo__scene { grid-area: 1 / 1; border-top: 0; visibility: hidden; }
.sdemo.is-enhanced .sdemo__scene.is-current { visibility: visible; }
/* Con pestañas, las escenas cortas estiran el chat y el final queda abajo */
.sdemo.has-tabs .sdemo__scene { align-content: stretch; grid-template-rows: 1fr auto auto; }
.sdemo.has-tabs .sdemo__scene-title {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (min-width: 768px) {
  .sdemo--split .sdemo__scene { grid-template-columns: 1.2fr 1fr; }
  .sdemo--split.has-tabs .sdemo__scene { grid-template-rows: 1fr auto; }
  .sdemo--split .sdemo__scene-title,
  .sdemo--split .sdemo__final { grid-column: 1 / -1; }
  .sdemo--split .sdemo__steps,
  .sdemo--split .sdemo__side { border-top: 0; border-left: 1px solid var(--line); }
  .sdemo--split .sdemo__side { padding: var(--space-5); }
  .sdemo--split .sdemo__side .sdemo__steps { border-left: 0; }
}

/* Estado del chat: "en línea" ↔ "escribiendo…" */
.sdemo__status { position: relative; margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.sdemo__status-typing { position: absolute; left: 0; top: 0; color: var(--plum); opacity: 0; white-space: nowrap; }
.sdemo__status-online,
.sdemo__status-typing { transition: opacity var(--dur) var(--ease); }
.sdemo.is-animated .sdemo__scene.is-typing .sdemo__status-online { opacity: 0; }
.sdemo.is-animated .sdemo__scene.is-typing .sdemo__status-typing { opacity: 1; }

/* Chat */
.sdemo__chat {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3);
  margin: 0; padding: var(--space-5) var(--space-4);
  list-style: none; background: var(--surface-warm);
}
.sdemo__msg { position: relative; display: flex; }
.sdemo__msg--out { justify-content: flex-end; }
.sdemo__bubble {
  max-width: min(80%, 420px); margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: 12px 12px 12px 4px;
  background: var(--surface); color: var(--ink);
  font-size: var(--fs-sm); line-height: 1.5;
}
.sdemo__msg--out .sdemo__bubble { border-color: transparent; border-radius: 12px 12px 4px 12px; background: var(--plum); color: var(--surface); }
/* Aviso de sistema (formulario, embudo, llamada): tarjeta, no burbuja de chat */
.sdemo__msg--event .sdemo__bubble { max-width: 100%; border-radius: var(--radius-card); }
/* Demo de agentes (Home y Agents): lo entrante llega arriba, como una bandeja */
.agent-demo .sdemo__chat { justify-content: flex-start; }
/* Indicador "escribiendo…" (lo inserta app.js en los mensajes con data-typing) */
.sdemo__typing {
  position: absolute; left: 0; top: 0;
  display: inline-flex; gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: 12px 12px 12px 4px;
  background: var(--surface);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sdemo__msg--out .sdemo__typing { left: auto; right: 0; border-radius: 12px 12px 4px 12px; }
.sdemo__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typing 1s infinite ease-in-out; }
.sdemo__typing i:nth-child(2) { animation-delay: 0.15s; }
.sdemo__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* Pasos con check */
.sdemo__steps {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0; padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--line);
  list-style: none;
}
.sdemo__step,
.sdemo__final { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); line-height: 1.4; }
.sdemo__step {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); font-size: var(--fs-sm);
}
.sdemo__step small { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.sdemo__step::after,
.sdemo__final::before {
  content: ""; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat, var(--plum);
}
.sdemo__step::after { margin-left: auto; }

/* Estado final */
.sdemo__final {
  max-width: none; margin: 0; padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}

.sdemo__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}

/* Variante oscura (sobre fondos Ink): transparencias de blanco y acento Sky Blue */
.sdemo--dark {
  --text-muted: var(--on-dark-muted);
  --line: rgba(255, 248, 239, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
}
.sdemo--dark .sdemo__title,
.sdemo--dark .sdemo__name,
.sdemo--dark .sdemo__side-title,
.sdemo--dark .sdemo__step,
.sdemo--dark .sdemo__final { color: var(--surface); }
.sdemo--dark .sdemo__badge { background: rgba(255, 255, 255, 0.06); color: var(--surface-warm); }
.sdemo--dark .sdemo__tab,
.sdemo--dark .sdemo__replay { background: transparent; color: var(--surface-warm); }
.sdemo--dark .sdemo__tab:hover,
.sdemo--dark .sdemo__replay:hover { border-color: var(--text-muted); color: var(--surface); }
.sdemo--dark .sdemo__tab:focus-visible,
.sdemo--dark .sdemo__replay:focus-visible { outline-color: var(--mostaza); }
.sdemo--dark .sdemo__tab[aria-selected="true"] { background: var(--plum); color: var(--surface); }
.sdemo--dark .sdemo__head { background: transparent; }
.sdemo--dark .sdemo__convo,
.sdemo--dark .sdemo__chat { background: rgba(31, 20, 38, 0.55); }
.sdemo--dark .sdemo__bubble,
.sdemo--dark .sdemo__typing { background: rgba(255, 255, 255, 0.08); color: var(--surface); }
.sdemo--dark .sdemo__msg--out .sdemo__bubble { background: var(--plum); }
.sdemo--dark .sdemo__step { background: rgba(255, 255, 255, 0.04); }
.sdemo--dark .sdemo__status-typing { color: var(--mostaza); }
.sdemo--dark .sdemo__step::after,
.sdemo--dark .sdemo__final::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1426' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat, var(--mostaza);
}

/* Movimiento: solo con .is-animated; cada cue aparece al recibir .is-shown */
.sdemo.is-animated .sdemo-cue { opacity: 0; transform: translateY(8px); transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
.sdemo.is-animated .sdemo-cue.is-shown { opacity: 1; transform: none; }
/* Mensajes: se anima la burbuja; el contenedor queda visible para el indicador */
.sdemo.is-animated .sdemo__msg.sdemo-cue { opacity: 1; transform: none; }
.sdemo.is-animated .sdemo__msg .sdemo__bubble { opacity: 0; transform: translateY(8px); transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
.sdemo.is-animated .sdemo__msg.is-shown .sdemo__bubble,
.sdemo.is-animated .sdemo__msg.is-typing .sdemo__typing { opacity: 1; transform: none; }
/* Pasos: visibles pero tenues hasta que se marcan */
.sdemo.is-animated .sdemo__step.sdemo-cue { opacity: 0.45; transform: none; }
.sdemo.is-animated .sdemo__step.sdemo-cue.is-shown { opacity: 1; }
.sdemo.is-animated .sdemo__step::after { opacity: 0; transform: scale(0.4); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.sdemo.is-animated .sdemo__step.is-shown::after { opacity: 1; transform: none; }

/* ---------- 17. Agents ---------- */
/* Hero: la red de agentes sobre un 8 (∞). Los nodos y el trazo son HTML/SVG estáticos;
   app.js · [data-mesh] mueve los pulsos (transform) y enciende el nodo por el que pasan. */
.agents-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  inset: auto -180px -240px auto; width: 560px; height: 560px; border-radius: 50%;
  border: 48px solid var(--plum); border-bottom-color: transparent; border-right-color: transparent;
  opacity: 0.55;
}
.agents-hero .btn svg { transition: transform var(--dur) var(--ease); }
.agents-hero .btn:hover svg { transform: translateX(3px); }

.mesh { margin: 0; padding-block: var(--space-5); }
.mesh__stage { position: relative; width: 100%; max-width: 720px; margin-inline: auto; aspect-ratio: 600 / 280; }
.mesh__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mesh__path path { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mesh__nodes { margin: 0; padding: 0; list-style: none; }
.mesh__node { position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%); }
.mesh__node a { position: relative; display: block; border-radius: 50%; color: var(--surface-warm); text-decoration: none; }
.mesh__node a:focus-visible { outline: 2px solid var(--surface); outline-offset: 4px; }
.mesh__dot {
  position: relative; isolation: isolate;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform var(--dur) var(--ease);
}
.mesh__dot svg { width: 16px; height: 16px; stroke-width: 1.5; }
/* Anillo rosa (estado activo) y onda al recibir un pulso: solo opacity y transform */
.mesh__dot::before,
.mesh__dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--mandarina); pointer-events: none; opacity: 0; }
.mesh__dot::before { transition: opacity var(--dur) var(--ease); }
.mesh__node.is-active .mesh__dot::before,
.mesh__node a:hover .mesh__dot::before,
.mesh__node a:focus-visible .mesh__dot::before { opacity: 1; }
.mesh__node.is-hit .mesh__dot::after { animation: mesh-ping 1200ms var(--ease) both; }
@keyframes mesh-ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
.mesh__node a:hover .mesh__dot,
.mesh__node.is-active .mesh__dot { transform: scale(1.12); }
.mesh__node a:active .mesh__dot { transform: scale(0.96); }
.mesh__label {
  position: absolute; left: 50%; top: calc(100% + var(--space-2));
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-btn); background: var(--ink);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.4; color: var(--surface); white-space: nowrap;
  opacity: 0; transform: translate(-50%, -4px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mesh__node--up .mesh__label { top: auto; bottom: calc(100% + var(--space-2)); transform: translate(-50%, 4px); }
.mesh__node--start .mesh__label { left: 0; transform: translate(0, -4px); }
.mesh__node--start.mesh__node--up .mesh__label { transform: translate(0, 4px); }
.mesh__node--end .mesh__label { left: auto; right: 0; transform: translate(0, -4px); }
.mesh__node--end.mesh__node--up .mesh__label { transform: translate(0, 4px); }
.mesh__node.is-active .mesh__label,
.mesh__node a:hover .mesh__label,
.mesh__node a:focus-visible .mesh__label { opacity: 1; transform: translate(-50%, 0); }
.mesh__node--start.is-active .mesh__label, .mesh__node--start a:hover .mesh__label, .mesh__node--start a:focus-visible .mesh__label,
.mesh__node--end.is-active .mesh__label, .mesh__node--end a:hover .mesh__label, .mesh__node--end a:focus-visible .mesh__label { transform: none; }
/* Con el cursor o el foco en un nodo, solo ese muestra su nombre */
.mesh__nodes:has(a:hover, a:focus-visible) .mesh__node.is-active:not(:hover):not(:focus-within) .mesh__label,
.mesh__nodes:has(a:hover, a:focus-visible) .mesh__node.is-active:not(:hover):not(:focus-within) .mesh__dot::before { opacity: 0; }
.mesh__node:hover, .mesh__node:focus-within, .mesh__node.is-active { z-index: 3; }
/* Centro: el isotipo coordina */
.mesh__hub {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); transform: translate(-50%, -50%);
}
.mesh__hub::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--plum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.mesh__hub::after {
  content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: inherit;
  background: var(--plum);
  opacity: 0.35; transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.mesh__hub.is-hit::after { opacity: 1; transform: scale(1.25); }
.mesh__hub img { width: auto; height: 24px; }
/* Pulsos (los crea app.js) */
.mesh__pulse {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--surface); pointer-events: none; will-change: transform;
}
.mesh__pulse--echo1 { width: 6px; height: 6px; margin: -3px 0 0 -3px; opacity: 0.45; }
.mesh__pulse--echo2 { width: 4px; height: 4px; margin: -2px 0 0 -2px; opacity: 0.2; }
@media (min-width: 768px) {
  .mesh__dot { width: 44px; height: 44px; }
  .mesh__dot svg { width: 20px; height: 20px; }
  .mesh__hub { width: 68px; height: 68px; }
  .mesh__hub img { height: 32px; }
}
@media (min-width: 1280px) {
  .agents-hero .hero__grid { grid-template-columns: 1.15fr 1fr; align-items: center; }
  .mesh { padding-block: var(--space-6); }
}

/* Qué es un agente: 5 pasos + recorrido de un mensaje (motor de demos).
   Sin JS: todo visible. Con .is-live (app.js · [data-anatomy]) solo el paso activo va en color. */
.anatomy { display: grid; gap: var(--space-6); }
.anatomy > * { min-width: 0; }
.anatomy__steps { display: grid; margin: 0; padding: 0; list-style: none; }
.anatomy__step {
  display: grid; grid-template-columns: 2rem 1fr; column-gap: var(--space-3);
  padding: var(--space-4) 0;
  transition: opacity var(--dur) var(--ease);
}
.anatomy__bar { position: relative; grid-column: 1 / -1; display: block; height: 4px; margin-bottom: var(--space-4); border-radius: 2px; background: var(--line); overflow: hidden; }
.anatomy__bar::before,
.anatomy__bar::after { content: ""; position: absolute; inset: 0; transform-origin: left; transition: transform 700ms var(--ease); }
.anatomy__bar::before { background: var(--plum); }
/* Traspaso a una persona: el único acento de la página */
.anatomy__bar::after { background: var(--mandarina); transform: scaleX(0); }
.anatomy__num { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--plum); line-height: 1.5; }
.anatomy__step h3 { margin-bottom: var(--space-1); }
.anatomy__step p { margin: 0; }
.anatomy.is-live .anatomy__step { opacity: 0.5; }
.anatomy.is-live .anatomy__bar::before { transform: scaleX(0); }
.anatomy.is-live .anatomy__step.is-current { opacity: 1; }
.anatomy.is-live .anatomy__step.is-current .anatomy__bar::before { transform: scaleX(1); }
.anatomy.is-live .anatomy__step.is-alert .anatomy__bar::after { transform: scaleX(1); }
.anatomy.is-live .anatomy__step.is-alert .anatomy__num { color: var(--plum); }

.trace__list {
  position: relative; display: grid; gap: var(--space-3); align-content: start;
  margin: 0; padding: var(--space-5) var(--space-4) var(--space-5) calc(var(--space-4) + 36px);
  list-style: none; background: var(--surface-warm);
}
.trace__list::before { content: ""; position: absolute; left: calc(var(--space-4) + 11px); top: var(--space-7); bottom: var(--space-7); width: 1px; background: var(--line); }
.trace__line {
  z-index: 1;
  position: relative;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink);
}
.trace__line::before {
  content: ""; position: absolute; left: -37px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat, var(--plum);
}
.trace__line--handoff::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 21a7 7 0 0 1 14 0'/%3E%3C/svg%3E") center / 13px no-repeat, var(--mandarina);
}
.trace__step { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--plum); }
.trace__line--handoff .trace__step { color: var(--plum); }
.trace__packet {
  position: absolute; left: calc(var(--space-4) + 7px); top: -4px; z-index: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--plum); opacity: 0; pointer-events: none;
  transition: transform 500ms var(--ease), opacity var(--dur) var(--ease);
}
.trace .sdemo__tab svg,
.trace .sdemo__scene-title svg { fill: currentColor; }
/* Con movimiento: la línea pendiente espera tenue, sin check ni texto */
.sdemo.is-animated .trace__line.sdemo-cue { opacity: 0.4; transform: none; }
.sdemo.is-animated .trace__line.sdemo-cue.is-shown { opacity: 1; }
.sdemo.is-animated .trace__line::before { opacity: 0; transform: scale(0.4); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.sdemo.is-animated .trace__line.is-shown::before { opacity: 1; transform: none; }
.sdemo.is-animated .trace__line .trace__text { opacity: 0; transition: opacity 300ms var(--ease); }
.sdemo.is-animated .trace__line.is-shown .trace__text { opacity: 1; }
@media (min-width: 1024px) {
  .anatomy { grid-template-columns: 5fr 6fr; gap: var(--space-8); align-items: start; }
  .anatomy .trace { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

/* Selector de agentes (Home: 4, Agents: 8) · un solo panel, motor de demos con data-sticky.
   Celular: la fila de agentes va arriba y se desplaza de lado (bordes difuminados donde hay más);
   el panel queda justo debajo. Desde 1024px: lista vertical a la izquierda, panel a la derecha.
   El cambio de agente es un fundido corto (opacity + transform). */
.agent-picker { display: flex; flex-direction: column; }
.agent-picker > [data-sdemo-tabs] { order: -1; }
.agent-picker .sdemo__tabs {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.agent-picker .sdemo__tabs.at-start {
  -webkit-mask-image: linear-gradient(90deg, #000, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, #000, #000 calc(100% - 40px), transparent);
}
.agent-picker .sdemo__tabs.at-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000);
          mask-image: linear-gradient(90deg, transparent, #000 40px, #000);
}
.agent-picker .sdemo__tabs.at-start.at-end { -webkit-mask-image: none; mask-image: none; }

/* Panel: nombre y qué hace arriba, demo, resultado y "Conecta con / Reemplaza" abajo */
.agent-picker__info { padding: var(--space-5) var(--space-4) var(--space-4); border-bottom: 1px solid var(--line); }
.agent-picker__info p { margin: var(--space-2) 0 0; max-width: 62ch; }
.agent-picker.has-tabs .sdemo__scene-title {
  position: static; width: auto; height: auto; margin: 0; padding: 0;
  overflow: visible; clip: auto; white-space: normal; border: 0;
  gap: var(--space-3); font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.3;
}
.agent-picker__info .sdemo__scene-title svg { width: 22px; height: 22px; color: var(--plum); }
.agent-picker__meta { display: grid; gap: var(--space-4); margin: 0; padding: var(--space-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.agent-picker__meta dt { margin-bottom: var(--space-2); font-weight: var(--fw-bold); color: var(--ink); }
.agent-picker__meta dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; }
.chips li { padding: 2px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface-warm); font-size: var(--fs-xs); line-height: 1.6; color: var(--ink); }
.agent-picker.has-tabs .sdemo__scene { grid-template-rows: auto 1fr auto auto auto; }
.agent-picker.is-enhanced .sdemo__scene {
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s linear 300ms;
}
.agent-picker.is-enhanced .sdemo__scene.is-current { opacity: 1; transform: none; transition-delay: 0s; }
.agent-picker .sdemo__scene { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.agent-picker__note { margin: var(--space-5) auto 0; max-width: 62ch; text-align: center; font-size: var(--fs-sm); color: var(--ink); }
@media (min-width: 768px) {
  .agent-picker.has-tabs .sdemo__scene { grid-template-rows: auto 1fr auto auto; }
  .agent-picker__info,
  .agent-picker__meta { grid-column: 1 / -1; }
  .agent-picker__info { padding: var(--space-5); }
  .agent-picker__meta { grid-template-columns: 1.5fr 1fr; gap: var(--space-6); padding: var(--space-4) var(--space-5); }
}
@media (min-width: 1024px) {
  .agent-picker {
    display: grid; grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
    grid-template-areas: "tabs bar" "tabs scenes"; grid-template-rows: auto 1fr;
  }
  .agent-picker > .sdemo__bar { grid-area: bar; }
  .agent-picker > [data-sdemo-tabs] { grid-area: tabs; order: 0; border-right: 1px solid var(--line); background: var(--surface-warm); }
  .agent-picker > .sdemo__scenes { grid-area: scenes; }
  .agent-picker .sdemo__tabs {
    position: static;
    flex-direction: column; gap: var(--space-2); padding: var(--space-4);
    overflow: visible; border-bottom: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .agent-picker .sdemo__tab { justify-content: flex-start; width: 100%; min-height: 44px; text-align: left; }
}

/* Lo que no dejamos que un agente haga solo (Ink) */
.guard .watermark-8 { right: -60px; bottom: -140px; width: 300px; }
.guard__grid { display: grid; gap: var(--space-5); }
.guard h2 { max-width: 16ch; margin: 0; }
.guard .lead { margin: 0; color: var(--surface-warm); }
.rule--pink { background: var(--mandarina); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease) 300ms; }
.guard__grid.is-visible .rule--pink { transform: scaleX(1); }
@media (min-width: 1024px) {
  .guard__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; }
}

/* Modelos: una línea con wordmarks */
.models { padding-block: var(--space-7); text-align: center; }
.models p { margin: 0 auto var(--space-5); max-width: 62ch; }
.models__list { display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

/* CTAs extra de Agents: agendar (principal) y boceto del agente (secundario) */
.section-cta { display: flex; justify-content: center; margin-top: var(--space-7); }
.guard__cta { margin-top: var(--space-6); }
.closing__ctas { justify-content: center; }

/* ---------- 18. Services ---------- */
/* Hero: los tres servicios cruzan el mismo método de 4 pasos (las barras se llenan por columna
   y una luz recorre el método en bucle: el proceso que no para). Acento único: Spark Pink. */
.svc-hero .hero__intro .btn { margin-top: var(--space-2); }
.method {
  --label: 8.25rem;
  --gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.03);
}
.method__steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  margin: 0 0 var(--space-3) calc(var(--label) + var(--space-3)); padding: 0; list-style: none;
}
.method__num { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted); }
.method__name {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.method__rows { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.method__row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: var(--label) 1fr; gap: var(--space-3); align-items: center;
  margin-inline: calc(var(--space-3) * -1); padding: var(--space-3);
  border-radius: var(--radius-card);
  color: var(--surface-warm); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.method__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, 0.06); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.method__row:hover,
.method__row:focus-visible { color: var(--surface); }
.method__row:hover::before,
.method__row:focus-visible::before { opacity: 1; }
.method__row:active { transform: scale(0.99); }
.method__row:focus-visible { outline: 2px solid var(--surface); outline-offset: 2px; }
.method__label { position: relative; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.3; }
.method__label::before {
  content: ""; position: absolute; left: -10px; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--mandarina);
  transform: scale(0); transition: transform var(--dur) var(--ease);
}
.method__row:hover .method__label::before,
.method__row:focus-visible .method__label::before { transform: scale(1); }
.method__bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.method__bars > span { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.method__bars > span::before,
.method__bars > span::after { content: ""; position: absolute; inset: 0; }
.method__bars > span::before {
  background: var(--plum); transform: scaleX(0); transform-origin: left;
  transition: transform 600ms var(--ease);
}
.method__bars > span::after {
  background: rgba(255, 248, 239, 0.5);
  transform: translateX(-100%); opacity: 0;
}
.method.is-active .method__bars > span::before { transform: scaleX(1); }
.method.is-active .method__bars > span::after { animation: method-sweep 5.2s var(--ease) infinite; }
.method.is-active .method__bars > span:nth-child(2)::before { transition-delay: 350ms; }
.method.is-active .method__bars > span:nth-child(3)::before { transition-delay: 700ms; }
.method.is-active .method__bars > span:nth-child(4)::before { transition-delay: 1050ms; }
.method.is-active .method__bars > span:nth-child(1)::after { animation-delay: 1.8s; }
.method.is-active .method__bars > span:nth-child(2)::after { animation-delay: 2.1s; }
.method.is-active .method__bars > span:nth-child(3)::after { animation-delay: 2.4s; }
.method.is-active .method__bars > span:nth-child(4)::after { animation-delay: 2.7s; }
@keyframes method-sweep {
  0% { transform: translateX(-100%); opacity: 0; }
  8% { opacity: 1; }
  22% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}
.method__legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-4);
  margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-xs); color: var(--surface-warm);
}
.method__legend b { display: block; color: var(--text-muted); }
@media (min-width: 640px) {
  .method { --label: 9.5rem; padding: var(--space-6); }
  .method__legend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .svc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
}

/* Índice fijo de los tres servicios: subrayado rosa en el activo (app.js · [data-svc-nav]) */
.svc-nav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.svc-nav__list {
  display: flex; gap: var(--space-5);
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.svc-nav__list::-webkit-scrollbar { display: none; }
.svc-nav__link {
  position: relative; display: block; padding-block: var(--space-4);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.svc-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px;
  background: var(--mandarina); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.svc-nav__link:hover { color: var(--ink); }
.svc-nav__link:hover::after { transform: scaleX(0.35); }
.svc-nav__link.is-active { color: var(--ink); }
.svc-nav__link.is-active::after { transform: scaleX(1); }
.svc-nav__link:active { opacity: 0.7; }
.svc-nav__link:focus-visible { outline: 2px solid var(--plum); outline-offset: -2px; border-radius: 4px; }
@media (min-width: 768px) { .svc-nav__list { gap: var(--space-6); } }

/* Bloque de servicio: cabecera con Rule que crece, qué recibes / encaja si, y su pieza visual */
.svc { scroll-margin-top: calc(var(--header-h) + var(--space-7)); }
.svc__head { max-width: 46rem; margin-bottom: var(--space-7); }
.svc__head h2 { margin-bottom: var(--space-4); }
.svc__head .lead { margin: 0; }
.offer {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--plum);
  border-radius: 8px;
}
.offer p { margin: 0; }
.offer__name { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-lg); letter-spacing: -0.01em; }
.offer p.offer__meta { margin-top: var(--space-1); font-size: var(--fs-sm); }
.offer__meta strong { font-weight: var(--fw-bold); color: var(--ink); }
.offer p.offer__promise { margin-top: var(--space-3); line-height: 1.6; }
.svc__head .rule { transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease) 200ms; }
.svc__head.is-visible .rule,
.no-js .svc__head .rule { transform: none; }
.svc__body { display: grid; gap: var(--space-7); }
.svc__body > * { min-width: 0; }
.svc__visual.reveal { transition-delay: 120ms; }
.svc__facts h3 { margin-bottom: var(--space-4); }
.checks { margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.checks li { position: relative; padding-left: var(--space-6); }
.checks li + li { margin-top: var(--space-3); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237422EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fit { display: grid; gap: var(--space-4); margin: 0 0 var(--space-6); }
.fit__item { position: relative; padding-left: var(--space-4); }
.fit__item::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--plum); }
.fit__item--no::before { background: var(--text-muted); }
.fit dt { margin-bottom: var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.fit dd { margin: 0; }
.fit a { color: var(--plum); text-underline-offset: 3px; }
.fit a:hover { color: var(--plum); }
.fit a:active { opacity: 0.7; }
.fit a:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; border-radius: 2px; }
.svc__cta svg { width: 16px; height: 16px; stroke-width: 1.5; transition: transform var(--dur) var(--ease); }
.svc__cta:hover svg { transform: translateX(3px); }
@media (min-width: 1024px) {
  .svc__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
  /* Agentes: el selector necesita todo el ancho; los datos van en dos columnas arriba */
  .svc--stack .svc__body { grid-template-columns: 1fr; gap: var(--space-7); }
  .svc--stack .svc__facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); align-items: start; }
  .svc--stack .svc__facts > h3 { grid-column: 1; grid-row: 1; }
  .svc--stack .svc__facts > .checks { grid-column: 1; grid-row: 2 / 4; margin-bottom: 0; }
  .svc--stack .fit { grid-column: 2; grid-row: 1 / 3; }
  .svc--stack .svc__cta { grid-column: 2; grid-row: 3; justify-self: start; }
}

/* Zoho y marquesina de implementaciones */
.zoho { padding: var(--space-6); }
.zoho .card__icon { color: var(--ink); }
.zoho .card__icon svg { width: 34px; height: 34px; }
.zoho .card__icon svg { fill: currentColor; }
.zoho p { margin: 0; }
.svc__marquee { margin-top: var(--space-7); }

/* Services · servicio 3: plataformas como etiquetas + pie legal */
.svc__facts .platforms { margin-bottom: var(--space-3); }
.platforms li { padding: var(--space-1) var(--space-4); background: var(--surface); font-size: var(--fs-sm); }
.platforms__note { margin: 0 0 var(--space-6); font-size: var(--fs-sm); }
.svc__legal { margin: var(--space-7) 0 0; }

/* Services · servicio 3: flujo de ejemplo (motor de demos; solo transform y opacity) */
.flow__list { position: relative; display: grid; gap: var(--space-4); margin: 0; padding: var(--space-5); list-style: none; }
.flow__node { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-4); align-items: center; }
.flow__icon { position: relative; z-index: 1; grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--plum); }
.flow__icon svg { width: 18px; height: 18px; stroke-width: 1.5; }
.flow__text { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.4; }
.flow__tool { font-size: var(--fs-xs); color: var(--ink); line-height: 1.5; }
/* Tramo de riel que une cada paso con el anterior (aparece con su paso) */
.flow__node + .flow__node::before { content: ""; position: absolute; left: 17px; top: calc(18px - 50% - var(--space-4)); bottom: calc(50% + 18px); width: 2px; background: var(--plum); transform-origin: top; }
.flow.is-animated .flow__node + .flow__node::before { transform: scaleY(0); transition: transform 400ms var(--ease); }
.flow.is-animated .flow__node.is-shown + .flow__node.is-shown::before { transform: none; }
.flow__node--agent .flow__icon { border-color: transparent; background: var(--plum); color: var(--surface); }
.flow.is-animated .flow__node .flow__icon { transform: scale(0.6); transition: transform 350ms var(--ease); }
.flow.is-animated .flow__node.is-shown .flow__icon { transform: none; }

/* Services · servicio 2: los 4 pasos del diagnóstico, línea que se enciende con el scroll (app.js [data-scrollline]) */
.audit-line { position: relative; display: grid; max-width: 46rem; margin: 0 0 var(--space-7); padding: 0; list-style: none; }
.audit-line__track { position: absolute; left: 7px; top: 12px; width: 2px; height: calc(100% - 48px); background: var(--line); overflow: hidden; }
.audit-line__fill { display: block; width: 100%; height: 100%; background: var(--plum); transform-origin: top; transform: scaleY(var(--p, 1)); }
.audit-line__step { position: relative; display: grid; grid-template-columns: 16px auto minmax(0, 1fr); column-gap: var(--space-3); align-items: start; height: 48px; line-height: 24px; }
.audit-line__dot { position: relative; width: 16px; height: 16px; margin-top: 4px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); }
.audit-line__dot::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--plum); opacity: 0; transform: scale(0.4); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.audit-line__num { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--plum); }
.audit-line__label { font-weight: var(--fw-bold); color: var(--ink); transition: opacity 300ms var(--ease); }
.audit-line.is-live .audit-line__label { opacity: 0.4; }
.audit-line:not(.is-live) .audit-line__dot::before,
.audit-line__step.is-lit .audit-line__dot::before { opacity: 1; transform: none; }
.audit-line.is-live .audit-line__step.is-lit .audit-line__label { opacity: 1; }
@media (min-width: 768px) {
  .audit-line { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
  .audit-line__track { left: 12.5%; top: 11px; width: 75%; height: 2px; }
  .audit-line__fill { background: var(--plum); transform-origin: left; transform: scaleX(var(--p, 1)); }
  .audit-line__step { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); height: auto; text-align: center; }
  .audit-line__dot { margin: 4px 0 var(--space-2); }
}

/* Mapa de oportunidades (Consultoría) · motor de demos + app.js [data-opp].
   El HTML ya trae la lista ordenada (estado final, sin JS). Con movimiento, cada fila arranca
   en su lugar "desordenado" (--dy lo calcula app.js), cuenta sus horas y, cuando sale
   .opp__sort, todas vuelven a su lugar. Solo transform y opacity. */
.opp .sdemo__bar { flex-wrap: wrap; row-gap: var(--space-2); }
.opp__list { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-4); list-style: none; }
.opp__card {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name hours" "tag tag" "bar bar";
  gap: var(--space-2) var(--space-4); align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
  transition: transform 800ms var(--ease), opacity 400ms var(--ease);
}
.opp__card::after {
  content: ""; position: absolute; inset: -1px; border: 1px solid var(--mandarina); border-radius: inherit;
  opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease);
}
.opp__name { grid-area: name; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.35; color: var(--ink); }
.opp__hours { grid-area: hours; font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.opp__hours b { color: var(--ink); }
.opp__bar { grid-area: bar; position: relative; height: 4px; border-radius: 2px; background: var(--surface-warm); overflow: hidden; }
.opp__bar::before {
  content: ""; position: absolute; inset: 0; background: var(--plum);
  transform: scaleX(var(--v)); transform-origin: left; transition: transform 900ms var(--ease);
}
.opp__row--human .opp__bar::before { background: var(--text-muted); }
.opp__tag {
  grid-area: tag; justify-self: start;
  padding: 2px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-btn);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.5; color: var(--ink); white-space: nowrap;
}
.opp__tag--go { border-color: var(--mandarina); color: var(--ink); }
.opp__row:has(.opp__tag--go) .opp__card::after { opacity: 1; }
@media (min-width: 640px) {
  .opp__card { grid-template-columns: 1fr auto auto; grid-template-areas: "name tag hours" "bar bar bar"; }
  .opp__tag { justify-self: end; }
}
/* Con movimiento */
.opp.is-animated .opp__card { transform: translateY(var(--dy, 0px)); }
.opp.is-animated:has(.opp__sort.is-shown) .opp__card { transform: none; }
.opp.is-animated .opp__bar::before { transform: scaleX(0); }
.opp.is-animated .opp__row.is-shown .opp__bar::before { transform: scaleX(var(--v)); }
.opp.is-animated .opp__row .opp__card::after { opacity: 0; }
.opp.is-animated .opp__row:has(.opp__tag--go.is-shown) .opp__card::after { opacity: 1; }
.opp.is-animated .opp__row--human:has(.opp__tag.is-shown) .opp__card { opacity: 0.75; }


/* ---------- 19. Packages ---------- */
/* Acento de la página: Spark Pink (precio del Audit, bloque 01, paso activo de la propuesta). */

/* Hero: primera página de la propuesta (papel sobre Ink) */
.psheet {
  align-self: center;
  width: 100%; max-width: 520px;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
}
.psheet__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.psheet__title { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.psheet__title img { width: auto; height: 18px; }
.psheet__page { font-size: var(--fs-xs); color: var(--text-muted); }
.psheet__lines { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.psheet__lines i { display: block; width: var(--w, 80%); height: 6px; border-radius: 3px; background: var(--surface-warm); }
.psheet > .psheet__lines i:first-child { height: 10px; background: var(--ink); }
.psheet__h { display: flex; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.4; }
.psheet__h b { color: var(--text-muted); }
.psheet__block {
  position: relative;
  margin-bottom: var(--space-5); padding: var(--space-4);
  border-radius: var(--radius-card); background: var(--surface-warm);
}
.psheet__block::before {
  content: ""; position: absolute; left: 0; top: var(--space-4); bottom: var(--space-4);
  width: 3px; border-radius: 2px; background: var(--mandarina);
  transform-origin: top; animation: psheet-rule 900ms var(--ease) 300ms both;
}
.psheet__block .psheet__h b { color: var(--plum); }
.psheet__metric { display: flex; align-items: center; gap: var(--space-3); }
.psheet__metric + .psheet__metric { margin-top: var(--space-2); }
.psheet__metric svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.5; color: var(--ink); }
.psheet__track { flex: 1; height: 8px; border-radius: 4px; background: var(--surface); overflow: hidden; }
.psheet__fill {
  display: block; width: 78%; height: 100%; border-radius: inherit; background: var(--plum);
  transform-origin: left; animation: psheet-fill 6s var(--ease) 600ms infinite both;
}
.psheet__metric + .psheet__metric .psheet__fill { width: 62%; animation-delay: 900ms; }
.psheet__next .psheet__lines { margin-bottom: var(--space-4); }
.psheet__next:last-child .psheet__lines { margin-bottom: 0; }
/* Entrada: las partes de la hoja aparecen en orden; las secciones 02 y 03 quedan tenues */
.psheet > * { animation: psheet-in 600ms var(--ease) both; }
.psheet > :nth-child(2) { animation-delay: 100ms; }
.psheet > :nth-child(3) { animation-delay: 200ms; }
.psheet > :nth-child(4) { animation-delay: 300ms; }
.psheet > :nth-child(5) { animation-delay: 400ms; }
.psheet__next { --o: 0.55; }
.psheet__next + .psheet__next { --o: 0.3; }
@keyframes psheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: var(--o, 1); transform: none; } }
@keyframes psheet-rule { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes psheet-fill {
  0% { transform: scaleX(0); opacity: 1; }
  25%, 85% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (min-width: 1024px) {
  .pkg-hero__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
  .pkg-hero .psheet { justify-self: end; }
}
@media (min-width: 1280px) {
  .pkg-hero__grid { grid-template-columns: 1.1fr 1fr; }
}

/* Tarjetas de paquetes */
.pkgs__grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .pkgs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pkgs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
.pkg { display: flex; flex-direction: column; }
/* Detalle de marca: semicírculo mandarina que cuelga del borde superior */
.pkg { background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 44 22%27%3E%3Cpath fill=%27%23FF7A3D%27 d=%27M0 0A22 22 0 0 0 44 0Z%27/%3E%3C/svg%3E") no-repeat right var(--space-5) top -1px / 36px 18px; }
.pkgs__grid > .pkg:nth-child(2) { transition-delay: 80ms; }
.pkgs__grid > .pkg:nth-child(3) { transition-delay: 160ms; }
.pkgs__grid > .pkg:nth-child(4) { transition-delay: 240ms; }
/* Borde violeta en hover/foco; línea rosa arriba cuando su ejemplo corre en el demo */
.pkg::after,
.pkg::before {
  content: ""; position: absolute; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform 400ms var(--ease);
}
.pkg::after { inset: -1px; border: 1px solid var(--plum); border-radius: inherit; opacity: 0; }
.pkg::before { left: -1px; right: -1px; top: -1px; height: 3px; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--mandarina); transform: scaleX(0); transform-origin: left; }
.pkg:hover::after,
.pkg:focus-within::after { opacity: 1; }
.pkg.is-current::before { transform: scaleX(1); }
.pkg h3 { margin-bottom: var(--space-1); font-size: var(--fs-lg); }
.pkg__scope { margin-bottom: var(--space-5); }
.pkg__scope > span.is-empty::before { visibility: hidden; }
.pkg__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; margin-bottom: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }
.pkg__price { font-weight: var(--fw-bold); color: var(--plum); }
.pkg > p { font-size: var(--fs-sm); }
.pkg > .pkg__get { margin: 0 0 var(--space-2); font-weight: var(--fw-bold); color: var(--ink); }
.pkg__list,
.pkg-terms__list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: var(--fs-sm); line-height: 1.45; }
.pkg__list li,
.pkg-terms__list li { position: relative; padding-left: 26px; }
.pkg__list li::first-letter,
.pkg-terms__list li::first-letter { text-transform: uppercase; }
.pkg__list li::before,
.pkg-terms__list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px;
  background: var(--plum);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pkg > .pkg__note { font-size: var(--fs-xs); }
.pkg__example {
  margin: auto 0 var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-card); background: var(--surface-warm);
}
.pkg__example p { margin-bottom: var(--space-2); font-size: var(--fs-sm); line-height: 1.55; }
.pkg__cta { align-self: stretch; }
@media (max-width: 479px) { .pkg__cta { white-space: normal; } }

/* Demo de ejemplos (debajo de las tarjetas) */
.pkg-demo { margin-top: var(--space-7); }
@media (min-width: 768px) {
  .pkg-demo.sdemo--split .sdemo__scene { grid-template-columns: 1fr 1.25fr; }
}
/* Columna derecha: panel de flujo (como un video del producto) + pasos compactos debajo */
.pkg-flow { display: flex; flex-direction: column; gap: var(--space-4); }
.pkg-flow .sdemo__steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.pkg-flow .sdemo__step { gap: var(--space-2); padding: var(--space-1) var(--space-2); font-size: var(--fs-xs); }
.pkg-flow .sdemo__step::after { width: 16px; height: 16px; background-size: 10px, auto; }

.flow {
  display: grid; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface-warm);
  font-size: var(--fs-xs); line-height: 1.35; color: var(--ink);
}
.flow p { max-width: none; margin: 0; }
.flow svg { width: 14px; height: 14px; flex-shrink: 0; stroke-width: 1.5; }
.flow__card {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); font-weight: var(--fw-bold);
}
.flow__card svg,
.flow__app svg,
.flow__log svg { color: var(--plum); }
.flow__card--out { border-color: transparent; background: var(--plum); color: var(--surface); }
.flow__card--out svg { color: var(--surface); }
.flow__pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px var(--space-2);
  border: 1px solid var(--plum); border-radius: var(--radius-btn);
  background: var(--surface); color: var(--plum);
  font-size: 11px; font-weight: var(--fw-bold); white-space: nowrap;
}
.flow__pill svg { width: 12px; height: 12px; }
.flow__app { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); }

/* Audit: fuentes → cuello de botella → oportunidades con horas y dólares → entregables */
.flow__sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.flow__card--sm { flex-direction: column; align-items: flex-start; gap: 4px; }
.flow__node { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flow__node > svg { color: var(--text-muted); }
.flow__card--alert { border-color: var(--mandarina); }
.flow__card--alert svg { color: var(--plum); }
.flow__opps { display: grid; gap: 6px; }
.flow__opps-head,
.flow__opp { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: var(--space-2); align-items: center; }
.flow__opps-head span { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-bold); color: var(--ink); }
.flow__opp { padding: 6px var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.flow__opp-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-weight: var(--fw-bold); }
.flow__opp--low .flow__opp-name { color: var(--text-muted); }
.flow__bar { height: 6px; border-radius: 3px; background: var(--surface-warm); overflow: hidden; }
.flow__bar i {
  display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: inherit;
  background: var(--plum); transform-origin: left; transition: transform 600ms var(--ease);
}
.sdemo.is-animated .flow__bar i { transform: scaleX(0); }
.sdemo.is-animated .flow__bar.is-shown i { transform: scaleX(1); }
.flow__outs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

/* First agent: Google Calendar (opciones → cita) y ficha del CRM */
.flow__cal,
.flow__crm,
.flow__report {
  display: grid; gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface);
}
.flow__grid { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 4px; }
.flow__day { text-align: center; font-weight: var(--fw-bold); color: var(--ink); }
.flow__time { align-self: center; padding-right: 4px; color: var(--text-muted); }
.flow__cell { position: relative; height: 34px; border-radius: 6px; background: var(--surface-warm); }
.flow__busy { position: absolute; inset: 5px; border-radius: 4px; background: var(--line); }
.flow__slot { position: absolute; inset: 2px; border: 1.5px dashed var(--plum); border-radius: 5px; transition: opacity var(--dur) var(--ease); }
.flow__event {
  position: absolute; inset: 2px;
  display: flex; align-items: center; padding: 0 6px;
  border-radius: 5px; background: var(--plum); color: var(--surface);
  font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden;
}
.sdemo.is-animated .flow--dental:has(.flow__event.is-shown) .flow__slot.is-shown { opacity: 0; }
.no-js .flow__slot { display: none; }
.flow__crm { gap: 2px; }
.flow__crm .flow__app { margin-bottom: 4px; }
.flow__crm-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.flow__crm-field { color: var(--ink); }

/* Growth: la solicitud avanza por el pipeline (un agente por paso) y sale el reporte */
.flow__pipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.flow__col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding-bottom: 4px; border-bottom: 1px solid var(--line);
  font-weight: var(--fw-bold); color: var(--ink);
}
.flow__ok { display: inline-flex; color: var(--plum); }
.flow__ghost { height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.flow__deal { position: relative; z-index: 1; grid-column: 1; grid-row: 3; transition: transform 600ms var(--ease); }
.flow__deal ~ .flow__ghost { grid-row: 4; }
.flow__deal .flow__card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; border-color: var(--plum); }
.flow__tags { display: grid; }
.flow__tags > * { grid-area: 1 / 1; }
.sdemo.is-animated .flow--growth:has(.flow__tag--1.is-shown) .flow__deal { transform: translateX(calc(100% + 6px)); }
.sdemo.is-animated .flow--growth:has(.flow__tag--2.is-shown) .flow__deal { transform: translateX(calc(200% + 12px)); }
.sdemo.is-animated .flow__tags:has(.flow__tag--2.is-shown) .flow__tag--1.is-shown { opacity: 0; }
.no-js .flow__deal { grid-column: 3; }
.no-js .flow__tag--1 { visibility: hidden; }
.flow__report .flow__pill { margin-left: auto; }
.flow__chart { display: flex; align-items: flex-end; gap: 6px; height: 40px; }
.flow__chart i {
  flex: 1; height: calc(var(--v) * 100%); border-radius: 3px 3px 0 0;
  background: var(--plum); transform-origin: bottom; transition: transform 500ms var(--ease);
}
.flow__chart i:nth-child(2) { transition-delay: 80ms; }
.flow__chart i:nth-child(3) { transition-delay: 160ms; }
.flow__chart i:nth-child(4) { transition-delay: 240ms; }
.flow__chart i:nth-child(5) { transition-delay: 320ms; }
.sdemo.is-animated .flow__report .flow__chart i { transform: scaleY(0); }
.sdemo.is-animated .flow__report.is-shown .flow__chart i { transform: scaleY(1); }

/* Custom: la venta baja en cascada por los carriles; la factura espera y se aprueba */
.flow__lane {
  display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: var(--space-2);
  padding-bottom: var(--space-3); border-bottom: 1px dashed var(--line);
}
.flow__lane-name { font-weight: var(--fw-bold); color: var(--ink); }
.flow__lane > .flow__card { justify-self: start; }
.flow__lane:nth-child(2) > .flow__card { margin-left: var(--space-4); }
.flow__lane:nth-child(3) > .flow__card { margin-left: var(--space-6); }
.sdemo.is-animated .flow--custom .flow__lane > .sdemo-cue { transform: translateX(-16px); }
.sdemo.is-animated .flow--custom .flow__lane > .sdemo-cue.is-shown { transform: none; }
.flow__card--inv { flex-wrap: wrap; }
.flow__status { display: grid; }
.flow__status > * { grid-area: 1 / 1; }
.flow__pill--wait { border-color: var(--mandarina); color: var(--ink); transition: opacity var(--dur) var(--ease); }
.sdemo.is-animated .flow__status:has(.flow__pill--ok.is-shown) .flow__pill--wait { opacity: 0; }
.no-js .flow__pill--wait { opacity: 0; }
.flow__log { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.flow__mail { justify-self: start; }
@media (max-width: 479px) {
  .flow__lane { grid-template-columns: 1fr; gap: 6px; }
  .flow__lane:nth-child(n) > .flow__card { margin-left: 0; }
}

/* Siempre incluido · costos de uso · ayuda para elegir */
.pkg-terms__grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .pkg-terms__grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-8); } }
.pkg-terms__h { margin-bottom: var(--space-4); font-size: var(--fs-h3); letter-spacing: -0.015em; }
.pkg-terms__list { margin-bottom: 0; font-size: var(--fs-base); }
@media (min-width: 768px) { .pkg-terms__list { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); } }
.pkg-terms__usage p { margin-bottom: 0; }
.pkg-help {
  max-width: none; margin: var(--space-7) 0 0; padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-lg);
}
.pkg-help strong { margin-right: var(--space-1); }
.pkg-help a { font-weight: var(--fw-bold); }
.pkg-help a:active { opacity: 0.7; }

/* Qué contiene toda propuesta: el documento se arma con el scroll (app.js · [data-proposal]) */
.prop { position: relative; isolation: isolate; overflow: clip; }
.prop .halo { width: 640px; height: 640px; left: -320px; bottom: -280px; }
.prop__title { max-width: 720px; margin-bottom: var(--space-6); }
.prop__grid { display: grid; gap: var(--space-5); }
.prop__grid > * { min-width: 0; }
/* Celular: el documento se vuelve una barra fija de 8 segmentos */
.prop__doc {
  position: sticky; top: var(--header-h); z-index: 1;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-1);
  margin-inline: calc(var(--gutter) * -1); padding: var(--space-3) var(--gutter);
  background: var(--ink);
}
.prop__doc-bar,
.prop__row b { display: none; }
.prop__row { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.prop__row i {
  display: block; height: 100%; border-radius: inherit; background: var(--plum);
  transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease);
}
.prop__row.is-done i { transform: scaleX(1); }
.prop__row.is-active i { transform: scaleX(1); background: var(--mandarina); }
.prop__list { margin: 0; padding: 0; list-style: none; }
.prop__item {
  display: flex; gap: var(--space-4); align-items: baseline;
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.75rem);
  font-weight: var(--fw-bold); line-height: 1.25; letter-spacing: var(--tracking-tight);
  color: var(--surface);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.prop__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.prop__num { flex-shrink: 0; min-width: 2ch; font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: 0; }
html:not(.no-js) .prop__item { opacity: 0.35; }
html:not(.no-js) .prop__item.is-done { opacity: 0.7; }
html:not(.no-js) .prop__item.is-active { opacity: 1; transform: translateX(6px); }
.prop__item.is-active .prop__num { color: var(--mandarina); }
@media (min-width: 1024px) {
  .prop__grid { grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; }
  .prop__item { padding-block: var(--space-7); }
  /* Escritorio: una hoja de papel que se va llenando, fila por fila */
  .prop__doc {
    top: calc(var(--header-h) + var(--space-7));
    display: flex; flex-direction: column; gap: var(--space-4);
    margin: 0; padding: var(--space-6);
    border-radius: var(--radius-card); background: var(--surface);
  }
  .prop__doc-bar { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
  .prop__doc-bar img { width: auto; height: 20px; }
  .prop__doc-bar i { display: block; width: 45%; height: 10px; border-radius: 5px; background: var(--ink); }
  .prop__row { display: flex; align-items: center; gap: var(--space-4); height: auto; background: none; overflow: visible; }
  .prop__row b { display: block; flex-shrink: 0; width: 2ch; font-size: var(--fs-xs); color: var(--text-muted); }
  .prop__row i { position: relative; flex: 0 0 var(--w); height: 8px; border-radius: 4px; background: var(--surface-warm); overflow: hidden; transform: none; }
  .prop__row i::after {
    content: ""; position: absolute; inset: 0; background: var(--plum);
    transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease);
  }
  .prop__row.is-done i,
  .prop__row.is-active i { transform: none; background: var(--surface-warm); }
  .prop__row.is-done i::after { transform: scaleX(1); }
  .prop__row.is-active i::after { transform: scaleX(1); background: var(--mandarina); }
  .prop__row.is-active b { color: var(--mandarina); }
}

/* ---------- 20. Integrations ---------- */
/* Hero: tablero de conexiones. Cada cable es un span girado hacia el hub (app.js mide --len y --angle);
   se conecta con scaleX y el pulso viaja con translateX. Solo transform y opacity. Acento: Spark Pink. */
.int-hero__grid { align-items: center; }
@media (min-width: 1280px) {
  .int-hero__grid { grid-template-columns: 1fr 1.1fr; }
}
.plug { width: 100%; max-width: 600px; margin-inline: auto; }
.plug__board { position: relative; aspect-ratio: 5 / 4; margin-bottom: var(--space-6); }
.plug__node { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }

.plug__cable {
  position: absolute; left: 0; top: 0; width: var(--len, 0px); height: 1px;
  background: rgba(255, 255, 255, 0.2);
  transform-origin: 0 50%; transform: rotate(var(--angle, 0deg));
  transition: transform 700ms var(--ease) calc(var(--i, 0) * 70ms);
}
.plug.is-ready .plug__cable { transform: rotate(var(--angle, 0deg)) scaleX(0); }
.plug.is-ready.is-on .plug__cable { transform: rotate(var(--angle, 0deg)) scaleX(1); }
.plug__cable::after {
  content: ""; position: absolute; inset: 0; background: var(--mandarina);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.plug__node:hover .plug__cable::after,
.plug__node.is-lit .plug__cable::after { opacity: 1; }
.plug__dot {
  position: absolute; left: -4px; top: -3.5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mandarina); opacity: 0;
}
.plug__node.is-in .plug__dot { animation: plug-in 1100ms var(--ease) both; }
.plug__node.is-out .plug__dot { animation: plug-out 1100ms var(--ease) both; }
@keyframes plug-in {
  0% { opacity: 0; transform: translateX(0); } 15%, 80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--len)); }
}
@keyframes plug-out {
  0% { opacity: 0; transform: translateX(var(--len)); } 20%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(0); }
}

.plug__badge {
  position: absolute; left: -20px; top: -20px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.22); color: var(--surface);
  transition: transform var(--dur) var(--ease), opacity 500ms var(--ease) calc(var(--i, 0) * 70ms);
}
.plug__badge svg { width: 18px; height: 18px; fill: currentColor; }
.plug__badge::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid var(--mandarina); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.plug.is-ready .plug__badge { opacity: 0; transform: scale(0.7); }
.plug.is-ready.is-on .plug__badge { opacity: 1; transform: none; }
.plug.is-ready.is-on .plug__node:hover .plug__badge,
.plug.is-ready.is-on .plug__node.is-lit .plug__badge { transform: scale(1.1); }
.plug__node:hover .plug__badge::after,
.plug__node.is-lit .plug__badge::after { opacity: 1; }
.plug__node--sm .plug__badge { left: -16px; top: -16px; width: 32px; height: 32px; }
.plug__node--sm .plug__badge svg { width: 15px; height: 15px; }
.plug__label { display: none; }

.plug__hub {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  display: grid; place-content: center; justify-items: center; gap: var(--space-1);
  border-radius: 50%; background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.28);
  text-align: center;
}
.plug__hub img { width: 14px; height: auto; }
.plug__hub span { font-size: 0.625rem; font-weight: var(--fw-bold); line-height: 1.2; color: var(--surface); }
.plug__hub::before {
  content: ""; position: absolute; inset: -40%; z-index: -1; border-radius: 50%;
  background: rgba(106, 44, 130, 0.35);
}
.plug__hub::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid var(--mandarina); opacity: 0;
}
.plug__hub.is-busy::after { animation: plug-ring 1200ms var(--ease) 2; }
@keyframes plug-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }

@media (min-width: 768px) {
  .plug__badge { left: -24px; top: -24px; width: 48px; height: 48px; }
  .plug__badge svg { width: 20px; height: 20px; }
  .plug__node--sm .plug__badge { left: -18px; top: -18px; width: 36px; height: 36px; }
  .plug__label {
    display: block; position: absolute; left: 0; top: 30px; transform: translateX(-50%);
    font-size: var(--fs-xs); line-height: 1.2; color: var(--text-muted); white-space: nowrap;
  }
  .plug__node--sm .plug__label { top: 24px; }
  .plug__hub { width: 108px; height: 108px; margin: -54px 0 0 -54px; }
  .plug__hub img { width: 18px; }
  .plug__hub span { font-size: var(--fs-xs); }
}

/* Pasos del flujo de ejemplo: una process bar por paso que se llena en rosa */
.plug__steps {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 768px) { .plug__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plug__step { position: relative; padding-top: var(--space-3); font-size: var(--fs-xs); line-height: 1.4; color: var(--surface); }
.plug__step::before,
.plug__step::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; }
.plug__step::before { background: rgba(255, 255, 255, 0.16); }
.plug__step::after { background: var(--mandarina); transform-origin: 0 50%; }
.plug.is-ready .plug__step::after { transform: scaleX(0); transition: transform 1400ms linear; }
.plug.is-ready .plug__step span { opacity: 0.5; transition: opacity var(--dur) var(--ease); }
.plug.is-ready .plug__step.is-active::after,
.plug.is-ready .plug__step.is-done::after { transform: scaleX(1); }
.plug.is-ready .plug__step.is-active span,
.plug.is-ready .plug__step.is-done span { opacity: 1; }
.plug.is-ready .plug__step.is-reset::after { transition: none; }

/* Categorías: filtro + rejilla de píldoras (botones "Arma tu stack") */
.int-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
button.chip {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--ink);
  cursor: pointer; transition: transform var(--dur-fast) var(--ease);
}
button.chip::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--surface-warm); opacity: 0; transition: opacity var(--dur) var(--ease);
}
button.chip:hover { transform: translateY(-1px); }
button.chip:hover::before { opacity: 1; }
button.chip:active { transform: scale(0.97); }
button.chip:focus-visible { outline-offset: 3px; }
button.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: var(--fw-bold); }
button.chip[aria-pressed="true"]::before { opacity: 0; }
button.chip[aria-pressed="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mandarina); order: -1; }

.int-tap { margin: 0 0 var(--space-5); font-size: var(--fs-sm); color: var(--ink); }
.int-groups { border-top: 1px solid var(--line); }
.int-group { display: grid; gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.int-group[hidden] { display: none; }
.int-group h3 { margin: 0; font-size: var(--fs-h3); }
.int-group.is-entering { animation: int-in 450ms var(--ease) both; }
@keyframes int-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .int-group { grid-template-columns: 260px 1fr; gap: var(--space-6); padding-block: var(--space-6); }
  .int-group h3 { padding-top: var(--space-3); }
}
.int-group__tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.int-group__tools .tool-pill { margin: 0; padding-inline: var(--space-4); font-family: inherit; cursor: pointer; }
.int-group__tools .tool-pill:active { transform: scale(0.97); }
.int-group__tools .tool-pill:focus-visible { outline-offset: 3px; }
.tool-pill::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1.5px solid var(--mandarina); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none;
}
.tool-pill[aria-pressed="true"] { background: var(--surface); }
.tool-pill[aria-pressed="true"]::after { opacity: 1; }
.tool-pill__mark { position: relative; width: 14px; height: 14px; margin-left: var(--space-1); }
.tool-pill .tool-pill__mark svg {
  position: absolute; inset: 0; width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.tool-pill .tool-pill__plus { color: var(--text-muted); }
.tool-pill .tool-pill__tick { color: var(--plum); opacity: 0; transform: scale(0.5); }
.tool-pill[aria-pressed="true"] .tool-pill__plus { opacity: 0; transform: rotate(90deg) scale(0.5); }
.tool-pill[aria-pressed="true"] .tool-pill__tick { opacity: 1; transform: none; }

/* Bandeja flotante "Tu stack" (flotante → lleva sombra); aparece mientras la rejilla está en pantalla */
/* Celular: a la izquierda, dejando libre el botón del agente (56px) a la derecha; desde 768px, centrada */
.stack-tray {
  position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 40;
  width: calc(100% - 56px - var(--space-4) * 3);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  background: var(--ink); color: var(--surface); border-radius: var(--radius-btn); box-shadow: var(--shadow-float);
  opacity: 0; transform: translateY(calc(100% + var(--space-5))); pointer-events: none;
  transition: transform 400ms var(--ease), opacity 400ms var(--ease);
}
.stack-tray.is-shown { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 768px) {
  .stack-tray { left: 50%; width: 520px; transform: translate(-50%, calc(100% + var(--space-5))); }
  .stack-tray.is-shown { transform: translate(-50%, 0); }
}
.stack-tray__hub {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--plum);
}
.stack-tray__hub img { width: 9px; height: auto; filter: brightness(0) invert(1); }
.stack-tray__logos { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.stack-tray__logos:empty { display: none; }
.stack-tray__logos li {
  display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 50%;
  background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.625rem; font-weight: var(--fw-bold); color: var(--surface);
}
.stack-tray__logos li:first-child { margin-left: 0; }
.stack-tray__logos li.is-new { animation: tray-pop 350ms var(--ease) both; }
@keyframes tray-pop { from { opacity: 0; transform: translateY(-14px) scale(0.6); } to { opacity: 1; transform: none; } }
.stack-tray__logos svg { width: 13px; height: 13px; fill: currentColor; }
.stack-tray__status { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-xs); line-height: 1.35; color: var(--surface); }

/* ¿No está en la lista? (usa .closing de la Home) */
.int-closing p { max-width: 40rem; }
.int-closing .closing__legal { max-width: 34rem; margin: var(--space-6) auto 0; font-size: var(--fs-xs); opacity: 0.8; }

/* Puntos de partida por industria: tarjetas con entrada escalonada */
.int-industries { margin: 0; padding: 0; list-style: none; }
.int-industries .card p { margin: 0; }
.int-industries .reveal:nth-child(3n + 2) { transition-delay: 80ms; }
.int-industries .reveal:nth-child(3n + 3) { transition-delay: 160ms; }

/* ---------- 21. How we work ---------- */
/* Hero + timeline en la misma sección Ink. Reutiliza .steps/.step de la Home en una sola columna
   (data-steps-mode="line"): riel vertical que se llena con el scroll (--rail, app.js) y un punto por paso.
   A la derecha, desde 1024px, el escenario fijo con "lo que te llevas" (4 demos [data-sdemo]). */
.hww-hero__head { max-width: 860px; margin-bottom: var(--space-8); }
.hww-hero__head h1 { margin-bottom: 0; }
.hww-hero__bars { max-width: 280px; margin-top: var(--space-6); }
.hww-hero__bars > span { background: rgba(255, 255, 255, 0.12); }

.hww { display: grid; gap: var(--space-7); }
.hww__line { position: relative; padding-left: var(--space-6); }
.hww__rail { position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.hww__rail i { display: block; height: 100%; background: var(--plum); transform-origin: top; transform: scaleY(var(--rail, 1)); }

.steps.steps--line { grid-template-columns: 1fr; gap: var(--space-5); margin: 0; }
.steps--line .step::before {
  content: ""; position: absolute; left: calc(var(--space-6) * -1 + 1px); top: var(--space-6);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); border: 2px solid rgba(255, 255, 255, 0.3);
}
.steps--line.is-live .step.is-done::before { background: var(--plum); border-color: var(--plum); }
.steps--line.is-live .step.is-current::before { background: var(--mandarina); border-color: var(--mandarina); }
.steps--line .step:focus-visible { outline-color: var(--mandarina); }
.steps--line .step__num { display: flex; align-items: baseline; gap: var(--space-3); color: var(--mandarina); }
.step__dur { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-muted); }
.hww__slot { margin-top: var(--space-5); }
.hww__slot:empty { display: none; }

.hww__stage { display: none; }
@media (min-width: 1024px) {
  .hww { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
  .steps.steps--line { gap: var(--space-9); }
  .hww__stage { display: grid; gap: var(--space-5); position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .hww.is-live .hww__stage { gap: 0; }
  .hww.is-live .hww__stage .hww-panel {
    grid-area: 1 / 1; opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none;
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  }
  .hww.is-live .hww__stage .hww-panel.is-current { opacity: 1; transform: none; pointer-events: auto; }
}

/* Paneles */
.hww-panel .sdemo__title svg { width: 16px; height: 16px; stroke-width: 1.5; color: var(--plum); }
.hww-panel .sdemo__scene { background: var(--surface-warm); }

/* 1 · Mapa del proceso */
.hww-map { display: grid; gap: var(--space-5); padding: var(--space-5) var(--space-4); }
.hww-map__nodes { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.hww-map__node {
  position: relative; display: flex; align-items: center; gap: var(--space-3); margin-left: var(--space-5);
  padding: var(--space-2) var(--space-3); min-height: 44px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  font-size: var(--fs-sm); color: var(--ink);
}
.hww-map__node::before {
  content: ""; position: absolute; left: calc(var(--space-5) * -1); top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--plum);
}
.hww-map__node:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--space-5) * -1 + 4px); top: calc(50% + 5px);
  width: 2px; height: calc(100% + var(--space-3) - 10px); background: var(--line);
}
.hww-map__node em {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto;
  padding: 2px var(--space-3); border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--mandarina) 14%, var(--surface));
  font-size: var(--fs-xs); font-style: normal; font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap;
}
.hww-map__node em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mandarina); }
.hww-map__node.is-hand::before { background: var(--mandarina); }
.hww-est { display: grid; gap: var(--space-3); }
.hww-est__row { display: grid; gap: var(--space-1); margin: 0; font-size: var(--fs-xs); color: var(--ink); }
.hww-est__row i { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.hww-est__row i::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px;
  background: var(--plum); transform-origin: left; transition: transform 900ms var(--ease) 150ms;
}
.sdemo.is-animated .hww-est__row i::before { transform: scaleX(0); }
.sdemo.is-animated .hww-est__row.is-shown i::before { transform: none; }

/* 2 · Prototipo (chat del motor) */
.hww-panel .sdemo__chat { min-height: 15rem; }

/* 3 · En vivo con tu equipo */
.hww-panel .hww-rules { border-top: 0; }
.hww-dash { padding: 0 var(--space-4) var(--space-5); }
.hww-dash p { margin: 0 0 var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink); }
.hww-dash__cols {
  display: flex; align-items: flex-end; gap: var(--space-2); height: 80px; padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.hww-dash__cols i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--plum); transform-origin: bottom; transition: transform 700ms var(--ease); }
.sdemo.is-animated .hww-dash__cols i { transform: scaleY(0); }
.sdemo.is-animated .hww-dash.is-shown .hww-dash__cols i { transform: none; }
.hww-dash__cols i:nth-child(2) { transition-delay: 60ms; }
.hww-dash__cols i:nth-child(3) { transition-delay: 120ms; }
.hww-dash__cols i:nth-child(4) { transition-delay: 180ms; }
.hww-dash__cols i:nth-child(5) { transition-delay: 240ms; }
.hww-dash__cols i:nth-child(6) { transition-delay: 300ms; }

/* 4 · Reporte mensual */
.hww-report { display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-4); }
.hww-report__row { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.hww-report__row > p:first-child { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink); }
.hww-report__ticks { display: flex; gap: var(--space-1); }
.hww-report__ticks i { flex: 1; height: 6px; border-radius: 3px; background: var(--plum); transform-origin: left; transition: transform 400ms var(--ease); }
.sdemo.is-animated .hww-report__ticks i { transform: scaleX(0); }
.sdemo.is-animated .is-shown .hww-report__ticks i { transform: none; }
.hww-report__ticks i:nth-child(2) { transition-delay: 70ms; }
.hww-report__ticks i:nth-child(3) { transition-delay: 140ms; }
.hww-report__ticks i:nth-child(4) { transition-delay: 210ms; }
.hww-report__ticks i:nth-child(5) { transition-delay: 280ms; }
.hww-report__ticks i:nth-child(6) { transition-delay: 350ms; }
.hww-report__ticks i:nth-child(7) { transition-delay: 420ms; }
.hww-pair { display: grid; gap: var(--space-2); }
.hww-pair__bar { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: var(--space-3); }
.hww-pair__bar b { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--ink); }
.hww-pair__bar::after {
  content: ""; width: var(--w); height: 10px; border-radius: 5px; transform-origin: left;
  transition: transform 900ms var(--ease) 150ms;
}
.hww-pair__bar--est::after { background: var(--text-muted); }
.hww-pair__bar--act::after { background: var(--plum); transition-delay: 450ms; }
.sdemo.is-animated .hww-pair__bar::after { transform: scaleX(0); }
.sdemo.is-animated .is-shown .hww-pair__bar::after { transform: none; }
.hww-report__change { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); color: var(--ink); }
.hww-report__change::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mandarina); }

/* Tus datos: bento de 5 (la tarjeta principal lleva el título) */
.bento--data .bento__card--lead h2 { margin: 0; font-size: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem); letter-spacing: var(--tracking-tight); line-height: 1.15; color: var(--surface); max-width: 14ch; }
.bento--data .bento__card p { font-size: var(--fs-base); }
@media (min-width: 1024px) {
  .bento.bento--data { grid-template-areas: "a b c" "a d e"; }
  .bento--data > :nth-child(5) { grid-area: e; }
  .bento--data .bento__card--lead { min-height: 22rem; }
}
/* En la línea de tiempo el detalle se ve siempre (solo se atenúa el paso entero) */
.steps--line.is-live .step__more { opacity: 1; transform: none; }
/* El halo recorta con clip (no hidden) para que el escenario fijo pueda pegarse al hacer scroll */
.hww-hero.has-halo { overflow: clip; }
/* Los paneles apilados toman el alto del más alto: el fondo Mist llena el sobrante */
.hww-panel { display: flex; flex-direction: column; }
.hww-panel .sdemo__scenes { flex: 1; background: var(--surface-warm); }

/* How we work · pestañas por servicio (reutiliza .chip de Integrations, versión sobre Ink) */
.hww-tabs { grid-column: 1 / -1; margin-bottom: 0; }
.section--ink button.chip { background: transparent; border-color: rgba(255, 255, 255, 0.24); color: var(--surface); }
.section--ink button.chip::before { background: rgba(255, 255, 255, 0.08); }
.section--ink button.chip[aria-pressed="true"] { background: var(--surface); border-color: var(--surface); color: var(--ink); }
.section--ink button.chip:focus-visible { outline-color: var(--mandarina); }

/* Línea de cada paso según la pestaña (sin JS se ven las tres, cada una con su nombre) */
.step__tabs { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.step__tab {
  margin: 0; padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--mandarina); border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: rgba(255, 255, 255, 0.05); font-size: var(--fs-sm); line-height: 1.5; color: var(--surface);
}
.step__tab-name { display: block; margin-bottom: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); }
.hww.is-live .step__tab-name {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.step__tab.is-entering,
.step__off-note.is-entering { animation: int-in 400ms var(--ease) both; }
.step__off-note { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--surface); }
.step__off-note::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mandarina); }
.step__notice {
  margin: var(--space-5) 0 0; padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-card);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--surface-warm);
}
[data-tab][hidden] { display: none; }

/* Paso 0: llamada gratis (sin panel propio; comparte el del paso 1) */
.steps--line .step--zero .step__bar { opacity: 0.6; }

/* Audit: pasos 2 y 3 apagados (y sus paneles) */
.steps.is-live .step.is-off { opacity: 0.3; }
.steps.is-live .step.is-off.is-current { opacity: 0.65; transform: none; }
.steps.is-live .step.is-off.is-current::after { opacity: 0; }
.steps--line.is-live .step.is-off.is-current::before { background: var(--ink); border-color: var(--mandarina); }
.hww-panel.is-off,
.hww.is-live .hww__stage .hww-panel.is-current.is-off { opacity: 0.4; }

/* Empieza donde tenga sentido: 3 tarjetas-enlace (bento con luz que sigue al cursor) */
.bento--paths .bento__card { min-height: 14rem; }
.bento__card--link { text-decoration: none; transition: transform var(--dur) var(--ease); }
.bento__card--link h3 { color: var(--ink); font-size: var(--fs-h3); }
.bento__card--link:hover { transform: translateY(-3px); color: var(--ink); }
.bento__card--link:active { transform: translateY(0) scale(0.99); }
.bento__card--link:focus-visible { outline: 2px solid var(--mandarina); outline-offset: 3px; }
.bento__go {
  display: grid; place-items: center; width: 40px; height: 40px; margin-top: auto;
  border-radius: 50%; background: var(--surface-warm); color: var(--plum);
  transition: transform var(--dur) var(--ease);
}
.bento__go svg { width: 18px; height: 18px; stroke-width: 1.5; }
.bento__card--link:hover .bento__go,
.bento__card--link:focus-visible .bento__go { transform: translateX(4px); }
@media (min-width: 768px) {
  .bento.bento--paths { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: none; }
  .bento--paths > :nth-child(n) { grid-area: auto; }
}

/* Services · nota del método bajo el hero */
.svc-hero__note {
  max-width: 46rem; margin: var(--space-7) 0 0; padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-base); color: var(--surface-warm);
}
/* El selector queda fijo bajo el header mientras se recorren los pasos */
.hww-tabs {
  position: sticky; top: var(--header-h); z-index: 5;
  margin-inline: calc(var(--gutter) * -1); padding: var(--space-3) var(--gutter);
  background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 1024px) {
  .hww__stage { top: calc(var(--header-h) + 64px + var(--space-6)); }
}
/* Celular: una sola fila de pestañas que se desliza (no ocupa dos filas fijas) */
@media (max-width: 767px) {
  .hww-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hww-tabs::-webkit-scrollbar { display: none; }
  .hww-tabs button.chip { flex: none; }
}

/* ---------- 17. About ---------- */
/* Hero: propósito en Light grande; puntos que fluyen detrás (app.js · [data-about-flow]) */
.about-hero { padding-block: var(--space-9); }
.about-hero .halo {
  width: 820px; height: 820px; top: -380px; left: -320px;
}
.about-hero__title {
  max-width: 21ch; margin: 0;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem);
  font-weight: var(--fw-regular); line-height: 1.12; letter-spacing: var(--tracking-tight);
}
/* Entrada palabra por palabra (app.js envuelve cada palabra en .w) */
.about-hero__title.is-split .w,
.book-hero__title.is-split .w { display: inline-block; opacity: 0; transform: translateY(0.45em); }
.about-hero__title.is-in .w,
.book-hero__title.is-in .w {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: calc(var(--i) * 45ms);
}
.about-hero__bars { max-width: 280px; margin-top: var(--space-7); }
.about-hero__bars > span { background: rgba(255, 255, 255, 0.12); }
.about-flow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.about-flow i {
  position: absolute; left: 0; top: 0;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; background: var(--surface);
  will-change: transform, opacity;
}
.about-flow i.is-brand { background: var(--plum); }
@media (min-width: 1024px) {
  .about-hero { padding-block: var(--space-10); }
}

/* Tres ideas: escena fija con scroll (app.js añade .is-live y marca la idea activa) */
.ideas { --stage-h: min(clamp(170px, 30vh, 330px), 58vw); position: relative; }
.ideas__pin { padding-block: var(--space-8); }
.ideas__inner { display: grid; gap: var(--space-5); }
.ideas__title { margin: 0; text-align: center; }
.ideas__stage { display: flex; align-items: center; justify-content: center; height: var(--stage-h); }
.ideas__loop { position: relative; flex-shrink: 0; width: var(--stage-h); aspect-ratio: 2 / 1; transform: rotate(90deg); }
.ideas__loop svg { display: block; width: 100%; height: auto; overflow: visible; }
.ideas__track { fill: none; stroke: var(--line); stroke-width: 2; }
.ideas__path { fill: none; stroke: var(--plum); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.ideas__marks,
.ideas__labels { opacity: 0; }
.ideas__mark-dot { fill: var(--ink); }
.ideas__mark-ring { fill: none; stroke: var(--mandarina); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ideas__mark.is-hit .ideas__mark-dot { fill: var(--mandarina); }
.ideas__mark.is-hit .ideas__mark-ring { animation: ideas-ping 900ms var(--ease); }
@keyframes ideas-ping { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.8); } }
.ideas__mind circle { opacity: 0; }
.ideas__mind .is-pink { fill: var(--mandarina); }
.ideas__labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ideas__labels li {
  position: absolute; left: var(--x); top: calc(100% + 6px);
  font-size: 9px; font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap;
  transform: translateX(-50%);
}
.ideas__labels li.is-hit { color: var(--plum); }
.ideas__ticks { display: none; }
.ideas__cols { display: grid; gap: var(--space-6); }
.idea h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.idea p { margin: 0; max-width: 46ch; }
.idea__rule { display: block; height: 3px; margin-bottom: var(--space-4); border-radius: 2px; background: var(--line); overflow: hidden; }
.idea__rule i { display: block; height: 100%; transform-origin: left; }
.idea--violet .idea__rule i { background: var(--plum); }
.idea--mix .idea__rule i { background: var(--plum); }
.idea--blue .idea__rule i { background: var(--plum); }
.idea__btn {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; letter-spacing: inherit;
  cursor: pointer; border-radius: 2px;
  transition: opacity var(--dur-fast) var(--ease);
}
.idea__btn:hover { color: var(--plum); }
.idea__btn:active { opacity: 0.7; }
.idea__btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
@media (min-width: 768px) {
  .ideas__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Con JS: escena fija durante tres pantallas */
.ideas.is-live { height: 330vh; }
.ideas.is-live .ideas__pin {
  position: sticky; top: var(--header-h);
  display: flex; align-items: center;
  height: calc(100vh - var(--header-h)); padding-block: var(--space-5);
  overflow: hidden;
}
.ideas.is-live .ideas__inner { width: 100%; }
.ideas.is-live .idea { opacity: 0.35; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ideas.is-live .idea.is-active { opacity: 1; }
@media (max-width: 767px) {
  .ideas.is-live .ideas__inner { gap: var(--space-4); }
  .ideas.is-live .ideas__ticks { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
  .ideas__ticks span { position: relative; width: 40px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; cursor: pointer; }
  .ideas__ticks i { display: block; height: 100%; background: var(--plum); transform: scaleX(0); transform-origin: left; }
  .ideas__ticks span:nth-child(2) i { background: var(--plum); }
  .ideas__ticks span:nth-child(3) i { background: var(--plum); }
  .ideas.is-live .idea__rule { display: none; }
  .ideas.is-live .idea { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); }
  .ideas.is-live .idea.is-active { opacity: 1; transform: none; }
}

/* Símbolo: bloque Mist con borde violeta; el isotipo se dibuja de abajo hacia arriba */
.symbol {
  display: grid; gap: var(--space-6); align-items: center;
  padding: var(--space-6) var(--space-5);
  border-left: 4px solid var(--plum); border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--surface-warm);
}
.symbol__mark { justify-self: center; perspective: 700px; }
.symbol__draw { position: relative; width: 112px; overflow: hidden; transition: transform 300ms var(--ease); }
.symbol__draw img { display: block; width: 100%; height: auto; }
.symbol__cover { position: absolute; inset: -2px; background: var(--surface-warm); }
.symbol.is-drawn .symbol__cover { transform: translateY(-102%); transition: transform 1800ms cubic-bezier(0.65, 0, 0.35, 1); }
.symbol__text p {
  max-width: 44ch; margin: 0 0 var(--space-5);
  font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.625rem); line-height: 1.5; color: var(--ink);
}
.symbol__replay::before { background: var(--surface); }
@media (min-width: 768px) {
  .symbol { grid-template-columns: auto 1fr; gap: var(--space-8); padding: var(--space-7) var(--space-8); }
  .symbol__draw { width: 150px; }
}

/* Cómo decidimos: los principios son las pestañas del motor de demos (lista vertical, acento rosa) */
.decide { display: grid; gap: var(--space-6); border: 0; background: none; overflow: visible; }
.decide__head h2 { margin-bottom: var(--space-5); }
.decide .sdemo__tabs { flex-direction: column; gap: 0; padding: 0; border-bottom: 1px solid var(--line); overflow: visible; }
.decide .sdemo__tab {
  width: 100%; min-height: 0;
  padding: var(--space-4) var(--space-2) var(--space-4) var(--space-5);
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink);
  font-size: var(--fs-lg); font-weight: var(--fw-regular); line-height: 1.45; text-align: left; white-space: normal;
}
.decide .sdemo__tab::before {
  content: ""; position: absolute; left: 0; top: var(--space-4); bottom: var(--space-4);
  width: 3px; border-radius: 2px; background: var(--mandarina);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
.decide .sdemo__tab:hover { color: var(--ink); transform: translateX(4px); }
.decide .sdemo__tab:active { transform: translateX(2px); }
.decide .sdemo__tab:focus-visible { outline-offset: -2px; }
.decide .sdemo__tab[aria-selected="true"] { background: transparent; color: var(--ink); font-weight: var(--fw-bold); }
.decide .sdemo__tab[aria-selected="true"]::before { transform: scaleY(1); }
.decide .sdemo__tab-progress { height: 2px; background: var(--mandarina); }
.decide__card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.decide .sdemo__chat { justify-content: flex-start; min-height: 200px; background: var(--surface); }
@media (min-width: 1024px) {
  .decide { grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; }
  .decide__card { margin-top: var(--space-2); }
}

/* ---------- Páginas simples: FAQ, legales y 404 ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.notfound { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
.page-hero h1 { max-width: 20ch; margin-bottom: 0; }
.page-hero .lead { margin: var(--space-4) 0 0; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--on-dark-muted); }

.legal { max-width: 68ch; }
.legal h2 { margin: var(--space-7) 0 var(--space-3); font-size: var(--fs-h3); }
.legal h2:first-of-type { margin-top: var(--space-6); }
.legal p, .legal li { color: var(--ink-muted); }
.legal strong { color: var(--ink); }
.legal ul { margin-bottom: var(--space-4); }
.legal li + li { margin-top: var(--space-2); }
.legal a { color: var(--plum-text); text-decoration: underline; text-underline-offset: 3px; transition: opacity var(--dur-fast) var(--ease); }
.legal a:hover { opacity: 0.75; }
.legal a:active { opacity: 0.6; }

.notfound .lead { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; max-width: 44rem; }
.notfound__actions { margin-top: var(--space-6); }
.notfound__en { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255, 248, 239, 0.16); }
.notfound__en h2 { margin-bottom: var(--space-2); font-size: var(--fs-h4); }
.notfound__en p { margin-bottom: var(--space-3); }
.notfound__en .cluster { gap: var(--space-5); }