/* The public site (tinario.com). Same tokens as the apps
   (packages/shared/ui.css): keep the colors and fonts in sync by hand, since
   this site has no build step. Fonts are served from here, not from Google. */

@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Fraunces Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Instrument Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --font: "Instrument Sans Variable", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces Variable", Georgia, "Times New Roman", serif;

  --bg: #f5f8f7;
  --surface: #ffffff;
  --surface-2: #eef4f2;
  --hover: #e6efec;
  --border: #dde7e4;
  --border-strong: #c5d4d0;
  --text: #12302b;
  --text-2: #4a6660;
  --muted: #7e928d;

  /* Teal: the brand, and what's good (a requirement met, a high match). */
  --accent: #0a8273;
  --accent-hover: #086b5f;
  --accent-soft: #ddf2ee;
  --accent-text: #ffffff;

  --success: #0a8273;
  --success-soft: #ddf2ee;
  /* Pink: what's not there (not met, discarded). */
  --danger: #d81b60;
  --danger-soft: #fce4ec;
  /* Steel blue: in part, medium, and what needs attention (follow-ups). */
  --warning: #3a6ea5;
  --warning-soft: #e3ecf7;
  --info: #6d55b0;
  --info-soft: #ece8f7;
  --teal: #1b7fa3;
  --teal-soft: #dff0f6;
  /* Only for candidate statuses (packages/shared/pipeline.ts): more of them
     than meanings, so they get colors of their own. */
  --amber: #b8730f;
  --amber-soft: #fbf0dc;
  --indigo: #4256c9;
  --indigo-soft: #e6e9fa;

  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* In and out gently: for what moves a long way (the hero's panel). */
  --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --shadow-sm: 0 1px 2px rgba(15, 45, 40, 0.06);
  --shadow: 0 4px 14px rgba(15, 45, 40, 0.08), 0 1px 3px rgba(15, 45, 40, 0.06);
  --shadow-lg: 0 24px 60px rgba(15, 45, 40, 0.14), 0 4px 14px rgba(15, 45, 40, 0.08);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Deep teal-black, not neutral grey. */
    --bg: #0d1716;
    --surface: #13201e;
    --surface-2: #1a2a28;
    --hover: #203331;
    --border: #273a37;
    --border-strong: #35504b;
    --text: #e6f2ef;
    --text-2: #a9c2bc;
    --muted: #7d948f;

    --accent: #3cc7b0;
    --accent-hover: #63d6c3;
    --accent-soft: #123a34;
    --accent-text: #0d1716;

    --success: #3cc7b0;
    --success-soft: #123a34;
    --danger: #f06292;
    --danger-soft: #3d1a27;
    --warning: #85aee6;
    --warning-soft: #1b2a40;
    --info: #b2a3ec;
    --info-soft: #262245;
    --teal: #66bfdb;
    --teal-soft: #15303b;
    --amber: #e8b45c;
    --amber-soft: #3a2b14;
    --indigo: #9aa8f2;
    --indigo-soft: #212748;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

/* The header's links glide to their section, unless motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font: 16px/1.6 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.015em;
}

a {
  color: inherit;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 720px) {
  .wrap {
    padding: 0 32px;
  }
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: 8px;
}

.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.site-nav a:not(.btn) {
  position: relative;
  padding: 6px 12px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-nav a:not(.btn):hover,
.site-nav a[aria-current="true"] {
  color: var(--text);
}

.site-nav .btn {
  margin-left: 8px;
}

.site-nav .btn + .btn {
  margin-left: 4px;
}

/* The section you're in: a pill that glides from link to link (motion.js
   sets its place and width). */
.nav-pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 32px;
  pointer-events: none;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
  opacity: 0;
  transform: translate(var(--pill-x, 0), -50%);
  width: var(--pill-w, 0);
  transition:
    transform 0.4s var(--ease-out),
    width 0.4s var(--ease-out),
    opacity 0.25s ease;
}

.nav-pill.is-shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nav-pill {
    transition: opacity 0.25s ease;
  }
}

@media (max-width: 640px) {
  .site-nav .optional {
    display: none;
  }
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  font: 600 14px/1 var(--font);
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s;
}

.btn:hover {
  border-color: var(--text-2);
}

.btn-primary {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* A soft halo, still: enough to draw the eye without tiring it. */
.hero .btn-primary {
  box-shadow:
    0 0 18px color-mix(in srgb, var(--accent) 30%, transparent),
    0 10px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent);
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    background 0.15s;
}

.hero .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 26px color-mix(in srgb, var(--accent) 45%, transparent),
    0 16px 32px -12px color-mix(in srgb, var(--accent) 85%, transparent);
}

.btn-lg {
  height: 48px;
  padding: 0 24px;
  font-size: 15px;
}

/* The buttons inside the illustrations keep the apps' shape. */
.stage .btn,
.panel .btn {
  border-radius: var(--radius);
}

