/* ============================================================
   IA Challenge · Mesa de firmas
   Propuesta self-contained · Bootstrap 5.3 + tokens propios
   Paleta: tinta azul noche · verde azulado · semáforo de validación
   ============================================================ */

/* ---------- Tokens (light) ---------- */
:root,
[data-bs-theme="light"]{
  --paper:#F4F5F7; --surface:#FFFFFF; --surface-2:#EDEFF3;
  --ink:#131A26; --muted:#5A6475; --faint:#8791A1;
  --line:#DCE0E7; --line-strong:#C3C9D3;
  --accent:#0F766E; --accent-soft:#E3F2F0; --accent-ink:#0B5952;
  --ok:#15803D; --ok-soft:#E4F4E9;
  --warn:#B45309; --warn-soft:#FBF0DF;
  --bad:#B91C1C; --bad-soft:#FBE6E6;
  --chat:#8A94A6;
  --shadow:0 1px 2px rgba(19,26,38,.05), 0 10px 28px -16px rgba(19,26,38,.22);
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --bs-body-bg:var(--paper);
  --bs-body-color:var(--ink);
  --bs-body-font-family:var(--sans);
  --bs-emphasis-color:var(--ink);
  --bs-border-color:var(--line);
  --bs-secondary-color:var(--muted);
  --bs-link-color:var(--accent);
  --bs-link-hover-color:var(--accent-ink);
}

/* ---------- Tokens (dark) ---------- */
[data-bs-theme="dark"]{
  --paper:#0D1117; --surface:#151B24; --surface-2:#1B2330;
  --ink:#E6EAF0; --muted:#9AA4B4; --faint:#6E7889;
  --line:#263041; --line-strong:#344056;
  --accent:#2DD4BF; --accent-soft:#12302D; --accent-ink:#5EEAD4;
  --ok:#4ADE80; --ok-soft:#12291B;
  --warn:#FBBF24; --warn-soft:#2E2412;
  --bad:#F87171; --bad-soft:#321719;
  --chat:#6E7889;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.75);

  --bs-body-bg:var(--paper);
  --bs-body-color:var(--ink);
  --bs-emphasis-color:var(--ink);
  --bs-border-color:var(--line);
  --bs-secondary-color:var(--muted);
  --bs-link-color:var(--accent);
  --bs-link-hover-color:var(--accent-ink);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:#fff;}
.wrap{max-width:1060px;}
@media (max-width:575.98px){ .wrap{padding-left:16px; padding-right:16px;} }

.eyebrow{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:0 0 .5rem;
}
h1{
  font-weight:800; letter-spacing:-.025em; line-height:1.05;
  font-size:clamp(2rem,5.2vw,3.2rem); text-wrap:balance; margin:0 0 .75rem;
}
h2{
  font-weight:750; letter-spacing:-.015em;
  font-size:clamp(1.35rem,3vw,1.8rem); text-wrap:balance; margin:0 0 .35rem;
}
h3{font-size:1.02rem; font-weight:700; margin:0 0 .35rem;}
.lead-x{font-size:clamp(1.02rem,2vw,1.18rem); color:var(--muted); max-width:62ch;}
.sec-intro{color:var(--muted); max-width:68ch; margin-bottom:1.5rem;}
section.sec{padding:3.25rem 0 .5rem; scroll-margin-top:80px;}
section.sec + section.sec{border-top:1px solid var(--line);}
.mono{font-family:var(--mono); font-size:.86em;}

/* ---------- Navbar ---------- */
.navbar{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar-brand{font-weight:750; font-size:.98rem; color:var(--ink);}
.navbar-brand .dot{
  display:inline-block; width:.62rem; height:.62rem; border-radius:3px;
  background:var(--accent); margin-right:.45rem; transform:translateY(-1px);
}
.navbar .nav-link{font-size:.86rem; color:var(--muted); font-weight:500;}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--ink);}
.theme-btn{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); display:grid; place-items:center;
}
.theme-btn .bi-sun-fill{display:none;}
[data-bs-theme="dark"] .theme-btn .bi-sun-fill{display:inline;}
[data-bs-theme="dark"] .theme-btn .bi-moon-stars-fill{display:none;}
[data-bs-theme="dark"] .navbar-toggler-icon{filter:invert(1);}

