/* ═══════════════════════════════════════════════════════════════════
 * Tranki — landing, desktop layout (900px and up)
 *
 * The scroll is the method. One card stays pinned on the left while the page
 * walks through its life — hoy, mañana, en 5 días… — and the empty space
 * between stops grows the way the review intervals do. Each stop the card
 * reaches, it turns over once: that is the review.
 * ═══════════════════════════════════════════════════════════════════ */

:root {
  --gutter: 2.5rem;
  --container: 70rem;
}

.only-desktop {
  display: block;
}

.wrap,
.nav,
.footer__inner {
  max-width: var(--container);
  padding-inline: var(--gutter);
}

.wrap {
  margin-inline: auto;
}

.nav {
  height: 5rem;
}

/* ─── Hero ────────────────────────────────────────────────────────── */
.hero {
  padding-block: 4rem 5rem;
}

.hero h1 {
  max-width: 13ch;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.6rem, 6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero p {
  max-width: 38ch;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 1.2rem;
  text-wrap: pretty;
}

.hero .cta {
  display: inline-flex;
  margin-top: 2.25rem;
}

/* ─── Journey: a card pinned beside stops on a rail ───────────────── */
.journey {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  column-gap: 6rem;
  padding-block: 2rem 4rem;
}

.pin {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: calc(50vh - 13rem);
  align-self: start;
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.pin__scene {
  width: 100%;
  perspective: 1200px;
}

.pin__card {
  position: relative;
  aspect-ratio: 5 / 7;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease);
}

.side {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 1.5rem 1.35rem;
  border-radius: 1.75rem;
  background: var(--hue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  box-shadow:
    0 8px 0 var(--hue-edge),
    0 30px 50px -26px rgb(2 6 24 / 0.55);
  backface-visibility: hidden;
  transition:
    background-color 0.4s,
    box-shadow 0.4s;
}

.side:last-child {
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .pin__card {
    transition: none;
  }
}

.face {
  width: 100%;
}

.face[hidden],
.shows-back .front,
.side:not(.shows-back) .back {
  display: none;
}

/* A short answer fills the card, like FitText does in the app. */
.face > .back {
  font-size: 2.8rem;
}

.face--image {
  display: grid;
  justify-items: center;
  gap: 1rem;
  font-size: 1.25rem;
}

.face--image > .back {
  font-size: 1.6rem;
}

.polaroid {
  width: 62%;
  padding: 0.4rem 0.4rem 1.4rem;
  background: #fff;
  rotate: 2deg;
  box-shadow: 0 6px 16px -8px rgb(2 6 24 / 0.6);
}

.flag {
  display: block;
  aspect-ratio: 1;
  background: linear-gradient(90deg, #009246 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%);
}

/* Test: the app's "franja" pills — white, a coloured band with the letter. */
.face--test {
  font-size: 1.15rem;
  text-align: center;
}

.face--test ol {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.1rem;
  counter-reset: option;
}

.face--test li {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #fff;
  color: #27272a;
  font-family: var(--body);
  font-size: 0.95rem;
  text-align: left;
  box-shadow: 0 3px 0 rgb(0 0 0 / 0.14);
  counter-increment: option;
}

.face--test li::before {
  content: counter(option, upper-alpha);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  flex-shrink: 0;
  background: var(--opt);
  color: #fff;
  font-size: 0.78em;
  font-weight: 900;
}

.face--test li:nth-child(1) { --opt: #2b7fff; }
.face--test li:nth-child(2) { --opt: #8e51ff; }
.face--test li:nth-child(3) { --opt: #fe9a00; }
.face--test li:nth-child(4) { --opt: #ff2056; }

.face--test li span {
  padding: 0.5em 0.6em;
}

.shows-back .face--test li:not(.ok) {
  opacity: 0.5;
}

.shows-back .face--test li:not(.ok)::before {
  background: #d4d4d8;
}

.shows-back .face--test .ok {
  color: #047857;
  box-shadow: 0 0 0 2px #00d492, 0 3px 0 rgb(0 0 0 / 0.14);
}

.shows-back .face--test .ok::before {
  content: "✓";
  background: #00bc7d;
}

.face--blanks {
  font-size: 1.3rem;
  line-height: 1.35;
}

.face--blanks mark {
  padding: 0.05em 0.35em;
  border-radius: 0.35em;
  background: #fff;
  color: var(--ink);
  box-decoration-break: clone;
}

.pin__when {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.pin__when span {
  display: block;
  font-weight: 600;
  color: var(--muted);
}

.stops {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  padding-left: 2.5rem;
}

.stops::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  border-radius: 2px;
  background: var(--hairline);
}

.stop {
  position: relative;
  margin-top: var(--gap, 0);
}

.stop::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 0.45rem;
  width: 1.2rem;
  height: 1.6rem;
  border-radius: 0.35rem;
  background: var(--hue);
  box-shadow: 0 3px 0 var(--hue-edge);
}

/* The gaps are the argument: each one longer than the last. */
.stop:nth-child(2) { --gap: 6rem; }
.stop:nth-child(3) { --gap: 10rem; }
.stop:nth-child(4) { --gap: 16rem; }
.stop:nth-child(5) { --gap: 24rem; }

.stop__when {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--hue-edge);
}

.stop h2 {
  margin-top: 0.15rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.stop p:not([class]) {
  max-width: 38ch;
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 1.1rem;
  text-wrap: pretty;
}

.grades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

.grades li {
  padding: 0.35rem 0.7rem;
  border-radius: 0.55rem;
  background: var(--g);
  color: var(--g-text);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 2px 0 var(--g-edge);
}

/* ─── Close ───────────────────────────────────────────────────────── */
.close {
  margin-top: 2rem;
}

.close__panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3rem;
  padding: 3.5rem;
  border-radius: 1.75rem;
  background: var(--paper);
}

.close h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.close p {
  max-width: 40ch;
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 1.02rem;
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.footer {
  padding-block: 2.5rem 3rem;
}

.footer__inner p {
  margin-right: auto;
}