/* ====== Variables de layout ====== */
:root{
  --nav-h: 56px;        /* alto fijo de la barra */
  --logo-scale: 1.5;    /* 84px visual / 56px barra = 1.5 */
  --nav-bg: #505050;
  --nav-fg: #ffffff;
}

/* Compensa navbar fixed para que no tape contenido */
body { padding-top: var(--nav-h); }

/* ====== Navbar base ====== */
.navbar{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 999;
  background-color: var(--nav-bg);
  color: var(--nav-fg);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; box-sizing: border-box;
}

/* Marca / Logo */
.navbar .navbar-brand{
  display: inline-flex; align-items: center;
  height: var(--nav-h); text-decoration: none; color: inherit;
}
.navbar .brand-logo{
  height: var(--nav-h); width: auto; display: block;
  transform: scale(var(--logo-scale));        /* LOGO grande sin crecer la barra */
  transform-origin: left center;              /* escala desde la izquierda */
}

/* ====== Menú (desktop) ====== */
.navbar .nav-menu{
  display: flex; gap: 16px;
  list-style: none; margin: 0; padding: 0;
}
.navbar .nav-menu li { margin: 0; }
.navbar .nav-menu a{
  color: var(--nav-fg); text-decoration: none;
  display: inline-flex; align-items: center;
  height: var(--nav-h); padding: 0 8px;
  position: relative; transition: color .25s ease;
}
.navbar .nav-menu a:hover { color: #ddd; }
.navbar .nav-menu a::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:0%; height:2px; background: #fff; transition: width .25s ease;
}
.navbar .nav-menu a:hover::after{ width:100%; }

/* ====== Botón hamburguesa ====== */
.nav-toggle{
  display: none;            /* visible solo en móvil */
  background: transparent; border: 0; padding: 8px; margin: 0;
  cursor: pointer; outline: none;
}
.nav-toggle span{
  display: block; width: 24px; height: 2px;
  background: var(--nav-fg); margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* ====== Modo móvil ====== */
@media (max-width: 768px){
  :root{ --nav-h: 52px; --logo-scale: 1.35; } /* ajusta si quieres */

  .nav-toggle{ display: inline-block; }

  /* El menú se pliega bajo la barra */
  .navbar .nav-menu{
    position: fixed; left: 0; right: 0; top: var(--nav-h);
    background: var(--nav-bg);
    flex-direction: column; gap: 0;
    border-bottom: 1px solid rgba(255,255,255,.15);
    max-height: 0; overflow: hidden;           /* oculto por defecto */
    transition: max-height .25s ease;
  }
  .navbar .nav-menu li{ border-top: 1px solid rgba(255,255,255,.10); }
  .navbar .nav-menu a{ height: 48px; padding: 0 16px; }

  /* Al abrir el menú desde JS añadimos .is-open al .navbar */
  .navbar.is-open .nav-menu{ max-height: 60vh; } /* suficiente para mostrar items */

  /* Animación del botón hamburguesa al abrir */
  .navbar.is-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .navbar.is-open .nav-toggle span:nth-child(2){ opacity: 0; }
  .navbar.is-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}