/* MateoWorks v2 home · round 12: Superdesign layout B rebuilt in static HTML/CSS, colour scheme A (amber, sky, ice) on Dark 1 #0B2F70 (round 20).
 * Sections: hero with stacked example screens · services, each with its own example screen · before/after toggle cards ·
 * how we work + how the work flows · who it's for · contact on an ice band · footer.
 * Navy #151C2A is text and logo only, never a surface. No gradients, no black, no purple, no images other than the logo.
 * Every visual is HTML text on CSS/SVG built from the M's capsule (rounded ends, 59 degree stroke). Ratios: DESIGN.md. */

/* ---------- Fonts (self-hosted, SIL OFL 1.1, see assets/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (the only place colour literals live) ---------- */
:root {
  --switch-edge: rgba(255, 255, 255, 0.22);
  --switch-on: rgba(255, 255, 255, 0.16);
  /* Scheme A (Hector, 12:39 AM) on Dark 1 (round 20, 9:32 PM): Dark 1 grounds, amber accents with navy labels, sky and ice support. */
  --deep: #0B2F70;          /* Dark 1 (Hector, 9:32 PM, round 20), page ground: white 12.69, ice 9.82, amber 7.26 */
  --raised: #0E3A8B;        /* its lighter tint (same hue/saturation, +5.9 HSL lightness): white 10.52, ice 8.14, amber 6.01; also the closing band */
  --ocean: #0B5FD9;         /* brand blue: white text 5.75; on white 5.75 */
  --amber: #FBB756;         /* CTAs and the approval card: navy label 9.75 */
  --amber-press: #FCC97E;   /* hover: navy 11.20 */
  --amber-edge: #A15C00;    /* amber pill outline on white panels: 5.2 */
  --sky: #70AAFF;           /* decorative capsules, the drawn flow line (4.25 deep, 3.36 raised) */
  --ice: #D1E4FF;           /* secondary text on blue, the contact band: navy 13.3, ink-2 6.25 */
  --ice-50: #EEF5FF;        /* panel title bars and selected rows: navy 15.3, ink-2 7.2, Ocean 5.24 */
  --paper: #FFFFFF;
  --ink: #151C2A;           /* navy: text and logo only */
  --ink-2: #465066;         /* secondary text on light: 8.1 white, 7.2 ice-50 */
  --edge: #8DB2F5;          /* control outlines on blue: 4.70 deep, 3.72 raised */
  --line-blue: #3A6CC4;     /* hairlines on blue (decorative) */
  --line-light: #D6E1F2;    /* hairlines inside panels (decorative) */
  --field: #6E788C;         /* input outlines on white: 4.45 */
  --error: #B3261E;         /* form errors on white: 6.5 */
  --pn-shadow: 0 1px 1px #09275D, 0 10px 24px -14px #071D44;   /* one soft, short shadow; dark blue, never black */

  /* Roles */
  --color-text: var(--paper);
  --color-text-2: var(--ice);
  --color-label: var(--amber);
  --color-focus: var(--paper);
  --color-button: var(--amber);
  --color-on-button: var(--ink);
  --color-button-press: var(--amber-press);
  --surface-page: var(--deep);

  /* Flow diagram (How we work, on the raised ground) */
  --flow-line: var(--line-blue);
  --flow-ink: var(--sky);
  --flow-edge: var(--ice);
  --flow-lit: var(--sky);
  --flow-run: var(--amber);
  --flow-ground: var(--raised);

  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.25rem + 0.9vw, 2.125rem);
  --text-2xl: clamp(2.375rem, 1.4rem + 3.4vw, 4.5rem);
  --text-display: clamp(2.625rem, 1.3rem + 4.2vw, 4.875rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: clamp(4.5rem, 2.6rem + 7vw, 9rem);

  /* One shape language: the capsule. */
  --radius-pill: 999px;
  --radius-area: 1.625rem;
  --radius-card: 1.75rem;
  --slant: -31deg;            /* the M's stroke: 59 degrees from horizontal */

  /* Example panel system (8pt grid). The title bar is 40px tall and the outer radius is 20px, half of it, so the bar
   * ends in a true capsule curve like the M's strokes; inner radius = outer minus the 8px inset, so corners stay concentric. */
  --pn-r: 1.25rem;            /* 20px outer */
  --pn-r-in: 0.75rem;         /* 12px inner (rows, cards, bubbles) */
  --pn-bar: 2.5rem;           /* 40px title bar */
  --pn-1: 0.5rem;             /* 8 */
  --pn-2: 1rem;               /* 16 */
  --pn-half: 0.25rem;         /* 4: the only half step, inside dense rows */
  --pn-t-xs: 0.75rem;         /* 12px: meta, pills, labels (the floor) */
  --pn-t-sm: 0.8125rem;       /* 13px: row text */
  --pn-t-md: 0.875rem;        /* 14px: titles */

  --control-h: 3.25rem;
  --wrap: 75rem;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --bar-h: 5.5rem;            /* sticky header height; script.js measures the real one */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
}

