/* Base — landing. Línea sobria y luminosa: fondo blanco, tinta casi negra, titulares de peso medio, botones
   rectangulares negros, secciones separadas por líneas finas y el producto como protagonista. El color lo ponen los
   datos (opciones, etiquetas) y la marca (bermellón). Instrument Sans para titulares y texto, JetBrains Mono para
   notas y cifras (OFL, en fonts/). Solo modo claro. */

@font-face { font-family: "Instrument Sans"; src: url(../fonts/instrument-sans-2ee17598a98d8a59.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-400-14425ba9c695763c.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-500-cb182feeed4d798f.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* Escala, colores y medidas tomados de la guía de diseño de la web de referencia (medidos en su CSS calculado):
   tinta #161616 / #181d26, texto #333840, texto débil al 70 %, líneas cálidas #e0dcdb, titulares 58,5 / 48 px de
   peso 550, botones de 4 px de radio con 16 px de peso 650, navegación de 14 px de peso 550. Tipografía propia
   (Instrument Sans, OFL) en lugar de sus fuentes con licencia. */
:root {
  color-scheme: light;
  --bg: #fff;
  --bg2: #f5f4f2;
  --panel: #faf9f8;
  --surface: #fff;
  --ink: #161616;
  --ink-nav: #181d26;
  --text: #333840;
  --muted: #161616b3;
  --muted2: #040e20b0;
  --line: #e0dcdb;
  --line2: #0114351f;
  --acc: #ff5b2e;
  --acc-ink: #c2370d;
  --acc-soft: #ff5b2e24;
  --link: #0768f8;
  --mark: transparent;
  --ok: #006400;
  --sombra-s: 0 0 1px #00000052, 0 0 2px #00000014, 0 1px 3px #00000014;
  --sombra-m: 0 0 1px #00000052, 0 0 3px #0000001c, 0 1px 4px #0000001f;
  --sombra-l: 0 0 1px #00000052, 0 2px 6px #00000014, 0 24px 48px -16px #0000002e;
  --r: 6px;
  --r-ventana: 10px;
  --display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .72, .25, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ancho: 1280px;
  --margen: clamp(18px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--acc-soft); }

.mono { font-family: var(--mono); letter-spacing: -.02em; }
.tenue { color: var(--muted2); }
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--bg); font-weight: 600; }
.saltar:focus { top: 12px; }
mark { color: inherit; background: none; }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 37px; padding: 0 16px;
  border-radius: 4px; border: 1px solid transparent; font-size: 14px; font-weight: 550; letter-spacing: .28px; white-space: nowrap;
  transition: background .2s, box-shadow .2s, border-color .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn-tinta { background: var(--ink-nav); border-color: var(--ink-nav); color: #fff; }
.btn-tinta:hover { background: #000; border-color: #000; }
.btn-claro { background: transparent; border-color: var(--ink-nav); color: var(--ink-nav); }
.btn-claro:hover { background: var(--bg2); }
.btn-grande { height: 47px; padding: 0 24px; font-size: 16px; font-weight: 650; letter-spacing: 0; }
.btn-grande.btn-tinta { background: var(--ink); border-color: var(--ink); }
.btn-grande.btn-claro { border-color: var(--ink); color: var(--ink); }
.btn svg { width: 16px; height: 16px; }

/* ── Navegación ── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 64px; padding: 0 var(--margen);
  display: flex; align-items: center; gap: 28px; background: var(--bg); transition: box-shadow .3s;
}
.nav.con-fondo {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line);
}
.marca { display: inline-flex; align-items: center; gap: 8px; font: 650 20px/1 var(--display); letter-spacing: -.02em; color: var(--ink-nav); }
.marca img { width: 30px; height: 30px; transition: transform .35s var(--ease-out); }
.marca:hover img { transform: rotate(-8deg) scale(1.06); }
.nav-links { margin-left: 8px; margin-right: auto; display: flex; gap: 24px; font-size: 14px; font-weight: 550; letter-spacing: .14px; color: var(--ink-nav); }
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: var(--link); }
.nav-acciones { display: flex; align-items: center; gap: 8px; }
.nav-entrar { font-size: 14px; font-weight: 550; letter-spacing: .14px; color: var(--ink-nav); padding: 0 8px; height: 37px; display: inline-flex; align-items: center; transition: color .2s; }
.nav-entrar:hover { color: var(--link); }

/* ── Hero estilo Trail Code (mantiene nuestra línea clara con su estructura y efecto) ── */
.hero { position: relative; padding: 104px var(--margen) 0; text-align: left; isolation: isolate; }
.hero > .escenario, .hero > .datos-fila { margin-inline: calc(-1 * var(--margen)); }

/* Datos del producto: una fila de celdas con líneas finas bajo el vídeo. */
.datos-fila {
  display: grid; grid-template-columns: repeat(6, 1fr); padding: 0; margin-bottom: 0; list-style: none; border-bottom: 1px solid var(--line);
}
.datos-fila li { padding: 26px 16px; text-align: center; border-right: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.datos-fila li:last-child { border-right: 0; }
.datos-fila b { display: block; font: 550 22px/1.15 var(--display); color: var(--ink); margin-bottom: 4px; }

#hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}

.hero-top-row { max-width: var(--ancho); margin: 0 auto 20px; }
.tc-note-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px;
  border-radius: 999px; background: var(--bg2); border: 1px solid var(--line);
  font-size: 13px; font-weight: 550; color: var(--muted); text-decoration: none;
  position: relative; z-index: 1; transition: color .2s, border-color .2s;
}
.tc-note-pill:hover { color: var(--ink); border-color: var(--border-strong); }
.tc-note-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); display: inline-block; }

