/* Hallmark · shape: Signal Sequence (swapped from Conversational FAQ: the page has no questions on it and a redesign adds none) · genre: modern-minimal · theme: Wayfind (deal 2/3, seed process-automation-custom-software-7bf7·5453d616·2026-11-12·r0), cobalt and amber swapped to the ENRO brand blue and teal · redesign: full · job: hire · draw: 7c4695
 * hero: Stage (the head on the left, the processes board it promises on the right, a sent report landing on it; swapped from Ledge by request: the board read as alone) · nav: slab, an ink bar with the logo, three anchors and the consult action (swapped from search-led: three destinations, nothing to search) · footer: statement · imagery: none, the product built in slots (hero, school, auto, ia, software, proyectos) · signature: a departure board of the client's own processes running on their own, the last row settling to Registrada in place · bands: ENRO School on deep ENRO blue, the consult on sand, the footer on warm ink
 * softened by request: warm paper, hairlines, rounded cards, the hero light with the board as its one dark object; Wayfind now survives as the mono product samples and the board, not as signage across the page
 * finish-review: subagent · fix · 8 findings · 6 resolved (rhythm, hero band, hero inset, module grid, comedor plate, CTA strip) · 2 to the owner (WhatsApp and city slots, three generic heads in approved copy)
 * axes: light/grotesk-sans/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: E, Wayfind sets mono throughout; by the user's word prose and heads are Chivo, its proportional sibling, and mono marks only what the systems print */
