/* Lila, versión consolidada: la base del diseño 1 «Señal» (un instrumento de radioastronomía: lienzo plano, líneas
   finas, datos en monoespaciada) con el escritorio y la reunión del diseño 2 «Pulso». El lila es luz escasa: el
   púlsar, los pulsos de la reunión y una acción por pantalla. Bloques: NOTAS.md. */

:root {
  color-scheme: dark;
  /* Lienzo y superficies */
  --night: #080a14;
  --surface-1: #0d0f1c;
  --surface-2: #101323;
  --surface-3: #13172a;
  /* Texto: blanco azulado en cuatro tonos (los de la app) */
  --ink-strong: #d8ecf8;
  --ink: #d1e4fa;
  --ink-soft: #c7d3ea;
  --ink-muted: #9da7ba;
  /* Líneas de instrumento */
  --line: rgba(186, 215, 247, 0.16);
  --line-fine: rgba(186, 215, 247, 0.1);
  --line-strong: rgba(186, 215, 247, 0.28);
  /* Lila */
  --signal: #7c6cff;
  --signal-hover: #8a7cff;
  --wave: #a99bff;
  --star: #cdc2ff;
  --lila-text: #c9c1ff;
  --link: #c4bbff;
  --focus: #b3a8ff;
  --ok: #7ee0b0;
  --key-bg: rgba(199, 211, 234, 0.12);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --f-display: 'Jost Variable', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --f-text: 'Inter Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono Variable', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  --gutter: 24px;
  --gap: 24px;
  --section: 128px;
  --nav-h: 76px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--night);
  color: var(--ink-soft);
  font: 400 17px/1.6 var(--f-text);
  font-feature-settings: 'kern', 'calt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: rgba(124, 108, 255, 0.35);
  color: #fff;
}

img,
svg {
  display: block;
}

p {
  margin: 0;
}

/* Sin una palabra sola en el último renglón. */
p,
dd,
li {
  text-wrap: pretty;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

.wrap {
  width: min(1240px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

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

/* Variantes según el sistema del visitante (las clases las pone el script del <head>). En "otro", .is-touch es un
   celular o una tableta: ahí Lila no se instala, así que la acción es probar el púlsar con la voz. */
html:not(.os-win) [data-os='win'],
html:not(.os-mac) [data-os='mac'],
html:not(.os-other) [data-os='other'],
html:not(.is-touch) .touch-only,
html.is-touch .no-touch {
  display: none !important;
}

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink-strong);
  font-weight: 500;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.skip:focus {
  top: 12px;
}

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

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--f-display);
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  font-size: clamp(42px, 5.3vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(30px, 3.15vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h3 {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.small {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* Datos reales: monoespaciada, cifras tabulares, nunca en mayúsculas sostenidas. Solo cifras, teclas y nombres de
   catálogo; las palabras van en Inter. */
.data,
kbd {
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.link {
  border-radius: 3px;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(196, 187, 255, 0.45);
  transition: color 150ms, text-decoration-color 150ms;
}

.link:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  font: 500 16px/1 var(--f-text);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms, box-shadow 150ms, color 150ms;
}

.btn-sm {
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 9px;
}

/* La única acción lila de la pantalla: texto oscuro sobre lila (5,12:1). */
.btn-solid {
  background: var(--signal);
  color: var(--night);
}

.btn-solid:hover {
  background: var(--signal-hover);
}

.btn-line {
  background: transparent;
  color: var(--ink-strong);
  box-shadow: inset 0 0 0 1px rgba(186, 215, 247, 0.26);
}

.btn-line:hover {
  background: rgba(186, 214, 247, 0.06);
  box-shadow: inset 0 0 0 1px rgba(186, 215, 247, 0.4);
}

.btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Enlaces que todavía no llevan a nada (descargas, pedir acceso, contacto): al tocarlos, dicen qué falta. */
.pending-note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--lila-text);
}


/* ---------- Navegación: fija ---------- */

/* Transparente sobre el cielo del inicio; al bajar toma el color de la noche y su línea (nav.js). Sin vidrio: el
   único vidrio de la página es la pastilla. */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  background: transparent;
  box-shadow: 0 1px 0 transparent;
  transition: background-color 200ms, box-shadow 200ms;
}

.nav.is-scrolled,
.nav.is-open,
.page .nav {
  background: var(--night);
  box-shadow: 0 1px 0 var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-strong);
  font: 500 22px/1 var(--f-display);
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: auto;
  border-radius: 6px;
}

.brand-icon {
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(124, 108, 255, 0.4);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a:not(.btn) {
  position: relative;
  color: var(--ink-soft);
  font-size: 15px;
  text-decoration: none;
  border-radius: 4px;
  transition: color 150ms;
}

.nav-links a:not(.btn):hover,
.nav-links a[aria-current='page'] {
  color: #fff;
}

/* La página en la que estás: una raya lila corta debajo, como la marca de una escala. */
.nav-links a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--wave);
}

/* Descargar: en el escritorio va aparte, a la derecha; en el menú del celular, al final de la lista. */
.menu-cta {
  display: none !important;
}

.menu-btn {
  display: none;
  order: 3;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-strong);
  box-shadow: inset 0 0 0 1px rgba(186, 215, 247, 0.26);
  cursor: pointer;
}

.menu-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.menu-x {
  display: none;
}

.menu-btn[aria-expanded='true'] .menu-bars {
  display: none;
}

.menu-btn[aria-expanded='true'] .menu-x {
  display: inline;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(700px, 100svh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 40px) 0 64px;
}

.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.sky svg {
  position: absolute;
  top: 0;
  left: 0;
}

.sky-name {
  font-family: var(--f-text);
  font-size: 11px;
  letter-spacing: 0.01em;
  fill: var(--ink-muted);
}

/* El contenido va centrado en alto: el titular y el texto a la izquierda, el púlsar a la derecha y, justo debajo,
   la línea del dictado, que cruza todo el ancho. */
.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  grid-template-areas:
    '. .'
    'title instrument'
    'copy instrument'
    'field field'
    '. .';
  column-gap: var(--gap);
  align-items: start;
}

.hero h1 {
  grid-area: title;
  max-width: 11.5em;
}

.nowrap-d {
  white-space: nowrap;
}

.hero-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  margin-top: 28px;
}

