
:root {
  --ink: #0f0f0f;
  --ink2: #3a3a3a;
  --ink3: #6b6b6b;
  --bg: #f5f2ed;
  --bg2: #eae6df;
  --bg3: #ddd8cf;
  --accent: #1a3a5c;
  --accent2: #2d6a4f;
  --warm: #c45e1a;
  --warn: #a85c00;
  --card: #ffffff;
  --border: rgba(15,15,15,0.12);
  --border2: rgba(15,15,15,0.07);
  --radius: 12px;
  --radius-sm: 6px;
  --new: #0f6e56;
  --new-bg: #e1f5ee;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;overflow-x:hidden;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(26,58,92,0.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.08);padding:0 2rem;}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px;}
.nav-logo{font-family:'DM Sans',sans-serif;font-weight:800;font-size:14px;color:var(--bg);letter-spacing:.02em;}
.nav-logo span{color:#5DCAA5;}
.nav-links{display:flex;gap:4px;}
.nav-links a{font-size:12px;font-weight:500;color:rgba(255,255,255,0.5);text-decoration:none;padding:5px 10px;border-radius:20px;transition:all .2s;white-space:nowrap;}
.nav-links a:hover,.nav-links a.act{background:rgba(255,255,255,0.12);color:var(--bg);}
.nav-landing-btn{font-size:12px;font-weight:500;color:rgba(255,255,255,0.5);text-decoration:none;padding:5px 10px;border-radius:20px;border:1px solid rgba(255,255,255,0.15);transition:all .2s;white-space:nowrap;}
.nav-landing-btn:hover{background:rgba(255,255,255,0.12);color:var(--bg);}
.nav-burger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:8px;}
.nav-burger span{display:block;width:20px;height:2px;background:var(--bg);border-radius:2px;transition:all .3s;}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:100px 2rem 60px;max-width:1280px;margin:0 auto;}
.hero-kicker{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:1.5rem;display:flex;align-items:center;gap:8px;}
.hero-kicker::before{content:'';display:block;width:24px;height:2px;background:var(--accent);}
.hero h1{font-family:'DM Sans',sans-serif;font-weight:800;font-size:clamp(2.8rem,6vw,5rem);line-height:1.05;letter-spacing:-.01em;color:var(--ink);max-width:820px;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero-sub{margin-top:1.5rem;font-size:1.1rem;color:var(--ink2);max-width:540px;line-height:1.7;}
.hero-meta{margin-top:2.5rem;display:flex;gap:2rem;flex-wrap:wrap;}
.hero-badge{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);}
.hero-badge strong{color:var(--ink);font-weight:500;}
.hero-scroll{margin-top:4rem;display:flex;gap:12px;flex-wrap:wrap;}
.btn-primary{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;padding:11px 22px;background:var(--ink);color:var(--bg);border:none;border-radius:100px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .2s;}
.btn-primary:hover{background:var(--accent);transform:translateY(-1px);}
.btn-sec{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;padding:11px 22px;background:transparent;color:var(--ink);border:1.5px solid var(--border);border-radius:100px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .2s;}
.btn-sec:hover{background:var(--bg2);}
.hero-diagram{margin-top:3rem;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:600px;}
.hd-step{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem;text-align:center;}
.hd-num{font-family:'DM Sans',sans-serif;font-size:1.4rem;font-weight:800;color:var(--accent);line-height:1;}
.hd-lbl{font-size:10px;color:var(--ink3);margin-top:3px;line-height:1.3;}

/* ── SECTIONS ── */
section{padding:80px 2rem;max-width:1280px;margin:0 auto;}
.sec-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;display:flex;align-items:center;gap:8px;}
.sec-label::before{content:'';display:block;width:16px;height:2px;background:var(--accent);}
.sec-title{font-family:'DM Sans',sans-serif;font-weight:700;font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--ink);line-height:1.15;margin-bottom:1rem;letter-spacing:-.01em;}
.sec-desc{font-size:1rem;color:var(--ink2);max-width:560px;line-height:1.7;margin-bottom:2.5rem;}
.divider{height:1px;background:var(--border);max-width:1280px;margin:0 auto;}