.btn-xs {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.btn-sm {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

a:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* The app's windows on a dark band (the hero's, the tour's): the app as it
   looks in dark mode, in light mode too (the same values as the media query
   above). */
.hero .mock,
.dark-band .stage {
  color: var(--text);

  --bg: #0d1716;
  --surface: #13201e;
  --surface-2: #1a2a28;
  --hover: #203331;
  --border: #273a37;
  --border-strong: #35504b;
  --text: #e6f2ef;
  --text-2: #a9c2bc;
  --muted: #7d948f;

  --accent: #3cc7b0;
  --accent-hover: #63d6c3;
  --accent-soft: #123a34;
  --accent-text: #0d1716;

  --success: #3cc7b0;
  --success-soft: #123a34;
  --danger: #f06292;
  --danger-soft: #3d1a27;
  --warning: #85aee6;
  --warning-soft: #1b2a40;
  --info: #b2a3ec;
  --info-soft: #262245;
  --teal: #66bfdb;
  --teal-soft: #15303b;
  --amber: #e8b45c;
  --amber-soft: #3a2b14;
  --indigo: #9aa8f2;
  --indigo-soft: #212748;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* The dark teal bands (the hero and the roles under it, Cómo funciona, the
   FAQ, the footer) and the header over them: their own colours, the same in
   light and dark mode. */
.dark-band,
.hero .wrap > div:first-child,
.site-header.on-dark {
  --bg: #0f2d28;
  --surface: rgba(230, 242, 239, 0.06);
  --surface-2: rgba(230, 242, 239, 0.1);
  --text: #e6f2ef;
  --text-2: #a9c2bc;
  --muted: #7d948f;
  --border: rgba(230, 242, 239, 0.14);
  --border-strong: rgba(230, 242, 239, 0.28);
  --accent: #3cc7b0;
  --accent-hover: #63d6c3;
  --accent-soft: rgba(60, 199, 176, 0.16);
  --accent-text: #0d1716;
  color: var(--text);
}

/* Hero */

.hero {
  padding: 32px 0 72px;
  background: #0f2d28;
  /* The illustration's backdrop sticks out a little; never a sideways scroll. */
  overflow-x: clip;
}

.hero .wrap {
  display: grid;
  /* minmax(0, …): the evidence's names don't wrap (they end in "…"), and
     without it they'd widen the column past a phone's screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

@media (min-width: 960px) {
  .hero {
    padding: 40px 0 88px;
  }

  .hero .wrap {
    gap: 40px;
  }
}

/* The words, aligned left above the window (beside it on wide screens). */
.hero .wrap > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.hero h1 {
  font-size: clamp(36px, 6vw, 58px);
  line-height: 1.06;
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.lead {
  max-width: 34em;
  margin-top: 16px;
  font-size: clamp(17px, 2vw, 19px);
  color: var(--text-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* On a phone the two buttons take the whole width, one per line. */
@media (max-width: 640px) {
  .hero .actions {
    flex-direction: column;
    align-self: stretch;
  }

  .hero .actions .btn {
    width: 100%;
  }
}

/* Wide screens: the text beside the window, so the whole evaluation is in
   view on arrival, even on a 1366 × 768 laptop. Not before 1200px: narrower,
   the window beside the text is under 700px and would take the phone's
   layout (the panel over the profile). */
@media (min-width: 1200px) {
  .hero {
    padding: 48px 0 72px;
  }

  .hero .mock-caption {
    margin-top: 14px;
  }

  .hero .wrap {
    max-width: 1360px;
    grid-template-columns: minmax(0, clamp(368px, 28vw, 416px)) minmax(0, 1fr);
    gap: clamp(32px, 3.4vw, 48px);
  }

  .hero .wrap > div:first-child {
    margin: 0;
  }

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

  .hero .lead {
    font-size: 17px;
  }

  .hero .actions {
    gap: 10px;
  }

  /* Side by side when they fit, the second below when not; never squeezed. */
  .hero .actions .btn {
    flex: none;
    padding: 0 18px;
    white-space: nowrap;
  }

  .hero .mock {
    max-width: none;
  }
}

/* The hero's illustration: a LinkedIn profile (its layout, not its brand)
   and Tinario's side panel. The same story on any screen: Tinario reads the
   profile, then the panel brings the evaluation. When the scene is wide the
   panel docks beside the profile; when it's narrow it slides over it,
   leaving the photo and the name in sight. */

/* The scene's own width decides the layout (a container query). */
.mock {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  container-type: inline-size;
}

figure.mock {
  margin: 0 auto;
}

.scene {
  position: relative;
  display: grid;
  align-items: start;
}

.scene > * {
  grid-area: 1 / 1;
}

/* Narrow: the panel over the profile, below its photo. */
.scene .panel {
  justify-self: end;
  width: calc(100% - 22px);
  margin-top: 132px;
}

.profile-page {
  display: grid;
  align-content: start;
  gap: 8px;
  grid-auto-rows: max-content;
  padding-bottom: 10px;
  overflow: hidden;
  font-size: 13px;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
}

/* Wide: side by side, the panel docked on the right as Chrome does. */
@container (min-width: 700px) {
  .scene {
    grid-template-columns: minmax(0, 1fr) minmax(0, 410px);
    gap: 14px;
  }

  /* As tall as the panel, cut like a screen: the page under the site's
     bar scrolls. */
  .scene .profile-page {
    grid-area: 1 / 1;
    grid-template-rows: auto minmax(0, 1fr);
    align-self: stretch;
    contain: size;
    padding-bottom: 0;
  }

  .scene .profile-scroll {
    padding-bottom: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }

  .scene .panel {
    grid-area: 1 / 2;
    width: auto;
    margin-top: 0;
  }
}

/* The page under the site's bar: beside the panel it scrolls, and Tinario
   scrolls it as it reads (motion.js). */
.profile-scroll {
  position: relative;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
}

.ghost-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.ghost-logo {
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--border-strong);
  border-radius: 4px;
}

.ghost-search {
  width: min(38%, 160px);
  height: 18px;
  background: var(--surface-2);
  border-radius: 999px;
}

.ghost-icons {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.ghost-icons i {
  width: 14px;
  height: 14px;
  background: var(--hover);
  border-radius: 4px;
}

.ghost-icons i:last-child {
  background: var(--border-strong);
  border-radius: 50%;
}

.profile-card {
  display: grid;
  gap: 2px;
  margin: 0 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.profile-card h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.profile-top {
  padding-top: 0;
  overflow: hidden;
}

.ghost-cover {
  height: 56px;
  margin: 0 -16px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12) 0 2px, transparent 3px) 0 0 / 20px 20px,
    radial-gradient(120% 160% at 85% 0%, color-mix(in srgb, var(--teal) 50%, transparent), transparent 60%),
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--accent) 60%, var(--surface)),
      color-mix(in srgb, var(--accent) 20%, var(--surface))
    );
}

.ghost-avatar {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: -34px 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--accent-text);
  background: linear-gradient(135deg, var(--accent), var(--teal));
  border: 3px solid var(--surface);
  border-radius: 50%;
}

.profile-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}