/* ---------- Language: both languages ship in the HTML; <html lang> picks one ---------- */
html[lang="es"] [data-lang="en"],
html:not([lang="es"]) [data-lang="es"] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section[id] { scroll-margin-top: var(--bar-h); }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: 100;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-button);
  color: var(--color-on-button);
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.section-title {
  font-size: var(--text-2xl);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 18ch;
  text-wrap: balance;
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 var(--space-xl);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--color-button); color: var(--color-on-button); box-shadow: var(--button-ring, none); }
.btn--primary:hover { background: var(--color-button-press); }
.btn--primary:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.is-busy:disabled { cursor: progress; }
.btn--small { min-height: 2.75rem; padding: 0 var(--space-lg); font-size: var(--text-xs); }
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--edge);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.text-link:hover { text-decoration-color: currentColor; }
.text-link:active, .topbar__nav a:active, .footer__links a:active, .footer__toggle:active, .contact__mail a:active { opacity: 0.7; }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--deep); }
.topbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xl);
  min-height: 4.75rem;
}
.topbar__brand, .footer__brand { display: flex; align-items: center; justify-self: start; min-height: 2.75rem; }
/* Logo: the wordmark image (navy file, shown white) with the M drawn inline on top in amber. */
.logo { --logo-h: 1.625rem; display: block; height: var(--logo-h); width: calc(var(--logo-h) * 3624 / 480); overflow: hidden; }
.logo__inner { position: relative; display: block; height: 100%; width: calc(var(--logo-h) * 3624 / 480); }
.logo__word, .logo__mark { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.logo__word { filter: brightness(0) invert(1); }
.logo__mark { color: var(--amber); }
.topbar__nav ul { display: flex; align-items: center; gap: var(--space-xl); }
.topbar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--text-xs);
  color: var(--color-text-2);
  text-decoration: none;
  white-space: nowrap;
}
.topbar__nav a:hover { color: var(--color-text); text-decoration: underline; }
.topbar__actions { display: flex; align-items: center; justify-self: end; gap: var(--space-sm); }
.lang-toggle {
  min-height: 2.75rem;
  padding: 0 var(--space-md);
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.lang-toggle:hover { border-color: var(--color-text); }
.lang-toggle:disabled, .footer__toggle:disabled { opacity: 0.55; cursor: not-allowed; }
/* The header edge: four capsules leaning on the M's angle (B's strip, drawn as capsules) */
.topbar__edge { padding-bottom: var(--space-xs); }
.cap-strip { display: flex; gap: var(--space-xs); height: 0.4375rem; }
.cap-strip i { display: block; border-radius: var(--radius-pill); transform: skewX(var(--slant)); }
.cap-strip i:nth-child(1) { width: 4rem; background: var(--sky); }
.cap-strip i:nth-child(2) { width: 2rem; background: var(--amber); }
.cap-strip i:nth-child(3) { width: 7rem; background: var(--sky); }
.cap-strip i:nth-child(4) { flex: 1; background: var(--ocean); }

/* ---------- 1. Hero ---------- */
.hero { padding-block: clamp(2.5rem, 1rem + 4vw, 5rem) clamp(4rem, 2rem + 6vw, 7.5rem); overflow-x: clip; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl) var(--space-3xl);
  align-items: center;
}
.hero__title {
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 14ch;
  text-wrap: balance;
}
.hl { color: var(--amber); }
.hero__lede { margin-top: var(--space-xl); font-size: var(--text-lg); line-height: 1.55; color: var(--color-text-2); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); }

/* The stack: three example screens. Each step from one to the next follows an M stroke: down-right on the
 * 59 degree axis from the list to the chat, then down-left to the approval, so the three read as one M zig-zag. */
.stack { position: relative; height: 38.5rem; }
.stack > .pn { position: absolute; }
.stack__a { left: 0; top: 0; width: 84%; z-index: 1; }
.stack__b { left: 27%; top: 12.5rem; width: 73%; z-index: 2; }
.stack__c { left: 9%; top: 28rem; width: 62%; z-index: 3; }