.lead {
  max-width: 30em;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.os-line {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.os-line + .actions {
  margin-top: 18px;
}

.see-downloads {
  padding: 12px 2px;
  font-size: 15px;
}

.note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.instrument {
  grid-area: instrument;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-top: 8px;
}

/* El púlsar grande: 6 px por unidad (la pastilla usa 0,85). El vivo mide 58 × 30 unidades y el que "transcribe",
   43 × 30; los dos quedan centrados en el mismo lugar. */
.pulsar-stage {
  --u: 6px;
  position: relative;
  width: calc(58 * var(--u));
  height: calc(30 * var(--u));
}

.pulsar-stage .pulsar {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(58 * var(--u));
  height: 100%;
  transform: translateX(-50%);
  transition: opacity 150ms;
}

/* En el hero el púlsar nunca es la estrella sola (sería el destello de "IA"): en reposo y mientras abre el
   micrófono, sus ondas quedan a la vista, del centro hacia afuera. La app las deja al 12 % porque la pastilla
   desaparece cuando no graba; aquí el púlsar se queda en pantalla. */
.pulsar-stage .pulsar:is(.pulsar--off, .pulsar--opening) .pulsar-wave:nth-of-type(4n + 1) {
  opacity: 0.32;
}

.pulsar-stage .pulsar:is(.pulsar--off, .pulsar--opening) .pulsar-wave:nth-of-type(4n + 2) {
  opacity: 0.27;
}

.pulsar-stage .pulsar:is(.pulsar--off, .pulsar--opening) .pulsar-wave:nth-of-type(4n + 3) {
  opacity: 0.22;
}

.pulsar-stage .pulsar:is(.pulsar--off, .pulsar--opening) .pulsar-wave:nth-of-type(4n + 4) {
  opacity: 0.17;
}

.pulsar-stage .pulsar--thinking {
  width: calc(43 * var(--u));
  opacity: 0;
}

.pulsar-stage.is-thinking .pulsar:not(.pulsar--thinking) {
  opacity: 0;
}

.pulsar-stage.is-thinking .pulsar--thinking {
  opacity: 1;
}

/* Fuera de "transcribiendo", el púlsar que late no se anima (no gasta y no se ve). */
.pulsar-stage:not(.is-thinking) .pulsar--thinking * {
  animation-play-state: paused;
}

.keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
}

/* Bajo el púlsar del inicio: el enlace a «Por qué un púlsar». */
.pulsar-why {
  margin-top: -12px;
  border-radius: 3px;
  color: var(--ink-muted);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(196, 187, 255, 0.35);
  transition: color 150ms, text-decoration-color 150ms;
}

.pulsar-why:hover {
  color: var(--ink-strong);
  text-decoration-color: currentColor;
}

/* Cada combinación es una sola pieza; la "o" va pegada a la segunda, así nunca queda sola al final de un renglón. */
.keyset,
.keyset-alt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.keyset-alt {
  gap: 14px;
}

.plus,
.keyset-or {
  font: 400 15px/1 var(--f-mono);
  color: var(--ink-muted);
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 40px;
  padding: 0 13px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-strong);
  font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(186, 215, 247, 0.2), 0 3px 0 #04050c;
  transition: transform 90ms, box-shadow 90ms, background-color 90ms, color 90ms;
}

.keys.is-pressed kbd {
  transform: translateY(3px);
  background: var(--surface-3);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(201, 193, 255, 0.5), 0 0 0 #04050c;
}

/* La línea del dictado cruza todo el ancho: es un campo de texto, donde está tu cursor. Lila no reemplaza nada:
   pega donde está el cursor. Al mantener el atajo, lo de antes ya se envió y queda solo el cursor (con el alto
   reservado); al soltar, la frase aparece completa de una vez. */
.field {
  grid-area: field;
  margin-top: 44px;
}

.field-line {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-height: 48px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}

/* El alto se reserva en JS para la frase más larga: así la página no salta cuando aparece el texto, que crece
   hacia arriba desde la línea, como en un campo de chat. */
.field-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  color: var(--ink-strong);
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.field-inner {
  min-width: 0;
}

/* Mientras carga, la frase del HTML (para quien no tiene JavaScript o prefiere menos movimiento) no se ve: la
   demostración arranca a mitad de un dictado, con la línea vacía. */
html.demo .typed.is-initial {
  visibility: hidden;
}

.typed.is-new {
  animation: paste 150ms ease-out;
}

@keyframes paste {
  from {
    opacity: 0.25;
  }
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.17em;
  background: var(--ink-strong);
  animation: caret 1.06s steps(1) infinite;
}

/* Con la demostración en pausa o terminada, el cursor queda fijo. */
.field.is-still .caret {
  animation: none;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.field-note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-muted);
}

.pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: color 150ms, box-shadow 150ms;
}

.pause[hidden] {
  display: none;
}

.pause:hover {
  color: var(--ink-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.pause svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pause .i-play {
  display: none;
  fill: currentColor;
  stroke: none;
}

.pause.is-paused .i-play {
  display: block;
}

.pause.is-paused .i-pause {
  display: none;
}


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

.section {
  padding-top: var(--section);
}

.section:last-child {
  padding-bottom: var(--section);
}

.col-text {
  max-width: 720px;
}

.col-text > p {
  max-width: 620px;
}

.col-text > * + * {
  margin-top: 20px;
}

.col-text h2 + p {
  margin-top: 24px;
}

/* La rejilla de 12 columnas: el texto ocupa de la 1 a la 7 y lo secundario empieza en la 8 o en la 9. Así, en toda
   la página, las columnas de la derecha arrancan en solo dos líneas. */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}

.split > :first-child {
  grid-column: 1 / span 7;
}

.split > :nth-child(2) {
  grid-column: 8 / -1;
}

/* 2. Un segundo: la lectura y el diagrama de tiempo */

.split > .readout {
  grid-column: 9 / -1;
  align-self: end;
}

.readout {
  padding-left: 16px;
  border-left: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.readout p + p {
  margin-top: 4px;
}

/* La lectura principal va en Inter; solo las cifras, en monoespaciada. */
.readout .readout-main {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-strong);
}

.readout-main .data {
  font-size: 14.5px;
  font-weight: 500;
  color: inherit;
}

.timing {
  margin: 64px 0 0;
}

.timing-plot {
  position: relative;
  width: 100%;
}

.timing-plot svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.pill-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.pill-specimen {
  flex: none;
  display: flex;
  justify-content: center;
  width: 92px;
}

/* La pastilla real (pill.css de la app): 34 px de alto, el único vidrio de la página porque es producto. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(8, 9, 20, 0.94);
  box-shadow: inset 0 1px 1px rgba(216, 236, 248, 0.18), inset 0 0 0 1px rgba(186, 215, 247, 0.12), 0 8px 18px rgba(0, 0, 0, 0.45);
  font: 400 13px/1 var(--f-text);
  color: var(--ink);
  white-space: nowrap;
  transition: opacity 150ms;
}

/* La muestra en reposo (al terminar el diagrama de tiempo): como en el hero, las ondas quedan a la vista. */
.pill-specimen .pulsar--off .pulsar-wave:nth-of-type(4n + 1) {
  opacity: 0.32;
}

.pill-specimen .pulsar--off .pulsar-wave:nth-of-type(4n + 2) {
  opacity: 0.27;
}

.pill-specimen .pulsar--off .pulsar-wave:nth-of-type(4n + 3) {
  opacity: 0.22;
}

.pill-specimen .pulsar--off .pulsar-wave:nth-of-type(4n + 4) {
  opacity: 0.17;
}

.pill--transcribing {
  width: 60px;
  padding: 0;
  justify-content: center;
}

.pill--notice {
  gap: 10px;
  padding: 0 14px 0 12px;
}

.pill .notice-icon {
  fill: none;
  stroke: var(--wave);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pill.is-hidden {
  opacity: 0;
}


/* 3. Donde puedas pegar: el texto en 5 columnas y el escritorio en 7 (el demo del diseño 2). */

.apps-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 56px;
  align-items: center;
}

.apps-text > .small {
  margin-top: 28px;
}

/* Los lugares donde escribe, con líneas finas; el que está en la pantalla del demo se enciende con un púlsar chico. */
.places {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-fine);
}

