/*********************************************************/
/*CSS MODE - MRPSTUDIO 2026
/*********************************************************/
/*MENU DO SITE*/
.nav-desktop { display: none; gap: 2rem; }
.nav-link { color: var(--primary); text-decoration: none; font-weight: 500; transition: var(--transition); font-size: 0.875rem; position: relative; text-transform: uppercase;}
.nav-link:hover { color: var(--secondary); }
.nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--secondary); transition: width 0.3s ease; }
.nav-link:hover::after { width: 100%; }

/* Contact Desktop */
.contact-desktop { display: none; align-items: center; gap: 1.5rem; }
.phone-link { display: flex; align-items: center; gap: 0.5rem; color: var(--primary); text-decoration: none; font-weight: 600; transition: var(--transition); font-size: 1rem; }
.phone-link i {color: var(--whatsapp);}
.phone-link:hover { color: var(--secondary); }

/* Mobile Menu */
.menu-toggle { display: flex; flex-direction: column; gap: 0.375rem; background: none; border: none; cursor: pointer;  border: 0;}
.menu-toggle span { width: 1.5rem; height: 0.1875rem; background: var(--primary); border-radius: 0.125rem; transition: var(--transition);  border: 0;}

/* Mobile Navigation */
.nav-mobile { display: none; flex-direction: column; gap: 0.75rem; margin-top: 1rem; padding-bottom: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.nav-mobile.active { display: flex; }
.nav-link-mobile { display: block; color: #475569; text-decoration: none; font-weight: 500; transition: var(--transition); }
.nav-link-mobile:hover { color: var(--secondary); }

.mobile-contact { padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.75rem; }
.mobile-phone,
.mobile-email { display: flex; align-items: center; gap: 0.5rem; color: #475569; text-decoration: none; transition: var(--transition); }
.mobile-phone:hover,
.mobile-email:hover { color: var(--secondary); }

@media (min-width: 1024px) {
    .contact-desktop { display: flex; }
}
@media (min-width: 768px) {
    .nav-desktop { display: flex; }
    .menu-toggle { display: none; }
}