/* ---------- Example panel system ---------- */
.pn {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--pn-r);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--pn-shadow);
  font-size: var(--pn-t-sm);
  line-height: 1.4;
}
.pn__bar {
  display: flex;
  align-items: center;
  gap: var(--pn-1);
  flex: none;
  height: var(--pn-bar);
  padding: 0 var(--pn-1) 0 var(--pn-2);
  background: var(--ice-50);
  border-bottom: 1px solid var(--line-light);
  white-space: nowrap;
}
.pn__ico { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--ocean); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pn__ico .dot { stroke-width: 2.4; }
.pn__title { font-size: var(--pn-t-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pn__tabs { display: flex; gap: var(--pn-half); margin-left: var(--pn-half); }
.pn__tab { padding: 0.125rem var(--pn-1); border-radius: var(--radius-pill); font-size: var(--pn-t-xs); color: var(--ink-2); }
.pn__tab.is-on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-light); }
.pn__chip { padding: 0 var(--pn-1); border-radius: var(--radius-pill); background: var(--deep); color: var(--paper); font-size: var(--pn-t-xs); font-weight: 700; line-height: 1.5rem; }
.pn__tag {
  margin-left: auto;
  padding: 0 var(--pn-1);
  border: 1px solid var(--ocean);
  border-radius: var(--radius-pill);
  color: var(--ocean);
  font-size: var(--pn-t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.375rem;
  text-transform: uppercase;
}
.pn__body { flex: 1; padding: var(--pn-2); }
.pn__body--flush { padding: var(--pn-1) var(--pn-1) var(--pn-2); }
.pn__body--flush .rows { padding: 0; }
.pn__body--flush .pn__foot { padding-inline: var(--pn-1); }
.pn__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pn-1); margin-top: var(--pn-2); font-size: var(--pn-t-xs); color: var(--ink-2); }

/* Status pills: label >= 4.5 on the pill, outline >= 3 on the white panel */
.pill {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 1.375rem;
  padding: 0 var(--pn-1);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--pn-t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.pill--review { background: var(--amber); border-color: var(--amber-edge); color: var(--ink); }
.pill--sent { background: var(--deep); color: var(--paper); }
.pill--approved { background: var(--ocean); color: var(--paper); }
.pill--booked { background: var(--ice); border-color: var(--ocean); color: var(--ink); }
.pill--draft { background: var(--paper); border-color: var(--field); color: var(--ink-2); }
/* Assignee initials sit in a capsule, not a circle */
.av {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--ice);
  color: var(--ink);
  font-size: var(--pn-t-xs);
  font-weight: 700;
}
.avs { display: inline-flex; gap: var(--pn-half); }

/* Status list */
.rows { padding: var(--pn-1); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--pn-1); padding: var(--pn-1); }
.row + .row { border-top: 1px solid var(--line-light); }
.row__main { display: grid; min-width: 0; }
.row__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__meta { font-size: var(--pn-t-xs); color: var(--ink-2); }

/* Chat */
.chat { display: grid; align-content: start; gap: var(--pn-1); }
.composer { display: flex; align-items: center; gap: var(--pn-1); margin: 0 var(--pn-2) var(--pn-2); padding: 0 var(--pn-half) 0 var(--space-sm); height: 2.25rem; border: 1px solid var(--field); border-radius: var(--radius-pill); }
.composer__field { flex: 1; font-size: var(--pn-t-xs); color: var(--ink-2); }
.composer__send { width: 1.75rem; height: 1.75rem; padding: 0.375rem; border-radius: 50%; background: var(--ocean); fill: none; stroke: var(--paper); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.msg { display: grid; gap: var(--pn-half); max-width: 88%; }
.msg--out { justify-self: end; justify-items: end; }
.msg__who { font-size: var(--pn-t-xs); color: var(--ink-2); }
.bubble { padding: var(--pn-1) var(--space-sm); border-radius: var(--pn-r-in) var(--pn-r-in) var(--pn-r-in) var(--pn-half); background: var(--ice); color: var(--ink); }
.msg--out .bubble { border-radius: var(--pn-r-in) var(--pn-r-in) var(--pn-half) var(--pn-r-in); background: var(--ocean); color: var(--paper); }
.typing { display: flex; align-items: center; gap: var(--pn-1); font-size: var(--pn-t-xs); color: var(--ink-2); }
.typing__dots { display: inline-flex; gap: var(--pn-half); padding: var(--pn-1); border-radius: var(--radius-pill); background: var(--ice); }
.typing__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); }