/* ---------- Cards genéricas ---------- */
.card-x{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:1.15rem 1.2rem; box-shadow:var(--shadow); height:100%;
}
.card-x p:last-child,.card-x ul:last-child{margin-bottom:0;}
.card-x .ic{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.1rem; margin-bottom:.7rem;
}
.card-x.pain .ic{background:var(--bad-soft); color:var(--bad);}
.card-x small,.muted{color:var(--muted);}
ul.tight{padding-left:1.1rem; margin:0;}
ul.tight li{margin:.2rem 0;}

/* ---------- Hero: antes / después ---------- */
.hero{padding:3rem 0 1rem;}
.vs{display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:stretch; margin-top:2rem;}
@media (max-width:767.98px){ .vs{grid-template-columns:1fr;} .vs .arrow{transform:rotate(90deg); justify-self:center;} }
.vs .arrow{display:grid; place-items:center; color:var(--faint); font-size:1.6rem;}
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:1rem; box-shadow:var(--shadow); min-width:0;
}
.panel .ttl{font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.75rem;}
.bubble{
  background:var(--surface-2); border-radius:12px 12px 12px 4px; padding:.45rem .7rem;
  font-size:.84rem; margin:.35rem 0; max-width:92%;
}
.bubble b{display:block; font-size:.72rem; color:var(--chat);}
.bubble.me{margin-left:auto; border-radius:12px 12px 4px 12px; background:var(--accent-soft);}
.bubble .ph{
  display:inline-flex; gap:.25rem; align-items:center; font-size:.78rem; color:var(--muted);
}
.case-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; align-items:center;
  border:1px solid var(--line); border-radius:10px; padding:.5rem .65rem; margin:.4rem 0;
  font-size:.84rem; background:var(--surface);
}
.case-row .fol{font-family:var(--mono); font-size:.78rem; color:var(--muted);}
.case-row .who{color:var(--muted); font-size:.76rem;}

