/* Fadeno — página de historia (landing). Diseño de una sola dirección:
   escenas oscuras (la reunión, la noche violeta) alternadas con escenas claras
   (el producto resolviendo). No depende del tema del sistema. */

.story {
  --s-night: #0d0819;
  --s-night-2: #150c2a;
  --s-paper: #f7f5fc;
  --s-paper-2: #ffffff;
  --s-text-dark: #f3f0fb;
  --s-muted-dark: #a79fc4;
  --s-text-light: #17171c;
  --s-muted-light: #5b5670;
  color-scheme: dark;
  background: var(--s-night);
  color: var(--s-text-dark);
}

/* Cabecera siempre oscura y translúcida sobre la historia */
.story .site-header {
  background: rgba(13, 8, 25, 0.62);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.story .brand,
.story .site-header nav a:hover {
  color: #fff;
}
.story .site-header nav a,
.story .lang {
  color: var(--s-muted-dark);
}
.story .lang {
  border-color: rgba(255, 255, 255, 0.16);
}
.story .site-footer {
  margin-top: 0;
  border-top-color: rgba(255, 255, 255, 0.08);
  color: var(--s-muted-dark);
}
.story .site-footer a {
  color: var(--s-muted-dark);
}
.story main {
  max-width: none;
  padding: 0;
  margin: 0;
}
.story a {
  color: #c4b0ff;
}

/* Hilo de progreso: se dibuja de izquierda a derecha con la lectura */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--violet-light), #c4b0ff);
}

/* ——— Estructura de escena ——— */

.scene {
  position: relative;
  padding: clamp(6rem, 16vh, 11rem) var(--gutter);
  overflow: hidden;
}
.scene.light {
  background: var(--s-paper);
  color: var(--s-text-light);
  color-scheme: light;
}
.scene.light a {
  color: var(--violet);
}
.wrap {
  max-width: var(--wide);
  margin: 0 auto;
}
.wrap.narrow {
  max-width: 50rem;
}
.center {
  text-align: center;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.split.reverse .copy {
  order: 2;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split.reverse .copy {
    order: 0;
  }
}

/* ——— Tipografía de la historia ——— */

.display {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 10vw, 7.5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin: 0;
}
.headline {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 1.25rem;
}
.beat {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 2.2rem;
  text-wrap: balance;
}
.beat-dim {
  color: var(--s-muted-dark);
}
.kicker,
.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #b39bff;
  margin: 0 0 1.1rem;
}
.light .kicker {
  color: var(--violet);
}
.body {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--s-muted-dark);
  max-width: 34rem;
  margin: 0 0 1.1rem;
}
.center .body,
.body.center {
  margin-inline: auto;
}
.light .body {
  color: var(--s-muted-light);
}
.body.strong {
  color: var(--s-text-dark);
  font-weight: 600;
}
.gradient {
  background: linear-gradient(100deg, #fff 10%, #c4b0ff 55%, var(--violet-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.link-arrow {
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after {
  content: " →";
}

/* ——— 0 · Apertura ——— */

.hero {
  min-height: min(100svh, 60rem);
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(60rem 36rem at 50% 35%, rgba(116, 42, 255, 0.28), transparent 70%),
    radial-gradient(40rem 30rem at 85% 90%, rgba(54, 0, 139, 0.55), transparent 70%),
    var(--s-night);
  padding-top: 7rem;
}
.hero-thread {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(80rem, 140vw);
  translate: -50% -58%;
  opacity: 0.9;
  pointer-events: none;
}
.hero-thread path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 14;
  stroke-linecap: round;
}
.hero-copy {
  position: relative;
}
.lede {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.5;
  color: var(--s-muted-dark);
  margin: 1.8rem auto 0;
  max-width: 38rem;
}
.works-with {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin: 2.2rem 0 0;
  font-size: 0.9rem;
}
.works-with span {
  color: var(--s-muted-dark);
  margin-right: 0.3rem;
}
.works-with b {
  font-weight: 600;
  color: var(--s-text-dark);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 176, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
}
.scroll-cue {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  translate: -50% 0;
  font-size: 0.85rem;
  color: var(--s-muted-dark) !important;
  text-decoration: none;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(#c4b0ff, transparent);
}

/* ——— 1 · Antes ——— */

.before {
  background: linear-gradient(var(--s-night), var(--s-night-2));
  min-height: 90svh;
  display: grid;
  align-items: center;
}
.before .wrap {
  position: relative;
  z-index: 1;
}
.clock {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: #b39bff;
  margin: 0 0 2.5rem;
}
.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.notes li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  rotate: var(--r);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  color: rgba(243, 240, 251, 0.34);
  border-bottom: 1px dashed rgba(243, 240, 251, 0.18);
  padding: 0.2rem 0.3rem;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .notes {
    display: none;
  }
}

/* ——— Ventana de la app (maqueta en HTML, datos ficticios) ——— */

.window,
.finder,
.doc,
.translate,
.summary {
  margin: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--s-text-light);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px -20px rgba(6, 0, 20, 0.55),
    0 12px 30px -12px rgba(6, 0, 20, 0.35);
  overflow: hidden;
  text-align: left;
}
.win-bar,
.finder-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #f3f2f7;
  border-bottom: 1px solid #e6e3ee;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b6780;
}
.win-bar i,
.finder-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}
.win-bar i:nth-child(2),
.finder-bar i:nth-child(2) {
  background: #febc2e;
}
.win-bar i:nth-child(3),
.finder-bar i:nth-child(3) {
  background: #28c840;
}
.win-bar span,
.finder-bar span {
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-18px);
}
.win-body {
  padding: 1.25rem 1.4rem 1.4rem;
}
.live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.pill-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #d61f45;
  background: #ffe8ed;
  border: 1px solid #ffc3cf;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
}
.pill-live b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
}
.transcript {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.75rem;
  padding: 0.6rem 0.65rem;
  border-radius: 10px;
  font-size: 0.93rem;
  line-height: 1.4;
}
.row b {
  font-size: 0.85rem;
}
.row small {
  color: #8b86a0;
  font-size: 0.75rem;
  margin-left: 0.3rem;
}
.row p {
  margin: 0.15rem 0 0;
}
.who {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: #7c6fa8;
}
.who.a {
  background: #0f8b7a;
}
.who.t {
  background: #d9771f;
}
.who.c {
  background: #3867d6;
}
mark {
  background: rgba(116, 42, 255, 0.14);
  color: inherit;
  border-radius: 4px;
  padding: 0 0.15em;
}
.for-you {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #f4efff;
  border: 1px solid #e0d4ff;
  font-size: 0.93rem;
}
.for-you .label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--violet);
}
.for-you p {
  margin: 0.25rem 0 0;
}