/* The approval card */
.pn--amber { background: var(--amber); }
.pn--amber .pn__bar { background: var(--amber); border-bottom-color: var(--amber-edge); }
.pn--amber .pn__ico { stroke: var(--ink); }
.pn--amber .pn__tag { border-color: var(--ink); color: var(--ink); }
.approve { display: grid; gap: var(--pn-half); }
.approve__q { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.01em; }
.approve__meta { font-size: var(--pn-t-xs); }
.approve__actions { position: relative; display: flex; align-items: center; gap: var(--pn-1); margin-top: var(--space-sm); }
.ui-btn {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 var(--pn-2);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.ui-btn--solid { background: var(--deep); border-color: var(--deep); color: var(--paper); }
.ui-btn--solid.is-hover { background: var(--raised); border-color: var(--raised); }
.cursor { position: absolute; left: 4.4rem; top: 1.3rem; width: 0.875rem; fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }

/* Table (workflow review) */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { padding: 0 var(--pn-1) var(--pn-1); border-bottom: 1px solid var(--line-light); text-align: left; font-size: var(--pn-t-xs); font-weight: 600; color: var(--ink-2); }
.tbl td { padding: var(--pn-1); border-bottom: 1px solid var(--line-light); }
.tbl td:first-child { font-weight: 600; }
.tbl tr.is-selected td { background: var(--ice-50); }
.tbl tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--ocean); }

/* Board (pod queue) */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pn-1); padding: var(--pn-1); }
.col { display: grid; align-content: start; gap: var(--pn-1); padding: var(--pn-1); border-radius: var(--pn-r-in); background: var(--ice-50); }
.col__head { padding: 0 var(--pn-half); font-size: var(--pn-t-xs); font-weight: 600; color: var(--ink-2); }
.card { display: grid; gap: var(--pn-1); padding: var(--pn-1) var(--space-sm); border: 1px solid var(--line-light); border-radius: var(--pn-r-in); background: var(--paper); }
.card.is-selected { border-color: var(--ocean); box-shadow: 0 0 0 1px var(--ocean); }
.card__title { font-weight: 600; line-height: 1.3; }
.card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: var(--pn-t-xs); color: var(--ink-2); }
.typing--sm .typing__dots { padding: var(--pn-half) var(--pn-1); }

/* Inbox (approvals) */
.inbox { padding: var(--pn-1); }
.mail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem; padding: var(--pn-1) var(--space-sm); border-radius: var(--pn-r-in); }
.mail + .mail { border-top: 1px solid var(--line-light); border-top-left-radius: 0; border-top-right-radius: 0; }
.mail.is-selected { background: var(--ice-50); box-shadow: inset 3px 0 0 var(--ocean); }
.mail__top, .mail__line { display: flex; align-items: center; justify-content: space-between; gap: var(--pn-1); }
.mail__top { font-size: var(--pn-t-xs); color: var(--ink-2); }
.mail__from { font-weight: 600; color: var(--ink); }
.mail__subject { font-weight: 600; }
.mail__preview { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; min-width: 0; overflow: hidden; font-size: var(--pn-t-xs); color: var(--ink-2); }

/* Calendar (bookings) */
.cal { display: grid; grid-template-columns: 2.75rem repeat(4, minmax(0, 1fr)); gap: var(--pn-half); font-size: var(--pn-t-xs); }
.cal__day { padding-bottom: var(--pn-half); text-align: center; font-weight: 600; color: var(--ink-2); }
.cal__time { align-self: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.slot { display: grid; place-items: center; min-width: 0; height: 2.5rem; border: 1px dashed var(--line-light); border-radius: var(--pn-1); font-weight: 600; }
.slot--booked { border: 0; background: var(--ocean); color: var(--paper); }
.slot--new { border: 1px solid var(--amber-edge); background: var(--amber); color: var(--ink); }
.slot--pick { border: 2px solid var(--ocean); background: var(--ice-50); }

/* ---------- 2. Services: text left, its example screen right; every screen the same size ---------- */
.services { padding-block: var(--space-4xl); background: var(--raised); --flow-ground: var(--raised); }
.svc-list { margin-top: var(--space-3xl); border-bottom: 1px solid var(--line-blue); }
.svc {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-xl) var(--space-3xl);
  align-items: center;
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--line-blue);
}
.tally { display: flex; gap: var(--space-xs); height: 2rem; align-items: center; padding-left: var(--space-2xs); }
.tally i { display: block; width: 0.55rem; height: 1.75rem; border-radius: var(--radius-pill); background: var(--amber); transform: rotate(var(--slant)); }
.svc__name { margin-top: var(--space-md); font-size: calc(var(--text-xl) * 1.06); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; }   /* round 22: weight 600, a touch larger, no thin titles on blue */
.svc__text > p { margin-top: var(--space-md); color: var(--color-text); font-weight: 500; max-width: 52ch; }   /* round 22: full white, 500 */
.svc__shot .pn { height: 17rem; }
.svc__shot .pn__body { display: flex; flex-direction: column; }
.svc__shot .pn__foot { margin-top: auto; padding-top: var(--pn-2); }
.svc__shot .board { display: grid; }
.svc__shot .board { grid-template-rows: minmax(0, 1fr) auto; }
.board > .pn__foot { grid-column: 1 / -1; margin-top: 0; padding-top: var(--pn-1); }   /* round 24: pods learn from each run (no numbers) */
.svc__text > .svc__no { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; color: var(--color-text); }
.examples-note { font-size: var(--text-xs); color: var(--color-text-2); }
.hero__note { grid-column: 2; margin-top: calc(var(--space-md) * -1); }
.row.is-selected { background: var(--ice-50); box-shadow: inset 3px 0 0 var(--ocean); border-radius: var(--pn-r-in); }
.row.is-selected + .row, .row + .row.is-selected { border-top-color: transparent; }
.services__training { margin-top: var(--space-2xl); max-width: 34ch; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; }

