/* coteja — página pública. Usa el sistema de diseño nuevo (papel, tinta,
   verdigrís, latón para el sello, riesgo con lenguaje propio). Vive aparte de
   application.css hasta que la consola migre al mismo sistema. */
.lp{
  --paper:#F6F3EC; --paper-sunk:#EDE8DD; --rule:#D9D2C3;
  --ink:#1B1F1E; --ink-soft:#545B58; --ink-faint:#646966;
  --accent:#14695F; --accent-strong:#0E4F47; --on-accent:#F6F3EC; --seal:#7E6233;
  --risk-high:#A84E17; --risk-high-wash:#F6EAE1;
  --state-current:#3F5F55; --state-delayed:#7A5C0F; --state-error:#9B2B2C;
  --display:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:1120px;
}
@media (prefers-color-scheme:dark){.lp{
  --paper:#141716; --paper-sunk:#1E2221; --rule:#2E3432;
  --ink:#E9E5DC; --ink-soft:#A7ABA6; --ink-faint:#959994;
  --accent:#4FB3A3; --accent-strong:#7CCBBE; --on-accent:#0E1211; --seal:#C9A86A;
  --risk-high:#E08A55; --risk-high-wash:#33241B; --state-current:#8FB8AA; --state-delayed:#D9B04A; --state-error:#E87773;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.lp{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.lp a{color:var(--accent);text-underline-offset:3px}
.lp a:hover{color:var(--accent-strong)}
.lp :focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 1px var(--paper)}
/* Pesos 400 y 500 (sistema de diseño §3): el negrito del navegador es 700. */
.lp b,.lp strong{font-weight:500}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.label{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* barra */
.bar{border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex;align-items:center;gap:28px;height:64px}
.wm{display:inline-flex;align-items:center;text-decoration:none}
.wm img{display:block;height:24px;width:auto}
.pie .wm img{height:18px}
.lp .wm{color:var(--ink)}
.bar nav{display:flex;gap:24px;margin-left:auto;align-items:center;font-size:14px}
.bar nav a{color:var(--ink-soft);text-decoration:none}
.bar nav a:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:4px;
     font:500 15px/1 var(--sans);text-decoration:none;border:1px solid var(--ink-soft);color:var(--ink);background:transparent;cursor:pointer}
/* Borde de control en tinta suave (6,3:1): el filete --rule es separador, no borde. */
.lp .btn:hover{background:var(--paper-sunk)}
.lp .btn{color:var(--ink)}
.lp .btn.pr{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lp .btn.pr:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent)}
.btn.sm{height:36px;padding:0 14px;font-size:14px}

/* portada */
.hero{padding:88px 0 72px;border-bottom:1px solid var(--rule)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.hero h1{font:400 clamp(38px,5.2vw,60px)/1.05 var(--display);letter-spacing:-.02em;margin:16px 0 0}
.hero p.lead{font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:34em;margin:24px 0 0}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* hoja de expediente */
.sheet{border:1px solid var(--rule);background:var(--paper);padding:24px 26px}
.sheet-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.sheet-h b{display:block;font:500 21px/1.2 var(--display)}
.sheet-h span.doc{font-size:13px;color:var(--ink-soft)}
.risk{display:inline-flex;gap:6px;align-items:center;padding:3px 8px;border-radius:2px;font-size:13px;font-weight:500;white-space:nowrap}
.risk i{font-style:normal;font-size:9px;letter-spacing:1px}
.risk.high{color:var(--risk-high);background:var(--risk-high-wash)}
.ev{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin-top:16px;padding:14px 16px;background:var(--paper-sunk);border-left:2px solid var(--seal);font-size:14px}
.ev .mono{font-size:13px}
.seal{margin-top:16px;border:1px solid var(--seal);color:var(--seal);padding:12px 14px;font-size:13px;line-height:1.5}
.seal b{font:500 17px/1 var(--display)}

/* cifras */
.nums{border-bottom:1px solid var(--rule)}
.nums .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.num{padding:32px 24px 30px 0}
.num + .num{padding-left:24px;border-left:1px solid var(--rule)}
/* Cifras de conteo en Plex Sans con dígitos tabulares, como los indicadores de la app;
   el mono queda para lo que se coteja (documentos, fechas, pesos, probabilidades). */
.num b{display:block;font:500 34px/1.1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.num span{display:block;font-size:14px;color:var(--ink-soft);margin-top:6px}
.nums .src{grid-column:1/-1;font-size:13px;color:var(--ink-faint);padding:0 0 22px}

/* secciones */
.sec{padding:96px 0;border-bottom:1px solid var(--rule)}
.sec .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.sec h2{font:400 clamp(30px,3.6vw,42px)/1.12 var(--display);letter-spacing:-.015em;margin:14px 0 0}
.sec p{color:var(--ink-soft);max-width:34em}
.sec .copy p:first-of-type{margin-top:22px;font-size:17px}
.sec ul.facts{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--rule)}
.sec ul.facts li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px}
.sec ul.facts li b{font-weight:500}