.hero-split {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  align-items: start; gap: 64px; position: relative; z-index: 1;
}

.hero-main-title {
  margin: 0; font: 600 clamp(36px, 4.2vw, 54px)/1.1 var(--display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance;
}

/* Palabra que cambia: una pastilla en línea con la tipografía del titular (misma línea base y tamaño), con el logo del agente a su izquierda. */
.tc-switch {
  display: inline-block; position: relative; vertical-align: baseline; white-space: nowrap;
  color: var(--acc); background: var(--acc-soft); padding: 0.02em 0.3em 0.06em 0.26em; margin-inline: 0.04em;
  border-radius: 0.2em; border: 1px solid rgba(255, 91, 46, 0.28); line-height: 1.04;
}
.tc-switch-mark { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tc-switch-mark svg, .tc-switch-mark img { width: 20px; height: 20px; object-fit: contain; }
.hero-main-title .tc-switch-mark { width: 0.8em; height: 0.8em; vertical-align: -0.06em; margin-right: 0.14em; }
.hero-main-title .tc-switch-mark svg, .hero-main-title .tc-switch-mark img { width: 100%; height: 100%; }
/* El logo de OpenMasu lleva margen propio en su lienzo: se amplía para igualar el peso visual de los logos de los agentes. */
.tc-switch-mark img { transform: scale(1.3); }
.tc-switch-word { position: relative; display: inline; font-weight: 600; }
.tc-switch-word::after {
  content: ""; display: inline-block; width: 0.05em; min-width: 2px; height: 0.82em; vertical-align: -0.04em; margin-left: 0.06em;
  background: currentColor; animation: tc-beam 1s infinite;
}
@keyframes tc-beam { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }

.hero-sub-text { margin: 20px 0 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--muted); max-width: 580px; }

.hero-right-col { display: flex; flex-direction: column; gap: 24px; padding-top: 6px; }
.hero-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; font-weight: 550; color: var(--text-2); }
.hero-bullets li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.hero-bullets li span.sq { width: 7px; height: 7px; border: 1.5px solid var(--acc); border-radius: 1px; display: inline-block; flex-shrink: 0; margin-top: 6px; }