.profile-headline {
  color: var(--text);
}

.profile-meta,
.profile-dates {
  font-size: 12px;
  color: var(--muted);
}

/* Connect, Message, More. */
.ghost-buttons {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.ghost-btn {
  width: 64px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
}

.ghost-btn.primary {
  background: color-mix(in srgb, var(--teal) 70%, var(--surface));
  border-color: transparent;
}

.ghost-btn.more {
  width: 34px;
}

.profile-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
}

.profile-entry-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.profile-entry span {
  color: var(--text-2);
}

.profile-entry p {
  margin: 4px 0 0;
  color: var(--text-2);
}

/* A company's logo: its initials on a tile of its own colour. */
.org-logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 8px;
}

.org-a {
  color: var(--indigo);
  background: var(--indigo-soft);
}

.org-c {
  color: var(--teal);
  background: var(--teal-soft);
}

.org-b {
  color: var(--amber);
  background: var(--amber-soft);
}

.org-d {
  color: var(--info);
  background: var(--info-soft);
}

/* "mar. 2023 - actualidad · 2 años y 8 meses", with room around the dot. */
.profile-dates .dot {
  margin: 0 6px;
  color: var(--muted);
}

.profile-entry + .profile-entry {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.profile-about {
  margin: 0;
  color: var(--text-2);
}

/* Narrow, under the panel: no logos, so the text has the width. */
@container (max-width: 699px) {
  .profile-entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-entry .org-logo {
    display: none;
  }
}

/* A position's own skills, as the profile lists them under it. */
.entry-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.entry-skills span {
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: 999px;
}

.profile-lang {
  color: var(--text-2);
}

.profile-lang strong {
  margin-right: 6px;
  color: var(--text);
}

/* The sentences the evaluation cites, marked in grey once read (lit, they
   take their verdict's colour). The padding sits outside the text, so a
   cited line stays aligned. */
.profile-page mark {
  margin: 0 -3px;
  padding: 1px 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: inherit;
  background: color-mix(in srgb, var(--text) 13%, transparent);
  border-radius: 3px;
  transition: box-shadow 0.2s ease;
}

/* Hovering a requirement or a cited line lights both; the rest steps back. */
.mock .requirement {
  transition: opacity 0.35s ease;
}

.mock.has-focus .requirement:not(.is-lit) {
  opacity: 0.4;
}

/* Lit in the colour of its verdict: the cited line and its evidence. */
.mock.has-focus .profile-page mark.is-lit {
  box-shadow: 0 0 0 2px var(--success);
}

.mock.has-focus .profile-page mark.partial.is-lit {
  box-shadow: 0 0 0 2px var(--warning);
}

.mock.has-focus .profile-page mark.no.is-lit {
  box-shadow: 0 0 0 2px var(--danger);
}

.mock .requirement {
  --lit: var(--success);
}

.mock .requirement:has(.verdict.partial) {
  --lit: var(--warning);
}

.mock .requirement:has(.verdict.no) {
  --lit: var(--danger);
}

.mock .requirement > .evidence,
.mock .requirement > .years-evidence {
  transition: box-shadow 0.35s ease;
}

.mock.has-focus .requirement.is-lit > .evidence,
.mock.has-focus .requirement.is-lit > .years-evidence {
  box-shadow: 0 0 0 1.5px var(--lit);
}

/* On a phone the panel covers the profile: a requirement with evidence
   takes you to the line (motion.js), the panel stepping aside. */
.mock:not(.is-scrolling) .panel .requirement[data-link] {
  cursor: pointer;
}

.js .hero .mock .panel {
  transition: transform 0.9s var(--ease-soft);
}

.js .hero .mock.is-peeking .panel {
  transform: translateX(calc(100% - 28px));
}

/* The way back: an arrow on the panel's edge, beside the lit line
   (--peek-y, motion.js). Tapping anywhere brings the panel back. */
.peek-back {
  display: none;
}

.js .mock:not(.is-scrolling) .peek-back {
  position: absolute;
  z-index: 2;
  top: var(--peek-y, 50%);
  right: 3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 40px;
  pointer-events: none;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translate(8px, -50%);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.peek-back::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 3px;
  border-bottom: 2px solid var(--on-accent, #fff);
  border-left: 2px solid var(--on-accent, #fff);
  transform: rotate(45deg);
}

.js .mock.is-peeking:not(.is-scrolling) .peek-back {
  opacity: 1;
  transform: translate(0, -50%);
  transition-delay: 0.6s;
}

/* What invites the tap. Each evidence that leads to the profile ends in an
   arrow; once the evaluation is in, the first one pulses with a "Toca" label
   and the panel shifts a little, showing it moves (.is-inviting, motion.js),
   until a requirement is tapped. */
.mock:not(.is-scrolling) .panel .requirement[data-link] {
  position: relative;
}

.mock:not(.is-scrolling) .panel .requirement[data-link] > .evidence,
.mock:not(.is-scrolling) .panel .requirement[data-link] > .years-evidence {
  position: relative;
  padding-right: 30px;
}

.mock:not(.is-scrolling) .panel .requirement[data-link] > .evidence::after,
.mock:not(.is-scrolling) .panel .requirement[data-link] > .years-evidence::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--lit);
  border-right: 1.5px solid var(--lit);
  transform: translateY(-50%) rotate(45deg);
}

.tap-hint {
  display: none;
}

/* On the evidence's lower edge, beside its arrow. */
.js .mock.is-inviting:not(.is-scrolling) .tap-hint {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: -16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--on-accent, #fff);
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  animation: tap-hint-in 0.6s var(--ease-soft) both;
}

.tap-hint svg {
  width: 13px;
  height: 13px;
}

@keyframes tap-hint-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.9);
  }
}

