/* Churupos marketing site. Colours, type, space, motion and layout come only
   from the kit's design tokens (var(--ch-*), copied from web/kit/tokens.css);
   the build check rejects raw colour values here. Dark mode follows the
   tokens, so this sheet defines no colour of its own.

   Breakpoints are literals because a custom property cannot be used in a
   media query: tablet 40em and desktop 64em are the kit's --ch-bp-tablet and
   --ch-bp-desktop, and a test pins them to tokens.css.

   Motion lives only inside (prefers-reduced-motion: no-preference), and uses
   transform, opacity and clip-path alone. Without it, or without JavaScript,
   every page is complete and static. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--ch-color-bg-page);
  color: var(--ch-color-text);
  font-family: var(--ch-font-sans);
  font-size: var(--ch-font-size-md);
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ch-color-text-link); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: var(--ch-focus-width) solid var(--ch-color-focus-ring);
  outline-offset: var(--ch-focus-offset);
}
.skip { position: absolute; left: -10000px; top: auto; }
.skip:focus { left: var(--ch-space-3); top: var(--ch-space-3); background: var(--ch-color-bg-surface); padding: var(--ch-space-2); }

/* Layout shell: one column on the phone, widening at the tablet and desktop. */
.canto {
  height: var(--ch-canto-height);
  background: linear-gradient(90deg,
    var(--ch-canto-rojo) 0 25%,
    var(--ch-canto-verde) 25% 50%,
    var(--ch-canto-azul) 50% 75%,
    var(--ch-canto-amarillo) 75% 100%);
}
.top, main, .foot {
  width: 100%;
  max-width: var(--ch-content-max);
  margin: 0 auto;
  padding-left: var(--ch-space-4);
  padding-right: var(--ch-space-4);
}
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ch-space-3);
  padding-top: var(--ch-space-4);
  padding-bottom: var(--ch-space-3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ch-space-2);
  color: var(--ch-color-text);
  text-decoration: none;
  font-family: var(--ch-font-display);
  font-weight: 800;
}
.top nav ul, .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ch-space-3) var(--ch-space-4); }
.top nav a { color: var(--ch-color-text); }
main { padding-top: var(--ch-space-5); padding-bottom: var(--ch-space-6); }
main section + section { margin-top: var(--ch-space-6); }

/* Type. */
h1 { font-family: var(--ch-font-display); font-weight: 800; font-size: var(--ch-font-size-2xl); line-height: 1.15; margin: 0 0 var(--ch-space-3); }
h2 { font-family: var(--ch-font-display); font-weight: 800; font-size: var(--ch-font-size-xl); line-height: 1.2; margin: 0 0 var(--ch-space-3); }
h3 { font-size: var(--ch-font-size-lg); margin: 0 0 var(--ch-space-2); }
p { margin: 0 0 var(--ch-space-3); }
.lead { font-size: var(--ch-font-size-lg); color: var(--ch-color-text-muted); }
.beta, .muted { font-size: var(--ch-font-size-sm); color: var(--ch-color-text-muted); }