.places li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  border-bottom: 1px solid var(--line-fine);
  font-size: 16px;
  color: var(--ink-muted);
  transition: color 260ms ease-out;
}

.places li.is-on {
  color: var(--ink-strong);
}

.place-mark {
  flex: none;
  opacity: 0;
  transition: opacity 260ms ease-out;
}

.places li.is-on .place-mark {
  opacity: 1;
}

.desk-wrap {
  --bar-h: 48px;
  --pill-bottom: calc(var(--bar-h) + 20px);
  --win-gap: 26px;
  position: relative;
  min-width: 0;
  height: clamp(540px, 64vh, 600px);
}

html.os-mac .desk-wrap {
  --bar-h: 62px;
}

/* El escritorio de Windows o del Mac según quién visita (cualquier otro ve Windows). */
html.os-mac [data-desk='win'],
html:not(.os-mac) [data-desk='mac'] {
  display: none !important;
}

.stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}

/* El escritorio: fondo oscuro y plano con el cielo de la app; la ventana es la superficie más clara. */
.stage {
  position: relative;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line);
  isolation: isolate;
  user-select: none;
  background: #0a0c18;
}
.wall { position: absolute; inset: 0; z-index: 0; background: #0a0c18; }
.wall canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* La escena entera (ventana, teclas, pastilla, barra) se agranda junta en pantallas anchas: --k lo pone desk.js. */
.scene {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: calc(100% / var(--k, 1));
  height: calc(100% / var(--k, 1));
  transform: scale(var(--k, 1));
  transform-origin: 0 100%;
}

.menubar {
  position: absolute;
  inset: 0 0 auto;
  height: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: rgba(19, 23, 42, 0.78);
  box-shadow: inset 0 -1px 0 rgba(186, 215, 247, 0.08);
  font: 500 12px/1 var(--f-text);
  color: var(--ink-strong);
}
.menubar__right { display: inline-flex; align-items: center; gap: 14px; font-weight: 400; }
.menubar__lila { width: 15px; height: 15px; color: var(--ink-strong); }

/* La ventana va anclada abajo: su campo queda a unos 40 px de la pastilla, como en el uso real. */
.desk {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  bottom: calc(var(--pill-bottom) + 34px + var(--win-gap));
  display: grid;
  place-items: end center;
}
html.os-mac .desk { top: 46px; }
.wins { position: relative; width: min(660px, 100%); height: min(364px, 100%); }

/* Ventana genérica (sin marcas ni imitaciones): mismo marco en las tres escenas, cambia el contenido. */
.win {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: #13172a;
  overflow: hidden;
  visibility: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 18px 44px -14px rgba(0, 0, 0, 0.7),
    0 50px 110px -34px rgba(0, 0, 0, 0.85);
}
.win::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(186, 215, 247, 0.18), inset 0 1px 0 rgba(216, 236, 248, 0.1);
}
.win.is-current, .win.is-next { visibility: visible; }
.win.is-next { z-index: 2; }
.seam { position: absolute; inset: 0; z-index: 2; border-radius: 14px; opacity: 0; pointer-events: none; }

.win__bar {
  position: relative;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(186, 215, 247, 0.1);
  background: #161b31;
  font: 500 13px/1 var(--f-text);
  color: var(--ink-soft);
}
.win__dots { display: inline-flex; gap: 7px; }
.win__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(199, 211, 234, 0.18); }
.win__title { white-space: nowrap; }
html.os-mac .win__title { position: absolute; left: 50%; transform: translateX(-50%); }
.win__ctrls { margin-left: auto; color: var(--ink-muted); opacity: 0.8; }

.dfield__box { margin: 0; }
.dfield__text, .dcaret--end { display: none; }
.win.is-pasted .dfield__text { display: inline; }
.win.is-pasted .dfield__ph, .win.is-pasted .dcaret--start { display: none; }
.dcaret {
  display: none;
  width: 1.5px;
  height: 1.15em;
  margin: 0 1px;
  vertical-align: -0.2em;
  background: var(--ink-strong);
}
.win.is-current .dcaret--start, .win.is-next .dcaret--start { display: inline-block; }
.win.is-pasted.is-current .dcaret--end { display: inline-block; }
.win.is-pasted .dcaret--start { display: none; }
.stage:not(.is-paused) .dcaret { animation: dblink 1s steps(1, end) infinite; }
.stage.is-paused .pulsar--thinking .pulsar-wave,
.stage.is-paused .pulsar--thinking .pulsar-glow { animation-play-state: paused; }
@keyframes dblink { 50% { opacity: 0; } }

/* Escena 1: chat. El historial siempre llega hasta la barra de título y se desvanece bajo ella, como un chat que ya
   tiene mensajes: nunca queda un hueco vacío arriba. */