/* ---------- Bands: the belief line on ice, the closing line on Ocean ---------- */
.band { padding-block: clamp(4rem, 2.5rem + 5vw, 7.5rem); }
.band--ice { background: var(--ice); color: var(--ink); --color-focus: var(--ink); }
.band__caps { display: flex; gap: var(--space-sm); height: 1.125rem; }
.band__caps i { display: block; border-radius: var(--radius-pill); transform: skewX(var(--slant)); }
.band__caps i:nth-child(1) { width: 5rem; background: var(--amber); }
.band__caps i:nth-child(2) { width: 9rem; background: var(--ocean); }
.band__caps i:nth-child(3) { width: 3.5rem; background: var(--sky); }
.band__title { margin-top: var(--space-xl); max-width: 16ch; font-size: clamp(2.75rem, 1.2rem + 5.4vw, 6.5rem); line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; }
.band--close { background: var(--raised); color: var(--paper); }   /* round 20: the main blue's tint (was Ocean); the footer's main blue follows */
.band__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl) var(--space-2xl); }
.band__title--close { margin-top: 0; max-width: 20ch; text-wrap: balance; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; }

/* ---------- 3. What changes: before/after toggle cards ---------- */
.changes { padding-block: var(--space-4xl); }
.changes__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md) var(--space-2xl); }
.changes__title { max-width: 20ch; }
.ba-grid { margin-top: var(--space-3xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.ba { display: grid; align-content: start; gap: var(--space-sm); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius-card); background: var(--raised); }
.ba__switch { display: none; }
.ba__label { display: block; margin-bottom: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.01em; }
/* Round 22: Before and Now share one type style, so a flip only swaps the words */
.ba__before, .ba__after { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text); }
.ba__label { color: var(--color-label); }
.js .ba__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the switch already says which state; kept for screen readers */
/* With JS: a two-state switch; both states share one grid cell, so flipping never moves the page */
.js .ba { grid-template-areas: "switch" "state"; }
.js .ba__switch {
  grid-area: switch;
  display: inline-flex;
  justify-self: start;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--switch-edge);
  border-radius: var(--radius-pill);
}
.ba__btn {
  position: relative;
  min-height: 1.75rem;
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-2);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.ba__btn::after { content: ""; position: absolute; inset: -0.5rem -1px; }   /* 44px tap area without visual bulk */
.ba__btn:hover { color: var(--color-text); }
.ba__btn:active { transform: translateY(1px); }
.ba__btn[aria-pressed="true"] { background: var(--switch-on); color: var(--color-text); box-shadow: inset 0 -2px 0 var(--amber); }
.js .ba__before, .js .ba__after { grid-area: state; transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.js .ba[data-state="after"] .ba__before,
.js .ba[data-state="before"] .ba__after { visibility: hidden; opacity: 0; transform: translateY(0.4rem); }

/* ---------- 4. How we work ---------- */
.how { padding-block: var(--space-4xl); background: var(--raised); }
.how__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
.how__lede { margin-top: var(--space-lg); max-width: 30ch; font-size: var(--text-lg); color: var(--color-text-2); }
.principles { display: grid; gap: var(--space-xl); }
.principle { padding-left: var(--space-lg); border-left: 1px solid var(--sky); }
.principle h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.principle p { margin-top: var(--space-xs); color: var(--color-text-2); max-width: 52ch; }

/* How the work flows: one SVG line through five capsule nodes; the labels are HTML text under it. */
.flow { margin: var(--space-3xl) 0 0; }
.flow__cap { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; color: var(--color-label); }
.flow__body { margin-top: var(--space-lg); }
.flow__svg { width: 100%; height: auto; overflow: visible; }
.flow__svg--v { display: none; }
.flow__base { fill: none; stroke: var(--flow-line); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 14; }
.flow__ink { fill: none; stroke: var(--flow-ink); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 1; }
.mk__line { fill: var(--flow-ground); stroke: var(--flow-edge); stroke-width: 3; }
.mk__fill { fill: var(--flow-lit); }
.flow__mk--4 .mk__fill, .run { fill: var(--flow-run); }
.mk__check { fill: none; stroke: var(--flow-run); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.flow__run { opacity: 0; }   /* static: the job has already arrived, the result capsule is amber */
.flow__nodes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xs); }
.flow__node { text-align: center; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; text-wrap: balance; }