/* ── SPLIT LAYOUT ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
.split.reverse{direction:rtl;}.split.reverse > *{direction:ltr;}
.split-explain{position:sticky;top:80px;}
.explain-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;margin-bottom:1rem;}
.explain-num{font-family:'DM Sans',sans-serif;font-size:3rem;font-weight:800;color:var(--bg3);line-height:1;margin-bottom:.5rem;}
.explain-title{font-family:'DM Sans',sans-serif;font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:.75rem;}
.explain-body{font-size:.9rem;color:var(--ink2);line-height:1.7;}
.explain-body p{margin-bottom:.75rem;}
.explain-body p:last-child{margin-bottom:0;}
.explain-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:3px 10px;border-radius:20px;margin-right:5px;margin-bottom:5px;}
.et-rf{background:#e1f5ee;color:#0f6e56;}
.et-rnf{background:#e6f1fb;color:#185fa5;}
.et-okr{background:#faeeda;color:#854f0b;}
.et-hci{background:#fbeaf0;color:#993556;}
.et-new{background:#e1f5ee;color:#0f6e56;border:1px solid #9fe1cb;}

/* ── USER CARD ── */
.user-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1rem;}
.uc-header{background:var(--accent);color:white;padding:1.5rem;display:flex;align-items:center;gap:1rem;}
.uc-avatar{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-weight:800;font-size:18px;color:white;flex-shrink:0;}
.uc-name{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1.1rem;}
.uc-role{font-size:.8rem;opacity:.8;margin-top:2px;}
.uc-body{padding:1.25rem 1.5rem;}
.uc-row{display:flex;align-items:flex-start;gap:10px;padding:.4rem 0;border-bottom:1px solid var(--border2);font-size:.85rem;}
.uc-row:last-child{border-bottom:none;}
.uc-key{min-width:140px;color:var(--ink3);font-weight:400;}
.uc-val{color:var(--ink);font-weight:500;}
.uc-val.warn{color:var(--warn);}
.uc-val.ok{color:var(--accent2);}
.uc-val.pending{color:var(--ink3);font-style:italic;}

