/* ───────────── VulnsStack · Home ───────────── */
:root{
  /* Colores y radios */
  --bg:          #1f232b;
  --bg-soft:     #282c35;
  --primary:     #4ba5f2;
  --text:        #e1e8ec;
  --radius:      .75rem;

  /* Tipografía base */
  --ff: "Segoe UI", system-ui, sans-serif;
  --fs-body:     16px;       /* desktop base */
  --fs-scale:    1.2;        /* escala modular */
}

/* ---------- Reset */
*,*::before,*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ---------- Base */
html{
  font-size:clamp(15px, 0.65vw + 0.9rem, 18px); /* fluid 15-18px */
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

/* ---------- Utilidades */
.container{
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:clamp(1rem, 4vw, 2rem);
}
.btn{
  display:inline-block;
  padding:.45rem 1rem;
  font-weight:600;
  border-radius:var(--radius);
  text-decoration:none;
  cursor:pointer;
  transition:background .25s, color .25s;
}
.btn-primary{
  background:var(--primary);
  color:#fff;
  border:none;
}
.btn-outline-light{
  background:transparent;
  color:#fff;
  border:1px solid currentColor;
}
.btn-primary:hover,
.btn-outline-light:hover{
  filter:brightness(1.1);
}

/* ---------- Header / Navbar */
.header{
  background:var(--bg-soft);
}
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem;
}
.brand .logo{
  height:36px;
  width:auto;
}
.burger{
  --line-h:2px;
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
}
.burger-line{
  width:26px;
  height:var(--line-h);
  background:var(--text);
  border-radius:var(--line-h);
  transition:transform .3s;
}

/* Menu */
.menu{
  list-style:none;
  display:flex;
  gap:1.5rem;
  align-items:center;
}
.menu-link{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  transition:color .25s;
}
.menu-link:hover{
  color:var(--primary);
}

/* Account Buttons */
.btn-login      { background:var(--primary); color:#fff; }
.btn-account    { background:#6c757d;        color:#fff; }
.btn-logout     { background:none;           color:var(--text); border:none; }
.btn-logout:hover{ color:var(--primary); }

/* ---------- Hero */
.header-section{
  background:var(--bg-soft);
  padding-block:clamp(3rem, 12vw, 6rem);
  text-align:center;
}
.hero-isotipo{
  max-width:160px;
  width:40%;
  height:auto;
  margin-bottom:1.5rem;
}
.display-5{
  font-size:clamp(2rem, 4vw + 1rem, 3rem);
  font-weight:700;
}
.lead{
  font-size:clamp(1rem, 1.1vw + .9rem, 1.25rem);
  margin-top:.75rem;
  margin-bottom:1.5rem;
}

/* ---------- Cards */
.card-black,
.card-primary{
  padding:2rem 1.5rem;
  border-radius:var(--radius);
  text-align:center;
  transition:transform .3s;
}
.card-black{
  background:var(--bg-soft);
}
.card-black:hover{
  transform:translateY(-4px);
}
.card-black svg{
  width:42px;
  height:42px;
  fill:var(--primary);
  margin-bottom:.8rem;
}
.card-black h5{
  font-size:clamp(1.25rem, 1vw + 1rem, 1.35rem);
  font-weight:700;
}
.card-black p{
  font-size:.95rem;
}

.card-primary{
  background:var(--primary);
  color:#fff;
}
.step-num{
  font-size:clamp(1.6rem, 3vw + .5rem, 1.8rem);
  font-weight:700;
  margin-bottom:.9rem;
}

/* ---------- Section Titles */
.section-title{
  font-size:clamp(1.8rem, 2.5vw + 1.2rem, 2.4rem);
  font-weight:700;
  margin-bottom:1rem;
  color:#fff;
}

/* ---------- Dashboard Image */
.img-dashboard{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  object-fit:cover;
}

/* ---------- Call-to-Action */
.bg-cta{
  background:var(--bg-soft);
  text-align:center;
  padding:clamp(3rem, 10vw, 4rem) 1rem;
}
.bg-cta .btn{
  font-weight:600;
}

/* ---------- Footer */
.footer{
  background:var(--bg-soft);
  padding-block:2rem;
}
.menu-footer{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}
.menu-link-footer{
  color:var(--text);
  text-decoration:none;
  font-size:.9rem;
  transition:color .25s;
}
.menu-link-footer:hover{
  color:var(--primary);
}

/* ──────────── Responsiveness ──────────── */

/* ≤992 px — tablet & down -------------------------------- */
@media(max-width:992px){
  /* Burger visible */
  .burger{display:flex;}

  /* Off-canvas nav */
  .navbar-block{
    position:fixed;
    inset:0;
    background:var(--bg);
    padding:5rem 2rem;
    transform:translateX(100%);
    transition:transform .35s ease-in-out;
    z-index:1500;
  }
  .navbar-block.open{
    transform:translateX(0);
  }

  .menu{
    flex-direction:column;
    gap:1.2rem;
    align-items:flex-start;
  }
}

/* ≤576 px — phones --------------------------------------- */
@media(max-width:576px){
  .navbar{padding:.8rem;}
  .brand .logo{height:32px;}

  /* Equal-width card grid */
  .card-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.25rem;
  }

  .hero-isotipo{max-width:120px;}
}

/* ≥1200 px — large desktops ------------------------------ */
@media(min-width:1200px){
  .navbar{padding:1rem 2rem;}
  .container{padding-inline:2rem;}
}