/* ---------- 5. Who it's for ---------- */
.who { padding-block: var(--space-4xl); }
.who__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }   /* heading full width, the audience line under it (round 16) */
.who__title { max-width: 24ch; }
.who__intro p { color: var(--color-text-2); max-width: 52ch; }

/* Trust lines: plain statements next to the work and the form, marked by a small amber capsule */
.trust-line { position: relative; margin-top: var(--space-md); padding-left: 1.5rem; font-size: var(--text-sm); color: var(--color-text-2); max-width: 52ch; }
.trust-line::before, .trust::before { content: ""; position: absolute; left: 0.35rem; top: 0.35em; width: 0.3rem; height: 0.9em; border-radius: var(--radius-pill); background: var(--amber); transform: rotate(var(--slant)); }
.trust { position: relative; margin-top: var(--space-lg); padding-left: 1.5rem; font-weight: 600; }   /* round 22: one plain line, no list */
.trust::before { background: var(--ocean); }

/* ---------- 6. Contact: the ice band, navy text; the form sits on a white card ---------- */
.contact {
  --color-text: var(--ink);
  --color-text-2: var(--ink);
  --color-focus: var(--ink);
  --button-ring: inset 0 0 0 1.5px var(--ink);   /* amber on white is 1.7:1, so the navy ring carries the button edge */
  padding-block: var(--space-4xl) clamp(3rem, 2rem + 3vw, 4.5rem);   /* round 20: the form ends the band, so less below it */
  background: var(--ice);
  color: var(--color-text);
}
.contact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
@media (min-width: 961px) { .contact__intro { align-self: center; } }   /* round 21: the short intro sits centred beside the taller form card, not top-left over empty space */
.contact__sub { margin-top: var(--space-lg); font-size: var(--text-md); max-width: 46ch; }
.contact__mail { margin-top: var(--space-xl); }
.contact__mail a { font-weight: 600; text-decoration-color: var(--ocean); text-decoration-thickness: 2px; }
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
  border-radius: var(--radius-card);
  background: var(--paper);
}
.field { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { padding-left: var(--space-md); font-size: var(--text-xs); font-weight: 600; }
.field input, .field textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--space-lg);
  border: 1px solid var(--field);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 9.5rem; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-area); line-height: 1.5; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus-visible { outline-offset: 2px; border-color: var(--ink); border-radius: var(--radius-pill); }