.js .mock.is-inviting:not(.is-scrolling) .requirement[data-link]:first-child > .evidence {
  animation: tap-pulse 2.2s ease-out 0.3s infinite;
}

@keyframes tap-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--lit) 70%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--lit) 0%, transparent);
  }
}

.js .hero .mock.is-inviting:not(.is-scrolling) .panel {
  animation: panel-nudge 1.6s var(--ease-soft) 0.6s;
}

@keyframes panel-nudge {
  40% {
    transform: translateX(44px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .mock.is-inviting .tap-hint,
  .js .mock.is-inviting .requirement[data-link]:first-child > .evidence,
  .js .hero .mock.is-inviting .panel {
    animation: none;
  }
}

/* The panel: lifted off the page, with a little of the brand's glow. */
.mock .panel {
  position: relative;
  text-align: left;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 60px -20px color-mix(in srgb, var(--accent) 45%, transparent);
}

.panel {
  position: relative;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.panel-top .brand {
  font-size: 13px;
  gap: 8px;
}

.panel-top .brand-mark {
  width: 22px;
  height: 22px;
  font-size: 13px;
  border-radius: 6px;
}

.job-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 62%;
  padding: 4px 10px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}

.small {
  font-size: 12px;
}

.muted {
  color: var(--muted);
}

.match-blocks {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 8px;
}

.match-block {
  display: grid;
  align-content: start;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.match-block .label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.match-block strong {
  font-size: 15px;
}

/* The value and what it rests on, on one line. */
.match-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

.tone-success {
  color: var(--success);
}

.requirements {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.requirement {
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.question-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.question-header > .requirement-text,
.question-header > strong {
  flex: 1;
  min-width: 0;
}

.question-header .verdict {
  flex: none;
}

.req-tags {
  display: flex;
  flex: none;
  gap: 4px;
  margin-left: auto;
}

.req-tags .req-tag {
  margin-left: 0;
}

.requirement > .evidence,
.requirement > .years-evidence {
  margin-left: 26px;
}

.requirement:first-child {
  border-top: none;
}

.requirement-text {
  font-weight: 600;
}

.tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: 1px;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
}

/* The cited part of the profile, as in the apps (.evidence in packages/shared/ui.css). */
.evidence {
  --evidence: var(--success);
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--evidence) 8%, var(--surface));
  border-radius: 6px;
}

.evidence.partial {
  --evidence: var(--warning);
}

/* Not met: what the profile says instead, in grey, as in the apps. */
.evidence.no {
  --evidence: var(--text-2);
}

.evidence-label {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--evidence);
}

/* Years of experience: the positions summed, each with its time. */
.years-evidence {
  --evidence: var(--success);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: 4px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--evidence) 8%, var(--surface));
  border-radius: 6px;
}

.years-evidence.partial {
  --evidence: var(--warning);
}

.years-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.years-row > span:last-child {
  flex: none;
}

/* A requirement's tag: the years summed, or "revisar" for two readings. */
.req-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: 1px;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.req-tag.review {
  color: var(--warning);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--warning) 50%, transparent);
}

.verdict {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
}

.verdict.yes {
  color: var(--success);
  background: var(--success-soft);
}

.verdict.partial {
  color: var(--warning);
  background: var(--warning-soft);
}

.verdict.no {
  color: var(--danger);
  background: var(--danger-soft);
}

