/* MuaHaus's own pages (worker/platform/pages.ts). Lulu Torio's look: white paper, black ink, Gothic A1,
   spaced uppercase labels and pill buttons; MuaHaus's accent is dusty rose (brand/final/README.md).
   --rose #B76E79 is the logo's H only; --red (kept as the variable name) is the accent for buttons, labels and
   focus: ink rose #A7535F on light grounds (5.19:1 on white), dusty rose on dark grounds (4.90:1 on warm black).
   --bad stays a true red so errors never look like the brand. */
:root { --paper: #fff; --paper-2: #f4f4f4; --ink: #16120F; --ink-2: #555559; --mute: #6e6e6e; --rule: #dcdcdc; --red: #A7535F; --red-2: #8E4450; --on-red: #fff; --rose: #B76E79;
  --ok: #1f7a43; --bad: #B3261E; --font: 'Gothic A1', 'Helvetica Neue', Arial, sans-serif; --label: 700 11px/1.2 var(--font); }
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font: 500 16px/1.6 var(--font); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.k-top { display: flex; justify-content: space-between; align-items: center; padding: 26px clamp(16px, 2.6vw, 40px); }
.k-mark { display: inline-flex; color: var(--ink); text-decoration: none; line-height: 0; }
.k-logo { height: 22px; width: auto; display: block; }
.k-lang { font: var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
.k-lang:hover { color: var(--ink); }

.k-main { flex: 1; width: min(960px, 100%); margin: 0 auto; padding: 32px clamp(16px, 2.6vw, 40px) 80px; }
.k-hero { padding: 56px 0 48px; border-bottom: 1px solid var(--rule); }
.k-eyebrow { font: var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--red); margin-bottom: 22px; }
h1 { font: 600 clamp(38px, 7.5vw, 76px)/1 var(--font); text-transform: uppercase; letter-spacing: -.015em; margin-bottom: 24px; }
.k-lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.k-points { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px 40px; padding: 44px 0; border-bottom: 1px solid var(--rule); }
.k-points h2 { font: var(--label); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.k-points p { color: var(--ink-2); font-size: 15px; }
.k-soon { padding: 44px 0 0; color: var(--ink-2); }
.k-soon p + p { margin-top: 24px; }

.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 30px; border: 1px solid var(--red); background: var(--red); color: var(--on-red);
  font: 700 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 999px; }
.k-btn:hover { background: var(--red-2); border-color: var(--red-2); }
.k-btn.quiet { background: none; color: var(--ink); border-color: var(--ink); }
.k-btn.quiet:hover { background: var(--ink); color: var(--paper); }
.k-btn[disabled] { opacity: .5; cursor: default; }
.k-btn small { font-weight: 500; letter-spacing: .04em; text-transform: none; opacity: .75; }

.k-card { max-width: 440px; margin: 24px auto 0; }
.k-card h1 { font-size: clamp(32px, 6vw, 48px); }
.k-card > .k-btn, .k-card form .k-btn { width: 100%; }
.k-card form { margin-top: 18px; display: grid; gap: 14px; }
.k-field { display: grid; gap: 8px; font: var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.k-field input, .k-field select { font: 500 16px/1.4 var(--font); letter-spacing: 0; text-transform: none; padding: 13px 16px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 0; }
.k-field input:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
/* A field that can't be changed here (the email an invitation is for) reads as fixed. */
.k-field input[readonly] { background: var(--paper-2); color: var(--ink-2); }
/* A label that wraps (long on a phone) keeps its lines apart and off the field; a textarea looks like an input. */
.k-field > span { line-height: 1.45; }
.k-field textarea { width: 100%; min-width: 0; font: 500 16px/1.5 var(--font); letter-spacing: 0; text-transform: none; padding: 12px 14px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 0; resize: vertical; }
.k-field textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.k-row + form, .k-row + .k-profile { margin-top: 22px; }
.k-profile > .k-field + .k-note { margin-top: 10px; }
.k-profile > .k-note + .k-btn, .k-profile > .k-note + button { margin-top: 14px; }
.k-msg { min-height: 1.6em; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.k-msg.ok { color: var(--ok); }
.k-msg.bad { color: var(--bad); }
.k-note { margin-top: 14px; font-size: 13px; color: var(--mute); }
.k-houses { list-style: none; padding: 0; display: grid; gap: 10px; }
.k-houses .k-btn { width: 100%; justify-content: space-between; }

/* Sign-up (/registro/) */
.k-card.k-wide { max-width: 560px; }
.k-card .k-lede { font-size: 16px; margin-bottom: 8px; }
.k-row { display: flex; flex-wrap: wrap; gap: 12px; }
.k-card fieldset { border: 0; padding: 0; display: grid; gap: 14px; margin-top: 18px; }
.k-card legend { font: var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--red); padding: 0; margin-bottom: 14px; }
.k-slug { display: flex; align-items: stretch; border: 1px solid var(--rule); }
.k-slug:focus-within { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.k-slug input { flex: 1; min-width: 0; border: 0; }
.k-slug input:focus { outline: none; }
.k-slug b { display: flex; align-items: center; padding: 0 14px 0 2px; font: 500 15px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--mute); white-space: nowrap; }
.k-hint { font: 500 13px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--mute); }
.k-hint.ok { color: var(--ok); }
.k-hint.bad { color: var(--bad); }
.k-checks { display: flex; gap: 22px; font: 500 15px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); }
.k-checks label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.k-checks input { width: 18px; height: 18px; padding: 0; accent-color: var(--red); }
@media (max-width: 420px) { .k-slug b { font-size: 13px; padding-right: 10px; } }