/* ——— 3 · Ponerme al día ——— */

.catchup .center {
  margin-bottom: 3.5rem;
}
.catchup-stage {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  max-width: 40rem;
}
.catchup-btn {
  font: 600 1.15rem/1 var(--font);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 1.05rem 2.2rem;
  background: linear-gradient(95deg, #9b2cf5, var(--violet-light) 55%, #5b3bff);
  box-shadow: 0 14px 34px -10px rgba(116, 42, 255, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}
.spark {
  width: 1em;
  height: 1em;
  flex: none;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5 14.2 12.7 12 19 9.8 12.7 3.5 10.5 9.8 8.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5 14.2 12.7 12 19 9.8 12.7 3.5 10.5 9.8 8.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.summary {
  width: 100%;
  padding: 1.5rem 1.6rem;
  border: 1px solid #ebe6f7;
  box-shadow: 0 30px 70px -30px rgba(54, 0, 139, 0.35);
}
.summary-title {
  font-weight: 700;
  margin: 0 0 0.9rem;
}
.summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.summary li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  line-height: 1.45;
}
.summary em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8b86a0;
  padding-top: 0.2rem;
}
.summary li.mine {
  background: #f4efff;
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  margin: 0 -0.6rem;
}
.summary li.mine em {
  color: var(--violet);
}
.footnote {
  color: var(--s-muted-light);
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
}
@media (max-width: 520px) {
  .summary li {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
}

/* ——— 4 · Otro idioma ——— */

.language {
  background:
    radial-gradient(50rem 30rem at 50% 100%, rgba(116, 42, 255, 0.22), transparent 70%),
    var(--s-night);
}
.language .narrow {
  margin-bottom: 4rem;
}
.language .beat {
  color: var(--s-muted-dark);
}
.translate {
  max-width: 44rem;
  margin: 0 auto 2.5rem;
  padding: 1.3rem 1.5rem 1.6rem;
}
.translate-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.translate-head small {
  color: #8b86a0;
}
.toggle {
  margin-left: auto;
  display: inline-flex;
  background: #f1eef8;
  border-radius: 999px;
  padding: 3px;
}
.toggle button {
  font: 600 0.8rem/1 var(--font);
  border: 0;
  background: transparent;
  color: #6b6780;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}
.toggle button[aria-pressed="true"] {
  background: #fff;
  color: var(--violet);
  box-shadow: 0 1px 3px rgba(23, 23, 28, 0.15);
}
.translate-body {
  display: grid;
  margin-top: 1rem;
}
.translate-body p {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  transition: opacity 0.6s var(--ease), filter 0.6s var(--ease), translate 0.6s var(--ease);
}
.translate-body[data-mode="en"] .t-es,
.translate-body[data-mode="es"] .t-en {
  opacity: 0;
  filter: blur(6px);
  translate: 0 6px;
  visibility: hidden;
}

/* ——— 5 · Minuta ——— */

.doc {
  padding: 1.8rem 1.9rem 2rem;
  border: 1px solid #ebe6f7;
  box-shadow: 0 40px 80px -40px rgba(54, 0, 139, 0.4);
}
.doc header {
  border-bottom: 1px solid #efebf7;
  padding-bottom: 1rem;
  margin-bottom: 0.6rem;
}
.doc-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--violet);
}
.doc h3 {
  margin: 0.25rem 0;
  font-size: 1.4rem;
}
.doc-meta {
  margin: 0;
  color: #8b86a0;
  font-size: 0.85rem;
}
.doc h4 {
  margin: 1.2rem 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6780;
}
.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.doc-list li {
  position: relative;
  padding-left: 1.2rem;
  line-height: 1.45;
}
.doc-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet-light);
}
.tasks li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.tasks li::before {
  width: 10px;
  height: 10px;
  top: 0.45em;
  left: 0;
  border-radius: 3px;
  background: transparent;
  border: 1.5px solid #b9acd9;
}
.owner {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--violet);
  background: #f4efff;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

