/* ============================================================
   Kraak Works — AI Act · aiact.css
   Tokens de marca + clasificador + landing.
   Origen: aiact-clasificador.html (estilos extraídos, sin cambios
   de diseño) + secciones nuevas de la landing.
   ============================================================ */

:root{
  --navy:#18435a;
  --navy-deep:#0e2a3a;
  --gold:#ca8d3b;
  --gold-soft:#e8c98f;
  --paper:#f6f3ee;
  --paper-line:#e2dbd0;
  --ink:#1b2229;
  --muted:#6d7681;
  --alert:#a8412c;
  --ok:#2f6b4f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:880px;margin:0 auto;padding:0 24px}

/* ---------- Signature: the deadline rail ---------- */
.rail{
  position:fixed;top:0;left:0;right:0;height:4px;
  background:var(--paper-line);z-index:50;
}
.rail span{display:block;height:100%;background:var(--gold);width:0;transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* ---------- Header ---------- */
header{padding:28px 0 0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.mark{
  font-family:"DM Mono",monospace;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);font-weight:500;text-decoration:none;
}
.mark b{color:var(--gold);font-weight:500}
.lang{display:flex;gap:2px;border:1px solid var(--paper-line);border-radius:2px;overflow:hidden}
.lang button{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.1em;
  background:transparent;border:0;padding:6px 12px;cursor:pointer;color:var(--muted);
}
.lang button[aria-pressed="true"]{background:var(--navy);color:#fff}

/* ---------- Hero: the clock ---------- */
.hero{padding:64px 0 48px;border-bottom:1px solid var(--paper-line)}
.eyebrow{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:22px;
}
h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:600;font-size:clamp(38px,6.2vw,66px);line-height:1.04;
  letter-spacing:-.01em;color:var(--navy-deep);max-width:15ch;
}
h1 em{font-style:italic;color:var(--gold)}
.lede{margin-top:22px;max-width:56ch;color:#3d454d;font-size:18px}

.clock{
  margin-top:38px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:20px 22px;background:var(--navy);color:#fff;border-radius:3px;
  border-left:4px solid var(--gold);
}
.clock .num{
  font-family:"Cormorant Garamond",serif;font-size:52px;line-height:1;
  font-weight:600;color:var(--gold-soft);
}
.clock .txt{font-size:15px;color:#c8d5dd;max-width:44ch}
.clock .txt b{color:#fff;font-weight:500}

.hero .start{margin-top:30px}

/* ---------- Quiz ---------- */
.quiz{padding:56px 0 72px;border-bottom:1px solid var(--paper-line)}
.progress{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;margin-bottom:28px;
}
.progress b{color:var(--navy);font-weight:500}

.q{display:none}
.q.active{display:block;animation:in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.q h2{
  font-family:"Cormorant Garamond",serif;font-weight:600;
  font-size:clamp(26px,3.6vw,36px);line-height:1.2;color:var(--navy-deep);
  max-width:24ch;
}
.q .help{margin-top:12px;color:var(--muted);font-size:15px;max-width:56ch}

.opts{margin-top:30px;display:grid;gap:10px}
.opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:#fff;border:1px solid var(--paper-line);border-radius:3px;
  padding:16px 18px;font:inherit;color:var(--ink);cursor:pointer;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.opt:hover{border-color:var(--navy);transform:translateX(3px)}
.opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.opt .key{
  font-family:"DM Mono",monospace;font-size:12px;color:var(--gold);
  border:1px solid var(--paper-line);border-radius:2px;padding:2px 7px;flex-shrink:0;
}
.opt.sel{border-color:var(--navy);background:#fff;box-shadow:inset 3px 0 0 var(--gold)}

.nav{margin-top:28px;display:flex;gap:12px;align-items:center}
.btn{
  font:inherit;font-weight:500;padding:13px 26px;border-radius:2px;cursor:pointer;
  border:1px solid var(--navy);background:var(--navy);color:#fff;
  transition:background .15s;text-decoration:none;display:inline-block;
}
.btn:hover{background:var(--navy-deep)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--paper-line)}
.btn.ghost:hover{background:#fff;border-color:var(--navy)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#2a1c05}
.btn.gold:hover{background:#b87c2e}

/* ---------- Results ---------- */
.results{display:none;padding:48px 0 90px;border-bottom:1px solid var(--paper-line)}
.results.on{display:block;animation:in .5s cubic-bezier(.2,.8,.2,1)}

.verdict{
  background:#fff;border:1px solid var(--paper-line);border-top:4px solid var(--gold);
  border-radius:3px;padding:32px;
}
.stamp{
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.verdict h2{
  font-family:"Cormorant Garamond",serif;font-weight:600;font-size:34px;
  color:var(--navy-deep);margin:10px 0 4px;line-height:1.15;
}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.badge{
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 11px;border-radius:2px;
  background:var(--navy);color:#fff;
}
.badge.warn{background:var(--alert)}
.badge.calm{background:#e9e3d8;color:var(--navy)}

.count{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--paper-line);
  display:flex;align-items:baseline;gap:12px;
}
.count .n{font-family:"Cormorant Garamond",serif;font-size:48px;font-weight:600;color:var(--alert);line-height:1}
.count .n.zero{color:var(--ok)}
.count .l{font-size:15px;color:var(--muted)}

/* Timeline — obligations plotted on real deadlines */
.tl{margin-top:44px}
.tl h3, .sec h3{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:24px;
}
.phase{
  display:grid;grid-template-columns:132px 1fr;gap:24px;
  padding:22px 0;border-top:1px solid var(--paper-line);
}
.phase:last-child{border-bottom:1px solid var(--paper-line)}
.phase .when{
  font-family:"DM Mono",monospace;font-size:13px;color:var(--navy);
  font-weight:500;padding-top:2px;
}
.phase .when small{display:block;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:4px;font-weight:400}
.phase.hot .when{color:var(--alert)}
.duty{padding:12px 0;border-bottom:1px dashed var(--paper-line)}
.duty:last-child{border-bottom:0;padding-bottom:0}
.duty:first-child{padding-top:0}
.duty b{display:block;color:var(--navy-deep);font-weight:700;font-size:16px}
.duty p{color:#4b535b;font-size:15px;margin-top:4px}
.duty .art{
  font-family:"DM Mono",monospace;font-size:11px;color:var(--gold);
  letter-spacing:.06em;margin-top:6px;display:block;
}
.empty{color:var(--muted);font-size:15px;font-style:italic}

.sec{margin-top:52px}
.note{
  margin-top:44px;padding:20px 22px;background:#efe9df;border-radius:3px;
  font-size:14px;color:#5a6169;line-height:1.55;
}

.cta{
  margin-top:52px;background:var(--navy-deep);color:#fff;border-radius:3px;
  padding:38px 34px;border-left:4px solid var(--gold);
}
.cta h3{
  font-family:"Cormorant Garamond",serif;font-size:30px;font-weight:600;
  color:#fff;margin-bottom:12px;letter-spacing:0;text-transform:none;
}
.cta p{color:#c0cfd9;max-width:58ch;font-size:16px}
.cta .row{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.cta .btn.ghost{color:#fff;border-color:#3d6076}
.cta .btn.ghost:hover{background:#1d5271;border-color:#5b8098}

/* ---------- Lead capture (post-results, non-blocking) ---------- */
.lead{
  margin-top:52px;background:#fff;border:1px solid var(--paper-line);
  border-radius:3px;padding:32px;
}
.lead h3{
  font-family:"Cormorant Garamond",serif;font-size:28px;font-weight:600;
  color:var(--navy-deep);margin-bottom:8px;
}
.lead p{color:var(--muted);font-size:15px;max-width:56ch}
.lead form{margin-top:22px;display:grid;gap:12px}
.lead .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lead input,.lead select{
  font:inherit;padding:13px 15px;border:1px solid var(--paper-line);
  border-radius:2px;background:var(--paper);color:var(--ink);width:100%;
}
.lead input:focus,.lead select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.lead .legal{font-size:12.5px;color:var(--muted);line-height:1.5}
.lead .ok-msg{color:var(--ok);font-weight:500}
.lead .err-msg{color:var(--alert);font-weight:500}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- Landing sections ---------- */
.section{padding:64px 0;border-bottom:1px solid var(--paper-line)}
.section > h2, .section-title{
  font-family:"Cormorant Garamond",serif;font-weight:600;
  font-size:clamp(28px,4vw,40px);line-height:1.15;color:var(--navy-deep);
  max-width:24ch;margin-bottom:8px;
}
.section .kicker{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}
.section .intro{color:#3d454d;max-width:60ch;margin-bottom:8px}

.blocks{margin-top:36px;display:grid;gap:0}
.block{padding:26px 0;border-top:1px solid var(--paper-line)}
.block:last-child{border-bottom:1px solid var(--paper-line)}
.block h3{
  font-family:"Cormorant Garamond",serif;font-size:24px;font-weight:600;
  color:var(--navy-deep);margin-bottom:8px;
}
.block p{color:#4b535b;font-size:16px;max-width:64ch}
.block .art{
  font-family:"DM Mono",monospace;font-size:11px;color:var(--gold);
  letter-spacing:.06em;display:block;margin-top:10px;
}

/* Casos */
.cases{margin-top:36px;display:grid;gap:14px}
.case{
  display:block;background:#fff;border:1px solid var(--paper-line);border-radius:3px;
  padding:26px 28px;text-decoration:none;color:var(--ink);
  transition:border-color .15s, transform .15s;
}
.case:hover{border-color:var(--navy);transform:translateX(3px)}
.case .tag{
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.case h3{
  font-family:"Cormorant Garamond",serif;font-size:24px;font-weight:600;
  color:var(--navy-deep);margin:8px 0 6px;line-height:1.2;
}
.case p{color:#4b535b;font-size:15px;max-width:62ch}
.case .more{
  font-family:"DM Mono",monospace;font-size:12px;color:var(--navy);
  letter-spacing:.08em;margin-top:12px;display:inline-block;
}

/* Servicios */
.plans{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plan{
  background:#fff;border:1px solid var(--paper-line);border-radius:3px;
  padding:28px 24px;display:flex;flex-direction:column;
}
.plan.hi{border-top:4px solid var(--gold)}
.plan h3{
  font-family:"Cormorant Garamond",serif;font-size:23px;font-weight:600;
  color:var(--navy-deep);line-height:1.2;
}
.plan .price{
  font-family:"Cormorant Garamond",serif;font-size:38px;font-weight:600;
  color:var(--navy);margin:14px 0 2px;line-height:1;
}
.plan .price small{
  font-family:"DM Mono",monospace;font-size:12px;color:var(--muted);
  font-weight:400;letter-spacing:.04em;
}
.plan p{color:#4b535b;font-size:14.5px;margin-top:12px;flex:1}
.plan .btn{margin-top:20px;text-align:center}

/* Quiénes somos */
.about{margin-top:30px;max-width:64ch}
.about p{color:#3d454d;font-size:17px}
.about .creds{
  margin-top:22px;display:flex;gap:8px;flex-wrap:wrap;
}
.about .cred{
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 11px;border-radius:2px;
  background:#e9e3d8;color:var(--navy);
}

footer{padding:30px 0 60px;font-size:13px;color:var(--muted)}
footer b{color:var(--navy)}
footer .cols{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;margin-bottom:18px}
footer a{color:var(--navy);text-decoration:none}
footer a:hover{text-decoration:underline}

/* ---------- Caso técnico (páginas /casos/) ---------- */
.article{padding:56px 0 90px}
.article h1{font-size:clamp(32px,5vw,52px);max-width:20ch}
.article .meta{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:16px;
}
.article h2{
  font-family:"Cormorant Garamond",serif;font-weight:600;font-size:28px;
  color:var(--navy-deep);margin:44px 0 12px;line-height:1.2;
}
.article p{margin:14px 0;color:#3d454d;max-width:66ch}
.article ul,.article ol{margin:14px 0 14px 22px;color:#3d454d;max-width:64ch}
.article li{margin:6px 0}
.article pre{
  background:var(--navy-deep);color:#dce7ee;border-radius:3px;
  border-left:4px solid var(--gold);
  padding:20px 22px;overflow-x:auto;margin:20px 0;
  font-family:"DM Mono",monospace;font-size:13.5px;line-height:1.6;
}
.article code{font-family:"DM Mono",monospace;font-size:.92em}
.article p code,.article li code{
  background:#ece5d9;padding:1px 6px;border-radius:2px;color:var(--navy-deep);
}
.article .callout{
  margin:24px 0;padding:18px 20px;background:#efe9df;border-radius:3px;
  border-left:3px solid var(--gold);font-size:15px;color:#5a6169;
}
.article table{border-collapse:collapse;width:100%;margin:20px 0;font-size:15px}
.article th,.article td{border:1px solid var(--paper-line);padding:10px 12px;text-align:left;vertical-align:top}
.article th{background:#efe9df;font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.breadcrumb{
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.1em;
  color:var(--muted);padding-top:26px;
}
.breadcrumb a{color:var(--navy);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

@media (max-width:760px){
  .plans{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .phase{grid-template-columns:1fr;gap:10px}
  .clock .num{font-size:42px}
  .verdict,.cta,.lead{padding:26px 22px}
  .lead .row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}
@media print{
  .rail,.lang,.nav,.cta,.hero,.lead,.section,footer .cols{display:none}
  body{background:#fff}
  .results{display:block!important}
}