/* ─────────────────────────────────────────────────────────────────────────
   Sherpa — Cómo funciona
   Tokens mirror index-styles.css so the two pages read as one site.
───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --brand:   #e6005c;
  --brand2:  #7c3aed;
  --text:    #0f172a;
  --muted:   #475569;
  --surface: #f7f7f7;
  --white:   #fff;
  --border:  rgba(15, 23, 42, .08);
  --shadow-sm: 0 8px 28px rgba(15, 23, 42, .07);
  --shadow-lg: 0 24px 70px rgba(15, 23, 42, .16);
  --radius:  18px;
  --container: 1200px;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }

h1, h2, h3, h4, .logo {
  font-family: var(--font-head);
  letter-spacing: -.025em;
  line-height: 1.12;
  color: var(--text);
}
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; }
h3 { font-size: clamp(1.02rem, 1.7vw, 1.2rem); font-weight: 700; }
p  { color: var(--muted); line-height: 1.62; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ── Header ───────────────────────────────────────────────────────────── */
/* Scoped to the direct child of body on purpose. A bare `header` selector also
   matches <header class="flow-head"> inside every flow, which handed each one a
   translucent white background, a sticky position and z-index 60 — a white slab
   floating over the walkthrough. */
body > header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-size: 1.4rem; font-weight: 800; color: var(--brand); }
.header-nav { display: flex; align-items: center; gap: 26px; }
.header-nav a { color: var(--text); font-size: .93rem; font-weight: 500; }
.header-nav a:hover { color: var(--brand); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 26px rgba(230,0,92,.22); }
.btn-nav { padding: 9px 18px; font-size: .88rem; background: var(--brand); color: #fff; }
.btn-ghost { background: #fff; color: var(--text); border-color: var(--border); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 180ms ease, box-shadow 180ms ease; }
  .btn:hover { transform: translateY(-2px); }
}
@media (max-width: 860px) { .header-nav a:not(.btn) { display: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 72px 0 40px; text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(230,0,92,.08); color: var(--brand);
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  margin-bottom: 18px;
}
.hero p { max-width: 620px; margin: 18px auto 0; font-size: 1.08rem; }

/* ── Role switch ──────────────────────────────────────────────────────── */
.roles { display: flex; justify-content: center; gap: 8px; margin: 30px 0 8px; flex-wrap: wrap; }
.role-btn {
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: #fff;
  font-family: var(--font-body); font-size: .93rem; font-weight: 600; color: var(--muted);
}
.role-btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }

/* ── Index ────────────────────────────────────────────────────────────── */
.toc { padding: 26px 0 8px; }
.toc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.toc-item {
  display: flex; gap: 12px; align-items: baseline;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px;
  background: #fff; color: var(--text); font-weight: 600; font-size: .93rem;
}
.toc-item:hover { border-color: var(--brand); }
.toc-num { color: var(--brand); font-weight: 800; font-size: .8rem; }

/* ── Flow blocks ──────────────────────────────────────────────────────── */
/* No rule and no alternating band. Flows are separated by space and by their
   own numbered eyebrow; a hairline plus a grey stripe every other section read
   as arbitrary banding rather than as structure. */
.flow { padding: 84px 0; }
.flow[hidden] { display: none; }

.flow-head { max-width: 720px; margin-bottom: 34px; }
.flow-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 12px;
}
.flow-actor {
  padding: 3px 9px; border-radius: 999px; background: rgba(15,23,42,.06);
  color: var(--muted); letter-spacing: .04em;
}
.flow-head p { margin-top: 12px; font-size: 1.05rem; }

