@import url("fonts.css");

/* ============================================================
   contabl.ai — papel de libro contable (greenbar)
   ============================================================ */
:root{
  --paper:#F1F4EC;         /* papel */
  --bar:#DFE8DB;           /* banda verde del greenbar */
  --rule:#BFCFBC;          /* filete impreso */
  --rule-soft:#D6E0D1;
  --ink:#12211D;           /* tinta */
  --ink-2:#4A5C54;         /* tinta secundaria */
  --ink-3:#75857C;         /* tinta terciaria */
  --teal:#0C7A6E;
  --teal-deep:#08554C;
  --amber:#B8690F;
  --amber-soft:#F3E2C6;
  --card:#FBFCF8;
  --shadow:0 1px 0 var(--rule), 0 10px 30px -22px rgba(18,33,29,.55);
  --maxw:1180px;
  --f-display:"Spectral",Georgia,serif;
  --f-body:"Inter Tight",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}
:root[data-theme="dark"], html.dark{
  --paper:#0D1512; --bar:#121D19; --rule:#25352E; --rule-soft:#1B2822;
  --ink:#E6EFE8; --ink-2:#9DB0A5; --ink-3:#748379;
  --teal:#2FA394; --teal-deep:#7FD3C6; --amber:#D89138; --amber-soft:#2E2213;
  --card:#111A16;
  --shadow:0 1px 0 var(--rule), 0 14px 40px -26px #000;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0D1512; --bar:#121D19; --rule:#25352E; --rule-soft:#1B2822;
    --ink:#E6EFE8; --ink-2:#9DB0A5; --ink-3:#748379;
    --teal:#2FA394; --teal-deep:#7FD3C6; --amber:#D89138; --amber-soft:#2E2213;
    --card:#111A16;
    --shadow:0 1px 0 var(--rule), 0 14px 40px -26px #000;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{margin:0; font-family:var(--f-display); font-weight:700; line-height:1.12; letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* etiqueta de folio: el rótulo del libro */
.folio{
  font-family:var(--f-mono); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--teal);
  display:inline-flex; align-items:center; gap:.55rem;
}
.folio::before{content:""; width:26px; height:2px; background:var(--teal); opacity:.6}