/* Buttons and links. */
.actions { display: flex; flex-wrap: wrap; gap: var(--ch-space-3); }
.btn, button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--ch-space-2) var(--ch-space-4);
  border: 1px solid var(--ch-color-border-control);
  border-radius: var(--ch-radius-control);
  background: var(--ch-color-bg-surface);
  color: var(--ch-color-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary, button { background: var(--ch-color-action-primary-bg); color: var(--ch-color-action-primary-fg); border-color: var(--ch-color-action-primary-bg); }
.btn-link { border-color: transparent; background: transparent; color: var(--ch-color-text-link); }
button:disabled { opacity: 0.6; cursor: default; }

/* Hero: copy, then the receipt sketch (drawn with CSS, no figures). */
.hero { display: grid; gap: var(--ch-space-5); }
.sketch-wrap { margin: 0; max-width: 22rem; }
.sketch {
  position: relative;
  padding: var(--ch-space-5) var(--ch-space-4);
  border: var(--ch-border-width) solid var(--ch-color-border-rule);
  border-radius: var(--ch-radius-card);
  background: var(--ch-color-bg-receipt);
}
.sketch-line {
  display: block;
  height: var(--ch-space-2);
  margin-block: var(--ch-space-3);
  border-radius: var(--ch-radius-sm);
  background: var(--ch-color-border-subtle);
}
.sketch-line.head { background: var(--ch-color-border-rule-strong); }
.sketch-line.total { background: var(--ch-color-text-muted); }
.w-full { width: 100%; }
.w-80 { width: 80%; }
.w-60 { width: 60%; }
.w-40 { width: 40%; }
.tag {
  display: inline-block;
  margin-top: var(--ch-space-2);
  padding: 0 var(--ch-space-2);
  border: var(--ch-border-width) solid var(--ch-color-border-control);
  border-radius: var(--ch-radius-pill);
  font-size: var(--ch-font-size-xs);
  color: var(--ch-color-text-muted);
}

/* Story, problem, care, flow: plain sections with the kit's rules. */
.story-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ch-space-3); }
.story-steps li { display: flex; align-items: center; gap: var(--ch-space-3); }
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ch-radius-full);
  background: var(--ch-color-bg-selected);
  color: var(--ch-color-text-selected);
  font-weight: 700;
}
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ch-space-3); }
.rows li { padding-block: var(--ch-space-3); border-top: var(--ch-border-width) solid var(--ch-color-border-rule); }
.cards { display: grid; gap: var(--ch-space-4); }
.card {
  overflow: hidden;
  border: var(--ch-border-width) solid var(--ch-color-border-rule);
  border-radius: var(--ch-radius-card);
  background: var(--ch-color-bg-surface);
}
.card-art {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--ch-space-2);
  min-height: 12rem;
  padding: var(--ch-space-5) var(--ch-space-4);
  background: var(--ch-color-bg-sunken);
  text-align: center;
}
.card-art p { margin: 0; }
.card-body { padding: var(--ch-space-4); }
.card-body p { margin: 0; color: var(--ch-color-text-muted); }
.badge {
  padding: 0 var(--ch-space-2);
  border-radius: var(--ch-radius-pill);
  background: var(--ch-color-status-neutral-bg);
  color: var(--ch-color-status-neutral-fg);
  font-size: var(--ch-font-size-xs);
  font-weight: 700;
}
.art-title { font-weight: 700; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ch-space-4); }
.flow-steps li {
  padding-top: var(--ch-space-3);
  border-top: var(--ch-border-width) solid var(--ch-color-border-rule-strong);
}

/* The dark band flips with the tokens: ink becomes paper in dark mode. */
.band-dark {
  padding: var(--ch-space-5) var(--ch-space-4);
  border-radius: var(--ch-radius-card);
  background: var(--ch-color-text);
  color: var(--ch-color-bg-page);
}
.band-dark h2, .band-dark h3, .band-dark p { color: var(--ch-color-bg-page); }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ch-space-4); }
.points li { padding-top: var(--ch-space-3); border-top: var(--ch-border-width) solid var(--ch-color-border-subtle); }
.band-link a { color: var(--ch-color-bg-page); }
.cta-band { display: grid; gap: var(--ch-space-3); justify-items: start; }

/* Footer: columns on wider screens, the store slots are not links yet. */
.foot {
  padding-top: var(--ch-space-5);
  padding-bottom: var(--ch-space-6);
  border-top: var(--ch-border-width) solid var(--ch-color-border-rule);
  font-size: var(--ch-font-size-sm);
  color: var(--ch-color-text-muted);
}
.foot-cols { display: grid; gap: var(--ch-space-4); }
.foot-col h2 { font-size: var(--ch-font-size-md); margin: 0 0 var(--ch-space-2); }
.foot-col ul { flex-direction: column; gap: var(--ch-space-2); }
.foot a { color: var(--ch-color-text-link); }
.stores { flex-wrap: wrap; margin-top: var(--ch-space-3); }
.store {
  padding: var(--ch-space-2) var(--ch-space-3);
  border: var(--ch-border-width) dashed var(--ch-color-border-control);
  border-radius: var(--ch-radius-control);
  color: var(--ch-color-text-muted);
}
.foot-tag { margin-top: var(--ch-space-4); }
.foot-meta { margin-top: var(--ch-space-4); }