/* Hallmark · waive 64 · Chivo Mono on the board, the built screens and their figures · the user found mono throughout too hard, so prose, heads and controls moved to Chivo and mono stays the system's own face */
/* Hallmark · waive 8 · hero, ENRO School, services, consult in the approved order · the redesign keeps the sequence the user signed off and changes each composition */
/* Hallmark · answered F4 · one filled style, the ENRO blue; the hero's second action is a 1px outline, and on the blue band the same control turns cream so it reads */
/* Hallmark · dropped press · the SVG letterpress filter belonged to the Coral stamp, which the redesign retires */
/* Hallmark · dismissed 42 · a light bar sized to three real anchors and one action, softened by request from the ink slab */
/* Hallmark · dismissed 23 · the accent fills only the progress bars inside the plan sample, far under 5% of any viewport */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- shared ---------- */
:root { --nav-h: 64px; scroll-padding-top: calc(var(--nav-h) + var(--space-3xl)); }
html { scroll-behavior: smooth; }
body { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-weight: 700; line-height: 1.02; }
h3 { line-height: 1.1; }
.lead { max-width: 46ch; }
.fig { font-variant-numeric: tabular-nums; }
/* mono only where the page shows a system: the board, the built screens, the plates and their figures */
.rboard, .sheet, .plate, .fig { font-family: var(--font-outlier); }
small, th { font-weight: 500; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid currentColor; border-radius: var(--radius-input); background: transparent; color: inherit; font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklch, var(--color-accent) 82%, var(--color-ink)); border-color: color-mix(in oklch, var(--color-accent) 82%, var(--color-ink)); }
.btn--line { border-color: var(--color-rule); background: var(--color-paper-3); }
.btn--line:hover { border-color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

a.link { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-short) var(--ease-out); }
a.link:hover { color: var(--color-accent); }
a.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.fill { padding: 0 0.25em; border: 1px dashed var(--color-muted); color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* built screens: one bordered surface each, on a flat well */
[data-slot] { background: none; }
.sheet { background: var(--color-paper-3); color: var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.4em 1.6em; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-bottom: 0.7em; margin-bottom: 0.4em; border-bottom: 1px solid var(--color-rule); }
.sheet-head b { font-weight: 700; }
.sheet-head span { font-size: 0.85em; color: var(--color-muted); }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th { text-align: left; font-size: 0.85em; color: var(--color-muted); padding: 0.6em 0.5em 0.5em 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet td { padding: 0.6em 0.5em 0.6em 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet tr:last-child td { border-bottom: 0; }
.sheet .r { text-align: right; padding-right: 0; }
.sheet dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.55em 1.4em; margin: 0.8em 0 0; }
.sheet dt { color: var(--color-muted); }
.sheet dd { margin: 0; font-weight: 500; }
.sheet-note { margin-top: 0.9em; }
.tag { display: inline-block; padding: 0.25em 0.8em; border-radius: var(--radius-pill); border: 1px solid var(--color-rule); background: var(--color-paper-2); font-size: 0.85em; font-weight: 500; }
.check { color: var(--color-accent); font-weight: 700; }
.low td { font-weight: 700; }

/* ---------- nav: slab ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklch, var(--color-paper) 92%, transparent); backdrop-filter: blur(10px); color: var(--color-ink); border-bottom: 1px solid var(--color-rule); }
.nav__in { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--nav-h); }
.nav__logo { display: inline-flex; margin-right: auto; }
.nav__logo img { height: 28px; width: auto; }
.nav__logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__links { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.nav__links a { font-size: var(--text-sm); font-weight: 500; text-decoration: none; padding-block: var(--space-xs); border-bottom: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.nav__links a:hover { border-bottom-color: var(--color-brand-teal); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__cta { min-height: 44px; }
.nav__cta .short { display: none; }

/* ---------- hero: stage, the head beside its board ---------- */
.hero { background: var(--color-paper); color: var(--color-ink); }
.hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: min(calc(100dvh - var(--nav-h)), 44rem); padding-block: var(--space-2xl); }
.hero__text { container-type: inline-size; }
.hero__screen { position: relative; container-type: inline-size; padding: var(--space-xl) var(--space-xl) var(--space-3xl); }
.hero__screen::before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--radius-card) * 1.5); background: var(--color-teal-wash); }
.hero__screen > * { position: relative; }
.toast { position: absolute; left: var(--space-md); bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); max-width: 22rem; padding: var(--space-sm) var(--space-md); background: var(--color-paper-3); color: var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); font-size: var(--text-sm); line-height: 1.35; }
.toast svg { flex: none; width: 32px; height: 32px; padding: var(--space-xs); border-radius: var(--radius-pill); background: var(--color-brand-teal); color: var(--color-ink); }
.toast b { display: block; font-weight: 700; }
.toast span { color: var(--color-ink-2); }
.js .toast { animation: toast-in var(--dur-long) var(--ease-out) 1.4s both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .toast { animation: none; } }
.rboard { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; font-size: clamp(11px, 1.6cqi, 14px); }
.rboard__head { display: flex; justify-content: space-between; align-items: baseline; padding: 1em 1.4em; border-bottom: 1px solid var(--color-ink-rule); }
.rboard__head b { font-weight: 700; }
.rboard__head span { color: var(--color-accent-2); font-weight: 500; }
.rboard table { width: 100%; border-collapse: collapse; }
.rboard th { text-align: left; font-size: 0.85em; color: color-mix(in oklch, var(--color-paper) 62%, var(--color-ink)); padding: 0.8em 1.4em 0.6em; border-bottom: var(--rule-hair) solid var(--color-ink-rule); }
.rboard td { padding: 0.7em 1.4em; border-bottom: var(--rule-hair) solid var(--color-ink-rule); }
.rboard tr:last-child td { border-bottom: 0; }
.rboard td b { font-weight: 500; }
.rboard .r { text-align: right; }
.rboard td.fig { font-weight: 700; color: var(--color-accent-2); font-size: 1.15em; }
.rboard .is-live td { background: var(--color-accent-2); color: var(--color-ink); }
.rboard .is-live td.fig { color: var(--color-ink); }
.rboard .is-done td:last-child { color: var(--color-accent-2); font-weight: 700; }