.chat {
  position: absolute;
  inset: 38px 0 0;
  display: flex;
  flex-direction: column;
  padding: 0 18px 16px;
}
.chat__log {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 48px);
  mask-image: linear-gradient(180deg, transparent 0, #000 48px);
}
.msg { flex: none; display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: start; }
.msg__av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--av);
  font: 600 12px/1 var(--f-text);
  color: var(--ink-soft);
}
.msg__who { font: 600 13px/1.3 var(--f-text); color: var(--ink-strong); margin-bottom: 3px; }
.msg__who time { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--ink-muted); }
.msg__text { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.msg--sent { display: none; }
.win.is-sent .msg--sent { display: grid; }

.dfield--chat {
  margin-top: 16px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 48px;
  padding: 12px 9px 9px 14px;
  border-radius: 10px;
  background: #0e1122;
  box-shadow: inset 0 0 0 1px rgba(186, 215, 247, 0.15);
}
.dfield--chat .dfield__box { flex: 1; padding-bottom: 2px; font-size: 15px; line-height: 1.45; color: var(--ink-strong); }
.dfield__ph { color: #7c859b; }
.send {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  background: rgba(199, 211, 234, 0.06);
  transition: background-color 160ms, color 160ms;
}
.win.is-pasted .send { color: var(--ink-strong); background: rgba(199, 211, 234, 0.16); }

/* Escena 2: correo */
.mail {
  position: absolute;
  inset: 38px 0 0;
  display: flex;
  flex-direction: column;
  padding: 4px 20px 16px;
}
.mail__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  flex: none;
  border-bottom: 1px solid rgba(186, 215, 247, 0.1);
  font-size: 13px;
  color: var(--ink-soft);
}
.mail__k { width: 52px; color: var(--ink-muted); }
.mail__to { padding: 4px 9px; border-radius: 6px; background: var(--key-bg); color: #d1e4fa; font-weight: 500; font-size: 12.5px; line-height: 1.2; }
.dfield--mail { flex: 1; min-height: 0; padding-top: 18px; }
.dfield--mail .dfield__box { font-size: 15px; line-height: 1.6; color: var(--ink-strong); }
.mail__foot { flex: none; display: flex; align-items: center; gap: 14px; }
.mail__send {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(199, 211, 234, 0.08);
  color: var(--ink-muted);
  font: 500 13px/1 var(--f-text);
  transition: background-color 160ms, color 160ms;
}
.win.is-pasted .mail__send { background: rgba(199, 211, 234, 0.16); color: var(--ink-strong); }
/* Enviado: el correo queda escrito y el botón vuelve a su tono apagado, con «✓ Enviado» al lado. */
.win.is-sent .mail__send { background: rgba(199, 211, 234, 0.08); color: var(--ink-muted); }
.win.is-sent .dcaret { display: none !important; }
.mail__sent {
  display: none;
  align-items: center;
  gap: 6px;
  font: 500 13px/1 var(--f-text);
  color: var(--ink-soft);
}
.mail__sent svg { color: var(--ink-soft); }
.win.is-sent .mail__sent { display: inline-flex; }

/* Escena 3: terminal de un asistente de código, con pedidos anteriores que llegan hasta la barra de título */
.win--term { background: #0f1220; }
.win__path { margin-left: 8px; font: 400 12px/1 var(--f-mono); color: #7c859b; }
.term {
  position: absolute;
  inset: 38px 0 0;
  display: flex;
  flex-direction: column;
  padding: 0 18px 16px;
  font: 400 13px/1.6 var(--f-mono);
  color: var(--ink-soft);
}
.term__log {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 48px);
  mask-image: linear-gradient(180deg, transparent 0, #000 48px);
}
.term__log > * { flex: none; }
.term__out--old { margin-bottom: 10px; }
.term__new { display: none; }
.win.is-sent .term__new { display: block; }
.term__line { color: var(--ink-strong); }
.term__out { color: var(--ink-muted); }
.term__sign { color: var(--ink-muted); }
.dfield--term {
  flex: none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #0b0d19;
  box-shadow: inset 0 0 0 1px rgba(186, 215, 247, 0.15);
}
.dfield--term .dfield__box { color: var(--ink-strong); min-height: 1.6em; }

/* El faro: un abanico tenue que gira desde un púlsar chico, donde estaba la pastilla. JS dibuja el ángulo en cada
   cuadro. La máscara lo deja salir del púlsar (no de un punto vacío) y lo apaga lejos de él. */
.beam {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  --beam-mask: radial-gradient(circle at var(--px, 50%) var(--py, 85%), transparent 0, transparent 12px, rgba(0, 0, 0, 0.6) 24px, #000 90px, rgba(0, 0, 0, 0.6) 320px, transparent 820px);
  -webkit-mask-image: var(--beam-mask);
  mask-image: var(--beam-mask);
}
.faro-src {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pill-bottom) + 17px);
  z-index: 3;
  display: flex;
  opacity: 0;
  transform: translate(-50%, 50%);
  pointer-events: none;
}

/* La luz de la pastilla: el halo del púlsar derrama lila sobre el borde de abajo de la ventana y la barra mientras
   escucha (radio de 200 px, como mucho 13 %). hero.js le pone la opacidad con la voz; en reposo es 0. */
.spill {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pill-bottom) + 17px);
  z-index: 4;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 108, 255, 0.13), rgba(124, 108, 255, 0.075) 32%, rgba(124, 108, 255, 0.025) 66%, rgba(124, 108, 255, 0));
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, 50%);
  pointer-events: none;
}

/* Teclas que se presionan: el atajo a la izquierda de la pastilla y, después, la tecla con la que tú envías, centrada
   donde estaba la pastilla (así el pie del escenario no salta de lado). */
.dkeys {
  position: absolute;
  right: calc(50% + 54px);
  bottom: calc(var(--pill-bottom) + 17px);
  z-index: 5;
  display: flex;
  opacity: 0;
  transform: translateY(calc(50% + 5px));
  transition: opacity 180ms ease-out, transform 220ms var(--ease-out);
}
.dkeys[data-set='enter'], .dkeys[data-set='enviar'] { right: auto; left: 50%; translate: -50% 0; }
.dkeys__set { display: none; align-items: center; gap: 8px; }
.dkeys[data-set='dictar'] .dkeys__set[data-set='dictar'],
.dkeys[data-set='enter'] .dkeys__set[data-set='enter'],
.dkeys[data-set='enviar'] .dkeys__set[data-set='enviar'] { display: flex; }
.dkeys kbd {
  display: inline-block;
  min-width: 0;
  height: auto;
  padding: 7px 11px 8px;
  border-radius: 7px;
  background: #1d2340;
  color: var(--ink-strong);
  font: 500 13px/1 var(--f-mono);
  vertical-align: 0;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.dkeys span span, .dkeys__set > span { font: 400 13px/1 var(--f-mono); color: var(--ink-muted); }
.stage.is-keys .dkeys { opacity: 1; transform: translateY(50%); }
.stage.is-keys .dkeys kbd {
  display: inline-block;
  min-width: 0;
  height: auto;
  transform: translateY(1px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 rgba(0, 0, 0, 0);
}
.stage.is-released .dkeys { opacity: 0; transform: translateY(calc(50% - 5px)); }

/* La pastilla del escritorio: la misma .pill de arriba, puesta a 20 px de la barra de tareas o del Dock. */
.pill__live, .pill__think { display: flex; }
.pill__think { display: none; }
.stage .pill {
  position: absolute;
  left: 50%;
  bottom: var(--pill-bottom);
  z-index: 5;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.stage.is-pill .pill { visibility: visible; opacity: 1; }
.stage.is-thinking .pill { width: 60px; padding: 0; }
.stage.is-thinking .pill__live { display: none; }
.stage.is-thinking .pill__think { display: flex; }

/* Barra de tareas de Windows (genérica) y Dock del Mac: más claros que el fondo, como en un escritorio de verdad. */
.taskbar {
  position: absolute;
  inset: auto 0 0;
  height: var(--bar-h);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(19, 23, 42, 0.94);
  border-top: 1px solid rgba(186, 215, 247, 0.12);
}
.taskbar__apps { display: flex; gap: 4px; }
.app {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  transition: background-color 200ms, color 200ms;
}
.app svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app.is-active { color: var(--ink-strong); background: rgba(199, 211, 234, 0.08); }
.taskbar .app::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 6px;
  height: 3px;
  border-radius: 2px;
  background: transparent;
  transform: translateX(-50%);
  transition: width 200ms var(--ease-out), background-color 200ms;
}
.taskbar .app.is-active::after { width: 14px; background: var(--ink-soft); }
.tray {
  position: absolute;
  right: 14px;
  inset-block: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.tray img { border-radius: 50%; }
.tray__clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font: 400 11.5px/1.35 var(--f-text);
  color: var(--ink-strong);
}

.dock {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 3;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px;
  border-radius: 16px;
  background: rgba(19, 23, 42, 0.86);
  box-shadow: inset 0 0 0 1px rgba(186, 215, 247, 0.16);
  transform: translateX(-50%);
}
.dock .app { width: 42px; height: 42px; border-radius: 11px; background: #1c2139; }
.dock .app.is-active { background: #232945; }
.dock .app::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  transform: translateX(-50%);
}
.dock .app.is-active::after { background: var(--ink-soft); }

/* 4. Reuniones (del diseño 2): el texto en un tercio y la tarjeta en dos. */
/* Reuniones: el texto en un tercio y la tarjeta en dos (empieza en la línea de las columnas). */
.meet-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
}
.meet-text { padding-right: 56px; }
.meet-text .h2 { margin-bottom: 28px; }
.meet-text .body-lg + .body-lg { margin-top: 14px; }
.platform-list { margin-top: 44px; }
.platform-list > div { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.platform-list > div:last-child { border-bottom: 1px solid var(--line); }
.platform-list dt { font: 500 15px/1.4 var(--f-text); color: var(--ink-strong); }
.platform-list dd { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

.meet-demo { position: relative; min-width: 0; }
.meet-tag { margin-bottom: 12px; font-size: 13px; color: var(--ink-muted); }

.summary {
  position: relative;
  z-index: 1;
  padding: 24px 26px 26px;
  border-radius: 12px;
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line);
}
.summary__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-fine);
}
.summary__title { font: 500 22px/1.2 var(--f-display); letter-spacing: -0.01em; color: var(--ink-strong); }
.summary__meta { margin-top: 6px; font-size: 13px; color: var(--ink-muted); }
.summary__actions { display: flex; gap: 6px; flex: none; }
.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(186, 214, 247, 0.06);
  box-shadow: inset 0 0 0 1px rgba(186, 215, 247, 0.12);
  font: 500 12.5px/1 var(--f-text);
  color: var(--ink-soft);
}
.summary__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.summary__sec h4 { margin-bottom: 12px; font: 500 13px/1.3 var(--f-text); color: var(--ink-muted); }
.topics li {
  position: relative;
  padding-left: 13px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.topics li + li { margin-top: 8px; }
.topics li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1px;
  background: var(--ink-muted);
}
.decisions li { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-strong); }
.decisions li + li { margin-top: 10px; }
.decisions svg { flex: none; margin-top: 3px; color: var(--ok); }
.tasks li { display: flex; flex-direction: column; gap: 7px; }
.tasks li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-fine); }
.task__text { font-size: 14px; line-height: 1.45; color: var(--ink-strong); }
.task__meta { display: flex; align-items: center; gap: 8px; }
.who { padding: 3px 8px; border-radius: 6px; background: var(--key-bg); color: #d1e4fa; font: 500 11px/1.2 var(--f-text); }
.when { font-size: 12px; color: var(--ink-muted); }

.timeline { position: relative; padding-top: 64px; --name-w: 64px; --lane-h: 26px; }
.pulses { position: absolute; top: 0; left: var(--name-w); right: 0; height: calc(64px + 3 * var(--lane-h)); pointer-events: none; }
/* Cada pulso es un tic gigante con el perfil de un púlsar: base de 10 px en el carril de quien habla, punta arriba. */
.pulse {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: 0;
  bottom: calc((2 - var(--lane)) * var(--lane-h) + var(--lane-h) / 2);
  width: 10px;
  margin-left: -5px;
  background: linear-gradient(0deg, var(--wave) 0%, var(--star) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C3.7 100 4.5 52 5 0C5.5 52 6.3 100 10 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C3.7 100 4.5 52 5 0C5.5 52 6.3 100 10 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transform-origin: 50% 100%;
}
.lanes { position: relative; }
.lane { display: grid; grid-template-columns: var(--name-w) minmax(0, 1fr); align-items: center; height: var(--lane-h); }
.lane__name { font-size: 13px; color: var(--ink-muted); }
.lane__track { position: relative; height: 100%; }
.lane__track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--line-fine);
}
.tick {
  position: absolute;
  top: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: rgba(199, 211, 234, 0.42);
  transform: translateY(-50%);
}
.playhead {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(var(--name-w) + var(--p, 1) * (100% - var(--name-w)));
  width: 1px;
  background: var(--star);
  opacity: 0;
}
.timeline__axis {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0 var(--name-w);
  font: 400 12px/1 var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.meet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-fine);
}
.meet-foot p { font-size: 15px; color: var(--ink-soft); }
.replay {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-soft);
  font: 500 13px/1 var(--f-text);
  cursor: pointer;
  transition: color 160ms, background-color 160ms, box-shadow 160ms;
}
.replay:hover { color: var(--ink-strong); background: rgba(186, 214, 247, 0.06); box-shadow: inset 0 0 0 1px rgba(186, 215, 247, 0.3); }

