/* Kirk Marketing — base compartida (web, propuestas, mensajes) */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations'), url('/assets/fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #000;
  --paper: #fff;
  --g1: #f3f3f3;
  --g2: #c7c7c7;
  --g3: #616161;
  --y: #ffd600; --o: #ff7900; --m: #f50083; --v: #7026ff; --b: #064bff; --c: #00bdeb; --gr: #60ce00;
  --spectrum: linear-gradient(90deg, var(--y), var(--o) 17%, var(--m) 34%, var(--v) 52%, var(--b) 68%, var(--c) 84%, var(--gr));
  --spectrum-v: linear-gradient(180deg, var(--y), var(--o) 17%, var(--m) 34%, var(--v) 52%, var(--b) 68%, var(--c) 84%, var(--gr));
  --satin: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%, rgba(0,0,0,.18));
  --satin-h: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%, rgba(0,0,0,.16));
  --font: 'Archivo', 'DejaVu Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --gut: clamp(16px, 4vw, 56px);
  --focus: #064bff;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.5; font-stretch: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.05; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; font-size: .78rem; text-transform: uppercase; }
.small { font-size: .85rem; }
.muted { color: var(--g3); }
.kicker { font-family: var(--mono); font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--g3); margin-bottom: 1.2rem; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .7rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botones */
.btn { --h: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--h); padding: 0 1.4rem; border: 2px solid var(--ink); border-radius: 999px; font: inherit; font-weight: 800; font-stretch: 110%; letter-spacing: .01em; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; background: transparent; color: var(--ink); transition: color .2s, background .2s; }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--spectrum); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.7,0,.2,1); }
.btn-solid:hover::after, .btn-solid:focus-visible::after { transform: scaleX(1); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-link { border-color: transparent; padding: 0 .4rem; text-decoration: underline; }
.btn-sm { --h: 2.4rem; padding: 0 1rem; font-size: .9rem; }
.btn-lg { --h: 3.6rem; padding: 0 2rem; font-size: 1.1rem; }
.btn[disabled] { opacity: .5; cursor: progress; }

/* Página de mensaje (404, gracias) */
.page-msg { min-height: 100svh; display: grid; place-items: center; padding: var(--gut); }
.msg { max-width: 38rem; }
.msg-logo img { width: 160px; height: auto; margin-bottom: 3rem; }
.msg h1 { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 900; font-stretch: 110%; letter-spacing: -.03em; }
.msg-code { font-family: var(--mono); color: var(--g3); }

/* Páginas privadas de propuesta / diseño */
.share { background: var(--paper); }
.share-top { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gut); border-bottom: 2px solid var(--ink); }
.share-top img { width: 120px; height: auto; }
.share-tag { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; border: 1.5px solid var(--ink); padding: .3rem .6rem; border-radius: 999px; }
.share-main { max-width: 980px; margin: 0 auto; padding: clamp(24px, 5vw, 64px) var(--gut) 4rem; }
.share-h { font-size: clamp(2rem, 6vw, 4.2rem); font-weight: 900; font-stretch: 112%; letter-spacing: -.035em; text-transform: uppercase; }
.share .meta { color: var(--g3); }
.share-foot { border-top: 1px solid var(--g2); padding: 1.2rem var(--gut); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; color: var(--g3); }
.demo-banner { background: var(--ink); color: #fff; padding: .6rem 1rem; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; border-left: 8px solid var(--m); }
.p-items { border-top: 3px solid var(--ink); margin-top: 2rem; }
.p-item { display: grid; grid-template-columns: 1fr minmax(240px, 34%); gap: 1.5rem 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--g2); }
.p-item h3 { font-size: 1.35rem; font-weight: 850; font-stretch: 105%; }
.p-item-nums { margin: 0; display: grid; gap: .35rem; align-content: start; }
.p-item-nums div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--g2); padding-bottom: .3rem; }
.p-item-nums dt { color: var(--g3); font-size: .9rem; }
.p-item-nums dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.p-item-nums .tot dd { font-weight: 900; }
.p-imgs { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.p-imgs figure { margin: 0; width: min(220px, 100%); }
.p-imgs img { border: 1px solid var(--g2); background: var(--g1); width: 100%; height: auto; }
.p-imgs figcaption { font-family: var(--mono); font-size: .68rem; color: var(--g3); margin-top: .3rem; }
.p-totals { margin: 1.5rem 0 2.5rem auto; max-width: 420px; display: grid; gap: .4rem; }
.p-totals div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.p-totals .grand { border-top: 3px solid var(--ink); padding-top: .6rem; font-size: 1.4rem; font-weight: 900; }
.p-cond { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2.5rem; margin-bottom: 2rem; }
.p-cond h3 { font-size: 1rem; font-weight: 850; }
.decide, .decided { margin-top: 3rem; padding: clamp(1.2rem, 4vw, 2.4rem); border: 3px solid var(--ink); position: relative; }
.decide::before, .decided.aprobada::before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; height: 8px; background: var(--spectrum); }
.decide h2 { font-size: 1.8rem; font-weight: 900; font-stretch: 110%; text-transform: uppercase; }
.decide-form { display: grid; gap: 1rem; }
.decide-form label { display: grid; gap: .3rem; font-weight: 650; font-size: .95rem; }
.decide-form input:not([type=checkbox]), .decide-form textarea { font: inherit; border: 2px solid var(--ink); border-radius: 0; padding: .7rem .8rem; background: #fff; width: 100%; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.check { display: flex !important; grid-template-columns: none; gap: .7rem; align-items: flex-start; font-weight: 500 !important; }
.check input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; accent-color: #000; flex: none; }
.decide-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.decided blockquote { margin: 1rem 0 0; padding-left: 1rem; border-left: 4px solid var(--ink); }
.d-file { margin: 2rem 0; border: 1px solid var(--g2); background: var(--g1); padding: clamp(.5rem, 2vw, 1.5rem); }
.d-file img { margin: 0 auto; max-height: 75vh; width: auto; }
@media (max-width: 720px) {
  .p-item { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
}

/* Política */
.legal-main { max-width: 46rem; margin: 0 auto; padding: 3rem var(--gut); }
.legal-main img { width: 140px; height: auto; margin-bottom: 2.5rem; }
.legal-main h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; font-stretch: 110%; }