:root{
  --nav-text:#142b44;
  --nav-accent:#e0552f;
  --border:#e9eef3;
  --nav-h:84px; /* mantiene altura de la barra */
}

.nav-wrapper{
  position: sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.nav-container{
  max-width:1200px; margin:0 auto;
  height:var(--nav-h);
  padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}

.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand img{
  height:250px;   /* fuerza un alto mayor al logo */
  width:auto;
  display:block;
  object-fit:contain;
}

/* menú desktop */
.menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:40px;
  margin-left:auto;
}
.menu a{
  position:relative; display:inline-block;
  color:var(--nav-text); text-decoration:none;
  padding:10px 0; font-weight:600;
  font-family:'Saira', sans-serif;
  font-style:italic; font-weight:500; font-size:18px; letter-spacing:0;
}
.menu a::after{
  content:""; position:absolute; left:0; bottom:-6px;
  height:3px; width:0; background:var(--nav-accent);
  transition:width .2s ease-in-out;
}
.menu a:hover::after{ width:100%; }
.menu a.active{ font-weight:700; }
.menu a.active::after{ width:100%; }

/* burger */
.burger{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.burger span{ display:block; width:26px; height:2px; background:#333; margin:5px 0; }

/* responsive */
@media (max-width: 992px){
  .burger{ display:block; }

  .brand img{
    height:140px;
  }

  .menu{
    position:absolute;
    top:var(--nav-h);
    right:16px; left:auto;
    background:#fff; border:1px solid var(--border);
    border-radius:12px; padding:12px 16px;
    box-shadow:0 10px 20px rgba(0,0,0,.08);
    display:none; flex-direction:column; gap:12px;

    width:min(260px, calc(100vw - 32px));
    max-width:calc(100vw - 32px);
    box-sizing:border-box;
  }
  .menu.open{ display:flex; }
}

/* Sugerencia: que las secciones respeten el alto del navbar al hacer scroll */
section[id]{ scroll-margin-top: calc(var(--nav-h) + 12px); }

/* Móviles chicos */
@media (max-width: 640px){
  .brand img{
    height:150px;
  }
}