:root{
    --bg:#12141c;
    --panel:#1a1e2a;
    --line:#2c3244;
    --ink:#e9e7de;
    --muted:#8b90a3;
    --amber:#d9a441;
    --teal:#4fb8a4;
    --red:#c76b5e;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background: radial-gradient(ellipse at top left, #1a2030 0%, var(--bg) 55%);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.5;
    padding:0 0 80px;
  }
  a{color:var(--amber);}

  header.masthead{
    border-bottom:1px solid var(--line);
    padding:38px 6vw 28px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:16px;
  }
  .masthead .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:.18em;
    font-size:12px;
    color:var(--teal);
    text-transform:uppercase;
    margin-bottom:10px;
  }
  .masthead h1{
    font-family:'IBM Plex Mono', monospace;
    font-weight:700;
    font-size:clamp(28px,4vw,42px);
    margin:0;
    letter-spacing:-0.01em;
  }
  .masthead .meta{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--muted);
    text-align:right;
  }
  .masthead .meta div{margin-bottom:4px;}

  main{padding:36px 6vw 0; max-width:1000px; margin:0 auto;}

  .section-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin:44px 0 18px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .section-label::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
  }

  /* ---------------- Carrusel ---------------- */
  .carousel{
    position:relative;
  }
  .carousel-viewport{
    overflow:hidden;
    border-radius:6px;
  }
  .carousel-track{
    display:flex;
    transition: transform .35s ease;
  }
  .carousel-track .slide{
    flex:0 0 100%;
    min-width:0;
  }
  .carousel-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
  }
  .carousel-btn{
    font-family:'IBM Plex Mono', monospace;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--ink);
    width:38px; height:38px;
    border-radius:50%;
    cursor:pointer;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .carousel-btn:hover{border-color:var(--amber); color:var(--amber);}
  .carousel-dots{
    display:flex;
    gap:8px;
  }
  .carousel-dots button{
    width:9px; height:9px;
    border-radius:50%;
    border:1px solid var(--line);
    background:transparent;
    cursor:pointer;
    padding:0;
  }
  .carousel-dots button.active{background:var(--amber); border-color:var(--amber);}

  .card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:6px;
    padding:22px 22px 24px;
    position:relative;
    overflow:hidden;
  }
  .card::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width:3px; height:100%;
    background:var(--card-accent, var(--amber));
  }
  .card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
  }
  .card-head h3{
    font-family:'IBM Plex Mono', monospace;
    margin:0;
    font-size:16px;
    letter-spacing:.02em;
  }
  .badge{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:4px 9px;
    border-radius:99px;
    border:1px solid currentColor;
    color:var(--card-accent, var(--amber));
    white-space:nowrap;
  }

  .ic-row{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--muted);
    margin-bottom:6px;
  }
  .ic-bar{
    flex:1;
    height:6px;
    background:#0d0f16;
    border-radius:99px;
    overflow:hidden;
    border:1px solid var(--line);
  }
  .ic-fill{height:100%; width:calc(var(--pct, 0) * 1%); background:var(--card-accent, var(--amber));}
  .ic-value{color:var(--ink); font-weight:600;}

  .diagnostico{
    font-size:12.5px;
    color:var(--muted);
    margin-bottom:16px;
  }

  .tape{
    display:flex;
    gap:1px;
    height:34px;
    margin-bottom:16px;
    background:#0d0f16;
    border:1px solid var(--line);
    border-radius:3px;
    padding:3px;
  }
  .tape span{
    flex:1;
    align-self:flex-end;
    height:calc(var(--barh, 0) * 1px);
    background:var(--card-accent, var(--amber));
    opacity:.75;
    min-height:2px;
    border-radius:1px 1px 0 0;
    cursor:help;
  }
  .tape span:hover{
    opacity:1;
  }

  .kv{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    color:var(--muted);
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    border-top:1px dashed var(--line);
  }
  .kv b{color:var(--ink); font-weight:600;}

  .cripto-box, .plano-box{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    line-height:1.6;
    word-break:break-all;
    background:#0d0f16;
    border:1px solid var(--line);
    border-radius:4px;
    padding:10px 12px;
    margin-top:8px;
    max-height:120px;
    overflow-y:auto;
  }
  .plano-box{color:var(--teal); border-color:#2c4a44;}
  .label-mini{
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:14px;
  }

  /* ---------------- Formulario de análisis ---------------- */
  .tabs{
    display:flex;
    gap:8px;
    margin-bottom:18px;
  }
  .tabs a{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    text-decoration:none;
    padding:9px 18px;
    border-radius:5px 5px 0 0;
    border:1px solid var(--line);
    border-bottom:none;
    color:var(--muted);
    background:#151824;
  }
  .tabs a.active{
    color:var(--ink);
    background:var(--panel);
    border-color:var(--amber);
    box-shadow: inset 0 2px 0 var(--amber);
  }

  form.analizar{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:0 6px 6px 6px;
    padding:24px;
    margin-bottom:10px;
  }
  form.analizar textarea, form.analizar input, form.analizar select{
    width:100%;
    background:#0d0f16;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:4px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    padding:10px 12px;
  }
  form.analizar textarea{min-height:100px; resize:vertical;}
  form.analizar label{
    display:block;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    margin:14px 0 6px;
  }
  .hint{
    font-size:12px;
    color:var(--muted);
    margin:8px 0 0;
  }
  .campo-row{display:flex; gap:14px;}
  .campo-row > div{flex:1;}

  fieldset.tipo-cifrado{
    border:none;
    padding:0;
    margin:14px 0 0;
    display:flex;
    gap:16px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    color:var(--muted);
  }
  fieldset.tipo-cifrado label{
    display:flex;
    align-items:center;
    gap:6px;
    text-transform:none;
    letter-spacing:0;
    margin:0;
    cursor:pointer;
  }
  fieldset.tipo-cifrado input{width:auto; accent-color:var(--amber);}

  .campos-clave{
    display:none;
    margin-top:6px;
  }
  .campos-clave.visible{display:block;}

  form.analizar button{
    font-family:'IBM Plex Mono', monospace;
    background:var(--amber);
    color:#141620;
    border:none;
    padding:10px 20px;
    border-radius:4px;
    font-weight:600;
    letter-spacing:.03em;
    cursor:pointer;
    margin-top:18px;
  }
  form.analizar button:hover{opacity:.9;}
  .error{
    color:var(--red);
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    margin-top:10px;
  }

  footer{
    text-align:center;
    color:var(--muted);
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    padding:50px 6vw 0;
  }

/* ---------------- Login ---------------- */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-card{
  width:100%;
  max-width:380px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:40px 32px 34px;
  text-align:center;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(217,164,65,.04);
  animation: login-in .35s ease;
}
@keyframes login-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
.login-icon{
  width:52px;
  height:52px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #2a2f3e, #14161f);
  border:1px solid var(--line);
  box-shadow:0 0 0 4px rgba(217,164,65,.08);
}
.login-card .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.14em;
  font-size:10.5px;
  color:var(--teal);
  text-transform:uppercase;
  margin-bottom:10px;
}
.login-card h1{
  font-family:'IBM Plex Mono', monospace;
  font-size:21px;
  margin:0 0 6px;
}
.login-sub{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--muted);
  margin:0 0 28px;
}
.login-card label{
  display:block;
  text-align:left;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:16px 0 6px;
}
.login-card input{
  width:100%;
  background:#0d0f16;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.login-card input::placeholder{color:#4a4f60;}
.login-card input:focus{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(217,164,65,.15);
}
.login-card button{
  width:100%;
  font-family:'IBM Plex Mono', monospace;
  background:var(--amber);
  color:#141620;
  border:none;
  padding:13px 20px;
  border-radius:8px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.03em;
  cursor:pointer;
  margin-top:26px;
  transition:transform .12s ease, opacity .12s ease;
}
.login-card button:hover{opacity:.92; transform:translateY(-1px);}
.login-card button:active{transform:translateY(0);}
.login-card .error{
  margin-top:16px;
  padding:10px 12px;
  background:rgba(199,107,94,.1);
  border:1px solid rgba(199,107,94,.35);
  border-radius:8px;
  text-align:left;
}