/* La animación de Reuniones: JS arma el estado inicial y la reproduce una vez. Sin JS se ve el estado final.
   La tarjeta nunca es una caja vacía: los renglones esperan como fantasmas (14 %) y cada pulso, al llegar, enciende
   el suyo. */
.meet-demo.is-armed [data-item] { opacity: 0.14; }
.meet-demo.is-armed [data-item].is-on { opacity: 1; transition: opacity 520ms var(--ease-out); }
.meet-demo.is-armed [data-actions] { opacity: 0.35; }
.meet-demo.is-armed [data-actions].is-on { opacity: 1; transition: opacity 420ms var(--ease-out); }
.meet-demo.is-armed .pulse { transform: scaleY(0); }
.meet-demo.is-armed .pulse.is-up { transform: scaleY(1); transition: transform 460ms var(--ease-out); }
.pulse.is-lit { animation: lit 760ms ease-out; }
@keyframes lit { 0% { filter: brightness(1); } 25% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
/* Las voces también esperan como fantasmas y se encienden al paso del cabezal. */
.meet-demo.is-armed .lane__track {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p, 1) * 100%), rgba(0, 0, 0, 0.22) calc(var(--p, 1) * 100%));
  mask-image: linear-gradient(90deg, #000 calc(var(--p, 1) * 100%), rgba(0, 0, 0, 0.22) calc(var(--p, 1) * 100%));
}
.meet-demo.is-playing .playhead { opacity: 0.8; }

/* La tarjeta y la lista vienen del diseño 2, que no usaba los márgenes ni las viñetas del navegador. */
.meet-demo h3,
.meet-demo h4,
.meet-demo ul,
.platform-list dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform-list {
  margin-bottom: 0;
}

/* Reuniones, en la tipografía de la página: el título de la tarjeta en Jost, como los titulares. */
.meet-text > p {
  max-width: 34em;
}

.summary__title {
  font-weight: 500;
}

.meet-tag {
  font-size: 13px;
}

/* Al terminar, los pulsos laten juntos tres veces (cada uno 140 ms después del anterior) y después quedan titilando,
   cada uno a su ritmo, con un halo lila. Fuera de pantalla se detienen (meeting.js pone .is-away). */
.meet-demo.is-dancing .pulses,
.meet-demo.is-twinkling .pulses {
  filter: drop-shadow(0 0 5px rgba(169, 155, 255, 0.55));
}

.meet-demo.is-dancing .pulse {
  animation: pulse-dance 820ms cubic-bezier(0.3, 0, 0.2, 1) calc(var(--i) * 140ms) 3 both;
}

@keyframes pulse-dance {
  0% {
    transform: scaleY(1);
    filter: brightness(1);
  }
  24% {
    transform: scaleY(0.3);
    filter: brightness(0.8);
  }
  56% {
    transform: scaleY(1.1);
    filter: brightness(1.7);
  }
  100% {
    transform: scaleY(1);
    filter: brightness(1);
  }
}

.meet-demo.is-twinkling .pulse {
  animation: pulse-twinkle var(--tw) ease-in-out var(--td) infinite;
}

.pulse:nth-child(1) { --tw: 2.6s; --td: -0.4s; }
.pulse:nth-child(2) { --tw: 3.3s; --td: -1.9s; }
.pulse:nth-child(3) { --tw: 2.9s; --td: -1.1s; }
.pulse:nth-child(4) { --tw: 3.7s; --td: -2.6s; }