.verdict.unsure {
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.mock-caption {
  position: relative;
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* On the hero's dark band. */
.hero .mock-caption {
  color: #a9c2bc;
}

/* Sections */

.section {
  padding: 72px 0;
  border-top: 1px solid var(--border);
  /* Anchored sections clear the sticky header. */
  scroll-margin-top: 64px;
}

/* The page alternates light and dark bands: the change of colour is the
   divide, no line needed. */
.section.dark-band,
.site-footer.dark-band {
  background: var(--bg);
}

.dark-band + .section,
.section.dark-band,
.site-footer.rich.dark-band {
  border-top: none;
}

.section-head {
  max-width: 40em;
  margin-bottom: 40px;
}

.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
}

.section-head p {
  margin-top: 14px;
  font-size: 17px;
  color: var(--text-2);
}

.text-link {
  display: inline-block;
  margin-top: 28px;
  font-weight: 600;
  color: var(--accent);
  text-underline-offset: 3px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pill.tone-neutral {
  color: var(--text-2);
  background: var(--surface-2);
}
.pill.tone-teal {
  color: var(--teal);
  background: var(--teal-soft);
}
.pill.tone-warning {
  color: var(--warning);
  background: var(--warning-soft);
}
.pill.tone-amber {
  color: var(--amber);
  background: var(--amber-soft);
}
.pill.tone-indigo {
  color: var(--indigo);
  background: var(--indigo-soft);
}
.pill.tone-success {
  color: var(--success);
  background: var(--success-soft);
}

/* "Cómo funciona": six steps, text beside an illustration made of the apps'
   pieces. Each step plays once when it scrolls into view (story.js adds
   .is-active); without JavaScript or with reduced motion it's shown as it ends. */

.story-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

@media (min-width: 900px) {
  .story-step {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 56px;
    min-height: 62vh;
  }
}

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* The tour's windows: the web app, in a window's frame. */
.stage.app {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.frame-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.app-top span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}

.app-top em {
  margin-left: 6px;
  font-size: 12px;
  font-style: normal;
  color: var(--muted);
}

.stage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px 18px;
}

.stage-head {
  padding-bottom: 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

/* A heading with two things on it, a gap apart instead of a separator. */
.stage-head-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
}

.muted-text {
  font-weight: 500;
  color: var(--muted);
}

/* Step 5: the interview guide, as the web app's Entrevista tab. */
.guide-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-list li {
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.guide-list li:first-child {
  padding-top: 0;
  border-top: none;
}

/* Who a step is about, as the panel shows it: avatar, name, match. */
.stage-person {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.stage-person .mini-who > strong {
  font-size: 14px;
}

/* Each question under the requirement it's for, with the verdict that asks it. */
.guide-about {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-2);
}

.guide-about .verdict {
  flex-shrink: 0;
  margin: 0;
}

.guide-about .tag {
  margin-left: 6px;
  border-style: solid;
}

.guide-question {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.guide-listen {
  margin: 2px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
}

.guide-listen span {
  margin-right: 4px;
  font-weight: 700;
  color: var(--accent);
}

/* What the first message is based on, to check before sending. */
.based-on {
  display: grid;
  gap: 6px;
}

.based-on-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.based-on-item {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--success-soft);
  border-radius: 6px;
}

.based-on-item strong {
  color: var(--success);
}

.message {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  font-size: 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.message p {
  margin: 0;
}

.stage-actions {
  display: flex;
  gap: 8px;
}

/* Step 3: the candidate's card in the web app, as saved from LinkedIn. */
.saved-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.stage .requirements {
  font-size: 13px;
  line-height: 1.5;
}

/* Step 6: the web app's Seguimientos, who's waiting on the team. */
.follow-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.follow {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.follow .avatar {
  width: 32px;
  height: 32px;
  font-size: 11px;
}

.follow-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.follow-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  font-size: 13px;
}

.follow-due {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}

.follow-due svg {
  margin-right: 5px;
  vertical-align: -2px;
  color: var(--warning);
}

.follow-due strong {
  color: var(--text);
}

.follow-actions {
  display: flex;
  gap: 6px;
}

.by {
  font-size: 11px;
  color: var(--muted);
}

.stage-actions-split {
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.stage-actions .btn {
  white-space: nowrap;
}

.stage-actions .btn svg {
  margin-right: 4px;
}

/* Step 2: the job's boolean searches, as the web app shows them. */
.search-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 10px 12px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.search-desc {
  color: var(--muted);
}

.search-list code {
  padding: 6px 8px;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: 6px;
}

.search-actions {
  display: flex;
  gap: 6px;
}

/* A candidate's tabs, as in the web app. */
.mini-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--muted);
}

.mini-tabs .active {
  font-weight: 600;
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.mini-tabs b {
  font-weight: 500;
}

.mini-who {
  display: grid;
  min-width: 0;
}

.mini-who > span {
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}

.fit {
  font-weight: 700;
}

.fit.tone-success {
  color: var(--success);
}

.fit.tone-warning {
  color: var(--warning);
}

.js .story-visual .stage {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}

.js .story-step.is-active .story-visual .stage {
  opacity: 1;
  transform: none;
}

.js .story-step .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  /* After the frame has settled. */
  transition-delay: calc(250ms + var(--i, 0) * 140ms);
}

.js .story-step.is-active .reveal {
  opacity: 1;
  transform: none;
}

/* The draft writes itself, line by line. */
.js .story-step .type-line {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s steps(40, end);
  transition-delay: calc(var(--i, 0) * 400ms);
}

.js .story-step.is-active .type-line {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .js .story-visual .stage,
  .js .story-step .reveal,
  .js .story-step .type-line {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* Step 1: the job ad, and the requirements Tinario takes from it. Each line
   lights up as its requirement comes; hovering one lights the other
   (motion.js). */
.jd {
  gap: 24px;
}

@media (min-width: 700px) {
  .jd {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}

.jd-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.jd-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}

.jd-text p {
  margin: 0 0 8px;
}

.jd-text ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 16px;
}

/* The words that set a requirement's importance. */
.jd-text li {
  margin: 0 -6px;
  padding: 1px 6px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.js .tour .is-active .jd-text li {
  animation: jd-read 0.9s ease calc(150ms + var(--i, 0) * 140ms) both;
}

@keyframes jd-read {
  40% {
    background-color: color-mix(in srgb, var(--accent) 16%, transparent);
  }
}

.jd-text li.is-lit,
.jd-reqs li.is-lit {
  background-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

.jd-left p.is-lit {
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .js .tour .is-active .jd-text li {
    animation: none;
  }
}

.jd-text mark {
  margin: 0 -2px;
  padding: 0 2px;
  color: inherit;
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  border-radius: 3px;
}

.jd-reqs {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jd-reqs li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  background: var(--surface-2);
  border-radius: 6px;
}

.jd-reqs .tag {
  margin-left: 0;
}

/* What the posting asked that isn't a requirement, and why. */
.jd-left {
  margin-top: 14px;
}

.jd-left p {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.35;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
}

.jd-left span {
  font-size: 12px;
  color: var(--text-2);
}

/* Privacy: four facts like a spec sheet. */
.privacy-band {
  padding: 88px 0;
}

.privacy-band .wrap {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .privacy-band .wrap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
  }
}

.privacy-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
}

.privacy-specs {
  display: grid;
  gap: 28px 40px;
  margin: 0;
}

@media (min-width: 640px) {
  .privacy-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.privacy-specs div {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.privacy-specs dt {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.privacy-specs dd {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--text-2);
}

.faq-wrap {
  display: grid;
  gap: 32px;
}

@media (min-width: 900px) {
  .faq-wrap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
  }
}

.faq-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
}

.faq-head p {
  margin: 14px 0 0;
  color: var(--text-2);
}

.faq-head a {
  color: var(--accent);
}

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

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.36s var(--ease-out);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details[open][data-moving]:not(.is-open) summary::after {
  transform: none;
}

/* Only with a mouse: on a touch screen :hover sticks after a tap. */
@media (hover: hover) {
  .faq summary:hover {
    color: var(--accent);
  }
}

.faq-answer {
  overflow: hidden;
}

.faq p {
  margin: 0 0 18px;
  max-width: 44em;
  color: var(--text-2);
}

.faq a {
  color: var(--accent);
}

/* Closing call to action */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 56px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 28px;
  box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* A line of the brand along the top edge. */
.cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(360px, 60%);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-50%);
}

.cta-tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
}