/* ── FORM WIDGET ── */
.form-container{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.fc-header{background:var(--ink);color:var(--bg);padding:1.5rem 2rem;}
.fc-header h3{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1rem;margin-bottom:.25rem;}
.fc-header p{font-size:.8rem;opacity:.7;}
.fc-progress{height:3px;background:rgba(255,255,255,.15);}
.fc-bar{height:3px;background:#5DCAA5;width:0%;transition:width .4s;}
.form-block{border-bottom:1px solid var(--border2);}
.form-block-header{padding:1rem 1.5rem;display:flex;align-items:center;gap:.75rem;cursor:pointer;user-select:none;}
.fb-num{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.85rem;color:var(--accent);min-width:28px;}
.fb-title{font-size:.85rem;font-weight:500;color:var(--ink);flex:1;}
.fb-badge{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:500;}
.fb-badge.piramide{background:#e6f1fb;color:#185fa5;}
.fb-badge.embudo{background:#e1f5ee;color:#0f6e56;}
.fb-badge.likert{background:#faeeda;color:#854f0b;}
.fb-badge.sondeo{background:#fbeaf0;color:#993556;}
.fb-badge.diamante{background:#eeedfe;color:#534ab7;}
.fb-badge.nuevo{background:#e1f5ee;color:#0f6e56;border:1px solid #9fe1cb;}
.fb-arrow{color:var(--ink3);font-size:.7rem;transition:transform .3s;}
.form-block-body{padding:0 1.5rem 1.25rem;display:none;}
.form-block.open .form-block-body{display:block;}
.form-block.open .fb-arrow{transform:rotate(180deg);}
.fq{margin-bottom:1rem;}
.fq:last-child{margin-bottom:0;}
.fq-label{font-size:.82rem;font-weight:500;color:var(--ink);margin-bottom:.35rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.fq-hint{font-size:.75rem;color:var(--ink3);font-style:italic;margin-bottom:.4rem;padding-left:4px;border-left:2px solid var(--bg3);}
.fq-type{font-size:10px;padding:1px 7px;border-radius:20px;}
.fq-type.c{background:#e6f1fb;color:#185fa5;}
.fq-type.o{background:#e1f5ee;color:#0f6e56;}
.fq-type.l{background:#faeeda;color:#854f0b;}
.fq-type.s{background:#fbeaf0;color:#993556;}
select,textarea,input[type=text]{width:100%;padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:.82rem;color:var(--ink);background:var(--bg);outline:none;transition:border .2s;}
select:focus,textarea:focus,input:focus{border-color:var(--accent);}
textarea{min-height:60px;resize:vertical;}
.radio-group label,.checkbox-group label{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink2);padding:4px 0;cursor:pointer;}
.radio-group label:hover,.checkbox-group label:hover{color:var(--ink);}
.likert-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:.25rem;}
.likert-row label{font-size:.75rem;color:var(--ink3);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;}
.likert-row input{accent-color:var(--accent);}
.note-box{background:#faeeda;border:1px solid #FAC775;border-radius:var(--radius-sm);padding:.65rem 1rem;font-size:.75rem;color:#633806;margin-top:.75rem;}
.note-box.info{background:#e6f1fb;border-color:#b5d4f4;color:#0c447c;}
.note-box.success{background:#e1f5ee;border-color:#9fe1cb;color:#085041;}

/* ── REQUIREMENTS TABLE ── */
.req-table{width:100%;border-collapse:collapse;font-size:.83rem;}
.req-table th{background:var(--ink);color:var(--bg);padding:.6rem .9rem;text-align:left;font-weight:500;font-size:.75rem;letter-spacing:.03em;}
.req-table td{padding:.65rem .9rem;border-bottom:1px solid var(--border2);vertical-align:top;}
.req-table tr:last-child td{border-bottom:none;}
.req-table tr:hover td{background:var(--bg2);}
.req-id{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.8rem;white-space:nowrap;}
.req-prio{display:inline-block;font-size:10px;padding:2px 7px;border-radius:20px;font-weight:500;white-space:nowrap;}
.prio-a{background:#fcebeb;color:#a32d2d;}
.prio-m{background:#faeeda;color:#854f0b;}
.prio-b{background:#eaf3de;color:#3b6d11;}
.req-origin{font-size:.72rem;color:var(--ink3);font-style:italic;margin-top:3px;}
.new-tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:3px;background:#e1f5ee;color:#085041;border:1px solid #9fe1cb;margin-left:4px;vertical-align:middle;}

/* ── OKR CARDS ── */
.okr-group{margin-bottom:1.5rem;}
.okr-obj{background:var(--accent);color:white;border-radius:var(--radius-sm) var(--radius-sm) 0 0;padding:.75rem 1rem;}
.okr-obj-label{font-size:10px;opacity:.7;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px;}
.okr-obj-text{font-size:.88rem;font-weight:500;}
.okr-krs{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);overflow:hidden;}
.okr-kr{padding:.65rem 1rem;border-bottom:1px solid var(--border2);display:flex;gap:.75rem;align-items:flex-start;font-size:.82rem;}
.okr-kr:last-child{border-bottom:none;}
.okr-kr-label{font-size:10px;font-weight:600;color:var(--accent2);min-width:28px;margin-top:2px;}
.okr-kr-text{color:var(--ink2);flex:1;}
.okr-kr-text.new{color:var(--new);}
.okr-group.new-group .okr-obj{background:var(--accent2);}

/* ── BASELINE ── */
.baseline-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.baseline-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;}
.bc-label{font-size:.75rem;color:var(--ink3);margin-bottom:.25rem;}
.bc-before{font-size:1.1rem;font-weight:600;color:#a32d2d;}
.bc-after{font-size:.82rem;color:var(--accent2);margin-top:.15rem;}
.bc-warn{font-size:.82rem;color:var(--warn);margin-top:.15rem;}
.bc-new{border-left:3px solid var(--new);}

/* ── IMPACT MATRIX ── */
.impact-matrix{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.im-header{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--ink);color:var(--bg);font-size:.75rem;font-weight:500;padding:.6rem 1rem;gap:.5rem;}
.im-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:.7rem 1rem;border-bottom:1px solid var(--border2);gap:.5rem;font-size:.82rem;align-items:start;}
.im-row:last-child{border-bottom:none;}
.im-row:hover{background:var(--bg2);}
.im-source{color:var(--ink3);}
.im-finding{color:var(--ink);font-weight:500;}
.im-impact{color:var(--accent2);}

/* ── PROFILES ── */
.profiles-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.profile-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.pc-header{padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;}
.pc-header.dono{background:var(--accent);}
.pc-header.empleado{background:var(--bg3);}
.pc-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-weight:800;font-size:16px;flex-shrink:0;}
.pc-header.dono .pc-avatar{background:rgba(255,255,255,.2);color:white;}
.pc-header.empleado .pc-avatar{background:var(--bg);color:var(--ink3);}
.pc-name{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1rem;}
.pc-header.dono .pc-name{color:white;}
.pc-header.dono .pc-sub{color:rgba(255,255,255,.7);font-size:.75rem;}
.pc-header.empleado .pc-name{color:var(--ink);}
.pc-header.empleado .pc-sub{color:var(--ink3);font-size:.75rem;}
.pc-body{padding:1rem 1.5rem;}
.pc-row{display:flex;gap:.5rem;padding:.3rem 0;border-bottom:1px solid var(--border2);font-size:.8rem;}
.pc-row:last-child{border-bottom:none;}
.pc-k{min-width:120px;color:var(--ink3);}
.pc-v{color:var(--ink);font-weight:500;}
.pc-v.warn{color:var(--warn);}
.pc-v.ok{color:var(--accent2);}
.pc-v.pending{color:var(--ink3);font-style:italic;}

/* ── STEPS ── */
.steps-list{display:flex;flex-direction:column;gap:0;}
.step-item{display:grid;grid-template-columns:48px 1fr;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--border2);}
.step-item:last-child{border-bottom:none;}
.step-circle{width:44px;height:44px;border-radius:50%;background:var(--accent);color:white;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-weight:800;font-size:1rem;flex-shrink:0;}
.step-body{}
.step-title{font-weight:600;font-size:.9rem;color:var(--ink);margin-bottom:.25rem;}
.step-desc{font-size:.82rem;color:var(--ink2);line-height:1.55;}

/* ── TABS ── */
.tab-nav{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.75rem;}
.tab-btn{font-size:.78rem;font-weight:500;padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--ink3);cursor:pointer;transition:all .2s;}
.tab-btn:hover{background:var(--bg2);color:var(--ink);}
.tab-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.tab-btn[data-tab="lim"].active{background:#92400e;border-color:#92400e;}
.tab-panel{display:none;}.tab-panel.active{display:block;}
.sw-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;background:#e0f2fe;color:#075985;border:1px solid #bae6fd;margin-top:1rem;margin-left:6px;}
.et-isw{background:#e0f2fe;color:#075985;}
.et-lim{background:#fef3c7;color:#92400e;}

/* ── FOOTER ── */
footer{background:var(--ink);color:var(--bg);padding:3rem 2rem;margin-top:4rem;}
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;}
.footer-brand{font-family:'DM Sans',sans-serif;font-weight:800;font-size:1.2rem;margin-bottom:.75rem;}
.footer-brand span{color:#5DCAA5;}
.footer-desc{font-size:.82rem;opacity:.6;line-height:1.6;}
.footer-col h4{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.5;margin-bottom:.75rem;}
.footer-col a,.footer-col p{display:block;font-size:.82rem;opacity:.6;text-decoration:none;color:var(--bg);margin-bottom:.35rem;transition:opacity .2s;}
.footer-col a:hover{opacity:1;}
.footer-bottom{max-width:1280px;margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;font-size:.75rem;opacity:.4;flex-wrap:wrap;gap:.5rem;}

/* ── MOBILE ── */
@media(max-width:900px){
  .split{grid-template-columns:1fr;}
  .split-explain{position:static;}
  .baseline-grid{grid-template-columns:1fr 1fr;}
  .profiles-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .hero-diagram{grid-template-columns:repeat(3,1fr);}
  .im-header,.im-row{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .baseline-grid{grid-template-columns:1fr;}
  .hero h1{font-size:2.4rem;}
  section{padding:60px 1.25rem;}
  nav{padding:0 1.25rem;}
}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.fade-up{opacity:0;animation:fadeUp .5s ease forwards;}
.fade-up-d1{animation-delay:.1s;}
.fade-up-d2{animation-delay:.2s;}
.fade-up-d3{animation-delay:.3s;}
.fade-up-d4{animation-delay:.4s;}

/* ── STICKY TOC ── */
.toc-pill{position:fixed;bottom:1.5rem;right:1.5rem;z-index:90;display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.toc-item{font-size:11px;font-weight:500;padding:4px 12px;background:var(--ink);color:var(--bg);border-radius:20px;text-decoration:none;opacity:0.35;transition:opacity .2s;}
.toc-item:hover,.toc-item.vis{opacity:1;}
@media(max-width:900px){.toc-pill{display:none;}}

/* ── MOBILE MENU ── */
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-family:'DM Sans',sans-serif;font-size:1.5rem;font-weight:700;color:var(--ink);text-decoration:none;}
.mobile-menu .close-btn{position:absolute;top:1.5rem;right:1.5rem;font-size:1.5rem;cursor:pointer;background:none;border:none;color:var(--ink);}