/* ——— 6 · Memoria ——— */

.memory {
  background: linear-gradient(var(--s-night-2), var(--s-night));
}
.question {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 auto 2.5rem;
  min-height: 2.3em;
  text-wrap: balance;
}
.caret {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 4px;
  background: var(--violet-light);
  vertical-align: -0.08em;
}
.answer {
  max-width: 38rem;
  margin: 0 auto 3rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(196, 176, 255, 0.22);
  border-radius: 16px;
  padding: 1.3rem 1.5rem;
  font-size: 1.12rem;
  line-height: 1.55;
}
.answer p {
  margin: 0;
}
.answer .spark {
  color: #c4b0ff;
  margin-right: 0.5rem;
  vertical-align: -0.1em;
}
.answer .source {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--s-muted-dark);
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

/* ——— 7 · Tu Mac ——— */

.finder {
  border: 1px solid #ebe6f7;
  box-shadow: 0 40px 80px -40px rgba(54, 0, 139, 0.35);
}
.finder ul {
  list-style: none;
  margin: 0;
  padding: 0.6rem;
}
.finder li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  font-size: 0.95rem;
}
.finder li:first-child {
  background: #eef4ff;
}
.folder {
  width: 22px;
  height: 17px;
  border-radius: 3px;
  background: linear-gradient(#78b7ff, #4a93f0);
  position: relative;
  flex: none;
}
.folder::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 9px;
  height: 4px;
  border-radius: 2px 2px 0 0;
  background: #6aaaf8;
}
.status {
  margin: 0;
  padding: 0.8rem 1.2rem;
  border-top: 1px solid #efebf7;
  font-size: 0.82rem;
  color: #3f7d53;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.shield {
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: #34a853;
  flex: none;
}

/* ——— 8 · Historia ——— */

