/* =========================================================
HEADER / NAVBAR PREMIUM
========================================================= */

.header-modern{
background:rgba(255,255,255,0.95);
backdrop-filter:blur(12px);
box-shadow:0 6px 20px rgba(0,0,0,0.08);
position:sticky;
top:0;
z-index:999;
}

.header-modern .nav-container{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 0;
}

.logo img{
height:60px;
transition:0.3s;
}

.logo img:hover{
transform:scale(1.06);
}


/* =========================================================
MENU PRINCIPAL
========================================================= */

.main-menu{
display:flex;
gap:36px;
align-items:center;
list-style:none;
}

.main-menu a{
font-size:17px;
font-weight:600;
letter-spacing:0.4px;
color:#1f2937;
text-decoration:none;
position:relative;
padding:8px 0;
transition:all .25s ease;
}

.main-menu a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0;
height:3px;
background:linear-gradient(90deg,#f97316,#fb923c);
transition:0.3s;
border-radius:20px;
}

.main-menu a:hover{
color:#f97316;
transform:translateY(-1px);
}

.main-menu a:hover::after{
width:100%;
}

.main-menu a.active{
color:#f97316;
font-weight:700;
}

.main-menu a.active::after{
width:100%;
}


/* =========================================================
DROPDOWN MENU
========================================================= */

.dropdown-menu-parrent{
position:relative;
}

.dropdown-menu-parrent::after{
content:"";
position:absolute;
top:100%;
left:0;
width:100%;
height:15px;
}

.dropdown-menu{
position:absolute;
top:100%;
left:0;
background:#fff;
border-radius:10px;
padding:12px 0;
min-width:220px;
box-shadow:0 12px 30px rgba(0,0,0,0.08);
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:all .25s ease;
z-index:999;
}

.dropdown-menu-parrent:hover .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.dropdown-menu li a{
display:block;
padding:12px 18px;
font-size:15px;
font-weight:500;
letter-spacing:0.3px;
color:#374151;
transition:0.2s;
}

.dropdown-menu li a:hover{
background:#fff7ed;
color:#f97316;
padding-left:22px;
}


/* =========================================================
MOBILE MENU
========================================================= */

.mobile-toggle{
display:none;
font-size:26px;
cursor:pointer;
color:#333;
}

@media(max-width:992px){

.main-menu{
display:none;
flex-direction:column;
align-items:flex-start;
background:#fff;
position:absolute;
top:75px;
left:0;
width:100%;
padding:25px;
border-radius:0 0 12px 12px;
box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

.main-menu.active{
display:flex;
}

.mobile-toggle{
display:block;
}

.dropdown-menu{
display:none !important;
position:relative;
box-shadow:none;
margin-left:10px;
border-left:2px solid #eee;
opacity:1;
visibility:visible;
transform:none;
}

.dropdown-menu.active{
display:block !important;
}

}


/* =========================================================
ARTIGO
========================================================= */

.article-content{
font-size:18px;
line-height:1.9;
color:#333;
max-width:820px;
margin:auto;
}

.article-content h2{
margin-top:42px;
margin-bottom:12px;
font-size:28px;
font-weight:700;
color:#111;
border-left:4px solid #f97316;
padding-left:14px;
}

.article-content h3{
margin-top:30px;
font-size:22px;
font-weight:600;
}

.article-content p{
margin-bottom:18px;
}

.article-content ul{
margin:22px 0;
padding-left:22px;
}

.article-content li{
margin-bottom:10px;
}

.article-content blockquote{
background:#fff7ed;
border-left:4px solid #f97316;
padding:20px;
margin:30px 0;
border-radius:8px;
font-style:italic;
}


/* =========================================================
TIP BOX
========================================================= */

.tip-box{
background:#fff7ed;
border-left:4px solid #f97316;
padding:20px;
border-radius:8px;
margin:30px 0;
}

.tip-box strong{
color:#ea580c;
}


/* =========================================================
WARNING BOX
========================================================= */

.warning-box{
background:#fff7ed;
border-left:4px solid #f97316;
padding:20px;
border-radius:8px;
margin:30px 0;
}


/* =========================================================
RELATED ARTICLES
========================================================= */

.related-box{
background:#ffedd5;
padding:22px;
border-radius:10px;
margin:40px 0;
}

.related-box h3{
margin-bottom:12px;
}

.related-box a{
display:block;
margin-bottom:8px;
font-weight:500;
color:#f97316;
transition:0.2s;
}

.related-box a:hover{
text-decoration:underline;
transform:translateX(4px);
color:#ea580c;
}