/* Hallmark · shape: Narrative Workflow · genre: modern-minimal · theme: brand · redesign: full
 * paper: #090b0d · accent: #98e8c5 · display: Instrument Sans · body: Inter/system · hero: Banner · nav: open balanced bar · footer: statement and colophon · signature: one request before and after data protection, then explicit approval
 * axes: dark/grotesk-sans/cool · posture: Restrained · imagery: existing system diagram and restitution demo · job: hire · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, the same fictional request shows what changes before a person authorizes sending */
/* Hallmark · reworded "Controla qué datos envías a la IA." to "Controla los datos que recibe la IA." · gate 58 tightens the hero */
/* Hallmark · reworded "Convierte principios en controles que puedes demostrar." to "Ley 21.719, controles demostrables." · gate 58 tightens section heading */
/* Hallmark · reworded "Restituye el resultado con autorización." to "Recupera los datos con autorización." · gate 58 tightens section heading */
/* Hallmark · reworded "Consulta qué se autorizó y por qué." to "Consulta cada decisión de envío." · gate 58 tightens section heading */
/* Hallmark · hero-review: fix · mobile sequence revised for readability at user request · finish-review: subagent ship · 0 findings · material gap: none */
@import url("./tokens.css");
@import url("./base.css");
:root { color-scheme: dark; }
a { text-decoration: none; }
button, a { -webkit-tap-highlight-color: var(--color-clear); }
button { cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
a:active, button:active { opacity: .75; }
button:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.site-header { display: flex; align-items: center; gap: var(--space-flow); min-height: 88px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 20px; font-weight: 600; white-space: nowrap; min-height: 48px; }
.brand img { flex-shrink: 0; }
.desktop-nav { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; }
.desktop-nav a, .header-action { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--text-sm); white-space: nowrap; }
.desktop-nav a { color: var(--color-muted); }
.desktop-nav a:hover, .header-action:hover { color: var(--color-accent); }
.header-action { text-decoration: underline; text-underline-offset: 6px; }
.menu-button { display: none; border: 0; background: var(--color-clear); color: var(--color-ink); width: 48px; height: 48px; padding: var(--space-sm); }
.menu-button span { display: block; height: 2px; background: currentColor; margin-block: var(--space-xs); }
.mobile-menu { position: absolute; top: 88px; inset-inline: var(--gutter); padding: var(--space-lg); background: var(--color-paper-3); color: var(--color-ink); z-index: var(--z-dropdown); }
.mobile-menu a { display: flex; align-items: center; min-height: 48px; }
.mobile-menu a:hover { color: var(--color-accent); }
.hero { padding-block: var(--space-stage) var(--space-2xl); }
.stage-inner { display: flex; flex-direction: column; gap: var(--space-2xl); }
.hero h1 { max-width: 17ch; }
.hero-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-flow); margin-top: var(--space-flow); }
.hero-copy { max-width: 35ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.hero-actions { display: flex; align-items: center; gap: var(--space-lg); flex-shrink: 0; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding-inline: var(--space-lg); border: 1px solid var(--color-clear); border-radius: 4px; font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.primary { background: var(--color-accent); color: var(--color-accent-ink); }
.primary:hover { background: var(--mint-strong); }
.secondary { padding-inline: 0; text-decoration: underline; text-underline-offset: 6px; }
.secondary:hover { color: var(--color-accent); }
.protection-example { margin: 0; }
.protection-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--color-rule); }
.protection-step { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); min-width: 0; }
.protection-step:first-child { padding-left: 0; }
.protection-step + .protection-step { border-left: 1px solid var(--color-rule); }
.protection-step h2 { font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.step-number { margin-right: var(--space-xs); }
.example-text { font-family: var(--font-display); font-size: clamp(1.375rem,2vw,1.75rem); line-height: 1.45; }
.example-text mark { background: var(--color-clear); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; white-space: nowrap; }
.original-step mark { color: var(--coral); }
.protected-step { background: var(--color-paper-2); }
.protected-step mark { color: var(--color-accent); }
.example-note { margin-top: auto; color: var(--color-muted); font-size: var(--text-sm); }
.approval-step { border-top: 2px solid var(--color-accent); }
.approval-step .example-note { color: var(--color-accent); }
.protection-example figcaption { padding-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 80rem) { .hero { min-height: calc(100svh - 88px); display: flex; align-items: center; } }
@media (max-width: 60rem) {
 .site-header { min-height: 80px; gap: var(--space-md); }
 .desktop-nav { display: none; }
 .header-action { margin-left: auto; }
 .menu-button { display: block; }
 .hero { padding-block: var(--space-xl) var(--space-2xl); }
 .hero-intro { align-items: flex-start; flex-direction: column; }
 .mobile-menu { top: 80px; }
}
@media (max-width: 40rem) {
 .header-action { display: none; }
 .menu-button { margin-left: auto; }
 .hero h1 { font-size: clamp(2.75rem, 11vw, 4rem); max-width: 16ch; }
 .hero-actions { flex-wrap: wrap; gap: var(--space-md); }
 .stage-inner { gap: var(--space-xl); }
}
.section { padding-block: var(--section-gap-s); }
.section-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.section-heading p { color: var(--color-ink-2); max-width: 58ch; }
.control { padding-top: var(--section-gap-l); }
.control h2 { max-width: 14ch; }
.policy-runner { list-style: none; counter-reset: protection; margin: 0; padding: 0; }
.runner-step { counter-increment: protection; display: grid; grid-template-columns: 48px minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.7fr); gap: var(--gap-columns); align-items: start; padding-block: var(--space-flow); border-top: 1px solid var(--color-rule); }
.runner-step::before { content: counter(protection, decimal-leading-zero); font-size: var(--text-title); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.runner-step h3 { max-width: 14ch; }
.runner-step p { color: var(--color-ink-2); }
.step-event { color: var(--color-muted); font-size: var(--text-sm); text-align: right; }
.reveal { padding-block: var(--section-gap-s) var(--section-gap-l); }
.reveal h2 { max-width: 14ch; }
.reveal-console { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: var(--gap-columns); align-items: stretch; }
.reveal-context { background: var(--color-paper-3); color: var(--color-ink); padding: var(--space-xl); display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; }
.console-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.protected-status { color: var(--color-accent); }
.document-preview { padding-top: var(--space-2xl); }
.doc-label { font-size: var(--text-sm); color: var(--color-muted); }
.document-preview p { font-family: var(--font-display); font-size: clamp(1.5rem,2.4vw,2.25rem); line-height: 1.45; margin-block: var(--space-lg) var(--space-xl); }
.document-preview mark { background: var(--color-clear); color: var(--color-accent); white-space: nowrap; }
.doc-meta { display: flex; flex-direction: column; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.reveal-permission { padding: var(--space-xl) 0 var(--space-xl) var(--space-flow); }
.reveal-permission h3 { margin-bottom: var(--space-flow); }
.reveal-permission dl { margin: 0 0 var(--space-flow); }
.reveal-permission dl div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.reveal-permission dt { color: var(--color-muted); }
.reveal-permission dd { margin: 0; text-align: right; }
.reveal-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--color-accent); border-radius: 4px; background: var(--color-clear); color: var(--color-accent); padding-inline: var(--space-lg); white-space: nowrap; font-size: var(--text-sm); }
.reveal-button:hover { background: var(--color-paper-3); }
.reveal-feedback { min-height: 3lh; margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.audit { padding-top: 0; padding-bottom: var(--section-gap-l); }
.audit-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: var(--gap-columns); align-items: start; }
.audit-copy h2 { max-width: 12ch; margin-bottom: var(--space-flow); }
.audit-copy p { color: var(--color-ink-2); max-width: 48ch; }
.audit-retention { margin-top: var(--space-lg); }
.audit-stream article { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: var(--gap-columns); padding: var(--space-flow) 0; border-top: 1px solid var(--color-rule); }
.audit-stream time { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.audit-stream article i { display: none; }
.audit-stream article div { display: flex; flex-direction: column; gap: var(--space-xs); }
.audit-stream strong { font-size: var(--text-lg); font-weight: 400; }
.audit-stream article span { font-size: var(--text-sm); color: var(--color-muted); }
.audit-stream .stream-result { border-top-color: var(--color-accent); }
.law { background: var(--color-paper-light); color: var(--color-ink-light); padding-block: var(--section-gap-s); }
.law-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-columns); align-items: start; }
.law h2 { max-width: 14ch; }
.law-intro { max-width: 50ch; margin-top: var(--space-flow); }
.law-note { margin-top: var(--space-flow); font-size: var(--text-sm); color: var(--color-muted-light); }
.legal-caveat { margin-top: var(--space-md); font-size: var(--text-sm); max-width: 50ch; }
.control-ledger { padding-top: var(--space-xs); }
.ledger-head, .ledger-row { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr) minmax(0,.55fr); gap: var(--gap-columns); align-items: center; }
.ledger-head { color: var(--color-muted-light); font-size: var(--text-sm); padding-bottom: var(--space-lg); }
.ledger-row { border-top: 1px solid var(--color-rule-light); padding-block: var(--space-lg); }
.ledger-row strong { font-weight: 600; }
.ledger-row i { font-size: var(--text-sm); font-style: normal; text-align: right; }
.deployment { padding-block: var(--section-gap-l); }
.deployment > div:first-child { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-columns); }
.deployment h2 { max-width: 15ch; }
.deployment-copy { grid-column: 2; align-self: end; color: var(--color-ink-2); max-width: 58ch; }
.deployment-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); padding-block: var(--space-flow); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); font-size: var(--text-title); font-family: var(--font-display); }
.trust-strip { margin-top: var(--space-flow); display: flex; justify-content: space-between; gap: var(--space-flow); color: var(--color-muted); font-size: var(--text-sm); }
.trust-strip > div { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.final-cta { padding-block: var(--space-page) var(--section-gap-s); border-top: 1px solid var(--color-rule); display: flex; align-items: end; justify-content: space-between; gap: var(--space-flow); }
.final-cta h2 { max-width: 20ch; font-size: clamp(2.25rem,5.5vw,5rem); }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-flow); padding-block: var(--space-flow); font-size: var(--text-sm); color: var(--color-muted); }
.site-footer > span:first-child { color: var(--color-ink); font-size: var(--text-xl); }
@media (max-width: 60rem) {
 .section-heading, .reveal-console, .audit-layout, .law-layout, .deployment > div:first-child { grid-template-columns: minmax(0,1fr); }
 .section-heading { gap: var(--space-lg); margin-bottom: var(--space-xl); }
 .runner-step { grid-template-columns: 32px minmax(0,1fr) minmax(0,1.5fr); }
 .step-event { grid-column: 3; text-align: left; }
 .reveal-permission { padding: var(--space-xl) 0 0; }
 .reveal-context { min-height: 360px; }
 .audit-layout, .law-layout { gap: var(--space-2xl); }
 .deployment-copy { grid-column: auto; }
 .deployment-options { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: var(--space-flow); }
 .trust-strip { flex-direction: column; gap: var(--space-md); }
 .final-cta { flex-direction: column; align-items: flex-start; }
 .site-footer { align-items: flex-start; flex-direction: column; gap: var(--space-md); }
}
@media (max-width: 40rem) {
 .hero { padding-top: var(--space-lg); }
 .hero h1 { font-size: 44px; }
 .hero-intro { margin-top: var(--space-lg); gap: var(--space-lg); }
 .hero-copy { font-size: 18px; }
 .stage-inner { gap: var(--space-flow); }
 .hero-actions { gap: var(--space-sm); }
 .button { padding-inline: var(--space-md); font-size: 13px; }
 .secondary { padding-inline: 0; }
 .runner-step { grid-template-columns: 28px minmax(0,1fr); row-gap: var(--space-md); }
 .runner-step p, .step-event { grid-column: 2; }
 .reveal-context { padding: var(--space-lg); min-height: 400px; }
 .console-bar { align-items: start; flex-direction: column; gap: var(--space-xs); }
 .document-preview { padding-top: var(--space-xl); }
 .document-preview p { font-size: 24px; }
 .reveal-permission dl div { font-size: 15px; }
 .audit-stream article { grid-template-columns: 72px minmax(0,1fr); }
 .audit-stream strong { font-size: 18px; }
 .ledger-head { display: none; }
 .ledger-row { grid-template-columns: minmax(0,1fr) auto; gap: var(--space-sm); }
 .ledger-row > span { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted-light); }
 .ledger-row strong { font-size: 18px; }
 .deployment-options { font-size: 20px; }
}

@media (max-width: 60rem) {
 .protection-steps { grid-template-columns: minmax(0,1fr); }
 .protection-step, .protection-step:first-child { padding: var(--space-lg) var(--space-md); gap: var(--space-md); }
 .protection-step + .protection-step { border-left: 0; border-top: 1px solid var(--color-rule); }
 .protection-step.approval-step { border-top: 2px solid var(--color-accent); }
 .example-text { max-width: 38ch; font-size: 24px; }
}