/* Waitlist form and the status lines around it (waitlist page, support). */
.wl { display: grid; gap: var(--ch-space-3); max-width: 32rem; }
.wl[hidden], .fallback[hidden], .hp[hidden], [hidden] { display: none !important; }
.wl label { display: block; font-weight: 700; margin-bottom: var(--ch-space-1); }
.wl input[type=email], .wl input[type=text], .wl select, .wl textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--ch-space-2) var(--ch-space-3);
  border: 1px solid var(--ch-color-input-border);
  border-radius: var(--ch-radius-control);
  background: var(--ch-color-bg-surface);
  color: var(--ch-color-text);
  font: inherit;
}
.wl .hint { display: block; font-size: var(--ch-font-size-sm); color: var(--ch-color-text-muted); }
.consent { display: flex; gap: var(--ch-space-2); align-items: flex-start; }
.consent input { min-width: 24px; min-height: 24px; margin-top: 2px; }
.consent label { font-weight: 400; margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status { min-height: 1.5em; color: var(--ch-color-text-muted); }
.note { margin-top: var(--ch-space-3); padding: var(--ch-space-3); border: var(--ch-border-width) solid var(--ch-color-border-rule); border-radius: var(--ch-radius-card); background: var(--ch-color-bg-surface); }
.note h2 { font-size: var(--ch-font-size-lg); }
.status.is-error { color: var(--ch-color-status-danger-fg); }
.fallback { margin-top: var(--ch-space-5); padding-top: var(--ch-space-4); border-top: var(--ch-border-width) solid var(--ch-color-border-rule); }
/* Feature pages and the Producto index (MS-2). Kit tokens only; no raw colour. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ch-space-2); font-size: var(--ch-font-size-sm); color: var(--ch-color-text-muted); }
.crumbs li + li::before { content: "\2192"; margin-right: var(--ch-space-2); }
.feat-hero { display: grid; gap: var(--ch-space-5); }
.feat-copy { display: grid; gap: var(--ch-space-3); align-content: start; }
.feat-art { min-width: 0; }
.ex { margin: 0; padding: var(--ch-space-4); background: var(--ch-color-bg-sunken); border-radius: var(--ch-radius-card); display: grid; gap: var(--ch-space-3); }
.ex-card { background: var(--ch-color-bg-surface); border: var(--ch-border-width) solid var(--ch-color-border-subtle); border-radius: var(--ch-radius-card); padding: var(--ch-space-4); display: grid; gap: var(--ch-space-3); }
.ex-title { margin: 0; font-weight: 700; }
.ex-sub { margin: 0; font-size: var(--ch-font-size-sm); color: var(--ch-color-text-muted); }
.ex-info { margin: 0; font-size: var(--ch-font-size-sm); }
.ex-link { margin: 0; color: var(--ch-color-text-link); font-weight: 600; }
.ex-date { margin: 0; font-size: var(--ch-font-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ex-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ch-space-2); padding-block: var(--ch-space-3); border-top: var(--ch-border-width) solid var(--ch-color-border-rule); }
.ex-main { display: grid; gap: var(--ch-space-1); }
.ex-merchant { font-weight: 600; }
.ex-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ch-space-2); }
.ex-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.ex-axis { display: flex; justify-content: space-between; margin: 0; font-size: var(--ch-font-size-xs); color: var(--ch-color-text-muted); }
.pill { display: inline-block; padding: var(--ch-space-1) var(--ch-space-2); border-radius: var(--ch-radius-pill); background: var(--ch-color-status-neutral-bg); color: var(--ch-color-status-neutral-fg); font-size: var(--ch-font-size-xs); }
.spark { width: 100%; height: auto; color: var(--ch-color-text-link); }
progress { width: 100%; height: var(--ch-space-3); accent-color: var(--ch-color-action-primary-bg); }
.map { width: 100%; height: auto; }
.map-shape { fill: var(--ch-color-bg-selected); stroke: var(--ch-color-border-control); stroke-width: 1; }
.map circle { fill: var(--ch-color-text); }
.map text { fill: var(--ch-color-text); font-size: 6px; }
.map .range { fill: none; stroke: var(--ch-color-border-rule-strong); stroke-width: 0.5; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ch-space-3); font-size: var(--ch-font-size-xs); color: var(--ch-color-text-muted); }
.dot { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%; margin-right: var(--ch-space-1); background: var(--ch-color-bg-selected); }
.dot-state { background: var(--ch-color-border-rule-strong); }
.dot-city { background: var(--ch-color-text); }
.soon-art { display: grid; gap: var(--ch-space-2); justify-items: center; text-align: center; padding: var(--ch-space-5) var(--ch-space-4); border: var(--ch-border-width) dashed var(--ch-color-border-rule); border-radius: var(--ch-radius-card); }
.soon-icon { width: 2rem; height: 2rem; color: var(--ch-color-text-muted); }
.icon { width: 1.1em; height: 1.1em; margin-right: var(--ch-space-2); vertical-align: -0.2em; }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ch-space-4); }
.steps3 li { padding-top: var(--ch-space-3); border-top: var(--ch-border-width) solid var(--ch-color-text); }
.steps3 h3 { margin: 0 0 var(--ch-space-1); font-size: var(--ch-font-size-md); }
.steps3 p { margin: 0; color: var(--ch-color-text-muted); }
.data-note { display: grid; gap: var(--ch-space-2); padding-block: var(--ch-space-5); }
.data-note h2 { font-size: var(--ch-font-size-md); margin: 0; }
.data-note p { margin: 0; color: var(--ch-color-text-muted); }
.prod { display: grid; gap: var(--ch-space-3); }
.prod-cards .cards { list-style: none; margin: 0; padding: 0; }
.prod-cards .card h2 { font-size: var(--ch-font-size-lg); margin: 0 0 var(--ch-space-2); }
@media (min-width: 40em) {
  .steps3 { grid-template-columns: repeat(3, 1fr); }
  .prod-cards .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .feat-hero { grid-template-columns: 1fr 1fr; align-items: start; }
  .steps3 { gap: var(--ch-space-5); }
}
.draft-banner {
  margin: 0;
  padding: var(--ch-space-2) var(--ch-space-4);
  border-bottom: var(--ch-border-width) solid var(--ch-color-border-rule);
  background: var(--ch-color-bg-surface);
  font-size: var(--ch-font-size-sm);
  color: var(--ch-color-text-muted);
}

/* Tablet: two and three columns where the copy allows it. */
@media (min-width: 40em) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .flow-steps { grid-template-columns: repeat(3, 1fr); }
  .points { grid-template-columns: repeat(2, 1fr); }
  .foot-cols { grid-template-columns: repeat(3, 1fr); }
  .story-steps { grid-template-columns: repeat(5, 1fr); }
}