.field textarea:focus-visible { outline-offset: 2px; border-color: var(--ink); border-radius: var(--radius-area); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
/* Round 21: an error takes space only while it shows (no empty slot under every field); a capsule flag marks it, not red alone. */
.field__error { position: relative; padding-left: calc(var(--space-md) + 1rem); font-size: var(--text-xs); line-height: 1.4; font-weight: 700; color: var(--error); }
.field__error::before { content: ""; position: absolute; left: var(--space-md); top: 0.15em; width: 0.35rem; height: 0.95em; border-radius: var(--radius-pill); background: currentColor; transform: rotate(var(--slant)); }
.field__error:not(.is-shown) { display: none; }
.form__foot { display: flex; }
.btn--submit { min-width: 12rem; }
.btn__busy { display: none; }
.btn--submit.is-busy .btn__idle { display: none; }
.btn--submit.is-busy .btn__busy { display: inline; }
.form__status > p { padding: var(--space-md) var(--space-lg); border: 1px solid var(--field); border-radius: var(--radius-area); background: var(--paper); color: var(--ink); font-weight: 500; }
.form__status > p[data-status="error"] { border-color: var(--error); color: var(--error); }
.form__status a { color: inherit; font-weight: 600; }
.form__status:not(:has(p:not([hidden]))) { position: absolute; }   /* empty live region: still in the a11y tree, but no grid row or gap under the button */
.hp { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp input, .hp label { display: block; width: 1px; }

/* ---------- Footer ---------- */
.site-footer { padding-block: 0 var(--space-lg); color: var(--color-text); }
/* Round 23 (Hector, 10:49 PM): one footer shape at every width, no breakpoints. Row 1: logo + line.
 * Row 2: the links + email as one inline list that wraps tightly. Last line: the copyright, small and muted,
 * left-aligned with the rows above. The closing band meets the footer directly, no strip or rule (round 20). */
.footer__grid { display: grid; justify-items: start; gap: var(--space-2xs); padding-top: var(--space-xl); }
.footer__id { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-lg); min-width: 0; }
.footer__brand .logo { --logo-h: 1.375rem; }
.footer__tag { font-size: var(--text-xs); color: var(--color-text-2); }
.footer__copy { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-text-2); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(1rem, 0.6rem + 1.2vw, 2rem); }
.footer__links a, .footer__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-xs);
  color: var(--color-text-2);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.footer__links a:hover, .footer__toggle:hover { color: var(--color-text); text-decoration: underline; }

/* ===== Motion. Every scroll act (.act) publishes --p (0..1): CSS scroll timelines where supported (html.sd),
 * otherwise script.js computes the same value. Modes (read by script.js from --act): flow (passing through the view), row (the diagram: fully in view -> about centred),
 * exit (the hero leaving). Reduced motion and no-JS never enter this block: everything above is the full static page. ===== */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes act-p { from { --p: 0; } to { --p: 1; } }
