:root{
    --navy:#122A52;
    --navy-deep:#0B1D3A;
    --blue:#2F6FED;
    --blue-soft:#E7EFFC;
    --paper:#FBFCFE;
    --ink:#101828;
    --ink-soft:#5B6472;
    --line:#DCE3EF;
    --ok:#1E9E6B;
    --warn:#D98E1E;
    --risk:#D64545;
    --radius:14px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:var(--blue);}
  button{font-family:inherit;cursor:pointer;}

  /* ---- Shell ---- */
  .shell{display:flex;height:100vh;overflow:hidden;}
  .sidebar{
    width:248px;flex-shrink:0;background:var(--navy-deep);color:#fff;
    display:flex;flex-direction:column;padding:24px 16px;height:100vh;overflow-y:auto;
  }
  .suite-title{
    display:flex;align-items:center;gap:10px;
    font-size:19px;font-weight:700;letter-spacing:-0.01em;
    padding:0 8px 18px 8px;margin:0 0 18px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .suite-title img{width:32px;height:32px;border-radius:50%;flex-shrink:0;}
  .suite-sub{font-size:12px;color:rgba(255,255,255,.55);margin:0 0 20px 8px;}
  nav.modnav{display:flex;flex-direction:column;gap:4px;}
  nav.modnav button{
    text-align:left;background:transparent;border:none;color:rgba(255,255,255,.72);
    padding:11px 12px;border-radius:10px;font-size:13.5px;font-weight:500;
    display:flex;align-items:center;gap:10px;transition:background .15s,color .15s;
  }
  nav.modnav button .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);flex-shrink:0;}
  nav.modnav button:hover{background:rgba(255,255,255,.06);color:#fff;}
  nav.modnav button.active{background:var(--blue);color:#fff;}
  nav.modnav button.active .dot{background:#fff;}
  .sidebar-foot{margin-top:auto;font-size:11px;color:rgba(255,255,255,.4);padding:0 8px;}

  .content{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;}
  .view-wrap{flex:1;overflow-y:auto;}
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 36px;border-bottom:1px solid var(--line);background:#fff;
  }
  .topbar h1{font-size:22px;margin:0;}
  .topbar p{margin:2px 0 0 0;color:var(--ink-soft);font-size:13.5px;}
  .badge{
    background:var(--blue-soft);color:var(--navy);font-size:11.5px;font-weight:600;
    padding:5px 10px;border-radius:999px;letter-spacing:.02em;
  }
  main{padding:32px 36px 60px 36px;}
  .view{display:none;}
  .view.active{display:block;}

  /* ---- shared cards ---- */
  .grid{display:grid;gap:18px;}
  .grid-2{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:20px 22px;
  }
  .card h3{font-size:14.5px;margin:0 0 12px 0;color:var(--navy);}
  label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:14px 0 6px 0;}
  label:first-child{margin-top:0;}
  input[type=text],input[type=number],textarea,select{
    width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
    font-family:inherit;font-size:13.5px;background:var(--paper);color:var(--ink);
  }
  textarea{resize:vertical;min-height:64px;}
  input[type=range]{width:100%;accent-color:var(--blue);}
  .row{display:flex;gap:10px;}
  .row > *{flex:1;}
  .btn{
    background:var(--blue);color:#fff;border:none;border-radius:9px;
    padding:10px 18px;font-size:13.5px;font-weight:600;
  }
  .btn:hover{background:var(--navy);}
  .btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue);}
  .btn.small{padding:6px 12px;font-size:12.5px;}
  .kpi{display:flex;flex-direction:column;gap:2px;}
  .kpi .num{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;color:var(--navy);}
  .kpi .lbl{font-size:12px;color:var(--ink-soft);}
  .tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;}
  .tag.ok{background:#E5F6EE;color:var(--ok);}
  .tag.warn{background:#FCF1DF;color:var(--warn);}
  .tag.risk{background:#FBE7E7;color:var(--risk);}
  .insight-item{
    display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;
  }
  .insight-item:last-child{border-bottom:none;}

  /* ---- Home ---- */
  .hero{
    background:linear-gradient(135deg,var(--navy-deep),var(--navy));
    color:#fff;border-radius:18px;padding:40px 40px;margin-bottom:28px;
    position:relative;overflow:hidden;
  }
  .hero::after{
    content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;
    border-radius:50%;background:radial-gradient(circle,rgba(47,111,237,.35),transparent 70%);
  }
  .hero h2{font-size:30px;margin:0 0 10px 0;max-width:560px;position:relative;}
  .hero p{max-width:520px;color:rgba(255,255,255,.75);font-size:14.5px;line-height:1.55;position:relative;}
  .module-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
  .mcard{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:20px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;
    display:flex;flex-direction:column;justify-content:center;
  }
  .mcard:hover{box-shadow:0 8px 24px rgba(18,42,82,.08);}

  /* Que el home ocupe todo el alto disponible y las 5 fichas llenen el espacio, sin vacío abajo */
  #view-home.active{display:flex;flex-direction:column;height:100%;}
  #view-home main{display:flex;flex-direction:column;flex:1;min-height:0;}
  #view-home .hero{flex-shrink:0;}
  #view-home .module-cards{flex:1;}
  .mcard:hover{border-color:var(--blue);transform:translateY(-2px);}
  .mcard .num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--blue);font-weight:600;}
  .mcard h3{margin:8px 0 6px 0;font-size:15.5px;color:var(--navy);}
  .mcard p{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.5;}

  /* ---- Twin cards ---- */
  .twin-card{
    background:linear-gradient(160deg,#fff,var(--blue-soft));
    border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:12px;
  }
  .twin-card .avatar{
    width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
    font-family:'Space Grotesk',sans-serif;
  }
  .twin-head{display:flex;gap:12px;align-items:center;margin-bottom:10px;}
  .twin-head .tname{font-weight:700;font-size:14.5px;}
  .twin-head .tseg{font-size:11.5px;color:var(--blue);font-weight:600;}
  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
  .chip{background:#fff;border:1px solid var(--line);font-size:11px;padding:3px 9px;border-radius:999px;color:var(--ink-soft);}

  /* ---- Blueprint ---- */
  .stage-track{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
  .stage-col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;}
  .stage-col h4{margin:0 0 4px 0;font-size:13.5px;color:var(--navy);}
  .stage-col .zone{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:12px 0 4px 0;font-weight:700;}
  .stage-col textarea{min-height:56px;font-size:12.5px;}
  .friction-toggle{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;color:var(--ink-soft);}

  /* ---- Navigator table ---- */
  table{width:100%;border-collapse:collapse;font-size:13px;}
  th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:8px 10px;border-bottom:1px solid var(--line);}
  td{padding:10px;border-bottom:1px solid var(--line);}
  tr:last-child td{border-bottom:none;}
  .score-pill{
    font-family:'IBM Plex Mono',monospace;font-weight:600;padding:3px 10px;border-radius:8px;
    background:var(--blue-soft);color:var(--navy);
  }

  .brand-mark{
    padding:10px 20px;border-top:1px solid var(--line);
    text-align:center;background:#fff;flex-shrink:0;
  }
  .brand-mark .brand-sig{
    display:flex; align-items:center; justify-content:center; gap:6px;
    font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.03em;
    color:var(--ink-soft);
  }
  .brand-mark .brand-icon{width:14px; height:14px; border-radius:50%; flex-shrink:0;}
  .brand-mark .brand-sig a{
    color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line);
  }
  .brand-mark .brand-sig a:hover{color:var(--blue); border-bottom-color:var(--blue);}
  .brand-mark .claude-star{color:#D97757; font-size:14px; margin:0 6px; display:inline-block;}
  .brand-mark .legal-links{font-size:10.5px; color:var(--ink-soft); margin-top:4px;}
  .brand-mark .legal-links a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line);}
  .brand-mark .legal-links a:hover{color:var(--blue); border-bottom-color:var(--blue);}
  .brand-mark .legal-sep{margin:0 6px; color:var(--line);}

  /* ---- Páginas legales (política / términos) ---- */
  .legal-page{max-width:760px;margin:0 auto;padding:48px 24px 80px 24px;}
  .legal-page .back-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--blue);text-decoration:none;margin-bottom:24px;}
  .legal-page .back-link:hover{text-decoration:underline;}
  .legal-page h1{font-family:'Space Grotesk',sans-serif;font-size:26px;color:var(--navy);margin-bottom:6px;}
  .legal-page .updated{font-size:12.5px;color:var(--ink-soft);margin-bottom:28px;}
  .legal-page h2{font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--navy);margin:26px 0 10px 0;}
  .legal-page p, .legal-page li{font-size:14px;color:var(--ink);line-height:1.65;}
  .legal-page ul{padding-left:20px;margin:8px 0;}
  .legal-page li{margin-bottom:4px;}

  @media (max-width:1200px){
    .module-cards{grid-template-columns:repeat(3,1fr);}
    #view-home.active{display:block;height:auto;}
    #view-home main{display:block;}
    #view-home .module-cards{flex:none;}
    .mcard{justify-content:flex-start;}
  }
  @media (max-width:1000px){
    .grid-4{grid-template-columns:repeat(2,1fr);}
    .grid-3{grid-template-columns:1fr 1fr;}
    .module-cards{grid-template-columns:repeat(2,1fr);}
    .stage-track{grid-template-columns:1fr;}
  }
  @media (max-width:680px){
    .shell{flex-direction:column;height:auto;overflow:visible;}
    .sidebar{width:100%;height:auto;flex-direction:row;overflow-x:auto;align-items:center;flex-wrap:wrap;}
    .suite-title{border-bottom:none;padding:0 8px;margin:0 8px 0 0;}
    .suite-sub{display:none;}
    nav.modnav{flex-direction:row;flex-wrap:wrap;}
    .sidebar-foot{display:none;}
    .content{height:auto;overflow:visible;}
    .view-wrap{overflow-y:visible;}
    .grid-2,.grid-3,.grid-4,.module-cards{grid-template-columns:1fr;}
    main{padding:20px;}
    .topbar{padding:16px 20px;flex-direction:column;align-items:flex-start;gap:8px;}
    .brand-mark{position:sticky;bottom:0;}
  }