/* Desktop: the hero and the problem sit side by side. */
@media (min-width: 64em) {
  .legal { grid-template-columns: 16rem minmax(0, 1fr); column-gap: var(--ch-space-5); align-items: start; }
  .legal-status { grid-column: 1 / -1; grid-row: 1; }
  .legal-toc { grid-column: 1; grid-row: 2; position: sticky; top: var(--ch-space-4); }
  .legal-toc details { border-top: 0; padding-top: 0; }
  .legal-body { grid-column: 2; grid-row: 2; }
  .top, main, .foot { padding-left: var(--ch-layout-gutter-desktop); padding-right: var(--ch-layout-gutter-desktop); }
  .hero { grid-template-columns: 1fr 1fr; align-items: center; }
  .sketch-wrap { justify-self: end; }
  .problem { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ch-space-5); align-items: start; }
  .problem h2 { margin: 0; }
}

/* Legal pages (LEGAL_LINKS on) and the 404 and 500 pages. The draft text is the
   repository's own; the index sits above it on the phone and beside it on the
   desktop, the table scrolls inside its own focusable region, and long words
   and code wrap instead of pushing the page wider. Kit tokens only. */
.legal { display: grid; gap: var(--ch-space-4); padding-block: var(--ch-space-5); min-width: 0; }
.legal-status { margin: 0; font-size: var(--ch-font-size-sm); color: var(--ch-color-text-muted); }
.legal-toc { font-size: var(--ch-font-size-sm); }
.legal-toc details { border-top: var(--ch-border-width) solid var(--ch-color-border-rule); padding-top: var(--ch-space-3); }
.legal-toc summary { cursor: pointer; font-weight: 600; }
.legal-toc ol { margin: var(--ch-space-3) 0 0; padding-left: var(--ch-space-4); display: grid; gap: var(--ch-space-1); }
.legal-toc a { color: var(--ch-color-text-link); overflow-wrap: anywhere; }
.legal-body { display: grid; gap: var(--ch-space-3); min-width: 0; overflow-wrap: anywhere; }
.legal-body h1 { font-size: var(--ch-font-size-xl); margin: 0; }
.legal-body h2 { font-size: var(--ch-font-size-lg); margin: var(--ch-space-4) 0 0; scroll-margin-top: var(--ch-space-4); }
.legal-body h3 { font-size: var(--ch-font-size-md); margin: var(--ch-space-3) 0 0; scroll-margin-top: var(--ch-space-4); }
.legal-body blockquote { margin: 0; padding: var(--ch-space-3) var(--ch-space-4); border-left: var(--ch-border-width) solid var(--ch-color-text); background: var(--ch-color-bg-surface); }
.legal-body ul, .legal-body ol { margin: 0; padding-left: var(--ch-space-5); display: grid; gap: var(--ch-space-2); }
.legal-body hr { width: 100%; margin: var(--ch-space-3) 0; border: 0; border-top: var(--ch-border-width) solid var(--ch-color-border-rule); }
.legal-body code { overflow-wrap: anywhere; font-size: 0.95em; }
.legal-table { display: block; max-width: 100%; overflow-x: auto; }
.legal-table table { width: 100%; min-width: 28rem; border-collapse: collapse; font-size: var(--ch-font-size-sm); }
.legal-table th, .legal-table td { padding: var(--ch-space-2); text-align: left; vertical-align: top; border-bottom: var(--ch-border-width) solid var(--ch-color-border-rule); overflow-wrap: anywhere; }
.legal-table:focus-visible { outline: var(--ch-focus-width) solid var(--ch-color-focus-ring); outline-offset: var(--ch-focus-offset); }
.error-page { display: grid; gap: var(--ch-space-3); padding-block: var(--ch-space-6) var(--ch-space-5); max-width: var(--ch-content-max); }
.error-page h1 { margin: 0; font-size: var(--ch-font-size-xl); }
.error-page p { margin: 0; color: var(--ch-color-text-muted); }
.error-page a { color: var(--ch-color-text-link); }

/* Motion. Each rule is inside the reduced-motion query; nothing here is needed
   to read the page. The receipt lines wipe in, the cards rise as they scroll
   into view (only where scroll-driven animations exist), the buttons press,
   and a page change crossfades where View Transitions are supported. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .l1 { --i: 1; }
  .l2 { --i: 2; }
  .l3 { --i: 3; }
  .l4 { --i: 4; }
  .l5 { --i: 5; }
  .l6 { --i: 6; }
  .l7 { --i: 7; }
  .l8 { --i: 8; }
  .btn, button {
    transition: transform var(--ch-motion-fast) var(--ch-ease-out), opacity var(--ch-motion-base) var(--ch-ease-out);
  }
  .btn:active, button:active { transform: scale(var(--ch-motion-press-scale)); }
  .sketch-line {
    animation: scan-in var(--ch-motion-step) var(--ch-ease-out) both;
    animation-delay: calc(var(--i) * var(--ch-motion-fast));
  }
  @supports (animation-timeline: view()) {
    .rv {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
  @keyframes scan-in {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(var(--ch-motion-feed-distance)); }
    to { opacity: 1; transform: none; }
  }
}