.cta h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
}

.cta p {
  max-width: 34em;
  margin: 14px auto 0;
  font-size: 17px;
  color: var(--text-2);
}

.cta .btn {
  margin-top: 28px;
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.cta .btn-lg {
  height: 54px;
  padding: 0 30px;
  font-size: 16px;
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent) 70%, transparent);
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    background 0.15s;
}

.cta .btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}

.cta .btn .arrow {
  transition: transform 0.25s var(--ease-out);
}

.cta .btn:hover .arrow {
  transform: translateX(3px);
}

/* What happens after the form: three steps across the card. */
.cta-steps {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

@media (min-width: 720px) {
  .cta-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cta-steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.cta-step-n {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 32px;
  height: 32px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}

.cta-steps strong {
  font-size: 15px;
}

.cta-steps span:not(.cta-step-n) {
  font-size: 14px;
  color: var(--text-2);
}

/* The pilot form, inside the closing card. */
.pilot-form {
  display: grid;
  gap: 16px;
  max-width: 640px;
  margin: 28px auto 0;
  text-align: left;
}

.form-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pilot-form label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.optional-label {
  font-weight: 400;
  color: var(--muted);
}

.pilot-form input {
  height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.pilot-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.pilot-form .btn {
  justify-self: center;
  margin-top: 4px;
}

.cta .pilot-form .btn {
  margin-top: 4px;
}

.pilot-form p {
  max-width: none;
}

.form-note {
  margin: 0 auto !important;
  font-size: 13px !important;
  text-align: center;
  color: var(--muted);
}

.form-note a {
  color: inherit;
}

.form-message {
  margin: 0 !important;
  padding: 10px 14px;
  font-size: 14px !important;
  color: var(--text);
  background: var(--accent-soft);
  border-radius: var(--radius);
}

/* Off-screen, not display:none: some bots skip hidden fields. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.thanks h1 {
  margin-bottom: 16px;
}

/* Footer */

.site-footer {
  padding: 40px 0 56px;
  font-size: 14px;
  color: var(--muted);
}

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

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.disclaimer {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-size: 12px;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
}

/* The landing's footer: the brand and the way in, beside the site's map. */
.site-footer.rich {
  padding: 64px 0 40px;
  border-top: 1px solid var(--border);
}

.site-footer.rich .wrap {
  display: grid;
  justify-content: normal;
  align-items: normal;
  gap: 48px;
}

.footer-top {
  display: grid;
  gap: 40px;
}

@media (min-width: 760px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
  }
}

.footer-brand {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.footer-brand .brand {
  color: var(--text);
}

.footer-brand p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--text);
}

/* (.site-footer: over the plain footer's nav, a row of links.) */
.site-footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 32px clamp(64px, 8vw, 120px);
}