/* The freelancer's area (/yo) */
.k-checks.k-wrap { flex-wrap: wrap; gap: 10px 18px; }
.k-field select, .k-field input[type=file] { width: 100%; min-width: 0; font: 500 15px/1.4 var(--font); letter-spacing: 0; text-transform: none; padding: 12px 14px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 0; }
.k-field input[type=file] { border-style: dashed; font-size: 13px; }
.k-field input:not([type=checkbox]):not([type=radio]) { min-width: 0; width: 100%; }
.k-profile .k-checks { margin-top: 18px; }
.k-h2 { font: var(--label); letter-spacing: .2em; text-transform: uppercase; margin: 36px 0 14px; }
.k-small { min-height: 38px; padding: 0 18px; font-size: 11px; }
.k-link { font-size: 14px; }
.k-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.k-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.k-yo { max-width: 720px; margin: 0 auto; }
.k-yo-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.k-yo-head img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--rule); }
.k-yo-head h1 { margin: 0; font-size: clamp(32px, 7vw, 56px); }
.k-yo-head .k-eyebrow { margin-bottom: 8px; }
.k-jobs, .k-houses-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.k-job, .k-house { border: 1px solid var(--rule); padding: 16px 18px; display: grid; gap: 6px; }
.k-job p, .k-house p { margin: 0; }
.k-job-when { font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.k-house-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.k-share { display: grid; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
.k-share .k-checks { font-size: 14px; }
.k-share .k-btn { justify-self: start; }
.k-row form { display: inline; }

/* Ops (/ops) */
.k-main:has(.k-ops) { width: min(1280px, 100%); }
.k-ops h1 { font-size: clamp(32px, 5vw, 56px); }
.k-ops h2 { font: var(--label); letter-spacing: .2em; text-transform: uppercase; margin: 40px 0 12px; }
.k-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.k-kpis > div { border: 1px solid var(--rule); padding: 14px 16px; display: grid; gap: 6px; }
.k-kpis span { font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.k-kpis b { font: 600 26px/1 var(--font); }
.k-kpis small { color: var(--mute); font-size: 13px; }
.k-quota { grid-column: span 2; }
.k-quota i { display: block; height: 6px; background: var(--paper-2); position: relative; }
.k-quota i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--red); }
.k-table { overflow-x: auto; border: 1px solid var(--rule); }
.k-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.k-table th { font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.k-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.k-table td small { display: block; color: var(--mute); font-size: 12px; }
.k-tag { display: inline-block; font: var(--label); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.k-tag.k-active, .k-tag.k-sent { border-color: var(--ok); color: var(--ok); }
.k-tag.k-paused, .k-tag.k-failed { border-color: var(--red); color: var(--red); }
.k-tag.k-closed { background: var(--ink); color: var(--paper); }
.k-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 260px; }
.k-act input { flex: 1 1 120px; min-width: 0; font: 500 13px/1.3 var(--font); padding: 8px 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.k-act .k-btn { min-height: 34px; padding: 0 14px; font-size: 10px; }
@media (max-width: 640px) { .k-quota { grid-column: auto; } }

.k-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px clamp(16px, 2.6vw, 40px); border-top: 1px solid var(--rule);
  font: var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }

/* Dark: Lulu's back office black, the same red. */
@media (prefers-color-scheme: dark) {
  :root { --paper: #16120F; --paper-2: #221d19; --ink: #fff; --ink-2: #c4bfb7; --mute: #8f8a82; --rule: #2e2c29; --ok: #8fd0a4;
    --red: #B76E79; --red-2: #c98691; --on-red: #16120F; --bad: #ff8a80; }
  .k-field input, .k-field textarea { background: var(--paper-2); }
}
.k-yo > .k-row { margin-top: 22px; }
/* /yo: signing and the badge */
.k-checks.k-col { flex-direction: column; gap: 12px; }
.k-sig { position: relative; height: 170px; background: #161514; border: 1px solid var(--rule); touch-action: none; }
.k-sig.bad { border-color: var(--red); }
.k-sig canvas { width: 100%; height: 100%; display: block; }
.k-sig .k-btn { position: absolute; right: 8px; bottom: 8px; background: #161514; color: #f4f1ec; border-color: #555; }
.k-pend { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--rule); }
.k-gafete button { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--ink); background: none; color: var(--ink); border-radius: 999px; font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; margin: 4px 6px 4px 0; }
.k-ops-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 8px; font: var(--label); letter-spacing: .14em; text-transform: uppercase; }
.k-ops-nav a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.k-ops-nav a:hover { border-color: var(--red); }
.k-h3 { font: var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin: 24px 0 10px; }
.k-switch { margin-bottom: 12px; }
.k-thread blockquote { margin: 18px 0; padding: 14px 18px; border-left: 3px solid var(--red); background: var(--paper-2); white-space: pre-wrap; }
.k-reply { padding: 12px 0; border-top: 1px solid var(--rule); white-space: pre-wrap; }

/* ---- phones and touch (QA 13 Nov 2026) ---- */
@media (max-width: 700px) {
  /* under 16px, iOS zooms into a field when it's tapped */
  .k-field select, .k-act input { font-size: 16px; }
}
@media (pointer: coarse) {
  /* header and footer links, the ops sections: finger-sized targets, same look */
  .k-lang, .k-mark { padding-block: 10px; margin-block: -10px; }
  .k-ops-nav { gap: 4px 20px; }
  .k-ops-nav a { display: inline-block; padding-block: 8px 4px; }
}
/* /yo/firmar: room between the ticks, her name, the pad and Firmar */
#k-sign { display: grid; gap: 22px; }
#k-sign > .k-btn { justify-self: start; margin-top: 4px; }
#k-sign .k-checks { margin-top: 0; }
/* sign-up: a field with an error, and the "sent" state */
.k-field [aria-invalid="true"] { border-color: var(--bad); outline-color: var(--bad); }
.k-sent { display: block; font-size: 16px; line-height: 1.5; color: var(--ink); }
.k-sent-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.k-hero-cta { margin-top: 22px; }
.k-card form[hidden] { display: none; }