@keyframes line-in { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
@keyframes hold-hidden { from { opacity: 0; } to { opacity: 1; } }
@keyframes pn-in { from { opacity: 0; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)); } to { opacity: 1; transform: none; } }
@keyframes cursor-in { from { opacity: 0; transform: translate(2.5rem, 1.5rem); } to { opacity: 1; transform: none; } }
@keyframes dot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes press { 0%, 70%, 100% { background: var(--deep); } 80%, 92% { background: var(--raised); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js .act { --act: flow; }
  .js .flow.act { --act: row; }   /* round 20: the diagram waits until the whole row is in view */
  .sd .act { animation: act-p linear both; animation-timeline: view(); animation-range: cover 10vh cover 60vh; }

  /* Reveals (script.js adds .is-in once) */
  .js [data-reveal] { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }

  /* Hero: the headline assembles line by line; the three screens arrive along their M strokes, in order. */
  .js .hero__title:not(.is-split) { animation: hold-hidden 0s linear 1.4s both; }
  .js .hero__title .w { display: inline-block; animation: line-in 760ms var(--ease-out) both; animation-delay: calc(80ms + var(--l, 0) * 130ms); }
  .js .stack__a { --dx: 1.5rem; --dy: 2.5rem; animation: pn-in 900ms var(--ease-out) 250ms both; }
  .js .stack__b { --dx: 1.5rem; --dy: 2.5rem; animation: pn-in 900ms var(--ease-out) 520ms both; }
  .js .stack__c { --dx: 1.5rem; --dy: -2.5rem; animation: pn-in 900ms var(--ease-out) 800ms both; }
  .js .stack .row, .js .stack .msg, .js .stack .typing { animation: line-in 520ms var(--ease-out) both; animation-delay: calc(700ms + var(--k) * 140ms); }
  .js .stack__b .msg, .js .stack__b .typing { animation-delay: calc(1000ms + var(--k) * 260ms); }
  .js .typing__dots i { animation: dot 1.2s ease-in-out 6 both; }
  .js .typing__dots i:nth-child(2) { animation-delay: 0.2s; }
  .js .typing__dots i:nth-child(3) { animation-delay: 0.4s; }
  .js .cursor { animation: cursor-in 700ms var(--ease-out) 1.7s both; }
  .js .ui-btn--solid.is-hover { animation: press 1.2s linear 2.4s both; }
  /* As the hero leaves, the screens part along the same strokes */
  .js .hero.act { --act: exit; }
  .sd .hero.act { animation-range: exit 0% exit 100%; }
  .sd .flow.act { animation-range: contain 0% contain 60%; }   /* fully in view -> about centred */
  .js .stack__a { translate: calc(var(--p) * -1.5rem) calc(var(--p) * -2.5rem); }
  .js .stack__c { translate: calc(var(--p) * -1.5rem) calc(var(--p) * 2.5rem); }

  /* Service screens: the window arrives along the stroke, then its rows, cards and slots fill in order. */
  .js .svc__shot .pn {
    --e: clamp(0, calc(var(--p) * 2.2), 1);
    opacity: var(--e);
    transform: translate(calc((1 - var(--e)) * -1.5rem), calc((1 - var(--e)) * 2.5rem));   /* up the '/' stroke, from the left */
  }
  .js .svc__shot [style*="--k"] {
    --r: clamp(0, calc((var(--p) * 2.2 - 0.55 - var(--k) * 0.16) * 5), 1);
    opacity: var(--r);
    transform: translateY(calc((1 - var(--r)) * 0.5rem));
  }
  .js .svc__shot .is-selected { transition: box-shadow 300ms var(--ease-out); }

  /* Diagram: the line draws, each node fills as the line reaches it, the amber capsule rides the line. */
  .js .flow__ink { stroke-dashoffset: calc(1 - var(--p)); }
  .js .flow__mk { --lit: clamp(0, calc((var(--p) - var(--k) * 0.25) * 12 + 1), 1); }
  .js .mk__fill { opacity: var(--lit); }
  .js .mk__check { stroke-dashoffset: calc(1 - var(--lit)); }
  .js .flow__run { opacity: calc(1 - clamp(0, calc((var(--p) - 0.97) * 40), 1)); }
  .js .flow__svg--h .flow__run { translate: calc(var(--p) * 800px) 0; }
  .js .flow__svg--v .flow__run { translate: 0 calc(var(--p) * 400px); }

  /* Before/after: the "today" state gives way to "with MateoWorks" as each card comes into view (script.js, once) */
  .js .ba[data-state] .ba__after { transform-origin: 0 0; }
}

/* ---------- Responsive ---------- */
@media (min-width: 961px) and (max-width: 1279px) {
  /* round 21: at mid widths the example screens get half the row, so their titles and rows don't cut off with an ellipsis */
  .hero__grid, .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-2xl); }
}
@media (min-width: 961px) and (max-width: 1100px) { .stack__a .pn__tab:not(.is-on) { display: none; } }   /* round 21: room for the full ES title "Estado del trabajo" */
@media (max-width: 1100px) {
  .topbar__nav ul { gap: var(--space-lg); }
}
@media (max-width: 960px) {
  .topbar__nav { display: none; }
  .topbar__inner { grid-template-columns: auto minmax(0, 1fr); }
  .hero__grid, .svc, .how__grid, .who__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__note { grid-column: 1; margin-top: 0; }
  .stack { max-width: 34rem; }
  .svc__shot { max-width: 34rem; }
  .who__grid { align-items: start; }
}
@media (max-width: 760px) {
  .ba-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Phones: the stack flows instead of floating; each screen still steps along the stroke and overlaps the last. */
  .stack { height: auto; display: grid; }
  .stack > .pn { position: relative; left: auto; top: auto; }
  .stack__a { width: 94%; }
  .stack__b { width: 92%; margin: -1.5rem 0 0 8%; }
  .stack__c { width: 86%; margin: -3.5rem 0 0 2%; }
  .svc__shot .pn { height: auto; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row .av { display: none; }
  .board { grid-template-columns: minmax(0, 1fr); }
  .svc__shot .board { grid-template-rows: none; }
  .col { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; }
  .principles, .form { grid-template-columns: minmax(0, 1fr); }
  .btn--submit { width: 100%; }
  .flow__body { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--space-md); }
  .flow__svg--h { display: none; }
  .flow__svg--v { display: block; width: auto; height: 22.5rem; }
  .flow__nodes { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 4.5rem; gap: 0; margin: 0; }
  .flow__node { display: flex; align-items: center; text-align: left; }
}
@media (max-width: 480px) {
  /* The header keeps two things: the logo and the language button (the hero CTA is right below) */
  .topbar__cta { display: none; }
  .topbar__inner { gap: var(--space-md); min-height: 4.25rem; }
  .mail__line .pill { display: none; }
  .pn__tabs { display: none; }   /* phones: the panel title gets the room */
  .tbl th:nth-child(2), .tbl td:nth-child(2) { display: none; }   /* phones: workflow and priority only */
}
@media (max-width: 359px) {
  .logo { --logo-h: 1.375rem; }
  .lang-toggle { padding: 0 var(--space-sm); }
}