.flow-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; }
.meta-block { font-size: .84rem; }
.meta-label {
  display: block; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); opacity: .75; font-size: .68rem; margin-bottom: 7px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 11px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border); font-size: .82rem; font-weight: 600; color: var(--text);
}
.chip-start { background: var(--text); color: #fff; border-color: var(--text); }

/* Scrollytelling: the phone sticks, the steps scroll past it. */
.walk { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; align-items: start; }
/* Centred so a short flow's three steps sit against the middle of the phone
   rather than clinging to its top edge with a column of dead space beneath. On
   a long flow the steps are taller than the phone and this does nothing. */
.walk-steps { display: flex; flex-direction: column; gap: 14px; align-self: center; }

.step {
  position: relative;
  display: grid; grid-template-columns: 34px 1fr; gap: 16px;
  width: 100%; text-align: left;
  padding: 20px 22px; border-radius: var(--radius);
  border: 1px solid transparent; background: transparent;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.step:hover { background: rgba(15, 23, 42, .03); }
.step:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.step.is-active { background: #fff; border-color: var(--border); box-shadow: var(--shadow-sm); }
.step.is-active:hover { background: #fff; }

.step-num {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(15,23,42,.06); color: var(--muted);
  font-size: .8rem; font-weight: 800; font-family: var(--font-head);
}
.step.is-active .step-num { background: var(--brand); color: #fff; }

.step-text { display: block; }
.step-title {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); line-height: 1.2;
  letter-spacing: -.02em; margin-bottom: 5px;
}
.step-body { display: block; color: var(--muted); font-size: .93rem; line-height: 1.55; }

/* The dwell, shown as a small dial in the corner of the active step rather than
   a bar under it. A full-width bar draws the eye to the countdown instead of to
   the words, which is the wrong thing to be looking at. */
.step-bar {
  position: absolute; top: 14px; right: 14px;
  width: 14px; height: 14px; border-radius: 50%;
  background: conic-gradient(var(--brand) var(--sweep, 0turn), transparent 0);
  box-shadow: inset 0 0 0 1.5px rgba(230, 0, 92, .22);
  opacity: 0;
  transition-property: --sweep;
  transition-timing-function: linear;
  transition-duration: 0ms;
}
.step.is-active .step-bar { opacity: 1; }

/* --sweep has to be a registered property or it cannot be transitioned: an
   unregistered custom property has no type, so the browser can only swap it at
   the end and the dial jumps from empty to full. */
@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}

@media (prefers-reduced-motion: no-preference) {
  .step { transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
  .step-num { transition: background 220ms ease, color 220ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  /* No autoplay in this mode, so a progress bar would sit at zero forever. */
  .step-bar { display: none; }
}

.walk-stage { position: sticky; top: 96px; }
.phone {
  position: relative; width: 320px; margin: 0 auto;
  border-radius: 34px; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  aspect-ratio: 320 / 653;
}
.phone img, .phone video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0;
}
.phone img.is-shown, .phone video.is-shown { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .phone img, .phone video { transition: opacity 320ms ease; }
}

/* Single-asset blocks (video-led) don't need the sticky column. */
.flow-solo { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 60px; align-items: center; }

.callout {
  margin-top: 26px; padding: 22px 24px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--brand);
  max-width: 720px;
}
.callout h4 { font-family: var(--font-head); font-size: .95rem; margin-bottom: 10px; }
.callout ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.callout li { position: relative; padding-left: 20px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.callout li::before { content: "—"; position: absolute; left: 0; color: var(--brand); }

.result {
  display: flex; align-items: center; gap: 12px;
  margin-top: 26px; padding: 16px 20px; border-radius: 14px;
  background: rgba(230,0,92,.05); max-width: 720px;
}
.result strong { font-family: var(--font-head); font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); }
.result span { color: var(--text); font-weight: 500; font-size: .96rem; }

.note { margin-top: 16px; font-size: .86rem; color: var(--muted); opacity: .85; max-width: 720px; }

/* ── Supporting strip ─────────────────────────────────────────────────── */
.extras { padding: 76px 0; border-top: 1px solid var(--border); }
.extras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 34px; }
.extra { padding: 26px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; }
.extra h3 { margin: 14px 0 8px; }
.extra p { font-size: .93rem; }
.extra-icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(230,0,92,.08); color: var(--brand);
}

/* ── CTA + footer ─────────────────────────────────────────────────────── */
.cta { padding: 84px 0; text-align: center; background: var(--text); }
.cta h2, .cta p { color: #fff; }
.cta p { color: rgba(255,255,255,.72); max-width: 520px; margin: 14px auto 28px; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

footer { padding: 40px 0; border-top: 1px solid var(--border); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.footer-inner a { color: var(--muted); font-size: .88rem; }
.footer-inner a:hover { color: var(--brand); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-inner span { color: var(--muted); font-size: .84rem; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .walk, .flow-solo { grid-template-columns: 1fr; gap: 30px; }

  /* The sticky phone becomes a rail the reader swipes: a sticky element in a
     single-column layout just pins to the top and covers the very steps it is
     meant to illustrate. The rail sits before the steps in the markup, so the
     screenshots are the first thing under the heading rather than a reward for
     scrolling past every step. */
  .walk-stage { display: none; }
  .phone { display: none; }
  .rail {
    display: flex; gap: 14px; overflow-x: auto; padding: 4px 24px 18px;
    margin: 0 -24px; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > figure { flex: 0 0 216px; scroll-snap-align: center; }
  .rail img, .rail video {
    width: 216px; border-radius: 22px; border: 1px solid var(--border);
    box-shadow: var(--shadow-sm); background: #fff;
  }
  .rail figcaption {
    margin-top: 9px; font-size: .78rem; color: var(--muted);
    font-weight: 600; text-align: center;
  }
  .step.is-active { box-shadow: none; }
}
@media (min-width: 1001px) { .rail { display: none; } }
@media (max-width: 640px) {
  .flow { padding: 54px 0; }
  .step { padding: 14px 0; grid-template-columns: 30px 1fr; gap: 12px; }
  .step.is-active { background: transparent; border-color: transparent; }
}

/* A flow with no captured assets yet: steps run full width instead of leaving
   an empty phone frame beside them. */
.walk-textonly { grid-template-columns: 1fr; }