/* On a phone, one under the other. */
@media (max-width: 520px) {
  .site-footer .footer-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer-cols div {
  display: grid;
  align-content: start;
  gap: 10px;
}

.footer-cols h2 {
  margin-bottom: 2px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-cols a {
  color: var(--text-2);
}

.site-footer .btn-primary:hover {
  color: var(--accent-text);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  padding-top: 24px;
  font-size: 13px;
  border-top: 1px solid var(--border);
}

.footer-bottom .disclaimer {
  flex-basis: auto;
  max-width: 62em;
  margin: 0;
}

/* Legal pages */

.legal {
  max-width: 760px;
  padding: 40px 16px 72px;
  margin: 0 auto;
}

.legal h1 {
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1.15;
}

.legal h2 {
  margin: 40px 0 10px;
  padding-top: 20px;
  font-size: 22px;
  border-top: 1px solid var(--border);
}

.legal h3 {
  margin: 22px 0 6px;
  font-size: 16px;
}

.legal p,
.legal ul {
  margin: 0 0 12px;
  color: var(--text-2);
}

.legal strong {
  color: var(--text);
}

.legal li {
  margin: 6px 0;
}

/* Long legal prose reads better justified, on a column wide enough: on a
   phone it opens wide gaps (not every browser hyphenates Spanish). Not tables
   or headings. */
@media (min-width: 720px) {
  .legal p,
  .legal li {
    text-align: justify;
    hyphens: auto;
  }
}

.legal a {
  color: var(--accent);
  text-underline-offset: 3px;
}

.legal .updated {
  margin: 8px 0 28px;
  color: var(--muted);
}

.legal .table {
  overflow-x: auto;
  margin: 12px 0 16px;
}

.legal table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}

.legal th,
.legal td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.legal th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}

.legal td {
  color: var(--text-2);
}

.legal code {
  font-size: 0.9em;
}

/* Years of experience: a position the model can't place ("?"), and one left
   out of the sum, in grey. */
.years-evidence .unsure {
  display: inline-block;
  width: 1.1em;
  font-weight: 700;
}

/* The tooltip of an element with data-tooltip (tooltips.js), as in the apps. */
.tooltip {
  position: fixed;
  z-index: 1000;
  max-width: min(320px, calc(100vw - 12px));
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;
  color: var(--surface);
  background: var(--text);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(15, 45, 40, 0.18);
  pointer-events: none;
  animation: tooltip-in 120ms ease-out 250ms backwards;
}

@keyframes tooltip-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip {
    animation: none;
  }
}

[data-tooltip] {
  cursor: help;
}

/* "Y además": what Tinario also does, an icon and a line each. */
/* The jobs Tinario has been tried with, gliding by under the hero: it isn't
   only for tech. Two copies of the list make the loop seamless. */
.roles-band {
  padding: 16px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.roles-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.roles-label {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.roles-track {
  display: flex;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.roles-list {
  display: flex;
  flex: none;
  gap: 10px;
  margin: 0;
  padding: 0 10px 0 0;
  list-style: none;
  animation: roles-glide 60s linear infinite;
}

.roles-track:hover .roles-list {
  animation-play-state: paused;
}

.roles-list li {
  padding: 5px 12px;
  font-size: 14px;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

@keyframes roles-glide {
  to {
    transform: translateX(-100%);
  }
}

@media (max-width: 640px) {
  .roles-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .roles-track {
    width: 100%;
  }
}

/* Without motion: the list once, wrapped. */
@media (prefers-reduced-motion: reduce) {
  .roles-list {
    flex-wrap: wrap;
    flex: 1;
    animation: none;
  }

  .roles-list[aria-hidden="true"] {
    display: none;
  }

  .roles-track {
    mask-image: none;
  }
}

/* Why: what takes the day today, and what changes, side by side. */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 960px) {
  .why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* "Cómo funciona" as a tour: the steps as tabs beside one window that shows
   the step chosen. Played in turn while in view (motion.js), each tab's line
   filling up until the next; stopped while hovered. Without JavaScript, every
   step and illustration is shown, one after another. */
.tour {
  display: grid;
  gap: 28px;
}

@media (min-width: 960px) {
  .tour {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: 48px;
    align-items: center;
  }
}

.tour-tabs {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  overflow: hidden;
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.tour-tab:hover {
  background: var(--surface);
}

.tour-tab[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--border);
  box-shadow:
    0 14px 40px color-mix(in srgb, var(--accent) 12%, transparent),
    var(--shadow);
}

.tour-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tour-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 10px;
  transition:
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.tour-tab[aria-selected="true"] .tour-n {
  color: var(--accent-text);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent);
}

.tour-copy {
  display: grid;
  gap: 4px;
}

.tour-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tour-tab[aria-selected="true"] .tour-kicker {
  color: var(--accent);
}

.tour-copy strong {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-2);
}

.tour-tab[aria-selected="true"] strong {
  color: var(--text);
}

.tour-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}

/* With the tour playing, only the chosen step tells more. */
.js .tour-desc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.4s var(--ease-out),
    opacity 0.3s ease;
}

