.top-header{
    width: 100%;
    padding: 10px 0; 
    color:#fff;
    
}

.header-row{ 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap: 16px; 
}

.brand{ 
    display:flex; 
    align-items:center; 
    gap: 12px; 
}

.brand-logo{ 
    height: 200px;
    width: 200px; 
}


.brand-text{ 
    line-height:1.05; 
}

.brand-sub{ 
    font-size: 12px; 
    opacity:.8; 
}

.brand-title{ 
    font-weight: 900; 
    font-size: 18px; 
}

.brand-title span{ 
    opacity:.9; 
}

.top-nav{ 
    display:flex; 
    gap: 22px; 
    align-items:center; 
}

.top-nav a{ 
    color: rgba(255,255,255,.85); 
    text-decoration:none; 
    font-weight:800; 
}


/* ===== Hover/Active do menu do topo (funciona em todas as páginas) ===== */
.top-nav a{
  position: relative;
  text-decoration: none;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  padding: 6px 2px;
}

/* linha embaixo (underline) */
.top-nav a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 3px;
  background: #ffd43b;
  border-radius: 999px;
  transition: width .22s ease;
}

/* hover */
.top-nav a:hover{
  color: #ffd43b;
}
.top-nav a:hover::after{
  width: 100%;
}

/* ativo (o seu .active) */
.top-nav a.active{
  color: #ffd43b;
}
.top-nav a.active::after{
  width: 100%;
}


@media (max-width: 900px){

  .header-row{ 
    flex-direction:column; 
    align-items:flex-start; 
    }   
}