.hero-registro { align-self: flex-start; }
.hero-o { margin: -8px 0 -12px; font-size: 13px; color: var(--muted); }
.tc-setup {
  display: inline-flex; align-items: stretch; height: 46px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line2); border-radius: 6px; position: relative; align-self: flex-start;
}
.tc-setup-main {
  padding: 0 20px; font: 600 14px var(--sans); color: inherit; background: transparent; border: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s; white-space: nowrap;
  border-radius: 6px 0 0 6px;
}
.tc-setup-main:hover { background: rgba(0, 0, 0, 0.04); }
.tc-setup-pick {
  padding: 0 16px; font: 550 14px var(--sans); color: inherit; background: transparent; border: 0;
  border-left: 1px solid var(--line2) !important; cursor: pointer; display: inline-flex;
  align-items: center; gap: 8px; transition: background .15s; white-space: nowrap;
  border-radius: 0 6px 6px 0;
}
.tc-setup-pick:hover { background: rgba(0, 0, 0, 0.04); }
.tc-setup-pick svg.agent-icon { width: 17px; height: 17px; }

.tc-setup-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px; background: #ffffff;
  border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  padding: 6px; display: none; flex-direction: column; gap: 3px; z-index: 60;
}
.tc-setup-menu.open { display: flex; }
.tc-setup-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0;
  border-radius: 6px; background: transparent; font: 550 14px var(--sans); color: var(--text);
  text-align: left; cursor: pointer; transition: background .15s, color .15s;
}
.tc-setup-menu button:hover, .tc-setup-menu button.active { background: var(--surface-2); color: var(--ink); }
.tc-setup-menu button svg { width: 18px; height: 18px; flex-shrink: 0; }
.hero-github-action {
  display: inline-flex; align-items: center; gap: 8px; font: 550 13px var(--sans); color: var(--muted);
  text-decoration: none; transition: color .2s; align-self: flex-start;
}
.hero-github-action:hover { color: var(--ink); }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
  .tc-setup { width: 100%; align-self: stretch; }
  .tc-setup-main { flex: 1; justify-content: center; }
}