.js .tour-desc > span {
  min-height: 0;
  overflow: hidden;
}

.js .tour-tab[aria-selected="true"] .tour-desc {
  grid-template-rows: 1fr;
  opacity: 1;
}

.tour-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.tour.is-playing .tour-tab[aria-selected="true"] .tour-progress {
  animation: tour-progress 7s linear forwards;
}

.tour.is-paused .tour-progress {
  animation-play-state: paused;
}

/* Only with a mouse: on a touch screen :hover sticks after a tap. */
@media (hover: hover) {
  .tour.is-playing:hover .tour-progress {
    animation-play-state: paused;
  }
}

@keyframes tour-progress {
  to {
    transform: scaleX(1);
  }
}

/* The light behind the window sticks out a little; never a sideways scroll. */
.story {
  overflow-x: clip;
}

/* The window: the steps' illustrations in one place, a soft light behind. */
.tour-stage {
  position: relative;
  display: grid;
  isolation: isolate;
}

.tour-stage::before {
  content: "";
  position: absolute;
  inset: -10% -6%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  pointer-events: none;
}

.tour .tour-panel {
  display: block;
  min-height: 0;
}

.js .tour .tour-panel {
  grid-area: 1 / 1;
  align-self: center;
  transition:
    opacity 0.4s ease,
    visibility 0.4s;
}

.js .tour .tour-panel:not(.is-current) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.tour-stage .stage.app {
  width: 100%;
}

/* A step's words inside its window: only on a phone, where the tabs are pills. */
.tour-panel-text {
  display: none;
}

@media (max-width: 959px) {
  /* The steps as a row of pills that scrolls sideways; the step chosen,
     its words and its window below, one at a time and at its own height. */
  .js .tour-tabs {
    display: flex;
    gap: 8px;
    padding: 2px 0 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .js .tour-tabs::-webkit-scrollbar {
    display: none;
  }

  .js .tour-tabs li {
    flex: none;
    scroll-snap-align: start;
  }

  .js .tour-tab {
    grid-template-columns: auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 10px;
    background: var(--surface);
    border-color: var(--border-strong);
    border-radius: 999px;
    box-shadow: none;
  }

  /* No shadow: the row clips it, and it would run into what follows. */
  .js .tour-tab[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: none;
  }

  /* The time left on a step: the pill fills up from the left. */
  .js .tour-progress {
    top: 0;
    height: auto;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .js .tour-n,
  .js .tour-copy {
    position: relative;
  }

  .js .tour-n {
    width: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 50%;
  }

  .js .tour-copy strong,
  .js .tour-copy .tour-desc {
    display: none;
  }

  .js .tour-kicker {
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
  }

  .js .tour .tour-panel:not(.is-current) {
    display: none;
  }

  .js .tour-panel-text {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
  }

  /* The step's words come in when it's chosen: the title, then the text. */
  .js .tour .tour-panel.is-active .tour-panel-text > * {
    animation: tour-text-in 0.7s var(--ease-soft) both;
  }

  .js .tour .tour-panel.is-active .tour-panel-text > span {
    animation-delay: 0.08s;
  }

  .tour-panel-text strong {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
  }

  .tour-panel-text span {
    font-size: 15px;
    color: var(--text-2);
  }

  /* The job ad's requirements, and what was left out, without the ad; the
     candidate's tabs don't fit a phone either. */
  .tour .jd-text,
  .tour .mini-tabs,
  .tour .follow-actions,
  .tour .stage-actions-split .muted-text {
    display: none;
  }

  .tour .follow {
    align-items: start;
  }
}

@keyframes tour-text-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .tour .tour-panel.is-active .tour-panel-text > * {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-tab,
  .tour-n,
  .js .tour-desc,
  .js .tour .tour-panel {
    transition: none;
  }
}

/* The angle of the light that circles a card's border on hover. */
@property --why-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.why-grid li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px;
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* The light: a bright arc of a conic gradient, shown only on the border
   (the mask cuts the inside out), turning while the card is hovered. */
.why-grid li::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--why-angle),
    transparent 0 62%,
    color-mix(in srgb, var(--accent) 40%, transparent) 76%,
    var(--accent) 88%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.why-grid li:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 18px 48px color-mix(in srgb, var(--accent) 16%, transparent),
    var(--shadow);
}

.why-grid li:hover::before {
  opacity: 1;
  animation: why-light 3.2s linear infinite;
}

@keyframes why-light {
  to {
    --why-angle: 360deg;
  }
}

.why-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  color: var(--accent-text);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent));
  border-radius: 14px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent);
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s ease;
}

.why-grid li:hover .why-icon {
  transform: scale(1.06) rotate(-4deg);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .why-grid li,
  .why-icon {
    transition: none;
  }

  .why-grid li:hover,
  .why-grid li:hover .why-icon {
    transform: none;
  }

  .why-grid li:hover::before {
    animation: none;
  }
}

.why-grid h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.why-grid p:last-child {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}