/* Titilar como una estrella: casi siempre encendido, se apaga un poco y vuelve con un destello corto. */
@keyframes pulse-twinkle {
  0%,
  100% {
    opacity: 1;
    transform: scaleY(1);
    filter: brightness(1);
  }
  38% {
    opacity: 0.5;
    transform: scaleY(0.84);
    filter: brightness(0.85);
  }
  46% {
    opacity: 1;
    transform: scaleY(1.05);
    filter: brightness(1.75);
  }
  60% {
    opacity: 0.9;
    transform: scaleY(0.97);
    filter: brightness(1.1);
  }
}

.meet-demo.is-away .pulse {
  animation-play-state: paused;
}

/* 5. Privacidad: el titular más grande de la página después del hero, la animación a todo el ancho y tres hechos. */

.privacy-head {
  max-width: 900px;
}

.privacy-head h2 {
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.024em;
}

.privacy-head .lead {
  margin-top: 26px;
  max-width: 34em;
}

.vanish {
  margin: 72px 0 0;
}

.vanish-stage {
  position: relative;
  height: 200px;
}

.vanish-wave {
  position: absolute;
  left: 0;
  top: 0;
}

/* El púlsar: un punto sin tamaño en su centro; los dos SVG (el que escucha y el que late) quedan centrados ahí. */
.vanish-pulsar {
  position: absolute;
  width: 0;
  height: 0;
}

.vanish-pulsar .pulsar {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  transition: opacity 150ms;
}

/* En reposo, sus ondas a la vista (como el del hero): el púlsar nunca es la estrella sola. */
.vanish-pulsar .pulsar--off .pulsar-wave:nth-of-type(4n + 1) {
  opacity: 0.32;
}

.vanish-pulsar .pulsar--off .pulsar-wave:nth-of-type(4n + 2) {
  opacity: 0.27;
}

.vanish-pulsar .pulsar--off .pulsar-wave:nth-of-type(4n + 3) {
  opacity: 0.22;
}

.vanish-pulsar .pulsar--off .pulsar-wave:nth-of-type(4n + 4) {
  opacity: 0.17;
}

.vanish-pulsar .pulsar--thinking,
.vanish-stage.is-thinking .vanish-pulsar .pulsar:not(.pulsar--thinking) {
  opacity: 0;
}

.vanish-stage.is-thinking .vanish-pulsar .pulsar--thinking {
  opacity: 1;
}

.vanish-stage:not(.is-thinking) .pulsar--thinking * {
  animation-play-state: paused;
}

/* La frase aparece completa, de una vez, donde está el cursor (como pega Lila), y se va antes de la siguiente. */
.vanish-out {
  position: absolute;
  margin: 0;
  color: var(--ink-strong);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.vanish-typed {
  opacity: 0;
}

.vanish-out.is-in .vanish-typed {
  opacity: 1;
  transition: opacity 150ms ease-out;
}

.vanish-out.is-gone .vanish-typed {
  opacity: 0;
  transition: opacity 380ms ease-in;
}

.vanish.is-paused .caret {
  animation: none;
}

/* Los dos canales, bajo cada lado: el del audio queda vacío; el del texto, escrito. */
.vanish-legend {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  margin-top: 28px;
  border-top: 1px solid var(--line-fine);
}

.channel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.channel--text {
  padding-left: 125px;
}

.channel-name {
  color: var(--ink-strong);
  font-weight: 500;
}

.privacy-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-top: 88px;
  border-top: 1px solid var(--line);
}

.privacy-facts .fact {
  padding: 26px 24px 8px 0;
}

.privacy-facts h3 {
  font-size: 21px;
}

.privacy-facts p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.6;
}

/* 6. Descargar, con el precio previsto al lado como una lectura del instrumento (línea a la izquierda, como la de
   "Un segundo"). Todavía no se puede comprar: lo que incluye va en precio/. */

.split-download {
  align-items: end;
}

.download-intro .btn {
  margin-top: 24px;
}

.price {
  max-width: 440px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.price h3 {
  font-size: 21px;
  line-height: 1.3;
}

.price-plan {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.price-more {
  margin-top: 8px;
  font-size: 14px;
}

.price-state {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lila-text);
}

/* En un celular no se puede instalar: sin botones de descarga (la página lo dice arriba). */
html.is-touch .dl-btn {
  display: none;
}

html.is-touch .dl-specs {
  margin-bottom: 14px;
}

.downloads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-top: 56px;
  border-top: 1px solid var(--line);
}

.dl {
  padding: 28px 8px 8px 0;
}

.dl h3 {
  margin-bottom: 14px;
}