/* ---------- barra superior ---------- */
header.top{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule);
}
.top .wrap{display:flex; align-items:center; gap:20px; height:62px}
.brand{font-family:var(--f-display); font-weight:700; font-size:1.32rem; letter-spacing:-.02em; text-decoration:none; white-space:nowrap}
.brand i{font-style:normal; color:var(--teal)}
.top nav{margin-left:auto; display:flex; align-items:center; gap:22px}
.top nav a{
  font-size:.86rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:4px 0; border-bottom:1.5px solid transparent;
}
.top nav a:hover{color:var(--ink); border-bottom-color:var(--teal)}
.tbtn{
  border:1px solid var(--rule); background:transparent; color:var(--ink-2);
  width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:.95rem; line-height:1;
  display:grid; place-items:center;
}
.tbtn:hover{border-color:var(--teal); color:var(--teal)}
.cta-sm{
  background:var(--teal); color:#fff !important; text-decoration:none;
  padding:9px 17px; border-radius:2px; font-size:.86rem; font-weight:600;
  border-bottom:none !important;
}
.cta-sm:hover{background:var(--teal-deep); color:#fff !important}
@media(max-width:860px){ .top nav a:not(.cta-sm){display:none} }

/* ---------- hero ---------- */
.hero{padding:88px 0 64px; border-bottom:1px solid var(--rule); position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:2}
.hero h1{
  font-size:clamp(2.5rem,6.2vw,4.6rem); max-width:19ch; margin:22px 0 0;
}
.hero h1 em{font-style:normal; color:var(--teal); position:relative}
.hero .lede{
  margin-top:26px; max-width:56ch; font-size:clamp(1.05rem,1.6vw,1.24rem);
  color:var(--ink-2); line-height:1.55;
}
.hero .lede b{color:var(--ink); font-weight:600}

/* conmutador de audiencia */
.aud{display:flex; flex-wrap:wrap; gap:0; margin-top:34px; border:1px solid var(--rule); width:max-content; max-width:100%; background:var(--card)}
.aud button{
  font-family:var(--f-body); font-size:.88rem; font-weight:600; color:var(--ink-2);
  background:transparent; border:0; padding:11px 20px; cursor:pointer; white-space:nowrap;
  border-right:1px solid var(--rule);
}
.aud button:last-child{border-right:0}
@media(max-width:560px){
  .aud{width:100%}
  .aud button{flex:1 1 40%; padding:11px 12px; font-size:.82rem}
}
.aud button[aria-pressed="true"]{background:var(--teal); color:#fff}
.aud button:hover:not([aria-pressed="true"]){color:var(--ink); background:var(--bar)}
.audnote{margin-top:14px; font-size:.95rem; color:var(--ink-3); max-width:58ch; min-height:2.9em}
.audnote b{color:var(--ink-2); font-weight:600}

.herostats{
  display:flex; flex-wrap:wrap; gap:0; margin-top:46px;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
}
.hs{flex:1 1 150px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:16px 20px; background:var(--card)}
.hs .n{font-family:var(--f-display); font-size:2rem; font-weight:700; line-height:1; color:var(--teal)}
.hs .l{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:8px}

/* ---------- secciones ---------- */
section{padding:86px 0; border-bottom:1px solid var(--rule)}
.shead{max-width:60ch}
.shead h2{font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:18px}
.shead p{margin-top:18px; color:var(--ink-2); font-size:1.06rem}
.shead p b{color:var(--ink); font-weight:600}

/* ---------- la diferencia ---------- */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:48px; border:1px solid var(--rule)}
.vsc{padding:32px 30px; background:var(--card)}
.vsc:first-child{border-right:1px solid var(--rule); background:transparent}
.vsc .tag{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.vsc.on .tag{color:var(--teal)}
.vsc h3{font-size:1.5rem; margin-top:12px}
.vsc .sub{margin-top:10px; color:var(--ink-2); font-size:1rem}
.vsc ul{margin:22px 0 0; padding:0; list-style:none}
.vsc li{padding:9px 0 9px 22px; border-top:1px solid var(--rule-soft); font-size:.95rem; color:var(--ink-2); position:relative}
.vsc li::before{content:"—"; position:absolute; left:0; color:var(--ink-3)}
.vsc.on li::before{content:"→"; color:var(--teal)}
.vsc li b{color:var(--ink); font-weight:600}
.vsc .foot{margin-top:24px; padding-top:18px; border-top:2px solid var(--rule); font-size:.92rem; color:var(--ink-2)}
.vsc.on .foot{color:var(--ink); font-weight:600}
@media(max-width:760px){ .vs{grid-template-columns:1fr} .vsc:first-child{border-right:0; border-bottom:1px solid var(--rule)} }

/* ---------- IA propia ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:48px; border:1px solid var(--rule)}
.pil{padding:30px 28px; border-right:1px solid var(--rule); background:var(--card)}
.pil:last-child{border-right:0}
.pil .k{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal)}
.pil h3{font-size:1.28rem; margin-top:14px}
.pil p{margin-top:12px; color:var(--ink-2); font-size:.96rem}
.pil p b{color:var(--ink); font-weight:600}
@media(max-width:860px){ .pillars{grid-template-columns:1fr} .pil{border-right:0; border-bottom:1px solid var(--rule)} .pil:last-child{border-bottom:0} }

/* ============================================================
   EL LIBRO — la firma: 12 pasos como filas de un mayor
   ============================================================ */
.ledger{margin-top:52px; border:1px solid var(--rule); background:var(--card)}
.lhead{
  display:grid; grid-template-columns:58px minmax(200px,1fr) minmax(320px,1.3fr);
  border-bottom:2px solid var(--rule); background:var(--bar);
}
.lhead span{
  padding:11px 16px; font-family:var(--f-mono); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  border-right:1px solid var(--rule);
}
.lhead span:last-child{border-right:0}
.lrow{
  display:grid; grid-template-columns:58px minmax(200px,1fr) minmax(320px,1.3fr);
  border-bottom:1px solid var(--rule-soft); cursor:pointer;
  transition:background .12s ease;
}
.lrow:last-child{border-bottom:0}
.lrow:nth-child(even){background:var(--bar)}   /* la banda del greenbar */
.lrow:hover{background:var(--amber-soft)}
.lrow[aria-selected="true"]{background:var(--amber-soft); box-shadow:inset 4px 0 0 var(--amber)}
.lrow > *{padding:13px 16px; border-right:1px solid var(--rule-soft); display:flex; align-items:center}
.lrow > *:last-child{border-right:0}
.lnum{font-family:var(--f-mono); font-weight:700; font-size:.95rem; color:var(--teal); justify-content:center}
.lname{flex-direction:column; align-items:flex-start; gap:2px}
.lname b{font-weight:600; font-size:1rem}
.lname i{font-style:normal; font-size:.86rem; color:var(--ink-3)}
.lsol{flex-wrap:wrap; gap:6px}
.chip{
  font-family:var(--f-mono); font-size:.66rem; font-weight:500; padding:3px 8px;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink-2); white-space:nowrap;
}
.lrow:hover .chip, .lrow[aria-selected="true"] .chip{border-color:var(--amber); color:var(--ink)}
.lfoot{
  padding:14px 16px; border-top:2px solid var(--rule); background:var(--bar);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.lfoot b{color:var(--teal)}
@media(max-width:800px){
  .lhead{display:none}
  .lrow{grid-template-columns:48px 1fr}
  .lrow .lsol{grid-column:1 / -1; border-top:1px solid var(--rule-soft); border-right:0; padding-top:10px}
}

/* ---------- soluciones ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; align-items:center}
.filters .fl{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-right:6px}
.fb{
  font-family:var(--f-body); font-size:.82rem; font-weight:500; padding:7px 14px;
  border:1px solid var(--rule); background:var(--card); color:var(--ink-2); cursor:pointer;
}
.fb:hover{border-color:var(--teal); color:var(--ink)}
.fb[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.count{margin-left:auto; font-family:var(--f-mono); font-size:.72rem; color:var(--ink-3)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; margin-top:26px}
.sol{
  border:1px solid var(--rule); background:var(--card); padding:24px 22px 20px;
  display:flex; flex-direction:column; box-shadow:var(--shadow); position:relative;
}
.sol.hide{display:none}
.sol .sh{display:flex; align-items:flex-start; gap:10px; margin-bottom:2px}
.step-badge{
  font-family:var(--f-mono); font-size:.66rem; font-weight:700; color:var(--teal);
  border:1px solid var(--teal); padding:2px 7px; white-space:nowrap; flex-shrink:0;
}
.step-badge.tx{color:var(--ink-3); border-color:var(--rule)}
.tags{margin-left:auto; display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.t{font-family:var(--f-mono); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; white-space:nowrap}
.t.ia{background:var(--teal); color:#fff}
.t.auto{background:transparent; color:var(--ink-2); border:1px solid var(--rule)}
.t.dev{background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber)}
.sol h3{font-size:1.24rem; margin-top:14px}
.qs{margin-top:18px; display:flex; flex-direction:column; gap:0; flex:1}
.q{padding:11px 0; border-top:1px solid var(--rule-soft); display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:start}
.q .ql{
  font-family:var(--f-mono); font-size:.6rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); padding-top:3px;
}
.q p{font-size:.93rem; color:var(--ink-2); line-height:1.5}
.q.res{border-top:2px solid var(--teal); margin-top:auto; padding-top:13px}
.q.res .ql{color:var(--teal)}
.q.res p{color:var(--ink); font-weight:500}
@media(max-width:420px){ .q{grid-template-columns:1fr; gap:3px} }

.empty{margin-top:40px; padding:36px; border:1px dashed var(--rule); text-align:center; color:var(--ink-3)}
.empty.hide{display:none}

/* ---------- unidad de trabajo ---------- */
.uow{margin-top:48px; border:1px solid var(--rule); background:var(--card); padding:34px 30px}
.uow .cl{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:0; margin-top:20px; border-top:1px solid var(--rule)}
.fstep{
  flex:1 1 160px; padding:16px 14px; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule-soft);
  display:flex; flex-direction:column; gap:6px;
}
.fstep:last-child{border-right:0}
.fstep.per{background:var(--amber-soft)}
.fstep .fk{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal)}
.fstep.per .fk{color:var(--amber)}
.fstep .ft{font-size:.9rem; font-weight:500; color:var(--ink)}
.uow .cs{margin-top:20px; font-size:1rem; color:var(--ink-2); max-width:70ch}
.uow .cs b{color:var(--ink); font-weight:600}
.gains{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
.gain{padding-top:16px; border-top:2px solid var(--teal)}
.gain b{display:block; font-size:1rem; margin-bottom:6px}
.gain span{font-size:.93rem; color:var(--ink-2)}
@media(max-width:760px){ .gains{grid-template-columns:1fr} }

/* ---------- cierre ---------- */
.final{background:var(--ink); color:var(--paper); border-bottom:0; text-align:center}
.final h2{font-size:clamp(2rem,4.4vw,3.1rem); color:var(--paper); max-width:22ch; margin:18px auto 0}
.final .folio{color:var(--teal-deep)}
.final .folio::before{background:var(--teal-deep)}
.final p{margin:22px auto 0; max-width:52ch; color:#A9BCB1; font-size:1.06rem}
.btns{display:flex; gap:12px; justify-content:center; margin-top:36px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:14px 28px; text-decoration:none; font-weight:600; font-size:.95rem;
  border:1px solid var(--teal-deep);
}
.btn.p{background:var(--teal); color:#fff; border-color:var(--teal)}
.btn.p:hover{background:var(--teal-deep); color:#03231F}
.btn.s{color:var(--teal-deep)}
.btn.s:hover{background:rgba(127,211,198,.1)}

footer{padding:30px 0; background:var(--ink); color:#6E8378; font-size:.84rem}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
footer a{color:#A9BCB1; text-decoration:none}
footer a:hover{color:var(--teal-deep)}

/* ---------- entrada ---------- */
.rv{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
}