/* explicación de la coincidencia */
.match{border:1px solid var(--rule);padding:26px}
.match .sum{font-size:14px;color:var(--ink-soft)}
.match .sum b{color:var(--ink);font-weight:500}
.prob{display:flex;align-items:baseline;gap:14px;margin-top:20px;flex-wrap:wrap}
.prob b{font:500 48px/1 var(--mono)}
.prob span{font-size:14px;color:var(--ink-soft)}
.scale{position:relative;height:34px;margin-top:18px;border-bottom:1px solid var(--rule)}
.scale .th{position:absolute;left:50%;top:0;bottom:-5px;border-left:1px solid var(--ink)}
.scale .th span{position:absolute;left:8px;top:0;font-size:12px;color:var(--ink-soft);white-space:nowrap}
.scale .pt{position:absolute;left:4%;bottom:-5px;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.weights{margin-top:24px;display:grid;gap:12px}
.w{display:grid;grid-template-columns:130px 1fr 1fr 52px;align-items:center;gap:10px;font-size:14px}
.w .neg{justify-self:end;height:8px;background:var(--ink-soft)}
.w .pos{height:8px;background:var(--accent)}
.w .v{text-align:right;font-family:var(--mono)}
.match .foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule);font-size:14px}

/* fuentes */
.srcs{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none;columns:2;column-gap:40px}
.srcs li{break-inside:avoid;padding:11px 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;font-size:15px}
.srcs li span{color:var(--state-current);font-size:13px;white-space:nowrap}
.srcs li span.st-demora{color:var(--state-delayed)}
.srcs li span.st-error{color:var(--state-error)}
.srcs li span.st-pausada{color:var(--ink-faint)}

/* pasos */
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);counter-reset:s}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:8px;padding:20px 0;border-bottom:1px solid var(--rule);counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 14px/1.7 var(--mono);color:var(--ink-soft)}
.steps b{display:block;font-weight:500;font-size:17px}
.steps p{margin:4px 0 0;font-size:15px}

/* marca blanca */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo .sheet{padding:20px}
.duo .sheet .wm2{font:500 20px/1.1 var(--display);margin:6px 0 14px}
.duo .alt{--accent:#1F3F73;--display:"Libre Caslon Text",Georgia,serif}
.duo .chipline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.state{font-size:13px;color:var(--state-current);font-weight:500}

/* demo */
.demo{padding:96px 0}
.demo .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px}
.demo h2{font:400 clamp(30px,3.6vw,42px)/1.12 var(--display);margin:14px 0 0}
form.df{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.df .f{display:grid;gap:6px}
.df .f.full{grid-column:1/-1}
.df label{font-size:13px;font-weight:500;color:var(--ink-soft)}
/* Campos en «contorno» (opción B confirmada): papel y filete completo en tinta suave. */
.df input,.df select,.df textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--ink-soft);border-radius:4px;padding:9px 12px;min-height:44px;width:100%}
.df input:focus-visible,.df select:focus-visible,.df textarea:focus-visible{border-color:var(--accent)}
.df textarea{min-height:96px;resize:vertical}
.df input[type=submit]{width:auto;border-radius:4px}
.df .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.df .send{grid-column:1/-1;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.df .send small{color:var(--ink-faint);font-size:13px}
.notice{border-left:2px solid var(--seal);background:var(--paper-sunk);padding:14px 16px;margin:0 0 24px;font-size:15px}
.errors{border-left:2px solid var(--risk-high);background:var(--risk-high-wash);padding:12px 16px;margin:0 0 20px;font-size:14px;color:var(--risk-high)}
.errors ul{margin:6px 0 0;padding-left:18px}

/* pie */
.pie{border-top:1px solid var(--rule);padding:32px 0 48px;font-size:14px;color:var(--ink-soft)}
.pie .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline}
.pie .wm{font-size:20px}
.pie nav{margin-left:auto;display:flex;gap:20px}

@media (max-width:900px){
  .wrap{padding:0 16px}
  .bar nav .hide-m{display:none}
  .hero{padding:48px 0}
  .hero .wrap,.sec .wrap,.demo .wrap{grid-template-columns:1fr;gap:36px}
  .nums .wrap{grid-template-columns:1fr 1fr}
  .num:nth-child(3){padding-left:0;border-left:0}
  .num{border-top:1px solid var(--rule)}
  .num:nth-child(-n+2){border-top:0}
  .sec,.demo{padding:56px 0}
  .srcs{columns:1}
  .duo{grid-template-columns:1fr}
  form.df{grid-template-columns:1fr}
  .w{grid-template-columns:100px 1fr 1fr 44px;font-size:13px}
  .num b{font-size:28px}
}