:root {
  --bg: #0b0f14;
  --panel: #111722;
  --ink: #e6edf3;
  --muted: #9fb0c3;
  --acc: #6ee7ff;
  --acc2: #b892ff;
  --ok: #6ee7a6;
  --warn: #ffd166;
  --bad: #ff6b6b;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

#hacker {
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, #122036 0%, #0b0f14 60%), var(--bg);
  color: var(--ink);
  line-height: 1.6
}

#gridhack {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin-top: 22px
}

.card-hack {
  grid-column: span 12;
  background: var(--panel);
  border: 1px solid #1b2637;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow)
}

.card h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: #d7e3f1;
  letter-spacing: .4px;
  text-transform: uppercase
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.kpi {
  background: #0e1522;
  border: 1px solid #1b2637;
  border-radius: 14px;
  padding: 14px
}

.kpi .v {
  font-size: 1.2rem;
  font-weight: 700
}

.kpi .t {
  color: var(--muted);
  font-size: .9rem
}

.v {
  color: rgb(14, 117, 235);
  width: 100%;
}

.pill {
  display: inline-block;
  margin: 6px 6px 0 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #0e1522;
  border: 1px solid #273247;
  color: #cfe2f5;
  font-size: .9rem
}

.two {
  grid-column: span 12
}

code {
  background: #0e1522;
  border: 1px solid #273247;
  color: #a8d1ff;
  padding: 2px 6px;
  border-radius: 6px
}



h1 {
  margin: 10px 0 0;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  letter-spacing: .5px
}

.sub {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 1rem
}





ul {
  margin: 10px 0 0;
  padding-left: 18px
}

li {
  margin: 6px 0;
  color: rgb(14, 117, 235)
}

.callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(180deg, #0e1726, #0c131e);
  border: 1px dashed #2a3a55;
  border-radius: 16px;
  padding: 14px;
  margin-top: 8px;
  color: #b892ff;
}

.tag-ok {
  color: var(--ok)
}

.tag-warn {
  color: var(--warn)
}

.tag-bad {
  color: var(--bad)
}

.nav-link{
  width:100px;
}

#extras{
  display:flex; 
  flex-direction: row;  
  justify-content:center;
  flex-wrap: nowrap;

}
#extras li{
  margin-right:1rem;
}
/****MEDIA QUERY ***********************************************/


@media (max-width:500px) {
  nav {
    margin-top: 1rem;
  }
}

@media (min-width:501px) and (max-width:767px) {
  nav {
    margin-top: 2rem;

  }

  .navbar-nav li a {
    font-size: 12pt;
  }

}

@media (max-width: 767px) {
  #experiencia .card {
    border-left: 4px solid #0d6efd;
    border-radius: 0;
    margin-left: 1rem;
    position: relative;
  }

  #experiencia .card::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 1rem;
    width: 10px;
    height: 10px;
    background-color: #0d6efd;
    border-radius: 50%;
  }

  #experiencia .card-title {
    font-size: 1rem;
  }

  #experiencia ul li {
    list-style: none;
    margin-left: -0.5rem;
  }

  .navbar-nav li a {

    font-size: 12pt;

  }
  .nav-link{
    width:100%;
    border:1px solid black;
    text-align: center;
    font-weight: 300;
  }
}
@media(min-width:880px) {
  .two {
    grid-column: span 6
  }
}

@media(max-width:1024px){
   .nav-link{
    width:100%;
    border:1px solid black;
    text-align: center;
    font-weight: 300;
  }
  .nav-link:hover{
    width:100%;
    border:1px solid rgb(49, 8, 214);
    text-align: center;
    font-weight: 300;
  }
}


@media (min-width:767px) and (max-width:1024px) {
  nav {
    margin-top: 5rem;
  }

  .navbar-nav li a {
    font-size: 14pt;
  }

}

@media (min-width:1025px) and (max-width:1768px) {
  .navbar-nav li a {
    font-size: 12pt;
  }

}

@media (min-width:1769px) {

  .navbar-nav li a {
    font-size: 12pt;
  }
}






    /*
    *{box-sizing:border-box}
    html,body{height:100%}
   
    a{color:var(--acc)}
    .wrap{max-width:1100px;margin:0 auto;padding:28px}
    .header{
      position:relative;
      border:1px solid #1b2637;
      background:linear-gradient(180deg,#0f1624, #0c121b);
      padding:28px;
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden
    }
    .header:before{
      content:"";position:absolute;inset:-120px -120px auto auto;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(110,231,255,.35),transparent 60%);
      filter:blur(8px);opacity:.7;pointer-events:none
    }
    

    .footer{opacity:.8;color:var(--muted);text-align:center;margin:28px 0}

    .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    .btn{background:#0e1522;border:1px solid #273247;color:#cfe2f5;padding:9px 12px;border-radius:12px;cursor:pointer}
    .btn:hover{border-color:#3a4f72}

   

    */