/* ── Ventana (marco común) ── */
.ventana {
  position: relative; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-ventana);
  box-shadow: var(--sombra-l); overflow: hidden; text-align: left;
}
.ventana-barra {
  display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px; font-size: 12.5px; color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.ventana-barra > i { width: 11px; height: 11px; border-radius: 50%; background: var(--line2); }
.ventana-barra > span { margin-left: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ventana-barra b { color: var(--ink); font-weight: 500; }
.ventana-barra .local { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--ok); }
.ventana-barra .local::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Banda del producto: a lo ancho, con líneas arriba y abajo y un cielo cálido detrás de la ventana. */
.escenario {
  position: relative; margin-top: 56px; padding: 48px var(--margen); border-block: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 15% 10%, #ffe1d2 0, transparent 60%),
    radial-gradient(55% 75% at 85% 0%, #dbe8ff 0, transparent 60%),
    radial-gradient(70% 90% at 50% 110%, #fff1c9 0, transparent 60%),
    linear-gradient(180deg, #f7f4ee, #fbfaf7);
}
/* ── Vídeo del hero ── */
.hero-video {
  max-width: var(--ancho); margin: 0 auto; display: block;
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: var(--r-ventana);
  box-shadow: var(--sombra-l);
  border: 1px solid var(--line2);
  background: #000;
}
.enlace { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; }

/* ── Bloques de dos columnas ── */
.bloque {
  position: relative; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 104px var(--margen);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: center;
}
.bloque::before, .seccion::before, .cierre::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; transform: translateX(-50%); background: var(--line); }
.bloque-inverso > .bloque-texto { order: 1; }
.etiqueta { margin: 0 0 14px; font: 550 14px/1.35 var(--sans); letter-spacing: .14px; color: var(--muted); }
.etiqueta::first-letter, .pie-columnas .mono::first-letter { text-transform: uppercase; }
.bloque h2, .seccion h2 {
  margin: 0 0 18px; font: 550 clamp(32px, 3.4vw, 48px)/1.15 var(--display); letter-spacing: -.005em; color: var(--ink); text-wrap: balance;
}
.bloque p, .seccion-sub { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--muted); max-width: 580px; text-wrap: pretty; }
.bloque p + p { margin-top: 14px; }
.bloque p b, .seccion-sub b { color: var(--ink); font-weight: 600; }
.vinetas { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 28px 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.vinetas li::before { content: "›"; color: var(--acc-ink); margin-right: 8px; font-weight: 500; }
.pronto {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 500 10.5px var(--mono);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line2); white-space: nowrap;
}
.ya { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.escritorio { color: var(--ink-nav); border: 1px solid var(--line); background: var(--panel); }

/* Secciones centradas */
.seccion { position: relative; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 104px var(--margen); text-align: center; }
.seccion-sub { margin: 0 auto; }

/* ── Vistas ── */
.vistas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: var(--ancho); margin: 54px auto 0; padding: 0; list-style: none; text-align: left; }
.vista {
  position: relative; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line2);
  transition: border-color .2s, box-shadow .3s;
}
.vista:hover { border-color: var(--ink); box-shadow: var(--sombra-m); }
.vista-dibujo { height: 112px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; position: relative; }
.vista h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 2px 4px; font: 550 16px var(--sans); color: var(--ink); }
.vista p { margin: 0 2px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.vistas-nota { margin: 26px auto 0; font-size: 14px; color: var(--muted); }
.vistas-nota .pronto { vertical-align: 1px; margin: 0 2px; }
.vistas-nota b { color: var(--ink); font-weight: 550; }
/* Dibujos de cada vista: solo CSS */
.d-rejilla { background-image: linear-gradient(var(--line2) 1px, transparent 1px), linear-gradient(90deg, var(--line2) 1px, transparent 1px); background-size: 100% 18px, 58px 100%; background-position: 0 17px, 40px 0; }
.d-rejilla::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 18px; background: var(--bg2); }
.d-rejilla::after { content: ""; position: absolute; left: 50px; top: 41px; width: 40px; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--acc) 40%, transparent); box-shadow: 58px 18px 0 color-mix(in srgb, #2f6bff 35%, transparent), 0 36px 0 color-mix(in srgb, #1f9d55 35%, transparent), 116px 54px 0 color-mix(in srgb, #d99a00 40%, transparent); }
.d-kanban { display: flex; gap: 6px; padding: 8px; }
.d-kanban i { flex: 1; border-radius: 7px; background: var(--bg2); position: relative; }
.d-kanban i::before, .d-kanban i::after { content: ""; position: absolute; left: 5px; right: 5px; height: 22px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
.d-kanban i::before { top: 6px; } .d-kanban i::after { top: 33px; }
.d-calendario { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 3px; padding: 8px; }
.d-calendario i { border-radius: 4px; background: var(--bg2); }
.d-calendario i:nth-child(4n+2) { background: color-mix(in srgb, #2f6bff 28%, var(--bg2)); }
.d-calendario i:nth-child(9) { background: color-mix(in srgb, var(--acc) 45%, var(--bg2)); }
.d-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
.d-galeria i { border-radius: 7px; background: linear-gradient(var(--bg2) 60%, var(--surface) 60%); border: 1px solid var(--line); }
.d-cronograma { padding: 10px 8px; display: grid; gap: 7px; align-content: start; }
.d-cronograma i { height: 12px; border-radius: 6px; background: color-mix(in srgb, #7c4dff 35%, transparent); }
.d-cronograma i:nth-child(1) { width: 46%; margin-left: 4%; } .d-cronograma i:nth-child(2) { width: 30%; margin-left: 30%; background: color-mix(in srgb, #0f9d93 35%, transparent); }
.d-cronograma i:nth-child(3) { width: 52%; margin-left: 40%; } .d-cronograma i:nth-child(4) { width: 24%; margin-left: 12%; background: color-mix(in srgb, var(--acc) 40%, transparent); }
.d-cronograma i:nth-child(5) { width: 38%; margin-left: 55%; background: color-mix(in srgb, #d99a00 40%, transparent); }
.d-lista { padding: 10px; display: grid; gap: 6px; align-content: start; }
.d-lista i { height: 13px; border-radius: 4px; background: var(--bg2); }
.d-lista i:nth-child(2), .d-lista i:nth-child(3), .d-lista i:nth-child(5) { margin-left: 18px; }
.d-gantt { padding: 10px 8px; display: grid; gap: 9px; align-content: start; }
.d-gantt i { height: 10px; border-radius: 3px; background: color-mix(in srgb, #2f6bff 32%, transparent); position: relative; }
.d-gantt i:nth-child(1) { width: 34%; } .d-gantt i:nth-child(2) { width: 30%; margin-left: 36%; } .d-gantt i:nth-child(3) { width: 26%; margin-left: 68%; }
.d-gantt i:nth-child(1)::after, .d-gantt i:nth-child(2)::after { content: ""; position: absolute; right: -6px; top: 5px; width: 8px; height: 14px; border: 1.5px solid var(--muted2); border-left: 0; border-bottom-width: 0; border-radius: 0 4px 0 0; }
.d-formulario { padding: 10px 14px; display: grid; gap: 6px; align-content: start; }
.d-formulario i { height: 9px; width: 40%; border-radius: 3px; background: var(--line2); }
.d-formulario b { height: 16px; border-radius: 5px; border: 1px solid var(--line2); background: var(--surface); }
.d-formulario u { justify-self: start; width: 60px; height: 18px; border-radius: 9px; background: var(--acc); }
.vistas-detalles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 34px auto 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
.vistas-detalles li::before { content: "✓ "; color: var(--ok); font-weight: 700; }

/* ── Producto (bento): tarjetas de colores con vídeo real de la app y, en algunas, personas. Ritmo de 12 columnas
   (7 + 5, 5 + 7, 4 + 8); el texto arriba y el medio abajo, sangrando por el borde de la tarjeta. ── */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; max-width: var(--ancho); margin: 54px auto 0; padding: 0; list-style: none; text-align: left; }
.bento-tarjeta {
  --c: var(--bg2); --tinta-debil: var(--muted);
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 580px; overflow: hidden;
  border-radius: 4px; background: var(--c); color: var(--ink); box-shadow: 0 100px 100px -100px var(--c);
}
.bt-equipo { grid-column: span 7; --c: #d8e6ff; }
.bt-ia { grid-column: span 5; --c: var(--ink); --tinta-debil: #ffffffb8; color: #fff; }
.bt-vistas { grid-column: span 5; --c: #ffedc0; }
.bt-cobros { grid-column: span 7; --c: #d5efd9; }
.bt-aspecto { grid-column: span 4; --c: #e9e2ff; }
.bt-buscar { grid-column: span 8; --c: #ffded0; }
.bento-texto { position: relative; z-index: 2; padding: 32px 36px 0; }
.bento-etiqueta { margin: 0 0 12px; font-size: 12.5px; color: var(--tinta-debil); }
.bt-ia .bento-etiqueta { color: var(--acc); }
.bento-tarjeta h3 { margin: 0 0 10px; font: 550 clamp(24px, 2.3vw, 30px)/1.15 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.bento-texto > p:not([class]) { margin: 0; max-width: 46ch; font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--tinta-debil); text-wrap: pretty; }
.bento-cifra { position: absolute; top: 28px; right: 36px; margin: 0; font: 560 clamp(44px, 5vw, 68px)/1 var(--display); letter-spacing: -.03em; color: var(--acc-ink); }
.bento-cifra small { margin-left: 3px; font-size: .4em; letter-spacing: -.01em; }
.bento-media { position: relative; flex: 1; min-height: 300px; margin-top: 28px; }

/* Personas: vídeo a sangre en todo el hueco del medio. */
.bento-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.bt-equipo .bento-foto { object-position: 50% 12%; }
.bt-aspecto .bento-foto { object-position: 40% 22%; }

/* Ventanas de la app: blancas, con sombra, encima de la foto o sangrando por la esquina inferior derecha. */
.bento-ventana {
  position: absolute; z-index: 1; overflow: hidden; background: var(--surface); border: 1px solid var(--line2); border-radius: 4px;
  box-shadow: var(--sombra-l); transition: transform .6s var(--ease-out);
}
.bento-ventana video, .bento-ventana img { display: block; width: 100%; height: auto; }
.bento-pantalla { top: 0; left: 36px; right: -1px; bottom: -1px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.bento-pantalla video { width: var(--ancho-ui, 700px); max-width: none; }
.bt-ia .bento-pantalla { --ancho-ui: 560px; border-color: #ffffff24; }
.bt-ia { box-shadow: none; }
.bt-buscar .bento-pantalla { --ancho-ui: 820px; top: auto; display: flex; justify-content: flex-end; }
.bento-flota { right: 28px; bottom: 28px; width: min(500px, 64%); }
.bt-aspecto .bento-flota { right: 20px; bottom: 20px; width: min(230px, 62%); }
.bento-pagos { left: 36px; bottom: -1px; width: min(460px, 64%); border-bottom: 0; border-radius: 4px 4px 0 0; }
.bento-stripe { right: 36px; top: 28px; width: min(250px, 34%); }

@media (hover: hover) {
  .bento-tarjeta:hover .bento-ventana { transform: translateY(-6px); }
  .bento-tarjeta:hover .bento-foto { transform: scale(1.03); }
}

/* ── Tiempo real y Claude: tarjetas como las del bento junto al texto de la sección. La ventana de la app va en el flujo
   (`.bento-encuadre`); en Tiempo real se monta sobre la foto, en Claude va sola sobre el color. ── */
.bt-colab, .bt-mcp { min-height: 0; }
.bt-colab .bento-media, .bt-mcp .bento-media { flex: none; height: auto; min-height: 0; margin: 0; padding: 28px; }
.bt-colab { --c: #e9e2ff; }
.bt-colab .bento-media { padding-top: 150px; }
.bt-colab .bento-foto { inset: 0 0 auto; height: 260px; object-position: 50% 24%; }
.bt-mcp { --c: #ffded0; }
.bento-encuadre { position: relative; width: min(460px, 100%); margin: 0 auto; }
.bt-mcp .bento-encuadre { width: min(520px, 100%); }

/* ── Rendimiento ── */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: var(--ancho); margin: 54px auto 0; padding: 0; list-style: none; text-align: left; }
.cifras li { position: relative; overflow: hidden; padding: 24px 22px 22px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line2); }
.cifras b { display: block; font: 560 clamp(36px, 4vw, 52px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* Barra de acento que se llena mientras la cifra cuenta (main.js pone --p de 0 a 1). */
.cifras li.cuenta::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--acc); transform: scaleX(var(--p, 1)); transform-origin: left; }
.cifras b small { font-size: .42em; letter-spacing: -.01em; margin-left: 3px; color: var(--muted); font-weight: 600; }
.cifras span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.nota-medida { max-width: 760px; margin: 26px auto 0; font-size: 13px; line-height: 1.65; color: var(--muted2); }

/* ── Claude (MCP) ── */
.herramientas-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 0; padding: 0; list-style: none; }
.herramientas-lista li { padding: 3px 9px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); font: 12px var(--mono); color: var(--muted); }

/* ── Airtable y privacidad ── */
.franja {
  max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  padding: 26px 28px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line2); text-align: left;
}
.franja h3 { margin: 0 0 4px; font: 600 22px/1.2 var(--display); letter-spacing: -.015em; }
.franja p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.franja-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--bg2); }
.franja-ico svg { width: 26px; height: 26px; stroke: var(--acc-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.envoltura-franja { padding: 0 var(--margen) 30px; }

.datos { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.datos th, .datos td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.datos tr:last-child th, .datos tr:last-child td { border-bottom: 0; }
.datos th { font-weight: 500; color: var(--muted); width: 38%; }
.datos td.mono { font-size: 13px; }

/* ── Precios ── */
.precios-selector { display: inline-flex; align-items: center; gap: 8px; margin: 32px auto 44px; padding: 4px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); }
.precios-btn-periodo { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font: 550 14px var(--sans); color: var(--muted); cursor: pointer; transition: all .2s; }
.precios-btn-periodo.activo { background: #fff; color: var(--ink); box-shadow: var(--sombra-s); }
.precios-btn-periodo .descuento { color: var(--ok); font-size: 12px; margin-left: 4px; font-weight: 600; }

.precios-grid { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.plan-tarjeta { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 36px 32px; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.plan-tarjeta:hover { border-color: var(--ink); box-shadow: var(--sombra-m); }
.plan-tarjeta.destacado { border-color: var(--ink); box-shadow: var(--sombra-l); position: relative; }
.plan-badge-destacado { position: absolute; top: -12px; left: 32px; background: var(--ink); color: #fff; font: 600 11.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 4px; }
.plan-nombre { font: 650 24px/1.2 var(--display); color: var(--ink); margin: 0 0 6px; }
.plan-desc { font-size: 14.5px; color: var(--muted); margin: 0 0 24px; min-height: 42px; line-height: 1.45; }
.plan-cifra { margin: 0 0 4px; font: 650 44px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.plan-cifra small { font: 500 15px var(--sans); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.plan-facturacion { font-size: 13px; color: var(--muted2); min-height: 20px; margin: 0 0 28px; }
.plan-cta { margin: 0 0 32px; width: 100%; text-align: center; text-decoration: none; }
.plan-caracteristicas { list-style: none; padding: 24px 0 0; margin: 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.6; color: var(--text); flex-grow: 1; display: flex; flex-direction: column; gap: 10px; }
.plan-caracteristicas li { display: flex; align-items: flex-start; gap: 10px; }
.plan-caracteristicas li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--ok); }

.plan-selfhosted { max-width: var(--ancho); margin: 32px auto 0; background: var(--panel); border: 1px dashed var(--line); border-radius: 6px; padding: 28px 32px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; text-align: left; }
.plan-selfhosted h3 { font: 650 20px/1.3 var(--display); color: var(--ink); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-selfhosted p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }
@media (max-width: 960px) {
  .precios-grid { grid-template-columns: 1fr; }
  .plan-selfhosted { grid-template-columns: 1fr; }
}

/* ── Preguntas ── */
.preguntas { max-width: 820px; margin: 44px auto 0; text-align: left; }
.preguntas details { border-bottom: 1px solid var(--line2); }
.preguntas summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; font: 600 18px/1.35 var(--sans); letter-spacing: -.01em;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line2); font: 400 18px/1 var(--mono); transition: transform .3s var(--ease-out), background .2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); background: var(--ink); color: var(--bg); }
.preguntas details p { margin: -6px 4px 22px; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 700px; }
.preguntas a { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ── Cierre ── */
.cierre { position: relative; isolation: isolate; padding: 120px var(--margen) 128px; text-align: center; }
.cierre-celdas { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); grid-auto-rows: 40px; gap: 0; opacity: .7; pointer-events: none;
  -webkit-mask-image: radial-gradient(50% 60% at 50% 50%, #000, transparent 80%); mask-image: radial-gradient(50% 60% at 50% 50%, #000, transparent 80%); }
.cierre-celdas i { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 1.2s; }
.cierre-celdas i.on { background: var(--acc-soft); transition: background .15s; }
.cierre h2 { margin: 0 auto; max-width: 18ch; font: 550 clamp(36px, 4.6vw, 58.5px)/1.1 var(--display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.cierre p { margin: 20px 0 32px; font-size: 18px; color: var(--muted); }
.cierre .hero-cta { margin-top: 0; }

/* ── Pie ── */
.pie { background: var(--bg); color: var(--muted); padding: 64px var(--margen) 30px; border-top: 1px solid var(--line); }
.pie-columnas { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 32px; font-size: 15px; }
.pie-columnas p { margin: 0 0 10px; }
.pie-columnas .mono { font-family: var(--sans); font-size: 16px; letter-spacing: .16px; text-transform: none; font-weight: 650; color: var(--ink-nav); margin-bottom: 14px; }
.pie-columnas nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pie-columnas a { color: var(--text); font-weight: 450; transition: color .2s; }
.pie-columnas a:hover { color: var(--ink); }
.pie .marca { color: var(--ink); }
.pie-marca p { margin-top: 14px; color: var(--muted); max-width: 30ch; }
.pie .tenue { color: var(--muted2); font-size: 13px; }
.pie-rotulo { display: none; }
.pie-legal { max-width: var(--ancho); margin: 20px auto 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--muted2); }
.pie-legal + .pie-legal { margin-top: 0; padding-top: 4px; border-top: 0; }

/* ── Aparición al hacer scroll ── */
.js .revela { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .revela.dentro { opacity: 1; transform: none; }
.js .revela + .revela { transition-delay: .08s; }

/* ── Lenis (vendor/lenis.min.js) ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .nav-links { gap: 16px; }
  .vistas, .cifras { grid-template-columns: repeat(2, 1fr); }
  .datos-fila { grid-template-columns: repeat(3, 1fr); }
  .datos-fila li:nth-child(3n) { border-right: 0; }
  .datos-fila li:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .bento-tarjeta { grid-column: span 6; }
  .bento-cifra { position: static; margin: 14px 0 0; }
}
@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-acciones { margin-left: auto; }
  .bloque { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block: 96px; }
  .bloque-inverso > .bloque-texto { order: 0; }
  .seccion, .cierre { padding-block: 96px; }
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .franja { grid-template-columns: auto 1fr; }
  .franja .pronto { grid-column: 2; justify-self: start; }
  .bento-tarjeta { grid-column: 1 / -1; min-height: 540px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 100px; }
  .nav { gap: 12px; }
  .nav-entrar { padding: 0 8px; }
  .nav .btn { padding: 0 14px; }
  .escenario { margin-top: 40px; padding: 28px 8px 22px; }
  .datos-fila { grid-template-columns: repeat(2, 1fr); }
  .datos-fila li { border-bottom: 1px solid var(--line); }
  .datos-fila li:nth-child(3n) { border-right: 1px solid var(--line); }
  .datos-fila li:nth-child(2n) { border-right: 0; }
  .datos-fila li:nth-last-child(-n+2) { border-bottom: 0; }
  .vistas, .cifras { grid-template-columns: 1fr; }
  .bloque p, .seccion-sub { font-size: 16.5px; }
  .franja { grid-template-columns: 1fr; padding: 22px; }
  .franja .pronto { grid-column: auto; }
  .datos th, .datos td { padding: 12px; display: block; width: auto; }
  .datos th { padding-bottom: 0; border-bottom: 0; }
  .preguntas summary { font-size: 16.5px; }
  .pie-columnas { grid-template-columns: 1fr; }
  .cierre .btn { width: 100%; }
  .bento { gap: 14px; }
  .bento-tarjeta { min-height: 0; }
  .bento-texto { padding: 24px 22px 0; }
  .bento-media { flex: none; height: 340px; margin-top: 22px; }
  .bt-buscar .bento-media { height: 270px; min-height: 0; }
  .bento-pantalla { left: 22px; }
  .bento-pantalla, .bt-buscar .bento-pantalla { --ancho-ui: 560px; }
  .bt-ia .bento-pantalla { --ancho-ui: 460px; }
  .bento-flota { right: 16px; bottom: 16px; width: calc(100% - 32px); }
  .bt-aspecto .bento-flota { right: 16px; bottom: 16px; width: min(220px, 62%); }
  .bento-pagos { left: 16px; width: 78%; }
  .bento-stripe { right: 16px; top: 16px; width: 44%; }
  .bt-colab .bento-media, .bt-mcp .bento-media { padding: 16px; }
  .bt-colab .bento-media { padding-top: 120px; }
  .bt-colab .bento-foto { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .revela { opacity: 1; transform: none; transition: none; }
  .bento-ventana, .bento-foto { transition: none; }
  .bento-tarjeta:hover .bento-ventana, .bento-tarjeta:hover .bento-foto { transform: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}