.dl .spec {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.dl .data {
  margin-top: 2px;
  color: var(--ink-soft);
}

/* Los requisitos ocupan lo mismo en las dos columnas, así los botones quedan alineados. */
@media (min-width: 961px) {
  .dl-specs {
    min-height: 68px;
  }
}

.dl-btn {
  margin: 20px 0 18px;
}

.dl p:not(.data):not(.spec) + p {
  margin-top: 10px;
}

.dl > p:not(.small) {
  font-size: 15px;
  line-height: 1.55;
}

.dl .soon {
  color: var(--lila-text);
}

.dl > p.pending-note {
  margin: -6px 0 14px;
  font-size: 13px;
}

.download-intro .pending-note {
  margin-top: 10px;
}

.os-win [data-dl='win'] .dl-btn,
.os-mac [data-dl='mac'] .dl-btn {
  background: var(--signal);
  color: var(--night);
  box-shadow: none;
}

.os-win [data-dl='win'] .dl-btn:hover,
.os-mac [data-dl='mac'] .dl-btn:hover {
  background: var(--signal-hover);
}

.version {
  margin-top: 32px;
  font-size: 13px;
  color: var(--ink-muted);
}


/* Pie */

.footer {
  padding: 72px 0 56px;
  border-top: 1px solid var(--line-fine);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-name {
  color: var(--ink-strong);
  font: 500 19px/1 var(--f-display);
}

.footer-made {
  margin-left: 6px;
  font-size: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
}

.footer-links a {
  color: var(--ink-soft);
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
}

.footer-links a:hover {
  color: #fff;
}

.footer-links .pending-note {
  margin: 0;
}

.footer-record {
  margin-top: 48px;
  color: var(--ink-soft);
  font-size: 15px;
}

.footer-record .small {
  margin-top: 6px;
  font-size: 13px;
}

.footer-data {
  display: grid;
  gap: 2px;
  margin-top: 36px;
}

.footer-data .data {
  display: flex;
  gap: 16px;
  margin-bottom: 6px;
  color: var(--ink-soft);
}

/* ---------- Diagramas (SVG generados en JS) ---------- */

/* Cifras y escalas: monoespaciada. */
.plot-text {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  fill: var(--ink-muted);
}

.plot-text--strong {
  fill: var(--ink-strong);
}

/* Palabras: Inter. */
.plot-label {
  font-family: var(--f-text);
  font-size: 13px;
  fill: var(--ink-soft);
}

.plot-label--strong {
  fill: var(--ink-strong);
}

.plot-key {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.plot-result {
  font-family: var(--f-text);
  font-size: 16px;
  letter-spacing: -0.005em;
  fill: var(--ink-strong);
}


/* ---------- Páginas aparte: Precio, Preguntas y Contacto ---------- */

/* Arriba, una franja del mismo cielo del inicio (las estrellas reales, quietas), que se apaga hacia abajo. */
.page-sky {
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
}

.page-sky svg {
  position: absolute;
  top: 0;
  left: 0;
}

.page main {
  position: relative;
  isolation: isolate;
  padding: calc(var(--nav-h) + 96px) 0 var(--section);
}

.page-head {
  max-width: 820px;
}

.page-head h1 {
  font-size: clamp(42px, 4.8vw, 68px);
}

.page-head .lead {
  margin-top: 22px;
  max-width: 34em;
}

.page-block {
  margin-top: 88px;
}

.page-block > h2 {
  font-size: clamp(26px, 2.4vw, 34px);
}

.page-block > h2 + p {
  margin-top: 14px;
  max-width: 38em;
}

.page-block .btn {
  margin-top: 26px;
}

/* Precio: la cifra como lectura del instrumento (línea a la izquierda) y lo que incluye, con líneas finas. */
.plan {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 56px;
  align-items: start;
  margin-top: 72px;
}

.plan-price {
  padding-left: 22px;
  border-left: 1px solid var(--wave);
}

.plan-num {
  display: block;
  color: var(--ink-strong);
  font: 400 clamp(64px, 7vw, 104px) / 1 var(--f-display);
  letter-spacing: -0.03em;
}

.plan-unit {
  display: block;
  margin-top: 12px;
  font-size: 17px;
  color: var(--ink-soft);
}

.plan-state {
  margin-top: 18px;
  font-size: 15px;
  color: var(--lila-text);
}

.plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.plan-list li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 8px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.plan-list strong {
  color: var(--ink-strong);
  font: 500 19px/1.35 var(--f-display);
}

.plan-list span {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.plan-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--ink-muted);
}

/* Preguntas: por temas, cada pregunta se abre con un clic. */
.faq-group {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--gap);
  margin-top: 72px;
}

.faq-group > h2 {
  font-size: 24px;
  line-height: 1.25;
  padding-top: 18px;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  color: var(--ink-strong);
  font: 500 19px/1.35 var(--f-display);
  list-style: none;
  cursor: pointer;
  border-radius: 4px;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: '+';
  flex: none;
  width: 18px;
  font: 400 18px/1 var(--f-mono);
  color: var(--ink-muted);
  text-align: center;
  transition: transform 200ms;
}

.faq-list details[open] summary::after {
  content: '−';
}

.faq-list summary:hover::after {
  color: var(--ink-strong);
}

.faq-list details p {
  max-width: 40em;
  padding: 0 40px 22px 0;
  font-size: 16px;
  line-height: 1.6;
}

.faq-list details p + p {
  margin-top: -10px;
}

/* Contacto: dos formas de escribir, con líneas finas. */
.contact-ways {
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  max-width: 900px;
}

.contact-ways li {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 230px;
  align-items: center;
  gap: 12px 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.contact-ways h2 {
  font-size: 26px;
}

.contact-ways p {
  font-size: 16px;
  color: var(--ink-soft);
}

.contact-ways .btn {
  justify-self: end;
}

.contact-ways .pending-note {
  grid-column: 1 / -1;
  margin: 0;
}

.ask {
  margin: 14px 0 0;
  padding: 0 0 0 20px;
  font-size: 16px;
  line-height: 1.7;
}

.ask + .small {
  margin-top: 14px;
}

.ask li::marker {
  color: var(--wave);
}

/* Privacidad: el resumen con la línea lila del instrumento, y cada tema como en Preguntas (título a la izquierda). */
.policy-date {
  margin-top: 14px;
}

.policy-short {
  max-width: 820px;
  margin-top: 64px;
  padding-left: 22px;
  border-left: 1px solid var(--wave);
}

.policy-short h2 {
  font-size: 24px;
  line-height: 1.25;
}

.policy-short ul,
.policy-body ul {
  margin: 14px 0 0;
  padding: 0 0 0 20px;
}

.policy-short li {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
}

.policy-short li + li {
  margin-top: 8px;
}

.policy-short li::marker,
.policy-body li::marker {
  color: var(--wave);
}

.policy-sec {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--gap);
  margin-top: 64px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.policy-sec > h2 {
  font-size: 24px;
  line-height: 1.25;
  padding-top: 18px;
}

.policy-body {
  max-width: 40em;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.6;
}

.policy-body > * + * {
  margin-top: 14px;
}

.policy-body li + li {
  margin-top: 10px;
}

.policy-body strong {
  color: var(--ink-strong);
  font-weight: 600;
}

@media (max-width: 960px) {
  .policy-sec {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .policy-sec > h2 {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .policy-short {
    margin-top: 48px;
  }

  .policy-short li {
    font-size: 17px;
  }

  .policy-sec {
    margin-top: 48px;
  }
}

/* ---------- Responsivo ---------- */

@media (max-width: 1180px) {
  .pulsar-stage {
    --u: 5.4px;
  }

  .nav-links {
    gap: 22px;
  }

  .meet-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .meet-text {
    padding-right: 40px;
  }
}

/* El escritorio y la reunión, debajo de su texto: así la ventana conserva su tamaño real. */
@media (max-width: 1060px) {
  .apps-grid,
  .meet-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .apps-text,
  .meet-text {
    max-width: 640px;
    padding-right: 0;
  }

  .places {
    max-width: 520px;
  }

  .summary__body {
    gap: 20px;
  }
}

@media (max-width: 960px) {
  :root {
    --section: 104px;
  }

  /* La barra: Lila, Descargar y el botón del menú; los enlaces bajan en una lista. */
  .nav-inner {
    gap: 12px;
  }

  .menu-btn {
    display: grid;
  }

  .nav-cta {
    order: 2;
  }

  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 20px;
    background: var(--night);
    box-shadow: 0 1px 0 var(--line);
  }

  .nav.is-open .nav-links {
    display: flex;
  }

  .nav-links a:not(.btn) {
    padding: 14px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--line-fine);
  }

  .nav-links a[aria-current='page']::after {
    display: none;
  }

  .hero h1 {
    font-size: clamp(42px, 7.2vw, 64px);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      'title'
      'instrument'
      'field'
      'copy';
  }

  .instrument {
    margin-top: 40px;
    justify-self: center;
  }

  .field {
    margin-top: 40px;
  }

  .hero-copy {
    margin-top: 44px;
  }

  /* En un celular o una tableta, primero lo que se puede hacer ahí y después cómo se usa. */
  html.is-touch .hero-copy .os-line {
    margin-top: 0;
  }

  html.is-touch .hero-copy .lead {
    order: 9;
    margin-top: 28px;
  }

  .split {
    row-gap: 40px;
  }

  .split > *,
  .split > :first-child,
  .split > :nth-child(2),
  .split > .readout {
    grid-column: 1 / -1;
  }

  .split > .readout {
    justify-self: start;
    max-width: 440px;
  }

  .split-download > .price {
    max-width: 520px;
  }

  .downloads {
    grid-template-columns: minmax(0, 1fr);
  }

  .dl {
    padding: 28px 0 24px;
  }

  .dl + .dl {
    border-top: 1px solid var(--line);
  }

  .privacy-facts {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 64px;
  }

  .privacy-facts .fact {
    padding: 24px 0;
  }

  .privacy-facts .fact + .fact {
    border-top: 1px solid var(--line-fine);
  }

  .plan,
  .faq-group {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
  }

  .faq-group > h2 {
    padding-top: 0;
  }

  .faq-group {
    row-gap: 18px;
  }
}

/* La animación de privacidad, apilada: la voz entra al púlsar por la izquierda y la frase sale debajo. */
@media (max-width: 699px) {
  .vanish {
    margin-top: 48px;
  }

  .vanish-out {
    font-size: 19px;
  }

  .vanish-legend {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 20px;
  }

  .channel--text {
    padding-left: 0;
  }

  .channel {
    padding-top: 12px;
  }
}

@media (max-width: 720px) {
  .desk-wrap { height: 300px; --bar-h: 40px; --win-gap: 18px; }
  html.os-mac .desk-wrap { height: 326px; --bar-h: 52px; }
  .stage { min-height: 0; border-radius: 12px; }
  .desk { left: 12px; right: 12px; top: 12px; }
  html.os-mac .desk { top: 30px; }
  .wins { width: 100%; height: 100%; }
  .win, .seam { border-radius: 12px; }
  .win__bar { height: 30px; font-size: 12px; padding: 0 12px; }
  .win__dots { gap: 6px; }
  .win__dots i { width: 9px; height: 9px; }
  .chat, .mail, .term { inset: 30px 0 0; }
  .chat { padding: 0 12px 10px; }
  .chat__log { gap: 12px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px); mask-image: linear-gradient(180deg, transparent 0, #000 30px); }
  .msg { grid-template-columns: 26px 1fr; gap: 9px; }
  .msg__av { width: 26px; height: 26px; font-size: 11px; }
  .msg__who { font-size: 12px; margin-bottom: 2px; }
  .msg__text { font-size: 13px; line-height: 1.4; }
  .dfield--chat { margin-top: 10px; min-height: 40px; padding: 9px 7px 7px 12px; }
  .dfield--chat .dfield__box, .dfield--mail .dfield__box { font-size: 14px; }
  .send { width: 24px; height: 24px; }
  .mail { padding: 0 12px 10px; }
  .mail__row { height: 30px; font-size: 12px; }
  .mail__row--subject { display: none; }
  .dfield--mail { padding-top: 8px; }
  .dfield--mail .dfield__box { line-height: 1.45; }
  .mail__send { height: 26px; padding: 0 12px; font-size: 12px; }
  .term { padding: 0 12px 10px; font-size: 12px; line-height: 1.55; }
  .term__log { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px); mask-image: linear-gradient(180deg, transparent 0, #000 30px); }
  .term__out--old { margin-bottom: 6px; }
  .dfield--term { margin-top: 8px; padding: 8px 10px; }
  .dkeys { right: calc(50% + 50px); }
  .spill { width: 300px; height: 300px; }
  .dkeys__set { gap: 5px; }
  .dkeys kbd { font-size: 11px; padding: 6px 7px 7px; }
  .dkeys span span, .dkeys__set > span { font-size: 11px; }
  .taskbar__apps { gap: 2px; }
  .taskbar .app { width: 32px; height: 32px; }
  .taskbar .app svg { width: 17px; height: 17px; }
  .tray { right: 10px; gap: 10px; }
  .tray__clock { font-size: 10px; }
  .dock { height: 44px; gap: 5px; padding: 0 6px; border-radius: 13px; }
  .dock .app { width: 34px; height: 34px; border-radius: 9px; }
  .dock .app svg { width: 17px; height: 17px; }
  .menubar { height: 22px; font-size: 11px; padding: 0 10px; }
  .summary { padding: 20px 18px 20px; }
  .summary__head { flex-direction: column; gap: 14px; }
  .summary__body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .timeline { --name-w: 56px; padding-top: 48px; }
  .pulses { height: calc(48px + 3 * var(--lane-h)); }
  .meet-foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --section: 88px;
    --nav-h: 64px;
  }

  body {
    font-size: 16px;
  }

  .nav-cta {
    display: none;
  }

  .menu-cta {
    display: inline-flex !important;
    margin-top: 18px;
  }

  .brand {
    font-size: 21px;
  }

  .hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: 72px;
  }

  .nowrap-d {
    white-space: normal;
  }

  .pulsar-stage {
    --u: 5px;
  }

  .instrument {
    gap: 22px;
    margin-top: 26px;
  }

  .hero-copy {
    margin-top: 34px;
  }

  .keys {
    gap: 10px 12px;
  }

  .keyset {
    gap: 7px;
  }

  .keyset-alt {
    gap: 12px;
  }

  .keys kbd {
    min-width: 40px;
    height: 34px;
    padding: 0 9px;
    font-size: 13px;
  }

  .plus,
  .keyset-or {
    font-size: 13px;
  }

  .lead {
    font-size: 17px;
  }

  .field {
    margin-top: 30px;
  }

  .field-text {
    font-size: 19px;
  }

  .actions .btn {
    flex: 1 1 100%;
  }

  .pill-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .pill-specimen {
    justify-content: flex-start;
  }

  .page main {
    padding-top: calc(var(--nav-h) + 56px);
  }

  .page-block {
    margin-top: 64px;
  }

  .plan {
    margin-top: 48px;
  }

  .plan-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-group {
    margin-top: 56px;
  }

  .faq-list summary {
    font-size: 18px;
  }

  .faq-list details p {
    padding-right: 0;
  }

  .contact-ways li {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-ways .btn {
    justify-self: start;
  }
}

/* Reuniones en el celular: la línea de tiempo va arriba de la tarjeta, con los picos hacia abajo, así la causa (los
   pulsos) se ve antes que el resumen que llenan. */
@media (max-width: 600px) {
  .meet-demo { display: flex; flex-direction: column; }
  .meet-tag { order: -2; }
  .timeline { order: -1; display: flex; flex-direction: column; padding: 0 0 52px; margin-bottom: 6px; }
  .timeline__axis { order: -1; margin: 0 0 10px var(--name-w); }
  .pulses { top: 22px; bottom: 0; height: auto; }
  .pulse {
    top: calc(var(--lane) * var(--lane-h) + var(--lane-h) / 2);
    bottom: 0;
    background: linear-gradient(180deg, var(--wave) 0%, var(--star) 100%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C3.7 0 4.5 48 5 100C5.5 48 6.3 0 10 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C3.7 0 4.5 48 5 100C5.5 48 6.3 0 10 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    transform-origin: 50% 0;
  }
}

/* En un celular muy angosto, «Control + Option» no cabe a la izquierda de la pastilla: las dos teclas juntas, sin el +. */
@media (max-width: 360px) {
  html.os-mac .dkeys__set[data-set='dictar'] { gap: 4px; }
  html.os-mac .dkeys__set[data-set='dictar'] > span { display: none; }
  html.os-mac .dkeys kbd { padding: 5px 5px 6px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .caret,
  .dcaret {
    animation: none !important;
  }

  .typed,
  .pill,
  .pulsar-stage .pulsar,
  kbd {
    transition: none;
  }

  .typed.is-new,
  .pulse.is-lit {
    animation: none;
  }
}