/* ---------- Pills / semáforo ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:650;
  padding:.18rem .55rem; border-radius:999px; white-space:nowrap;
}
.pill.ok{background:var(--ok-soft); color:var(--ok);}
.pill.warn{background:var(--warn-soft); color:var(--warn);}
.pill.bad{background:var(--bad-soft); color:var(--bad);}
.pill.info{background:var(--accent-soft); color:var(--accent);}
.pill.neutral{background:var(--surface-2); color:var(--muted);}

/* ---------- Flujo ---------- */
.flow{list-style:none; padding:0; margin:0; display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
.flow li{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:1rem; box-shadow:var(--shadow);
}
.flow .n{
  font-family:var(--mono); font-size:.72rem; font-weight:700; color:var(--accent);
  display:block; margin-bottom:.3rem;
}
.flow p{font-size:.86rem; color:var(--muted); margin:0;}
.flow li.ai{border-color:color-mix(in srgb, var(--accent) 45%, var(--line));}
.flow li.ai::after{
  content:"IA"; position:absolute; top:.7rem; right:.75rem; font-size:.64rem; font-weight:800;
  letter-spacing:.08em; color:var(--accent); background:var(--accent-soft); padding:.1rem .4rem; border-radius:6px;
}

/* ---------- Capas del motor ---------- */
.layers{counter-reset:ly; display:grid; gap:.7rem;}
.layer{
  display:grid; grid-template-columns:52px 1fr; gap:1rem; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem;
}
.layer .lv{
  counter-increment:ly; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-weight:800; font-family:var(--mono);
}
.layer .lv::before{content:"L" counter(ly);}
.layer p{margin:0; color:var(--muted); font-size:.92rem;}
.layer .tags{margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.35rem;}
.tag{font-size:.7rem; font-weight:600; padding:.12rem .5rem; border-radius:6px; border:1px solid var(--line); color:var(--muted);}

/* ---------- Mock de resultado ---------- */
.mock{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden;
}
.mock-h{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:space-between; align-items:center;
  padding:.85rem 1rem; border-bottom:1px solid var(--line); background:var(--surface-2);}
.mock-h .t{font-weight:700; font-size:.92rem;}
.mock-h .t small{display:block; font-weight:500; color:var(--muted); font-family:var(--mono); font-size:.74rem;}
.pages{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:.5rem; padding:1rem;}
.pg{
  aspect-ratio:3/4; border-radius:8px; border:2px solid var(--line); background:var(--paper);
  display:flex; flex-direction:column; justify-content:space-between; padding:.35rem; font-size:.66rem;
  font-family:var(--mono); color:var(--muted);
}
.pg i{font-size:1rem; align-self:flex-end;}
.pg.ok{border-color:var(--ok);} .pg.ok i{color:var(--ok);}
.pg.warn{border-color:var(--warn);} .pg.warn i{color:var(--warn);}
.pg.bad{border-color:var(--bad);} .pg.bad i{color:var(--bad);}
.findings{list-style:none; padding:0 1rem 1rem; margin:0; display:grid; gap:.45rem;}
.findings li{display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start; font-size:.86rem;
  border:1px solid var(--line); border-radius:10px; padding:.55rem .7rem;}
.findings li .why{color:var(--muted); font-size:.8rem; display:block;}
.illus{font-size:.74rem; color:var(--faint); padding:0 1rem .9rem;}

/* ---------- Tablas ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface);}
.tbl{width:100%; border-collapse:collapse; font-size:.88rem; min-width:620px;}
.tbl th,.tbl td{padding:.65rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; text-align:left;}
.tbl tr:last-child td{border-bottom:0;}
.tbl th{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); font-weight:700;}
.tbl td:first-child{font-weight:650; white-space:nowrap;}
.tbl .yes{color:var(--ok);} .tbl .no{color:var(--faint);}

/* ---------- Opciones ---------- */
.opt{position:relative;}
.opt.rec{border:2px solid var(--accent);}
.opt .badge-rec{
  position:absolute; top:-.7rem; left:1rem; background:var(--accent); color:var(--surface);
  font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.18rem .55rem; border-radius:6px;
}
[data-bs-theme="dark"] .opt .badge-rec{color:#0D1117;}
.pc{display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.6rem; font-size:.84rem;}
@media (max-width:575.98px){ .pc{grid-template-columns:1fr;} }
.pc b{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;}
.pc .pro b{color:var(--ok);} .pc .con b{color:var(--bad);}

/* ---------- Roadmap ---------- */
.road{display:grid; gap:.8rem;}
.phase{display:grid; grid-template-columns:120px 1fr; gap:1rem; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem;}
@media (max-width:575.98px){ .phase{grid-template-columns:1fr; gap:.4rem;} }
.phase .when{font-family:var(--mono); font-size:.78rem; color:var(--accent); font-weight:700;}
.phase .when span{display:block; color:var(--muted); font-weight:500;}
.phase .out{margin-top:.5rem; font-size:.84rem; color:var(--muted);}
.phase .out b{color:var(--ink);}

/* ---------- KPIs ---------- */
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem; height:100%;}
.kpi .k{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700;}
.kpi .v{font-size:1.02rem; font-weight:700; margin:.25rem 0;}
.kpi p{font-size:.82rem; color:var(--muted); margin:0;}

/* ---------- Callout / decisiones ---------- */
.callout{
  border-left:4px solid var(--warn); background:var(--warn-soft); border-radius:0 12px 12px 0;
  padding:.9rem 1.1rem; font-size:.92rem;
}
.callout.info{border-color:var(--accent); background:var(--accent-soft);}
.decis{list-style:none; padding:0; margin:0; display:grid; gap:.6rem;}
.decis li{display:grid; grid-template-columns:150px 1fr; gap:1rem; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; font-size:.9rem;}
@media (max-width:575.98px){ .decis li{grid-template-columns:1fr; gap:.2rem;} }
.decis .q{font-weight:700; color:var(--accent); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line); padding:1.5rem 0 2.5rem; margin-top:3rem; font-size:.8rem; color:var(--muted);}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} }