.founder {
  background: #050308;
  padding-block: clamp(5rem, 12vh, 8rem);
}
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.portrait {
  display: block;
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 44rem;
  object-fit: cover;
  object-position: 50% 30%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 62%, transparent 100%);
}
blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.45;
  color: #efeaf9;
}
blockquote p {
  margin: 0 0 1.2rem;
}
blockquote p:first-child::before {
  content: "“";
  color: var(--violet-light);
}
blockquote p:last-child::after {
  content: "”";
  color: var(--violet-light);
}
.signature {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.15rem;
}
.signature span {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--s-muted-dark);
}
@media (max-width: 760px) {
  .founder-grid {
    grid-template-columns: 1fr;
  }
  .portrait {
    max-width: 17rem;
    margin: 0 auto;
  }
}

/* ——— 9 · Cierre ——— */

.finale {
  background:
    radial-gradient(46rem 28rem at 50% 30%, rgba(116, 42, 255, 0.3), transparent 70%),
    var(--s-night);
}
.finale-icon {
  width: 112px;
  height: 112px;
  margin-bottom: 2rem;
  filter: drop-shadow(0 20px 40px rgba(116, 42, 255, 0.45));
}
.cta {
  margin: 2.5rem 0 2rem;
}
.button-soon {
  display: inline-block;
  font-weight: 600;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  background: #fff;
  color: var(--violet-dark);
}
.facts {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  color: var(--s-muted-dark);
  font-size: 0.95rem;
}
.facts li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet-light);
  margin-right: 0.55rem;
  vertical-align: 0.15em;
}
.more {
  color: var(--s-muted-dark);
  font-size: 0.95rem;
}

/* ——— Movimiento ———
   Sin JavaScript (o con movimiento reducido) todo está visible desde el inicio.
   Con JS, los elementos entran con una curva serena, sin rebotes. */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.85s var(--ease), translate 0.85s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .js .reveal.in {
    opacity: 1;
    translate: 0 0;
  }

  /* El hilo de la apertura se dibuja de izquierda a derecha en 850 ms y se estabiliza */
  .js .hero-thread path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.85s var(--ease) 0.2s forwards;
  }
  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  .js .notes li {
    opacity: 0;
    transition: opacity 1.2s var(--ease), translate 1.6s var(--ease);
    translate: 0 14px;
  }
  .js .before.in .notes li {
    opacity: 1;
    translate: 0 0;
  }
  .js .before.in .notes li:nth-child(2) { transition-delay: 0.25s; }
  .js .before.in .notes li:nth-child(3) { transition-delay: 0.5s; }
  .js .before.in .notes li:nth-child(4) { transition-delay: 0.75s; }
  .js .before.in .notes li:nth-child(5) { transition-delay: 1s; }

  /* El momento */
  .js .moment .row,
  .js .moment .for-you {
    opacity: 0;
    translate: 0 10px;
    transition: opacity 0.6s var(--ease), translate 0.6s var(--ease), filter 0.8s var(--ease);
  }
  .js .moment .row.in,
  .js .moment .for-you.in {
    opacity: 1;
    translate: 0 0;
  }
  .js .moment.blur .row:not(:last-child) {
    filter: blur(2.5px);
    opacity: 0.55;
  }
  .moment mark {
    transition: background 0.5s var(--ease), color 0.5s var(--ease);
  }
  .js .moment.hit mark {
    background: var(--violet-light);
    color: #fff;
  }

  /* Ponerme al día */
  .js .catchup-btn {
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }
  .js .catchup-btn.pressed {
    transform: scale(0.96);
    box-shadow: 0 6px 16px -8px rgba(116, 42, 255, 0.6);
  }
  .js .summary {
    opacity: 0;
    translate: 0 16px;
    transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
  }
  .js .summary.in {
    opacity: 1;
    translate: 0 0;
  }
  .js .summary li {
    opacity: 0;
    translate: 0 8px;
    transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
  }
  .js .summary li.in {
    opacity: 1;
    translate: 0 0;
  }

  /* Minuta */
  .js .doc .item {
    opacity: 0;
    translate: -8px 0;
    transition: opacity 0.5s var(--ease), translate 0.5s var(--ease);
  }
  .js .doc .item.in {
    opacity: 1;
    translate: 0 0;
  }

  /* Memoria */
  .js .answer {
    opacity: 0;
    translate: 0 14px;
    transition: opacity 0.8s var(--ease), translate 0.8s var(--ease);
  }
  .js .answer.in {
    opacity: 1;
    translate: 0 0;
  }
  .caret {
    animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink {
    50% {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .caret {
    display: none;
  }
  .progress {
    display: none;
  }
}