.hero h1 { max-width: 14ch; font-size: min(4.5rem, 13cqi); }
.hero h1 > span { display: block; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__terms { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- ENRO School: the signal field ---------- */
.school { padding-block: var(--section-gap-s); background: var(--color-band); color: var(--color-paper-3); }
.school__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.school h2 { max-width: 14ch; font-size: var(--text-display-s); }
.school .lead { margin-top: var(--space-lg); color: color-mix(in oklch, var(--color-paper-3) 84%, var(--color-band)); }
.btn--light { background: var(--color-paper-3); border-color: var(--color-paper-3); color: var(--color-ink); }
.btn--light:hover { background: var(--color-paper-2); border-color: var(--color-paper-2); }
.school .btn:focus-visible { outline-color: var(--color-paper-3); }
.school .btn { margin-top: var(--space-xl); }
.school__shot { position: relative; container-type: inline-size; padding-bottom: 8.5em; font-size: clamp(12px, 2.5cqi, 18px); }
.school__shot .sheet { width: min(100%, 34em); margin-left: auto; line-height: 1.4; box-shadow: var(--shadow-card); }
.plate { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-card); }
.school__card { position: absolute; right: 8%; bottom: 0; display: grid; gap: 0.15em; width: 14em; padding: 1em 1.2em; line-height: 1.35; box-shadow: var(--shadow-card); }
.school__card b { font-weight: 700; }
.school__card span { color: color-mix(in oklch, var(--color-paper) 72%, var(--color-ink)); }
.school__card .figure { margin-top: 0.2em; font-size: 1.9em; font-weight: 700; color: var(--color-accent-2); line-height: 1; }

.modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3xl); margin: var(--space-3xl) 0 0; padding: 0; list-style: none; }
.modules li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; padding: var(--space-md) 0; border-top: 1px solid color-mix(in oklch, var(--color-paper-3) 28%, var(--color-band)); }
.modules b { font-size: var(--text-title); font-weight: 700; letter-spacing: var(--tracking-display); }
.modules span { color: color-mix(in oklch, var(--color-paper-3) 82%, var(--color-band)); }

/* ---------- services: the line picker and one row per service ---------- */
.services { padding-block: var(--section-gap) var(--section-gap-s); }
.services__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.services__head h2 { max-width: 16ch; }
.services__head .lead { color: var(--color-ink-2); }
.services__head .stack__also { margin-top: var(--space-md); }

.picker { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); margin-top: var(--space-2xl); padding-block: var(--space-sm); background: var(--color-paper); }
.stack__index { display: grid; grid-template-columns: repeat(4, minmax(max-content, 1fr)); gap: var(--space-2xs); margin: 0; padding: var(--space-2xs); list-style: none; background: var(--color-blue-wash); border: 1px solid color-mix(in oklch, var(--color-brand-blue) 25%, var(--color-blue-wash)); border-radius: calc(var(--radius-input) + var(--space-2xs)); }
.stack__index a { display: flex; align-items: center; min-height: 44px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.stack__index a:hover { background: var(--color-paper-3); }
.stack__index a[aria-current="true"] { background: var(--color-paper-3); color: var(--color-ink); font-weight: 700; box-shadow: var(--shadow-card); }
.stack__index a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }

.service { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: center; padding-block: var(--space-3xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.service h3 { font-size: var(--text-section); max-width: 15ch; }
.service p { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 40ch; }
.service__shot { container-type: inline-size; display: grid; place-items: center; min-height: 400px; padding: var(--space-2xl) var(--space-xl); background: var(--color-blue-wash); border-radius: var(--radius-card); font-size: clamp(12px, 2.3cqi, 16px); line-height: 1.4; }
.service__shot .sheet { width: min(100%, 30em); }
.service--wide { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.service--wide .service__text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.service--wide .service__text p { margin-top: 0; }
.service--wide h3 { max-width: 20ch; }
.service--wide .service__shot { min-height: 460px; font-size: clamp(12px, 1.6cqi, 18px); }
.service--wide .mail { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; width: min(100%, 52em); }
.service--wide .envelope { width: auto; margin-top: 2.5em; }
.service--wide .mail .sheet:last-child { margin-left: 0; }

.timeline { margin: 0.6em 0 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 1.2em minmax(0, 1fr) auto; gap: 0.8em; align-items: center; padding: 0.65em 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.timeline li:last-child { border-bottom: 0; }
.timeline svg { width: 1.2em; height: 1.2em; color: var(--color-accent); }
.timeline .wait svg, .timeline .wait { color: var(--color-muted); }
.timeline .fig { font-weight: 700; }

.mail { display: grid; gap: 1em; width: min(100%, 30em); }
.envelope { display: grid; gap: 0.2em; width: 80%; }
.envelope b { font-weight: 700; }
.envelope span { color: var(--color-muted); font-size: 0.9em; }
.mail .sheet:last-child { margin-left: 12%; }

.bar { position: relative; display: inline-block; width: 6em; height: 0.6em; border-radius: var(--radius-pill); background: var(--color-paper-2); overflow: hidden; vertical-align: middle; }
.bar > i { position: absolute; inset: 0; background: var(--color-accent); transform: scaleX(var(--w, 0)); transform-origin: left; }

.stack__also { color: var(--color-muted); max-width: 46ch; }

/* ---------- the consult ---------- */
.consult { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper-2); }
.consult__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.consult .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.facts { margin: var(--space-xl) 0 0; border-top: 1px solid var(--color-rule); }
.facts > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-weight: 700; font-size: var(--text-sm); }
.facts dd { margin: 0; color: var(--color-ink-2); }

.form { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-card); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); align-items: end; }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 500; }
.field label small { font-weight: 400; color: var(--color-muted); font-size: var(--text-sm); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: 2px; transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 128px; padding: var(--space-sm) var(--space-md); resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-accent); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field .err { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-lg); }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__captcha:empty { display: none; }
.form__captcha { margin-top: var(--space-md); }
.form__status { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); max-width: 44ch; }

/* ---------- footer: statement ---------- */
.foot { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-ink); color: var(--color-paper); }
.foot__statement { color: var(--color-paper); }
.foot__statement { max-width: 24ch; font: 700 var(--text-section)/1.02 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-ink-rule); }
.foot__logo { display: inline-flex; }
.foot__logo img { height: 32px; width: auto; }
.foot__logo:focus-visible, .foot a:focus-visible { outline: 2px solid var(--color-brand-teal); outline-offset: 3px; }
.foot__colophon { color: color-mix(in oklch, var(--color-paper) 78%, var(--color-ink)); max-width: 52ch; }
.foot__colophon a { color: var(--color-paper); text-decoration-thickness: 1px; }
.foot__colophon a:hover { color: var(--color-brand-teal); }
.foot .fill { color: color-mix(in oklch, var(--color-paper) 70%, var(--color-ink)); border-color: color-mix(in oklch, var(--color-paper) 50%, var(--color-ink)); }
.foot__legal { margin-top: var(--space-xl); font-size: var(--text-sm); color: color-mix(in oklch, var(--color-paper) 62%, var(--color-ink)); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .nav__links { display: none; }
  .hero__in { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-2xl); }
  .hero h1 { font-size: min(3.5rem, 11cqi); }
  .hero__screen { padding: var(--space-lg) var(--space-md) var(--space-3xl); }
  .hero__screen::before { inset: 0 calc(-1 * var(--gutter)); border-radius: 0; }
  .toast { left: var(--space-md); right: var(--space-md); bottom: var(--space-md); max-width: none; }
  .school__grid, .services__head, .service, .consult__grid, .foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .modules { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-2xl); }
  .service--wide .service__text, .service--wide .mail { grid-template-columns: minmax(0, 1fr); }
  .service--wide .envelope { margin-top: 0; }
  .picker { display: none; }
  .service { padding-block: var(--space-2xl); }
  .service__shot { min-height: 0; padding: var(--space-xl) var(--space-md); }
}
@media (max-width: 40rem) {
  .nav__cta .long { display: none; }
  .nav__cta .short { display: inline; }
  .hero__actions .btn { flex: 1 1 100%; }
  .rboard .col-time { display: none; }
  .modules li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .form { padding: var(--space-lg); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
}